﻿/*??????*/
@media screen and  (min-width: 1201px)  {


/*???????????????*/
.about .info strong{left: -20%; opacity: 0; position: relative;}
.wrapper.active-page2 .about .info strong{left: 0;opacity: 1; transition: 0.5s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.5s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }
.about .info em{left: -20%; opacity: 0; position: relative;}
.wrapper.active-page2 .about .info em{left: 0;opacity: 1; transition: 0.6s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.6s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }
.about .info i{left: -20%; opacity: 0; position: relative;}
.wrapper.active-page2 .about .info i{left: 0;opacity: 1; transition: 0.7s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.7s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }
.about .info p{left: -20%; opacity: 0; position: relative;}
.wrapper.active-page2 .about .info p{left: 0;opacity: 1; transition: 0.8s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.8s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.about .item1{bottom: -20px; opacity: 0; position: relative;}
.wrapper.active-page2 .about .item1{bottom: 0;opacity: 1; transition: 0.9s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.9s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.about .item2{bottom: -60px; opacity: 0; position: relative;}
.wrapper.active-page2 .about .item2{bottom: 0;opacity: 1; transition: 1.1s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.1s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.about .item3{bottom: -100px; opacity: 0; position: relative;}
.wrapper.active-page2 .about .item3{bottom: 0;opacity: 1; transition: 1.3s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.3s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.about .item4{bottom: -140px; opacity: 0; position: relative;}
.wrapper.active-page2 .about .item4{bottom: 0;opacity: 1; transition: 1.5s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.5s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }


.about .pic{right: -20%; opacity: 0; position: relative;}
.wrapper.active-page2 .about .pic{right: 0;opacity: 1; transition: 1.6s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.6s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }


/*????????????*/
.features .pic{left: -20%; opacity: 0; position: relative;}
.wrapper.active-page3 .features .pic{left: 0;opacity: 1; transition: 1.2s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.2s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.features .info strong{right: -30%; opacity: 0; position: relative;}
.wrapper.active-page3 .features .info strong{right: 0;opacity: 1; transition: 1.3s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.3s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.features .info i{right: -30%; opacity: 0; position: relative;}
.wrapper.active-page3 .features .info i{right: 0;opacity: 1; transition: 1.4s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.4s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.features .item1{right: -60%; opacity: 0; position: relative;}
.wrapper.active-page3 .features .item1{right: 0;opacity: 1; transition: 1.5s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.5s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.features .item2{right: -90%; opacity: 0; position: relative;}
.wrapper.active-page3 .features .item2{right: 0;opacity: 1; transition: 1.6s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.6s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.features .item3{right: -110%; opacity: 0; position: relative;}
.wrapper.active-page3 .features .item3{right: 0;opacity: 1; transition: 1.7s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.7s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }




/*??????????????????*/
.ys .index-title{top: -18vh; opacity: 0; position: relative;}
.wrapper.active-page4 .ys .index-title{top: 0;opacity: 1; transition: 0.5s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.5s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }



.ys-list .item1{bottom: -20px; opacity: 0; position: relative;}
.wrapper.active-page4 .ys-list .item1{bottom: 0;opacity: 1; transition: 0.8s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.8s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.ys-list .item2{bottom: -60px; opacity: 0; position: relative;}
.wrapper.active-page4 .ys-list .item2{bottom: 0;opacity: 1; transition: 0.9s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.9s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.ys-list .item3{bottom: -100px; opacity: 0; position: relative;}
.wrapper.active-page4 .ys-list .item3{bottom: 0;opacity: 1; transition: 1s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.ys-list .item4{bottom: -140px; opacity: 0; position: relative;}
.wrapper.active-page4 .ys-list .item4{bottom: 0;opacity: 1; transition: 1s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }





/*??????   ????????????*/
.problem .problem-title{left: -20%; opacity: 0; position: relative;}
.wrapper.active-page5 .problem .problem-title{left: 0;opacity: 1; transition: 0.6s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.6s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.problem .item1{left: -20%; opacity: 0; position: relative;}
.wrapper.active-page5 .problem .item1{left: 0;opacity: 1; transition: 0.7s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.7s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.problem .item2{left: -20%; opacity: 0; position: relative;}
.wrapper.active-page5 .problem .item2{left: 0;opacity: 1; transition: 0.8s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.8s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.problem .item3{left: -20%; opacity: 0; position: relative;}
.wrapper.active-page5 .problem .item3{left: 0;opacity: 1; transition: 0.9s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.9s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.problem .item4{left: -20%; opacity: 0; position: relative;}
.wrapper.active-page5 .problem .item4{left: 0;opacity: 1; transition: 1s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.problem .item5{left: -20%; opacity: 0; position: relative;}
.wrapper.active-page5 .problem .item5{left: 0;opacity: 1; transition: 1.1s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.1s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.problem .item6{left: -20%; opacity: 0; position: relative;}
.wrapper.active-page5 .problem .item6{left: 0;opacity: 1; transition: 1.2s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.2s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }


.problem .pic{right: -20%; opacity: 0; position: relative;}
.wrapper.active-page5 .problem .pic{right: 0;opacity: 1; transition: 1.3s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.3s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }




/*????????????*/
.solution .pic{left: -20%; opacity: 0; position: relative;}
.wrapper.active-page6 .solution .pic{left: 0;opacity: 1; transition: 1.3s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.3s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.solution .info strong{right: -20%; opacity: 0; position: relative;}
.wrapper.active-page6 .solution .info strong{right: 0;opacity: 1; transition: 0.6s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.6s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.solution .info i{right: -20%; opacity: 0; position: relative;}
.wrapper.active-page6 .solution .info i{right: 0;opacity: 1; transition: 0.7s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.7s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.solution .info p{right: -20%; opacity: 0; position: relative;}
.wrapper.active-page6 .solution .info p{right: 0;opacity: 1; transition: 0.8s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.8s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }



.solution .item1{right: -20%; opacity: 0; position: relative;}
.wrapper.active-page6 .solution .item1{right: 0;opacity: 1; transition: 0.9s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.9s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.solution .item2{right: -20%; opacity: 0; position: relative;}
.wrapper.active-page6 .solution .item2{right: 0;opacity: 1; transition: 1s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.solution .item3{right: -20%; opacity: 0; position: relative;}
.wrapper.active-page6 .solution .item3{right: 0;opacity: 1; transition: 1.1s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.1s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.solution .item4{right: -20%; opacity: 0; position: relative;}
.wrapper.active-page6 .solution .item4{right: 0;opacity: 1; transition: 1.2s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.2s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }

.solution .item5{right: -20%; opacity: 0; position: relative;}
.wrapper.active-page6 .solution .item5{right: 0;opacity: 1; transition: 1.3s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 1.3s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }







/*????????????*/
.foot-bottom{bottom: -18vh; opacity: 0; position: relative;}
.wrapper.active-page7 .foot-bottom{bottom: -12vh;opacity: 1; transition: 0.5s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: 0.5s 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); }


}



@media screen and (min-height:600px)  and  (max-height:909px)  {
	.wrapper.active-page7 .foot-bottom{bottom: -8vh}

}



@media screen and  (height:700px)  {
	.about .info p{font-size: 19px;}
	.about-list{margin-top: 60px;}


	.ys {top: 24vh}
	.ys .index-title{margin-bottom: 48px;}


	.features{top: 20vh}
	.features-list dl{padding-bottom: 18px; margin-bottom: 18px;}

	.problem{top: 20vh}
	.solution .info p{font-size: 19px;}

	.foot{top: 31vh}
	.foot-top{padding: 30px 0 20px; margin-bottom: 16px;}
	.foot-info strong{font-size: 40px;}
	.wrapper.active-page7 .foot-bottom{bottom: -9vh}
	.message strong{font-size: 20px; line-height: 20px; margin-bottom: 16px}
	.foot-contact p{font-size: 17px;}
	.foot-contact p:last-child{margin-bottom: 0}

}