@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; list-style: none; word-wrap: break-word; word-break: break-all;}
html {}
body{ min-height: 100vh; font: 14px/1.7 Arial,"Microsoft YaHei"; color: #fff; background: url(../images/bg.jpg) center center no-repeat #000; background-size: cover;}
img{ border:none; vertical-align: middle;}
input,button,select,textarea{font-size: 100%;font-family: inherit;outline: none; color: inherit;}
textarea{resize:none}
table{ border-collapse:collapse;}
a{ text-decoration:none; color: inherit;}
a:hover{}

.nav { width: 77px; height: 490px; margin: auto; text-align: center; font-size: 13px; position: fixed; top: 0; right: 10px; bottom: 0; z-index: 9;}
.nav ul {}
.nav ul li { height: 88px; padding: 5px 0;}
.nav ul li a { display: block; width: 77px; height: 88px; background: url(../images/nav.png) 0 0 no-repeat;}
.nav ul li a:hover { color: #ffd200;}
.nav ul li a em { width: 24px; height: 24px; display: inline-block; margin-top: 18px; transition: 0.3s all;}
.nav ul li.nav1 a em { background: url(../images/nav1.png) 0 0 no-repeat;}
.nav ul li.nav2 a em { background: url(../images/nav2.png) 0 0 no-repeat;}
.nav ul li.nav3 a em { background: url(../images/nav3.png) 0 0 no-repeat;}
.nav ul li.nav4 a em { background: url(../images/nav4.png) 0 0 no-repeat;}
.nav ul li.nav5 a em { background: url(../images/nav5.png) 0 0 no-repeat;}
.nav ul li.nav1 a:hover em { background: url(../images/nav1.png) 0 -24px no-repeat;}
.nav ul li.nav2 a:hover em { background: url(../images/nav2.png) 0 -24px no-repeat;}
.nav ul li.nav3 a:hover em { background: url(../images/nav3.png) 0 -24px no-repeat;}
.nav ul li.nav4 a:hover em { background: url(../images/nav4.png) 0 -24px no-repeat;}
.nav ul li.nav5 a:hover em { background: url(../images/nav5.png) 0 -24px no-repeat;}
.nav ul li a span { display: block; margin-top: 3px;}

.header { display: flex; justify-content: space-between; align-items: center; width: 1150px; line-height: 1.3; margin: 0 auto; padding: 3vh 0 5vh 0; color: #ffd200;}
.header .rexian {}
.header .rexian .rexian-tit {}
.header .rexian .rexian-num { font-size: 25px; font-family: impact;}
.header .logo {}
.header .kefu { display: flex; align-items: center; cursor: pointer;}
.header .kefu .kefu-img {}
.header .kefu .kefu-time { padding: 0 5px; font-size: 42px; font-family: impact;}
.header .kefu .kefu-txt { text-align: center;}
.header .kefu .kefu-txt .kefu-txt1 { font-size: 17px;}
.header .kefu .kefu-txt .kefu-txt2 { font-size: 12px; text-transform: uppercase;}

.txt { text-align: center;}
.txt .txt1 {}
.txt .txt2 { margin-top: 3vh;}
.txt .txt2 h3 { display: inline-block; font-size: 18px;}
.txt .txt2 h3:before { content: ""; width: 119px; height: 21px; margin-right: 25px; display: inline-block; background: url(../images/line-l.png) 0 0 no-repeat; vertical-align: middle;}
.txt .txt2 h3:after { content: ""; width: 119px; height: 21px; margin-left: 25px; display: inline-block; background: url(../images/line-r.png) 0 0 no-repeat; vertical-align: middle;}

.code-box { height: 160px; overflow: hidden; margin-top: 3vh; display: flex; justify-content: center; text-align: center; font-size: 16px; color: #000;}
.code { height: 40px; margin: 0 5px; position: relative;}
.code .code-btn { width: 160px; height: 40px; line-height: 40px; border-radius: 5px; background: #fff; transition: 0.1s all; position: relative; z-index: 1;}
.code .code-btn img { margin-left: 10px;}
.code .code-img { width: 160px; height: 160px; transition: 0.5s all; position: absolute; top: -120px; opacity: 0;}
.code .code-img span { display: block; width: 160px; height: 160px; border-radius: 5px; background: #fff;}
.code .code-img img { width: 130px; height: 130px; margin: 15px;}
.code .code-img:hover { top: 0; opacity: 1;}
.code:hover .code-btn { margin-top: -40px;}

.footer { width: 100%; height: 129px; padding-top: 24px; box-sizing: border-box; text-align: center; background: url(../images/foot-bg.png) top center no-repeat; position: fixed; left: 0; right: 0; bottom: 0;}

.beiyong { width: 100%; max-width: 1200px; margin: 0 auto;}
.beiyong ul { display: flex;}
.beiyong ul li { width: 16.666%;}

.web-box { display: flex; width: 100%; max-width: 1200px; height: 56px; overflow: hidden; margin: 0 auto; text-align: center;}

.jiance { width: 66.666%;}
.jiance ul { display: flex; flex-wrap: wrap;}
.jiance li { width: 25%;}
.jiance .time-box {}
.jiance .time-box input { width: 100%; height: 24px; display: inline-block; text-align: center; color: #ffd200; border: none; background: none;}
.jiance .add-box { display: none; flex: 1;}
.jiance .enter-box { margin-top: 4px;}
.jiance .enter-box input { width: 90px; height: 28px; line-height: 28px; color: #000; border: none; cursor: pointer; background: linear-gradient(to top, #af8200, #ffcb04);}
.jiance .enter-box input:hover { -webkit-filter: brightness(120%); filter: brightness(120%);}

.web { flex: 1;}
.web ul { display: flex; flex-wrap: wrap;}
.web li { width: 50%;}
.web .time-box {}
.web .time-box input { width: 100%; height: 24px; display: inline-block; text-align: center; color: #ffd200; border: none; background: none;}
.web .enter-box { margin-top: 4px;}
.web .enter-box input { width: 90px; height: 28px; line-height: 28px; color: #000; border: none; cursor: pointer; background: linear-gradient(to top, #af8200, #ffcb04);}
.web .enter-box input:hover { -webkit-filter: brightness(120%); filter: brightness(120%);}


@media screen and (max-height:850px){ 
.header { width: 1150px; line-height: 1.3; padding: 3vh 0 5vh 0;}
.header .rexian .rexian-tit {}
.header .rexian .rexian-num { font-size: 25px;}
.header .logo img { width: 300px;}
.header .kefu { display: flex; align-items: center;}
.header .kefu .kefu-img {}
.header .kefu .kefu-time { padding: 0 5px; font-size: 42px;}
.header .kefu .kefu-txt .kefu-txt1 { font-size: 17px;}
.header .kefu .kefu-txt .kefu-txt2 { font-size: 12px; text-transform: uppercase;}
 
.txt .txt1 img { width: 500px;}
.txt .txt2 { margin-top: 3vh;}
.txt .txt2 h3 { font-size: 17px;}

.code-box { height: 150px; margin-top: 3vh; font-size: 14px;}
.code { height: 40px;}
.code .code-btn { width: 150px; height: 36px; line-height: 36px;}
.code .code-btn img { margin-left: 10px;}
.code .code-img { width: 150px; height: 150px; top: -114px;}
.code .code-img span { width: 150px; height: 150px;}
.code .code-img img { width: 120px; height: 120px; margin: 15px;}
.code:hover .code-btn { margin-top: -40px;}
}

@media screen and (max-height:730px){
.nav { width: 70px; height: 430px; font-size: 12px;}
.nav ul li { height: 80px; padding: 3px 0;}
.nav ul li a { width: 70px; height: 80px; background-size: 100% 100%;}
.nav ul li a em { margin-top: 15px;}


.header { width: 1150px; line-height: 1.3; padding: 3vh 0 5vh 0;}
.header .rexian .rexian-tit { font-size: 12px;}
.header .rexian .rexian-num { font-size: 21px;}
.header .logo img { width: 240px;}
.header .kefu { display: flex; align-items: center;}
.header .kefu .kefu-img img { width: 46px;}
.header .kefu .kefu-time { padding: 0 5px; font-size: 36px;}
.header .kefu .kefu-txt .kefu-txt1 { font-size: 14px;}
.header .kefu .kefu-txt .kefu-txt2 { font-size: 12px; text-transform: capitalize;}
 
.txt .txt1 img { width: 400px;}
.txt .txt2 { margin-top: 3vh;}
.txt .txt2 h3 { font-size: 15px;}

.code-box { height: 130px; margin-top: 3vh; font-size: 12px;}
.code { height: 40px;}
.code .code-btn { width: 130px; height: 30px; line-height: 30px;}
.code .code-btn img { margin-left: 10px; width: 16px;}
.code .code-img { width: 130px; height: 130px; top: -100px;}
.code .code-img span { width: 130px; height: 130px;}
.code .code-img img { width: 100px; height: 100px; margin: 15px;}
.code:hover .code-btn { margin-top: -40px;}
}

@media screen and (max-width:1350px){ 
.header { width: 1050px;}
}

@media screen and (max-width:1200px){ 
.header { width: 950px;}
}

@media screen and (max-width:1100px){ 
.header { width: 850px;}
}