@charset "UTF-8";

html {
  scroll-behavior: smooth;
}

a { outline: none;}
select {outline: none;}

/* 변수 설정 */
:root {
  --header : #000000;
  --main : #0094FA;
  --bg :#161B22;
  --bg_active :#1E2329;
  --bg_inactive:#293038;
  --bg_pop:#212529;
  --input_box :  rgba(0,0,0,0.2);
  --inactive :#848E9C;
  --line : #787B7E;
  --light-bg : #FAFBFA;
  --light-gray :#BEC8CF;
  --middle-gray : #BCC1CE;
  --tab_menu : #F9F9F9;
  --dark-gray : #89949C;
  --active : #FF3100;
  --orange : #FF8300;
  --blue :#5B76F9;
  --plus : #D54841;
  --minus : #4A73D8;
  --sell : #F7FAFF;
  --buy : #FFF5F5;
  --select : #161B22;
  --fushia:#FF00F5;
  --title-font : 24px;
  --transition-time: 300ms;
  --left-right-padding : 20px;
}


/* 웹폰트 */
/* NOTO SANS KR(한글) */
@font-face {
  font-family: "noto_sans";
  src: url("./font/NotoSansKR-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "noto_sans";
  src: url("./font/NotoSansKR-Medium.otf") format("opentype");
  font-weight: 600;
}
@font-face {
  font-family: "noto_sans";
  src: url("./font/NotoSansKR-Bold.otf") format("opentype");
  font-weight: 800;
}

/* 글자색상 지정 공통 클래스 */
.gray_font {color: var(--dark-gray);}
.black_font {color: #000;}
.blue_font {color: #0094FA;}
.red_font {color: #ff0000;}
.time_font {color: #ff3100;}
.orange_font {color: #FF8300;}
.pink_font {color: var(--fushia);}
.plus {color:#D54841;}
.minus {color:#4A73D8;}
.text_white {color:#fff;}
/* 영문폰트 지정 */
.eng {font-family: "montserrat";}

/* 폰트 크기 공통클래스 */
/* 기본 폰트 크기 설정은 body에 지정하는 것을 권장 */
.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_30 {font-size: 30px;}

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

/* 텍스트 정렬 */
.txt_left { text-align: left; }
.txt_right { text-align: right; }
.txt_center {text-align: center;}
.txt_justify { text-align: justify; }

/* letter-spacing */
.letter_5 {letter-spacing: -0.5px;}

/* p태그 line-height 설정 */
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_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; gap: 10px;}
.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;}

/* 간격 공통클래스(padding/margin) */
.p_LR_10 {padding: 0 10px;}
.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;}
.p_T70 {padding-top: 70px;}

.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_T5 {margin-top: 5px;}
.m_T-1 {margin-top: -1px;}
.m_T-3 {margin-top: -3px;}
.m_T-5 {margin-top: -5px;}
.m_T10 {margin-top: 10px;}
.m_T20 {margin-top: 20px;}
.m_T30 {margin-top: 30px;}
.m_T50 {margin-top: 50px;}
.m_T70 {margin-top: 70px;}
.m_B5 {margin-bottom: 5px;}
.m_B-3 {margin-bottom: -3px;}
.m_B-5 {margin-bottom: -5px;}
.m_B10 {margin-bottom: 10px;}
.m_B20 {margin-bottom: 20px;}
.m_B30 {margin-bottom: 30px;}
.m_B70 {margin-bottom: 70px;}

/* display 관련 클래스 */
.d_none {display: none;}
.d_block {display: block;}

/* position 관련 클래스 */
.pos_relative {position: relative;}
.pos_absolute {position: absolute;}

/* 배경색 지정 */
body {background-color: var(--bg); width: 100%;}
/* body {background-color: var(--bg);} */

/*iOS, safari 브라우저 팝업창 배경 html, body 스크롤 방지 */
/* IE, Chrome 브라우저일 경우 */
body.hidden {overflow: hidden; overscroll-behavior: none;}

/* 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;
}

/* wrapper 클래스 설정 */
.wrapper {width: 100%; margin: 0 auto; background-color: var(--bg); font-family: 'noto_sans'; color: #000; font-weight: 400;}
.min_h {min-height: calc(100vh - 50px); padding-top: 50px;}
.vh_100 {min-height: 100vh;}
.flex_column {display: flex; flex-direction: column; justify-content: center;}
.gray_bg {background-color: var(--bg);}
/* .wrapper.login {margin-top: 50px;} */

/* header */
header {position: fixed; top:0; left:0; width:100%; height: 50px;margin: 0 auto; padding: 0 10px; background-color: var(--bg_active); font-size: 20px; font-weight: 800; z-index: 100; border-bottom:1px solid var(--bg_inactive);}
/* header {position: fixed; top:0; left: 50%; width:100%;  transform: translateX(-50%); height: 50px; padding: 0 20px; background-color: #fff; font-size: 20px; font-weight: 800; z-index: 100; border-bottom:1px solid var(--line);} */
header .right {line-height: 50px;}
header.flex_between .left {padding-top:10px; line-height: 40px;}
header .logo {height: 50px; line-height: 50px;}
header .logo img{height: 40px;}
/* header 자식요소가 1개~2개인 경우 => header 태그에 flex_center 적용*/
/* .header_child_element {flex: none;} */
header.flex_center a > img {margin-bottom: -12px;}
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_cont {display: none; position: fixed; bottom: 0; left:0; width: 100%; height: 70px; background-color: #fff; border-top:1px solid var(--line);}
.main_tab_box {position: absolute; width: 100%; max-width:800px; height: 70px; padding: 0 20px; background-color: #fff; z-index: 100;  }
.main_tab_box li{ width: calc((100% - 40px) / 4 - 10px); height: 70px; }
.main_tab_box li a{display: block; height: 70px; padding: 10px 0; text-align: center; font-size: 12px; font-weight: 600; color:var(--dark-gray); text-align: center; }
.main_tab_box li.active a {color:var(--active);}
.main_tab_box li a span {width: 32px; height: 32px; margin: 0 auto;  background-position: center; background-repeat: no-repeat;}
.main_tab_box li:nth-child(1) a span {background-image: url(../img/layout/icon_home.svg);}
.main_tab_box li:nth-child(2) a span {background-image: url(../img/layout/icon_swap.svg);}
.main_tab_box li:nth-child(3) a span {background-image: url(../img/layout/icon_dep_with.svg);}
.main_tab_box li:nth-child(4) a span {background-image: url(../img/layout/icon_invest.svg);}
.main_tab_box li:nth-child(5) a span {background-image: url(../img/layout/icon_asset.svg);}
.main_tab_box li:nth-child(1).active a span {background-image: url(../img/layout/icon_home_active.svg);}
.main_tab_box li:nth-child(2).active a span {background-image: url(../img/layout/icon_swap_active.svg);}
.main_tab_box li:nth-child(3).active a span {background-image: url(../img/layout/icon_dep_with_active.svg);}
.main_tab_box li:nth-child(4).active a span {background-image: url(../img/layout/icon_invest_active.svg);}
.main_tab_box li:nth-child(5).active a span {background-image: url(../img/layout/icon_asset_active.svg);}
/* //main_tab_menu */

/* cursor:pointer 속성 클래스 */
.cursor_p {cursor:pointer;}

/* button 폰트 속성 클래스 */
button {font-family: 'noto_sans';}

/* word-break */
.word_break_all {word-break: break-all;}
.word_break_word {word-break: break-word;}

/* 22.09.21 web mode - header - 메뉴 활성화 */
.header_box {width:100%; height: 50px; max-width: 1300px;}

/* 22.09.22 web mode - footer */
footer {width: 100%; background-color: #000; color:#fff; }
.footer_logo img{height: 50px;}
.footer_box {max-width: 1300px; padding: 50px 20px 30px; margin: 0 auto;}
.footer_list {display: flex; justify-content:space-between; flex-wrap:wrap; padding-bottom: 20px; padding-top: 20px;}
.footer_list li {margin-right: 10px; margin-bottom: 20px;}
.footer_list li span:first-child {margin-right: 10px;}
.footer_list li span:last-child , .copyright, .footer_box p span:first-child {color:#959595;}

/* header menu */
.main_menu { width: 100%;}
.main_menu li {width: auto; position: relative; color:#fff; transition:color 300ms ease; text-wrap-mode: nowrap; }
.main_menu > li > a {display: block; padding:0 20px; margin:0 10px; line-height: 50px;}
.main_menu li:hover {color:var(--main);}
.lnb_list {position: absolute; top:100px; left:50%; transform:translateX(-50%); width:160px; padding: 10px 0; background-color: var(--bg_active); border-radius: 10px; text-align: center; z-index: -1; opacity:0; visibility:hidden; transition: z-index 300ms ease, opacity 300ms ease, top 300ms ease;}
.lnb_list.active {z-index:100; opacity:1; top:50px; visibility:visible; }
.lnb_list li {padding: 0;}
.lnb_list li a {display: block; padding:10px 0; font-size: 16px;}
.logout_btn, .login_sign_up {flex:none; margin-left: auto; cursor:pointer; margin-right:4px;}
.logout_btn {line-height: 50px;}
.logout_btn img {height: 24px; margin-bottom: -1px;}
.hamburger_btn {display: none;width: 18px;height: 18px;cursor: pointer;}
.menu_close_btn {display: none;}
.login_sign_up span {padding:0 5px; color:#fff; font-size: 14px;}


/* 250513 언어선택 남민우*/
.choice_country {position: relative; width: 100%; max-width:170px; min-width:170px; height: 50px;  display: flex; align-items: center; justify-content: center;}
.choice_country_wbox {background: var(--white); border: 1px solid #c6c9cb; display: flex; align-items: center; border-radius: 6px; justify-content: space-between;  padding:10px; cursor:pointer; outline: none;}
.choice_country_wbox span {font-size:14px; font-weight: 500; color: white;}
.translation_links{ padding: 10px; border-radius: 6px; background: var(--bg_active); position: absolute; top:50px; left:0; width:100%; max-width:170px; z-index: 500;}
.translation_links li{padding:5px; border-bottom: 1px solid #c6c9cb;}
.translation_links li:last-child{border-bottom:none;}
.translation_links li a {display: flex; align-items: center; gap:10px; color:white; font-weight: 700;}
.translation_links li a span:nth-child(2) {font-size:14px;}
.translation_links .flag{display: inline-block; width: 30px; height: 20px; margin-right: 10px; background-repeat: no-repeat; background-position: center; background-size: 100%;}
.country_img {display: inline-block; width: 30px;height: 20px; margin-right: 10px;}
.country_ko {background: url("../img/country/korea.svg");}
.country_en {background: url("../img/country/united_states.svg");}
.country_ja {background: url("../img/country/japan.svg");}
.country_zh {background: url("../img/country/china.png");}
.country_th {background: url("../img/country/thailand.svg");}
.country_vi {background: url("../img/country/vietnam.svg");}
.country_pt {background: url("../img/country/portugal.svg");}
.country_de {background: url("../img/country/germany.png");}
.country_fr {background: url("../img/country/france.svg");}
.VIpgJd-ZVi9od-ORHb-OEVmcd {display: none !important;}
.goog-te-gadget .goog-te-combo {border:1px solid #c6c9cb; padding:10px; border-radius: 6px; width:100%;}
body {top:0 !important}
#google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed {display: flex; align-items: center;}
.VIpgJd-ZVi9od-xl07Ob-OEVmcd {overflow: auto; width:unset !important;}
.VIpgJd-ZVi9od-vH1Gmf {overflow: auto; width:unset !important;}
.VIpgJd-ZVi9od-xl07Ob-OEVmcd body {overflow: scroll;}

@media (max-width: 1100px) {
  .main_menu > li > a {font-size: 16px; padding: 0 15px; margin: 0 5px;}
}

@media (max-width:900px){ /*iPad pro 1024 × 1366 */

  .main_tab_cont {display: flex;}
  .main_menu_box { position: fixed; right:-100%; top:0; flex-direction:column; width:30%; max-width:260px; min-width:200px; height: 100%; padding:100px 20px 0; background-color: var(--bg_active); border-left:1px solid var(--line); box-shadow: 0 4px 10px rgba(0,0,0,0.8); z-index: -1; transition:right 300ms ease, z-index 300ms ease;}
  .main_menu_box.active {right:0; display: flex; z-index:110; transition:right 300ms ease, z-index 300ms ease;}
  .main_menu {flex-direction: column;}
  .main_menu li {padding: 0;}
  .main_menu > li:nth-child(n+2) {width: 100%; border-top:1px solid var(--line);}
  .main_menu li a{padding:0; font-size: 18px; white-space: nowrap;}
  .lnb_list {position: static; transform:none; padding: 0; border-radius:0; border-top:1px solid var(--line); text-align: left; z-index: 100; opacity:1; visibility:unset; }
  .lnb_list li {padding:10px;}
  .lnb_list li a {font-size: 14px;}
  .login_sign_up span{font-size: 12px;}
  
  .translation_links .notranslate { padding: 10px 0;}


  /* mobile - hamburger button */
  .hamburger_btn, .menu_close_btn {display: block; flex: none; margin-left:20px; margin-right: 0;}
  .hamburger_btn span, .menu_close_btn span {display: block;width: 18px;height: 2px;background-color: var(--main);transition: background-color 0.5s linear, transform 0.5s;}
  .hamburger_btn span:last-child, .menu_close_btn span:last-child {padding-bottom: 0;}
  .hamburger_btn span:nth-child(1) {transform: matrix(1, 0, 0, 1, 0, 0);transform-origin: 0 0;}
  .hamburger_btn span:nth-child(2) {transform: matrix(1, 0, 0, 1, 0, 5);transition: width 0.3s;}
  .hamburger_btn span:nth-child(3) {transform: matrix(1, 0, 0, 1, 0, 10);transform-origin: 0 100%;}
  .hamburger_btn.active span:nth-child(1){transform: matrix(0.9091, 0.9091, -0.8081, 0.7071, 2, 0.5);}
  .hamburger_btn.active span:nth-child(2) {width: 0;}
  .hamburger_btn.active span:nth-child(3) {transform: matrix(0.9091, -0.9091, 0.8081, 0.7071, 2, 12.5);}

  .menu_close_btn {position: absolute; right:20px; top:20px; width: 20px; height: 20px; padding-top: 10px; margin:0; cursor:pointer;}
  .menu_close_btn span:first-child {transform: matrix(0.9091, 0.9091, -0.8081, 0.7071, 2, 0.5);}
  .menu_close_btn span:last-child {transform: matrix(0.9091, -0.9091, 0.8081, 0.7071, 2, -1);}

  .footer_list {display: block;}
  .footer_list li {margin: 0;}
  .footer_list li span:first-child {width: 80px; margin-right: 10px;}
  .footer_list li span:last-child {width: calc(100% - 90px);}
}

.swal2-shown {padding-right:0 !important;}

hr {background: #ededed; height:1px; border:0;}

@media(max-width:499px){
  .main_menu li a{font-size: 14px; }
}