@charset "utf-8";

/* 
 * layout CSS Document
 * KOWEB
 */

body{font-size:16px; overflow-x:hidden; word-break:keep-all;}
.wrap{position:relative; width:1200px; margin:0 auto;}
.wrapper{position:relative; margin:0 100px; padding-bottom:100px; background:url(../images/content/img_bg.jpg) repeat 50% 50%;}
.wrapper:before{content:""; position:absolute; top:-125px; width:100%; height:125px; background:url(../images/content/img_bg.jpg) repeat 50% 50%;}
.effect-nav:hover{animation:shine 2s infinite 0s; -webkit-mask-image:linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%); -webkit-mask-size:200%;}

.scroll_down div span:nth-child(3){opacity:0.3; width:4px; height:4px; border-radius:100px;}
.scroll_down div span{display:block; margin:6px auto; background:#fff; border-radius:100px;}
.scroll_down{position:absolute; bottom:24px; left:40px;}
.scroll_down div span:nth-child(2){opacity:0.7; width:5px; height:5px; border-radius:100px;}
.scroll_down div span:nth-child(1){opacity:0.7; width:5px; height:5px; box-shadow:0px 0px 5px 1px #fff; border-radius:100px;}
.scroll_down > div,
.scroll_down > i{display:table-cell; vertical-align:middle;}
.scroll_down > i{padding-left:15px; font-size:12px; color:#fff;}
.area_subVisual .scroll_down i{font-weight:500; color:#fff;}

/* header */
#header{position:absolute; z-index:99999; width:100%;}
#header > h1{position:absolute; top:40px; left:30px; width:138px; height: 32px; background:url(../images/common/logo.svg) no-repeat 50% 50%;}
#header > h1.color_change{background:url(../images/common/logo_color.svg) no-repeat 50% 50%;}
#header > h1 a{display:block; width:100%; height:100%;}
#header nav{position:fixed; overflow:hidden; top:0; left:0; z-index:-1; width:100%; height:100%; transition:all 0.5s ease 0s; transition:all 0.4s ease-out 0.4s; transform:translate3d(-100%,0,1px);}
#header nav.open{z-index:99; transition:all 0.4s ease-out 0s; transform:translate3d(0,0,1px);}
#header nav ul{display:inline-block; overflow:hidden;}
#header nav ul li{overflow:hidden;}
#header nav ul li a{display:block; overflow:hidden; z-index:-1; padding:17px 0; font-weight:700; font-size:40px; color:rgba(255,255,255,0.4); transition:all 0.2s ease 0s; transform:translate3d(0,100%,1px) rotate(.001deg); -webkit-transform:translate3d(0,100%,1px) rotate(.001deg); text-transform:uppercase;}
#header nav.open ul li a{transition:all 1.2s ease 0.2s;}
#header nav h1{position:absolute; top:50px; left:-200px; transition:all 0.2s ease 0.2s; transition:all 0.5s ease 0s;}
#header nav.open h1{left:50px; background:none; transition:all 0.8s ease 0.1s;}
#header nav h1 img{height: 32px;}
#header nav.open .gnb_footer{border-top:1px solid rgba(255,255,255,0.2); transition:all 0.5s ease 0.7s;}
#header nav.open ul li a{z-index:2; transform:translate3d(0,0,1px) rotate(.001deg); -webkit-transform:translate3d(0,0,1px) rotate(.001deg);}
#header nav ul li a i{display:inline-block; opacity:0.6; margin-left:9px; font-weight:200; font-size:15px;}
#header .area_gnb{position: fixed;overflow:hidden;top:0;left:0;width:0;height:100%;background:url(../images/common/img_gnbBg02.jpg) repeat 50% 50%;transition:all 0.7s ease-out 0.4s;}
#header .area_gnb.open{width:100%; transition:all 0.7s ease-out 0s;}
#header .box_img{position:fixed; top:0; right:0; width:747px; height:100%; transition:all 0.5s ease-out 0.3s; transform:translate3d(100%,0,1px) rotate(.001deg); -webkit-transform:translate3d(100%,0,1px) rotate(.001deg);}
#header nav.open .gnb_footer p{transition:all 1.2s ease 0.7s; transform:translate3d(0,0,1px) rotate(.001deg); -webkit-transform:translate3d(0,0,1px) rotate(.001deg);}
#header nav.open .gnb_footer > a{transition:all 1.2s ease 0.9s; transform:translate3d(0,0,1px) rotate(.001deg); -webkit-transform:translate3d(0,0,1px) rotate(.001deg);}
.open #header .box_img{transform:translate3d(0,0,1px) rotate(.001deg); -webkit-transform:translate3d(0,0,1px) rotate(.001deg);}

.fp-viewing-2Page #header  h1,
.fp-viewing-3Page #header  h1,
.fp-viewing-4Page #header  h1,
.fp-viewing-4 #header  h1{background:url(../images/common/logo_color.svg) no-repeat 50% 50%;}

.inr_nav{display:table; overflow:hidden; z-index:-1; width:-webkit-calc(100% - 747px); width:calc(100% - 747px); height:100%; transition:all 0.4s ease-out 0.4s; transform:translate3d(-100%,0,1px); -webkit-transform:translate3d(-100%,0,1px);}
.inr_nav > div{display:table-cell; padding-left:338px; vertical-align:middle;}
.open .inr_nav{z-index:99; transition:all 0.4s ease-out 0s; transform:translate3d(0,0,1px); -webkit-transform:translate3d(0,0,1px);}

.gnb_footer{overflow:hidden; margin:120px 140px 0 0; padding-top:20px; font-size:14px;}
.gnb_footer > a{float:right; padding:21px 39px; font-weight:200; color:#fff; transform:translate3d(0,100%,1px); -webkit-transform:translate3d(0,100%,1px); background-image:linear-gradient(120deg, #3ca1d9, #41cfcf);}
.gnb_footer p{float:left; opacity:0.5; overflow:hidden; font-weight:100; color:#fff; transition:all 0.2s ease 0s; transform:translate3d(0,160%,1px); -webkit-transform:translate3d(0,160%,1px);}
.gnb_footer p > a{color:#fff;}
.gnb_footer p b{display:inline-block; margin-right:5px; font-weight:400;}
.gnb_footer > a em{display:inline-block; margin-right:4px; font-weight:600;}

/* gnb */
.open .menu{position:fixed;}
.menu{position:absolute; top:50px; right:50px; z-index:9999; width:82px; height:82px; background:rgba(255,255,255,0.0); border:1px solid #d9d9d9;}
.menu:hover{cursor:pointer;}
.menu .open{background-color:#fff; transform:translate(-50%, -50%) rotate(135deg);}
.menu .open::before{top:0; transform:translateX(100%) rotate(-90deg);}
.menu .open::after{bottom:0; transform:translateX(-100%) rotate(-90deg);}
body[class^="fp-viewing-"] .menu{background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);}

.hambergerIcon{position:absolute; top:50%; left:50%; width:25px; height:2px; background-color:#222; transition:all ease 0.5s; transform:translate(-50%, -50%) rotate(0deg); border-radius:50px;}
.hambergerIcon::before,
.hambergerIcon::after{content:""; position:absolute; width:50%; height:inherit; margin:auto; background-color:inherit; transition:all ease 0s; border-radius:inherit;}
.hambergerIcon::before{top:-7px; left:0; transform-origin:left;}
.hambergerIcon::after{right:0; bottom:-7px; transform-origin:right;}
body[class^="fp-viewing-"]  .hambergerIcon{background-color:#fff;}

.fp-enabled .area_btn{display:none;}
.area_btn{position:fixed; opacity:1; right:40px; bottom:40px; transition:all 0.7s ease-out 0s;}
.area_btn a{display:block; width:70px; padding:25px 0; box-shadow:5px 6px 19px 0px rgba(0, 0, 0, 0.2); text-align:center; background-image:linear-gradient(120deg, #3ca1d9, #41cfcf); border-radius:10px;}
.area_btn a:not(:last-child){margin-bottom:5px; background:#3bcac9;}
.area_btn a:last-child{display:none;}
.area_btn img{display:block; height:20px; margin:0px auto;}
.area_btn .kakao img{height:25px;}
.area_btn .kakaoch{height:70px; color:#fff; font-size:14px; box-sizing:border-box; padding:10px 0;}
.area_btn .kakaoch img{margin-bottom:5px; width:25px; height:25px;}

/* sub_layout */
.sub{position:relative;}
.area_subVisual{position:relative; z-index:9; height:697px;}
.area_subVisual .inr_subVisual > div > div{float:right; margin-top:335px;}
.area_subVisual  a img{display:inline-block; position:relative; top:-3px; height:11px; margin-right:3px; vertical-align:text-bottom;}
.area_subVisual a{font-weight:600; font-size:13px; color:#bbb;}
.area_subVisual h2{line-height:1; margin:25px 0 10px 0; font-weight:900; font-size:54px; color:#222; text-transform:uppercase;}
.area_subVisual i{color:#666;}
.area_subVisual i em{display:inline-block; margin-left:5px; font-weight:600; color:#222;}
.area_subVisual .scroll_down{bottom:-670px; left:-250px;}
.inr_subVisual{position:relative; margin:0 100px;}

/* footer */
#footer{padding:40px 0 40px 0; background:url(../images/common/img_footer01.jpg) repeat 50% 50%;}
#footer,
.cpright{position:relative; z-index:9999;}
#footer ul li{float:left;}
#footer ul li a{display:inline-block; margin-right:6px; padding:7px 21px; background:#3e3e3e; font-weight:200; font-size:14px; color:#fff;}
#footer ul li:last-child a{background:#0e0e0e;}
#footer ul + img{display:block; opacity:0.2; height: 34px; margin:40px 0 10px 0;}
#footer ul{overflow:hidden;}
#footer address{margin:29px 0 57px 0; font-weight:200; font-size:14px; color:rgba(255,255,255,0.6);}
#footer address a{color:rgba(255,255,255,0.6);}
#footer address b{display:inline-block; position:relative; margin:0 4px 0 19px; font-weight:200; color:#fff;}
#footer address b:first-child{margin-bottom:3px; margin-left:0;}
#footer address b:before{content:""; position:absolute; opacity:0.1; top:50%; left:-12px; width:1px; height:12px; margin-top:-6px; background:#fff;}
#footer address b:first-child:before{background:none;}
#footer address b:nth-child(5):before{background:none;}
#footer address b:nth-child(5){margin-left:0;}
#footer address + a{display:inline-block; position:absolute; top:0; right:0; width:59px; height:59px; background:#000;}
#footer address + a img{display:block; height:6px; margin:26px auto;}
.inr_footer{display:inline-block; position:relative; width:1200px;}
.cpright{padding:20px 0; background:url(../images/common/img_footer02.jpg) repeat 50% 50%; font-size:14px;}
.section:not(#section4) #fp-nav{transition:all 0s ease-out 0s;}

/* snb */
.snb{position:relative;z-index:9999;padding-top:50px;text-align:center;margin-bottom: 30px;}
.snb ul li{float:left;}
.snb ul{display:inline-block;}
.snb ul li a{display:inline-block;margin:0 3px;padding:14px 30px;border:1px solid #ccc;transition:all 0.2s ease-out 0s;border-radius:4px;}
.snb ul li.on a,
.snb ul li:hover a{border:1px solid rgba(223,190,106,0); color:#fff; background-image:linear-gradient(120deg, #3ca1d9, #41cfcf);}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  
  to {
    -webkit-mask-position: -50%;
  }
}

@media all and (max-width:1919px){
	.menu{top:30px; right:30px; width:72px; height:72px;}
	
	#header > h1{top:30px; left:25px; width:118px;}
	#header .box_img{width:587px;}
		
	.inr_nav{width:-webkit-calc(100% - 587px); width:calc(100% - 587px);}
	.inr_nav > div{padding-left:248px;}
	.area_subVisual{background-position:-100px 50% !important;}
}

@media all and (max-width:1580px){
	.menu{top:30px; right:30px; width:72px; height:72px;}
	#header .box_img{width:377px;}
	#header .box_img{opacity:0.2; width:50%; background-position:60% 50%;}
	#header nav ul li a{font-size:37px;}
	.inr_nav{width:100%;}
	.inr_nav > div{padding:0 140px;}
	.gnb_footer{margin:120px 0 0 0;}	
	.area_subVisual{background-position:-200px 50% !important;}
	.wrapper{margin:0 60px;}
}

@media all and (max-width:1380px){
	.wrap{width:94%;}
	.wrapper{margin:0 auto;}
	.inr_subVisual{margin:0 auto;}
	.area_subVisual{height:607px; background-position:-400px 50% !important;}
	.area_subVisual .inr_subVisual > div > div{margin-top:275px;}
	.area_subVisual h2{font-size:50px;}
}

@media all and (max-width:1110px){
	body{overflow-x:hidden !important;}
	.wrapper:before{display:none;}

	.hambergerIcon{background-color:#fff;}
	.menu{width:62px; height:62px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.5);}
	.fp-enabled .area_btn,
	
	.area_btn{display:block;}
	.fp-viewing-1Page .area_btn{}
	.inr_nav > div{padding:0 60px;}
	
	#header{position:absolute;}
	#header .box_img{background-position:70% 50%;}
	#header nav ul li a{padding:12px 0; font-size:31px;}
	.fp-responsive.fp-viewing-1Page .hambergerIcon{background-color:#fff;}
	.area_subVisual{height:480px; background-position:50% 50% !important;}
	.area_subVisual .inr_subVisual > div > div{float:left; margin:260px 0 0px -4%; padding:50px 70px 50px 6%; background:url(../images/content/img_bg.jpg) repeat 50% 50%;}
	.inr_footer{width:97%;}
}

@media all and (max-width:767px){
	body{font-family:'Exo 2', Sans-serif; font-size:14px;}
	#header > h1{top:20px;left: 16px;width: 104px;height: 29px;}
	.menu{top:9px; right:11px; width:41px; height:41px; background:none; border:none;}
	body[class^="fp-viewing-"] .menu{background:none; border:none;}
	
	.hambergerIcon{width:25px; height:2px;}
	.hambergerIcon::before{top:-7px;}
	.hambergerIcon::after{bottom:-7px; width:100%;}
	.hambergerIcon::before{width:79%;}
	.hambergerIcon.open::before,
	.hambergerIcon.open::after{width:51%;}
	
	#footer ul li a{padding:7px 9px; font-size:12px;}
	#footer ul + img{height: 27px;margin:35px 0 5px 0;}
	#footer address{width:95%; margin:19px 0 57px 0; font-size:12px;}
	#footer address b{margin:0 2px 0 16px;}
	#footer address b:before{left:-9px; background: none;}
	#footer ul{width:95%;}
	#footer address b{margin: 0 3px 3px 5px;}
	#footer address + a{top:-67px;}
		
	#header .area_gnb.open,
	#header .area_gnb{transition:all 0.5s ease-out 0s;}	
	#header nav.open h1{left:25px;}
	#header nav h1{top:27px; left:-200px;}
	#header nav h1 img{height: 22px;}
	#header nav ul li a{padding:8px 0; font-weight:800; font-size:25px;}
	#header nav ul li a i{font-size:12px;}	
	#header .area_gnb{background:#171717;}
	#header nav.open .gnb_footer{border-top:1px solid rgba(255,255,255,0.1);}
	.open #header .box_img{background-size:cover;}
	#header .box_img{opacity:0.06; width:100%; background-position:0% 50%; transition:all 0.7s ease-out 0s;}
	
	.inr_nav > div{padding:25% 25px 0 25px;}	
	.gnb_footer a{margin-top:19px;}	
	.gnb_footer{margin:90px 0 0 0;}
	.gnb_footer a{padding:17px 17px;}
	.gnb_footer p{transform:translate3d(0,310%,1px); -webkit-transform:translate3d(0,310%,1px);}	

	.area_subVisual{height:400px; background-size:cover !important;}
	.area_subVisual h2{margin:11px 0 4px 0; font-size:32px;}
	.area_subVisual .inr_subVisual > div > div{margin: 258px 0 0px -4%;padding:30px 70px 30px 6%;}

	.area_btn{right: 15px;bottom: 6%;}
	.area_btn a{width:54px; padding:18px 0;}
	.area_btn a:last-child{display:block;}
	.area_btn img{height:17px;}
	.area_btn .kakao{padding:14px 0px;}
	.area_btn .kakaoch{height:54px; padding:5px 0 !important; font-size:12px;}
	.area_btn .kakaoch img{margin-bottom:3px;}

	.snb ul li a{padding:14px 16px; font-size:13px;}
}

@media all and (max-width:540px){
	.wrapper{padding-bottom:40px;}	
	
	.area_subVisual h2{margin-left:-0.1rem; font-size:25px;}
	.area_subVisual i{font-size:12px;}
	.area_subVisual a{font-size:12px;}
	.area_subVisual a img{top:-2px; height:9px; margin-right:2px;}
	.area_subVisual .inr_subVisual > div > div{padding:30px 28% 38px 6%;}
	.snb{padding-top:20px; margin-bottom:13px;} 
	
	#footer{padding:70px 0 40px 0;}
	#footer address + a{top:-87px;}
	#footer address{margin:19px 0 27px 0;}
	
	.cpright{padding:11px 0; font-size:12px;}
}

@media all and (max-width:400px){
	body{font-size:13px;}
	
	#footer{padding:20px 0 40px 0;}
	#footer ul li{margin-bottom:7px;}
	#footer address{margin:19px 0 27px 0;}
	#footer ul + img{margin:25px 0 5px 0;}
	#footer address + a img{margin:19px auto;}
	#footer ul{display:none;}
	#footer address + a{top:-37px; right:5px; width:45px; height:45px;}
	
	#header nav ul li a{font-weight:700; font-size:20px;}
	#header nav .gnb_footer p{font-size:12px;}
	#header nav .gnb_footer a{margin-top:7px; padding:12px; font-size:12px;}
	
	.gnb_footer{margin:50px 0 0 0; padding-top:13px;}
	.area_btn a{width:45px; padding:14px 0; border-radius:8px;}
    .area_btn .kakaoch{height:50px;}
    .area_btn .kakaoch img{height:20px; width:20px;}
	.area_subVisual{height:397px;}
	.snb ul li a{padding: 11px 3px;font-size:12px;margin: 0 4px 4px 0;}
}

@media all and (-ms-high-contrast:none){
	.area_btn .kakao img{display:none;}
	.area_btn .kakao:after{content:''; display:block; width:26px; height:25px; margin:0 auto; background:url(../images/common/icon_kakaoch_w@pc.png) no-repeat 50% 0;}
}