﻿@charset "utf-8";
/*zhangning*/
/* 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;}
ul,li,ol {list-style:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
i,em,cite,dfn{font-style:normal;}
.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;}
.none{display:none;}
.block{display:block;}
.overf{overflow:hidden;}
.center{margin:0 auto;}
.m40{margin-top: 40px;}
:focus,a{outline:none; -moz-outline-style:none;}
a:visited,a:link{text-decoration:none;}
a:hover {text-decoration:none;}
body{font:14px/1.6 "Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",tahoma,Arial; color:#fff;position: relative }

.wrap01{background:url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/wrap_bg01.jpg') no-repeat center top;}
.wrap02{background:url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/wrap_bg02.jpg') no-repeat center top;}
.contain{ width: 1000px;  margin: 0 auto; position: relative; }
.contain:before{content: "";display: table;height: 0;clear: both;visibility: hidden;}
.wrap01 .contain{ height:600px; background:url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/wrap_cen01.jpg') no-repeat;  }
.wrap02 .contain{ height:1165px;background:url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/wrap_cen02.jpg') no-repeat;}

.wrap01 .player_ifo{ position: absolute; top: 30px; left: 452px; font-size: 16px;}
.wrap01 .player_ifo span{margin-right: 25px}
.wrap01 a.login_out,a.change_cha { color: #565656;}
.wrap01 .act_time{position:absolute;top: 45px;  right: 178px; }
.wrap01 .logo{position:absolute;top: 25px; left: 5px; }
.wrap01 .yy{position:absolute;top: 35px; left: 180px; }
.wrap01 .sign_up_nologin{position:absolute;top: 30px; left: 350px; }
.wrap01 .sign_up{position:absolute;top: 30px; left: 350px; }
.wrap01 .login{position:absolute;top: 30px; left: 460px;padding:2px 14px }
.wrap01 .act_time{position:absolute;top: 358px; left: 0;}
.btn{padding: 2px 10px;background: #DE5327;font-weight: bold;color: #fff}

.wrap02 .rule_box{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;width:419px;height:378px; margin-top:37px;line-height: 32px;padding: 30px 22px 0;background: url("https://static.web.sdo.com/dn/pic/dn_18act/1812yy/rule_bg.png") no-repeat}

.wrap02 .reward_tit{ margin-top:72px }
.reward_box{margin: 55px 0 0 25px;}
.reward01 {float: left}
.reward01 .tit_name01{    float: left;
    font-weight: bold;
    font-size: 18px;
    color: #6766EA;
    margin: -2px 0 0 10px;
    line-height: 24px;}
.reward_bg{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px 0 0 35px;
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #DE5327;
    line-height: 32px;
    width: 466px; height:106px; background:url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/reward_bg.png') no-repeat;
}
.remind_tit{margin-top: 95px;}
.event1_remind {
    padding-left: 22px;
}
.event1_remind {
    line-height: 24px;
}
.event1_remind li {
    padding-left: 28px;
    margin-bottom: 3px;
    position: relative;
}
.circle {
    position: absolute;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    text-align: center;
    background: #0F0838;
    top: 1px;
    font-size: 14px;
    left: 0;
    color: #fff;
}
/*悬浮底部*/
.sel_box {
    width: 1920px;
    height: 239px;
    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: -960px;
    background: url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/shadow01.png') no-repeat;
}
.sel_box .contain{
    height: 239px;
}
.hou_box{
    width: 353px;
    height: 123px;
    position: absolute;
    bottom: 0;
    left: 310px;
    cursor: pointer;
    z-index: 20;
    background: url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/hou_singer.png') no-repeat;
}
.hou_box:hover,.hou_box.active{
    background: url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/hou_singer_h.png') no-repeat;
}
.hou_box i{
    position: absolute;
    display: block;
}
.hou_box .i01{
    top: -55px;
    left: -55px;
    width: 70px;
    height: 80px;
    background: url(https://static.web.sdo.com/dn/pic/dn_18act/1812yy/music03.png) 0 0;
    -webkit-animation: ani_skill1 5000ms steps(38) infinite both;
    animation: ani_skill1 5000ms steps(38) infinite both;
}
@keyframes ani_skill1 {
    0% {
        background-position: 0 0%;
    }
    30%,100% {
        background-position: 0 -3800%;
    }
}

.hou_box .i02{
    top: -52px;
    left: -50px;
    width: 70px;
    height: 80px;
    background: url(https://static.web.sdo.com/dn/pic/dn_18act/1812yy/music04.png) 0 0;
    -webkit-animation: ani_skill1 5000ms steps(38) infinite both;
    animation: ani_skill1 5000ms steps(38) infinite both;
    animation-delay: 500ms;
}
@keyframes ani_skill2 {
    0% {
        background-position: 0 0%;
    }
    30%,100% {
        background-position: 0 -3800%;
    }
}
.hou_box .i03{
    top: -52px;
    left: 90px;
    width: 70px;
    height: 80px;
    background: url(https://static.web.sdo.com/dn/pic/dn_18act/1812yy/music01.png) 0 0;
    -webkit-animation: ani_skill3 5000ms steps(40) infinite both;
    animation: ani_skill3 5000ms steps(40) infinite both;
    animation-delay: 1500ms;
}
@keyframes ani_skill3 {
    0% {
        background-position: 0 0%;
    }
    26%,100% {
        background-position: 0 -4000%;
    }
}
.hou_box .i04{
    top: -52px;
    left: 95px;
    width: 70px;
    height: 80px;
    background: url(https://static.web.sdo.com/dn/pic/dn_18act/1812yy/music02.png) 0 0;
    -webkit-animation: ani_skill4 5000ms steps(38) infinite both;
    animation: ani_skill4 5000ms steps(38) infinite both;
    animation-delay: 2000ms;
}
@keyframes ani_skill4 {
    0% {
        background-position: 0 0%;
    }
    26%,100% {
        background-position: 0 -3800%;
    }
}
.selected_box{
    width: 290px;
    height: 124px;
    position: absolute;
    bottom: -1px;
    right: 20px;
    cursor: pointer;
    z-index: 20;
    background: url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/sel_singer.png') no-repeat;
}
.selected_box:hover,.selected_box.active{
    background: url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/sel_singer_h.png') no-repeat;
}
.sel_box .music_r,.singer_tab .music_r{
    position: absolute;
    display: block;
    z-index: 10;
}
.sel_box .music_r,.singer_tab .music_r{
    top: 10px;
    left: 531px;
    width: 400px;
    height: 300px;
    background: url(https://static.web.sdo.com/dn/pic/dn_18act/1812yy/music_r02.png) 0 0;
    -webkit-animation: ani_right 3000ms steps(44) infinite both;
    animation: ani_right 3000ms steps(44) infinite both;
}
@keyframes ani_right {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -4400%;
    }
}

/*弹窗*/
.alert_bg{width:100%;height:100%;position:fixed;top:0;left:0;z-index:999;display:none;background:#000;}
.pop:before{content: "";display: table;height: 0;clear: both;visibility: hidden;}
.pop{display:none;z-index:1000;position:absolute;color:#fff;}
.pop_close{ position: absolute; width: 61px; height:61px;top:5px;right:-70px;background:url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/close.png') no-repeat center;}

/*候选入选*/
.singer_con{
    width:1000px;height:725px;
}
.aniTop{-webkit-animation: ani_top 0.5s ease-out; animation: ani_top 0.5s ease-out;}
.aniDown{-webkit-animation: ani_down 0.5s ease-out; animation: ani_down 0.5s ease-out;}
.singer_tab{ position:relative;height:123px; }
.singer_tab .music_r{top:-100px;}
.singer_con .con{position: relative; height: 600px;z-index: 20; background: #161619; }
.singer_close{ position: absolute;z-index: 30; width: 40px; height:55px;top:98px;left:15px;background:url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/pop_close.png') no-repeat;}
.con_top{width: 900px;padding-right: 16px; margin: 35px auto 0;color: #A2A2A7; text-align: right}
.con_top span{ margin-right: 50px;}
.con_top .song{margin-right: 0}
.character,.song{position: relative; cursor: pointer;padding-bottom: 5px;}
.character i,.song i{position: absolute;top:22px;left:1px;display: inline-block;width: 20px;border-bottom: 1px solid #CA4D26;display: none}
.character i{width: 42px;}
.song i{width: 26px;left: 0}
.character.active,.song.active{color: #CA4D26;}
.character.active i,.song.active i{display: block}
.search{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;margin: 0;border:0; width: 260px;height: 30px;color: #fff; padding-left: 35px; background: #313137}
.search_icon{display: block;position: absolute;width: 35px;height: 30px; top: -6px; left: -2px;background: url("https://static.web.sdo.com/dn/pic/dn_18act/1812yy/search_icon.png") no-repeat center;cursor: pointer}
input::-webkit-input-placeholder{color:#c3c3c3;letter-spacing: 2px;}

.sing_table{ display: block; width: 900px;margin: 35px auto 0;text-align: center; color: #E6E6E6; }
.sing_table thead{ color: #5b5b65; }
.sing_table td{ -webkit-box-sizing: border-box; box-sizing: border-box; height: 95px; padding: 3px 0; word-wrap:break-word;word-break: break-all;overflow: hidden; }
.sing_table tbody tr,.sing_table thead tr{border-bottom: 1px solid #222}
.sing_table thead th{padding-bottom: 15px; }
.sing_table thead tr{border-bottom: 1px solid #222}
.sing_table .no{font-size: 18px;}
.sing_table .sex{display: inline-block;width: 15px; height:18px;background:url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/male.png') no-repeat;}
.sing_table .sex.female{background:url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/female.png') no-repeat center top;}
.sing_table .play_btn{display: block;width: 30px; height:30px;margin: 0 auto; background:url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/play_btn.png') no-repeat center;cursor: pointer}
.sing_table .play_btn:hover{background:url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/play_btn_h.png') no-repeat center;}
.sing_table .zan{position: relative; color: #DE5327;padding-left: 28px;cursor: pointer;color:#fff;}
.sing_table .zan i{position: absolute;display: inline-block;width: 30px; height:20px; top: 0;left: 0; background:url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/heart.png') no-repeat center 3px;cursor: pointer}
.sing_table .zan.active i{background-image:url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/heart_h.png');}

/*视频*/
.video_box{position: absolute;width: 936px;height: 600px;top:123px; left: 55px;background: #161619;z-index: 30}
.video_close{ position: absolute; width: 40px; height:40px;top:20px;right:0px;background:url('https://static.web.sdo.com/dn/pic/dn_18act/1812yy/close.png') no-repeat center;background-size: 100%}
.video_box .video_adapt{ width: 890px;height: 566px;margin-top:16px;overflow: hidden}
.video_box #video_wrap{ margin-top: -48px;}
/*页码*/
.page { text-align: center; margin: 18px auto 0; color: #4D4D4D; }
.page_box { width: 840px; height: 32px; margin: 0 auto; font-size: 16px; line-height: 32px; }
.page_box .prev, .page_box .next { display: inline-block; width: 50px; height: 22px; font-size: 18px; padding: 5px; line-height: 22px; color: #4D4D4D; }
.page_box .prev { margin-right: 10px; }
.page_box a, .page_box span { padding: 5px;  margin: 5px;  cursor: pointer;  color: #4D4D4D; }
.page_box span, .page_box a { display: inline-block; width: 14px; height: 14px; text-align: center; line-height: 14px; }
.page_box .current.prev,.page_box .current.next { color: #4D4D4D; }
.page_box .current { color: #E6E6E6; font-weight: bold; }

/*报名表*/
.form_con{ -webkit-box-sizing: border-box; box-sizing: border-box; position: relative;width: 770px;height: 840px;padding:0 85px;background: #1F116A;border-radius: 5px;}
.form_con h3{ color:#DE5327;font-size: 32px;font-weight: bold;margin: 60px 0 40px 0; text-align: center}
.form_con input{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box; margin: 0;width: 272px;height: 42px;padding-left:15px; border: 1px solid #CCCCCC;background: transparent;border-radius: 3px;color: #999595}
.fl01{ margin-right: 54px;}
.form_tit{ font-size: 20px;color: #fff; margin-bottom: 5px; }
.shu_red{ position: relative;top:4px; display: inline-block;width: 5px;height: 20px;background: #DE5327;margin-right: 10px; }

.sex_select{margin-top: 10px;}
.sex_select .sex_btn{ position: relative;cursor: pointer}
.sex_select .sex_btn b{display: none; position: absolute; top: -12px; left: 20px; font-size: 24px; font-weight: normal;}
.sex_select .sex_btn.active b{display: block;}
.sex_select .sex_btn .kou{position: relative;top:2px;display: inline-block;width: 13px;height: 13px;border: 1px solid #fff;margin:0 10px 0 20px;}
.try_listen{margin-top: 32px;}
.try_listen input{width: 550px;}
.try_listen input::-webkit-input-placeholder{color:#999595;letter-spacing: 0}

.table_tips{margin: 15px 0 40px 0}
.table_tips li{position: relative;padding-left: 26px;color: #999595}
.table_tips li span{position: absolute; top: 0;left: 0}

.table_btn {text-align: center;}
.table_btn a{-webkit-box-sizing: border-box; box-sizing: border-box;display: inline-block;width: 200px;height: 50px;line-height: 50px;text-align: center;color: #fff;font-size: 20px;}
.table_btn .release{ margin-right: 40px; background: #DE5327}
.table_btn .think{ background: #515151}

.similar{-webkit-box-sizing: border-box; box-sizing: border-box;width: 400px;height: 255px;background: #1F116A;border-radius: 5px;text-align: center}
.similar h3{color:#DE5327;font-size: 36px;font-weight: bold;margin: 25px 0 15px 0; }
.similar p{line-height: 24px;height: 72px; }
.similar_btn{-webkit-box-sizing: border-box; box-sizing: border-box;display: block;width: 140px;height: 50px;margin: 5px auto 0; line-height: 50px;text-align: center;color: #fff;font-size: 18px;background: #DE5327}
.zan_fail{background: #272727}
.s_btn{margin-top: 10px; text-align: center}
.s_btn a{display: inline-block;}
.s_btn .confirm_btn{margin-right: 30px;}
.s_btn .check_again{background: #515151}

.sel_s{display:inline-block}
.confirm_pop h3{margin-bottom: 9px;}
@keyframes ani_top {
    0% {
        transform: translate(0,1000px);
    }
    100% {
        transform: translate(0,0);
    }
}
@keyframes ani_down {
    0% {
        transform: translate(0,0);
    }
    100% {
        transform: translate(0,1000px);
    }
}


















