@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

*{box-sizing:border-box;}
body{overflow:inherit; position:relative;}

#header > .inr{width:100%; max-width:1220px; height:100%; margin:0 auto; padding-left:20px; padding-right:20px;}
#header{position:relative; width:100%; height:90px; padding:0 20px; z-index:100;}
#header .inr{position:relative; max-width:1825px; padding:0;}
#header .logo{position:absolute; top:2px; left:15px; width:160px; height:100%; font-size:0; text-indent:100%;}
#header .logo > a{display:block; width:106px; height:100%; background:url(../images/common/logo.svg) no-repeat 50% 50%;}
.nav_bg{display:none;position:fixed; top:0; left:0; z-index:-1; width:100%; height:100%; background:rgba(0,0,0,.7);}

.btn_menu{display:none; position:absolute; top:50%; right:-11px; z-index:50; box-sizing:content-box; padding:11px; margin:auto; width:21px; height:25px; cursor:pointer; transform:translateY(-50%);}
.btn_menu .box{position:absolute; display:block; top:50%; margin:0 auto; font-size:0; text-indent:100%; transition:all 0ms 300ms;}
.btn_menu .box,
.btn_menu .box:after,
.btn_menu .box:before{width:18px; height:2px; background:#222;}
.btn_menu .box:before,
.btn_menu .box:after{content:""; position:absolute; left:0;}
.btn_menu .box:before{bottom:7px; transition:bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);}
.btn_menu .box:after{top:7px; transition:top 300ms 300ms cubic-bezier#footer .f_navi(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);}
.btn_menu.close{right:0px;}
.btn_menu.close .box{background:transparent;}
.btn_menu.close .box:after{top:0; transform:rotate(45deg); transition:top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);}
.btn_menu.close .box:before{bottom:0; transform:rotate(-45deg); transition:bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);}

/* footer */
#footer{position:relative; clear:both; background-color:#303238; text-align:center;}
#footer .inr{position:relative; margin:0 auto; padding:37px 0 53px 0;}
#footer address{line-height:1.6em; font-size:14px; font-weight:400; word-break:keep-all; transform:skew(-0.028deg);}
#footer address span{display:inline-block; color:#b0b0b0; margin:0 10px;}
#footer address em{display:inline-block; margin-right:5px; color:#fff;}
#footer address a{color:#b0b0b0 !important;}
#footer p{margin-top:10px; font-size:13px; color:#b0b0b0; font-weight:400; letter-spacing:0.6px; transform:skew(-0.028deg);}
#footer p > em{color:#91a4f9;}
#footer p > br{display:none;}

/* lnb */
.area_lnb{position:relative; width:100%; margin-bottom:40px; clear:both; z-index:80;}
.area_lnb .lnb{width:auto; margin:0 auto;}
.area_lnb .lnb li{display:inline-block;}
.area_lnb .lnb li a{display:block; margin-right:2px; width:180px; height:60px; line-height:60px; font-size:16px; color:#333 !important; font-weight:300; text-align:center; transition:all 0.3s ease 0s;}
.area_lnb .lnb li a:hover{box-shadow:40px 20px 50px rgba(0,0,0,0.12);}
.area_lnb .lnb li a.on{position:relative; color:#2b4bd5 !important; font-weight:600;}
.area_lnb .lnb li a.on:after{content:''; display:block; position:absolute; top:5px; right:50px; width:6px; height:6px; background-color:#2b4bd5; border-radius:50%;}

/* nodata */
.nodata{position:relative; margin:0 auto; width:100%; max-width:997px; height:530px; padding-top:420px; text-align:center; font-size:20px; font-weight:300; color:#5b5b5b; background:url(../images/common/noimage.jpg) no-repeat 50% 50%; background-size:cover; box-shadow:0px 35px 40px rgba(0,0,0,0.2);}

/* 현재전시 */
.area_about{position:relative; width:100%; max-width:1300px; margin:0 auto; padding:76px 0;}
.area_about:after{content:''; display:block; clear:both;}
.area_about > .img{position:relative; float:left; overflow:hidden; padding-top:45%; width:calc(100% - 520px - 280px); margin:0 90px 0 190px; text-align:right; background-color:#fff; box-shadow:0px 35px 40px rgba(0,0,0,0.2);}
.area_about .txt{position:relative; float:left; width:520px; color:#333; font-weight:300; font-size:16px; line-height:1.8em;}
.area_about .txt em{display:block; margin:35px 0 25px 0; color:#2b4bd5; font-size:20px; font-weight:400; transform:skew(-0.028deg);}
.area_about .txt h4{display:block; margin:20px 0; font-size:35px; transform:skew(-0.028deg);}
.area_about .txt i{display:block; margin:60px 0 78px 0; font-size:20px; font-weight:400; letter-spacing:0.5px; transform:skew(-0.028deg);}
.area_about .txt u{display:inline-block; margin:0 5px; text-decoration:none;}
.area_about .txt > span,
.area_txtopen > li > span{display:block; margin-bottom:15px; font-size:16px;}
.area_about .txt > span + i{margin-top:15px !important;}
.area_about .txt h4 + span{margin-top:50px !important;}
.area_about .txt p{margin-bottom:80px; height:110px; overflow:hidden;}
.inr > .area_about{padding-top:0 !important;}
.button02{display:block; position:relative; width:140px; height:50px; line-height:50px; margin:2px 0px; border-bottom:1px solid #939394; text-align:right; transition:all 1s ease 0s;}
.button02:hover{padding-right:12px;}
.button02 > div{color:#444 !important; font-size:15px; font-weight:400; transform:skew(-0.028deg);}
.button02:before{opacity:0; transform:translateX(0px); content:''; display:block; z-index:50; position:absolute; margin-top:-4px; top:50%; left:0px; width:18px; height:12px; background-image:url(../images/main/img_arrow.png); transition:all 1s ease 0s;}
.button02:hover:before{opacity:1; transform:translateX(8px); transition:all 0.8s ease 0s;}

/* 이미지 사이즈 비율 조정 */
.img{display:block; position:relative; overflow:hidden; padding-top:100%; text-align:center;}
.img img{position:absolute; top:0px; left:50%; width:100%; height:100%; transform:scale(1,1) translateX(-50%); transform-origin:0 50%; transition:all 0.4s ease-in 0s;}
.img:hover img{transform:scale(1.05,1.05) translateX(-50%);}
.img:after{z-index:2; content:''; display:block; opacity:0; position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#fff; transition:all 0.5s ease 0s;}
.img:hover:after{opacity:0.2;}

/* 이미지텍스트 펼침 */
.area_txtopen .txtopen > .hide{display:none;}
.area_txtopen .txtopen > .hide + .open:after{transform:rotate(0deg);}
.area_txtopen .txtopen > .hide.on + .open:after{transform:rotate(180deg);}
.area_txtopen .txtopen > .open{display:block; position:relative; width:100%; font-size:0; text-indent:100%;}
.area_txtopen .txtopen > .open:after{content:""; display:block; position:absolute; top:0; right:0; width:28px; height:40px; background:url(../images/common/img_more.png) no-repeat 50%; background-size:contain; transition:transform 200ms;}

/* 이미지 팝업 */
[data-pop-layer="layer"]{background:rgba(0,0,0,0.8);}
[data-pop-layer="layer"] .popBox{width:100%; height:100%; min-width:500px; background-color:transparent; box-shadow:3px 15px 20px rgba(0,0,0,0);}
[data-pop-layer="layer"] .popBox .btn_close{z-index:60; right:0px; background:rgba(0,0,0,0.9); width:60px; height:60px;}
.area_imgpop{position:relative; top:50%; margin-top:-300px; width:100%;}
.imgpop{display:block; position:relative; margin:0 auto; width:80%; height:auto;}
.imgpop > div{position:relative; margin:0 auto; text-align:center;}
.imgpop > div > img{display:block; margin:0 auto; max-width:100%; width:auto; height:600px; text-align:center;}
.imgpop_btn{display:block; z-index:60; top:48%; position:absolute; width:100%; margin:0 auto;}
.imgpop_btn .btn_prev,
.imgpop_btn .btn_next{position:absolute; left:0px; font-size:0; text-indent:100%; display:block; width:60px; height:60px; background:rgba(0,0,0,0.9) url(../images/common/img_prev.png) no-repeat 50% 50%; background-size:12px auto;}
.imgpop_btn .btn_next{right:0px !important; left:inherit; transform:rotate(-180deg);}

/* 이미지 롤링 */
.bxslider{display:block; position:relative; margin:0 auto; width:80%; height:auto;}
.bxslider > li{position:inherit; margin:0 auto; text-align:center;}
.bxslider > li > img{display:block; margin:0 auto; max-width:100%; width:auto; height:600px; text-align:center;}
.bx-controls-direction{display:block; z-index:60; top:48%; position:absolute; width:100%; margin:0 auto;}
.bx-controls-direction .bx-prev,
.bx-controls-direction .bx-next{position:absolute; left:0px; font-size:0; text-indent:100%; display:block; width:60px; height:60px; background:rgba(0,0,0,0.9) url(../images/common/img_prev.png) no-repeat 50% 50%; background-size:12px auto;}
.bx-controls-direction .bx-next{right:0px !important; left:inherit; transform:rotate(-180deg);}


@media all and (min-width:1084px){
	/* pc gnb */
	.area_gnb{margin-left:610px;}
	.area_gnb .gnb > li{display:inline-block; position:relative; padding:0 57px; vertical-align:top;}
	.area_gnb .gnb > li:last-child{padding-right:0;}
	.area_gnb .gnb > li > a{display:block; padding:33.5px 0; font-size:19px; color:#333; font-weight:400;}
	.area_gnb .gnb > li > a > span{display:inline-block;}
	.area_gnb .gnb .depth{opacity:0; visibility:hidden; z-index:-1; position:absolute; top:100%; left:50%; margin-left:-85px; width:170px; background-color:#2b4bd5; transition:opacity 300ms ease, transform 600ms ease;}
	.area_gnb .gnb .depth > li > a{opacity:1; display:block; padding:6px 0; color:rgba(255,255,255,1); transition:color 300ms; word-break:keep-all; text-align:center; font-size:14px; font-weight:300;}
	.area_gnb .gnb .depth > li:hover > a{color:rgba(255,255,255,0.5);}
	.area_gnb .gnb .depth > li:first-child > a{padding-top:25px;}
	.area_gnb .gnb .depth > li:last-child > a{padding-bottom:25px;}
	.area_gnb .gnb > li:hover .depth{opacity:1; visibility:visible; z-index:1;}
}

@media all and (max-width:1880px){
	#footer .inr{width:94%;}
	#footer address{width:100%; font-size:14px;}
	#footer p{font-size:14px;}

	.area_gnb{margin-left:350px;} 
	.area_gnb .gnb > li{padding:0 30px;}
	.area_gnb .gnb > li > a{font-size:20px;}
	
	.area_lnb .lnb li a{font-size:15px;}
	.area_lnb .lnb{width:94%; max-width:inherit;}
	
	.area_about{height:auto; padding:60px 0;}
	.area_about > .img{padding-top:35%; width:380px; margin:0 5% 0 5%; text-align:center;}
	.area_about .txt{width:calc(100% - 380px - 10%); font-size:15px;}
	.area_about .txt em{margin:35px 0 20px 0; font-size:18px;}
	.area_about .txt h4{font-size:30px;}
	.area_about .txt i{margin:30px 0 48px 0; font-size:18px;}
	.area_about .txt p{margin-bottom:40px; height:105px;}
	
	.area_about.about02 .txt{float:right; width:50%;}
}

@media (max-width:1480px) and (min-width:1084px){
	#header > .inr{max-width:inherit;}
	.area_gnb{margin-left:220px;} 
	.area_gnb .gnb > li{padding:0 25px;}
	.area_gnb .gnb > li > a{font-size:17px;}
	.area_gnb .gnb .depth{width:150px; margin-left:-70px;}
	.area_gnb .gnb .depth > li > a{padding:4px 0; font-size:13px;}
}

@media all and (max-width:1024px){
	.area_imgpop{position:absolute !important; top:50%; margin-top:-200px;}
	.imgpop > div > img{height:400px;}
	[data-pop-layer="layer"] .popBox .btn_close{z-index:60; right:0px; margin-right:0;}
	[data-pop-layer="layer"] .popBox{min-width:inherit;}
	
	.nodata{max-width:inherit; height:450px; padding-top:350px; font-size:16px;} 
}

@media all and (max-width:1083px){
	#header{height:60px; padding:0 16px; z-index:inherit;}
	#header .logo{width:120px; left:0px;}
	#header .logo > a{width:90px;}
	.header_menu{display:none;}
	
	/* mobile gnb */
	.area_gnb{position:fixed; top:0; right:-320px; z-index:100; width:320px; height:100%; padding-top:50px; padding-bottom:50px; background:#fff; transition:right 300ms ease;}
	.area_gnb nav{overflow:hidden; overflow-y:auto; width:100%; height:100%;}
	.area_gnb .gnb > li{width:100%; padding:0 30px;}
	.area_gnb .gnb > li > a{display:block; padding:17px 0px; background:#fff;}
	.area_gnb .gnb > li > a span{display:block; position:relative; width:100%; font-weight:600; font-size:18px;}
	.area_gnb .gnb > li.toggle > a span:after{content:""; display:block; position:absolute; top:0; right:0; width:15px; height:15px; background:url(../images/common/img_more.png) no-repeat 50%; background-size:contain; transition:transform 200ms;}
	.area_gnb .gnb .depth{display:none; margin:10px 0; padding:13px 0; border-top:2px solid #2b4bd5;}
	.area_gnb .gnb .depth > li{width:100%;}
	.area_gnb .gnb .depth > li > a{display:block; padding:8px 0; font-size:14px; font-weight:400; color:#2b4bd5;}
	.area_gnb .gnb .depth > li:first-child > a{padding-top:22px;}
	.area_gnb .gnb .depth > li:last-child > a{padding-bottom:22px;}
	.area_gnb.on{right:0;}
	.area_gnb .gnb > li.on > a span:after{transform:rotate(180deg);}
	.nav_bg.on{display:block; z-index:90;}
	
	.btn_menu{display:block;}
	.btn_menu.close{top:6px; right:15px; transform:none;}

	#footer address{line-height:1.8em;}
	#footer address span,
	#footer address a{display:block; margin:5px 0 0 0; text-align:left;}
	#footer p{margin-top:5px; line-height:1.8em; text-align:left;}
	
	.area_lnb .lnb li a{font-size:14px;}
	
	.area_about .txt h4{font-size:25px;}
	.area_about > .img{float:inherit; padding-top:40%; width:37%; margin:0 auto;}
	.area_about.about02 .img03{float:inherit; width:55%; margin:40px auto 0 auto;}
	.area_about.about02 .txt,
	.area_about .txt{float:inherit; margin:0 auto; width:90%;}
	.area_about.about02{padding:0; margin-bottom:40px; border:1px solid #f0f0f0;}
}

@media all and (max-width:910px){
	.area_lnb .lnb li a{margin-right:2px; padding:0; width:100px; height:45px; line-height:45px; font-size:13px;}
	.area_lnb .lnb li a.on:after{right:10px;}
	
	.area_about.about02 .img03{width:50%;}
}

@media all and (max-width:768px){
	#footer p > br{display:block;}
	
	.area_about > .img{padding-top:55%; width:50%;}
	.area_about .txt{font-size:14px;}
	.area_about .txt h4{margin:15px 0;}
	.area_about .txt i{margin:20px 0 35px 0;}
	.area_about .txt h4{font-size:25px;}
	.area_about .txt em,
	.area_about .txt i{font-size:16px;}
	.button02{width:120px; height:40px; line-height:40px; font-size:13px;}
	
	.area_imgpop{margin-top:-125px;}
	.imgpop > div > img{height:250px;}
	
	.area_about.about02 .img03{width:54%;}	
	
	.nodata{max-width:inherit; height:350px; padding-top:280px; font-size:14px;} 
}

@media all and (max-width:480px){
	#footer address,
	#footer p{font-size:13px;}	
	
	.area_about .txt em,
	.area_about .txt i{font-size:15px;}
	.area_about .txt h4{font-size:20px;}
	.area_about > .img{padding-top:60%; width:44%;}
	.area_about .txt{width:90%;}
	
	.area_about.about02 .img03{width:78%;}	
}

@media all and (max-width:375px){
}