@font-face {
    font-family: 'SourceHanSerif-H';
    src: url('../fonts/SourceHanSerif-H.woff?v=3') format('woff');
}

@font-face {
    font-family: 'YouSheBiaoTiHei';
    src: url('../fonts/YouSheBiaoTiHei.woff?v=3') format('woff');
}

@font-face {
    font-family: 'Source-Han-Normal';
    src: url('../fonts/Source-Han-Normal.woff?v=5') format('woff');
}

@font-face {
    font-family: 'Source-Han-Sans-Medium';
    src: url('../fonts/Source-Han-Sans-Medium.woff?v=1') format('woff');
}

html, body {
    background: #ffffff;
    margin: 0;
    padding: 0;
    /*font-family: "Microsoft YaHei";*/
}

body {
    width: 100%;
    height: 100%;
}

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

.pauseBtn {
}

.playBtn {
    -webkit-animation: rollIn 10s linear infinite;
    animation: rollIn 10s linear infinite;
}

.hide {
    display: none;
}


.content {
    font-size: 0;
    width: 46.875rem;
    margin: 0 auto;
    height: 100vh;
    overflow: hidden;
}

.p_state {
    width: 5rem;
    height: 5rem;
    background-image: url("../image/m_play.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    top: 3.375rem;
    right: 2.5rem;
    position: fixed;
    z-index: 9;
}

.bg1 {
    background-image: url("../image/bg3.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 46.875rem;
    height: 250rem;
    box-sizing: border-box;
    padding-top: 39.375rem;
    position: relative;
}

.text-p {
    width: 33.875rem;
    font-weight: 400;
    background-color: transparent;
    margin: 0 auto 1.875rem;
    overflow: hidden;
    text-align: justify;
    font-size: 1.875rem;
    font-family: 'Source-Han-Normal';
    color: #494949;
    letter-spacing: 0;
    line-height: 1.5em;
    word-wrap: break-word;
    opacity: 0;
}

.p-1 {
    line-height: 2em;
    margin-left: 7.5rem;
}

.startAnimate .p-1 {
    -webkit-animation: fadeIn 2s 0s linear forwards;
    animation: fadeIn 2s 0s linear forwards;
}

.startAnimate .p-2 {
    -webkit-animation: fadeIn 2s 1s linear forwards;
    animation: fadeIn 2s 1s linear forwards;
}

.startAnimate .p-3 {
    -webkit-animation: fadeIn 2s 1.5s linear forwards;
    animation: fadeIn 2s 1.5s linear forwards;
}

.startAnimate .p-4 {
    -webkit-animation: fadeIn 1s 3s linear forwards;
    animation: fadeIn 1s 3s linear forwards;
}

.p-2,
.p-3 {
    width: 31.875rem;
}

.p-4 {
    width: 31.75rem;
    margin-top: 2.125rem;
}

.big-txt{
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
    background-color: transparent;
    padding: 0;
    margin: 0;
    overflow: hidden;
    text-align: justify;
    font-size: 2.875rem;
    font-family: 'SourceHanSerif-H';
    font-weight: normal;
    color: rgb(31, 181, 202);
    letter-spacing: 0rem;
    line-height: 1.6em;
    word-wrap: break-word;
    opacity: 0;
}

.big-1 {
    width: 37.875rem;
    height: 4.625rem;
    line-height: 4.625rem;
    margin-left: 7.5rem;
    /*top: 74.125rem;*/
    /*left: 7.375rem;*/
}

.startAnimate .big-1 {
    -webkit-animation: fadeInDown 1s 2s linear forwards;
    animation: fadeInDown 1s 2s linear forwards;
}


.big-2 {
    width: 24.5rem;
    height: 4.625rem;
    line-height: 4.625rem;
    margin: 1rem auto 1rem;
    /*top: 101.375rem;*/
    /*left: 11.875rem;*/
}

.startAnimate .big-2 {
    -webkit-animation: fadeInDown 1s 4s linear forwards;
    animation: fadeInDown 1s 4s linear forwards;
}



.three-color-wrap {
    position: relative;
    width: 37.875rem;
    height: 7.5rem;
    margin-left: 5.375rem;
}

.three-color1 {
    font-family: 'YouSheBiaoTiHei';
    background-color: transparent;
    width: 37.875rem;
    height: 5.375rem;
    padding: 0;
    margin: 0;
    overflow: hidden;
    text-align: justify;
    font-size: 2.875rem;
    font-weight: normal;
    border-color: #000;
    color: rgb(230, 247, 255);;
    letter-spacing: 0rem;
    line-height: 1.6em;
    word-wrap: break-word;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
}

.startAnimate .three-color1 {
    -webkit-animation: fadeInDown 1s 3.5s linear forwards;
    animation: fadeInDown 1s 3.5s linear forwards;
}

.three-color2 {
    font-family: 'YouSheBiaoTiHei';
    background-color: transparent;
    width: 37.875rem;
    height: 5.375rem;
    padding: 0;
    margin: 0;
    overflow: hidden;
    text-align: justify;
    font-size: 2.875rem;
    font-weight: normal;
    border-color: #000;
    color: rgb(198, 246, 248);
    letter-spacing: 0rem;
    line-height: 1.6em;
    word-wrap: break-word;
    position: absolute;
    top: 1.625rem;
    left: 0;
    z-index: 2;
    opacity: 0;
}

.startAnimate .three-color2 {
    -webkit-animation: fadeInDown 1s 4s linear forwards;
    animation: fadeInDown 1s 4s linear forwards;
}


.three-color3 {
    font-family: 'YouSheBiaoTiHei';
    background-color: transparent;
    width: 37.875rem;
    height: 5.375rem;
    padding: 0;
    /*margin: 0;*/
    /*margin-top: -2.5rem;*/
    overflow: hidden;
    text-align: justify;
    font-size: 2.875rem;
    font-weight: normal;
    border-color: #000;
    color: rgb(31, 181, 202);
    letter-spacing: 0rem;
    line-height: 1.6em;
    word-wrap: break-word;
    box-sizing: border-box;
    position: absolute;
    top: 3.25rem;
    left: 0;
    z-index: 3;
    opacity: 0;
}

.startAnimate .three-color3 {
    -webkit-animation: fadeInDown 1s 4.5s linear forwards;
    animation: fadeInDown 1s 4.5s linear forwards;
}


.text-bold {
    background-color: transparent;
    width: 100%;
    padding: 0.625rem;
    margin: 4.375rem 0 0;
    overflow: hidden;
    text-align: center;
    font-size: 2.25rem;
    font-family: 'SourceHanSerif-H';
    font-weight: normal;
    border-color: #000;
    color: #494949;
    letter-spacing: 0rem;
    line-height: 1.6em;
    word-wrap: break-word;
    box-sizing: border-box;
    opacity: 0;
}

.startAnimate .text-bold {
    -webkit-animation: fadeIn 3s 4s linear forwards;
    animation: fadeIn 3s 4s linear forwards;
}

.triangle-wrap {
    position: relative;
    width: 3.75rem;
    height: 8.625rem;
    margin: 1.875rem auto 0;
}

.triangle-svg {
    transform-style: preserve-3d;
    transform: matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform-origin: 50% 50% 0rem;
    position: absolute;

    left: 0;
    overflow: visible;
    width: 3.75rem;
    height: 2.875rem;
    font-size: 1.5rem;
    font-family: "Hiragino Sans GB,Microsoft YaHei,SimHei,STHeiti";
}

.triangle-svg1 {
    top: 0;
    z-index: 1;
    opacity: 0;
}
.startAnimate .triangle-svg1 {
    -webkit-animation: fadeIn 1s 4.5s linear forwards;
    animation: fadeIn 1s 4.5s linear forwards;
}
.triangle-svg2 {
    top: 2.875rem;
    z-index: 2;
    opacity: 0;
}
.startAnimate .triangle-svg2 {
    -webkit-animation: fadeIn 1s 4.8s linear forwards;
    animation: fadeIn 1s 4.8s linear forwards;
}

.triangle-svg3 {
    top: 5.75rem;
    z-index: 2;
    opacity: 0;
}

.startAnimate .triangle-svg3 {
    -webkit-animation: fadeIn 1s 5.2s linear forwards;
    animation: fadeIn 1s 5.2s linear forwards;
}

.map-wrap {
    position: relative;
    width: 37.25rem;
    height: 93.75rem;
    margin: 2.5rem auto 0;
}

.map-title {
    position: absolute;
    top: 0;
    left: 2.5rem;
    opacity: 0;
}

.startAnimate .map-title {
    -webkit-animation: fadeIn 1s 7s linear forwards;
    animation: fadeIn 1s 7s linear forwards;
}


.svg-rect {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
    display: inline-block;
    vertical-align: middle;
    background: rgb(0, 0, 255);
    border-radius: 0.5rem;
}

.map-title-txt {
    background-color: transparent;
    display: inline-block;
    padding: 0;
    margin-left: 0.625rem;
    overflow: hidden;
    text-align: justify;
    font-size: 1.875rem;
    font-family: Hiragino Sans GB,Microsoft YaHei,SimHei,STHeiti;
    font-weight: normal;
    border-color: #000;
    color: rgb(24, 74, 224);
    letter-spacing: 0rem;
    line-height: 1em;
    word-wrap: break-word;
    vertical-align: middle;
}

.river-wrap {
    position: absolute;
    width: 28.125rem;
    height: 10.375rem;
    top: 3.75rem;
    right: -1.75rem;
    z-index: 3;
    opacity: 0;
}

.startAnimate .river-wrap {
    -webkit-animation: fadeIn 1s 7s linear forwards;
    animation: fadeIn 1s 7s linear forwards;
}


.river-txt {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    background-color: transparent;
    padding: 0;
    margin: 0;
    overflow: hidden;
    text-align: justify;
    font-size: 1.5rem;
    font-family: 'Source-Han-Sans-Medium';
    font-weight: normal;
    color: rgb(10, 232, 246);
    letter-spacing: 0;
    line-height: 1em;
    word-wrap: break-word;
}

.river-pic {
    position: absolute;
    top: 0;
    left: 4.75rem;
    display: inline-block;
    width: 23rem;
    height: 10.375rem;
}

#svg {
    /*width: 93.75rem;*/
    /*height: 225rem;*/
    width: 33.375rem;
    height: 71.5rem;
    margin-left: 0;
    /*margin-top: 8.375rem;*/
    position: absolute;
    left: 0;
    top: 3.625rem;
    z-index: 4;
}

.boat-1 {
    width: 16.375rem;
    height: 11.125rem;
    position: absolute;
    left: 6.125rem;
    bottom: 12rem;
    opacity: 0;
}

.startAnimate3.boat-1 {
    -webkit-animation: fadeIn 1s 20s linear forwards;
    animation: fadeIn 1s 20s linear forwards;
    /*-webkit-animation: fadeIn 1s 1s linear forwards;*/
    /*animation: fadeIn 1s 1s linear forwards;*/
}

.boat-2 {
    width: 30.125rem;
    height: 21.125rem;
    position: absolute;
    right: 0;
    bottom: -7.125rem;
    opacity: 0;
}

.startAnimate3.boat-2 {
    -webkit-animation: fadeIn 1s 21s linear forwards;
    animation: fadeIn 1s 21s linear forwards;
    /*-webkit-animation: fadeIn 1s 2s linear forwards;*/
    /*animation: fadeIn 1s 2s linear forwards;*/
}

.location-wrap {
    cursor: pointer;
    width: 100%;
    min-height: 4.25rem;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    -webkit-tap-highlight-color:rgba(255,0,0,0);
}

.location-wrap:active {
    background: transparent;
}

.hand-icon {
    position: absolute;
    width: 4rem;
    height: 4.25rem;
    -webkit-tap-highlight-color:rgba(255,0,0,0);
}

.hand-icon-img {
    width: 4rem;
    height: 4.25rem;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
}

.svg-wrap {
    width: 93.75rem;
    height: 258.75rem;
    margin: 0 auto;
    position: relative;
}

.cache-img {
    width: 0;
    height: 0;
    position: absolute;
}

.play-btn {
    width: 12.5rem;
    height: 6.25rem;
    margin: 0 auto;
    display: block;
    border: 1px solid #000;
    line-height: 6.25rem;
    font-size: 2.5rem;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    position: relative;
}

.address-btn {
    position: absolute;
    display: none;
    width: 7.5rem;
    height: 3.75rem;
    border: 1px solid #000;
    font-size: 2.25rem;
    line-height: 3.75rem;
    text-align: center;
    cursor: pointer;
}

.location-icon {
    width: 3rem;
    height: 3rem;
    position: absolute;
    -webkit-tap-highlight-color:rgba(255,0,0,0);
}

.location-icon-img {
    width: 3rem;
    height: 3rem;
    animation-duration: 4s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
}

.location-txt {
    position: absolute;
    background-color: transparent;
    display: inline-block;
    height: 1.6em;
    padding: 0;
    margin: 0;
    overflow: hidden;
    text-align: justify;
    font-size: 1.875rem;
    font-family: 'SourceHanSerif-H';
    font-weight: normal;
    border-color: #000;
    color: rgb(24, 74, 224);
    letter-spacing: 0rem;
    line-height: 1.6em;
    word-wrap: break-word;
    z-index: 3;
    -webkit-tap-highlight-color:rgba(255,0,0,0);
}

.location-frame {
    position: absolute;
    z-index: 2;
    -webkit-tap-highlight-color:rgba(255,0,0,0);
}

.blocker {
    padding: 0;
    display: none;
    z-index: 9;
}

.modal {
    max-width: 46.875rem;
    width: 43.5rem;
    height: 75.625rem;
    position: relative;
    padding: 0;
    z-index: 10;
    max-height: 100%;
}

.modal-content {
    background: #ffffff;
    width: 43.5rem;
    height: 75.625rem;
    /*max-width: 151.25rem;*/
    box-sizing: border-box;
    /*padding-top: 10rem;*/
    /*padding-left: 13.75rem;*/
    position: absolute;
    top: 0;
    left: 0;
    /*transform: rotate(90deg) translate(-13.75rem);*/
    /*margin-left: -31.25rem;*/
    /*transform: translate(-13.75rem);*/
}

.modal-wrap {
    position: fixed;
    overflow: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    z-index: 999;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
}

#iframe1 {
    width: 100%;
    height: 100%;
    border-width: 0;
    border-style: none;
    border-color: unset;
    border-image: unset;
}

.pingtang-location {
    top: 6.125rem;
    right: 7.875rem;
    opacity: 0;
}

.pingtang-frame {
    width: 11.875rem;
    height: 7rem;
    top: 0;
    right: -0.875rem;
    opacity: 0;
}

.pingtang-txt {
    right: 1.25rem;
    top: 1.5rem;
    opacity: 0;
}

.pingtang-hand {
    top: 1.25rem;
    right: 10.125rem;
    opacity: 0;
}

.startAnimate .pingtang-hand,
.startAnimate .pingtang-frame,
.startAnimate .pingtang-txt,
.startAnimate .pingtang-location {
    -webkit-animation: fadeIn 1s 8.5s linear forwards;
    animation: fadeIn 1s 8.5s linear forwards;
}


.shaping-wrap {
    top: 9.375rem;
}

.shaping-frame {
    width: 11.625rem;
    height: 7.125rem;
    top: 0.375rem;
    left: 9.75rem;
    opacity: 0;
}

.shaping-location {
    top: 3.25rem;
    left: 20.375rem;
    opacity: 0;
}

.shaping-txt {
    top: 2rem;
    left: 12.125rem;
    opacity: 0;
}

.shaping-hand {
    top: 1.25rem;
    left: 6.5rem;
    opacity: 0;
}

.startAnimate3 .shaping-hand,
.startAnimate3 .shaping-frame,
.startAnimate3 .shaping-txt,
.startAnimate3 .shaping-location {
    -webkit-animation: fadeIn 1s 9.6s linear forwards;
    animation: fadeIn 1s 9.6s linear forwards;
    /*-webkit-animation: fadeIn 1s 0.5s linear forwards;*/
    /*animation: fadeIn 1s 0.5s linear forwards;*/
}


.madao-wrap {
    top: 17.5rem;
}

.madao-frame {
    top: 0;
    left: 22.625rem;
    width: 11.875rem;
    height: 7.125rem;
    opacity: 0;
}

.madao-location {
    top: 2.875rem;
    left: 21.125rem;
    opacity: 0;
}

.madao-hand {
    top: 1rem;
    left: 33.125rem;
    opacity: 0;
}

.madao-txt {
    top: 1.5rem;
    left: 24.75rem;
    opacity: 0;
}

.startAnimate3 .madao-hand,
.startAnimate3 .madao-frame,
.startAnimate3 .madao-txt,
.startAnimate3 .madao-location {
    -webkit-animation: fadeIn 1s 11.1s linear forwards;
    animation: fadeIn 1s 11.1s linear forwards;
    /*-webkit-animation: fadeIn 1s 0.5s linear forwards;*/
    /*animation: fadeIn 1s 0.5s linear forwards;*/
}

.jinshi-wrap {
    top: 24.125rem;
}

.jinshi-frame {
    top: 0;
    width: 12rem;
    height: 7.125rem;
    left: 7.875rem;
    opacity: 0;
}

.jinshi-location {
    top: 3rem;
    left: 18.25rem;
    opacity: 0;
}

.jinshi-txt{
    top: 1.5rem;
    left: 10rem;
    opacity: 0;
}

.jinshi-hand{
    top: 1.125rem;
    left: 4.625rem;
    opacity: 0;
}

.startAnimate3 .jinshi-hand,
.startAnimate3 .jinshi-frame,
.startAnimate3 .jinshi-txt,
.startAnimate3 .jinshi-location {
    -webkit-animation: fadeIn 1s 12s linear forwards;
    animation: fadeIn 1s 12s linear forwards;
    /*-webkit-animation: fadeIn 1s 0.5s linear forwards;*/
    /*animation: fadeIn 1s 0.5s linear forwards;*/
}

.qingnian-wrap {
    top: 39.75rem;
}

.qingnian-frame{
    top: 0;
    left: 11.5rem;
    width: 11.875rem;
    height: 7.5rem;
    opacity: 0;
}

.qingnian-txt {
    top: 1.5rem;
    left: 13.75rem;
    opacity: 0;
}

.qingnian-hand {
    top: 1rem;
    left: 22.625rem;
    opacity: 0;
}

.qingnian-location {
    top: 3.5rem;
    left: 6.125rem;
    opacity: 0;
}

.startAnimate3 .qingnian-hand,
.startAnimate3 .qingnian-frame,
.startAnimate3 .qingnian-txt,
.startAnimate3 .qingnian-location {
    /*-webkit-animation: fadeIn 1s 0.5s linear forwards;*/
    /*animation: fadeIn 1s 0.5s linear forwards;*/
    -webkit-animation: fadeIn 1s 15.5s linear forwards;
    animation: fadeIn 1s 15.5s linear forwards;
}


.shajing-wrap {
    top: 55.125rem;
}

.shajing-frame {
    top: 0;
    left: 6rem;
    width: 13.625rem;
    height: 7.25rem;
    opacity: 0;
}

.shajing-txt {
    top: 1.625rem;
    left: 8.25rem;
    opacity: 0;
}

.shajing-hand {
    top: 1rem;
    left: 18.875rem;
    opacity: 0;
}

.shajing-location {
    top: 4rem;
    left: 3.375rem;
    opacity: 0;
}

.startAnimate3 .shajing-hand,
.startAnimate3 .shajing-frame,
.startAnimate3 .shajing-txt,
.startAnimate3 .shajing-location {
    /*-webkit-animation: fadeIn 1s 0.5s linear forwards;*/
    /*animation: fadeIn 1s 0.5s linear forwards;*/
    -webkit-animation: fadeIn 1s 18.5s linear forwards;
    animation: fadeIn 1s 18.5s linear forwards;
}

.modal a.close-modal {
    background-image: url("../image/close-circle.png");
    background-color: #000000;
    border-radius: 100%;
}

.loading {
    /*background: #818181;*/
    background-image: url("../image/loadingBg.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #fff;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.loading .loading-group {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.loading .loading-img {
    /*border-radius: 50%;*/
    width: 25rem;
    /*height: 4rem;*/
    margin: 0 auto;
    padding-top: 0.9375rem;
}

.loading .drone {
    width: 12.5rem;
    display: block;
    /*margin: 0 auto;*/
    transform: translateX(0);

}

.loading .percent {
    padding: 0 0 1.25rem;
}

.loading p {
    font-weight: 700;
    font-size: 1.75rem;
    text-align: center;
}

.loading .progress-bar-out {
    width: 25rem;
    height: 1.5rem;
    border: 1px solid#ffffff;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
}

.loading .progress-bar-in {
    width: 0;
    height: 1.5rem;
    background: #ffffff;
    position: absolute;
    top: -1px;
    left: 0;
}

#beginBtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 2.125rem;
    width: 12.5rem;
    height: 5rem;
    line-height: 5rem;
    border: 1px solid #ffffff;
    color: #ffffff;
    text-align: center;
    display: none;
}

.foo {
    width: 14.625rem;
}