/* *******************************************************
■ 비쥬얼
******************************************************* */
#visual{position:relative; padding-bottom:4.75rem;}
#visual .tit{position:relative; z-index: 1;}
#visual .tit h2{padding:3.75rem 0; text-align:center; color:#191919; font-size:2.4rem; font-weight:700; line-height:1.3; }
#visual .tit h2 span{font-size:2rem; font-weight:300;display:block;  }
#visual .tit h4{position:absolute; left:50%; bottom:-1.625rem; transform:translateX(-50%); width:15rem; height:3.25rem; line-height:3.25rem; background:#181c3b; color:#fff; font-size:1.25rem; font-weight:500; text-align:center; border-radius:1.7rem; }
#visual .tit h4:before{content:''; display:block; position:absolute; left:50%; bottom:-1.3rem;  width:3.5rem; height:3.5rem; border-radius:50%; background:#181c3b;  transform:translateX(-50%); z-index:-1;}
#visual .tit h4 span{display:block;width:22px;height:13px; background:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/icon_down.svg')no-repeat ;position:absolute;left:50%;transform:translateX(-50%);  animation: bulb 0.8s ease-in-out infinite alternate;z-index:1;}

@keyframes bulb{
	0%{bottom:-0.8rem;left:50%;transform:translateX(-50%);}
	100%{bottom:-0.2rem;left:50%;transform:translateX(-50%);}
}

#visual .visual_bg{display: flex;  justify-content: center;  align-items: center; position:relative; height:23.5rem; overflow: hidden; }
#visual .visual_bg .bg_wrap{clip: rect(0, auto, auto, 0); position: absolute;  top: 0; left: 0;  width: 100%;  height: 100%;}
#visual .visual_bg .bg_wrap .bg{position: fixed;display: block; top: 0; left: 0;  width: 100%;  height: 100%;  background-image: url('https://dgsmidc.negagea.kr/dbuild/images/default/main/visual_bg.jpg'); background-size: cover;  background-position: center center;}
#visual .visual_bg ul{text-align:center; z-index:1}
#visual .visual_bg ul li{display:inline-block; }
#visual .visual_bg ul li span{font-size:0.7rem;color:#e92121;bottom:2.5rem;margin-top: -1rem;transform:translateY(12%);}
#visual .visual_bg ul li a{display: flex;  justify-content: center;  align-items: center; flex-direction: column; position:relative; height:8.25rem; width:8.25rem; background:#fff; border-radius:1rem; box-shadow:0 0 15px rgba(36,96,185,0.45); 
color:#181c3b; font-size:1.1rem; font-weight:500; transition: all 0.3s; -webkit-transition: all 0.3s;  margin:0 1.5rem;}
#visual .visual_bg ul li a [class*="menu0"]{display:block; width:4rem; height:4rem; background-size:100% auto; background-repeat:no-repeat;  background-position:0 0; transition: all 0.3s; -webkit-transition: all 0.3s;}
#visual .visual_bg ul li:hover span{color:#fff;}

#visual .visual_bg ul li a .menu01{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/menu01.svg');}
#visual .visual_bg ul li a .menu02{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/menu02.svg');}
#visual .visual_bg ul li a .menu03{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/menu03.svg');}
#visual .visual_bg ul li a .menu04{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/menu04.svg');}
#visual .visual_bg ul li a .menu05{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/menu05.svg');}
#visual .visual_bg ul li a .arrow{position:absolute; right:.5rem; top:.5rem; width:2.25rem; height:2.25rem; border:1px solid #fff; border-radius:50%; background:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/icon_arrow.svg')no-repeat 50% 50%; background-size:.85rem .5rem;}
#visual .visual_bg ul li:hover{}
#visual .visual_bg ul li:hover a{width:9.5rem; height:9.5rem; color:#fff; background: linear-gradient(#18b5f0, #2f76e0); margin:0;  box-shadow:0 0 15px rgba(36,96,185,0.75); transform: translateY(-1.75rem);}
#visual .visual_bg ul li:hover a [class*="menu0"]{background-position:0 -4rem;}

#visual .visual_bottom{position:absolute; left:0px; bottom:0px; width:100%; height:6.75rem; overflow:hidden;}
#visual .visual_bottom > div{float:left; width:50%; color:#fff; height:100%; display: flex; align-items: center; justify-content: center;}
#visual .visual_bottom > div > *{margin:0 .5rem;}
#visual .visual_bottom > div span{display:inline-block; width:3.25rem; height:3.25rem; background-color:#fff; border-radius:50%; background-repeat:no-repeat; background-position:50% 50%; background-size:100%; vertical-align: middle; margin-right:.5rem;}
#visual .visual_bottom > div h4{font-size:1rem; font-weight:400;}
#visual .visual_bottom > div h4 em{font-size:1.15rem; font-weight:600; margin-right:1rem;}
#visual .visual_bottom > div h4 b{font-size:1.9rem; font-weight:700;}
#visual .visual_bottom > div ul li{font-size:.75rem; line-height: 1.3;}
#visual .visual_bottom .vbot01{background:#2F76E0; border-top-right-radius:1.75rem;}
#visual .visual_bottom .vbot01 span{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/vis_icon01.svg');}
#visual .visual_bottom .vbot02{position:relative;background:#18B5F0; border-top-left-radius:1.75rem;}
#visual .visual_bottom .vbot02 span{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/vis_icon02.svg');}
#visual .visual_bottom .vbot02 .top-txt{position:absolute; bottom:1.3rem; font-size:0.8rem; left:42%;transform:translateX(-42%);}

@media (max-width:1300px){	
	#visual .visual_bg ul li a{margin:0 1rem;}
	#visual .visual_bottom{height:auto; }
	#visual .visual_bottom > div{flex-direction: column; align-items: normal; padding:1rem 2rem;}
	#visual .visual_bottom > div ul{margin-left:4.25rem;}
	#visual .visual_bottom .vbot01{height:8.75rem;}
	#visual .visual_bottom .vbot02 .top-txt{position:relative; transform:inherit;}
}
@media (max-width:1030px){	
	#visual .visual_bottom > div{padding:1rem;}
	#visual .visual_bottom > div h4 em{margin-right:.5rem;}
	#visual .visual_bottom .vbot02 .top-txt{left:41%;transform:inherit;}

	#visual .visual_bg ul li a{margin:.5rem; width:7rem; height:7rem;}
	#visual .visual_bg ul li:hover a{width:7rem; height:7rem; margin:.5rem; transform: translateY(0rem);}
	#visual .visual_bg ul li a .arrow{ width:1.8rem; height:1.8rem;}
	#visual .visual_bg ul li span{position:absolute;bottom:2.1rem;}
}
@media (max-width:767px){
	
	#visual{padding-bottom:0;}
	#visual .tit h2{font-size:1.6rem; padding:2rem 0 3rem;}
	#visual .tit h2 span{font-size:1.4rem;}
	#visual .visual_bg{height:auto; padding:5rem 0 6rem;}
	#visual .visual_bg video { width: 220%; }
	#visual .visual_bottom{position: relative; left:auto; bottom:auto; margin-top:-3rem;}
	#visual .visual_bottom > div{width:100%; height:auto;}
	#visual .visual_bottom .vbot02{border-top-left-radius:0;}
	#visual .visual_bottom > div span{margin-right:1.5rem;}
	#visual .visual_bottom > div ul{margin-left:5.25rem;}
	#visual .visual_bottom > div ul li{display:inline-block; margin-left:.25rem; }
	#visual .visual_bottom .vbot02 .top-txt{left:17%; bottom:0;}
	
	#visual .visual_bg ul{display:flex;     flex-wrap: wrap; align-items: center;  justify-content: center;}
	#visual .visual_bg ul li{ width:33.3%;}
	#visual .visual_bg ul li a{width:auto; height:auto; padding:.5rem 0;}
	#visual .visual_bg ul li:hover a{width:auto; height:auto;}
	#visual .visual_bg ul li a .arrow{ width:1.5rem; height:1.5rem; }
	
}
/* *******************************************************
■ 컨텐츠 공통
******************************************************* */
#container .inn{padding:0 3rem;}
#container .con{width:1550px; margin:0 auto;}
#container .title{text-align:center;}
#container .title span{display:block; color:#2f76e0; font-weight:600;  }
#container .title h4{font-size:2.15rem; font-weight:400; color:#191919; line-height: 1.3;}

.tred{color:#ed2222;}
.tblue{color:#2f76e0;}

.btns{}
.btns .btn{position:relative; display:inline-block;   height:2.5rem; line-height:2.5rem; border-radius:.25rem; text-align:center; font-size:.75rem; letter-spacing: -0.03em;  padding:0 0.5rem; border:1px solid #666; color:#666; background:#fff; transition: all 0.3s; -webkit-transition: all 0.3s;}
.btns .btn:after{content:''; position:absolute; right:0.5rem; top:50%; margin-top:-0.75rem; width:1.5rem; height:1.5rem; background-color:#A0A0A0; border-radius:50%; background-repeat:no-repeat; background-position:50% 50%;  background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/icon_arrow.svg'); background-size:.85rem .5rem; opacity:0; transition: all 0.3s; -webkit-transition: all 0.3s;}
.btns .btn.blue{border-color:#2F76E0; color:#2F76E0; }
.btns .btn.blue:after{background-color:#2F76E0;}
.btns .btn:hover{text-align:left; padding-right:2rem;}
.btns .btn:hover:after{opacity:1; }

@media (max-width:1550px){	
	#container .inn{padding:0 1rem}
	#container .con{width:100%; margin:0 auto; padding:0 1rem}
	.btns .btn{ padding:0 0.75rem;}
}
@media (max-width:767px){	
	.btns .btn{font-size:.8rem;}
}

/* *******************************************************
■ 프로그램 안내
******************************************************* */
#section1{margin:4rem 0 2rem;}

.slide {padding:2rem 1rem;}
.slide .box{display: flex; flex-direction: column; justify-content: space-between;  border-radius:1rem; background:#fff; padding:1rem; box-shadow:0 0 20px rgba(0,0,0,0.1); height: 100%;}
.slide .box .thumb{position:relative; overflow:hidden; height:10rem; border-radius:0.75rem; margin-bottom:1.3rem;     flex-shrink: 0;}
.slide .box .thumb span{display:block; position: absolute; height: 100%; width: 100%; margin: auto; top: 0; bottom: 0; left: 0; right: 0; transition: all 0.2s ease-out 0s;}
.slide .box .info{position:relative; padding:0 .5rem;  font-size: .85rem; }
.slide .box .info .tit{position:absolute; right:-3px; top:-4.75rem; display: flex;  justify-content: center;  align-items: center; width:4.5rem; height:4.5rem; border-radius:50%; background:#0692E3; color:#fff; border:3px solid #fff;  font-size:0.95rem; font-weight:500;text-align: center; line-height:1.2; }
.slide .box .info .tit.blue01{background:#2F76E0;}
.slide .box .info .tit.blue02{background:#294AB7;}
.slide .box .info .tit.blue03{background:#354A68;}
.slide .box .info .tit.blue04{background:#647388;}
.slide .box .info p{color:#333; margin-bottom:.5rem; line-height: 1; min-height:.9rem;}
.slide .box .info p b{color:#191919; font-weight:500; margin-right:.75rem;}
.slide .box .info ul li{position:relative; font-size:.8rem; padding-left:.5rem;}
.slide .box .info ul li:before{content:''; display:block; position:absolute; left:0px; top:.4rem; width:.2rem; height:.2rem; border-radius:50%; background:#191919;}
.slide .box .btns_wrap{display:flex; justify-content: space-between; margin-top:1.2rem;}
.slide .box .btns_wrap .btn{width:49%; flex-shrink: 0;}
.slide .box:hover .thumb span{transform: scale(1.1);}
.slide .swiper-pagination{display:none; bottom: 0;}

@media (max-width:1650px){	
	#section1.inn{padding:0 0;}
	.slide .box .info{}
}

@media (max-width:1550px){	
	.slide .swiper-pagination{display:block;}
}
@media (max-width:1030px){	
	.slide .box .thumb{height:13rem;}
}
@media (max-width:767px){	
	#section1{margin:3.5rem 0 3rem;}
	.slide .box .thumb{height:15rem;}
}

/* *******************************************************
■ 이용시설 안내
******************************************************* */
#container{padding-top:4.5rem;}
.fac_wrap{position:relative;  display:flex; justify-content: space-between; flex-wrap: wrap; padding:0 9rem 4.25rem;  margin-top:1.5rem;}
.fac_wrap:before{content:'';position:absolute; left:0px; bottom:0px; display:block; width:100%; height:82%; border-radius:1.5rem; background:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/fac_bg.jpg')no-repeat 50% top; background-size:cover; z-index:-1;}
.fac_wrap .fac_left{order:1; width:23%; flex:0 0 23%;}
.fac_wrap .fac_right{order:3; width:23%; flex:0 0 23%;}
.fac_wrap .fac_center{order:2; width:54%; flex:0 0 54%; padding:0 4rem;}
.fac_wrap .row .img{position:relative; border-radius:1rem; overflow:hidden; box-shadow:0 0 20px rgba(0,0,0,0.1); margin-bottom:1rem; padding-top:68%;}
.fac_wrap .row .img img{display:block; position: absolute; height: 100%; width: 100%; margin: auto; top: 0; bottom: 0; left: 0; right: 0; transition: all 0.2s ease-out 0s;}
.fac_wrap .row p{text-align:center; color:#333; font-weight:500; font-size:1rem;  margin-bottom:1.75rem;}
.fac_wrap .row h6{text-align:center; color:#333; margin-bottom:1.75rem;}
.fac_btn{order:4; width:100%; flex:0 0 100%; text-align:center;}
.fac_btn .btn{width:8.5rem;}

@media (max-width:1550px){	
	.fac_wrap{padding:0 4rem 3.25rem;  }
}
@media (max-width:1300px){	
	.fac_wrap{padding:0 2rem 2.25rem;  }
	.fac_wrap .fac_center{padding:0 2rem;}
}
@media (max-width:767px){
	.fac_wrap{padding:0 1rem 1.5rem;  }
	.fac_wrap .fac_left{order:2; width:100%; flex:0 0 100%; display:flex; justify-content: space-between;}
	.fac_wrap .fac_right{order:3; width:100%; flex:0 0 100%; display:flex; justify-content: space-between;}
	.fac_wrap .fac_center{order:1; width:100%; flex:0 0 100%;}
	.fac_wrap .fac_right .row,
	.fac_wrap .fac_left .row{width:48%; }
	.fac_wrap .row p{margin-bottom:1rem;}
	.fac_btn .btn{width:60%;}
}
/* *******************************************************
■ 공지사항
******************************************************* */
#section3{padding:4.5rem 0; background:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/notice_bg.jpg')no-repeat right bottom; }
#section3 .con{display: flex; justify-content: space-between;flex-wrap: wrap;}
#section3 .title{position:relative; text-align:left; margin-bottom:1rem;}
#section3 .title .moreBtn{position:absolute; right:0px; bottom:0px; color:#333; }
#section3 .title .moreBtn i.arrow{display:inline-block; width:2.25rem; height:2.25rem; border-radius:50%; background:#2F76E0 url('https://dgsmidc.negagea.kr/dbuild/images/default/main/icon_arrow.svg')no-repeat ; background-position:50% 50%; background-size:.85rem .5rem; margin-left:1.1rem;     vertical-align: middle; transition: all 0.2s ease-out 0s;}
#section3 .title .moreBtn:hover i.arrow{background-position:70% 50%;}

.notice_wrap{width:50%; flex:0 0 50%}
.notice_wrap dl{display:flex;align-items: center; border-radius:.7rem; padding:1rem 0; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1); }
.notice_wrap dl:not(:first-child){margin-top:0.5rem;}
.notice_wrap dl dt{flex:0 0 5.5rem; width:5.5rem; text-align:center; color:#555; font-size:.8rem;}
.notice_wrap dl dt b{display:block; font-size:1.65rem; font-weight:700; color:#2F76E0; line-height:1;}
.notice_wrap dl dd{flex:0 0 calc(100% - 5.5rem); width:calc(100% - 5.5rem); padding:0 1.75rem;  border-left:1px solid #CACACA;}
.notice_wrap dl dd .subject{font-size:1rem; font-weight:500; color:#191919; margin-bottom:.5rem; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;	-webkit-line-clamp: 2; -webkit-box-orient: vertical;word-wrap:break-word; line-height: 1.3em;height: 1.3em;}
.notice_wrap dl dd .cont{font-size:.8rem;  color:#555; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;	-webkit-line-clamp: 2; -webkit-box-orient: vertical;word-wrap:break-word; line-height: 1.2em;height: 2.4em;}
.notice_wrap dl:hover{box-shadow:inset 0 0 0 1px #2f76e0,0 0 10px rgba(0,0,0,0.1) ;}
.notice_wrap dl:hover .subject{color:#2f76e0;}

.banner_wrap{display: flex; justify-content: space-between;flex-wrap: wrap; align-content: space-between; width:50%; flex:0 0 50%; padding-left:3.5rem;}
.banner_wrap > div{position:relative; height:100%; width:48%; flex:0 0 48%; border-radius:1rem;  box-shadow:0 0 10px rgba(0,0,0,0.1); background-position:50% 0%; background-repeat:no-repeat; overflow:hidden;}
.banner_wrap > div a{position:relative; display:block; width:100%; height:100%; padding:3rem 1.5rem;}
.banner_wrap > div h4{ font-size:1.5rem; line-height:1.3; font-weight:400; color:#fff; text-shadow:0 0  10px rgba(0,0,0,0.1); }
.banner_wrap > div h4 b{display:block;}
.banner_wrap > div .arrow{position:absolute; right:1.5rem; top:3rem; width:2.25rem; height:2.25rem; font-size:0;  border:1px solid #fff; border-radius:50%; background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/icon_arrow.svg') ; background-repeat:no-repeat; background-position:50% 50%; background-size:.85rem .5rem; transition: all 0.2s ease-out 0s;}
.banner_wrap > div:hover .arrow{background-color:rgba(255,255,255,0.1); background-position:70% 50%;}
.banner_wrap > .banner1{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/banner01.jpg') ; background-size:cover;}
.banner_wrap > .banner2{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/banner02.jpg') ; background-size:cover;}

@media (max-width:1550px){	
	.banner_wrap{padding-left: 2rem;}
}
@media (max-width:1300px){	
	.banner_wrap > div{height:48%; width:100%; flex:0 0 100%; background-position:50% 80%;}
	.banner_wrap > div:before{content:''; display:block; position:absolute; left:0px; top:0px; width:100%; height:70%; }
	.banner_wrap > .banner1:before{ background: linear-gradient(rgba(40,185,221,1),rgba(40,185,221,.8), rgba(40,185,221,0));}
	.banner_wrap > .banner2:before{ background: linear-gradient(rgba(27,155,240,1),rgba(27,155,240,.8), rgba(27,155,240,0));}
}
@media (max-width:1030px){	
	.notice_wrap{width:60%; flex:0 0 60%}
	.banner_wrap{width:40%; flex:0 0 40%}
}

@media (max-width:767px){	
	#section3{padding:3.5rem 0;}
	.notice_wrap{width:100%; flex:0 0 100%}
	.banner_wrap{width:100%; flex:0 0 100%; padding-left:0; margin-top:2rem;}
	.banner_wrap > div{height:100%; width:48%; flex:0 0 48%; background-position:50% 80%;}
}
/* *******************************************************
■ 퀵메뉴
******************************************************* */
#section4{background:#EFF2FC; padding:2.75rem 0;}
#section4 ul{display:flex; justify-content: space-between;}
#section4 ul a{display:block;  text-align:center; font-size:1rem; font-weight:500; color:#191919;}
#section4 ul span{display: flex; flex-direction: column; align-items: center; justify-content: center; width:6rem; height:6rem; border-radius:.75rem; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1); margin:0 auto .75rem;}
#section4 ul span img{-webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s;}
#section4 ul li:hover a{color: #2f76e0;}
#section4 ul li:hover span img{transform: rotateY(360deg); } 

@media (max-width:1030px){	
	#section4 ul{flex-wrap: wrap; justify-content: center}
	#section4 ul li{flex:0 0 33.3%;}
	#section4 ul li:nth-child(n+4){margin-top:.5rem;}
}