@charset "utf-8";

.newGnbWrap.main,.newGnbWrap.main .inner{background:transparent;}
/*.main .inner{min-width:1560px;}*/

/* mainVisual */
.mainVisual{position:relative;display:flex;display:-ms-flexbox;align-items:center;-ms-align-items:center;justify-content:center;-ms-flex-pack:center;background:url('/new/en/asset/images/main/bg_visual.png')no-repeat center / 100% 100%;width:100%;height:100vh;text-align:center;}
.mainVisual .imgArea img{position:absolute;}
.mainVisual .imgArea img.obj01{bottom:38vh;left:14%;}
.mainVisual .imgArea img.obj02{bottom:11.1vh;left:9%;}
.mainVisual .imgArea img.obj03{bottom:39.9vh;right:23%;}
.mainVisual .imgArea img.obj04{bottom:33.5vh;right:15%;}
.mainVisual .txtArea .visualTxt{margin-top:-90px;font-size:120px;color:#008ed0;font-weight:bold;line-height:1.1;;}
.mainVisual .txtArea .visualTxt em{font-size:100px;}
.mainVisual .txtArea .disc{margin-top:40px;font-size:20px;color:#0079b1;}
.mainVisual .swiper-container-area{width:100%;height:100%;opacity:0}
.mainVisual .swiper-container-area .swiper-container{width:100%;height:100%;}
.mainVisual .swiper-container-area .swiper-container .swiper-slide .txtBox{opacity:0 !important;transition:1.5s all !important;}
.mainVisual .swiper-container-area .swiper-container .swiper-slide-active .txtBox{opacity:1 !important;}
.mainVisual .txtArea{display:flex;display:-ms-flexbox;align-items:center;-ms-align-items:center;justify-content:center;-ms-flex-pack:center;}
.mainVisual  .btnControl{position:absolute;left:0;bottom:170px;width:100%;text-align:center;display:flex;display:-ms-flexbox;align-items:center;-ms-align-items:center;justify-content:center;-ms-flex-pack:center;z-index:100}
.mainVisual .btnControl .btn{display:block;padding:0;width:9px;height:10px;background:no-repeat center;text-indent:-999em;margin:0 6px;}
.mainVisual .btnControl .btn.autoPlay{background-image:url('/new/en/asset/images/common/icon_stop.png');background-size:9px 10px;}
.mainVisual .btnControl .btn.autoPlay.stop{background:none;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 10px solid #0074c6;
}
.mainVisual .btnControl .swiper-pagination{position:relative;left:auto;bottom:auto;width:auto;}
.mainVisual .swiper-pagination-bullet{display:inline-block;margin:0 6px;width:10px;height:10px;background:#92d3ee;border-radius:50%;text-indent:-9999px;opacity:1;vertical-align:top;margin-top:2px;}
.mainVisual .swiper-pagination-bullet > span{overflow:hidden;position:absolute;left:-9999em;width:0;height:0;margin:0;padding:0;font-size:11px;line-height:1;text-indent:-9999em;}
.mainVisual .swiper-pagination-bullet-active{background:#008ed0;border-radius:6px;}

/* section */
.sectionWrap{position:relative;background-image: linear-gradient(to right, #d9f3ff, #cdf0f9);}
.sectionWrap .sectionArea{position:relative;height:100vh;background-image: linear-gradient(to right, #d9f3ff, #cdf0f9);z-index:10;}
.sectionWrap .sectionArea.fixed{position:fixed;left:0;top:0;width:100%;height:100%;transform:none !important;}
.sectionWrap .mainFirst{position:absolute;display:flex;display:-ms-flexbox;align-items:center;-ms-align-items:center;justify-content:center;-ms-flex-pack:center;width:100%;height:100vh;text-align:center;background:#d0f1fa;z-index:20;left:0;top:0;}
.sectionWrap .mainFirst .btnSkip{position:absolute;left:50%;top:80%;background:transparent;transform:translate(-50%,0)}
.sectionWrap .mainFirst .btnSkip:hover,
.sectionWrap .mainFirst .btnSkip:focus{border:1px solid #09c6dc}
.sectionWrap .mainFirst .set01{position:relative;}
.sectionWrap .mainFirst .set01 .text{font-size:30px;color:#008ed0;line-height:1.5;font-weight:bold;opacity:0;}
.sectionWrap .mainFirst .set01 .lineBox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;overflow:hidden;background:#d0f1fa;height:2px;}
.sectionWrap .mainFirst .set01 .lineBox:before{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:2px;background:#008ed0;}
.sectionWrap .mainFirst .set01 .lineBox:after{content:"";display:block;position:absolute;left:0;bottom:0;width:100%;height:2px;background:#008ed0;}
.sectionWrap .mainFirst .set02{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.sectionWrap .mainFirst .set02 .text{font-size:100px;color:#009bd6;font-weight:bold;white-space:nowrap;line-height:1.3;opacity:0;transform:translate(0,50px);
	background: linear-gradient(to right bottom, #008ed0, #00b3df);
	color: transparent;
	-webkit-background-clip: text;
}
.sectionWrap .section{position:absolute;left:0;top:0;display:flex;display:-ms-flexbox;align-items:center;-ms-align-items:center;justify-content:center;-ms-flex-pack:center;background:no-repeat center bottom / 100% auto;width:100%;height:100vh;text-align:center;z-index:10}
.sectionWrap .section.sec00{}
.sectionWrap .section.sec01{background-image:url('/new/en/asset/images/main/bg_section01.png');transform:translate(0,100%);}
.sectionWrap .section.sec02{background-image:url('/new/en/asset/images/main/bg_section03.png');transform:translate(100%,0);}
.sectionWrap .section.sec03{background-image:url('/new/en/asset/images/main/bg_section02.png');transform:translate(100%,0);}
.sectionWrap .section.sec04{background-image:url('/new/en/asset/images/main/bg_section05.png');padding-right: 150px;width:calc(100% + 150px);transform:translate(100%,0);}
.sectionWrap .section.sec04:before{content:"";position:absolute;right: 0;top:50%;transform:translateY(-50%);width:640px;height:640px;background-image:url('/new/en/asset/images/main/ico_earth.png');background-size:100% 100%;}
.sectionWrap .section.sec05{background-image:url('/new/en/asset/images/main/bg_section05.png');transform:translate(100%,0);}
.sectionWrap .section.sec06{background-image:url('/new/en/asset/images/main/bg_section05.png');background-color:#f0f9fa;transform:translate(0,100%);padding-bottom:70px;}






.sectionWrap .section .txtArea{z-index:10;position:relative;}
.sectionWrap .section .topTxt{font-size:26px;font-weight:bold;color:#ffffff;opacity:0;transform:translate(0,50px);position:relative;display:inline-block;}
.sectionWrap .section .moveTxtS{margin-top:26px;font-size:50px;color:#ffffff;letter-spacing:-7px;line-height:1.3;}
.sectionWrap .section .moveTxtS span{font-weight:300;transform:translate(0,20px);position:relative;display:inline-block;opacity:0;}
.sectionWrap .section .moveTxtB{margin-top:50px;font-size:180px;font-weight:bold;color:#ffffff;}
.sectionWrap .section .moveTxtB span{margin-left:-57px;line-height:1;opacity:0;transform:translate(0,50px);position:relative;display:inline-block;}
.sectionWrap .section .moveTxtB.num{font-size:320px;}
.sectionWrap .section .moveTxtB.num span{margin-left:-95px;}
.sectionWrap .section .moveTxtB.num span.comma{display:inline-block;margin:0 -17px 0 -100px;font-size:200px;}
.sectionWrap .section .moveTxtB span:first-child{margin-left:0;}
.sectionWrap .section .moveTxtB.line span{display:block;margin-top:23px;font-size:50px;letter-spacing:-3px;}
.sectionWrap .section .moveTxtB.line span:first-child{margin-top:0;}
.sectionWrap .section .bottomTxt{margin-top:5px;font-size:28px;color:#ffffff;opacity:0;transform:translate(0,50px);position:relative;}

.sectionWrap .section.sec03 .topTxt, .sectionWrap .section.sec03 .moveTxtS,
.sectionWrap .section.sec03 .moveTxtB, .sectionWrap .section.sec03 .bottomTxt{color:#008ed0;}
.sectionWrap .section.sec04 .txtArea{margin-top:-120px}
.sectionWrap .section.sec04 .topTxt, .sectionWrap .section.sec04 .moveTxtS,
.sectionWrap .section.sec04 .moveTxtB,
.sectionWrap .section.sec05 .topTxt, .sectionWrap .section.sec05 .moveTxtB{color:#00aa64;}
.sectionWrap .section.sec05 .moveTxtB{margin-top:90px;}
.sectionWrap .section.sec05 img.objSun{position:absolute;top:215px;left:50%;transform:translateX(-50%);opacity:0}

/* section - 06 */
.sectionWrap .section.sec06 .col{margin-left:90px;margin-bottom: 50px;}
.sectionWrap .section.sec06 .col.tal{transform:translate(0,100px);opacity:0;margin-left: 0;width: 480px;}
.sectionWrap .section.sec06 .col .imgArea{transform:translate(0,100px);opacity:0}
.sectionWrap .section.sec06 .col:first-child{margin-left:0;width: 690px;}
.sectionWrap .section.sec06 .txtArea{text-align:left;}
.sectionWrap .section.sec06 .msg{font-size:50px;color:#222222;text-align:left;line-height:1.5;letter-spacing:-3px;}
.sectionWrap .section.sec06 .msg em{letter-spacing:-2px;}
.sectionWrap .section.sec06 .disc{margin-top:19px;font-size:16px;color:#555555;line-height:1.9;font-weight:500;}
.sectionWrap .section.sec06 button{margin-top:43px;}

/* section - stroy */
.stroyWrap{background:#ffffff;position:relative;z-index:11;}
.stroy{display:block !important;padding:140px 0 160px;min-width:1560px;}
.stroy .titArea{margin-bottom:72px;text-align:center;opacity:0}
.stroy .title{font-size:42px;font-weight:bold}
.stroy .stroyBox{position:relative;display:flex;display:-ms-flexbox;flex-wrap:wrap;-ms-flex-wrap:wrap;margin:auto;width:1590px;text-align:left;}
.stroy .stroyBox:after{content:"";position:absolute;top:-140px;right:32px;width:134px;height:140px;background:url('/new/en/asset/images/main/ico_stroy_tree.png') no-repeat;background-size:100%;z-index:100;}
.stroy .stroyBox .item{margin:0 15px 30px;width:500px;height:460px;border-radius:18px;opacity:0}
.stroy .stroyBox .item a{display:block;width:100%;height:100%;padding:70px 60px 67px 60px;}
.stroy .stroyBox .item.earth{background:url('/new/en/asset/images/main/ico_stroy01.png') no-repeat #def9ff left 60px bottom 70px;background-size:85px 83px;}
.stroy .stroyBox .item.H2{background:url('/new/en/asset/images/main/ico_stroy02.png') no-repeat #dcfff3 left 60px bottom 70px;/* background-size:100px 97px; */}
.stroy .stroyBox .item.ship{background:url('/new/en/asset/images/main/ico_stroy03.png') no-repeat #f1fcff left 60px bottom 60px}
.stroy .stroyBox .item.solar{background:url('/new/en/asset/images/main/ico_stroy04.png') no-repeat #f1fcff left 60px bottom 60px}
.stroy .stroyBox .item.gas{background:url('/new/en/asset/images/main/ico_stroy05.png') no-repeat #f1fcff left 60px bottom 60px}
.stroy .stroyBox .item.charge{background:url('/new/en/asset/images/main/ico_stroy06.png') no-repeat #f1fcff left 60px bottom 60px}
.stroy .stroyBox .item.bulb{background:url('/new/en/asset/images/main/ico_stroy07.png') no-repeat #def9ff left 60px bottom 60px}
.stroy .stroyBox .item .social{font-size:16px;color:#008ed0;;}
.stroy .stroyBox .item .txt{margin-top:26px;font-size:26px;;font-weight:bold;line-height:1.5;word-break:keep-all}

.stroy .contBox{display:flex;display:-ms-flexbox;margin:70px auto 0;width:1560px;}
.stroy .contBox .box{position:relative;flex:1;margin-left:18px;padding:44px 58px;height:150px;text-align:left;background:url('/new/en/asset/images/common/icon_arrow_r.png') no-repeat right 55px center;background-size:21px 14px;border-radius:10px;}
.stroy .contBox .box:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid #dddddd;border-radius:10px;}
.stroy .contBox .box:first-child{margin-left:0}
.stroy .contBox .box:hover,
.stroy .contBox .box:focus{box-shadow:0 7px 20px rgba(0, 0, 0, 0.15);}
.stroy .contBox .box:hover:after,
.stroy .contBox .box:focus:after{border:0;}
.stroy .contBox .box .date{font-size:16px;color:#008ed0;}
.stroy .contBox .box .txt{margin-top:20px;font-size:20px;}