:root {
    --color-primary:#325FF8;
}


html {overflow:auto; height:100%; background-color:#f1f1f1;}

body {width:480px; max-width:100%; height:100%; margin:0 auto; color:#333; font-size:14px; font-family: "Pretendard", "Inter", ui-sans-serif, system-ui, sans-serif; background-color:#fff; box-shadow:0 0 10px rgba(0,0,0,0.03); }

#wrap {display:flex; flex-direction:column; height:100%; }
#wrap main {flex-grow:1; }
#wrap.gray_type header,
#wrap.gray_type main {background-color:#F8F9FC; }
#wrap.gray_type footer {background-color:#F4F4F7; }

@media all and (max-width:480px){
    html {overflow:hidden; }
    body {overflow:auto; }
}

[data-aos] {transition:all 0.5s; }

.check_custom input {display:none; }
.check_custom label {display:flex; align-items:center; gap:4px; }
.check_custom label:before {content:''; display:inline-flex; width:24px; height:24px; border:2px solid #ddd; border-radius:6px; cursor:pointer; }
.check_custom input:checked + label:before {border-color:var(--color-primary); background:var(--color-primary) url('../img/check_arrow.svg') no-repeat center center; }
.check_custom a {padding:6px 8px; font-size:13px; color:#333; background-color:#efefef; border-radius:90px;}

/* scrollbar */
/* ::-webkit-scrollbar{width:8px;height:8px;} */
/* ::-webkit-scrollbar-thumb{background:var(--color-primary);} */

/* flex */
.flex {display:flex; }
.items-center {align-items:center; }
.justify-between {justify-content:space-between;}
.text-center {text-align:center; }
.gap-8 {gap:8px; }
.block {display:block; }
.my-30 {margin-top:30px; margin-bottom:30px; }
.max-w-60 {max-width:60%; }
.mx-auto {margin-left:auto; margin-right:auto; }
.py-7 {padding-top:7px; padding-bottom:7px; }
.pl-20 {padding-left:20px; }
.list-disc {list-style:disc; }
.text-gray {color: #676767; font-weight:300; }
.mt-5 {margin-top:5px;}

/* btn */
.btn {display:flex; align-items:center; justify-content:center; width:100%; height:60px; font-size:16px; font-weight:500; border-radius:12px; }
.btn-primary {color:#fff; background-color:var(--color-primary); }
.btn-primary-soft {color:var(--color-primary); background-color:#e1e8ff; }
.btn:disabled, .btn[disabled] {background-color:#63637D; pointer-events:none; }





/* 헤더 */
header {z-index:100; position:relative; width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 16px; background-color:#fff; }
header h1 img {height:27px; }
header p {font-size:16px; font-weight:600; color:#687581; }
header .back {position:absolute; left:16px; top:20px; width:24px; height:24px; }
header h3 {width:100%; padding:2px 0; font-size:16px; font-weight:600; text-align:center; }

/* 푸터 */
footer {border-top:1px solid #ECECEC; background-color:#F4F4F7; }
footer.gray_type {background-color:#F4F4F7; }
footer .fnb {display:flex; align-items:center; justify-content:center; gap:14px; padding:12px 0;}
footer .fnb a {font-size:13px; font-weight:500; color:#5c5c5c; }
footer .address {border-top:1px solid #ECECEC; padding:12px 16px; }
footer .address h5 {font-size:13px; font-weight:500; color:#8d8d8d; }
footer .address p {margin-top:10px; font-size:13px; color:#8d8d8d; line-height:1.5; }
footer .cs {border-top:1px solid #ECECEC; padding:10px 5px 25px; text-align:center; }
footer .cs p {margin-bottom:4px; font-size:13px; color:#8d8d8d; font-weight:500; }
footer .cs a {font-size:14px; color:#5c5c5c; font-weight:500; }


/* modal */
.modal {z-index:-999; visibility:hidden; opacity:0; position:fixed; left:0; top:0; right:0; display:flex; flex-direction:column; justify-content:space-between; width:480px; max-width:100%; height:100%; margin:auto; border:1px solid #e5e5e5; border-top:0 none; background-color:#fff; transition:opacity 0.5s; }
.modal.show {z-index:999; visibility:visible; opacity:1; }
.modal .modal_head {position:sticky; top:0; left:0; display:flex; align-items:center; justify-content:space-between; width:100%; padding:20px 16px; }
.modal .modal_head p {font-size:20px; font-weight:600; word-break:keep-all; }
.modal .modal_body {overflow-y:auto; flex-grow:1; padding:16px; }
/* .modal .modal_body h5 {margin-bottom:16px; margin-top:30px; font-size:16px; font-weight:600; }
.modal .modal_body p {line-height:1.4; }
.modal .modal_body ul {margin-top:20px; padding-left:20px; list-style:decimal; }
.modal .modal_body ul li {line-height:1.4; }
.modal .modal_body ul li + li {margin-top:5px; } */
.modal .modal_foot {position:relative; padding:16px 16px 25px; }
.modal .modal_foot .notToday {position:absolute; right:0; top:100%; display:flex; align-items:center; gap:5px; padding:6px 0; color:#fff; }
.modal .modal_foot .notToday.check_custom label:before {width:20px; height:20px; }


.modal.type02 {background-color:transparent; }
.modal .modal_bg {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7); }
.alert_modal {position:fixed; left:0; right:0; top:50%; width:440px; max-width:90%; height:auto; margin:auto; background-color:#fff; transform:translateY(-50%); border-radius:10px; }
.alert_modal .modal_body {padding:30px 20px; }
.alert_modal .modal_body p {text-align:center; word-break:keep-all; }
.alert_modal .modal_body p strong {display:block; margin-bottom:5px; }
.alert_modal .modal_foot {padding:0; }
.alert_modal .modal_foot button {height:50px; border-top:1px solid #ddd; border-radius:0; }
.alert_modal.main_popup.popup_bottom {top:auto; bottom:50px; transform:none; }
.alert_modal.main_popup .modal_head {padding:10px 15px; }
.alert_modal.main_popup .modal_head p {font-size:18px; }
.alert_modal.main_popup .modal_body {overflow-y:auto; max-height:56dvh; text-align:left; }
.alert_modal.main_popup .modal_body p {text-align:left; }
.alert_modal.main_popup .modal_body .img_box {margin:5px 0; }
.alert_modal.main_popup .modal_body .img_box img {display:block; max-width:100%; }
.alert_modal.main_popup .modal_body .link {display:flex; align-items:center; justify-content:center; margin-top:5px; padding:8px 12px; color:#fff; background-color:var(--color-primary); border-radius:20px; }

.modal_2 {z-index:999; position:fixed; left:0; right:0; bottom:-100%; display:flex; align-items:flex-end; width:480px; max-width:100%; height:100%; margin:auto; transition:all 0.4s; }
.modal_2.show {bottom:0; }
.modal_2 .modal_bg {z-index:10; opacity:0; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7); transition:all 0s 0s; }
.modal_2.show .modal_bg {opacity:1; transition:all 0.3s 0.4s; }
.modal_2 .modal_inner {z-index:11; overflow:auto; position:relative; width:100%; height:80vh; background-color:#fff; border-radius:24px 24px 0 0; }
.modal_2 .modal_head {position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:26px 16px 16px; background-color:#fff;}
.modal_2 .modal_head p {font-size:16px; font-weight:600; }


/* 탭 */
.tab_box {display:flex; align-items:flex-end; }
.tab_box.type02 a {padding:6px 5px; }
.tab_box a {display:flex; align-items:center; justify-content:center; width:100%; height:40px; padding:0 5px; border-bottom:1px solid #e3e3e3; font-size:14px; color:#4c5a6d; text-align:center; }
.tab_box a.active {border-bottom:2px solid var(--color-primary); color:var(--color-primary); font-weight:600; }


/* 메인 */
#main {padding:26px 16px 24px; }
#main .service {display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; width:100%; min-height:160px; padding:24px; background-color:#fff; border-radius:12px; box-shadow: 0px 10px 11px 0px rgba(0, 0, 0, 0.20); }
#main .service + .service {margin-top:24px; }
#main .service h3 {font-size:20px; color:#000; font-weight:700; }
#main .service h3 span {display:block; margin-bottom:10px; font-size:14px; color:rgba(255,255,255,0.7); font-weight:500; }
#main .service a {display:inline-flex; align-items:center; gap:6px; padding:7px 10px; font-size:14px; color:#fff; font-weight:500; background-color:var(--color-primary); border-radius:60px; }
#main .service a:after {content:''; display:block; width:8px; height:10px; background:url('../img/arrow_white.svg') no-repeat center center; }

#main .service h3 {color:#fff; }
#main .service a {color:#fff; background-color:rgba(0,0,0,0.2); }
#main .service a:after {background:url('../img/arrow_white.svg') no-repeat center center; }

#main .service.ser01 {background:#322E67 url('../img/main_img_1.png') no-repeat 95% center / auto 70%; }
#main .service.ser02 {background:#322E67 url('../img/main_img_2.png') no-repeat 100% 100% / auto 100%;}
#main .service.ser03 {background:#5070FF url('../img/main_img_3.png') no-repeat 95% 100% / auto 90%;}
#main .service.ser04 {background:#66406C url('../img/main_img_4.png') no-repeat 100% 100% / auto 100%;}

#main .cscenter {margin-top:24px; background:#fff url('../img/main_img_4.svg') no-repeat 94% center; border-radius:12px; box-shadow:0 2px 4px 0 rgba(0,0,0,0.1); }
#main .cscenter a {display:block; padding:24px; }
#main .cscenter h3 {font-size:14px; color:#4c5a6d; font-weight:500; }
#main .cscenter p {margin-top:10px; font-size:20px; color:#4c5a6d; font-weight:700; }


/* 로그인 */
.login_box {display:flex; flex-direction:column; justify-content:space-between; gap:50px; padding:20px 16px; }
.login_box.gradient {background: linear-gradient(180deg, #BEDEFF 2.39%, #FFF 70.67%), #F8F9FC; }

.certify_top {padding-top:50px; }
.certify_top .txt_box {text-align:center; }
.certify_top .txt_box .logo {width:100px; }
.certify_top .txt_box p {margin-top:15px; font-size:22px; color:#343434; font-weight:600; }
.certify_top .txt_box p b {color:#325ff8; font-weight:600; }
.certify_top .img_slide {overflow:hidden; width:calc(100% + 32px); margin:60px 0 90px -16px; }
.certify_top .img_slide .track {display:flex; gap:19px; padding:0 0 80px; animation: ticker 50s linear infinite;}
.certify_top .img_slide .track img {display:block; width:152px; height:152px; }
.certify_top .img_slide .track img:nth-of-type(2n-1) {animation: bounce 1.5s linear infinite alternate;}
.certify_top .img_slide .track img:nth-of-type(2n) {animation: bounce_rev 1.5s linear infinite alternate;}

@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-500%); }
}
@keyframes bounce {
    0% { transform:translateY(0); }
    100% { transform:translateY(80px); }
}
@keyframes bounce_rev {
    0% { transform:translateY(80px); }
    100% { transform:translateY(0); }
}
  
.login_box .login_top {padding-top:70px; }
.login_box .login_top h3 {font-size:22px; line-height:1.4; font-weight:600;  }
.login_box .login_top h4 {font-size:26px; font-weight:600; }
.login_box .agree_box {margin:60px 0 24px; padding:16px 20px; border:1px solid #ddd; border-radius:12px; }
.login_box .agree_box > p {padding-bottom:16px; border-bottom:1px solid #ececec; font-size:14px; color:#4c5a6d; text-align:center; }
.login_box .agree_box .agree {display:flex; align-items:center; justify-content:space-between; }
.login_box .agree_box .agree + .agree {margin-top:9px; }
.login_box .agree_box .agree p {font-size:14px; color:#333; font-weight:300; }
.login_box .agree_box .agree a {padding:6px 8px; font-size:13px; color:#333; background-color:#efefef; border-radius:90px;}
.login_box .agree_box .agree_all {padding:16px 0; border-bottom:1px solid #ececec; margin-bottom:16px; }
.login_box .agree_box .agree_all p {font-size:16px; color:#333; font-weight:600; }
.login_box .agree_box .agree input {display:none; }
.login_box .agree_box .agree label {width:24px; height:24px; border:2px solid #ddd; border-radius:6px; cursor:pointer; }
.login_box .agree_box .agree input:checked + label {border-color:var(--color-primary); background:var(--color-primary) url('../img/check_arrow.svg') no-repeat center center; }

.login_box .info {text-align:center; color:#4c5a6d; }
.login_box .info b {font-weight:500; }
.login_box .info p {margin-top:10px; font-size:13px; line-height:1.4; }


/* txt_layout 공통 */
.txt_layout {padding:20px; line-height:1.4; background-color:#f4f4f7; }
.txt_layout h4 {font-size:14px; font-weight:600; }
.txt_layout > div {margin-top:14px; }
.txt_layout h5  {margin-bottom:7px; font-size:14px; font-weight:600; }
.txt_layout p {font-weight:300; line-height:1.5; }
.txt_layout ul {padding-left:20px; list-style:disc; }
.txt_layout ul li {font-size:14px; line-height:1.5; }

.txt_layout2 {padding:30px 15px; background-color:#f7f7f7; border-radius:15px; }
.txt_layout2 + .txt_layout2 {margin-top:15px; }
.txt_layout2 h5 {margin-bottom:15px; font-size:16px; font-weight:600; }
.txt_layout2 .txt {font-size:14px; color:#676767; line-height:1.4; font-weight:300; }
.txt_layout2 .box:not(:last-of-type) {padding-bottom:20px; }
.txt_layout2 .box + .box {padding-top:20px; border-top:1px solid #DBDBDB; }
.txt_layout2 .box h6 {position:relative; padding-left:20px; font-size:15px; font-weight:400; line-height:1.5; }
.txt_layout2 .box h6.nonum {padding-left:0; }
.txt_layout2 .box h6 span {position:absolute; left:0; top:0; }
.txt_layout2 .box ul {padding:5px 0 5px 20px; list-style:disc; }
.txt_layout2 .box ul li {font-size:14px; font-weight:300; line-height:1.5; color:#676767; }
.txt_layout2 .box p {font-size:14px; color:#969696; font-weight:300; line-height:1.4; }
.txt_layout2 .box dl {margin-top:13px; }
.txt_layout2 .box dl + dl {margin-top:30px; }
.txt_layout2 .box dl dd {margin-top:7px; }
.txt_layout2 .box dl dt:last-child {margin-bottom:13px; }
.txt_layout2 .box dl dt,
.txt_layout2 .box dl dd {font-size:14px; color:#676767; font-weight:300; }

/* process 공통 */
.process {margin:10px 0 30px; }
.process h5 {font-size:16px; font-weight:600; }
.process ul {margin-top:15px; }
.process ul li {display:flex; align-items:center; gap:15px; padding:12px 0; border-bottom:1px solid #E9E9E9; }
.process ul li span {display:flex; align-items:center; justify-content:center; width:30px; height:30px; font-size:16px; font-weight:800; background-color:#f3f3f3; border-radius:50%; }
.process ul li p {font-size:14px; font-weight:500; }


/* service */
.service_info {min-height:100%; padding:26px 16px 50px; background-color:#F8F9FC; }

.service_info .txt_layout {padding:0; margin-top:15px; background-color:transparent; }

.service_info .info_box button {position:relative; display:flex; align-items:center; gap:24px; width:100%; padding:24px; margin-top:16px; background-color:#fff; border-radius:12px; box-shadow:0 2px 4px 0 rgba(0,0,0,0.1); }
.service_info .info_box button:before {content:''; width:60px; height:60px; background:url('../img/main_img_4.svg') no-repeat center center; }
.service_info .info_box button:after {content:''; position:absolute; right:24px; top:calc(50% - 12px); width:24px; height:24px; background:url('../img/arrow_black_big.svg') no-repeat center center; transform:rotate(180deg); }
.service_info .info_box button p {color:#4c5a6d; font-size:22px; font-weight:700; text-align:left; }
.service_info .info_box button span {display:block; margin-bottom:10px; font-size:14px; font-weight:500; }

.service_info .service_box p {position:relative; padding-left:15px; font-size:14px; word-break:keep-all; }
.service_info .service_box p:before {content:'※'; position:absolute; left:0; top:0; }
.service_info .service_box p + p {margin-top:20px; }
.service_info .service_box .service_box_img {position: relative; }
.service_info .service_box .service_box_img a {position: absolute; left: 6%; bottom: 50px; display:inline-flex; align-items:center; gap:6px; padding:7px 10px; font-size:14px; color:#fff; font-weight:500; background-color:#4240b6; border-radius:60px; }
.service_info .service_box .service_box_img a:after {content:''; display:block; width:8px; height:10px; background:url('../img/arrow_white.svg') no-repeat center center; }


.service_body {height:calc(100% - 70px); }
.health_service_box {display:flex; flex-direction:column; justify-content:space-between; gap:20px; width:100%; min-height:100%; padding:20px; }
.health_service_box .img {display:block; width:218px; max-width:80%; margin:0 auto; }
.health_service_box h5 {margin-top:24px; font-size:28px; font-weight:700; color:#4c5a6d; text-align:center; }
.health_service_box p {margin-top:10px; font-size:16px; font-weight:500; color:#4c5a6d; text-align:center; line-height:1.4; }
.health_service_box label {font-size:16px; font-weight:600; }
.health_service_box button {margin-top:18px; }

/* service_top */
.service_top {padding:26px 16px 24px; }
.service_top img {display:block; width:100%; margin-bottom:16px; }
.service_top a + a {margin-top:16px; }


/* 이용약관 / 개인정보취급방침 */
.iframe iframe {width:100%; height:calc(100% - 4px); margin:0; border:0 none; padding:0; }

.agree_body h5 {margin-bottom:16px; margin-top:30px; font-size:16px; font-weight:600; }
.agree_body p {line-height:1.4; }
.agree_body ul {margin-top:5px; padding-left:20px; }
.agree_body > ul {margin-top:20px; padding-left:20px; list-style:decimal; }
.agree_body > ul > li:nth-of-type(1)::marker {content:'① '; }
.agree_body > ul > li:nth-of-type(2)::marker {content:'② '; }
.agree_body > ul > li:nth-of-type(3)::marker {content:'③ '; }
.agree_body > ul > li:nth-of-type(4)::marker {content:'④ '; }
.agree_body > ul > li:nth-of-type(5)::marker {content:'⑤ '; }
.agree_body > ul > li:nth-of-type(6)::marker {content:'⑥ '; }
.agree_body > ul > li:nth-of-type(7)::marker {content:'⑦ '; }
.agree_body > ul > li:nth-of-type(8)::marker {content:'⑧ '; }
.agree_body > ul > li:nth-of-type(9)::marker {content:'⑨ '; }
.agree_body ul ul {list-style:decimal !important; }
.agree_body ul ul ul {list-style:hangul !important; }
.agree_body ul li {line-height:1.4; }
.agree_body ul li + li {margin-top:5px; }
.agree_body table {width:100%; margin:10px 0; }
.agree_body table th, .agree_body table td {border:1px solid #ddd; padding:5px 3px; }
.agree_body table .black_type {background-color:#000; }
.agree_body table .black_type * {border-color:#000; color:#fff; }
.agree_body table th {font-size:12px; }
.agree_body table td {font-size:12px; text-align:center; }


.noticeList {padding:16px 16px 20px; }
.noticeList dl + dl {margin-top:30px ;}
.noticeList dl dt {position:relative; padding:10px; border-bottom:1px solid #e0e0e0; cursor:pointer; }
.noticeList dl dt:before {content:''; position:absolute; right:10px; top:calc(50% - 10px); width:20px; height:20px; background:url('../img/arrow_black.svg') no-repeat center center; transform:rotate(90deg); transition:all 0.5s; }
.noticeList dl dt.active:before {transform:rotate(-90deg); }
.noticeList dl dt span {font-size:13px; font-weight:400;}
.noticeList dl dt p {margin-top:3px; font-size:15px; font-weight:500;}
.noticeList dl dd {display:none; padding:10px 10px 15px; color:#000; font-size:14px; font-weight:400; line-height:1.4; }
.noticeList dl dd img {margin:5px 0; }
.noticeList dl dd .link {display:flex; align-items:center; justify-content:center; margin-top:5px; padding:8px 12px; color:#fff; background-color:var(--color-primary); border-radius:20px; }