*{margin:0;padding:0;border:0;}
html,body{width:100%;height:100%;}
ul,ol,li{list-style:none}
a{text-decoration:none; display: inline-block;}
img{width:100%;display:block;}
.home{overflow:hidden;}

#ageBtn{width:50px;position:absolute;top:75px;right:20px;z-index:4}
.swiper{width:1920px;height:calc(100% - 50px);transform-origin:0 0;position:relative;overflow:hidden; z-index: 1}
.swiper .swiper-slide{width:100%;height:100%;position:relative;overflow:hidden;}

.soc_box{ width:50px; position: fixed; top:50%; transform:translateY(-50%); right:20px; z-index:2 }
.soc_box:before{ content:""; display:block; width:16px; height:138px; background-image:url(img/soc_line.png); position: absolute; top:-140px; left:50%; margin-left:-8px; }
.soc_box:after{ content:""; display:block; width:16px; height:138px; background-image:url(img/soc_line.png); position: absolute; bottom:-140px; left:50%; margin-left:-8px; transform: rotateX(180deg);}
.soc_box a{ display:block; position: relative; margin:5px 0;}
.soc_box a img{ transition:.5s }
.soc_box a:hover img{ transform:scale(1.05); }
.soc_box a:after{content: ""; display: block; width: 16px; height: 17px; background-image: url(img/ico_star.png); background-size: 100% 100%; position: absolute; bottom: -10px; left: 50%; margin-left: -8px;}
.soc_box a:last-child:after{ display:none; }

.part_0{ background-image:url(bg.jpg); }

.part_1{ background-image:url(img/pc.jpg); background-position:center center; }
.part_2{ background-image:url(img/part_2.jpg); background-position:center center; }
.part_3{ background-image:url(img/part_3.jpg); background-position:center center; }
.part_4{ background-image:url(img/part_4.jpg); background-position:center center; }
.part_5{ background-image:url(img/part_5.jpg); background-position:center center; }
.part_6{ background-image:url(img/part_6.jpg); background-position:center center; }

.part .pic_box img{ position: absolute; display:block; z-index: 3}

.nav_box{ width: 100%; height: 100px; position: absolute; top:50px; right:0; z-index:2 }
.nav_box .logo{ width:180px; display:block; float: left; margin: 10px 0 0 30px}
.nav_box .nav{ float:right; height:100px; line-height:100px; }
.nav_box .nav a{  color:#fff; font-size:24px; width: 210px; display:block; float:left; text-align: center;}
.nav_box .nav a b{ width: 100%; display:block; line-height:20px; font-size: 20px; padding-top: 30px; font-weight: normal; transform: translateX(-5px);}
.nav_box .nav a span{ display:block; line-height:30px; font-size:8px; letter-spacing: 10px; font-family: simsun;}

.part_1 .btn_box{ width:100%; text-align: center; position: absolute; bottom:70px; left:0; font-size:0 }
.part_1 .btn_box a{ display:inline-block; margin:0 2px; width: 220px; transition: .5s}
.part_1 .btn_box a:hover{ transform:translateY(-3px); }
.part_1 .yy_numb{ position: absolute; bottom:25px; left:50%; transform:translateX(-50%); font-size: 20px; line-height: 40px; color: #fff; font-weight: bold; text-shadow: 0 0 20px #663ecb, 0 0 20px #663ecb, 0 0 20px #663ecb; letter-spacing: 2px}
.part_1 .yy_numb b{ margin:0 5px; font-size: 34px; color:#fbe11b;}

.part_1 .btn_yy{ width:433px; display:block; position: absolute; bottom:50px; right:40px; transition: .5s}
.part_1 .btn_yy:hover{ transform:translateY(-3px); }

.part_1 .slogan{ width:660px; display:block; position: absolute; bottom:20px; left:50px; }

.part_1 .btn_video{ width:5.7%; display:block; position: absolute; top:50%; left:50%; transform:translate(-323%,-236px); transition: .5s}
.part_1 .btn_video:hover{ transform:translate(-323%,-240px) scale(1.05); }

.part_1 .download_box{ width:186px; position: absolute; top: 50%; transform: translateY(-55%); left: 20px;}
.part_1 .download_box .qrcode{ width:186px; height: 157px; background-image: url(img/download/qrcode_bg.png); display:block; overflow: hidden; box-shadow: 0 0 3px 3px #fff; border-radius: 14px}
.part_1 .download_box .qrcode img{ width: 140px; display:block;border-radius: 20px; margin: 7px}
.part_1 .download_box .download{width: 100%; margin-top: 10px}
.part_1 .download_box .download a{ width:100%; display: block; margin: 10px 0; transition: .5s; box-shadow: 0 0 3px 3px rgba(255, 255, 255, 1.0); border-radius: 10px;}
.part_1 .download_box .download a:hover{ transform:translateY(-3px); }

.part_1 .yy_awards{ width:434px; height:188px; position: absolute; bottom:40px; left:0; z-index: 2; transition: .5s}
.part_1 .btn_awards{ position: absolute; top: 38px; right:24px; z-index:3; transform:rotate(-19deg); z-index:1; transform-origin:50% 2%; transition: .5s;}
.part_1 .btn_awards:hover{ transform:rotate(-12deg);}
.part_1 .yy_awards:before{ content:""; display:block; width:23px; height:17px; background-image:url(img/label_line.png); position: absolute; top:34px; right:47px; z-index:2; transform:rotate(-15deg); }
.part_1 .yy_awards.hide{ left:-360px }
.part_1 .yy_awards.hide .btn_awards{ animation:btn_awards 1s linear; animation-fill-mode:forwards; transition: .5s}
.part_1 .yy_awards.hide .btn_awards:hover{ transform:rotate(-5deg); }

.part_1 .yy_awards_img{ width:658px; position: absolute; bottom:15px; left:50%; transform:translateX(-50%); }

.part_1 .btn_hd{ width:350px; position: absolute; bottom:0; left:0; z-index:3; transition: .5s}
.part_1 .btn_hd:hover{transform: scale(1.02);}

.part_1 .get_packs{ width: 200px; height: 207px; background-image: url(img/packs/btn_packs.png); background-size: 100% 300%; position: absolute; bottom:0; left:0; z-index:3; transition: .5s; animation: get_packs 1s steps(2) infinite; }
.part_1 .get_packs:hover{transform: scale(1.02);}

@keyframes get_packs{
    0%{ background-position-y:0% }
    100%{ background-position-y:100% }
}

@keyframes btn_awards {
    from { transform:rotate(-19deg); }
    30% { transform:rotate(-50deg); }
    55% { transform:rotate(10deg); }
    70% { transform:rotate(-5deg); }
    85% { transform:rotate(2deg); }
    to { transform:rotate(-1deg); }
}

.part .logo{ width:200px; display:block; position: absolute; top:20px; left:20px; z-index: 3}
.part_2 .yuyue_progress{ width:1176px; height:538px; background-image: url(img/yy_awards.png); position: absolute; top:50%; left:50%; transform:translate(-64%,-34%); z-index:3 }
.part_2 .yuyue_progress ul{ height:100% }
.part_2 .yuyue_progress ul li{ width:160px; height:100%; float:left; position: relative;}
.part_2 .yuyue_progress ul li:nth-child(6){ width:180px }
.part_2 .yuyue_progress ul li:nth-child(7){ width:180px }
.part_2 .yuyue_progress ul li.cur:after{content: ""; display: block; width: 124px; height: 52px; position: absolute; left: 50%; margin-left: -65px; background-image:url(img/yy_cur.png); background-size: 100% 100%}
.part_2 .yuyue_progress ul li:nth-child(odd):after{bottom: 55px}
.part_2 .yuyue_progress ul li:nth-child(even):after{bottom: 0}
.part_2 .yuyue_progress ul li:last-child:after{bottom: 45px}

.part_2 .pic_star{ width:98px; top:30px; left:1215px; animation: star 40s linear infinite;}

.part_2 .yuyue_video{ width:750px; height:850px; -webkit-mask-image:url(img/yuyue_video_mask.png); position: absolute; right:0; top:50%; margin-top:-405px; z-index: 2}

@keyframes rotate {
    from { transform:rotate(0); }
    to { transform:rotate(360deg); }
}

.part .btn_box{ position: absolute; top:30px; right:30px }
.part .btn_box a{ display:block; float: left; margin:0 5px; width: 160px; transition: .5s}
.part .btn_box a:hover{ transform:translateY(-3px); }

.part_3 .news_wrap{ width:955px; position: absolute; top:50%; left:50%; transform:translateY(-48%); margin-left:-220px; z-index: 5}
.part_3 .focus{ width: 710px; height: 370px; position: relative; margin-left: 225px; z-index: 1}
.part_3 .focus:before{content:""; display: block; width: 750px; height: 420px; background-color: #f07c87; border-radius: 20px; filter: blur(7px); position: absolute; top: 50%; left: 50%; transform: translate(-51%,-48.5%) rotate(1.8deg); z-index: 0}
.part_3 .focus:after{content:""; display: block; width: 740px; height: 400px; background-color: #fff; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1}
.part_3 .focus img{ display: block; transition: .5s; width: 710px; height: 370px; object-fit: cover}
.part_3 .focus .slides .slide{ overflow: hidden; width: 710px; height: 370px; }
.part_3 .focus .slides .slide:hover img{ transform: scale(1.01);}
.part_3 .flex-viewport{ height: 710px; height: 370px; position: relative; overflow: hidden; z-index:2 }
.part_3 .focus .flex-control-paging{width:100%;height:4px;display:inline-block;position:absolute;left:0;bottom:5px;text-align:center; z-index: 4;}
.part_3 .focus .flex-control-paging li{ display: inline-block; margin: 0 10px; width: 30px; height: 4px;}
.part_3 .focus .flex-control-paging li a{width: 30px; height: 4px; background-color: #88cccc; display:block; text-indent: -9999px; cursor:pointer; position: relative;}
.part_3 .focus .flex-control-paging li a.flex-active{ background-color: #fd9ea2; }
.part_3 .focus .flexslider{position:relative;}
.part_3 .focus .flexslider .slides > li{display:none;-webkit-backface-visibility:hidden;list-style-type:none;}
.part_3 .focus .flex-prev{ width:50px; height:50px; display:block; background-image:url(img/ico_arrow.png); background-size: 100% 100%; position:absolute; top:50%; left:15px; transform:translateY(-50%) rotateY(180deg); z-index:3; text-indent:-888px; overflow:hidden; opacity:0; transition:.5s}
.part_3 .focus .flex-next{ width:50px; height:50px; display:block; background-image:url(img/ico_arrow.png); background-size: 100% 100%; position:absolute; top:50%; right:15px; transform:translateY(-50%); z-index:3; text-indent:-888px; overflow:hidden; opacity:0; transition:.5s}
.part_3 .focus:hover .flex-prev{ opacity:.6; }
.part_3 .focus:hover .flex-next{ opacity:.6; }
.part_3 .focus .flex-prev:hover{ opacity:1; }
.part_3 .focus .flex-next:hover{ opacity:1; }



.part_3 .news_tab{ width:660px; height:52px; border-bottom:2px #fcd1da solid; margin-top: 50px;}
.part_3 .news_tab ul li{ width:103px; height:37px; line-height: 37px; float:left; margin-right:15px; text-align: center;}
.part_3 .news_tab ul li a{ font-size:22px; color:#fff; font-weight:bold; display:block; }
.part_3 .news_tab ul li.cur{ background-color:#ef797a; border-radius:37px; }
.part_3 .news_tab ul li:hover{ background-color:#ef797a; border-radius:37px; }
.part_3 .news_tab .more{ float:right; width: 103px; display:block; transition: .5s}
.part_3 .news_tab .more:hover{ transform:translateX(-3px); }

.part_3 .news_list{ width: 663px; height: 240px; margin-top:15px; position: relative; z-index: 2}
.part_3 .news_list ul li{ width:100%; height:60px; line-height: 60px; margin: 0; transition: .5s; cursor: pointer;}
.part_3 .news_list ul li a{ display: block; width: 100%; height: 100%; position: relative; color: #fff; box-sizing: border-box; padding: 15px 0; transition: .5s}
.part_3 .news_list ul li .news_name{ width:50px; height:25px; line-height:23px; font-size: 16px; border-radius:30px; box-sizing: border-box; border:1px #fff solid; color: #fff; display: block; float: left; text-align: center; margin-top: 3px;}
.part_3 .news_list ul li b{ line-height: 30px; display:block; float:left; width:460px; font-size: 18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-left:10px; color:#fff; transition:.5s }
.part_3 .news_list ul li p{ line-height: 30px; display:block; width:100%; font-size: 16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-top: 1px #d4d4f5 solid; clear: both; margin-top: 40px; padding-top: 5px;}
.part_3 .news_list ul li .news_time{ display:block; float: right; line-height:30px; font-size:16px; }
.part_3 .news_list ul li:hover{ background-image: url(img/news_bg.png);}
.part_3 .news_list ul li:hover a{ padding:15px; }
.part_3 .news_list ul li:hover b{ color:#ef797a }
.part_3 .news_list ul li:hover .news_time{ color:#ef797a }
.part_3 .news_list ul li:hover .news_name{ color:#ef797a; border:1px #ef797a solid; }

.part_3 .act_list{ width: 250px; position: absolute; top:420px; right:5px }
.part_3 .act_list a{width: 100%; height: 140px; border-radius: 15px; overflow: hidden; border: 5px #fff solid; display: block; margin-bottom: 20px; box-sizing: border-box; box-shadow: 2px 2px 5px 3px #f07c87;}
.part_3 .act_list a img{width: 100%; height: 100%; display: block; object-fit: cover; transition: .5s}
.part_3 .act_list a:hover img{ transform:scale(1.02); }

.part_3 .news_video{ width:780px; height: 900px; position: absolute; top:50%; left:186px; transform:translateY(-436px); -webkit-mask-image:url(img/news_video_mask.png); z-index: 2}
.part_3 .news_video video{ width:100%; height:100%; }

.part_3 .pic_star{ width:145px; top:50%; left:65px; margin-top: -200px; animation: star 20s linear infinite;}
.part_3 .pic_star_1{ width:98px; top:0; left:1115px; animation: star 40s linear infinite;}
.part_3 .pic_cloud{ bottom: -350px; left: -400px; animation: cloud 5s linear infinite alternate; position: absolute; width: 876px; height: 619px; background-image: url(img/cloud.png);}
.part_3 .pic_cloud_1{ bottom: -500px; right: -400px; animation: cloud 10s linear infinite alternate; position: absolute; width: 876px; height: 619px; background-image: url(img/cloud.png);}

@keyframes star{
    0%{ transform:rotate(0deg);  transform-origin: 20% 80%}
    50%{ transform:rotate(180deg);  transform-origin: 60% 20%}
    100%{ transform:rotate(360deg);  transform-origin: 20% 80%}
}

@keyframes cloud{
    0%{ transform:translateX(50px);}
    100%{ transform:translateX(-50px);}
}



.copyright{ position: absolute; bottom:20px; right:20px; display:block; font-size: 16px; color:#fff; z-index:3 }
.home #j-hwy-gamefoot{ width: 100%; position: absolute; bottom:-140px; left:0; z-index:3; transition:.5s }
.hwy_foot_logobox a{ display:inline-block; }



.pop{ width:100%; height:100%; position:fixed; top:0; left:0; background-color: rgba(0, 0, 0, .9); z-index:9; display: none}
.pop .inner{ width:535px; height:476px; background-image:url(img/pop.png); background-size: 100% 100%; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.pop .close{ width:50px; height:50px; display:block; position: absolute; top:20px; right:20px; transition: .5s}
.pop .close:hover{ transform:scale(1.03); }
.pop .t{ width:331px; display:block; margin:0 auto; padding-top:15px }
.pop .phone_form{ width:440px; margin:-15px auto 0; text-align: center;}
.pop .phone_form label{ line-height: 40px; display:inline-block; width:150px; margin:0 10px; font-size:24px; color:#5d6088; }
.pop .phone_form label input{ width: 18px; height: 18px; display:inline-block; vertical-align: middle;}
.pop .phone_form label span{ display:inline-block; vertical-align: middle; margin-left: 8px;}
.pop .phone_form ul li{ margin:10px 0; overflow: hidden;}
.pop .phone_form ul li input{ font-size:16px; }
.pop .phone_form ul li .imgCode{ width: 270px; height: 55px; line-height: 55px; float:left; border-radius:7px; text-indent: 15px;}
.pop .phone_form ul li .phone_code{ width: 270px; height: 55px; line-height: 55px; float:left; border-radius:7px; text-indent: 15px;}
.pop .phone_form ul li .vf_img{ float:left; width:160px; height:55px; float:right; background-color:#fff; border-radius:5px; border:1px #bdbee0 solid; box-sizing:border-box; }
.pop .phone_form ul li .get_code{ float:left; width:160px; height:55px; line-height: 55px; float:right; background-color:#7d8fb0; color: #fff; border-radius:5px;  }
.pop .phone_form ul li .get_code.timeout{ background-color: #999; }
.pop .phone_form ul li .get_code:hover{ background-color:#b1938b }
.pop .phone_form ul li .get_code.timeout:hover{ background-color: #999; }
.pop .phone_form .phone{ width:100%; height:55px; line-height:55px; border-radius:7px; text-indent:20px; font-size:16px; color:#333;}
.pop .phone_form button{ width:363px; height:65px; display:block; margin:10px auto 0; background-image:url(img/m/btn_yuyue.png); background-size:100% 100%; background-color: transparent; cursor: pointer; transition: .5s}
.pop .phone_form button:hover{ transform:scale(1.02); }

.pop .sucess{ width: 490px; margin: 0 auto; padding-top: 90px; }
.pop .sucess b{ font-size:30px; color:#5d6088; display:block; text-align: center; padding-top:100px }
.pop .sucess .qrcode{ width:160px; border-radius:10px; background-color:#fff; border:1px #ddd solid; margin:30px auto; overflow:hidden; }
.pop .sucess p{ font-size:16px; text-align: center; color:#333; }
.pop .sucess p a{ color:#9d5c46; display:inline; }


.pop .pop_con{ width:100%; padding:25px 20px; box-sizing:border-box; overflow: hidden; }
.pop .pop_t{ width:466px; height: 52px; line-height: 46px; text-align: center; font-family: simsun; display:block; margin:25px auto 0; font-size:28px; color:#627290; font-weight: bold; letter-spacing: -1px; position: relative;}
.pop .pop_t:before{content: ""; display: block; width: 300px; height:3px; position: absolute; top: 50px; left: 50%; margin-left: -150px; background-image: linear-gradient(to right,rgba(182, 199, 231, 0),rgba(182, 199, 231, 1),rgba(182, 199, 231, 1),rgba(182, 199, 231, 1),rgba(182, 199, 231, 0))}

.pop .qrcode_box{ width:100%; text-align: center; }
.pop .qrcode{ width:180px; display:inline-block; margin:0 15px; padding-top:15px; }
.pop .qrcode img{ width:180px; display:block; margin:15px auto 0; border-radius:10px; border: 1px #ddd solid; overflow: hidden;}
.pop .qrcode span{ font-size:16px; display:block; color: #333; padding-top: 10px;}
.pop .qrcode p{ margin:20px 0 15px 0; font-size: 20px; color:#2f96ff }
.pop .qrcode a{ width:120px; height:38px; line-height:38px; margin: 20px auto 0; border-radius:5px; border:1px #2f96ff solid; font-size: 14px; color: #2f96ff; transition: .5s}
.pop .qrcode a:before{content: "一键加群"}
.pop .qrcode a:hover{ background-color:#2f96ff; color:#fff }

.pop .pop_txt{ margin-top:20px; text-align: center; font-size: 16px; line-height: 30px; color: #333}
.pop .pop_txt span{ color:#d69f41 }