/* 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 : #0000ED;
  --pr2 : #00DE6E;
  --black_1 : #111111;
  --black_3 : #333333;
  --gray_ea : #EAEDF4;
  --gray_5 : #555555;
  --gray_69 : #696980;
  --gray_9 : #999999;
  --wt : #FFFFFF;
  --wt_f6 : #F6F7FA;
  --wt_fa : #FAFAFA;
  --wt_f0 : #F0F3F9;
  --black_151 : #151520;
}

html,body {scroll-behavior: smooth;}

body {font-family: 'Pre';}
.container {max-width: 1320px; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box;}

/* tit-box */
.tit-box {margin-bottom: 80px; text-align: center;}
.tit-box.left {margin-bottom: 0; text-align: left;}
.tit-box .tit {text-align: left; font-size: 46px; font-weight: bold; line-height: 1.4; color: var(--black_1);}
.tit-box .tit span {color: var(--pr);}
.tit-box .sub {margin-top: 30px; font-size: 18px; font-weight: 400; line-height: 1.3; color: var(--gray_5); text-align: left;}

/* form-box */
.popup {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 480px; padding: 20px; box-sizing: border-box; background: var(--black_1); z-index: -1; opacity: 0; border-radius: 15px;}
.popup .popup-hd {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.popup .popup-hd .tit {font-size: 30px; font-weight: 800; line-height: 1.2; letter-spacing: -0.6px; color: var(--pr2);}
.popup .popup-hd .close_btn {width: 24px; height: auto;}
.popup .popup-hd .close_btn img {width: 100%; height: auto;}
.popup .txt {margin-bottom: 30px; font-size: 14px; font-weight: 300; line-height: 1.14; letter-spacing: -0.28px; color: var(--wt);}
.popup .form-box {width: 100%; height: auto;}
.popup .form-box .input-box {display: flex; align-items: center; justify-content: center; flex-flow: column; gap: 10px;}
.popup .form-box .input-box input {width: 100%; height: 50px; border-radius: 25px; background: var(--wt); padding: 0 20px; box-sizing: border-box; font-size: 16px; font-weight: 300; line-height: 1.19; color: #000;}
.popup .form-box .input-box input::placeholder {color: #BCBCBC;}

.popup .form-box .input-box select {width: 100%; height: 50px; border-radius: 25px; padding: 0 20px; background: url(/img/select_icon.png) no-repeat calc(100% - 20px) 50%; background-size: 15px 9px; background-color: var(--wt); box-sizing: border-box; appearance: none; font-size: 16px; font-weight: 300; line-height: 1.19; color: #000;}

.popup .form-box .ckd-box {margin-top: 10px;}
.popup .form-box .ckd-box input[type="radio"] {display: none;}
.popup .form-box .ckd-box label {display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 300; line-height: 1.14; letter-spacing: -0.28px; color: var(--wt);}
.popup .form-box .ckd-box label:before {content: ''; display: block; width: 17px; height: 17px; background: url(/img/radio_off.png)no-repeat 50% 50%; background-size: cover;}
.popup .form-box .ckd-box input[type="radio"]:checked ~ label:before {content: ''; display: block; width: 17px; height: 17px; background: url(/img/radio_on.png)no-repeat 50% 50%; background-size: cover;}
.popup .form-btn {width: 100%; height: 50px; margin-top: 30px; border-radius: 25px; background: var(--pr2); font-size: 16px; font-weight: 600; line-height: 1.19; color: var(--wt_f2);}

.popup .form-box .input-box .ckd-box input[type="radio"] ~ label:before {}

.popup {animation: popup_off .5s linear both;}
/* @keyframes popup_off {
  0% {opacity: 1;}
  90% {opacity: 0;}
  100% {opacity: 0; z-index: -1;}
} */
.popup.open {animation: popup_on .5s linear both;}
@keyframes popup_on {
  0% {opacity: 0;}
  90% {z-index: 9999;}
  100% {z-index: 9999; opacity: 1;}
}

/* dim */
.dim {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: var(--white); z-index: 8888;}

/* popup */
/* .dim {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 10;} */
.agreement-popup {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 500px; width: calc(100% - 40px); height: 80vh; padding-bottom: 100px; background: var(--wt); border-radius: 16px; box-sizing: border-box; overflow: hidden; z-index: 11; background: #fff; z-index: 9999;}
.agreement-popup .popup-hd {position: relative; background: var(--pr); padding: 20px; box-sizing: border-box;}
.agreement-popup .popup-hd .tit {font-size: 18px; font-weight: bold; line-height: 1.3; color: var(--wt); text-align: center;}
.agreement-popup .popup-hd .close-btn {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 20px; height: auto;}
.agreement-popup .popup-content {width: 100%; height: 100%; overflow: auto; overflow-x: hidden; padding: 20px; box-sizing: border-box; font-size: 15px; font-weight: 400; line-height: 1.3; color: var(--black_1);}
.agreement-popup .popup-content b {display: block; margin-bottom: 10px; font-size: 16px; font-weight: bold; line-height: 1.2; color: var(--black);}
.agreement-popup .popup-content table {width: 100%; height: auto; margin-bottom: 20px; margin-top: 10px; border: 1px solid var(--gray_69);}
.agreement-popup .popup-content table tr {}
.agreement-popup .popup-content table th {width: 150px; height: 35px; font-size: 16px; font-weight: bold; color: var(--black); vertical-align: middle; border-bottom: 1px solid var(--gray_69); border-right: 1px solid var(--gray_69);}
.agreement-popup .popup-content table td {padding: 10px; font-size: 16px; font-weight: bold; color: var(--black); vertical-align: middle; border-bottom: 1px solid var(--gray_69); line-height: 1.2;}

/* toggle_tit */
.toggle_tit {text-decoration: underline; cursor: pointer;}
.toggle_ct {display: block; margin-top: 5px;font-weight: 400;}

button,a {cursor: pointer;}