/* image replace text */
/*Slider*/
.slider-box { position:absolute; z-index:1;width:100%; height:100%; left:0; top:0}
.slider-pic {position:absolute;top:0px;left:0px;width:300%;height:100%;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
.slider-box a { width:1270px; height:100%; float:left;}
.slider-box img { width:100%;}
.slider-btn { position:absolute; z-index:2;width:100%; bottom:20px; height:26px;line-height:26px; text-align:center;}
.slider-btn i {width:20px;height:20px;border:1px solid transparent;margin: 0px 15px 0 0;background-color: #fff;cursor: pointer;border-radius:50%;display:inline-block;zoom:1;}
.slider-btn i.on {width:24px; height:24px; background-color:transparent;border:1px solid #fff;}
.slider-prev { position: absolute; width: 51px; height: 51px; background-position: -187px 0; left: -104px; top: 194px; z-index: 12; }
.slider-next { position: absolute; width: 51px; height: 51px; background-position: -187px -51px; right: -95px; top: 194px; z-index: 12; }

/*Main Slider*/
.main-slider { width: 1270px; height: 436px; position: relative; margin: 0 auto; }
.main-slider .slider-box{border-radius:15px;overflow:hidden;}
.main-slider .slider-pic a { width: 1270px; }
.main-slider img{border-radius:15px;}

/*Games Slider*/
.games-slider { position: absolute; top: 80px; left: 0; width: 1270px; height: 806px; z-index: 10; overflow: hidden; }
.games-slider .slider-item { float:left;width: 1270px; height: 806px; position: relative; }
.games-slider .slider-item a { position: absolute; z-index: 1; transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; }
.games-slider .slider-item .game-1 { left: 195px; top: 210px; width: 478px; height: 418px; }
.games-slider .slider-item .game-2 { z-index: 1; right: 60px; top: 10px; z-index: 1; width: 575px; height: 480px; }
.games-slider .slider-item a:hover { z-index: 5; box-shadow: 0 20px 20px -10px rgba(0, 0, 0, 0.5); transition-property: box-shadow,z-index; transition-duration: 0.3s; }
.games-slider .slider-btn { bottom: 0; }
.games-slider .slider-btn i { border-color: #000; background-color: #000; }
.games-slider .slider-btn i:hover,
.games-slider .slider-btn i.on { background-color: transparent; }
                             
/*News Slider*/
.news-slider { position: absolute; top: 200px; left: 0; width: 250px; height: 350px; z-index: 10; overflow: hidden; }
.news-slider .slider-item { float:left;width:250px; height:350px; position: relative; }
.news-slider .slider-item a { position: absolute; z-index: 1; transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; }
.news-slider .slider-item .game-1 { left: 0px; top: 0px; width: 478px; height: 418px; }
.news-slider .slider-item a:hover { z-index: 5; box-shadow: 0 20px 20px -10px rgba(0, 0, 0, 0.5); transition-property: box-shadow,z-index; transition-duration: 0.3s; }
                             
.games-slider .slider-item .game-1:hover { animation:game_one 0.3s;left:193px;top:208px;}
.games-slider .slider-item .game-2:hover { animation:game_two 0.3s;right:62px;top:8px;}
@keyframes game_one{
	from {left: 195px; top: 210px;}
	to {left:193px;top:208px;}
}

@-webkit-keyframes game_one /* Safari and Chrome */{
	from {left: 195px; top: 210px;}
	to {left:193px;top:208px;}
}

@keyframes game_two{
	from {right: 60px; top: 10px;}
	to {right:62px;top:8px;}
}

@-webkit-keyframes game_two /* Safari and Chrome */{
	from {right: 60px; top: 10px;}
	to {right:62px;top:8px;}
}

.news-slider .slider-btn { bottom: 0;width:250px; }
.news-slider .slider-btn i { border-color: #000; background-color: #000; }
.news-slider .slider-btn i:hover,
.news-slider .slider-btn i.on { background-color: transparent; }
.news-slider .slider-btn i{width:10px;height:10px;background-color:white;opacity:0.5;border-color:white;}
.news-slider .slider-btn i.on{width:12px;height:12px;background-color:white;border-color:white;opacity:1;}
.news-slider .slider-btn{top:280px;left:90px;}                            
.news-slider .slider-btn i{margin:0px 8px 0px 0px;}                            
/*News Index*/
.main-container { overflow: hidden; }

.news-content { margin-top: 47px; }

.news-box { float: left; width: 593px; height: 310px; margin-right: 84px; }

.news-box .content-hd { height: 100px; color: #fff; }

.news-more { float: right; height: 12px; font-size: 12px; line-height: 12px; margin-top: 59px; color: #dfbbff; width: 56px; text-decoration: underline; font-weight: bold; }

.icon-more { float: left; width: 12px; height: 12px; position: relative; margin-right: 4px; text-decoration: none; }

.icon-more:before { content: ' '; position: absolute; width: 12px; height: 4px; top: 4px; left: 0; background: #c79fec; }

.icon-more:after { content: ' '; position: absolute; width: 4px; height: 12px; top: 0; left: 4px; background: #c79fec; }

.news-list { width: 100%; padding-top: 15px; border-top: 1px solid #480485; }

.news-list li { display: block; width: 100%; height: 37px; color: #fff; font-size: 14px; font-family: 'Microsoft Yahei'; line-height: 37px; }

.news-list span { float: right; }

.news-list a { color: #fff; text-decoration: none; }

/*Calandar*/
.calandar-box { float: left; width: 580px; height: 310px; }

.calandar-box .content-hd { height: 100px; line-height: 100px; color: #fff; }

.calandar { width: 100%; }

.date-list { float: left; width: 371px; margin: 17px 29px 0 0; display: inline; }

.calandar-option { float: left; width: 34px; height: 34px;border-radius:100%;border:2px transparent solid; margin-right: 15px; line-height: 34px; text-align: center; color: #fff; font-weight: bold; font-size: 14px; position:relative;}
.calandar-option:hover,
.calandar-option-on { background: #ff5857; color: #410c71; font-family: 'Microsoft Yahei'; border-radius: 100%; border: 2px transparent solid!important;}
.now_date_selected { background: #c1c1c1; color: black; font-family: 'Microsoft Yahei'; border-radius: 100%; }

.border_color_1{border:2px #92D050 solid;}
.border_color_2{border:2px #00B0F0 solid;}                    

.date-detail { float: left; width: 180px; height: 115px; margin-top: 40px; padding-left: 32px; border-left: 2px solid #2c074e; box-sizing: border-box; color: #fff; font-size: 19px; line-height: 24px; }

.date-detail p { font-size: 14px; margin-top: 36px; font-family: 'Microsoft Yahei'; line-height: 20px; }

.games { height: 935px; position: relative; z-index: 1; padding-top: 80px; }

.games .content-hd { display: inline-block; color: #000; padding-right: 300px; border-top: 1px solid #000; }

.games .content { position: relative; z-index: 1; }

.research { height: 742px; position: relative; z-index: 1; }

.research .content { color: #000; border-top: 1px solid #000; position: relative; z-index: 1;height:742px; }

.circle { position: absolute; border-radius: 100%; text-align: center; }
.circle:before { content: ''; position: absolute; z-index: 1; border-radius: 100%; top: 10px; left: 10px; }

.circle-bull { display: inline-block; width: 20px; height: 20px; border-radius: 100%; position: relative; z-index: 5; opacity: 0; }

.circle-hd { color: #000; font: bold 36px/2 'FuturalBT'; position: absolute; z-index: 12; width: 200px; height: 200px; text-align: right; opacity: 0; cursor: pointer; }
.circle-hd.c1 { text-align: left; }
.circle-hd.c2 { right: -60px; top: 40px; }
.circle-hd.c3 { right: -80px; top: 500px; }

.circle-black { width: 640px; height: 640px; z-index: 1; top: 318px; left: 235px; }
.circle-black:before { width: 620px; height: 620px; border: 1px solid #000; }
.circle-black .cred { background-color: #ff5857; }

.circle-blue { width: 720px; height: 720px; top: 90px; right: 58px; }
.circle-blue:before { border: 1px solid #5bacfe; width: 700px; height: 700px; }
.circle-blue:after { content: ''; position: absolute; left: 30px; top: 30px; width: 500px; height: 500px; border-radius: 50%; border: 80px solid #5bacfe; }
.circle-blue .cyellow { background-color: #ffba2f; margin-right: -20px; }
.circle-blue .cgreen { background-color: #87eb6f; }

.research-pop { display: none; position: absolute; left: 50%; top: 225px; margin-left: -400px; z-index: 50; width: 800px; height: 414px; background-color: #000; color: #fff; }

.research-pop-close { position: absolute; right: 24px; top: 24px; background-position: -188px -128px; width: 46px; height: 46px; }

.research-pop-img { float: left; height: 414px; width: 550px; }

.research-pop-bd { padding: 230px 25px 0 575px; }
.research-pop-bd .hd { font: bold 30px/2 'FuturalBT'; }

@-webkit-keyframes arcRed { from { -webkit-transform: rotate(270deg); opacity: 0; }
  to { -webkit-transform: rotate(320deg); opacity: 1; } }
@-moz-keyframes arcRed { from { -moz-transform: rotate(270deg); opacity: 0; }
  to { -moz-transform: rotate(320deg); opacity: 1; } }
@keyframes arcRed { from { transform: rotate(270deg); opacity: 0; }
  to { transform: rotate(320deg); opacity: 1; } }
@-webkit-keyframes arcYellow { from { -webkit-transform: rotate(0deg); opacity: 0; }
  to { -webkit-transform: rotate(40deg); opacity: 1; } }
@-moz-keyframes arcYellow { from { -moz-transform: rotate(0deg); opacity: 0; }
  to { -moz-transform: rotate(40deg); opacity: 1; } }
@keyframes arcYellow { from { transform: rotate(0deg); opacity: 0; }
  to { transform: rotate(40deg); opacity: 1; } }
@-webkit-keyframes arcGreen { from { -webkit-transform: rotate(80deg); opacity: 0; }
  to { -webkit-transform: rotate(120deg); opacity: 1; } }
@-moz-keyframes arcGreen { from { -moz-transform: rotate(80deg); opacity: 0; }
  to { -moz-transform: rotate(120deg); opacity: 1; } }
@keyframes arcGreen { from { transform: rotate(80deg); opacity: 0; }
  to { transform: rotate(120deg); opacity: 1; } }
@-webkit-keyframes bob { 0% { -webkit-transform: translateY(-20px); }
  100% { -webkit-transform: translateY(0); } }
@-moz-keyframes bob { 0% { -moz-transform: translateY(-20px); }
  100% { -moz-transform: translateY(0); } }
@keyframes bob { 0% { transform: translateY(-20px); }
  100% { transform: translateY(0); } }
@-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); }
  100% { opacity: 1; -webkit-transform: translateY(0); } }
@-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); }
  100% { opacity: 1; -moz-transform: translateY(0); } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); } }
.ani .content-hd, .ani.slider-box, .ani.deco-light, .ani.deco-dark { -webkit-animation: bob 1.5s linear forwards; -moz-animation: bob 1.5s linear forwards; animation: bob 1.5s linear forwards; }
.ani .cred { -webkit-animation: arcRed 0.8s linear forwards; -moz-animation: arcRed 0.8s linear forwards; animation: arcRed 0.8s linear forwards; transform-origin: 50% 320px; }
.ani .cyellow { -webkit-animation: arcYellow 0.8s linear forwards; -moz-animation: arcYellow 0.8s linear forwards; animation: arcYellow 0.8s linear forwards; transform-origin: 50% 360px; }
.ani .cgreen { -webkit-animation: arcGreen 0.8s linear forwards; -moz-animation: arcGreen 0.8s linear forwards; animation: arcGreen 0.8s linear forwards; transform-origin: 50% 360px; }
.ani .circle-hd { -webkit-animation: fadeInUp 0.5s 0.5s linear forwards; -moz-animation: fadeInUp 0.5s 0.5s linear forwards; animation: fadeInUp 0.5s 0.5s linear forwards; }
.ani .circle { -webkit-animation: bob 0.5s 0.8s linear forwards; -moz-animation: bob 0.5s 0.8s linear forwards; animation: bob 0.5s 0.8s linear forwards; }

/*Content*/
.deco-light { position: absolute; z-index: 1; background: url(//www.thenextstudio.net/web201708/images/main/bg_dot1.png) repeat; width: 500px; height: 550px; top: 180px; right: 196px; }
.deco-dark { position: absolute; z-index: 1; background: url(//www.thenextstudio.net/web201708/images/main/bg_dot2.png) repeat; width: 260px; height: 195px; top: 900px; left: 325px; }