@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */
 .aos-init{ transform:translateY(50rem);opacity:0}
 .aos-init.aos-animate{-webkit-animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both}
 @-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50rem);transform:translateY(50rem);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
 @keyframes fade-in-bottom{0%{-webkit-transform:translateY(50rem);transform:translateY(50rem);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}

 /* visual */
.area_visual{position:relative;}
/* .area_visual .list li,
.area_visual .bx-viewport{height:-webkit-calc(100vh - -0px * 1); height:calc(100vh - -0px * 1);} */
.area_visual .list li{background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.area_visual .list li .text{position:absolute; left:0; top:50%; width:100%; color:#fff;transform: translateY(-50%);}
.area_visual .list li .text h2{line-height:1.2; margin-bottom:25rem; font-size:60rem}
.area_visual .list li .text p{line-height:1.8; font-size:22rem; font-weight:300}
.area_visual .video {position:relative;height: 0;  padding-bottom: 48.91%; overflow: hidden; ;}
.area_visual .video::after {display:none; content:''; background:rgba(0,0,0,0.3); width:100%; height:100vh; z-index:5; position:absolute; top:0; left:0;}
.area_visual .video video {object-fit: cover;width: 100vw;height: 100%;position: absolute;top: 0;left: 0;}
.area_visual .scroll_down{overflow:hidden; position:absolute; left:145rem; bottom:0; z-index:50;}
.area_visual .scroll_down{font-size:12rem; color:#fff;}
.area_visual .scroll_down span{display:block; position:relative; width:1px; height:85px; margin:10px auto 0; background:rgba(255,255,255,0.4);}
.area_visual .scroll_down span:before{content:''; display:block; position:absolute; top:0; left:0; width:1px; height:10px; background:#fff; animation:scroll 2s infinite;}

.wrapPlayer{ contain: content; position: relative; aspect-ratio: 16/9; background: #000; pointer-events: none; }
#player{ position: absolute; inset: 0; margin: auto; aspect-ratio: 16/20; width: 100%; height: auto; transition: .4s; }
#player:not(.loaded){ opacity: 0; }
@keyframes scroll{
	0%{top:0;}
	100%{top:100%;}
}

.txt_main{position:relative;}
.txt_main > span{display:block;margin-bottom:20rem;font-size:17rem;color:#fc8123;font-weight: 500;}
.txt_main > h3{font-size:57rem;font-weight: 100;line-height: 1;}
.txt_main > h3 b{font-weight:600}
.txt_main > p{margin-top:25rem; font-size:18rem; color:#555}

.txt_color01{color:#fc8123;}

.btn_more01{}
.btn_more01 a{position:relative; display:flex;align-items: center; padding-left:20rem; color:#fff;}
.btn_more01 a:before{content:''; z-index:1; position:absolute; left:0; display:block; width: 10rem; height: 10rem; transition: all .3s; background:#fc8123; border-radius:50%;}
.btn_more01 a:hover::before{ width:58rem; height:58rem; }
.btn_more01 a i{z-index:2;}
.btn_more01 a img{height:12rem; margin-left:7rem;}

.btn_more02 a{display:flex;align-items: center; padding-left:25rem; color: #fff;}
.btn_more02 span{position:relative; width:56rem; height:56rem; margin-right:40rem; background:#fc8123 url(../../images/main/btn_arr.svg) no-repeat center; background-size:16rem; border-radius:50%;}
.btn_more02 span:before{opacity:0.12;content:'';display:block;position:absolute;left: -25rem;top:-25rem;width:106rem;height:106rem;background:#fc8123;border-radius:50%; animation:circleScale 2s infinite cubic-bezier(0.23, 0.34, 0.89, 0.32);}
.btn_more02 div{font-size:15rem; color:#fc8123;}

@keyframes circleScale{
	from {
		transform: scale(.8, .8);
		opacity: .3;
	  }
	  to {
		transform: scale(1.1, 1.1);
		opacity: 0;
	  }
}

/* 솔루션 */
.area_solution{overflow:hidden; position:relative; padding:180rem 0 280rem 0; background:#202020}
.area_solution .txt_bg{line-height: 1; position:absolute; left:0; bottom:-70rem; color:#272727; font-size:199rem; font-weight:bold;}
.area_solution .txt_bg span{font-size:379rem}
.area_solution .txt_main{position:relative; padding-bottom:100rem}
.area_solution .txt_main h3{line-height: 1.5; color:#fff}
.area_solution .txt_main .btn01{position:absolute; right:0; bottom:0;padding-left: 30rem;}
.area_solution .txt_main .btn01 a{display:flex;align-items: center;color: #fff;}
.area_solution .txt_main .btn01 span{position:relative; width:65rem; height:65rem; margin-right: 60rem; background:#fc8123 url(../../images/main/btn_arr.svg) no-repeat center; background-size:16rem; border-radius:50%;}
.area_solution .txt_main .btn01 span:before{opacity:0.12; content:''; display:block; position:absolute; left:-30rem; top:-30rem; width:125rem; height:125rem; background:#fc8123; border-radius:50%; animation: circleScale 2s infinite cubic-bezier(0.23, 0.34, 0.89, 0.32);}
.area_solution .txt_main .btn01 div i{opacity:0.33; font-size:17rem; font-weight:100}
.area_solution .txt_main .btn01 div p{margin-top:7rem; font-size:32rem; font-weight:200}
.area_solution .list_solution{margin-top:100rem; padding:0 100rem;}
.area_solution .list_solution > li{position:relative;display:flex;align-items: flex-end;margin-bottom:200rem;}
.area_solution .list_solution > li:last-child{flex-direction: row-reverse;}
.area_solution .list_solution > li .img{position:relative;z-index: 2;box-shadow: 35rem 35rem 55rem rgb(0 0 0 / 30%);}
.area_solution .list_solution > li .img:before{z-index:-1; content:''; position:absolute; display:block; background:#fa8023}
.area_solution .list_solution > li:first-child .img{margin-top: 100rem;}
.area_solution .list_solution > li:first-child .img:before{left: -100rem;top: -100rem;width:570rem;height:490rem}
.area_solution .list_solution > li:last-child .img:before{right: -100rem; bottom:-100rem; width:570rem;height:490rem}

.area_solution .list_solution > li > .text{box-sizing:border-box; width:700rem;}
.area_solution .list_solution > li > .text h4{line-height: 1.4; margin:7rem 0 15rem 0; color:#fff; font-size:57rem; font-weight:500}
.area_solution .list_solution > li > .text p{font-size:18rem; color:#bcbcbc; font-weight:300}
.area_solution .list_solution > li:first-child > .text{padding-left:70rem; padding-bottom:80rem}

.area_solution .list_solution > li .list01{margin-top:50rem;}
.area_solution .list_solution > li .list01 > li{overflow: hidden; position:relative; line-height:1.7; padding-left:20rem; margin-bottom:7rem; text-align: left; font-size:19rem; color:#fff;}
.area_solution .list_solution > li .list01 > li a{cursor: pointer; color: #fff; transition: opacity .3s;}
.area_solution .list_solution > li .list01 > li:hover a{opacity: 0.4;}
.area_solution .list_solution > li .list01 > li:before{content:""; position:absolute; left:0; top:12rem; width:6rem; height:6rem; margin-right:5rem; background:#fff; border-radius:50%;}
.area_solution .list_solution > li .list01 > li:last-child{margin-bottom:0}
.area_solution .list_solution .btn_more01{margin-top:60rem;}

/* about */
.area_about{margin:170rem 0 220rem 0 ;}
.area_about .inr{width:1300rem; margin:0 auto;}
.area_about .txt_main > h3{line-height: 1;font-size:72rem;font-weight: 500;}
.area_about .txt_main > h3 b{font-weight:900;}
.area_about .txt_main > p{margin-bottom:80rem;}

.list_number {text-align:right;width: 100%;}
.list_number ul{display:flex;width:100%;justify-content: flex-end;}
.list_number ul li{margin-left:80rem; padding-left:80rem; text-align: left;}
.list_number ul li:last-child{border-left:1rem solid #e6e7e7;}
.list_number ul li span{font-size:17rem}
.list_number ul li p{position:relative;padding-right:60rem;font-size:155rem;font-weight:900;color:#222;line-height: 1;}
.list_number ul li p b{position:absolute; right:0; top:0; font-size:95rem; font-weight:900;}
.txt_bg{margin-top:120rem; padding:0 20rem; text-align:center;}
.txt_bg img{max-width:100%; margin:0 auto;}

/* 에너지 */
.area_energy{padding:180rem 0; background:#202020}
.area_energy .txt_main{}
.area_energy .txt_main > h3{color:#fff;}
.area_energy .txt_main > p{position:absolute; left:533rem; bottom:0; color:#bcbcbc; font-weight:300}
.area_energy .inr{width:1600rem; margin:0 auto;}
.area_energy .inr ul{display:flex;margin-top:85rem;flex-wrap: wrap;}
.area_energy .inr ul li{position:relative; width:33.3333%;}
.area_energy .inr ul li .img{position:relative; overflow:hidden;}
.area_energy .inr ul li img{width:100%; transform:scale(1); transition:0.5s}
.area_energy .inr ul li:hover .img img{transform:scale(1.05); transition:0.5s}
.area_energy .inr ul li .img:before {content: ""; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; border:9rem solid transparent; transition: border 0.15s ease-out;}
.area_energy .inr ul li:hover .img:before{border-color: #fc8123; border-width: 9px;}
.area_energy .inr ul li .text{box-sizing:border-box; position:absolute; left:0; padding:0 0 0 55rem;width:100%;  }
.area_energy .inr ul li .text.hidd{transition: all .2s;  bottom:70rem;}
.area_energy .inr ul li .text span{opacity:0.35; font-size:17rem; color:#fff;}
.area_energy .inr ul li .text p{font-size:25rem; color:#fff;}
.area_energy .inr ul li .hide{overflow: hidden; width: 100%; height: 100rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.area_energy .inr ul li .text.hover{padding:0;  position: absolute; left: 0;   transition: all .7s; opacity:0; transform:translate3d(0, 80rem, 0); text-align:center; }
.area_energy .inr ul li .text.hover p{font-size:35rem}
.area_energy .inr ul li:hover .text.hover{transform: translate3d(0, 0, 0);opacity: 1;}
.area_energy .inr ul li:hover .text.hidd{opacity: 0;}


/* 프로젝트 */
.area_project{padding-bottom:220rem; background:#202020}
.area_project .txt_main{margin-bottom:80rem;}
.area_project .txt_main > h3{line-height:1.4; color:#fff;}
.area_project .txt_main .btn_more02{position:absolute; right:0; bottom:20rem}
.area_project .list_project{display:flex; flex-wrap: wrap; gap:2%; width:1600rem; margin:0 auto;}
.area_project .list_project li{width:18.4%;}
.area_project .list_project li a{position:relative; box-sizing:border-box; display:block; width:100%; height:100%; padding:40rem 35rem; background:#262626; color:#fff;}
.area_project .list_project li a i{opacity:0.18; font-size:15rem}
.area_project .list_project li a p{display: -webkit-box; overflow: hidden; height:60rem; margin:15rem 0 30rem 0; color:#fff; font-size:18rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.area_project .list_project li a span{position:relative; opacity:0.4; padding-left:21rem; font-size:14rem; font-weight:300;}
.area_project .list_project li a span div{display: inline;}
.area_project .list_project li a span:before{content:''; position:absolute; left:0; top:1rem; display:block; width:16rem; height:16rem; background:url(../../images/main/icon_map_b.svg) no-repeat center;}
.area_project .list_project li a:hover span{opacity:1; color:#fc8123;}
.area_project .list_project li a:hover span:before{ background:url(../../images/main/icon_map_c.svg) no-repeat center;}
.area_project .list_project li a:before {content: ""; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; border:3rem solid transparent; transition: border 0.15s ease-out;}
.area_project .list_project li a:hover:before{border-color: #fc8123; border-width:3px;}



@media screen and (max-width:1919px){
	.area_project .list_project,
	.area_energy .inr{width:auto; margin:0 30rem}
}

@media screen and (max-width:1600px){
	.area_solution .list_solution > li .img{width:55%;}
	.area_solution .list_solution > li .img img{width:100%;}
	.area_solution .list_solution > li > .text{width:45%;}

}

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

	.area_visual .scroll_down{left:50%; transform: translateX(-50%);}
	
}


@media screen and (max-width:1340px){
	.area_about .inr{width:auto; margin:0 30rem}
}


@media screen and (max-width:1023px){
	.txt_main > h3{font-size:35rem}

    #header .btn_menu > span{background: #fff;}

    .area_visual .scroll_down{font-size: 10rem;}
    .area_visual .scroll_down span{height: 40rem;}
	.area_solution{padding-bottom:200rem;}
	.area_solution .txt_main{padding-bottom:30rem}
	.area_solution .txt_main .btn01{margin-top:60rem; position:static;}
	.area_solution .txt_main .btn01 div p{font-size:25rem}

	.area_solution .list_solution > li{flex-direction: column; margin-bottom:70rem}
	.area_solution .list_solution{padding:0 30rem; margin-top:0}
	.area_solution .list_solution > li .img{width:100%;}
	.area_solution .list_solution > li:first-child .img:before{top:-30rem}
	.area_solution .list_solution > li:first-child > .text{width:100%; padding:0; margin-top:35rem}
	.area_solution .list_solution > li:last-child{flex-direction: column;}
	.area_solution .list_solution > li > .text p br{display:none;}

	.area_solution .list_solution > li:last-child .img:before{bottom:-30rem}
	.area_solution .list_solution > li > .text{width:100%; margin-top:35rem}
	.area_solution .list_solution > li > .text h4{font-size:35rem}
	
	.area_solution .txt_bg{bottom:-30rem; font-size:130rem}
	.area_solution .txt_bg span{font-size:200rem}

	.list_number{margin-top:80rem}
	.list_number ul li p{font-size:100rem; padding-right:40rem}
	.list_number ul li p b{font-size:55rem}

	.area_about .txt_main > h3{font-size:55rem}

    .area_energy .txt_main > p{left: 50%;}
	.area_energy .inr ul li .text{padding-left:20rem; bottom:20rem;}
    .area_energy .inr ul li:hover .text.hover{transform: translate3d(0, 80rem, 0);opacity: 0;}
    .area_energy .inr ul li:hover .text.hidd{opacity: 1;}
    .area_energy .inr ul li .text.hidd{bottom: 0; padding: 0; top: 50%; transform: translateY(-50%); height: 70rem; width: 100%; text-align: center;}
    .area_energy .inr ul li .hide{display: none;}
	
	.area_project{padding-bottom:150rem}
	.area_project .list_project li{width:100%; margin-bottom:15rem}
	.area_project .list_project li a p{display: block; height:30rem; -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis;}

   
}

@media screen and (max-width:860px){
	.area_visual .list li .text h2{font-size:30rem}
	.area_visual .list li .text p{font-size:16rem}
	
	.area_solution{padding:80rem 0 130rem 0}
	.area_solution .txt_bg span{font-size:160rem}
	
	.area_solution .txt_main .btn01 div i{font-size:14rem}
	.area_solution .txt_main .btn01 span{width:40rem; height:40rem; margin-right:40rem; background-size:14rem}
	.area_solution .txt_main .btn01 span:before{top:-20rem; left:-20rem; width:80rem; height:80rem}

	.btn_more02 span{width:40rem; height:40rem; background-size:14rem;}
	.btn_more02 span:before{left:-20rem; top:-20rem; width:80rem; height:80rem}
	
	.area_about{margin:80rem 0}
	.area_about .txt_main > h3{font-size:45rem}
	.area_about .txt_main > p{font-size:16rem}

    .list_number ul li #counter-box,
    .list_number ul li p i.counter{transition-duration: 10s!important;}

	.area_energy{padding:80rem 0}
	.area_energy .txt_main > p{position:static;}
	.area_energy .inr ul{margin-top:30rem}
	.area_energy .inr ul li .text span{font-size:13rem}
	.area_energy .inr ul li .text p{font-size:16rem}
	
	.area_project{padding-bottom:80rem}
	.area_project .list_project li a{padding:15rem 20rem}
	.area_project .list_project li a p{margin:7rem 0 14rem 0}

}

@media screen and (max-width:540px){
	
	.btn_more01 a:before{width:40rem; height:40rem}
 
	.btn_more02 a{padding-left:10rem}
	.btn_more02 div{font-size:13rem}
	.btn_more02 span{width:30rem; height:30rem; margin-right:20rem; background-size: 9rem;}
	.btn_more02 span:before{left:-10rem; top:-10rem; width:50rem; height:50rem;}

    .area_visual .video{padding-bottom: 68%;}
    .area_visual .scroll_down{display: none;}
	.area_visual .list li .text h2{font-size:22rem}

	.txt_main > h3{font-size:22rem}
	.txt_main > h3 br{display:none;}
	.txt_main > span{margin-bottom:14rem; font-size:14rem}
	.area_energy .txt_main > p{font-size:15rem}
	
	.area_solution{padding:60rem 0 80rem 0}
    .area_solution .txt_main .btn01{margin-top: 30rem;}
	.area_solution .txt_main .btn01 div p{margin-top:0; font-size:18rem}
	.area_solution .list_solution .btn_more01{margin-top:40rem}
    .area_solution .txt_main .btn01 span{background-size: 9rem; margin-right: 23rem; width:30rem; height:30rem;}
    .area_solution .txt_main .btn01 span::before{left:-15rem; top:-15rem; width:60rem; height:60rem;}
    .area_solution .txt_main .btn01{padding-left: 15rem;}
	.area_solution .list_solution > li:first-child .img{margin-top:60rem}
	.area_solution .list_solution > li:first-child .img:before{top:-10%; left:-10%; width:90%; height:90%}
	.area_solution .list_solution > li:last-child .img:before{right:-10%; bottom:-10%; width:90%; height:90%}
	.area_solution .list_solution > li > .text h4{font-size:20rem}
	.area_solution .list_solution > li > .text p{font-size:15rem}
	.area_solution .list_solution > li .list01{margin-top:25rem}
	.area_solution .list_solution > li .list01 > li{font-size:15rem;}
	.area_solution .list_solution > li .list01 > li:before{width:4rem; height:4rem; top:10rem}
	.area_solution .txt_bg{bottom:-10rem; font-size:40rem}
	.area_solution .txt_bg span{font-size:90rem}
	
	.area_about{margin:60rem 0}
	.area_about .txt_main > h3{font-size:23rem}
	.area_about .txt_main > p{margin-bottom:45rem; font-size:15rem}
	.area_about .txt_main > p br{display:none;}
	
	.list_number{margin-top:40rem}
	.list_number ul li{ margin-left: 0; padding-left:0; box-sizing: border-box; width: auto;  text-align: right;}
	.list_number ul li:nth-child(1){padding-right: 30rem;}
    .list_number ul li:nth-child(2){padding-left: 20rem; }
    .list_number ul li span{font-size:13rem; display: block;}
	.list_number ul li p{padding-right:0; font-size:45rem}
	.list_number ul li p b{font-size:25rem; position: relative; top: -17rem;}
    .list_number ul li #counter-box, .list_number ul li p i.counter{display: inline-block; }
	.txt_bg{margin-top:40rem}
	
	.area_energy{padding:60rem 0}
	.area_energy .inr ul li{width:100%; margin-bottom:20rem}
	.area_energy .inr ul li .text{bottom:auto; top:50%; padding:0; transform: translateY(-50%); text-align:center;}
	.area_energy .inr ul li:hover .text p{font-size:16rem}
	
	.area_project .list_project, 
	.area_energy .inr{margin:0 20rem}
    .area_energy .inr ul li .text.hidd{height: 43rem;}
	.area_project{padding-bottom:40rem}
	.area_project .txt_main{margin-bottom:40rem}
	.area_project .txt_main .btn_more02{position:static; margin-top:40rem}
	.area_project .list_project li a i{font-size:14rem}
	.area_project .list_project li a p{font-size:16rem}
}