*{margin: 0; padding: 0; list-style: none; border: 0}
html,body{ width: 100%; font-family: Microsoft YaHei; background-color: #000}
a{text-decoration: none}

.head{ width: 100%; height: 36rem; background-color: #120c0c; position: relative; }
.head p{ width: 100%; display: block; background-position: top center }
.head .b1{ background-image: url(img/pc_01.jpg); height: 14rem; background-size: 200% 100%; background-repeat: no-repeat;}
.head .b2{ background-image: url(img/pc_02.jpg); height: 17rem; background-size: 200% 100%; background-repeat: no-repeat;}
.head .logo_wysd{ position: absolute; top: 1rem; left: 7.5rem; width: 5rem; display: block; }
.head .logo_wysd img{ width: 100%; display: block; }
.head .logo_hwy img{ width: 100%; display: block; }
.head .rule{ position: absolute; bottom: -.7rem; padding: 1rem; font-size: .55rem; color: #bfa167; line-height: .8rem; }
.head .rule a{ color: #bfa167; text-decoration: underline; }
.head .rule h1{ font-size: .7rem; }
.wrap{ width: 100%; background-image: url(img/pc_03.jpg); background-size: 180% 100%; background-repeat: no-repeat; background-position:top center; height: 26.85rem; }
.inner{ width: 100%; margin: 0 auto; }
.game_box{ padding-left: 3rem; height: 6.2rem; position: relative;}
.game_1{ padding-top: .4rem; }
.game_1 .icon_box{ top: 2.5rem; }
.icon_box{ position: absolute; top: 0;}
.icon_box .icon{ width: 2rem; display: block; float: left;}
.icon_box .logo{ width: 4rem; display: block; float: left; margin-left: .5rem}
.icon_box img{ display: block; width: 100%;}
.icon_box .video{ text-align: center; display: none}
.intro{ width: 4rem; float: left; padding-top: .2rem}
.intro .name{ font-size: 1rem; font-weight: bold; color: #ffe7ba; }
.intro p{ display: none }
.qrcode{ width: 3.5rem; float: left; margin-left: 3rem}
.qrcode_1{ width: 3.5rem; float: left; margin-left: 3rem}
.qrcode_2{ width: 3.5rem; float: left;}
.game_2{ padding-top: .4rem; }
.game_2{ padding-left: 3.5rem; }
.game_2 .icon_box{ top: 1.8rem; }
.game_2 .icon{ width: 1.5rem; }
.game_2 .logo{ width: 3.2rem; }
.game_3{ padding-left: 2rem; }
.game_3 .icon_box{ top: 1.8rem; }
.game_3 .icon{ width: 1.5rem; }
.game_3 .logo{ width: 3.2rem; }
.game_4{ padding-left: 6rem; }
.game_4 .icon_box{ top: 1.8rem; }
.game_4 .icon{ width: 1.5rem; }
.game_4 .logo{ width: 3.2rem; }

.game_1 .qrcode_1{ margin-left: 5rem; margin-top: .5rem; }
.game_2 .qrcode_1{ width: 3.4rem; }
.game_2 .qrcode_2{ width: 3rem; }
.game_3 .qrcode{ width: 3.2rem; padding-top: .2rem; }
.game_4 .qrcode{ width: 3.2rem; padding-top: .2rem; margin-left: 6rem; }


.mask{ width:100%; height:100%; _height:5000px; position:fixed; _position:absolute; background:rgba(0,0,0,.8); filter:alpha(opacity=80)\9; background:#000\9; z-index:8; top:0; left:0; display:none;}
.pop_video{ width:14.15rem; height:7.85rem; position:fixed; top:20%; left:50%; margin-left:-45%; z-index:11; padding:0.125rem; background:#666; display:none;}
.pop_video .close{ width:0.75rem; height:0.75rem; position:absolute; top:-1.2rem; right:0; display:block; z-index:5}
.pop_video .close img{ transition:all ease .5s; width:100%;}
.pop_video .close:hover img{ transform:rotate(360deg);}
.pop_video iframe{ width:14.15rem; height:7.85rem;}



.footer{ width: 100%; text-align: center; background: #000; padding: 60px 0; }
.footer .foot_nav{ color: #999; font-size: .6rem; }
.footer .foot_nav a{ color: #999; padding: 0 .5rem; }
.footer .foot_nav a:hover{ color: #fff }
.footer .copyright{ font-size: .6rem; color: #999; line-height: 1rem; padding-top: .5rem; }
.footer .copyright a{ color: #999; padding: 0 .25rem; }
.footer .copyright i{ display: block; }
.footer .copyright a img{ height: .5rem; vertical-align: middle; margin-top: -.1rem; margin-right: .1rem; }
.footer .copyright a:hover{ color: #ff7444 }