@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:#000;
	background-color: #FFF;
	font-size:14pt;
}
body.modal-open{
	padding-right: 0px!important;
}

img{
	width:100%;
	height:auto;
	opacity:1;
}
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: 1600px) {
	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;
}


/*********************************************************************************/
/* page                                                                      */
/*********************************************************************************/
#page{
	position:relative;
	display: block;
	width: 100%;
	/*height:100%;*/
	height:auto;
	/*overflow:visible;*/
	transform-origin: 0px 0px;
	top:0%;
	z-index: 10;
	/*border:10px #F00 dotted;*/
}
.section {
	position:relative;
	display:block;
	margin: 0px;
	padding: 0px;
	top:0px;
	left:0px;
	width:100%;
	height:auto;
	overflow:hidden;
	margin-bottom:70px;
	/*background-color: #000;*/
	/*border:3px #F00 dotted;*/
}
.section .content {
	position:relative;
	display:block;
	overflow:hidden;
	width:100%;
	height:auto;
	padding:0px;
	top:0px;
	left:0px;
	pointer-events: none;
	z-index: 100;
}
.section .box{
	position:relative;
	display:block;
	width:90%;
	height: 100%;
	max-width:1170px;
	top:0%;
	left:0px;
	margin:auto;
	padding:0px;
	pointer-events: auto;
	text-align: left;
	/*border:5px #F0D dotted;*/
}
.section .bg{
	position:relative;
	display:block;
	width: 100%;
	height:auto;
	top:0px;
	left:0px;
	z-index: 1;
	/**/
}
.section .tiBox,
.section .txtBox{
	position:relative;
	display:block;
	width:100%;
	height:auto;
	/*border:5px #F0D dotted;*/
}

.section h2,
.section h3,
.section h4,
.section .ti,
.section .txt{
	position:relative;
	display:block;
	z-index: 100;
}
.section .icon{
	
}
.section h4{
	font-size:1em;
	line-height:120%;
}
.section h3{
	font-size:1.2em;
	line-height:120%;
	margin-bottom:0.5em;
}

.section .ti{
	font-size: 1.2em;
	line-height: 120%;
	margin-bottom:0em;
}
.section h2{
	font-size:2.2em;
	line-height: 130%;
	margin-bottom:0px;
}
.section .txt{
	font-size: 1em;
	line-height: 150%;
	/*border:3px #d55 dotted;*/
}

/*********************************************************************************/
/* home                                                                          */
/*********************************************************************************/
#homeArea {
	/*opacity:0.5;*/
	margin-bottom:70px;
	z-index: 10;
}
#homeArea .box{
	
}
#homeArea .tiBox{
	margin:5em 0 5em 0;
	/*border:3px #d55 dotted;*/
}
.sliderMenu,
.sliderMenu .row{
	padding:0;
	margin:0;
	width:100%;
	max-width: 100%;
	outline: none;
}

.sliderMenu .col{
	pointer-events: auto;
	cursor: pointer;
	background-repeat: no-repeat;
	background-size:cover;
	background-image: url(../images/btnBg.jpg);
	border:1px #d7d7d7 solid;
	border-right:0;
	outline: none;
}
.sliderMenu .col:last-child{
	border-right:1px #d7d7d7 solid;
}
.sliderMenu .col.active{
	color:#1c69d4;
}
.sliderMenu .col.active .icon{
	filter:grayscale(0);
}
.sliderMenu .col:hover{
	opacity: 0.7;
}
.sliderMenu .col .icon{
	width:66px;
	height:auto;
	margin:20% auto 1em auto;
	filter:grayscale(1);
}
.sliderMenu .front{
	position:absolute;
	display:block;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-align: center;
	/*border:3px #d55 dotted;*/
}
#accordion{
	display: none;
}
#homeSlider{
	height:20em;
	background-repeat: no-repeat;
	background-size:cover;
	background-image: url(../images/infoBg.jpg);
}
#homeSlider .slider{
	height:100%;
	padding:0;
	
}
#homeSlider .slider .slide{
	width:100%;
	height:20em;
	min-height: 100%;
	margin:0;
	color:#1c69d4;
	outline: none;
}
#homeSlider .txtBox{
	display:block;
	height:15em;
	padding:5em 2em 2em 2em;
	border-bottom:1px #1c69d4 solid;
	/*border:3px #d55 dotted;*/
}
.blueBtn{
	position:absolute;
	display:block;
	height:2.5em;
	line-height:2.5em;
	padding:0 3em 0 3em;
	bottom:0;
	color:#FFF;
	pointer-events: auto;
	cursor: pointer;
	background-color:#1c69d4;
}
.blueBtn:hover{
	background-color:#77a5e4;
}

/*********************************************************************************/
/* interArea                                                                          */
/*********************************************************************************/
#interArea {
	
}
#transArea .txtBox,
#interArea .txtBox{
	position:absolute;
	display:block;
	color:#FFF;
	top:2em;
	left:2em;
	z-index: 300;
	
}
/*********************************************************************************/
/* transArea                                                                          */
/*********************************************************************************/
#transArea{
	
	
}
.moreBtn{
	position:relative;
	display:inline-block;
	width:auto;
	height:3.5em;
	padding:0 6em 0 6em;
	color:#000;
	z-index: 300;
	pointer-events: auto;
	cursor: pointer;
	background-color: #aaaaaa;
	border-top:1px #FFF solid;
	border-bottom:1px #FFF solid;
	/*border:3px #d55 dotted;*/
}

.moreBtn .line{
	position:absolute;
	display:block;
	height:auto;
	z-index: 100;
	pointer-events: none;
	/*border:2px #d55 dotted;*/
}
.moreBtn p{
	position:relative;
	display:block;
	z-index: 200;
	font-weight: bold;
	line-height: 3.5em;
}
.moreBtn.gray{
	position:absolute;
	right:6em;
	top:2em;
}
.moreBtn.gold{
	top:2em;
	color:#FFF;
	border-top:1px #cbbb7b solid;
	border-bottom:1px #cbbb7b solid;
	background-color: rgba(100, 100, 100, 0.5);
    -webkit-backdrop-filter: blur(5px);    
    backdrop-filter: blur(5px);    
}
.moreBtn.gray .line{
	top:-3em;
	left:-20%;
	width:150%;
}
.moreBtn.gray:hover{
	background-color: rgba(200, 200, 200, 0.8);
}
.moreBtn.gold .line{
	top:-8em;
	left:-20%;
	width:200%;
}
.moreBtn.gold:hover{
	background-color: rgba(100, 100, 100, 0.9);
}