* {
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    tap-highlight-color: rgba(0, 0, 0, 0);
}

@font-face {
    font-family: "martell-regular";
    src: url("martell-regular.woff2") format("woff2"),
    url("martell-regular.woff") format("woff"),
    url("martell-regular.ttf") format("truetype"),
    url("martell-regular.eot") format("embedded-opentype"),
    url("martell-regular.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@keyframes fadeInTop {
    0% {
        transform: translateY(-10%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}
@keyframes fadeInload{
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}
@keyframes fadeInBottom {
    0% {
        transform: translateY(10%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes centerFadeIn {
    0% {
        width: 0%;
        opacity: 0;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}
@keyframes fadeInleft {
    0% {
        transform: translateX(20%);
        opacity: 0;
    }
    60%{

        transform: translateX(20%);
        opacity: 1;
    }
    80% {
        transform: translateX(-30%);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%);
        opacity: 0;
    }
}
@keyframes fadeInright {
    0% {
        transform: translateX(-20%);
        opacity: 0;
    }
    60%{
        transform: translateX(-20%);
        opacity: 1;
    }
    80% {
        transform: translateX(30%);
        opacity: 1;
    }

    100% {
        transform: translateX(50%);
        opacity: 0;
    }
}
@keyframes scaleFadeIn {
    0% {
        transform: scale(1);
    }
    50% {
         transform: scale(1.1);
     }
    100% {
        transform: scale(1);
    }
}
@keyframes scaleFadeout {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes scaleFadeInTips {
    0% {
        transform: translate(-50%, -40%);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}
@keyframes rotate{
    0%{ transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
body, canvas, div {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

canvas, html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
p {
    margin: 0;
}

body, dl, dd, h1, h2, h3, h4, h5, h6, p, span {
    margin: 0;
    padding: 0;
}

body {
    font: 12px/1.5 martell-regular, Microsoft YaHei, sans-serif;
    color: #1a5e77;
    background:#001545;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

img {
    border: none;
    padding: 0;
    margin: 0;
    display:block;
}

em, i, b {
    font-style: normal
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none
}

a:hover {
    text-decoration: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

input, select, option {
    outline: none
}

@-webkit-keyframes rotation {
    10% { transform: rotate(90deg); -webkit-transform: rotate(90deg) }
    50%, 60% { transform: rotate(0deg); -webkit-transform: rotate(0deg) }
    90% { transform: rotate(90deg); -webkit-transform: rotate(90deg) }
    100% { transform: rotate(90deg); -webkit-transform: rotate(90deg) }
}
@keyframes rotation {
    10% { transform: rotate(90deg); -webkit-transform: rotate(90deg) }
    50%, 60% { transform: rotate(0deg); -webkit-transform: rotate(0deg) }
    90% { transform: rotate(90deg); -webkit-transform: rotate(90deg) }
    100% { transform: rotate(90deg); -webkit-transform: rotate(90deg) }
}
#orientLayer { display: none; }
@media screen and (min-aspect-ratio: 13/9) { #orientLayer { display: block; } }
.mod-orient-layer { display: none; position: fixed; height: 100%; width: 100%; left: 0; top: 0; right: 0; bottom: 0; background: #000; z-index: 9997 }
.mod-orient-layer__content { position: absolute; width: 100%; top: 45%; margin-top: -75px; text-align: center }
.mod-orient-layer__icon-orient {background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAADaCAMAAABU68ovAAAAXVBMVEUAAAD29vb////x8fH////////x8fH5+fn29vby8vL////5+fn39/f6+vr////x8fH////////+/v7////09PT////x8fH39/f////////////////////x8fH///+WLTLGAAAAHXRSTlMAIpML+gb4ZhHWn1c2gvHBvq1uKJcC6k8b187lQ9yhhboAAAQYSURBVHja7d3blpowFIDhTUIAOchZDkre/zE7ycySrbUUpsRN2/1fzO18KzEqxEVgTiZNfgmmtxRc8iaR8HNe8x4BtjQePKayYCIoyBSgvNNE1AkNSHqZyLqk97EgUCCHBzZ5mkg7ScvIJuIyOyXBRFxgpqWZyGsAZLB1KjsJi8nutHU4JCRbFRH8tmirI9k8Jx2sqNs8K/m0LQkrktO2crgcgXGB4AiTEsB0hJfo9MGgX7CGcYiYwQxmMOOvZwRhBG8tCoMXjBDeXvWCEcHbi14wgCBmMIMZzGAGM5jxETNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxY6E2rUQxnH2tz9cirlJFwFBJedaPnUv0M7++egPDE8iAJcIDmxwH5wwv9vUviw2kLbVO3TJU5uul/EyB0FoLp4x60PdGUd3qPurrWyjGGTc05u+1dcgI7/+tCCPARWGhH7o5Y7RCf+bH9ctXLp6v2BVDxfqz0oPXeSVaNtINo/1SXDv4dck8IIkbhtC2ol+iouEonTBCbYvVMnXOjxww6s/RFrBUpXHh/gw1rHj5d/qhYn9Gpk2FWh6xRBRX5Oj3Znh2Sq49/L6+y8pB26q9GbE2dbA2mVbx6I+7MfBglLCttm73ZQi7AD3iL4HqjFYJHSPRppqaUaJ3ATpGa+ckpGak2hRRMyqjGMkvl+xyFeSMwjAqcsZgGDdyhl0oNTnDN4yenJGZFGxNChP5/Y3efh6SM2rDOJMzboYxkDMqwyjIGcIw6F+io2FU1IxIm1JqRmgXSkvNKNCXeTpGrU0JNSO2c6LIGPgCS8AuDHz9ta0SXWDtxoDRH+MqlbC2Dt2G2JFRadtQZt2qq/orGowdGb2euxYiqWEpVWhTBnszoNAPdStuQwxqf0aocdWKW4Z+DfszIh8pxJqbuCE4YAC+4bm0evtipjpgJHeFnyyt1Ku2xa0bhjxr27p75rECNwyI9ZwvXkHq+7aTaMEV44YYy/spfgjgjNHaWW+GeUhGEX7tLlVinIFDDSgnOwhi1V6bU0b6tVS9eAERe863g4dRrtiHdc6o+nn5vtyVVgR79Cqt4uL6gfHPQyGqtP2vf7HADGbcYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JjhtOM+J/AgT008yDMkN/dPP9hzS8zAMQN3OEYeekp5YU7KOKXwVXqiY+QS7smcinGKABWdiBgpPJTSMHJ4KidhhPBUSMLw4CmPhKHgKUXCkHsygum71ftNSgCX6bsl8FQyfbcL5EdYsDk0R3j7aiA5wpt5AjKg/2gLJEBD/0Hf2OOf/vRrj6z/7GtP4B3nMKyjHA12kIPSjnJs3FEO0TvKkYJHOWCR+rjJH0Vn6fI5PjNbAAAAAElFTkSuQmCC');display: inline-block; width: 67px; height: 109px;
    transform: rotate(90deg); -webkit-transform: rotate(90deg); -webkit-animation: rotation infinite 1.5s ease-in-out; animation: rotation infinite 1.5s ease-in-out; -webkit-background-size: 67px; background-size: 67px }
.mod-orient-layer__desc { margin-top: 20px; font-size: 22px; color: #fff }
.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}

.content {
    width: 750px;
    height: 100%;
    position: relative;
    cursor: pointer;
    background: #0b617f;
    margin: 0 auto;
    overflow: hidden;
}

.content .screens {
    width: 750px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}
/*.page-item{position: relative; width:750px;height:1334px; margin: 0 auto;}*/


.video_box{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    height:100%;
    padding:0;
}
video{
    width:100%;height:100%;
    background-color: #001545;
    position: absolute;
    /*background-color: #000;*/
}
.videoPlayBtn{background:url(../images/videoPlayBtn.png) no-repeat 0 0; background-size: cover; position: absolute;left:50%;top:50%; transform: translate(-50%,-50%);
width:120px;height:120px;
}

.videoText{
    position: absolute;
    bottom: 4%;
    right: 4%;
    background-size: contain;
    /*transform: rotate(90deg);*/
    z-index: 9999;
    color:#fff;
    font-size:1em;
}

.back {
    width: 1334px;
    height: 750px;
    position: absolute;
    left:50%;top:50%;
    transform: translate(-50%,-50%) rotate(90deg);
    background-color: #001545;
}


.p1 .back,.p9 .back{position: relative;width: 750px; height: 420px; left:0;top:0;transform: translate(0,0) rotate(0deg); }

.p_main{ position: absolute;bottom:0;left:0; width:100%; height:calc(100% - 420px); background:url(../images/mainBg.jpg) no-repeat bottom;}
.mainText{position: absolute;left:50%;top:50%;transform: translate(-50%,-50%); background:url(../images/mainText.png) no-repeat 0 0; width:750px;height:500px;}
.p3{background:url(../images/bg1.jpg) no-repeat 0 center;}
.p5{background:url(../images/bg2.jpg) no-repeat 0 center;}
.p7{background:url(../images/bg3.jpg) no-repeat 0 center;}
.p9{}
.p9Img{background:url(../images/xxo.jpg) no-repeat 0 center; position: absolute;left:0;top:0;width:750px;height:420px;}
.p4_c{position: absolute;bottom:0;left:0; width:100%; height:calc(100% - 420px); background:url(../images/mainBg.jpg) no-repeat bottom;}
.miniqrcode{position: absolute;width:750px;height:800px; left:50%;top:50%;transform: translate(-50%,-50%);}
.jiubiao{position: absolute;left:0;bottom:0;width:750px;height:80px;background:url(../images/jiubiao.png) no-repeat 0 0;}
@-webkit-keyframes rightan
{

    from
    {
        bottom: 3%;
        opacity: 0;
    }
    to
    {
        bottom: 1%;
        opacity: 1;
    }
}
.arrow{position: absolute;left:50%;bottom:2%; transform: translate(-50%,0); width:70px;height:80px;background:url(../images/arrow.png) no-repeat 0 0; background-size:contain;
    -webkit-animation: rightan 1s infinite;
    -webkit-animation-fill-mode: both;
}