@charset "utf-8";

@font-face { 
	font-family: "Domaine"; 
	src: url("../fonts/TUVDomaineRegular.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, section, footer {width:100%; float:left; border:none;}

.hide {display:none !important;}
.clearfix {clear:both;}

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

.btn {width:228px; height:65px; float:left; background:url(../img/btn_action.png) no-repeat left top; cursor:pointer;}
.btn.download {background-position:left top;}
.btn.download:hover {background-position:left bottom;}
.btn.register {background-position:-228px top;}
.btn.register:hover {background-position:-228px bottom;}
.btn.detail {background-position:-456px top;}
.btn.detail:hover {background-position:-456px bottom;}
.btn.detail2 {background-position:right top;}
.btn.detail2:hover {background-position:right bottom;}

/*Section 1*/
	.frame1 {width:100%; float:left; height:779px; overflow:hidden;}
	.frame1 .container {position:relative; height:100%}
	.frame1 .container object {
		position:absolute; 
		top:0px; 
		left:50%;
		display:block;
		z-index:5;
		-webkit-transform: translateX(-50%);
		   -moz-transform: translateX(-50%);
	  		-ms-transform: translateX(-50%);
	  			transform: translateX(-50%);
	}
	.frame1 .container nav {position:absolute; top:170px; left:480px; float:left; z-index:10;}
	.frame1 .container nav a {float:left; padding:0 5px; border-right:2px solid #cfb077; line-height:1; font-size:16px; font-family:Tahoma;}
	.frame1 .container nav a:last-child {border:none;}

	.frame1 .container .btn_video {top:375px; left:464px; position:absolute; width:72px; height:81px; float:left; background:url(../img/i_video1.png) no-repeat center center; cursor:pointer; opacity:0.87; animation:scaleIcon 1s infinite linear; z-index:99;}
	.frame1 .container .btn_video:hover {opacity:1;}
	.frame1 .container .btn_video a {width:100%; height:100%; float:left;}
	.frame1 .container .btn_video .i_video{width:72px; height:81px; float:left; background:url(../img/i_video2.png) no-repeat center center;}
	
	@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);
		}
	}

	.frame1 .btn_dlrg {width:430px; height:65px; float:left; top:486px; left:285px; position:absolute; z-index:10}
	.frame1 .btn_dlrg>div {width:100%; height:100%; float:left; position:relative;}
	.frame1 .btn_dlrg .btn {position:absolute;}
	.frame1 .btn_dlrg .download {top:0; left:0;}
	.frame1 .btn_dlrg .register {top:0; right:0;}

/*Section 2*/
	.frame2 {width:100%; float:left; height:818px; overflow:hidden;}
	.frame2 .container {position:relative; height:818px;}
	.frame2 .container div {position:absolute; bottom:0; left:0; float:left; cursor:pointer; transition:z-index 1s ease;}
	.frame2 .container .cm {z-index:10; bottom:0; left:-320px; width:660px; height:482px; background: url(../img/cm.png) no-repeat center top;}
	.frame2 .container .hdm {z-index:8; bottom:-50px; left:70px; width:826px; height:685px; background: url(../img/hdm.png) no-repeat center top;}
	.frame2 .container .nlb {z-index:10; bottom:-40px; left:350px; width:780px; height:490px; background: url(../img/nlb.png) no-repeat center top;}
	.frame2 .container .tptc {z-index:8; bottom:-140px; left:500px; width:1022px; height:729px; background: url(../img/tptc.png) no-repeat center top;}

	.frame2 .container .text { z-index:12; width:56px; height:0; float:left; background:url(../img/text_frame2.png) no-repeat left top; top:0; left:0;}
	.frame2 .container .text.active {height:131px; transition:height 500ms ease;}
	.frame2 .container .text.t_cm {top:320px; left:0; background-position:left top;}
	.frame2 .container .text.t_hdm {top:170px; left:220px; background-position:-55px top; width:56px;}
	.frame2 .container .text.t_nlb {top:250px; left:570px; background-position:-110px top;}
	.frame2 .container .text.t_tptc {top:150px; left:945px; background-position:-165px top;}
	
	.frame2 .container .zoom {animation:zoomCharater 500ms 1 linear; z-index:14;}

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

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

	.frame2 .container .hover {width:250px; height:600px; z-index:14; bottom:0px; left:0px;}
	.frame2 .container .hover.h_cm {bottom:0px; left:0px; z-index:14;}
	.frame2 .container .hover.h_hdm {bottom:0px; left:250px; z-index:14;}
	.frame2 .container .hover.h_nlb {bottom:0px; left:500px; z-index:14;}
	.frame2 .container .hover.h_tptc {bottom:0px; left:750px; z-index:14;}

	.frame2 .container .btn {bottom:50px; left:386px; z-index:16;}

/*Section 3*/
	.frame3 {width:100%; float:left; height:748px;}
	.frame3 nav {float:left; position:relative; width:100%; margin-top:230px;}
	.frame3 nav .tab {z-index:10; float:left; width:88px; height:329px; background:url(../img/text_frame3.png) no-repeat left top; position:absolute; top:0; left:0; cursor:pointer; opacity:0.87;}
	.frame3 nav .tab:hover {opacity:1;}
	.frame3 nav .tab.text1 {top:0; left:0; background-position:left top; animation:waves 4000ms infinite linear;}
	.frame3 nav .tab.text2 {top:0; left:150px; background-position:-88px top; animation:waves 4200ms infinite linear;}
	.frame3 nav .tab.text3 {top:0; left:300px; background-position:-176px top; animation:waves 4400ms infinite linear;}
	.frame3 nav .tab.text4 {top:0; left:450px; background-position:-264px top; animation:waves 4600ms infinite linear;}
	.frame3 nav .tab.text5 {top:0; left:600px; background-position:-352px top; animation:waves 4800ms infinite linear;}
	.frame3 nav .tab.text6 {top:0; left:750px; background-position:-440px top; animation:waves 5000ms infinite linear;}
	.frame3 nav .tab.text7 {top:0; left:900px; background-position:right top; animation:waves 5200ms infinite linear;}
	.frame3 nav .tab a {width:100%; height:100%; float:left;}

	.frame3 nav .shadow {z-index:5; float:left; width:62px; height:333px; background:url(../img/shadow.png) no-repeat -16px top; position:absolute; top:0; left:0;}
	.frame3 nav .shadow.text1 {top:0; left:88px;}
	.frame3 nav .shadow.text2 {top:0; left:238px;}
	.frame3 nav .shadow.text3 {top:0; left:388px;}
	.frame3 nav .shadow.text4 {top:0; left:538px;}
	.frame3 nav .shadow.text5 {top:0; left:688px;}
	.frame3 nav .shadow.text6 {top:0; left:838px;}
	.frame3 nav .shadow.text7 {top:0; left:988px;}

	@keyframes waves {
		25% {top:-20px;}
		50% {top:0px;}
		75% {top:20px;}
		100% {top:0px;}
	}

	.frame3 .btn {margin:350px 386px 0;}


	.btn a,
	.frame3 nav .tab a ,
	.frame2 .container .hover a {width:100%; height:100%; float:left;}

/*Footer*/
	footer {width:100%; height:81px; padding:18px 0; background-color:#000; margin-top:0;}
	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;}