/* font */
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
/* //font */

:root {
  --pr : #0075FF;
  --yellow : #F8DE36;
  --black_20 : #202632;
  --gray_88 : #88909B;
  --gray_4e : #4E5968;
  --gray_b0 : #B0B8C1;
  --gray_b0b : #b0b7bf;
  --gray_d1 : #d1dae6;
  --gray_e5 : #e5e7ea;
  --wt : #fff;
  --wt_f9 : #F9FAFB;
  --wt_e5 : #E5E7EA;
  --wt_ea : #EAEFF8;

  /* 추가 260106 */
  --bg : #F9FAFB;
  --bg2 : #f1f6fb;
  --black : #000; 
  --black_26 : #262626; 
  --gray_e5 : #E5E5E5;
  --gray_c0 : #C0C0C0;
  --gray_72 : #727272;
}

/* 추가 260106 bg */
.pr {background : #0075FF !important;}
.bg {background : #F9FAFB !important;}
.black {background : #000 !important;}
.black_26 {background : #262626 !important;}
.gray_4e {background : #4E5968 !important;}
.gray_e5 {background : #E5E5E5 !important;}
.gray_c0 {background : #C0C0C0 !important;}
.wt {background : #fff !important;}

/* 추가 260106 color */
.pr_c {color : #0075FF !important;}
.bg_c {color : #F9FAFB !important;}
.black_c {color : #000 !important;}
.black_26_c {color : #262626 !important;}
.gray_4e_c {color : #4E5968 !important;}
.gray_e5_c {color : #E5E5E5 !important;}
.gray_c0_c {color : #C0C0C0 !important;}
.wt_c {color : #fff !important;}

input,textarea,select,button,dt,dd,a {font-family: 'Pre';}
button,a {cursor: pointer;}
html,body {scroll-behavior: smooth;}
body {font-family: 'Pre';}
.container {max-width: 1100px; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box;}
section {padding: 200px 0;}
.new_sec2 {padding: 100px 0;}
.new_sec2.sec1 {padding-top: 50px;} 

/* tit-box */
.tit-box {margin-bottom: 80px; text-align: left;}
.tit-box .sub {margin-bottom: 20px; font-size: 30px; font-weight: bold; line-height: 1.2; color: var(--pr);}
.tit-box .tit {margin-bottom: 30px; font-size: 50px; font-weight: 800; line-height: 1.2; color: var(--black_20); word-break:keep-all}
.tit-box .txt {font-size: 22px; font-weight: 400; line-height: 1.18; color: var(--gray_88);}

/* sub_tit */
.sub_tit {text-align: left;}
.sub_tit .tit {font-size: 36px; font-weight: bold; line-height: 1.19; color: var(--black_20);}

/* 추가 260106 new_tit_box */
.new_tit_box {margin-bottom: 40px;}
.new_tit_box .tit {font-size: 32px; font-weight: 600; line-height: 1.4; letter-spacing: -0.64px; color: var(--black);}

/* back_btn */
.back_btn {width: 100%; height: auto; margin-bottom: 30px;}
.back_btn a {display: block; width: 30px; height: auto;}
.back_btn a img {width: 100%; height: auto;}

/* search-box */
.search-box {position: relative; width: 100%; height: auto; padding-bottom: 15px; margin-top: 50px; margin-bottom: 70px; border-bottom: 1px solid var(--gray_b0);}
.search-box input {width: 100%; height: auto; padding-right: 60px; font-size: 24px; font-weight: 400; line-height: 1.21; color: var(--black_20); box-sizing: border-box; outline: none;}
.search-box input::placeholder {color: var(--gray_b0);}
.search-box .search_btn {position: absolute; top: 0; right: 20px; width: 29px; height: auto; cursor: pointer;}
.search-box .search_btn img {width: 100%; height: auto;}

/* dim */
.dim {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(112, 112, 112, 0.5); z-index: 10;}
.dim:before {position: absolute; top: 30px; right: 30px; content: ''; display: block; width: 49px; height: auto; aspect-ratio: 49/21; background: url(./../img/close_btn.png)no-repeat 50% 50%; background-size: cover;}

.dim2 {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(112, 112, 112, 0.5); z-index: 11;}
.dim2:before {position: absolute; top: 30px; right: 30px; content: ''; display: block; width: 49px; height: auto; aspect-ratio: 49/21; background: url(./../img/close_btn.png)no-repeat 50% 50%; background-size: cover;}

.dim3 {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(112, 112, 112, 0.5); z-index: 10;}
.dim3:before {position: absolute; top: 30px; right: 30px; content: ''; display: block; width: 49px; height: auto; aspect-ratio: 49/21; background: url(./../img/close_btn.png)no-repeat 50% 50%; background-size: cover;}

/* popup-area */
.popup-area {position: fixed; bottom: -100%; left: 50%; transform: translateX(-50%); max-width: 460px; width: 100%; height: auto; padding: 40px 30px 30px; background: var(--wt); border-radius: 20px 20px 0 0; overflow: hidden; z-index: 11; box-sizing: border-box; transition: all .5s;}
.popup-area:before {position: absolute; top: 10px; left: 50%; transform: translateX(-50%); content: ''; display: block; width: 32px; height: 3px; background: var(--gray_e5); border-radius: 3px; z-index: 3;}
.popup-area.open {bottom: 0;}
.popup-area .popup_hd {display: flex; align-items: center; justify-content: space-between; padding-bottom: 30px; margin-bottom: 15px; border-bottom: 1px solid var(--wt_e5);}
.popup-area .popup_hd .popup_hd_txt {width: 100%; text-align: center; font-size: 24px; font-weight: 600; line-height: 1.21; color: var(--black_20);}
.popup-area .popup_hd .popup_hd_txt span {font-size: 50px; font-weight: 800; line-height: 1.2; color: var(--pr);}
.popup-area .popup_hd .txt-box {}
.popup-area .popup_hd .txt-box .tit {margin-bottom: 10px; font-size: 30px; font-weight: bold; line-height: 1.2; color: var(--pr);}
.popup-area .popup_hd .txt-box .sub {font-size: 18px; font-weight: 400; line-height: 1.17; color: var(--gray_4e); word-break: keep-all;}

.popup-area .popup_hd .img-box {width: 67px; height: auto; border-radius: 100%;}
.popup-area .popup_hd .img-box img {width: 100%; height: auto;}

.popup-area .popup_ct {padding-bottom: 30px;}
/* .popup-area.cpa_popup2 .popup_ct {padding-bottom: 54px;} */
.popup-area .popup_ct .dl-box {display: flex; flex-flow: column; gap: 15px; padding-bottom: 15px; margin-bottom: 8px; border-bottom: 1px solid var(--wt_e5);}
.popup-area .popup_ct .dl-box dl {display: flex; align-items: center; justify-content: space-between;}
.popup-area .popup_ct .dl-box dl dt {font-size: 16px; font-weight: 600; line-height: 1.17; color: var(--gray_4e); word-break: keep-all;}
.popup-area .popup_ct .dl-box dl dt span {color: var(--pr);}
.popup-area .popup_ct .dl-box dl dt .sub_2 {display: block; margin-top: 3px; font-size: 14px; font-weight: 400; color: #88909B;}
.popup-area .popup_ct .dl-box dl dd {font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--gray_4e); display: flex; align-items: center; gap: 5px; white-space: nowrap;}
.popup-area .popup_ct .dl-box dl dd .h_down {position: relative; font-size: 15px; font-weight: 600; line-height: 18px; color: #0075FF;}
.popup-area .popup_ct .dl-box dl dd b {font-size: 30px; font-weight: bold; line-height: 1.2; color: var(--black_20);}

.popup-area .popup_ct .vat {margin-bottom: 20px; font-size: 14px; font-weight: 300; line-height: 1.14; color: var(--gray_b0b); text-align: right;}

.popup-area .popup_ct .emphases {display: flex; flex-flow: column; gap: 10px;}
.popup-area .popup_ct .emphases p {position: relative; gap: 8px; font-size: 18px; font-weight: 400; line-height: 1.17; color: var(--gray_4e);}
.popup-area .popup_ct .emphases p small {position: absolute; bottom: -24px; left: 32px; font-size: 16px; font-weight: 300; line-height: 1.19; color: var(--gray_b0b);}
.popup-area .popup_ct .emphases p img {width: 24px; height: 24px;}

.popup-area.cpa_popup2 .popup_bt {padding-top: 10px; border-top: 1px solid var(--gray_e5);}
.popup-area .popup_bt .link_btn {display: flex; align-items: center; justify-content: center; width: 100%; height: 45px; border-radius: 5px; background: var(--pr); font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--wt);}
.popup-area .popup_bt .link_btn2 {margin-top: 10px;}
.popup-area .popup_bt .talk_login {display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 45px; border-radius: 5px; background: var(--yellow); font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--black_20);}
.popup-area .popup_bt .talk_login.link_btn2 {background: var(--pr) !important; color: var(--wt) !important;}
.popup-area .popup_bt .talk_login img {width: 19px; height: auto;}
.popup-area .popup_bt .and {display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 0; font-size: 12px; font-weight: 400; line-height: 1.17; color: var(--gray_b0b); white-space: nowrap;}
.popup-area .popup_bt .and::before {content: ''; display: block; width: 100%; height: 1px; background: var(--gray_e5);}
.popup-area .popup_bt .and::after {content: ''; display: block; width: 100%; height: 1px; background: var(--gray_e5);}
.popup-area .popup_bt .login {display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 45px; border-radius: 5px; background: transparent; border: 1px solid var(--gray_e5); font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--black_20);}

/* login_popup */
.login_popup {position: relative; max-width: 400px; width: 100%; height: auto;}
.login_popup .bg {width: 100%; height: auto;}
.login_popup .bg img {width: 100%; height: auto;}

.login_popup .logo_img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;}
.login_popup .logo_img img {width: 185px; height: auto; margin-bottom: 15px;}

.login_popup .txt {font-size: 18px; font-weight: bold; line-height: 1.17; color: var(--gray_4e);}
.login_popup .txt2 {position: relative; width: 100%; height: 22px; overflow: hidden;}
.login_popup .txt span {position: absolute; top: 0; left: 0; display: block; width: 100%;}
.login_popup .txt span.prev {top: 22px;}
.login_popup .txt span.active {top: 0; transition: all .3s;}
.login_popup .txt span.next {top: 44px;}


.popup-area .popup_bt .radio_btn {display: flex; align-items: center; gap: 5px; margin-bottom: 17px;}
.popup-area .popup_bt .radio_btn input[type="radio"] {width: 21px; height: auto; aspect-ratio: 1;}
.popup-area .popup_bt .radio_btn label {font-size: 16px; font-weight: 400; line-height: 1.19; color: var(--black_20);}
.popup-area .popup_bt .radio_btn label span {font-size: 16px; font-weight: bold; line-height: 1.19; color: var(--pr);}

.popup-area.agree_popup .popup_hd {padding-bottom: 20px; margin-bottom: 30px;}
.popup-area.agree_popup .popup_hd .txt-box .tit {margin-bottom: 0;}

.popup-area.agree_popup {max-height: 80vh; overflow: auto; padding-bottom: 0;}
.popup-area.agree_popup .popup_ct p {font-size: 16px; font-weight: 300; line-height: 1.19; color: var(--gray_4e); margin-bottom: 30px; word-break: keep-all;}
.popup-area.agree_popup .popup_ct p:last-of-type {margin-bottom: 0;}
.popup-area.agree_popup .popup_ct p b {display: block; margin-bottom: 10px; font-size: 18px; font-weight: 600; line-height: 1.17; color: var(--black_20);}

.popup-area.agree_popup .popup_bt {position: sticky; bottom: 0; background: var(--wt); padding-bottom: 30px;}
.popup-area.agree_popup .popup_bt:before {position: absolute; top: -61px; left: 0; content: ''; display: block; width: 100%; height: 70px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--wt));}
.popup-area.agree_popup .popup_bt button {display: flex; align-items: center; justify-content: center; width: 100%; height: 45px; border-radius: 5px; background: var(--pr); font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--wt);}
.popup-area.agree_popup .popup_bt:after {position: absolute; top: 65px; left: 0; content: ''; display: block; width: 100%; height: 30px; background: #fff;}

.popup-area.payment {max-height: 100vh; overflow: auto;}
.popup-area.payment .popup_bt {position: sticky; bottom: 0; background: var(--wt);}
.popup-area.cpa_popup3 .popup_bt {position: sticky; bottom: 0; background: var(--wt);}
/* .popup-area.payment .popup_bt:before {position: absolute; top: -61px; left: 0; content: ''; display: block; width: 100%; height: 70px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--wt));} */
.popup-area.payment .popup_bt:after {position: absolute; top: 65px; left: 0; content: ''; display: block; width: 100%; height: 30px; background: #fff;}