@charset "utf-8";
ul {list-style:none; margin:0; padding:0;}
p {margin:0;}

.appoint .onlineWrap {width:1020px; margin:0 auto; max-width:100%;}
.appoint .onlineLink {width:100%;display:flex; gap:50px; }
.appoint .onlineLink>div {width:calc((100% - 50px)/2); padding:60px 70px; border-radius: 40px;border: 5px solid #FFF;background: #F9F9F9;box-shadow: 12px 9px 40px 0px rgba(0, 0, 0, 0.10);}
.appoint .onlineLink .tit {color:var(--base4);font-size:var(--fs24);font-weight: 600;}
.appoint .onlineLink .txt {padding:15px 0 35px; font-size:var(--fs17); color:#444; line-height:1.2;}

.appoint .onlineLink a {padding:0 0 0 55px; width:90%; color:#fff; font-weight:600; font-size:var(--fs18); line-height:44px; border-radius:100px; background:var(--base4) /*url(/images/reservation/linkArrow.svg)130px 50% no-repeat*/; position:relative; display:block; transition: all .5s ease-in-out;}
.appoint .onlineLink a .arrow {display:inline-block; position:absolute; left:43%; top:50%; transform:translateY(-50%); width:15%; height:2px; background:#fff; border-radius:3px;margin-right:2em;transition:all .5s ease-in-out;}
.appoint .onlineLink a .arrow:after {content: ''; position:absolute; left:84%; top:43%; display:block; transform:translateY(-50%); display:block; background: url(/images/common/arrow_right.svg) no-repeat 0 0;width:100%; height:1em; background-size: contain;transition:all .5s ease-in-out;}


.appoint .onlineLink a:hover .arrow {width:45%;}
.appoint .onlineLink a:hover .arrow:after {left:95%;}

.appoint .onlineLink a::before {width:18px; height:18px; background:url(/images/reservation/i-check.svg)50% no-repeat; left:27px; top:50%; position:absolute; display:block; content:''; transform:translateY(-50%);}
.appoint .onlineLink .non {}
.appoint .onlineLink .non .tit { color:#444;}
.appoint .onlineLink .non a {background-color:#444; }
.appoint .onlineLink .non a::before {background-image:url(/images/reservation/i-check2.svg);}

.appoint .selectPeople {padding:0 0 20px; display:flex; gap:10px; flex-direction:column;}
.appoint .selectPeople .item {padding:25px 32px; border-radius:7.5px;border: 1px solid #C2C2C2; background: #FFF; cursor:pointer;}
.appoint .selectPeople .item.on {padding:23px 30px; border:3px solid var(--base5);}
.appoint .selectPeople .item p {padding:10px 0 0;}

.appoint .selectInfo {padding:20px 32px; background:var(--base5); border-radius:7.5px; color:#fff; text-align:center; font-size:var(--fs20); font-weight:600; margin-bottom:10px;}

.appoint .selectVisit {padding: 0 0 20px; display: flex; gap: 10px; flex-direction: column;}
.appoint .selectVisit .item {padding:25px 32px; border-radius:7.5px;border: 1px solid #C2C2C2; background: #FFF; cursor:pointer;}
.appoint .selectVisit .item.on {padding:23px 30px; border:3px solid var(--base5);}
.appoint .selectVisit .item p {padding:10px 0 0;}


.appoint .selectPeople .inputWrap {}
.appoint .selectPeople .inputWrap .tit {}
.appoint .selectPeople .inputWrap label {}
.appoint .selectPeople .inputWrap+p {}

.appoint .mediTab {margin:0;}
.appoint .mediTab .tabBtn {}
.appoint .mediTab .tabBtn.on {color:var(--base5);}
.appoint .mediTab .tabBtn.on span {background:var(--base5);}

.appoint .mediTab .tabBtn span {}
.appoint .mediTab .tabBtn span img {}


.appoint .dateSelect {display:flex; gap:80px;}
.appoint .dateSelect .item {}
.appoint .dateSelect .item.cal {width:380px; max-width:100%;}
.appoint .dateSelect .item.date {
	padding:50px; width:calc(100% - 460px); font-size:var(--fs16); color:#000; font-weight:500;
	border-radius: 20px;background: #FFF;box-shadow: 4px 4px 30px 0px rgba(0, 0, 0, 0.10);
}

.appoint .dateSelect .info {display:flex; gap:5px; height:30px; align-items:center;}
.appoint .dateSelect .info span {padding:3px 10px; color:#000; background:#f2f2f2; font-size:var(--fs15); font-weight:500;}
.appoint .dateSelect .info span+span {color:#fff; background:var(--base5);}

.appoint .dateSelect .item .inputWrap {display:flex; gap:17px;}
.appoint .dateSelect .item .inputWrap p {width:75px; }
.appoint .dateSelect .item .inputWrap>div {width:calc(100% - 75px);}
.appoint .dateSelect .item .inputWrap .date-day {display:flex; gap:5px; flex-wrap:wrap;}
.appoint .dateSelect .item .inputWrap .date-day span {}
.appoint .dateSelect .item .inputWrap .date-day span:nth-child(odd) {padding:0 20px; border-bottom:1px solid rgba(0, 0, 0, 0.50);}
.appoint .dateSelect .item .inputWrap .date-day span:nth-child(even) {padding:0 5px 0 0;}
.appoint .dateSelect .item .inputWrap .date-day span.year {padding:0 30px;}
.appoint .dateSelect .item .inputWrap .date-day span.month {}
.appoint .dateSelect .item .inputWrap .date-day span.day {}

.appoint .dateSelect .item .inputWrap .date-time {display:flex; gap:10px; flex-direction:column;}
.appoint .dateSelect .item .inputWrap .date-time select {width:256px; height:40px; max-width:100%;}
.appoint .dateSelect .item .inputWrap .date-time .min {display:flex; gap:8px; flex-wrap:wrap;}
.appoint .dateSelect .item .inputWrap+.inputWrap {margin:24px 0 0;}

.appoint .dateSelect .item .ulType1 {padding:35px 0 0; margin:35px 0 0; border-top:1px solid rgba(151, 127, 114, 0.20);}

.appoint .formWrap .formGroup {}
.appoint .formWrap .formGroup .tit {align-self: center;}
.appoint .formWrap .formGroup .inputWrap {}




/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1199px) {
	
	.appoint .onlineLink {gap:20px;}
	.appoint .onlineLink>div {padding:40px 50px; width:calc((100% - 20px)/2);}
	
	.appoint .dateSelect {flex-direction:column; gap:10px;}
	.appoint .dateSelect .item.cal {}
	.appoint .dateSelect .item.date {width:100%;}
	
	

}





/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	
	.appoint .onlineLink {gap:20px; flex-direction:column;}
	.appoint .onlineLink>div {padding:20px 30px; width:100%;}
	.appoint .onlineLink .txt {padding:10px 0 20px;}
	
	.appoint .dateSelect .item .inputWrap {gpa:10px; flex-direction:column;}
	.appoint .dateSelect .item .inputWrap+.inputWrap {margin:14px 0 0;}
	.appoint .dateSelect .item .inputWrap>div {width:100%;}
	
	
	.appoint .dateSelect {}
	.appoint .dateSelect .item.cal {}
	.appoint .dateSelect .item.date {padding:30px;}
	.appoint .dateSelect .item .ulType1 {padding:20px 0 0; margin:20px 0 0;}
	
	.appoint .onlineLink a .arrow {left:75%;}
	.appoint .onlineLink a:hover .arrow {width:43%;}
	.appoint .onlineLink a:hover .arrow:after {left:75%;}
	
	

}