/**스크롤바*/
::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 background-color: #F5F5F5;
}

::-webkit-scrollbar {
 width: 10px;
 background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
 background-color: #0ae;
 background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
}

* {margin:0;padding:0;box-sizing:border-box;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;-o-text-size-adjust:none;text-size-adjust:none;-webkit-touch-callout:none;/*-webkit-overflow-scrolling:touch*/ }
::selection {background: #00ffff;}
.nanum-myeongjo-regular {
  font-family: "Nanum Myeongjo", serif;
  font-weight: 400;
  font-style: normal;
}

.nanum-myeongjo-bold {
  font-family: "Nanum Myeongjo", serif;
  font-weight: 700;
  font-style: normal;
}

.nanum-myeongjo-extrabold {
  font-family: "Nanum Myeongjo", serif;
  font-weight: 800;
  font-style: normal;
}
:root {
--container:1600px;
--inner:1600px;
--num-font:'GmarketSansMedium', sans-serif;
--num-font-B:'GmarketSansBold', sans-serif;
--title-font:'Tenada';
--sub-font-B:'SBAggroB';
--sub-font-M:'SBAggroM';
--sub-font-L:'SBAggroL';
--default-font :'Pretendard';
--menu-font:'Tenada';
--handwriting-font:'Nanum Pen Script';
--nanum-myeongjo:"Nanum Myeongjo", serif;
--spacing-narrow-0 :-0.08em;
--spacing-narrow-1:-0.1em;
--spacing-narrow :-0.125em;
--spacing-narrow2 :-0.08em;
--margin-s:0.3333rem;
--margin-m:0.6666rem;
--margin-1:1rem;
--margin-2:2rem;
--margin:3rem;
--secgapn:1rem;
--secgap:2rem;
--secgapw:3rem;
--boxpd:1.25rem;
--boxpd2:1.5rem;
--inpd:1.25rem;
--innpd:1.25rem;
--padding-xs:0.333rem;
--padding-s:0.666rem;
--padding-1:1rem;
--padding-2:2rem;
--spacing-0:0;
--spacing-1:1px;
--lineH1 : 1.0;
--lineH-n : 1.2em;
--lineH-w : 1.6em;
--text-r : right;
--text-l : left;
--text-c : center;
--round30 :30px;
--fw-3: 300;
--fw-4: 400;
--fw-5: 500;
--fw-6: 600;
--fw-7: 700;
--fw-8: 800;
--fw-9: 900;
--text-2xs: 0.5rem;
--text-xs: 0.725rem;
--text-s: 0.825rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 2rem;
--text-4xl: 2.5rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
--ltext:1.25em;
--lltext:1.5em;
--line-color-1:#eee;
--line-color-3:#333;
--box-line-color1:#030046;
--font-color-1:#111;
--font-color-red:#ff0033;
--font-color-blue:#0099cc;
--color-0:#000;
--color-1:#111;
--color-3:#333;
--color-5:#555;
--color-6:#666;
--color-9:#999;
--color-c:#ccc;
--blue-color:#0f8af2;
--red-color:#f20f4a;
--color-ef:#efefef;
--color-d7:#d7d7d7;
--color-f5:#f5f5f5;
--color-f7:#f7f7f7;
--color-e5:#e5e5e5;
--color-w:#fff;
--base-color1:#131419;
--base-color2:#404445;
--foot-color1:#1c2128;
--foot-color2:#242a33;
--bg-color1:#fff4ea;
--bg-color2:#f3fff4;
--bg-color3:#313ed3;
--bg-color4:#fb8d7d;
--tr-bg1:#d5ecfa;
--tr-bg2:#fff3db;
--tr-bg3:#e9f3e5;
--box-color1:#e4f7fb;
--box-color2:#f8faff;
--box-shadow: #20212447;
--line-color1:#e5ffd8;
--line-color2:#fffcce;
--event-color:#f5eee6;
--swiper-theme-color:#fb8270;
--theme-color:#575cdb;
--theme-color2:#00a3e1;
--theme-color3:#f24f28;
--theme-color4:#29ba3f;
--theme-color5:#ffbe5a;
--point-color: #99ff66;
--point-color1: #f15b41;
--point-color2: #33ffff;
--point-color3: #313ed3;
--point-color4:#262f7d;
--point-color5:#0072bc;
--bg-color-f7: #f7f7f7;
--circle-color1:#a8e2fa;
--circle-color2:#e4e977;
--event-bg-color: #f37021;
--mdc-fab-container-shape: 50%;
--radius20:20px;
--radius30:30px;
--radius40:40px;
--pale:#f9f2f2;
--timing:cubic-bezier(0.77, 0, 0.175, 1);
}



@media all and (min-width:1200px) {
	:root {
		--margin-1:1.5rem;
		--margin-2:3.5rem;
		--margin:4rem;
		--padding-s:1rem;
		--padding-1:2rem;
		--padding-2:2.25rem;
		--boxpd:2.0rem;
		--boxpd2:2.5rem;
		--inpd:1.5rem;
		--innpd:1.5rem;
		--secgap:3rem;
		--secgapn:2rem;
		--secgapw:4rem;
		--ltext:1.5em;
		--lltext:1.75em;


	}
}


@media all and (min-width:1400px) {
	:root {
		--boxpd:2.5rem;
		--padding2:2.825rem;
		--secgap:4rem;
		--secgapw:5rem;
		--inpd:1.725rem;
		--innpd:1.5rem;
	}
}

@media all and (min-width:2000px) {
	:root {
		--secgapw:6rem;
	}
}


/**Typeo CSS End**/
:root {
 --default-fm: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 --title-fm:'oneMobile-Bold';
 --base-fm:'oneMobile-Regular';
 --small-size:0.825rem;
 --base-size: 1rem;
 --title-size: 2rem;
 --base-clr: #333;
 --white-clr: #ffffff;
 --bkack-clr: #000000;
 --bdr-clr: #d8d8d8;
 --theme-clr: #064487;
 --theme-clr2: #f15b41;
 --bg-clr: #f5f5f5;
 --point-clr : #f15b41;
}



[href]:focus{text-decoration:none; outline: 0px dashed #ccc}
[href^='tel']{text-decoration:none !important;cursor:default;}
a[href="tel"] {color:inherit !important; text-decoration:none;}

/*input,select {-webkit-appearance: none;-moz-appearance:none; appearance:none; outline: none; border:none;}*/
textarea:focus, input:focus{ border:none; outline: none !important; appearance: none;-webkit-appearance: none; -moz-appearance:none;}
input[type="submit"]{-webkit-appearance: none; -webkit-border-radius:0}
/* Webkit */
input::-webkit-input-placeholder {color: #666; font-size:13px}
/* Firefox 4-18 */
input:-moz-placeholder {color: #666; font-size:13px}
/* Firefox 19+ */
input::-moz-placeholder {color: #666; font-size:13px}
/* IE10+ */
input:-ms-input-placeholder {color: #666; font-size:13px}
/* 포커스시 placeholder텍스트 사라지게 */
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { /* WebKit browsers */ color:transparent; } 
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:transparent; } 
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { /* Mozilla Firefox 19+ */ color:transparent; } 
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { /* Internet Explorer 10+ */ color:transparent; }
a:before {line-height:0}
body, html{font-family: 'Pretendard','Malgun Gothic','돋움',Dotum,Helvetica,AppleGothic,Sans-serif; font-size:16px; font-weight:400; letter-spacing:-0.045em;}
/* common reset */
div,span,object,h1,h2,h3,h4,h5,h6,p,a,abbr,address,cite,em,img,strong,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
details,embed,figure,figcaption,footer,header,hgroup,menu,nav,section,summary,audio,video
{margin:0;padding:0;border:0;font-size:100%;/*font:inherit;*/vertical-align:baseline;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%}table{border-collapse:collapse;border-spacing:0}
img{max-width:100%;border:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}
strong {font-weight:normal;}
ol,ul{list-style:none}
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}
ol,ul,li{list-style:none}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
abbr,acronym{border:0}
hr{display:none;clear:both}
legend,caption{visibility:hidden;overflow:hidden;position:absolute;width:0;height:0;margin:0;padding:0;line-height:0; display:none; letter-spacing:-9999px}
img,fieldset{border:0 none}
label{cursor:pointer}
a{color:#666}
a:link,a:visited{text-decoration:none}
a:hover,a:active{text-decoration:none;}
select{height:22px}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
audio[controls],canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none;height:0}
acronym,abbr{cursor:help}abbr[title]{border-bottom:1px dotted}
ul,ol{list-style:none;list-style-image:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
label,select,input,button{vertical-align:middle}button{border:0;cursor:pointer}
button,input,select,textarea{margin:0;font-size:100%;vertical-align:baseline;vertical-align:middle}
button,input{overflow:visible;line-height:normal}
button,select{text-transform:none}
button[disabled],html input[disabled]{cursor:default}
button,html input[type="button"],input[type="reset"],input[type="submit"]{overflow:visible;cursor:pointer;-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
input[type="checkbox"],input[type="radio"]{}
select{margin:0;padding:0;border:1px solid #ccc;box-sizing:border-box;line-height:1}
img{max-width:100%;border:0;vertical-align:top;-ms-interpolation-mode:bicubic}
.block {display:block !important}
.nowrap {white-space: nowrap !important;}

/*  Form and Button  */

form{margin:0;}
fieldset{margin-left:0;margin-right:0;padding:0;}
legend { position: absolute !important;left: -9999px;width: 1px;height: 1px;font-size: 0;line-height: 0;overflow: hidden; color:#fff}
.blind { position: absolute !important;left: -9999px;width: 1px;height: 1px;font-size: 0;line-height: 0;overflow: hidden;}


input[type='text'],input[type='password'],input[type='file'],
input[type='email'],input[type='number'],input[type='search'],input[type='tel'],input[type='url'],input[type='date'],input[type='datetime-local'],
textarea,
[action] textarea,
select,
[action] select{
	display:inline-block;
	box-sizing:border-box; /* [IE8+] */
	max-width:100%;
	height:2.3em; /*  =(36/14)px */
	/*margin-top:.333em;margin-bottom:.333em;*/
	padding:0;
	border-radius:4px; 
	line-height:normal; /* 2.429=((36-2)/14)px */
	vertical-align:middle;
	text-decoration:none !important;
}
input[type='radio']{ /* [SF]fix */
	border-radius:9999px;
}

input[type='number'] {width:auto;}

@media (min-width: 1400px) {
  body, html {
    font-size: 0.925vw;
  }
}

@media (min-width: 1600px) {
  body, html {
    font-size: 0.875vw;
  }
}

@media (min-width: 2000px) {
  body, html {
    font-size: 0.675vw;
  }
}


.container:before, .container:after{content:'';/* display:table; *//* clear:both; */}
	
.clearfix{/* min-height:0; */} 
.clearfix:before,
.clearfix:after{content:'';display:table;} /* [IE8+] */
.clearfix:after{clear:both;}


.nowrap {white-space: nowrap !important;}
/*제목*/
.pointFontB {font-family:var(--point-font-B)!important}
.pointFontR {font-family:var(--point-font-R)!important}
.subFontB {font-family:var(--sub-font-B)!important}
.subFontM {font-family:var(--sub-font-M)!important}
.subFontL {font-family:var(--sub-font-L)!important}
.titW {margin-bottom:2em; text-align:center}
.heading{
	display:block;
	position:relative;
	min-height:0;
	margin:0 0 1rem 0;
	padding:0;
	font-family:var(--sub-font-M); 
	line-height:1.333;
	letter-spacing:-.071em;
}
.heading.h1{font-size:2.250em !important;} /* =36/16 */
.heading.h2{font-size:2.000em !important;} /* =32/16  */
.heading.h3{font-size:1.750em !important;} /* =28/16  */
.heading.h4{font-size:1.500em !important;} /* =24/16  */
.heading.h5{font-size:1.250em !important;} /* =20/16  */
.hdicon {position:relative; display:inline-block}
.hdicon:before {
	content:"";
	display:block;
	background-image:url(/youth/images/common/heart.svg);
	background-repeat:no-repeat;
	width:1.25rem;
	height:1.25rem;
	position:absolute;
	left:50%;
	top:0;
	transform:translate(-50%,-80%);
}
.hline {position: relative; padding-left:10px}
.hline:before {position:absolute; top:50%; left:0; transform: translateY(-50%); display: block; content: ""; width: 4px; height: 50%;background: #517fd7; z-index: 10;}
.h3line {text-align:center}
.h3line:after {display: block; content: "";  position: relative; width:20px; height:25px; transform:skewX(-50deg); background: #517fd7;   margin: 0.825em auto; z-index: 10;}

.bhline:before {display: block; content: "";  position: relative; width:20px; height:25px; transform:skewX(-50deg); background: #517fd7;   margin: 0.825em auto; z-index: 10;}
.hcircle {position:relative; padding-left:22px; font-size:1.125rem; line-height:var(--lineH-n)!important; font-weight: var(--fw-5);}
.hcircle:before {
	display: block; 
	content: "";  
	position: absolute; 
	left: 0; 
	top:50%; 
	transform:translate(0,-50%);  
	width:10px; 
	height:10px; 
	border:4px solid var(--point-color1); 
	border-radius:100%;
}
.underLN,.cani_underLine{position:relative; display:inline-block;}
.underLN:before{
	content: '';
    display: block;
	width:100%; 
    height: 50%;
    background-color: rgba(0,255,255,0.4);
	position:absolute;
	/*z-index:-1;*/
	bottom:2px;
	left:0
	}
.underLN span,.underLN em{position:relative; z-index:1;}
.underLN.lineC1:before {background-color:var(--line-color1);}
.underLN.lineC2:before {background-color:var(--line-color2);}
#contents>.inCntBox>.CntTit>h3>span {position:relative}


.Tcircle span {position:relative;}
.Tcircle span:before{
	content: '';
    position: absolute;
    top: -7px;
	left:50%;
    width: 4px;
    height: 4px;
	margin-left:-2px;
    border-radius: 100%;
	background-color:#333;
	}
.textLink {
	position:relative;
	display:inline-block;
	font-weight:var(--fw-8);
	color:var(--font-color-3);
	padding-bottom:0.222rem

}
.textLink:hover {color:var(--point-color2)}
.-underline:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background-color: var(--color-3);
  transition: transform 300ms cubic-bezier(0.77, 0, 0.175, 1);
  transform-origin: left;
  transform: scaleX(0);
}
.-underline:hover:before {
  transform: scaleX(1);
}

.-underline.Color2:before{background-color: var(--point-color2);}
/*정렬*/
.vm {vertical-align:middle;}
.fRight {float:right;}
.alignLeft,.alignL {text-align:left !important}
.alignRight,.alignR {text-align:right !important}
.alignCenter {text-align:center !important}
.lineH-n {line-height:var(--lineH-n)}
.lineH-w {line-height:var(--lineH-w)}

/*텍스트*/
.title-font {font-family:var(--title-font)!important;}
.sub-title-L {font-family:var(--sub-font-L)!important;}
.sub-title-M {font-family:var(--sub-font-M)!important;}
.sub-title-B {font-family:var(--sub-font-B)!important;}
.num-font {font-family:var(--num-font)!important;}
.default-font {font-family:var(--default-font)!important;}
.point-font-B {font-family:var(--point-font-B)!important;}
.point-font-R {font-family:var(--point-font-R)!important;}
.handwriting-font {font-family:var(--handwriting-font)!important;}
.nanum-myeongjo {font-family:var(--nanum-myeongjo)!important;}



.subTit {
	font-family:var(--sub-font-M); 
	font-size:var(--text-2xl); 
	margin-bottom:var(--margin-1)
}

.subSTit {
	font-family:var(--sub-font-M); 
	font-size:var(--text-lg); 
	margin-bottom:var(--margin-1)
}

.dlTit {
	display:inline-block;
	text-align:center;
	color:var(--color-w);
	font-family:var(--sub-font-L); 
	font-size:var(--text-s); 
	background-color:var(--color-6);
	border-radius:var(--radius20);
	padding:5px var(--padding-s) 3px var(--padding-s);
	line-height:normal !important;
}

.constit {
	display:inline-block;
	padding:0.333rem var(--padding-1);
	background-color:var(--theme-color);
	color:var(--color-w);
	border-radius:var(--radius40);
	font-family:var(--sub-font-M); 
	font-size:var(--text-sm); 
	margin-bottom:var(--margin-m)
}

.iconTit {position:relative; padding-left:1.8rem; margin-bottom:var(--padding-xs)}
.iconTit:before {
	content:"";
	background-repeat:no-repeat;
	position: absolute;
    top: 50%;
	left:4px;
    width: 1.5rem;
    height: 1.5rem;
	transform:translate(0, -50%)
	

}

.icon1:before {background-image:url(/youth/images/contents/titIcon1.svg);}
.icon2:before {background-image:url(/youth/images/contents/titIcon2.svg);}
.icon3:before {background-image:url(/youth/images/contents/titIcon3.svg);}
.car:before {background-image:url(/youth/images/common/car2_wght200.svg);}

/*아이콘 인라인 텍스트*/
.icontext {display:flex; align-items:center; gap:0.333rem}
.icontext:before{
	content:"예상소요시간";
	display:block;
	width:60px;
	height:1rem;
	background-repeat:no-repeat;
	background-size: contain;
	padding-left:1rem;
}

.distance:before {background-image:url("/youth/images/common/distance_wght200.svg")}


@media all and (min-width:1200px) {
	.iconTit{padding-left:5rem}
	.iconTit:before {width:4rem; height:4rem;}
}
.text-xs {
  font-size: var(--text-xs)!important;
}
.text-s {
  font-size: var(--text-s)!important;
}

.text-sm {
  font-size: var(--text-sm)!important;
}
.text-base {
  font-size: var(--text-base)!important;
}
.text-lg {
  font-size: var(--text-lg)!important;
}
.text-xl {
  font-size: var(--text-xl)!important;
}
.text-2xl {
  font-size: var(--text-2xl)!important;
}
.text-3xl {
  font-size: var(--text-3xl)!important;
}
.text-4xl {
  font-size: var(--text-4xl)!important;
}
.text-5xl {
  font-size: var(--text-5xl)!important;
}
.text-6xl {
  font-size: var(--text-6xl)!important;
}

.ltext {font-size: var(--ltext)!important;}
.lltext {font-size: var(--lltext)!important;}

.color-w {color:var(--color-w)!important}
.color-9 {color:var(--color-9)!important}
.color-6 {color:var(--color-6)!important}
.themecolor{color:var(--theme-color)!important}
.pcolor{color:var(--point-color)!important}
.pcolor-1{color:var(--point-color1)!important}
.pcolor-2{color:var(--point-color2)!important}
.pcolor-3{color:var(--point-color3)!important}
.pcolor-4{color:var(--point-color4)!important}
.pcolor-5{color:var(--point-color5)!important}

.bg-w {background-color:var(--color-w)!important}

.text-c {text-align:var(--text-c)}
.text-l {text-align:var(--text-l)}
.text-r {text-align:var(--text-r)}
.lineH1 {line-height:var(--lineH1)}

/*마진패딩*/
.theumTit {margin:var(--margin-1) 0}
.mT {margin-top:var(--margin-1)!important}
.mLxs {margin-left:var(--margin-s)!important}
.mB {margin-bottom:var(--margin-1)!important}
.pB {padding-bottom:var(--margin-1)!important}
.secgap {margin:var(--secgap) 0 !important}
.insecgap {margin:var(--secgap)!important}
.boxpd {padding:var(--boxpd)!important}
.boxpd2 {padding:var(--boxpd2)!important}
.boxpds {padding:var(--padding-s)!important}
.secmT {margin-top:var(--secgap)!important}
.secpT {padding-top:var(--secgap)!important}
.secmB {margin-bottom:var(--secgap)!important}
.secpB {padding-bottom:var(--secgap)!important}
.secpBw {padding-bottom:var(--secgapw)!important}
.secpTB {padding:var(--secgap) 0}
.secmTB {margin:var(--secgap) 0!important}
.mT10 {margin-top:10px !important;}
.mT1em {margin-top:1rem}
.mBxs {margin-bottom:0.333rem}
.mBms {margin-bottom:0.666rem}
.mB1em {margin-bottom:1rem}
.pA10 {padding:10px !important;}
.inpd {padding:var(--inpd)!important}
.ver_pc {display:none !important}
.ver_mobile {display:block !important}


/*넓이*/
.w100 {width:100% !important;}
.h100 {height:100vh !important;}

/*굵기*/
.fw4 {font-weight:var(--fw-4)!important}
.fw5 {font-weight:var(--fw-5)!important}
.fw6 {font-weight:var(--fw-6)!important}
.fw7 {font-weight:var(--fw-7)!important}
.fw8 {font-weight:var(--fw-8)!important}
/*준비중*/
.ready {
	display: flex;
	flex-direction: column;
	justify-content:center; 
	align-items: center; 
	width: 100%; 
	text-align:center;
	padding:var(--secgapw);
}
.ready:before {
	content:""; 
	width:4rem;
	height:4rem;
	background-image:url(/youth/images/common/update.svg);
	background-repeat:no-repeat;
	background-size:cover;
	display:block; 
	font-size:3rem; 
	color:#eee;
	opacity:0.3
}
.ready:after {content:"준비중 입니다."; display:block; color:#666}
.ready.bbs:after {content:"게시판 들어갑니다"}

@media all and (min-width:1200px) {
.ready:before {font-size:5rem}
.hdicon:before {width: 2.5rem; height: 2.5rem;}
}

/*border top*/
.fullSec {
	padding:var(--secgapw);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center bottom;

}
.fullSec .secTit {
	display: flex;
    justify-content: center;
    gap: 1rem;
	text-align:var(--text-c);
	font-family: var(--sub-font-B);
	font-size:var(--text-2xl);
	margin-bottom:var(--secgap)
}
.fs1 {color:var(--theme-color2)}
.fsbg1 {
	background-color:#f8faff
}
[class*='secIcon']:before {
	content:"";
	display:block;
	width:4rem;
	height:4rem;
	background-repeat:no-repeat;
	background-size:cover;
}

[class*='secIcon'] h3 {
	display:flex; 
	flex-direction:column;
	gap:1rem;
	text-align:var(--text-l)
}

.secIcon1:before {
	background-image:url(/youth/images/common/fs1illust.svg);
	
}

[class*='secIcon'] h3:before {
	content:"";
	display:block;
	width:8rem;
	height:3rem;
	background-repeat:no-repeat;
	background-size:contain;
}
.secIcon1 h3:before {
	background-image:url(/youth/images/contents/asLogo.svg);
}
.box0 {
	position:relative;
	padding:var(--boxpd);
	border:1px solid #d7d7d7;
	border-top:1px solid #4a4a4a;
}

.box1 {
	position:relative;
	padding:var(--boxpd);
	border:0.75rem solid #f5f6f1;
}
.box1:before,.box1:after {
	content:"";
	position:absolute;
	background-color:var(--point-color)
}
.box1:before {	
	left:0;
	top:-0.75rem;
	width:18%;
	height:0.75rem;
	
}

.box1:after {
	left:-0.75rem;
	top:-0.75rem;
	width:0.75rem;
	height:20%;

}

.box1 p {color:var(--color-5)}

.boxLColor1:before, .boxLColor1:after {background-color:var(--point-color2)}


[id*='section-linebox-'] .box1:nth-of-type(even):before, [id*='section-linebox-'] .box1:nth-of-type(even):after {
	background-color:var(--point-color2)
}

.ovBoxW {
	position:relative;
	z-index:-2;
	display:flex;
	flex-direction:column;
	background-color:var(--color-f7);
	border-radius:var(--radius20);
}
.ovBoxW>div {
	padding:var(--boxpd);
	border-width:0
}

.ovBoxW>.ovBox>ul>li {width:auto}
.ovBoxW>div:nth-of-type(odd) h4:before{
	background-color:var(--circle-color2);
}
	


.ovBox {
	display:flex;
	flex-direction:column;
	align-items:center;
	position:relative;
	padding:var(--boxpd);
	border:4px solid var(--color-d7);
	border-radius:var(--radius20);
}

.ovBox>h4 {
	position:relative;
	font-family: var(--sub-font-B);
	color:var(--color-3);
	font-size:var(--text-xl);
	white-space:nowrap;
	margin-bottom:var(--margin-1)
}
.ovBox>h4:before {
	content:"";
	width:1.25rem;
	height:1.25rem;
	border-radius:100%;
	background-color:var(--circle-color1);
	position:absolute;
	z-index:-1;
	right:0;
	top:0;
	transform:translate(50%,-50%)
}

.ov2 {
	z-index:0;
	background-color:var(--color-f7);
	border:0;
}
.ovBox.ov2>h4:before {
	background-color:var(--circle-color2);
}

@media screen and (min-width: 55em) {
	.ovBox {flex-direction:row; flex-wrap:wrap; align-items: flex-start;}
	.ovBox>h4 {margin-right:100px}
	.ovBox>ul {display:flex; flex-flow:row wrap; gap:5%; width:calc(100% - 200px)}
	.ovBox>ul>li {width:calc(50% - 100px)}
	[class*='secIcon']:before {
		width:8rem;
		height:8rem;	
	}

	.secIcon1 h3:before {
		width:16rem;
		height:6rem;
	}
}

.comment{
	display:flex; 
	gap:3px; 
	font-weight:var(--fw-3);
	color:var(--color-6);
	line-height:var(--lineH-n)!important;
}
.comment:before{
	content:"※";
	display:block;
	color:var(--theme-color);
}

.msgSec:before {
	content:"“";
	display:block;
	font-family:var(--point-font-B);
	font-size:var(--text-5xl);
	color:var(--color-c);
}
.msgSec>h4 {color:var(--color-3)}
.msgSec>P {font-size:var(--text-xl); line-height:var(--lineH-w)}

.cBox {
	position:relative;
	padding:var(--boxpd);
	border-radius:var(--radius20);
}

.cBox .gowebsite {
	position:absolute;
	right:0;
	bottom:0;
}
.cBox>h4 {
	font-size:var(--text-xl);
	margin-top: var(--margin-1)
}
.cBox>p {
	color:var(--color-5);
	line-height:var(--lineH-w);
}

.inIcon {
	padding-left: 5.5rem; 
}
.inIcon:before {
	display:block;
	position:absolute;
	content:"";
	width:4rem;
	height:4rem;
	background-repeat:no-repeat;
	background-size:80%;
	background-position:center center;
	border-radius:100%;
	left:var(--boxpd);
	top:var(--boxpd);
	z-index:1;

}

.icon-1>h4{display:flex; align-items:center; gap:0.333rem}
.icon-1>h4:before {
	content:"";
	width:4rem;
	height:4rem;
	background-image:url("/youth/images/contents/after-academy.svg");
	background-repeat:no-repeat;
	background-size:80%;
	background-position:center center;
	border-radius:100%;
}

.bg1 {background-color:var(--box-color1)}
.bg2 {background-color:var(--box-color2)}
.lineBox {position:relative; padding:var(--boxpd) 0}
.lineBox:before, 
.lineBox:after {
	content:""; 
	display:block; 
	position:absolute; 
	width:100%; 
	height:1px; 
	background-color:var(--color-3)
}
.lineBox:before{
	left:0; 
	top:0;
	background: linear-gradient(to right, #104987,#00a4e3, #f24f28);
	height:3px;

}
.lineBox:after{left:0; bottom:0; height:0}
.lineBColor-9:after{
	background-color:var(--color-9)
}


.iconBox {
	display:flex; 
	flex-flow:row wrap;
	background-color:var(--color-w);
	border:1px solid #c9c9c9; 
	padding:2rem 2.25rem;
	border-radius: 60px 10px;
    box-shadow: 0px 30px 40px 0px rgba(179,191,203,0.2);
	}

/*.iconBox ul li {padding-left:120px !important}*/
.iconBox ul li span {position:absolute; left:12px; top:0; width:100px}
.iconBox h5 {width:100%}
.iconBox dt {font-family:var(--sub-font-M); font-size:1.125rem}
.noticeBox {
	position:relative; 
	display:flex; 
	flex-flow:row wrap;
	gap:1rem;
	background-color:#f7f7f7;
	border:1px solid #c9c9c9; 
	padding:var(--boxpd2);
	border-radius: 40px 5px;
    box-shadow: 0px 15px 20px 0px rgba(179,191,203,0.2);
	
	}
.noticeBox>h5.constit {background-color:var(--color-3); margin-bottom:0}
.noticeBox>table.t3 {margin:0}
.noticeBox>div {width:100%; position:relative}
.noticeBox:before {
		content:""; 
		width:100px; 
		height:100px;
		background-repeat:no-repeat;
		background-size:contain;
		background-position:center center;
		position:absolute;
		right:0;
		top:0;
		transform:translate(1rem,10%);
		}

.program1:before {
		background-image:url(/youth/images/contents/program1.svg);
}
.program2:before {
		background-image:url(/youth/images/contents/program2.svg);
		background-size:80%
}
.program41:before {
		background-image:url(/youth/images/contents/program41.svg);
}
.certify:before {
		background-image:url(/youth/images/contents/certify.svg);
}

.volunteer2:before {
	width:10em;
	height:8em;
	background-image:url(/youth/images/contents/volunteer-students.svg);
}
.noticeBox h4 {
	font-family: var(--sub-font-L);
	font-size:var(--text-xl);
	line-height:var(--lineH-w);
	letter-spacing:var(--spacing-narrow-0);
	margin:0 0 var(--margin-1) 0
}
.noticeBox h4 span{font-size:1.125em; white-space:nowrap; display:block}
.noticeBox dl {width:100%; display:flex; flex-flow:row wrap; justify-content:space-between;}
.noticeBox dl dt,.noticeBox dl dd {margin:0.333rem 0}
.noticeBox dl dt {
	width:100px;
	height:34px;
	line-height:34px;
	background-color:#333; 
	border-radius: 0 20px 20px 20px; 
	text-align:center; 
	color:#fff;
	font-size:var(--text-sm);
	font-weight:var(--fw-3)
	}
.noticeBox dl dd {width:calc(100% - 120px)}
.QRLink {width:100%; display:flex; justify-content:center}
.QRLink a{display:flex; justify-content: flex-end; align-items:center; gap:1rem}
.QRLink a span em {font-family:var(--sub-font-B) !important;}
.QRLink img {width:100px; height:100px}
.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(/youth/images/contents/contactPic1.jpg)}
.photoRdBox .inpic.pic2 {background-image:url(/youth/images/contents/contactPic2.jpg)}
.photoRdBox .incont {padding:2rem}

/*border top
.box0 {position:relative;padding:10px;margin:10px 0;border:1px solid #d7d7d7;border-top:1px solid #4a4a4a;}
.box1 {
	position:relative;
	border:1px solid #c9c9c9; 
	padding:2rem 2.25rem;
	border-radius: 60px 10px;
    box-shadow: 0px 30px 40px 0px rgba(179,191,203,0.2);
	}
.box1.converse {border-radius: 10px 60px;}
.box1>h5 {font-size:1.25rem; font-weight:700}
.box2 {position:relative;padding:10px;border:1px solid #d7d7d7;}
.box2:before {content:""; position:absolute; left:0; top:0; background:#333; width:100%; height:2px}
.box1>span {white-space:pre-line;}*/
.labelBox {background:#f9f9f9; display:inline-block; border:1px solid #ccc; padding:0 0.75em; height:38px; line-height:38px; margin:0 5px 5px 0}
.labelBox2 {background:#fff; display:inline-block; /*border:1px solid #ccc;*/ padding:0 0.75em; height:38px; line-height:38px; margin:0 5px 5px 0}
.llinebox {position:relative;background:#fff;padding:1em;margin:10px 0;border-left:6px solid #18438a;box-shadow: 10px 10px 20px rgba(0,0,0,0.1);}
	.line1 {border-color:#18438a}
	.line2 {border-color:#2359b2}
	.line3 {border-color:#5a6c8b}
.inputBox {border:1px solid #ddd;}
.potobox1 {background:#f2f2f2}
.potobox1>.cont {padding:1em}
.potobox1>.cont>h4 {font-size:1.5em; margin-bottom:1em}
.infoBox {position:relative;border:1px solid #ebebeb; padding:1em}

.infoBox:before{display:block;content:'';position:absolute;top:-1px;left:-1px;width:90px;height:70px;border-top:1px solid #192c55;border-left:1px solid #192c55;}
.infoBox ul li {color:#333; font-size:0.875em; font-weight:300}
.infoBox>.infoCont ul li {padding: 3px 0 4px 0}
.bdbox{border:1px solid #e6e6e6; border-top:2px solid #6d6a60; padding:var(--boxpd2)}
.pdbox{padding:1em;}
.pdbox2{padding:2em;}
.Bline {width:100%; border-bottom:1px dashed #ccc; padding-bottom:1.5rem}
@media all and (min-width:980px){
	.cBox>h4 {font-size:var(--text-2xl)}
	.noticeBox dl {align-items:center}
	.noticeBox.qrBox:before {left:0;transform:translate(50%,0);}
	.SiteLink {width:auto; position:absolute;right:var(--inpd);bottom:var(--inpd);}
	.llinebox {padding:2em}
	.infoBox {padding:2em}
	.roundBox {padding:3rem 3.25rem;}
	[class*='decoICON']{display:block; float:left;width:60px;height:60px;margin:0 30px;}
	.decoICON1{background:url(/youth/images/common/decoICON1.png) no-repeat center center;background-size:contain;}
	.decoICON2{background:url(/youth/images/common/decoICON2.png) no-repeat center center;background-size:contain;}
	.infoBox>.infoCont {display:table}
	.infoBox>.infoCont ul{display:table-cell; }
	.infoBox>.infoCont ul:first-child {padding-right:3em}
	.infoBox .baro {position:absolute; right:20px; top:50%;  transform:translate(0,-50%); display:block; min-width:185px }
	.infoBox .baro .button {width:100%;}
	.potobox1>.cont {padding:2em}

	.iconBox {position:relative; padding:2rem 1.825rem; justify-content:space-between}
	
	.iconBox dt {font-size:1.5rem}
	.iconBox:before {
		content:"";
		display:block;
		width:200px;
		height:200px;
		background-repeat:no-repeat;
		background-size:contain;
		background-position:center center
		}
	.volunteer:before {
		background-image:url(/youth/images/contents/decoPeople2.svg);
		transform: scaleX(-1);
	}
	.reward,.training {background-color:var(--color-w);}
	.reward:before {
		background-image:url(/youth/images/contents/reward.svg);
	}

	.training:before {
		background-image:url(/youth/images/contents/training.svg);
	}

	.Workexperience:before {
		background-image:url(/youth/images/contents/decoPeople2.svg);
		transform: scaleX(-1);
	}
	.youthclub:before {
		background-image:url(/youth/images/contents/youthclub.svg);
		transform: scaleX(-1);
	}
	.iconBox.ricon:before {display:none}
	.iconBox.ricon:after {
		content:"";
		display:block;
		width:200px;
		height:200px;
		background:url(/youth/images/contents/decoPeople2.svg) no-repeat center center;
		background-size:contain;
		position:absolute;
		left:auto;
		right:1rem;
		bottom:4rem;
		}
	.iconBox .cont {width:calc(100% - 240px)}
	.iconBox.ricon .cont {width:calc(100% - 220px); padding:1rem}
	.decBox:before{
		content:"";
		display:block;
		width:300px;
		height:300px;
		position:absolute;
		right:1rem; 
		top:0rem;
		transform:translateY(-70%);
		background:url(/youth/images/contents/decoPeople3.svg) no-repeat center center;
		}


	.Bline i {font-size:16px; color:#666; margin-right:3px; vertical-align:middle}
	.decLcon {width:30%;}
	.decRcon {width:60%; max-width:450px; display:flex; flex-flow:column wrap; align-items:flex-end}
	.noticeBox>div {width:35%;}
	.noticeBox:before {width:12em; height:12em; left:96%; top:50%; transform:translate(-100%,-50%);}
	.noticeBox>dl {width:calc(65% - 1em);}
	.volunteer2:before {width:14em; height:10em; left:0;transform:translate(50%,0);}
	.program41:before {left:0;transform:translate(50%,0);}
	.photoRdBox .inpic {width:60%;}
	.photoRdBox .incont {width:calc(100% - 60%); padding:4rem 2rem}
	.inIcon {padding-left: 10.5rem;}


	.cBox .gowebsite {
		right:var(--inpd);
		bottom:var(--padding-s);
	}

}





@media all and (min-width:1200px){
	.cBox>h4 {font-size:var(--text-3xl)}
	.icon-1>h4:before {
		width:6rem;
		height:6rem;	
	}

	.noticeBox>div {width:30%;}
	.noticeBox>dl {width:calc(70% - 1em);}
	.QRLink {
		justify-content:flex-end
		/*position:absolute;
		width:160px;
		right:var(--inpd);
		bottom:var(--inpd);*/
	}
	
	
}


@media all and (min-width:1400px){
	.noticeBox>div {max-width:340px}
}



.inflexBox {display:flex; flex-flow:row wrap;}
.flexBox {
	box-sizing: border-box;
	display:flex; 
	flex-flow:row wrap;
	margin-right:-20px;
	margin-left:-20px;
	margin-top:-1rem;
	margin-bottom:-1rem;
}

.justify-C {justify-content:center}
.justify-SP {justify-content:space-between}
.justify-R {justify-content:flex-end}
.align-flex-S {align-items:flex-start !important}
.align-flex-C {align-items:center !important}
.gap1 {gap:1rem}
.gap2 {gap:2%}
.-column {flex-direction:column;}
.flexBox>[class*='col-'] {
	position:relative; 
	padding-right:20px; 
	padding-left:20px;
	padding-top:1rem;
	padding-bottom:1rem;
}
.flexBox>div>a {color:var(--color-3)}
.flexBox>div>a>h3 {position:relative}


@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.pointBox {
	position:relative;
	background-color:var(--theme-color2);
	padding:var(--boxpd);
	border-radius: var(--radius20);
}
.afterScool {
	display:flex;
	flex-flow: row wrap;
    gap: 1rem;
	margin-top:8rem
}
.afterScool:before {
	content:"";
	position:absolute;
	right:0;
	top:0;
	width:6rem;
	height:6rem;
	background-image:url("/youth/images/contents/afterScool.svg");
	background-repeat:no-repeat;
	transform:translateY(-60%);
}
.afterScool dl {position:relative; color:var(--color-w); text-shadow: 0 0 3px rgb(0 0 0 / 20%); text-align:var(--text-c);}
.afterScool dl:nth-of-type(2):before,.afterScool 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.1)
}
.afterScool dl:nth-of-type(2):before {left:0}
.afterScool dl:nth-of-type(2):after {right:0}

.afterScool dl dt {font-weight:var(--fw-7); font-size:var(--text-lg); margin-bottom:var(--margin-m)}
.iconBox p {line-height:1.8}
.iconBox p span {white-space:nowrap}
.boxBG1:after{background-image:url("/youth/images/common/boxBG1.svg")}
.boxBG2:after{background-image:url("/youth/images/common/boxBG2.svg")}
.boxBG3:after{background-image:url("/youth/images/common/boxBG3.svg")}
.colorBox {position:relative; padding:var(--boxpd); text-align:left}
.colorBox p {display:flex; flex-flow:row wrap; gap:1rem;}
.colorBox2 {
	padding:var(--padding-s);
	margin:var(--magin-1)
}

.dlBox {display:inline-block; box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%);}
.dlBox dt {font-family:var(--title-font); font-size:var(--text-xl); font-weight:var(--fw-7); color:#fff}
.dlBox dt,.dlBox dd{padding:var(--inpd);}
.dlBox dd {font-weight:var(--fw-5);}

.bgcolor1 {background:#edffe4}
.bgcolor2 {background:var(--box-color1)}
.bgcolor3 {background:var(--box-color3)}
.bgcolor4 {background:var(--bg-color4)}
.bgcolor-3{background:var(--color-3)}
.bg-color-f7 {background-color:var(--bg-color-f7)}
.boxColor1 {background-color:var(--theme-color2)}
.boxColor2 {background-color:var(--theme-color3)}
.round1 {border-radius:1rem;/*overflow:hidden*/}
.greetingBox {padding-bottom:var(--secgapw); font-family:var(--point-font-B); font-size:var(--text-lg); line-height:var(--lineH-w); text-align:center}
.greetingBox>p {display:inline-block}
/*.greetingBox:after {
	content:"";
	display:block;
	position:absolute;
	right:1rem;
	bottom:0;
	background-image:url(/youth/images/contents/greetingIcon.svg);
	background-repeat:no-repeat;
}*/
.textBox1 {
	display:block;
	background-color:#fff;
	padding:var(--boxpd);
	border:1px solid var(--line-color-1); 
	box-shadow:0 1px 2px rgba(0,0,0,0.15);
	border-radius:1rem;
	transition:0.5s ease-in-out;
	}
.textBox1:hover {border-color:var(--color-9); box-shadow:0 10px 20px rgba(0,0,0,0.15);}
.textCont {padding:var(--boxpd);}
.textCont p {margin-bottom:var(--margin-1); line-height:var(--lineH-w);}

.textCont2 {padding:var(--inpd);}
.textCont2 p {margin-bottom:var(--margin-1); line-height:var(--lineH-w);}
.decoBox {position:relative; padding:var(--boxpd2);line-height:var(--lineH-w);}
.decoBox:before,.decoBox:after {
	display:block;
	content:"";
	position:absolute;
	top:0;
	width:8px;
	height:100%;
	background-color:var(--color-f5);
}
.decoBox:before {left:0}
.decoBox:after {right:0}
.photo img {border-radius:2rem;}
[class*='boxRicon']:after{
	content:"";
	position:absolute;
	width:60px;
	height:60px;
	right:1rem;
	bottom:1rem;
	transform:translate(-50%,50%)
}
.boxRicon1:after{background-image:url("/youth/images/common/boxRicon1.svg")}
.boxRicon2:after{background-image:url("/youth/images/contents/greetingIcon.svg")}
.col-xs-12{flex: 0 0 100%; max-width:100%}
.col-xs-6{flex: 0 0 50%; max-width:50%}
@media all and (min-width:768px) {
	.afterScool {gap:0}
	.col-md-4{flex: 0 0 33.333%; max-width:33.333%}
	.col-md-5{flex: 0 0 41.666%; max-width:41.666%}
	.col-md-6{flex: 0 0 50%; max-width:50%}
}
@media all and (min-width:1024px) {
	.col-lg-2{flex: 0 0 16.666%; max-width:16.666%}
	.col-lg-3{flex: 0 0 25%; max-width:25%}
	.col-lg-4{flex: 0 0 33.333%; max-width:33.333%}
	.col-lg-5{flex: 0 0 41.666%; max-width:41.666%}
	.col-lg-6{flex: 0 0 50%; max-width:50%}
	.col-lg-7{flex: 0 0 58.333%; max-width:58.333%}
	.col-lg-8{flex: 0 0 66.664%; max-width:66.664%}
	.col-lg-9{flex: 0 0 75%; max-width:75%}
	[class*='boxRicon']:after{width:120px; height:120px}
	/*.iconBox:before {width:4rem;height:4rem; left:2.5rem;}*/
	.inIcon:before {width:7rem;height:7rem;}
	.afterScool {margin-top:10rem}
	.afterScool:before {
		width:12rem;
		height:12rem;
	}
	
}

/* border none */
table>thead>tr>th {
	font-family:var(--sub-font-M);
	font-size:var(--text-base);
}
table.t0{width:100%;margin:.666em 0;border:0;border-collapse:collapse;}
table.t0>*>tr>th,
table.t0>*>tr>td{padding:.2em .75em;border:0;}
table.t0>*>tr>th{background:transparent;font-weight:normal;}
/* border 상하 */
table.t1{width:100%;margin:.666em 0;border:0;border-collapse:collapse;border-top:1px solid #dadde0;border-bottom:1px solid #dadde0;}
table.t1>*>tr>th,
table.t1>*>tr>td{padding:.5em .75em;border:0;border-bottom:1px solid #dadde0;}
table.t1>*>tr>th{background:#f7f8f9;}
table.t1>tbody>tr>th{background:#fcfdfe;}
/* border 상하좌우 */
table.t2{width:100%;margin:.666em 0;border:0;border-collapse:collapse;border-top:1px solid #b0b5ba;border-right:1px solid #dadde0;}
table.t2>*>tr>th,
table.t2>*>tr>td{padding:.5em .75em;border:1px solid #dadde0;border-width:0 0 1px 1px;}
table.t2>*>tr>th{background:#f7f8f9;font-weight:normal;}
table.t2>tbody>tr>th{background:#fafbfc;}
/* border 상하 안쪽만 */
table.t01{width:100%;margin:0;border:0;border-collapse:collapse;}
table.t01>*>tr>th,
table.t01>*>tr>td{padding:.5em .75em;border:0;border-top:1px solid #ddd;}
table.t01>*>tr:first-child>*{border-top:0;}
table.t01>thead~tbody>tr:first-child>*{border-top:1px solid #ddd;}
table.t01>*>tr>th{background:transparent;font-weight:normal;}
/* border 상하좌우 안쪽만 */
table.t02{width:100%;margin:0;border:0;border-collapse:collapse;}
table.t02>*>tr>th,
table.t02>*>tr>td{padding:.5em .75em;border:0;border-top:1px solid #ddd;border-left:1px solid #ddd;}
table.t02>*>tr:first-child>*{border-top:0;}
table.t02>thead~tbody>tr:first-child>*{border-top:1px solid #ddd;}
table.t02>*>tr>*:first-child{border-left:0;}
table.t02>*>tr>th{background:transparent;font-weight:normal;}

/* time table */
table.timetb{width:100%; text-align:center;vertical-align:middle; /*border-collapse:separate;*/ word-break:keep-all;}
table.timetb th{
	border-radius: 22px 22px 0 0; 
	position:relative; 
	padding:24px 0; 
	background-color:var(--theme-color2); 
	color:var(--color-w)
}
table.timetb th:after {
	content:'';
	width:1px;
	height:80%;
	background-color:var(--color-w);
	position:absolute;
	right:0;
	bottom:0;
	transform:translateY(0)
}
/*table.timetb th:before{content:''; width:100%; height:1px; background-color:#333; position:absolute; top:0; left:0;}*/
table.timetb td{position:relative; padding:20px 0.666rem;}
table.timetb td:after{content:''; width:100%; height:1px; background-color:var(--color-c); position:absolute; bottom:0; left:0;}
table.timetb th, table.timetb td{border-right:0px solid transparent; font-weight:500;}
table.timetb th:last-child, table.timetb td:last-child{border-right:none;}
.noticeBox table.timetb th, .noticeBox table.timetb td{border-right:10px solid #f7f7f7;}

/* price table */
table.pricetb{text-align:center; vertical-align:middle;border-collapse:separate; word-break:keep-all;}
table.pricetb th{position:relative; padding:20px 0; background-color:#f9f9f9; font-weight:300}
table.pricetb th::before{content:''; width:100%; height:1px; background-color:#ddd; position:absolute; top:0; left:0;}
table.pricetb td{position:relative; padding:18px 5px; color:#666;}
table.pricetb td::after{content:''; width:100%; height:1px; background-color:#ddd; position:absolute; bottom:0; left:0;}
table.pricetb th, table.pricetb td{border-right:10px solid #fff;}
table.pricetb th:last-child, table.pricetb td:last-child{border-right:none;}
.bdR10 {border-right:10px solid #fff !important;}
table.pricetb td ul {padding:0 1rem}

/* border 상하(좌우) border-top 강조 */
table.t3{width:100%;margin:.333em 0;border:0;border-collapse:collapse;
	border-top:2px solid #333;
	border-bottom:1px solid #aaa;
	background:#fff;
}
table.t3>*>tr,
table.t3>thead+tbody>tr:first-child/* 아래보다 높은 순위 */{border-right:2px solid #fff;}
table.t3>*>tr:first-child{border-right:1px hidden #fff;}
table.t3>*>tr>th,
table.t3>*>tr>td{padding:.75em .85em;border:1px solid #d7d7d7;border-width:1px 1px 0 0;}
/*여백넓게*/
table.t3.wide>*>tr>td{padding:.825em .923em;border:1px solid #d7d7d7;border-width:1px 1px 0 0;}
table.t3>*>tr>th{background:#f7fcff;font-weight:normal;}
table.t3>thead>tr>th{
	padding:.666em;
	border-width:0 1px 1px 0;border-color:#d7d7d7;background:#f7f7f7;color:#333;
	line-height:1.333;
}
table.t3>tfoot>tr>th{border-width:1px 1px 0 0;border-color:#d7d7d7;background:#f3f6f9;color:#333;}
table.t3>tfoot>tr:first-child>*{border-top-color:#79b;}
table.t3>tbody>tr:first-child>th,
table.t3>tbody>tr:first-child>td{border-top-width:0;}/* ☆20150331. thead>th{border-bottom} 또는 table{border-top} 보이도록 한다. */
.scrollTB {width:100%; overflow-x:auto;}
.scrollTB > table {/*width:935px;*/ font-size:1rem}
.scrollTB table tbody th,.scrollTB table tbody td {white-space: nowrap;}

.popscrollTB {width:100%; overflow-x:auto;}
.popscrollTB > table {width:500px; font-size:1rem}
.popscrollTB table tbody th,.popscrollTB table tbody td {white-space: nowrap;}


.tac th, .tac td {text-align: center;}
.vm th, .vm td {vertical-align:middle}
.tac, .tac th, .tac td {text-align: center;}
.vm th, .vm td {vertical-align:middle}
.trBG1 {background:var(--tr-bg1);}
.trBG2 {background:var(--tr-bg2);}
.trBG3 {background:var(--tr-bg2);}




/* pagination */
.pagination{clear:both;width:100%;margin:.666em auto 0;text-align:center;}
.pagination a{display:inline-block;height:25px;margin:.125em 0 .5em .125em;border:1px solid #e1e1e1;color:#666;vertical-align:middle;white-space:nowrap;overflow:hidden;text-decoration:none !important; font-family:Verdana, Geneva, sans-serif}
.pagination .pages a{width:auto;min-width:1em;padding:0 8px;font-size:0.825em;line-height:25px;}
.pagination .pages .on a{border-color:#333;background:#444;color:#fff;}
.pagination .control a {width:40px}
.pagination .control a i{display:block; vertical-align:middle; line-height:25px;}
.pagination a:not([href]){cursor:default;}
.pagination .control a:not([href]){opacity:.4;}


/*리스트*/
.goList {margin:30px 0}
.goList li {padding:4px 0 5px; font-size:0.875em}
.goList li:first-child {border-bottom:dashed 1px #ccc}
.goList li:first-child span:after {content:"\f165"; font-family: LineAwesome; display:inline-block; margin:0 5px;}
.goList li:last-child span:after {content:"\f16c"; font-family: LineAwesome; display:inline-block; margin:0 5px}

.bu1 li{position:relative; padding:0.333rem 0 0.333rem 0.888rem; text-align:left}
.bu1 li:before {
	content:"";
	width:4px;
	height:4px;
	background-color:#555;
	border-radius:100%;
	position:absolute;
	left:0;
	top:12px;
}

.bu1 li ul {margin-top:0.333rem}
.bu1 li ul li {padding-left:0; color:var(--color-6); font-size:var(--text-s)}
.bu1 li ul li:before{display:none}

.dlList1>dt,.dlList1>dd{
	margin-bottom:0.222rem;
}

.ovlist {
	display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
	justify-content:flex-start;
}
.ovlist dt,.ovlist dd {margin-bottom:var(--margin-s); padding:3px 0 4px;}
/*.ovlist dd {margin-bottom:var(--margin-1);}*/
.ovlist dt {
	display:inline-block;
	text-align:center; 
	background-color:var(--color-5); 
	color:var(--color-w); 
	border-radius:2rem;
	margin-right:0;
	padding:var(--padding-xs) var(--padding-1)
}

.ovlist dd {position:relative; width:100%; padding-left:22px}
.ovlist dd:before {
	content:"";
	position:absolute;
	left:0;
	width:20px;
	height:20px;
	-webkit-mask-image:url(/youth/images/common/chevron-down.svg);
	mask-image:url(/youth/images/common/chevron-down.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;

}

.liList {
	position:relative;
	display:flex; 
	flex-flow:row wrap;
	align-items:center;
	padding-left:100px !important;
}
.liList>span:nth-of-type(1) {
	position:absolute;
	width:100px;
	left:0;
	top:0;
	padding: 0.333rem 0 0.333rem 0;
}

@media all and (min-width:980px){
	.ovlist {align-items: flex-start;}
	.ovlist dt {margin-right:1rem;}
}
.ovlist2 {display:flex; flex-flow:row wrap; align-items:center}
.ovlist2 dt,.ovlist2 dd {padding:3px 0 4px; margin-bottom:var(--margin-s)}
.ovlist2 dt {
	position:relative;
	width:3.75rem;
	margin-right:1rem;
	padding-left:var(--padding-s);
	text-align:left
}
.ovlist2 dt:before {
	content:"";
	position:absolute;
	left:0;
	top:6px;
	width:4px;
	height:12px;
	background-color:var(--color-9); 

}
.ovlist2 dd {color:var(--color-6); width:calc(100% - 4.75rem)}


.checkList li {display:flex; margin-bottom:1rem}
.checkList li:before {
	content: "";
    
    width: 20px;
    height: 20px;
    -webkit-mask-image: url(/youth/images/common/chevron-down.svg);
    mask-image: url(/youth/images/common/chevron-down.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;
}

.inPic {display:flex; justify-content:flex-end}



/* Tablet용 CSS */
@media all and (min-width:768px){
	

}

@media all and (min-width:1200px) {
.ver_pc {display:block !important}
.ver_mobile {display:none !important}
.scrollTB {overflow:hidden !important;}
.scrollTB > table {width:100%}
table>thead>tr>th {font-size:var(--text-lg);}

}



/*개인정보취급방침*/
.privacy {margin: 0.750em 0 2em 0;padding: 2em 1.250em;border: 1px solid #c8c8cc; background: #fff; box-shadow:0 3px 3px 0 rgba(0, 0, 0, .05); height:600px; overflow-y:scroll}
.privacy > h3 {font-size:1.375em; font-weight:500; margin-bottom:20px; text-align:center}
.privacy > h4 {display:block; font-size:1.125em; font-weight:500; padding-top:20px; }
.privacy > pre > h5 {font-size:1.125em; font-weight:400 !important; color:#333}
.privacy  pre {overflow-x:hidden; font-family:'Pretendard'; white-space: pre-line;font-size: 0.875em;display: block; padding: 0px; color:#555; line-height:1.6}
.privacy  pre strong { font-weight:400; display:inline-block; margin-right:10px}


/*마우스오버 손모양*/
label{cursor:pointer}
button{cursor:pointer;}






/* 개인정보취급방침 상세화면*/
#privit_detail_pop_up,#movie_detail_pop_up,#agree_detail_pop_up{ display:none;}
#privit-button {font-weight:var(--fw-7); cursor:pointer; color:var(--theme-color)}
.cominfoBox {
	width:100%; 
	min-width:320px; 
	max-width:650px; 
	margin:0 auto; 
	box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
	left:50% !important; 
	transform: translateX(-50%);
	border-radius: 10px;
	overflow:hidden
}
.movieinfoBox {
	width:100%; 
	min-width:320px; 
	max-width:1920px; 
	margin:0 auto; 
	box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
	left:50% !important; 
	transform: translateX(-50%);
	border-radius: 10px;
	overflow:hidden
}
.privitBox {padding:1em; background:#fff; height:500px; overflow-y:scroll;}
.privitBox pre{overflow-x:hidden; white-space:pre-wrap; font-family: 'Pretendard','Malgun Gothic','돋움';font-size:0.825em; color:#555; font-weight:300}

.popupW {position:relative; width:100%; padding:50px 0 1em 0}
.popupW>.popup-close {box-shadow:none}
.popupW .name {margin:0.333em 0}
.popupW:before {
	content:""; 
	position:absolute; 
	left:0; 
	top:0; 
	z-index:8500; 
	width:100%; 
	height:3.125rem; 
	background-color:var(--color-3); 
	background-size:95px
}
.popupW:after {
	content:"";
	position:absolute;
	z-index:9500;
	left:1rem;
	top:1rem;
	font-family: var(--title-font); 
	color:#eee; 
	display:block;
}
.movieinfoBox .popupW:before {
	background-color:var(--theme-color);
}
.movieinfoBox .popupW:after {
	color:var(--color-w);
}

#privit_detail_pop_up .popupW:after {content:"개인정보취급방침";}
#movie_detail_pop_up .popupW:after {content:"케이블카 탑승안내 영상";}
#agree_detail_pop_up .popupW:after {content:"이용약관";}
.popupW h4 {color:#005ea5;}
.popupW>ul {display:flex; flex-flow: row wrap; justify-content:space-between; padding:1em;}
.popupW>ul>li:nth-child(1) {width:30%}
.popupW>ul>li:nth-child(2) {width:65%}
.memHis {padding:1em; height:300px; overflow-y:scroll; font-size:15px; color:#666; font-weight:300; line-height:1.6em}
.memHis p {margin-bottom:0.333em}
.popup-close{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;  
	z-index: 9500; 
	right:0; 
	top:0; 
	width:50px; 
	height:50px; 
	cursor:pointer;  
	line-height:50px; 
	color:#333;  
	text-align:Center; 
	font-size:14px; 
	box-shadow: 0 3px 3px rgba(0,0,0,.1);
}
/*.popup-close span {background: #fff;  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);}
.popup-close span:nth-of-type(2) {position: relative;width: 30px;opacity: 0;}
.popup-close span:first-of-type {width: 30px;margin-top: 18px;transition: all 0.6s; transform: rotate(-45deg) translate(-4px, 8px);}
.popup-close span:last-of-type { position: relative;width: 30px;margin-top: 0;transform: rotate(45deg) translate(-4px, -8px);}
*/
.popup-close:before {
	content:"";
	background-color:var(--color-c);
	background-size:cover;
	-webkit-mask-image:url(/youth/images/common/close.svg);
	mask-image:url(/youth/images/common/close.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;
	transition: 0.3s;
	display:block;
	width:80%;
	height:80%;
	
}

@media all and (min-width:768px) {
.popupW:before {background-size:208px}
.popupW>ul {justify-content:center;}
.popupW>ul>li:nth-child(1) {width:36%}
.popupW>ul>li:nth-child(2) {width:50%}
.memHis {padding:1.5em;}
}



/*button*/
a.btn_basic{display:flex; justify-content:center; align-items:center; position:relative; width:229rem; height:62rem; font-size:17rem;}
a.btn_basic [data-btn="border"]{border:0.333rem solid #fff; transition:transform .4s cubic-bezier(.19,1,.22,1),opacity .4s cubic-bezier(.19,1,.22,1); border-radius:80rem; pointer-events:none; will-change:opacity,transform;}
a.btn_basic [data-btn]{position:absolute; width:100%; height:100%;}
a.btn_basic p{position:relative;}
a.btn_basic [data-btn="bg"]{opacity:0; background:var(--color-point); border:5rem solid transparent; transition:transform .7s cubic-bezier(.19,1,.22,1),opacity .15s cubic-bezier(.165,.84,.44,1); transform:scale(.6); pointer-events:none; border-radius:100rem; will-change:opacity,transform;}
a.btn_basic:hover [data-btn="bg"]{opacity:1; transition:transform .9s cubic-bezier(.19,1,.22,1),opacity .6s cubic-bezier(.165,.84,.44,1); transform:scale(1);}
a.btn_basic:hover [data-btn="border"]{opacity:0; transition:transform .4s cubic-bezier(.19,1,.22,1),opacity .3s cubic-bezier(.19,1,.22,1); transform:scale(1.2,1.44);}
a.btn_basic.gray [data-btn="border"]{border-color:#e6e6e6;}
a.btn_basic.point [data-btn="border"]{border-color:var(--color-point);}
a.btn_basic.point p{font-weight:500; color:var(--color-point);}
a.btn_basic.gray [data-btn="bg"]{background-color:#efefef;}
a.btn_basic.point:hover p{color:#fff;}

@media all and (min-width:1100px) {
	a.btn_basic [data-btn="border"]{border-width:0.666rem}
}


/* Button */
.buttons {display:flex; gap:0.333rem}
/*a[class*='button'],
html input[class*='button'],  ☆ Avoid bug [Android4.2.2] audio and video controls 
button[class*='button'],*/
.button{
	font-family:var(--sub-font-L);
	display:inline-flex;
	align-items:center;
	position:relative;
	box-sizing:border-box; /* [IE8+] */
	max-width:100%;
	border:0px solid transparent;
	border-color:#666; /* ☆#079 */
	background-color:#666; /* ☆#08b */
	color:#fff; /* ☆ */
	font-size:1em;
	line-height:1.6em;
	font-size: 1rem;
	padding: 0.666rem 2rem;
	text-decoration:none;
	text-align:center; /* ☆ */
	transition:.2s ease-out;
	-webkit-appearance:none;
	-moz-appearance:none;
}

.button:hover {transition:.2s ease-out;}
/* Button size and shape */
.button.xlarge{height:auto;padding:1.125em 2.25em 1.1875em;font-size:1.286em;line-height:normal;}
.button.large{height:auto;padding:.8em 2em .8625em;font-size:1.143em; font-weight:700; line-height:normal;}
.button.medium{height:auto;padding:.51em 1.75em .5625em;font-size:1em;line-height:normal;}
.button.small{height:auto;padding:.3em .5em .333em;font-size:.929em;line-height:normal;}
.button.tiny{height:auto;padding:.166em .416em .25em;font-size:.857em;line-height:normal;}
.button.block{display:block;width:100%;} /* 1line */
.button.expand{display:block;width:100%;height:auto;padding:1em 1.25em 1.0625em;line-height:normal;white-space:normal;} /* 2~lines */

/* Button color */
/* styling */
.button.radius{
	border-radius:60px;
	display: flex;
    align-items: center;
}
.button.radius:hover {border-color:#333; transition:.2s ease-out;}
/* colors */
.button.base{border-color:#079;background-color:#08b;color:#fff;} /* ■(속찬) button with icon */
.button.primary{border-width:4px; border-color:var(--theme-color); background-color:var(--color-w);color:var(--theme-color);} /* □(속빈) button with icon */
.button.primary:hover {border-color:var(--theme-color2);color:var(--theme-color2)}
.button.default{border-width:4px; border-color:#999; background-color:#fff;color:#666;} /* □(속빈) button with icon */
.button.default:hover {color:#111}
.button.default2{border-width:4px; border-color:var(--color-3); background-color:var(--color-3); color:var(--color-w);} /* ■(속찬) button with icon */
.button.default2:hover {background-color:var(--color-1); border-color:var(--color-1);}


.rdbutton {border-radius:20px}



/*Button Option Start*/
.cta-opt2 {
 position: relative;
 padding: 19px 22px;
 transition: all 0.2s ease;
 cursor: pointer;
 border: none;
 background-color: transparent;
 color: #000;
 text-decoration: none;
 display: inline-block;
}

.cta-opt2:before {
 content: "";
 position: absolute;
 top: 2px;
 left: 0;
 display: block;
 border-radius: 28px;
 background: rgba(245, 130, 36, 0.3);
 width: 56px;
 height: 56px;
 transition: all 0.3s ease;
}

.cta-opt2 span {
 position: relative;
 font-size: var(--text-sm);
 line-height: 18px;
 letter-spacing: 0.25em;
 text-transform: uppercase;
 vertical-align: middle;
}

.cta-opt2 svg {
 position: relative;
 top: 0;
 margin-left: 10px;
 fill: none;
 stroke-linecap: round;
 stroke-linejoin: round;
 stroke: #111;
 stroke-width: 2;
 transform: translateX(-5px);
 transition: all 0.3s ease;
}

.cta-opt2:hover:before {
 width: 100%;
 background: rgba(245, 130, 36, 0.6);
}

.cta-opt2:hover svg {
 transform: translateX(0);
}

.cta-opt2:active {
 transform: scale(0.96);
}




/*Button Option 2 Start*/
.cta-opt2 {
 position: relative;
 padding: 19px 22px;
 transition: all 0.2s ease;
 cursor: pointer;
 border: none;
 background-color: transparent;
 color: #000;
 text-decoration: none;
 display: inline-block;
}

.cta-opt2:before {
 content: "";
 position: absolute;
 top: 2px;
 left: 0;
 display: block;
 border-radius: 28px;
 background: var(--point-color);
 width: 56px;
 height: 56px;
 transition: all 0.3s ease;
}

.cta-opt2 span,.cta-opt2 em {
 position: relative;
 font-family:var(--sub-font-L);
 letter-spacing: 0.25em;
 text-transform: uppercase;
 vertical-align: middle;
}

.cta-opt2 svg {
 position: relative;
 top: 0;
 margin-left: 10px;
 fill: none;
 stroke-linecap: round;
 stroke-linejoin: round;
 stroke: #111;
 stroke-width: 2;
 transform: translateX(-5px);
 transition: all 0.3s ease;
}

.cta-opt2:hover:before {
 width: 100%;
 background: var(--point-color);
}

.cta-opt2:hover svg {
 transform: translateX(0);
}

.cta-opt2:active {
 transform: scale(0.96);
}


@media only screen and (min-width:980px){
	.cta-opt2 span {font-size: var(--text-lg);}
}

/*Slide text on hover animation start*/
.slide-text-hover:hover {
 cursor: pointer
}

.slide-text-hover {
 background: transparent;
 outline: none;
 position: relative;
 border: 2px solid #111;
 padding: 15px 50px;
 overflow: hidden;
}

/*.slide-text-hover:before (attr data-hover)*/
.slide-text-hover:hover:before {
 opacity: 1;
 transform: translate(0, 0);
}

.slide-text-hover:before {
 content: attr(data-hover);
 position: absolute;
 top: 1.4em;
 left: 0;
 width: 100%;
 text-transform: uppercase;
 letter-spacing: 3px;
 font-weight: 800;
 font-size: .8em;
 opacity: 0;
 transform: translate(-100%, 0);
 transition: all .3s ease-in-out;
}

/*.slide-text-hover div (.slide-text-hover text before hover)*/
.slide-text-hover:hover div {
 opacity: 0;
 transform: translate(100%, 0)
}

.slide-text-hover div {
 text-transform: uppercase;
 letter-spacing: 3px;
 font-weight: 800;
 font-size: .8em;
 transition: all .3s ease-in-out;
}

/*Slide text on hover animation start*/

/*Button Option 3 Start*/
.btn-3 {
 background: var(--theme-color);
 border: none;
 cursor: pointer;
 line-height: 1.3;
 font-weight: 500;
 color:var(--color-w);
 font-size: 1rem;
 padding: 0.666rem 2rem;
 outline: none !important;
 text-transform: uppercase;
}


/*Button Option 4 Start*/

.btn-4 {
 background: none;
 border: none;
 cursor: pointer;
 line-height: 1.3;
 font-weight: 500;
 font-size: 1rem;
 padding: 0.666rem 2rem;
 outline: none !important;
 text-transform: uppercase;
}

.draw-border {
 box-shadow: inset 0 0 0 2px #333;
 color: #333;
 transition: color 0.25s 0.0833333333s;
 position: relative;
}

.draw-border::before, .draw-border::after {
 border: 0 solid transparent;
 box-sizing: border-box;
 content: "";
 pointer-events: none;
 position: absolute;
 width: 0;
 height: 0;
 bottom: 0;
 right: 0;
}

.draw-border::before {
 border-bottom-width: 2px;
 border-left-width: 2px;
}

.draw-border::after {
 border-top-width: 2px;
 border-right-width: 2px;
}

.draw-border:hover {
 color: #ff822d;
}

.draw-border:hover::before, .draw-border:hover::after {
 border-color: #ff822d;
 transition: border-color 0s, width 0.25s, height 0.25s;
 width: 100%;
 height: 100%;
}

.draw-border:hover::before {
 transition-delay: 0s, 0s, 0.25s;
}

.draw-border:hover::after {
 transition-delay: 0s, 0.25s, 0s;
}


/*Button Option 5 Start*/
.btn-hover-effects {
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 text-align: center;
 justify-content: center;
}

.btn-opt-6 {
 display:inline-block;
 color: #fff;
 cursor: pointer;
 font-size: 14px;
 font-weight: 400;
 line-height: 40px;
 margin: 5px;
 max-width: 140px;
 position: relative;
 text-decoration: none;
 text-transform: uppercase;
 width: 100%;
}

.btn-opt-6:hover {
 text-decoration: none;
}

.btn-opt1 {
 background: #0a5e7f;
 font-weight: 100;
}

.btn-opt1 svg {
 height: 45px;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}

.btn-opt1 rect {
 fill: none;
 stroke: #fff;
 stroke-width: 2;
 stroke-dasharray: 422, 0;
 transition: all 0.35s linear;
}

.btn-opt1:hover {
 background: rgba(225, 51, 45, 0);
 font-weight: 900;
 letter-spacing: 1px;
}

.btn-opt1:hover rect {
 stroke-width: 5;
 stroke-dasharray: 15, 310;
 stroke-dashoffset: 48;
 transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-opt2 {
 letter-spacing: 0;
}

.btn-opt2:hover, .btn-opt2:active {
 letter-spacing: 5px;
}

.btn-opt2:after, .btn-opt2:before {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 border: 1px solid rgba(255, 255, 255, 0);
 bottom: 0px;
 content: " ";
 display: block;
 margin: 0 auto;
 position: relative;
 transition: all 280ms ease-in-out;
 width: 0;
}

.btn-opt2:hover:after, .btn-opt2:hover:before {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 border-color: #fff;
 transition: width 350ms ease-in-out;
 width: 70%;
}

.btn-opt2:hover:before {
 bottom: auto;
 top: 0;
 width: 70%;
}

.btn-down {position:relative; display:inline-flex; gap:5px; align-items:center}
.btn-down:after {
	content:"";
	width:20px;
	height:20px;
	background-color:var(--color-w);
	-webkit-mask-image:url(/youth/images/common/download.svg);
	mask-image:url(/youth/images/common/download.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;
	transition: 0.3s;
	
}

.btn-down:hover:after {
	animation: icon_ani 0.5s infinite linear alternate;
}


.btn-link {position:relative; display:inline-flex; gap:5px; align-items:center}
.btn-link:after {
	content:"";
	width:20px;
	height:20px;
	background-color:var(--color-w);
	-webkit-mask-image:url(/youth/images/common/link.svg);
	mask-image:url(/youth/images/common/link.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;
	transition: 0.3s;
	
}



@keyframes icon_ani {
  0%   {transform:translate(0, 0px);}
  50%   {transform:translate(0, 5px);}
  100% {transform:translate(0, -5px);}
}




input[type='text'],input[type='password'],input[type='file'],input[type='date'],input[type='datetime-local'],
input[type='email'],input[type='number'],input[type='search'],input[type='tel'],input[type='url'],
textarea,
[action] textarea{ /*  */
	-webkit-border-radius:4px;-webkit-appearance:none;
	padding:0 .2em;
	border:1px solid #bbb;
	background-color:#fcfcfc;
}
/* if.. has setClassUAver() */
html.lteIE8 input[type='text'],
html.lteIE8 input[type='password']{line-height:2;} 

/* [CR][FF][OP] */
input[type='file']{
	height:auto;padding-top:.583em;padding-bottom:.583em;border-color:transparent;background-color:#fcfcfc;font-size:.857em /* 12px */;font-family:'맑은 고딕';line-height:1.333;
}
/* [IE10+] */
input[type='file']::-ms-value{height:2.666em;margin:-.666em 0 -.666em -.2em;border:1px solid #ccc;background-color:#fcfcfc;}
input[type='file']::-ms-browse{height:2.5em;margin:-.555em -.2em -.555em .166em;
	border:1px solid #999;border-color:#ccc #aaa #999 #bbb;
	background-color:#eee;
	background:linear-gradient(180deg, #fff 0, #fff 3%, #eee 3%, #fff 100%);
}

textarea,
[action] textarea{ /*  */
	width:100%;height:8em;line-height:1.333;
}
textarea[rows='1']{height:1.444em;}
textarea[rows='2']{height:2.888em;}
textarea[rows='5']{height:7.222em;}

select,
[action] select{ /*  */
	padding:.35em .2em; /* [IE8]fix */
	border:1px solid #bbb;
	/*background-color:#fcfcfc;*/
}
select[multiple]{height:auto;} /* 20150716 */

input[type='radio'],input[type='checkbox']{
	box-sizing:content-box; /* [IE8,9]fix */
	width:1em;height:1em;
	margin:0;margin-top:0.786em;margin-bottom:0.786em; /* =((36-14)/14/2) */
	line-height:normal;
}


.input-s {height:2em !important;}
.button.submit {border-color: #175fa5;background-color: #175fa5; color: #fff; }
.printBTN {text-align:right; margin-bottom:10px}
.printBTN>a {margin:0 0 5px 0}


#pageup {
	position: fixed; 
	z-index:9990 !important; 
	right: 20px; 
	bottom: 20px; 
	background:var(--theme-color); 
	width: 50px; 
	height: 50px;
	line-height:50px;
	padding-top:6px;
	display: none;
	cursor: pointer;
	text-align:center;
	z-index:4000;
}
#pageup:after {
	content:"";
	display:inline-block;
	margin:0 auto;
	width:36px;
	height:36px;
	background-color:var(--color-w);
	-webkit-mask-image:url(/youth/images/common/chevron-up.svg);
	mask-image:url(/youth/images/common/chevron-up.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: cover;
	mask-size: cover; 
	text-align:center; 
	
}

@media only screen and (min-width:1200px){
#pageup:after {font-size:1.25em}
}



/*페이징*/
.boardPaging {position:relative; padding:0 0 0 0; /*margin-top:3rem; border-top:1px solid #ccc*/}
.allPage{display:none; position:absolute; top:0; padding:0.333em 1em; background:#eee; border-radius:20px; font-size:0.725rem; color:#666}
.allPage span{font-weight:400;}
.allPage span.b{color:#202020; font-weight:700}
.allPage strong{padding-right:10px;}

.pagenation{display:none;}
.m-pagenation{display:block;}
.m-pagenation .inner {display:flex; justify-content:center; align-items:center /*justify-content:space-between*/}
.m-pagenation{margin-top:1rem; text-align: center}
.m-pagenation a{display:inline-block; vertical-align:middle; padding:0 0.222em}
.m-pagenation a.last{margin-right:0}
.m-pagenation .num{display:inline-block; margin:0 0.333em; padding:0.333em 0.666em; font-size:1.525rem; color:#666; line-height:1em; vertical-align:middle; background: #f8f8f8; border-radius:10px}
.m-pagenation .num strong{color:#202020;}


@media only screen and (min-width:1200px){

.allPage {display:block}
.galList>div.cardtheum {width:23%;}
.m-pagenation{display:none;}
.pagenation{display:block; text-align:center; margin:2.5rem 0; clear:both;}
.pagenation .inner {display:flex; justify-content:center; align-items:center}
.pagenation a{display:inline-block; vertical-align:top; margin-right:25px;}
.pagenation a svg{width:24px; height:27px;}
.pagenation a.prev img, .pagenation a.next img{width:14px; height:27px;}
.pagenation a.last{margin-right:0}
.pagenation ul{display:inline-block; line-height:27px; vertical-align:middle;}
.pagenation ul li{display:inline-block;}
.pagenation ul li a{font-size:24px; color:#999; line-height:24px;}
.pagenation ul li a.on{color:#222; box-sizing: border-box}
.pagenation ul li:last-child{margin-right:0}

}