@charset 'utf-8';

/* 22.02.21 COMMON CSS - NJH */

/* 색상 변수 설정 */
:root {
  --inactive :#B1B1B1;
  --light-gray :#F1F1F1;
  --line : #E4E4E4;
  /* --line : #E7EAF3; */
  --middle-gray : #BCC1CE;
  --tab_menu : #F9F9F9;
  --input :#F4F4F4;
  --main-gray:#CACACA;
  --dark-gray : #7E7E7E;
  --font-gray : #707070;
  --black : #222;
  --orange : #2942ED;
  --orange-50per: #fec190; /*메인컬러의 50%*/
  --orange-10per: #fff2e5; /*메인컬러의 10%*/
  --red: #fd3a1d;
  --red-hover: #c92f18;
  --red-10per: #feeae8; /*red컬러의 10%*/
  --orange-gradient: linear-gradient(to bottom, #ff8300, #fd3a1d);
  --blue :#5B76F9;
  --main:#2942ED;
}


/* 웹폰트 */
/* POPPINS(영문) */
@font-face {
  font-family: "poppins";
  src: url("./font/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "poppins";
  src: url("./font/Poppins-Medium.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "poppins";
  src: url("./font/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "poppins";
  src: url("./font/Poppins-Bold.ttf") format("truetype");
  font-weight: 800;
}

/* YESEVAONE(영문) */
@font-face {
  font-family: "yesevaone";
  src: url("./font/YesevaOne-Regular.ttf") format("truetype");
  font-weight: 400;
}

/* Spoqa Han Sans Neo(한글) */
@font-face {
  font-family: "Spoqa_Han_ans_Neo";
  src: url("./font/SpoqaHanSansNeo-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Spoqa_Han_ans_Neo";
  src: url("./font/SpoqaHanSansNeo-Medium.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "Spoqa_Han_ans_Neo";
  src: url("./font/SpoqaHanSansNeo-Bold.ttf") format("truetype");
  font-weight: 800;
}

/* 글자색상 지정 공통 클래스 */
.white_font {color: #fff;}
.gray_font {color: var(--dark-gray);}
.main_gray_font {color: var(--main-gray);}
.black_font {color: #222;}
.blue_font {color: var(--blue);}
.main_font {color: var(--main);}
.red_font {color: var(--red);}
.orange_font {color: var(--orange);}
.time_red {color:#ff0000;}
.green_font{color:#006600;}

.eng {font-family: "poppins";}

/* 폰트 크기 공통클래스 */
.font_10 {font-size: 10px;}
.font_12 {font-size: 12px;}
.font_14 {font-size: 14px;}
.font_16 {font-size: 16px;}
.font_18 {font-size: 18px;}
.font_20 {font-size: 20px;}
.font_22 {font-size: 22px;}
.font_24 {font-size: 24px;}
.font_26 {font-size: 26px;}

/* 폰트 굵기 공통클래스 */
.regular {font-weight: 400;}
.medium {font-weight: 600;}
.semi_bold {font-weight: 700;}
.bold {font-weight: 800;}

/* 텍스트 정렬 */
.txt_center {text-align: center;}
.txt_justify { text-align: justify; }
p {line-height: 1.6;}

/* sub 항목 타이틀 */
.sub_item_tit {font-size: 14px; font-weight: 600;}

/* market > market_main 가격 font 설정 2022.03.17 NJH */
.price_font {font-size: 16px; font-weight: 800; color: var(--orange);}

/* flex 공통클래스 */
.flex {display: flex; align-items: center;}
.flex_column {display: flex; flex-direction: column;}
.space_around {justify-content: space-around;}
.space_evenly {justify-content: space-evenly;}
.flex_center {display: flex; justify-content: center; align-items: center;}
/* align-items에 따른 분류(justify-content: space_between 공통 적용) */
.flex_between {display: flex; justify-content: space-between; align-items: center;}
.flex_start {display: flex; justify-content: space-between; align-items: flex-start;}
.flex_end {display: flex; justify-content: space-between; align-items: flex-end;}
.flex_start_start {display: flex; justify-content: flex-start; align-items: flex-start;}
.flex_end_end {display: flex; justify-content: flex-end; align-items: center;}
.no_flex {flex: none;}

/* 간격 공통클래스(padding/margin) */
.p_LR_20 {padding: 0 20px;}
.p_B5 {padding-bottom: 5px;}
.p_B10 {padding-bottom: 10px;}
.p_B20 {padding-bottom: 20px;}
.p_B30 {padding-bottom: 30px;}
.p_B40 {padding-bottom: 40px;}
.p_T5 {padding-top: 5px;}
.p_T10 {padding-top: 10px;}
.p_T20 {padding-top: 20px;}
.p_T30 {padding-top: 30px;}
.p_T40 {padding-top: 40px;}

.m_R5  {margin-right: 5px;}
.m_R10  {margin-right: 10px;}
.m_R20  {margin-right: 20px;}
.m_L5 {margin-left: 5px;}
.m_L10  {margin-left: 10px;}
.m_L20  {margin-left: 20px;}
.m_L30  {margin-left: 30px;}
.m_L40  {margin-left: 40px;}
.m_L50  {margin-left: 50px;}
.m_L60  {margin-left: 60px;}
.m_T5 {margin-top: 5px;}
.m_T10 {margin-top: 10px;}
.m_T20 {margin-top: 20px;}
.m_T30 {margin-top: 30px;}
.m_B5 {margin-bottom: 5px;}
.m_B10 {margin-bottom: 10px;}
.m_B20 {margin-bottom: 20px;}
.m_B30 {margin-bottom: 30px;}
.m_B84 {margin-bottom: 84px;}

/* 2022.04.11 display:none 클래스 추가 */
.d_none {display: none;}

/* 2022.05.14 width:100% 추가 : pyo*/
.w_100{width:100%;}

body {background-color: #fff; width: 100%; color: #000;}
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {padding-right:0!important;}

/* 22.03.25 iOS, safari 브라우저 팝업창 배경 html, body 스크롤 방지 수정 */
body.hidden {overflow: hidden; width: 100%;}

/* iOS / safari 브라우저일 경우 */
html.hidden_apple {position:static; height: 100vh;}
body.hidden_apple {
  position: fixed;
  touch-action: none;
    -webkit-webkit-touch-action: none;
    -moz-webkit-touch-action: none;
    -ms-webkit-touch-action: none;
    -o-webkit-touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    /* 이외의 브라우저 */
    overscroll-behavior: none;
}

/* viewport 보다 콘텐츠 길이가 작을 경우 */
.viewport {height: calc(100vh - 50px);}

/* wrapper 클래스 설정 */
/* 기본 양옆 padding값 22px */
.wrapper {width: 100%; max-width: 800px; margin: 0 auto; background-color: #fff; font-family: 'Spoqa_Han_ans_Neo'; color: var(--main-gray); font-weight: 400;}
.wrapper.black {width: 100%; max-width: 800px; margin: 0 auto; background-color: #000; font-family: 'Spoqa_Han_ans_Neo'; color: var(--main-gray); font-weight: 400;}
.viewport_web {height: calc(100vh - 50px);}
.min_height {min-height:100vh;}
.min_viewport{min-height: calc(100vh - 50px);}

/* header */
header {position: fixed; top:0; left:50%; transform: translateX(-50%); width:100%; max-width: 800px; height: 50px;margin: 0 auto; padding: 0 10px; background-color: rgba(255,255,255,0.5); color: #fff; font-size: 20px; font-weight: 800; z-index: 200; border-bottom:1px solid rgba(255,255,255,0.2); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);}
header h1 {font-size: 20px; font-weight: 800;}
header .right {line-height: 50px;}
header.flex_between .left {line-height: 50px;}
header .logo {height: 30px;}
.header_box {position: relative; width:100%; max-width:800px; }
/* header 자식요소가 1개~2개인 경우 => header 태그에 flex_center 적용*/
header.flex_center a > img {margin-bottom: -5px;}
header.flex_center .left {position: absolute; left:10px; line-height: 50px;}
header.flex_center .right {position: absolute; right:10px; line-height: 50px;}
/* header 자식요소가 3개인 경우 => header 태그에 flex_between 적용*/


/* 하단 메인 탭 메뉴 main_tab_menu */
.main_tab_box {position: fixed; bottom: 0; width: 100%; max-width:800px; height: 60px; padding: 0 20px; background-color: #fff; z-index: 100; }
.main_tab_box li{height: 60px; }
.main_tab_box li a{display: block; height: 60px; padding: 40px 10px 0;  background-position: center 14px; background-repeat: no-repeat; font-size: 12px; font-weight: 700; color:var(--dark-gray); text-align: center; line-height: 14px; font-family: 'poppins';}
.main_tab_box li.active a {color:#000;}
.main_tab_box li:nth-child(1) a {background-image: url(../img/layout/svg/icon_home.svg);}
.main_tab_box li:nth-child(2) a {background-image: url(../img/layout/svg/icon_drops.svg);}
.main_tab_box li:nth-child(3) a {background-image: url(../img/layout/svg/icon_market.svg);}
.main_tab_box li:nth-child(4) a {padding: 40px 0 0; background-image: url(../img/layout/svg/icon_create.svg);}
.main_tab_box li:nth-child(5) a {background-image: url(../img/layout/svg/icon_more.svg); background-position: center 18px;}
.main_tab_box li:nth-child(1).active a {background-image: url(../img/layout/svg/icon_home_black.svg);}
.main_tab_box li:nth-child(2).active a {background-image: url(../img/layout/svg/icon_drops_black.svg);}
.main_tab_box li:nth-child(3).active a {background-image: url(../img/layout/svg/icon_market_black.svg);}
.main_tab_box li:nth-child(4).active a {background-image: url(../img/layout/svg/icon_create_black.svg);}
.main_tab_box li:nth-child(5).active a {background-image: url(../img/layout/svg/icon_more_black.svg);}

/* //main_tab_menu */

/* 2022.03.28 cursor:pointer 속성 클래스 추가 : NJH */
.cursor_p {cursor:pointer;}

/* 22.04.05 스위트알럿 커스텀 추가 : pyo */
.pop_swal_txt {word-break: break-all; font-size:18px; padding:1.25rem 1.25rem 0rem 1.25rem; font-weight:600; color:var(--black);}
.swal2-confirm.nft_create_btn { font-size: 16px; font-weight: 800; border-radius: 10px; background-color: var(--main);}

/* 22.05.13 스위트알럿 커스텀 추가 : NJH */
.sweet_confirm_btn, .sweet_cancel_btn {width:49%; height: 58px;text-align: center; font-size:16px; font-weight:800;background-color: var(--main); color: #fff; border: 1px solid var(--main); border-radius:10px;}
.sweet_confirm_btn {order: 1;}
.sweet_cancel_btn {order: 0; margin-right: 2%; background-color: #fff; color: var(--main); }
.swal2-popup {border-radius:10px!important; font-family: 'Spoqa_Han_ans_Neo'!important;}

/* 23.06.08 sweetalert button custom */
.swal2-actions {flex-wrap: nowrap;}
.swal2-show {padding-left:20px!important; padding-right:20px!important; padding-bottom:20px!important;}

/* 2022.04.11 button 폰트  속성 클래스 추가 : NJH */
button {font-family: 'Spoqa_Han_ans_Neo';}

/* 2022.05.03 word-break 공통 클래스 추가 : NJH */
.word_break60 {max-width: 60%; word-break: break-all;}

/* 2022.11.01 iOS에서 span태그 block요소로 인식되는 오류 수정 white-space */
.no_wrap {white-space:nowrap;}

.footer_txt {font-size: 12px; font-weight: 600; font-family: 'Spoqa_Han_ans_Neo';}
.footer_box {background-color: var(--input);}

/* 2023.05.19 검색창 input 기본 레이아웃 default 설정 - 브라우저별 자동 설정된 x 버튼 비활성화 */
input[type=search] {padding-right: 10px;}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 20px; height: 20px; background: url('../img/layout/svg/icon_delete_input.svg') center center no-repeat;
  cursor: pointer;
}

/*230523 about / roadmap footer logo */
.footer_logo img{height: 28px;}

/* 2023.09.01 word-break 공통 클래스 추가 : NJH */
.word_break_all {word-break: break-all;}


@media (max-width: 567px){
  .viewport_web {height: unset;}
  header.enter a {right:10px;}
  header.enter_left a {left:10px;}
  header.sub { padding: 0 10px; }
}