@charset "utf-8";

body .img img {width:100%; height:100%; object-fit:cover; transition:var(--ani);}

.layer {display:none; width:100%; height:100vh; position:fixed; left:0; top:0; z-index:99999;}
.layer .cover {background:rgb(0,0,0,.7); position:absolute; left:0; top:0; right:0; bottom:0; z-Index:-1;}
.layer.on {display:block;}
.layer .layerWrap {display:flex; align-items:center; justify-content: center; width:700px; height:100%; max-width:calc(100% - 40px); margin:0 auto; }
.layer .layerInner {background:#fff; border-radius:10px; position:relative; overflow:hidden;}
.layer .layerTit {width:100%; padding:16px 30px; display:flex; justify-content:space-between; align-items:center; background:var(--red); color:#fff;}
.layer .layerTit .tit {font-size:var(--fs18); font-weight:800;}
.layer .layerTit .layerClose {padding:4px 20px; border:1px solid; color:#fff; border-radius:100px; font-size:var(--fs14);}
.layer .layerTit .layerClose:hover {background-color:#000;}
.layer .layerCon {padding:50px; max-height:calc(100vh - 160px); overflow-y:auto;}
.layer .layerCon pre {font-size:var(--fs14);}
.layer .layerCon pre strong {padding:0 0 20px; text-align:center; font-size:var(--fs18); font-weight:700;}
.layer .layerCon pre p {}
.layer .layerCon .date {text-align:center;}
.layer .layerCon .sign {gap:12px; display:flex; justify-content:center;}
.layer .layerCon .sign p {font-size:var(--fs16); font-weight:800; color:#000; line-height:1.3;}
.layer .layerCon .sign img {height:39px;}

.layer.safeGoal .layerCon {width:500px;}

.layer.QRcode .layerWrap {width:400px;}
.layer.QRcode .layerInner {width:100%;}
.layer.QRcode .layerCon {gap:40px; display:flex; flex-direction:column;}
/* .layer.QRcode .layerCon>div {padding:20px; border-radius:10px; border:1px solid var(--gray);} */
.layer.QRcode .layerCon p {padding:0 0 10px; text-align:center; font-size:var(--fs18); font-weight:700; color:#000;}
.layer.QRcode .layerCon .img {border-radius:10px; border:1px solid var(--gray); overflow:hidden;}
.layer.QRcode .layerCon .img img {}



.title.type1 {font-size:var(--fs24); line-height:1.4; color:var(--blue); font-weight:800;}

.tabInner {}
.tabInner .tabItem {display:none;}
.tabInner .tabItem.on {display:block;}

.tabWrap {}
.tabWrap.type1 {display:flex; justify-content:center;}
.tabWrap.type1 .tabBtn {padding:0 30px; line-height:56px; border:1px solid var(--gray2); font-size:var(--fs18); font-weight:700; color:var(--blue);  text-align:center;}
.tabWrap.type1 .tabBtn+.tabBtn {margin:0 0 0 -1px;}
.tabWrap.type1 .tabBtn:hover {background:#f7f7f7;}
.tabWrap.type1 .tabBtn.on {color:#fff; background:var(--blue); border-color:var(--blue);}

.tabWrap {}
.tabWrap.type2 {display:flex; gap:10px; justify-content:center;}
.tabWrap.type2 .tabBtn {padding:19px 47px; line-height:1; border:1px solid var(--gray2); font-size:var(--fs20); font-weight:700; text-align:center;}
.tabWrap.type2 .tabBtn:hover {background:#f7f7f7;}
.tabWrap.type2 .tabBtn.on {color:#fff; background:var(--blue2); border-color:var(--blue2);}

.line {}
.line.type1 {margin:70px 0; height:2px; background:#000;}



.checkBtn input[type="checkbox"]+label {position:relative; cursor:pointer;}

.checkBtn.type1 {position:relative;}
.checkBtn.type1 input[type="checkbox"] {position:absolute; left:-9999px;}
.checkBtn.type1 input[type="checkbox"]+label {padding-left:23px; margin:0; font-size:var(--fs24); line-height:18px; display:block;}
.checkBtn.type1 input[type="checkbox"]+label:before {
	width:18px; height:18px; border:3px solid var(--gray2); left:0; top:0; border-radius:5px; 
	border-radius:50%; position:absolute; display:block; content:'';
	background:#fff 50% 60% no-repeat; 
}
.checkBtn.type1 input[type="checkbox"]:checked+label {}
.checkBtn.type1 input[type="checkbox"]:checked+label:before {
	background-color:var(--sky); border-color:var(--sky);
	background-image:url('../images/icon/check.png');
}

.radioBtn input[type="radio"]+label {position:relative; cursor:pointer;}

.radioBtn.type1 {position:relative;}
.radioBtn.type1 input[type="radio"] {position:absolute; left:-9999px;}
.radioBtn.type1 input[type="radio"]+label {padding-left:20px; font-weight:500; font-size:var(--fs16); line-height:1;}
.radioBtn.type1 input[type="radio"]+label:before {
	width:16px; height:16px; border:3px solid var(--darkGray); 
	background:var(--lightGray); left:0; top:50%; border-radius:50%; 
	position:absolute; display:block; content:''; transform:translateY(-50%);
}
.radioBtn.type1 input[type="radio"]:checked+label:before {border:5px solid var(--blue); background:var(--lightGreen);}


.ulType1 {}
.ulType1 li {padding-left:40px; background:url(../images/icon/listCheck.svg)5px 10px no-repeat;}
.ulType1 li {color:#000; font-size:var(--);}
.ulType1 li b {padding-left:10px; font-weight:800; color:var(--primary);}

.btnWrap {}
.btnWrap.type1 {display:flex; gap:5px; justify-content:end;}
.btnWrap.type1 button {padding:15px 30px; border-radius:100px; color:#FFF;font-size:var(--fs16); font-weight: 600;line-height: 140%;}




/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1024px) {
	
	.layer {}
	.layer .layerTit {padding:14px 20px;}
	.layer .layerTit .layerClose {padding:4px 20px;}
	.layer .layerCon {padding:40px;}
	
	
	
	.title.type1 {}
	
	.tabWrap {}
	.tabWrap.type1 {position:relative;}
	
	.tabWrap {}
	.tabWrap.type2 {}
	.tabWrap.type2 .tabBtn {padding:15px 0; flex-grow:1;}
	
	
	
	
	.line {}
	.line.type1 {margin:50px 0;}
	
	
	
	
	
	
	
	
	
	
	.layer {}
	.layer.on {}
	.layer .layerWrap {width:80%;}
	.layer .layerWrap .close {}
	.layer .layerCon {}
	
	
	.ulType1 {}
	.ulType1 li {padding-left:35px; background-size:22px;}
	.ulType1 li {}
	.ulType1 li b {}
	
	
	.btnWrap.type1 button {padding:12px 20px; line-height:130%;}



}

/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	
	.layer {}
	.layer .layerTit {padding:10px 20px;}
	.layer .layerTit .layerClose {padding:4px 16px;}
	.layer .layerCon {padding:25px;}
	.layer .layerCon .sign img {height:35px;}
	
	
	.title.type1 {}
	
	.tabWrap.type1 {flex-wrap:wrap;}
	.tabWrap.type1 .tabBtn {margin:0;width:50%; line-height:48px;}
	.tabWrap.type1 .tabBtn+.tabBtn {margin:0;}
	.tabWrap.type1 .tabBtn:nth-child(2)~.tabBtn {margin-top:-1px;}
	.tabWrap.type1 .tabBtn:nth-child(even) {margin-left:-1px;}
	
	
	
	.tabWrap.type2 {gap:5px;}
	
	.line {}
	.line.type1 {margin:30px 0; height:1px;}
	
	
	
	
	
	
	
	.ulType1 {}
	.ulType1 li {padding-left:25px; background-size:18px; background-position:0 5px; line-height:1.2;}
	.ulType1 li+li {margin:5px 0 0;}
	.ulType1 li {}
	.ulType1 li b {}
	
	
	.btnWrap.type1 button {padding:10px 20px; line-height:120%;}
	
}	



/* 이미지팝업 - 인증서 등 이전,다음 버튼 있음 */
.imgOpen2 {z-Index:999999; position:fixed; overflow:hidden; left:0; top:0; width:100%; height:0; overflow:hidden; background-color:rgba(0,0,0,.8); text-align:center; font-weight:normal;}
.imgOpen2 .wrap {position:relative;}
.imgOpen2 .wrap div {padding:40px 0 80px; position:relative; display:flex; justify-content:center; overflow:hidden; width:100%;text-align:center; vertical-align:middle;}
.imgOpen2 .wrap img {max-height:100%; max-width:100%; border:10px solid transparent;}
.imgOpen2 .popTitle {z-Index:100; position:absolute; left:0; bottom:20px; width:100%; font-size:14px; text-align:center;}
.imgOpen2 .popTitle p {display:inline-block; padding:10px 20px; color:#fff; background:rgba(0,0,0,.4); border-radius:100px; line-height:1.2;}
.imgOpen2 button {z-index:300; position:absolute; display:block; top:50%; width:60px; height:60px; padding:0; background-color:rgba(0,0,0,.2); font-size:12px; color:#fff; border:0; border-radius:50%; cursor:pointer; background-position:50%; background-repeat:no-repeat; background-size:30%; transition:.3s;}
.imgOpen2 button:hover {background-color:rgba(0,0,0,.9);}
.imgOpen2 button img {max-width:initial; max-height:initial;}
.imgOpen2 button.off {opacity:.2; cursor:default;}
.imgOpen2 button.prev {left:20px;}
.imgOpen2 button.next {right:20px;}
.imgOpen2 button.close {padding:20px; top:20px; right:20px;}
.imgOpen2 button img {width:100%; height:100%; object-fit:scale-down; margin:0 auto;}
@media screen and (max-width:767px){
	.imgOpen2 {padding:0 !important; margin:0 !important;}
	.imgOpen2 button {width:40px; height:40px;}
	.imgOpen2 button img {width:40%;}
	.imgOpen2 button.prev {left:10px;}
	.imgOpen2 button.next {right:10px;}
	.imgOpen2 button.close {padding:0; top:10px; right:10px;}
	.imgOpen2 button img {}
	.imgOpen2 .popTitle {bottom:10px; font-size:12px; text-align:center;}
}