/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
    margin: 0;
    padding: 0;
    outline:none;
}
div{outline:none;}
div:active{outline:none;}
/** 重置列表元素 **/
ul, ol { list-style: none;outline:none; }

/** 重置文本格式元素 **/
a { text-decoration: none;color: #007baf;outline:none; }
a:hover { text-decoration: underline;outline:none; }

sup { vertical-align: text-top; } /* 重置，减少对行高的影响 */
sub { vertical-align: text-bottom; }

/** 重置表单元素 **/
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; outline: none;} /* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */

/* 重置 HTML5 元素 */
article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,
summary, time, mark, audio, video {
    display: block;
    margin: 0;
    padding: 0;
}

/** end reset css **/
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    cursor: pointer;
    outline:none;

}
button {
    cursor:pointer;
    overflow: hidden;
}

/*清除浮动*/
.clear-fix:after{
    content: "\20";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    *zoom: 1;
}
/** 设置通用button **/
button {
    border: none;
    background: transparent;
    cursor: pointer;
}
button:hover{
    filter:alpha(opacity=85);
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
}
body,html{
    width: 100%;
    position: relative;
    background: #dcdbd5;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    overflow: auto;
    overflow-x:hidden;
    overflow-y:visible; 
}

.p_index{
    width: 100%;
    position: relative;
    z-index: 0;
}
.index_bg{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background: url(./../../images/p_index_bg.jpg) no-repeat center top;
    background-size: auto 100%;
    -webkit-mask-image:url(./../../images/arrow.png);
    z-index: 2;
}
.mask{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background: url(./../../images/p_index_bg_mask.jpg) no-repeat center top;
    background-size: auto 100%;
    z-index: 1;
}
.goto_form{
    display: block;
    height: 50px;
    width: 50px;
    background: url(./../../images/goto_form.png) no-repeat center top;
    background-size: 50px 50px;
    position: fixed;
    top:100px;
    right: 30px;
    z-index: 3;
    opacity: 0;
}
.goto_form.on{
    opacity: 1;
}
.index_word{
    width: 70%;
    height: 26%;
    background:  url(./../../images/index_word.png) no-repeat center top;
    background-size: 100% auto;
    position: absolute;
    top: 40%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translateX("-7400px");
    -webkit-transition-duration: 0.5s;
    -webkit-transition-delay: 0.1s;
    z-index: 3;
}
.index_word.on{
    opacity: 1;
    -webkit-transform: translateX(-50%);
}
.arrow_up{
    width: 23px;
    height: 10px;
    background:  url(./../../images/arrow_up.png) no-repeat center top;
    position: absolute;
    bottom:10px;
    left:50%;
    -webkit-animation: arrow 2s infinite ease-in-out;
    opacity: 0;
    z-index: 3;
}
@-webkit-keyframes arrow {
  0% {-webkit-transform: translateY(0) translateX(-15px);}
  50% {-webkit-transform: translateY(10px) translateX(-15px);}
  100% {-webkit-transform: translateY(0) translateX(-15px);}
}
.arrow_up.on{
    opacity: 1;
}
.index_shade{
    position:absolute;
    top:0px;
    left: 0px;
    width: 100%;
    position: absolute;
    z-index: 1;
    opacity: 1;
    -webkit-transition: all 1s ease-in-out;
}
.index_shade.out{
    opacity: 0;
}
.index_shade_word{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background: url(./../../images/shade_index_word.png) no-repeat center top;
    background-size: auto 100%;
}
.round_click_con{
    position: absolute;
    bottom:50px;
    width: 100%;
    height: 51px;
    left: 0px;
    z-index: 4;
    opacity: 0;
    -webkit-transition: all 1s 1s ease-in-out;
}
.round_click_con.on{
    opacity: 1;
}
.round_click{
    margin: 0 auto;
    background: url(./../../images/round_click.png) no-repeat center top;
    height: 51px;
    width: 51px;
    background-size: 100% auto;
    -webkit-transform-origin:50% 50%;
    -webkit-animation: circle 3s linear infinite;

}
@-webkit-keyframes circle {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

.finger_con{
    position: absolute;
    bottom:50px;
    width: 50px;
    height: 50px;
    left: 50%;
    z-index: 4;
    -webkit-transform: translateX(-50%);
}
.finger_con .finger_1{
    position: absolute;
    top: 18px;
    left: 18px;
    width: 15px;
    height: 15px;
    background: url(./../../images/finger_1.png) no-repeat center top;
    background-size: 100% auto;
    -webkit-animation-name:'finger_1';
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: .5s;
    -webkit-animation-iteration-count: infinite;
    opacity: 0;
}

.finger_con .finger_2{
    position: absolute;
    top: 9px;
    left: 9px;
    width: 33px;
    height: 33px;
    background: url(./../../images/finger_2.png) no-repeat center top;
    background-size: 100% auto;
    -webkit-animation-name:'finger_2';
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: .5s;
    -webkit-animation-iteration-count: infinite;
    opacity: 0;
}

.finger_con .finger_3{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 51px;
    height: 51px;
    background: url(./../../images/finger_3.png) no-repeat center top;
    background-size: 100% auto;
    -webkit-animation-name:'finger_3';
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: .5s;
    -webkit-animation-iteration-count: infinite;
    opacity: 0;
}
@-webkit-keyframes 'finger_1' {
    0% {
       opacity: 0;
     }
     16.7% {
       opacity: 1;
     }
     33.3% {
       opacity: 1;
    }
    50.1% {
     opacity: 1;
    }
    66.8% {
      opacity: 1;
    }
    83.5% {
      opacity: 1;
    }
    
    100% {
     opacity: 0;
    }
  }

  @-webkit-keyframes 'finger_2' {
    0% {
       opacity: 0;
     }
     16.7% {
       opacity: 0;
     }
     33.3% {
       opacity: 1;
    }
    50.1% {
     opacity: 1;
    }
    66.8% {
      opacity: 1;
    }
    83.5% {
      opacity: 0;
    }
    
    100% {
     opacity: 0;
    }
  }

  @-webkit-keyframes 'finger_3' {
    0% {
       opacity: 0;
     }
     16.7% {
       opacity: 0;
     }
     33.3% {
       opacity: 0;
    }
    50.1% {
     opacity: 1;
    }
    66.8% {
      opacity: 0;
    }
    83.5% {
      opacity: 0;
    }
    
    100% {
     opacity: 0;
    }
  }

.con_1,.con_2,.con_3,.con_4,.con_5,.con_6,.con_7,.con_8,.con_9{
    position: relative;
    display: none;
}
.a_video{
    background: none;
    position: absolute;
    z-index: 5;
}
.con_1 img,.con_2 img,.con_3 img,.con_4 img,.con_5 img,.con_6 img,.con_7 img,.con_8 img,.con_9 img{
    width: 100%;
    position: relative;
    z-index: 0;
    display: block;
    vertical-align: top;
}
.shade{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.75;
    z-index: 4;
    display: none;
}
.video_con{
    width: 85%;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 0px;
    padding: 5px;
    -webkit-transform:translateX(-50%); 
    display: none;
}
.close{
    position: absolute;
    height: 20px;
    width: 20px;
    right: -10px;
    top: -10px;
    background: url(./../../images/close.png) no-repeat center top;
}
.music_con,.music_con_r{
    position: absolute;
    background: none;
    z-index: 1;
    top: 0px;
}
.music_con .girl{
    position: absolute;
    z-index: 1;
}
.music_con_r .girl{
    position: absolute;
    z-index: 1;
}
.girl_1{
    background: url(./../../images/girl_1.jpg) no-repeat center top;
    background-size:100% auto;
}
.girl_2{
    background: url(./../../images/girl_2.jpg) no-repeat center top;
    background-size:100% auto;
}
.girl_3{
    background: url(./../../images/girl_3.jpg) no-repeat center top;
    background-size:100% auto;
}
.girl_4{
    background: url(./../../images/girl_4.jpg) no-repeat center top;
    background-size:100% auto;
}
.girl_5{
    background: url(./../../images/girl_5.jpg) no-repeat center top;
    background-size:100% auto;
}
.girl_mask{
    background: url(./../../images/music_con.png) no-repeat center top;
    position: absolute;
    background-size:100% auto;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 2;
}
.music_con_r .girl_mask{
    background: url(./../../images/music_con_r.png) no-repeat center top;
    background-size:100% auto;
}
.girl.on{
    -webkit-transform-origin:50% 50%;
    -webkit-animation: circle 5s linear infinite;
}
.girl_ctl{
    background: url(./../../images/music_play.png) no-repeat center top;
    position: absolute;
    background-size:100% auto;
    z-index: 3;
}
.girl_ctl.on{
    background: url(./../../images/music_stop.png) no-repeat center top;
    background-size:100% auto;
}
#myaudio{
    display: none;
}
.fm_sty{
    position: absolute;
    z-index: 1;
}
.fm_sty input,.fm_sty button{
    position: absolute;
    background: none;
    z-index: 1;
    border: none;
}

.result_con{
    position: relative;
    background: url(./../../images/result_con.jpg) no-repeat center top;
    background-size:auto 100%;
}
.result_con img{
    width: 100%;
    display: block;
    vertical-align: top;
}
.result_2d,.goto_net{
    position: absolute;
    z-index: 1;
    left: 50%;
    -webkit-transform:translateX(-50%);
}
.music_play{
    position: fixed;
    background: url(./../../images/music_switch.png) no-repeat top center;
    background-size:100%;
    opacity: 0;
    z-index: 5;
}
.show_img{
    opacity: 1;
}
.music_roll{
    -webkit-animation: music_roll_move 4s linear infinite;
    -moz-animation: music_roll_move 4s linear infinite;
    -ms-animation: music_roll_move 4s linear infinite;
    -o-animation: music_roll_move 4s linear infinite;
}
 @-webkit-keyframes music_roll_move{
    0%{-webkit-transform: rotate(0deg);}
    25%{-webkit-transform: rotate(90deg);}
    50%{-webkit-transform: rotate(180deg);}
    75%{-webkit-transform: rotate(270deg);}
    100%{-webkit-transform: rotate(360deg);}
}
 @-moz-keyframes music_roll_move{
    0%{-moz-transform: rotate(0deg);}
    25%{-moz-transform: rotate(90deg);}
    50%{-moz-transform: rotate(180deg);}
    75%{-moz-transform: rotate(270deg);}
    100%{-moz-transform: rotate(360deg);}
}
 @-ms-keyframes music_roll_move{
    0%{-ms-transform: rotate(0deg);}
    25%{-ms-transform: rotate(90deg);}
    50%{-ms-transform: rotate(180deg);}
    75%{-ms-transform: rotate(270deg);}
    100%{-ms-transform: rotate(360deg);}
}
 @-o-keyframes music_roll_move{
    0%{-o-transform: rotate(0deg);}
    25%{-o-transform: rotate(90deg);}
    50%{-o-transform: rotate(180deg);}
    75%{-o-transform: rotate(270deg);}
    100%{-o-transform: rotate(360deg);}
}
#myaudio_music{
    display: none;
}
.ipt_sty{
    color:#fff;
}