@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */
.area_visual{width: 100%; padding-left: 4.7%;}
.area_visual:after{content:""; display: block; position: absolute; top: 0; left: 0;z-index:-1; width: 95.3%; height:640px; background: #f9f8f7;}
.area_visual:before{content:""; display: block; clear: both;}
.area_visual .inr{position: relative; z-index:3; width: 100%; height: 100%;}
.area_visual .title{position: absolute; top: 50%; left: 0; z-index:60; width: 100%; padding:0 15px; text-align: center; transform:translateY(-50%); color:#fff; letter-spacing:1.4px;}
.area_visual .title h2{line-height:1.3; font-size:4.119rem; font-weight: 200; text-transform:uppercase; }
.area_visual .title p{margin-top: 1em; font-size: 1.067rem; font-weight: 200;}

.area_visual .visual_list{position: relative; width: 100%; height:653px; max-height:700px; min-height:420px; border-top:9px solid #d54f3e;}
.area_visual .visual_list li{float:left; position: relative; width: 50%; height:100%;}
.area_visual .visual_list li .box{overflow: hidden; display: block; position: relative; width: 100%; height: 100%;  background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.area_visual .visual_list li.visual01 .box{background-image:url(/images/main/img_visual01.jpg);}
.area_visual .visual_list li.visual02 .box{background-image:url(/images/main/img_visual02.jpg);}
.area_visual .visual_list li .visual_link{display: block; position: absolute;  z-index:10; min-width:310px; height: 126px; padding:40px 50px 0; color: #fff;}
.area_visual .visual_list li .visual_link i{display: block; font-size: 14px; letter-spacing:1px; text-transform:uppercase;}
.area_visual .visual_list li .tit span{display: inline-block; position: relative; padding:0 18px; font-weight: 300;}
.area_visual .visual_list li .tit span + span{margin-left: -4px;}
.area_visual .visual_list li .tit span + span:before{content:""; display: inline-block; position: absolute; top: 50%; left: 0; width: 1px; height: 12px; margin-top: -6px; background: rgba(255,255,255,.49);}
.area_visual .visual_list li .tit span:first-child{padding-left: 0;}
.area_visual .visual_list .visual01 a{bottom: 0; left: 0; width: 40.9%; background:#d54f3e; text-align: right; transform:translateY(-33%);}
.area_visual .visual_list .visual02 a{top: 0; right: 0; width:78.125%; background:#3b3636; transform:translateY(-33%);}

.area_visual .ctrl,
.area_visual .visual_paging{display: none;}

@media all and (min-width:1025px){
.area_visual .visual_list li.vis_reverse .btn_arw > span{padding-right: 0; padding-left: 99px;}
.area_visual .visual_list li.vis_reverse .btn_arw .arw{right: auto; left: 40px; background-image:url(/images/main/icon_arw_visual_reverse.png); background-position:0 50%;}
.area_visual .visual_list li.vis_reverse .btn_arw .arw.after{transform:translateX(20px);}
.area_visual .visual_list li.vis_reverse .btn_arw:hover .arw.before{transform:translateX(-20px);}
.area_visual .visual_list li.vis_reverse .btn_arw:hover .arw.after{transform:translateX(0px);}
.area_visual .visual_list li.vis_reverse .tit span:first-child{padding-left: 18px; padding-right: 0;}

.area_visual .visual_list li .box:before{content:'';display:block; position:absolute; top:0; left:-75%; z-index: 1; width:50%; height:100%; background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.1) 100%);background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.1) 100%); transform:skewX(-25deg); opacity: 0;}
.area_visual .visual_list li.cur .box:before{animation:shineEffect 1.4s ease-out;opacity: 1;}
@-webkit-keyframes shineEffect {100% {left: 125%;}}
@keyframes shineEffect {100% {left: 125%;}}
}

#container .inr{position: relative; max-width:1140px; padding:107px 0 130px;}
div[class^="sec"]{/*outline:1px solid red;*/}
div[class^="sec"] + div[class^="sec"]{margin-top: 160px;}
div[class^="sec"] .title{margin-bottom: 4em;}
div[class^="sec"] .title h3{font-size: 3.6rem; font-weight: 300; text-transform:uppercase; letter-spacing:1px; color:#303339; word-break:break-word;}

.sec01 .title{float: left; width: 36.2%;}
.sec01 .desc{float: right; width: 63.8%;}
.sec01 .title h3{margin-bottom: 1.1em;}
.sec01 .title h3 em{font-weight: 400;}
.sec01 .title p{margin-bottom: 3em; line-height:1.7; font-size: 1.333rem;}
.sec01 .desc li{position: relative; width: 80%; height: 243px; padding:20px 0; line-height:243px; box-shadow:17px 17px 49px rgba(68,68,68,.11); background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.sec01 .desc li > a{display: block; width: 100%; height: 100%;}
.sec01 .desc li + li{margin-top: 2em; margin-left: 20%;}
.sec01 .desc li h4{font-size: 1.533rem; font-weight: 400; text-transform:uppercase; letter-spacing:.5px;}
.sec01 .desc li h4 span{display: block; margin-top: 9px; font-size: 1.06rem; color:#cdcdcd;}
.sec01 .desc li .txt{position: absolute; top: 0; right: 0; width: 220px; height: 100%; padding:0 40px; background: #fff;}
.sec01 .desc li.desc01{background-image:url(/images/main/img_sec0101.jpg);}
.sec01 .desc li.desc02{background-image:url(/images/main/img_sec0102.jpg);}
.sec01 .btn_arw .arw{right: 26px; background-image:url(/images/common/icon_arw_red.png);}

.sec02 .title{text-align: center;}
.sec02 .title h3{display: inline-block; padding:0 21px;}
.sec02 .title h3 em{color:#c0c1c1}
.sec02 .tab_list{font-size: 0; margin-left: -20px;}
.sec02 .tab_list li{display: inline-block; margin:0 20px; font-size: 1.25rem; font-weight: 400;}
.sec02 .tab_list li.cur > a{color:#d44937;}
.sec02 .tab_cnt{margin-top: 2.2em; width: 100%;}
.sec02 .tab_cnt ul{display: none; width: 102.2%;}
.sec02 .tab_cnt ul.cur{display: block;}
.sec02 .tab_cnt ul > li{float: left; position: relative; width:22.8%; margin:0 2.2% 2.2% 0;}
.sec02 .tab_cnt ul > li:before{content:""; display: block; width: 100%; padding-top: 62.2%;}
.sec02 .tab_cnt ul > li > a{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sec02 .tab_cnt ul > li > a i{display: block; height:100%; background-size:cover; background-repeat:no-repeat; background-position:50%; -webkit-filter: grayscale(100%); filter: grayscale(100%); transition:all 300ms;}
.sec02 .tab_cnt ul > li > a:hover i{-webkit-filter: grayscale(0); filter: grayscale(0);}
.sec02 .btn_arw .arw{right: 26px; background-image:url(/images/common/icon_arw_gray.png);}

span[class^="bg"]{display: block; position: absolute; top: 0; z-index:-1;  box-sizing:content-box; background:transparent;}
span[class^="bg"] .img{display: block;width: 100%; height: 100%;}
.bg1{left: -13.1%; width: 475px; height: 490px;}
.bg2{left: -19.1%; width: 130px; padding-top: 433.188px; height: 115px;}
.bg3{right: -13.4%; padding-top: 342px; width: 313px; height: 323px;}
.bg1 .img{background:url(/images/main/bg_1.png);}
.bg2 .img{background:url(/images/main/bg_2.png);}
.bg3 .img{background:url(/images/main/bg_3.png);}

@media all and (max-width:1500px){
	.area_visual .visual_list li .visual_link{height: 106px; padding: 30px 41px 0;}
	.area_visual .title h2{font-size: 3.5rem;}
	.area_visual .title p{margin-top: .7em;	}
	
	#container .inr{padding-left: 40px; padding-right: 40px;}
	div[class^="sec"] .title{margin-bottom: 3em;}
	div[class^="sec"] .title h3{font-size: 3.1rem;}
	.sec01 .title h3{margin-bottom: .8em;}
	.sec01 .title p{margin-bottom: 2em; font-size: 1.15rem;}
	.sec01 .desc li{width: 90%;height: 220px; line-height:220px;}
	.sec01 .desc li + li{margin-left: 10%; margin-top: 1.2em;}
	.sec01 .desc li .txt{padding: 0 30px;}
	
	.sec02 .tab_cnt{margin-top: 2em;}
	.sec02 .tab_cnt ul > li{width: 31.1333%;}
	
	.bg2{left: 0;}
}

@media all and (max-width:1340px){
	.sec01 .title{width: 32%;}
	.sec01 .desc{width: 68%; padding-left: 20px;}
	.sec01 .desc li .txt{width: 205px;}
	
	.sec02 .tab_list{margin-left: -15px;}
	.sec02 .tab_list li{margin: 0 15px; font-size: 1.15rem;}
}

/*mobile*/
@media all and (max-width:1024px){
		.area_visual{padding-left: 0;}
	.area_visual .visual_list{overflow: hidden; position: relative; width: 100%; height: 529px; border-top-width:0;}
	.area_visual .visual_list li{float: none; position: absolute; left: 0; top: 0; width: 100%; height:100%; transform: translateX(-100%); transition:transform 600ms ease-in-out 600ms;}
	.area_visual .visual_list li:before {content:""; position:absolute; top:0; left:0; bottom:0; z-index:1; width:100%; height:100%; background:#000; transform:translateX(0%); transition:transform .6s .6s ease-in-out;}
	.area_visual .visual_list li.cur {z-index:1; transform:translateX(0%); transition:transform 600ms ease-in-out;}
	.area_visual .visual_list li.cur:before {transform:translateX(100%);}
	.area_visual .visual_list li.visual01:before {background-color:#3b3636;}
	.area_visual .visual_list li.visual02:before {background-color:#d54f3e;}
	.area_visual .visual_list li .visual_link{top:auto; bottom:0; left:0; z-index:0; height: 86px; padding: 22px 28px 0; text-align:left; /*transform:none;*/}
	.area_visual .title{top: 43%; letter-spacing:.5px;}
	.area_visual .title h2{font-size: 3rem;}
	.area_visual .title h2 p{margin-top: .5em; font-size: 1rem; font-weight: 300;}
	
	.area_visual .visual_paging{display: block; padding:8px 28px; font-size: 1.1rem; font-weight:200; color: #fff;}
	.area_visual .visual_paging .visual_cur{font-weight: 400;}
	
	#container .inr{padding:92px 30px 114px;}
	div[class^="sec"] .title{margin-bottom: 2.5em;}
	div[class^="sec"] .title h3{font-size: 2.6rem;}
	.sec01 .title h3{margin-bottom: .5em;}
	.sec01 .title p{margin-bottom: 1.5em; font-size: 1.1rem;}
	.sec01 .desc li{height: 180px;line-height:180px;}
	.sec01 .desc li .txt{width: 195px; padding: 0 25px;}
	
}
@media all and (max-width:840px){
	.sec01{margin-bottom: 80px;}
	.sec01 .title,
	.sec01 .desc{float: none; width: 100%; padding-left: 0;}
	.sec01 .title{text-align: center;}
	.sec01 .title br{display: none;}
	.sec01 .title h3{margin-bottom: .3em;}
	.sec01 .title p{margin-bottom: .5em;}
	.sec01 .desc li{float: left; width: 48%; line-height:1.4;}
	.sec01 .desc li + li{margin-top:3em; margin-left: 4%;}
	.sec01 .desc li .txt{top: 100%; left: 0; width: 100%; height: auto; padding:15px 0; background:transparent; text-align:center; text-align: left;}
	.sec01 .desc li h4{font-size:1.3rem;}
	.sec01 .desc li h4 span{font-size:1rem;}
	
	.sec02 .title h3{display: block; padding: 0;}
	.sec02 .tab_cnt{margin-top: 1.2em;}
	.sec02 .tab_cnt ul > li:before{padding-top: 80.2%;}
	.sec02 .tab_list{margin-left: -6px;}
	.sec02 .tab_list li{margin: 0 6px;border: 1px solid #d6d6d6; font-size: 1rem; padding: 8px 10px;}
	.sec02 .tab_list li.cur{border-color:#d44937;}
	
	.bg1{left: 0; width: 59%; height: 288px;}
	.bg2{left: 0; width: 130px; padding-top: 230px;}
	.bg3{right: 0; padding-top: 342px; width: 29%;}
}

@media all and (max-width:600px){
	.area_visual .visual_list{height: 450px; max-height:none;}
	.area_visual .visual_list li .tit span{padding:0 8px;}
	.area_visual .visual_list li .tit span + span:before{opacity: .3; left: -1px;}
	.area_visual .visual_list li .visual_link{width:40.2%; /*padding-left: 16px;*/}
	.area_visual .title h2{font-size: 2.5rem;}
	
	#container .inr{padding:42px 15px 74px;}
	div[class^="sec"] .title h3{font-size: 2rem;}
	
	.sec01 .title h3 br{display: block;}
	.sec01 .desc li{width: 48.5%;}
	.sec01 .desc li h4 span{margin-top:5px;}
	.sec01 .desc li + li{margin-left: 3%;}
	
	.sec02 .tab_list{margin-left: -5px;}
	.sec02 .tab_list li {margin: 5px; border: 1px solid #d6d6d6; font-size: .9rem; padding: 7px 7px;}
	.sec02 .tab_cnt ul{width: 103%;}
	.sec02 .tab_cnt ul > li{width: 47%; margin:0 3% 3% 0;}
	.sec02 .tab_cnt ul > li:before{padding-top: 64%;}
	
}
@media all and (max-width:420px){
	.sec01 .desc li{height:150px;}
	.sec01 .desc li h4{font-size:1.2rem; font-weight: 400; letter-spacing:0;}
}