@charset "utf-8";
.newGnbWrap.main{opacity:0;transition:0.3s all}
.newGnbWrap.main.show{opacity:1;}
.newGnbWrap.main,
.newGnbWrap.main .inner{background:transparent;}
/* 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/mobile_cn/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: 41%;width: 25vw;}
.mainVisual .imgArea img.obj02{bottom: 6.1vh;left: -9%;width: 45vw;}
.mainVisual .imgArea img.obj03{bottom: 31.9vh;left: 6%;width: 14vw;}
.mainVisual .imgArea img.obj04{bottom: 27.5vh;left: 74%;width: 11vw;}
.mainVisual .txtArea .visualTxt{margin-top:-45px;font-size:42px;color:#008ed0;font-weight:bold;line-height:1.1;;}
.mainVisual .txtArea .disc{margin-top:20px;font-size:15px;color:#0079b1;line-height:1.4;}

.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/mobile_cn/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 .mainFirst .btnSkip{position:absolute;left:50%;top:80%;background:transparent;transform:translate(-50%,0);width:210px}
.sectionWrap .mainFirst .btnSkip:hover,
.sectionWrap .mainFirst .btnSkip:focus{border:1px solid #09c6dc}
.sectionWrap .sectionArea{position:relative;background-image: linear-gradient(to right, #d9f3ff, #cdf0f9);z-index:10;left:0;top:0;height:100vh;}
.sectionWrap .sectionArea.fixed{position:fixed;left:0;top:0;width:100%;height:100%;transform:none !important;}
.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;}
.mainFirst .set01{position:relative;}
.mainFirst .set01 .text{font-size:18px;color:#008ed0;line-height:1.5;font-weight:bold;opacity:0;}
.mainFirst .set01 .lineBox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;overflow:hidden;background:#d0f1fa;height:2px;}
.mainFirst .set01 .lineBox:before{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:1px;background:#008ed0;}
.mainFirst .set01 .lineBox:after{content:"";display:block;position:absolute;left:0;bottom:0;width:100%;height:1px;background:#008ed0;}
.mainFirst .set02{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.mainFirst .set02 .text{font-size:30px;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.sec01{background-image:url('/new/mobile_cn/asset/images/main/bg_section01.png');transform:translate(0,100%);}
.sectionWrap .section.sec02{background-image:url('/new/mobile_cn/asset/images/main/bg_section02.png');transform:translate(100%,0);}
.sectionWrap .section.sec03{background-image:url('/new/mobile_cn/asset/images/main/bg_section03.png');transform:translate(100%,0);}
.sectionWrap .section.sec04{padding-right: 150px;width:calc(100% + 150px);transform:translate(100%,0);}
.sectionWrap .section.sec04:before{content:"";position:absolute;left: 40%;top:50%;transform: translateY(-50%);width: 200px;height: 200px;background-image:url('/new/mobile_cn/asset/images/main/ico_earth.png');background-size: 100% auto;}

::before {}
.sectionWrap .section.sec05{transform:translate(100%,0);}
.sectionWrap .section.sec06{background-color:#f0f9fa;transform:translate(0,100%);}

.sectionWrap .section.newFooter{height:auto;background:#222222;top:100vh}

.sectionWrap .section .txtArea{z-index:10;position:relative;}
.sectionWrap .section .topTxt{font-size: 13px;font-weight:bold;color:#ffffff;opacity:0;transform:translate(0,50px);position:relative;display:inline-block;}
.sectionWrap .section .moveTxtS{margin-top: 20px;font-size: 24px;color:#ffffff;letter-spacing: -0.13em;line-height: 1.4;}
.sectionWrap .section .moveTxtS span{font-weight:300;transform: translate(0,10px);position:relative;display:inline-block;opacity:0;}
.sectionWrap .section .moveTxtB{margin-top: 40px;font-size: 60px;font-weight:bold;color:#ffffff;}
.sectionWrap .section .moveTxtB span{margin-left: -30px;line-height: 1.1;opacity:0;transform: translate(0,30px);position:relative;display:inline-block;}
.sectionWrap .section.sec04 .moveTxtB span{margin-left: -15px;}
.sectionWrap .section .moveTxtB.num{font-size: 107px;}
.sectionWrap .section .moveTxtB.num span{/* margin-left:-95px; */}
.sectionWrap .section .moveTxtB.num span.comma{display:inline-block;/* margin: 0 -17px 0 -50px; *//* font-size: 107px; */}
.sectionWrap .section .moveTxtB span:first-child{margin-left:0;}
.sectionWrap .section .moveTxtB.line span{display:block;margin-top: 10px;font-size: 24px;letter-spacing: -2px;margin-left:0;}
.sectionWrap .section .moveTxtB.line span:first-child{margin-top:0;}
.sectionWrap .section .bottomTxt{margin-top:5px;font-size: 13px;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 .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: 40px;}
.sectionWrap .section.sec05 .objSun{/* position:absolute; *//* top:215px; *//* left:50%; *//* transform: translateX(0); */width:65px;margin: 0 auto;}



/* section - 06 */
.sectionWrap .section.sec06{flex-direction:column}
.sectionWrap .section.sec06 .col{padding: 0 40px;text-align:center;}
.sectionWrap .section.sec06 .col .imgArea{transform:translate(0,100px);opacity:0;padding: 0 30px;margin-bottom:20px;}
.sectionWrap .section.sec06 .col .imgArea .wind{
	position: absolute;
	left: 38%;
	top: -5%;
	width: 40%;
	animation:wind 8s linear infinite;
}
@keyframes wind{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}

}
.sectionWrap .section.sec06 .col{padding: 0 40px;text-align:center;}
.sectionWrap .section.sec06 .col .imgArea{transform:translate(0,100px);opacity:0;padding: 0 30px;margin-bottom:20px;}
.sectionWrap .section.sec06 .col:first-child{margin-left:0;}
.sectionWrap .section.sec06 .txtArea{text-align: center;transform:translate(0,100px);opacity:0;}
.sectionWrap .section.sec06 .msg{font-size: 24px;color:#222222;text-align: center;line-height:1.5;letter-spacing: -2px;}
.sectionWrap .section.sec06 .msg em{letter-spacing:-2px;}
.sectionWrap .section.sec06 .disc{margin-top: 10px;font-size: 15px;color:#555555;line-height: 1.4;font-weight:500;}
.sectionWrap .section.sec06 button{width: 210px;margin: 25px auto 0 auto;transform:translate(0,100px);opacity:0}

/* section - stroy */
.stroyWrap{background:#ffffff;position:relative;z-index:11;}
.stroy{display:block !important;padding: 60px 0;}
.stroy .titArea{margin-bottom: 35px;text-align:center;transform:translate(0,50px);opacity:0;}
.stroy .title{font-size: 21px;font-weight:bold;}
.stroy .stroyBox{position:relative;padding:0 20px;transform:translate(0,50px);opacity:0;}
.stroy .stroyBox:after{content:"";position:absolute;top: -46px;right:32px;width: 45px;height: 47px;background:url('/new/mobile_cn/asset/images/main/ico_stroy_tree.png') no-repeat;background-size:100%;z-index:100;}
.stroy .stroyBox .item{border-radius:10px;}
.stroy .stroyBox .item ~ .item{margin-top:15px;}
.stroy .stroyBox .item a{height:130px;display:flex;justify-content:center;flex-direction:column;padding:0 20px;}
.stroy .stroyBox .item.earth{background:url('/new/mobile_cn/asset/images/main/ico_stroy01.png') no-repeat #def9ff right 25px center;background-size: 50px auto;}
.stroy .stroyBox .item.H2{background:url('/new/mobile_cn/asset/images/main/ico_stroy02.png') no-repeat #dcfff3 right 25px center;background-size: 50px auto;}
.stroy .stroyBox .item.ship{background:url('/new/mobile_cn/asset/images/main/ico_stroy03.png') no-repeat #f1fcff right 25px center;background-size: 50px auto;}
.stroy .stroyBox .item.solar{background: url('/new/mobile_cn/asset/images/main/ico_stroy04.png') no-repeat #f1fcff right 25px center;background-size: 50px auto;}
.stroy .stroyBox .item.gas{background: url('/new/mobile_cn/asset/images/main/ico_stroy05.png') no-repeat #f1fcff right 25px center;background-size: 50px auto;}
.stroy .stroyBox .item.charge{background: url('/new/mobile_cn/asset/images/main/ico_stroy06.png') no-repeat #f1fcff right 25px center;background-size: 50px auto;}
.stroy .stroyBox .item.bulb{background: url('/new/mobile_cn/asset/images/main/ico_stroy07.png') no-repeat #def9ff right 25px center;background-size: 40px auto;}
.stroy .stroyBox .item .social{font-size:13px;color:#008ed0;;}
.stroy .stroyBox .item .txt{margin-top:10px;font-size:15px;font-weight:bold;line-height:1.5;padding-right: 75px;word-break:keep-all}

.stroy .contBox{padding:0 20px;margin-top:30px;}
.stroy .contBox .box{position:relative;display:block;padding:20px 60px 20px 0;background:url("/new/mobile_cn/asset/images/main/icon_main_arr.png") no-repeat right 20px center;background-size:16px auto;}
.stroy .contBox .box ~ .box:before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:#dddddd;}
.stroy .contBox .box .date{font-size:13px;color:#008ed0;}
.stroy .contBox .box .txt{margin-top:10px;font-size:15px;font-weight:500;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
}