@charset "utf-8";
ul {list-style:none; margin:0; padding:0;}
p {margin:0;}


.checkup  .titType2 {color:var(--base5);}
.checkup  .titType2:before {background:var(--base5);}

.checkup .onlineWrap {width:1020px; margin:0 auto; max-width:100%;}
.checkup .onlineLink {width:100%;display:flex; gap:50px; }
.checkup .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);}
.checkup .onlineLink .tit {color:var(--base4);font-size:var(--fs24);font-weight: 600;}
.checkup .onlineLink .txt {padding:15px 0 35px; font-size:var(--fs17); color:#444; line-height:1.2;}

.checkup .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;}
.checkup .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;}
.checkup .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;}


.checkup .onlineLink a:hover .arrow {width:45%;}
.checkup .onlineLink a:hover .arrow:after {left:95%;}

.checkup .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%);}
.checkup .onlineLink .non {}
.checkup .onlineLink .non .tit { color:#444;}
.checkup .onlineLink .non a {background-color:#444; }
.checkup .onlineLink .non a::before {background-image:url(/images/reservation/i-check2.svg);}

.checkup .selectPeople {padding:0 0 20px; display:flex; gap:10px; flex-direction:column;}
.checkup .selectPeople .item {
	padding:25px 32px; border-radius:7.5px;border: 1px solid #C2C2C2; background: #FFF; cursor:pointer;
	background:url(/images/reservation/checkupSelect_icon01.svg)calc(100% - 25px) 32px no-repeat;
}
.checkup .selectPeople #cancer5id {
	cursor:default;
}
.checkup .selectPeople .item.on {
	padding:23px 30px; border:3px solid var(--base5); background-position:calc(100% - 23px) 30px;
}
.checkup .selectPeople .item:nth-child(2) {background-image:url(/images/reservation/checkupSelect_icon02-off.svg);}
.checkup .selectPeople .item:nth-child(2).on {background-image:url(/images/reservation/checkupSelect_icon02.svg);}
.checkup .selectPeople .item p {padding:10px 0 0;}

.checkup .selectPeople .inputWrap {}
.checkup .selectPeople .inputWrap .tit {}
.checkup .selectPeople .inputWrap label {}
.checkup .selectPeople .inputWrap label.labelBold {color: var(--base5); font-size: var(--fs18); font-weight: 600;}
.checkup .selectPeople .inputWrap+p {}

.checkup .selectPeople-checkWrap {display:flex; gap:10px;flex-wrap: wrap;}
.checkup .selectPeople-checkWrap .inputWrap {width:calc((100% - 40px)/5);min-width:180px;}

.checkup .checkupAdd {display:flex; gap:28px; align-items:center;}
.checkup .checkupAdd .inputWrap {}
.checkup .checkupAdd .inputWrap label {padding:0 50px;}
.checkup .checkupAdd p {color: #000;font-size: var(--fs18);font-weight: 600;line-height: normal;}
.checkup .checkupAddListTable {display:none;}
.checkup .checkupAddListTable .checkType1 {position:relative;}
/* .checkup .checkupAddListTable .checkType1 input+label+.cover {width:18px; height:100%; background:rgba(0,0,0,.2); position:absolute;left:50%; top:0; transform:translateX(-50%); display:none;} */
/* .checkup .checkupAddListTable .checkType1 input[readonly]+label {} */
/* .checkup .checkupAddListTable .checkType1 input[readonly]+label+.cover {display:block;} */



.checkup .dateSelect {display:flex; gap:80px;}
.checkup .dateSelect .item {}
.checkup .dateSelect .item.cal {width:380px; max-width:100%;}
.checkup .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);
}

.checkup .dateSelect .info {display:flex; gap:5px; height:30px; align-items:center;}
.checkup .dateSelect .info span {padding:3px 10px; color:#000; background:#f2f2f2; font-size:var(--fs15); font-weight:500;}
.checkup .dateSelect .info span+span {color:#fff; background:var(--base5);}

.checkup .dateSelect .item .inputWrap {display:flex; gap:17px;}
.checkup .dateSelect .item .inputWrap p {width:75px; }
.checkup .dateSelect .item .inputWrap>div {width:calc(100% - 75px);}
.checkup .dateSelect .item .inputWrap .date-day {display:flex; gap:5px; flex-wrap:wrap;}
.checkup .dateSelect .item .inputWrap .date-day span {}
.checkup .dateSelect .item .inputWrap .date-day span:nth-child(odd) {padding:0 20px; border-bottom:1px solid rgba(0, 0, 0, 0.50);}
.checkup .dateSelect .item .inputWrap .date-day span:nth-child(even) {padding:0 5px 0 0;}
.checkup .dateSelect .item .inputWrap .date-day span.year {padding:0 30px;}
.checkup .dateSelect .item .inputWrap .date-day span.month {}
.checkup .dateSelect .item .inputWrap .date-day span.day {}

.checkup .dateSelect .item .inputWrap .date-time {display:flex; gap:10px; flex-direction:column;}
.checkup .dateSelect .item .inputWrap .date-time select {width:256px; height:40px; max-width:100%;}
.checkup .dateSelect .item .inputWrap .date-time .min {display:flex; gap:8px; flex-wrap:wrap;}
.checkup .dateSelect .item .inputWrap+.inputWrap {margin:24px 0 0;}

.checkup .dateSelect .item .ulType1 {padding:35px 0 0; margin:35px 0 0; border-top:1px solid rgba(151, 127, 114, 0.20);}

.checkup .formWrap .formGroup {}
.checkup .formWrap .formGroup .tit {align-self: center;}
.checkup .formWrap .formGroup .inputWrap {}




/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1199px) {
	
	.checkup .onlineLink {gap:20px;}
	.checkup .onlineLink>div {padding:40px 50px; width:calc((100% - 20px)/2);}
	
	.checkup .checkupAdd {gap:10px; flex-direction:column; align-items:start;}
	.checkup .checkupAdd .inputWrap {}
	.checkup .checkupAdd .inputWrap label {padding:0 40px;}
	.checkup .checkupAdd p {}
	
	
	.checkup .dateSelect {flex-direction:column; gap:10px;}
	.checkup .dateSelect .item.cal {}
	.checkup .dateSelect .item.date {width:100%;}
	
	

}





/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	
	.checkup .onlineLink {gap:20px; flex-direction:column;}
	.checkup .onlineLink>div {padding:20px 30px; width:100%;}
	.checkup .onlineLink .txt {padding:10px 0 20px;}
	
	.checkup .selectPeople .item {padding:18px 24px; background:none !important;}
	.checkup .selectPeople .item.on {padding:16px 22px; }
	
	.checkup .selectPeople-checkWrap {gap:5px;}
	.checkup .selectPeople-checkWrap .inputWrap {min-width:120px;}
	
	.checkup .checkupAdd {gap:5px;}
	.checkup .checkupAdd .inputWrap {}
	.checkup .checkupAdd .inputWrap label {padding:0 40px;}
	.checkup .checkupAdd p {}
	
	.checkup .dateSelect .item .inputWrap {gpa:10px; flex-direction:column;}
	.checkup .dateSelect .item .inputWrap+.inputWrap {margin:14px 0 0;}
	.checkup .dateSelect .item .inputWrap>div {width:100%;}
	
	
	.checkup .dateSelect {}
	.checkup .dateSelect .item.cal {}
	.checkup .dateSelect .item.date {padding:30px;}
	.checkup .dateSelect .item .ulType1 {padding:20px 0 0; margin:20px 0 0;}
	
	
	.checkup .onlineLink a .arrow {left:75%;}
	.checkup .onlineLink a:hover .arrow {width:43%;}
	.checkup .onlineLink a:hover .arrow:after {left:75%;}
	

}	
