*{ margin: 0; padding: 0; list-style: none; border: 0; }
html,body{ width: 100%; height: 100%; }
a{ text-decoration: none;-webkit-tap-highlight-color:transparent; }

.wrapper{ max-width: 1920px; margin: 0 auto; overflow: hidden; position: relative; z-index: 1;}
.wrapper img{ display: block;}

.wrapper .part{ width: 100%; background-position: top center; background-repeat: no-repeat; overflow: hidden; position: relative;}
.part.part_1{ height: 1100px; background-image: url(img/pc_01.jpg); }
.part.part_2{ height: 1010px; background-image: url(img/pc_02.jpg); }
.part.part_3{ height: 1698px; background-image: url(img/pc_03.jpg); }
.part.part_4{ height: 374px; background-image: url(img/pc_04.jpg); }

.part_1 .logo{ width: 256px; position: absolute; top: 130px; left: 50%; margin-left: -600px; z-index: 2;}

.part_1 .yuyue_btn{ width: 100%; text-align: center; position: absolute; top: 920px; left: 0; z-index: 3; }
.part_1 .yuyue_btn a{ width: 382px; display: inline-block; margin: 0 7px; transition: .5s }
.part_1 .yuyue_btn a img{ width: 100%; }
.part_1 .yuyue_btn a:hover{ transform: translateY(-3px); }

.part_1 .btn_rule{ width:198px; display:block; position: absolute; top: 845px; left:50%; margin-left:-99px; transition: .5s}
.part_1 .btn_rule:hover{ transform:scale(1.03); }

.part_1 .soc{ position: absolute; top:15px; right:15px; }
.part_1 .soc a{ width:66px; display:block; float:left; margin-left:10px; transition:.5s }
.part_1 .soc a:hover{ transform:scale(1.05); }

.part_2 .list{ width:1225px; position: absolute; top:507px; left:50%; margin-left:-612px; }
.part_2 .list ul li{ width:219px; height: 370px; margin:0 13px; float:left; position: relative; }
.part_2 .list ul li:nth-child(2){ margin:67px 13px 0 13px; }
.part_2 .list ul li:nth-child(4){ margin:67px 13px 0 13px; }
.part_2 .list ul li.cur:before{ content:""; display:block; width:175px; height:172px; background-image:url(img/cur.png); background-size: 100% 100%; position: absolute; top: 84px; left: 50%; margin-left: -92px;}

.part_3 a{ width:330px; display:block; position: absolute; }
.part_3 a:hover{ transform:translateY(-3px); }
.part_3 .link_1{ top:790px; left:50%; margin-left: -5px; transition: .5s}
.part_3 .link_2{ top:1520px; left:50%; margin-left: -590px; transition: .5s}
.part_3 a.gray{ filter:grayscale(100%); }

.part_4 .game_info{ margin:0 auto; padding:50px 0 0 0 }
.footer{ width: 1280px; margin: 0 auto; position: relative; z-index: 2;}
.footer .foot_img{ display: block; margin: 0 auto; }
.footer .foot_info{ width: 1280px; font-size: 14px; color: #fff; position: relative; padding: 20px 0; margin-top: 15px; filter: drop-shadow(0 0 5px #a3002b);}
.footer .foot_info a{ color: #fff; padding: 0 5px; }
.footer .foot_info a:hover{ color: #a82b4b }
.footer .foot_info a:first-child{ padding-left: 0 }
.footer .foot_info .share_box{ position: absolute; top: 20px; right: 0; }
.footer .foot_info .share_box img{ width: 20px; display: inline-block; margin-top: -3px; vertical-align: middle; transition: .5s }
.footer .foot_info .share_box img:hover{ transform: translateY(-3px); }

.back_top{ width: 91px; display: block;  position: fixed; bottom: 50px; right: 30px; cursor: pointer; transition: .5s; z-index: 5; display: none;}
.back_top:hover{ transform: scale(1.05); }

.mask{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 8; background-color: rgba(0,0,0,.8); display: none}

.pop{ width: 732px; height: 498px; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-60%); z-index: 9; display: none;}
.pop .close{ width: 45px; height: 45px; display: block; position: absolute; top: 5px; right: -70px; transition: .5s; transform-origin: 50% 50%;}
.pop .close img{ width:100%; display:block; }
.pop .close:hover{ transform: rotate(90deg); }
.pop_email{ background-image: url(img/pop_1.png); height: 498px;}
.pop_email_ok{ background-image: url(img/pop_2.png); height: 338px;}
.pop .input_box{ width: 540px; height: 66px; border-radius: 10px; border: 1px #fc96b2 solid; margin: 140px 0 0 110px; background-color: #fff;}
.pop .input_box input{ width: 540px; height: 66px; line-height: 66px; font-size: 24px; color: #fc96b2; text-indent: 20px; display: block;border-radius: 10px; outline: none; }
.pop .input_box input::placeholder{ color:#fc96b2 }
.pop .input_box .btn_submit{ width: 260px; display: block; margin: 25px auto 0; transition: .5s;}
.pop .input_box .btn_submit:hover{ filter: brightness(120%); }
.pop .input_box .btn_submit.gray{ filter: grayscale(100%); }

.pop_rule{ width: 732px; height: 686px; background-image: url(img/pop_3.png); position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9; display: none; }
.pop_rule .content{ width: 600px; height: 505px; margin: 120px auto 0; overflow: auto; font-size: 16px; line-height: 25px; padding: 0 20px; transform: translateX(15px); color: #df4d74}
.pop_rule .content::-webkit-scrollbar { width: 10px; background-color: rgba(255, 255, 255, .6); border-radius: 20px; }
.pop_rule .content::-webkit-scrollbar-thumb { border-radius: 20px; background-color: #e694aa; }
.pop_rule b{ font-size: 16px; }