html,body,.wrap{height: 100%;}
body::-webkit-scrollbar { width:0px;}
/* bg.png */
.wrap *{line-height: 1;-webkit-box-sizing: border-box; box-sizing: border-box;font-size: 0px;appearance: none;-moz-appearance: none;-webkit-appearance: none;-ms-appearance: none;}
select::-ms-expand { display: none; }
.wrap{position: relative;}
p{text-align: justify;}
.sp{width: 1500px;height: 1500px;background: url(../img/sp.png) no-repeat;background-size: 1500px 1500px}
.sp_3{width: 1500px;height: 1500px;background: url(../img/garage/sp_3.png) no-repeat;background-size: 1500px 1500px}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
 .clearfix {display: inline-block;}  /* for IE/Mac */
 .clearfix {zoom: 1;display: block;   }
.fl{float: left;}
.fr{float: right;}
a{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.wrap{position: relative; width: 750px; height:auto;margin: auto; box-sizing: border-box; overflow: hidden;}
.reset_{padding-bottom: 95px;}
/* 导航 */
.nav_box{display: flex;align-items: center;flex-wrap: wrap;justify-content: center; position: fixed;top: 266px;left: 18px; width: 68px;height: 158px;background: url(../img/garage/nav.png)top center no-repeat;background-size: 68px 158px; }
.nav_box a{display: block;width: 100%;height: 74px;}
.nav_box >a.active{background: url(../img/garage/nav_hover.png)top center no-repeat;}
.nav_box .a1.active{ background-position: -0px -0px;}
.nav_box .a2.active{ background-position: -0px -75px;}
/* login */
.logo{position: absolute;right: 14px;top: 21px; width: 176px;height: 56px;}
.logo a {display: block;width: 176px;height: 56px;background-position: -371px -630px;}
/* 返回首页 */
 .returnHome{width: 100%;   height: 74px;transform: scale(1.3); }
 .returnHome a{display: block; width: 44px;height: 44px; background-position: -436px -525px;margin:20px auto 0;}
 .returnHome a.active{ display: block; width: 44px;height: 44px; background-position: -436px -525px;margin:20px auto 0;}
/* footer */
.footer{z-index: 10; position: fixed;left: 0;bottom: 0;  width: 100%; ;height: 95px;}
.footer a{position: relative;float: left;text-align: center;  line-height: 28px; width: 25%; height: 95px;background-position: -473px -277px;color: #f6f3ee;font-size: 24px;padding-top: 20px;}
.footer a span{display: none;}
.footer a.active span{ z-index: 9;display: block; position: absolute;left: 50%;top: 3px; text-align: center; margin-left: -98px;width: 196px;height: 91px;color: #f6f3ee;font-size: 24px;line-height: 28px;padding-top: 17px; background-position: -274px -278px;}


/* 背景一 */
.bg1{width: 100%;height: 1674px;background: url(../img/garage/bg2.jpg)top center no-repeat; background-size: 748px 1674px; padding: 160px 0 0 113px;}
.bg1 .person_box{position: relative; border-top: 1px solid transparent;}
.bg1 .toggle_box{z-index: 98; display: flex;flex-wrap: wrap;align-items: center; position: absolute;right: 22px; width: 59px;height: 768px;background: url(../img/garage/toggle.png)top center no-repeat; background-size: 59px 768px;}
.bg1 .toggle_box a{display: block; width: 58px;height: 58px;;}
.bg1 .toggle_box a.active{background: url(../img//garage/toggle_active.png) top center no-repeat;background-size: 59px 768px;}
.bg1 .toggle_box a.btn2.active{background-position: 0px -59px;}
.bg1 .toggle_box a.btn3.active{background-position: 0px -118px;}
.bg1 .toggle_box a.btn4.active{background-position: 0px -178px;}
.bg1 .toggle_box a.btn5.active{background-position: 0px -237px;}
.bg1 .toggle_box a.btn6.active{background-position: 0px -296px;}
.bg1 .toggle_box a.btn7.active{background-position: 0px -355px;}
.bg1 .toggle_box a.btn8.active{background-position: 0px -414px;}
.bg1 .toggle_box a.btn9.active{background-position: 0px -473px;}
.bg1 .toggle_box a.btn10.active{background-position: 0px -532px;}
.bg1 .toggle_box a.btn11.active{background-position: 0px -591px;}
.bg1 .toggle_box a.btn12.active{background-position: 0px -650px;}
.bg1 .toggle_box a.btn13.active{background-position: 0px -709px;}
.bg1 .gender_toggel{z-index: 10; display: flex;justify-content: space-between; position: absolute;top: 24px;right: 114px;  width: 118px; height: 145px; background-position: -659px -7px;}
.bg1 .gender_toggel.active{background-position: -523px -6px;}
.bg1 .gender_toggel a{width: 50%;height: 100%; display: block;}
.bg1 .role_box{position: relative; width: 424px;height: 697px; margin: 120px auto 0;text-align: center;}
.bg1 .role_box::after{position: absolute;left: 0;top: 0; content: ""; width: 424px;height: 417px;background: url(../img/garage/p1_bg.png)center center no-repeat; background-size: 424px 417px;transition: all 2s; animation: liCative 20s infinite linear;}
.bg1 .role_box img{position: relative;left: 17px; top: -70px; z-index: 9; }
.bg1  .scholl_text {position: absolute;top: 0px;left: 0px; }
.bg1  .scholl_text .scholl{ width: 239px;height: 433px;background:url(../img/garage/p1_school.png)-10px 40px no-repeat; background-size: 239px 386px; animation: leftIn 1s .3s both;}
.bg1  .scholl_text .weapon{z-index: 10;position: relative; top: -21px; width: 200px;height: 400px;background: url(../img/garage/p1_weapon.png)top center no-repeat; background-size: 200px 356px; animation: leftIn 1.5s .5s both;}
.bg1 .prop_intr{margin-bottom: 28px;}
.bg1 .prop_intr p{text-indent: 2em;}
/* 背景二 */
.bg2{width: 100%;height: 1764px;background: url(../img/garage/bg1.jpg)top center no-repeat; background-size: 748px 1764px; padding: 187px 0 0 113px;}
.bg2 .gift_box{margin-bottom: 40px;}
.bg2>strong{display: block;margin:0 auto 230px;  width: 436px; height: 38px;background-position: -7px -5px;animation: t_t 2s 1s both;}
.bg2 .gift_bg{position: relative; width: 100%;height: 609px;background: url(../img/garage/base_ico.png)67px center no-repeat; background-size: 573px 609px; overflow: hidden;}
.bg2 .gift_bg ul{position: absolute;top: 69px;left: 3px;width: 166px;}
.bg2 .gift_bg ul li{position: relative;display: flex;align-items: center;justify-content: center; width: 116px;height: 116px;}
.bg2 .gift_bg ul .center{margin: 60px 0 60px 5px;}
.bg2 .gift_bg ul .top,.bg1 .gift_bg ul .buttom{margin-left: 45px;}
.bg2 .gift_bg ul li.active::after{position: absolute;left: 50%;top: 50%; margin: -58px 0 0 -58px; content: "";width: 116px;height: 116px;background: url(../img/garage/active_bd.png)center center no-repeat; background-size: 116px 116px; animation: liCative 5s infinite linear;}
.bg2 .gift_bg .exhibition_box{position: relative; width: 464px;height: 464px;margin: 74px 0 47px 140px; border-radius: 50%; overflow: hidden;}
.bg2 .gift_bg .exhibition_box::after{position: absolute;left: 50%;top: 50%;margin: -224.5px 0 0 -224.5px; content: "";width: 449px;height: 449px;background: url(../img/garage/base_ico2.png)center center no-repeat;background-size: 449px 449px;animation: liCative 1s infinite linear;}
.bg2  .gift_bg >p{color: #9e824c;font-size: 22px;text-align: center;padding-left: 112px;}
.bg2  .gift_bg img{animation:rotateIn 2s both ;}
.bg2  .garage_text {margin-bottom: 24px;}
.bg2  .get_method_text p{position: relative;padding-left: 45px; color: #9e824c;font-size: 22px;line-height: 30px;}

/* li选中动画 */
@keyframes liCative{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
/* 角色入场动画 */
@keyframes rotateIn {
    0% {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(-200deg);
        -ms-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}
/* 标题 */
@keyframes t_t{
    0%{
        transform: translateY(20px);
        opacity: 0;
    }
    100%{
        transform: translateY(0px);
        opacity: 1;
    }
}
/* comm */
.comm_t{ width: 217px;height: 46px;background-position: -210px -74px;padding:0 57px 0 37px;color: #a37b3c;font-size: 26px;margin-bottom: 10px; line-height: 46px;text-align: center; font-weight: bold;}
.comm_p{color: #9e824c;font-size: 22px;line-height: 30px; padding:0 54px 0 30px;}
.comm_p span{color: #d45d3c;font-size: 22px;}
.comm_em{position: absolute;left: 25px;top: 11px; width: 11px;height: 11px;background-position: -455px -74px;}

  
@keyframes leftIn{
    0%{
        opacity: 0;
        transform: translateX(-30px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes spaceInUp {
    0% {
        opacity: 0;
        transform-origin: 50% 0%;
        transform: scale(.2) translate(0%, -200%);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 0%;
        transform: scale(1) translate(0%, 0%);
    }
}

.off{position: absolute;top: -47px;right: -15px; width: 40px;height: 40px;background-position: -321px -525px;}
.pop{display: none;}
.pop2{width: 437px;height: 193px;background: url(../img/pop2.png)center no-repeat;background-size:437px 193px;}