@charset "utf-8";

@font-face {
	font-family:'UTMGodsWordB'; 
	src:url('../fonts/UTMGodsWordB.ttf'); 
	src:local('☺'), url('../fonts/UTMGodsWordB.ttf') format('woff'), 
	url('../fonts/UTMGodsWordB.ttf') format('truetype'); 
	font-weight: normal; 
	font-style: normal; 
}

@font-face {
	font-family:'UTMGodsWordR'; 
	src:url('../fonts/UTMGodsWordR.ttf'); 
	src:local('☺'), url('../fonts/UTMGodsWordR.ttf') format('woff'), 
	url('../fonts/UTMGodsWordR.ttf') format('truetype'); 
	font-weight: normal; 
	font-style: normal; 
}

@font-face {
	font-family:'UVNLACLONGQUANR'; 
	src:url('../fonts/UVNLACLONGQUANR.TTF'); 
	src:local('☺'), url('../fonts/UVNLACLONGQUANR.TTF') format('woff'), 
	url('../fonts/UVNLACLONGQUANR.TTF') format('truetype'); 
	font-weight: normal; 
	font-style: normal; 
}

* {margin:0; padding:0;}
a {text-decoration:none; color:#000; outline:none; font-family:'UTMGodsWordR';}
a:hover {color:#e97020;}

ul {list-style:none;}
img {vertical-align:middle; border:0;}
body,input {font-size:14px; line-height:1.42857143; color:#2d2d2d; font-family:Arial;}
html, body, header, footer, section {width:100%; float:left; border:none;}

.hide {display:none !important;}
.clearfix {clear:both;}
.container {width:1000px; margin:0 auto; position:relative;}
.label_18plus {width:150px; height:91px; float:left; background:url(../img/label_18plus.jpg) no-repeat center top; position:fixed; top:5px; left:5px; z-index:69;}

body {position:relative; background:#000 url(../img/bg.jpg) no-repeat center top; font-family:'UTMGodsWordR';}

/*** Frame 0 ***/
	.f0 {height:960px; overflow:hidden;}
	.f0 .container object {
		width:1920px; height:997px; position:absolute; top:0; left:50%; z-index:1;
		-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
				transform: translateX(-50%);
	}
	.f0 .container .menu_top {font-size:13px; text-transform:uppercase; float:left; line-height:1; position:absolute; top:13px; left:0;/* margin:13px 762px 0 0;*/ width:300px; z-index:2;}
	.f0 .container .menu_top a {padding:0 4px; border-left:1px solid #000; line-height:1;}
	.f0 .container .menu_top a:first-child {padding-left:0; border:none;}
	.f0 .container .menu_top a:last-child {padding-left:9px;}

	.f0 .container .menu_top .logo {width:154px; height:82px; position:absolute; top:160px; left:232px; background:url(../img/logo.png) no-repeat left top; opacity:0.93; z-index:2; border:none;}
	.f0 .container .menu_top .logo:hover {opacity:1;}

	/*.f0 .container .name_version {width:611px; height:237px; position:absolute; top:203px; left:5px; background:url(../img/f0_nameversion.png) no-repeat left top; z-index:1; transform:scale(1);}
	.f0 .container .date {width:64px; padding:0 14px 0 125px; height:19px; position:absolute; top:406px; left:198px; background:url(../img/f0_date.png) no-repeat left top; z-index:1; font-size:24px; color:#21656d; font-family:"UVNLACLONGQUANR"; line-height:0.5; opacity:1;}

	.f0 .container .btn {width:495px; height:197px; position:relative; float:left; margin:432px 0 0 52px;}
	.f0 .container .btn span {
		width:93px; height:205px; position:absolute; top:0; left:0; background:url(../img/f0_menu.png) no-repeat left top; cursor:pointer; opacity:0;
		-webkit-animation:moveBtn 2.8s linear infinite;
				animation:moveBtn 2.8s linear infinite;
	}
	.f0 .container .btn span:nth-child(1) {left:    0; background-position:  left top;}
	.f0 .container .btn span:nth-child(2) {left:104px; background-position: -93px top;}
	.f0 .container .btn span:nth-child(3) {left:206px; background-position:-186px top;}
	.f0 .container .btn span:nth-child(4) {left:310px; background-position:-279px top;}
	.f0 .container .btn span:nth-child(5) {left:410px; background-position: right top;}*/

	.f0 .container .btn span:hover {background-position:left bottom;}
	.f0 .container .btn span:nth-child(1):hover {background-position:  left bottom;}
	.f0 .container .btn span:nth-child(2):hover {background-position: -93px bottom;}
	.f0 .container .btn span:nth-child(3):hover {background-position:-186px bottom;}
	.f0 .container .btn span:nth-child(4):hover {background-position:-279px bottom;}
	.f0 .container .btn span:nth-child(5):hover {background-position: right bottom;}

	.f0.active .container .logo {
		-webkit-animation:showLogo 2.8s ease-in-out forwards;
				animation:showLogo 2.8s ease-in-out forwards;
	}
	@keyframes showLogo {
		  0% {opacity:0; left:-232px;}
		 33% {opacity:0; left:-232px;}
		100% {opacity:1; left: 232px;}
	}

	.f0.active .container .name_version {
		-webkit-animation:showSlogan 1.4s ease-in-out forwards;
				animation:showSlogan 1.4s ease-in-out forwards;
	}
	@keyframes showSlogan {
		  0% {opacity:0; transform:scale(  3);}
		 50% {opacity:0; transform:scale(  2);}
		 90% {opacity:1; transform:scale(0.9);}
		100% {opacity:1; transform:scale(  1);}
	}

	.f0.active .container .date {
		-webkit-animation:showDate 2.8s ease-in-out forwards;
				animation:showDate 2.8s ease-in-out forwards;
	}
	@keyframes showDate {
		  0% {opacity:0;}
		 50% {opacity:0;}
		100% {opacity:1;}
	}
	.f0.active .container .btn span {
		-webkit-animation:showBtn 1.4s ease-in-out forwards, moveBtn 2.8s ease-in-out infinite;
				animation:showBtn 1.4s ease-in-out forwards, moveBtn 2.8s ease-in-out infinite;
	}
	.f0.active .container .btn span:nth-child(1) {
		-webkit-animation-delay: 0s;
				animation-delay: 0s;
	}

	.f0.active .container .btn span:nth-child(2) {
		-webkit-animation-delay: 0.2s;
				animation-delay: 0.2s;
	}

	.f0.active .container .btn span:nth-child(3) {
		-webkit-animation-delay: 0.4s;
				animation-delay: 0.4s;
	}

	.f0.active .container .btn span:nth-child(4) {
		-webkit-animation-delay: 0.6s;
				animation-delay: 0.6s;
	}

	.f0.active .container .btn span:nth-child(5) {
		-webkit-animation-delay: 0.8s;
				animation-delay: 0.8s;
	}

	@keyframes showBtn {
		  0% {opacity:0; transform:translateY(800px);}
		 75% {opacity:0; transform:translateY(800px);}
		100% {opacity:1; transform:translateY(  0px);}
	}

	@keyframes moveBtn {
		 0% {top: 0px;}
		50% {top:30px;}
	}
/*** End Frame 0 ***/

/*** Frame 1 ***/
	.f1 {height:946px;}
	.f1 .container .box {width:924px; height:262px; padding:8px 10px; background:url(../img/f1_borderleft.png) no-repeat left top, url(../img/f1_borderright.png) no-repeat right bottom; float:left; margin:276px 0 0 36px; position:relative;}
	.f1 .container .box .text {width:440px; height:100%; float:left; color:#fbf6df; font-size:14px; font-family:Tahoma; line-height:1.5; text-align:justify; margin-right:10px;}
	.f1 .container .box .text p{margin-bottom:10px;}
	.f1 .container .box .video {width:470px; height:256px; border:2px solid #fbf6df; float:left; background:url(../img/f1_imgdemo.jpg) no-repeat center center; position:relative; cursor:pointer; opacity:0.87;}
	.f1 .container .box .video:hover {opacity:1;}
	/*.f1 .container .box .video a {width:100%; height:100%; float:left;}*/
	.f1 .container .box .video:before {content:""; width:54px; height:54px; border-radius:50%; border:3px solid #fbf6df; position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); background-color:rgba(0,0,0,0.57);}
	.f1 .container .box .video:after {content:""; border-left:20px solid #fbf6df; border-bottom:12px solid transparent; border-top:12px solid transparent; position:absolute; top:calc(50% - 12px); left:calc(50% - 7px);}
	.f1 .container .box .video:before,
	.f1 .container .box .video:after {
		-webkit-animation:zoomBtnVideo 1.4s ease-in-out infinite;
				animation:zoomBtnVideo 1.4s ease-in-out infinite;
	}
	@keyframes zoomBtnVideo {
		 0% {transform:scale(1);}
		50% {transform:scale(1.1);}
	}

	.f1.active .container .box {
		-webkit-animation:showBoxCnt1 1.4s ease-in-out forwards;
				animation:showBoxCnt1 1.4s ease-in-out forwards;
	}
	@keyframes showBoxCnt1 {
		  0% {opacity:0; margin:600px 0 0 36px;}
		 50% {opacity:0; margin:600px 0 0 36px;}
		100% {opacity:1; margin:276px 0 0 36px;}
	}
/*** End Frame 1 ***/

/*** Frame 2 ***/
	.f2 {height:945px;}
	.f2 .container .name {width:433px; height:91px; background:url(../img/f2_name.png) no-repeat left top; position:absolute; top:50px; left:270px; opacity:0;}
	.f2 .container .txt1 {font-size:19px; position:absolute; top:144px; left:257px; color:#fbf6df; font-family:"UTMGodsWordR"; font-style:italic; opacity:0;}
	.f2 .container .txt2 {position:absolute; top:181px; left:258px; color:#fbf6df; font-size:14px; font-family:Tahoma; opacity:0;}
	.f2 .container .video {width:110px; height:108px; background:url(../img/f2_btn_video.png) no-repeat left top; position:absolute; top:62px; left:812px; cursor:pointer; opacity:0;}
	
	.f2 .container .content {width:715px; position:absolute; top:253px; left:258px; opacity:0;}
	.f2 .container .content .tit {float:left; width:100%; border-bottom:1px solid #b1f2f0;}
	.f2 .container .content .tit span {float:left; font-size:17px; color:#b1f2f0; text-transform:uppercase; font-family:"UTMGodsWordR"; position:relative; padding:0 4px 5px 12px; margin:0 0 -1px  10px; cursor:pointer;}
	.f2 .container .content .tit span.active {border-bottom:3px solid #fbf6df; color:#fbf6df;}
	.f2 .container .content .tit span:before {content:''; width:10px; height:10px; background:url(../img/f3_i.png) no-repeat left top; position:absolute; top:9px; left:-5px;}

	.f2 .container .content .box {width:100%; height:320px; float:left; margin-top:23px; overflow:hidden; position:relative;}
	.f2 .container .content .box .block {
		width:100%; height:100%; position:absolute; top:0; left:105%;
		-webkit-transition: left 600ms ease;
		   -moz-transition: left 600ms ease;
			-ms-transition: left 600ms ease;
			 -o-transition: left 600ms ease;
				transition: left 600ms ease;
	}
	.f2 .container .content .box .block.active {left:0;}
	.f2 .container .content .box .block .detail {width:226px; height:260px; float:left; font-size:14px; color:#fbf6df; font-family:Tahoma; line-height:1.4; text-align:justify;}
	.f2 .container .content .box .block .detail p {margin-bottom:5px;}
	.f2 .container .content .box .block .gallery {width:474px; height:100%; float:left; margin-left:10px;}
	.f2 .container .content .box .block .gallery .img {width:468px; height:254px; float:left; border:3px solid #fbf6df; overflow:hidden; position:relative;}
	.f2 .container .content .box .block .gallery .img img {width:474px; height:260px; position:absolute; left:calc(50% - 237px); top:calc(50% - 130px);}
	.f2 .container .content .box .block .gallery.video .img:before {content:""; width:54px; height:54px; border-radius:50%; border:3px solid #fbf6df; position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); background-color:rgba(0,0,0,0.57); z-index:2;}
	.f2 .container .content .box .block .gallery.video .img:after {content:""; border-left:20px solid #fbf6df; border-bottom:12px solid transparent; border-top:12px solid transparent; position:absolute; top:calc(50% - 12px); left:calc(50% - 7px); z-index:2;}

	.f2 .container .content .box .block .gallery .slider-for {float:left; width:100%; height:260px;}
	.f2 .container .content .box .block .gallery .slider-for .item {width:474px; height:260px; display:block; overflow:hidden; position:relative;}
	.f2 .container .content .box .block .gallery .slider-for .item.video:before {content:""; width:54px; height:54px; border-radius:50%; border:3px solid #fbf6df; position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); background-color:rgba(0,0,0,0.57); z-index:2;}
	.f2 .container .content .box .block .gallery .slider-for .item.video:after {content:""; border-left:20px solid #fbf6df; border-bottom:12px solid transparent; border-top:12px solid transparent; position:absolute; top:calc(50% - 12px); left:calc(50% - 7px); z-index:2;}
	.f2 .container .content .box .block .gallery .slider-nav {float:left; width:94px; height:42px; margin:18px 180px;}
	.f2 .container .content .box .block .gallery .slider-nav .item {height:42px; width:42px !important; margin:0 2px; float:left; background:url(../img/i_vh.jpg) no-repeat left top; overflow:hidden;}
	.f2 .container .content .box .block .gallery .slider-nav .item:nth-child(1) {background-position: left top;}
	.f2 .container .content .box .block .gallery .slider-nav .item:nth-child(2) {background-position:right top;}

	/***** Slick *****/
		.f2 .container .content .box .block .gallery .slider-nav .slick-arrow {width:8px; height:16px; float:left; cursor:pointer; position:absolute; left:-21px; top:calc(50% - 10px); z-index:4; opacity:1 !important;}
		.f2 .container .content .box .block .gallery .slider-nav .slick-arrow.slick-prev {}
		.f2 .container .content .box .block .gallery .slider-nav .slick-arrow.slick-next {left:auto; right:-20px;}
		.f2 .container .content .box .block .gallery .slider-nav .slick-arrow:before {content:''; top:0; left:0; position:absolute;}
		.f2 .container .content .box .block .gallery .slider-nav .slick-arrow:hover:before {color:#e97020;}
		.f2 .container .content .box .block .gallery .slider-nav .slick-arrow.slick-prev:before {border-right:8px solid #fbf6df; border-bottom:8px solid transparent; border-top:8px solid transparent;}
		.f2 .container .content .box .block .gallery .slider-nav .slick-arrow.slick-next:before {border-left:8px solid #fbf6df; border-bottom:8px solid transparent; border-top:8px solid transparent;}
		.f2 .container .content .box .block .gallery .slider-nav .slick-disabled:before,
		.f2 .container .content .box .block .gallery .slider-nav .slick-disabled:hover:before {color:#ccc; display:none;}

	.f2 .container .content .box .block.vh .gallery .img:before {content:""; width:54px; height:54px; border-radius:50%; border:3px solid #fbf6df; position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); background-color:rgba(0,0,0,0.57); z-index:2;}
	.f2 .container .content .box .block.vh .gallery .img::after {content:""; border-left:20px solid #fbf6df; border-bottom:12px solid transparent; border-top:12px solid transparent; position:absolute; top:calc(50% - 12px); left:calc(50% - 7px); z-index:2;}
	.f2 .container .content .box .block.nc .gallery .slider-nav .item {width:40px !important; height:40px; border:1px solid #fbf6df;}
	.f2 .container .content .box .block.nc .gallery .slider-nav .item img {width:40px; height:40px; float:left;}

	.f2.active .container .name {
		-webkit-animation:showName1 1.4s ease-in-out forwards;
				animation:showName1 1.4s ease-in-out forwards;
	}
	
	.f2.active .container .txt1 {
		-webkit-animation:showName1 1.4s ease-in-out 0.5s forwards;
				animation:showName1 1.4s ease-in-out 0.5s forwards;
	}

	.f2.active .container .txt2 {
		-webkit-animation:showName1 1.4s ease-in-out 1s forwards;
				animation:showName1 1.4s ease-in-out 1s forwards;
	}

	.f2.active .container .video {
		-webkit-animation:showVideo1 1.4s ease-in-out 1s forwards, zoomBtnVideo 1.4s ease-in-out infinite;
				animation:showVideo1 1.4s ease-in-out 1s forwards, zoomBtnVideo 1.4s ease-in-out infinite;
	}
	
	.f2.active .container .video:hover {
		-webkit-animation-play-state: paused;
				animation-play-state: paused;
	}

	.f2.active .container .content {
		-webkit-animation:showName1 1.4s ease-in-out 1.5s forwards;
				animation:showName1 1.4s ease-in-out 1.5s forwards;
	}

	@keyframes showName1 {
		  0% {opacity:0; left:  0px;}
		 50% {opacity:0; left:  0px;}
		100% {opacity:1; left:270px;}
	}

	@keyframes showVideo1 {
		  0% {opacity:0; left:999px;}
		 50% {opacity:0; left:999px;}
		100% {opacity:1; left:812px;}
	}
/*** End Frame 2 ***/

/*** Frame 3 ***/
	.f3 {height:945px;}
	.f3 .container .name {width:514px; height:99px; background:url(../img/f3_name.png) no-repeat left top; position:absolute; top:45px; left:27px; opacity:0;}
	.f3 .container .txt1 {font-size:19px; position:absolute; top:143px; left:26px; color:#fbf6df; font-family:"UTMGodsWordR"; font-style:italic; opacity:0;}
	.f3 .container .txt2 {position:absolute; top:180px; left:33px; color:#fbf6df; font-size:14px; font-family:Tahoma; opacity:0;}
	.f3 .container .video {width:110px; height:108px; background:url(../img/f2_btn_video.png) no-repeat left top; position:absolute; top:61px; left:580px; cursor:pointer; opacity:0;}
	.f3 .container .video:hover {opacity:1;}

	.f3 .container .content {width:715px; position:absolute; top:253px; left:29px; opacity:0;}
	.f3 .container .content .tit {float:left; width:100%; border-bottom:1px solid #b1f2f0;}
	.f3 .container .content .tit span {float:left; font-size:17px; color:#b1f2f0; text-transform:uppercase; font-family:"UTMGodsWordR"; position:relative; padding:0 4px 5px 12px; margin:0 0 -1px  10px; cursor:pointer;}
	.f3 .container .content .tit span.active {border-bottom:3px solid #fbf6df; color:#fbf6df;}
	.f3 .container .content .tit span:before {content:''; width:10px; height:10px; background:url(../img/f3_i.png) no-repeat left top; position:absolute; top:9px; left:-5px;}

	.f3 .container .content .box {width:100%; height:320px; float:left; margin-top:23px; overflow:hidden; position:relative;}
	.f3 .container .content .box .block {
		width:100%; height:100%; position:absolute; top:0; left:105%;
		-webkit-transition: left 600ms ease;
		   -moz-transition: left 600ms ease;
			-ms-transition: left 600ms ease;
			 -o-transition: left 600ms ease;
				transition: left 600ms ease;
	}
	.f3 .container .content .box .block.active {left:0;}
	.f3 .container .content .box .block .detail {width:226px; height:260px; float:left; font-size:14px; color:#fbf6df; font-family:Tahoma; line-height:1.4; text-align:justify;}
	.f3 .container .content .box .block .detail p {margin-bottom:5px;}
	.f3 .container .content .box .block .gallery {width:474px; height:100%; float:left; margin-left:10px;}
	.f3 .container .content .box .block .gallery .img {width:468px; height:254px; float:left; border:3px solid #fbf6df; overflow:hidden; position:relative;}
	.f3 .container .content .box .block .gallery .img img {width:474px; height:260px; position:absolute; left:calc(50% - 237px); top:calc(50% - 130px);}
	.f3 .container .content .box .block .gallery.video .img:before {content:""; width:54px; height:54px; border-radius:50%; border:3px solid #fbf6df; position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); background-color:rgba(0,0,0,0.57); z-index:2;}
	.f3 .container .content .box .block .gallery.video .img:after {content:""; border-left:20px solid #fbf6df; border-bottom:12px solid transparent; border-top:12px solid transparent; position:absolute; top:calc(50% - 12px); left:calc(50% - 7px); z-index:2;}

	.f3 .container .content .box .block .gallery .slider-for {float:left; width:100%; height:260px;}
	.f3 .container .content .box .block .gallery .slider-for .item {width:474px; height:260px; display:block; overflow:hidden; position:relative;}
	.f3 .container .content .box .block .gallery .slider-for .item.video:before {content:""; width:54px; height:54px; border-radius:50%; border:3px solid #fbf6df; position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); background-color:rgba(0,0,0,0.57); z-index:2;}
	.f3 .container .content .box .block .gallery .slider-for .item.video:after {content:""; border-left:20px solid #fbf6df; border-bottom:12px solid transparent; border-top:12px solid transparent; position:absolute; top:calc(50% - 12px); left:calc(50% - 7px); z-index:2;}
	.f3 .container .content .box .block .gallery .slider-nav {float:left; width:94px; height:42px; margin:18px 180px;}
	.f3 .container .content .box .block .gallery .slider-nav .item {height:42px; width:42px !important; margin:0 2px; float:left; background:url(../img/i_vh.jpg) no-repeat left top; overflow:hidden;}
	.f3 .container .content .box .block .gallery .slider-nav .item:nth-child(1) {background-position: left top;}
	.f3 .container .content .box .block .gallery .slider-nav .item:nth-child(2) {background-position:right top;}
	/***** Slick *****/
		.f3 .container .content .box .block .gallery .slider-nav .slick-arrow {width:8px; height:16px; float:left; cursor:pointer; position:absolute; left:-21px; top:calc(50% - 10px); z-index:4; opacity:1 !important;}
		.f3 .container .content .box .block .gallery .slider-nav .slick-arrow.slick-prev {}
		.f3 .container .content .box .block .gallery .slider-nav .slick-arrow.slick-next {left:auto; right:-20px;}
		.f3 .container .content .box .block .gallery .slider-nav .slick-arrow:before {content:''; top:0; left:0; position:absolute;}
		.f3 .container .content .box .block .gallery .slider-nav .slick-arrow:hover:before {color:#e97020;}
		.f3 .container .content .box .block .gallery .slider-nav .slick-arrow.slick-prev:before {border-right:8px solid #fbf6df; border-bottom:8px solid transparent; border-top:8px solid transparent;}
		.f3 .container .content .box .block .gallery .slider-nav .slick-arrow.slick-next:before {border-left:8px solid #fbf6df; border-bottom:8px solid transparent; border-top:8px solid transparent;}
		.f3 .container .content .box .block .gallery .slider-nav .slick-disabled:before,
		.f3 .container .content .box .block .gallery .slider-nav .slick-disabled:hover:before {color:#ccc; display:none;}

	.f3 .container .content .box .block.vh .gallery .img:before {content:""; width:54px; height:54px; border-radius:50%; border:3px solid #fbf6df; position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); background-color:rgba(0,0,0,0.57); z-index:2;}
	.f3 .container .content .box .block.vh .gallery .img::after {content:""; border-left:20px solid #fbf6df; border-bottom:12px solid transparent; border-top:12px solid transparent; position:absolute; top:calc(50% - 12px); left:calc(50% - 7px); z-index:2;}
	.f3 .container .content .box .block.nc .gallery .slider-nav .item {width:40px !important; height:40px; border:1px solid #fbf6df;}
	.f3 .container .content .box .block.nc .gallery .slider-nav .item img {width:40px; height:40px; float:left;}

	.f3.active .container .name {
		-webkit-animation:showName2 1.4s ease-in-out forwards;
				animation:showName2 1.4s ease-in-out forwards;
	}
	
	.f3.active .container .txt1 {
		-webkit-animation:showName2 1.4s ease-in-out 0.5s forwards;
				animation:showName2 1.4s ease-in-out 0.5s forwards;
	}

	.f3.active .container .txt2 {
		-webkit-animation:showName2 1.4s ease-in-out 1s forwards;
				animation:showName2 1.4s ease-in-out 1s forwards;
	}

	.f3.active .container .video {
		-webkit-animation:showVideo2 1.4s ease-in-out 1s forwards, zoomBtnVideo 1.4s ease-in-out infinite;
				animation:showVideo2 1.4s ease-in-out 1s forwards, zoomBtnVideo 1.4s ease-in-out infinite;
	}
	
	.f3.active .container .video:hover {
		-webkit-animation-play-state: paused;
				animation-play-state: paused;
	}

	.f3.active .container .content {
		-webkit-animation:showName2 1.4s ease-in-out 1.5s forwards;
				animation:showName2 1.4s ease-in-out 1.5s forwards;
	}

	@keyframes showName2 {
		  0% {opacity:0; left:300px;}
		 50% {opacity:0; left:300px;}
		100% {opacity:1; left: 27px;}
	}

	@keyframes showVideo2 {
		  0% {opacity:0; left:400px;}
		 50% {opacity:0; left:400px;}
		100% {opacity:1; left:580px;}
	}
/*** End Frame 3 ***/

/*** Frame 4 ***/
	.f4 {height:945px; overflow:hidden;}
	.f4 .container .btn {width:192px; height:397px; position:absolute; top:0; left:0; background:url(../img/f4_btn.jpg) no-repeat left top; cursor:pointer; opacity:0; z-index:2;}
	.f4 .container .btn:before {content:""; width:25px; height:112px; position:absolute; top:-5px; left:-6px; background:url(../img/f1_borderleft.png) no-repeat left top;}
	.f4 .container .btn:after {content:""; width:25px; height:112px; position:absolute; bottom:-5px; right:-6px; background:url(../img/f1_borderright.png) no-repeat left top;}
	.f4 .container .btn:nth-child(1) {top:224px; left: 36px; background-position:  left top;}
	.f4 .container .btn:nth-child(2) {top:224px; left:285px; background-position:-192px top;}
	.f4 .container .btn:nth-child(3) {top:224px; left:532px; background-position:-384px top;}
	.f4 .container .btn:nth-child(4) {top:224px; left:781px; background-position: right top;}

	.f4 .container .btn:nth-child(1):hover {background-position:  left bottom;}
	.f4 .container .btn:nth-child(2):hover {background-position:-192px bottom;}
	.f4 .container .btn:nth-child(3):hover {background-position:-384px bottom;}
	.f4 .container .btn:nth-child(4):hover {background-position: right bottom;}

	.f4 .container .btn i {width:182px; height:387px; margin:5px; float:left;}
	.f4 .container .btn:nth-child(1) i {background:url(../img/f4_i1.png) no-repeat -21px -15px;}
	.f4 .container .btn:nth-child(2) i {background:url(../img/f4_i2.png) no-repeat -21px  40px;}
	.f4 .container .btn:nth-child(3) i {background:url(../img/f4_i3.png) no-repeat -47px  45px;}
	.f4 .container .btn:nth-child(4) i {background:url(../img/f4_i4.png) no-repeat  -8px  20px;}

	.f4 .container .btn:nth-child(1) i {
		-webkit-animation: moveBg1 2s linear infinite;
				animation: moveBg1 2s linear infinite;
	}
	@keyframes moveBg1 {
		 0% {background-position:-21px -15px;}
		25% {background-position:-21px -10px;}
		75% {background-position:-21px -20px;}
	}

	.f4 .container .btn:nth-child(2) i {
		-webkit-animation: moveBg2 1.5s linear infinite;
				animation: moveBg2 1.5s linear infinite;
	}
	@keyframes moveBg2 {
		 0% {background-position:-21px 40px;}
		25% {background-position:-21px 30px;}
		75% {background-position:-21px 50px;}
	}

	.f4 .container .btn:nth-child(3) i {
		-webkit-animation: moveBg3 2.5s linear infinite;
				animation: moveBg3 2.5s linear infinite;
	}
	@keyframes moveBg3 {
		 0% {background-position:-47px 45px;}
		25% {background-position:-47px 30px;}
		75% {background-position:-47px 60px;}
	}

	.f4 .container .btn:nth-child(4) i {
		-webkit-animation: moveBg4 1.75s linear infinite;
				animation: moveBg4 1.75s linear infinite;
	}
	@keyframes moveBg4 {
		 0% {background-position:-8px 20px;}
		25% {background-position:-8px 10px;}
		75% {background-position:-8px 30px;}
	}

	.f4 .container .btn:hover i {
		-webkit-animation-play-state: paused;
				animation-play-state: paused;
	}

	.f4.active .container .btn:nth-child(1) {
		-webkit-animation:showBtn2 1.4s ease-in-out forwards;
				animation:showBtn2 1.4s ease-in-out forwards;
	}

	.f4.active .container .btn:nth-child(2) {
		-webkit-animation:showBtn2 1.4s ease-in-out 0.4s forwards;
				animation:showBtn2 1.4s ease-in-out 0.4s forwards;
	}

	.f4.active .container .btn:nth-child(3) {
		-webkit-animation:showBtn2 1.4s ease-in-out 0.8s forwards;
				animation:showBtn2 1.4s ease-in-out 0.8s forwards;
	}

	.f4.active .container .btn:nth-child(4) {
		-webkit-animation:showBtn2 1.4s ease-in-out 1.2s forwards;
				animation:showBtn2 1.4s ease-in-out 1.2s forwards;
	}

	@keyframes showBtn2 {
		  0% {opacity:0; top:  0px;}
		 50% {opacity:0; top:  0px;}
		 80% {opacity:1; top:240px;}
		100% {opacity:1; top:224px;}
	}

	.f4 .container object {
		width:1920px; height:960px; position:absolute; top:0; left:50%; z-index:1; pointer-events:none;
		-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
				transform: translateX(-50%);
	}
/*** End Frame 4 ***/

/*** Frame 5 ***/
	.f5 {height:956px; overflow:hidden;}
	.f5 .container .gc {width:264px; height:320px; background:url(../img/f5_bg_gc.jpg) no-repeat left top; position:absolute; top:178px; left:222px; z-index:2;}
	.f5 .container .gc._1 {top:178px; left:90px; opacity:0;}
	.f5 .container .gc._2 {top:178px; left:366px; opacity:0;}
	.f5 .container .gc._3 {top:178px; left:644px; opacity:0;}
	.f5 .container .gc .name {width:100%; float:left; height:44px; padding-top:21px; text-align:center; text-transform:uppercase; font-family:"UVNLACLONGQUANR"; font-size:18px; color:#fbf6de;}
	.f5 .container .gc .content {width:100%; height:255px; float:left; overflow:hidden;}
	.f5 .container .gc .content .item {width:264px; height:255px; float:left; outline:none;}
	.f5 .container .gc .content .item .img {width:91px; height:91px; border:4px solid #fbf6de; overflow:hidden; position:relative; margin:46px 82px; float:left;}
	.f5 .container .gc .content .item .img img {width:98px; height:98px; position:absolute; top:calc(50% - 49px); left:calc(50% - 49px);}
	.f5 .container .gc .content .item .tit {width:100%; float:left; text-align:center; color:#fbf6de; font-family:Tahoma; font-size:15px;}
	
	/***** Slick *****/
		.f5 .container .gc .slick-arrow {width:8px; height:16px; float:left; cursor:pointer; position:absolute; left:12px; top:calc(50% - 28px); z-index:20; opacity:1 !important;}
		.f5 .container .gc .slick-arrow.slick-prev {}
		.f5 .container .gc .slick-arrow.slick-next {left:auto; right:17px;}
		.f5 .container .gc .slick-arrow:before {content:''; top:0; left:0; position:absolute;}
		.f5 .container .gc .slick-arrow:hover:before {color:#e97020;}
		.f5 .container .gc .slick-arrow.slick-prev:before {border-right:8px solid #fbf6df; border-bottom:8px solid transparent; border-top:8px solid transparent;}
		.f5 .container .gc .slick-arrow.slick-next:before {border-left:8px solid #fbf6df; border-bottom:8px solid transparent; border-top:8px solid transparent;}
		.f5 .container .gc .slick-disabled:before,
		.f5 .container .gc .slick-disabled:hover:before {color:#ccc; display:none;}

	.f5 .container .btn {width:265px; height:114px; background:url(../img/f5_btn.jpg) no-repeat left bottom; position:absolute; top:514px; left:222px; cursor:pointer; opacity:0;}
	.f5 .container .btn.ggc {top:514px; left:222px; background-position: left bottom;}
	.f5 .container .btn.dlg {top:514px; left:510px; background-position:right bottom;}

	.f5 .container .btn.ggc:hover {background-position: left top;}
	.f5 .container .btn.dlg:hover {background-position:right top;}

	.f5.active .container .gc._1 {
		-webkit-animation:showGC1 1.4s ease-in-out forwards;
				animation:showGC1 1.4s ease-in-out forwards;
	}

	@keyframes showGC1 {
		  0% {opacity:0; top:-178px; left:90px;}
		 50% {opacity:0; top:-178px; left:90px;}
		 80% {opacity:1; top: 178px; left:90px;}
		100% {opacity:1; top: 178px; left:90px;}
	}

	.f5.active .container .gc._2 {
		-webkit-animation:showGC2 1.4s ease-in-out 0.3s forwards;
				animation:showGC2 1.4s ease-in-out 0.3s forwards;
	}

	@keyframes showGC2 {
		  0% {opacity:0; top:-178px; left:366px;}
		 50% {opacity:0; top:-178px; left:366px;}
		 80% {opacity:1; top: 198px; left:366px;}
		100% {opacity:1; top: 178px; left:366px;}
	}

	.f5.active .container .gc._3 {
		-webkit-animation:showGC3 1.4s ease-in-out 0.6s forwards;
				animation:showGC3 1.4s ease-in-out 0.6s forwards;
	}

	@keyframes showGC3 {
		  0% {opacity:0; top:-178px; left:644px;}
		 50% {opacity:0; top:-178px; left:644px;}
		 80% {opacity:1; top: 178px; left:644px;}
		100% {opacity:1; top: 178px; left:644px;}
	}

	.f5.active .container .btn.ggc {
		-webkit-animation:showGC4 1.4s ease-in-out 0.9s forwards;
				animation:showGC4 1.4s ease-in-out 0.9s forwards;
	}

	@keyframes showGC4 {
		  0% {opacity:0; top:914px; left:222px;}
		 50% {opacity:0; top:914px; left:222px;}
		 80% {opacity:1; top:494px; left:222px;}
		100% {opacity:1; top:514px; left:222px;}
	}

	.f5.active .container .btn.dlg {
		-webkit-animation:showGC5 1.4s ease-in-out 0.9s forwards;
				animation:showGC5 1.4s ease-in-out 0.9s forwards;
	}

	@keyframes showGC5 {
		  0% {opacity:0; top:914px; left:510px;}
		 50% {opacity:0; top:914px; left:510px;}
		 80% {opacity:1; top:494px; left:510px;}
		100% {opacity:1; top:514px; left:510px;}
	}

	.f5 .container object {
		width:1920px; height:1044px; position:absolute; top:-90px; left:50%; z-index:1;
		-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
				transform: translateX(-50%);
	}
/*** End Frame 5 ***/

/***** Footer *****/
	footer {width:100%; height:81px; padding:18px 0; float:left;}
	footer .container {text-align:center;}
	footer .container .logo {display:block; height:39px; 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; margin-left:2px;}
	footer .container .logo.cubinet {width:238px; background:url(../img/logo_cubinet.png) no-repeat center center; background-size:cover;}
	footer .container .address {width:550px; 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;}
/***** End Footer *****/

/***** Menuright *****/
	.menuright {width:126px; height:335px; position:fixed; top:calc(50% - 167px); right:10px; z-index:10; }
	.menuright .btn {width:100%; float:left; height:51px; cursor:pointer; background:url(../img/menuright.jpg) no-repeat left top;}
	.menuright .btn:nth-child(1) {background-position:left    top; height:81px;}
	.menuright .btn:nth-child(2) {background-position:left  -81px;}
	.menuright .btn:nth-child(3) {background-position:left -132px;}
	.menuright .btn:nth-child(4) {background-position:left -183px;}
	.menuright .btn:nth-child(5) {background-position:left -234px;}
	.menuright .btn:nth-child(6) {
		background-position:left bottom; height:0;
		-webkit-transition: height 600ms ease;
		   -moz-transition: height 600ms ease;
			-ms-transition: height 600ms ease;
			 -o-transition: height 600ms ease;
				transition: height 600ms ease;
	}

	.menuright .btn:nth-child(1):hover {background-position:right    top;}
	.menuright .btn:nth-child(2):hover {background-position:right  -81px;}
	.menuright .btn:nth-child(3):hover {background-position:right -132px;}
	.menuright .btn:nth-child(4):hover {background-position:right -183px;}
	.menuright .btn:nth-child(5):hover {background-position:right -233px;}
	.menuright .btn:nth-child(6):hover {background-position:right bottom;}

	.menuright .btn.gotop.active {height:51px;}
/***** End Menuright *****/

/***** Menuleft *****/
	.menuleft {
		width:47px; height:392px; position:fixed; top:calc(50% - 196px); left:-50px; z-index:10;
		-webkit-transition: left 600ms ease;
		   -moz-transition: left 600ms ease;
			-ms-transition: left 600ms ease;
			 -o-transition: left 600ms ease;
				transition: left 600ms ease;
	}
	.menuleft .btn {width:100%; float:left; height:64px; cursor:pointer; background:url(../img/menuleft.png) no-repeat left top;}
	.menuleft .btn:nth-child(1) {background-position:left    top; height:67px;}
	.menuleft .btn:nth-child(2) {background-position:left  -67px; height:66px;}
	.menuleft .btn:nth-child(3) {background-position:left -133px; height:65px;}
	.menuleft .btn:nth-child(4) {background-position:left -198px;}
	.menuleft .btn:nth-child(5) {background-position:left -262px;}
	.menuleft .btn:nth-child(6) {background-position:left bottom;}

	.menuleft .btn:nth-child(1).active,
	.menuleft .btn:nth-child(1):hover {background-position:right    top;}
	.menuleft .btn:nth-child(2).active,
	.menuleft .btn:nth-child(2):hover {background-position:right  -67px;}
	.menuleft .btn:nth-child(3).active,
	.menuleft .btn:nth-child(3):hover {background-position:right -133px;}
	.menuleft .btn:nth-child(4).active,
	.menuleft .btn:nth-child(4):hover {background-position:right -198px;}
	.menuleft .btn:nth-child(5).active,
	.menuleft .btn:nth-child(5):hover {background-position:right -262px;}
	.menuleft .btn:nth-child(6).active,
	.menuleft .btn:nth-child(6):hover {background-position:right bottom;}

	.menuleft.active {left:10px;}
/***** End Menuleft *****/

/***** Popup *****/
	.popup {width:100%; height:100%; float:left; position:fixed; z-index:6969; top:0; left:0;}
	.popup .wrapper {width:100%; height:100%; float:left; position:relative;}
	.popup .wrapper .bg_close {width:100%; height:100%; float:left; background:rgba(0,0,0,0.69);}
	.popup .wrapper .box {
		width:714px; height:567px; position:absolute; top:50%; left:50%; background:url(../img/bg_popup.png) no-repeat left top;
		-webkit-transform: translateX(-50%) translateY(-50%);
			-ms-transform: translateX(-50%) translateY(-50%);
				transform: translateX(-50%) translateY(-50%);
	}
	.popup .wrapper .box .wrap_box {width:100%; height:100%; float:left; position:relative;}
	.popup .wrapper .box .wrap_box .btn_close {
		width:27px; height:27px; position:absolute; top:-3px; right:-23px; cursor:pointer; background:url(../img/btn_closePopup.png) no-repeat center center; transform:rotate(0deg);
		-webkit-transition: transform 400ms ease;
            	transition: transform 400ms ease;
	}
	.popup .wrapper .box .wrap_box .btn_close:hover { transform:rotate(360deg);}
	.popup .wrapper .box .wrap_box .content {width:644px; height:497px; float:left; margin:35px;}
	.popup .wrapper .box .wrap_box .content .tab {width:635px; height:100%; float:left; font-family:'UTMGodsWordR'; font-size:16px; color:#000;}
	.popup .wrapper .box .wrap_box .content .tab .tit {font-size:16px; font-weight:bold; color:#000;}

	/***** Popup Alert *****/
		.popup_alert {width:100%; height:100%; float:left; position:fixed; z-index:6969; top:0; left:0;}
		.popup_alert .wrapper {width:100%; height:100%; float:left; position:relative;}
		.popup_alert .wrapper .bg_close {width:100%; height:100%; float:left; background:rgba(0,0,0,0.69);}
		.popup_alert .wrapper .box {
			width:324px; height:227px; position:absolute; top:50%; left:50%; background:url(../img/bg_popup_alert.png) no-repeat left top;
			-webkit-transform: translateX(-50%) translateY(-50%);
				-ms-transform: translateX(-50%) translateY(-50%);
					transform: translateX(-50%) translateY(-50%);
		}
		.popup_alert .wrapper .box .wrap_box {width:100%; height:100%; float:left; position:relative;}
		.popup_alert .wrapper .box .wrap_box .btn_close {
			width:27px; height:27px; position:absolute; top:-14px; right:-14px; cursor:pointer; background:url(../img/btn_closePopup.png) no-repeat center center; transform:rotate(0deg);
			-webkit-transition: transform 400ms ease;
					transition: transform 400ms ease;
		}
		.popup_alert .wrapper .box .wrap_box .btn_close:hover { transform:rotate(360deg);}
		.popup_alert .wrapper .box .wrap_box .content {width:100%; height:100%; float:left;}
		.popup_alert .wrapper .box .wrap_box .content p {width:100%; height:100%; float:left; text-align:center; font-family:'UTMGodsWordR'; font-size:16px; font-weight:bold; color:#000; margin-top:70px;}
	/***** End Popup Alert *****/
/***** End Popup *****/

/***** Typo *****/
	.popup .tab .tit {font-size:16px; font-family:Tahoma; font-weight:bold; content:#212d2d; text-transform:uppercase; padding-left:10px; border-left:5px solid #c42e00; width:620px; float:left;}
	.popup .tab .content_detail {font-size:14px; font-family:Tahoma; width:635px; float:left;}
	.popup .tab .content_detail iframe,
	.popup .tab .content_detail img {max-width:100%; margin:0 auto; display:block;}

	.popup .tab .content_detail .content-event-first {font-size:36px; line-height:1;}
	.popup .tab .content_detail .content-event-h1 {font-size:20px; color:#d04907; font-weight:bold; text-indent:44px; background:url(../img/i_h1.png) no-repeat 9px 11px; float:left; width:625px; padding-top:10px; margin-bottom:10px;}
	.popup .tab .content_detail .content-event-h2 {font-size:16px; font-weight:bold; text-indent:25px; background:url(../img/i_h2.png) no-repeat 13px 8px; float:left; width:610px; margin:7px 0 0 10px;}
	.popup .tab .content_detail>p {padding:5px 0 5px 15px;}
	.popup .tab .content_detail ul {padding:0 0 0 15px; float:left; width:620px; margin-bottom:5px;}
	.popup .tab .content_detail ul li {padding:5px 0 5px 15px; float:left; width:590px; background:url(../img/i_li.png) no-repeat 3px 11px;}

	.popup .tab .content_detail table {font-family:Tahoma; font-size:13px; text-align:center; background-color:#fffdf6; border-collapse:collapse; border-spacing:0; margin:10px auto !important; max-width:500px; } 
	.popup .tab .content_detail table tr {border:1px solid #000; color:#000;}
	.popup .tab .content_detail table tr:nth-child(2n+1) {background:#f1f1f1;}
	.popup .tab .content_detail table tr:nth-child(2n) {background:#ddddbf;}
	.popup .tab .content_detail table tr:first-child {background:#781a08; color:#fff; font-weight:bold;}
	.popup .tab .content_detail table tr td {margin:0; padding:5px 10px; border:1px solid #000;}
	.popup .tab .content_detail table tr td ul {width:100%; padding:0;}
	.popup .tab .content_detail table tr td ul li {width:100%; padding-left:0; padding-right:0; text-indent:10px;}

	.popup .tab .content_detail table p {width:100%; padding:5px 0;}

	.popup .tab .content_detail a {color:#d04907; font-family:Tahoma;}
	.popup .tab .content_detail a:hover {text-decoration:underline;}
/***** End Typo *****/