:root {
	--rate_height: 560 / 937;
	--rate_width: 937 / 560;
}

* {
	box-sizing: border-box;
}

body {
    font-size: 12px;
    background: url(' ../picture/pc_bg.png ') no-repeat 0 0;
    background-size: cover;
    background-attachment: fixed


 /*普通的，电脑端图片背景*/

}
@media(max-width: 768px) {
    body {
        background-image:url('../picture/mb_bg.jpg ');

 /*用于手机端图片背景，如果图片相同需要特殊优化*/

    }
}


#container {
	margin: 0 auto;
	height: 100%;
	max-height: 100vh;
	width: 100%;
	max-width: 59.7vh;
	aspect-ratio: 560 / 937;
}

img {
	vertical-align: top;
	width: 100%;
}

.header {
	height: 10vh;
	position: relative;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	/* box-shadow: 0 0.05rem 0.1rem rgba(65,71,85,0.09); */

}

.header .logo {
	margin: 0 auto;
	height: 90%;
	display: flex;
	justify-content: center;
	width: 100%;
	
}

.header .logo a {
	display: flex;
	justify-content: center;
}

.header .logo img {
	display: block;
	width: auto;
	height: 8vh;
	margin: auto;
	text-align: center;
	margin-left: -180px;
}

#main {
	height: 75%;
	position:relative;
}
#alert{position:absolute;left:0px;width:100%;top:5px;height: 52%;background: #f8f5f5  url(../picture/bg1.png) top center no-repeat;z-index:9999999999999;padding:10px;background-size:100% 100%;}
#alert1{position:absolute;left:0px;width:100%;top: 33vh;height:33%;background: #f8f5f5  url(../picture/bg1.png) top center no-repeat;z-index:9999999999999;padding:10px;background-size:100% 100%;}
#main .photo {
	position: relative;
	/* height: 73%; */
}

#main .photo img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

#main .photo a {

	display: block;
	position: absolute;
	left: 50%;
	top: 0.98rem;
}

#main .navi {
	
margin-top: -2px;
}

#main .navi>li {
	width: 50%;
	height: 50%;
	float: left;
	box-sizing: border-box;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
}

#main .navi>li:nth-child(2n) {
	border-right: none;
}

#main .navi>li>a {
	height: auto;
	width: 100%;
	overflow: hidden;
	zoom: 1;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	

}

#main .navi>li.on>a {
	background: #3575E7;
}

#main .navi>li>a .img {
	margin: -0.1rem -0.10rem 10px;
	display: block;
	float: left;
}

#main .navi>li>a .img img {
	width: 170px;
	height: 65px;
}

#main .navi>li.on>a .img {
	background: url(../images/img02_on.png) no-repeat center top;
	background-size: auto 100%;
}

#main .navi>li.on>a .img img {
	visibility: hidden;
}

#main .navi>li>a .txt {
	display: block;
	width: auto;
	float: left;
	color: #a1a1a1;
	font-size: 0.22rem;
	white-space: nowrap;
}

#main .navi>li>a .txt span {
	margin-bottom: 0.08rem;
	display: block;
	color: #fff;
	font-size: 0.32rem;
	font-weight: bold;
}

#main .navi>li.on>a .txt,
#main .navi>li.on>a .txt span {
	color: #fff;
}

#main .navi>li .jsBox {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: none;
	box-sizing: border-box;
	border: 1px solid #3575E7;
	background: rgba(255, 255, 255, 0.95);
	transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
}

#main .navi>li.on .jsBox {
	display: block;
}

#main .navi>li .jsBox ul {
	padding: 0.43rem 0.6rem 0.13rem;
}

#main .navi>li .jsBox li {
	margin-bottom: 0.25rem;
	overflow: hidden;
	zoom: 1;
}

#main .navi>li .jsBox li span {
	display: block;
	float: left;
	color: #414755;
	font-size: 0.3rem;
	line-height: 0.7rem;
	text-align: center;
	/* border: 1px solid #CED3DC; */
	background: #D9DDE4;
	box-sizing: border-box;
}

#main .navi>li .jsBox li .ms {
	width: 1.2rem;
}

#main .navi>li .jsBox li img {
	margin: 0.25rem 0.28rem 0 0.38rem;
	width: 0.45rem;
	display: block;
	float: left;
}

#main .navi>li .jsBox li .url {
	width: 4.14rem;
}

#main .navi>li .jsBox li a {
	width: 2.15rem;
	display: block;
	float: right;
	color: #fff;
	font-size: 0.3rem;
	font-weight: bold;
	line-height: 0.7rem;
	text-align: center;
	/* border: 1px solid #414755; */
	background: #3575E7;
	box-sizing: border-box;
}

#main .navi>li .jsBox .arrow {
	margin-left: -0.12rem;
	width: 0.25rem;
	position: absolute;
	left: 25%;
	bottom: -0.13rem;
}
.hint {
	display: flex;
	justify-content: center;
	height: 2rem;
	overflow: hidden;
	text-align: center;
	margin-bottom: 0.5rem;

}

.hint p {
    color: #141516;
	font-size: 0.35rem;
	line-height: 2.76rem;
	text-align: center;
	margin-top:-16px

}
.footer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 59.7vh;
	height: 6vh;
	overflow: hidden;
	text-align: center;
	position: fixed;
	bottom: 0;
	background: rgb(0 0 0 / 40%);
}

.footer p {
	color: #f9f7f7;
	font-size: 0.32rem;
	line-height: 0.56rem;
	text-align: center;
	font-weight:bold;
}

	
#alert  
{
    display:none;
}
#alert1  
{
    display:none;
}
#clo1{ float:right; cursor:pointer; font-size: 0.55rem; line-height:1; margin-bottom:10px; }
#clo2{ float:right; cursor:pointer; font-size: 0.55rem; line-height:1; margin-bottom:10px; }
.list img{ width:auto; }
.list ul li{ display: flex; justify-content: center; align-items: center; padding:3px 0px; }

.list ul li .min{ background:#0445a3; color:#fff; padding:10px; font-weight:bold; margin:0px 10px;border: solid 1px #de911c; }
.list ul li .xianlu{ background:#0445a3; color:#fff; padding:10px 0px; font-weight:bold; margin:0px 10px; font-size: 0.4rem; width:200px; text-align:center;border: solid 1px #cd8d13;}
.list ul li .arrow img{ width:1.25rem; } 
.list ul li .go img{ width:3.6rem; } 

 
@media screen and (max-width:767px) {
	.header {
		padding: 2%;
	}

	#container {
		width: auto;
		height: auto;
		aspect-ratio: auto;
	} 
	
	#alert { 
        height: 69%; 
    }
    
    #alert1  
    {
        top: 20vh;
        height: 42%; 
    }
    .list ul li .go img {
        width: 3.2rem;
    }
} 

  .list ul li .min { 
        margin: 0px;
        padding:5px 5px;
    }
    .list ul li .go img {
        width: 2.6rem; 
    }
    .list ul li .xianlu { 
        padding: 5px 0px; 
        margin: 0px; 
        font-size: 0.35rem;
    }
    .list ul li .arrow img {
        width: 1rem;
    }
@media screen and (max-width:467px)  
{
  
    #alert 
    {
        padding: 10px 5px;
    }
    
    
    #alert1
    {
        padding: 10px 5px;
    }
}