@charset "utf-8";

@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: #8e1b22;
    --accent-color: var(--main-color);
    --point-color: #c61924;
    --font-color: #161616;

    /* input */
    --input-height: 9rem;
    --input-font-size: 4rem;
    --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: 5.4rem;
    --result-btn-border-radius: 0;
    --result-btn-color: #fff;
    --result-btn-bg-color:var(--main-color);
    --result-btn-margin: 0;
}
body {font-family: "Pretendard";  color: var(--font-color); }
.p_color{color: var(--point-color);}
.mark{background: rgba(246,219,173, .37)}

/* layout */
#landing_container {padding-bottom: 16.8rem;}
.container_wrap {width: 100%;margin: auto;background: #730910;font-size: 3.8rem;}
.container {position: relative}

.top_banner{background: #000; display: flex; justify-content: center; align-items: center;gap: 1rem;padding:2rem 0; }
.top_banner img{width: 3.5rem; height:3.5rem;}
.top_banner p{color: #fff;font-size: 3.5rem;}
.promotion_button{display: flex;justify-content: center;align-items: center;font-size: 5.4rem;color: #730910;font-weight:800;width: 100%;height:11.6rem;border-radius: 100px;background:#ddbe9e;margin-bottom: 4rem;position: relative;z-index: 1;}

/* 카드 선택 영역 */
.promotion{padding-inline: 5%;position: relative;letter-spacing: -0.02em;}
.promotion_wrap{position: relative;margin-bottom: 4rem;background:#fff}
.promotion_title{font-size: 3.6rem;font-weight: 600;text-align:center;background: #51070d;color: #fff;margin: 0 5% 4rem;display: inline-block;padding:1rem 2rem;border-radius: 3rem;position: relative;z-index: 1;}
.promotion_card{border-bottom: 1px solid #b4976d;/* overflow: hidden; */letter-spacing: -0.02em;margin-inline: 3%;}
.promotion:nth-of-type(1) .select_area{margin-right: -12rem;}
.promotion:nth-of-type(1) .card_body .select_area .name{position: relative;white-space: nowrap;margin-bottom: 2rem;letter-spacing: -0.06em;}
.promotion:nth-of-type(1) .card_body .select_area .name::after{content:'';width: 6rem;height: 3rem;display:inline-block;background: url(./images/el01.png) no-repeat right center;background-size: contain;vertical-align: middle;position: absolute;right: 0;top:  50%;transform: translate(110%, -50%);}
.promotion:nth-of-type(1) .price::before{content:'';width: 80%; height: 3rem; display: block;background: url(./images/el02.png) no-repeat right center;background-size: contain;margin-left: auto; }
.promotion:nth-of-type(1) .price::after{content:'VAT 미포함'; display: block; font-size: 1.7rem; text-align: right; margin-top: 1rem;}
.promotion:nth-of-type(2) .promotion_wrap{margin-bottom:0}
.promotion_wrap .promotion_card:last-of-type{margin-bottom:0;border: none;}
.promotion_wrap:nth-of-type(2){/* padding-bottom: 35rem; */background-color:#fff;background-image: url(./images/con01_card02_bg.png);background-repeat: no-repeat;background-position: left bottom;background-size: contain;position: relative;}
.promotion_wrap:nth-of-type(2)::after{/* content:""; */width: 100%;height: 30rem;display: block;background: url(./images/con01_card02_content.png) no-repeat center center;background-size: contain;position: absolute;bottom:2.5rem;left: 50%;transform: translateX(-50%);}
.promotion_wrap .sub_title{width: 100%;padding:2rem 0;font-size: 3rem;font-weight: 500;text-align:center;background:url(./images/title_bg.png)no-repeat center;background-size: cover;color: #630101;margin-bottom: 1rem;display: flex;justify-content: center;align-items: center;}
.promotion_wrap .sub_title span{color: #070707;}
.card_header .desc_text{font-size: 2rem; display: inline-block; padding:0.4rem;}
.promotion:nth-of-type(1) .desc_text{background: #ffdddd;}
.promotion:nth-of-type(1) .card_header,.promotion:last-of-type .promotion_wrap:nth-of-type(2) .card_header{padding: 4rem 0 0 4rem;}
.promotion:nth-of-type(1) .card_body{align-items:flex-end;}
.promotion:nth-of-type(1) .card_body,.promotion:last-of-type .promotion_wrap:nth-of-type(2) .card_body{padding-top:1.2rem;}
.promotion:last-of-type .promotion_wrap:nth-of-type(2) .select_area{position: relative}
.promotion:last-of-type .promotion_wrap:nth-of-type(2) .select_area::after{content:'';width: 7rem;padding-top: 7rem;background:url(./images/el04.png)no-repeat 50% 50%;display: block;position:absolute;background-size: contain;right: 0;top: 0;transform: translate(2rem, 0);z-index: 2;}
.promotion:last-of-type .promotion_wrap:nth-of-type(2) .price_area{position: relative}
.promotion:last-of-type .promotion_wrap:nth-of-type(2) .price_area .price{z-index:1;}
.promotion:last-of-type .promotion_wrap:nth-of-type(2) .price_area::before{content:'';width: 21rem;padding-top: 14rem;background:url(./images/el05.png)no-repeat 50% 50%;display: block;position:absolute;background-size: cover;right: 0;top:50%;transform: translate(-20%,-60%);}
.promotion:last-of-type .promotion_wrap:nth-of-type(2) .desc_text span{display: inline-block;background: rgba(216, 216, 216, .5);color: #750a12;padding:1rem;border-radius: 1rem; margin-right: .7rem;}
.promotion:last-of-type{z-index:0;}
.promotion:last-of-type::before{z-index:-1;content:'';width: 100%;padding-top: 30rem;display: block;background: url(./images/el03.png) no-repeat left top;background-size: contain;position: absolute;top: -15rem;left:0;}
.card_body{display: flex;justify-content: space-between;align-items:center;padding-block: 4.6rem;}
.card_body .select_area .name{font-size: 3.2rem;font-weight: 600;display: block;margin-bottom: 1rem;}
.card_body .select_area .sub_text{font-size: 2.5rem;font-weight: 500;letter-spacing: -0.08em;line-height: 1.5;}
.card_body .select_area .sub_text .p_color{color: #8e1b22;}
.card_body .price_area{display: flex;justify-content: flex-start;align-items: center;gap: 8rem;flex-shrink: 0;}
.card_body .price_area .strike-through{font-size: 30px;font-weight: 500;text-decoration: line-through;color: #bdbdbd;text-decoration-thickness: 2px;}
.card_body .price{font-size: 2rem;font-weight: 500;line-height: 1;}
.card_body .price strong{font-size: 6.5rem;color: #8e1b22;letter-spacing: -0.08em;font-weight: 800;padding-right: .2rem;}
.card_body input[type=checkbox] {-webkit-appearance: none; /* 사파리/크롬 */-moz-appearance: none;    /* 파이어폭스 */appearance: none;         /* 표준 */border: none;outline: none;background: none;cursor: pointer;}
.card_body input[type="checkbox"] + label::before,.card_body input[type="radio"] + label::before {content: '✓';color: #fff;font-size: 2.4rem;width: 3rem;height: 3rem;border-radius: .4rem;margin-right: 1rem;vertical-align: middle;
    background: #CCCCCC;display: flex;justify-content: center;align-items: center;box-sizing: border-box;transition: all .2s ease;cursor:pointer;
}
.card_body input[type="checkbox"]:checked + label::before,.card_body input[type="radio"]:checked + label::before{background: var(--main-color); color: #fff;}
.card_body input[type="checkbox"] + label{display: flex;justify-content: flex-start;align-items: baseline;cursor: pointer;}




/*  바로신청 */
.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: #AD1819;animation: blinkBgColor 1s steps(1) infinite; 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: var(--point-color);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 5%;width: 100%;}

/* 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{width: 100%;background: url(./images/popup_title_bg.png)no-repeat center top;background-size: cover;display: flex;flex-direction: column;gap:1.4rem;justify-content: center;align-items: center;
    text-align: center;color: #fff;padding: 4rem 2rem;font-weight: 700;font-family: 'Pretendard';white-space: nowrap; }
.register_popup .top_title img{display:inline-block;}
.register_popup .title_txt01{font-size: 4.8rem;}
.register_popup .title_txt02{font-size: 3.8rem;}
.register_popup .title_txt01 img{width: 4rem;}
.register_popup .title_txt02 img{width: 3.5rem;}
.register_popup .title_txt03{font-size: 4.8rem; background: #000;padding:1rem;}
.register_popup .title_txt03 .blink{animation: blinkColor 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;}

/* 애니메이션 */
@keyframes blinkColor{
    50% { color: #FFE553; }
}

@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;
}