/* header */
#header{ margin-bottom: -10px; }
#header nav{ margin-top: -15px; position: relative; /* z-index: 5; */ }
#header ul li a{ background: var(--mainColor); color: #fff !important; padding: 15px 0 25px !important; box-shadow: none; }
#header ul li:not(.on)::after{ display: none; }
#header ul li.on a{ font-size: 2.4rem; background: #fff; color: var(--mainColor) !important; padding: 20px 0 35px !important; border: 1px solid var(--mainColor); }

/* common */
/* #sub.inner{ max-width: 820px; width: 100%; margin: 0 auto; padding: 25px 15px; background: #fff; border-radius: 10px 10px 0 0; } */
#sub.inner{ max-width: 820px; width: 100%; margin: 0 auto; padding: 25px 15px; background: #fff; border-radius: 10px; border: 1px solid var(--mainColor); }
#sub.inner > div{ padding: 0 15px; }

/* 상담 신청, 매장 양도신청 - form */
#form .input{ display: flex; align-items: center; margin-bottom: 15px; }
#form .input input[type="text"], #form .input textarea{ width: 100%; height: 40px; /* border: 1px solid #E9E9E9; */ border: 1px solid #ccc; border-radius: 5px; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05); padding: 15px; font-size: 1.6rem; font-weight: 400; color: #222; }
#form .input::placeholder{ color: #999; }
#form .input span{ width: 145px; display: inline-block; font-size: 1.8rem; font-weight: 500; color: #222; }
#form .input input[type="text"]{ width: calc(100% - 145px); }
#form .input > ul{ width: calc(100% - 145px); display: flex; align-items: center; }
#form .input > ul li:not(:last-of-type){ margin-right: 20px; }
#form .input ul li input[type="checkbox"], #form .input ul li input[type="radio"]{ display: none; }
#form .input label{ display: inline-block; font-size: 1.6rem; font-weight: 500; color: #666; padding: 5px 35px 4px; padding-right: 0; position: relative; cursor: pointer; }
#form .input label::before{ content: ""; width: 28px; height: 28px; background: #fff; /* border: 1px solid #E9E9E9; */ border: 1px solid #ccc; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05); border-radius: 5px; position: absolute; left: 0; top: 0; }
#form p{ font-size: 1.8rem; font-weight: 500; color: #222; text-align: center; margin-top: 30px; }

/* checkbox, radio 체크 */
#form .input input:checked + label::before{ border: 1px solid var(--mainColor); }
#form .input input:checked + label::after{ content:"\e928"; font-family:'xeicon'; font-weight: normal; font-style: normal; color: var(--mainColor); position: absolute; top: 5px; left: 7px; }

#form .flex{ display: flex; align-items: center; }
#form .flex .input.number{ width: 60%; }
#form .flex .input.number input{ width: 21%; margin-right: 15px; }
#form .flex .input.number input:first-of-type{ width: 12.5%; }
#form .flex .input.date{ width: 40%; }
#form .flex .input.date span{ width: auto; margin-right: 15px; }
#form .flex .input.date input{ width: 64.3%; }

#form ul li.etc{ display: flex; align-items: center; width: calc(100% - 264px); }
#form ul li.etc input[type="text"]{ width: calc(100% - 91px); }

#form .input.policy{ align-items: flex-start; font-size: 1.4rem; font-weight: 400; color: #222; line-height: 1.5714; }
#form .input.policy > div{ width: calc(100% - 145px); }
#form .scroll-y{ height: 130px; overflow-y: scroll; border: 1px solid #E9E9E9; border-radius: 5px; padding: 15px; }
#form .scroll-y p:not(:last-of-type){ margin-bottom: 1.5714em; }
#form .scroll-y ul{ margin-bottom: 1.5714em; }

#form .input.policy > div > ul{ display: flex; margin-top: 10px; }
#form .input.policy > div > ul li:not(:last-of-type){ margin-right: 20px; }
#form .input.policy > div > ul li label{ color: #222; }

.scroll-y::-webkit-scrollbar{ width: 25px; }
.scroll-y::-webkit-scrollbar-thumb{ height: 20px; background: #ccc; background-clip: padding-box; border: 10px solid transparent; border-radius: 100px; }
.scroll-y::-webkit-scrollbar-track{ background: #eee; background-clip: padding-box; border: 10px; border: 10px solid transparent; border-radius: 100px; }

#form button{ width: 105px; height: 35px; font-size: 1.5rem; font-weight: 500; color: #222; background: #fff; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2); border: none; border-radius: 50px; transition: all 0.3s; }
#form button:hover{ background: var(--mainColor); color: #fff; }

#form ul li button{ width: auto; height: 30px; font-size: 1.6rem; font-weight: 500; color: var(--mainColor);; box-shadow: none; }
#form ul li button:hover{ background: #fff; color: var(--mainColor); }

@media screen and (max-width: 735px){
	#form .input.policy br{ display: none; }
}


/* 상담 신청 - form */
#form.counsel h2{ font-size: 1.8rem; font-weight: 500; color: #222; text-align: center; margin-bottom: 20px; }
#form.counsel h2 span{ font-weight: 700; color: #5E8234; }
#form.counsel .flex .input.number{ width: 53%; }
#form.counsel .flex .input.number div{ width: calc(100% - 145px); display: flex; }
#form.counsel .flex .input.number input{ width: 37.5%; }
#form.counsel .flex .input.number input:first-of-type{ width: 25%; }
#form.counsel .flex .input.date{ width: 47%; margin-left: 5px; }
#form.counsel .flex .input.date ul{ width: calc(100% - 80px); }

@media screen and (max-width: 820px){
	#form.counsel .flex .input.number{ width: 49%; }
	#form.counsel .flex .input.date{ width: 51%; margin-left: 0; }
}


/* 매장 양도신청 - form */
#form .input.name ul li:last-of-type{ width: calc(100% - 220px); }
#form.transfer .flex .input.date input{ width: calc(100% - 93px); }
#form.transfer .info > div{ display: flex; }
#form.transfer .info .half{ display: flex; align-items: center; position: relative; }
#form.transfer .info .half::after{ content: ""; width: 2px; height: 15px; background: var(--mainColor); border-radius: 10px; position: absolute; top: 50%; right: -2px; transform: translateY(-50%); }
#form.transfer .info .half:first-of-type{ padding-right: 20px; }
#form.transfer .info .half:last-of-type{ padding-left: 20px; }
#form.transfer .info .half:last-of-type::after{ display: none; }
#form.transfer .info .half span{ width: auto; color: #666; }
#form.transfer .info input[type="text"]{ width: 120px; margin-left: 10px; margin-right: 5px; }
#form.transfer .input.date input[type="text"]{ width: calc(100% - 129px); }
#form.transfer .input.date span:last-of-type{ width: auto; margin-left: 5px; margin-right: 0; }


/* 추천점 안내 */
#recommend{ padding: 20px; }
#recommend .wrap{ display: flex; box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1); padding: 30px; border-radius: 10px; }
#recommend .image-box{ width: 37%; }
#recommend .image-box figure{ position: sticky; top: 30px; left: 0; border-radius: 10px; overflow: hidden; }
#recommend .text-box{ width: 63%; padding-left: 40px; margin-top: 20px; }
#recommend .title{ margin-bottom: 25px; }
#recommend .title span{ font-family: var(--Poppins); font-size: 1rem; font-weight: 500; color: #747474; }
#recommend .title h2{ font-size: 2rem; font-weight: 500; color: #222; }
#recommend dl{ display: flex; flex-wrap: wrap; }
#recommend dl:not(:last-of-type){ margin-bottom: 25px; }
#recommend dt{ width: 100%; font-size: 1.6rem; font-weight: 600; color: var(--mainColor); padding-left: 10px; margin-bottom: 5px; position: relative; }
#recommend dt::before{ content: ""; width: 2px; height: 10px; border-radius: 10px; background: var(--mainColor); position: absolute; top: 45%; left: 0; transform: translateY(-50%); }
#recommend dd{ font-size: 1.5rem; font-weight: 400; color: #333; line-height: 1.6; padding-right: 9px; padding-left: 10px; text-indent: -9px; }
#recommend dd:not(:last-of-type){ margin-bottom: 5px; }
#recommend dd ul{ display: flex; flex-wrap: wrap; text-indent: 0; }
#recommend dd ul li{ line-height: 1.5; }
#recommend dd ul li:after{ content: ","; display: inline-block; margin-right: 5px; }
#recommend dd ul li:last-of-type:after{ display: none; }


/* 팝업 */
#popup{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; background: rgba(0, 0, 0, 0.5); display: none; }
#popup .popup{ max-width: 800px; width: 100%; background: #fff; border-radius: 10px; padding: 35px 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#popup .popup .close{ position: absolute; top: 15px; right: 20px; font-size: 2rem; color: #222; padding: 0; border: none; background: none; }
#popup .popup > p{ text-align: center; }

/* 상담 신청 팝업 */
#popup .popup1 > p{ font-size: 2rem; font-weight: 500; color: #222; }
#popup .popup1 table{ margin-top: 15px; }
#popup .popup1 table td{ font-size: 1.4rem; font-weight: 300; color: #222; border: 1px solid #E3E3E3; padding: 15px; }
#popup .popup1 table td:not(:last-of-type){ text-align: center; }
#popup .popup1 table tr td:first-of-type{ border-left: none; width: 70px; }
#popup .popup1 table tr td:nth-of-type(2){ width: 125px; }
#popup .popup1 table tr td:last-of-type{ border-right: none; }

/* 매장 양도신청 팝업 */
#popup .popup2{ padding: 80px 0; }
#popup .popup2 > p{ font-size: 2.8rem; font-weight: 400; color: #222; }
#popup .popup2 > p span{ font-weight: 600; color: var(--mainColor); }

@media screen and (max-width: 750px){
	#popup{ width: 750px; }
	#popup .popup{ width: 700px; }
}


/* 전문보기 팝업 */
#policy-popup{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; background: rgba(0, 0, 0, 0.5); display: none; }
#policy-popup .policy{ max-width: 815px; width: 100%; background: #fff; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); border-radius: 10px; padding: 50px; padding-bottom: 35px; }  
#policy-popup .policy h3{ font-size: 2rem; font-weight: 700; color: var(--mainColor); text-align: center; margin-bottom: 20px; }
#policy-popup .policy p, #policy-popup .policy ul li{ font-size: 1.4rem; font-weight: 400; color: #222; line-height: 1.5714; }
#policy-popup .policy p span{ font-weight: 500; }
#policy-popup .policy ul{ margin: 30px 0; }  
#policy-popup .policy button{ width: 105px; height: 35px; font-size: 1.5rem; font-weight: 500; color: #222; background: #fff; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2); border: none; border-radius: 50px; transition: all 0.3s; }
{ background: var(--mainColor); color: #fff; }
#policy-popup .policy button.close{ width: 50px; height: 50px; box-shadow: none; font-size: 2rem; color: #222; position: absolute; top: 10px; right: 10px; }
#policy-popup .policy button.close:hover{ background: #fff; color: #222; }

@media screen and (max-width: 750px){
	#policy-popup{ width: 750px; }
	#policy-popup .policy{ width: 700px; }
}