html,body{
    padding: 0;
    margin: 0;
}
body{
    font-family:Arial,Helvetica,sans-serif,"微软雅黑";
    font-size:0.15rem;
	line-height: 0.3rem;
    color:#535353;
    background: #a50c0e;
	width: 100vw;
	height: 100%;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th{
    background: transparent;
    border: 0px;
    margin: 0px;
    padding: 0px;
    vertical-align: baseline;
}
p{ text-indent:2em;}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size:100%;
}
ul,li,ol {
    list-style: none;
}
em,b,i{
    font-style:normal;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a img {
    border: none;
}
input, textarea, select, a {
    margin:0px;
    padding:0px;
    outline:0px;}
textarea {resize:none; overflow:auto;}

aside, article, footer, header, nav, section ,main{display:block;
    height: auto;
    overflow: hidden;}
a{color: #535353;text-decoration:none;}
a:hover{
    text-decoration:underline; }
.disFlex{
    display: -moz-box; /*firefox*/
    display: -ms-flexbox; /*IE10*/
    display: -webkit-box; /*Safari*/
    display: -webkit-flex; /*Chrome*/
    display: box;
    display: flexbox;
    display: flex;
    justify-content: flex-start;
}
* {

    margin: 0;
    padding: 0;
}
html {}
body {

    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fl{ float: left;} .fr{ float: right;}
.container{

    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #a61113;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
}
.main{
    height: 100%;
    width: auto;
    position: absolute;
    left: 0;

}
.mod{
    width: 45.45%;
    height: 100%;
}

.mod1{
    width: 20.45%;
    height: 100%;
    float: left;
}
body::-webkit-scrollbar {

    width:0;

    height:0;
    display: none;

}
.mainBox{
    height: 100%;
    position: relative;
}
img.mainImg{
    height: 100%;
    width: auto;
    display: block;
}
.wrap{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

.zhuti{
   /* width:100vw;*/
    height: 100vh;
}
.logo{
    height: 7%;
    margin-bottom: 8.1%;
    padding-top: 2.4%;
}

.daoyu{    
	width: 14%;
    position: absolute;
    left: 28.43%;
    top:18vh;
    container-type: inline-size;
}
.daoyu .word{
    text-align: center;
    text-indent: 0;
    font-weight: bold;
    font-size: 2cqw;
    line-height: 4cqw;
    overflow: hidden;
    position: relative;
}

.daoyu img{
    width: 50%;
  
}


.page01{    
	width:100vh;
    position: absolute;
    left: 28.43%;
    top: 0%;
}

.page02{    
	width:100vh;
    position: absolute;
    left: 28.43%;
    top: 0%;
}
.copyRight{
    font-size: 0.16rem;
    text-align: center;
    color: #999d5f;
    position: absolute;
    bottom: 0.47rem;
    width: 100%;
}

/*toubu*/
.juanzhou{
    position: absolute;
    left:46%;
    height: 100%;
    top: 0;
    width: auto;
}



.jz01{
    position: absolute;
    left:58%;
    height: 100%;
    top: 0;
    width: auto;
}

.map{
    height: 100%;
    position: relative;
	float: left;
}


.l-pic-index,.r-pic-index{
    position: absolute;
    top: 0;
    z-index:2;
    width:0.59rem;
    height:93.33%;
    top: 3.335%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    float: left;
}
.l-pic-index{
    left: 0;
    background-image: url("l.png");
}
.r-pic-index{
    right: 0;
    z-index: 2;
    background-image: url("r.png") ;
}


.loading{
    position: fixed;left: 0;right: 0;top: 0;left: 0;bottom:0;background: rgba(0,0,0,.6);
    display: block;
}
.loading img{
    display: block;
    width:2.4rem;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.zhutiPhone img.zhuti{
    height:85vh;
    margin: 1vh auto 0 auto;
	left: 4.5%;
	position: relative;
}


.mod:nth-child(1){
    margin-left: 1%;
	width: auto;
}

.mod:nth-child(2){
    /* margin-left:176vh; */
}

/*content*/
.map-content{
    position: absolute;
    height: 76.3889%;
    left: 0;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.main-body{
    height: 100%;
    position: relative;
    width: 100%;
    display: flex;
}

.main-content{
    position: relative;
    width: 22.34rem;/*2234px*/
    height: 100%;
}

.title{

    height: 100%;
    text-align: right;
    position: relative;
	margin-left: 1%;

}


.title img{
    width: auto;
    height: 100%;
	
}


.video-box{
    width: 54.18%;
    height: 100%;
    background: #000000;
    background: rgba(0,0,0,.6);
}
.video-box>p{
    height: 17%;
    font-size: 22px;
    line-height:1.8em;
    padding: 0 10px;
    color: #ffffff;

    vertical-align:middle;

}
.video-box>p a{
    display: block;

    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp:2;
    -webkit-box-orient: vertical;

}
.video-img{
    height: 83%;
    width: auto;
    position: relative;
}
.video-img img{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: block;
}
.video-img>p{
    position: absolute;
    bottom: 0;
    font-size: 32px;
    color: #ffffff;
    background: #000000;
    background: rgba(0,0,0,.6);
    left: 0;
    right: 0;
    text-overflow: ellipsis;
    padding:10px;
    font-weight: bold;
}
.video-box a{
    color: #ffffff;
}


.baner-pic{
	height:65%;
    margin:0% 4.25%;
    width: 30%;
    float: left;
}
.baner-pic img{
    display: block;
	/* width: 100%; */
      
    height: 135%;
    margin: 2vh auto 0;
}



.s_bg{ 
	background: #aa191a;
    height:25vh;
    width: 100vh;
    bottom:18vh;
    position: absolute;
    z-index: -1;}

.xy{position: absolute;
    z-index: 9;
    width: 21%;
    float: left;
    left: 8%;
    top: 51%;}
/* .xy img{ width: 10%;} */




.imgs{ width:52%;   margin: 18% 3% 0 0;}
.m1{ width: 46%;overflow: hidden;}
.m1 img{ border-radius:0.5vw; width:100%;}
.m1 p{ color: #fff; width:100%; /* font-size: 0.08rem; */}

.cmly{cursor: pointer;     
	top: 49.5%;
    left: 29%;
    position: absolute;
    width: 34%;
	}
	
.cmly img{ width:26%;}
.mapcenter01{ float: left; position: absolute;}
.mapcenter02{ float: left; position: absolute; left: 89%; overflow: hidden;}

.foot{    width: 1.5%;
    position: absolute;
    left:114%;
    top: 26%;
}
.foot img{
	width:65%;
    height: auto;
}


.backBtn{
    width: 1.8rem;
    height: 1.8rem;
    position:fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: none;
	background: url(../images/back.png) top center no-repeat;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}
.backBtn a:nth-child(1){
    display: block;
    width: 100%;
    height: 100%;
}
.backBtn img{
    display: block;
    width: 100%;
    height: 100%;
}

.dh{ position: absolute; top:0;height: 100%;}
.dh ul{position: relative;overflow: hidden;width:1800px;height:100%;margin:0 auto 0;}
.dh ul li{float: left;width:5%;overflow: hidden;height: 100%;position: relative;cursor: pointer;}
.dh ul li a{display: block;width: 100%;height: 100%;}
.dh ul li .layer{position: absolute;bottom: 0;left: 0;width: 100%;background:rgba(27,29,36,0.75);height: 100%;}
.dh ul li .layer .p1{    
	position: absolute;
    left: 10px;
    letter-spacing: 2px;
    writing-mode: tb-rl;
    align-items: center;
    width: 57%;
    top:21%;}
.dh ul li .layer .p2{    position: absolute;
    bottom: 59%;
    right: -200%;
    height: 30%;
    width: 91%;}
.dh ul li .layer .p2 b,.dh ul li .layer .p2 span{display: block;font-weight: bold;}
.dh ul li .layer .p1 b,.dh ul li .layer .p1 span{display: block;font-weight: bold;font-size: 14px;}

.dh ul li.curr{}
.col3{ font-weight: normal; margin:1.5% 0 0 0;}
.col2{ font-size: 0.24rem; text-align: center;}



.videoCon{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #333;
    z-index: 999;
    overflow: none;
}
.videoCon video{
    width: 100%;
    height: 100%;
}
.jump{
    cursor: pointer;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 25px;
    background: rgba(0, 0, 0, .4);
    position: fixed;
    top: 50px;
    right: 100px;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    position: absolute;
    z-index:1000;
    font-size: 18px;
}

 .video1{
        display: block;
    }
	
	
	
.s_box{   
	width: 100vh;
    height:auto;
	float: left;
	margin-left: 2%;
	top:0;
	position: relative;
}	
.box{width:fit-content;height:100%;margin:0 auto0;overflow: hidden;position: relative;}
.box-1{ height: 100%; overflow: hidden;}
.box-1 ul{height: 100%;}
.box-1 ul li{width:100vh;height:100%;position: relative;overflow: hidden;}
.box-1 ul li h2{position: absolute;left: 0;bottom: 0;height: 40px;width:300px;background: rgba(125,125,120,.4);text-indent: 2em;
						padding-right:500px ;font-size:0.5rem;line-height: 40px;text-overflow: ellipsis;overflow: hidden;
						white-space: nowrap;font-weight: normal;color: ghostwhite}
.box-2{    
	position: absolute;
    right: 0;
    bottom: 14px;
    left: 0;
    margin: 0 auto;
    width:33%;
    overflow: hidden;}
	
.box-2 ul li{float:left;width: 12px;height: 12px;overflow: hidden; margin: 0 5px; border-radius: 50%;
						background: #ffc3a6;text-indent: 100px;cursor: pointer;}
.box-2 ul .on{background: #ee4b19;}
.box-3 span{position: absolute;width:20px;height:39px;
						top:55%;
						text-align: center;cursor: pointer;}
.box-3 .prev{left:0.5%; }
.box-3 .next{right:0.5%; }
.box-3 span::selection{background: transparent;}
/*.box-3 span:hover{background: #ee4b19;}*/





@media screen and (orientation:portrait) {
    html {
        transform-origin: 0 0;
        transform: rotateZ(90deg) translateY(-100%);
    }
    body{
        
        min-width: 1120px;
    }
	body .options{ height: 30vh; position: absolute; left: 0;}
	.dowebok{ top:10%; height: 89%;}
	.s_bg{ width: 100vh; top:41%;
        height: 33vw;}
	
	.baner-pic{ width: 25%; }
	.cmly{cursor: pointer;
    top: 47.5%;
    left: 22%;
    position: absolute;
    width: 34%;}
	.box-2{ width: 20%;}
	.xy{   
    float: left;
    left: 6%;
    top: 53.5%;}
	.s_box{ margin-left: 1%;}
	
	.box-1 ul li{width: 60vh;}
	.imgs{width: 55%;  margin: 6% 6% 0 0;}
	.baner-pic img {
	    display: block;
	    /* width: 100%; */
	    height: 135%;
	    margin: 2vh auto 0;
	}
	.mod:nth-child(2){ margin-left: 86vh;}
	.mod:nth-child(1){ width: 12%;}
	.drop-audio{ width: 65%; left: 122% !important; top:20%;  }
    .zhuti{
        /*width: 100vh;*/
        height: 100vw;
    }
    .loading{
        width: 100vh;
        height: 100vw;
    }
    .backBtn{
        left: 160%;
        /* transform: translateX(-60%); */
        top:0;
        transform:translateX(0)
    }
    .container{
        display: block;
        justify-content: normal;
        align-items: normal;
        overflow: scroll;
        width: 100vh;
        height: 100%;
    }
    .zhutiPhone img.zhuti{
        /*display: block;*/
        height: 43vh !important;
        margin: 0.1% auto 0 auto;

    }
    .wrap{
        height: auto;
    }
    .mainBox{   /*position: absolute;*/
        /*top: 0;*/
        /*bottom: 0;
     */
    }
    img.mainImg{
        float: left;
    }

    .main{
        overflow: hidden;
        top: 0;
        bottom: 0;
    }

	.juanzhou{
		left: 44%;
	}
	.foot{
		left: 96%;
	}

    .copyRight{
        bottom: 10px;
    }
    .copyRight{
        bottom: 10px;
    }
    .zhutiPhone{
        display: block;
    }
    .logo{
        display: none;
    }
    .zhuti-title{
        display: none;
    }
    .copyRight{
        display: none;
    }
	.daoyu img{
		width: 50% !important;
	}
	.juanzhou{
		top: -30px;
	}
	.dh ul li .layer .p2{    
	    bottom: 103%;}
		
	.close{  top: -46px;
	    right: 37px; background-size:79%;}
	.action-btn{ margin-left: 15%;}
	
     body .options .option.active{
        max-width: 500px !important;
       
    } 

    body .options{
        min-width: 80vh !important;
    }
    .dowebok{
        top:4% !important;
        overflow: hidden !important;
    }
    body .options{
        height: 60vw !important;
    }
    body .options .option:not(.active){
        flex-grow: 0 !important;
    }
    #box02{
        margin-left: 59.5vh !important;
    }
    .bqimg{
        position: absolute !important;
        height: 75vh !important;
        display: block !important;
    }
    .drop-audio{
        width: 400px !important;
    }
    body .options .option .label .info .sub {
        line-height: 30px !important;
    }

    .cmly img{
        width: 35% !important;
    }
	.box-3 span{
        width: 64px !important;
        height: 108px !important;
    }
	body .options .option .label .icon{ 
        height: 30vh !important;
       /* min-width: 80px !important;*/
    }
    .m1 p{
        margin-top: 20px;
    }

    .hyan{
        position: absolute; 
        height: 14vh !important;
        left: 55.9vh !important;
        top: 12% !important;
    }
    .daoyu{
        left: 23.43% !important;
        top: 8vh !important;
    }

    .mu-box{
        right: 85% !important;
    }
}
@media screen and (max-width: 1023px) {
    .video-box>p{
        line-height: normal;
        font-size: 14px;
    }
    .video-img p{
        font-size:18px;
        line-height: normal;
        padding: 0.25em 10px;
    }
    .backBtn{
        width: 2rem;
        height: 2rem;
    }
	
	
}


.hyan{
    position: absolute; 
    height: 22vh;
    left: 112.5vh;
    top: 18%;
}



.pa{position: absolute}
.mu-box{width:5.5vh;top:2%;right:2%;z-index: 9;position: absolute;overflow: hidden;}
.m-play{width:100%;animation:turn 2s linear infinite;}
@keyframes turn{
  0%{-webkit-transform:rotate(0deg);}
  25%{-webkit-transform:rotate(90deg);}
  50%{-webkit-transform:rotate(180deg);}
  75%{-webkit-transform:rotate(270deg);}
  100%{-webkit-transform:rotate(360deg);}
}
.m-pause{display: none;width:100%;}

/*.word_hide{
    width: 100%;
    position: absolute;
    top: 0;
    background: url("../images/word_hide.png") no-repeat center;
    background-position-y: 0.4vh;
}*/