@charset 'UTF-8';
@font-face {
	font-family: "BMWGlobalLight"; 
	src:
	url("font/BMWGlobalLight.woff") format('woff'),
	url("font/BMWGlobalLight.otf") format("opentype"),
	url("font/BMWGlobalLight.eot") format("embedded-opentype");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "BMWGlobalBold"; 
	src:
	url("font/BMWGlobalBold.woff") format('woff'),
	url("font/BMWGlobalBold.otf") format("opentype"),
	url("font/BMWGlobalBold.eot") format("embedded-opentype");
	
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "BMWGlobalReg"; 
	src:
	url("font/BMWGlobalReg.woff") format('woff'),
	url("font/BMWGlobalReg.otf") format("opentype"),
	url("font/BMWGlobalReg.eot") format("embedded-opentype");
	font-weight: normal;
	font-style: normal;
}

/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/
html, body {
	position:relative;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: auto;
	overflow:auto;
	overflow-x:hidden;
	font-family:BMWGlobalReg,"微軟正黑體", "Microsoft JhengHei";
	color:#FFF;
	background-color: #333;
	letter-spacing: 0px;
}
body.modal-open{
	padding-right: 0px!important;
}

img{
	padding:0px;
	margin:0px;
	border:0px;
	width: 100%;
	height: auto;
}
br.clear {
	clear: both;
}
h1,h2,h3,h4,h5,h6 {
	position:relative;
	padding:0px;
	margin:0px;
	overflow:visible;
	display: block;
}
@media screen and (max-width: 1026px) {
	wr{display:inline;}
	nr{display: inline;}
	sr{display: block;}
	.wide{display:none!important;}
	.normal{display:none!important;}
	.small{display:block!important;}
}
@media screen and (min-width: 1026px) and (max-width: 1600px) {
	wr{display: block;}
	nr{display: block;}
	sr{display: inline;}
	.wide{display:none!important;}
	.normal{display:block!important;}
	.small{display:none!important;}
}
@media screen and (min-width: 1368px) {
	wr{display: block;}
	nr{display: inline;}
	sr{display: inline;}
	.small{display:none!important;}
	.normal{display:none!important;}
	.wide{display:block!important;}
}
para{
	display:none;
}
eng{
	font-family: BMWGlobalLight,Arial;
}
engR{
	font-family: BMWGlobalReg,Arial;
}
engB{
	font-family: BMWGlobalBold,Arial;
}

#log {
	position:fixed;
	width:500px;
	height:300px;
	z-index:3000;
	background: #FFF;
	color:#000;
}
/*********************************************************************************/
/* Loading                                                                        */
/*********************************************************************************/
#loading {
	position: fixed;
	background: #000;
	width: 100%;
	height: 100%;
	z-index: 12000;
	left: 0;
	top: 0;
	padding: 0;	
}
#loading .loadPic{
	position:absolute;
	top:calc(50% - 8px);
	left:calc(50% - 8px);
	width:16px;
	height:16px;
}
#loading .loadPic img {
	animation-duration: 1s;
    animation-name: loading;
	animation-iteration-count: infinite;
	animation-timing-function:linear;
}
@keyframes loading {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/
#header {
	position: fixed;
	z-index:5000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	/*border:5px #d5d dotted;*/
}

#navi{
	display:none;
}
#toggleBtn{
	display: none;
}


/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
#footerS{
	display:none;
}

#footer {
	position:absolute;
	display:block;
	width: 100%;
	height: 37px;
	text-align: left;
	margin:0;
	bottom:0;
	z-index:6000;
	overflow:hidden;
	pointer-events: auto;
	border-top:1px #396aa8 solid;
	background-size: 100% 37px;
	background-repeat: repeat-y;
	/*background-image: url(../images/ftBg.jpg);*/
	
	background-color:#060c13;
	/*border:2px #F00 dotted;*/
}

#ftmenu{
	position: absolute;
	display:block;
	top:0px;
	right:37px;
	width:auto;
	height: 37px;
	padding:0px 10px 0 10px;
	text-align:center;
	background-size: 100% 37px;
	background-repeat: repeat-y;
	/*background-image: url(../images/ft2Bg.jpg);*/
	background-color: rgba(0,0,0,0 );
}
#ftmenu .btn{
	position: relative;
	display:inline-block;
	width:auto;
	opacity:1;
	padding:0px;
	margin:0px;
	cursor:pointer;
}

#footer .company p,
#ftmenu .btn p,
#ftmenu .ftLine{
	font-size:11pt;
	font-weight: bold;
	line-height:37px;
	color:#666666;
	/*border:1px #F00 dotted;*/
}
#footer .company p{
	margin-left:20px;
}
#ftmenu .btn p{
	margin:0px;
}
#ftmenu .btn:hover{
	opacity:0.8;
}
#ftmenu .ftLine{
	position: relative;
	display: inline-block;
	width: 10px;
	top:0px;
	margin-left:5px;
	margin-right:-0px;
	line-height:37px;
}

#fbBtn{
	position:absolute;
	top:0px;
	right:0px;
	width:37px;
	height:37px;
	cursor:pointer;
	pointer-events: auto;
	background: #AAA;
	opacity:1;
}
#fbBtn:hover{
	opacity:0.8;
}
#fbBtn img{
	position:absolute;
	bottom:0px;
	right:5px;
}

/*********************************************************************************/
/* page                                                                      */
/*********************************************************************************/
#page{
	position:relative;
	display: block;
	width: 100%;
	/*height:100%;*/
	height:auto;
	/*overflow:visible;*/
	transform-origin: 0px 0px;
	top:0%;
	z-index: 10;
}
.section {
	position:relative;
	display:block;
	margin: 0px;
	padding: 0px;
	top:0px;
	left:0px;
	width:100%;
	height:auto;
	overflow:visible;
	opacity:1;
	/*background-color: #000;
	border:3px #F00 dotted;*/
}

.section .content {
	position:absolute;
	display:block;
	overflow:visible;
	width:100%;
	height:100%;
	padding:0px;
	top:0px;
	left:0px;
	pointer-events: none;
	z-index: 100;
	
}
.section .box{
	position:relative;
	display:block;
	overflow:visible;
	width:86%;
	height: 80%;
	top:0%;
	left:0px;
	margin:auto;
	padding:0px;
	pointer-events: auto;
	text-align: center;
	/*border:5px #F0D dotted;*/
}
.section .bg{
	position:relative;
	display:block;
	width: 100%;
	height:auto;
	top:0px;
	left:0px;
	z-index: 1;
	/**/
}
.section .bg img,
.section ul li .bk img,
.section ul li .pic img,
.logo img{
	width:100%;
	height:auto;
}
	
.section h1,
.section h2,
.section .ti,
.section .txt{
	position:relative;
	display:block;
	line-height:100%;
	overflow: hidden;
	z-index: 100;
	font-family:BMWGlobalLight,"微軟正黑體", "Microsoft JhengHei";
}
.section h1{
	font-size:40pt;
	line-height:120%;
	margin-bottom:20px;
}
.section h2{
	font-size:38pt;
	line-height: 150%;
	margin-bottom:10px;
}
/*.section .ti{
	font-size: 20pt;
	line-height: 120%;
	margin-bottom:5px;
}*/
.section .txt{
	font-size: 16pt;
	line-height: 170%;
	/*border:3px #d55 dotted;*/
}
.tiBox{
}
.tiBox::before,
.tiBox::after{
	position:relative;
	display:block;
	content: "";
	width:1px;
	height:auto;
	margin:auto;
	border-left:1px #FFF solid;
	/**/
}
.tiBox::before{
	height:80px;
	margin-bottom:20px;
}
.tiBox::after{
	height:150px;
	margin-top:20px;
}

.comment{
	font-size:12pt;
	line-height:130%;
	margin-top:10px;
	/*border:2px #00D dotted;*/
}
.section .infoBox{
	list-style-type: none;
	padding-left:0;
}
.section .infoBox li{
	position:relative;
	text-align: left;
	overflow: visible;
	z-index: 10;
	/*border:3px #00D dotted;*/
}
.section .infoBox li .light {
	position:absolute;
	display:block;
	width:100%;
	height: auto;
	z-index: 10;
	pointer-events: none;
}
.section .infoBox li .pic {
	position:relative;
	width:100%;
	height: auto;
	margin-bottom:20px;
	overflow: hidden;
	pointer-events: auto;
	z-index: 20;
}
.section .infoBox li .txt{
	position:relative;
	z-index: 30;
	width:100%;
}

.blueBtn{
	position:relative;
	display:block;
	width:200px;
	height: 50px;
	cursor:pointer;
	pointer-events:auto;
	text-align:center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../images/blueBg.jpg);
	opacity:1;
    color: #fff;
    line-height: 50px;
	font-size:16pt;
	font-weight: bold;
}
.blueBtn:hover{
	background: rgba(7,72,170,1);
}

/*********************************************************************************/
/* home                                                                          */
/*********************************************************************************/
#homeArea {
	/*opacity:0.5;*/
	z-index: 10;
	
}
#homeArea .box{
	top:8%;
	/*max-width:1200px;*/
	text-align: left;
	
}
#homeArea h1{
	width:60%;
	height:auto;
}
#homeArea .logo {
	position: absolute;
	display: block;
	width:15%;
	height:auto;
	top:75%;
	right:3%;
	z-index:2000;
}

/*********************************************************************************/
/* frontArea                                                                          */
/*********************************************************************************/
#frontArea {
	z-index: 5;
}

/*********************************************************************************/
/* outside1Area                                                                          */
/*********************************************************************************/
#outsideArea {
	z-index: 20;
}
#outsideArea ul li{
	
}

#outsideArea .info1{
	width:52%;
	z-index: 70;
	
}
#outsideArea .info1 .txt{
	padding-right:20px;
}
#outsideArea .info2{
	position: absolute;
	display: block;
	top:20%;
	right:0%;
	width:48%;
	z-index: 100;
}
#outsideArea .info2 .txt{
	position: absolute;
	display: block;
	top:-4.5em;
	padding-right:20px;
	margin-left:30px;
}

#outsideArea .info3{
	width:52%;
	left:6%;
	margin-top:5%;
	z-index: 80;
}

#outsideArea .info2 .light{
	width:70%;
	top:-8%;
	left:-20%;
	z-index: 20;
	/*border:1px #d0D dotted;*/
}



/*********************************************************************************/
/* inside1Area                                                                          */
/*********************************************************************************/
#insideArea {
	z-index: 30;
	color:#fef7a0;
}
#insideArea .tiBox::before,
#insideArea .tiBox::after{
	border-left:1px #fef7a0 solid;
}

/*********************************************************************************/
/* insidePicArea                                                                          */
/*********************************************************************************/
#insidePicArea .box{
	width:100%;
	height:100%;
	color:#fef7a0;
	
}

#insidePicArea .infoBox{
	text-align: left;
	/*border:3px #d55 dotted;*/
}
#insidePicArea .infoBox li{
	display: inline-block;
	vertical-align: top;
	margin-bottom:50px;
}
#insidePicArea .infoBox li .txt{
	padding:0 30px 0 30px;
}
#insidePicArea .info1,
#insidePicArea .info3{
	width:51.3%;
}
#insidePicArea .info2,
#insidePicArea .info4{
	position: absolute;
	width:47.7%;
	/*top:0;*/
	right:0;
	z-index: 30;
}
#insidePicArea .info4 .light,
#insidePicArea .info2 .light{
	width:70%;
	top:-8%;
	left:-35%;
	z-index: 20;
	/*border:1px #d0D dotted;*/
}



/*********************************************************************************/
/* backArea                                                                          */
/*********************************************************************************/
#backArea {
	color:#07252e;
}
#backArea .tiBox::before,
#backArea .tiBox::after{
	border-left:1px #07252e solid;
}


/*********************************************************************************/
/* tech1Area                                                                          */
/*********************************************************************************/
#techArea{
	/*color:#c7bf9b;*/
	/*border:2px #F00 dotted;*/
}
#techArea .box{
	/*width:100%;
	height:100%;*/
	
	
}
#techArea .info1{
	width:66%;
	margin-top:0;
	margin-left:0%;
	z-index: 10;
}
#techArea .info1 .light{
	width:10%;
	top:-30%;
	left:-5%;
	z-index: 20;
	
}
#techArea .info1 .txt{
	position: absolute;
	width:58%;
	top:20%;
	left:75%;
	
}
#techArea .info2{
	position: absolute;
	width:70%;
	top:45%;
	left:39%;
	z-index: 30;
}
#techArea .info2 .light{
	width:110%;
	top:-27%;
	left:-22%;
	z-index: 20;
}
#techArea .info2 .txt{
	position: absolute;
	width:90%;
	top:77%;
	left:5%;
	/**/
}



/*********************************************************************************/
/* sideArea                                                                          */
/*********************************************************************************/
#sideArea {
	/*color:#07252e;*/
}
#sideArea .tiBox{
	margin-top:10%;
}
#sideArea .tiBox::before,
#sideArea .tiBox::after{
	border-left:1px #FFF solid;
}


/*********************************************************************************/
/* bookingArea                                                                          */
/*********************************************************************************/
#bookingArea{
	height: 550px;
	z-index:50;
	color:#000;
	background-color: #FFF;
	/*border:2px #F00 dotted;*/
}
#bookingArea .box{
	top:0%;
	width:1100px;
	height:auto;
	text-align: left;
	pointer-events: auto;
}




/*POPUP====================================================*/
.modal{
	background-color: rgba(0,0,0,0.8);
	overflow: hidden!important;
	padding:0px;
	margin:0;
}
/*起點:改由下方往上*/
.modal-centered {
	-webkit-transform: translate(0%, 0%) !important; 
			transform: translate(0%, 0%) !important;
}
.modal.fade.show .modal-centered{
	top:0%;
  	-webkit-transform: translate(0, -0px)!important;
          transform: translate(0, -0px)!important;
}
.modal.fade .modal-centered{
	top:50%;
}
.modal-dialog{
	width:100%;
	max-width: 100%;
	min-width: 100%;
	height:100%;
	padding:0px;
	margin:0;
	/*top:100%;*/
	overflow: hidden;
}
.modal-content{
	width:100%;
	height:100%;
	padding:0px;
	margin:0px;
	border-radius: 0px;
	background-color: rgba(0,0,0,1);
	/*border:3px #D0D dotted;*/
}
.modal-body{
	padding:0px;
	margin:0px;
	width:100%;
	height:100%;
}
#menuModal{
	display: none;
}


/*flexslider====================================================*/
.flexslider{
	position:relative;
	display: none;
	border-radius: 0;
	margin: 0px;
	padding: 0px;
	width:100%;
	/*height:100%;
	background-color: #000;*/
	border:0px #D00 dotted;
}
.flexslider ul{
	width:100%;
	z-index: 90;
	/*height:100%;
	*/
}
.flexslider li,
.flexslider li .item{
	position:relative;
	display: block;
	margin:0;
	padding:0;
	z-index: 90;
	
}

.flexslider .navigation{
	position: absolute;
	display: block;
	width:100%;
	height:100%;
	top:0;
	text-align:center;
	z-index: 100;
	pointer-events: none;
}

.flexslider .controls{
	position:absolute;
	display:block;
	bottom:0%;
	width:100%;
	height:50px;
	z-index: 500;
	/*border:3px #F0D dotted;*/
}
.flexslider .controls .flex-control-nav{
	position:relative;
	display:block;
	top:0%;
	
}
.flexslider .controls li,
.flexslider .controls li a{
	position:relative;
	display:inline-block;
	width:12px;
	height:12px;
	margin-right:10px;
}
.flexslider .controls li:last-child{
	margin-right:0px;
}
.flexslider .controls li a{
	pointer-events: auto;
	background-color:#dcd6ce;
}
.flexslider .controls li a.flex-active{
	background-color:#a61a00;
}

.hit{
	display: none;
	/*border:2px #D00 dotted;*/
}

.flexslider .prevBtn,
.flexslider .nextBtn{
	position: absolute;
	display: block;
	width:5vw;
	height:100%;
	line-height:100%;
	text-align:center;
	cursor: pointer;
	pointer-events: auto;
	/*border:2px #D0D dotted;*/
}
.flexslider .prevBtn{
	left:-0vw;
}
.flexslider .nextBtn{
	right:-0vw;
}
.flexslider .prevBtn .arrow,
.flexslider .nextBtn .arrow{
	position: relative;
	display:inline-block;
	top:50%;
	width:50%;
	height:auto;
	transform:translate(-0%,-50%);
	/*border:2px #D0D dotted;*/
}

.flexslider .prevBtn .arrow img,
.flexslider .nextBtn .arrow img{
	width:100%;
	height:auto;
}
.flex-direction-nav{
	display: none;
}