body, html {font-size:100%;padding:0;margin:0;font-family:"Microsoft YaHei"}
html {overflow-x: hidden;margin-top:0}
*,
*:after,
*:before {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
a {color: #2fa0ec;text-decoration: none;outline: none;}
a:hover,a:focus {color:#74777b;}
p {margin-bottom:0}
/*首屏*/
.slider-box {margin:10px 20px;position:relative;z-index:99}
#specks {
position: absolute;
z-index: 999;
height: 100vh;
width: 100vw;
}
.img {
position: absolute;
height: 100000px;
width: 100000px;
top: -8500px;
left: -8000px;
animation-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
animation-name: float;
animation-iteration-count: infinite;
}
#img-1 {
opacity: 0.7;
filter:Alpha(opacity=65);
background: url('../img/1.jpg');
background-repeat: repeat;
animation-duration: 600s;
}
#img-2 {
opacity: 0.75;
filter:Alpha(opacity=60);
background: url('../img/2.jpg');
background-repeat: repeat;
animation-duration: 450s;
}
#img-3 {
opacity: 0.7;
filter:Alpha(opacity=65);
background: url('../img/3.jpg');
background-repeat: repeat;
animation-duration: 350s;
}
/*ANIMATIONS*/
@keyframes twinkle {
0% {
transform: translate(0px, 0px);
}
30% {
opacity: 0;
}
50% {
opacity: 1;
}
70% {
opacity: 0;
}
100% {
transform: translate(175px, 100px);
}
}
@keyframes float {
0% {
transform: translate(0px, 0px);
}
100% {
transform:translate(8000px, 4000px);
}
}
.header {width:100%;overflow: hidden;background:url(../img/1.jpg);}
.header .banner-logo {margin:40px 30px 50px 0;text-align:right}
.header .banner-logo a {display: inline-block}
.header .banner-logo a:nth-child(2) ,.header .banner-logo a:nth-child(3){border-left:2px solid #fad7a0;margin-left:15px}
.header .banner-logo a img {width:80%}
.header .banner-logo a:nth-child(3) img {margin-left:20px}
.header .hx-title {position:absolute;left:0;letter-spacing:-1px;text-align:center;width:100%}
.header .information {color:#fff;margin-top:30px}
.contant-box {background:#05093a}
.contant-box h3 {font-size:24px;color:#c9ae8c;}
.contant-box p {color:#fff3dc}
.contant-box {font-size:16px;line-height:36px}
.contant-box .middle-box .middle-title {height:54px}
.contant-box .team-box {padding-top:80px}
.contant-box .item {margin-top:60px}
.contant-box .item .middle-title {background:url(../img/items-title.png) no-repeat;background-size:cover;background-position:center}
.contant-box .item .item-text {color:#e9c684;margin-top:80px}
.contant-box .item .item-text img {margin-bottom:18px}
.contant-box .item .item-text a {display:inline-block;font-size:16px;font-weight:600;line-height:1.5;color:#e9c684}
.contant-box .item .item-text a:hover {text-decoration:none;color:#dab671}
.contant-box .item .item-text div {font-size:14px;text-indent:36px;}
.contant-box .item .item-text span {color:#7a7a7a;float:right}
.contant-box .item .item-con {position:relative;height:490px;list-style:none;overflow:hidden;margin-top:40px;color:#c6a464;border:10px solid #74531f}
.contant-box .item .item-con ul {position:relative;list-style:none;padding:0}
.contant-box .item .item-con ul li {float:left;height:500px;}
.contant-box .item .item-con img {margin:15px 0;width:100%}
.contant-box .item .item-con .prevent {position:absolute;top:50%;left:0;z-index:9999;background:rgba(0,0,0,.6);width:50px;height:90px;margin-top:-45px;display:block}
.contant-box .item .item-con .prevent span{position:relative;top:25px;display:block;}
.contant-box .item .item-con .prevent span:after, .contant-box .item .item-con .prevent span:before {border: 20px solid transparent;border-right:20px solid #fff;width:0;height:0;
position: absolute;top: 0;right:15px;content: ' '}
.contant-box .item .item-con .next {position:absolute;top:50%;right:0;z-index:9999;background:rgba(0,0,0,.6);width:50px;height:90px;margin-top:-45px;display:block}
.contant-box .item .item-con .next span{position:relative;top:25px;display:block;}
.contant-box .item .item-con .next span:after, .contant-box .item .item-con .next span:before {border: 20px solid transparent;border-left:20px solid #fff;width:0;height:0;position:absolute;top: 0;left: 15px;content:' '}
.contant-box .history {margin-top:100px;color:#e9c684}
.contant-box .history .middle-title {background:url(../img/history-title.png) no-repeat;background-size:cover;background-position:center}
.contant-box .history .history-con {margin-top:80px;text-align:justify}
.contant-box .award ,
.contant-box .host ,
.contant-box .co-host {margin-top:100px}
.contant-box .award .middle-title {background:url(../img/award-title.png) no-repeat;background-size:cover;background-position:center}
.contant-box .award .award-con {margin-top:80px;text-align:justify;color:#e9c684}
.contant-box .award .award-list {margin-top:50px;text-align:center}
.contant-box .award .award-list p {color:#e9c684}
.contant-box .award .award-list div {margin-bottom:30px}
.contant-box .sign {margin-top:100px}
.contant-box .sign .middle-title {background:url(../img/sign-title.png) no-repeat;background-size:cover;background-position:center}
.contant-box .form-control {display:block;width:100%;height:43px;padding:10px 18px;font-size:15px;border:1px solid #ccc;border-radius:0}
#join .title {color:#e9c684;text-align:center;margin: 30px}
#join .form-control {background-color: rgba(153, 79, 37, 0.2);color:#FFF}
#join .btn-join {margin:40px auto;display:block;border:1px solid #fad7a0;background-color:#fad7a0;border-radius:2px;color:#1a1f23}
#join label {color:#F28950;padding-top:5px}
#join .getVcode {border:1px solid #fff;border-radius:0;height:43px;background:#fad7a0}
.contant-box .host .host-con ,
.contant-box .co-host .co-host-con {margin-top:80px}
.contant-box .host .middle-title {background:url(../img/host-title.png) no-repeat;background-size:cover;background-position:center}
.contant-box .co-host .middle-title {background:url(../img/co-host-title.png) no-repeat;background-size:cover;background-position:center}
.contant-box .host .host-con div,
.contant-box .co-host .co-host-list div {margin-bottom:30px}
.contant-box .co-host .co-host-list img {width:90%}
.contant-box .host img {width:148px}
/*二维码弹框*/
#result {margin-top:40px}
#result .qrcode canvas {border: 8px solid #FFF}
.code-wrap{position:fixed;z-index:20000;top:0;left:0;bottom:0;right:0; background:rgba(0, 0, 0, 0.5)!important;filter:Alpha(opacity=50); background:#fff;display:none}
.code-wrap .code-box {position:absolute;top:50%;margin-top:-225px;color:#000;background:#fff;height:450px}
.code-wrap .code-box .close {position:absolute;right:-20px;top:-30px;color:#fff;opacity:1;text-shadow:none;font-weight:500;font-size:32px}
.code-wrap .code-box .tips {margin-top:30px}
.code-wrap .code-box h3 {font-size:18px;color:#333}
.code-wrap .code-box p {font-size:14px;color:#333}
.contant-box .item .item-text ul {margin-top:50px}
.contant-box .item .item-text li {list-style:none;display:inline-block;margin:25px;width:100px;vertical-align:top;text-align:center}
@media all and (max-width:767px){
.header .hx-title {top:50px}
.header .banner img {width:70%}
.header .banner-logo {text-align:center;margin-right:0}
.header .banner-logo a:nth-child(2),
.header .banner-logo a:nth-child(3) {padding-left:15px}
.header .banner-logo a img {width:80%}
.contant-box .item .item-con {border:none}
.contant-box .item .item-con .prevent,
.contant-box .item .item-con .next {top:40px}
.contant-box .team-box {text-align:center;padding-top:0px}
.contant-box .team-box div {padding-top:15px}
.contant-box {font-size:14px;line-height:24px}
.contant-box h3 {font-size:18px}
.contant-box .middle-box .middle-title {height:40px}
.contant-box .item,
.contant-box .history,
.contant-box .award,
.contant-box .sign,
.contant-box .host,
.contant-box .co-host {margin-top:50px}
.contant-box .item .item-text,
.contant-box .history .history-con,
.contant-box .award .award-con,
.contant-box .sign .sign-con,
.contant-box .host .host-con,
.contant-box .co-host .co-host-con {margin-top:30px}
.contant-box .award .award-list img {width:90%}
.contant-box .co-host .co-host-list {text-align:center}
.contant-box .co-host .co-host-list img {width:50%}
.contant-box .award .award-list img {width:60%}
.contant-box .item .item-con {height:300px;}
.contant-box .item .item-con li{width:21%;margin:0 10px;}
.contant-box .item .item-con .prevent {width:25px;height:50px;margin-top:-25px}
.contant-box .item .item-con .prevent span{position:relative;top:15px}
.contant-box .item .item-con .prevent span:after, .contant-box .item .item-con .prevent span:before {border: 10px solid transparent;border-right:10px solid #fff;right:10px}
.contant-box .item .item-con .next {width:25px;height:50px;margin-top:-25px}
.contant-box .item .item-con .next span{position:relative;top:15px}
.contant-box .item .item-con .next span:after, .contant-box .item .item-con .next span:before {border: 10px solid transparent;border-left:10px solid #fff;left:10px;content:' '}
#join .btn-join {width:100%;}
.code-wrap .container {width:520px}
.code-wrap .code-box .tips {margin-top:0}
.code-wrap .code-box h3 {line-height:23px}
.contant-box .item .item-text li {margin:10px}
}
@media all and (max-width:600px) {
.contant-box .item .item-con {height:330px}
.contant-box .item .item-con li{width:36%;margin:0 30px;}
.code-wrap .container {width:360px}
.contant-box .award .award-list div {height:160px;margin-bottom:30px}
}
@media all and (max-width:500px) {
.contant-box .item .item-con {height:370px}
.contant-box .item .item-con li{width:41%;margin:0 15px;}
}
@media all and (max-width:400px){
.header .banner-logo a:nth-child(2),
.header .banner-logo a:nth-child(3){padding-left:0;margin-left:0}
.header .banner-logo a img {width:50%}
.header .banner-logo a:nth-child(3){margin-top:20px;border-left:none;width:50%}
.contant-box .item .item-con li{width:60%;margin:0 58px 0 62px}
.contant-box .award .award-list img {width:100%}
.contant-box .co-host .co-host-list img {width:70%}
.contant-box .award .award-list img {width:100%}
.code-wrap .container {width:210px;height:300px}
.code-wrap .container canvas {width:100%}
}
@media all and (max-width:300px){
.contant-box .co-host .co-host-list img {width:100%}
.contant-box .item .item-con {height:300px;}
.contant-box .item .item-con li{width:70%;margin:0 29px 0 35px}
}
@media all and (min-width:768px){
.header .hx-title {top:0px}
.header .banner img {width:70%}
.contant-box .item .item-con {width:720px;height:310px}
.contant-box .item .item-con ul {height:310px}
.contant-box .item .item-con ul li {width:20%;margin:0 16px;}
.contant-box .item .item-con img {display:block}
.contant-box .award .join-btn {width:200px;height:55px;line-height:45px;margin:60px auto;font-size:18px}
.contant-box .award .award-list img {width:80%}
#join {width:600px;margin:80px auto 40px auto}
#join .btn-join {width:230px;height:55px;line-height:35px;font-size:20px}
.code-wrap .container {width:680px}
}
@media all and (min-width:992px){
.header .hx-title {top:0}
.header .banner img {width:60%}
.header .information {font-size:18px;line-height:36px}
.contant-box .item .item-con {width:940px;height:393px;}
.contant-box .item .item-con ul {height:393px;}
.contant-box .item .item-con ul li {width:21%;margin:0 18px;}
.contant-box .award .award-list img {width:60%}
#join {width:700px}
#join .btn-join {width:300px;height:65px;line-height:45px;font-size:24px}
}
@media all and (min-width:1200px){
.contant-box .item .item-con {width:1140px;height:490px}
.contant-box .item .item-con ul {height:490px;}
.contant-box .item .item-con ul li {width:22%;margin:0 16px}
.header .banner img {width:50%}
#join {width:800px}
.contant-box .item .item-text li.speciall {margin-left:100px}
}