@charset "utf-8";
body { background-color: #000!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;
}
.wrap ul {
	/*height: 1780px;*/
	padding-left: 10%;
}
.wrap2 ul {
	/*height: 1780px;*/
	padding-left: 11%;
}

.wrap4 ul {
	/*height: 1780px;*/
	padding-left: 11.5%;

}

.wrap ul li{
	float: left;
	/*margin-left: -1.3rem;*/
	margin:5px; 
}
.wrap ul li+li{
	float: left;
	/*margin-left: 0.7rem;*/
}
.wrap ul li+li+li{
	float: left;
	/*margin-left: -1.3rem;*/
}
.wrap ul li+li+li+li{
	margin-left: 0.7rem;
}
.wrap ul li+li+li+li+li{
	margin-left: -1.3rem;
}
.wrap ul li+li+li+li+li+li{
	margin-left: 0.7rem;
}
.wrap ul li+li+li+li+li+li+li{
	margin-left: 36.95rem;
}
.people {
	background: url(../images/people.png) center center no-repeat;
	/*background-size: cover;*/
	/*position: relative;*/
	width: 100%;
	height: 10%;
	animation: MoveUpDown 1s linear infinite;
	position: absolute;
	/*left: 10%;*/
	margin-top: 5rem;
	/*margin-left: 5rem;*/
	top: 0;
}
  @keyframes MoveUpDown {
	0%, 100% {
		top: 0;
}
	50% {
		top: 8px;
	}
 }




.btn1{
	position: absolute;
	top: 29.5rem;
	left: 1.9rem;
	width: 281px;
	height: 155px;
}
.btn2{
	position: absolute;
	top: 41.5rem;
	left: 2.0rem;
	width: 279px;
	height: 160px;
}
.btn3{
	position: absolute;
	top: 49.8rem;
	left: 34.5rem;
	width: 201px;
	height: 41px;
	z-index: 1;
}
.btn4{
	position: absolute;
	top: 38rem;
	left: 68rem;
	width: 130px;
	height: 126px;
}
.btn5 {
    position: absolute;
    top: 40rem;
    left: 31rem;
    width: 50px;
    height: 50px;
    z-index: 99999999999999999;
    background: #000;
}
.copyright {
	text-align: center;
	height: 80px;
	overflow: hidden;
	background:#000 url(../images/copyright.png) center center no-repeat;
	background-size: 60%;
}
.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;
}
/*左邊選單*/
.q01{
	background-image: url(../images/q02.png);
	width: 126px;
	height: 900px;
	position: fixed;
	top: 50%;
	margin-top: -325px;
	left: 0;
	z-index: 199;
}
ul.qlink {
	position: fixed;
	top: 50%;
	margin-top: -280px;
	left: -43px;
	z-index: 199;
}
ul.qlink li { margin: 0px 0; }
ul.qlink li a {
	background-position: 0 0;
	filter: brightness(.65);
	width: 120px;
	height: 110px;
	background-image: url(../images/qlink.png);
	text-indent: -9999px;
	display: block;
}
ul.qlink li+li a {background-position-y: -107px;}
ul.qlink li+li+li a {background-position-y: -217px;}
ul.qlink li+li+li+li a {background-position-y: -325px;}
ul.qlink li+li+li+li+li a {background-position-y: -432px;}
ul.qlink li+li+li+li+li+li a { background-position-y: -500px; }
.page1 ul.qlink li.qlink_page_1 a,
.page2 ul.qlink li.qlink_page_2 a,
.page3 ul.qlink li.qlink_page_3 a,
ul.qlink li a:hover {filter: brightness(1);}
/*end*/

#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) 0 -165px no-repeat;
	position: relative;
	width: 100%;
	display:block;
}
.page_3{
	margin:0px;
	padding:0px;
	background: url(../images/page3.jpg) 0 0 no-repeat;
	position: relative;
	width: 100%;
	height: 1000px;
	display:block;
	background-color: #320200;
	margin-top: -4rem;
}
.page_4{
	margin:0px;
	padding:0px;
	background: url(../images/page4.jpg) 0 0 no-repeat;
	position: relative;
	width: 100%;
	height: 1200px;
	display:block;
}
.wrap {
	min-width: 1200px;
	overflow: hidden;
	padding-bottom: 16%;
}
.wrap2 {
	min-width:1200px;
	overflow: hidden;
	padding-bottom: 3%;
}

.wrap3 {
	min-width:1200px;
	overflow: hidden;
	padding-bottom: 8%;
}

header{
	padding-bottom: 57%;
}

.note {
    background: #202020;
    color: #979797;
	margin-bottom: 165px;
	list-style-type:decimal;
	font-size: 1.3rem;
}
.note li{
	margin-bottom:15px ;
}
.container {
     padding-right:inherit;
    padding-left: inherit;
}
.title {
    background: url(../images/title.png) center center no-repeat;
    /*background-size: cover;*/
    /*position: relative;*/
    margin: 0 auto;
    margin-left: auto;
    width: 705px;
    height: 460px;
    position: absolute;
    left: 50%;
    margin-left: -4rem;
    top: 10rem;
}
.title2{
	background: url(../images/title2.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 217px;
	height: 33px;
	position: relative;
}

.main0{
	background: url(../images/main0.png) center center no-repeat;
	background-size: cover;
	position: relative;
	margin: 0 auto;
	width: 765px;
	height: 990px;
	margin-top: 4rem;
	margin-bottom: 3rem;
}
.main1{
	background: url(../images/main1.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 345px;
	height: 150px;
}
.main2{
	background: url(../images/main2.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 345px;
	height: 150px;
}
.main3{
	background: url(../images/main3.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 305px;
	height: 150px;
}
.main4{
	background: url(../images/main4.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 600px;
	height: 200px;
	margin-top: 18%;
}
.main5{
	background: url(../images/main5.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 1033px;
	height: 485px;
	right: .8%;
	margin-top: 2%;
}
.main6{
	background: url(../images/main6.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 875px;
	height: 429px;
	margin-bottom: 2rem;
}
.main7{
	background: url(../images/main7.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 501px;
	height: 745px;
	display: inline-block;
}
.main8{
	background: url(../images/main8.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 503px;
	height: 745px;
	/*margin-bottom: 6.5rem;*/
	display: inline-block;
}
.main9{
	background: url(../images/main9.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 855px;
	height: 868px;
	/*margin-top: 60%;*/
}

.main10{
	background: url(../images/main10.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 1022px;
	height: 928px;
	margin-top: 3%;
}

.main11{
	background: url(../images/main11.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 725px;
	height: 347px;
	margin-top: 3%;
}

.main12{
	background: url(../images/main12.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 501px;
	height: 971px;
	/*margin-top: 3%;*/
}

.main13{
	background: url(../images/main13.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 378px;
	height: 316px;
	/*margin-top: 3%;*/
	display: inline-block;
	vertical-align: top;
	margin-top: 3%;
}

.main14{
	background: url(../images/main14.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 606px;
	height: 292px;
	/*margin-top: 3%;*/
	display: inline-block;
	vertical-align: top;
	margin-top: 3%;
}

.vd {
	width: 100%;
	height: 40vh;
	position: relative;
	text-align: center;
	margin-bottom: 15%;
}

.main15{
	background: url(../images/main15.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	width: 1021px;
	height: 247px;
	margin-bottom: 10%;

}

.main11 p{
	margin-left: 10px;
	color: #fff;
}
.main11 ol li{
	color: #fff;
	margin-bottom: 0.4rem;
	list-style-type:decimal-leading-zero;
}
.fancybox-skin {
   background:inherit!important;
}
.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: inherit!important;
    -moz-box-shadow: inherit!important;
    box-shadow:inherit!important;
}
/*關閉*/
.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;
}
.bottom{
	background: url(../images/bottom.png) center center no-repeat;
	width: 319px;
	height: 95px;
	position: absolute;
	top: 37.8rem;
	left: 50%;
	margin-left: -18.5rem;
}
.navbar-nav {
    position: absolute;
    right: 2rem;
}
.bg-primary {
    background-color: rgba(0, 0, 0, 0.85)!important;
}
.navbar-dark .navbar-brand {
    position: relative;
    margin-left: -15rem;
}















@media screen and (max-width:767px){
	.container2 {
		max-width: 1000px;
	}
	.wrap2 {
		min-width: 340px;
	}
	.title {
		margin-left: -22rem;
    	top: 15rem;
    	background-size: 50%;
	}
	.bottom {
		top: 23.5rem;
		left: 50%;
		margin-left: -12.2rem;
		background-size: 80%;
	}
	.note {
		margin-bottom: -13px;
		padding: 2rem;
		font-size: 0.5rem;
	}
	.page_1{
		width: 100%;
		height: 100%;
		/* background-size: cover; */
	}
	header {
		/*padding-bottom: 133%;*/
	}
	.wrap {
		min-width: 340px;
	}


	.wrap ul{
		margin-top: 3%;
	}
	.wrap ul li{
		float: left;
		margin-left: 0;
		/*margin:5px; */
	}


	.main0{
		background: url(../images/main0.png) center center no-repeat;
		background-size: cover;
		position: relative;
		margin: 0 auto;
		width: 100%;
		height: 32rem;
		margin-top: 42rem;
        margin-bottom: 0;
		/*margin-left: -12.3rem;*/
		background-size: 95%;
	}

	.main0{
		
	}
	.main1{
		background-size: 100%;
		width: 90%;
		height: 10rem;
	}
	.main2{
		background-size: 100%;
		width: 90%;
		height: 10rem;
	}
	.main3 {
		background-size: 100%;
		width: 90%;
		height: 11rem;
	}

	.main4{
		background: url(../images/main4.png) center center no-repeat;
		background-size: 100%;
		position: relative;
		margin: 0 auto;
		width: 100%;
		height: 100px;
		margin-top: 135%;
	}
	.main5 {
		background-size: 100%;
		width: 95%;
		height: 12rem;
	}


	.wrap2 ul {
		/*height: 1780px;*/
		padding-left: 0;
	}
	.main6 {
		
	}



	.main6{
	background: url(../images/main6.png) center center no-repeat;
	position: relative;
	margin: 0 auto;
	background-size: 100%;
	width: 100%;
	height: 290px;
	margin-bottom: 0;
}
	.main7 {
		background-size: 100%;
		width: 100%;
	}
	.main8 {
		width: 100%;
		height: 26rem;
		/* margin-bottom: -1.9rem; */
		background-size: cover;
		margin-top: -15rem;
	}
	.wrap ul li+li {
		margin-left: 0;
	}
	.wrap ul li+li+li {
		/*margin-left:inherit;*/
	}
	.wrap ul li+li+li+li {
		margin-left:-1.3rem;
	}
	.wrap ul li+li+li+li+li+li {
		margin-left: -1.3rem;
		height: 18rem;
	}

	.people {
	background: url(../images/people.png) center center no-repeat;
	/*background-size: cover;*/
	/*position: relative;*/
	width: 267%;
	height: 10%;
	animation: MoveUpDown 1s linear infinite;
	position: absolute;
	/*left: 10%;*/
	margin-top: 5rem;
	/*margin-left: 5rem;*/
	top: 0;
	/*margin-left: -12rem;*/
    background-size: cover;
    /*margin-top: 15rem;*/
}
	.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;
	}
	.title2 {
		background: url(../images/title2_m.png) center center no-repeat;
		margin-left: -21.5rem;
		background-size: 55%;
		top: 17rem;
	}
	.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: -3.5rem;
 	   transform: scale(0.35);
 	   z-index: 99;
 }
	.pop_elin, .close_pop, .pop .btn.btn_download {
		display: none !important;
	}
	.copyright {
		height: 6rem;
		overflow: hidden;
		background-image: url(../images/copyright.png);
		background-size: 90%;
		background-position: center top;
	}
	table {
		min-width: 100%;
		margin: 0;
	}
	.header3 {
		padding-bottom: 133%;
	}
	.main6 {
		width: 100%;
		background-size: 100%;
	}
	.main7 {
		
	}
	.main8 {
	 	width: 100%;
        height: 27rem;
        margin-bottom: -1.9rem;
        background-size: 100%;
	}



	.main7{
		background: url(../images/main7.png) center center no-repeat;
		position: relative;
		margin: 0 auto;
		width: 100%;
		background-size: 85%;
		height: 33rem;
		display: inline-block;
	}
	.main8{
		background: url(../images/main8.png) center center no-repeat;
		position: relative;
		margin: 0 auto;
		width: 100%;
		background-size: 85%;
		height: 33rem;
		/*margin-bottom: 6.5rem;*/
		display: inline-block;
	}


	.main9 {
		width: 100%;
		height: 26rem;
		margin-top: 2rem;
		margin-bottom: 2rem;
		/*margin-left: 1rem;*/
		background-size: 100%;
	}



	.wrap3 {
		min-width: 100%;
		overflow: hidden;
		padding-bottom: 8%;
	}
	.main10 {
		width: 100%;
		height: 25rem;
		background-size: 100%;
		/*margin-top: -1.5rem;*/
	}
	.main11 {
		position: relative;
        width: 100%;
        height: 230px;
        margin: 0 auto;
        margin-top: 1.5rem;
        /*margin-bottom: 16.5rem;*/
        background-size: 95%;
	}





	.main12{
		background: url(../images/main12.png) center center no-repeat;
		position: relative;
		margin: 0 auto;
		width: 100%;
		height: 46rem;
		/*margin-top: 3%;*/
		background-size: 90%;
	}







	.wrap4 ul {
		/*height: 1780px;*/
		padding-left: 0;

	}





	.main13{
		background: url(../images/main13.png) center center no-repeat;
		position: relative;
		margin: 0 auto;
		width: 100%;
		height: 20rem;
		/*margin-top: 3%;*/
		display: inline-block;
		vertical-align: top;
		margin-top: 3%;
		background-size: 90%;
		margin-left: 5px;
	}

	.main14{
		background: url(../images/main14.png) center center no-repeat;
		position: relative;
		margin: 0 auto;
		width: 100%;
		height: 200px;
		/*margin-top: 3%;*/
		display: inline-block;
		vertical-align: top;
		margin-top: 3%;
		background-size: 90%;
	}




	.vd {
		width: 100%;
		height: 20vh;
		position: relative;
		text-align: center;
		margin-bottom: 20%;
	}



	.main15{
		background: url(../images/main15.png) center center no-repeat;
		position: relative;
		margin: 0 auto;
		width: 100%;
		height: 100px;
		margin-bottom: 10%;
		background-size: 95%;

	}
		.title02 {
			margin-left: -11.8rem;
			top: 3.5rem;
			background-size: 100%;
		}

	.q01 {
		display: none;
	}
	ul.qlink {
		position: fixed;
		top: auto;
		bottom: 0;
		margin-top: 0px;
		left: -35px;
		min-width: 110%;
		height:100px;
		z-index: 99;
	}
	ul.qlink li {
		float: left;
		width: 33%;
	}
	.main3 ul li {
		float: left;
		margin: 0rem 0rem;
	}
	.w3_1, .w3_2, .w3_3, .w3_4, .w3_5, .w3_6, .w3_7, .w3_8, .w3_9{
		width: 33%;
		height: 4rem;
		background-size: 100%;
	}

}


#footerWrap { 
	margin-bottom: 0;
}










@media screen and (min-width:768px) and (max-width:1024px){   
    .navbar-dark .navbar-brand {
		position: relative;
		margin-left: 0;
	}
	.page_1{
		width: 100%;
		height: 100%;
		background-size: 165%;
	}
	.main1{
		height: 24rem;
		background-size: 70%;
        margin-left: -9.8rem;  
		padding-bottom: 0;
	}
	.main2{
		height: 57rem;
		background-size: 70%;
        margin-left: -9.8rem;
	
	}
	.title02 {
		margin-left: -24rem;
        top: 8.5rem;
        background-size: 100%;
	}
	.header3 {
		padding-bottom: 86%;
	}
}













@media screen and (min-width:1025px){   

}


.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); }
}

.windows{
	background: url(../images/windows.jpg) center center no-repeat;
    width: 100%;
    height: 1200px;
}
.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 (min-width: 576px){
.modal-dialog {
    max-width: 1000px;
}
}