@charset "utf-8"; /* CSS Document */
html{height:100%}
body{font-family:Arial,Helvetica,sans-serif; color:#424242;  margin:0 auto;}
*{padding: 0; margin: 0; border: 0;font-style: normal; font-weight: normal;  -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none
}
h1,h2,h3,h4,h5,h6,div,dd,dt,dl,form,em,b,kbd,table,ul,li,button,input,kbd{font-size:14px; font-weight:normal}
div{ font-size:14px;}
nav,footer,section,header,article{display:block}
ul{list-style:none}
a:link{-webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none}
a:link,a:visited,a:hover,a:active{color:#424242}
img{-webkit-touch-callout:none}
input,textarea{-moz-border-radius:0px; -webkit-border-radius:0px;border-radius:0px}
textarea {  -webkit-appearance: none;resize: none;}
select{  -webkit-tap-highlight-color:#fff;tap-highlight-color:#fff; border-radius:0}
input[type=button],input[type=submit]{ cursor:pointer;border-radius: 0;}
button[type=button],button[type=submit]{ cursor:pointer;border-radius: 0;}
input[type="submit"],input[type="reset"],input[type="button"],input[type="text"], button { -webkit-appearance: none;border-radius: 0; }
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
img{border:0; }
ul{list-style:none;overflow:hidden }
.clear{clear:both; }
a{text-decoration: none; color: #666666; }
a:hover{color:#000; }
.left{float:left; }
.right{float:right}
:focus{outline:none}
.clearfix:after{content: ""; display: block; height: 0; clear:both; visibility: hidden;}
input::-webkit-input-placeholder {color: #999;}
input::-moz-input-placeholder {color: #999; }
input::-ms-input-placeholder { color: #999; }




.music_icon { width: 30px; height: 30px; position: fixed; right: 20px; top: 20px; z-index: 999;}
.off { background: url(../images/music_icon.png) no-repeat; background-size: 30px 30px;}
.on {  background: url(../images/music_icon.png) no-repeat; background-size: 30px 30px; -webkit-animation: rotating 1.2s linear infinite; animation: rotating 1.2s linear infinite;}


.qipao{width: 70px; height: 30px; position: fixed; top:-100px; right:50px; z-index: 99; background:url(images/bfts.png) center center no-repeat; background-size:70px 30px;}



.body_box{position: fixed; width: 100%; height: 100%; background: url(../images/body_bg.jpg) top center no-repeat #990608; background-size: 100% 100%;}
.info_body_box{position: fixed; width: 100%; height: 100%; background: url(../images/info_body_bg.jpg) top center no-repeat #990608; background-size: 100% 100%;}
.info_btn_items{text-align:center; padding-bottom: 25px;}
.info_btn_items img{width:225px; height: 40px;}
.info_btn_items:nth-of-type(1){animation: 1s ease 2s 1 normal both running fadeInLeft;}
.info_btn_items:nth-of-type(2){animation: 1.3s ease 2s 1 normal both running fadeInLeft;}
.info_btn_items:nth-of-type(3){animation: 1.6s ease 2s 1 normal both running fadeInLeft;}
.info_btn_items:nth-of-type(4){animation: 1.9s ease 2s 1 normal both running fadeInLeft;}
.info_btn_items:nth-of-type(5){animation: 2.2s ease 2s 1 normal both running fadeInLeft;}


.info_btn_items_1{text-align:center; padding-bottom: 25px;}
.info_btn_items_1 img{width:183px; height: 31px;}
.info_btn_items_1:nth-of-type(1){animation: 1s ease 2s 1 normal both running fadeInLeft;}
.info_btn_items_1:nth-of-type(2){animation: 1.3s ease 2s 1 normal both running fadeInLeft;}
.info_btn_items_1:nth-of-type(3){animation: 1.6s ease 2s 1 normal both running fadeInLeft;}
.info_btn_items_1:nth-of-type(4){animation: 1.9s ease 2s 1 normal both running fadeInLeft;}
.info_btn_items_1:nth-of-type(5){animation: 2.2s ease 2s 1 normal both running fadeInLeft;}
.info_btn_items_title_pic{text-align: center; padding-bottom: 25px;animation: 0.8s ease 2s 1 normal both running fadeInLeft;}
.info_btn_items_title_pic img{width: 225px; height: 40px;}

.bottom_btn_box { width: 220px; margin: 0 auto;display: flex;}
.back_home_btn{text-align: center; padding-top:10px;animation: 1s ease 4s 1 normal both running flipInX;flex-grow: 1; margin-left: 5px; margin-right: 5px;}
.back_home_btn img{width: 100px; height: 30px}
.area_title{font-size:20px; color:#fff; background:url(../images/ny_title_bg.png) center center no-repeat; background-size:100%; text-align: center; /*margin-left:30px; margin-right: 30px;*/ height: 40px; line-height: 40px;animation: 1s ease 1.5s 1 normal both running fadeInRight;}
.ny_top{text-align: center; padding-top:25px; padding-bottom: 20px;animation: 1s ease 0.4s 1 normal both running flipInX;}
.ny_top img{width:305px; height: 45px}
.ny_slogan { text-align: center;animation: 1s ease 1.5s 1 normal both running fadeInLeft;}
.ny_slogan img{width: 300px;}
.info_btn_list { padding-top: 35px;}
.index_slogan{text-align: center; padding-top:35px; padding-bottom: 20px;animation: 2s ease 0.4s 1 normal both running fadeInLeft;}
.index_slogan img{ width:330px; /*height: 130px;*/  }
.index_tishi{text-align: center; padding-top:30px;animation: 2s ease 0.4s 1 normal both running fadeInRight;}
.index_tishi img{ width: 355px; /*height: 60px;*/ }
.index_map{text-align: center; position: relative; width: 350px; height: 330px; margin:0 auto;animation: 3s ease 0.4s 1 normal both running flipInY;}
.index_map img{ width:350px; height: 316px;  }
.index_map div{position: absolute; width: 60px; height:20px;}
.index_map div a{display:block; width: 60px; height: 20px;}
.city_1{left:115px; top:60px;}
.city_2 {left: 75px; top: 285px;}
.city_3 { left: 265px; top: 215px;}
.city_4 { left: 275px; top: 100px;}
.city_5 { left: 280px; top: 145px;}
.city_6 { left: 240px; top: 250px;}
.city_7 { left: 15px; top: 190px;}
.city_8 { left: 180px; top: 270px;}
.city_9 { left: 55px; top: 90px;}
.city_10 {left: 275px; top: 175px;}
.city_11 {left: 80px; top: 245px;}
.city_12 { left: 260px; top: 70px;}
.city_13 { left: 20px; top: 140px;}
.city_14 { left: 15px; top: 225px;}
.index_map .city_15 { left: 60px; top: 10px; width: 90px; height: 30px;}
.index_map .city_15 a{ width: 90px; height: 30px; }
/**.city_16 { left: 185px; top: 55px; background: blue;}**/
.city_16 { left: 200px; top: 35px; }
.close_btn{text-align: right; height: 30px; padding-bottom: 10px; position: absolute; top: -15px; right: -15px;}
.pop__container .close_btn img{width: 30px; height: 30px;}
.pop_in_box{max-height:350px; min-height: 200px; overflow-y: scroll; }
.mubiao_in_bg{background: url(../images/mubiao_bg.png) center center no-repeat; background-size: 190px 55px; text-align: center; line-height: 40px; width: 190px; height: 55px; margin: 10px auto; font-size: 16px; color: #fff;}
.mubiao_in_bg1{background: url(../images/mubiao_bg2.png) center center no-repeat; background-size: 190px 55px; text-align: center; line-height: 40px; width: 190px; height: 55px; margin: 10px auto; font-size: 16px; color: #fff; margin-top: 30px;}
.video_show_detail .pop__container{z-index: 99;}
.video_show_detail .pop__mask {z-index: 98;}
.video_list_box div{width: calc(50% - 5px); float: left; margin-right: 10px; margin-bottom: 10px; text-align: center;}
.video_list_box div:nth-of-type(2n){margin-right: 0px;}
.video_list_box div .video_list_title{text-align: center; overflow: hidden; white-space:nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 24px; width: 100%;}
.pop__container .video_list_box video{border-radius: 4px; height: 90px; object-fit: cover;}
.pop_in_box_show{ max-height: auto; overflow-y: auto; }
.pop_in_box h2{text-align: center; font-size: 16px; line-height: 30px; font-weight: bold;}
.pop_in_box p{margin-bottom: 10px; line-height: 20px; text-indent: 2em; text-align: justify;}
.pop_in_box p b{font-weight: bold;}
.video_show_title {
    text-align: center;
    padding-bottom: 15px;
    font-size: 14px;
    font-weight: bold;
}



@media screen and (max-width:320px){
	.index_slogan { padding-top: 20px; padding-bottom: 20px;}
	.index_slogan img { width: 200px; height: 90px;}
	.info_btn_list { padding-top: 15px;}
	.info_btn_items { text-align: center; padding-bottom: 15px;}

	.index_map{text-align: center; position: relative; width: 315px; height: 300px; margin:0 auto;}
    .index_map img{ width:315px; height: 300px;  }
    .city_1{left:95px; top:50px;}
	.city_2 { left: 70px; top: 265px;}
	.city_3 { left: 230px; top: 200px;}
	.city_4 { left: 245px; top: 100px;}
	.city_5 { left: 250px; top: 140px;}
	.city_6 { left: 220px; top: 235px;}
	.city_7 { left: 5px; top: 180px;}
	.city_8 { left: 160px; top: 250px;}
	.city_9 { left: 45px; top: 85px;}
	.city_10 { left: 250px; top: 170px;}
	.city_11 { left: 65px; top: 235px;}
	.city_12 { left: 230px; top: 60px;}
	.city_13 { left: 10px; top: 135px;}
	.city_14 { left: 7px; top: 215px;}
	.index_map .city_15 { left: 55px; top: 10px; width: 90px; height: 30px;}
    .city_16 { left: 175px; top: 30px;}
    .index_tishi img { width: 300px;}
}


@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){ 
	.index_slogan{padding-top:55px; padding-bottom: 40px;}
	.index_tishi{padding-top:50px;}
	.ny_top{padding-top:50px;}
    .back_home_btn{padding-top:30px;}
}


@media screen and (min-width:411px) {
    .index_slogan{padding-top:55px; padding-bottom: 40px;}
    .index_tishi { padding-top: 50px;}
    .ny_top{padding-top:40px;}
    .back_home_btn{padding-top:30px;}
}

@media screen and (min-width:540px){
   .ny_top{padding-top:50px;}
   .info_btn_list{padding-top:35px;}
   .info_btn_items{padding-bottom: 30px;}
}

@media screen and (min-width:768px){
	.index_slogan{padding-top:155px}
    .area_title {
    font-size: 22px;
    color: #fff;
    background: url(../images/ny_title_bg.png) center center no-repeat;
    background-size: 100%;
    text-align: center;
    height: 55px;
    line-height: 55px;
    animation: 1s ease 1.5s 1 normal both running fadeInRight;
}
.ny_top img {
    width: 450px;
    height: auto;
}
.ny_slogan img {
    width: 450px;
    height: auto;
}
.info_btn_items img {
    width: 450px;
    height: 80px;
}
.back_home_btn img {
    width: 200px;
    height: auto;
}
.bottom_btn_box{ width: 400px; }
.info_btn_items_title_pic img {
    width: 450px;
height: auto;
}
.info_btn_items_1 img {
    width: 366px;
    height: auto;
}
.pop__container{width: 500px}
.pop_in_box {
    max-height: 550px;
    min-height: 300px;
    overflow-y: scroll;
}
.pop__container .video_list_box video {
    border-radius: 4px;
    height: 150px;
    object-fit: cover;
}
.video_list_box div .video_list_title{font-size: 18px;}
.mubiao_in_bg1 {
    background: url(../images/mubiao_bg2.png) center center no-repeat;
    background-size: 380px 110px;
    text-align: center;
    line-height: 90px;
    width: 380px;
    height: 110px;
    margin: 10px auto;
    font-size: 30px;
    color: #fff;
    margin-top: 30px;
}
.mubiao_in_bg {
    background: url(../images/mubiao_bg.png) center center no-repeat;
    background-size: 380px 110px;
    text-align: center;
    width: 380px;
    height: 110px;
    margin: 10px auto;
    font-size: 30px;
    color: #fff;
    line-height: 90px;
}
.pop_in_box h2{font-size: 24px;}
.pop_in_box p{font-size: 18px;
    line-height: 30px;}
    .video_show_title{font-size: 18px;}
}




@-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
    transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes hingeRight {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,
    60% {
        -webkit-transform: rotate(80deg);
        transform: rotate(80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,
    80% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

@keyframes hingeRight {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,
    60% {
        -webkit-transform: rotate(80deg);
        transform: rotate(80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,
    80% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}
@-webkit-keyframes hingeLeft {
    0% {
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,
    60% {
        -webkit-transform: rotate(-80deg);
        transform: rotate(-80deg);
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,
    80% {
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, -700px, 0);
        transform: translate3d(0, -700px, 0);
        opacity: 0
    }
}

@keyframes hingeLeft {
    0% {
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,
    60% {
        -webkit-transform: rotate(-80deg);
        transform: rotate(-80deg);
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,
    80% {
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(200px, 0, 0);
        transform: translate3d(200px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(200px, 0, 0);
        transform: translate3d(200px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotateY(-15deg);
        transform: perspective(400px) rotateY(-15deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

.flipOutY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-20deg);
        transform: perspective(400px) rotateY(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-20deg);
        transform: perspective(400px) rotateY(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}