/*
author:luoyongqin;
design:linsi;
update:2017-03-09;
*/

.act_wp{position: relative; min-width: 1200px; font:14px/1.5 'Lantinghei SC', 'Open Sans', Arial, 'Microsoft YaHei'; background: #181612;}
.act_main{position: relative; z-index: 1; margin: 0 auto; padding-bottom: 112px; width: 1200px;}
.modwp{width: 1180px !important;}
.img_wp img{display: block; width: 100%; border: none;}
.hide{position: absolute; left: -9999px;}
.act_btn_wp{text-align: center;}
.act_btn_wp a{display: block; margin: 0 auto; text-align: center; font-weight: bold; color: #533a11;}
.act_btn_wp a:hover{text-decoration: none;}

/* sprite */
.spr,.act_btn_wp a,.sec2 .prize_box{background: url(../img/spr.png) no-repeat;}

.ani_wp{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.ani_wp .img_01{height: 400px; background: url(../img/bg01.jpg) no-repeat center top;}
.ani_wp .img_02{height: 800px; background: url(../img/bg02.jpg) no-repeat center top;}
.ani_wp .img_03{height: 1351px; background: url(../img/bg03.jpg) no-repeat center top;}

.act_ban{position: relative; height: 730px; text-align: center;}
.act_ban h1{position: absolute; left: 50%; top: 23px; margin-left: -117px; width: 234px; height: 56px; overflow: hidden; line-height: 56;}
.act_ban .ban_img{position: absolute; left: 50%; top: 394px; margin-left: -535px; width: 1070px; height: 270px; background: url(../img/ban.png) no-repeat center top;}
.act_ban .subhd .num{display: none; position: absolute; z-index: 1; left: 670px; top: 430px; width: 60px; font-size: 40px; color: #ffda10; font-weight: bold;}
.act_ban .txt{position: absolute; z-index: 1; left: 0; top: 492px; width: 100%; font-size: 21px; color: #f4bd44;}
.act_ban .act_btn_wp{position: absolute; left: 0; top: 542px; width: 100%;}
.act_ban .act_btn_open{width: 340px; height: 74px; line-height: 74px; text-align: center; font-size: 30px; background-position: 0 -75px;}
.act_ban .act_btn_open:hover{background-position: 0 -150px;}

.sec1{margin-bottom: 65px;}
.sec1 h1{margin: 0 auto 45px; width: 751px; height: 31px; line-height: 31; overflow: hidden; background-position: 0 -525px;}
.card_wp .card .back,.card_wp .card_hv,.card_wp .card .num{background: url(../img/spr-card.png) no-repeat;}
.card_wp{margin-bottom: 24px; font-size: 0; text-align: center;}
.card_wp .card{position: relative; display: inline-block; vertical-align: top; top: 0; margin: 0 8px; width: 150px; height: 204px; text-align: center; -webkit-transition: top .5s; transition: top .5s;}
.card_wp .card .back,.card_wp .card .front{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.card_wp .card01 .back{background-position: -150px 0;}
.card_wp .card02 .back{background-position: -300px 0;}
.card_wp .card03 .back{background-position: -450px 0;}
.card_wp .card04 .back{background-position: -600px 0;}
.card_wp .card05 .back{background-position: -750px 0;}
.card_wp .card00 .front{background-position: 0 -225px;}
.card_wp .card01 .front{background-position: -150px -225px;}
.card_wp .card02 .front{background-position: -300px -225px;}
.card_wp .card03 .front{background-position: -450px -225px;}
.card_wp .card04 .front{background-position: -600px -225px;}
.card_wp .card05 .front{background-position: -750px -225px;}
.card_wp .card00 .anifront{background-position: 0 -225px;}
.card_wp .card01 .anifront{background-position: -150px -225px;}
.card_wp .card02 .anifront{background-position: -300px -225px;}
.card_wp .card03 .anifront{background-position: -450px -225px;}
.card_wp .card04 .anifront{background-position: -600px -225px;}
.card_wp .card05 .anifront{background-position: -750px -225px;}
.card_wp .card_hv{display: none; position: absolute; left: -18px; top: -23px; width: 186px; height: 240px; background-position: -900px 0;}
.card_wp .card:hover{top: -10px;}
.card_wp .card:hover .card_hv{display: block;}
.card_wp .card .num{display: none; position: absolute; top: -6px; right: -1px; width: 36px; height: 36px; background-position: -900px -250px; font: bold 24px/1.5 arial; color: #fff4da;}
.card_wp .card .front .num{display: block;}
.sec1 .act_btn_wp{margin-bottom: 27px;}
.sec1 .act_btn_lighten{display: block; margin: 0 auto; width: 306px; height: 64px; line-height: 64px; background-position: 0 -225px; font-size: 24px;}
.sec1 .act_btn_lighten:hover{background-position: 0 -300px;}
.sec1 .act_btn_wp .hint{margin-top: 5px; font-size: 16px; color: #f7dfaa; font-weight: lighter;}
.sec1 .act_btn_wp .hint .num{color: #ffd64b;}
.sec1 .lighten_list{position: relative; margin: 0 auto; width: 830px; height: 48px; line-height: 48px; font-size: 24px; font-weight: lighter; color: #c3a769; background-position: 0 -675px;}
.sec1 .lighten_list .tit{float: left; padding-left: 32px; white-space: nowrap;}
.sec1 .lighten_list .list_wp{float: left; width: 621px; overflow: hidden;}
.sec1 .lighten_list .list_wp ul{width: 9999px;}
.sec1 .lighten_list .list_wp li{float: left; margin-right: 29px; white-space: nowrap;}

.sec2{margin-bottom: 66px;}
.sec2 h1{margin: 0 auto 41px; width: 530px; height: 30px; line-height: 30; overflow: hidden; background-position: 0 -575px;}
.sec2 .prize_wp{text-align: center;}
.sec2 .prize_box{display: inline-block; vertical-align: top; margin: 0 13px; width: 303px; background-position: -350px 0;}
.prize_box .tit{padding: 29px 0 1px; font-size: 24px; font-weight: bold; color: #f8d971;}
.prize_box .img_wp{margin: 0 auto 62px; width: 210px; height: 210px;}

.prize_box .card_wp{margin-bottom: 70px;}
.prize_box .card_wp .card{margin: 0 2px; width: 42px; height: 57px; background: url(../img/spr-card.png) no-repeat;}
.prize_box .card_wp .card00{background-position: 0 -450px;}
.prize_box .card_wp .card01{background-position: -50px -450px;}
.prize_box .card_wp .card02{background-position: -100px -450px;}
.prize_box .card_wp .card03{background-position: -150px -450px;}
.prize_box .card_wp .card04{background-position: -200px -450px;}
.prize_box .card_wp .card05{background-position: -250px -450px;}
.prize_box .card_wp .card00.front{background-position: -300px -450px;}
.prize_box .card_wp .card01.front{background-position: -350px -450px;}
.prize_box .card_wp .card02.front{background-position: -400px -450px;}
.prize_box .card_wp .card03.front{background-position: -450px -450px;}
.prize_box .card_wp .card04.front{background-position: -500px -450px;}
.prize_box .card_wp .card05.front{background-position: -550px -450px;}
.prize_box .act_btn_convert{width: 262px; height: 56px; line-height: 56px; font-size: 22px; background-position: 0 -375px;}
.prize_box .act_btn_convert:hover{background-position: 0 -450px;}

.sec3 h1{margin: 0 auto 32px; width: 536px; height: 30px; line-height: 30; overflow: hidden; background-position: 0 -625px;}
.sec3 .rules_list{margin: 0 auto; width: 990px; font-size: 16px; line-height: 36px; color: #d0b474;}
.sec3 .rules_list a{margin-right: 7px; color: #ffc029;}
.sec3 .rules_list li{padding-left: 1.1em; text-indent: -1.1em;}
.sec3 .rules_list li:last-child{text-indent: 0;}


/*footer*/
.sys_footer{background: #181612;}
.sys_footer .foot{border-top: 1px solid #7d6c48; color: #754d17 !important;}
.sys_footer .foot,.sys_footer .foot a{color: #b99f68 !important;}

/* animation */
@-webkit-keyframes flash {
  20%, 60%, to {
    opacity: 1;
  }

  from, 40%, 80% {
    opacity: 0;
  }
}

@keyframes flash {
  20%, 60%, to {
    opacity: 1;
  }

  from, 40%, 80% {
    opacity: 0;
  }
}

.act_ban h1{-webkit-animation: flash .8s .5s both;animation: flash .8s .5s both;}

@-webkit-keyframes spin{
  from {
    -webkit-transform: perspective(1000px) rotateY(0deg);
    transform: perspective(1000px) rotateY(0deg);
  }

  to {
    -webkit-transform: perspective(1000px) rotateY(1080deg);
    transform: perspective(1000px) rotateY(1080deg);
  }
}

@keyframes spin{
  from {
    -webkit-transform: perspective(1000px) rotateY(0deg);
    transform: perspective(1000px) rotateY(0deg);
  }

  to {
    -webkit-transform: perspective(1000px) rotateY(1080deg);
    transform: perspective(1000px) rotateY(1080deg);
  }
}

.spin{-webkit-animation: spin 1s;animation: spin 1s;}

@-webkit-keyframes show{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes show{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.card:hover .card_hv{-webkit-animation: show .5s both;animation: show .5s both;}

/* animation end */

::selection{background: #d0b474; color: #fff;};