html,body{margin:0;padding:0;width: 100%;height: 100%;}
body{font:normal 14px/1.5 "Microsoft Yahei","Lucida Grande",Tahoma,Verdana,STXihei,hei;color:#000;background-color:#fff;}
ul,ol,li,em,p,span,h1,h2{margin:0;padding:0;font-weight:normal;list-style:none;font-style:normal}
/*loading box*/
.loadpage {position:fixed;width:100%;height:100%; left:0;right:0;top:0;bottom:0; background-color: #000; z-index:100; color: #fff; -webkit-background-size: cover;
    background-size: cover;}
.loadpage .tips{margin-top:20%; text-align: center;}
.loadpage .tips h1 {font-size:14px; line-height: 1.6em; letter-spacing: 2px; margin-bottom: 20px;}
.loading-pic {position: relative; margin-top: 2em;}
.loading-pic span {position: absolute; left:0; top:12px; width:100%; text-align: center; font-size: 11px; letter-spacing: 0;}
.loading-pic img{
    animation:rolling 3s linear infinite;
    -webkit-animation:rolling 3s linear infinite;
}
.logo{ position:absolute;width:100%; text-align:center;}
.logo{ bottom:5%;}

/* swiper container*/
.container {
    width: 100%;
    height: 100%;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    /* Fix of Webkit flickering */
    z-index:10;
}
.swiper-wrapper {
    position:relative;
    width:100%;
    -webkit-transition-property:-webkit-transform, left, top;
    -webkit-transition-duration:0s;
    -webkit-transform:translate3d(0px,0,0);
    -webkit-transition-timing-function:ease;

    transition-property:transform, left, top;
    transition-duration:0s;
    transform:translate3d(0px,0,0);
    transition-timing-function:ease;
}
.swiper-free-mode > .swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto;
}
.swiper-slide {float: left;width: 100%; height: 100%;}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {-ms-touch-action: pan-y;}
.swiper-wp8-vertical {-ms-touch-action: pan-x;}

.linfo {font-size: 16px; padding: 15%;}
.linfo p {margin-bottom: 20px; color: #fff;}

.inner{
    position:relative;
    width: 100%;
    height: 100%;
    z-index: 90;
    overflow: hidden;
    background-color: #3c3c3c;
}
.inner img {width: 100%; position: absolute;}
.ctext {
    padding: 20px;
    box-sizing:border-box;
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
}
.ctext p {color: #fff; font-size: 14px;}

.cover div {
    position: absolute; width: 100%; height: 100%;left: 0; top: 0; opacity: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.cover div:nth-child(1) {
    z-index: 5;
}
.cover div:nth-child(2) {
    z-index: 4;
}
.cover div:nth-child(3) {
    z-index: 3;
}
.cover div:nth-child(4) {
    z-index: 2;
}
.loaded div {
    opacity: 1;
    transition: opacity 1s ease;
}
.loaded div:nth-child(3) { transition-delay: 0.5s;}
.loaded div:nth-child(2), .loaded div:nth-child(1) { transition-delay: 1s;}

.loaded div:nth-child(1) {
    animation:swipetips2 infinite 1s linear alternate;
    -webkit-animation:swipetips2 infinite 1s linear alternate;
}

.swiper-slide-active .ctext {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
}

.tonext {
    background:transparent url(icon-swipetips.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute; left:50%; margin-left: -20px; bottom: 20px; z-index: 200;
    width: 40px;
    height: 40px;
    opacity: 0;
    animation:swipetips infinite 1s ease alternate;
    -webkit-animation:swipetips infinite 1s ease alternate;
}

.bcover {
    background: #00618A url(paper-textlogo.svg) center 88% no-repeat;
    -webkit-background-size: 60px auto;
            background-size: 60px auto;
}
.binfo {
    padding: 10%;
    font-size: 14px;
    color: #fff;
}
.binfo p {margin-bottom: 20px;;}
.maker {
    position: absolute; font-size: 12px; color: rgba(255,255,255,0.5);
    bottom: 5%; width: 100%;
    text-align: center;
}

@media all and (min-width: 720px){
    .loadpage .tips{margin-top:30px;}
    .slide{margin: 0 auto;}
    .linfo {font-size: 18px; padding: 10% 20%;}
    .ctext {
        position: absolute;
        width:28%;
        left:36%;
        bottom:15px;
        padding: 10px;
        background-color: rgba(0,0,0,0.7);
    }
}

@-webkit-keyframes rolling{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}
@keyframes rolling{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

@-webkit-keyframes swipetips{
    0% {opacity:0.6; -webkit-transform: translateY(-10px);}
    100% {opacity:1; -webkit-transform: translateY(0px);}
}
@keyframes swipetips{
    0% {opacity:0.6; transform: translateY(-10px);}
    100% {opacity:1; transform: translateY(0px);}
}

@-webkit-keyframes swipetips2{
    0% {-webkit-transform: translateX(-10px);}
    100% {-webkit-transform: translateX(0px);}
}
@keyframes swipetips2{
    0% {transform: translateX(-10px);}
    100% {transform: translateX(0px);}
}