@charset "utf-8";
body {
    font-family: "Microsoft Yahei", "SimSun";
    font-size: 14px;
    color: #000;
}

a {
    color: #000;
}

a:hover {
    text-decoration: none;
    color: #ed1b23 !important;
}

img {
    display: block;
}

#all {
    position: relative;
    width: 100%;
    height: 100%;
}

#logo {
    position: fixed;
    width: 159px;
    height: 22px;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/logo.png);
    left: 55px;
    top: 40px;
    z-index: 999;
}

#menu-btn {
    position: fixed;
    height: 38px;
    width: 38px;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/top-menu.png);
    right: 55px;
    top: 32px;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 999;
}

#menu-btn:hover {
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/top-menu2.png);
}

#music-btn {
    position: fixed;
    height: 38px;
    width: 38px;
    right: 106px;
    top: 32px;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 999;
}

#music-btn.on {
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/top-music-on.png);
}

#music-btn.on:hover {
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/top-music-on2.png);
}

#music-btn.off {
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/top-music-off.png);
}

#music-btn.off:hover {
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/top-music-off2.png);
}

#menu-drop {
    position: fixed;
    right: 55px;
    top: 86px;
    background: #fff2d7;
    width: 170px;
    border-radius: 5px;
    border: 1px solid #c7b37e;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    color: #907426;
    display: none;
    z-index: 999;
}

#menu-drop a {
    color: #907426;
}

#menu-drop .row {
    line-height: 30px;
    padding: 7px 0px;
    border-top: 1px solid #c7b37e;
}

#menu-drop ul {
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/top-menu-line.png) no-repeat center top;
    margin-top: 7px;
    padding: 7px 20px 0px 20px;
}

#menu-drop ul li {
    float: left;
    width: 50%;
}

#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

#wrapper img {
    float: left;
    height: 100%;
}

#wrapper img::after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
}

#container {
    position: relative;
    margin: 0;
    padding: 0;
    height: 100%;
}

#topic {
    position: absolute;
    width: 4.86%;
    height: 34.6%;
    left: 3.42%;
    top: 5.2%;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/topic.png) no-repeat center center;
    background-size: contain;
}

.city {
    position: absolute;
    height: 100%;
}

.city .drop {
    display: none;
}

.city .abs {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.city .drop {
    display: none;
    width: 539px;
    height: 234px;
    padding: 30px 50px 0px 70px;
    border: 2px solid #f6b665;
    background: #fffcf4;
    border-radius: 10px;
    margin-top: -67px;
    z-index: 88;
}

.city .drop .close {
    position: absolute;
    top: -14px;
    right: -20px;
    width: 46px;
    height: 46px;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/drop-close1.png);
    transition: background 0.2s;
}

.city .drop .close:hover {
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/drop-close2.png);
}

.city .drop h3 {
    font-size: 30px;
    line-height: 40px;
}

.city .drop p {
    line-height: 36px;
    font-size: 22px;
    margin-top: 15px;
}

.city .video a {
    display: block;
    width: 100%;
    height: 100%;
}

.city .video .photo {
    height: 75.5%;
    left: 0px;
    top: 0px;
    border: 1px solid #fddc8f;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
}

.city .video .photo img {
    width: 100%;
    height: 100%;
}

.city .video .photo .play {
    position: absolute;
    width: 18.4%;
    height: 33%;
    left: 40.8%;
    top: 33.5%;
    background-image: url(https://www.dzwww.com/2019/hhtq/images/scroll/play.png);
    transition: background 0.2s;
}

.city .video p {
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 13.2%;
}

.city .video:hover .photo .play {
    background-image: url(https://www.dzwww.com/2019/hhtq/images/scroll/play2.png);
}

.city .name {
    z-index: 99;
}

.city .name-shadow {
    background-image: url(https://www.dzwww.com/2019/hhtq/images/scroll/name0.png);
    z-index: 98;
}

@-ms-keyframes name {
    from {}
    10% {
        filter: alpha(opacity=100);
        opacity: 1;
    }
    50% {
        filter: alpha(opacity=0);
        opacity: 0;
        transform: scale(1.6, 1.6);
    }
    to {
        filter: alpha(opacity=0);
        opacity: 0;
        transform: scale(1.6, 1.6);
    }
}

@-moz-keyframes name {
    from {}
    10% {
        filter: alpha(opacity=100);
        opacity: 1;
    }
    50% {
        filter: alpha(opacity=0);
        opacity: 0;
        transform: scale(1.6, 1.6);
    }
    to {
        filter: alpha(opacity=0);
        opacity: 0;
        transform: scale(1.6, 1.6);
    }
}

@-o-keyframes name {
    from {}
    10% {
        filter: alpha(opacity=100);
        opacity: 1;
    }
    50% {
        filter: alpha(opacity=0);
        opacity: 0;
        transform: scale(1.6, 1.6);
    }
    to {
        filter: alpha(opacity=0);
        opacity: 0;
        transform: scale(1.6, 1.6);
    }
}

@-webkit-keyframes name {
    from {}
    10% {
        filter: alpha(opacity=100);
        opacity: 1;
    }
    50% {
        filter: alpha(opacity=0);
        opacity: 0;
        transform: scale(1.6, 1.6);
    }
    to {
        filter: alpha(opacity=0);
        opacity: 0;
        transform: scale(1.6, 1.6);
    }
}

@keyframes name {
    from {}
    10% {
        filter: alpha(opacity=100);
        opacity: 1;
    }
    50% {
        filter: alpha(opacity=0);
        opacity: 0;
        transform: scale(1.6, 1.6);
    }
    to {
        filter: alpha(opacity=0);
        opacity: 0;
        transform: scale(1.6, 1.6);
    }
}

.city .name-shadow {
    animation: 'name' 3.0s ease-in-out 0s infinite;
    -ms-animation: name 3.0s ease-in-out 0s infinite;
    -moz-animation: name 3.0s ease-in-out 0s infinite;
    -o-animation: 'name' 3.0s ease-in-out 0s infinite;
    -webkit-animation: 'name' 3.0s ease-in-out 0s infinite;
}

.city .text1,
.city .text2,
.city .text3 {
    transition: transform 0.3s;
}

.city .text1:hover,
.city .text2:hover,
.city .text3:hover {
    transform: scale(1.05, 1.05);
}

.city .link1,
.city .link2,
.city .link3,
.city .link4,
.city .link5 {
    transition: background 0.2s;
}

#city2 {
    left: 20.5%;
    top: auto;
    width: 78%;
    height: 100%;
}

#city3 {
    left: 34%;
    width: 21%;
    height: 50.4%;
}

#city4 {
    left: 58%;
    bottom: 0;
    width: 17.5%;
    height: 50%;
}

#city5 {
    left: 73%;
    bottom: 17%;
    width: 17.5%;
    height: 59.7%;
    z-index: 100
}

#city5 .name,
#city5 .name-shadow {
    left: 0%;
    top: 0%;
    width: 8.6%;
    height: 19.5%;
}

#city6 {
    left: 79%;
    top: 0%;
    width: 19%;
    height: 95%;
}

#city7 {
    left: 81.98%;
    top: 31.6%;
    width: 9.28%;
    height: 57%;
}

.drop-audio,
.drop-vr,
.drop-video,
.drop-photo {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 6666;
    display: none;
}

.drop-audio {
    background: none;
}

.drop-audio .shadow {
    position: absolute;
    width: 2069px;
    height: 151px;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/drop-audio-shadow.png);
    left: 50%;
    top: 50%;
    margin: 165px 0px 0px -1035px;
}

.drop-audio .show {
    position: absolute;
    width: 1139px;
    height: 506px;
    left: 50%;
    top: 50%;
    margin: -253px 0px 0px -569px;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/drop-audio-bg.png);
}

.drop-audio .close {
    position: absolute;
    width: 46px;
    height: 46px;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/drop-close3.png);
    right: -22px;
    top: -28px;
    transition: background 0.2s;
}

.drop-audio .close:hover {
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/drop-close2.png);
}

.drop-audio .decorate {
    position: absolute;
    left: 100px;
    top: 116px;
    width: 66px;
    height: 55px;
}

.drop-audio .decorate i {
    position: absolute;
    bottom: 0px;
    width: 6px;
    background: #f44326;
    height: 100%;
    -webkit-animation: is-playing .5s ease infinite alternate;
    animation: is-playing .5s ease infinite alternate;
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}

.drop-audio .decorate .line1 {
    left: 0px;
}

.drop-audio .decorate .line2 {
    left: 20px;
}

.drop-audio .decorate .line3 {
    left: 40px;
}

.drop-audio .decorate .line4 {
    left: 60px;
}

.drop-audio .decorate .line1 {
    -webkit-animation-delay: .15s;
    animation-delay: .15s
}

.drop-audio .decorate .line2 {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.drop-audio .decorate .line3 {
    -webkit-animation-delay: .45s;
    animation-delay: .45s
}

.drop-audio .decorate .line4 {
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}

@-webkit-keyframes is-playing {
    0% {
        -webkit-transform: scaleY(.2);
        transform: scaleY(.2)
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
}

@keyframes is-playing {
    0% {
        -webkit-transform: scaleY(.2);
        transform: scaleY(.2)
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
}

.drop-audio .text {
    position: absolute;
    left: 202px;
    top: 110px;
    font-size: 30px;
    line-height: 35px;
    color: #4a3620;
}

.drop-audio .control {
    position: absolute;
    height: 64px;
    width: 969px;
    padding-left: 170px;
    left: 0px;
    bottom: 10px;
}

.drop-audio .control .btn1 {
    float: left;
    width: 25px;
    height: 22px;
    margin-top: 21px;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/drop-audio-btn1.png);
    transition: background 0.2s;
}

.drop-audio .control .btn1:hover,
.drop-audio .control .btn2:hover,
.drop-audio .control .btn3:hover {
    filter: alpha(opacity=80);
    opacity: 0.8;
}

.drop-audio .control .line {
    float: left;
    width: 305px;
    height: 3px;
    background: #fff;
    border-radius: 1px;
    margin-top: 31px;
    margin-left: 45px;
    position: relative;
}

.drop-audio .control .line span {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    border-radius: 1px;
    background: #f64f60;
}

.drop-audio .control .line span i {
    position: absolute;
    cursor: pointer;
    right: -5px;
    top: -4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #f64f60;
}

.drop-audio .control .time {
    float: left;
    margin-left: 45px;
    height: 64px;
    line-height: 64px;
    color: #a9a9a9;
}

.drop-audio .control .time label {
    color: #fff;
}

.drop-logo {
    position: absolute;
    width: 234px;
    height: 32px;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/drop-logo.png);
    left: 4.2%;
    top: 3%;
    z-index: 99;
}

.drop-vr .close,
.drop-photo .close {
    position: absolute;
    width: 46px;
    height: 46px;
    right: 4.2%;
    top: 2.8%;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/drop-close3.png);
    transition: opacity 0.2s;
    z-index: 99;
}

.drop-vr .close:hover,
.drop-photo .close:hover {
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/drop-close2.png);
}

.drop-vr .close {
    right: 2.2%;
    top: 6%;
}

.drop-vr .vr-show {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.drop-vr .bottom {
    position: absolute;
    width: 100%;
    bottom: 3.6%;
    left: 0px;
    height: 74px;
    text-align: center;
    z-index: 99;
}

.drop-vr .bottom a {
    display: inline-block;
    vertical-align: top;
    width: 149px;
    height: 70px;
    line-height: 70px;
    padding-top: 4px;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/drop-vr-btn1.png);
    font-size: 20px;
    font-weight: bold;
    margin: 0px 20px;
    color: #fff;
    transition: background 0.2s;
}

.drop-vr .bottom a:hover {
    color: #fff !important;
}

.drop-vr .bottom .current,
.drop-vr .bottom a:hover {
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/drop-vr-btn2.png);
}

.drop-video .show {
    position: absolute;
    width: 890px;
    height: 625px;
    left: 50%;
    top: 50%;
    margin: -313px 0px 0px -445px;
    background: #191b1f;
    overflow: hidden;
    border-radius: 5px;
}

.drop-video .close {
    position: absolute;
    right: 0px;
    top: 0px;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/drop-close4.png);
    width: 46px;
    height: 46px;
    transition: background 0.2s;
}

.drop-video .close:hover {
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/drop-close5.png);
}

.drop-video .show .play {
    height: 540px;
    background: #000;
    overflow: hidden;
}

.drop-video .show .play img {
    width: 100%;
    height: 100%;
}

.drop-video .show p {
    height: 85px;
    line-height: 85px;
    text-align: center;
    font-size: 28px;
    color: #7c7c7c;
}

.drop-photo {
    background: #fff;
}

.drop-photo .show {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    text-align: center;
}

.drop-photo img {
    float: none !important;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: auto;
    margin: 0 -100%;
}

.drop-photo .shadow {
    position: absolute;
    width: 880px;
    height: 160px;
    left: 50%;
    margin-left: -440px;
    bottom: 5.8%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 75px;
    z-index: 9;
}

.drop-photo table {
    position: absolute;
    left: 50%;
    margin-left: -300px;
    height: 160px;
    bottom: 5.8%;
    width: 445px;
    font-size: 28px;
    line-height: 34px;
    text-align: left;
    z-index: 10;
}

.drop-photo table,
.drop-photo table a {
    color: #fff;
}

.drop-photo table a:hover {
    color: #dfdfdf !important;
}

.drop-photo .num {
    position: absolute;
    left: 50%;
    margin-left: 142px;
    height: 160px;
    line-height: 160px;
    bottom: 5.8%;
    width: 170px;
    text-align: center;
    font-size: 38px;
    z-index: 10;
    color: #fff;
}

.drop-photo .num span {
    font-size: 68px;
    font-weight: bold;
}

.drop-photo .arrow1,
.drop-photo .arrow2 {
    position: absolute;
    width: 58px;
    height: 58px;
    bottom: 5.8%;
    margin-bottom: 51px;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 11;
}

#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: #ead6a8;
    z-index: 9999;
}

#loading .logo {
    position: absolute;
    width: 9%;
    height: 3%;
    left: 3.2%;
    top: 4%;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/logo.png) no-repeat center center;
    background-size: contain;
}

#loading .topic {
    position: absolute;
    width: 38.2%;
    height: 44.5%;
    top: 10%;
    left: 31%;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/loading-topic.png) no-repeat center center;
    background-size: contain;
}

#loading .num {
    position: absolute;
    color: #ead6a8;
    font-weight: bold;
    text-align: center;
    border: 2px solid #6d5636;
    padding: 3px;
    top: 60%;
    left: 50%;
    width: 223px;
    height: 56px;
    margin-left: -116px;
}

#loading .num table {
    width: 100%;
    height: 100%;
    font-size: 38px;
    text-align: center;
    background: #6d5636;
}

#loading .bottom {
    position: absolute;
    width: 100%;
    height: 24.5%;
    left: 0px;
    bottom: 0px;
    background: url(https://www.dzwww.com/2019/hhtq/images/scroll/loading-bottom.png) no-repeat center bottom;
    background-size: 100% 100%;
}

.drop-xilan {
    display: none;
}

@keyframes suofang {
    0% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0.9);
    }
}

@keyframes showdh1 {
    0% {
        bottom: 1%;
        opacity: 0;
    }
    100% {
        bottom: 7%;
        opacity: 1;
    }
}

@keyframes showdh2 {
    0% {
        bottom: 2%;
        opacity: 0;
    }
    100% {
        bottom: 12%;
        opacity: 1;
    }
}

@keyframes showdh3 {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes showdh4 {
    0% {
        opacity: 0;
        bottom: 1%;
    }
    100% {
        opacity: 1;
        bottom: 15%;
    }
}

@keyframes showdh5 {
    0% {
        opacity: 0;
        bottom: 1%;
    }
    100% {
        opacity: 1;
        bottom: 10%;
    }
}

@keyframes showdh6 {
    0% {
        opacity: 0;
        top: 2%;
    }
    100% {
        opacity: 1;
        top: 20%;
    }
}

@keyframes showdh7 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes yazi2yd {
    0% {
        left: 81%;
    }
    100% {
        left: 79%;
    }
}

@keyframes yidong {
    0% {
        /* top: -13%; */
        left: 17%;
    }
    100% {
        /* top: -15%; */
        left: -36%;
    }
}

@keyframes yidong2 {
    0% {
        /* top: -2%; */
        left: 15%;
    }
    100% {
        /* top: -8%; */
        left: -31%;
    }
}

@keyframes run-right-top {
    0% {
        top: 10vh;
    }
    /* 40% {
		top: 30vh;
	}
	80% {
		top: 30vh;
	}
   */
    100% {
        top: 48vh;
    }
}

@keyframes run-right-right {
    0% {
        left: 3vw;
    }
    /* 40% {
		left: 10vw;
	}
	80% {
		left: 15vw;
	} */
    100% {
        left: 44.5vw;
    }
}

@keyframes yidong5 {
    0% {
        right: 35%;
        bottom: 25%;
    }
    /* 40% {
		left: 10vw;
	}
	80% {
		left: 15vw;
	} */
    100% {
        right: 6%;
        bottom: 25%;
    }
}

.menu {
    width: 215px;
    height: 63px;
    background: url(../images/menu.png) left top/100% 100%;
    position: fixed;
    right: 40px;
    top: 40px;
    z-index: 20;
    overflow: hidden;
    display: none;
}

.menu.on {
    height: 329px;
    background: url(../images/menuslit.png) left top/100% 100%;
}

.menuCon {
    display: flex;
    position: relative;
}

.menuCon .muenulist::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 30px;
    background-color: #ffffff;
    left: -10px;
    top: 42%;
    transform: translateY(-50%);
}

.menuCon .xiangji::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 30px;
    background-color: #ffffff;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}

.menu a {
    display: block;
    width: 100%;
    margin-top: 15px;
}

.menu img {
    width: 100% !important;
}

.menu .music {
    display: block;
    width: 52px;
    margin: 9px 0 0 17px;
    cursor: pointer;
}

.menu .xiangji {
    display: block;
    width: 52px;
    margin: 9px 0 0 5px;
    cursor: pointer;
    position: relative;
}

.menu .muenulist {
    display: block;
    width: 44px;
    margin: 14px 0 0 18px;
    cursor: pointer;
    position: relative;
}

.menu .menuconAll {
    margin-top: 20px;
    position: relative;
    padding-top: 2px;
}

.menu .menuconAll::before {
    position: absolute;
    content: "";
    width: 160px;
    height: 14px;
    /* background: url(../images/menuslit_xhx.jpg) left top/100% 100%; */
    left: 50%;
    top: -15px;
    transform: translateX(-50%);
}

.menu .menuconAll a {
    display: flex;
    width: 100%;
    align-items: center;
    height: 44px;
    justify-content: center;
    margin-top: 5px;
}

.menu .menuconAll a .menuconAllImg1 {
    width: 130px;
    display: none;
}

.menu .menuconAll a .menuconAllImg2 {
    width: 130px;
}

.menu .menuconAll a:hover .menuconAllImg1 {
    display: block;
}

.menu .menuconAll a:hover .menuconAllImg2 {
    display: none;
}

.selectNav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 906px;
    position: fixed;
    left: 10px;
    bottom: 10%;
    z-index: 10;
    height: 118px;
    overflow: hidden;
    display: none;
}

.selectNav.on {
    background: url(../images/daohangBg.png) left top/100% 100%;
}

.selectNav .selectNavName {
    width: 107px;
    margin: 7px 0 0 10px;
}

.selectNav .selectNavList {
    width: calc(100% - 130px);
    display: flex;
    flex-wrap: wrap;
}

.selectNav .selectNavList a {
    display: block;
    width: calc(100% / 7);
    max-width: 73px;
    margin-left: 30px;
}

.selectNav .selectNavList img {
    display: block;
    width: 100%;
}

.selectNav .selectNavList a img.onclick {
    display: none;
    width: 100%;
}

.selectNav .selectNavList a img.onhover {
    display: block;
}

.selectNav .selectNavList a:hover img.onclick {
    display: block;
}

.selectNav .selectNavList a:hover img.onhover {
    display: none;
}

.selectNav .selectNavList a.dqshow img.onclick {
    display: block;
}

.selectNav .selectNavList a.dqshow img.onhover {
    display: none;
}

.text p {
    padding-bottom: 30px !important;
    line-height: 35px;
    font-size: 17px;
}