: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:30px;
    --subtitle1-ft:27px;
    --subtitle2-ft:20px;
    --des-ft:18px;

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

    /* common */
}

body{color: #121212; letter-spacing: -0.25px;}
#header{height: 70px; border-bottom: 1px solid #eee;}
#mainVisual { margin-top: 65px; padding: 35px 0 40px;}
#container{position: relative;}
#container .inner { width: 90%; margin: 0 auto;}

/* common */
.gray-bar{border: 10px solid #EFEFEF;}

/* mainVisual */
.mainVisual{margin-top: 70px; position: relative;}
.mainVisual img{width: 100%;}
.mainVisual .text{position: absolute; bottom: 8%; left: 5%; color: #fff;}
.mainVisual .text p{font-size: var(--title-ft);line-height: 1.3; text-shadow: 2px 2px 2px rgba(0,0,0,0.25)}
.mainVisual .text h1{font-size: 36px; margin-top: 15px;text-shadow: 2px 2px 2px rgba(0,0,0,0.25)}

/* subVisual */
.subVisual{position: relative;}
.subVisual img{width: 100%;}
.subVisual .text{position: absolute; width: calc(100% - 10%); height: calc(100% - 30%); top: 15%; left: 5%; display: flex; flex-direction: column; justify-content: space-between;}
.subVisual .text p{font-size: var(--des-ft); line-height: 1.5;}
.subVisual .text p.b{font-weight: 600; margin-bottom: 25px;}
.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{margin: var(--section-space) 0;}
.priceType h2{font-size: var(--subtitle1-ft); line-height: 1.3; margin-bottom: var(--section-space);}
.descBox{display: inline-block; border-radius: 30px; position: relative;}
.descBox::after{content: ''; display: block; background: var(--dec-color); width: 100%; height: 27px; position: absolute; top: -2px; z-index: -1; left: -6px; border-radius: 30px; padding: 3px 9px 3px 10px;}
.descBox img.icon{height: 28px; width: auto;}
.descBox img.icon.icon2{margin-left: 8px; height: 25px; margin-right: 2px;}
.descBox img.icon.icon3{margin-left: 8px; height: 23px; margin-right: 2px; vertical-align: -11px;}
.descBox img.icon.icon4{margin-left: 8px; height: 20px; margin-right: 2px; vertical-align: -11px;}
.descBox img.icon.icon5{margin-left: 6px; height: 23px; margin-right: 2px; vertical-align: -12px;}
.descBox p{font-size: var(--subtitle2-ft); display: inline-block; vertical-align: -8px; color: var(--main-color); font-weight: 600;}
.priceType .type .text h3{font-size: var(--subtitle1-ft); margin: 30px 0; padding-top: 7px;}
.text p.gray{font-size: var(--des-ft); color: var(--gray-color); line-height: 1.5;}
.text p.gray span{font-weight: 600;}
.priceType .type .img{margin: 80px 12% 100px; text-align: center;}
.priceType .type .img img{width: 100%;}
.priceType .type:last-child .img img{width: 90%;}

/* goodCare */
.goodImg{height: 170px; margin: var(--section-space) 0 40px;}
.goodCare h2{font-size: var(--title-ft); line-height: 1.35;}
.goodCare .text p.gray{margin: 25px 0;}
.goodCare .good{margin-top: 120px;}
.goodCare .good .img{border-radius: 20px; overflow: hidden; box-shadow: 0 5px 10px rgba(0,0,0,0.25);}
.goodCare .good .img img{width: 100%;}

/* gotchaExclusive */
.gotchaExclusive{margin: 120px 0; background: url('../img/service_intro/exBg.png')no-repeat; background-size: 100%;}
.gotchaExclusive .title{text-align: center; padding: 80px 0 45px 0;}
.gotchaExclusive .title img{height: 32px;margin-bottom: 10px;vertical-align: -15px;margin-left: 4px;}
.gotchaExclusive .title h2{font-size: var(--title-ft); line-height: 1.35;}
.gotchaExclusive .text h3{font-size: var(--subtitle1-ft); line-height: 1.3; margin: 30px 0 20px;}

.wrapper{ height: 55px; width: 100%; background: #fff; line-height: 55px; 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;}
.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: 160px; margin-top: var(--section-space);}

form{margin-top: 50px;}
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(../img/service_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: 60px; 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%;}

/* basicPrice */
.serviceType{margin: 120px 0 var(--section-space) 0;}
.serviceType img{width: 180px; padding-bottom: 30px;}
.serviceType h2{font-size: var(--title-ft); line-height: 1.3;}
.basicPrice .price{padding-bottom: 130px}
.basicPrice .price.onedayGS{padding-bottom: 30px;}

.service h3 img{height: 64px; margin-bottom: 20px;} 
.service .serviceMsg{font-size: 24px; 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: 5px; box-sizing: border-box; display: inline-block; font-size: var(--subtitle2-ft); border-radius: 5px; margin: 15px 0;}
.service .serviceInfo{color: var(--gray-color); font-size: var(--des-ft); line-height: 1.5; margin-bottom: 30px;}

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; font-weight: 400;}
table tr td:last-child{border-right: 0;}

/* service_notice */
.service_notice{background: #EFEFEF; padding: 50px 0; margin: 0;}
.service_notice h2{font-size: var(--subtitle2-ft); margin-bottom: 20px;}
.service_notice p{position: relative; color: var(--gray-color); font-size: 14px; 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; visibility: hidden; opacity: 0; transition: visibility 0s linear 0.1s, opacity 0.1s linear;}
.modal.show {visibility: visible; opacity: 1; transition-delay: 0s;}
.modalBody {position: absolute; top: 50%; left: 50%; width: calc(90% - 40px); height: auto; padding: 20px; 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%);}
.modalBody span.close{position: absolute; top: 0; right: 0; padding: 20px;}
.modalBody span.close img{height: 22px;}
.modalBody h2{line-height: 1.35; font-size: 26px; margin-top: 40px;}
.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: var(--subtitle2-ft);  color: #fff; font-weight: 600; margin: 10px 0;}
.modalBody button.two{background: #00256C; margin-top: 0;}

/* Media Query */
@media (max-width: 380px) {
    .text p.gray {font-size: 17px;}
    .gotchaExclusive .title h2{font-size: 25px;}
}