html,body,div,ol,ul,li,span,p,a,b,i,img,h1,h2,input,select,textarea,button{ margin: 0; padding: 0; border: 0; }
html,body{ width: 100%; height: 100%; min-width: 1280px; max-width: 1920px; margin: 0 auto; position: relative; font-family: Microsoft YaHei;}
input,textarea,select,button{ outline: none; }
ul,ol,li{ list-style: none; }
a{ text-decoration: none; }

.title{display: block;margin: 0 auto;}
.mask{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 8; background-color: rgba(0,0,0,.8); display: none; }
.clear:before{content: '';display: table}
.clearfloat:after{content: '';display: block;clear: both}

.nav_box{position: fixed;right: 0;top: 200px;z-index: 1}
.nav_box a{display: block;width: 112px;height: 36px;background-image: url("img/nav_bg.png");background-repeat: no-repeat;background-size: 100% 200%;background-position: bottom;margin-bottom: 20px;line-height: 36px;text-align: center;color: #AE883E;font-size: 16px;}
.nav_box a.cur{background-position: top;color: #fff}
.nav_box a:hover{background-position: top;color: #fff}

.part_1{position: relative;width: 100%;height: 1020px;background: url("img/part_1.jpg") no-repeat top center;}
.part_2{position: relative;width: 100%;height: 1140px;background: url("img/part_2.jpg") no-repeat top center;}
.part_3{position: relative;width: 100%;height: 1080px;background: url("img/part_3.jpg") no-repeat top center;}
.part_4{position: relative;width: 100%;height: 920px;background: url("img/part_4.jpg") no-repeat top center;}
.part_5{position: relative;width: 100%;height: 1228px;background: url("img/part_5.jpg") no-repeat top center;}

.part_1 .logo{position: absolute;width: 204px;height: 117px;background: url("img/logo.png") no-repeat top center;left: 85px;top: 35px;}
.part_1 .soc_box{position: absolute;width: 290px;height: 56px;background: url("img/soc_bg.png") no-repeat top center;top: 40px;right: 70px}
.part_1 .soc_box .home{font-size: 14px;color: #D5A272;margin-top: 18px;display: block;margin-left: 60px;float: left;margin-right: 40px }
.part_1 .soc_box .soc{display: block;float: left;width: 30px;height: 30px;background-image: url("img/soc.png");background-repeat: no-repeat;background-size: 300% 200%;margin-top: 13px;margin-right: 10px}
.part_1 .soc_box .soc_1{background-position: 0 0}
.part_1 .soc_box .soc_2{background-position: -30px 0}
.part_1 .soc_box .soc_3{background-position: -60px 0}
.part_1 .soc_box .soc_1:hover{background-position: 0 -30px}
.part_1 .soc_box .soc_2:hover{background-position: -30px -30px}
.part_1 .soc_box .soc_3:hover{background-position: -60px -30px}
.part_1 .gift_btn{position: absolute;width: 297px;height: 130px;background: url("img/gift.png") no-repeat top center;left: 50%;margin-left: -350px;top: 50%;margin-top: 220px;animation: Packs .8s alternate infinite linear;}
@-webkit-keyframes Packs {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}
@keyframes Packs {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}
.part_1 .user_info{position: absolute;width: 500px;text-align: center;font-size: 15px;color: #29321C;left: 50%;margin-left: -450px;bottom: 135px;}
.part_1 .user_info a{color: #29321C}

.part_2 .manual{position: absolute;width: 125px;height: 114px;background: url("img/manual.png") no-repeat top center;top: 50%;margin-top: 175px;right: 50%;margin-right: -540px;animation: Packs .8s alternate infinite linear;}
.part_2 .tips{width: 500px;font-size: 16px;color: #6B4F2A;text-align: center;line-height: 24px;margin: 20px auto 0}

.part_2 .direction_box a{position: absolute;width: 41px;height: 39px;overflow: hidden;z-index: 7}
.part_2 .direction_box a img{width: 100%}
.part_2 .direction_box a.prev{left: 50%;margin-left: -420px;top: 50%;margin-top: -335px;}
.part_2 .direction_box a.next{left: 50%;margin-left: -420px;top: 50%;margin-top: 255px;}

.part_2 .icon_box{width: 190px;height: 550px;position: absolute;left: 50%;margin-left: -587px;top: 50%;margin-top: -297px;transition: .5s;overflow: hidden}
.part_2 .icon_box .icons{width: 1023px;height: 550px;transition: .5s}
.part_2 .icon_box .icons.down{transform: rotate(45deg)}
.part_2 .icon_box .icons.up{transform: rotate(0deg)}
.part_2 .icon_box a{position: absolute;width: 104px;height: 91px;transition: .5s}
.part_2 .icon_box a.down{transform: rotate(-45deg)}
.part_2 .icon_box .icons.up{transform: rotate(0deg)}
.part_2 .icon_box a.cur:after{content: '';position: absolute;width: 116px;height: 101px;background: url("img/icon_bg .png") no-repeat top center;left: 50%;margin-left: -58px;top: 50%;margin-top: -50.5px;}
.part_2 .icon_box a img{width: 100%;position: absolute;z-index: 5}
.part_2 .icon_box a.icon_1{top: 7px;left: 80px}
.part_2 .icon_box a.icon_2{top: 118px;left: 30px}
.part_2 .icon_box a.icon_3{top: 229px;left: 5px}
.part_2 .icon_box a.icon_4{top: 340px;left: 30px}
.part_2 .icon_box a.icon_5{top: 451px;left: 80px}
.part_2 .icon_box a.icon_6{top: 550px;left: 140px}
.part_2 .icon_box a.icon_7{top: 610px;left: 240px}
.part_2 .icon_box a.icon_8{top: 658px;left: 349px}


.part_2 .pet li{position: absolute;width: 860px;height: 650px;left: 50%;margin-left: -365px;top: 50%;margin-top: -340px;display: none}
.part_2 .pet li.cur{display: block}
.part_2 .pet li .pet_1{margin-top: 40px;margin-left: 20px}
.part_2 .pet li .pet_2{margin-top: 195px;margin-left: 160px}
.part_2 .pet li .pet_3{margin-top: 50px;margin-left: 0px}
.part_2 .pet li .pet_4{margin-top: 0px;margin-left: 60px}
.part_2 .pet li .pet_5{margin-top: 55px;margin-left: 30px}
.part_2 .pet li .pet_6{margin-top: 0px;margin-left: 120px}
.part_2 .pet li .pet_7{margin-top: 148px;margin-left: 66px}
.part_2 .pet li .pet_8{margin-top: 35px;margin-left: 65px}
.part_2 .pet .pet_name{position: absolute;background: url(img/pet_name.png) no-repeat top center;width: 61px;height: 267px;font-size: 26px;box-sizing: border-box;padding: 80px 18px 0;color: #fff;line-height: 28px;top: 45px;right: 0}

.part_3 .tips{width: 630px;font-size: 16px;color: #fff;text-align: center;line-height: 24px;margin: 20px auto 0}
.part_3 .operation_box .operation{position: absolute;width: 80px;height: 80px;background-repeat: no-repeat;background-size: 100% 100%;animation: Packs .8s alternate infinite linear;}
.part_3 .operation_box .desc{display: none;}
.part_3 .operation_box .desc{position: absolute;width: 365px;height: 146px;font-size: 14px;color: #000000;line-height: 24px;box-sizing: border-box;padding: 25px 40px 25px 38px;background: url("img/speak_left_bg.png") no-repeat top center;}
.part_3 .operation_box .desc_2{background-image: url("img/speak_right_bg.png");padding: 25px 25px 25px 40px;}
.part_3 .operation_box .desc_4{background-image: url("img/speak_right_bg.png");padding: 25px 25px 25px 40px;}
.part_3 .operation_box .desc_1{left: 50%;margin-left: -440px;top:50%;margin-top: -242px}
.part_3 .operation_box .desc_2{right: 50%;margin-right: -450px;top:50%;margin-top: -200px}
.part_3 .operation_box .desc_3{left: 50%;margin-left: -465px;top:50%;margin-top: -70px}
.part_3 .operation_box .desc_4{right: 50%;margin-right: -518px;top:50%;margin-top: -75px}
.part_3 .operation_box .operation_1{background-image: url("img/shovel.png");left: 50%;margin-left: -91px;top: 50%;margin-top: -223px;}
.part_3 .operation_box .operation_2{background-image: url("img/besom.png");left: 50%;margin-left: 21px;top: 50%;margin-top: -179px;animation-delay: .4s}
.part_3 .operation_box .operation_3{background-image: url("img/besom.png");left: 50%;margin-left: -117px;top: 50%;margin-top: -50px;animation-delay: .8s}
.part_3 .operation_box .operation_4{background-image: url("img/shovel.png");left: 50%;margin-left: 92px;top: 50%;margin-top: -51px;animation-delay: .2s}

.part_4 .tips{width: 600px;font-size: 16px;color: #6B4F2A;text-align: center;line-height: 24px;margin: 20px auto 0}
.part_4 .pet_info{position: absolute;width: 280px;height: 400px;background: url("img/pet_info.png") no-repeat top center;padding: 70px  35px 0;text-align: center;font-size: 14px;color: #000000;top: 50%;margin-top: -135px;left: 50%;margin-left: -140px;box-sizing: border-box}
.part_4 .pet_info.info_1{margin-left: -500px}
.part_4 .pet_info.info_3{margin-left: 220px}
.part_4 .pet_info img{position: absolute;width: 120px;height: 120px;left: 50%;margin-left: -60px;top: -60px;}
.part_4 .pet_info .info{text-align: left;line-height: 24px;}
.part_4 .pet_info .h1{font-size: 24px;font-weight: bold;margin-bottom: 10px}
.part_4 .pet_info .orange{color: #B86540}

.part_5 .tips{width: 580px;font-size: 16px;color: #fff;text-align: center;line-height: 24px;margin: 20px auto 0}
.part_5 .tab_box{width: 295px;height: 55px;z-index: 2;position: absolute;left: 50%;margin-left: -150px;top: 50%;margin-top: -380px}
.part_5 .tab_box .tab{display: block;float: left;width: 136px;height: 54px;box-sizing: border-box;text-align: center;line-height: 54px;color: #AC8553;font-size: 18px;border: 2px solid #AC8553;}
.part_5 .tab_box .tab.cur{background-color: #AC8553;color: #fff;}
.part_5 .tab_box .tab.tab_2{float: right}

.part_5 .img_box{width: 1000px;height: 570px;position: absolute;left: 50%;margin-left: -525px;top: 50%;margin-top: -375px;display: none}
.part_5 .img_box.cur{display: block}
.part_5 .img_box a{position: absolute;}
.part_5 .img_box a.img_1{left: 0;top: 0}
.part_5 .img_box a.img_2{left: 50%;margin-left: -165px;top: 85px;}
.part_5 .img_box a.img_3{right: 50%;margin-right: -500px;top: 32px;}
.part_5 .img_box a.img_4{left: 50%;margin-left: -367px;bottom: 4px;}
.part_5 .img_box a.img_5{right: 50%;margin-right: -360px;bottom: 3px;}

.part_5 .attention_box{position: absolute;width: 1140px;left: 50%;margin-left: -645px;top: 50%;margin-top: 390px;}
.part_5 .attention_box a{display: block;float: left;margin-right: 10px;width: 273px;height: 150px;background-position: top center;background-repeat: no-repeat;position: relative}
.part_5 .attention_box a:last-child{margin-right: 0px;}
.part_5 .attention_box a.wx{background-image: url("img/wx.png")}
.part_5 .attention_box a.wx:before{content:'';position: absolute;width: 192px;height: 216px;background: url("img/qrcode.png") no-repeat top center;left: 50%;margin-left: -85px;top: -190px;display: none;}
.part_5 .attention_box a.wx:hover:before{display: block}
.part_5 .attention_box a.wb{background-image: url("img/wb.png")}
.part_5 .attention_box a.tb{background-image: url("img/tb.png")}
.part_5 .attention_box a.kf{background-image: url("img/kf.png")}
.part_5 .watermelon{position: absolute;width: 385px;height: 336px;bottom:10px;right: 50%;margin-right: -835px}

.pop_guide{position: absolute;width: 1140px;height: 769px;background: url("img/guide.png") no-repeat top center;left: 50%;margin-left: -570px;top:100px;z-index: 10;display: none}
.pop_guide .close{position: absolute;top: 55px;right: 50px;transition: .5s}
.pop_guide .close:hover{transform: rotate(180deg)}

.pop_suc{position: absolute;text-align: center;width: 582px;height: 320px;border:5px solid #74583B;box-sizing: border-box;background: #F6E8E5;left: 50%;margin-left: -291px;top: 100px;padding-top: 60px;font-size: 16px;z-index:9;display: none}
.pop_suc .close{position: absolute;top: 15px;right: 20px;transition: .5s}
.pop_suc .close:hover{transform: rotate(180deg)}
.pop_suc .h1{font-size: 30px;color: #2E2A25;font-weight: bold;margin-bottom: 10px;}
.pop_suc .gift_code{width: 360px;height: 65px;line-height: 65px;margin: 20px auto;border-radius: 10px;background: #FFFCFB;font-size: 18px;box-sizing: border-box;padding-left: 25px;text-align: left}
.pop_suc .gift_code span{float: left}
.pop_suc .gift_code .red{color: #DD3D3D;font-size: 24px;font-weight: bold;display: inline-block;width: 185px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
.pop_suc .gift_code .copy{display: block;float: right;width: 60px;height: 38px;line-height: 38px;text-align: center;background: #DB7C57;color: #fff;border-radius: 5px;margin-top: 15px;margin-right: 15px;}
.pop_suc .tips{line-height: 22px;font-size: 14px;color: #C98F7A}

@media screen and (max-width: 1685px){
    .part_5{overflow: hidden}
}