@charset "utf-8";

@font-face { 
	font-family: "GodsWord"; 
	src: url("../fonts/UTMGodsWord.ttf");
	font-weight: normal; 
	font-style: normal; 
}

* {margin:0; padding:0;}
a {text-decoration:none; color:#cfb077; outline:none;}
a:hover {color:#887147;}

/*ul {list-style:none;}*/
img {vertical-align:middle; border:0;}
body,input {font-size:14px; line-height:1.42857143; background-color:#000; color:#cfb077; font-family:'Tahoma';}
html, body, header, section, footer {width:100%; float:left; border:none;}

.hide {display:none !important;}
.clearfix {clear:both;}
.bold {font-weight:bold;}
.red {color:red;}
.violet {color:violet;}

html, body {height:100%;}
body {background:#000 url(../img/bg.jpg) no-repeat center top; height:3601px; position:relative;}
.container {width:1002px; margin:0 auto; height:100%; position:relative;}

/*Header*/
	header {height:71px; position:fixed; top:0; left:0; background-color:#242424; font-family:'GodsWord'; z-index:50;}
	header nav {width:100%; height:100%; float:left; overflow:hidden; position:relative;}
	header nav a {width:110px; height:17px; padding:11px 0 15px; float:right; background:url(../img/border_btn_header.png) no-repeat center center; margin:14px 6px; text-align:center; font-family:'GodsWord'; font-size:13px; color:#fff; opacity:0.7;}
	header nav a:hover {opacity:1; color:#fff;}
	header nav a.logo {margin:0; padding:0; width:429px; height:83px; background:url(../img/logo.png) no-repeat center center; position:absolute; top:-2px; left:0;}
	header nav a.fanpage {margin-right:0;}

section .container>div {position:absolute; top:0; left:0; z-index:20;}
section .container>div.icon_title {width:128px; height:127px; background:url(../img/icon_title.png) no-repeat left top;}
section .container>div.title {width:509px; height:76px; background:url(../img/title.png) no-repeat left top;}

section .container>div.content {width:520px; height:470px; top:-2000px; left:85px; overflow:hidden; color:#44505e;}
section .container>div.content>ol {list-style-type:none; width:500px; height:450px; float:left; padding:10px; font-size:13px; font-family:Tahoma; font-weight:bold; text-align:justify;}
section .container>div.content>ol h1 {font-size:14px; font-weight:bold; text-transform:uppercase; width:100%; margin-bottom:5px;}
section .container>div.content>ol p {text-indent:20px; float:left; padding-left:10px;}
section .container>div.content>ol .level-1 {font-weight:300; margin-bottom:20px; width:100%; float:left;}
section .container>div.content>ol .level-1 .title {width:100%;}
section .container>div.content>ol .level-1 ul {list-style-type:none; width:100%;}
section .container>div.content>ol .level-1 ul li { text-align:justify; padding-left:10px;}
section .container>div.content>ol .level-1 ul li.level-2 {padding-left:30px; background:url(../img/i_li.png) no-repeat 10px 5px;}

section .container>div.content>ol .level-1 ul.level-3 {list-style-type:square; padding-bottom:10px;}
section .container>div.content>ol .level-1 ul.level-4 {list-style-type:circle; padding-bottom:5px;}

/*Section 1*/
	.frame1 {width:100%; float:left; height:825px; overflow:hidden;}
	.frame1 object {
		position:absolute; 
		top:70px; 
		left:-70px;
		display:block;
		z-index:5;
	}

	.frame1 .container div.btn {top:466px; left:-1000px; width:126px; height:212px; background:url(../img/btn_frame1.png) no-repeat left top; cursor:pointer;}
	.frame1 .container div.btn.cm {width:126px; height:212px; background-position:left top;}
	.frame1 .container div.btn.cm:hover {background-position:left bottom;}
	.frame1 .container div.btn.hdm {width:167px; height:212px; background-position:-126px top;}
	.frame1 .container div.btn.hdm:hover {background-position:-126px bottom;}
	.frame1 .container div.btn.tptc {left:2000px; width:167px; height:212px; background-position:-293px top;}
	.frame1 .container div.btn.tptc:hover {background-position:-293px bottom;}
	.frame1 .container div.btn.nlb {left:2000px; width:130px; height:212px; background-position:right top;}
	.frame1 .container div.btn.nlb:hover {background-position:right bottom;}

	.frame1 .container div.btn_video {top:825px; left:422px; width:167px; height:166px; background:url(../img/bg_video.png) no-repeat left top; cursor:pointer; z-index:10;}
	.frame1 .container div.btn_video:hover {background-position:left bottom;}
	.frame1 .container div.btn_video>a {width:100%; height:100%; float:left;}

	.frame1 .container div.btn_video>a>div {position:relative;}
	.frame1 .container div.btn_video>a>div>span {position:absolute; width:167px; height:166px; top:0; left:0;}
	.frame1 .container div.btn_video>a>div>span.btn_video1 {background:url(../img/i_video1.png) no-repeat center center; animation:rotateZIcon 10s infinite linear;}
	.frame1 .container div.btn_video>a>div>span.btn_video2 {background:url(../img/i_video2.png) no-repeat 75px center; animation:scaleIcon 2s infinite linear;}

	.frame1.active .container div.zoom {animation:zoomIcon 1000ms 1 linear;}
	.frame1.active .container div.btn.cm {left:18px; transition:left 500ms ease;}
	.frame1.active .container div.btn.hdm {left:202px; transition:left 500ms ease;}
	.frame1.active .container div.btn.tptc {left:643px; transition:left 500ms ease;}
	.frame1.active .container div.btn.nlb {left:863px; transition:left 500ms ease;}
	.frame1.active .container div.btn_video {top:446px; transition:top 1s ease;}

	@keyframes rotateZIcon {
		50% {	
			-webkit-transform: rotateZ(180deg);
				-ms-transform: rotateZ(180deg);
		    		transform: rotateZ(180deg);
		}

		100% {
			-webkit-transform: rotateZ(360deg);
				-ms-transform: rotateZ(360deg);
		    		transform: rotateZ(360deg);
		}
	}

	@keyframes scaleIcon {
		50% {	
			-webkit-transform: scale(1.15);
				-ms-transform: scale(1.15);
		    		transform: scale(1.15);
		}

		100% {
			-webkit-transform: scale(1);
				-ms-transform: scale(1);
		    		transform: scale(1);
		}
	}

	@keyframes zoomIcon {
		50% {	
			-webkit-transform: scale(2);
				-ms-transform: scale(2);
		    		transform: scale(2);
		}

		100% {
			-webkit-transform: scale(1);
				-ms-transform: scale(1);
		    		transform: scale(1);
		}
	}

/*Section 2*/
	.frame2 {width:100%; float:left; height:665px; overflow:hidden;}
	.frame2 .container {height:665px; position:relative;}
	.frame2 .container object {
		position:absolute; 
		top:-23px; 
		left:599px;
		display:block;
		z-index:5;
	}
	.frame2 .container>div.icon_title {background-position:left top; top:46px; left:-47px;}
	.frame2 .container>div.title {background-position:-1018px top; top:58px; left:-37px;}
	.frame2 .container>div.content {}

/*Section 3*/
	.frame3 {width:100%; float:left; height:660px; overflow:hidden;}
	.frame3 .container {height:660px; position:relative;}
	.frame3 .container object {
		position:absolute; 
		top:-75px; 
		left:-497px;
		display:block;
		z-index:5;
	}
	.frame3 .container>div.icon_title {background-position:right top; top:35px; left:936px;}
	.frame3 .container>div.title {height:67px; background-position:1018px -76px; top:56px; left:435px;}
	.frame3 .container>div.content {color:#d8c69b; left:498px;}
	.frame3 .container>div.content>ol .level-1 ul li.level-2 {background:url(../img/i_li2.png) no-repeat 10px 5px;}

/*Section 4*/
	.frame4 {width:100%; float:left; height:660px; overflow:hidden;}
	.frame4 .container {height:660px; position:relative;}
	.frame4 .container object {
		position:absolute; 
		top:-100px; 
		left:-515px;
		display:block;
		z-index:5;
	}
	.frame4 .container>div.icon_title {background-position:left bottom; top:46px; left:-47px;}
	.frame4 .container>div.title {height:62px; background-position:-1018px -143px; top:72px; left:-37px;}
	.frame4 .container>div.content {}

/*Section 5*/
	.frame5 {width:100%; float:left; height:673px; overflow:hidden;}
	.frame5 .container {height:673px; position:relative;}
	.frame5 .container object {
		position:absolute; 
		top:20px; 
		left:-534px;
		display:block;
		z-index:5;
	}
	.frame5 .container>div.icon_title {background-position:right bottom; top:35px; left:936px;}
	.frame5 .container>div.title {height:61px; background-position:1018px -205px; top:62px; left:400px;}
	.frame5 .container>div.content {color:#d8c69b; left:498px;}
	.frame5 .container>div.content>ol .level-1 ul li.level-2 {background:url(../img/i_li2.png) no-repeat 10px 5px;}

section.active .container>div.icon_title {animation:rotateYIcon 800ms 1 linear;}
section.active .container>div.title {transition:background 2400ms ease;}
section.frame2.active .container>div.title {background-position:0px top;}
section.frame3.active .container>div.title {background-position:0px -76px;}
section.frame4.active .container>div.title {background-position:0px -143px;}
section.frame5.active .container>div.title {background-position:0px -205px;} 

section.active .container>div.content {transition:top 4000ms ease;}
section.frame2.active .container>div.content,
section.frame3.active .container>div.content,
section.frame4.active .container>div.content,
section.frame5.active .container>div.content {top:150px;}

@keyframes rotateYIcon {
		50% {	
			-webkit-transform: rotateY(180deg);
				-ms-transform: rotateY(180deg);
		    		transform: rotateY(180deg);
		}

		100% {
			-webkit-transform: rotateY(360deg);
				-ms-transform: rotateY(360deg);
		    		transform: rotateY(360deg);
		}
}

/*Navigation*/
	nav.menu_right {position:fixed; right:20px; top:200px; width:230px; height:200px; z-index:50;}
	nav.menu_right>div {float:right; position:relative; width:230px; height:200px;}
	nav.menu_right>div>div {z-index:60; position:absolute; width:0px; overflow:hidden; height:29px; padding:1px 31px 0 0; background:url(../img/btn_nav.png) no-repeat right top; top:0; right:0; cursor:pointer; transition:width 500ms ease;}
	nav.menu_right>div>div.active {background-position:right bottom; width:199px;}
	nav.menu_right>div>div:hover {width:199px;}

	nav.menu_right>div>div.home {top:0;}
	nav.menu_right>div>div.cm {top:40px;}
	nav.menu_right>div>div.hdm {top:80px;}
	nav.menu_right>div>div.tptc {top:120px;}
	nav.menu_right>div>div.nlb {top:160px;}

	nav.menu_right>div>div>span {width:199px; height:29px; float:right; background:url(../img/nav_tab.png) no-repeat center top;}
	nav.menu_right>div>div.home>span {background-position:center top;}
	nav.menu_right>div>div.cm>span {background-position:center -29px;}
	nav.menu_right>div>div.hdm>span {background-position:center -58px;}
	nav.menu_right>div>div.tptc>span {background-position:center -87px;}
	nav.menu_right>div>div.nlb>span {background-position:center bottom;}

	nav.menu_right>div>.line {width:2px; height:150px; position:absolute; top:20px; right:14px; background-color:#000; z-index:55;}

/*Footer*/
	footer {width:100%; height:81px; padding:18px 0; background-color:#000;}
	footer .container {text-align:center;}

	footer .container .logo {display:block; height:58px; float:left; margin-top:18px;}
	footer .container .logo.gosu {width:162px; height:42px; background:url(../img/logo_gosu.png) no-repeat center center; background-size:cover;}
	footer .container .logo.cubinet {width:273px; background:url(../img/logo_cubinet.png) no-repeat center top; background-size:cover;}
	footer .container .address {width:565px; height:81px; float:left; padding-top:0px;}
	footer .container .address p {text-align:center; width:100%; font-size:16px; font-family:Tahoma; float:left; color:#fff; margin-top:5px;}
	footer .container .address a {color:#fff; font-size:14px; font-family:Tahoma; padding:0 2px 0 5px; border-left:1px solid #fff; line-height:1;}
	footer .container .address a:first-child {border-left:none;}
	footer .container .address a:hover {color:#ff9427;}