@charset "utf-8";
/* CSS Document */
.hall{
	position: relative;
	width: 100%;
	overflow: hidden;
	}
.hcon{width:100%;height:100vh;height: calc(var(--vh, 1vh) * 100);/*background-color:#fff;*/}
.hcon > .swiper-wrapper > .swiper-slide{
     width: 100%;
     height:100vh;
	 height:calc(var(--vh, 1vh) * 100);
	 overflow:hidden;
	background-color:#161b28;/**/
	}
.hcon > .swiper-wrapper > .swiper-slide#cy{height:auto;background:#000;}

.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .hnewsbx,
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .hstorybx,
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .mapbx,
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .hmediabx,
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .hsystembx{
	transform:scale(1);
	opacity:1;
	}
.hnewsbx::before,.hstorybx::before,.mapbx::before,.hmediabx::before,.hsystembx::before{
	position:absolute;
  	content: "";
  	width: 100%;
  	height: 100%;
  	display: block;
	pointer-events: none;
	left:0%;
	top:0%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 100%,100% 100%;
	background-image:url(../images/pg_bc_f.png),url(../images/pg_bc_r.png);
	background-size:5.9vw auto;/*118*/
	z-index: 2;
	}
.hnewsbx,.hstorybx,.hmediabx,.hsystembx{
	position:relative;
    width: 100%;
    height:100vh;
	height:calc(var(--vh, 1vh) * 100);
	overflow:hidden;
	/**/
	background-attachment:scroll;
	background-repeat:no-repeat;
	/**/
	transform: scale(1.5);
	opacity:0;
	/**/
	transition: transform .8s , opacity 1.2s;
	}
/*HOME*/
.homev{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 0;
	}
.homev .swiper-slide{
	width: 100%;
	height: 100%;
	overflow:hidden;
	}
.homev .swiper-slide video{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	}
.bx_w{width:100%;height:auto;}
.bx_h{width:auto;height:100%;}
.vdpbx{
	position:absolute;
	width:6.55%;/*131*/
	padding-bottom:2.75%;/*55*/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/vdp.png);
	background-size:100% auto;
	right:9.6%;/*192*/
	bottom:3.3% ;/*33*/
	z-index: 10;/*3 13 29*/
	/**/
  	-webkit-filter: drop-shadow(0 .1vw .8vw rgba(3, 13, 29, .8));/*10 30*/
  	filter: drop-shadow(0 .1vw .8vw rgba(3, 13, 29, .8));
	}
.vdpbx .swiper-button-next{
  	background-image:url(../images/vdp_r.png);
  	right:0;
  	left: auto;
	}
.swiper-button-prev{
  	background-image:url(../images/vdp_f.png);;
  	left:0;
  	right: auto;
	}
.vdpbx .swiper-button-next.vdp_r,.vdpbx .swiper-button-prev.vdp_f{
  	top: 0;
  	width:50%;
  	height:100%;
  	margin-top:0;
  	background-size:100% auto;
	}


/**/
.hbg{
	position: absolute;
	width: 100%;
	height: 100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	top: 0;
	left: 0;
	}
.gtbt{
	position: absolute;
	width:9.1%;/*182*/
	padding-bottom:7.1%;/*142*/
	left: 50%;
	bottom: -2.5%;
	transform: translateX(-50%);
	}
.gtbt::before{
	position:absolute;
	width: 100%;
	height: 100%;
	content:"";
	display: block;
	left: 0;
	bottom: 0;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 100%;
	background-image: url(../images/goto.png);
	background-size:100% auto;
	}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .gtbt::before{
	animation: tp 1s linear infinite;
	}
.slogan{
	position:absolute;
	width:64.2%;/*1284*/
	padding-bottom:12.6%;/*252*/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 50%;
	background-image: url(../images/slogan.png);
	background-size:100% auto;
	left: 50%;
	top:43%;
	opacity: 0;
	transform:translate(-50%,-50%)scale(1.5);
	/**/
	transition: transform 1s , opacity 1.5s;
	}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .slogan{
	opacity:1;/**/
	transform:translate(-50%,-50%)scale(1);
	}
.playbt{
	position:absolute;
	width:9.19%;/*118*/
	padding-bottom:9.19%;/*118*/
	display: block;
	cursor: pointer;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 50%;
	background-image: url(../images/play.png);
	background-size:100% auto;
	left: 50%;
	top:80%;
	transform:translateX(-50%);
	/**/
	transition: transform .8s;
	/**/
  	-webkit-filter: drop-shadow(0 .5vw 1.5vw rgba(29, 49, 65, .5));/*10 30*/
  	filter: drop-shadow(0 .5vw 1.5vw rgba(29, 49, 65, .5));
	}
.playbt::before{
	position:absolute;
	width: 100%;
	height: 100%;
	content:"";
	display: block;
	left: 0;
	bottom: 0;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 100%;
	background-image: url(../images/play2.png);
	background-size:100% auto;
	}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .playbt::before{
	animation: rotate 5s linear infinite;
	}
.dwbx{
	position: absolute;
	width:50%;
	left: 50%;
	bottom:10.7%;/*117*/
	text-align: center;
	opacity:0;
	transform:translateX(-50%)scale(1.5);
	/**/
	transition: transform .8s , opacity 1s;
	}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .dwbx{
	opacity:1;
	transform:translateX(-50%)scale(1);
	}
.dwbx a{
	position: relative;
	width:23%;/*230*/
	margin: 0 .5%;/*5*/
	display:inline-block;
	background-color:#000;
	border-radius:.75vw;/*15*/
	border:.1vw solid #fff;/*2*/
	overflow: hidden;
	/**/
	transition: all .5s;
	}
.dwbx a:hover{background-color:#17243c;}
.dwbx a::before{
	position: relative;
	width:100%;
	padding-bottom:31.739%;/*73*/
	content:"";
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	}
.dwbx a.ios::before{background-image:url(../images/ios.png);}
.dwbx a.google::before{background-image:url(../images/google.png);}
.dwbx a.mycard::before{background-image:url(../images/mycard.png);}


/*最新消息*/
.hnewsbx{
  	background-position: 50% 0%;
  	background-image: url(../images/newsbg.jpg);
	}
.p2_1{
	position:absolute;
	width:51.5%;/*1030*/
	padding-bottom:52.5%;/*1050*/
	display:block;
	pointer-events: none;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 100%;
	background-image: url(../images/p2_1.png);
	background-size:100% auto;
	left:0;
	bottom:0;
	opacity:0;/**/
	transform:scale(1.8);
	/**/
	transition: transform 1s , opacity 1.5s;
	}	
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .p2_1{
	opacity:1;/**/
	transform:scale(1);
	}
.nwbnbx{
	position:absolute;
	width:59%;/*1180*/
	top:3.2vw;/*76 3.8*/
	left:20.5%;
	transform:scale(1.5);
	z-index: 1;
	/**/
	transition: transform .8s , opacity 1.3s;
	/**/
  	-webkit-filter: drop-shadow(0 .5vw 1vw rgba(83, 119, 197, 1));/*10 20*/
  	filter: drop-shadow(0 .5vw 1vw rgba(83, 119, 197, 1));
	}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .nwbnbx{
	transform:scale(1);
	}
.nwbn{
	position:relative;
	width:88.98%;/*1050*/
	margin:0 auto;
	}
.nwbn .swiper-slide > a{
	position:relative;
	width: 94.285%;/*330 / 350*/
	padding-bottom:42.856%;/*150*/
	display: block;
	margin: 0 auto;
	border: .1vw solid #688ac6;/*2*/
	background-color:#688ac6;
	overflow:hidden;
	}
.nwbn .swiper-slide > a img{
	position:absolute;
	width:100%;
	display:block;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	}
.nwbnbx .swiper-button-next.nsbnext,.nwbnbx .swiper-button-prev.nsbprev{
  	top:50%;
  	width:4.237%;/*50*/
  	height:auto;/*50*/
  	padding-bottom:4.237%;
  	margin-top:auto;
  	cursor: pointer;
  	background-size:100% auto;
	transform:translateY(-50%);
	}
.nwbnbx .swiper-button-prev.nsbprev{
  	background-image:url(../images/nwbn_f.png);
  	left:0%;
	}
.nwbnbx .swiper-button-next.nsbnext{
  	background-image:url(../images/nwbn_r.png);
  	right:0%;
	}
.hc_con_n{
  	position: absolute;
  	width: 100%;
  	height: calc(100vh - 11.55vw);/*227 11.35*/
  	height: calc((var(--vh, 1vh) * 100) - 11.55vw);
  	bottom: 0;
  	left: 0;
	/**/
	transform: scale(1.5);
	opacity: 0;
	transition: transform 1s , opacity 1.8s;
	}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .hc_con_n{
	opacity:1;/**/
	transform:scale(1);
	}
	
.nwbx_1{
	position:absolute;
	width:100%;
	padding-bottom:38.65%;/*773*/
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	}
.nwbx_1a{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 100%;
	background-image: url(../images/nwbx_1.png);
	background-size:100% auto;
	top:0;
	left:0;
	/**/
  	-webkit-filter: drop-shadow(0 .25vw 2.5vw rgba(68, 91, 166, .8));/*5 50*/
  	filter: drop-shadow(0 .25vw 2.5vw rgba(68, 91, 166, .8));
	}
.nwbx_1a .nwconbx{
	position:relative;
	width:55.25%;/*1105*/
	height:27.75vw;/*555*/
	margin:0 auto;
	overflow: auto;
	/*background-color:#0C6;*/
	}
.nwbx_1a .nmor{
	position: absolute;
	width:25%;/*500*/
	left:22.375%;
	bottom: 4.8vw;
	text-align: center;
	z-index: 1;
	}
.nwbx_1a .nmor a{
	position: relative;
	width:47.2%;/*236*/
	display:inline-block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/nw_mor1.png);
	background-size:100% auto;
	}
.nwbx_1a .nmor a::before{
	position: relative;
	width: 100%;
	padding-bottom:16.949%;/*40*/
	content:"";
	display: block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/nw_mor1a.png);
	background-size:100% auto;
	opacity: 0;
	transition: all .5s;
	}
.nwbx_1a .nmor a:hover::before{opacity: 1;}
.nwbx_1a .nwconbx .nwc1,.nwbx_1a .nwconbx .nwc2{
	position:relative;
	width:45.248%;/*500*/
	display:block;
	}
.nwbx_1a .nwconbx .nwc1{float:left;}
.nwbx_1a .nwconbx .nwc1 > li{
	position: relative;
	/*width:100%;*/
	padding:.35vw .9vw 0;/*7  18*/
	margin-top:.45vw;/*9*/
	display: block;
	border-radius:.25vw;/*5*/
	}
.nwbx_1a .nwconbx .nwc1 > li a{display:block;}
.nwbx_1a .nwconbx .nwc1 > li:first-of-type{margin-top:0;}
.nwbx_1a .nwconbx .nwc1 > li.on{
	background-image: url(../images/nbg.png);
	}
.nwbx_1a .nwconbx .nwc1 > li.on::before{
	position: absolute;
	width:1.25vw;/*25*/
	height:2vw;/*40*/
	content:"";
	display: block;
	pointer-events: none;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-image: url(../images/nw_im.png);
	background-size:100% auto;
	right:.9vw;/*18*/
	top: 0;
	/**/
  	 -webkit-filter: drop-shadow(0px .25vw .25vw rgba(0, 0, 0, .2));/**/
  	filter: drop-shadow(0px .25vw .25vwx rgba(0, 0, 0, .2));
	}
.nwbx_1a .nwconbx .nwc1 > li::after{
	position: absolute;
	width: 100%;
	height: 100%;
	content:"";
	display: block;
	pointer-events: none;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-image: url(../images/s1.png);
	background-size:100% auto;
	left: 0;
	bottom: 0;
	}
.nwbx_1a .nwconbx .nwc1 > li .time{
	position: relative;
	font-size:.8vw;/*16*/
	line-height:1.35vw;/*27*/
	color:#666e85;
	display: flex;
  	flex-wrap: nowrap;
	align-items:center;
	}
.nwbx_1a .nwconbx .nwc1 > li .time > p{
	position: relative;
	width:4.4vw;/*88*/
	padding-bottom:1.35vw;/*27*/
	display: inline-block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	margin-right:.5vw;/*10*/
	}
.nws_g{background-image: url(../images/nws_g.png);}
.nws_a{background-image: url(../images/nws_a.png);}
.nws_s{background-image: url(../images/nws_s.png);}
.nws_r{background-image: url(../images/nws_r.png);}

.nwbx_1a .nwconbx .nwc1 > li .dtc{
	position: relative;
	font-size:.9vw;/*18*/
	line-height:1.9vw;/*38*/
	height:1.9vw;/*38*/
	color:#383d4a;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-left:.35vw ;/*7*/
	}
.nwbx_1a .nwconbx .nwc1 > li:hover .dtc{color:#335d9b;}

.nwbx_1a .nwconbx .nwc2{
	float:right;
	height:27vw;/**/
	/*padding-bottom:48.86784%;540*/
	/*border: .1vw solid #a4b0d6;*//*2*/
	}
.nwbx_1a.on .nwconbx .nwc1{display:block;}
.nwbx_1a.on .nwconbx .nwc2{display:block;}
.nwbx_1a .nwconbx .nwc2 > .fbx{
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	top: 0;
	left: 0;
	overflow: hidden;
	}


.nw_bt{
	position:relative;
	width:55.25%;/*1105*/
	margin:0 auto;
	/**/
	display:flex;
	flex-wrap:nowrap;
	}
.nw_bt .nwb1,.nw_bt .nwb2{
	position:relative;	
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	}
.nw_bt .nwb1,.nwbx_1a.on .nwb1{
	width:49.954%;/*552*/
	padding-bottom:12.217%;/*135*/
	background-image: url(../images/nw_bt_01.png);
	}
.nw_bt .nwb2,.nwbx_1a.on .nwb2{
	width:50.045%;/*553*/
	padding-bottom:12.217%;/*135*/
	background-image: url(../images/nw_bt_02.png);
	}	
	
.np1{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	pointer-events: none;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 100%;
	background-image: url(../images/nwbx_1a.png);
	background-size:100% auto;
	left:0;
	bottom:0;
	}
	
	
		
	
/*世界觀*/
.hstorybx{
  	background-position: 50% 0%;
  	background-image: url(../images/storybg.jpg);
	}

.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .worldbx{transform:scale(1);opacity:1;}
.worldbx{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	/**/
	transform:scale(1.5);
	opacity:0;
	transition: transform 1s , opacity 1.8s;
	}	
.wbk{
	position:absolute;
	width:75.6%;/*1512*/
	/*height:39.95vw;799*/
	display:block;
	left:50%;
	top:49%;
	transform: translate(-50%,-50%);
	/**/
  	-webkit-filter: drop-shadow(0 0 2.5vw rgba(0, 0, 0, .5));/*50*/
  	filter: drop-shadow(0 0 2.5vw rgba(0, 0, 0, .5));
	/**/
	transition: all .5s;
	}
.wbk::before{
	position: relative;
	width:100%;/*1512*/
	padding-bottom:52.843%;/*799*/
	content:"";
	display: block;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/wbk.png);
	background-size:100% auto;
	/**/
	transition: all .5s;
	}
.wbk::after{
	position:absolute;
	content:"";
	width:18.518%;/*280 14vw*/
	/*height:28vw;560*/
	padding-bottom:37.036%;
	display: block;
	pointer-events:none;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/pen.png);
	background-size:100% auto;
	bottom:-3.37%;/*27 -1.35vw*/
  	left:-7.275%;/*110 -5.5vw*/
	}
.wbk .wk_1{
	position:absolute;
	width:100%;
	padding:4.69% 0 0;/*71 3.55vw 4.69%*/
	text-align:center;
	top:0;
	left:0;
	}
.wbk .wk_1 > span{
	position:relative;
	width:72.949%;/*1103*/
	display:inline-block;
	}
.wphk{
	position:relative;
	width:100%;/*1103 55.15vw*/
	height:33vw;/*465*/
	margin:0 auto;
	}
.wbk .swiper-button-next,.wbk .swiper-button-prev {
    top:50%;
    width: 4%;/*45 2.15vw  43*/
    height: auto;/*80 3.8vw 76*/
	padding-bottom:7.1%;
    margin-top:0;
    transform: translateY(-50%);
    background-size: 100% auto;
	}	
.wbk .swiper-button-next{
    background-image: url(../images/r_bt2.png);
    right:-5.4%;/*60 -3vw*/
	}
.wbk .swiper-button-prev{
    background-image: url(../images/l_bt2.png);
    left:-5.4%;/*60 -3vw*/
	}
.wpbx{
	position:relative;
	width:100%;/*1103 55.15vw*/
	padding-bottom:42.157%;/*465 23.25vw*/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/w_pbx_1.jpg);
	background-size:100% 100%;
	/**/
	transition: all .8s;
	}
.wpbx::after{
	position:absolute;
	content:"";
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/w_pbx_2.png);
	background-size:100% 100%;/*auto*/
	top:0;
	left:0;
	/**/
	transition: all .5s;
	}
.wpbx > div{
	position:absolute;
	width:calc(100% - 0.8vw);/*8*/
	height:calc(100% - 0.8vw);/*8*/
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	border: 2px solid #ceb163;/*2 0.1vw*/
	background-color:#c7bcad;
	overflow:hidden;
	/**/
	transition: all .5s;
	}
.wpbx > div > img{
	position:absolute;
	width:100%;
	display:block;
	left:50%;
	top:0%;
	transform: translateX(-50%);
	/**/
	transition: all .5s;
	}
.wpbx > div > img:nth-child(2){display:none;}
.wtcbx{
	position:relative;
	width:100%;/*55.15vw*/
	display:block;
	/**/
	transition: all .8s;
	}
.wtcbx .wco{
	position:relative;
	width:100%;
	display:block;
	text-align:left;/*center*/
	margin:-.5% auto 0;
	/**/
	font-size:.95vw;/*19*/
	line-height:1.4vw;/*28*/
	color:#54565e;
	}
.wtcbx .wti{
	position:relative;
	width:28.377%;/*375 15.65vw 33.998 18.75vw 313*/
	/*height:3.75vw;*//*90 4.5vw 75*/
	padding-bottom:6.7996%;/*8.15952%*/
	display:block;
	margin:0 auto;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	}
.wt_1{background-image:url(../images/wti_1.png);}	
.wt_2{background-image:url(../images/wti_2.png);}		
.wt_3{background-image:url(../images/wti_3.png);}	
.wt_4{background-image:url(../images/wti_4.png);}		
.wt_5{background-image:url(../images/wti_5.png);}	

.wphk .swiper-slide .wtcbx{
	opacity:0;
	transform:scale(1.3);
	}
.wphk .swiper-slide .wpbx{
	opacity:0;
	transform:scale(.85);
	}	
.wphk .swiper-slide.swiper-slide-active .wtcbx{
	opacity:1;/**/
	transform:scale(1);
	}	
.wphk .swiper-slide.swiper-slide-active .wpbx{
	opacity:1;/**/
	transform:scale(1);
	}



/*世界地圖*/
#hmap{ background-color:#000; }
.mapbx{
	position:absolute;
	width:100%;
	left:0%;
	/*top:0%;*/
	top:50%;
	transform:translateY(-50%)scale(1.5);
	/*transform:scale(1.5);*/
	opacity:0;
	transition: transform .8s , opacity 2s;/**/
	}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .mapbx{transform:translateY(-50%)scale(1);opacity:1;}
.mapbx .map1{
	position:relative;
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	/*background-size:100% auto;*/
	background-image:url(../images/mapbg.jpg);
	/*2000x1246*/
	}
.mpbx1{
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events:none;
	top: 0;
	left: 0;
	}
.mpbx1 > p{
	position: absolute;
	width: 100%;
	height: 100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	top: 0;
	left: 0;
	opacity:0;
	}
.mpbx1 > p.on{opacity:1;}
.mp1{background-image:url(../images/map1.png);}
.mp2{background-image:url(../images/map2.png);}
.mp3{background-image:url(../images/map3.png);}
.mp4{background-image:url(../images/map4.png);}
.mp5{background-image:url(../images/map5.png);}
.mp6{background-image:url(../images/map6.png);}
.mp7{background-image:url(../images/map7.png);}
.mp8{background-image:url(../images/map8.png);}
.mp9{background-image:url(../images/map9.png);}

.flag{
	position: absolute;
	width:9%;/*180*/
	padding-bottom:10%;/*200*/
	display:block;
	cursor: pointer;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	}
.flag:hover{z-index:1;}
.flag > p{
	position: absolute;
	width:40%;/*40 45 54 30%*/
	padding-bottom:40%;
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	border-radius: 50%;
  	/*border:1 solid #fff;
  	background-color: #fff;*/
	background-color:#252538;
  	overflow: hidden;
	top: 39%;
  	left: 39%;
	opacity: 0;
	/**/
  	-webkit-filter: drop-shadow(0 0 15px rgba(0, 0, 0, .5));
  	filter: drop-shadow(0 0 15px rgba(0, 0, 0, .5));
	}
.flag > p:nth-child(2){transition: all .5s;}
.flag > p:nth-child(3){transition: all .7s;}
.flag > p:nth-child(4){transition: all .9s;}
.flag > p:nth-child(5){transition: all 1.1s;}
.flag > p:nth-child(6){transition: all 1.3s;}
.flag > p:nth-child(7){transition: all 1.5s;}


.flag1 > p{border:1px solid #e77a28;background-color:#e77a28;}
.flag1:hover > p:nth-child(2){
	opacity: 1;
	top: 52%;
  	left: 12%;
	background-image:url(../images/w1_1.png);
	}
.flag1:hover > p:nth-child(3){
	opacity: 1;
	top: 80%;
  	left: 3%;
	background-image:url(../images/w1_2.png);
	}
.flag1:hover > p:nth-child(4){
	opacity: 1;
	top: 96%;
  	left: 27%;
	background-image:url(../images/w1_3.png);
	}
.flag1:hover > p:nth-child(5){
	opacity: 1;
	top: 88%;
  	left: 56%;
	background-image:url(../images/w1_4.png);
	}
.flag1{
	background-image:url(../images/flag1.png);
	top: 37%;
	left: 11%;
	}
/**/
.flag2 > p{border:1px solid #8b48c0;background-color:#8b48c0;}
.flag2:hover > p:nth-child(2){
	opacity: 1;
	top: 80%;
  	left: 3%;
	background-image:url(../images/w2_1.png);
	/*display: none;*/
	}
.flag2:hover > p:nth-child(3){
	opacity: 1;
	top: 96%;
  	left: 27%;
	background-image:url(../images/w2_2.png);
	}
.flag2:hover > p:nth-child(4){
	opacity: 1;
	top: 88%;
  	left: 56%;
	background-image:url(../images/w2_3.png);
	display: none;
	}
.flag2{
	background-image:url(../images/flag2.png);
	top: 68%;
	left: 15%;
	}
/**/
.flag3 > p{border:1px solid #ca1115;background-color:#ca1115;}
/*.flag3:hover > p:nth-child(2){
	opacity: 1;
	top: 37%;
  	left: 71%;
	}*/
.flag3:hover > p:nth-child(2){
	opacity: 1;
	top: 38%;
  	left: 69%;
	background-image:url(../images/w3_1.png);
	}
.flag3:hover > p:nth-child(3){
	opacity: 1;
	top: 70%;
  	left: 65%;
	background-image:url(../images/w3_2.png);
	}
.flag3:hover > p:nth-child(4){
	opacity: 1;
	top: 78%;
  	left: 29%;
	background-image:url(../images/w3_3.png);
	}
.flag3{
	background-image:url(../images/flag3.png);
	top: 27%;
	left: 40%;
	}
/**/
.flag4 > p{border:1px solid #3d4fb1;background-color:#3d4fb1;}
.flag4:hover > p:nth-child(2){
	opacity: 1;
	top: 37%;
  	left: 71%;
	background-image:url(../images/w4_1.png);
	}
.flag4:hover > p:nth-child(3){
	opacity: 1;
	top: 64%;
  	left: 82%;
	background-image:url(../images/w4_2.png);
	}
.flag4:hover > p:nth-child(4){
	opacity: 1;
	top: 82%;
  	left: 60%;
	background-image:url(../images/w4_3.png);
	}
.flag4:hover > p:nth-child(5){
	opacity: 1;
	top: 78%;
  	left: 29%;
	background-image:url(../images/w4_4.png);
	}
.flag4{
	background-image:url(../images/flag4.png);
	top: 63%;
	left: 39%;
	}
/**/
.flag5 > p{border:1px solid #bd8741;background-color:#bd8741;}
.flag5:hover > p:nth-child(2){
	opacity: 1;
	top: 37%;
  	left: 71%;
	background-image:url(../images/w5_1.png);
	}
.flag5:hover > p:nth-child(3){
	opacity: 1;
	top: 64%;
  	left: 82%;
	background-image:url(../images/w5_2.png);
	}
.flag5:hover > p:nth-child(4){
	opacity: 1;
	top: 82%;
  	left: 60%;
	background-image:url(../images/w5_3.png);
	}
.flag5:hover > p:nth-child(5){
	opacity: 1;
	top: 78%;
  	left: 29%;
	background-image:url(../images/w5_4.png);
	}
.flag5{
	background-image:url(../images/flag5.png);
	top: 41.8%;
	left: 42%;
	}
/**/
.flag6 > p{border:1px solid #41a3d0;background-color:#41a3d0;}
.flag6:hover > p:nth-child(2){
	opacity: 1;
	top: -5%;
  	left: 42%;
	background-image:url(../images/w6_1.png);
	display: none;
	}
.flag6:hover > p:nth-child(3){
	opacity: 1;
	top: 3%;
  	left: 76%;
	background-image:url(../images/w6_2.png);
	}
.flag6:hover > p:nth-child(4){
	opacity: 1;
	top: 32%;
  	left: 89%;
	background-image:url(../images/w6_3.png);
	}
.flag6:hover > p:nth-child(5){
	opacity: 1;
	top: 57%;
  	left: 70%;
	background-image:url(../images/w6_4.png);
	}
.flag6{
	background-image:url(../images/flag6.png);
	top: 39.6%;
	left: 50%;
	}
/**/
.flag7 > p{border:1px solid #509514;background-color:#509514;}
.flag7:hover > p:nth-child(2){
	opacity: 1;
	top: 30%;
  	left: 80%;
	background-image:url(../images/w7_1.png);
	}
.flag7:hover > p:nth-child(3){
	opacity: 1;
	top: 59%;
  	left: 78%;
	background-image:url(../images/w7_2.png);
	}
.flag7{
	background-image:url(../images/flag7.png);
	top: 53%;
	left: 58.5%;
	}
/**/
.flag8 > p{border:1px solid #c46b01;background-color:#c46b01;}
.flag8:hover > p:nth-child(2){
	opacity: 1;
	top: -9%;
  	left: 60%;
	background-image:url(../images/w8_1.png);
	}
.flag8:hover > p:nth-child(3){
	opacity: 1;
	top: 11%;
  	left: 85%;
	background-image:url(../images/w8_2.png);
	}
.flag8:hover > p:nth-child(4){
	opacity: 1;
	top: 38%;
  	left: 76%;
	background-image:url(../images/w8_3.png);
	display: none;
	}
.flag8{
	background-image:url(../images/flag8.png);
	top: 40.5%;
	left: 73.6%;
	}
/**/
.flag9 > p{border:1px solid #24b092;background-color:#24b092;}
.flag9:hover > p:nth-child(2){
	opacity: 1;
	top: -9%;
  	left: 60%;
	background-image:url(../images/w9_1.png);
	}
.flag9:hover > p:nth-child(3){
	opacity: 1;
	top: 11%;
  	left: 85%;
	background-image:url(../images/w9_2.png);
	}
.flag9:hover > p:nth-child(4){
	opacity: 1;
	top: 38%;
  	left: 76%;
	background-image:url(../images/w9_3.png);
	}
.flag9{
	background-image:url(../images/flag9.png);
	top: 13.9%;
	left:65.6%;
	}
.mpbt{
	position:absolute;
	width:116.6%;/*210*/
	/*padding-bottom:49.9714%;90*/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image:url(../images/mpbt.png);
	transition: all .5s;
	}
.mpbt::before{
	position: relative;
	width: 100%;
	padding-bottom:42.8571%;/*90*/
	display: block;
	content: "";
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image:url(../images/mpbta.png);
	opacity: 0;
	transition: all .5s;
	}
.mpbt::after{
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	content: "";
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	top: 0;
	left: 0;
	}
.flag:hover .mpbt::before{opacity: 1;}
.flag1 .mpbt{
	 top:61%;
	 left:67%;
	}
.flag1 .mpbt::after{background-image:url(../images/mpbt1.png);}
.flag2 .mpbt{
	 top:61%;
	 left:67%;
	}
.flag2 .mpbt::after{background-image:url(../images/mpbt2.png);}
.flag3 .mpbt{
	top: 65%;
  	left: -83%;
	}
.flag3 .mpbt::after{background-image:url(../images/mpbt3.png);}
.flag4 .mpbt{
	 top:61%;
	 left:-68%;
	}
.flag4 .mpbt::after{background-image:url(../images/mpbt4.png);}
.flag5 .mpbt{
	top: 64%;
  	left: -73%;
	}
.flag5 .mpbt::after{background-image:url(../images/mpbt5.png);}
.flag6 .mpbt{
	top: 86%;
  	left: -9%;
	}
.flag6 .mpbt::after{background-image:url(../images/mpbt6.png);}
.flag7 .mpbt{
	top: 85%;
  	left: -8%;
	}
.flag7 .mpbt::after{background-image:url(../images/mpbt7.png);}
.flag8 .mpbt{
	top: 88%;
  	left: -8%;
	}
.flag8 .mpbt::after{background-image:url(../images/mpbt8.png);}
.flag9 .mpbt{
	top: 85%;
  	left: -8%;
	}
.flag9 .mpbt::after{background-image:url(../images/mpbt9.png);}

.lrbbx {
  	position:absolute;
  	display:none;
  	font-size:1.5rem;
  	pointer-events:none;
  	color: #FFF;
  	left: 50%;
  	bottom: 3.8%;
  	transform: translateX(-50%);
  	z-index: 1;
	}
.lrbbx > div {
  	position: absolute;
  	width: 180%;
  	height: 100%;
  	display: block;
  	left: 50%;
  	top: 50%;
  	transform: translate(-50%,-50%);
	}
.lrbbx > div::before {
  	position: absolute;
  	content: "";
  	width: 100%;
  	height: 100%;
  	display: block;
  	left: 0%;
  	top: 0%;
  	background-attachment: scroll;
  	background-repeat: no-repeat;
  	background-position: 0% 50%,100% 50%;
  	background-image: url(../images/lrbbx1.png),url(../images/lrbbx2.png);
 	 background-size: auto 19px;
  	-moz-animation: lr2 1s linear infinite;
  	-webkit-animation: lr2 1s linear infinite;
  	-o-animation: lr2 1s linear infinite;
  	-ms-animation: lr2 1s linear infinite;
  	animation: lr2 1s linear infinite;
	}
/**/
.bxg2_w{width:100%;padding-bottom:62.3%;/*100vh 62.3%*/background-size:100% auto;}
.bxg2_h{width:calc(100vh * 1.605136436597111);padding-bottom:100vh;background-size:auto 100%;}

/*影音專區*/
.hmediabx{
  	background-position: 50% 0%;
  	background-image: url(../images/mediabg.jpg);
	}
.p5_1,.p5_2{
	position:absolute;
	display:block;
	pointer-events: none;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:100% 50%;
	background-size:100% auto;
	bottom:0;
	}
.mvbok{
	position:absolute;
	width:100%;
	padding-bottom:46.7%;/*934*/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/mvbok.png);
	background-size:100% auto;
	left:0;
	top:50%;
	opacity:0;
	transform:translateY(-50%)scale(1.8);
	/**/
	transition: transform .8s , opacity 1s;
	}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .mvbok{
	opacity:1;/**/
	transform:translateY(-50%)scale(1);
	}
.p5_1{
	width:36%;/*720*/
	padding-bottom:52.5%;/*1050*/
	background-image: url(../images/p5_1.png);
	right:0%;
	opacity:0;/**/
	transform:scale(1.8);
	/**/
	transition: transform 1s , opacity 1.5s;
	}	
.p5_2{
	width:17.5%;/*350*/
	padding-bottom:16.25%;/*325*/
	left:0%;
	opacity:0;/**/
	transform:scale(1.8);
	/**/
	transition: transform 1s , opacity 1.5s;
	}
.p5_2::before {
  	position: absolute;
  	content: "";
  	width: 100%;
  	height: 100%;
  	display: block;
  	left: 0%;
	bottom:0%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/p5_2.png);
	background-size:100% auto;
	}
		
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .p5_1{
	opacity:1;/**/
	transform:scale(1);
	right:0;
	}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .p5_2{
	opacity:1;/**/
	transform:scale(1);
	left:0;
	}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .p5_2::before{
	animation: tp 1.2s linear infinite;
	}
.pv_bt,.tab_bt,.cd_bt{
	position:absolute;
	display:block;
	cursor: pointer;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:100% 50%;
	background-size:100% auto;
	}
.pv_bt{
	width:23.95%;/*479*/
	padding-bottom:18.95%;/*379*/
	background-image: url(../images/pv_bt.png);
	top:9.42%;/*88*/
	left:14.2%;/*284*/
	/**/
	transition:transform .8s  5.5s;
	}
.pv_bt:hover{background-image: url(../images/pv_bt_2.png);}
.tab_bt{
	width:27.8%;/*556*/
	padding-bottom:22.7%;/*454*/
	background-image: url(../images/table.png);
	top:44%;/*411*/
	left:14.15%;/*283*/
	/**/
	transition: transform 1.3s ;
	}
.tab_bt:hover{background-image: url(../images/table_2.png);}
.cd_bt{
	width:36.05%;/*721*/
	padding-bottom:36%;/*720*/
	background-image: url(../images/cd_bt.png);
	top:12.312%;/*115*/
	left:36.65%;/*733*/
	}
.cd_bt:hover{background-image: url(../images/cd_bt_2.png);}
	
/*遊戲特色*/
.hsystembx{
  	background-position: 50% 0%;
  	background-image: url(../images/systembg.jpg);
	}
.hsystem1{
	position: absolute;
	width:100%;
	left: 0;
	/*top:15.1%;151*/
	top:50%;/*55 56%*/
	opacity: 0;
	transform:translateY(-50%)scale(1.8);
	/**/
	transition: transform .8s , opacity 1.3s;
	}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .hsystem1{
	transform:translateY(-50%)scale(1);
	opacity:1;
	}
.hsystem2{
	width:100%;
	padding-bottom:3.3vw;/*70 3.5*/
	}
.hsystem2 .swiper-slide{width:100%;text-align: center;}
.hsystem2 > .swiper-wrapper > .swiper-slide.swiper-slide-active > div{transform:scale(1);opacity:1;}
.hsystem2 .swiper-slide > div{
	position: relative;
	width:63%;/*1260*/
	/*padding-bottom:37.15%;743*/
	display: inline-block;
	opacity:0;
	transform:scale(.65);
	/**/
	transition: all .6s;
	}
.hsystem2 .swiper-slide > div::before{
  	position: relative;
  	content: "";
  	width: 100%;/*1260*/
  	/*height: 100%;*/
	padding-bottom:58.96825396825397%;/*743*/
  	display: block;
  	left: 0%;
  	top: 0%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image:url(../images/sy_border.png);
	z-index: 1;
	}
.hsystem2 .swiper-slide > div img{
	position:absolute;
	width:94.2%;/*1187*/
	display:block;
	top:6.19%;/*46*/
	left:50%;
	transform:translateX(-50%);
	border:.105vw solid #fff;/*2*/
	/**/
  	-webkit-filter: drop-shadow(0 0 1vw rgba(0, 162, 255, .5));/**/
  	filter: drop-shadow(0 0 1vw rgba(0, 162, 255, .5));
	}
.hsystem2 .swiper-slide > div img:nth-child(2){display:none;}
.hsystem2 .swiper-button-next.snext,.hsystem2 .swiper-button-prev.sprev{
  	top:calc(50% - 1.8vw);/*49%*/
  	width:7.25%;/*145*/
  	height:auto;/*189*/
  	padding-bottom:9.45%;
  	margin-top:auto;
  	cursor: pointer;
  	background-size:100% auto;
	transform:translateY(-50%);
	}
.hsystem2 .swiper-button-prev.sprev{
  	background-image:url(../images/s_l.png);
  	left: 9.95%;/*199*/
	}
.hsystem2 .swiper-button-next.snext{
  	background-image:url(../images/s_r.png);
  	right:9.95%;/*199*/
	}
.hsystem2 .swiper-pagination-bullet {
  	width: 3.5%;/*70*/
  	height:auto;
	padding-bottom:3.5%;
  	border-radius: 0;
  	background:transparent;
  	opacity:1;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image:url(../images/s_bt_1.png);
	}
.hsystem2 .swiper-pagination-bullet-active {
  	background:transparent;
	background-size:100% auto;
	background-image:url(../images/s_bt_2.png);
	}
.hsystem2 .swiper-pagination-bullets{
  	bottom: 0;
	}
/**/
/*.bx_w,.home video.bx_w{width:100%;height:auto;}
.bx_h,.home video.bx_h{width:auto;height:100%;}	*/
.bg_w{background-size:100% auto;}
.bg_h{background-size:auto 100%;}
/**/
.hc_con{
	position:absolute;
	width: 100%;
	height:calc(100vh - 7vw); /*151 7.55vw  140*/
	height: calc((var(--vh, 1vh) * 100) - 7vw);
	/*background-color:rgba(0,0,0,.5);*/
	bottom: 0;
	left: 0;
	}
/**/
.tit{
	position: absolute;
	width:26%;/*520*/
	padding-bottom:5.25%;/*105*/
	display: block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	left:37%;
	top:1.75vw;/*35/1000 3.5%*/
	z-index: 1;
	/**/
	transform: scale(2.5);
	opacity:0;
	/**/
	transition: transform 1s , opacity 1.5s;
	}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .tit{
	transform:scale(1);
	opacity:1;
	}
.tit.ti_2{background-image: url(../images/tit_2.png);}
.tit.ti_3{background-image: url(../images/tit_3.png);}
.tit.ti_4{background-image: url(../images/tit_4.png);}
.tit.ti_5{background-image: url(../images/tit_5.png);}




@media only screen and (max-width:1600px){
/**/
		
}
@media only screen and (max-width:1400px){
/**/
}
@media only screen and (max-width:1200px){
/**/
	
}
@media only screen and (max-width:1000px){	
/**/
.lrbbx{font-size: 1.3rem;display: inline-block;}
.lrbbx > div{width: 180%;}
.lrbbx > div::before{background-size: auto 16px;}

}
@media only screen and (max-width:800px){
/**/

}	
@media only screen and (max-width:780px){
/**/
.hnewsbx::before,.hstorybx::before,.mapbx::before,.hmediabx::before,.hsystembx::before{
	background-size:15.12vw auto;/*118*/
	}
/*HOME*/
.homev{display:none;}
.hbg{
	transform: scale(1.5);
	opacity:0;
	/**/
	transition: transform .8s , opacity 1s;	
	}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .hbg{
	transform:scale(1);
	opacity:1;
	}
.hbg{background-image:url(../images/hbg_m1.jpg);}
.hbg.ws7{background-image:url(../images/hbg_m2.jpg);}	
.hbg.ws9{background-image:url(../images/hbg_m3.jpg);}		
	
.gtbt{
	width:23.3%;/*182*/
	padding-bottom:18.179%;/*142*/
	bottom: -2.8%;
	}
.slogan{
	position:absolute;
	width:100%;/*780*/
	padding-bottom:42.3%;/*330*/
	background-image: url(../images/slogan_m.png);
	left: 50%;
	top:55%;
	transform:translate(-50%,-50%)scale(1.5);
	}
.playbt{display:none;}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .playbt::before{
	animation-play-state: paused;
	}
.dwbx{
	width:100%;
	left:0;
	bottom:6.9%;/*97*/
	text-align:left;
	transform:translateX(0%)scale(1.5);
	}
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .dwbx{
	opacity:1;
	transform:translateX(0%)scale(1);
	}
.dwbx a{
	width:31%;/*243*/
	margin: 0 .8%;/*8*/
	border-radius:1.9vw;/*15*/
	border:.25vw solid #fff;/*2*/
	}
.dwbx a:nth-child(1){margin: 0 .8%  0 1.8%;}
.dwbx a:nth-child(3){display:none;}
	
/*最新消息*/
.hnewsbx{background-image: url(../images/newsbg_m.jpg);}
.p2_1{display:none;}
.nwbnbx{
	width:100%;
	top:21.15vw;/*165*/
	left:0%;
	z-index:1;
	/**/
  	-webkit-filter: drop-shadow(0 1.28vw 2.56vw rgba(83, 119, 197, 1));/*10 20*/
  	filter: drop-shadow(0 1.28vw 2.56vw rgba(83, 119, 197, 1));
	}
.nwbn{width:100%;}

.nwbn .swiper-slide > a{
	width: 55.128vw;/*430*/
	padding-bottom:25.128vw;/*196*/
	border: .256vw solid #688ac6;/*2*/
	opacity:.2;
	/**/
	transition: all .5s;
	}
.nwbn .swiper-slide > a::after{
	position:absolute;
	width:100%;
	height:100%;
	content: "";
	display:block;
	background-color:#3d568e;
	top:0;
	left:0;
	opacity:.8;
	/**/
	transition: all .5s;
	}
	
.nwbn  .swiper-slide.swiper-slide-active > a{opacity:1;}
.nwbn  .swiper-slide.swiper-slide-active > a::after{opacity:0;}

.nwbnbx .swiper-button-next.nsbnext,.nwbnbx .swiper-button-prev.nsbprev{
  	width:7.69%;/*60*/
  	padding-bottom:7.69%;
	/**/
  	-webkit-filter: drop-shadow(0 1.28vw 2.56vw rgba(83, 119, 197, 1));/*10 20*/
  	filter: drop-shadow(0 1.28vw 2.56vw rgba(83, 119, 197, 1));
	}
.nwbnbx .swiper-button-prev.nsbprev{left:4.6%;/*36*/}
.nwbnbx .swiper-button-next.nsbnext{right:4.6%;/*36*/}

.hc_con_n{
  	height: calc(100vh - 49.23vw);/*384*/
  	height: calc((var(--vh, 1vh) * 100) - 49.23vw);
	}
.nwbx_1{
	padding-bottom:0;/*1003 128.589%*/
	}
.nwbx_1a{
	position:relative;
	background-image:none;
	background-size:100% auto;
	}
.nwbx_1a::before,.nwbx_1a::after{
	position:relative;
	width:100%;
	content:"";
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-size:100% auto;
	}/**/
.nwbx_1a::before{
	height:23.58vw;/*184*/
	background-position:50% 100%;
	background-image: url(../images/nwbx_1m_01.png);
	}
.nwbx_1a::after{
	height:18.3333vw;/*143*/
	background-position:50% 0%;
	background-image: url(../images/nwbx_1m_04.png);
	}	
.nwbx_1a .nwconbx{
	position:relative;
	width:100%;
	height:86.6vw;/*676*/
	background-attachment:scroll;
	background-repeat:no-repeat,repeat-y;
	background-position:50% 100%,50% 50%;
	background-image: url(../images/nwbx_1m_03.png),url(../images/nwbx_1m_02.png);
	background-size:100% auto;
	margin:-1px 0;
	}
.nwbx_1a .nwconbx.ws7{height:63.64vw;/*629*/}
.nwbx_1a .nwconbx.ws7 .nwc1 > li:nth-child(5),.nwbx_1a .nwconbx.ws7 .nwc1 > li:nth-child(6) {display:none;}			
.np1{
	height:70.51vw;/*550*/
	background-image: url(../images/nwbx_1am.png);
	}

.nw_bt{
	position:absolute;
	width:100%;
	left:0;
	top:10.897vw;/*85*/
	}
.nw_bt .nwb1{
	width:49.954%;/*390*/
	padding-bottom:12.217%;/*100*/
	background-image: url(../images/nw_btm_01.png);
	}
.nw_bt .nwb2{
	width:50.045%;/*390*/
	padding-bottom:12.217%;/*100*/
	background-image: url(../images/nw_btm2_02.png);
	}
.nwbx_1a.on	.nwb1{background-image: url(../images/nw_btm2_01.png);}
.nwbx_1a.on	.nwb2{background-image: url(../images/nw_btm_02.png);}
.nwbx_1a .nwconbx .nwc1,.nwbx_1a .nwconbx .nwc2{
	width:79.5%;/*620*/
	
	/*padding-bottom:0;*/
	margin:0 auto;
	}
.nwbx_1a .nwconbx .nwc1{
	float:none;
	position:absolute;
	height:100%;
	top:0;
	left:10.25%;
	}
.nwbx_1a .nwconbx .nwc2{
	float:none;
	position:absolute;
	height:100%;
	top:0;
	left:10.25%;
	/*border: .25vw solid #a4b0d6;*//*2*/
	}
.nwbx_1a.on .nwconbx .nwc1,.nwbx_1a .nwconbx .nwc2{opacity:0;pointer-events:none;}/*display:none;*/
.nwbx_1a.on .nwconbx .nwc2,.nwbx_1a .nwconbx .nwc1{opacity:1;pointer-events:auto;}/*display:block;*/
/**/
.nwbx_1a .nwconbx .nwc1 > li{
	padding:1.28vw 2.94vw 0;/*10 23*/
	margin-top:1.28vw;/*10*/
	border-radius:.641vw;/*5*/
	}
.nwbx_1a .nwconbx .nwc1 > li.on::before{
	width:2.82vw;/*2*/
	height:4.48vw;/*35*/
	right:2.94vw;/*23*/
	}
.nwbx_1a .nwconbx .nwc1 > li::after{
	background-repeat:repeat-x;
	background-position:50% 100%;
	background-image: url(../images/s1.png);
	background-size:auto .25vw;/*2*/
	}
.nwbx_1a .nwconbx .nwc1 > li .time{
	font-size:2.5641vw;/*20*/
	line-height:4.743vw;/*37*/
	}
.nwbx_1a .nwconbx .nwc1 > li .time > p{
	width:13.9743vw;/*109*/
	padding-bottom:4.23vw;/*33*/
	margin-right:1.923vw;/*15*/
	}
.nwbx_1a .nwconbx .nwc1 > li .dtc{
	font-size:2.82vw;/*22*/
	line-height:6.025vw;/*47*/
	height:6.025vw;/*47*/
	color:#383d4a;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-left:1.53vw ;/*12*/
	}
.nwbx_1a .nmor{
	width:100%;
	bottom:15.2vw;
	left:0;
	}
.nwbx_1a.on .nmor{ display:none;}
.nwbx_1a .nmor.ws7{bottom:17.2vw;}
.nwbx_1a .nmor a{
	width:37.179%;/*290*/
	}
	
/*世界觀*/
.hstorybx{background-image: url(../images/storybg_m.jpg);}
/**/	
.wbk{
	width:88.461%;/*690*/
	/*height:137.948vw;1076
	background-image:url(../images/wbk_m.png);*/
	top:50%;
	}
.wbk::before{
	width:100%;/*690*/
	padding-bottom:155.942%;/*1076*/
	/**/
	background-image:url(../images/wbk_m.png);
	}
.wbk::after{
	width:35.897%;/*280 35.897vw*/
	/*height:71.794vw;560*/
	padding-bottom:71.794%;
	background-image:url(../images/pen2.png);
	bottom:-1.7%;/*-2.35vw 18.33*/
    left:-18.85%;/*-20.5vw 159.9*/
	}
.wbk .wk_1{
	padding:13% 0 0 1.413%;/* 89.7 0 0 9.75 11.5vw  1.25vw*/
	}
.wbk .wk_1 > span {
  	width:82.463%;/*569*/
  	}
.wphk{
	/*width:100%;569 72.94vw*/
	height:110.857142vw;/*887*/
	}
.wbk .swiper-button-next,.wbk .swiper-button-prev {
    width:7%;/*45 5.128vw 40*/
    /*height:9.102vw;80 71*/
	padding-bottom:12.425%;/**/
	}
.wbk .swiper-button-next{
    right:-7.55%;/*43 -5.5vw*/
	}
.wbk .swiper-button-prev{
    left:-7.55%;
	}	
.wpbx{
	width:100%;/*569 715 515 */
	padding-bottom:74.125%;/*481 530 382*/
	background-image:url(../images/w_pbx_m_1.jpg);
	}
.wpbx::after{background-image:url(../images/w_pbx_m_2.png);}
.wpbx > div{
	width:calc(100% - 1.282vw);/*10*/
	height:calc(100% - 1.282vw);/*10*/
	border:.25vw solid #ceb163;/*2*/
	}
.wpbx > div > img{
/*	width:auto;
	height:100%;*/
	}
.wpbx > div > img:nth-child(1){display:none;}
.wpbx > div > img:nth-child(2){display:block;}
.wtcbx .wti{
	width:55.89%;/*313 40.128vw*/
	/*height:9.615vw;75*/
	padding-bottom:13.3917%;
	margin:0 auto;
	}
.wtcbx{width:100%;/*569 72.94vw*/}
.wtcbx .wco{
	width:98%;
	margin:0 auto;
	/**/
	font-size:3.2vw;/*25*/
	line-height:4.6vw;/*35 4.48*/
	}
/**/	
.worldbx.ws7 .wbk{
	width:80%;/*265 82.8125vw 82.8125*/
	}
.worldbx.ws7 .wbk .wk_1{
	/*padding:10vw 0 0 1.25vw;*/
	}
.worldbx.ws7 .wphk{height:100.857vw;}
.worldbx.ws7 .wtcbx .wti{
	width:42.1875vw;/*135*/
	padding-bottom:10vw;/*32*/
	}
/**/
.worldbx.ws9 .wbk{width:90%;}
	
	
/*影音專區*/
.hmediabx{background-image: url(../images/mediabg_m.jpg);}	

.p5_1{display:none;}	
.p5_2{
	width:43.589%;/*340*/
	padding-bottom:37.178%;/*290*/
	/*background-image: url(../images/p5_2_m.png);*/
	left:auto;
	right:0%;
	bottom:-2.2%;
	}
.p5_2::before {
 	 background-image: url(../images/p5_2_m.png);
	}
	
.hcon > .swiper-wrapper > .swiper-slide.swiper-slide-active .p5_2{
	left:auto;
	right:0;
	}
.mvbok{
	padding-bottom:155.128%;/*1210*/
	background-image: url(../images/mvbok_m.png);
	top:48%;
	}
.pv_bt{
	width:59.48%;/*464*/
	padding-bottom:55.634%;/*434*/
	background-image: url(../images/pv_bt_m.png);
	top:6.61%;/*80*/
	left:0%;
	}
.pv_bt:hover{background-image: url(../images/pv_bt_m.png);}	
.tab_bt{
	width:65.76%;/*513*/
	padding-bottom:55.88%;/*436*/
	background-image: url(../images/table_m.png);
	top:57.1%;/*691*/
	left:0;
	}
.tab_bt:hover{background-image: url(../images/table_m.png);}
.cd_bt{
	width:68.2%;/*532*/
	padding-bottom:96.146%;/*750*/
	background-image: url(../images/cd_bt_m.png);
	top:20.99%;/*254*/
	left:31.6%;/*247*/
	}
.cd_bt:hover{background-image: url(../images/cd_bt_m.png);}

/*遊戲特色*/
.hsystembx{background-image: url(../images/systembg_m.jpg);}
.hsystem1{
	/*top:59.5%;*/
	transform:translateY(-50%)scale(1.8);
	}
.hsystem2{padding-bottom:8vw;/*70 8.9vw*/}
.hsystem2 .swiper-slide > div{
	width:79.23%;/*618 79.23 67*/
	/*padding-bottom:111.34%;1027 131.66*/
	}
.hsystem2 .swiper-slide > div::before{
	/**/
	padding-bottom:166.1812297734628%;/*1027 131.66*/
	background-image:url(../images/sy_border_m.png);
	}
.hsystem2 .swiper-slide > div img{
	width:86.73%;/*536*/
	top:4.18%;/*43*/
	border:.25vw solid #fff;/*2*/
	/**/
  	-webkit-filter: drop-shadow(0 0 1.5vw rgba(0, 0, 0, .2));/*30*/
  	filter: drop-shadow(0 0 1.5vw rgba(0, 0, 0, .2));
	}
.hsystem2 .swiper-slide > div img:nth-child(1){display:none;}
.hsystem2 .swiper-slide > div img:nth-child(2){display:block;}
.hsystem2 .swiper-button-next.snext,.hsystem2 .swiper-button-prev.sprev{
  	top:calc(50% - 4vw);/*50%*/
  	width:18.58%;/*145*/
  	padding-bottom:24.21%;
	}
.hsystem2 .swiper-button-prev.sprev{
  	left:-1.5%;
	}
.hsystem2 .swiper-button-next.snext{
  	right:-1.5%;
	}
.hsystem2 .swiper-pagination-bullet {
  	width:8.9%;/*70*/
	padding-bottom:8.9%;
	}
/**/
.hsystem1.ws7 .hsystem2 .swiper-slide > div{
	width:67%;/*618 79.23 72%*/
	/*padding-bottom:119.65%;1027 131.66*/
	}
.hsystem1.ws7 .hsystem2 .swiper-button-prev.sprev{left:-1%;}	
.hsystem1.ws7 .hsystem2 .swiper-button-next.snext{right:-1%;}
	
.hsystem1.ws9 .hsystem2 .swiper-slide > div{
	width:85%;/*618 79.23*/
	/*padding-bottom:141.25%;1027 131.66*/
	}
.hsystem1.ws9 .hsystem2 .swiper-button-prev.sprev{left:-3.5%;}	
.hsystem1.ws9 .hsystem2 .swiper-button-next.snext{right:-3.5%;}	

.hsystem1.ws3 .hsystem2 .swiper-slide > div{
	width:57%;/*618*/
	}	
.hsystem1.ws3 .hsystem2 .swiper-button-prev.sprev{left:5.5%;}	
.hsystem1.ws3 .hsystem2 .swiper-button-next.snext{right:5.5%;}	
.hsystem1.ws3 .hsystem2 .swiper-button-next.snext,.hsystem1.ws3 .hsystem2 .swiper-button-prev.sprev{
  	width:13%;/*145*/
  	padding-bottom:16.944%;/*189*/
	}
	
/**/
.hc_con{
	height:calc(100vh - 30vw); /*247 31.6vw*/
	height: calc((var(--vh, 1vh) * 100) - 30vw);
	}
/**/
.tit{
	width:67%;/*520*/
	padding-bottom:13.52%;/*105*/
	background-size:auto 100%;
	left:16.5%;
	top:16vw;/*141/1387 10.165% 18vw*/
	/**/
	}
	
	
}
@media only screen and (max-width:685px){ 
/**/

}
@media only screen and (max-width:580px){
/**/	
}
@media only screen and (max-width:500px){
/**/
.nwbx_1a .nwconbx .nwc1 > li .time{
	font-size:3.3vw;/*20 / 6*/
	}
.nwbx_1a .nwconbx .nwc1 > li .time > p{
	width:15.51282vw;/*121*/
	padding-bottom:4.743vw;/*37*/
	margin-right:1.923vw;/*15*/
	margin-top:-2px;  
	}
.nwbx_1a .nwconbx .nwc1 > li .dtc{
	font-size:3.6vw;/*22*/
	}
.nwbx_1a .nwconbx .nwc1 > li.on::before{
	width:3.6vw;/*22*/
	height:5.83vw;/*35*/
	}
	
	
}
@media only screen and (max-width:470px){
/**/
.lrbbx{font-size: 1.2rem;display: inline-block;}
.lrbbx > div{width: 180%;}
.lrbbx > div::before{background-size: auto 13px;}

}
@media only screen and (max-width:380px){
/**/

}
@media only screen and (max-width:360px){
/**/	
}
@media only screen and (max-width:340px){
/**/

}


@keyframes lr2 {
   0% { left:0%;}
   25% {left:2%;}
   50% {left:0%;}
   75% {left:-2%;}
   100% {left:0%;}
	}