@import url('/resource/css/basic.css');

#wrap { position: relative; overflow:hidden; }
.container { position: relative; width:100%; max-width:70rem; margin:0 auto; padding: 0;}
.container::after { content:""; display:block; clear:both; }

/* slick slide common */
.slick-slider { -webkit-transition: all ease-in-out .3s; transition: all ease-in-out .3s; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-slide { display: none; height: 100%; min-height: 1px; vertical-align: middle; }
.slick-list { overflow: hidden; }
.slick-list.dragging { cursor: pointer; }
.slick-initialized .slick-slide { display: inline-block; }
.slick-arrow.slick-hidden { display: none; }
.slick-current { opacity: 1; display: block; }
.slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; }
/* slick arrow show */
.arwShow .slick-arrow.slick-hidden { display: inline-block; }

/* header */
#header { position:relative; margin:0 auto; color:#fff; background:#33467e;}
#header .header_wrap { width:96%; height:50px; text-align:right; }
#header .header_wrap:after { clear:both; display:block; content:""; }
#header h1 { position:absolute; top:50%; left:0; font-size:0.7rem; transform:translateY(-50%);}
#header h1 a { display:inline-block;}
#header h1 .grade_class{position:relative; font-size:1rem; font-weight:700; margin-right: 1.8rem; }
#header h1 .grade_class::after{content:''; display:inline-block; width:0.25rem; height:0.25rem; border-radius:50%; background-color:#fff; right: -1.05rem; }
#header h1 .name_wrap .info_change{background:#2e3f71; padding:0.3rem 0.7rem; border-radius:3rem; margin-left:0.3rem;}
#header h1 .name_wrap .info_change:hover{text-decoration:underline;}
#header h1 a span {display:inline-block;}
#header h1 a em {position:relative; display:inline-block; vertical-align:middle; font-size:1.1rem; line-height:1.65rem; font-weight:700; padding-left:1rem; margin-left:1rem; border-left:1px solid #d7d4d5; }
#header .topUtil{display:flex; float:right; align-items:center; height:100%;}
#header .header_wrap .util { position:relative; }
#header .header_wrap .util li { float:left; margin-left:0.5rem;}
#header .header_wrap .util li a { position:relative; display:block; padding:0 10px; line-height:32px; font-size:0.7rem; }
#header .header_wrap .util li a:hover,
#header .header_wrap .util li a:focus { text-decoration:underline; }
#header .header_wrap .util li a i{ margin-right:0.3rem;}
#header .header_wrap .util li.link{position:relative; background:#2e3f71; border-radius:3rem; }
#header .header_wrap .util li.link a{padding-left:1.8rem;}
#header .header_wrap .util li.link a i{background:#5963ff; width:1.5rem; height:1.5rem; line-height:1.5rem; text-align:center; border-radius:50%; position:absolute; left:0; top:50%; transform:translateY(-50%);}
#header .mBtn{ display:none; }


/* moblie navigation  */
#mNav { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; font-weight: 400; background:#fff; transition: 0.25s ease; -webkit-transition: 0.25s ease;  z-index:999; overflow:auto; padding-bottom:4rem; display:none;}
#mNav .info_wrap{ background: #33467e; font-weight: 600; color:#fff; line-height:3.5rem; border-bottom:1px solid #ccc; padding:0 1rem;}
#mNav .info_wrap h1{font-size:0.7rem; }
#mNav .info_wrap h1 .grade_class {position: relative; font-size: 1rem; font-weight: 700;}
#mNav .info_wrap h1 .grade_class::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background-color: #fff; vertical-align: middle;}
#mNav .info_wrap h1 .name_wrap .info_change {background:#2e3f71; padding: 0.3rem 0.7rem; border-radius: 3rem; margin-left: 0.3rem;}
#mNav #mNavClose { position:absolute; right:2%; top:.5rem; width:2.5rem; height:2.5rem; line-height:2.5rem; border-radius:0.5rem; color:#fff; font-size:1rem; text-align:center;}
#mNav #mNavClose i{font-weight: 200;}
#mNav.active { right: 0; }
#mNav .snb { display:block; border-bottom: 1px solid #ccc; padding:.4rem 1rem; overflow:hidden; }
#mNav .snb > *{ display:inline-block; vertical-align: middle; margin:.25rem 0;}
#mNav .snb .util li { position:relative; float: left; padding:0 1rem 0 1.25rem;}
#mNav .snb .util li + li:before{content:""; position:absolute; left:0; top:calc(50% - 3px); width:6px; height: 6px; border-radius:50%; background:#ccc;}
#mNav .snb .util li:first-child{padding-left:0;}
#mNav .snb .util li:first-child:before{display:none;}
#mNav .snb .util li a { display: block; line-height: 1.25rem; text-align: left; font-size: 0.7rem; color: #222; }
#mNav .snb .util li a:hover,
#mNav .snb .util li a:focus{text-decoration: underline;}
#mNav .snb .util li a i{margin-right: 0.3rem;}

/* mgnb */
#mgnb ul.dep01 > li {padding:.75rem 1rem; border-top: 1px solid #ddd; background: #f7f7f7;}
#mgnb ul.dep01 > li:first-child{border-top: 0;}
#mgnb ul.dep01 > li > a {position: relative; display:block; line-height:1.6; font-size:1rem; font-weight: 700; color:#222;}
#mgnb ul.dep01 > li > ul.dep02 {padding:.75rem 0 0;}
#mgnb ul.dep01 > li > ul.dep02 > li{line-height: 1.5rem;}
#mgnb ul.dep01 > li > ul.dep02 > li > a {display:block; padding:.15rem 0; font-size:.8rem; line-height:1.4;}
#mgnb li a[target='_blank'] > span:after { content: "\e980"; font-family: 'xeicon'; display: inline-block; font-weight: 400; padding-left: 5px;}

/* footer */
#footer { position: relative; padding: 0.5rem 0 2.5rem; font-weight:400; font-size: 0.7rem; background: #f6f6f6; color: #444;}
.footer_link ul {position:relative; padding:.75rem 0; } 
.footer_link li {display:inline-block; line-height:1.5rem; }
.footer_link li a { display: block; letter-spacing: -0.025em;  color: #000;}
.footer_link li a strong {color:#5963ff; font-weight: 700;}
.footer_link li ~ li a::before{content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background-color: #d4d4d4; margin: 0 0.7rem; vertical-align: middle;}
.footer_link li:last-child a { padding-left: 0; background: none; }
.footer_link li a:hover,
.footer_link li a:focus { text-decoration:underline; }
#footer address { line-height: 2; padding-right:14rem; }
#footer address span { display:inline-block; margin-right:5px; }
#footer .copyright { color:#555; }
#footer .btn_top { display:block; overflow:hidden; position:fixed; right:0; bottom:35px; z-index:100; width:2.6rem; height:2.6rem; }
#footer .btn_top img { width:100%; height:100%; }

/* 방문자수 */
.visitant { position:absolute; top:3.5rem; right:0; width:23%; height:2rem; background:#e5e5e5; color:#666; border-radius:40px; }
.visitant h2 { text-indent:-10000em; font-size:0; }
.visitant ul { overflow:hidden; }
.visitant ul li { position:relative; width:49%; float:left; line-height:2rem; text-align:center; font-size:0.65rem; }
.visitant ul li + li:before{content:""; position:absolute; left:0; top:50%; width:1px; height:16px; margin-top:-8px; background:rgba(0,0,0,0.2); }
.visitant ul li strong { margin-right:0.5rem; font-weight: 600; color:#000; }

/* sub layout */
#sub_container { position:relative; border-bottom:1px solid #ddd;}
#sub_container:after { content:""; display:block; clear:both; }
.subCntBody { position:relative; margin:0 auto; display: flex; justify-content: space-between; overflow: hidden;}
.sub_container{ position:relative; width:calc(100% - 12.25rem); padding-left:2rem; float:right; }
.subContent{min-height:30rem; font-weight: 400; line-height:1.6; font-size:.75rem; padding:2.5rem 0;}

/* sub lnb */
.subCntBody #lnb{width: 12.25rem; height:auto; background: #fffcf1; border-left: 1px solid #ddd; border-right: 1px solid #ddd; float: left; padding:1.25rem 1rem;}
.subCntBody #lnb nav ul.dep01 > li {padding:.75rem 0; border-top: 1px solid #ddd; }
.subCntBody #lnb nav ul.dep01 > li:first-child{border-top: 0;}
.subCntBody #lnb nav ul.dep01 > li > a {display:block; line-height:1.6; font-size:1rem; font-weight: 700; color:#222;}
.subCntBody #lnb nav ul.dep01 > li > ul.dep02 {padding:.75rem 0 0;}
.subCntBody #lnb nav ul.dep01 > li > ul.dep02 > li > a {display:block; padding:.15rem 0; font-size:.8rem; line-height:1.4;}
.subCntBody #lnb nav ul.dep01 > li > ul.dep02 > li.active a{color: #33467e; font-weight: 700;}
.subCntBody #lnb nav ul.dep01 li a:hover{color:#000; font-weight: 700; text-decoration:underline;}
.subCntBody #lnb nav ul.dep01 li ul.dep02 li a:hover{color: #33467e; font-weight: 700;}
.subCntBody #lnb li a[target='_blank'] > span:after { content: "\e980"; font-family: 'xeicon'; display: inline-block; font-weight: 400; padding-left: 5px;}


/* location */
.subLocation { position:relative; display:flex; justify-content: space-between; padding-bottom:1rem; border-bottom: 1px solid #bbb;}
.subLocation .location{padding-right:.5rem;}
.subLocation .location ul {margin: 1.25rem 0 0.5rem 0;}
.subLocation .location li{display:inline-block; vertical-align: middle; line-height:1.5rem; font-size:.7rem; font-weight: 600;}
.subLocation .location li i{display:inline-block;color:#8b8b8b; text-align:center; font-size:.9rem; }
.subLocation .location li + li:before{content:"\e93f"; display:inline-block; font-family: 'xeicon'; margin:0 5px;}
#pageTitle { font-size:1.4rem; font-weight: 600; overflow:hidden; }

/* location : sns */ 
.snsBox { position:relative; height:2.5rem; margin-top:auto; line-height:2.5rem; overflow:hidden; font-size:0;}
.snsBox button {border-radius: 0.3rem; position:relative; display:inline-block; width:2rem; height:2rem; line-height:2rem; font-size:1rem; color:#111; padding:0; border:none; background:#f4f4f4; z-index:2;}
.snsBox button.btnShare {width:auto; padding: 0 0.5rem; background: #eef7fe; margin-right: 0.5rem; border: 2px solid #c8e1f7; box-shadow: 0 0 0.2rem gainsboro;}
.snsBox button.btnShare::after{content: ''; display: block; clear: both;}
.snsBox .snsMore{ position:relative; width:0; opacity: 0; float:left; height:2.5rem; font-size:18px; z-index:1; overflow:hidden; transition: width,height,opacity .2s; -webkit-transition: width,height,opacity .2s; -ms-transition: width,height,opacity .2s;}
.snsBox .snsMore p{margin:0 .7rem 0 .5rem; }
.snsBox .snsMore a{display:inline-block; }
.snsBox .snsMore a + a{margin-left:4px;}
.snsBox .snsMore a.snsT{color:#59acee;}
.snsBox .snsMore a.snsK{color:#ffc20d;}
.snsBox .snsMore a.snsF{color:#3c5899;}
.snsBox .snsMore a.snsIn{color:#d63497;}
/* location : sns : active */ 
.snsBox .snsMore.active{width:auto; opacity: 1;}
.snsBox button.active,
.snsBox button:hover,
.snsBox button:focus{color:#33467e}
.snsBox .snsMore a.snsT:hover,
.snsBox .snsMore a.snsT:focus{color:#257fc9;}
.snsBox .snsMore a.snsK:hover,
.snsBox .snsMore a.snsK:focus{color:#d36e10;}
.snsBox .snsMore a.snsF:hover,
.snsBox .snsMore a.snsF:focus{color:#183372;}
.snsBox .snsMore a.snsIn:hover,
.snsBox .snsMore a.snsIn:focus{color:#af1c4d;}

/* media query mobile */

@media screen and (max-width: 1400px){ 

	/* footer */
	#footer{padding: 0.5rem 0.5rem 2.5rem;}
}
@media screen and (max-width: 1240px){ 

	/* oneDown */
	#nav.oneDown .depth02{ width:100%; left:0; }

	/* 서브레이아웃 */
	.subCntBody{padding:0; margin:0;}
	#lnb{width:100%; float:none;}
	#pageTitle{margin:1rem auto;}	
	.sub_container{padding:0 1rem;}

	/* 서브비주얼 */
	.subvisual img{ width:150%; left:-25%; transform: none; -webkit-transform: none; -ms-transform: none;}


	/* location : snsBox */
	.snsBox{width:auto; height:auto; line-height:0; background:none; border:none; overflow:initial; border-radius:0;}
	.snsBox button{ width:2rem; height:2rem; line-height:2rem; border:2px solid #ccc;}
	.snsBox button.btnPrint{display:none;}
	.snsBox .snsMore{ display: none;}
	.snsBox .snsMore p{margin:0;}
	.snsBox .snsMore a + a{margin-left:0;}
	.snsBox button.active,
	.snsBox button:hover,
	.snsBox button:focus{color:#fff; border-color:#1351c0; background:#1351c0;}

	.snsBox button.btnShare .snsMore{display: none; opacity: 0;}
	.snsBox button.btnShare .snsMore.active{ opacity: 1; display: block; position:absolute; left:0; top: 1.8rem; width:100%; height:auto; line-height:2rem; float:none; background:#fff; text-align:center; padding:0px 0.1rem; border:2px solid #1351c0; border-radius: 0.3rem;}
}

@media screen and (max-width: 1024px){ 
	#header h1{padding: 0 1rem;}

	/* header */
	#header { position:fixed; left:0; top:0; width:100%; height:65px; z-index:99; }
	#header .header_wrap{ width:100%; height:65px; text-align:left;}
	#header .topUtil,
	#nav{ display: none; }
	#mNav{display:block;}
	#header h1{ position:relative; left:auto; width:100%; }
	#header h1 a{ display:inline-block; }
	#header .mBtn{ display:block; position:absolute; top:8px; width: 50px; height: 50px; text-align: center; line-height: 50px; font-size:28px; border-radius:0.5rem; color:#fff; }
	#header .mBtn.mNav{ right:2%; background: #5963ff; }

	/* 서브레이아웃 */	
	.sub_container{ width:100%; float:none;}
	.subContent{padding: 0;}

	/* 서브 lnb */
	.subCntBody #lnb{display: none;}
	
	/* footer */
	#footer address { margin-top:1rem; padding-right:0; }

	/* 방문자수 */
    .visitant { position:relative; top:auto; right:auto; width:50%; margin-top:.5rem; }
	
	/*맨위로가기*/
	.btn_top{ bottom:2.5%; right:2.5%; }

	/* 서브 레이아웃 */
	#sub_container{margin-top:65px;}
}

@media (max-width:768px) { 
	.subContent{ padding:1.5rem 0; }

	/* header */
	#header h1 a img{ width:auto; height:32px;}
}
@media (max-width:580px) {    
	/* header */
	#header h1 .name_wrap{ display: none;}
	#header h1 a{width: 100%;}
	#header h1 a span{width: 100%;}
	#header h1 .grade_class::after{display: none;}

	#mNav h1 .grade_class{display: none;}

}

@media screen and (max-width: 480px){ 

	#header h1 a em { margin-left:0; padding-left:0; border:none; font-size:1rem; }

	/* 방문자수 */
    .visitant { width:70%; min-width:13rem;}
}

@media (max-width:380px) { 

	/* mobile navi */
	#mgnb .snb li a { padding: 0 0.75rem; }

	/* mNav */
	#mNav .info_wrap h1{line-height: 1rem; padding: 1rem 0;}
	#mNav .info_change{display: block;line-height: 1rem;margin: 0;width: fit-content; margin-top: 0.2rem;}

}