/* css*/
body {-webkit-tap-highlight-color: transparent;line-height:1.5;background:#ffffff;font-size:12px;font-family: pingfang SC,sans-serif,Roboto,HelveticaNeue,Arial,sans-serif;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,button,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
ol,ul{list-style:none;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup {
    font-style:normal;
}
input,button,textarea,select,optgroup,option {
    font-family:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
    *font-size:100%;
}
fieldset,img,a img,:link img,:visited img{border:0;}
a{text-decoration:none;}
a:hover {text-decoration:underline;}
:focus {outline:0;}
table{border-collapse:collapse;border-spacing:0;}
caption,th {text-align:left;}
sup,sub {font-size:100%;vertical-align:baseline;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
.clear,.clearfix:after {clear:both;height:0;overflow:hidden;display:block;}
.clearfix:after {visibility:hidden;content:".";}
.clearfix{*zoom:1;}

/*common */
html,body{
	height: 100%;
	overflow: hidden;
}
.swiper-container,.swiper-wrapper{
	height: 100%;
	position: relative;
}
.swiper-wrapper{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

}
.page{
	height: 100%;
}
.down{
	width: 1rem;
	height: 0.8rem;
	background: url('../img/down1.png');
	background-size: 100% 100%;
	position: absolute;
	bottom: 0.1rem;
	left: 50%;
	margin-left: -0.5rem;
	z-index: 999;
	-webkit-animation: down 0.5s alternate infinite;
	-o-animation: down 0.5s alternate infinite;
	animation: down 0.5s alternate infinite;
	display: none;
	opacity: 0.5;
}
@keyframes down
{
  0%   {bottom:0.1rem;}
  100% {bottom: 0.2rem;}
}
.start .loading{
            width: 0.8rem;
            height: 0.4rem;
            margin: 0 auto;
            margin-top:100px;
            position: absolute;
            bottom: 30%;
            left: 50%;
			margin-left: -0.4rem;
        }
.start .loading span{
            display: inline-block;
            width: 0.08rem;
            height: 100%;
            background: #fff;
            -webkit-animation: load 1s ease infinite;
        }
@-webkit-keyframes load{
    0%,100%{
        height: 0.4rem;
        background: #fff;
    }
    50%{
        height: 0.7rem;
        margin: -0.15rem 0;
        background: #fff;
    }
}
.start .loading span:nth-child(2){
    -webkit-animation-delay:0.2s;
}
.start .loading span:nth-child(3){
    -webkit-animation-delay:0.4s;
}
.start .loading span:nth-child(4){
    -webkit-animation-delay:0.6s;
}
.start .loading span:nth-child(5){
    -webkit-animation-delay:0.8s;
}

.loadingtext{
	font-size: 0.4rem;
	color: #fff;
	position: absolute;
	top: 75%;
	text-align: center;
	width: 100%;
	-webkit-animation: loading 1s ease infinite;
}
@-webkit-keyframes loading{
    0%,100%{
        opacity: 0.5
    }
    50%{
        opacity: 1;
    }
}
.bg1{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #de002b;
}
.bg1 .rect{
	background: #fff;
	width: 7.5rem;
    height: 30rem;
    -webkit-transform: rotate(30deg) translate(50%,0);
    -moz-transform: rotate(30deg) translate(50%,0);
    -ms-transform: rotate(30deg) translate(50%,0);
    -o-transform: rotate(30deg) translate(50%,0);
    transform: rotate(30deg) translate(50%,0);
    position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -15rem;
	margin-left: -3.75rem;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.bg1.s1 .rect{
	background: #fff;
	width: 7.5rem;
    height: 30rem;
    -webkit-transform: rotate(30deg) translate(-50%,0);
    -moz-transform: rotate(30deg) translate(-50%,0);
    -ms-transform: rotate(30deg) translate(-50%,0);
    -o-transform: rotate(30deg) translate(-50%,0);
    transform: rotate(30deg) translate(-50%,0);
    position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -15rem;
	margin-left: -3.75rem;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.bg1.s2 .rect{
	background: #fff;
	width: 7.5rem;
    height: 30rem;
    -webkit-transform: rotate(60deg) translate(0,0) scale(1.5,1);
    -moz-transform: rotate(60deg) translate(0,0) scale(1.5,1);
    -ms-transform: rotate(60deg) translate(0,0) scale(1.5,1);
    -o-transform: rotate(60deg) translate(0,0) scale(1.5,1);
    transform: rotate(60deg) translate(0,0) scale(1.5,1);
    position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -15rem;
	margin-left: -3.75rem;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.bg1.s3 .rect{
	background: #fff;
	width: 7.5rem;
    height: 30rem;
    -webkit-transform: rotate(30deg) translate(0,0) scale(1.1,1);
    -moz-transform: rotate(30deg) translate(0,0) scale(1.1,1);
    -ms-transform: rotate(30deg) translate(0,0) scale(1.1,1);
    -o-transform: rotate(30deg) translate(0,0) scale(1.1,1);
    transform: rotate(30deg) translate(0,0) scale(1.1,1);
    position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -15rem;
	margin-left: -3.75rem;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.bg1.s4 .rect{
	background: #fff;
	width: 7.5rem;
    height: 30rem;
    -webkit-transform: rotate(-60deg) translate(0,0) scale(1.1,1);
    -moz-transform: rotate(-60deg) translate(0,0) scale(1.1,1);
    -ms-transform: rotate(-60deg) translate(0,0) scale(1.1,1);
    -o-transform: rotate(-60deg) translate(0,0) scale(1.1,1);
    transform: rotate(-60deg) translate(0,0) scale(1.1,1);
    position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -15rem;
	margin-left: -3.75rem;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.bg1.s5{
	background:#000;
}
.bg1.s5 .rect{
	background: #000;
}
/*page1*/
#p1{
	position: relative;
}
.p1{
	background: #de002b;
}
.p1.s1{
	background: #fff;
}
.p1.s2{
	background: #000;
}
.p1.s3{
	background: #000 url(../img/logo.jpg) center center no-repeat;
	background-size: 5.83rem 2.88rem
}
.p1 .white1{
	width: 7.5rem;
    height: 30rem;
    -webkit-transform: rotate(0deg) translate(100%,0);
    -moz-transform: rotate(0deg) translate(100%,0);
    -ms-transform: rotate(0deg) translate(100%,0);
    -o-transform: rotate(0deg) translate(100%,0);
    transform: rotate(0deg) translate(100%,0);
    position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -15rem;
	margin-left: -3.75rem;
    background: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.p1 .white1.s0{
	width: 7.5rem;
    height: 30rem;
    -webkit-transform: rotate(40deg) translate(50%,0);
    -moz-transform: rotate(40deg) translate(50%,0);
    -ms-transform: rotate(40deg) translate(50%,0);
    -o-transform: rotate(40deg) translate(50%,0);
    transform: rotate(40deg) translate(50%,0);
    position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -15rem;
	margin-left: -3.75rem;
    background: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.p1 .white1.s1{
    -webkit-transform: rotate(40deg) translate(-50%,0);
    -moz-transform: rotate(40deg) translate(-50%,0);
    -ms-transform: rotate(40deg) translate(-50%,0);
    -o-transform: rotate(40deg) translate(-50%,0);
    transform: rotate(40deg) translate(-50%,0);
}
.p1 .white1.s2{
    -webkit-transform: rotate(40deg) translate(0,0);
    -moz-transform: rotate(40deg) translate(0,0);
    -ms-transform: rotate(40deg) translate(0,0);
    -o-transform: rotate(40deg) translate(0,0);
    transform: rotate(40deg) translate(0,0);
}
.p1 .white1.s3{
    -webkit-transform: rotate(40deg) translate(0,0) scale(2,0.3);
    -moz-transform: rotate(40deg) translate(0,0) scale(2,0.3);
    -ms-transform: rotate(40deg) translate(0,0) scale(2,0.3);
    -o-transform: rotate(40deg) translate(0,0) scale(2,0.3);
    transform: rotate(40deg) translate(0,0) scale(2,0.3);
}
.p1 .white1.s4{
	background: #de002b;
	width: 1.5rem;
	height: 1.5rem;
	left: auto;
	top: auto;
	right: 10%;
	bottom: 25%;
	margin-top: 0;
	margin-left: 0;
	-webkit-transform: rotate(0deg) translate(0,0) scale(1,1);
    -moz-transform: rotate(0deg) translate(0,0) scale(1,1);
    -ms-transform: rotate(0deg) translate(0,0) scale(1,1);
    -o-transform: rotate(0deg) translate(0,0) scale(1,1);
    transform: rotate(0deg) translate(0,0) scale(1,1);
}
.p1 .white1.s5{
	background: #000;
	width: 7.5rem;
    height: 30rem;
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	margin-top: -15rem;
	margin-left: -3.75rem;
	-webkit-transform: rotate(15deg) translate(60%,0) scale(2,1);
    -moz-transform: rotate(15deg) translate(60%,0) scale(2,1);
    -ms-transform: rotate(15deg) translate(60%,0) scale(2,1);
    -o-transform: rotate(15deg) translate(60%,0) scale(2,1);
    transform: rotate(15deg) translate(60%,0) scale(2,1);
}
.p1 .white1.s6{
	background: #000;
	width: 7.5rem;
    height: 30rem;
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	margin-top: -15rem;
	margin-left: -3.75rem;
	-webkit-transform: rotate(15deg) translate(-60%,0) scale(2,1);
    -moz-transform: rotate(15deg) translate(-60%,0) scale(2,1);
    -ms-transform: rotate(15deg) translate(-60%,0) scale(2,1);
    -o-transform: rotate(15deg) translate(-60%,0) scale(2,1);
    transform: rotate(15deg) translate(-60%,0) scale(2,1);
}
.p1 .white1.s7{
	background: #fff;
	width: 7.5rem;
    height: 30rem;
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	margin-top: -15rem;
	margin-left: -3.75rem;
	-webkit-transform: rotate(70deg) translate(0,0);
    -moz-transform: rotate(70deg) translate(0,0);
    -ms-transform: rotate(70deg) translate(0,0);
    -o-transform: rotate(70deg) translate(0,0);
    transform: rotate(70deg) translate(0,0);
}
.p1 .text{
	font-size: 5rem;
	font-weight: 700;
	line-height: 6rem;
	font-style: italic;
	text-align: center;
	height: 6rem;
	position: absolute;
	opacity: 0.8;
	display: none;
}
.p1 .text.s1{
	font-size: 3rem;
	font-weight: 700;
	line-height: 3rem;
	font-style: italic;
	text-align: center;
	height: 9rem;
	width: 5rem;
	position: absolute;
	bottom: 10%;
	right: 0%;
	opacity: 0.8;
}
.p1 .text.s2{
	width: 7.5rem;
	line-height: 3rem;
	height: 3rem;
	bottom: 50%;
	left: 50%;
	margin-left: -3.75rem;
	margin-bottom: -1.5rem;
}
.p1 .text.s3{
	width: 2rem;
	line-height: 2rem;
	font-size: 2rem;
	height: 8rem;
	bottom: 50%;
	left: 50%;
	margin-left: -1rem;
	margin-bottom: -4rem;
}
.p1 .text.s4{
	width: 7.5rem;
	line-height: 6rem;
	font-size: 6rem;
	height: 6rem;
	bottom: 50%;
	left: 50%;
	margin-left: -3.75rem;
	text-align: left;
	margin-bottom: -3rem;
}
.p1 .text.s5{
	color: #de002b;
	width: 4rem;
	line-height: 4rem;
	font-size: 4rem;
	height: 8rem;
	bottom: 50%;
	left: 50%;
	margin-left: -2.4rem;
	text-align: center;
	margin-bottom: -4rem;
	opacity: 1;
}
.p1 .text.s6{
	color: #000;
	width: 7.5rem;
	line-height: 2.5rem;
	font-size: 2.5rem;
	height: 2.5rem;
	bottom: 50%;
	left: 50%;
	margin-left: -3.75rem;
	text-align: center;
	margin-bottom: -1.25rem;
	opacity: 1;
}
.p1 .text.s7{
	color: #fff;
	width: 3rem;
	line-height: 3rem;
	font-size: 3rem;
	height: 9rem;
	bottom: 50%;
	left: 50%;
	margin-left: -1.5rem;
	text-align: center;
	margin-bottom: -4.5rem;
	opacity: 1;
}
.p1 .text.s8{
	color: #de002b;
	width: 7.5rem;
	line-height: 3rem;
	font-size: 3rem;
	height: 6rem;
	bottom: 50%;
	left: 50%;
	margin-left: -3.75rem;
	text-align: center;
	margin-bottom: -3rem;
	opacity: 1;
}
.p2{
	position: relative;
	width: 7.5rem;
	height: 100%;
	overflow: scroll;
	overflow-x:visible;
	-webkit-overflow-scrolling: touch;
}
.p2::-webkit-scrollbar{
	display: none;
}
.p2 .box{
	width: 30rem;
	height: 100%;
	background: url("../img/bg.png") no-repeat center center;
	background-size: 95%;
	position: relative;
}
@media screen and (max-width: 320px) {
    .p2 .box{
		width: 24rem;
		height: 100%;
		background: url("../img/bg.png") no-repeat center center;
		background-size: 95%;
		position: relative;
	}
}
.p2 .down{
	left: auto;
	right: 50%;
	margin-left:0;
	margin-right: -0.5rem;
}
.p2 .right{
	width: 0.5rem;
	height: 0.5rem;
	background: url('../img/right.png');
	background-size: 100%;
	position: absolute;
	left: 5%;
	bottom: 5%;
	-webkit-animation: right 0.5s alternate infinite;
	-o-animation: right 0.5s alternate infinite;
	animation: right 0.5s alternate infinite;
}
.p2 .down1{
	width: 0.5rem;
	height: 0.5rem;
	background: url('../img/down2.png');
	background-size: 100%;
	position: absolute;
	right: 3.6rem;
	bottom: 2%;
	-webkit-animation: down 0.5s alternate infinite;
	-o-animation: down 0.5s alternate infinite;
	animation: down 0.5s alternate infinite;
}
@keyframes right
{
  0%   {left: 2%;}
  100% {left: 1%;}
}
.p3{
	position: relative;
}
.p3 .icon{
	width: 1.15rem;
	height: 1.09rem;
	background: url("../img/icon2.png") no-repeat;
	background-size: 100%;
	position: absolute;
	top: 5%;
	right: 10%;
}
.p3 .content{
	width: 6.3rem;
	height: 10rem;
	position: absolute;
	top: 50%;
	width: 6.3rem;
	left: 50%;
	margin-left: -3.15rem; 
	margin-top: -5rem;
}
.p3 .title{
	font-size: 0.9rem;
	line-height: 1rem;
	font-weight: 700;
}
.p3 .photo{
	margin: 0.1rem 0;
}
.p3 .photo img{
	width: 100%;
}
.p3 .text{
	font-size: 0.32rem;
	line-height: 0.5rem;
}
.p4{
	position: relative;
}
.p4 .icon{
	width: 1.05rem;
	height: 1.56rem;
	background: url("../img/icon3.png") no-repeat;
	background-size: 100%;
	position: absolute;
	top: 5%;
	right: 10%;
	z-index: 1;
}
.p4 .content{
	width: 6.3rem;
	height: 10rem;
	position: absolute;
	top: 50%;
	width: 6.3rem;
	left: 50%;
	margin-left: -3.15rem; 
	margin-top: -5rem;
}
.p4 .title{
	font-size: 0.9rem;
	line-height: 1rem;
	font-weight: 700;
}
.p4 .photo{
	margin: 0.1rem -0.6rem;
}
.p4 .photo img{
	width: 100%;
}
.p4 .text{
	margin: 0.3rem 0;
	font-size: 0.32rem;
	line-height: 0.5rem;
}
.p5{
	position: relative;
}
.p5 .icon{
	width: 0.88rem;
	height: 1.53rem;
	background: url("../img/icon4.png") no-repeat;
	background-size: 100%;
	position: absolute;
	top: 5%;
	right: 10%;
}
.p5 .content{
	width: 6.3rem;
	height: 10rem;
	position: absolute;
	top: 50%;
	width: 6.3rem;
	left: 50%;
	margin-left: -3.15rem; 
	margin-top: -5rem;
}
.p5 .title{
	font-size: 0.9rem;
	line-height: 1rem;
	font-weight: 700;
}
.p5 .photo{
	margin: 0.1rem;
}
.p5 .photo img{
	width: 100%;
}
.p5 .text{
	margin: 0.3rem 0;
	font-size: 0.32rem;
	line-height: 0.5rem;
	padding-left: 1.2rem;
}
.p6{
	background:#000 url("../img/text2.jpg") center center no-repeat;
	background-size: 6.44rem;
	position: relative;
}
#p9{
	background: #000;
	position: relative;
	width: 100%;
	height: 100%;
	
}
#p9 .logo1{
	width: 100%;
	height: 1.31rem;
	background: #000 url('../img/logo1.jpg?1') center center no-repeat;
	background-size: auto 100%;
	position: absolute;
	z-index: 100;
	top: 50%;
	margin-top: -0.65rem;
	left: 0;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
#p9 .logo2{
	width: 100%;
	height: 0.85rem;
	background: #000 url('../img/logo2.jpg') center center no-repeat;
	background-size: auto 100%;
	position: absolute;
	z-index: 60;
	top: 50%;
	margin-top: -0.4rem;
	left: 0;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 04s;
	transition: all 0.4s;
}
#p9 .logo3{
	width: 100%;
	height: 0.73rem;
	background: #000 url('../img/logo3.jpg') center center no-repeat;
	background-size: auto 100%;
	position: absolute;
	z-index: 10;
	top: 80%;
	margin-top: -0.37rem;
	left: 0;
}
#p9.s1 .logo1{
	margin-top: -1.5rem;
}
#p9.s1 .logo2{
	margin-top: 0rem;
}