/*reset css*/
*{padding: 0; margin: 0;}
ol,ul,li{list-style: none; margin: 0;}
.clear:after{content: ''; display: block; clear: both;}
img{vertical-align: top;}
p{margin: 0;}
a:hover{text-decoration: none;}
.cont_menu h3, .cont_menu h4, .cont_menu h5, .cont_menu h6{margin: 0;}
.navy{color: #0d5fd0;}
.skyblue{color: #2293e3;}
.gray{color: #707070;}
.pointcolor{color: #2881cd;}
body {	font-family: 'Noto Sans KR', sans-serif;}


/*header*/
.header h1{position: absolute; left: 0; top: 5px; z-index: 12; width: 140px; height: 50px;}
.header .header_top{width: 100%!important; height: 100px; background-color: rgba(255,255,255,0.6);}
.header .text-right{z-index: 11;}
.header .container{top: 30px;}
.container .menu{float: right; width: 850px; height: 50px; margin-right: 180px;}
.container .menu > ul{width: 100%; height: 100%; }
.container .menu > ul > li{height: 100%; line-height: 50px; padding: 0;
text-align: center; z-index: 11;}
.container .menu > ul > li > a{position: relative; display: block; height: 100%;}
.container .menu > ul > li > a:after{ content:""; display:block; width:0; height:2px; background-color:#2881cd; position:absolute; bottom:-1px; transition:all 0.5s; left:50%; transition:all 0.5s;}
.container .menu > ul > li:hover>a:after{margin-left:-50%; width:100%;}
.container .menu > ul > li:hover>a{color:#209f4d; font-weight: 700; width: 99%;}
.container .menu > ul a{color: #000; font-weight: 400; font-size: 17px;}
.container .menu > ul li .sub-menu{top: 58px; left: 0; width: 99%; height: 190px; z-index: 11; background-color: rgba(0,0,0,0)!important;}
/*.container .menu > ul li:nth-child(1) .sub-menu{border-left: 1px solid #bbb;}*/
.container .menu > ul li .sub-menu li{width: 100%; height: 35px; line-height: 22px; text-align: center; min-width: 0;}
.container .menu ul li ul li a{display: block; height: 100%; font-size: 17px; font-weight: 400; color:#fff;}
.container .menu ul li:hover > .sub-menu{background-color: #e4e4e4; }
.container .menu ul li .sub-menu li:hover a{color: #000000; font-weight: bold;}

.whitebar{width: 100%; height: 220px; background-color: rgba(54,54,54,0.9); position: absolute; top: 0; z-index:10;}


/*container*/
/*guide*/
.guide{position: relative; background-color: #e8e8e8; height: 400px; padding: 30px 0 0;}
.guide-center{width: 1200px; margin: 0 auto;}
.guide-center > div{float: left; width: 50%;}

.guide-left ul li{float: left; width: 44%; height: 190px; margin: 20px 3%; box-shadow: 3px 7px 8px rgb(0, 0, 0, 0.1); border: 5px solid #fff; }
.guide-left ul li img{width: 100%; height: 100%}

.guide-right{text-align: right; padding: 50px 0 0;}
.guide-right h5{font-size: 35px;}
.guide-right h4{font-size: 45px; font-weight: 900; margin: 0 0 20px;}
.guide-right p{font-size: 18px; line-height: 35px;}

/*block*/
.block{height: 350px; margin: 125px auto 90px;}
.block-center{width: 1200px; height: 100%; margin: 0 auto;}
.block-center > div{float: left; width: 50%; height: 100%;}
.block-left > div{width: 44%; margin: 0 3%; float: left; height: 100%;}
.block-left .img{border: 5px solid #fff; box-shadow: 3px 7px 8px rgb(0, 0, 0, 0.1);}
.block-left > div img{width: 100%; height: 100%;}
.block-left > .desc h5{font-size: 22px; padding-top: 25px;}
.block-left > .desc h4{font-size: 40px; font-weight: 700; }
.block-left > .desc h4:after{content:''; display: block; width: 90%; height: 1px; background-color: #ddd; margin: 25px 0;}
.block-left > .desc p{font-size: 19px; line-height: 30px; color: #777;}

.block-right{position: relative;}
.block-right .img{position: absolute; width: 350px; height: 250px; border: 5px solid #fff; box-shadow: 3px 7px 8px rgb(0, 0, 0, 0.1);}
.block-right .img img{width: 100%; height: 100%}
.block-right .desc{position: absolute; font-size: 22px; color: #71899d;}
.block-right-top .img{right: 0; top: 0; z-index: 10;}
.block-right-top .desc{left: 0; top: 0;}
.block-right-bot .img{left: 0; bottom: 0;}
.block-right-bot .desc{right: 0; bottom: 0; text-align: right;}

/*introduction*/
.introduction{text-align: center;}
.introduction h4{font-size: 30px; margin-top: 70px;}
.introduction > p{font-size: 19px; margin-bottom: 40px; color: #666;}

/*intro-top*/
.intro-top{width: 1200px; margin: 0 auto;}
.intro-top ul li{width: 23%; height: 250px; margin: 0 1%; float: left; background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; text-align: left; padding: 0 0 0 30px;}
.intro-top ul li:nth-child(1){background-image: url(/_upload/vavav.kr/nusudj.vavav.kr/intro-top-img01.jpg);}
.intro-top ul li:nth-child(2){background-image: url(/_upload/vavav.kr/nusudj.vavav.kr/intro-top-img02.jpg);}
.intro-top ul li:nth-child(3){background-image: url(/_upload/vavav.kr/nusudj.vavav.kr/intro-top-img03.jpg);}
.intro-top ul li:nth-child(4){background-image: url(/_upload/vavav.kr/nusudj.vavav.kr/intro-top-img04.jpg);}
.intro-top ul li a{display: block; width: 100%; height: 100%; position: absolute;}

.caption{position:relative; top:125px; transition:top 0.5s ease-out; color: #fff;}
.caption h5{font-size: 27px; font-weight: 600; margin: 0 0 20px; line-height: 37px;}
.caption p{font-size: 16px; font-weight: 300; line-height: 25px;}

.caption2{display:block; transition:opacity 0.2s ease-out; color: #fff;}
.caption2{position:relative; top:40px; transition:top 0.2s ease-out;}
.caption2 h5{font-size: 25px; font-weight: 400;}
.caption2 p{font-size: 16px; font-weight: 300; line-height: 25px;}

.caption-btn{width: 120px; height: 40px; line-height: 38px; text-align: center; margin: 20px 0; border-radius: 20px; border: 1px solid #fff; transition: all .2s ease-out; font-size: 14px;}
.caption-btn:hover{background-color: rgba(255,255,255,0.9); color: #333; font-weight: 600;}


.intro-top ul li:before{content:''; position:absolute; top:0px; width: 0; z-index:0; background-color:#2881cd; opacity:0; transition:all 0.5s ease-out;}
.intro-top ul li:hover:before{content:''; top:0; right:0; bottom:0; left:0; width: 100%; opacity:0.8; transition:all 0.5s ease-out;}

.intro-top ul li:hover .caption {opacity:0; transition:opacity 0.2s ease-out;}
.intro-top ul li:hover .caption {top:150px; transition:top 0.5s ease-out;}
.intro-top ul li:hover .caption2 {opacity:1; transition:opacity 0.2s ease-in;}
.intro-top ul li:hover .caption2 {top:30px;transition:top 0.5s ease-out}


/*information*/
.information{background-image:url(/_upload/vavav.kr/nusudj.vavav.kr/information-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; height: 400px; text-align: center; color: #fff; padding-top: 115px; margin-top: 85px;}
.information h4{font-size: 33px; font-weight: 700; margin-bottom: 30px;}
.information p{font-size: 20px; line-height: 38px;}


/*gallery*/
.photo{padding: 40px 0; width: 1200px; margin: 0 auto; text-align: center;}
.photo h4{text-align: center; font-size: 30px; color: #000; margin: 70px 0 10px;}
.photo > p{font-size: 19px; margin-bottom: 40px; color: #666;}

#gallery { height:auto;overflow:hidden; padding: 0}
#gallery ul {  float:left;position:relative;width:100%; height:100%; padding-left:0px;padding-right:0px; }
#gallery ul,#gallery li { list-style-type:none; }
#gallery li { float:left;position:relative;width:23%;display:inline-block; margin:10px 1%; }
#gallery li a img{width:100%; height:100%;}
#gallery li a > span{display: block; margin: 10px auto; text-align: center; color: #777; font-weight: 300; font-size: 15px;}


/*gallery-desc*/
.gallery-desc{text-align: center; margin: 0 0 70px;}
.gallery-desc p{font-size: 20px; margin: 40px auto;}
.gallery-desc-btn{display: block; width: 160px; margin: 0 auto; height: 50px; line-height: 50px; background-color: #a1834f; color: #fff; font-size: 20px; transition: all .2s ease-in;}
.gallery-desc-btn:after{content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; opacity: 0; transition: 0.2s ease-in;}
.gallery-desc-btn:hover{text-decoration: none; background-color: #fff; border: 1px solid #000; color: #000; width: 180px; transition: all .2s ease-in;}
.gallery-desc-btn:hover:after{opacity: 1; padding-left: 30px; transition: 0.2s ease-in;}


/*loadmap*/
.loadmap{background-color: #efede6; height: 450px;}
.loadmap-center{width: 1200px; margin: 0 auto;}
.loadmap-map{width: 60%; float: left; margin:70px 0;}
.loadmap-desc{width: 40%; float: left; padding: 70px 50px;}
.loadmap-desc h4:after{content: ''; clear: both; display: block; width: 50px; height: 3px; background-color: #058b5e; margin: 20px 0;}
.loadmap-desc h4{font-size: 22px;}
.loadmap-desc p{font-size: 17px; line-height: 35px;}
.loadmap-desc .navy{padding-right: 15px;}


/*footer*/
.footer .container{width: 1200px!important;}

/*sub*/
.mains {margin-top: 0;}
.mains .container{width:100%!important;}

#page-wrapper{width: 1200px; margin: 30px auto;}

@media(min-width:768px) {
    #page-wrapper { margin: 30px auto; border-left:none;}
    
/*sidebar*/
 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: auto;
 margin-top: 0px;
 left: 50%;
margin-bottom: 50px;
}

.nav-tabs.nav-justified{width: 50%; margin: 0 auto; font-size: 12px; font-weight: bold;}
.nav-tabs{height: 50px;}
.nav > li{height: 50px; background-color: #363636;}
.nav > li > a{padding: 0;}
.nav-tabs > li > a {border-radius: 0; height: 52px; line-height: 48px; color: #fff; font-size: 16px; font-weight: 300;}
.nav-tabs.nav-justified > li > a{border-radius: 0; border-bottom: 0;}
.nav-tabs.nav-justified > li{ border-left: 1px solid rgba(255,255,255,0.3); height: 50px;}
.nav-tabs.nav-justified > li:last-child{border-right: 1px solid rgba(255,255,255,0.3);}
.nav-tabs > li > a:hover{color: #000;}
.sidebar_bg{width: 100%; height: 52px; background-color:#363636; border-top: rgba(0,0,0,1); border-bottom: rgba(0,0,0,1);}

    
/*page-header*/
.page-header {
    padding-bottom: 9px;
    margin: 0 0 20px;
    color: #000;
    border-bottom: 1px solid #9d9d9d; }

/*pagination*/
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #9c9c9c;
    border-color: #9c9c9c; }

.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #666;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd; }