/*본문바로가기(웹접근성)*/
#skip_nav {position:relative;z-index:9999;}
#skip_nav a {display:block;position:absolute;top:-3000px;}

/**/
body {overflow-x:hidden !important; width:100%;}

.wrap{width:1200px; margin:0 auto; position:relative;}
.wrap2{width:67%;float:right;}

#container {padding-top:104px;}

@media (max-width:1200px){
	.wrap{width:95%;}
	.wrap2{width:95%;}
}



/* 로그인, 회원가입 , sns */
#header-wrap{position: fixed;height: 104px; width: 100%; z-index: 9999;  background:#fff;}
#top{height:34px; border-bottom:1px solid #d9dfe3; position:relative;}
.user {
	float: right;
    display: block;
    position: relative;
    right:36px;
}
ul.user_list{overflow:hidden;}
li.user_item{float:left; margin-top: 3px;}
li.user_item a{font-size:13px; color:#666;}
li.user_item.topLogin{position:relative; margin-right:18px;}
li.user_item.topLogin:before{content:''; position:absolute; top:8px; left:44PX; border-right:1px solid rgba(0, 0, 0, 0.2); height:10px;}
.link{float:left; display:block;}
.link li{float:left; margin: 8px 12px 0 0;}

@media (max-width:768px){
	li.user_item{
	margin-top: 5px;
	}
	li.user_item.topLogin:before{
	top:5px;
	}
	.sub-head li.user_item{
	margin-top: 3px;
	}
	.sub-head li.user_item.topLogin:before{
	top:8px;
	}
}

@media (max-width:430px){
	li.user_item{
	margin-top: 6px;
	}
	li.user_item.topLogin:before{top:6px;}
}



/* 로고 */
#header{border-bottom:1px solid #d8d8d8; height:70px; z-index:9999; transition:all 500ms; }
#logo {
    z-index: 9;
    width: 263px;
    height: 40px;
    top: 49px;
    position: fixed;
}


@media (max-width:430px){
    #top .wrap{width:96%;}
    #header{height:60px;}
    #header-wrap {height:94px;}
    #logo img{max-width:75%; }
}

/* 사이트맵 */
#site-map-toggle {
	display: block;
    z-index: 1000;
    width: 20px;
    cursor: pointer;
    margin: auto;
    float: right;
    position: absolute;
    top: 5px;
    right: 0;
}
#site-map-toggle span {display:block; height:2px;background:#000; margin:4px 0; border-radius:50px; transition:all 0.5s; top:0;
    opacity:1; transform:rotate(0); width:20px;
}
#site-map-toggle.active {}
#site-map-toggle.active span {position:relative;}
#site-map-toggle.active span:nth-child(1) {transform:rotate(45deg) translateY(6px) translateX(6px);}
#site-map-toggle.active span:nth-child(2) {opacity: 0;}
#site-map-toggle.active span:nth-child(3) {transform:rotate(-45deg)translateY(-3px) translateX(2px);}


/* 메뉴 */
#tnb {position:relative; top:21px; right:-31px; height:100%; text-align:left; transition:all 500ms; float:right; /*background:#fff;*/}

#tnb a {line-height:1.2;}
#tnb ul.m1 {display:inline-block; position:relative; }
#tnb li.m1 {position:relative; float:left; width:157px; }
#tnb a.m1 {font-size:17px; color:#000; /*padding:0 30px;*/ font-weight: 700; position:relative; width:100%; display:block; text-align:center; }
#tnb li.m1.active a.m1 {color:#005cb3;}
#tnb li.m1 a.m1:hover {color:#005cb3;}
#tnb li.m1 a.m1:after {
    position:absolute; content:''; display:block; width:0; height:5px; background:#005cb3; margin:auto; left:0; right:0;
    top:-23px; transition:all 300ms;
}
#tnb li.m1 a.m1:hover:after {width:100%;}
#tnb ul.m2 {
    display:none; position:relative; width:100%; /*top:48px;*/ left:0; margin-top:27px; background:#fff; padding:0; line-height:1.2;
    border:1px solid #ddd; box-shadow:4px 4px 10px rgba(0,0,0,0.2); 
}
#tnb ul.m2:last-child {}
#tnb ul.m2.show {z-index:100;}
#tnb li.m2 {padding:0;}
#tnb li.m2 > a svg {margin-right:-2px; color:#bbbbba;} 
#menu-all a.m2,
#tnb a.m2 {font-size:14px; display:block; padding:12px 10px; border-bottom:1px solid #ddd; }
#tnb li.m2 a.m2:hover{color:#008fd7;}
#tnb li.m2.active a.m2 {color:#008fd7;}
#menu-all ul.m3,
#tnb ul.m3 {background:#fafbfd; padding:10px 0; border-bottom:1px solid #ddd; height:auto;}
#menu-all li.m3,
#tnb li.m3 {padding:5px; letter-spacing: -0.05em;}
#menu-all a.m3,
#tnb a.m3 {font-size:13px; position:relative; padding:0 5px; display:block; word-break:break-all;}
#menu-all a.m3:before,
#tnb a.m3:before {
    content:''; position:absolute; height:2px; width:2px; display:block; background:#fba81a;
    margin:auto; top:6px; right:auto; bottom:auto; left:0;
}

#tnb a.m3:hover{color:#fba81a;}

/**/
#menu-all a.m2 {font-size:14px; display:block; padding:12px 18px; border-bottom:1px solid #ddd; font-weight:500;}
#menu-all ul.m3 {background:#fafbfd; padding:10px 0; border-bottom:1px solid #ddd; display:block;}
#menu-all li.m3 {padding:3px 10px 3px 15px;}
#menu-all a.m3 {font-size:13px; position:relative; padding:0 10px; display:block;}
#menu-all a.m3:before {
    content:''; position:absolute; height:1px; width:5px; display:block; background:#666;
    margin:auto; top:8px; right:auto; bottom:auto; left:0;
}

/**
 * .m3 스타일은 #tnb .m3 와 동일
 */
#menu-all {background:#fff; height:0; position:relative; z-index:999;}
#menu-all .wrap {
    display:none; max-height:80vh; overflow-y:scroll;
    position:absolute; margin:auto; margin-top:0 !important; top:0; left:0; right:0; background:#fff; padding:20px; margin-top:104px;
}
#menu-all ul.m1 {display:flex; justify-content: center; text-align:left; }
#menu-all li.m1 {width:16.666%; max-width:16.666%; flex:0 0 16.666%; border:1px solid #ddd;}
#menu-all a.m1 {
    display:block; padding:6px 0; font-weight:bold; text-align:center; transition:all 300ms;
    border-bottom:1px solid #ddd; border-top:5px solid #ddd; font-size: 16px;
}
#menu-all li.m1:hover {border:1px solid #005cb3;}
#menu-all li.m1:hover a.m1 {color:#005cb3; border-top:5px solid #005cb3;}
#menu-all a.m2 {text-align:center;}
#menu-all a.m2:hover{color:#0093d8;}
#menu-all a.m3:hover{color:#fba81a;}

@media (max-width:1260px) {
    #menu-all {}
    #menu-all .wrap {height:78vh; overflow:auto;}
    #menu-all ul.m1 {display:block;}
    #menu-all li.m1 {width:100%; max-width:100%; flex:0 0 100%;}
    #menu-all ul.m2 {}
    #menu-all li.m3 {}
    #menu-all ul.m3 {display:block;}
}


/* snb */
#snb {
    background:transparent; text-align:center; padding-bottom:30px; display:none; user-select:none;
    transition:all 200ms;
}
#snb .wrap {
    padding:0; background:#fff; border-radius:0 80px 0 80px; opacity:1; transition:all 500ms;
    border:1px solid #ddd; overflow:hidden; margin-top:20px;
}
#snb .ul.m1 {height:100%; margin-left:0; margin-right:0;}
#snb .li.m1 {
    position:relative; display:block; padding:60px 0; transition:all 300ms; opacity:0;
}
#snb .li.m1:hover {background:rgba(244,244,244,244.1);}
#snb .li.m1:after {content:''; display:block; position:absolute; width:1px; height:100%; background:#ddd; right:0; top:0;}
#snb .li.m1:last-child {padding-right:20px;}
#snb .li.m1:last-child:after {display:none;}
#snb .li.m1 > .div.m1 {}
#snb a.m1 {
    display:block; font-size:21px; color:#111; margin-bottom:30px; position:relative;
}
#snb a.m1:before {
    content:''; display:block; position:absolute; width:15px; height:4px; background: #fba81a; margin:auto;
    top:auto; right:0; bottom:-20px; left:0;
}
#snb ul.m2 {float:left; width:100%; display:block; }
#snb li.m2 {padding:0; }
#snb a.m2 {display:block; font-size:16px; font-weight:400; transition:all 300ms; }
#snb a.m2 span {position:relative; display:inline-block; padding:5px;}
#snb a.m2:hover span {font-weight:400; color:#fba81a; background:linear-gradient(to top, rgba(16,130,237,0.6) 10%, transparent 10%); }
#snb ul.m3 {display:none;}
#snb li.m3 {}
#snb a.m3 {}
#snb .li.m1:nth-child(1) a.m2:hover span {color: rgba(255,0,0,1); background:linear-gradient(to top, rgba(255,0,0,0.6) 10%, transparent 10%); }
#snb .li.m1:nth-child(2) a.m2:hover span {color: rgba(255,165,0,1); background:linear-gradient(to top, rgba(255,165,0,1) 10%, transparent 10%); }
#snb .li.m1:nth-child(3) a.m2:hover span {color: rgb(255,199,156); background:linear-gradient(to top, rgba(255,199,156,0.6) 10%, transparent 10%); }
#snb .li.m1:nth-child(4) a.m2:hover span {color: rgba(0,128,0,1); background:linear-gradient(to top, rgba(0,128,0,0.6) 10%, transparent 10%); }
#snb .li.m1:nth-child(5) a.m2:hover span {color: rgba(0,0,255,1); background:linear-gradient(to top, rgba(0,0,255,0.6) 10%, transparent 10%); }
#snb .li.m1:nth-child(6) a.m2:hover span {color: rgba(75,0,130,1); background:linear-gradient(to top, rgba(75,0,130,0.6) 10%, transparent 10%); }
#snb .li.m1:nth-child(7) a.m2:hover span {color: rgba(238,130,238,1); background:linear-gradient(to top, rgba(238,130,238,0.6) 10%, transparent 10%); }
#snb .li.m1:nth-child(1) a.m1:before {background: rgba(255,0,0,1);}
#snb .li.m1:nth-child(2) a.m1:before {background: rgba(255,165,0,1);}
#snb .li.m1:nth-child(3) a.m1:before {background: rgb(255,199,156);}
#snb .li.m1:nth-child(4) a.m1:before {background: rgba(0,128,0,1);}
#snb .li.m1:nth-child(5) a.m1:before {background: rgba(0,0,255,1);}
#snb .li.m1:nth-child(6) a.m1:before {background: rgba(75,0,130,1);}
#snb .li.m1:nth-child(7) a.m1:before {background: rgba(238,130,238,1);}
#snb.active {display:block;}
#snb .mobile-menu {padding:20px 30px; text-align:left; display:none;}
#snb .mobile-menu .dropdown-item {padding:0;}

/* 애니메이션 제거시 아래 주석 처리 */
#snb.active .li.m1 {animation:snb_li_show both 700ms;}
#snb.active .li.m1:nth-child(1) {animation-delay: 0ms;}
#snb.active .li.m1:nth-child(2) {animation-delay: 50ms;}
#snb.active .li.m1:nth-child(3) {animation-delay: 100ms;}
#snb.active .li.m1:nth-child(4) {animation-delay: 150ms;}
#snb.active .li.m1:nth-child(5) {animation-delay: 200ms;}
#snb.active .li.m1:nth-child(6) {animation-delay: 250ms;}
#snb.active .li.m1:nth-child(7) {animation-delay: 300ms;}
@keyframes snb_li_show {
    0% {opacity:0;}
    100% {opacity:1;}
}
/* 애니메이션 끝 */




@media (max-width:1260px){
    header {}
    body {overflow-x:hidden; width:100%; max-width:100%;}
    #tnb {z-index:1000; position:relative;}
    #snb {
        padding:0 0 0 10%; z-index:1; top:0; position:fixed; width:100%; transform:translateX(100%);
        height:100vh; overflow:auto; border-top:0;
    }
    #snb .wrap {
        width:auto; height:100%; max-width:100%; border-radius:0; top:0; margin:0; position:relative; padding-top:90px;
        border:0; box-shadow:-10px 0 10px rgba(0,0,0,0.2);
    }
    #snb .wrap > .rect {overflow:auto; height:100%;}
    #snb .ul.m1 {height:auto;padding:0 30px;}
    #snb .row {margin:0;}
    #snb .li.m1.col {
        opacity:1; width:100%; flex:0 0 100%; max-width:100%; border-bottom:1px solid #ddd; padding:0;
        display:block; margin:0; border-right:0;
    }
    #snb .li.m1:after {display:none;}
    #snb a.m1 {text-align:left; margin:0; position:relative; padding:15px;}
    #snb a.m1:before {top:0; right:auto; bottom:0; left:5px; width:4px; height:15px; transform:translateY(1px);}
    #snb a.m1:after {
        content: "\f067"; display:block; font-family: 'Font Awesome 5 Free'; font-weight: 900; position:absolute;
        margin:auto; top:0; right:10px; bottom:0; left:auto; height:18px;
    }
    #snb a.m1.open:after {content: "\f068";}
    #snb ul.m2 {display:none; border-top:1px solid #ddd; margin:0; background:#efefef;}
    #snb li.m2 {text-align:left; padding:6px 20px;}
    #snb.active {animation:snbShowMobileMenu both 1000ms;transform:translateX(0%);}

    #snb li.m2.active ul.m3 {border-bottom:1px solid #ccc;}
    #snb ul.m3 {padding:6px 10px 8px 20px;}
    #snb li.m3 {font-size:16px;padding:2px 0;}
    #snb a.m3 {font-weight:300;}

    @keyframes snbShowMobileMenu {
        0% {transform:translateX(100%);}
        100% {transform:translateX(0%);}
    }

    #snb .mobile-menu {display:block;}

}

@media (max-width:1024px){
	#site-map-toggle {display:none;}	
	.link {margin-right:20px;}
}


@media (max-width:1500px){
    /* #tnb a.m1 {margin:0 15px; }*/
    #tnb ul.m2 {width:120%; transform:translateX(-10%);}
}
@media (max-width:1360px){
	#tnb {right:0;}
}
@media (max-width:1260px){
    #tnb ul.m1 {display:none !important;}
    #tnb ul.m2 {display:none !important;}
}




/* footer */
footer{padding:20px 0; color:rgba(255, 255, 255, 0.4); font-size:14px; background: #282828; position:relative;}
footer .wrap{position:relative;}
footer hr{border-top: 1px solid rgba(255, 255, 255, 0.1);}
footer div.footer-top{display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:32px; }
footer div.footer-top div.footer-btn{position:absolute; top:24px; right:0;}
footer div.footer-top div.footer-btn span{margin-left:10px;}
footer ul.util{font-size:0; position:relative;height:12px;}
footer ul.util li{position:relative; padding:0 20px 0 0; line-height:12px; font-size:14px; display:inline-block;}
footer ul.util li:after{position:absolute; content: ""; display:block; width:1px; height:12px; right:9px; top:0; background:rgba(255, 255, 255, 0.2);}
footer ul.util li:first-child a{color:#0071ce;}
footer ul.util li:last-child:after{display:none;}
footer ul.util li a{color:#fff; line-height:12px;}
footer ul.util li a:hover{color:#fba81a;}
footer .link {position:absolute; right:0;  top:-12px;}
footer .link li{margin: 0 0 0 12px;}
footer div.info{overflow:hidden; margin-top:20px;}
footer div.info div.info-wrap{width:64%; margin-bottom:38px; float:left;}
footer .f-logo{background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sfev.er.xe%2Svzntrf%2Spbzzba%2Ss_ybtb.cat) no-repeat; width:152px; height: 66px; float:left; margin-right:50px;}
footer div.info div.info-wrap dl.info-item{display:inline-flex; position:relative; line-height:1.4; margin:6px 20px 0 0;}
footer div.info div.info-wrap dl.info-item dt.title{font-weight:500; margin-right:9px;}
footer div.copyright{padding-top:3px;}
footer div.copyright b{font-weight:500;}
footer a.top-btn{
	position: absolute;
    top: -6px;
    right: 0;
    width: 20px;
    height: 9px;
    transition: all 0.3s;
}
footer a.wa-btn {
	position: absolute;
    top: -104px;
    right: 0;
}

@media screen and (max-width:1350px) {
    footer .wrap{max-width:95%;}
    footer div.info div.info-wrap{width:45%;}
}
@media screen and (max-width:800px) {
    footer{font-size:11px;}
    footer .f-logo{background-size:70%;  height: 52px;}
    footer div.info div.info-wrap {width:100%; margin-bottom:10px;}
    footer div.footer-top{margin-bottom:20px;}
    footer div.footer-top div.footer-btn{position:inherit;}
    footer ul.util li{font-size:11px; line-height: 0;}
    footer .link {top:40px; right:0;}
    footer .link li {margin:0;}
    footer .link img{max-width:65%;}
    footer a.top-btn img{max-width:70%;}
    footer a.wa-btn img{max-width:70%; float:right;}

}

@media screen and (max-width:700px) {
    footer a.wa-btn{top:-127px;}
}

@media screen and (max-width:430px) {
    footer dl.info-item dt, footer dl.info-item dd{font-size:12px; letter-spacing: -0.01em;}
    footer div.copyright{margin-top:16px; font-size:11px; letter-spacing: -0.01em;}
    footer a.wa-btn {
    	top: -178px;
	}
	footer div.copyright b{
		word-break: break-word;
	}
	footer ul.util li a {
		line-height: 10px;
	}
	footer ul.util li:after {
		top: -1px;
	}
	.f-baaner-wr .nav > span.prev, .f-baaner-wr .nav > span.next{top:8px;}
}

@media screen and (max-width:280px) {
    footer ul.util li{line-height: 2;}
    footer ul.util li:after {top: 5px;}
    footer .link {top: 80px;}

}









/* new visual slide */
#visual_v2{
	height:465px;
}
#visual_v2 .slick-list,
#visual_v2 .slick-track,
#visual_v2 .item a,
#visual_v2 .item a img
{
	height:100%;
}
#visual_v2 .item a img{
	width:100%;
}
#visual_v2 .slick-dots li,
#photo-gall_v2 .slick-dots li{
	top:12px;
	margin:0 3px;
}
#visual_v2 .v2-play-btn,
#visual_v2 .v2-pause-btn,
#photo-gall_v2 .gall-v2-play-btn,
#photo-gall_v2 .gall-v2-pause-btn{
	background-color:transparent;
	border:none;
	position: relative;
    top: 6px;
}

#visual_v2 .slick-dots li a.dot,
#photo-gall_v2 .slick-dots li a.dot{
	font-size: 0;
    line-height: 0;
    display: block;
    width: 15px;
    height: 15px;
    padding: 5px;
    cursor: pointer;
    color: #fff;
    border: 0;
    background: #fff;
    opacity: 0.25;
    border-radius: 100%;
}
#visual_v2 .slick-dots li.slick-active a.dot,
#photo-gall_v2 .slick-dots li.slick-active a.dot{
	opacity: 1;
}

#visual_v2 .slick-dots li button:before,
#photo-gall_v2 .slick-dots li button:before{
	font-size:1rem;
}



#visual_v2 .slick-dots li button:before,
#visual_v2 .slick-dots li.slick-active button:before,
#photo-gall_v2 .slick-dots li button:before,
#photo-gall_v2 .slick-dots li.slick-active button:before{
	color:#fff;
}
#visual_v2 .item{
	display:flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 10px;	
}
#visual_v2 .item a {
	width:100%;
	box-shadow: 4px 3px 5px 0 rgba(59, 60, 69,0.3);
	border:3px solid #d9dfe3;
	border-radius:10px;
	margin:0 1rem 0 0;
	overflow:hidden;
	display:flex;
	justify-content: center;
	align-items: center;
	background-color:#f7f7f6;
}


#visual_v2 .slick-dots li button:focus{
	    outline: 5px auto -webkit-focus-ring-color;
}

#photo-gall_v2 .item a:focus{
	    outline-offset: -2px;
}
#photo-gall_v2 .item a img{
	width:256px;
	height:182px;
}

.blind{visibility:hidden;position:absolute;line-height:0}

@media all and (max-width:1100px){
	#visual_v2 .item a {
		margin: 0 1rem;
	}
	#photo-gall_v2 .item{
		display:flex;
		justify-content: center;
	}
	#photo-gall_v2 .item a img {
		height: 182px;
	}
}