/* 
 * @description: 体验中心
 * @author: fuge.wu (2014-5-9 13:57:32) 
 * @update: fuge.wu (2014-5-6 9:17:37) 
*/

@charset "utf-8";

/* base */
body{ font:12px/1.5 "微软雅黑","宋体",Verdana; color:#fff; background-color:#000;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin:0; padding:0;}
li{ list-style-type:none;}
img{ vertical-align:top; border:0;}
ol,ul { list-style:none;}
h1,h2,h3,h4,h5,h6,input{ font-size:12px; font-weight:normal;}
address,cite,code,em,th{ font-weight:normal; font-style:normal;}
input{ outline:0;}

/* public */
.fb{ font-weight:bold;}
.left{ float:left;}
.right{ float:right;}
.t_center{ text-align:center;}
.clear{ zoom:1;}
.clear:after{ content:''; display:block; clear:both;}
.hied{ display:none;}
.yahei{ font-family:"微软雅黑";}
.wrap,.load{ width:1920px; height:1080px; overflow:hidden; background:url(../images/bg.jpg) no-repeat;}
.wrap{ position:relative; margin:0 auto;}
.load{ position:absolute; top:0; left:1920px; z-index:11; display:none;}
.arial{ font-family:Arial;}
/* font link */
a{ text-decoration:none; color:#fff;}

/* font color */
.gray{ color:#666;}
.white{ color:#fff;}
/* font size */
.f18{ font-size:18px;}
.f22{ font-size:22px;}
.f24{ font-size:24px;}
.f28{ font-size:28px;}
.f30{ font-size:30px;}
.f36{ font-size:36px;}
.f48{ font-size:48px;}
.f72{ font-size:72px;}
.f160{ font-size:160px;}

/* box */

/* icon */
.list .text,.v_title,header em,.p_btn,.pic_tips .text,.pic_tips .close,.pic_tips .btn div,.l_select .current{ background:url(../images/icon.png) no-repeat 10px 9px;}

/* login */
.l_title{ padding:90px 0;}
.l_alert{ width:707px; height:501px; margin:0 auto; background:url(../images/login.png) no-repeat;}
.l_select{ padding:38px 0 56px 330px;}
.l_select li{ float:left; width:44px; height:44px; margin-right:112px; cursor:pointer;}
.l_select .current{ background-position:6px -833px;}
.l_form{ padding:110px 0 0 130px; color:#f3f3f3; position:relative;}
.l_form input{ width:500px; color:#f3f3f3; border:0; background-color:transparent;}
.l_form .submit{ width:558px; height:78px; margin:0 0 16px -56px; cursor:pointer; position:absolute; left:130px; top:354px;}
.l_form img{ position:absolute; left:320px; top:270px; cursor:pointer;}
.l_tips{ position:absolute; left:0; right:0; top:450px;}
.l_form .password{ margin:42px 0 42px 0;}

/* header */
header{ background:url(../images/title_bg.png); line-height:114px; position:relative;}
header em{ cursor:pointer; padding-left:60px; background-position:0 -304px; color:#b7b7b7; position:absolute; right:50px;}

/* nav */
nav{ height:194px; border-top:1px solid #202120; background:url(../images/nav.jpg) repeat-x; overflow:hidden;}
nav ul{ width:1930px; margin-left:-2px;}
nav li{ float:left; cursor:pointer;}
nav li:hover span,nav .current{ color:#ff9100; background-color:#010101;}
nav span{ display:block; width:214px; padding-top:130px; padding-bottom:27px; background:url(../images/nav.png) no-repeat 78px 38px,url(../images/nav.png) no-repeat 0 -290px;}
nav .icon0 span{ background-position:78px 38px;}
nav .icon0:hover span,nav .icon0 .current{ background-position:78px -177px, 0 -290px;}
nav .icon1 span{ background-position:-132px 38px;}
nav .icon1:hover span,nav .icon1 .current{ background-position:-132px -177px, 0 -290px;}
nav .icon2 span{ background-position:-346px 38px;}
nav .icon2:hover  span,nav .icon2 .current{ background-position:-346px -177px, 0 -290px;}
nav .icon3 span{ background-position:-557px 38px;}
nav .icon3:hover  span,nav .icon3 .current{ background-position:-557px -177px, 0 -290px;}
nav .icon4 span{ background-position:-770px 38px;}
nav .icon4:hover  span,nav .icon4 .current{ background-position:-770px -177px, 0 -290px;}
nav .icon5 span{ background-position:-982px 38px;}
nav .icon5:hover  span,nav .icon5 .current{ background-position:-982px -177px, 0 -290px;}
nav .icon6 span{ background-position:-1195px 38px;}
nav .icon6:hover  span,nav .icon6 .current{ background-position:-1195px -177px, 0 -290px;}
nav .icon7 span{ background-position:-1406px 38px;}
nav .icon7:hover  span,nav .icon7 .current{ background-position:-1406px -177px, 0 -290px;}
nav .icon8 span{ background-position:-1619px 38px;}
nav .icon8:hover span,nav .icon8 .current{ background-position:-1619px -177px, 0 -290px;}
nav .icon9 span{ background-position:-352px -396px;}
nav .icon9:hover span,nav .icon9 .current{ background-position:-939px -399px, 0 -290px;}
nav .icon10 span{ background-position:-540px -396px;}
nav .icon10:hover span,nav .icon10 .current{ background-position:-1130px -394px, 0 -290px;}
nav .icon11 span{ background-position:-728px -396px;}
nav .icon11:hover span,nav .icon11 .current{ background-position:-1325px -391px, 0 -290px;}
nav .icon12 span{ background-position:-1494px -384px;}
nav .icon12:hover span,nav .icon12 .current{ background-position:-1672px -384px, 0 -290px;}


/* list */
.list,.main_wrap{ width:1920px; height:770px; overflow:hidden;}
.list ul{ width:2000px; margin-left:120px;}
.list li{ float:left; width:350px; height:196px; margin:46px 95px 0 0; cursor:pointer; position:relative; overflow:hidden;}
.list li img{ width:350px; height:196px;}
.list .line,.list .text{ position:absolute; height:42px; line-height:42px; bottom:0; left:0; right:0;}
.list .line{ background-color:#000; opacity:0.7;}
.list .text{ padding-left:38px;}
.list .img{ background-position:10px -110px;}
.list .video{ background-position:10px -49px;}
.list iframe{ border:0; width:1950px; height:966px; background-color:#fff;}
.li_con{ width:1950px; height:724px; overflow-x:hidden;}
.list2{ height:966px;}
.list2 .li_con{ height:966px;}

/* videos */
.videos{ height:770px; margin-left:238px; overflow:hidden;}
.v_title{ margin:38px 0 12px 0; padding-left:50px;}
.videos .icon0{ background-position:0 -176px;}
.videos .icon1{ background-position:0 -258px;}
.v_list li{ float:left; width:240px; height:260px; margin-right:60px; line-height:62px; background:url(../images/videos.png) no-repeat; cursor:pointer; border-radius:14px; overflow:hidden;}
.v_list li img{ width:240px; height:195px;}
.v_play{ width:1092px; height:700px; margin:140px auto 0 auto;}

/* wisdom */
.wisdom{ height:770px;}
.wisdom ul{ padding:120px 0 0 138px;}
.wisdom li{ width:390px; height:534px; float:left; margin-right:38px; border-radius:22px; cursor:pointer;}
.wisdom li img{ -webkit-box-reflect:below 0 -webkit-gradient(linear, 0 0, 0 168%, from(transparent), color-stop(.5, transparent), to(#fff));}

/* cause */
.cause{ width:1250px; height:698px; margin:72px 0 0 345px; background:url(../images/cause.jpg) no-repeat; overflow:hidden;}
.cause li{ width:308px; height:308px; float:left; cursor:pointer;}

/* detail */
.detail{ width:1490px; margin:40px auto 0 auto; background-color:#fff; border-radius:10px; overflow:hidden;}
.d_con{ width:1456px; padding:30px; height:842px; overflow-x:hidden;}
.d_con p{ min-height:16px;}

/* photo */
.photo header{ z-index:9;}
.p_max,.p_event,.p_btn_max{ position:absolute; top:0; left:0; right:0; bottom:0; z-index:8;}
.p_bottom{ position:absolute; width:100%; bottom:0; height:116px; background:url(../images/title_bg.png); overflow:hidden; z-index:9;}
.p_min{ width:1160px; height:130px;  margin:16px auto 0 auto; overflow:hidden;}
.p_min li{ width:150px; height:84px; border:3px solid transparent; margin-right:10px; float:left; overflow:hidden; cursor:pointer; opacity:0.5;}
.p_min li img{ width:100%;}
.p_min .on{ border:3px solid #006bd9; opacity:1;}
.p_event,.p_btn_max,.p_full{ top:114px; bottom:116px; z-index:9; cursor:pointer;}
.p_btn{ width:40px; height:84px; position:absolute; bottom:12px; cursor:pointer;}
.p_btn_left{ background-position:0 -440px; left:330px;}
.p_btn_right{ background-position:-80px -440px; right:340px;}
.p_pre{ right:1420px; background:url(../images/p_pre.png) no-repeat 56px center;}
.p_next{ left:1420px; background:url(../images/p_next.png) no-repeat 397px center;}
.p_full{ left:500px; right:500px;}

/* pic tips */
.pic_tips{ display:none; width:510px; height:250px; position:absolute; top:415px; left:705px; background:#fff; z-index:13;}
.pic_tips .close{ width:20px; height:20px; margin:20px 0 0 468px; background-position:0 -570px; cursor:pointer;}
.pic_tips .close:hover{ background-position:-50px -570px;}
.pic_tips .text{ display:inline-block; background-position:0 -632px; padding-left:40px; margin:20px 0 40px 0;}
.pic_tips .btn div{ display:inline-block; padding:15px 20px 15px 50px; margin:0 6px; cursor:pointer;}
.pic_tips .btn .icon0{ background-color:#e0e0e0; background-position:20px -698px;}
.pic_tips .btn .icon1{ background-color:#ff9600; background-position:20px -756px;}

/* mask */
.mask{ display:none; position:fixed; top:0; bottom:0; left:0; right:0; background-color:#000; opacity:0.6; z-index:12;}

/* main */
.main{ width:1024px; height:576px; margin:80px auto 0 auto; position:relative;}
.main img{ width:1024px; height:576px; -webkit-box-reflect:below 6px -webkit-gradient(linear, 0 0, 0 160%, from(transparent), color-stop(.5, transparent), to(#fff));}
.main li{ position:absolute; left:0; top:0; -webkit-transform:perspective(1100px) rotateY(0deg); z-index:1; opacity:0; -webkit-transition:1s all ease; cursor:pointer;}
.main .current{ z-index:4; opacity:1; -webkit-transform:scale(1); z-index:99;}
.main .left,.main .right { z-index:4; opacity:1;}
.main .left2,.main .right2{ z-index:3; opacity:1;}
.main .left3,.main .right3{ z-index:2; opacity:0;}
.main .left{ -webkit-transform:perspective(1500px) translate(-325px, 5px) rotateY(60deg) scale(0.7);}
.main .right{ -webkit-transform:perspective(1500px) translate(325px, 5px) rotateY(-60deg) scale(0.7);}
.main .left2{ -webkit-transform:perspective(1200px) translate(-425px, 6px) rotateY(60deg) scale(0.6);}
.main .right2{ -webkit-transform:perspective(1200px) translate(425px, 6px) rotateY(-60deg) scale(0.6);}
.main .left3{ -webkit-transform:perspective(1000px) translate(-525px, 6px) rotateY(60deg) scale(0.5);}
.main .right3{ -webkit-transform:perspective(1000px) translate(525px, 6px) rotateY(-60deg) scale(0.5);}

/* price */
.p_title{ margin:200px 0 200px;}
.p_num .num0{ margin-left:208px;}
.p_num .num1{ margin-left:180px;}
.p_num .num2{ margin-left:190px;}

/* diagnose */
.diagnose{ width:1920px; height:1080px; position:relative; background:url(../images/diagnose.jpg) no-repeat 0 bottom;}
.diagnose .btn{ display:block; width:324px; height:94px; position:absolute; left:798px; bottom:154px;}