@charset "utf-8";
/* CSS Document */
/*edit:zhangning
@ update: 2017-02-24 */

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;}
ul,li,ol {list-style:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
i,em,cite,dfn{font-style:normal;}
.clearFix:after,.clearFix after {content: ".";display: block;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;}
.relative{position:relative;}
.absolute{position:absolute;}
.fixed{position:fixed;}
.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;}
body{font:14px/1.5 "Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",tahoma,Arial; color:#471B0C; overflow:hidden;}

.col_f2{color:#f2f2f2;}


/*公用导航*/
.nav{background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/red_bg.png') repeat;}
.con{position: relative; width: 1000px; margin: 0 auto; }
.nav .logo{ float: right;margin: 20px 8px 0 0;}
.nav ul{ float: right; width: 840px;margin: 0 auto;}
.nav li{ float:left;}
.nav a{ -webkit-box-sizing: border-box; box-sizing: border-box;padding-top: 14px; display:block;width:167px;height: 80px;border-left: 1px solid #CC3058; transition:all .1s;}
.nav a:hover,
.nav a.active {background-image:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/nav_bg.png');}
.nav a span{ display: block; margin-left: 40px;  }
.nav .nav_play span{  margin-left: 35px;  }
.nav .nav_change span{ margin-left: 25px;  }
.nav .tit{  color: #FFF6C7;font-size: 20px;font-weight: bold}
.nav .go{  width: 52px; height: 15px; line-height: 15px; text-align: center; color: #FDE1D1; font-size: 10px; font-weight: normal; background: #471B0C; border-radius: 18px;}
.nav a i{ transition: all 0.16s ease-out;}
.nav a:hover i{margin-left: 7px;  }
.nav a:hover .tit,.nav .active .tit{ color: #C5003F; }
.nav a:hover .go,.nav .active .go{ background: #C5003F; }

/* 首页 */
.index_wrap{background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/index_bg01.jpg') no-repeat center top;position: relative}
.index_wrap .around{width: 1920px;position: absolute;top: 0;  left: 50%;margin-left: -960px}
.index_wrap .contain{position: relative; width: 1000px;  height:981px; margin: 0 auto; }
.index_wrap .white_logo{position: absolute;top: 20px;  left: 50%;margin-left: -110px}
.index_wrap .more_person{position: absolute;top: 0;  left: 52px;}
.index_wrap .small_person{position: absolute;top: 226px;  left: 124px;}
.index_wrap .index_title{position: absolute;top: 336px;  left: 12px;}

.index_wrap .index_nav{position: absolute; width: 1064px; top: 706px;  left: 8px;}
.index_wrap .index_nav a{float: left; width: 206px;height:101px;margin-right: 60px; background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/index_nav_bg.png') no-repeat; }
.index_wrap .index_nav a.a1 span{margin-left: 45px;}
.index_wrap .index_nav a span{ display: block;margin-left: 54px;font-weight: bold}
.index_wrap .index_nav a i{ transition: all 0.16s ease-out;}
.index_wrap .index_nav a .event{color: #FDA945;margin-top: 13px;}
.index_wrap .index_nav a .con{color: #F35B00;font-size: 24px;margin-top:-7px;}
.index_wrap .index_nav a .go{  width: 52px; height: 15px; line-height: 15px; text-align: center; color: #FDE1D1; font-size: 10px; font-weight: normal;margin-top: 4px; background: #F35B00; border-radius: 18px;}
.index_wrap .index_nav a:hover i{margin-left: 7px;  }


/*萌战*/
.sel_wrap .con{  height: 901px;  }
.sel_box {  width: 1920px;height:901px;position: absolute;top: 0;  left: 50%;margin-left: -960px  }
.sel_box .sel{float: left;position: relative; width: 960px;height:901px;cursor: pointer}
.sel_box .sel .shadow{position: absolute; width: 100%;height: 100%; background: #180209;opacity: 0.8;transition: all 0.2s; }
.sel_box .sel01{background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/zhan_btn01.jpg') no-repeat}
.sel_box .sel02{background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/zhan_btn02.jpg') no-repeat}
.sel_box .sel_btn{  display: block;  position: relative;  width: 960px;height:329px;margin-top: 320px;  color: #FFF6C7;  font-size: 24px;  }

.sel01.active .sel_btn{  background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/old_bg.png') no-repeat right top;  }
.sel01.active .shadow{ display: none }
.sel02.active .sel_btn{  background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/new_bg.png') no-repeat right top;  }
.sel02.active .shadow{ display: none }

.sel_btn .txt{  width: 500px;  text-align: center;  }
.sel_btn .txt span{opacity: 0.6}
.sel_btn .txt b{  display: inline-block;  font-size: 56px;  color: #FFF6C7;  margin: 10px 0 5px 0;  }
.sel_btn .txt i{  display: inline-block;  width: 100px;  height: 100px;  margin-top: 40px;  }
.sel_btn01 .txt i{  background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/link_icon.png') no-repeat center;  }
.sel_btn02 .txt i{  background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/new_icon.png') no-repeat center;  }

/*旧*/
.event_box{  background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/white_bg.png') repeat;  }
.event_box .con{  height: 1870px;  color: #471B0C;  }
.login_box .login_btn{ display: block; width: 120px; height: 40px; line-height: 40px; text-align: center; color: #FFF6C7; font-size: 20px; font-weight: bold;margin: 90px auto 0; background: #C5003F; border-radius: 50px;}
.login_box p{ text-align: center; margin-top: 30px;}
.login_box p span{ margin-right: 25px;}
.login_box p a{ margin-right: 10px;color: #471B0C;font-weight: bold}

.event01_t{ display: block; margin: 84px auto 28px}
.event01_txt{margin: 25px 0 20px 0; font-size: 16px;text-align: center}
.event01_txt span{color: #C3003E;font-size: 18px;font-weight: bold}
.one_icon{ display: block; margin: 20px auto 10px;}
.get_btn{ display: block; width: 120px; height: 38px; line-height: 38px; text-align: center; color: #FFF6C7; font-size: 18px;margin: 20px auto 0; background: #C5003F; border-radius: 50px;}
.event02_t{ display: block; margin: 105px auto 90px}
.event02_old{width: 1000px;height:382px;margin-top: 90px; background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/event02_icons01.png') no-repeat 146px 20px; }

.get_btn95{ display: block; width: 240px; height: 60px; line-height: 60px; text-align: center; color: #FFF6C7; font-size: 24px;margin: 40px auto 0; background: #C5003F; border-radius: 50px;}
.event02_old ul{  width: 760px;  text-align: center;  font-size: 16px;  margin-left:126px;  }
.event02_old ul li{  float: left;  width: 187px;  margin-top: 36px;  }
.event02_old ul li.second_li{  margin-top: 108px;  }
.finish{ display: block; width: 80px; height: 30px; line-height: 30px; text-align: center; color: #FFF6C7; font-size: 16px;margin: 5px auto 0; background: #C5003F; border-radius: 50px;}

/*新*/
.new_con .one_icon{margin: 40px auto 10px;}
.new_event02_con{width: 936px; margin: 50px auto 0; }
.new_event02_con li{ position: relative; float: left; width: 234px;height: 334px;}

.new_con .event02_t{  margin-bottom: 50px;  }
.new_con .new_event02_con .one_icon{ position: absolute; top: 50px; left: 50%; margin-left: -50px; }
.new_con .flag_btn{ position: absolute;left: 50%;margin-left: -70px; bottom: 50px; width: 140px; height: 50px; line-height: 50px; text-align: center;font-weight: bold; color: #C5003F; font-size: 18px;background: #C5003F; border-radius: 50px;background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/yellow_kuai.png') repeat;}
.tips1{margin: 46px 0 0 108px;}
.tip{font-size: 16px;line-height: 24px;}
.tip .tit{ font-size: 18px; font-weight: bold}
.tips2{margin: 60px 0 0 108px;}

.slide_nav{ position: absolute; width: 141px; height: 424px; top: 320px; right: 50px; text-align: center; background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/slide_nav.png') no-repeat; }
.slide_nav  a{ display: block; height: 212px; color: #D67072; }
.slide_nav  span{ display: inline-block; margin: 104px 0 5px 0; color: #FFF6C7; font-size: 20px; font-weight: bold; }

.ele .one { position: absolute; width: 100%; height: 100%; background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/event02_one.png') no-repeat; }
.ele .two { position: absolute; width: 100%; height: 100%; padding-top: 40px; font-size: 16px; color: #C5003F; text-align: center; background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/back_bg.png') no-repeat; display: none;  }
.ele.on .one{display:none;}
.ele.on .two{display:block;}
.event02_finish{ display: block; width: 140px; height: 50px; line-height: 50px; text-align: center;font-weight: bold; color: #FFF6C7; font-size: 20px;margin: 30px auto 0; border-radius: 50px;background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/red_bg.png') repeat;}


/*萌战弹层*/
.alert_bg{ width: 100%; height: 100%; background: #000; position: absolute; top: 0; left: 0; z-index: 999; display: none;  }
.pop{  width: 374px;  height: 222px;  background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/white_bg.png') repeat;  position: absolute;  top: 0;  left: 0;  z-index: 1000;  border-radius: 9px;  color: #471B0C;  text-align: center;  display: none;  }
.pop:before{content: "";display: table;height: 0;clear: both;visibility: hidden;}
.close{ width: 70px;  height: 70px;  background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/close.png') no-repeat center;  position: absolute;  bottom: -80px;  left: 50%;  margin-left: -35px;  }

.props_send h3{ font-size: 18px; margin-top: 40px; }
.pop .btn_box{margin: 15px 0}
.pop .btn_box a{ display: inline-block; width: 100px; height: 40px; line-height: 40px; text-align: center; font-size: 20px; border-radius: 8px;color: #fff}
.confirm_btn{  background: #C5003F}
.cancel_btn{  background: #96C8AC}
.btn_box .confirm_btn{margin-right: 25px;}
.remark{ font-weight: bold; }
.current_get01{width: 455px; }
.current_get01 h3{ font-size: 18px; margin-top: 45px; }
.current_get01 .remark{ margin-top: 3px; text-align: left; padding-left: 50px; }
.current_get02{width: 374px; }
.current_get02 h3{ font-size: 18px; margin-top: 66px; }
.current_get01 .btn_box{margin: 20px 0 15px 0;}
.current_get02 .btn_box{margin-top: 27px}
.not_finish h3{font-size: 18px;  margin-top: 55px;}
.not_finish .change_role{ display: inline-block; width: 156px; height: 40px; margin: 20px 0 15px 0; line-height: 40px; text-align: center; font-size: 18px; border-radius: 8px;color: #fff;background: #C5003F}
.good{ display: inline-block; width: 90px; height: 40px; margin-top: 22px; line-height: 40px; text-align: center; font-size: 18px; border-radius: 8px;color: #fff;background: #C5003F}
.success h3,.give_success h3{margin-top: 60px;font-size: 24px;font-weight: bold}
.similar h3{margin-top: 50px;font-size: 24px;font-weight: bold}
.similar h3 span{font-size: 18px;font-weight: normal}

/*变身女装*/
.clothes_wrap01{background: url("https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/clothes_wrap01_bg.jpg?a1") no-repeat center top; color: #471B0C}
.clothes_wrap01 .con{height:1204px;background: url("https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/clothes_wrap01_cen.jpg?a1") no-repeat center top;text-align: center}
.clothes_wrap02{background: url("https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/clothes_wrap02_bg.jpg?a1") no-repeat center top;}
.clothes_wrap02 .con{height:1996px;background: url("https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/clothes_wrap02_cen.jpg?a1") no-repeat center top; color: #471B0C}

.clothes_wrap01 .clothes_title{ display: block; margin: 53px auto 0}
.clothes_wrap01 .login_box .login_btn{ margin-top: 55px;}
.clothes_wrap01 .suit{width: 487px;height: 397px;margin: 15px auto 0; background: url("https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/suit_img.png") center top}
.clothes_wrap01 .suit i{ position: absolute; width: 120px;height: 70px;letter-spacing: 1px;color: #C5003F;font-size: 18px;font-weight: bold}
.clothes_wrap01 .suit i a{ display: block; width: 90px; height: 30px; line-height: 30px;  color: #F8DAB8; font-size: 16px; font-weight: normal; margin: 5px auto 0; background: #C5003F; border-radius: 50px;}
.clothes_wrap01 .suit .head{  top: 26px;left: -11px; }
.clothes_wrap01 .suit .hand{  top: 166px;left: -11px;}
.clothes_wrap01 .suit .foot{  top: 314px;left: -11px;}
.clothes_wrap01 .suit .clothes{ top: 70px;  right: -14px;}
.clothes_wrap01 .suit .pants{  top: 160px;  right: -14px;  }

.clothes_wrap01 .have{font-size: 18px;margin: 20px 0 10px 0}
.clothes_wrap01 .collect_btn{ display: block; width: 175px; height: 44px; line-height: 44px;  color: #FFF6C7; font-size: 18px;margin: 0 auto; background: #C5003F; border-radius: 50px;}
.clothes_wrap01 .wen_list{ width: 800px; margin: 40px auto 0; }
.clothes_wrap01 .wen_list li{ float: left; width: 200px; }
.clothes_wrap01 .wen_list .wen_name{ font-size:18px;margin-bottom:10px; }
.clothes_wrap01 .wen_list .exchange{ display: block; width: 100px; height: 30px; line-height: 30px; color: #FFF6C7; font-size: 16px; font-weight: bold; margin: 0 auto 6px; background: #C5003F; border-radius: 50px; }

.clothes_wrap02 .event01_t{margin: 10px auto 35px;}
.clothes_wrap02 .event01_txt{margin-top: 36px;}
.clothes_wrap02 .one_icon{margin: 78px auto 20px}
.clothes_wrap02 a.look_btn{ display: block; width: 140px; height: 44px; line-height: 44px;  color: #FFF; font-size: 18px;margin: 0 auto; background: #C5003F; border-radius: 50px;text-align: center;}
.clothes_wrap02 a.hide_btn{ display: block;top:516px;left: 444px; width: 110px; height: 32px; line-height: 32px;  color: #E3EFE8; background: #96C8AC; border-radius: 50px;transition: all 0.2s linear;text-align: center}
.clothes_wrap02 .news_title{ display: block;margin: 90px auto 50px;}
.clothes_wrap02 .rule_title{ display: block;margin: 295px auto 50px;}
.clothes_wrap02 .quest{width: 21px;height: 29px; top: 475px;left:488px; background: url("https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/ask_icon.png") center top;animation:scaleA 1.5s linear infinite both;}
.clothes_wrap02 .shadow_half{width: 323px;height: 149px; top: 533px;left:333px; background: url("https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/shadow_half01.jpg") center top}
.clothes_wrap02 .tip{ margin-left: 98px;}
.tips4,.tips5{margin-top: 40px;}

.clothes_wrap02 .news_box{  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; width:801px; height: 378px; margin: 50px auto 0;  border: 1px solid #C5003F;text-align: center}
.news_box .news_head{  height: 47px;  line-height: 47px;  background: #C5003F;  color: #FCEDC1;  font-size: 20px;  }
.news_box .news_head li{ float: left; width: 266px; }
.news_box .news_head li{ float: left; width: 266px; }
.news_box .news_body li{ width: 100%; height: 47px; line-height: 47px; }
.news_box .news_body li span{ float: left; width: 266px; }
.news_box .news_body li:nth-child(odd){background: #fff }
.news_box .news_body li:nth-child(even){background: #F3EFE9 }

/*变身女神右侧导航*/
.right_nav{ position: absolute; width: 140px; height: 424px; top: 500px; right: 218px; text-align: center; }
.right_nav  a{ display: block; width: 140px; height: 46px;line-height:46px;color: #FFF6C7; font-size: 20px;font-weight: bold;background: #C5003F;border-radius: 50px;margin-bottom:20px;  }
.right_nav  a:hover{ background: #471B0C;}

.confirm_exchange h3{ font-size: 18px; margin-top: 40px; }
.reward_detail{height: 250px}
.reward_detail .ou{font-size: 16px; margin-top: 32px;}
.reward_detail .ou_ok{ display: block; width: 220px; height: 40px; line-height: 40px; text-align: center; color: #FFF; font-size: 18px;margin: 15px auto 13px; background: #C5003F; border-radius: 8px;}
.give_pop{  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; width: 800px; height: 520px;padding:60px 60px 0; font-size: 18px; background: #F4F0EA;text-align: left}
.give_pop .role_name{ display: inline-block;width: 470px;height: 40px; border: 1px solid #471B0C; margin-top: 15px; padding: 0;background: #fff;font-size: 16px;}
.give_pop .input_confirm{ display: inline-block; width: 150px; height: 40px; line-height: 40px;margin-left: 40px; text-align: center; color: #FFF; font-size: 18px; background: #C5003F; border-radius: 50px;}
.give_pop .input_confirm{ display: inline-block; width: 150px; height: 40px; line-height: 40px;margin-left: 40px; text-align: center; color: #FFF; font-size: 18px; background: #C5003F; border-radius: 50px;}
.give_pop .find_msg{  width: 100%; top: 158px; left: 0; text-align: center;font-size: 18px;}
.give_pop .find_msg span{ margin-left: 30px;}
.give_pop .btn_box{margin: 60px 0; text-align: center}
.tips6{margin-top: 50px;font-size: 14px;}
.hide_success{ width: 505px;height: 245px;}
.hide_success p{ padding: 33px 0 0 170px;font-size: 18px;}
.hide_success p b{ font-size: 24px;}
.hide_success .good{ margin-left: 164px;}
.hide_success .lin_img{  top: -30px;  left: -5px;}
.clothes_wrap02 a.hide_btn:hover{  top: 500px; }
.get_icon{width: 140px;height: 140px; background: url("https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/look_img.png") center top;margin: 78px auto 20px}
.get_icon img {display: block; width: 100px;  height: 100px;margin:20px auto 0;}

/*动画*/
.topShow{
	animation:topShow 0.7s linear  both;
}
.topShow2{
	animation:topShow 0.4s 0.6s linear  both;
}
.drop{
	animation:drop 0.42s linear both;
}
.scale{
	animation:scale 0.3s 0.15s linear both;
}

.ani_rotate.running{
	animation-play-state:running;
	-webkit-animation-play-state:running;
}
@keyframes scale{
	0%{transform:scale(0.6);}
	100%{transform:scale(1);}
}

@keyframes topShow{
	0%{transform:translate3d(0,45px,-1000px);opacity: 0;}
	100%{transform:translate3d(0,0,0);opacity: 1;}
}

@keyframes drop{
	0% {
			-webkit-transform: translate3d(0,-10%,0);
			transform: translate3d(0,-10%,0);
			opacity: 0;
		}
	100% {
			-webkit-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
			opacity: 1;
		}
}
@keyframes scaleA{
	0%,100% {
		transform: scale(0.6);
	}
	70% {
		transform: scale(1);
	}

}

.got{background: #d7d7d7}