@charset "utf-8";
body { background-color: #fff!important; }
html, body {
	width: 100%;
	overflow-x: hidden;
}
ol, ul {
	list-style: none;
}
img{
    /* max-width:100%; */
    height:auto;
    border:none;
}
.wrap {
	background-repeat: no-repeat;
	background-position: center top;
	position: relative;
	padding-top: 1px;
	/*max-width: 1920px;
	min-height: 950px;*/
	min-width:1200px;
	overflow: hidden;
}
.particles-js{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.videobox {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -61px;
    cursor: pointer;
    height: 120px;
    width: 120px;
    text-indent: -9999em;
    background-image: url(../images/btn_item.png);
    background-position: -12px -14px;
    z-index: 5;
}
.menu1 {
    background-image: url(../images/menu2.png);
    background-position: 0px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu2 {
    background-image: url(../images/menu2.png);
    background-position: -182px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu3 {
    background-image: url(../images/menu2.png);
    background-position: -364px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu4 {
    background-image: url(../images/menu2.png);
    background-position: -546px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu5 {
    background-image: url(../images/menu2.png);
    background-position: -728px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu6 {
    background-image: url(../images/menu2.png);
    background-position: -911px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu7 {
    background-image: url(../images/menu2.png);
    background-position: -1095px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu8 {
    background-image: url(../images/menu2.png);
    background-position: -1279px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu9 {
    background-image: url(../images/menu2.png);
    background-position: -1463px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu10 {
    background-image: url(../images/menu2.png);
    background-position: -1646px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu11 {
    background-image: url(../images/menu2.png);
    background-position: -1828px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu12 {
    background-image: url(../images/menu2.png);
    background-position: -2010px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu13 {
    background-image: url(../images/menu2.png);
    background-position: -2193px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu14 {
    background-image: url(../images/menu2.png);
    background-position: -2377px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu15 {
    background-image: url(../images/menu2.png);
    background-position: -2561px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu16 {
    background-image: url(../images/menu2.png);
    background-position: -2744px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu17 {
    background-image: url(../images/menu2.png);
    background-position: -2927px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.menu18 {
    background-image: url(../images/menu2.png);
    background-position: -3109px 0px;
    width: 178px;
    height: 71px;
    position: absolute;
    top: 569px;
    left: 50%;
    margin-left: 45px;
}
.copyright {
	text-align: center;
	height: 80px;
	overflow: hidden;
	background: #182d40 url(../images/copyright.png) top center no-repeat;
}
.copyright img { opacity: .5; }

.msg {
	transition: .3s all ease-in;
	opacity: 0;
	line-height: 12px;
	vertical-align: middle;
	position: absolute;
	right: 20px;
	bottom: 10px;
	font-size: 12px;
	color: rgba(255,255,255,1);
}
.msg label { cursor: pointer; }
.msg input {
	position: relative;
	top: 3px;
}
.msg:hover { opacity: 1; }

#bottomMenu.fix { position: absolute; }
#footerWrap {
	transition: height 0.2s ease-out 0s;
	position: relative;
}
.copyright img{
	display: none;
}


#content { 
	width: 100%;
	height: 100%; 
	top: 0px;
	overflow: hidden; 
	position: absolute; 
}
.container {
    max-width: 1300px;
}
.container2 {
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
}
.page_1{
	margin:0px;
	padding:0px;
	background: url(../images/page1.jpg) top center no-repeat;
	position: relative;
	width: 100%;
	display:block;
}
.page_2{
	margin:0px;
	padding:0px;
	background: url(../images/page2.jpg) top center no-repeat;
	position: relative;
	width: 100%;
	/* height:1750px; */
}
.page_3{
	margin:0px;
	padding:0px;
	background: url(../images/page3.jpg) top center no-repeat;
	position: relative;
	width: 100%;
}
.page_4{
	margin:0px;
	padding:0px;
	background: url(../images/page4.jpg) top center no-repeat;
	position: relative;
	width: 100%;
}
.wrap {
	min-width:1000px;
	overflow: hidden;
}

header{
	height: 900px;
}
.navber{
	width: 1150px;
	margin: 0 auto;
	position: relative;
	top: 300px;
}
.navber li a{
	display: block;
	width: 353px;
	height: 232px;
}
.navber li {
	background: url(../images/wrap01.png) 0 0 no-repeat;
	width: 353px;
	height: 232px;
	float: left;
	margin-left: 10px;
}
.navber li:hover{
	filter: brightness(0.8);
}
.navber li+li {
	background: url(../images/wrap01.png) -350px 0 no-repeat;
	width: 353px;
	height: 232px;
	float: left;
}
.navber li+li+li {
	background: url(../images/wrap01.png) -700px 0 no-repeat;
	width: 353px;
	height: 232px;
	float: left;
}
.header2 {height: 385px;}
.header4 {height: 9450px;}
.title {
    background: url(../images/title.png) center center no-repeat;
    position: relative;
    margin: 0 auto;
    margin-left: auto;
    width: 774px;
    height: 355px;
    position: absolute;
    left: 50%;
    margin-left: -385px;
    top: 20rem;
}
.title2{
	background: url(../images/title2.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 191px;
	height: 77px;
	position: absolute;
	left: 50%;
	margin-left: -6rem;
	top: 11rem;
	z-index: 2;
}
.title3{
	background: url(../images/title3.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 254px;
	height: 77px;
	position: absolute;
	left: 50%;
	margin-left: -38rem;
	top: 9rem;
	z-index: 2;
}
.fancybox-skin {
   background:inherit!important;
}
.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: inherit!important;
    -moz-box-shadow: inherit!important;
    box-shadow:inherit!important;
}

.navbar-nav {
    position: absolute;
    right: 2rem;
}
.bg-primary {
    background-color: rgb(20 43 61 / 89%)!important;
}
.navbar-dark .navbar-brand {
    position: relative;
    margin-left: -17.5rem;
}

/*關閉*/
.pop {
	background: url(../images/pop.png) no-repeat;
	background-repeat: no-repeat;
	background-position: left bottom;
	width: 100%;
	height: 147px;
	position: fixed;
	z-index: 10;
	left: 0;
	bottom: 0;
	/*transition: all .8s ease;*/
	display: none;
}
.pop_elin {
	position: absolute;
	left: 50%;
	top: -27px;
	margin-left:-500px;
}
.pop.active { bottom: -480px; }
.pop .btn {
	background-color: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	position: absolute;
	bottom: 7px;
	left: 50%;
	background-repeat: no-repeat;
	display: block;
	transition: all .3s ease;
}
.pop .btn:hover { transform: scale(1.05) }
.pop .btn.btn_download {
	background: url(../images/btn.png) no-repeat;
	background-position: 0 0;
	height: 87px;
	width: 300px;
	margin-left: -163px;
}
.pop .btn.btn_register {
	background: url(../images/btn.png) no-repeat;
	background-position: -300px 0;
	height: 103px;
	width: 300px;
	margin-left: 153px;
}
.close_pop {
	position: absolute;
	top: 13px;
	right: 20px;
	cursor: pointer;
	z-index: 11;
}
#footerWrap {
	/* margin-bottom: 10px; */
}
/*影片*/
.video-js.vjs-playing .vjs-tech {
    pointer-events: auto;
}
  .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    opacity: 0;
    z-index: 5;
  }
/*  .vjs-icon-volume-mute, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
    position: absolute;
    top: -895px;
    left: 805px;
    z-index: 6;
  }
  .vjs-icon-volume-high, .video-js .vjs-mute-control .vjs-icon-placeholder {
    position: absolute;
    top: -895px;
    left: 805px;
    z-index: 6;
  }*/
  .vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
    font-size: 4rem;
  }
  .vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before {
    font-size: 4rem;
  }
.playerwap{
	background-image: url(../images/playwap.png);
	background-position: 0 0;
	width: 100%;
	height: 950px;
	position: absolute;
	z-index: 1;
}
#mute {
    cursor: pointer;
    height: 39px;
    width: 39px;
    position: absolute;
    top: 100px;
    right: 23px;
    margin: auto;
    opacity: .5;
    z-index: 999;
}
#mute2{
  background: url(../images/btn2.png) no-repeat;
  background-position: center top;
  cursor: pointer;
  height: 68px;
  width: 59px;
  position: absolute;
  top: 85px;
  right: 15px;
  margin: auto;
  z-index: 888;
}
.video-js {
    left: 50%;
    margin-left: -85rem;
    top: -20rem;
}
.video-js .vjs-progress-control {
	display: none;
}
.video-js .vjs-control-bar {
	display:none;
    background-color:inherit!important;
    background-color: inherit!important;
}
/*頁籤*/
.abgne_tab {
	width: 1100px;
	height: 1145px;
}
.tab_container{
    background: url(../images/tab_container_bg.jpg) 0 0 no-repeat;
    width: 1044px;
    height: 1193px;
    padding: 97px 0 0 0;
}
ul.tabs {
    position: relative;
    background: url(../images/tabbg1.png) 0 0 no-repeat;
    width: 1100px;
    height: 106px;
    overflow: hidden;
    margin: 0 auto;
    top: 36px;
    left: -30px;
	z-index: 2;
	font-size: 0;
}
ul.tabs:after {
	content: "";
	display: block;
	clear: both;
}
ul.tabs li {
	float: left;
	height: 52px;
	/* line-height: 35px; */
	width: 510px;
}
ul.tabs li+li {
	float: left;
	height: 52px;
	/* line-height: 35px; */
	width: 513px;
}
.tab_content p{
	color: #a0ccf3;
	padding: 0 50px;
	font-size: 18px;
	line-height: 33px;
	text-align: justify;
	text-justify:inter-ideograph;
	font-family:"新細明體"!important;
}
.tab_content img{
	padding: 32px 60px 0;
}
.tab_content ul{width: 1000px;}
.tab_content ul li{
	width: 451px;
	float: left;
	margin-left: 20px;
}
.tab_content ul li p{
	color: #ffb400;
	padding: 0;
	font-size: 18px;
	font-family:"新細明體"!important;
}
.tab_content ul li img{padding: 0;position: relative;top: -35px;}
.tab_container{
    margin: 0 auto;
    width: 1044px;
    position: relative;
    top: -89px;
}
ul.tabs li:first-child { margin-left: 0px; }
ul.tabs li a {
	height: 100%;
	display: block;
	background-image: url(../images/tabs.png);
	background-position-x: 0;
}
ul.tabs li a {background-position-x: 0px;background-position-y: -115px;}
ul.tabs li+li a {background-position-y: -178px;background-position-x: 4px;}
ul.tabs li a:hover,
ul.tabs li.active a {background-position-x: -527px;/* background-position-y: -80px; */}
ul.tabs li.active a:hover { cursor: default; }
.main1_1{
    background: url(../images/main1_1.png) 0 0 no-repeat;
    width: 925px;
    height: 1060px;
    margin: 0 auto;
}
.main1_2{
    background: url(../images/main1_2.png) 0 0 no-repeat;
    width: 925px;
    height: 852px;
    margin: 0 auto;
}
.tab{
    margin: 0 auto;
    width: 1044px;
    position: relative;
}


/*END*/
/*影片*/
.item {
    position: relative;
    top: -1px;
    width: 100%;
    height: 100%;
}
.item button.btn_item.btn_item_1 {
    left: 50%;
    top: 263px;
    margin-left: -355px;
    background-position-y: 0;
}
.item button.btn_item {
    background-color: transparent;
    position: absolute;
    display: block;
    width: 700px;
    height: 102px;
    border: none;
    padding: 0;
    background-repeat: no-repeat;
    background-image: url(../images/videobg.png);
    background-position: 0 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    outline: none;
}
.layerPop {
    z-index: 300;
    position: fixed;
    left: 50%;
    top: 50%;
    display: none;
    z-index: 20000000;
    margin: -312px 0 0 -450px;
    width: 900px;
    height: 614px;
    border: 0px solid #ccc;
    background: #000;
}
.layerPop .close {
    position: absolute;
    right: -1px;
    top: -65px;
}
.layerPop .close button {
    border: none;
    display: block;
    text-indent: -9999px;
    width: 49px;
    height: 49px;
    background: url(../images/btn_close_movie.png) no-repeat;
    cursor: pointer;
}
.overlay {
    z-index: 200;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.75);
    display: none;
}
.lefttop {
    background: url(../images/tabs2.png) 0 0 no-repeat;
    width: 65px;
    height: 65px;
    position: absolute;;
    top: 6rem;
	left: 1rem;
	z-index: 9;
}
.lefttop a{
	display: block;
    width: 65px;
    height: 65px;
}
.lefttop a:hover {
    background: url(../images/tabs2.png) -65px 0 no-repeat;
    width: 65px;
    height: 65px;
}
/*end*/


.object{
	position: absolute;
	top: 16%;
	left: 50%;
	margin-left: -3rem;
	-webkit-animation: action 1s infinite  alternate;
	animation: action 1s infinite  alternate;
}
@-webkit-keyframes action {
	0% { transform: translateY(0); }
	100% { transform: translateY(-10px); }
}
@keyframes action {
	0% { transform: translateY(0); }
	100% { transform: translateY(-10px); }
}

.logo2{
	background: url(../images/logo2.png) center center no-repeat;
	width: 678px;
	height: 317px;
	position: relative;
	margin: 0 auto;
	top: 92px;
}
.modal-header {
    border-bottom:inherit;

}
.modal-footer {
    border-top:inherit;
}
.close {
    font-size: 4.5rem;
    font-weight: 100;
    line-height: 0.5;
    color: #fff;
    text-shadow:inherit;
}
.close:hover {
    color: #e8e8e8;
}
.fancybox-nav {
    width: 10%!important;
}

@media (max-width:480px){
	.logo2 {
		top: 32px;
		left: 50%;
		margin-left: -339px;
		background-size: 54%;
	}
	.title {
		margin: 0 auto;
		left: 50%;
		margin-left: -387px;
		top: 9rem;
		background-size: 49%;
	}
	header {
		height: 170vh;
	}
	.header4 {
		height: 415vh;
	}
	.wrap {
		min-width: 340px;
	}
	.navbar-dark .navbar-brand {
		position: relative;
		margin-left: 0;
	}
	.navber {
		width: 774px;
		margin: 0 auto;
		top: 60px;
		left: 50%;
		margin-left: -209px;
	}
	.navber li{float: inherit;margin-left: -1%;}
	.navber li+li {float: inherit;}
	.navber li+li+li {float: inherit;}
	ul.tabs {
		width: 100%;
		height: 106px;
		overflow: hidden;
		margin: 0 auto;
		top: 28px;
		left: 15px;
		z-index: 2;
		font-size: 18px;
	}
	ul.tabs li {
		width: 45%;
		float: left;
		text-align: center;
		background: #16222d;
		margin-left: 1rem;
		margin-bottom: 1rem;
		padding-top: 9px;
	}
	ul.tabs li:hover {
		background: #1c2938;
	}
	ul.tabs li+li {
		float: left;
		height: 52px;
		width: 23%;
	}
	.tab_content p {
		width: 100%;
	}
	ul.tabs li a {
		background-image: initial;
		color: #fff;
	}
	ul.tabs li a:hover {
		color: #ffba00;
	}
	.tab_container{
		width: 333px;
        left: 50%;
        margin-left: -170px;
        height: 98%;
        background: #1c3144;
        border: 2px solid #FFF;
	}
	.tab_content img{
		position: relative;
        padding: 0;
        left: 0;
	}
	.tab_content ul li {
		float: inherit;;

	}
	.tab_content ul li p {
        width: 50%;
	}
	.tab_content ul li img {
		width: 65%;
        left: -2.7rem;
	}
	.page_1{
		width: 100%;
		height: 100%;
		background-size: cover;
	}
	.page_2{
		width: 100%;
		height: 100%;
		background-size: cover;
	}
	.page_3{
		width: 100%;
		height: 100%;
		background-size: cover;
	}
	.page_4{
		width: 100%;
		height: 100%;
		background-size: 185%;
	}
	.tab img{
		display: none;
	}
	.peo1_m{
		background-image: url(../images/peo1_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo2_m{
		background-image: url(../images/peo2_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo3_m{
		background-image: url(../images/peo3_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo4_m{
		background-image: url(../images/peo4_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo5_m{
		background-image: url(../images/peo5_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo6_m{
		background-image: url(../images/peo6_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo7_m{
		background-image: url(../images/peo7_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo8_m{
		background-image: url(../images/peo8_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo9_m{
		background-image: url(../images/peo9_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo10_m{
		background-image: url(../images/peo10_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo11_m{
		background-image: url(../images/peo11_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo12_m{
		background-image: url(../images/peo12_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	}
	.peo13_m{
		background-image: url(../images/peo13_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo14_m{
		background-image: url(../images/peo14_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo15_m{
		background-image: url(../images/peo15_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo16_m{
		background-image: url(../images/peo16_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo17_m{
		background-image: url(../images/peo17_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	} 
	.peo18_m{
		background-image: url(../images/peo18_m.png);
		background-position: center top;
		width:413px ;
		height: 972px;
		margin-top: 450px;
	}  
	.menu1, .menu2, .menu3, .menu4, .menu5, .menu6, .menu8, .menu9, .menu10, .menu11, .menu12, .menu13, .menu14, .menu17, .menu18{
		top: 745px;
		margin-left: -415px;
	}
	.menu7, .menu16{
		top: 770px;
        margin-left: -415px;
	}
	.menu15{
		top: 766px;
		margin-left: -415px;
	}
	.title3 {
		top: 5.5rem;
		margin-left: -5.8rem;
	}
	.material-icons {
		left: 0;
	}
	.material-icons02 {
		right: 0;
	}
	.tabs-header {
		margin-left: -207px;
		top: 42px;
		width: 370px;
	}
	.navbar-nav {
		position:inherit;
		right: inherit;
	}
	.navbar-dark .navbar-brand {
		position: relative;
		margin-left: 0;
	}
	#footerWrap {
		transition: height 0.2s ease-out 0s;
		position: relative;
	}
	.pop {
		background: none;
		width: 100%;
		left: 0;
		bottom: 0 !important;
		display: block !important;
		top: auto;
	}
	.pop_elin,
    .close_pop,
    .pop .btn.btn_download { display: none !important; }
    .pop .btn.btn_register {
 	   background-position: -600px 0;
 	   height: 200px;
 	   width: 200px;
 	   margin-left: auto;
 	   left: auto;
 	   right: -3rem;
 	   bottom: -45px;
 	   transform: scale(0.5);
 	   z-index: 99;
 }
	.pop_elin, .close_pop, .pop .btn.btn_download {
		display: none !important;
	}
	.copyright {
		height: 15rem;
		overflow: hidden;
		background-image: url(../images/copyright_m.png);
		background-position: center top;
	}
}