@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */

/* common */

div[class^="area_"] > .inr{position:relative;z-index:9;width:1400px;margin:0 auto;padding-top: 5vh;}
div[class^="area_"] > .inr h2{font-weight:600; font-size:50px; color:#222; text-align:center;}

i[data-img]{display:block; position:absolute; top:0; left:0; width:40%; height:100%; background-size:cover !important;}
i[data-img="ob01"]{background:url(/images/main/bg_about.jpg) no-repeat 50% 50%;}
i[data-img="ob02"]{background:url(/images/main/bg_notice.jpg) no-repeat 50% 50%;}

/* visual */
.area_visual{position:relative;}
.area_visual .img .list li,
.area_visual .img .bx-viewport{height:-webkit-calc(100vh - -0px * 1); height:calc(100vh - -0px * 1);}
.area_visual .img .list li{background-size:cover;background-position: 50% -86px;background-repeat:no-repeat;}
.area_visual .bottom{position:absolute; bottom:0; left:0; z-index:92; width:100%; background:#fff;}
.area_visual .txt{position:absolute;top: 170px;left:0;z-index:90;width:100%;text-transform: uppercase;}
.area_visual .img .list li:not(:first-child) .txt{top: 194px;}
.area_visual .txt > div{width:1030px; margin:0 auto;}
.area_visual .txt *{color:#fff;}
.area_visual .txt p{font-weight:300;font-size: 16px;}
.area_visual .txt h2{line-height:1;margin-top: 9px;font-size: 54px;}
.area_visual li:not(:first-child) .txt h2{text-transform:initial;}
.area_visual .txt h2 em{font-size:107px;text-transform: uppercase;}
.area_visual .img .bx-controls{position:absolute; top:45%; left:0; z-index:92; width:100%;}
.area_visual .img .bx-controls > div{position:relative;width: auto;margin: 0 60px;}
.area_visual .img .bx-controls > div a{display:block;position:relative;position:absolute;opacity:0.6;top:0;right:0;width:62px;height:62px;border:2px solid #fff;text-indent:-9999px;transition:all 0.3s ease-out 0s;overflow: hidden;white-space: nowrap;}
.area_visual .img .bx-controls > div a.bx-prev{top:74px; transform:rotate(180deg); -webkit-transform:rotate(180deg);}
.area_visual .img .bx-controls > div a:after{content:""; display:block; position:absolute; top:50%; left:50%; width:9px; height:18px; background:url(/images/main/arr_visual.svg) no-repeat 50% 50%; background-size:cover; transform:translateY(-50%) translateX(-50%);}
.area_visual .img .bx-controls > div a:hover{opacity:1;}
.area_visual .bottom  > a{position:relative; float:right; width:-webkit-calc(100%/5 - 80px); width:calc(100%/5 - 80px); padding:21px 40px; background-size:cover; background-position:50% 50%; font-size:15px; color:#fff; background-repeat:no-repeat;}
.area_visual .bottom .btn_ab{position:absolute; right:0; bottom:0; width:50%; font-size:0; max-width:100px;}
.area_visual .bottom > em{margin:29px 0 0 60px; font-weight:900; font-size:16px; color:#222; display:inline-block;}
.area_visual .bottom > div{position:relative; float:right; overflow:hidden; width:1060px; padding:11px 220px 0 0;}
.area_visual .bottom .list img{display:block; margin:0 auto; -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale(100%);}
.area_visual .bottom .list li{opacity:0.4; border:1px solid #909090;}
.area_visual .bottom .list li[data-img="02"]{background:#fffdee;}
.area_visual .bottom > a img{display:block; height:6px;}
.area_visual .bottom > a > i{display:block; margin-top:15px;}
.area_visual .bottom > a > em{position:absolute; opacity:0.7; right:40px; bottom:18px; font-weight:400;}
.area_visual .bottom > em i{display:block; opacity:1; line-height:1; font-size:12px; color:#c7a381; text-transform:uppercase;}
.area_visual .bottom .bx-controls{position:absolute; top:56%; right:33px; transform:translateY(-50%);}
.area_visual .bottom .bx-controls a{position:relative; padding:0 28px; font-weight:500; font-size:14px; color:#d9d9d9; transition:all 0.3s ease-out 0s; text-transform:uppercase;}
.area_visual .bottom .bx-controls a:last-child:after{content:""; position:absolute; top:50%; left:0; width:2px; height:14px; background:#e5e5e5; transform:translateY(-50%);}
.area_visual .bottom .bx-controls a:hover{color:#c7a381;}
.area_visual .bottom .bx-viewport:after{content:""; position:absolute; top:0px; right:0px; z-index:1; width:20%; height:100%; background:linear-gradient(-90deg, rgba(255, 255, 255, 1),rgba(255, 255, 255, 0)); pointer-events:none;}

.line{position:absolute; opacity:1; top:0; left:0; z-index:0; width:100%; height:100%; transition:all 0.3s ease-out 0s;}
.line .bg{width:766px; background:#000;}
.line > i{float:left; width:-webkit-calc((100%/5) - 1px); width:calc((100%/5) - 1px); height:100%; border-right:1px solid #f2f2f2;}
.fp-viewing-1Page .line.all{opacity:0; visibility:hidden;}
.fp-viewing-1Page .line.visual{opacity:1; visibility:visible;}
.line.visual{z-index:55;}
.line.visual i{opacity:0.2;}
.line.visual{opacity:0; visibility:hidden; z-index:55;}
.line > i:last-child{border:none;}
.fp-tableCell{}

/* 어바웃 */
.inr_right{float:right; width:798px;}
.area_about h2,
.area_notice h2{text-align:left !important;}
.area_about p{line-height:1.7; font-weight:300; color:#666;}
.area_about h2 + p{margin: 19px 0 34px;font-family:Noto Sans KR , '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}
.area_about div[data-about="list"]{float:left;width:100%;margin-top: 50px;}
.area_about div[data-about="list"] > ul > li{float:left; width:-webkit-calc(100%/4 - 1px); width:calc(100%/4 - 1px); background:#fff; border-right:1px solid #ececec;}
.area_about div[data-about="list"] > ul{border:1px solid #d1d1d1;float: left;}
.area_about div[data-about="list"] ul li:nth-child(4n){border-right:1px solid transparent;}
.area_about div[data-about="list"] ul li:nth-child(4)~li{border-top:1px solid #ececec;}
.area_about div[data-about="list"] > ul > li:last-child a,
.area_about div[data-about="list"] > ul > li:last-child em{font-size:19px; color:#fff;}
.area_about div[data-about="list"] ul li a{display:block; position:relative; padding:45px 35px; border:2px solid transparent; transition:all 0.3s ease-out 0s;}
.area_about div[data-about="list"] ul li:not(:last-child) a:hover{box-shadow:29px 29px 49px 0px rgba(199, 163, 129, 0.17);border-color:#c7a380;}
.area_about div[data-about="list"] > ul > li > a > img{position:absolute; top:37px; right:27px;}
.area_about div[data-about="list"] ul li em{font-size:17px; color:#222; transition:all 0.3s ease-out 0s;}
.area_about div[data-about="list"] ul li:not(:last-child) a:hover em{color:#c7a380;}
.area_about div[data-about="list"] ul li a > em + p{line-height:1.6; margin-top:20px; font-size:15px; word-break:keep-all;}
.area_about div[data-about="list"] > ul > li > div{padding:37px 35px;max-height: 116px;}
.area_about div[data-about="list"] > ul > li > div ul li{position:relative; float:left; margin:0 10px 4px 0; padding-left:7px; font-family:Noto Sans KR; font-weight:300; font-size:15px; color:#666;}
.area_about div[data-about="list"] > ul > li > div ul{overflow:hidden; margin-top:13px;}
.area_about div[data-about="list"] > ul > li > div ul li:before{content:""; position:absolute; top:49%; left:0; width:2px; height:2px; background:#b9b9b9;}
.area_about div[data-about="list"] > ul > li > div ul li:nth-child(2){clear:both;}
.area_about div[data-about="list"] > ul > li:last-child em{display:block; line-height:1.3; font-weight:600;}
.area_about div[data-about="list"] > ul > li:last-child a{font-weight:200;}
.area_about div[data-about="list"] > ul > li:last-child img{position:relative; top:8px; right:0; height:15px; margin-left:8px;}
.area_about div[data-about="list"] > ul > li:last-child{padding:20px 0; background-position:50% 50%;}

/* 공지 */
.area_notice h2{margin-bottom:30px;}
.area_notice .slide_notice{position:relative; float:left; z-index:99; width:437px; margin-top:95px;}
.area_notice .inr_right ul li{background:#fff; border-bottom:1px solid #e9e9e9; transition:all 0.5s cubic-bezier(0.12, 0.4, 0.41, 0.86) 0s;}
.area_notice .inr_right ul li a:hover > div[data-notice="date"] *{color:#c7a380;}
.area_notice .inr_right ul li:hover{border-bottom-color:#c7a380;}
.area_notice .inr_right ul{border-top:2px solid #c7a381;}
.area_notice .inr_right ul li a{display:block; overflow:hidden; padding:17px 0;}
.area_notice .inr_right ul li a > div{float:left;}
.area_notice .inr_right ul li a > div[data-notice="date"]{width:110px; text-align:center;}
.area_notice .inr_right ul li a > div[data-notice="date"] *{display:block; color:#d5d5d5; transition:all 0.5s cubic-bezier(0.12, 0.4, 0.41, 0.86) 0s;}
.area_notice .inr_right ul li a > div[data-notice="date"] em{line-height:1.4; font-weight:600; font-size:40px;}
.area_notice .inr_right ul li a > div[data-notice="date"] i{font-size:13px; letter-spacing:2px;}
.area_notice .inr_right ul li a > div[data-notice="txt"]{padding: 8px 0 0 40px;width: -webkit-calc(100% - 151px);width: calc(100% - 151px);}
.area_notice .inr_right ul li a > div[data-notice="txt"] em{overflow:hidden;font-weight:400;font-size:18px;color:#222;white-space:nowrap;text-overflow:ellipsis;display: block;}
.area_notice .inr_right ul li a > div[data-notice="txt"] p{font-weight:300;color:#666;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;}
.area_notice .inr_right > a{position:absolute;top: 10px;right:0;margin-top:40px;}
.area_notice .bx-controls .bx-pager-item{float:left;}
.area_notice .bx-controls{position:absolute; bottom:-44px; z-index:999; width:100%; margin-top:15px; text-align:center;}
.area_notice .bx-controls > div{display:inline-block;}
.area_notice .bx-controls .bx-pager-item a{display:block;}
.area_notice .bx-controls .bx-pager-item a.active{background:#c7a381; box-shadow:3px 3px 11px 0px rgba(199, 163, 129, 1);}
.area_notice .bx-controls .bx-pager-item a{display:block; float:left; width:8px; height:8px; margin:0 16px; background:#c3c3c3; text-indent:-9999px;}
.area_notice p.no_data{padding:50px 0; background:#fff; border:1px solid #ccc; text-align:center;}

/* 프로젝트 */
.area_project .btn_basic{position:absolute;top: 62px;right:0;}

/* fullpage custum */
#fp-nav ul{height:auto;}
.fp-viewing-1Page #fp-nav ul li .fp-tooltip{font-weight:500; color:#fff;}
.open #fp-nav{opacity:0; transition:all 0s ease-out 0s;}
.fp-viewing-4 #fp-nav{opacity:0; transition:all 0s ease-out 0s;}
span.name_navi{display:inline-block; position:absolute; opacity:0; top:0; left:0; padding-left:46px; font-weight:500; font-size:14px; color:#FFF; transition:all 0.4s ease-out 0s;}

#fp-nav ul li a.active + div{opacity:1;}
#fp-nav ul li a.active + div + span{opacity:1;}
#fp-nav ul li a.active + div + span{opacity:1; padding-left:74px; color:#c7a381;}
#fp-nav ul li a.active span{width:65px; background:#c7a381;}
#fp-nav ul li:last-child{display:none;}

.fp-viewing-1Page #fp-nav ul li a span{opacity:0.4; background:#fff;}
.fp-viewing-1Page #fp-nav ul li a.active + div + span{color:#fff;}
.fp-viewing-1Page .fp-viewing-1Page #fp-nav ul li a span{opacity:0.5;}
.fp-viewing-1Page #fp-nav ul li a.active span{opacity:1;}


@media all and (max-width:1919px){	
	.area_visual .bottom > div{width:53%;}
	div[class^="area_"] > .inr{width:1280px;}	

	.area_about div[data-about="list"] ul li a > em + p{display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; max-height:45px;}
	.area_about div[data-about="list"] > ul > li:last-child{padding:19px 0;}
	.area_about div[data-about="list"] > ul > li > div{max-height:114px;}
	
	.inr_right{float:right; width:57%;}


}

@media screen and (max-width:1540px){
	#fp-nav.fp-right{display:none;}
	#fp-nav.fp-right{left:68px;}
	#fp-nav ul li a.active + div + span{opacity:0;}
	#fp-nav ul li,
	.fp-slidesNav ul li{width:70px; height:10px;}
	#fp-nav ul li a.active span{width:35px;}
}

@media screen and (max-width:1480px){
	
	

	div[class^="area_"] > .inr{width:auto; margin:0 50px;}
	.area_visual .img .bx-controls{top:43%;}
	.area_visual .img .bx-controls > div{right:40px; width:auto; margin:0 auto;}
	.area_visual .txt{}
	.area_visual .txt > div{width:auto; margin:0 253px 0px;}
	.area_visual .txt h2{}
	.area_visual .bottom > div{padding:11px 150px 0 0;}
	.area_visual .bottom .bx-controls a{padding:0 18px;}
	.area_visual .bottom .bx-controls{right:20px;}
	.area_visual .bottom > a > em{display:none;}

	.area_about div[data-about="list"] ul li a{padding:45px 25px;}
	.area_about div[data-about="list"] > ul > li > div{padding:37px 25px;}
	.area_about div[data-about="list"] ul li em{letter-spacing:-0.05rem;}
	.area_about div[data-about="list"] > ul > li > div ul li{margin:0 10px 0px 0;}

	.area_notice .slide_notice{width:35%;}
	.area_notice .slide_notice li img{width:100%;}
}

@media screen and (max-width:1280px){
	div[class^="area_"] > .inr{margin:0 30px;}
	.area_visual .img .bx-controls > div{right:20px;}
	.area_visual .txt > div{margin:0 90px 0px;}
	.area_visual .bottom > em{margin:29px 0 0 20px;}
	.area_visual .bottom .bx-controls a{font-size:13px;}
	.area_visual .bottom .bx-controls{right:15px;}
	.area_visual .bottom > div{padding:11px 120px 0 0;}
}

@media screen and (max-width:1200px){
	.area_about div[data-about="list"] > ul{background:#fff;}
	.area_about div[data-about="list"] > ul > li{width:-webkit-calc(100%/3 - 1px); width:calc(100%/3 - 1px);}
	.area_about div[data-about="list"] ul li:nth-child(3n){border-right:1px solid transparent;}
	.area_about div[data-about="list"] ul li:nth-child(4n){border-right:1px solid #ececec;}
	.area_about div[data-about="list"] > ul > li:nth-child(3)~li{border-top:1px solid #ececec;}
	.area_about div[data-about="list"] ul li:nth-child(6)~li{width:-webkit-calc(100%/2 - 1px); width:calc(100%/2 - 1px);}
	.inr_right{width:55%;}
	.area_about h2 + p br{display:none;}
}

@media screen and (max-width:1023px){
	.fp-tableCell{display:block; height:auto !important;}
	.fp-section.fp-table,
	.fp-slide.fp-table{height:auto !important;}

	#container div[class^="area_"]{padding:100px 0;}
	#container div[class^="area_"] > .inr{padding-top:0;}
	div[class^="area_"] > .inr h2{font-size:44px;}

	.line > i:nth-child(3)~i{display:none;}
	.line > i{width:-webkit-calc((100%/3) - 1px); width:calc((100%/3) - 1px);}
	
	.area_visual{padding:0 !important;}
	.area_visual .txt p{font-size:16px;}
	.area_visual .txt h2{margin-top:9px; font-size:60px;}
	.area_visual .txt > div{margin:0 40px 0px;}
	.area_visual li:first-child .txt{top:24%;}
	.area_visual .bottom > a{width:auto; padding:15px 40px;}
	.area_visual .bottom .list img{height:50px;}
	.area_visual .bottom > em{margin:24px 0 0 15px; font-size:14px;}
	.area_visual .bottom > a{width:120px; padding:22px 15px;}
	.area_visual .bottom > a > i{display:block; margin-top:5px; font-size:14px;}
	.area_visual .bottom > a img{display:block; height:5px;}
	.area_visual .bottom > div{width:48%;}
	.area_visual .bottom .bx-controls{top:58%; right:10px;}
	
	i[data-img="ob02"]{display:none;}
	i[data-img="ob01"]{width:100%;}
	
	.inr_right{width:100%;}

	.area_about{overflow:hidden;}
	.area_about div[data-about="list"] ul li a{padding:30px 15px;}
	.area_about div[data-about="list"] ul li a > em + p{margin-top:10px;}
	.area_about div[data-about="list"]{margin-top:30px;}
	.area_about h2 + p{margin:11px 0 23px;}
	.area_about div[data-about="list"] > ul > li > div{padding:20px 25px;}
	.area_about div[data-about="list"] ul li:not(:last-child) a:hover{box-shadow:none; border-color:transparent;}
	.area_about div[data-about="list"] > ul > li:not(:last-child) > a > img{opacity:0.2; top:23px; right:20px;}
	
	.area_notice{overflow:hidden; text-align:center;}
	.area_notice h2{margin-bottom:20px;}
	.area_notice .slide_notice{display:none;}
	.area_notice .inr_right > a{position:relative; top:0; right:0; margin-top:40px;}
	.area_notice .inr_right ul{text-align:left;}
	.area_notice .inr_right ul li a{padding:10px 0;}	
	.area_notice .inr_right ul li a > div[data-notice="date"]{width:100px;}
	.area_notice .inr_right ul li a > div[data-notice="txt"]{padding-left:20px;}

	.area_project .btn_basic{top:10px;}		
}

@media screen and (max-width:767px){
	#container div[class^="area_"]{padding:50px 0;}
	div[class^="area_"] > .inr{margin:0 15px;}
	div[class^="area_"] > .inr h2{font-size:33px;}
	
	.area_visual .bottom > a{display:none;}
	.area_visual .txt{top:40%;}
	.area_visual .txt p{font-size:14px;}
	.area_visual .txt > div{margin:0px 15px 0px;}
	.area_visual .txt h2{margin-top:5px; font-size:40px;}
	.area_visual .txt h2 em{font-size:70px;}
	.area_visual .img .bx-controls > div a{width:52px; height:52px;}
	.area_visual .img .bx-controls > div a.bx-prev{top:60px;}
	.area_visual .img .bx-controls > div{right:20px; bottom:0px;}
	.area_visual .bottom{padding-bottom:11px;}
	.area_visual .bottom > em{display:none;}
	.area_visual .bottom > div{float:left; width:-webkit-calc(100% - 135px); width:calc(100% - 135px); margin-left:15px;}
	.area_visual .bottom .bx-controls{top:58%; right:0;}

	.area_project{text-align:center;}
	.area_project .btn_basic{position:relative; top:0; right:0; margin-top:40px;}

	.area_about{overflow:hidden;}
	.area_about div[data-about="list"] > ul > li{width:-webkit-calc(100%/2 - 1px); width:calc(100%/2 - 1px);}
	.area_about div[data-about="list"] ul li:nth-child(2n){border-right:1px solid transparent !important;}
	.area_about div[data-about="list"] > ul > li:nth-child(2)~li{border-top:1px solid #ececec;}
	.area_about div[data-about="list"] ul li:nth-child(3n){border-right:1px solid #ececec;}
	.area_about div[data-about="list"] ul li em{display:block; overflow:hidden; line-height:1.4; font-weight:700; font-size:14px; white-space:nowrap; word-break:normal; text-overflow:ellipsis;}
	.area_about div[data-about="list"] ul li a{padding:20px 15px;}
	.area_about div[data-about="list"] ul li a > em + p{margin-top:15px; margin-top:9px; font-size:13px; word-break:break-all;}
	.area_about div[data-about="list"] ul li:nth-child(6)~li{width:100%;}
	.area_about div[data-about="list"] > ul > li > div{padding:20px 15px;}
	.area_about div[data-about="list"] > ul > li > div ul li{padding-left:5px; font-size:14px;}
	.area_about div[data-about="list"] > ul > li:last-child{padding:10px 0;}
	.area_about div[data-about="list"] > ul > li:last-child a,
	.area_about div[data-about="list"] > ul > li:last-child em{font-size:16px;}
	.area_about div[data-about="list"] > ul > li:not(:last-child) > a > img{display:none; opacity:0.2; top:23px; right:20px;}
	.area_about div[data-about="list"] ul li:nth-child(7){border-right:1px solid #d1d1d1;}

	.area_notice h2{line-height:1; margin-top:-8px;}
	.area_notice .inr_right ul li a > div[data-notice="date"] em{font-size:25px;}
	.area_notice .inr_right ul li a > div[data-notice="date"]{width:75px;}
	.area_notice .inr_right ul li a{padding:11px 0;}
	.area_notice .inr_right ul li a > div[data-notice="txt"] em{font-weight:600; font-size:15px;}
	.area_notice .inr_right ul li a > div[data-notice="txt"]{width:-webkit-calc(100% - 96px); width:calc(100% - 96px); padding:1px 0 0 10px;}
	.area_notice .inr_right > a{margin-top:30px;}
	.area_notice .inr_right ul li a > div[data-notice="date"] i{margin-top:-6px; font-size:12px; letter-spacing:1px;}
	.area_notice .inr_right ul li a > div[data-notice="txt"] p{margin-top:-4px;}
}

@media screen and (max-width:400px){
	.area_visual .img .bx-controls > div{bottom:-100px;}
	.area_visual .bottom > div{padding:11px 111px 0 0;}
}

@keyframes visualScale{
	0%{transform:scale(1.2) rotate(.001deg);}
	100%{transform:scale(1) rotate(.001deg);}
}