/*인증기준*/
.Certify {margin-bottom:var(--margin-2)}
.Certify h5.constit {font-size:var(--text-lg)}
.Certify.standard2 h5 {background-color:var(--theme-color2)}
.Certify.standard3 h5 {background-color:var(--theme-color3)}
.Certify div {display:flex; flex-flow:row wrap; gap:4%;}
.Certify dl{
	width:100%;
	display:flex;
	flex-flow:column wrap;
	/*align-items:center;*/
	gap:2%;
	background-color:var(--color-f7);
	padding:var(--padding-s);
	border-radius:var(--radius30);
	margin-bottom:var(--margin-s)
}
.Certify dl dt {
	min-width:130px;
	background:var(--color-6);
	color:var(--color-w);
	text-align:center; 
	font-family:var(--sub-font-L);
	border-radius:var(--radius30);
	padding:5px var(--padding-s);
	margin-bottom:var(--margin-m)
}

.Certify dl dd {
	position:relative;
	font-size:var(--text-sm);
	color:var(--color-5);
	padding-left:1rem;;
	margin:2px 0;
}
.Certify dl dd:before{
	content:"";
	width:4px;
	height:4px;
	border-radius:100%;
	background-color:var(--color-9);
	position:absolute;
	left:0.333rem;
	top:5px;
}

@media (min-width: 768px) {
	.Certify dl{width:48%;}
}
@media (min-width: 1200px) {
	.Certify {display:flex; flex-flow:row wrap; gap:1rem}
	.Certify h5.constit {
		display:flex!important;
		justify-content:center;
		align-items:center;
		width:200px; 
		margin-bottom:var(--margin-1);
	}
	.Certify div{
		width:calc(100% - 220px);
		flex-direction:row; 
		justify-content:flex-start; 
		gap:1rem; 
		margin-bottom:var(--margin-m)
	}
	.Certify dl {width:100%; flex-direction:row;; align-items:center}
	.Certify dl dt {margin-bottom:0}
	.Certify dl dd {font-size:var(--text-base);}
}
/*4대원칙*/
.principle {display:flex; justify-content:center; text-align:center;}
.principle li {
	display:flex;
	flex-flow:column wrap;
	justify-content:center;
	width:8rem;
	height:8rem;
	border-radius:100%;
	padding:var(--padding-s);
	font-size:var(--text-sm)
	
}
.principle li:nth-of-type(1) {background-color:rgba(239,222,200,0.8);margin-right:-2rem}
.principle li:nth-of-type(2) {flex-direction: column-reverse; background-color:rgba(229,228,195,0.8)}
.principle li:nth-of-type(3) {background-color:rgba(212,225,231,0.8); margin-left:-2rem}
.principle li:nth-of-type(4) {background-color:rgba(222,237,189,0.8);flex-direction: column-reverse;  margin-left:-2rem}

.lineText {
	font-size:3rem;
	font-weight:var(--font-weight-8);
	-webkit-text-stroke: 1px var(--color-f5);
	color:#fff;
	text-align:right;
	padding:0 var(--boxpd2);
	
}
.principle li:before {
	content:"";
	width:40px;
	height:40px;
	display:block;
	margin:var(--margin-m) auto;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat
}

.principle li:nth-of-type(1):before {background-image:url(/wdyouth/images/contents/principleIcon1.svg)}
.principle li:nth-of-type(2):before {background-image:url(/wdyouth/images/contents/principleIcon2.svg)}
.principle li:nth-of-type(3):before {background-image:url(/wdyouth/images/contents/principleIcon3.svg)}
.principle li:nth-of-type(4):before {background-image:url(/wdyouth/images/contents/principleIcon4.svg)}


@media (min-width: 1000px) {
	.principle li {width:20rem;height:20rem; padding:var(--boxpd2); font-size:var(--text-xl)}
	.principle li:before {
		width:60px;
		height:60px;
	}
}


/*운영시간*/
.serviceInfo {
	display:flex;
	flex-flow: row wrap;
	margin-top:4rem
}
.serviceInfo:before {
	content:"";
	position:absolute;
	right:0;
	top:0;
	width:6rem;
	height:6rem;
	background-image:url("/wdyouth/images/contents/studyTime.svg");
	background-repeat:no-repeat;
	transform:translateY(-60%);
}
.serviceInfo dl {
	position:relative; 
	color:var(--color-w); 
	text-shadow: 0 0 3px rgb(0 0 0 / 20%); 
	text-align:var(--text-c);
	padding:var(--padding-s);
}

.serviceInfo dl:nth-of-type(2):before {left:0}
.serviceInfo dl:nth-of-type(2):after {right:0}
.serviceInfo dl dt {margin-bottom:var(--margin-m)}
.serviceInfo dl dd {
	font-weight:var(--fw-7); 
	font-size:var(--text-lg); 	
}
@media all and (min-width:1024px){
	.serviceInfo:before {
		width:12rem;
		height:12rem;
	}
	.serviceInfo dl:nth-of-type(2):before,.serviceInfo dl:nth-of-type(2):after {
		content:"";
		position:absolute;
		top:50%;
		transform:translate(0,-50%);
		width:1px;
		height:60%;
		background-color:rgba(255,255,255,0.3)
	}
}

/*선발절차*/
.guide_box {display:flex; flex-flow:row wrap; margin:0 -1%}
.guide_box>div{
	margin:1%; 
	position:relative;
	width:100%;
	display:block;
	background:#f2f3f8;
	border:3px solid #f2f3f8;
	letter-spacing:-0.05em;
	border-radius: 40px 10px;
	padding:var(--margin-1);
	transition: all .35s ease;
	}
.guide_box ul li{font-size:var(--text-s); color:var(--color-6)}
.guide_box>div:hover{background:#fff;border:3px solid #000;box-shadow:3px 3px 10px rgba(0,0,0,.2); transform:translateY(-10px)}
.guide_box>div:before {
	content:""; 
	display:block; 
	width:70px; 
	height:70px; 
	margin:0 auto 1em auto;  
	background-repeat:no-repeat; 
	background-size:100%
	}

.guide_box>div:after {
    content: "";
	display:block;
	width:1rem;
	height:1rem;
	-webkit-mask-image:url(/wdyouth/images/contents/step-right.svg);
	mask-image:url(/wdyouth/images/contents/step-right.svg);
	background-color:var(--color-6);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: contain;
	mask-size: contain;
    position: absolute;
	z-index:1;
    display: block;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 100%;
    text-align: center;
}


.guide_box>div:last-child:after {display:none}
.guide_box>div:nth-child(1):before {background-image:url(/wdyouth/images/contents/book.svg);}
.guide_box>div:nth-child(2):before {background-image:url(/wdyouth/images/contents/magnifier.svg);}
.guide_box>div:nth-child(3):before {background-image:url(/wdyouth/images/contents/clipboard.svg);}
.guide_box>div:nth-child(4):before {background-image:url(/wdyouth/images/contents/manager.svg);}

.guide_box>div>dl{display:flex; flex-flow:column wrap; justify-content:center; margin-bottom:1rem}
.guide_box>div>dl>dt {
	text-align:center; 
	font-family:var(--sub-font-M); 
	color:var(--color-3); 
	font-size:var(--text-xl);
	margin-bottom:var(--margin-1)
}
.guide_box>div>dl>dd {position:relative; color:#222; margin-bottom:0.222rem}
.guide_box>div>dl>dd>p {line-height:1.0}
.guide_box>div>dl>dd>span {
	position: absolute;
    left: 0;
    top: 0;
    width: 50px;
	font-size:0.825rem;
	color:#666;
	font-weight:300
}
.guide_box>div>dl>dd>p>em {font-size:0.8rem; line-height:1.0; color:#167ebf; display:inline-block; white-space:nowrap;}
.baroBTN {opacity:0; transform:translateX(-20px); display:inline-block; position:absolute; right:2rem; font-size:0.825rem; color:#222; bottom:2rem; transition: all .35s ease;}
.guide_box>div:hover>.baroBTN {transform:translateX(0px); opacity:1}
@media all and (min-width:480px){
.guide_box>div {width:48%}
.guide_box>div:after {
        left: auto;
        right: -30px;
        top: 50%;
        transform: translate(0, -50%);
        margin-left: 0;
    }
}

@media all and (min-width:1024px){
.guide_box>div {width:23%; font-size:1rem;}

}


/*교육프로그램*/
.photoGrid li {
	display:flex;
	flex-direction:column;
	
}
.photoGrid li span {
	display:block;
	font-family:var(--sub-font-L);
	padding:var(--padding-s);
	color:var(--color-6);
	border-bottom:1px solid var(--color-6);

}

/*조직도*/
.organ ol{position:relative; display:flex; flex-direction:column; gap:1rem; align-items:center; margin-top:1rem}
.organ ol li {width:100%; display:flex; flex-direction:column;align-items:center; text-align:center}
.organ span {
	display:inline-block;
	width:120px;
	max-width:100%; 
	padding:var(--padding-s) 0;
	border:solid;
	border-width:4px;
	border-color:#333;
	border-radius: 20px;
	font-family:var(--sub-font-M);
	font-weight: var(--font-weight-7);;
	text-align:center;
	background-color:#fff
}

.organ span em {display:block; font-size:var(--text-s)}


.org1dep>span {border-color:#016dba; color:#016dba}
.org2dep {position:relative; gap:2rem}
.org2dep>span {border-color:#1cb047; color:#1cb047; z-index:1}
.org2dep div {margin-right:80%; transform:translateY(-100%)}
.org2dep div span {position:relative;}
.org2dep:before {
	content: '';
    width: 3px;
    height: calc(100% + 2rem);
    left: 50%;
    top: -1rem;
	transform:translateX(-50%);
    position: absolute;
    display: block;
    background: #dcdcdc;
	z-index:-1
}
.org2dep div span:before {
	content: '';
    width: 100%;
    height: 3px;
    left: 100%;
    top: 50%;
    position: absolute;
    display: block;
    background: #dcdcdc;
	z-index:-1
}
.org2dep div span {border-width:2px}
.org2dep ol {
	position:relative;
	background-color:#f5f5f5;
	border:2px solid #333;
	padding:1.2rem;
	border-radius: 20px;
	font-family:var(--default-font);
	font-weight: var(--fw-5);
	font-size: var(--text-s);
	transform: translateY(-50%);

}

.org2dep ol li{align-items:flex-start;}

.organ ol li.org3dep {
	flex-flow:row wrap;
	justify-content:space-between;
	align-items:flex-start
}
.org3dep {position:relative; padding-top:30px}
/*.org3dep:before {
	content: '';  
    height: 3px;
    left: 50%;
    top: 0;
	transform:translateX(-50%);
    position: absolute;
    display: block;
    background: #dcdcdc;
	z-index:-1
}*/
.org3dep div{width:100px; max-width:100%;  position:relative}
.org3dep div:before {
	content: '';
    width: 3px;
    height: 100%;
	top:-30px;
    left: 50%;
	transform:translateX(-50%);
    position: absolute;
    display: block;
    background: #dcdcdc;
	z-index:-1
}
.org3dep div:after {
	content: '';
    width: 100%;
	height:3px;
	background: #dcdcdc;
	position: absolute;
	left: 50%;
	top:-30px
}
.org3dep div:nth-of-type(2):after {width:100%; left:-50%}
.org3dep div:nth-of-type(3):after {left:-50%}
.org3dep div {width:46%; margin:0 2%}
.org3dep div span {width:100%}
.org3dep ol {
	position:relative;
	width:100%;
	background-color:#f5f5f5;
	border:1px solid #ccc;
	padding:var(--padding-1);
	border-radius: 20px;
	/*font-family:var(--sub-font-M);*/
	font-weight: var(--fw-5);
	font-size: var(--text-s);
	margin-top:1.5rem
}



@media only screen and (min-width:640px){
	.organ span {min-width:140px;}
	
}

@media only screen and (min-width:768px){
	.organ span {min-width:180px;}
	
}

@media only screen and (min-width:1000px){
	.organ span {min-width:250px; font-size: var(--text-lg);}
	.org1dep ol {margin-left:50%; padding:1.5rem;}
	.org1dep ol,.org3dep ol {font-size: var(var(--text-sm));}
	.org2dep ol {margin-left:40%}
	.org2dep:after {
		content: '';
		width: 20%;
		height: 3px;
		left: 50%;
		top: 60%;
		position: absolute;
		display: none;
		background: #dcdcdc;
		z-index:-1
	} 
	.org3dep {max-width:1000px; background:var(--color-w); z-index:0}
	.org2dep ol li,.org3dep ol li {font-size:var(--text-base)}
	
}

/*오시는길*/
.mapBox{
	width:100% !important; 
	margin-bottom:20px !important;
	border-radius: 10px 10px 0 0;
    
	}
.photoRdBox {
	display:flex; 
	flex-flow:row wrap; 
	border:1px solid #c9c9c9; 
	border-radius: 60px 10px;
    box-shadow: 0px 30px 40px 0px rgba(179,191,203,0.2);
	overflow:hidden;
	}
.photoRdBox>div {width:100%}
.photoRdBox .inpic {
	width:100%;
	/*height:100%;*/
	max-width:820px;
	min-height:216px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	}
.photoRdBox .inpic.pic1 {background-image:url(/wdyouth/images/contents/contactPic1.jpg)}
.photoRdBox .inpic.pic2 {background-image:url(/wdyouth/images/contents/contactPic2.jpg)}
.photoRdBox .incont {padding:2rem}
.contactInfo li{position:relative;  padding-left:1.5rem; margin-bottom:var(--margin-s)}
.contactInfo li:before {
	content:"";
	display:block;
	width:1rem;
	height:1rem;
	position:absolute; 
	left:0; 
	top:3px; 
	background-color:var(--color-3);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.contactInfo li.address {font-size:var(--text-xl); font-weight:var(--fw-7)}
.contactInfo li.fax:before {
	content:"F.";
	font-family:var(--num-font-B);
	color:var(--color-3);
	font-size:12px;
	text-align:center;
	background-color:transparent;
	top:5px;
}
.contactInfo li.address:before {
	-webkit-mask-image:url(/wdyouth/images/contents/map-pin.svg);
	mask-image:url(/wdyouth/images/contents/map-pin.svg);
}
.contactInfo li.tel:before {
	-webkit-mask-image:url(/wdyouth/images/contents/phone-call.svg);
	mask-image:url(/wdyouth/images/contents/phone-call.svg);
}



@media all and (min-width:980px){
.photoRdBox .inpic {width:60%;}
.photoRdBox .incont {width:calc(100% - 60%); padding:4rem 2rem}
}

/*비전*/
.vision {max-width:1000px; margin:var(--secgap) auto}
.vision>dl{width:100%; display:flex; flex-flow:column wrap; padding:var(--boxpd) 0}
.vision>dl.point {border-radius:40px 5px; background-color:var(--color-f7);}
.vision>dl>dt {position:relative; font-family:var(--sub-font-L)}
.vision>dl>dt,.vision>dl>dd {display:block; min-height:50px; vertical-align:middle; text-align:center}
.vision>dl>dt:before {
	content:""; 
	width:60px; 
	height:60px; 
	display:block; 
	margin:0 auto var(--padding-s) auto;  
	background-size:cover; 
	background-repeat:no-repeat
}
.vision>dl.mission>dt:before {background-image:url(/wdyouth/images/contents/visionIcon1.svg);}
.vision>dl.mission>dd:last-child {
	flex-flow:column wrap;
	font-family:var(--nanum-myeongjo);
	font-size:var(--text-xl);
	font-weight:var(--fw-7);
	color:var(--color-1)
}
.vision>dl.mission>dd:before,.mission>dd:after {	
	color:var(--color-c)
}
.vision>dl.mission>dd:last-child:before {
	content:"“";
	display:block;
	font-size:var(--text-3xl);

}
.vision>dl.goal>dt:before {background-image:url(/wdyouth/images/contents/visionIcon2.svg);}
.vision>dl.direction>dt:before {background-image:url(/wdyouth/images/contents/visionIcon3.svg);}
.direction ul {display:flex; gap:1rem; align-items:center;}
.direction ul li {
	display:flex;
	justify-content:center;
	align-items:center;
	width:6rem;
	height:6rem;
	background-color: rgba(205, 204, 228, 0.8);
	padding:var(--inpd);
	border-radius:100%;
	font-family:var(--nanum-myeongjo);
	font-size:var(--text-sm);
	font-weight:var(--fw-7)
}
.direction ul li:nth-of-type(1) {background-color: rgba(182, 225, 199, 0.8); margin-right:-2rem}
.direction ul li:nth-of-type(3) {background-color: rgba(222, 237, 189, 0.8); margin-left:-2rem}
.vision>dl.point>dt:before {background-image:url(/wdyouth/images/contents/visionIcon4.svg);}
.vision>dl>dt {font-family:var(--sub-font-B); border-radius:40px 5px 0 0; font-size:var(--text-lg);  padding:0.333em 1em 0.333em 1em}
.vision>dl>dd {font-family:var(--sub-font-L);  border-radius:0 0 40px 5px; padding:var(--padding-s) 0;}
/*.vision>dl:nth-of-type(1)>dt {background:var(--theme-color2);}
.vision>dl:nth-of-type(2)>dt {background:var(--theme-color4);}*/
.vision>dl:nth-of-type(1)>dd {font-size:var(--text-2xl); color:var(--theme-color)}
.vision>dl:nth-of-type(1)>dd span {font-family:var(--sub-font-B)}
.vision>dl>dd {display:flex; flex-flow:row wrap; justify-content:center; align-items:center}
.vision>dl>dd>dl {background:#fff; padding:2rem 1rem; border-radius:40px 5px; margin-bottom:0.333em}
.vision>dl>dd>dl>dt {color:#333; font-size:1.125rem;  margin-bottom:0.666rem}
.vision>dl>dd>dl>dd {color:#555; font-size:0.925rem}
.vision>dl>dd>dl>dd:nth-of-type(1) {}
.vision>dl>dd>dl>dd>ul {margin:1.5em 0 0 0}
.vision>dl>dd>dl>dd>ul>li {font-weight:400; color:#666}
.vision>dl.direction>dd>dl {width:100%}
.vision>dl.point>dd>dl {width:100%}
.point ul {
	display:flex; 
	gap:1rem;
	flex-direction: column;
	align-items: flex-start;
}

.point ul li {
	position:relative;
	padding-left:1.5rem;
	font-family:var(--sub-font-L);
	font-size:var(--text-base);
}
.point ul li:before {
	content:"";
	display:block;
	width:1.125rem;
	height:1.125rem;
	background-color:var(--color-3);
	-webkit-mask-image:url(/wdyouth/images/common/check-circle.svg);
	mask-image:url(/wdyouth/images/common/check-circle.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: contain;
	mask-size: contain;
	position:absolute;
	left:0;
	top:2px;
	
}

@media all and (min-width:980px){
.vision>dl>dd>dl {margin:1%}
.vision>dl.direction>dd>dl {width:31.333%}
.vision>dl.point>dd>dl {width:48%}
.direction ul li {
	width:10rem;
	height:10rem;
	font-size:var(--text-xl);
	}
}

/*인사말*/
.greeting .topBox {	
	text-align:var(--text-c);
	background-color:#f1eae5;
	border-radius:30px;
	padding:var(--innpd);
	margin-bottom:2rem;
	position:relative; 
	display:flex; 
	flex-direction:column; 
	justify-content:center;
	align-items:center;
	/*align-items:center;
	justify-content:flex-start;
	text-align:right;
	min-height:300px;*/
	overflow:hidden;
}

#gtillust {
	width:8rem;
	height:8rem;
	/*position:absolute;
	right:1rem;
	top:50%;
	transform:translateY(-50%)*/
}
.topBox:before {
	display:none;
	content:"";
	width:84px;
	height:84px;
	background-image:url(/wdyouth/images/contents/greetingTop.png);
	background-repeat:no-repeat;
	object-fit:contain;
	background-position: center center;
	background-size:cover;
}
.greeting p {
	/*font-family:var(--sub-font-M); */
	font-size: var(--text-sm);	
	font-weight: var(--fw-5);
	color: var(--color-6);
	line-height:1.5;
}

.greeting .conBox p:nth-of-type(1) {
	color: var(--color-3);
	font-family:var(--sub-font-L);
	font-size: var(--text-lg);
}

.greeting .conBox p:nth-of-type(2) {
	color: var(--color-3);
	font-family:var(--sub-font-M);
	font-size: var(--text-2xl);
	margin-bottom:var(--margin-2);
}

.greeting .conBox p span {white-space:nowrap}
.greeting p.sign {
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:1rem;
	margin-top:2rem;
	padding:var(--padding-1)

}
.greeting p.sign span {
	font-family:var(--handwriting-font);
	font-size: var(--text-3xl);
}

.topBox>div>p {
	font-family:var(--sub-font-M); 
	color:#333;
	letter-spacing:var(--spacing-narrow-0);
	font-size: var(--text-lg);
}

.topBox>div>p:nth-of-type(1) {
	color:var(--theme-color);
	font-size: var(--text-xl);
	/*margin-bottom:1rem*/
}

.topBox>div>p:nth-of-type(1) span {display:block; color:var(--theme-color4); font-size:1.5em}
.topBox>div>p:nth-of-type(2) {
	font-family:var(--handwriting-font);
	font-size: var(--text-3xl);
}
@media only screen and (min-width:768px){

	.topBox:before {
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,0);
		left:auto;
		right:10%;
		top:50%;
		transform:translateY(-30%);
		width:168px;
		height:168px;
		
	}

	.greeting .topBox {
		text-align:var(--text-l);
		flex-direction:row;
		justify-content:space-between;
		align-items:center;
		padding:var(--secgap); 
		margin-bottom:var(--secgap);
	}

	.greeting .conBox {
		/*max-width:calc(100% - 300px);*/
		margin-bottom:var(--margin-1);
	}
	
}
@media only screen and (min-width:1000px){
	.greeting .topBox {}
	.topBox>div>p:nth-of-type(1) {font-size: var(--text-2xl);}
	.topBox>div>p:nth-of-type(2) span {font-size:1.25em}
	.topBox:before {	
		top:50%;
		transform:translateY(-30%);
		width:210px;
		height:210px;
		background-size:cover
		
	}

	#gtillust {
		width:16rem;
		height:10rem;
	}

	
}

@media only screen and (min-width:1400px){
	.topBox:before {	
		right:5%;
		top:40%;
	}

}
.subHeader {
	position:relative;
	background-color:#f7f7f7;
	border-radius:30px;
	padding:2rem 130px 2rem 2rem;
	margin-bottom:var(--margin-1);
	position:relative;
	background-repeat:no-repeat;
	background-position:120% bottom;
	background-size:40%;
	object-fit:contain;
}

.subHeader:after {
	content:"";
	width:105px;
	height:90px;
	position:absolute;
	right:0;
	top:50%;
	transform:translate(-20%,-50%);
	background-repeat:no-repeat;
	background-size:contain

}

.hisHeader:after {background-image:url(/wdyouth/images/contents/historyTop.png);}
.organHeader:after {background-image:url(/wdyouth/images/contents/organTop.svg);}

.subHeader h4 {position:relative; display:inline-block; font-size: var(--text-s); margin-bottom:1.5rem; padding-bottom:4px}
.subHeader h4:before {
	content:""; 
	box-shadow: 0 -0.7em 0 rgb(0 0 0 / 70%) inset;
	position:absolute;
	width:100%;
	height:2px;
	bottom:-2px;
}
.subHeader p {
	font-family:var(--default-font); 
	color:var(--color-6);
	font-weight: var(--fw-3);
}
.subHeader p span {display:inline-block; white-space:nowrap}

@media only screen and (min-width:980px){
	.subHeader {background-size:contain; background-position:right bottom;}
	.subHeader:after {width:126px;height:108px;}
}
/*연혁*/
.historyW {
	display:flex;
	flex-flow:row wrap;
}

.hiscnt>ul {position:relative; padding-left:16px}
.hiscnt>ul:after {
	content: "";
	display: block; 
	width: 1px; 
	height: 100%;
	background-color: #dfdfdf;
	position: absolute; 
	left: 6px;
	top: 0;
}
.hiscnt>ul>li {
	position:relative; 
	padding-left:150px; 
	margin-bottom:1rem;
	font-family:var(--sub-font-L);
}
.hiscnt>ul>li:before {
	content: "";
	display: block; 
	width: 6px;
	height: 6px; 
	background-color: #fff;
	border: 3px solid #bdbdbd;
	border-radius: 50%; 
	position: absolute; 
	top: 50%; 
	transform:translateY(-50%);
	left:-15px;  
	z-index: 2;
}

.hiscnt>ul>li>span {
	position:absolute;  
	left:0; 
	top:0; 
	display:inline-block;
	font-size:var(--text-s);
	color:var(--color-9);
	padding-left:10px;
	transform: translateY(30%);
}
.historyW>div.histit,.historyW>div.hiscnt {padding:2rem; }
.historyW>div.histit {color:var(--color-6)}
.historyW>div.histit span {
	display:block; 
	font-family:var(--num-font-B); 
	font-size: var(--text-2xl);
	font-weight: var(--fw-7);
	color:var(--color-3);
	margin-top:var(--margin-1-s)
}
.hisPic {
	display:none;
	margin:var(--secgap) 0
}

.hisPic>div {
	margin-bottom:var(--margin-1)
}

.hisPic .pic2 img {
	transform:translateX(100%)
}

@media only screen and (min-width:980px){
	.historyW>div.histit {
		width:30%;
	}
	.historyW>div.hiscnt {
		width:70%;
	}
	.hisPic {display:block}
}
@media only screen and (min-width:1400px){
	.subHeader {padding:4rem 230px 4rem 4rem;}
	.subHeader p {font-size: var(--text-base);}
	.supportHeader p,.volunteerHeader p {font-size: var(--text-base); color:var(--color-5)}
	.subHeader h4 { margin-bottom:2rem}
	.hiscnt>ul>li {padding-left:200px; font-size: var(--text-lg); margin-bottom:2rem}
	.historyW>div.histit {padding:2rem 4rem}
	.historyW>div.histit span {font-size: var(--text-3xl);}
}
/*시설안내*/
.count{display:flex; margin:var(--margin-1) auto}
.count li{display:flex;flex-direction:column;align-items:center;padding:20px 0;width:100%;font-size:18px;color:var(--primary)}
.count li+li{border-left:1px solid #e1e1e1}
.count li .num_container{display:flex;align-items:baseline;color:var(--color-1)}
.count li .num{margin-right:4px;font-size:var(--text-2xl);}
.count li span{display:inline-block;padding-left:3px;font-size:var(--text-s)}
.count .tit {font-size:var(--text-xs); font-weight:var(--fw-3)}

/*시설사진*/
/* 탭 스타일 */
.tab-container{
  display:flex;
  flex-flow:row wrap;
  align-items:flex-start;
  overflow:hidden;
  height:100%
}
.tab-content{
  height:100%;
  position:relative;
  overflow:hidden;
}
.tabs {
  display: flex;
  flex-flow:row wrap;
  margin-bottom:var(--secgap)

}
.tab {
  width:50%;
  cursor: pointer;
  padding: var(--padding-s);
  margin-bottom: 1px;
  border: 0px solid #ccc;
  background-color: var(--color-f7);
  user-select: none;
}
.tab.active {
  background-color: var(--color-3);
  color: #fff;
}

.tab>h5 {
	font-colBox:var(--num-font-bold);
	margin-bottom:var(--padding-xs)
}
.tab>p {
	color:var(--color-6);
	font-weight:var(--font-weight-3);
	font-size:var(--text-sm);
	transition: 0.3s;
}
.tab.active>p {
	color:var(--color-w);
}
/* 슬라이드 스타일 */
.tab-content-slider {
  display: none;
  /*height: 100%;*/
}

.tab-content-slider.first{
  display: block;
}

/* 슬라이드 내용 스타일 */
.tab-content .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}


.swiper-pagination-sp {
	width:auto !important; 
	font-size:var(--text-xs);
	color:var(--color-9);
	text-align:center
}
.swiper-pagination-fraction {color:var(--color-9) !important;}
.fc_button {
	display:flex; 
	flex-flow:row wrap; 
	justify-content:space-between; 
	align-items:center; 
	margin:1rem auto;
	position:absolute;
	z-index:9001;
	left:50%;
	top:50%;
	transform:translate(50%,-50%)
}
.swiper-button-prev-sp,.swiper-button-next-sp {
	position:absolute;
	z-index:9001;
	top:50%;
	transform:translateY(-50%);
	width:30px; 
	height:30px;
	border-radius:100%;
	padding:1rem;
	background-color:rgba(255,255,255);
	background-repeat:no-repeat; 
	background-position:center; 
	cursor:pointer;  
	box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.10);
	transition: opacity 0.6s, width 0.6s, height 0.6s;
}
.swiper-button-prev-sp {background-image:url(/wdyouth/images/common/arrow-right.svg); transform: rotate(180deg); left:1rem}
.swiper-button-next-sp {background-image:url(/wdyouth/images/common/arrow-right.svg); right:1rem}
.swiper-button-next-sp .cursor{position: absolute; border-radius: 50%; border: 1px solid white; top: 0; left: 0; pointer-events: none; user-select: none; transform: translate(-50%,-50%); opacity: 0; width: 40%; height: 40%; transition: opacity 0.6s, width 0.6s, height 0.6s;}
.swiper-button-next-sp .cursor.on{opacity: 1; width: 100%; height: 100%;}
.swiper-button-prev-sp:hover,.tab-content-slider .swiper-button-next-sp:hover {opacity:1}
.swiper-button-next-sp.swiper-button-disabled, .swiper-button-prev-sp.swiper-button-disabled {
	opacity: .35;
    cursor: auto;
    pointer-events: none;
	}
.tab-content span {
	font-family:var(--title-font);
	color:var(--color-w);
	display:block; 
	position:absolute; 
	left:50%; 
	bottom:2rem; 
	transform:translateX(-50%);
	padding:var(--padding-s);
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
}
.tab-content img {object-fit: cover;}
@media (min-width: 1000px) {

	.tab-content{
	  width:70%
	}
	.tabs {
	  width:26%;
	  margin-right:4%;
	  flex-direction:column;
	}
	.tab {width:100%; padding: var(--padding-1);}
	[class*='swiper-button-prev-sp'], [class*='swiper-button-next-sp'] {
		width:60px !important; 
		height:60px;
	}
	.tab-content span {
		font-size:var(--text-xl)
	}
}



/*동영상*/
.movieWrap {
	position: relative; 
	width: 100%;
	padding-bottom: 56.25%; 
	overflow:hidden
}/*16:9는 56.25% (=9/16 * 100), 4:3은 75%입니다.*/
.movieWrap iframe {
	position: absolute; 
	left:0; 
	top:0;
	bottom:0;
	right:0;
	width: 110%; 
	height: 110%;
	transform: scale(1.1) translateY(-10%);
}

.calendarW {overflow:hidden}
.calendar-contain {
  position: relative;
  left: 0;
  right: 0;
  border-radius: 0;
  width: 100%;
  overflow: hidden;
  max-width: 1020px;
  min-width: 450px;
  margin: 1rem auto;
  background-color: #f5f7f6;
  box-shadow: 5px 5px 72px rgba(30, 46, 50, 0.5);
  color: #040605;
}
@media screen and (min-width: 55em) {
  .calendar-contain {
    margin: auto;
    top: 5%;
  }
}

.title-bar {
  position: relative;
  width: 100%;
  display: table;
  text-align: right;
  background: #f5f7f6;
  padding: 0.5rem;
  margin-bottom: 0;
}
.title-bar:after {
  display: table;
  clear: both;
}

.title-bar__burger {
  display: block;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 38px;
  height: 30px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  background: none;
}
.title-bar__burger:focus {
  outline: none;
}

.burger__lines {
  display: block;
  position: absolute;
  width: 18px;
  top: 15px;
  left: 0;
  right: 0;
  margin: auto;
  height: 1px;
  background: #040605;
}
.burger__lines:before, .burger__lines:after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #040605;
  content: "";
}
.burger__lines:before {
  top: -5px;
}
.burger__lines:after {
  bottom: -5px;
}

.title-bar__year {
  display: block;
  position: relative;
  float: left;
  font-size: 1rem;
  line-height: 30px;
  width: 43%;
  padding: 0 0.5rem;
  text-align: left;
}
@media screen and (min-width: 55em) {
  .title-bar__year {
    width: 27%;
  }
}

.title-bar__month {
  position: relative;
  float: left;
  font-size: 1rem;
  line-height: 30px;
  width: 22%;
  padding: 0 0.5rem;
  text-align: left;
}
@media screen and (min-width: 55em) {
  .title-bar__month {
    width: 12%;
  }
}
.title-bar__month:after {
  content: "";
  display: inline;
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0;
  top: 5px;
  margin: auto;
  border-top: 1px solid black;
  border-right: 1px solid black;
  transform: rotate(135deg);
}

.title-bar__minimize,
.title-bar__maximize,
.title-bar__close {
  position: relative;
  float: left;
  width: 34px;
  height: 34px;
}
.title-bar__minimize:before, .title-bar__minimize:after,
.title-bar__maximize:before,
.title-bar__maximize:after,
.title-bar__close:before,
.title-bar__close:after {
  top: 30%;
  right: 30%;
  bottom: 30%;
  left: 30%;
  content: " ";
  position: absolute;
  border-color: #8e8e8e;
  border-style: solid;
  border-width: 0 0 2px 0;
}

.title-bar .title-bar__controls {
  display: inline-block;
  vertical-align: top;
  position: relative;
  float: right;
  width: auto;
}
.title-bar .title-bar__controls:before, .title-bar .title-bar__controls:after {
  content: none;
}

.title-bar .title-bar__minimize:before {
  border-bottom-width: 2px;
}

.title-bar .title-bar__maximize:before {
  border-width: 1px 1px 2px 1px;
}

.title-bar .title-bar__close:before,
.title-bar .title-bar__close:after {
  bottom: 50%;
  top: 49.9%;
}

.title-bar .title-bar__close:before {
  transform: rotate(45deg);
}

.title-bar .title-bar__close:after {
  transform: rotate(-45deg);
}

.calendar__sidebar {
  width: 100%;
  margin: 0 auto;
  float: none;
  background: #f7f7f7;
  padding: 1.7rem;
  border-radius: 22px 0 0 0;
}
.calendar__sidebar p.ctit {
   display:flex;
   align-items:center;
   gap:0.333rem;
   align-items:center;
   margin-bottom:1.5rem;
   font-colBox:var(--sub-font-L);
   font-size:1.25rem; 
}
.calendar__sidebar p.ctit span {font-weight:var(--fw-7);color:var(--theme-color)}
.calendar__sidebar p.ctit .feather-calendar {
	width:20px;
	height:20px;
	color:var(--color-6)
}
@media screen and (min-width: 55em) {
  .calendar__sidebar {
    position: absolute;
    height: 100%;
    width: 30%;
    float: left;
    margin-bottom: 0;
  }
}

.calendar__sidebar .content {
  padding: 2rem 1.5rem 2rem 4rem;
  color: #040605;
}

.sidebar__nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.9rem;
  padding: 0.7rem 1rem;
  background-color: #f5f7f6;
}

.sidebar__nav-item {
  display: inline-block;
  width: 22px;
  margin-right: 23px;
  padding: 0;
  opacity: 0.8;
}

.sidebar__list {
  list-style: none;
  margin: 0;
  padding:1rem 0;
  border-top:1px dashed #ccc;
}

.sidebar__list dl {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; margin-bottom: 10px;}
.sidebar__list dl dt {
	width:100px;
	font-colBox:var(--num-font);
	color:var(--point-color1);
	font-size:0.875rem;
	text-align:center;
	border:2px solid var(--point-color1);
	border-radius:20px;
	padding:var(--padding-xs);
	
  }
.sidebar__list dl dd {
	width:calc(100% - 120px);
	font-weight:var(--fw-5);
	
}

.sidebar__list-item {
  margin: 1.2rem 0;
  color: #2d4338;
  font-weight: 100;
  font-size: 1rem;
}

.list-item__time {
  display: inline-block;
  width: 60px;
}
@media screen and (min-width: 55em) {
  .list-item__time {
    margin-right: 2rem;
  }
}

.sidebar__list-item--complete {
  color: rgba(4, 6, 5, 0.3);
}
.sidebar__list-item--complete .list-item__time {
  color: rgba(4, 6, 5, 0.3);
}

.sidebar__heading {
  position:relative;
  width:100%; 
  font-size: 2.0rem;
  padding:1rem;
  margin: 1rem auto;
  display:flex;
  gap:1rem;
  justify-content:center;
  align-items:center;
}
.sidebar__heading a {
	display:flex;
	align-items:center;
	color:var(--color-3)
}
.sidebar__heading span {
  font-weight:var(--fw-8);
  padding:0 1rem;
  
}

.numFont {font-colBox:var(--num-font);}

.crWrite {position:absolute; right:0; bottom:0; font-size:1rem}
.crWrite i {margin-right:5px}

.calendar__heading-highlight {
  color: #2d444a;
  font-weight: 700;
}

.calendar__days {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch; 
  width: 100%;
  float: none;
  min-height: 580px;
  height: 100%;
  font-size: var(--text-s);
  padding: 0.8rem 0 1rem 1rem;
}

@media screen and (min-width: 55em) {
  .calendar__days {
    width: 70%;
    float: right;
  }
}

.calendar__top-bar {
  display: flex;
  flex: 50px 0 0;/* Three values: flex-grow | flex-shrink | flex-basis */
  align-items:center;
  border-top:1px solid #333;
  border-bottom:1px solid #eee
}

.calendar__top-bar>span:first-child {color:var(--font-color-red)}
.calendar__top-bar>span:last-child {color:var(--font-color-blue)}
.top-bar__days {
  width: 100%;
  padding: 0 5px;
  color: #666;
  font-colBox:var(--num-font);
  font-size: var(--text-sm);
  text-align:center;
}

.calendar__week {
  display: flex;
  flex: 100px 0 0;/* Three values: flex-grow | flex-shrink | flex-basis */
  border-bottom:1px solid var(--line-color-1);
}

.calendar__week>div:nth-of-type(1)>span {color:var(--font-color-red)}
.calendar__week>div:nth-of-type(7)>span {color:var(--font-color-blue)}

.calendar__day {
  position:relative;
  display: flex;
  flex-flow: column wrap;
  /*justify-content: space-between;*/
  width: 100%;
  /*min-height:100px;*/
  padding: 0.8rem 0.4rem 0.4rem 0.8rem;
}

.event__day {
	background-color:var(--bg-color1);
	color:var(--event-bg-color)
}
.event__day .calendar__date {
	display:flex;
	justify-content:center;
	align-items:center;
	border:2px solid var(--point-color1);;
	border-radius:100%;
	width:30px;
	height:30px;
	font-weight: var(--fw-7);
	color:var(--point-color1);

}

.event_num {
	position:absolute;
	right:0;
	bottom:0;
	font-colBox:var(--num-font);
	text-align:right;
	font-size: var(--text-s);
	padding:0.333rem
}
.calendar__date {
  color: var(--color-6);
  font-size: var(--text-s);
  font-weight: var(--font-weight-4);
}
.calendar__day ul {display:none; margin:1rem 0}
.calendar__day ul li {
	font-size: var(--text-s);
	color:var(--color-5);
	margin-bottom:0.333rem
}

.calendar__week .inactive .calendar__date,
.calendar__week .inactive .task-count {
  color: #c6c6c6;
}
.calendar__week .today .calendar__date {
  color: #fd588a;
}

.calendar__task {
  color: #040605;
  display: flex;
  font-size: 0.8rem;
}
@media screen and (min-width: 55em) {
  .calendar__task {
    font-size: 1rem;
  }
  .calendar__day ul {display:block;}
}
.calendar__task.calendar__task--today {
  color: #fd588a;
}




/*모달*/
#crWrite_pop_up{position:fixed !important; display:none; min-width:400px;}
#crwrite-button {cursor:pointer; color:#fff}
table #crwrite-button {display:flex; justify-content:center; align-items:center; color:#222}
.innerBox {width:94%; min-width:320px; max-width:400px; border-radius:5px; margin:0 auto; background:#fff; position:absolute; top:50% !important; left:50% !important; transform: translate(-50%,-50%); z-index:9001}
.rowBox {
	display:flex; 
	flex-flow:row wrap; 
	justify-content:space-between; 
	align-items:center;
	max-width:300px;
	margin:0 auto;
	}
.writeBox p {display:flex; justify-content:center; gap:2px}
.inpopupW div:nth-of-type(2) {margin-bottom:1.25rem !important}
.inpopupW .rowBox.bLind {border-bottom:1px dashed #ccc; padding:1rem 0}
.rowBox h4 {width:100%; font-size:12px; color:#ccc; margin-bottom:0.333rem}
.inpopupW {position:relative; width:100%; height:300px;  padding-top:50px; box-shadow:0 10px 20px rgba(0,0,0,0.15); overflow:hidden}
.inpopupW>.popupW-close {box-shadow:none}
.inpopupW:before {
	content:"일정등록"; 
	background-color:#333; 
	position:absolute;
	top:0;
	width:100%;
	box-sizing: border-box;
	height:50px;
	font-colBox:var(--title-font-name);
	color:#fff;
	line-height:50px;
	padding-left:1rem;
	}
.inpopupW>.popupW-close{
	position:absolute; 
	z-index: 9500;
	right:0.333rem;
	top:5px;
	transform:translateY(-10%);
	width:50px;
	height:50px;
	cursor:pointer;
	line-height:50px; 
	color:#333;
	text-align:Center;
	font-size:14px;
	}
.inpopupW>.popupW-close>span {background: #f5f5f5;  width: 14px; height: 2px;display: block;margin: 7px 8px;border-radius: 35px; transition: all 0.3s cubic-bezier(0.81, -0.33, 0.345, 1.375);}
.inpopupW>.popupW-close>span:nth-of-type(2) {position: relative;width: 30px;opacity: 0;}
.inpopupW>.popupW-close>span:first-of-type {width: 30px;margin-top: 18px;transition: all 0.6s; transform: rotate(-45deg) translate(-4px, 8px);}
.inpopupW>.popupW-close>span:last-of-type { position: relative;width: 30px;margin-top: 0;transform: rotate(45deg) translate(-4px, -8px);}



/*버튼 형식 라디오 박스*/
.radio-list-main{
	width: 100%;
    display: flex;
    flex-flow: row wrap;
	justify-content:center;
    align-items: center;
    max-width: 500px;
    margin: auto;
    padding: 20px;
    background-color: #333333;
    border: #ccc 1px solid;}
.radio-list {width: 100%;display: flex;
	justify-content:center;
    flex-flow: row wrap;
    align-items: center;
	margin-bottom:2rem;
	}
.radio-list .radio-item {
	position: relative; 
	margin: 5px;
}
.radio-list input[type="radio"]{ 
	opacity: 0; 
	cursor: pointer; 
	position: absolute; 
	top: 6px; 
	left: 7px;
}
.custom-radio{
	min-height: 28px; 
	display: flex;
	align-items: center; 
	flex-flow: row wrap; 
	padding:8px 15px;
	border: #000 2px solid; 
	position: relative; 
	cursor:pointer;

}
.radio-list input:checked~.custom-radio { 
	border-color:#333333;  
	background-color: #333333; 
	color:#fff;
}
.required:before {content:"*"; color:#f58224; margin-left:2px}
.arcInfo {border: 1px solid #cfcfcf; border-radius: 3px; padding:1rem;box-shadow:0 10px 20px rgba(0,0,0,0.15); transition:0.5s ease-in-out;}
.addBox {position:relative; border: 1px solid #cfcfcf; border-radius: 3px; padding:1em}
.addBox .closeBtn {position:absolute; right:10px; top:50%;transform: translateX(-50%) translateY(-50%);}
.saleInput li {margin:5px 0}
.saleInput li label {display:inline-block; width:16%; margin-right:2%}
.saleInput li input {display:inline-block; width:80%}
.fileList {overflow:hidden; margin-bottom:1em}
.fileList li {position:relative; float:left; margin:0.3333em}
.fileList li {margin-bottom:5px; /*border-bottom:1px solid #f1f1f4*/}
.fileList li span {display:inline-block; overflow: hidden;  white-space: nowrap; width:100%; background:rgba(0,0,0,0.3); padding:5px}
.fileList li a.button {position:absolute; right:0px; top:0;/*transform: translateY(-50%);*/}
.fileList li div.photoThum {position:relative;border: 1px dashed #ccc; width:160px; height:150px; overflow:hidden; padding:10px}
.fileList li div.photoThum img {width:100%; position:absolute; left:50%; top:50%;transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%);}
.mbox {border-bottom:1px solid #f1f1f4; padding:1em 0}
.mblock-input {display:block; margin-bottom:5px}
.mblock-input>input.w150,.mblock-input>input.w200  {width:100% !important}
.form-group {display:flex; flex-flow:row wrap}
.form-group li:nth-of-type(2) {margin:0 5px}
.form-group select {border:none; min-width:100px}
.sns-group>div {position:relative;}
.inputW {position:relative}
.inputW input {padding-right:100px}
.inputW button {font-size:0.725rem; padding:0 1rem; border:2px solid #333; border-radius:30px; background:none; position:absolute; right:0; top:50%; transform:translateY(-50%)}
.max400 {max-width:400px}
.max500 {max-width:500px}
.formBox {width:100%; margin-bottom:0.666em;border: 0px solid #ddd; padding: 20px 12px 6px 12px; background:#fff; border-radius:3px}
.formBox>label {font-size:12px; color:#333; display:block}
.formBox>input{width:100%; border:none; background:none}
.formBox input.form-control,textarea.form-control {
		width: 100%;
		padding: 12px 0px;
		border-radius:0;
		font-colBox: 'Pretendard','Malgun Gothic','돋움',Dotum,Helvetica,AppleGothic,Sans-serif;
		color: #555;
		font-weight:300;
		outline: none;
		border:none;
		background-color:transparent;
		border-bottom: #ccc 1px solid;
		font-size: 14px;
		letter-spacing:-0.04em;
		transition: 0.5s all;
		resize: none;
		text-decoration:none
	}
	select.form-control {
		appearance: none;
		padding: 5px 6px;
		border-radius:0;
		outline: none;
		border:none;
		background-color:transparent;
		border-bottom: #ccc 1px solid;
		background-image: url(/wdyouth/images/contents/arrow-down-black.svg);
		background-size:10px;
		background-repeat: no-repeat;
		background-position: calc(100% - 10px) 12px;
		font-size:14px;
	}
	.formBox input.form-control:focus {
		border-color: #333;
	}
	.form-control::-webkit-input-placeholder {
		font-size:0.825rem;
		color: #999;
	}
	.form-control:-ms-input-placeholder {
		font-size:0.825rem;
		color: #999;
	}
	.form-control::placeholder {
		font-size:0.825rem;
		color: #999;
	}
	.fg-full-width {
		font-size:0.825rem;
		width: 100%;
	}
	textarea.form-control {
		font-size:0.825rem;
		height: 150px;
	}
.datepick {position:relative}
/*
.datepick:before {content:"\e9a4"; display:block; font-colBox: xeicon!important; position:absolute; right:1em; top:50%; transform:translateY(-50%)}
*/
/**Checkbox 공개 or 비공개 start**/
.cw-yesno-label-checkbox {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
.cw-yesno-label-checkbox input {
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0;
}
.cw-yesno-label-checkbox span{
  width: 60px;
  height: 30px;
  border: #ccc 2px solid;
  border-radius: 25px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin: 0px 8px;
}
.cw-yesno-label-checkbox small {
    font-size: 12px;
    cursor: pointer;
}
.cw-yesno-label-checkbox span::after{
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: #000;
  display: block;
  position: absolute;
  top: 3px;
  left: 6px;
  transition: left .3s;
}
.cw-yesno-label-checkbox input:checked + span::after{
  left: calc(100% - 26px);
}

/**Checkbox Option 6 start**/
.cw-toggle-label-checkbox {position: relative;}
.cw-toggle-label-checkbox input {
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0;
}
.cw-toggle-label-checkbox span{
  width: 80px;
  height: 30px;
  background-color: #ddd;
  border-radius: 25px;
  transition: background .6s;
  cursor: pointer;
  position: relative;
  display: inline-block;
}
.cw-toggle-label-checkbox span::after{
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: #fff;
  display: block;
  position: absolute;
  top: 5px;
  left: 6px;
  transition: left .3s;
}
.cw-toggle-label-checkbox input:checked + span{
  background: #333;
}
.cw-toggle-label-checkbox input:checked + span:before {
	display:inline-block; 
	content:"공개";
	color: #fff;
    text-align: center;
    position: absolute;
    left: 10px;
    line-height: 30px;
    font-size: 12px;
	}
.cw-toggle-label-checkbox input:checked + span::after{
  left: calc(100% - 26px);
}



/*운영체계*/
.colBox {display:flex; flex-flow:row wrap; /*justify-content:space-between;*/ margin:0 -1% 3em}
.colBox>li {
	position:relative; 
	width:48%; 
	padding:1em; 
	text-align:center; 
	color:#222;
	font-size:0.875rem;
	font-weight:500; 
	letter-spacing:-0.05em;
	border-radius: 40px 10px;
	box-shadow: 0px 10px 30px 0px rgba(179,191,203,0.2);
	margin:1%;
	border:1px solid #ededed;
	}
.colBox>li>span {display:block; font-weight:200; color:#666; font-size:14px}
.colBox>li:before {content:""; display:block; width:70px; height:70px; margin:0 auto 1em auto;  background-repeat:no-repeat; background-size:100%}
/*.colBox>li:after {content:""; position:absolute; top:0; left:0; width:100%; height:1px; background:#333}*/
.colBox>li:nth-child(1):before {background-image:url(/wdyouth/images/contents/colBoxIco1.svg);}
.colBox>li:nth-child(2):before {background-image:url(/wdyouth/images/contents/colBoxIco2.svg);}
.colBox>li:nth-child(3):before {background-image:url(/wdyouth/images/contents/colBoxIco3.svg);}
.colBox>li:nth-child(4):before {background-image:url(/wdyouth/images/contents/colBoxIco4.svg);}
.colBox>li:nth-child(5):before {background-image:url(/wdyouth/images/contents/colBoxIco5.svg);}
.colBox>li:nth-child(6):before {background-image:url(/wdyouth/images/contents/colBoxIco6.svg);}
.colBox>li:nth-child(7):before {background-image:url(/wdyouth/images/contents/colBoxIco7.svg);}
.fmBtnW {display:flex; justify-content:flex-end; margin:1rem}
.fmBtnW a {margin:2px}
@media all and (min-width:768px){
.colBox>li {width:31%}
}

@media all and (min-width:980px){
.colBox>li {width:23%; font-size:0.925rem}
}

@media all and (min-width:1024px){
.colBox {margin-bottom:5em}
.colBox>li {font-size:1rem;}

}


.asBox {
	display:flex;
	flex-flow:row wrap;
	gap:2%;
	justify-content:center;
}

.asBox h4 {
	font-family:var(--sub-font-M);
	font-size:var(--text-lg);
	margin-bottom:var(--margin-1)
}
.asBox>div {
	width:100%;
	padding:var(--boxpd);
	border-radius: 40px 10px;
	box-shadow: 0px 10px 30px 0px rgba(179,191,203,0.2);
	margin:1%;
	border:1px solid var(--color-c);
	text-align:center;
	color:var(--color-3)
}

.asBox div ul li {margin-bottom:var(--padding-xs)}

@media all and (min-width:768px){
	.asBox>div {width:31.333%}

}

@media all and (min-width:1024px){
	.asBox>div {width:23%}

}


@media all and (min-width:1200px){
	.asBox>div {width:18%}

}



/*절차*/
.flow1 {display:flex; flex-flow:column wrap;}
.flow1 li{position:relative; display:inline-block; width:100%; font-size:var(--text-lg);}
.flow1 li div {
	font-family:var(--sub-font-M);
	box-shadow: 0px 10px 30px 0px rgba(179,191,203,0.2);
	border:1px solid var(--color-c);
	background:var(--color-w); 
	height:100%; 
	text-align:center; 
	padding:var(--boxpd); 
	border-radius:var(--radius20)
}
.flow1 li div em {font-size:12px; color:#c4c4c4; position:absolute; top:1rem; left:1rem}
.flow1 li div span {font-family:var(--sub-font-L); font-size:var(--text-sm)}
.flow1 li div:before {
	content:""; 
	display:block; 
	width:50px; 
	height:50px;
	background-size:cover;
	background-repeat:no-repeat;
	margin: 10px auto
}
.flow1 li.setp1 div:before { background-image:url(/wdyouth/images/contents/ball-131764.svg);}
.flow1 li.setp2 div:before { background-image:url(/wdyouth/images/contents/chat-131792.svg);}
.flow1 li.setp3 div:before { background-image:url(/wdyouth/images/contents/clipboard-131921.svg);}
.flow1 li.setp4 div:before { background-image:url(/wdyouth/images/contents/graduation-131744.svg);}
.flow1 li.setp5 div:before { background-image:url(/wdyouth/images/contents/flow1Icon5.png);}
.flow1 li:after {
	content:""; 
	display:block; 
	width:100%; 
	height:40px; 
	text-align:center;
	background:url(/wdyouth/images/common/chevron-right.svg) no-repeat center 50%; 
	transform: rotate(90deg); 
	opacity:0.2
}
.flow1 li:last-child:after {display:none;}


@media all and (min-width:1200px){
/*대관절차*/
.flow1 {flex-flow:row wrap;}
.flow1 li{width:23%; display:table-cell; padding-right:5%;}
.flow1 li:after {
	position:absolute; 
	right:4%; 
	top:50%; 
	width:35px; 
	transform:translateY(-50%); 
	background:url(/wdyouth/images/common/chevron-right.svg) no-repeat center 50%
}
.flow1 li div:before {width:80px; height:80px;}

}



/*포상절차*/
.flow2 {display:flex; flex-flow:column wrap; gap:2rem}
.flow2 li{position:relative; display:inline-block; width:100%; font-size:var(--text-lg);}
.flow2 li div {
	font-family:var(--sub-font-L);
	font-size:var(--text-sm);
	box-shadow: 0px 10px 30px 0px rgba(179,191,203,0.2);
	border:1px solid var(--color-c);
	background:var(--color-w); 
	height:100%; 
	text-align:center; 
	padding:var(--inpd); 
	border-radius:var(--radius20)
}
.flow2 li div em {font-size:var(--text-xs); color:#c4c4c4; position:absolute; top:1rem; left:1rem}
.flow2 li div:before {
	content:""; 
	display:block; 
	width:50px; 
	height:50px;
	background-size:cover;
	background-repeat:no-repeat;
	margin: 10px auto
}
.flow2 li.setp1 div:before { background-image:url(/wdyouth/images/contents/f2icon1.svg);}
.flow2 li.setp2 div:before { background-image:url(/wdyouth/images/contents/f2icon2.svg);}
.flow2 li.setp3 div:before { background-image:url(/wdyouth/images/contents/f2icon3.svg);}
.flow2 li.setp4 div:before { background-image:url(/wdyouth/images/contents/f2icon4.svg);}
.flow2 li.setp5 div:before { background-image:url(/wdyouth/images/contents/f2icon5.svg);}
.flow2 li.setp6 div:before { background-image:url(/wdyouth/images/contents/f2icon6.svg);}
.flow2 li.setp7 div:before { background-image:url(/wdyouth/images/contents/f2icon7.svg);}
.flow2 li:after {
	content:""; 
	display:block; 
	width:100%; 
	height:40px; 
	text-align:center;
	background:url(/wdyouth/images/common/chevron-right.svg) no-repeat center 50%; 
	transform: rotate(90deg); 
	opacity:0.2
}
.flow2 li:last-child:after {display:none;}

@media all and (min-width:768px){
/*대관절차*/
.flow2 {flex-flow:row wrap;}
.flow2 li{width:31.333%; display:table-cell;}
.flow2 li:after {
	position:absolute; 
	right:0; 
	top:50%; 
	width:35px; 
	transform:translate(100%,-50%); 
	background:url(/wdyouth/images/common/chevron-right.svg) no-repeat center 50%
}
.flow2 li div:before {width:80px; height:80px;}
.flow2 li div span {display:block}
}

@media all and (min-width:980px){
.flow2 li{width:23%;}
}

@media all and (min-width:1200px){
.flow2 li{width:18%;}
}