:root {
    /* color */
    --main-color:#0055FF;
    --sub-color:#00256C;
    --dec-color:rgba(0,85,255,10%);    
    --gray-color:#808080;
    --bar-color:#EFEFEF;

    /* font-size */
    --title-ft:34px;
    --subtitle1-ft:32px;
    --subtitle2-ft:24px;
    --des-ft:22px;

    /* space */
    --section-space: 150px;

    /* common */
}

* {color: #1d1d1f;}
#container>div{margin-bottom: 0;}
button, select, .close{cursor: pointer;}

/* mainVisual */
#container{margin-top: 86px}
.mainVisual{position: relative;}
.mainVisual .text{position: absolute; bottom: 80px; left: 0;}
.mainVisual .text p{font-size: 38px; line-height: 1.35;}
.mainVisual .text h1{font-size: 44px; padding-top: 21px;}

/* subVisual */
.subVisual{display: flex; justify-content: space-between; padding: var(--section-space) 0;}
.subVisual .text{display: flex; flex-direction: column; justify-content: space-between; margin: 100px 0 50px 0;}
.subVisual .text p{font-size: var(--subtitle2-ft); line-height: 1.5;}
.subVisual .text p.b{font-weight: 600; margin-bottom: 25px; font-size: var(--des-ft);}
.subVisual .text h2{font-size: var(--subtitle1-ft); line-height: 1.3;}
.subVisual .text h3{font-size: var(--title-ft); margin-bottom: 15px;}

/* priceType */
.priceType{padding: var(--section-space) 0; background: #F6F6F6; margin-top: 50px;}
.priceType .swiper{padding-top: 50px;}
.priceType .swiper .swiper-slide{justify-content: space-between;}
.priceType .swiper .swiper-pagination{top: 0; text-align: left; bottom: auto;}
.priceType .swiper .swiper-pagination-bullet{width: 16px; height: 16px; margin: 0 10px;}
.priceType .swiper .swiper-pagination-bullet:first-child{margin-left: 0;}
.priceType .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 45px; border-radius: 20px; background: var(--sub-color); margin: 0;}
.priceType h2{font-size: var(--subtitle1-ft); line-height: 1.3; margin-bottom: var(--section-space);}
.typeWrap{display: flex; justify-content: space-between;}
.typeWrap .type{width: 550px;}
.descBox{display: flex; align-items: center; position: relative;}
.descBox p{font-size: var(--subtitle2-ft); display: inline-block; vertical-align: -8px; color: #4A4A4A; font-weight: 600; padding-left: 10px;}
.priceType .type .text h3{font-size: var(--subtitle1-ft); margin: 20px 0 30px; color: var(--main-color); padding-top: 1px;}
.text p.gray{font-size: var(--subtitle2-ft); color: var(--gray-color); line-height: 1.5;}
.text p.gray span{font-weight: 600; color: var(--gray-color);}
.priceType .type .img{text-align: left;}
.priceType .type .service{margin-top: 30px;}
.priceType .type .service p{background: #E2E2E2 url(/request/img/sercive_intro/iconPlus.png) 90% center no-repeat; color: #808080; display: inline-block; padding: 10px 38px 12px 12px; font-size: 20px; background-size: 22px; border-radius: 5px; margin-right: 10px; cursor: pointer;}
.priceType .type .service.regular p{background-position: 81% center;}
.priceType .type .img img{height: 360px; padding-right: 50px;}

/* goodCare */
.goodCare{display: flex; margin: var(--section-space) 0;}
.careTitle{flex-basis: 300px; padding-top: 20px;}
.goodCare .swiper{flex-basis: calc(100% - 300px); padding: 20px 50px 20px 20px; box-sizing: border-box;}
.goodImg{height: 170px;}
.goodCare h2{font-size: var(--title-ft); line-height: 1.35;}
.goodCare .descBox p{color: var(--main-color);}
.goodCare .text p.gray{margin: 15px 0 25px 0; font-size: var(--des-ft);}
.goodCare .good{border-radius: 30px; align-items: flex-start; width: 400px !important;}
.goodCare .good .goodBox{box-shadow: 0 0 25px rgba(0,0,0,0.15); padding: 25px; box-sizing: border-box; border-radius: 30px; width: 400px;}
.goodCare .good .img{display: inline-block; border-radius: 20px; overflow: hidden;}
.goodCare .good .img img{width: 100%;}

/* gotchaExclusive */
.gotchaExclusive{margin: 120px 0; background: url('/request/img/sercive_intro/exBg.png')no-repeat; background-size: 100%;}
.gotchaExclusive .title{text-align: center; padding-top: 35px;}
.gotchaExclusive .lottie{margin: 0 auto; padding-left: 150px; width: 300px; height: 300px;}
.gotchaExclusive .title h2{font-size: 40px; line-height: 1.5; margin-bottom: 100px; font-weight: 900; margin-top: -18px;}
.gotchaExclusive .text h3{font-size: var(--subtitle1-ft); line-height: 1.3; margin: 30px 0 30px;}

.contentWrap{display: flex; justify-content: space-between; align-items: flex-end; padding: var(--section-space) 0;}
.contentWrap .text, .contentWrap #applicationForm, .contentWrap #applicationForm2{width: 550px;}

.wrapper{ height: 80px; line-height: 80px; width: 100%; background: #fff;  border-radius: 50px; box-shadow: 0 1px 10px rgba(0,0,0,0.1);; text-align: center;}
.wrapper .exclusiveTab{ position: relative; display: flex;}
.wrapper .exclusiveTab label{flex: 1; width: 100%; z-index: 1; height: 80px; line-height: 80px; cursor: pointer;}
.wrapper .exclusiveTab label span{ position: relative; z-index: -1; color: var(--gray-color); font-size: var(--des-ft); transition: color 0.4s ease;}
.wrapper .exclusiveTab #resident:checked ~ label.resident span,
.wrapper .exclusiveTab #employees:checked ~ label.employees span{ color: #fff; font-weight: 600;}
.wrapper .exclusiveTab .tab{ position: absolute; height: 100%; width: 50%; left: 0; bottom: 0; z-index: 0; border-radius: 50px; background: var(--main-color); transition: 0.4s cubic-bezier(0.58, -0.08, 0.41, 1.05);}
.wrapper .exclusiveTab #employees:checked ~ .tab{left: 50%;}
.wrapper .exclusiveTab input{display: none;}
.tab-content {display: none;}
.tab-content.show {display: block;}
.tab-content img{height: 180px;}

form select{border: none; border-bottom: 2px solid var(--main-color); padding: 20px 35px 20px 0; font-family: 'Noto Sans KR', sans-serif; font-size: var(--subtitle2-ft); color: var(--main-color); font-weight: 600; background: url(/request/img/sercive_intro/iconSelect.png) no-repeat center right 10px/ 12px; outline: none;}
form span, form p{font-size: var(--subtitle2-ft); font-weight: 600;}
form p{margin-top: 25px;}
form .selectbox2{margin-left: 10px;}
form .area select{width: 100%;}
form .btnWrap{margin-top: 80px;}
form .btnWrap button{border: none; background: #fff; width: 100%; border-radius: 10px; height: 70px; font-family: 'Noto Sans KR', sans-serif; font-size: var(--subtitle2-ft); border: 2px solid var(--main-color); color: var(--main-color); font-weight: 600;}
form .btnWrap .applyButton{background: var(--main-color); color: #fff; margin-bottom: 20px; font-weight: 400;}

#applicationForm2 select{width: 100%;}

/* service_notice */
.service_notice{padding: 50px 0 180px 0;}
.service_notice h2{ font-size: var(--des-ft); margin-bottom: 20px; color: var(--sub-color);}
.service_notice h2::before{content: "!"; display: inline-block; width: 25px; height: 25px; background: var(--sub-color); color: #fff; border-radius: 50%; text-align: center; font-size: 16px; line-height: 25px; margin-right: 8px; vertical-align: 2px;}
.service_notice p{position: relative; color: var(--gray-color); font-size: 18px; line-height: 1.5; padding-left: 10px; margin-bottom: 8px;}
.service_notice p::before{position: absolute; content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--gray-color); position: absolute; left: 0; top: 10px;}
.service_notice p:last-child{margin-bottom: 0;}

/* modal */
.modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.74);z-index: 9999; display: none;}
.modal.show {display: block;}
.modalBody {position: absolute; top: 50%; left: 50%; width: 300px; height: auto; padding: 28px; background-color: rgb(255, 255, 255); border-radius: 10px; box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); transform: translateX(-50%) translateY(-50%);}
.modal.priceModal .modalBody{width: 400px;}
.modalBody span.close{position: absolute; top: 0; right: 0; padding: 28px;}
.modalBody span.close img{height: 22px;}
.modalBody h2{line-height: 1.35;font-size: 28px;margin-top: 40px;font-weight: 700;}
.modalBody p{padding: 20px 0; font-size: 18px; line-height: 1.5; font-weight: 500;}
.modalBody p span{color: var(--main-color); font-weight: 600;}
.modalBody button{border: none;background: var(--main-color);width: 100%;border-radius: 10px;height: 60px;font-family: 'Noto Sans KR', sans-serif;font-size: 20px;color: #fff;font-weight: 600;margin: 10px 0;}
.modalBody button.two{background: #00256C; margin-top: 0;}

/* priceModal */
.priceModal .swiper{width: 600px; height: 100%;}
.priceModal .price{padding-top: 50px;}
.service h3 img{height: 64px;} 
.service .serviceMsg{font-size: 26px;font-weight: 600;line-height: 1.45;}
.service .serviceMsg span{color: var(--main-color); position: relative; display: inline-block;}
.service .serviceMsg span::after{content: ''; display: block; width: 100%; height: 20px; background: var(--dec-color); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.service .serviceName{background: var(--main-color);color: #fff;font-weight: 500;padding: 7px 8px 10px 8px;box-sizing: border-box;display: inline-block;font-size: var(--des-ft);border-radius: 5px;margin: 7px 0;}
.service .serviceInfo{color: var(--gray-color);font-size: 20px;line-height: 1.5;margin-bottom: 20px;}
.priceModal .swiper-button-prev, .priceModal .swiper-button-next{width: 50px; height: 50px; background: #80808070; border-radius: 50%;}
.priceModal .swiper-button-next:after, .priceModal .swiper-button-prev:after{color: #1D1D1F; font-size: 19px; font-weight: 800;}

table{ border-collapse : collapse; width: 100%; }
table th,td{width: 100px; height: 50px; text-align: left;}
table th {border-bottom: 2px solid; font-size: 15px; padding-left: 8px; font-weight: 500; height: 40px; font-weight: 400;}
table td {border: 1px solid #DCDCDC; font-weight: 600; color: var(--sub-color); font-size: var(--des-ft); padding-left: 8px; letter-spacing: -0.5px;}
table tr td:first-child{background: var(--dec-color); color: inherit; font-size: 15px; border-left: 0; font-weight: 500; letter-spacing: inherit;}
table tr td:last-child{border-right: 0;}