@charset "utf-8"; 
/*=================================================================================================
// 명    칭 :메인화면 스타일쉬트 - 1680px 이상
// 처리내용 :
// 작 성 자 :2018-05-28 김진후
//=================================================================================================*/

#diHeader{position:fixed;  background:#fff;}
#diContainer{position:relative; width:100%; margin:0 auto; background-color:#fff;}

.basicWrapCenter{width:90%; margin:0 auto;}

.fp-watermark{display:none;}
#fp-nav.fp-right{
    right:1%; 
}
#fp-nav ul li,
.fp-slidesNav ul li{
    width:10px; 
    height:10px; 
    margin:0 0 17px 0; 
		border-radius:0; 
}
#fp-nav ul li:last-child,
.fp-slidesNav ul li:last-child{
    margin:0 ; 
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
    height:10px; 
    width:10px; 
    margin:0; 
    border-radius:0; 
	  background:#008a3e; 
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span{
		top:0; 
		left:0; 
    border-radius:0; 
    height:10px; 
    width:10px; 
    background:#ddd; 
		margin:0; 
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
    margin:0; 
}

#section0{width:90%; margin:0 auto; padding:100px 0 0 0;}
#section0 #diMainVisualWrap{position:relative; width:100%; height:calc(100vh - 100px); margin:0 auto; overflow:hidden; background:url(../img/main/sec01_mainVisual01.jpg) 50% 100% no-repeat #000; background-size:cover;}
#section0 #diMainVisualWrap .mainTxt{position:absolute; top:29%; left:48%;}
#section0 #diMainVisualWrap .mainTxt h3{font-family:'Montserrat', sans-serif; font-size:53px; line-height:53px; font-weight:700; color:#fff; letter-spacing:-1px; text-shadow:0 0 10px black; margin:0 0 20px 0;}
#section0 #diMainVisualWrap .mainTxt h6{font-size:30px; line-height:30px; font-weight:400; color:#fff; text-shadow:0 0 5px black;}

.scroll{position:absolute; bottom:0; left:50%; transform:translate(-50%, 0); display:flex; justify-content:center; align-items:center; flex-direction:column; 	z-index:1;}
.scroll p{color:#fff; margin-bottom:5px; text-shadow:0 0 5px black;}
.scroll .scroll-bg{width:1px; height:60px; background-color:rgba(0, 0, 0, .2); position:relative;}
.scroll .scroll-bg .scroll-bar{width:1px; height:30px; background-color:#333; position:absolute; top:0; left:0; z-index:10; animation:scroll infinite alternate linear; animation-duration:1s;}
@keyframes scroll{
	from{transform:translateY(0px);}
	to{transform:translateY(30px);}
}

h3.sech3{text-align:center; font-size:40px; font-weight:700; line-height:50px; color:#000; margin:0 0 40px 0;}
h5.sech5{text-align:center; font-size:20px; font-weight:300; line-height:30px; color:#000; white-space:pre-line; word-break: keep-all;}

#section1{width:90%; margin:0 auto; padding:100px 0 0 0;}
#section1 .inner{width:90%; margin:140px auto 0;}
#section1 .inner ul{overflow:hidden;}
#section1 .inner ul li{float:left; width:25%; position:relative; padding:80px 0; transition: all .5s;}
#section1 .inner ul li:after{content:''; display:block; position:absolute; top:50%; transform:translateY(-50%); right:0px; width:1px; height:70%; background-color:#ddd;}
#section1 .inner ul li:last-child:after{display:none;}
#section1 .inner ul li a{}
#section1 .inner ul li a p.icon{text-align:center; margin:0 0 40px 0;}
#section1 .inner ul li a p.icon img{}
#section1 .inner ul li a p.text{text-align:center; font-size:25px; font-weight:700; line-height:30px; color:#000;}
#section1 .inner ul li:hover a p.text{color:#008A3E;}

#section2{width:100%; margin:0 auto;}
#section2 .contWrap{display: flex; position:relative; z-index: 10; height: 100vh;}
#section2 .imageWrap{position:absolute; top:0; left:0; width: 100%; height: 100%; overflow: hidden;}
#section2 .imageWrap img { position:absolute; top:0; left:0; transition:all .5s; opacity: 0; z-index: 0; width:100%; height:100%;}
#section2 .imageWrap img.active { opacity: 1; z-index: 10;}
#section2 .articleWrap {position:relative; flex:1; height: 100%; border-right:1px solid rgba(255, 255, 255, 0.1);  z-index: 10;}
#section2 .articleWrap.active{background:rgba(0,0,0,0.3);}
#section2 .articleWrap.ani { margin-top: 50px; opacity: 0;}
#section2 .articleWrap.ani:nth-child(2) {transition-delay: .1s;}
#section2 .articleWrap.ani:nth-child(3) {transition-delay: .2s;}
#section2 .articleWrap.ani:nth-child(4) {transition-delay: .3s;}
#section2 .articleWrap.anid {margin-top: 0; opacity: 1;}
#section2 .articleWrap:last-child {border-right: none;}
#section2 .textWrap {position:absolute; left:0; bottom: 300px; width: 100%; text-align:center;}
#section2 .textWrap .text1{text-align:Center; font-size:40px; line-height:45px; font-weight:700; color:#fff;}
#section2 .textWrap .text2{font-family: 'Montserrat'; text-align:Center; font-size:25px; line-height:30px;color:#fff; white-space:pre-line;}
#section2 .textWrap .text3{text-align:Center; font-size:18px; line-height:25px; color:#fff; white-space:pre-line; }
#section2 .textWrap .text3{position:relative; opacity: 0; transition:all .5s; padding:100px 15% 0;}
#section2 .textWrap .text3:before{content:''; display:block; position:absolute; top:70px; left:50%; margin-left:-25px; width:50px; height:2px; background-color:#fff;}
#section2 .textWrap img{ opacity: 0; display: block; transition: all .5s; margin:50px auto 0;}
#section2 .textWrap .text1 {position:absolute; bottom:140px; left:0; transition:all .5s; width:100%;}
#section2 .textWrap .text2 {position:absolute; bottom:100px; left:0; transition:all .5s; width:100%;}
#section2 .articleWrap.active .textWrap .text1{bottom:240px;}
#section2 .articleWrap.active .textWrap .text2{bottom:200px;}
#section2 .articleWrap.active .textWrap .text3{opacity:1;}
#section2 .articleWrap.active .textWrap img{opacity: 1;}
#section2 .title {position:absolute; top:140px; left:55px;z-index: 20;}

#section3{width:90%; margin:0 auto; padding:100px 0 0 0;}
#section3 .inner{width:100%; margin:100px auto 0;}
#section3 .inner ul{margin:0 0 50px 0; overflow:hidden;}
#section3 .inner ul li{position:relative; float:left; width:calc(97%/4); margin:0 1% 0 0;}
#section3 .inner ul li:last-child{margin:0;}
#section3 .inner ul li a{}
#section3 .inner ul li a p.pThumb{position:relative; width:100%; height:350px; background-color:#000; text-align:center; overflow:hidden;}
#section3 .inner ul li a p.pThumb img{position:absolute; top:0; left:50%; transform:translate(-50%); height:100%;}
#section3 .inner ul li a .show_detail{width:100%; height:120px; background-color:#f1f1f1; display: flex; align-items: center; justify-content: center; transition: all .5s; padding: 0 5%;}
#section3 .inner ul li a .show_detail p.pSubject{text-align:center; font-size:22px; font-weight:700; line-height:27px; color:#000; word-break: keep-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
#section3 .inner ul li a .show_detail p.pDate{text-align:center; font-size:18px; font-weight:300; line-height:23px; color:#000;}
#section3 .inner ul li:hover a .show_detail{background-color:#008A3E;}
#section3 .inner ul li:hover a .show_detail p.pSubject{color:#fff;}
#section3 .inner ul li:hover a .show_detail p.pDate{color:#fff;}
#section3 .inner a.btnMore{width:200px; height:42px; border:solid 1px #008A3E; background-color:#008A3E; margin:0 auto; text-align:Center; transition: all .5s;}
#section3 .inner a.btnMore p{font-size:20px; font-weight:500; line-height:40px; color:#fff; background:url(../img/main/btn_more2_on.png) 90% 50% no-repeat; display: inline-block; padding: 0 14% 0 0;}
#section3 .inner a.btnMore:hover{background-color:#fff; border:solid 1px #008A3E;}
#section3 .inner a.btnMore:hover p{color:#008A3E; background:url(../img/main/btn_more2.png) 90% 50% no-repeat; }

#section4{position:relative; width: 100%; margin:0 auto; background-color:#000;}
#section4 #diFooter{width:90%; margin:0 auto;}

#diTopGOWrap{display:block; position:absolute; bottom:50%; transform:translateY(-50%); right:5%; z-index:999;}
#diTopGOWrap button.dcBtnTop{width:60px; height:60px; background:url(../img/common/btnTop.png) 50% 50% no-repeat #008A3E; text-indent:-99999px; border-radius:50%;}

/*태블릿 css*/
@media(max-width:1399px){

	.basicWrapCenter{width:100%;}

	#fp-nav{display:none;}

	h3.sech3{font-size:40px; line-height:50px; margin:0 0 20px 0;}
	h5.sech5{font-size:20px; line-height:25px;}

	#section0 #diMainVisualWrap .mainTxt{width:100%; top:35%; left:0;}
	#section0 #diMainVisualWrap .mainTxt h3{text-align:center; font-size:50px; line-height:55px; margin:0 0 20px 0;}
	#section0 #diMainVisualWrap .mainTxt h6{text-align:center; font-size:30px; line-height:35px;}

	#section1{padding:150px 0 0 0;}
	#section1 .inner{width:100%; margin:70px auto 0;}
	#section1 .inner ul li{width:50%; padding:20px 0;}
	#section1 .inner ul li:nth-child(2):after{display:none;}

	#section2{width:90%; padding:150px 0 0 0;}
	#section2 .clubDiv{}
	#section2 .clubDiv ul{overflow:hidden;}
	#section2 .clubDiv ul li{float:left; width:50%; height:400px; position:relative;}
	#section2 .clubDiv ul li:nth-child(1){background:url(../img/main/article2_img01.jpg) 50% 50% no-repeat; background-size:cover;}
	#section2 .clubDiv ul li:nth-child(2){background:url(../img/main/article2_img02.jpg) 50% 50% no-repeat; background-size:cover;}
	#section2 .clubDiv ul li:nth-child(3){background:url(../img/main/article2_img03.jpg) 50% 50% no-repeat; background-size:cover;}
	#section2 .clubDiv ul li:nth-child(4){background:url(../img/main/article2_img04.jpg) 50% 50% no-repeat; background-size:cover;}
	#section2 .clubDiv ul li a{}
	#section2 .clubDiv ul li a .textWrapM{position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); width:100%;}
	#section2 .clubDiv ul li a .textWrapM .text1{text-align:center; font-size:35px; line-height:40px; font-weight:700; color:#fff;}
	#section2 .clubDiv ul li a .textWrapM .text2{text-align:center; font-size:24px; line-height:29px; font-weight:300; color:#fff; font-family: 'Montserrat'; margin:0 0 20px 0; word-break: break-word;}
	#section2 .clubDiv ul li a .textWrapM .text3{text-align:center; font-size:20px; line-height:25px; font-weight:200; color:#fff; position:relative; padding:20px 10% 0; word-break: keep-all;}
	#section2 .clubDiv ul li a .textWrapM .text3:before{content:''; display:block; position:absolute; top:0; left:50%; margin-left:-25px; width:50px; height:2px; background-color:#fff;}

	#section3{padding:150px 0;}
	#section3 .inner{width:100%; margin:30px auto 0;}
	#section3 .inner ul li{width:calc(98%/2); margin:0 2% 20px 0;}
	#section3 .inner ul li:nth-child(2){margin:0 0 20px 0;}
	#section3 .inner ul li:nth-child(3){margin:0 2% 0 0;}
	#section3 .inner ul li:nth-child(4){margin:0 0 0 0;}
	#section3 .inner ul li a p.pThumb{height:300px;}
	#section3 .inner ul li a .show_detail{height:116px; padding:10px 2%;}
	#section3 .inner ul li a .show_detail p.pSubject{font-size:24px; line-height:29px; -webkit-line-clamp:3;}
	#section3 .inner ul li a .show_detail p.pDate{font-size:16px; line-height:21px;}
	#section3 .inner a.btnMore{height:40px;}
	#section3 .inner a.btnMore p{font-size:22px; line-height:38px;}

	#diTopGOWrap button.dcBtnTop{width:50px; height:50px;}

}



/*모바일 css*/
@media(max-width:767px){

	h3.sech3{font-size:22px; line-height:27px;}
	h5.sech5{font-size:14px; line-height:20px; white-space:unset;}

	#section0{padding:80px 0 0 0;}
	#section0 #diMainVisualWrap{height:calc(100vh - 119px); margin:0 0 39px 0;}
	#section0 #diMainVisualWrap .mainTxt{width:100%; top:35%; left:0;}
	#section0 #diMainVisualWrap .mainTxt h3{font-size:28px; line-height:33px; margin:0 0 10px 0;}
	#section0 #diMainVisualWrap .mainTxt h6{font-size:18px; line-height:23px;}

	#section1{padding:40px 0 0 0;}
	#section1 h5.sech5{margin:0 0 20px 0;}
	#section1 .inner{margin:0 auto;}
	#section1 .inner ul li{width:50%; padding:20px 0;}
	#section1 .inner ul li a p.icon{margin:0 0 20px 0;}
	#section1 .inner ul li a p.icon img{height:80px;}
	#section1 .inner ul li a p.text{font-size:16px; line-height:21px;}

	#section2{padding:80px 0 0 0;}
	#section2 .clubDiv{}
	#section2 .clubDiv ul li{float:left; width:50%; height:250px; position:relative;}
	#section2 .clubDiv ul li a .textWrapM .text1{font-size:20px; line-height:25px;}
	#section2 .clubDiv ul li a .textWrapM .text2{font-size:14px; line-height:14px; margin:0 0 20px 0;}
	#section2 .clubDiv ul li a .textWrapM .text3{font-size:12px; line-height:17px; padding:20px 5% 0;}
	#section2 .clubDiv ul li a .textWrapM .text3:before{margin-left:-25px; width:50px;}

	#section3{padding:80px 0;}
	#section3 .inner{padding:0 0 50px 0;}
	#section3 .inner ul li{width:calc(98%/2); margin:0 2% 20px 0;}
	#section3 .inner ul li:nth-child(2){margin:0 0 20px 0;}
	#section3 .inner ul li:nth-child(3){margin:0 2% 0 0;}
	#section3 .inner ul li:nth-child(4){margin:0 0 0 0;}
	#section3 .inner ul li a p.pThumb{height:200px;}
	#section3 .inner ul li a .show_detail{height:124px;}
	#section3 .inner ul li a .show_detail p.pSubject{font-size:16px; line-height:21px; -webkit-line-clamp:3;}
	#section3 .inner ul li a .show_detail p.pDate{font-size:14px; line-height:20px;}
	#section3 .inner a.btnMore{width:150px; height:32px;}
	#section3 .inner a.btnMore p{font-size:14px; line-height:30px;}

	#diTopGOWrap{display:none;}

}