﻿/*
┌──────── 75ww──────────────────────┐
│                                                                  │
│ 网站设计制作:≮黑猫网络≯ QQ:505916004 唯一网址：WWW.75ww.COM    │
│        十余年网页设计制作经验、高端建站美工团队为你服务          │
│                   我们可为你制作你需要的门户                     │
│     精美开区网站、VIP会员更实惠、同时在这里每次购网站00元        │
│ 赠送1个：加好玩家或您涉及行业的QQ群（注：100个群以上）的QQ号码,你│
│    可更改密保、密码、手机绑定、你可宣传您的生意，让生意更稳定！  │
│                                                                  │
└───────────────────────────── .Com ─┘
*/
@charset "utf-8";
/* CSS Document */
* { margin:0; padding:0; }
body,td,th { font-size: 14px; }
body { font-size: 14px; font:"微软雅黑"; color:#FFF; background:#320505; margin:0px;}

a { font-size: 14px; color: #FFF; }
a:link { text-decoration: none;}
a:visited { text-decoration: none; color:#FFF; }
a:hover { text-decoration: none; color:#900; text-decoration:none;}
a:active { text-decoration: none; color: #900;}
ul {  margin:0 0 0 0; padding: 0; list-style: none; }
img{ border:0;}


#Version { width:100%; height:1332px; position:relative; overflow:hidden;}/*页面总高度再次调整*/
#Flash { width:1920px; height:1332px; position:absolute; left:50%; margin:0 auto 0 -960px; z-index:2;}/*FLASH*/
#Header { margin:0 auto 0 -960px; width:1920px; height:1332px; position:absolute; left:50%; z-index:1;}/*BG*/
#Header_1 { margin:0 auto 0 -960px; top:0; width:1920px; overflow:hidden; position:absolute; left:50%; z-index:3;}/*BG*/
#Header_2 { margin:0 auto 0 -960px; top:882px; width:1920px; overflow:hidden; position:absolute; left:50%; z-index:4;}/*BG*/

.head_1 { width:1340px; margin: 0 auto; position:absolute; left:50%; margin-left:-670px; z-index:8; overflow:hidden;}/*整体*/
.head_2 { width:1340px; overflow:hidden;}
.head_3 { margin:0 70px; width:1200px; height:600px; position:relative;}
.head_4 { width:1340px; height:732px; position:relative;}
.head_5 { position:absolute; top:78px; left:60px; background:url(btn_bg.png); width:360px; height:653px; z-index:9;}
.head_6 { background:url(btn.png); width:212px; height:212px; position:absolute; top:95px; left:134px; z-index:10; animation-name:amyani; animation-duration:0.3s; animation-iteration-count:infinite;}

@keyframes amyani {
	
	0%{ background:url(btn110001.png)}
	10%{ background:url(btn110002.png)}
	20%{ background:url(btn110003.png)}
	30%{ background:url(btn110004.png)}
	40%{ background:url(btn110005.png)}
	50%{ background:url(btn110006.png)}
	60%{ background:url(btn110007.png)}
	70%{ background:url(btn110008.png)}
	80%{ background:url(btn110009.png)}
	85%{ background:url(btn110011.png)}
	90%{ background:url(btn110012.png)}
	95%{ background:url(btn110013.png)}
	100%{ background:url(btn110014.png)}
	}
	
.head_7 { background:url(btna.jpg); width:265px; height:82px; position:absolute; top:330px; left:106px; z-index:10; transition:0.5s; background-position:left 0;}
.head_7:hover { background-position:left -82px;}

.head_8 { background:url(btnb.jpg); width:265px; height:82px; position:absolute; top:412px; left:106px; z-index:10; transition:0.5s; background-position:left 0;}
.head_8:hover { background-position:left -82px;}

.head_9 { background:url(btnc.jpg); width:265px; height:82px; position:absolute; top:494px; left:106px; z-index:10; transition:0.5s; background-position:left 0;}
.head_9:hover { background-position:left -82px;}

.head_10 { background:url(btnd.jpg); width:265px; height:82px; position:absolute; top:576px; left:106px; z-index:10; transition:0.5s; background-position:left 0;}
.head_10:hover { background-position:left -82px;}

.head_11 { background:url(adk1.png); width:878px; height:73px; position:absolute; top:318px; right:70px; z-index:12;}
.head_12 { background:url(adk2.png); width:43px; height:272px; position:absolute; top:391px; right:905px; z-index:12;}
.head_13 { background:url(adk3.png); width:43px; height:272px; position:absolute; top:391px; right:70px; z-index:12;}
.head_14 { background:url(adk4.png); width:878px; height:56px; position:absolute; top:663px; right:70px; z-index:12;}

.head_15 { width:814px; height:335px; position:absolute; top:360px; right:102px; z-index:11;}

/*幻灯*/
.container {
	WIDTH: 814px;
	HEIGHT: 335px
}
.container A IMG {
	WIDTH: 814px;
	HEIGHT: 335px
}
.container IMG {
	BORDER-BOTTOM-STYLE: none;
	BORDER-RIGHT-STYLE: none;
	BORDER-TOP-STYLE: none;
	BORDER-LEFT-STYLE: none
}
.td_f A IMG {
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-LEFT: 0px;
	PADDING-RIGHT: 0px;
	PADDING-TOP: 0px
}
.num {
	POSITION: absolute;
	WIDTH: 90px;
	FLOAT: right;
	TOP: 290px;
	LEFT: 685px
}
.num LI {
	TEXT-ALIGN: center;
	LINE-HEIGHT: 10px;
	LIST-STYLE-TYPE: none;
	MARGIN:0px;
	WIDTH: 30px;
	FONT-FAMILY: Arial;
	BACKGROUND: url(flashbutton.gif) no-repeat -30px 0px;
	FLOAT: left;
	HEIGHT: 10px;
	COLOR: #00eaff;
	FONT-SIZE: 1px;
	font-family:"微软雅黑";
	CURSOR: pointer;
	border-radius:2em;
	margin-right:10px;
}
.num LI.on {
	LINE-HEIGHT: 10px;
	WIDTH: 30px;
	BACKGROUND: url(flashbutton.gif) no-repeat;
	HEIGHT: 10px;
	COLOR: #d8efff
}
/*幻灯*/

.head_16 { background:url(m2.jpg) top center no-repeat;}
.head_17 { margin:0 auto; width:1200px; overflow:hidden;}
.head_18 { width:1200px; height:588px; position:relative;}
.head_19 { width:1100px; height:460px; position:absolute; top:50px; left:50px; z-index:10;}

/*滚动条相关*/
.container1 {width:100%;height:auto;margin:0 auto;}
.container1 .div_scroll{float:left;width:100%;height:289px;overflow:auto;}
.container1 .scroll_container{position:relative;overflow:hidden;}
.container1 .scroll_absolute{position:absolute;}
.container1 .scroll_vertical_bar{width:8px;height:100%;position:absolute;top:0;right:0;margin:0;padding:0;}
.container1 .scroll_track{position:relative;border-radius:10px;background:url(line_y.gif) repeat-y center top;}
.container1 .scroll_drag{position:relative;top:0;left:0;border-top:none;border-bottom:none;cursor:pointer;background-color:#bc2f38;border-radius:20px;}
.container1 .scroll_arrow{text-indent:-20000px;cursor:pointer;display:block;}
.container1 .scroll_vertical_bar .scroll_arrow{height:16px;}
/*滚动条相关*/


.head_20 li { display:block; width:1080px; overflow:hidden; line-height:30px; text-align:left; border:double 1px #b7b090; margin-bottom:5px; transition:0.5s; background:#310000; border-radius:1em;}
.head_20 li:hover { background:#000; transition:0.5s; border-radius:2em;}
.head_20 li a { display:block; padding:0 0 0 40px; font-family:"微软雅黑"; font-weight:200; color:#FFC; font-size:16px;}
.head_20 li a:hover { color:#0F0; animation-name:bmyani; animation-duration:1s;}
.head_20 li span { display:block; background:url(hot.jpg) 10px center no-repeat;}

@keyframes bmyani {
	
	0%{ margin-left:50px;}
	
	}
	
.head_21 { background:url(m3.jpg) top center no-repeat;}
.head_22 { margin:0 auto; width:1200px; overflow:hidden;}
.head_23 { width:1200px; height:755px;}
.head_24 { background:url(gw.jpg); width:1200px; height:755px;}

.head_25 { margin:0 auto; width:1200px; overflow:hidden;}

.head_26 { background:url(zb02.jpg) repeat-y; width:1200px; overflow:hidden;}
.head_27 { background:url(zb01.jpg) top no-repeat; width:1200px; overflow:hidden;}
.head_28 { background:url(zb03.jpg) bottom no-repeat; width:1200px; overflow:hidden;}

.head_29 { background:url(zb05.jpg) repeat-y; width:1200px; overflow:hidden;}
.head_30 { background:url(zb04.jpg) top no-repeat; width:1200px; overflow:hidden;}
.head_31 { background:url(zb06.jpg) bottom no-repeat; width:1200px; overflow:hidden;}

.head_32 { background:url(zb08.jpg) repeat-y; width:1200px; overflow:hidden;}
.head_33 { background:url(zb07.jpg) top no-repeat; width:1200px; overflow:hidden;}
.head_34 { background:url(zb09.jpg) bottom no-repeat; width:1200px; overflow:hidden;}

.head_35 {}
.head_35 img { border:double 1px #F00; border-radius:0.2em;}



.footer { margin:0 0 0 0; background:url(../foot_img/bg.jpg) top repeat-x #000;}
.footer_1 { margin:0 auto; width:1200px; overflow:hidden; font-size:12px; line-height:24px;}
.footer_1 img { border-radius:1em;}
.footer_1 a { font-size:12px;}
.footer_1 span { font-size:12px;}
.footer_1 p { font-size:12px;}


.kv-music{position:fixed;z-index:50;top:50px;left:50px; width:58px;height:100px;}

.rightbar{width:226px;height:619px;position:fixed;top:40%;right:0;margin-top:-280px;background:url(left1.png) no-repeat;z-index:10000;text-align:center;color:#fff;-o-transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;transition:all .5s}
.rightbar.close{right:-226px}
.rightbar.close .btn-close{background:url(left4.png) no-repeat}
.rightbar .btn-close{width:86px;height:73px;background:url(left2.png);position:absolute;top:0;left:-86px}
.rightbar h6{margin-bottom:10px;padding-top:30px; padding-left:45px;font-size:18px;line-height:24px;font-weight:700;overflow:hidden}
.rightbar h6 span{display:block;font-size:14px}
.rightbar .code{margin:0 0 10px 53px;width:157px;height:188px;background:#919090}
.rightbar .code p{height:30px;line-height:30px;background:#de0c0c;margin-bottom:5px;}
.rightbar p{font-size:16px;line-height:24px;margin-bottom:5px; padding-left:30px;}
.rightbar .kefu{margin-left:53px;display:block;width:157px;height:51px;background:url(left3.png) no-repeat;line-height:44px;font-size:18px;color:#fff;text-decoration:none;margin-bottom:5px}
.rightbar .kefu:hover{background:url(left5.png) no-repeat}


.ding_3 { position:absolute; top:13px; left:0; z-index:6;}
.ding_3 a {border-radius:1em; background:#900; font-size:16px; font-weight:200; color:#FFC; border:double 1px #F00; display:block; padding:5px 15px; transition:0.5s;}
.ding_3 a:hover { background:#000; color:#F00;}

.ding_4 { position:absolute; top:13px; left:120px; z-index:6;}
.ding_4 a {border-radius:1em; background:#900; font-size:16px; font-weight:200; color:#FFC; border:double 1px #F00; display:block; padding:5px 15px; transition:0.5s;}
.ding_4 a:hover { background:#000; color:#F00;}

.ding_5 { position:absolute; top:13px; left:225px; z-index:6;}
.ding_5 a {border-radius:1em; background:#900; font-size:16px; font-weight:200; color:#FFC; border:double 1px #F00; display:block; padding:5px 15px; transition:0.5s;}
.ding_5 a:hover { background:#000; color:#F00;}

.ding_6 { position:absolute; top:13px; left:330px; z-index:6;}
.ding_6 a {border-radius:1em; background:#900; font-size:16px; font-weight:200; color:#FFC; border:double 1px #F00; display:block; padding:5px 15px; transition:0.5s;}
.ding_6 a:hover { background:#000; color:#F00;}

.ding_7 { position:absolute; top:13px; left:435px; z-index:6; border:double 1px #F00; border-radius:1em; background:#900; width:720px; height:30px;}

.ding_1 { position:absolute; top:14px; left:445px; width:700px; height:30px; line-height:30px; z-index:6;}
.ding_1 a { font-family:"微软雅黑"; font-weight:200; color:#FF9; font-size:18px; display:block;}

.ding_2 { position:absolute; top:13px; right:0; width:30px; height:30px;}
.ding_2 a img { width:30px; height:30px; opacity:0.5; transition:0.5s; border-radius:2em;}
.ding_2 a img:hover { opacity:1;}







.card{ position:relative; width:337px; height:454px;}

.card .font{

  transition: transform 400ms;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -o-backface-visibility:hidden;
	backface-visibility: hidden;
	position: absolute; top:0; left:0;

  -webkit-transform: rotateY( 0deg );
  -moz-transform: rotateY( 0deg );
  -o-transform: rotateY( 0deg );
  transform: rotateY( 0deg );
}

.card .back{

  transition: transform 400ms;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -o-backface-visibility:hidden;
  backface-visibility: hidden;

	position: absolute; top:0; left:0;
	-webkit-transform: rotateY( -180deg );
  -moz-transform: rotateY( -180deg );
  -o-transform: rotateY( -180deg );
  transform: rotateY( -180deg );
}


.card:hover .font{
	-webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );

}

.card:hover .back{
  -webkit-transform: rotateY( 0deg );
  -moz-transform: rotateY( 0deg );
  -o-transform: rotateY( 0deg );
  transform: rotateY( 0deg );
}

.card:hover .ie{
  z-index:100
}
.tab-detail.hide #card1{
	-webkit-animation-name: hide;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:0s;

	animation-name: hide;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:0s;
}
.tab-detail.hide #card2{
	-webkit-animation-name: hide;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:45ms;

	animation-name: hide;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:45ms;
}
.tab-detail.hide #card3{
	-webkit-animation-name: hide;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:90ms;

	animation-name: hide;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:90ms;
}
.tab-detail.hide #card4{
	-webkit-animation-name: hide;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:135ms;

	animation-name: hide;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:135ms;
}
.tab-detail.hide #card5{
	-webkit-animation-name: hide;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:180ms;

	animation-name: hide;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:180ms;
}

.tab-detail.hide #card6{
  -webkit-animation-name: hide;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:0s;

  animation-name: hide;
  animation-duration: 125ms;
  animation-fill-mode :forwards ;
  animation-delay:0s;
}
.tab-detail.hide #card7{
  -webkit-animation-name: hide;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:45ms;

  animation-name: hide;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:45ms;
}
.tab-detail.hide #card8{
  -webkit-animation-name: hide;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:90ms;

  animation-name: hide;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:90ms;
}
.tab-detail.hide #card9{
  -webkit-animation-name: hide;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:135ms;

  animation-name: hide;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:135ms;
}
.tab-detail.hide #card10{
  -webkit-animation-name: hide;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:180ms;

  animation-name: hide;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:180ms;
}

@-webkit-keyframes hide {
    from { -webkit-transform: translateY( 0px ); opacity: 1;}
    to { -webkit-transform: translateY( 40px );opacity: 0;}
}
@keyframes hide {
    from { transform: translateY( 0px ); opacity: 1;}
    to { transform: translateY( 40px );opacity: 0;}
}

.tab-detail.show #card1{
  -webkit-animation-name: show;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:0s;

  animation-name: show;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:0s;
}
.tab-detail.show #card2{
  -webkit-animation-name: show;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:45ms;

  animation-name: show;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:45ms;
}
.tab-detail.show #card3{
  -webkit-animation-name: show;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:90ms;

  animation-name: show;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:90ms;
}
.tab-detail.show #card4{
  -webkit-animation-name: show;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:135ms;

  animation-name: show;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:135ms;
}
.tab-detail.show #card5{
  -webkit-animation-name: show;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:180ms;

  animation-name: show;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:180ms;
}


.tab-detail.show #card6{
	-webkit-animation-name: show;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:0s;

	animation-name: show;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:0s;
}
.tab-detail.show #card7{
	-webkit-animation-name: show;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:45ms;

	animation-name: show;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:45ms;
}
.tab-detail.show #card8{
	-webkit-animation-name: show;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:90ms;

	animation-name: show;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:90ms;
}
.tab-detail.show #card9{
	-webkit-animation-name: show;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:135ms;

	animation-name: show;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:135ms;
}
.tab-detail.show #card10{
	-webkit-animation-name: show;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:180ms;

	animation-name: show;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:180ms;
}

@-webkit-keyframes show {
    from { -webkit-transform: translateY( -40px ); opacity: 0;}
    to { -webkit-transform: translateY( 0px );opacity: 1;}
}
@keyframes show {
    from { transform: translateY( -40px ); opacity: 0;}
    to { transform: translateY( 0px );opacity: 1;}
}
