@import "notosanstc.css";
	body {
	font-family:noto sans tc!important;
	background-color:#000!important;
	position:relative;
	padding:0;
	margin:0;
	min-width:1400px
}
.wrap {
	position:relative;
	width:100%;
	height:100%;
	margin:0
}
.wrap section {
	position:relative;
	width:100%
}
canvas {
	display:block;
	vertical-align:bottom
}
.fixednav {
	position:fixed;
	left:60px;
	top:50%;
	transform:translateY(-50%);
	width:116px;
	height:425px;
	z-index:100
}
.nav-on {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	background:url(img/nav-close-sting.png) no-repeat center;
	cursor:pointer
}
.nav-on.active {
	background:unset
}
.nav-on.active:before {
	top:-57px
}
.nav-on.active:after {
	bottom:-57px
}
.nav-on.active ul {
	display:block
}
.nav-on:before {
	content:'';
	position:absolute;
	width:116px;
	height:57px;
	top:155px;
	left:0;
	background:url(img/nav-uparrow.png) no-repeat center;
	transition:.3s ease-in-out
}
.nav-on:after {
	content:'';
	position:absolute;
	width:116px;
	height:57px;
	bottom:155px;
	left:0;
	background:url(img/nav-downarrow.png) no-repeat center;
	transition:.3s ease-in-out
}
.nav-on ul {
	display:none;
	position:relative;
	list-style:none;
	padding:0;
	width:100%;
	height:100%
}
.nav-on ul li {
	position:relative;
	width:100%;
	height:30px;
	margin:20px 0
}
.nav-on ul li a {
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	color:#fff;
	font-size:20px;
	font-weight:300;
	text-decoration:none;
	transition:.3s ease-in-out
}
.nav-on ul li a:hover {
	text-decoration:underline
}
section.p1sec {
	height:950px;
	background-color:#000;
	overflow:hidden
}
.logo {
	position:relative;
	display:block;
	margin:70px auto 0;
	z-index:2
}
.p1content {
	position:relative;
	width:1090px;
	margin: 10px auto 0;
	z-index:2
}
#p1title {
	position:relative;
	display:block;
	margin:0 auto
}
.p1btns {
	position:relative;
	width:1000px;
	height:137px;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap
}
a.gotore {
	display:block;
	position:relative;
	width:500px;
	height:188px;
	background:url(img/gotopre.png) no-repeat center;
	transition:.3s linear
}
a.gotocbt {
	display:block;
	position:relative;
	width:500px;
	height:188px;
	background:url(img/gotopre-2.png) no-repeat center;
	transition:.3s linear
}
.p1btns a:hover {
	filter:brightness(150%);
	-webkit-filter:brightness(150%)
}
.video-overlay {
	background:url(img/overlay.png);
	background-repeat:repeat;
	position:absolute;
	right:0;
	bottom:0;
	top:0;
	right:0;
	width:100%;
	height:100%;
	z-index:1
}
#SRvideo {
	position:absolute;
	right:0;
	bottom:0;
	top:0;
	right:0;
	width:100%;
	height:100%;
	background-size:100% 100%;
	background-color:#000;
	background-image:;
	background-position:center center;
	background-size:contain;
	object-fit:cover;
	z-index:0
}
ul.fastlink {
	list-style:none;
	position:relative;
	width:280px;
	height:70px;
	display:flex;
	padding:0;
	margin:25px auto 0
}
ul.fastlink li {
	position:relative;
	width:70px;
	height:70px
}
ul.fastlink li a {
	display:block;
	width:70px;
	height:70px;
	transition:.5s linear
}
#baha-link {
	background:url(img/baha-icn.html) no-repeat center
}
#gamebase-link {
	background:url(img/gamebase-icn.html) no-repeat center
}
#fb-link {
	background:url(img/fb-icn.png) no-repeat center
}
#yt-link {
	background:url(img/yt-icn.png) no-repeat center
}
ul.fastlink li a:hover {
	filter:brightness(130%);
	-webkit-filter:brightness(130%)
}
section.p2sec {
	height:950px;
	background-color:#000
}
.p2content {
	position:relative;
	width:1200px;
	height:calc(100% - 105px);
	margin:0 auto;
	z-index:10;
	padding-top:105px
}
#p2title {
	position:relative;
	display:block;
	margin:0 auto
}
#SRworld-intro {
	position:relative;
	width:550px;
	height:450px;
	margin:80px auto 0
}
#SRworld-intro p {
	text-align:center;
	font-size:18px;
	color:#fff;
	letter-spacing:2px;
	margin:12px 0
}
#mask-p2p3 {
	position:absolute;
	width:100%;
	height:340px;
	background:url(img/mask-p2p3.png) no-repeat center;
	bottom:-110px;
	z-index:5
}
.p2bg-carousel {
	position:absolute!important;
	width:100%;
	height:950px;
	overflow:hidden;
	top:0;
	left:0;
	outline:none;
	z-index:0
}
#p2-particles {
	position:absolute;
	width:350px;
	height:100%;
	top:0;
	left:50%;
	transform:translateX(-50%);
	z-index:4
}
section.p3sec {
	height:950px;
	background:url(img/p3bg-front.jpg) no-repeat center;
	overflow:hidden
}
.p3content {
	position:relative;
	width:100%;
	height:calc(100% - 105px);
	margin:0 auto;
	z-index:4;
	padding-top:105px
}
#p3title {
	position:relative;
	display:block;
	margin:0 auto;
	z-index:10
}
.p3-bg-overlay {
	position:absolute;
	bottom:-30px;
	left:0;
	width:100%;
	height:248px;
	background:url(img/p3-bg-overlay.png) no-repeat center;
	z-index:6
}
.p3side-front {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%
}
a.ton-front {
	display:block;
	width:50%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	text-decoration:none;
	z-index:1
}
a.ton-front:hover {
	z-index:5
}
a.ton-front:hover .ton-front-chara {
	filter:brightness(130%);
	-webkit-filter:brightness(130%)
}
a.ton-front:hover .ton-front-intro {
	opacity:1
}
a.ton-front:hover .ton-front-mask {
	transform:skew(30deg)translateX(-20%)
}
a.ton-front:hover .ton-front-btn {
	opacity:1
}
a.ton-front:hover #ton-playbtn {
	opacity:1
}
.ton-front-chara {
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:960px;
	height:700px;
	background:url(img/p3-ton-front.html) no-repeat center;
	z-index:10;
	transition:.4s linear
}
.ton-front-btn {
	position:absolute;
	right:150px;
	top:57%;
	transform:translateY(-50%);
	width:180px;
	height:50px;
	line-height:50px;
	font-size:25px;
	letter-spacing:10px;
	font-weight:500;
	color:#fff;
	background-color:rgba(94,56,0,.8);
	text-align:center;
	opacity:0;
	transition:.3s linear
}
.ton-front-btn:hover {
	filter:brightness(130%);
	-webkit-filter:brightness(130%)
}
.ton-front-intro {
	position:relative;
	width:100%;
	height:100%;
	opacity:0;
	transition:.4s linear;
	z-index:5
}
.ton-front-intro img {
	display:block;
	position:relative;
	margin:80px auto 0
}
.ton-front-intro p {
	width:500px;
	position:relative;
	margin:10px auto;
	color:#dbcbb2;
	text-align:center;
	font-size:16px;
	line-height:30px
}
.ton-front-mask {
	position:absolute;
	top:0;
	left:0;
	width:1200px;
	height:100%;
	transform:skew(30deg)translateX(-120%);
	background-color:rgba(0,0,0,.6);
	transition:.4s linear;
	z-index:4
}
a.rom-front {
	display:block;
	width:50%;
	height:100%;
	position:absolute;
	right:0;
	top:0;
	text-decoration:none;
	z-index:1
}
a.rom-front:hover {
	z-index:5
}
a.rom-front:hover .rom-front-chara {
	filter:brightness(130%);
	-webkit-filter:brightness(130%)
}
a.rom-front:hover .rom-front-intro {
	opacity:1
}
a.rom-front:hover .rom-front-mask {
	transform:skew(-30deg)translateX(20%)
}
a.rom-front:hover .rom-front-btn {
	opacity:1
}
a.rom-front:hover #rom-playbtn {
	opacity:1
}
.rom-front-chara {
	display:block;
	position:absolute;
	bottom:0;
	right:0;
	width:960px;
	height:700px;
	background:url(img/p3-rom-front.html) no-repeat center;
	z-index:10;
	transition:.4s linear
}
.rom-front-btn {
	position:absolute;
	left:150px;
	top:57%;
	transform:translateY(-50%);
	width:180px;
	height:50px;
	line-height:50px;
	font-size:25px;
	letter-spacing:10px;
	font-weight:500;
	color:#fff;
	background-color:rgba(0,67,95,.8);
	text-align:center;
	opacity:0;
	transition:.3s linear
}
.rom-front-btn:hover {
	filter:brightness(130%);
	-webkit-filter:brightness(130%)
}
.rom-front-intro {
	position:relative;
	width:100%;
	height:100%;
	opacity:0;
	transition:.4s linear;
	z-index:5
}
.rom-front-intro img {
	display:block;
	position:relative;
	margin:80px auto 0
}
.rom-front-intro p {
	width:500px;
	position:relative;
	margin:10px auto;
	color:#dbcbb2;
	text-align:center;
	font-size:16px;
	line-height:30px
}
.rom-front-mask {
	position:absolute;
	top:0;
	right:0;
	width:1200px;
	height:100%;
	transform:skew(-30deg)translateX(120%);
	background-color:rgba(0,0,0,.6);
	transition:.4s linear;
	z-index:4
}
.p3ton-pop,.p3rom-pop {
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:10
}
.p3ton-pop .pop-close {
	right:5%;
	top:10%
}
.p3rom-pop .pop-close {
	left:5%;
	top:10%
}
.pop-close {
	display:block;
	outline:none;
	border:none;
	position:absolute;
	width:65px;
	height:65px;
	background:url(img/close-x.png) no-repeat center;
	background-size:contain;
	z-index:5;
	cursor:pointer;
	transition:.4s ease-in-out
}
.pop-close:hover {
	-webkit-transform:rotateZ(90deg);
	transform:rotateZ(90deg)
}
.p3ton-pop-tab,.p3rom-pop-tab {
	position:relative;
	width:calc(100% - 220px);
	height:100%;
	margin:0 auto;
	clear:left;
	z-index:3
}
ul.ton-nav {
	position:absolute;
	width:175px;
	padding:0;
	left:0;
	top:50%;
	transform:translateY(-50%);
	z-index:5
}
ul.rom-nav {
	position:absolute;
	width:175px;
	padding:0;
	right:0;
	top:50%;
	transform:translateY(-50%);
	z-index:5
}
ul.ton-nav li,ul.rom-nav li {
	position:relative;
	list-style:none;
	width:175px;
	height:35px;
	margin:25px 0
}
ul.ton-nav li:before {
	content:'';
	position:absolute;
	width:10px;
	height:10px;
	background-color:#fff;
	transform:rotateZ(45deg);
	right:-30px;
	top:14px
}
ul.rom-nav li:before {
	content:'';
	position:absolute;
	width:10px;
	height:10px;
	background-color:#fff;
	transform:rotateZ(45deg);
	left:-30px;
	top:14px
}
ul.ton-nav li.active a:before {
	right:0
}
ul.rom-nav li.active a:before {
	width:100%
}
ul.ton-nav li a {
	display:block;
	position:relative;
	width:100%;
	height:100%;
	text-decoration:none;
	color:#fff;
	font-size:24px;
	text-align:right;
	overflow:hidden;
	padding-right:10px
}
ul.rom-nav li a {
	display:block;
	position:relative;
	width:100%;
	height:100%;
	text-decoration:none;
	color:#fff;
	font-size:24px;
	text-align:left;
	overflow:hidden;
	padding-left:10px
}
ul.ton-nav li a:hover:before {
	right:0
}
ul.rom-nav li a:hover:before {
	width:100%
}
ul.ton-nav li a:before {
	content:'';
	background-color:#000;
	position:absolute;
	right:-185px;
	top:0;
	z-index:-1;
	width:100%;
	height:100%;
	transition:.3s linear
}
ul.rom-nav li a:before {
	content:'';
	background-color:#000;
	position:absolute;
	left:0;
	top:0;
	z-index:-1;
	width:0;
	height:100%;
	transition:.3s linear
}
.ton-tab-container,.rom-tab-container {
	clear:left;
	position:relative;
	width:100%;
	height:100%;
	z-index:4
}
.ton-tab-content,.rom-tab-content {
	position:relative;
	width:100%;
	height:100%
}
.ton-tab-chara {
	position:absolute;
	display:block;
	left:-200px;
	transform:translateX(-30px);
	animation:leftin .3s linear forwards
}
@keyframes leftin {
	0% {
	transform:translateX(-30px)
}
100% {
	transform:translateX(0px)
}
}.rom-tab-chara {
	position:absolute;
	display:block;
	right:-200px;
	transform:translateX(30px);
	animation:rightin .3s linear forwards
}
@keyframes rightin {
	0% {
	transform:translateX(30px)
}
100% {
	transform:translateX(0px)
}
}.ton-tab-intro {
	position:absolute;
	right:0;
	top:50%;
	width:450px;
	height:400px;
	transform:translateX(30px)translateY(-50%);
	animation:ton-tab-intro .3s linear forwards
}
@keyframes ton-tab-intro {
	0% {
	transform:translateX(30px)translateY(-50%)
}
100% {
	transform:translateX(0px)translateY(-50%)
}
}.rom-tab-intro {
	position:absolute;
	left:150px;
	top:50%;
	width:450px;
	height:400px;
	transform:translateX(-30px)translateY(-50%);
	animation:rom-tab-intro .3s linear forwards
}
@keyframes rom-tab-intro {
	0% {
	transform:translateX(-30px)translateY(-50%)
}
100% {
	transform:translateX(0px)translateY(-50%)
}
}.ton-tab-intro h1,.rom-tab-intro h1 {
	position:relative;
	color:#fff;
	font-size:72px;
	font-weight:700;
	letter-spacing:5px
}
.ton-tab-intro p,.rom-tab-intro p {
	position:relative;
	color:#fff;
	font-size:18px;
	font-weight:500;
	letter-spacing:5px;
	line-height:30px
}
ul.element-tab {
	position:relative;
	width:460px;
	height:55px;
	padding:0;
	margin-top:-20px;
	list-style:none
}
ul.element-tab li {
	position:relative;
	width:126px;
	height:54px;
	margin:0 20px 0 0;
	display:inline-block
}
ul.element-tab li a {
	display:block;
	width:100%;
	height:54px;
	text-decoration:none;
	line-height:54px;
	text-align:center;
	font-size:18px;
	letter-spacing:5px;
	color:#fff;
	background:url(img/default-kf-tab.png) no-repeat center
}
ul.element-tab li:hover #ele-ice {
	background:url(img/ice-kf-tab.png) no-repeat center
}
ul.element-tab li:hover #ele-thunder {
	background:url(img/elec-kf-tab.png) no-repeat center
}
ul.element-tab li:hover #ele-fire {
	background:url(img/fire-kf-tab.png) no-repeat center
}
ul.element-tab li.active #ele-ice {
	background:url(img/ice-kf-tab.png) no-repeat center
}
ul.element-tab li.active #ele-thunder {
	background:url(img/elec-kf-tab.png) no-repeat center
}
ul.element-tab li.active #ele-fire {
	background:url(img/fire-kf-tab.png) no-repeat center
}
.element-container {
	clear:left;
	position:relative;
	margin-top:10px;
	width:100%;
	height:100%
}
.p3ton-pop-bg,.p3rom-pop-bg {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:1
}
.p3ton-pop-bg-mask {
	position:absolute;
	display:block;
	right:0;
	top:0;
	z-index:2
}
.p3ton-pop-inbg {
	position:absolute;
	display:block;
	left:0;
	top:0;
	z-index:1
}
.p3rom-pop-bg-mask {
	position:absolute;
	display:block;
	left:0;
	top:0;
	z-index:2
}
.p3rom-pop-inbg {
	position:absolute;
	display:block;
	right:0;
	top:0;
	z-index:1
}
.playbtn {
	position:absolute;
	display:block;
	width:205px;
	height:205px;
	z-index:10;
	bottom:10%;
	transition:.3s ease-in-out;
	animation:play 2.5s linear infinite;
	cursor:pointer;
	opacity:0
}
#ton-playbtn {
	right:0;
	background:url(img/playbtn.png) no-repeat center
}
#rom-playbtn {
	left:0;
	background:url(img/playbtn-rom.png) no-repeat center
}
@keyframes play {
	0% {
	filter:brightness(100%)
}
25% {
	filter:brightness(120%)
}
50% {
	filter:brightness(100%)
}
75% {
	filter:brightness(120%)
}
100% {
	filter:brightness(100%)
}
}.playbtnc {
	z-index:-1;
	position:relative;
	display:block;
	margin:33px auto;
	animation:playc 4.5s linear infinite
}
@keyframes playc {
	0% {
	transform:rotateZ(0deg);
	filter:brightness(100%)
}
50% {
	transform:rotateZ(180deg);
	filter:brightness(180%)
}
100% {
	transform:rotateZ(360deg);
	filter:brightness(100%)
}
}.playbtn:hover {
	transform:scale(1.1,1.1);
	filter:brightness(120%)
}
section.p4sec {
	height:1033px;
	background:url(img/p4bg.png) no-repeat center;
	overflow:hidden;
	margin-top:-50px;
	z-index:15
}
.p4content {
	position:relative;
	width:1200px;
	height:calc(100% - 105px);
	margin:0 auto;
	z-index:4;
	padding-top:105px
}
#p4title {
	position:relative;
	display:block;
	margin:0 auto;
	z-index:10
}
.jobs-content {
	position:relative;
	width:1100px;
	height:500px;
	margin:200px auto 0;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	z-index:9
}
.knight-tab {
	position:relative;
	width:480px;
	height:100%;
	margin:0 10px;
	z-index:5;
	background:url(img/p4-knight-intro.png) no-repeat left bottom
}
.robber-tab {
	position:relative;
	width:480px;
	height:100%;
	margin:0 10px;
	z-index:5;
	background:url(img/p4-robber-intro.png) no-repeat right bottom
}
a.knight-btn {
	display:block;
	position:absolute;
	left:120px;
	top:0;
	width:132px;
	height:388px;
	background:url(img/p4-knight-btn.png) no-repeat center;
	transition:.3s linear
}
a.knight-btn:hover {
	-webkit-filter:brightness(130%);
	filter:brightness(130%)
}
a.robber-btn {
	display:block;
	position:absolute;
	right:120px;
	top:0;
	width:132px;
	height:388px;
	background:url(img/p4-robber-btn.png) no-repeat center;
	transition:.3s linear
}
a.robber-btn:hover {
	-webkit-filter:brightness(130%);
	filter:brightness(130%)
}
.pulsedot {
	position:absolute;
	width:25px;
	height:25px;
	border-radius:50%;
	display:inline-block;
	background-color:rgba(255,255,255,.6);
	animation:pulsedot 1s linear infinite
}
@keyframes pulsedot {
	0% {
	box-shadow:0 0 0 10px #eee,0 0 0 12px #eee
}
70% {
	box-shadow:0 0 0 10px transparent,0 0 0 20px transparent;
	transform:scale(1)
}
100% {
	background-color:lighten(#e8e8e8,20%);
	transform:scale(1.3)
}
}.knight-btn .pulsedot {
	right:-10%;
	top:30%
}
.robber-btn .pulsedot {
	left:-10%;
	top:60%
}
.knight-imgs {
	position:absolute;
	z-index:0;
	width:580px;
	height:600px;
	left:-300px;
	top:-300px;
	display:none
}
.robber-imgs {
	position:absolute;
	z-index:0;
	width:580px;
	height:600px;
	right:-300px;
	top:-300px;
	display:none
}
.knight-imgs img,.robber-imgs img {
	position:relative;
	display:block
}
.knight-imgs-1 {
	float:right
}
.knight-imgs-2 {
	float:left;
	margin-top:20px
}
.robber-imgs-1 {
	float:left
}
.robber-imgs-2 {
	float:right;
	margin-top:20px
}
#p4-particles {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:50%;
	transform:translateX(-50%);
	z-index:0
}
section.p5678sec {
	height:3849px;
	background:url(img/p5678-bg.jpg) no-repeat center;
	overflow:hidden;
	z-index:15
}
div.p5sec {
	position:relative;
	width:100%;
	height:900px
}
.p5content {
	position:relative;
	width:1540px;
	height:calc(100% - 55px);
	margin:0 auto;
	z-index:4;
	padding-top:55px
}
#p5title {
	position:relative;
	display:block;
	margin:0 auto;
	z-index:10
}
.p5-tab {
	position:relative;
	width:100%;
	height:630px;
	margin:20px auto 0
}
ul.monster-tab {
	list-style:none;
	padding:0;
	position:relative;
	width:825px;
	height:70px;
	display:flex;
	flex-wrap:wrap;
	margin:0 auto;
	left:250px
}
ul.monster-tab li {
	position:relative;
	height:70px;
	margin-right:10px
}
ul.monster-tab li.active a {
	border-bottom:5px solid #000;
	filter:brightness(120%);
	-webkit-filter:brightness(120%)
}
ul.monster-tab li:hover a {
	border-bottom:5px solid #000;
	filter:brightness(120%);
	-webkit-filter:brightness(120%)
}
ul.monster-tab li:nth-child(odd) {
	width:236px
}
ul.monster-tab li:nth-child(even) {
	width:156px
}
ul.monster-tab li a {
	position:relative;
	display:block;
	width:100%;
	height:70px
}
#monster-tab-1 {
	background:url(img/p5tab01.jpg) no-repeat center
}
#monster-tab-2 {
	background:url(img/p5tab02.jpg) no-repeat center
}
#monster-tab-3 {
	background:url(img/p5tab03.jpg) no-repeat center
}
#monster-tab-4 {
	background:url(img/p5tab04.jpg) no-repeat center
}
.p5-monster-container {
	position:relative;
	width:100%;
	height:560px
}
.p5-monster-content {
	position:relative;
	width:1380px;
	margin:0 auto;
	height:100%;
	display:flex;
	flex-wrap:wrap
}
.monster-img {
	position:relative;
	display:block;
	width:540px;
	height:551px;
	padding:2px 0;
	margin-right:40px;
	animation:mon-img 1.8s ease-in-out infinite,leftin .3s linear forwards
}
@keyframes mon-img {
	0% {
	filter:brightness(100%);
	-webkit-filter:brightness(100%)
}
50% {
	filter:brightness(130%);
	-webkit-filter:brightness(130%)
}
100% {
	filter:brightness(100%);
	-webkit-filter:brightness(100%)
}
}.monster-intro {
	position:relative;
	width:800px;
	height:100%;
	opacity:0;
	animation:bottomfadein .4s ease-in-out forwards
}
@keyframes bottomfadein {
	0% {
	transform:translateY(30px);
	opacity:0
}
100% {
	transform:translateY(0px);
	opacity:1
}
}.monster-intro h2 {
	font-size:60px;
	font-weight:700;
	letter-spacing:10px;
	text-align:left
}
#mon-intro-1 h2 {
	color:#c573ff
}
#mon-intro-1 p.monster-show {
	color:#c573ff
}
#mon-intro-2 h2 {
	color:#cfff73
}
#mon-intro-2 p.monster-show {
	color:#cfff73
}
#mon-intro-3 h2 {
	color:#73ffed
}
#mon-intro-3 p.monster-show {
	color:#73ffed
}
#mon-intro-4 h2 {
	color:#ff7373
}
#mon-intro-4 p.monster-show {
	color:#ff7373
}
.monster-intro p {
	font-size:20px;
	color:#fff;
	letter-spacing:7px;
	line-height:30px;
	text-align:left
}
p.monster-show span {
	font-weight:700
}
.monster-img-s {
	position:relative;
	width:720px;
	height:100px;
	display:flex;
	flex-wrap:wrap
}
.moster-img-s-in {
	position:relative;
	width:220px;
	height:100px;
	margin-right:20px
}
div.p6sec {
	position:relative;
	width:100%;
	height:948px;
	margin-top:60px;
	background:url(img/rollbg.png) no-repeat center
}
div.p6sec:before {
	content:'';
	position:absolute;
	width:262px;
	height:1064px;
	left:0;
	top:-70px;
	z-index:5;
	background:url(img/leftroll.png) no-repeat center
}
div.p6sec:after {
	content:'';
	position:absolute;
	width:262px;
	height:1064px;
	right:0;
	top:-70px;
	z-index:5;
	background:url(img/rightroll.png) no-repeat center
}
.p6content {
	position:relative;
	width:1460px;
	height:calc(100% - 75px);
	margin:0 auto;
	z-index:4;
	padding-top:75px
}
#p6title {
	position:relative;
	display:block;
	margin:0 auto;
	z-index:10
}
#ship {
	position:absolute;
	bottom:50px;
	left:50%;
	z-index:2;
	display:block
}
.p6tab-1 {
	position:absolute!important;
	top:0;
	width:100%;
	height:100%
}
.p6tab-1-in {
	position:absolute!important
}
a.p6tab-img {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	transition:.4s linear
}
#p6tab01 {
	width:690px;
	height:521px;
	top:0;
	left:0
}
#p6tab01 a {
	background:url(img/p6tab01.png) no-repeat top left
}
#p6tab01 a:hover {
	background:url(img/p6tab01on.png) no-repeat top left
}
#p6tab02 {
	width:785px;
	height:526px;
	top:0;
	right:0
}
#p6tab02 a {
	background:url(img/p6tab02.png) no-repeat top right
}
#p6tab02 a:hover {
	background:url(img/p6tab02on.png) no-repeat top right
}
#p6tab03 {
	width:868px;
	height:469px;
	bottom:90px;
	left:0
}
#p6tab03 a {
	background:url(img/p6tab03.png) no-repeat bottom left
}
#p6tab03 a:hover {
	background:url(img/p6tab03on.png) no-repeat bottom left
}
#p6tab04 {
	width:884px;
	height:484px;
	bottom:93px;
	right:0
}
#p6tab04 a {
	background:url(img/p6tab04.png) no-repeat bottom right
}
#p6tab04 a:hover {
	background:url(img/p6tab04on.png) no-repeat bottom right
}
.p6tab-2 {
	display:none;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:5;
	width:1200px;
	height:710px;
	background:url(img/p6lboxbg.png) no-repeat center
}
.p6tab-close {
	display:block;
	outline:none;
	border:none;
	position:absolute;
	width:45px;
	height:45px;
	background:url(img/close-x.png) no-repeat center;
	background-size:contain;
	z-index:5;
	cursor:pointer;
	transition:.4s ease-in-out;
	right:60px;
	top:60px
}
.p6tab-close:hover {
	-webkit-transform:rotateZ(90deg);
	transform:rotateZ(90deg)
}
.p6tab-2-content {
	clear:left;
	position:relative;
	width:1060px;
	height:545px;
	margin:0 auto;
	padding-top:55px
}
.p6tab-2-in {
	position:relative;
	opacity:0;
	width:100%;
	height:100%;
	transition:.4s linear;
	display:none
}
.p6tab-2-in.active {
	display:block;
	animation:p2tab-2-in ease-in-out .8s forwards
}
@keyframes p2tab-2-in {
	0% {
	opacity:0
}
100% {
	opacity:1
}
}.p6tab-2-in h1 {
	position:relative;
	text-align:center;
	font-size:72px;
	letter-spacing:5px;
	color:#fff;
	margin:0
}
.tab-line {
	position:relative;
	display:block;
	width:301px;
	height:18px;
	margin:5px auto;
	background:url(img/tab-line.png) no-repeat center
}
.war-tab-in {
	position:relative;
	display:flex;
	flex-wrap:wrap;
	width:100%;
	margin:50px auto 0
}
.war-tab-in-left,.war-tab-in-right {
	position:relative;
	width:500px;
	margin:0 15px
}
.war-tab-in-left {
	height:330px
}
.war-tab-in-left .slick-track {
	margin:0!important
}
.war-tab-in-left img {
	position:relative;
	display:block;
	left:0;
	margin:0 auto
}
.war-tab-in-left .slick-dots {
	position:absolute;
	bottom:0;
	right:0;
	list-style:none;
	margin:0 auto;
	text-align:center
}
.war-tab-in-left .slick-dots .slick-active {
	position:relative
}
.war-tab-in-left .slick-dots li {
	display:inline-block
}
.war-tab-in-left .slick-dots li.slick-active button {
	background-color:#f8b551
}
.war-tab-in-left .slick-dots li button {
	transition:.2s background-color ease-in-out 0s;
	border:none;
	padding:0;
	color:transparent;
	width:20px;
	height:20px;
	background-color:#59493f;
	margin-left:10px;
	cursor:pointer;
	display:block
}
.war-tab-in-right p {
	color:#fff;
	font-size:20px;
	line-height:30px;
	letter-spacing:5px;
	margin:0 0 10px
}
.war-tab-in-right p span {
	color:#ec8f17;
	font-weight:700
}
.p6tab-prev {
	outline:none;
	border:none;
	display:block;
	position:absolute;
	left:-100px;
	top:50%;
	transform:translateY(-50%);
	width:61px;
	height:124px;
	background:url(img/arrowl.png) no-repeat center;
	cursor:pointer;
	transition:.4s ease-in-out
}
.p6tab-prev:hover {
	filter:brightness(130%);
	-webkit-filter:brightness(130%)
}
.p6tab-next {
	outline:none;
	border:none;
	display:block;
	position:absolute;
	right:-100px;
	top:50%;
	transform:translateY(-50%);
	width:61px;
	height:124px;
	background:url(img/arrowr.png) no-repeat center;
	cursor:pointer;
	transition:.4s ease-in-out
}
.p6tab-next:hover {
	filter:brightness(130%);
	-webkit-filter:brightness(130%)
}
div.p7sec {
	position:relative;
	width:100%;
	height:950px
}
.p7content {
	position:relative;
	width:1200px;
	height:calc(100% - 75px);
	margin:0 auto;
	z-index:4;
	padding-top:75px
}
#p7title {
	position:relative;
	display:block;
	margin:0 auto;
	z-index:10
}
.p7tab {
	position:relative;
	width:1000px;
	height:600px;
	margin:30px auto 0
}
.p7tabin {
	position:relative;
	width:1000px;
	height:600px
}
.p7tabin-left {
	position:relative;
	width:450px;
	height:100%;
	float:left;
	padding-left:50px
}
.p7tabin-left-img {
	position:relative;
	width:400px;
	height:350px;
	margin:100px auto 0
}
.p7tabin-right {
	position:relative;
	width:450px;
	height:100%;
	float:right;
	padding-right:50px
}
.p7tabin-right-title {
	position:relative;
	display:block;
	margin:100px auto 0
}
.p7tabin-right p {
	width:380px;
	position:relative;
	margin:20px auto;
	font-size:20px;
	line-height:40px;
	text-align:left;
	color:#fff
}
.note {
	font-size:14px;
	color:#fff
}
.p7note {
	display:block;
	color:#c42d2d;
	margin-left:20px
}
.arrowleft-s {
	position:absolute;
	display:block;
	left:0;
	top:55%;
	transform:translateY(-50%);
	cursor:pointer;
	transition:.3s linear
}
.arrowright-s {
	position:absolute;
	display:block;
	right:0;
	top:55%;
	transform:translateY(-50%);
	cursor:pointer;
	transition:.3s linear
}
.arrowleft-s:hover,.arrowright-s:hover {
	filter:brightness(130%);
	-webkit-filter:brightness(130%)
}
.p7tab .slick-dots {
	position:absolute;
	top:30px;
	right:50px;
	list-style:none;
	margin:0 auto;
	text-align:center
}
.p7tab .slick-dots li {
	display:inline-block
}
.p7tab .slick-dots li button {
	transition:.2s background-color ease-in-out 0s;
	border:none;
	padding:0;
	color:transparent;
	width:20px;
	height:20px;
	background-color:#59493f;
	margin-right:10px;
	cursor:pointer
}
.p7tab .slick-dots li.slick-active button {
	background-color:#f8b551
}
.p7tab .slick-dots .slick-active {
	position:relative
}
.applegreen {
	color:#546500
}
.dirtyyellow {
	color:#978300
}
div.p8sec {
	position:relative;
	width:100%;
	height:950px
}
.p8content {
	position:relative;
	width:100%;
	height:550px;
	margin:165px auto 0;
	z-index:4;
	padding-top:50px;
	background-color:rgba(0,0,0,.8)
}
#p8title {
	position:relative;
	display:block;
	margin:0 auto;
	z-index:10
}
.p8content-in {
	position:relative;
	width:1400px;
	height:360px;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap
}
.p8news {
	position:relative;
	width:560px;
	height:360px;
	background:url(img/p8newsbg.png) no-repeat center bottom;
	margin-right:60px;
	padding:0 20px
}
.news-content {
	position:relative;
	width:100%;
	height:100%
}
.news-tab {
	list-style:none;
	position:relative;
	width:100%;
	height:40px;
	margin:0;
	padding:0;
	margin-left:15px
}
.news-tab li {
	position:relative;
	display:inline-block;
	width:120px;
	height:40px;
	float:left;
	cursor:pointer;
	margin-right:5px;
	vertical-align:top;
	transition:.2s linear
}
#news-tab-1 {
	background-image:url(img/news-tab-1-on.png);
	background-repeat:no-repeat;
	background-position:center
}
#news-tab-2 {
	background-image:url(img/news-tab-2-on.png);
	background-repeat:no-repeat;
	background-position:center
}
#news-tab-3 {
	background-image:url(img/news-tab-3-on.png);
	background-repeat:no-repeat;
	background-position:center
}
.news-tab #news-tab-1:hover {
	background-image:url(img/news-tab-1.png)
}
.news-tab #news-tab-2:hover {
	background-image:url(img/news-tab-2.png)
}
.news-tab #news-tab-3:hover {
	background-image:url(img/news-tab-3.png)
}
.news-tab #news-tab-1.active {
	background-image:url(img/news-tab-1.png)
}
.news-tab #news-tab-2.active {
	background-image:url(img/news-tab-2.png)
}
.news-tab #news-tab-3.active {
	background-image:url(img/news-tab-3.png)
}
.news-hot {
	position:relative;
	width:100%;
	height:70px;
	border-bottom:1px solid #73583c
}
.news-hot-in {
	position:relative;
	width:100%;
	height:70px
}
.news-hot-in p img {
	position:relative;
	float:left;
	margin-top:15px
}
.news-hot-in p {
	position:relative;
	width:100%;
	font-size:24px;
	color:#fff;
	margin:0;
	text-align:left;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	margin-top:10px
}
.news-hot-in p a {
	text-decoration:none;
	color:#fff
}
.news-hot-in p a:hover {
	color:#e7b987
}
.news-hot-in span {
	position:absolute;
	width:300px;
	display:block;
	font-size:18px;
	color:#ecd19d;
	margin:0;
	text-align:right;
	padding-right:10px;
	right:0;
	bottom:5px
}
.news-list-container {
	clear:left;
	position:relative;
	width:100%;
	height:auto
}
.news-list {
	position:relative;
	width:100%;
	height:100%
}
.news-list ul {
	position:relative;
	list-style:none;
	width:100%;
	height:100%;
	padding:0;
	margin:0
}
.news-list ul li {
	position:relative;
	width:100%;
	height:30px;
	line-height:30px;
	margin-top:1px
}
.news-list ul li a {
	position:relative;
	width:400px;
	height:30px;
	display:block;
	float:left;
	text-align:left;
	text-decoration:none;
	color:#fff;
	font-size:16px;
	line-height:26px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis
}
.news-list ul li a:hover {
	color:#e7b987
}
.news-list ul li span {
	position:relative;
	display:block;
	float:right;
	color:#fff;
	font-size:16px;
	line-height:30px;
	margin-right:10px
}
.p8fastlink {
	position:relative;
	width:700px;
	height:360px
}
.p8fastlink a {
	display:block;
	position:absolute;
	width:237px;
	height:231px;
	transition:.3s linear
}
.p8bahalink {
	top:40px;
	left:0;
	background:url(img/p8baha-icn.png) no-repeat center
}
.p8ytlink {
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background:url(img/p8yt-icn.png) no-repeat center
}
.p8fblink {
	top:40px;
	right:0;
	background:url(img/p8fb-icn.png) no-repeat center
}
.p8fastlink a:hover {
	filter:brightness(140%);
	-webkit-filter:brightness(140%)
}
.footer {
	position:relative;
	background-color:#000;
	width:100%;
	height:100px;
	font-size:12px;
	z-index:1;
	bottom:0;
	min-width:1400px
}
.footer .footerwrap {
	width:1000px;
	padding:20px 0;
	margin:0 auto;
	color:#fff;
	display:flex;
	justify-content:space-between;
	align-items:center
}
.digeam {
	background:url(img/digeamlogo.html);
	background-position:left top;
	background-repeat:no-repeat;
	background-size:contain;
	width:133px;
	height:32px;
	text-indent:-9999px;
	display:block
}
.joymax {
	background:url(img/joymax.png);
	background-position:left top;
	background-repeat:no-repeat;
	background-size:contain;
	width:200px;
	height:70px;
	text-indent:-9999px;
	display:block
}
.DGcopy a {
	color:#e5be7b
}
.DGcopy a:hover {
	color:#fff
}
.grade {
	width:325px;
	display:flex;
	justify-content:space-between
}
.grade>ul {
	padding:0;
	margin:0;
	list-style:none
}