@charset "utf-8";

@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; 
}

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

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:1002px; margin:0 auto;}
.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 {background:url(../img/bg.jpg) no-repeat center top; position:relative; background-color:#0b1517;}
section .container {position:relative;}
/***** Section 1 *****/
	section.sec1 {height:782px; overflow:hidden;}
	section.sec1 .header {width:100%; float:left;}
	section.sec1 .header .logo {width:154px; height:82px; float:left; background:url(../img/logo.png) no-repeat center center; margin-top:5px; opacity:0.87;}
	section.sec1 .header .logo:hover {opacity:1;}
	section.sec1 .header nav {float:right; margin-top:10px;}
	section.sec1 .header nav a {font-size:13px; text-transform:uppercase; color:#000; padding:0 5px; line-height:1; border-left:1px solid #000; font-family:"UTMGodsWordR";}
	section.sec1 .header nav a:first-child {border-left:none;}
	section.sec1 .header nav a:hover {color:#e81911;}

	section.sec1 .title {width:620px; height:178px; float:left; margin:71px 0 0 4px; position:relative;}
	section.sec1 .title span {position:absolute; top:0; left:0;}
	section.sec1 .title span.mcm {width:125px; height:18px; background:url(../img/txt_mcm.png) no-repeat center center; top:16px; left:91px; opacity:1; transform:scale(1);}
	section.sec1 .title span.txt {width:619px; height:156px; background:url(../img/txt_main.png) no-repeat center center; top:22px; left:0; opacity:1; transform:scale(1); z-index:-1}
	section.sec1 .title span.time {width:49px; height:75px; background:url(../img/txt_date.png) no-repeat center center; top:0; left:571px; overflow:hidden; opacity:1; transform:scale(1);}
	section.sec1 .title span.time:before {
		content:''; width:49px; height:25px; background:#fff; float:left; opacity:0; margin-top:-50px;
		-webkit-animation: moveIcon1 2s linear infinite;
				animation: moveIcon1 2s linear infinite;
	}

	@keyframes moveIcon1 {
		  0% {opacity:0.87; margin-top:-50px;}
		 50% {opacity:0; margin-top:123px;}
		100% {opacity:0; margin-top:123px;}
	}

	section.sec1 .title span.slogan {width:405px; height:20px; background:url(../img/slogan.png) no-repeat left center; top:158px; left:153px;}
	section.sec1 .btn_mouse {
		width:199px; height:149px; float:left; background:url(../img/btn_mouse.png) no-repeat center center; position:absolute; top:408px; left:206px; opacity:1;
		-webkit-animation: moveIcon12 1s linear infinite;
				animation: moveIcon12 1s linear infinite;
	}

	@keyframes moveIcon12 {
		50% {top:400px;}
	}

	section.sec1 .btn_mouse span {
		width:80px; height:80px; top:9px; left:55px; border-radius:50%; position:absolute;
		-webkit-animation: spin 2s linear infinite;
				animation: spin 2s linear infinite;
	}

	@keyframes spin {
		  0% {transform:rotate(  0deg);}
		100% {transform:rotate(360deg);}
	}
	
	section.sec1 .btn_mouse span:before,
	section.sec1 .btn_mouse span:after {content:''; display:block; width:10px; height:10px; border-radius:50%; background:#229283; position:absolute; top:-1px; left:50%; margin-left:-4px; opacity:1;}
	section.sec1 .btn_mouse span:after {top:auto; bottom:-1px;}

	section.sec1 object {
		width:2000px; height:700px; position:absolute; top:0; left:50%; z-index:-1;
		-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
				transform: translateX(-50%);
	}
	/*Active*/
	section.sec1.active .title span.mcm,
	section.sec1.active .title span.txt {
		-webkit-animation: zoomTxt 0.8s linear 1;
				animation: zoomTxt 0.8s linear 1;
	}

	@keyframes zoomTxt {
		  0% {opacity:1.0; transform:scale(1);}
		 50% {opacity:0.4; transform:scale(2);}
		 75% {opacity:1.0; transform:scale(0.9);}
		100% {opacity:1.0; transform:scale(1);}
	}

	section.sec1.active .title span.time {
		-webkit-animation: zoomTxt2 1.2s linear 1;
				animation: zoomTxt2 1.2s linear 1;
	}

	@keyframes zoomTxt2 {
		  0% {opacity:1.0; transform:scale(1.0);}
		 50% {opacity:0.4; transform:scale(8.0);}
		 75% {opacity:0.4; transform:scale(2.0);}
		 87% {opacity:1.0; transform:scale(0.6);}
		100% {opacity:1.0; transform:scale(1.0);}
	}

	section.sec1.active .title span.slogan {
		-webkit-animation: moveBg 2s linear 1;
				animation: moveBg 2s linear 1;
	}

	@keyframes moveBg {
		  0% {background-position:-405px center;}
		 60% {background-position:-405px center;}
		100% {background-position:  left center;}
	}

	section.sec1.active .btn_mouse {
		-webkit-animation: moveIcon12 1s linear infinite, showBtn 3s linear 1;
				animation: moveIcon12 1s linear infinite, showBtn 3s linear 1;
	}

	@keyframes showBtn {
		  0% {opacity:0;}
		 66% {opacity:0;}
		100% {opacity:1;}
	}
/***** End Section 1 *****/

/***** Section 2 *****/
	section.sec2 {height:599px;}
	section.sec2 .title {width:522px; height:57px; float:left; background:url(../img/txt_frame2.png) no-repeat left top; margin:131px 0 0 34px;}
	section.sec2 .block {width:933px; height:324px; float:left; margin:43px 0 0 32px; position:relative;}
	section.sec2 .block a {width:227px; height:324px; float:left; background:url(../img/btn_frame23.png) no-repeat left top; position:absolute; top:0; left:0; opacity:1; overflow:hidden; cursor:pointer;}
	section.sec2 .block a.giftcode {background-position:left top; left:0;}
	section.sec2 .block a.stream {background-position:-235px top; left:235px;}
	section.sec2 .block a.event {background-position:-471px top; left:471px;}
	section.sec2 .block a.new_server {background-position:right top; left:706px;}

	section.sec2 .block a:hover {background-position:left -324px;}
	section.sec2 .block a.giftcode:hover {background-position:left -324px;}
	section.sec2 .block a.stream:hover {background-position:-235px -324px;}
	section.sec2 .block a.event:hover {background-position:-471px -324px;}
	section.sec2 .block a.new_server:hover {background-position:right -324px;}

	section.sec2 .block a.giftcode i {
		width:177px; height:153px; float:left; margin:43px 0 0 27px; background:url(../img/i_21.png) no-repeat left top; 
		-webkit-animation: moveIcon21 2s linear infinite;
				animation: moveIcon21 2s linear infinite;
	}

	@keyframes moveIcon21 {
		50% {margin-top:53px;}
	}

	section.sec2 .block a.stream i {
		width:226px; height:253px; float:left; margin:0 0 0 -9px; background:url(../img/i_22.png) no-repeat left top;
		-webkit-animation: moveIcon22 4s linear infinite;
				animation: moveIcon22 4s linear infinite;
	}

	@keyframes moveIcon22 {
		 50% {transform:scale(0.9);}
		 90% {transform:scale(1.1);}
		100% {transform:scale(1.0);}
	}

	section.sec2 .block a.event i {
		width:220px; height:273px; float:left; margin:5px 0 0 -2px; background:url(../img/i_23.png) no-repeat left top;
		-webkit-animation: moveIcon22 6s linear infinite;
				animation: moveIcon22 6s linear infinite;
	}

	section.sec2 .block a.new_server i {width:60px; height:60px; float:left; position:absolute; top:0; left:0; background:url(../img/i_24.png) no-repeat left center;}
	section.sec2 .block a.new_server i._241 {
		background-position: left center; top:110px; left:45px;
		-webkit-animation: moveIcon241 9s linear infinite;
				animation: moveIcon241 9s linear infinite;
	}
	@keyframes moveIcon241 {
		 17% {top: 40px; left: 87px;}
		 33% {top: 40px; left: 87px;}
		 50% {top:110px; left:130px;}
		 66% {top:110px; left:130px;}
		 83% {top:110px; left: 45px;}
		100% {top:110px; left: 45px;}
	}

	section.sec2 .block a.new_server i._242 {
		background-position:right center; top:40px; left:87px;
		-webkit-animation: moveIcon242 9s linear infinite;
				animation: moveIcon242 9s linear infinite;
	}
	@keyframes moveIcon242 {
		 17% {top:110px; left:130px;}
		 33% {top:110px; left:130px;}
		 50% {top:110px; left: 45px;}
		 66% {top:110px; left: 45px;}
		 83% {top: 40px; left: 87px;}
		100% {top: 40px; left: 87px;}
	}

	section.sec2 .block a.new_server i._243 {
		background-position:-60px center; top:110px; left:130px;
		-webkit-animation: moveIcon243 9s linear infinite;
				animation: moveIcon243 9s linear infinite;
	}
	@keyframes moveIcon243 {
		 17% {top:110px; left: 45px;}
		 33% {top:110px; left: 45px;}
		 50% {top: 40px; left: 87px;}
		 66% {top: 40px; left: 87px;}
		 83% {top:110px; left:130px;}
		100% {top:110px; left:130px;}
	}

	
	/*Active*/
	section.sec4.active .title,
	section.sec3.active .title,
	section.sec2.active .title {
		-webkit-animation: changeWidth 1.5s linear 1;
				animation: changeWidth 1.5s linear 1;
	}

	@keyframes changeWidth {
		  0% {width:59px;}
		 33% {width:59px;}
		100% {width:522px;}
	}

	section.sec2.active .block a.giftcode {
		-webkit-animation: showTab1 2s linear 1;
				animation: showTab1 2s linear 1;
	}

	section.sec2.active .block a.stream {
		-webkit-animation: showTab2 2.5s linear 1;
				animation: showTab2 2.5s linear 1;
	}

	section.sec2.active .block a.event {
		-webkit-animation: showTab3 3s linear 1;
				animation: showTab3 3s linear 1;
	}

	section.sec2.active .block a.new_server {
		-webkit-animation: showTab4 3.5s linear 1;
				animation: showTab4 3.5s linear 1;
	}

	@keyframes showTab1 {
		  0% {top:-300px; opacity:0;}
		 60% {top:-300px; opacity:0;}
		 80% {top:  20px; opacity:1;}
		 90% {top:  -5px; opacity:1;}
		100% {top:     0; opacity:1;}
	}

	@keyframes showTab2 {
		  0% {top:-300px; opacity:0;}
		 71% {top:-300px; opacity:0;}
		 85% {top:  20px; opacity:1;}
		 93% {top:  -5px; opacity:1;}
		100% {top:     0; opacity:1;}
	}

	@keyframes showTab3 {
		  0% {top:-300px; opacity:0;}
		 77% {top:-300px; opacity:0;}
		 89% {top:  20px; opacity:1;}
		 94% {top:  -5px; opacity:1;}
		100% {top:     0; opacity:1;}
	}

	@keyframes showTab4 {
		  0% {top:-300px; opacity:0;}
		 81% {top:-300px; opacity:0;}
		 91% {top:  20px; opacity:1;}
		 95% {top:  -5px; opacity:1;}
		100% {top:     0; opacity:1;}
	}
/***** End Section 2 *****/

/***** Section 3 *****/
	section.sec3 {height:598px;}
	section.sec3 .charater {width:1263px; height:647px; float:left; background:url(../img/char3.png) no-repeat left top; position:absolute; top:57px; left:-500px; z-index:-1; opacity:1;}
	section.sec3 .title {width:396px; height:55px; float:left; background:url(../img/txt_frame3.png) no-repeat left top; margin:132px 0 0 34px;}
	section.sec3 .block {width:933px; height:324px; float:left; margin:44px 0 0 32px; position:relative;}

	section.sec3 .block a {width:227px; height:324px; float:left; background:url(../img/btn_frame23.png) no-repeat left -648px; top:0; left:0; opacity:1; position:absolute; cursor:pointer;}
	section.sec3 .block a.dinhcao {
		background-position:left -648px; left:0;
		-webkit-animation: moveTab2 4s linear 3.5s infinite;
				animation: moveTab2 4s linear 3.5s infinite;
	}
	section.sec3 .block a.uytin {
		background-position:-235px -648px; left:235px;
		-webkit-animation: moveTab2 4s linear 4s infinite;
				animation: moveTab2 4s linear 4s infinite;
	}
	section.sec3 .block a.sucmanh {
		background-position:-471px -648px; left:471px;
		-webkit-animation: moveTab2 4s linear 4.5s infinite;
				animation: moveTab2 4s linear 4.5s infinite;
	}
	section.sec3 .block a.xuhuong {
		background-position:right -648px; left:706px;
		-webkit-animation: moveTab2 4s linear 5s infinite;
				animation: moveTab2 4s linear 5s infinite;
	}

	@keyframes moveTab2 {
		50% {top:50px;}
	}

	section.sec3 .block a:hover {background-position:left bottom;}
	section.sec3 .block a.dinhcao:hover {background-position:left bottom;}
	section.sec3 .block a.uytin:hover {background-position:-235px bottom;}
	section.sec3 .block a.sucmanh:hover {background-position:-471px bottom;}
	section.sec3 .block a.xuhuong:hover {background-position:right bottom;}

	/*Active*/
	section.sec3.active .charater {
		-webkit-animation: showCharater1 1.5s linear 1;
				animation: showCharater1 1.5s linear 1;
	}

	@keyframes showCharater1 {
		  0% {left:     0; opacity:0;}
		100% {left:-500px; opacity:1;}
	}

	section.sec3.active .block a.dinhcao {
		-webkit-animation: moveTab2 4s linear 3.5s infinite, showTab21 2s linear 1;
				animation: moveTab2 4s linear 3.5s infinite, showTab21 2s linear 1;
	}

	section.sec3.active .block a.uytin {
		-webkit-animation: moveTab2 4s linear 4s infinite, showTab22 2.5s linear 1;
				animation: moveTab2 4s linear 4s infinite, showTab22 2.5s linear 1;
	}

	section.sec3.active .block a.sucmanh {
		-webkit-animation: moveTab2 4s linear 4.5s infinite, showTab23 3s linear 1;
				animation: moveTab2 4s linear 4.5s infinite, showTab23 3s linear 1;
	}

	section.sec3.active .block a.xuhuong {
		-webkit-animation: moveTab2 4s linear 5s infinite, showTab24 3.5s linear 1;
				animation: moveTab2 4s linear 5s infinite, showTab24 3.5s linear 1;
	}

	@keyframes showTab21 {
		  0% {left:-300px; opacity:0;}
		 60% {left:-300px; opacity:0;}
		 80% {left:  20px; opacity:1;}
		 90% {left:  -5px; opacity:1;}
		100% {left:     0; opacity:1;}
	}

	@keyframes showTab22 {
		  0% {left:-300px; opacity:0;}
		 71% {left:-300px; opacity:0;}
		 85% {left: 255px; opacity:1;}
		 93% {left: 230px; opacity:1;}
		100% {left: 235px; opacity:1;}
	}

	@keyframes showTab23 {
		  0% {left:-300px; opacity:0;}
		 77% {left:-300px; opacity:0;}
		 89% {left: 491px; opacity:1;}
		 94% {left: 466px; opacity:1;}
		100% {left: 471px; opacity:1;}
	}

	@keyframes showTab24 {
		  0% {left:-300px; opacity:0;}
		 81% {left:-300px; opacity:0;}
		 91% {left: 726px; opacity:1;}
		 95% {left: 701px; opacity:1;}
		100% {left: 706px; opacity:1;}
	}
/***** End Section 3 *****/

/***** Section 4 *****/
	section.sec4 {height:714px; overflow:hidden;}
	section.sec4 .charater1 {width:1113px; height:661px; float:left; background:url(../img/char1.png) no-repeat left top; position:absolute; top:52px; left:188px; opacity:1; z-index:-1;}
	section.sec4 .charater2 {width:965px; height:686px; float:left; background:url(../img/char2.png) no-repeat left top; position:absolute; top:27px; left:-136px; opacity:1; z-index:-1;}
	section.sec4 .title {width:306px; height:53px; float:left; background:url(../img/txt_frame4.png) no-repeat left top; margin:134px 0 0 33px;}

	section.sec4 object {
		width:2000px; height:700px; position:absolute; top:106px; left:50%; opacity:1; z-index:-1; opacity:0;
		-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
				transform: translateX(-50%);
	}

	/*Active*/
	section.sec4.active .title {
		-webkit-animation: changeWidth2 4.5s linear 1;
				animation: changeWidth2 4.5s linear 1;
	}

	@keyframes changeWidth2 {
		  0% {width:1px;}
		 75% {width:1px;}
		100% {width:522px;}
	}

	section.sec4.active .charater1 {
		-webkit-animation: showCharater2 1.5s linear 1;
				animation: showCharater2 1.5s linear 1;
	}

	@keyframes showCharater2 {
		  0% {left:-300px; opacity:0;}
		100% {left: 188px; opacity:1;}
	}

	section.sec4.active .charater2 {
		-webkit-animation: showCharater3 3s linear 1;
				animation: showCharater3 3s linear 1;
	}

	@keyframes showCharater3 {
		  0% {left: 300px; opacity:0;}
		 50% {left: 300px; opacity:0;}
		100% {left:-136px; opacity:1;}
	}

	section.sec4.active object {
		-webkit-animation: showFlash 3.5s linear forwards;
				animation: showFlash 3.5s linear forwards;
	}

	@keyframes showFlash {
		  0% {opacity:0;}
		 75% {opacity:0;}
		100% {opacity:1;}
	}
/***** End Section 4 *****/

section.close .title,
section.close .btn_mouse,
section.close .block,
section.close .charater,
section.close .charater1,
section.close .charater2 {display:none;}

/***** Button Action *****/
	.btn_drcgft {
		width:126px; height:335px; float:left; position:fixed; top:50%; right:5px;
		-webkit-transform: translateY(-60%);
			-ms-transform: translateY(-60%);
				transform: translateY(-60%);
	}
	.btn_drcgft .btn {width:100%; height:51px; background:url(../img/btn_drcgft.jpg) no-repeat left top; float:left; cursor:pointer;}
	.btn_drcgft .btn.download {height:81px; background-position:right top;}
	.btn_drcgft .btn.register {background-position:left -81px;}
	.btn_drcgft .btn.card {background-position:left -132px;}
	.btn_drcgft .btn.giftcode {background-position:left -183px;}
	.btn_drcgft .btn.facebook {background-position:left -233px;}
	.btn_drcgft .btn.goTop {
		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;
	}

	.btn_drcgft .btn:hover {background-position:right top;}
	.btn_drcgft .btn:hover.download {background-position:left top;}
	.btn_drcgft .btn:hover.register {background-position:right -81px;}
	.btn_drcgft .btn:hover.card {background-position:right -132px;}
	.btn_drcgft .btn:hover.giftcode {background-position:right -183px;}
	.btn_drcgft .btn:hover.facebook {background-position:right -233px;}
	.btn_drcgft .btn:hover.goTop {background-position:right bottom;}

	.btn_drcgft .btn.goTop.active {height:51px;}
/***** End Button Action *****/

/***** MP3 *****/
	.mp3 {width:126px; height:27px; position:fixed; bottom:5px; left:5px; background:url(../img/bg_sound.jpg) no-repeat left top; cursor:pointer; z-index:10;}
	.mp3.mute {background-position:left bottom;}
/***** End MP3 *****/

/***** Footer *****/
	footer {width:100%; height:81px; padding:18px 0;}
	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:17px;}
	footer .container .logo.cubinet {width:238px; background:url(../img/logo_cubinet.png) no-repeat center center; 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;}
/***** End Footer *****/

/***** 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:324px; height:227px; 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:-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 .wrapper .box .wrap_box .btn_close:hover { transform:rotate(360deg);}
	.popup .wrapper .box .wrap_box .content {width:100%; height:100%; float:left;}
	.popup .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 *****/

/***** Boxchat Facebook *****/

	.boxchat_fb {
		position:fixed; bottom:0; right:10px; width:250px; height:30px; border-radius: 5px 5px 0 0; overflow:hidden;
		-webkit-transition: height 500ms ease;
           -moz-transition: height 500ms ease;
          	-ms-transition: height 500ms ease;
             -o-transition: height 500ms ease;
            	transition: height 500ms ease;
	}

	.boxchat_fb h2 {float:left; width:100%; height:24px; padding-top:5px; border-bottom:1px solid #133783; background:#3a5795; text-align:center; font-size:16px; font-family:Arial; color:#fff; cursor:pointer;}
	.boxchat_fb .box {
		float:left; width:100%; height:0px; overflow:hidden;
		-webkit-transition: height 500ms ease;
           -moz-transition: height 500ms ease;
          	-ms-transition: height 500ms ease;
             -o-transition: height 500ms ease;
            	transition: height 500ms ease;
	}

	.boxchat_fb.active {height:330px;}
	.boxchat_fb.active .box {height:300px;}
/***** End Boxchat Facebook *****/

@media screen and (max-width:1300px) {
	.label_18plus {width:135px; height:82px; background:url(../img/label_18plus.jpg) no-repeat center top; background-size:cover;}
}

@media screen and (max-width:1100px) {
	.label_18plus {display:none;}
}