/*reset*/
@charset "utf-8";
/* CSS Document */

html,body,div,span,object,embed,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,cite,code,del,dfn,em,img,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,tbody,tfoot,thead,tr,th,td,section,article{margin:0;padding:0;-webkit-text-size-adjust:none;}
html{overflow-y:scroll; overflow-x:hidden;}
table{border-collapse:collapse; border-spacing:0;}
img{border:none;display:block;}
ul,li,ol {list-style:none;}
i,em,cite,dfn{font-style:normal;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearMargin:before{content: "";display: table;height: 0;clear: both;visibility: hidden;}
.clearfix{*display:inline-block;*zoom:100%;}
.clearMargin:before{content: "";display: table;height: 0;clear: both;visibility: hidden;}
.clear{clear:both; line-height:1px; height:1px; *display:inline; font-size:1px;}
.fl{float:left;}
.fr{float:right;}
.alignL{text-align:left;}
.alignC{text-align:center;}
.alignR{text-align:right;}
.middle{vertical-align:middle;}
.relative{position:relative;}
.absolute{position:absolute;}
.none{display:none;}
.block{display:block;}
.overf{overflow:hidden;}
.center{margin:0 auto;}
:focus,a{outline:none; -moz-outline-style:none;}
a:visited,a:link{text-decoration:none;}
a:hover {text-decoration:none;}
.yellow{color:#fff954;}
body{font:14px/1.6 "Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",tahoma,Arial; color:#763800;}


/*body*/
.mobile{
    width: 1200px;
    overflow: hidden;
}

.wrap{

}
.wrap01{
    background:url("https://static.web.sdo.com/dn/pic/dn_19act/1908qx/wrap01_bg.jpg?A1")  no-repeat center top;
}
.wrap01 .contain {
    width: 1200px;
    height: 680px;
    margin: 0 auto;
    background:url("https://static.web.sdo.com/dn/pic/dn_19act/1908qx/wrap01_cen.jpg?A1")  no-repeat center;
}
.wrap02{
    background:url("https://static.web.sdo.com/dn/pic/dn_19act/1908qx/wrap02_bg.jpg?A1")  no-repeat center top;
    text-align: center;
}
.wrap02 .contain {
    width: 1200px;
    height: 1984px;
    margin: 0 auto;
    background:url("https://static.web.sdo.com/dn/pic/dn_19act/1908qx/wrap02_cen.jpg?A1")  no-repeat center;
}
.alert_bg{
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
}
.pop:before{content: "";display: table;height: 0;clear: both;visibility: hidden;}
.pop{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    width: 630px;
    height: 455px;
    color: #B0B0B0;
    z-index: 1000;
    top: 0;
    left: 50%;
    background: #232746;
}
.rule_pop{
    height: 550px;
}
.slide_close{
    position: absolute;
    width: 55px;
    height: 55px;
    top:0;
    right: -66px;
    background: url('https://static.web.sdo.com/dn/pic/dn_19act/1908qx/close.png') no-repeat center;
}
.pop_con {
    width: 535px;
    line-height: 22px;
    margin: 33px auto 0;
}
.event_ul{ margin-top: 25px}
.event_ul li{
    position: relative;
    padding-left: 20px;
}
.event_ul li .no{
    position: absolute;
    top:0;
    left: 0;
}
.reward{
    margin-top: 25px;
}
.reward_name{
    margin: 3px 0 40px;
    text-align: center;
    font-size: 20px;
    line-height: 37px;
}
.success_pop,.fail_pop{
    width: 495px;
    height: 250px;
}
.dif_txt{
    margin: 30px 0;
    text-align: center;
    padding: 0 20px;
}
.fail_pop .dif_txt{
    margin: 70px 0 40px;
}
.pop .confirm_btn{
    display: block;
    margin: 0 auto;
}
/*wrap01*/
.mu_box{
    width: 435px;
    height: 65px;
    top:0;
    left: 382px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    background: rgba(18,19,27,0.9);
    text-align: center;
}
.mu_l{ display: inline-block;height: 65px;line-height: 62px; color: #EED15B;font-size: 16px;font-weight: bold;}
.input_wrap{ display: inline-block;margin-left: 20px}
.input_wrap .input_box{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block;padding: 0 83px 0 20px;margin: 0;border: 0;border-radius: 20px; width: 310px;height: 40px;line-height: 40px;font-size: 16px;}

input::-webkit-input-placeholder{ font-size: 16px;color: #878787}
.submit_btn{ position: absolute;top:0;right:0;display: inline-block; width: 80px;height: 40px;line-height: 40px;font-size: 16px;color: #232746; font-weight: bold; border-radius: 20px;background: #7DBED7;text-align: center}

.barrage {position:absolute; font-size:14px; top:0;left: 50%;margin-left: -960px;  height:250px; padding-bottom:30px; width:1920px; overflow:hidden;}
.barrage .b_li{line-height:36px;font-weight:500;color:#fff; left:0;top:0; white-space:nowrap; position:absolute; transition:transform 12s linear;}

.common_btn{ display: inline-block; width: 158px; height: 48px;line-height: 48px;font-size: 18px;color: #EFECE5; background: #2B3052;border-radius: 25px; border: 1px solid #668BAC;text-align: center}
.rule_btn{ position: absolute;bottom:30px;left: 385px;}
.reward_btn{ position: absolute;bottom:30px;left: 643px;}

.wrap01 .player_ifo{ position: absolute; bottom:95px; right: 0; text-align: right; font-size: 12px;color: #EFECE5; width: 1100px; z-index: 10; }
.wrap01 .player_ifo a.login_out{ color: #EFECE5; }
.wrap01 .player_ifo span{margin-right: 15px}
.wrap01 .player_ifo .yu{margin:3px 5px 0 0}
.wrap01 .player_ifo .yu i{color: #73BAD1;font-weight: bold}

.tit{ display: block;margin: 22px auto 0}
.pop .tit{ display: block;margin: 32px auto 0}
.top_wrap{ width: 133px;overflow: hidden}
.phase{ margin-top: 50px;}
.phase li{position: relative; float: left;width: 133px;margin-right: 18px;}
/*.phase.not li{cursor: default}*/
.phase2{ width: 787px;margin: 50px auto 0}
.phase3{ width: 467px;margin: 50px auto 0}
.phase2 li{margin-right: 85px}
.phase3 li{margin-right: 200px}

.before{ width: 133px;height: 260px;background: url("https://static.web.sdo.com/dn/pic/dn_19act/1908qx/item_bg01.png") no-repeat center bottom}
.ticket_box{ position: relative; width: 133px;height: 73px;line-height: 60px;color: #FFFFFF;font-size: 24px;font-weight: bold; background: url("https://static.web.sdo.com/dn/pic/dn_19act/1908qx/tickit_bg.png") no-repeat}

.after{ position: absolute;bottom:0;left: 0}
.after_top{ position: absolute;bottom:0;left: 0;width: 133px;height: 311px;background: url("https://static.web.sdo.com/dn/pic/dn_19act/1908qx/shadow.png") no-repeat}
.tou_btn{ position: absolute;display: block; bottom:0;left: 0;width: 133px;height: 73px;background: url("https://static.web.sdo.com/dn/pic/dn_19act/1908qx/tou_btn.png") no-repeat}
.after_txt{ position: absolute;top:19px; right: 6px;animation:fadeBottom 0.4s ease 1 normal both running;}
.more_btn{ position: absolute;display: block; bottom:92px;left: 10px;width: 14px;height: 74px;background: url("https://static.web.sdo.com/dn/pic/dn_19act/1908qx/more_btn.png") no-repeat;animation:fadeTop 0.4s ease 1 normal both running;}
.zu{ position: absolute;left: 0;bottom:-50px;}
.npc_l{ position: absolute;bottom:-50px;left: 0;animation:fadeLeft 0.4s ease 1 normal both running;display: none}
.npc_r{ position: absolute;bottom:-50px;left: 0;animation:fadeRight 0.4s ease 1 normal both running;display: none}

.phase li:hover .zu{
    display: none;
}
.phase li:hover .npc_l,.phase li:hover .npc_r{
    display: block;
}
.phase li:hover .after{
    display: block;
}
.name{
    margin-top: 10px;
    left: 50%;
    transform: translate(-50%,0);
}
.li02,.li04,.li06,.li08{ margin-top: 50px;}
.li02 .zu,.li02 .npc_l,.li02 .npc_r{ bottom:-67px}
.li03 .zu,.li03 .npc_l,.li03 .npc_r{ bottom:-67px}
.li04 .zu,.li04 .npc_l,.li04 .npc_r{ bottom:-67px}
.li05 .zu,.li05 .npc_l,.li05 .npc_r{ bottom:-70px}
.li07 .zu,.li07 .npc_l,.li07 .npc_r{ bottom:-67px}
.li08 .zu,.li08 .npc_l,.li08 .npc_r{ bottom:-70px}
.li06 .zu,.li06 .npc_l{ bottom:-67px}
.li06 .npc_r{ bottom:-47px}
@keyframes fadeLeft {
    0% {
        opacity: 0.3;
        -webkit-transform: translate3d(-30px,0,0);
        transform: translate3d(-30px,0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeRight {
    0% {
        opacity: 0.3;
        -webkit-transform: translate3d(30px,0,0);
        transform: translate3d(30px,0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeTop {
    0% {
        opacity: 0.3;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeBottom {
    0% {
        opacity: 0.3;
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}