body{
    background: url(../img/bg.jpg) no-repeat center 0;
}
.wrap{
    width: 1200px;
    position: relative;
    margin:0 auto;
}
.header{
    height: 2250px;
}
.logo{
    position:absolute;
    left:10%;
    top:15px;
    z-index: 999;
}
.header ol{
    padding:6px 15px;
    background: #fecf5b;
    width: 267px;
    position:absolute;
    right:10%;
    top:15px;
    border-radius: 5px;
    z-index: 999;
}
.header ol li{
    float: left;
    width: 88px;
    text-align: center;
    border-right: 1px solid #333;
    font-weight: 700;
    font-size: 16px;
}
.header ol li.current{
    border:0 none;
}
.fionan{
    position:absolute;
    left:50%;
    top:110px;
    transform: translate(-50%, 0);
}
.header ul{
    width: 1165px;
    margin:0 auto;
    padding-top: 520px;
}
.flip-container {
    perspective: 1000;
    -webkit-perspective: 1000px; /*父类容器中 perspective 子类允许透视*/
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
    margin:0px auto; 
    float:left; 
    margin-left:20px; 
    margin-bottom:20px;
}
.flip-container:nth-of-type(16){
    margin-left:136px; 
}
.flip-container:hover .back {
    transform: rotateY(0deg); 
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
     z-index:2;
}
.flip-container:hover .front { 
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg); 
    z-index:1;
}
.flip-container, .front, .back {
    width: 209px;
    height: 355px;
}
.flipper {
    transition:transform 0.6s ease-out;
    transition: transform .5s ease-in-out;
    -webkit-transition: transform .5s ease-in-out;
    -moz-transition: transform .5s ease-in-out;
    -ms-transition: transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    -webkit-transform-style: preserve-3d; /*使其子类变换后得以保留 3d转换后的位置*/
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    display:block;
    position: relative;
}
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s ease-out;
    -webkit-transition: .6s ease-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;
    position: absolute;
    top: 0;
    left: 0;
}
.front img, .back img{ 
    width:209px; 
    height:355px; 
    overflow:hidden;
}
.front {
    z-index: 2;
    transform: rotateY(0deg);
    transform: rotateY(0deg); 
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
}
.back { 
    z-index:1;
    transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
}


/*gyjs*/
h1 img{
    margin:0 auto;
}
.video{
    width: 1130px;
    height: 632px;
    background: #28272c;
    border: 25px solid #000;
    text-align: center;
    line-height: 632px;
    color:#fff;
    font-size: 120px;
    margin:100px auto;
}


/*曲目介绍*/
.qujs{
    width: 1121px;
    margin:0 auto;
    height: 980px;
    background:url(../img/music/qmbg.png) no-repeat center 0;
}
.qu-box{
    width: 100%;
    height: 100%;
    position:relative;
}
.qujs dl{
    float: left;
}
.qujs dl:nth-of-type(1){
    margin:70px 0 0 70px;
}
.qujs dl:nth-of-type(2){
    margin:70px 0 0 120px;
}
.qujs dl:nth-of-type(3){
    margin:50px 0 0 70px;
}
.qujs dl:nth-of-type(4){
    margin:100px 0 0 130px;
}
.qujs dl dd{
    position:relative;
    cursor:pointer;
}
.qujs dl span{
    color:#333;
    background: #fff;
    border: 4px solid #691ddf;
    padding:15px ;
    width: 330px;
    position:absolute;
    left:100px;
    top:60px;
    border-radius: 10px;
    display:none;
    z-index: 999;
    font-size: 24px;
    font-weight: 700;
}

.qujs dl dd:hover span{
    display:block;
    
}
.jiao{
    position:absolute;
    top:-16px;
    left:40px;
    z-index: 9999;
}



















.gyld{
    margin:420px auto 0;
}



/*参演成员*/
.cycy{
    margin:350px auto 90px;
}
.cy-box{
    margin:80px auto 300px;
}
.cy-box ul{
    float: left;
    margin-right: 15px;
}

.cy-box ul li{
    margin-bottom:15px;
}
.cy-box ul:last-of-type{
    margin-right: 0;
}
.cy-box ul:first-of-type{
    margin-left: 50px;
}

/*宣传片花絮*/
.xchx h1{
    margin-bottom: 50px;
}

img{ border:0;}

.ban{ width:920px; height:620px; position:relative; overflow:hidden;margin:40px auto 0 auto;border-radius: 5px;}
.ban2{ width:900px; height:500px; position:relative; overflow:hidden;border: 10px solid #000;}
.ban2 ul{ position:absolute; left:0; top:0;}
.ban2 ul li{ 
    width:900px; 
    height:500px;
    text-align: center;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.ban2 ul li img{
    height:100%;
}
.prev{ float:left; cursor:pointer;}
.num{ height:82px;overflow:hidden; width:820px; position:relative;float:left;}
.min_pic{ padding-top:20px; width:900px;}
.num ul{ position:absolute; left:0; top:0;}
.num ul li{ 
    width:80px; 
    height:80px; 
    margin-right:5px; padding:1px;text-align: center;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;}
.num ul li.on{ border:1px solid red; padding:0;}
.prev_btn1{ width:16px; text-align:center; height:18px; margin-top:30px; margin-right:20px; cursor:pointer; float:left;}
.next_btn1{  width:16px; text-align:center; height:18px; margin-top:30px;cursor:pointer;float:right;}
.prev1{ position:absolute; top:50%; left:20px; width:28px; height:51px;z-index:9;cursor:pointer;transform:translate(0,-50%);}
.next1{ position:absolute; top:50%; right:20px; width:28px; height:51px;z-index:9;cursor:pointer;transform:translate(0,-50%);}
.mhc{ background:#000; width:100%;opacity:0.5;-moz-opacity:0.5;filter:alpha(Opacity=50); position:absolute; left:0; top:0; display:none;}
.pop_up{ width:1150px; height:800px; padding:10px; background:#fff; position:fixed; -position:absolute; left:50%; top:50%; margin-left:-585px; margin-top:-400px; display:none; z-index:99;}
.pop_up_xx{ width:40px; height:40px; position:absolute; top:-40px; right:0; cursor:pointer;}
.pop_up2{ width:1150px; height:800px; position:relative; overflow:hidden;}
.pop_up2{ width:1150px; height:800px; position:relative; overflow:hidden; float:left;}
.pop_up2 ul{ position:absolute; left:0; top:0;}
.pop_up2 ul li{ 
    width:1150px; 
    height:800px; 
    float:left;
    max-width: auto;
    text-align: center;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;}
.pop_up2 ul li img{
    height: 100%;
}


/*竞价说明*/
/*6*/

.jjsm{
    height: 850px;
    position: relative;
    width: 1100px;
    border-radius: 10px;
    background: #231f20;
    box-shadow: 0px 0px 10px #efe80a;
}
.jjsm .jnsm{
    margin:0 auto;
    width: 280px;
    height: 71px;
}
.jjsm .jnsm h1{
    color:#fff;
    font-size: 40px;
}
.jjsm .wz-left{
    position: absolute;
    left: 60px;
    top: 50px;;
}
.jjsm .wz-right{
    position: absolute;
    right: 60px;
    top: 50px;
}
.jjsm h1{
    color:#fff;
    height: 42px;
    font-size:30px;
    margin-bottom: 20px;
}
.jjsm p{
    font-size:22px;
    color:#d0d0d0;
    margin-bottom: 35px;
}
.jjsm p.ts{
    margin-bottom: 10px;
}
.jjsm select{
    margin-bottom: 24px;
    width: 350px;
    height: 28px;
    line-height: 24px;
    font-size:18px; 
    padding:0 28px 0 12px; 
    border:0 none;
    color:#ffcfcf;
    appearance: none;
   -webkit-appearance: none; /*for chrome*/
   -moz-appearance: none;
   -ms-appearance: none;
   -o-appearance: none;
   background: url(../img/jt.png) no-repeat right #fff;
   color:#666;
   border-radius:0 10px 10px 0;
}
select::-ms-expand { display: none; }
.ring{
    position:fixed;
    bottom:30px;
    right:30px;
}
.jj-box{
    margin:300px auto 50px;
}
.jj-box>h1{
    margin:100px auto 50px;
}








.footer{
    text-align: center;
    height: 70px;
    font-size:18px;
    color:#fff;
}


.flip-container:hover .flipper{
    z-index: 9999;
}