@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: #00A43F;
    --accent-color: #000;
    --point-color: #00A43F;
    --font-color: #000;

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

    /* result button */
    --result-btn-height: 12rem;
    --result-btn-font-size: 6rem;
    --result-btn-border-radius: 0;
    --result-btn-color: #fff;
    --result-btn-bg-color:#ED4B55;
    --result-btn-margin: 0;

    --color-orange: #FF7B1C;
}
html{ scroll-behavior: smooth;}
body {font-family:  'SUIT Variable', sans-serif; color: var(--font-color); }
.p_color{color: var(--point-color) !important;}

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

.red{--badge-color:#FF1818;}
.green{--badge-color:#32BF72;}
.yellow{--badge-color:#FFC628;}
.purple{--badge-color : #7030A0;}
.sky{--badge-color: #40C5CE;}
.suit {font-family: 'SUIT Variable', sans-serif;}

div[class*="section"]{background-repeat: no-repeat;background-position: center bottom; background-size: cover;}
div[class*="section"]:not(.section01){ padding-top: 5.4rem;}
div[class*="section"] img{margin: 0 auto;}
div[class*="section"] .tit_img{margin: 0 auto 2.7rem;}

.section01{background-image: url(./images/con01_bg.png);}
.section01 .text_box{text-align: center;color: #fff;letter-spacing: -0.02em;margin: 2.7rem auto 5rem;}
.section01 p{font-size: 4.5rem ; font-weight:500;}
.section01 .txt02{ font-weight:700; padding: .1em .2em; background-color:#CC5500 ; animation: blinkBg01 1s steps(1) infinite; display: inline-block; margin-top: 1.1rem;}
.section01 .card_body .price{color: var(--color-orange);}
.section01 .promotion_card{margin-bottom: 0;border: none;}
.section01 .card_header .badge{background: #FFEBDD;color: #0A3200;font-size: 3rem;font-weight: 800;text-align:center;display: flex;justify-content: center;align-items: center;gap: .5rem;width: 100%;padding-block: 2rem;letter-spacing: -0.04em;}
.section01 .promotion_card:nth-of-type(1){border-radius: 1rem 1rem 0 0;}
.section01 .promotion_card:nth-of-type(2){border-radius: 0 0 1rem 1rem;  position: relative;}
.section01 .promotion_card:nth-of-type(2)::after{content:'';width: 100%; height: 11.4rem; background: url(./images/el03.png)no-repeat center; background-size: contain; display: block;margin-top: 2.5rem;}
.section01 span[class*="box"]{border-radius: .6rem; color: #fff;letter-spacing: -0.02em;padding: .5rem .7rem;}
.section01 .box01{background: #000;font-size: 3.2rem;}
.section01 .box02{background: #FF7614;font-size: 2rem;}
.section01 .box03{background: #FF181C;font-size: 2rem;}
.section01 .promotion_wrap:last-of-type::after{color: #fff;}

.section02{background-image: url(./images/con02_bg.png);}
.section02 .tit_img{width: 58.6rem; }

.section03{background-image: url(./images/con03_bg.png);}
.section03 .tit_img{width: 74.6rem; }
#promotion03 .promotion_card:nth-of-type(1) .card_body .price_area{position: relative;margin-left:-4rem;}
#promotion03 .promotion_card:nth-of-type(1) .card_body .price_area::before{content: '';display: block;width: 14.3rem;height: 7rem;background: url(./images/el02.png)no-repeat left top;background-size: contain;position: absolute;top: -80%;left: 50%;transform: translate(-50%, 0);}
.section03 .card_header .badge,.section07 .card_header .badge{animation: blinkBg02 1s steps(1) infinite;}

.section04{background-image: url(./images/con04_bg.png);}
.section04 .tit_img{width: 74.6rem;}

.section05{background-image: url(./images/con05_bg.png);}
.section05 .tit_img{width: 74.6rem;}
#promotion05 .promotion_card .select_area{margin-right:-12rem}

.section06{background-image: url(./images/con06_bg.png);}
#promotion06 .promotion_card .card_body .price_area{margin-left: -6rem;}

.section07{background-image: url(./images/con07_bg.png);}
.section07 .tit_img{width: 71rem;}
.section07 .promotion_card{position: relative;}
.section07 .promotion_card:first-of-type::before{content:'';width: 100%;height: .1rem;background-color: #D5D5D5;display: block;position: absolute;left: 0;bottom: 40%;}
.section07 .select_bunch .select_option:first-of-type{padding-bottom: 3rem;}

.section08{background-image: url(./images/con08_bg.png);}
.section08 .tit_img{width: 72.3rem; }
.section08 .promotion_card:last-of-type .card_body .price_area{margin-left:-12rem;}

.section09{background-image: url(./images/con09_bg.png);}
.section09 .tit_img{width: 65.2rem; }

.promotion{padding: 0 2rem 7.6rem;position: relative;letter-spacing: -0.02em;}
.promotion_wrap{position: relative;margin-bottom: 5rem;}
.promotion_wrap:last-of-type:after{content:'* VAT 별도';margin-top:1rem;text-align:right;display: block;font-size: 2rem;color: #8C8C8C;font-weight: 600;}
.select_bunch{display: flex; flex-direction: column; gap: 1.5rem;}

.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.5rem 2rem;font-size: clamp(16px, 4.2vw , 3.5rem);font-weight: 800;letter-spacing: -0.04em;background: #DCF0BC;margin-bottom: 3rem;border-radius: 1rem;display: flex;justify-content: flex-start;align-items: center;gap:1.2rem;word-break: keep-all;}
.promotion .sub_title .emoji{width: 4rem;height: 4rem;display: inline-block;transform: scaleX(-1);}

.promotion_card{border-radius: 1rem;border:1px solid #D5D5D5;overflow: hidden;letter-spacing: -0.02em;margin-bottom:3rem;background: #fff;padding:0 0 4rem;}
.promotion_card:last-of-type{margin-bottom:0;}

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

.card_body{padding: 4rem 2rem 0;}
.card_body .desc_text{font-size: 2.8rem;font-weight: 600; letter-spacing: -0.1em;color: #6D6D6D;margin-bottom: 1rem;}
.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;}
.card_body .price_area{display: flex;justify-content: center;align-items: flex-start;gap: 1rem;}
.card_body .price_area.price_items{flex-direction: column;gap:  4.8rem;align-items: flex-end;}
.card_body .price_area .price_item{display: flex;justify-content: center;align-items: center;gap: .8rem;}
.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: 2rem;font-weight: 800;color: #fff;border:1px solid rgba(124,124,124,.38);color: var(--font-color);padding: .4rem .8rem;border-radius:  .8rem;margin-right: 1rem}
.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: 2.8rem;font-weight: 700;color: var(--main-color);line-height: 1;letter-spacing: -0.04em;white-space: nowrap;}
.card_body .price strong{font-family:'GmarketSans';font-size: 7.5rem;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 .name{font-size: 3.6rem;font-weight: 800;display: block;letter-spacing: -0.1em;text-wrap: balance;word-break: keep-all;}
.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;}
.card_body .select_area .name .desc-name{display: block;font-size: 30px;}
.card_body .price_area .badge_wrap{ display: flex; justify-content: flex-start; gap:7px;}
.card_body .select_area .name .badge{margin-bottom: 4px;}
.card_body .select_area .sub_text{font-size: 2.8rem;font-weight: 600;color: #5E5E5E;letter-spacing: -0.08em;text-wrap: balance;word-break: keep-all;}
.card_body .select_area .red{color:var(--badge-color)}
.card_body .price_area .badge{border-radius: 100%;font-size: 1.8rem;font-weight: 800;display: inline-flex;justify-content: center;align-items: center;text-align: center;white-space: nowrap;width: 7rem;height: 7rem;
    border:.3rem solid var(--badge-color)  ;color: var(--badge-color);background: #fff;}

.promotion_button{display: flex;justify-content: center;align-items: center;font-size: 6rem;color: #fff;font-weight:700;width: 100%;height:12.8rem;border-radius: 2rem;background: #000;  }
/* popup */
.bg {position: fixed;inset: 0;background: rgba(0,0,0,.6);backdrop-filter:blur(6px);opacity: 0;visibility: hidden;transition: opacity .3s ease, visibility .3s ease;z-index: 9999;}
.bg.active {opacity: 1;visibility: visible;} 
.register_popup {position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 99999;width: 100%;max-width: 70rem;background: #fff;box-shadow: 0 5px 15px rgba(0,0,0,.2);opacity: 0;visibility: hidden;pointer-events: none;transition:opacity 0.3s ease;}
.register_popup.active {opacity: 1;visibility: visible;pointer-events: auto;}

.close-btn{position: fixed;right: 0;color:  #fff;top: 0;transform: translateY(-100%);font-size: 8rem;z-index: 1;}

.register_popup .top_title{position: relative;}
.register_popup .top_title img{display:inline-block;}
.register_popup .top_title .text_box{width: 100%; padding-bottom:3rem; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); text-align: center;font-weight: 600; }
.register_popup .top_title .txt01{font-size:4.5rem; margin-bottom:.5rem;}
.register_popup .top_title .txt02{font-size:5.6rem; ;color: #EE8439; animation: blinkColor02 1s steps(1) infinite;}
.register_popup .register_wrap {padding: 4rem 5rem; background-color:#fff ; font-family: 'SUIT';}

.register_popup .input_wrap ul {display: grid; gap: 3.5rem;}
.register_popup .input_wrap li {display: grid; gap: 2rem;}
.register_popup .input_wrap label {position: relative; display: block; font-size: 3.5rem; font-weight: bold; color: #161616;box-sizing: border-box;}
.register_popup .input_wrap label[for="user-tel"] {display: flex; align-items: flex-end; justify-content: space-between;}
.register_popup .input_wrap label[for="user-tel"]::after {content: '*상담 외 어떠한목적으로도 사용하지 않습니다 '; font-weight: 400;font-size: clamp(12px, 2vw, 2rem); color: #FF9292;}
.register_popup .input_wrap input::placeholder {font-size: 3.5rem; color: #DDDDDD;}
.register_popup .form-msg {text-align: center; font-size: clamp(12px, 2vw, 2rem); color: #FF9292;}

.register_popup .privacy_wrap{border: none;margin: 2rem 0;}
.register_popup input:focus {outline: 2px solid var(--main-color);outline-offset: 2px;}

/*  바로신청 */
.appointment {position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);z-index: 100;padding: 0 !important;bottom: 0 !important;width: 100%;max-width: 800px;cursor: pointer;}

.form_wrap{width: 100%; background: rgba(0,0,0,.76);backdrop-filter: blur(6px);padding: 1rem 2.4rem;font-family: 'Pretendard';}
.input_row {margin-bottom:1.2rem;}
.input_row ul{display: flex; gap: 2rem; align-items: center; }
.btn_apply{font-size: 3rem; font-weight: 700; text-align: center; color: #fff;background: #E54748; flex: 1; height: 5rem;}
.button_wrap{display: grid; grid-template-columns: repeat(2, 1fr);}
.button_wrap a{display: flex; justify-content: center; align-items: center; gap: 1rem;font-size: 3rem; font-weight: 700; text-align: center;padding: 1rem;}
.button_wrap a.btn_call{background:#BF2021;color:#fff;}
.button_wrap a.btn_kakao{background: #FFE553;color: #000;}
.button_wrap a img{width: auto; height: 2.7rem;}
.appointment input[type='text'],.appointment input[type='number']{font-size: 2.5rem; border-radius: 0;height: 5rem;padding-left:0; text-align: center;}
.appointment input[type='text']{width: 15.6rem;}
.appointment input[type='number']{width: 25.6rem;}
.privacy_row{display: flex;justify-content: flex-start;align-items: center;gap: 1.6rem; color: #fff;font-weight: 400;}
.privacy_row .privacy_allchk{border: none; font-size: clamp(14px, 1.8vw, 1.8rem);padding:0; margin:0;}
.privacy_row input[type=checkbox] {-webkit-appearance: none;-moz-appearance: none;   appearance: none; border: none;outline: none;background: none;cursor: pointer;display: none;}
.privacy_row input[type="checkbox"] + label::before,.privacy_row input[type="radio"] + label::before {content: '✓';color: #fff;display: inline-block;width: 3rem;height: 3rem;border-radius: .6rem;margin-right: 1rem;
    vertical-align: middle;background: #FFFFFF;display: flex;justify-content: center;align-items: center;box-sizing: border-box;transition: all .2s ease;font-family: 'Pretendard';cursor:pointer;font-size: 2.8rem;}
.privacy_row input[type="checkbox"]:checked + label::before,.privacy_row input[type="radio"]:checked + label::before{color: var(--accent-color); }
.privacy_row input[type="checkbox"] + label{display: flex;justify-content: flex-start;align-items: center;cursor: pointer;font-size: clamp(10px, 1.8vw, 1.8rem);}
/*유의사항 커스텀*/
.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);}
}

@media screen and (max-width: 480px) and (max-height: 700px) {
  /* 모바일이면서 세로가 낮은 기기 */
  .register_popup .register_wrap{max-height: 60rem;overflow-y: auto; -webkit-overflow-scrolling: touch;}
}


html.scroll-lock,
body.scroll-lock {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}