@charset "utf-8";

@import url("../../fonts/GmarketSans/GmarketSans.css");
@import url("../../fonts/SUIT/SUIT.css");
@import url("../../fonts/Pretendard/Pretendard.css");
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&family=Noto+Color+Emoji&display=swap');
:root{
    --layout-max-width: 800px;
    --main-color: #5B70AE;
    --accent-color: #5B70AE;
    --point-color: #102051;
    --font-color: #fff;

    /* card */
    --label-bg-color:#fff;

    /* input */
    --input-height: 9rem;
    --input-font-size: 3.5rem;
    --input-border-radius: 2rem;
    --input-border-color: #DDDDDD;
    --input-bg-color: #FFFFFF;
    --input-color: #333;
    --focus-border-color: var(--main-color);

    /* result button */
    --result-btn-height: 13.7rem;
    --result-btn-font-size: 5.5rem;
    --result-btn-border-radius: 2rem;
    --result-btn-color: #fff;
    --result-btn-bg-color: #000;
    --result-btn-margin: 0 auto;
    --color-green: #197993;
}
html{ scroll-behavior: smooth; scroll-padding-top: 12rem;}
body {font-family:  'Pretendard', sans-serif; color: var(--font-color); }
.m_color{color: var(--main-color) !important;}
.p_color{color: var(--point-color) !important;}

/* layout */
.landing_container {width: 100%;}
.container_wrap {width: 100%;margin: auto;font-size: 3.8rem;}
.container {position: relative}
.promotion_wrap{ scroll-margin-top: 14rem}

.top_banner{background: #000; display: flex; justify-content: center; align-items: center;gap: 1rem;padding:2rem 0; }
.top_banner img{width: 4.5rem; height: 4.5rem;}
.top_banner p {color: #fff; font-size: 4.2rem; font-weight: 600;}
.top_banner.blink{background: #5B70AE; animation: blink 1s steps(1) infinite;}

@keyframes blink {
    50%{background-color: #002DB7;}
}

.red{color: var(--color-red)}
.green{color:var(--color-green);}
.suit {font-family: 'SUIT Variable', sans-serif;}

div[class*="section"]{background-repeat: no-repeat;background-position: center top;background-size: cover;padding:0 0 5.2rem;}
div[class*="section"] img{margin: 0 auto;}

.bottom_content{display: flex; justify-content: center;align-items: center;flex-direction: column;gap: 5rem;}
.bottom_content .bna_img{width: 66rem; }

.section01{background: linear-gradient(203deg, #020307 3.84%, #102257 99.54%);}
.section01 .tit_img{width: 100%;}
.section01 .card_body .price_area .session::after{content: '(*혈액추출기준)';display:  block;font-size: 1.6rem;font-weight: 700;line-height: 1.2;color: var(--font-color);}
.section01 .card_body{position:relative;}


#promotion01 .select_option:nth-of-type(2) .price_item:nth-of-type(1){position: relative;margin-left:-4rem;}
#promotion01 .select_option:nth-of-type(2) .price_item:nth-of-type(1)::before{content: '';display: block;width: 9.6rem;height: 2rem;background: url(./images/el01.png)no-repeat left top;background-size: contain;position: absolute;top: -60%;right: 0;transform: translate(0, 0);}
#promotion01 .select_option:nth-of-type(2) .price_item:nth-of-type(2) .session::before{content:'고용량 UP';display: block; color: #78D1E5; font-size: 2rem; font-weight: 800;}
.promotion{position: relative;letter-spacing: -0.02em;}
.promotion_wrap{position: relative;margin: 6rem 5rem 2rem;}
.promotion_wrap:first-of-type{margin-top: 0;}
.promotion_wrap:last-of-type:after{content:'* VAT 별도';margin-top: 2rem;text-align:right;display: block;font-size: 2rem;color: #fff;font-weight: 600;}

.promotion_title{margin:2rem 5rem;}
.promotion_title h4{font-size: 4rem;line-height: 1.3;font-weight: 600;text-align: center;letter-spacing: -0.08em;}
.promotion_title h4 b{font-weight: bolder;}
.promotion_title img{width: 5rem; height: 5rem; display: inline-block;}

.promotion .sub_title{width:  max-content;max-width: 100%;padding: 1.6rem 3.3rem;font-size: clamp(16px, 4.2vw , 3rem);font-weight: 600;letter-spacing: -0.04em;background: var(--main-color);border-radius: 2.4rem 2.4rem 0 0;display: flex;justify-content: flex-start;align-items: center;gap:1.2rem;word-break: keep-all;color:  #fff;}
.promotion .sub_title .emoji{width: 4rem;height: 4rem;display: inline-block;transform: scaleX(-1);}
.promotion .sub_title .label{padding: .2rem 1rem;border-radius: .6rem;background: #582C2C;font-size: 2rem;font-weight: 600;}
.promotion_card{letter-spacing: -0.02em;margin-bottom:3rem;background: transparent;}
.promotion_card:last-of-type{margin-bottom:0;}

.card_header{display: flex;justify-content: flex-start;align-items:stretch;gap: .8rem;font-weight: 700;padding-top: 3.2rem; display: none;}
div[class*="section"]:not(.section01) .card_header .badge{display: inline-block;font-size: 2.5rem;padding: .8rem 1.1rem;background:var(--main-color);color: #fff;border-radius: .8rem;}

.select_bunch{}
.card_body .desc_text{font-size: 2.3rem;font-weight: 600;letter-spacing: -0.1em;color: #6D6D6D;margin: 0 0 3.2rem 6.2rem;}
.card_body .desc_text .mark{color:var(--main-color);background: #FFE7D5; padding-inline: 1rem; line-height: 1.4; font-weight: 500;}
.card_body .desc_text .blink{animation: blinkBgColor 1s steps(1) infinite;}
.card_body .select_option{display: flex;justify-content: space-between;align-items:center;border-bottom: .2rem dashed rgba(255, 255,255,.3);padding-block: 7.2rem;}
#promotion01 .select_option:nth-of-type(2){padding-bottom:10rem;}
.card_body .price_area{display: flex;justify-content: center;align-items: flex-start;gap: 1rem;margin-left: -12rem;position: relative;}
.card_body .price_area.price_area::after{content:'베네핏 주사 혜택!';display: block;font-size: 1.8rem;font-weight: 700;color: var(--font-color);margin-top: 1rem;background-color:var(--main-color);padding: .2rem 1rem;border-radius: .5rem;position: absolute;bottom: -5rem;right: 0;}
.card_body .price_area.price_items{flex-direction: column;gap: 3rem;align-items: flex-end;}
.card_body .price_area .price_item{display: flex;justify-content: center;align-items: center;gap: 2rem;}
.card_body .price_area .price_item .price_item_top{display:  flex;justify-content: center;align-items: center;gap:  2rem;}
.card_body .price_area .session{font-family:'SUIT Variable';font-size: 2.3rem;font-weight: 800;color: var(--font-color);text-align: right;line-height: 1.1;}
.card_body .price_area .strike-through{font-size: 3rem;font-weight: 500;text-decoration: line-through;color: #bdbdbd;text-decoration-thickness: .2rem;}
.card_body .price{font-size: 1.8rem;font-weight: 700;color: var(--font-color);line-height: 1;letter-spacing: -0.04em;white-space: nowrap;}
.card_body .price strong{font-family:'GmarketSans';font-size: 4.8rem;font-weight: 800;}
.card_body input[type=checkbox] {-webkit-appearance: none;-moz-appearance: none;   appearance: none; border: none;outline: none;background: none;cursor: pointer;display: none;}
.card_body input[type="checkbox"] + label::before,.card_body input[type="radio"] + label::before {content: '✓';color: #fff;display: inline-block;width: 4rem;height: 4rem;border-radius: .8rem;margin-right: 2rem;
    vertical-align: middle;background: #CCCCCC;display: flex;justify-content: center;align-items: center;box-sizing: border-box;transition: all .2s ease;font-family: 'Pretendard';cursor:pointer;}
.card_body input[type="checkbox"]:checked + label::before,.card_body input[type="radio"]:checked + label::before{background: var(--accent-color); color: #fff;}
.card_body input[type="checkbox"] + label{display: flex;justify-content: flex-start;align-items: center;cursor: pointer;}
.card_body .select_area label >  div {display: grid; gap: 1rem;}
.card_body .select_area .label_wrap{display: flex; justify-content: flex-start; align-items: center; gap: 1rem;}
.card_body .select_area .label{background: var(--label-bg-color);padding: .4rem 1.1rem;font-size: 2.5rem;line-height: 1.2;font-weight: 700;color: var(--point-color);border-radius: .9rem;letter-spacing: -0.02em;font-family: 'SUIT';}
.card_body .select_area .name{font-size: 3.6rem;font-weight: 600;display: block;letter-spacing: -0.04em;text-wrap: balance;word-break: keep-all;color: var(--font-color);}
.card_body .select_area .name .small_text{font-size: 2rem;letter-spacing: -0.04em;font-weight:  700;padding-left: 1rem;vertical-align: middle;display:  inline-block; color: var(--point-color);}
.card_body .select_area .name .desc-name{display: block;font-size: 30px;}
.card_body .badge_wrap{ display: flex; justify-content: flex-start; gap:7px;}
.card_body .tag{font-size: 2rem;font-weight: 800;color: var(--main-color); font-family: 'SUIT';}
.card_body .select_area .name .badge{margin-bottom: 4px;}
.card_body .select_area .sub_text{font-size: 2.3rem;font-weight: 500;color: var(--font-color)v;letter-spacing: -0.08em;text-wrap: balance;word-break: keep-all;display: inline-block;font-weight: 300;}
.card_body .select_area .red{color:var(--badge-color)}

/* register */
#register{position: relative;background: #F8F8F8;padding: 5rem 6rem;}
#register .top_title{position: relative;text-align: center;}
#register .top_title img{display:block;}
#register .register_wrap {padding: 3.7rem 0 0;}
#register .input_wrap ul {display: grid; gap: 3.5rem;}
#register .input_wrap li {display: grid; gap: 1.2rem;}
#register .input_wrap label {position: relative; display: block; font-size: 3.5rem; font-weight: bold; color: #161616;box-sizing: border-box;}
#register .input_wrap label[for="gtm_input_tel"] {display: flex; align-items: flex-end; justify-content: space-between;}
#register .input_wrap label[for="gtm_input_tel"]::after {content: '*상담 외 어떠한목적으로도 사용하지 않습니다 '; font-weight: 400;font-size: clamp(12px, 2vw, 2rem); color: #FF9292;}
#register .input_wrap input::placeholder {font-size: 3.5rem; color: #DDDDDD;}
#register .form-msg {text-align: right; font-size: clamp(12px, 2vw, 2rem); color: #391700;margin-top: 2.2rem;}

#register .privacy_wrap{margin: 5rem 0;}
/*유의사항 커스텀*/
.bottom_info{font-size: 2.2rem;line-height: 1.5;letter-spacing: -0.02em;background-color:#262626 ;color: #fff;padding: 4rem 3rem;width: 100%;}

/* 사업자 정보 텍스트 영역 */
.landing_foot_lt { max-width: var(--layout-max-width) !important; margin:0 !important; border-radius: 0 !important}


/* 하단 고정 폼 입력 필드 강조 */
.appointment input:focus {
    outline: 2px solid var(--point-color);
    outline-offset: 1px;
}

/* 버튼 클릭 효과 */
.result_btn:active,
.btn_apply:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}
/* 애니메이션 */
@keyframes blinkBg01 {
    50%{background-color: #000;}
}
@keyframes blinkBg02 {
    50%{background-color: var(--color-orange);}
}