@charset "utf-8";
/* CSS Document */
/*edit:wangshuo
@ update: 2016-07-25 */

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;}
i,em,cite,dfn{font-style:normal;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{*display:inline-block;*zoom:100%;}
.clearFix:after,.clearFix after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearFix{*display:inline-block;*zoom:100%;}
.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;}
.none{display:none;}
.block{display:block;}
.overf{overflow:hidden;}
.center{margin:0 auto;}
.middle{vertical-align:middle}
: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; background:url(https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/twisted/bg_body.jpg); overflow-x:hidden;}
.bold{font-weight:bold;}
.font_18{font-size:18px;}
.font_24{font-size:24px;}
.mt30{margin-top:30px;}
.mt50{margin-top:50px;}

/*弹窗部分 https://static.web.sdo.com/dn/pic/dn_act/2016cj/btn_close.png*/
.alert_bg{width:100%; height:100%; background-color:#000; position:absolute; top:0; left:0; z-index:999; display:none; }
.dialog{position:absolute; z-index:10001; color:#4b4b4b; top:50px; display:none;}
.dialog .con{height:222px; width:374px; background:url(https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/twisted/bg_body.jpg); border-radius:5%;}
.close_dialog{width:60px; height:60px; display:block; margin:20px auto 0; background:url(https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/twisted/ico_close.png) no-repeat;}
.dialog  .btn_ok{margin:15px auto; background:#c5003f; width:90px; height:40px; line-height:38px; font-size:18px; font-weight:bold; color:#fff; display:block; border-radius:12px;}

/*公用导航*/
.nav{background:url('https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/play/red_bg.png?a2') 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; }

/* 侧导航 */
.side_nav{position:absolute; width:140px; right:100px; z-index: 100; top:377px;}
.side_nav a{font-size:20px; line-height:38px; color:#fff6c7;  display:block; height: 40px; background:#c5003f; border-radius:40px; text-align:center; margin:20px 0;}
.side_nav a:hover{background:#471b0c;}

/*第一部分*/
.wrap {position:relative; overflow: hidden; background:url(https://static.web.sdo.com/dn/pic/dn_18act/201805LOVELY/twisted/bg_wrap01.png) no-repeat center top; min-width:1000px;}
.wrap .con{position:relative; width:1000px; margin:0 auto;}
.wrap .con_tit{display:block; margin:0 auto 45px;}
.wrap .banner {height:580px;}
.banner .btn_login{font-size:20px; line-height:38px; color:#fff6c7;  display:block; width: 121px; height: 40px; background:#c5003f; border-radius:40px; text-align:center; margin:0 auto 25px;}
.banner .use_info{text-align:center;}
.banner .use_info span, .banner .use_info a{color:#471b0c; margin:0 7px;}
.banner .use_info a:hover{text-decoration:underline;}
.banner .slogan{display:block; margin:145px auto 60px;}

/*抽奖*/
.wrap .draw {height:925px}
.draw .bigBox{top:0px; left:200px;}
.draw .light{top:137px; left:302px; }
.draw .btn_start{top:245px;left:408px; }
.draw .arrow {top:150px; left:455px;}
.draw .egg {top:480px; left:417px; opacity:0;}
.draw .ball{top:-30px; left:190px; height:650px;width:650px; background:url(https://static.web.sdo.com/bfo/pic/act_bfo/BFO/active/1801newYear/css_sprites.png);}
.draw .box_btn {text-align:center; position:absolute; bottom:95px; width:100%; font-size:28px; font-weight:bold;}
.draw .box_btn a{line-height:65px; color:#fff;  display:inline-block; width:205px; height:68px; background:#96c8ac; border-radius:80px; text-align:center; margin:0 25px;}
.draw .box_btn .btn_playOnce{color:#fff6c7; background:#c5003f;}

/* 邀请码 */
.wrap .code{}
.code_box{width:680px; height:300px; padding:50px 60px; border:1px solid #c5003f; margin:0 auto 120px;}
.code_input{border:1px solid #c5003f; background:#f4f0ea; width:440px; height:40px; padding:0 15px;}
.btn_getCode,
.btn_copyCode{font-size:18px; line-height:40px; color:#fff6c7; background:#c5003f; display:inline-block;  border-radius:40px; text-align:center; margin:0 25px; padding:0 20px;}
.btn_copyCode{color:#fff; background:#96c8ac; margin:40px 0 75px;}
.code .tips{line-height:1.7;}
.code .tips h2{font-size: 18px;}

/* 绑定关系 */
.wrap .bind{}
.bind_box{width:800px; margin:0 auto 100px;}
.bind .table_b a{width:50%; height:47px; line-height:45px; font-size:20px; font-weight:bold; display:block; float:left; color:#fff; background:#c5003f; border-top-left-radius:25px; border-top-right-radius:25px; letter-spacing: 2px;}
.bind .table_b a.active{background:#fff7ce; color:#c5003f;}
.bind .table_d {width:100%;}
.bind .table_d th{background:#fff7ce; color:#c5003f; width:50%; height:47px; line-height:45px; font-size:18px;}
.bind .table_d td{width:50%; height:47px; line-height:45px; font-size:14px; color:#471b0c;}
.bind .table_d tr:nth-child(odd){background:#f3efe9;}
.bind .table_d tr:nth-child(even){background:#fff;}
/* 规则 */
.wrap .rule .text{line-height:1.7; margin:0 0 70px 95px;}
.wrap .rule h2{font-size: 18px;}



.ani_arrow{animation:arrow 2s infinite both;}
@keyframes arrow{
	0%{opacity:0;transform:translate3d(0,-100%,0);}
	70%{opacity:1;transform:translate3d(0,0,0);}
	90%,100%{opacity:0;}
}

.ani_light{animation:light .5s infinite alternate both ;}
@keyframes light{
	0%{opacity:.7; transform:scale(.7);}
	100%{opacity:1; transform:scale(1);}
}

.ani_egg.active {animation:egg .3s linear 2.85s both;   transform-origin:50% 30%; }
@keyframes egg{
	0%{transform:scale(.8)  translate3d(0,0,0); opacity:0;}
	1%{opacity:1;}
	100%{transform:scale(15) translate3d(0,-50px,0); opacity:1;}
}

.ani_rotate.active {animation:rotate .5s  both ;}
@keyframes rotate{
	0%{transform:rotate3d(0,0,0,0deg);}
	100%{transform:rotate3d(0,0,1,120deg);}
}

.ani_moveR {animation:moveR 2s  both ;}
@keyframes moveR{
	0%{transform:translate3d(-100%,0,0);}
	100%{transform:rotate3d(0,0,0);}
}

.ani_moveL {animation:moveL 2s  both ;}
@keyframes moveL{
	0%{transform:translate3d(100%,0,0);}
	100%{transform:rotate3d(0,0,0);}
}

.ani_moveT {animation:moveT 1.5s  both ;}
@keyframes moveT{
	0%{transform:translate3d(0,100%,0);}
	100%{transform:rotate3d(0,0,0);}
}


.ball.active {
	animation:test 2250ms steps(44) 500ms  both;
}
 

@-webkit-keyframes test {
  0% {background-position:0px -0%;}
  100% {background-position:0px -4400%;}
}


/* 2018 05 22 start*/
.font_14{font-size:14px;}
.font_16{font-size:16px;}
.img_tit {position:relative; cursor:pointer;}
.img_tit .layer {position: absolute; padding-bottom:20px; display:none; bottom:50px; left:-50px;}
/* 2018 05 22  end*/



/* 分页 */
/* 2018 05 22 start*/
.bind_success .con{padding:0  20px; width:auto; height:auto;}
.bind_success .btn_ok{padding:0 10px; font-size:16px; margin:30px auto;}
.user_personal .tit{height:50px; color:#ffffff; background:#c5003f; font-size:24px; line-height:50px;}
.user_personal .con{width:650px; height:auto;}
.user_personal .table {width:100%; margin:15px auto 30px;}
.user_personal .table td{width:50%; height:30px; line-height:30px;}

.banner .use_info .btn_user_personal{color:#c5003f; margin:0 7px;}

/* 2018 05 22  end*/