/**
* Date: 2016-06-24-10:38;
* Author: Davin
**/
/* css reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, span, a, b, strong, object, iframe, label, img, blockquote, ins, del, select, form, input, textarea, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0;padding:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
table {border-collapse:collapse;border-spacing:0}
li {list-style:none}
a {text-decoration:none}
fieldset, img {border:0 none}
textarea {resize:none}
:focus {outline:0 none}
.h5bp { display:inline-block;font:0/0 a;color:transparent;background-color:transparent;border:0; overflow:hidden}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {zoom:1}

/* content text-shadow: 1px 0px 0px #000,-1px 0px 0px #000,0px 1px 0px #000,0px -1px 0px #000; */
.wrap {font:12px \5FAE\8F6F\96C5\9ED1, Tahoma, Arial;background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_plant2.jpg) no-repeat}
.plant {position: relative;width: 800px;height: 600px;overflow:hidden; }
.plant21 {background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_plant21.jpg) no-repeat -3px -3px;}
.plant22 {background:url(https://static.web.sdo.com/aion/pic/project/20180409luck/boss.jpg) no-repeat -3px -3px;}
.plant23 {background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_plant23.jpg) no-repeat -3px -3px;}
.plant24 {background:url(https://static.web.sdo.com/aion/pic/project/20170901qita/bosschange1.jpg) no-repeat -3px -3px;}
.plant25 {background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_plant27.jpg) no-repeat -3px -3px;}
.plant26 {background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_plant26.jpg) no-repeat -3px -3px;}
.plant27 {background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_plant25.jpg) no-repeat -3px -3px;}
.options {height: 26px;background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_options.png) no-repeat;}
.btn-back {float: right;width:40px;height:26px;}
.btn-back a {width:40px;height:26px;display:block;background:url(https://static.web.sdo.com/aion/pic/joy/img/btn_back.png) no-repeat;}
.btn-back a:hover {background:url(https://static.web.sdo.com/aion/pic/joy/img/btn_back_hover.png) no-repeat;}
.items-list dt, .items-list dd {float: left;height:24px;}
.items-list dt {color: #fff6bc;width: 150px;text-align: right;line-height: 26px;}
.items-list dd {width: 115px;position: relative;}
.items-list dd a {width:108px;height:24px;line-height: 24px;display:block;color: #fff}
.items-list dd a:hover, .items-list dd a.active {background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_item.png) no-repeat;}
.items-list dd img {vertical-align: -6px;}
.item-intro {position: absolute;left: 0;top:22px;z-index:2;color: #fff6bc;width:108px;height:88px;background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_item_intro.png) no-repeat;display: none}
.items-list dd .item-intro {line-height: 18px}
.item-intro p {padding: 2px 2px 0}
.item-intro span {color: #ffc858;}
.box-intro {width:400px;}
.box-intro p {padding: 30px 0 0 24px;color: #fff6bc;line-height: 1.6}
.progress {width: 288px;height: 52px;margin: 250px 0 0 60px;background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_progress.png) no-repeat 0 100%;}
.progress-number {text-align: right;color: #fff6bc;padding-right: 5px;height: 18px;}
.progress-number span {color: #ff1600;}
.progress-current {position: relative;width: 282px;height: 16px;left: 2px;top: 3px}
.progress-current p {width: 282px;height: 16px;background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_progress_current.png) no-repeat;-webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
.progress-current span {position: absolute;width: 10px;height: 14px;left:0;top: 1px;background:url(https://static.web.sdo.com/aion/pic/joy/img/ico_current.png) no-repeat;-webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
.kick {width: 288px;text-align: center;margin-left: 60px;position:relative;}
.kick a {width:170px;height:60px;display:block;margin:0 auto 4px;background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_10kick.png) no-repeat;}
.kick a:hover {background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_10kick_hover.png) no-repeat;}
.kick p {color: #fff;}
.kick span {color: #fff6bc;}
.lottery {position: absolute; left: 410px;top:70px; width: 400px;height: 460px;}
.lottery li {float: left; margin: 0 10px 10px 0; width: 116px;height: 142px;}
.lottery li a {display:block;width: 116px;height: 142px;background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_card.png) no-repeat; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;}
/*.lottery li a:hover {background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_card_hover.png) no-repeat;}*/
.flip {-webkit-transform: rotateY(-180deg);-moz-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);transform:rotateY(-180deg);}
.lottery a span {display:block;width: 116px;height: 142px;}
.lottery a .flash {background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_flash.png) no-repeat;}
.lottery .random1 a {background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_card1.png) no-repeat;}
.lottery .random2 a {background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_card2.png) no-repeat;}
.lottery .random3 a {background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_card3.png) no-repeat;}

.tab {position: absolute;left: 2px;top:539px;width:798px;height:62px;}
.tab li {float: left;}
.tab a {width:114px;height:62px;display:block;background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_tab2.png) no-repeat;}
.tab a:hover, .tab a.active {background:url(https://static.web.sdo.com/aion/pic/joy/img/skin20170605/bg_tab_hover22.png) no-repeat;}
#tab1 a, #tab1 a:hover, .tab #tab1 a.active {background-position: 0 0;}
#tab2 a, #tab2 a:hover, .tab #tab2 a.active {background-position: -114px 0;}
#tab3 a, #tab3 a:hover, .tab #tab3 a.active {background-position: -228px 0;}
#tab4 a, #tab4 a:hover, .tab #tab4 a.active {background-position: -342px 0;}
#tab5 a, #tab5 a:hover, .tab #tab5 a.active {background-position: -456px 0;}
#tab6 a, #tab6 a:hover, .tab #tab6 a.active {background-position: -570px 0;}
#tab7 a, #tab7 a:hover, .tab #tab7 a.active {background-position: -684px 0;}

.spot, .spot2  {
-webkit-animation: shake .2s steps(32) infinite;
-moz-animation: shake .2s steps(32) infinite;
animation: shake .2s steps(32) infinite;
}
@-webkit-keyframes shake {
0% {background-position: -3px 0; }
25% {background-position: -3px -3px; }
50% {background-position: 0 0; }
75% {background-position: 0 -3px; }
100% {background-position: -3px -3px;}
}
@-moz-keyframes shake {
0% {background-position: -3px 0; }
25% {background-position: -3px -3px; }
50% {background-position: 0 0; }
75% {background-position: 0 -3px; }
100% {background-position: -3px -3px;}
}
@keyframes shake {
0% {background-position: -3px 0; }
25% {background-position: -3px -3px; }
50% {background-position: 0 0; }
75% {background-position: 0 -3px; }
100% {background-position: -3px -3px;}
}



.ico-limit {position: absolute; left: 184px;top:14px; width: 114px;height: 32px;background:url(https://static.web.sdo.com/aion/pic/joy/img/ico_limit.png) no-repeat;}
 
.tile {position: absolute;top:22px;height:28px; padding-top: 20px}
.ico-add {float: right;width:10px;height:10px;display:block;position: relative;top:4px;right:22px;background:url(https://static.web.sdo.com/aion/pic/joy/img/ico_add.png) no-repeat;}
.tile1, .tile2, .tile3 {width:118px;color: #fff;padding-left: 50px;}
.tile1 {left: 25px;background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_tile1.png) no-repeat;}
.tile2 {left: 600px;background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_tile2.png) no-repeat;}
.tile3 {left: 444px;background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_tile3.png) no-repeat;}
.tile4 {left: 609px;width:186px;color: #fff;background:url(https://static.web.sdo.com/aion/pic/joy/img/bg_tile4.png) no-repeat;color: #071b39}
.tile4 span {float: left;padding-left: 18px}
.tile4 em {float: left;font-style: normal;padding-left: 6px}
.tile4 b {float: left;color: #ffde00;text-align: center; width: 29px}



.tile5{width:118px;color: #fff;padding-left: 50px;}
.tile5 {left: 444px;background:url(http://fu5.sdo.com/10036/201704/14925690251497.png) no-repeat;}