@font-face {
	font-family:'ITCEDSCR';
	src:url('https://asset.msi.com/event/nb/2018/gs65/fonts/ITCEDSCR.TTF');
}
* {
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  box-sizing: border-box; }
#gs65 {
      margin: 0;
      -webkit-font-smoothing: antialiased;
      background:#000;
      -webkit-transition: opacity 300ms;
      -moz-transition: opacity 300ms;
      transition: opacity 300ms;
	  font-family:'DINPro-Light';
	  
	  }

#gs65 .header{
  color: #fff;
}

#gs65 .main p {
  color: #fff !important;
  font-size: 1.5em;
}
#gs65 .main a{color:#c9b77b; font-size:1em;}
#gs65 .main a:hover{ text-decoration:none;}
#gs65 svg{ color:#FF0004; font-size:1.5em;}
.nav-top a {
  color: #ecf0f1;
}
/*POP*/

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 378px;
    padding: 1px;
    text-align: left;
    white-space: normal;
    background-color: #fff;
	line-height:1.5em;
	font-size:1.3em;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 0px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
/* ALL DEMO */
#gs65 h1 {
  color: #fff;
 font-family: 'din_pro_bold';
 font-style:italic;
  font-size:3em;
  text-transform:uppercase;
}
#gs65 h2{
	color:#FF0004;
 	font-family: 'din_pro_bold';
	font-size:2em;
	}
#gs65 h3{
	color: #000;
    display: inline-block;
    padding-bottom: 5px;
    text-transform: uppercase;
    font-family: 'din_pro_bold';
    background: #fff;
    padding: 10PX;
}
#gs65 li{
	list-style:none;
	color:#DCDCDC;
	font-size:1.3em;
	}
#gs65 .main {
  margin-top: -45px;
}

#gs65 .menu, #gs65 .header, #gs65 .nav-top {
  margin-bottom: 0;
  position: relative;
  z-index: 10;
  padding-top: 15px;
}

#gs65 .main .box1{
  background: url(../images/kv.jpg) center top no-repeat ;
  padding-top:4%;
}

#gs65 .top-title{margin:10% 0px; }
.main section.page1 .page_container h1 {
  letter-spacing: -1px;
  font-weight: 100;
  font-size: 40px;
}

.main section.page1 .page_container p{
  line-height: 160%;
}


.nav-top span.right a {
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
/*mb-box*/

#gs65 .mb-box img{ padding-bottom:12%;}
.mb-bg{ width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; top:0px; z-index:0}
#gs65 .mb-box1:hover .mb-bg,#gs65 .mb-box2:hover .mb-bg,#gs65 .mb-box3:hover .mb-bg,#gs65 .mb-box4:hover .mb-bg{ background:rgba(0,0,0,0.0);}
#gs65 .mb-box1{
	background-image:url(../images/mb-box1.jpg);
	background-position:center;
	background-repeat:repeat;
	position:relative;
	z-index:2
	}
#gs65 .mb-box2{
	background:url(../images/mb-box2.jpg)  center no-repeat;
	position:relative;
	z-index:2
	}
#gs65 .mb-box3{
	background:url(../images/mb-box3.jpg)  center no-repeat;
	position:relative;
	z-index:2
	}
#gs65 .mb-box4{
	background:url(../images/mb-box4.jpg)  center no-repeat;
	position:relative;
	z-index:2
	}
#gs65 .mb-box1 ,#gs65 .mb-box2, #gs65 .mb-box3, #gs65 .mb-box4{
	background-size:150%;
	background-position: center;
	background-repeat:no-repeat;
	padding:3% 0px 0% 0px;
    -webkit-transition: 0.5s ease-in-out;
    transition:all 0.5s ease-in-out
	}
#gs65 .mb-box1:hover ,#gs65 .mb-box2:hover, #gs65 .mb-box3:hover, #gs65 .mb-box4:hover{
	background-size:220%;
	}
#gs65 .mb-box1 img,#gs65 .mb-box2 img, #gs65 .mb-box3 img, #gs65 .mb-box4 img{
	opacity:1;
	-webkit-transition: 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
	z-index:1;
	position:relative;
	}
#gs65 .mb-box1:hover img,#gs65 .mb-box2:hover img, #gs65 .mb-box3:hover img, #gs65 .mb-box4:hover img{
	opacity:0;
	-webkit-transition: 0.5s ease-in-out;
    transition:all 0.5s ease-in-out
	}
#gs65 .mb-boxtitle{
	background:rgba(0,0,0,0.5);
	padding:2%;
	text-align:center;
	z-index:1;
	position:relative;
	}
#gs65 .mb-boxtitle p{
	padding-bottom:8%;
	}
#gs65 .B360M{
	background-image:url(../images/mb-2box1.jpg);
	background-position:right top;
	background-repeat:no-repeat;
	margin-top:2%;
	padding:5% 0px;
	}
#gs65 .B360{
	background-image:url(../images/mb-2box2.jpg);
	background-position:right top;
	background-repeat:no-repeat;
	margin-top:2%;
	padding:5% 0px;
	}
#gs65 .CARBON{
	background-image:url(../images/mb-2box3.jpg);
	background-position:right top;
	background-repeat:no-repeat;
	margin-top:2%;
	padding:5% 0px;
	}
#gs65 .ARCTIC{
	background-image:url(../images/mb-2box4.jpg);
	background-position:right top;
	background-repeat:no-repeat;
	margin-top:2%;
	padding:5% 0px;
	}
#gs65 .min-title{
	padding-top:3%;
	}
#gs65 .min-title2{
	padding-top:3%;
	}
#gs65 .min-title h1{
	font-size:6.3em;
	text-transform:none;
	font-style:inherit;
	padding:0px;
	margin:0px;
	color:#FF0004 !important;
	}
#gs65 .min-title h2{
	  font-family:'DINPro-Light';
	  color:#fff;
	  padding:0px;
	  margin:0px;
	font-size:3em;
	}
#gs65 .title-container h4{
	font-family: 'din_pro_bold';
	color:#fff;
	}
#gs65 .min-title ul{ margin-top:5%}	
#gs65 .min-title li{
	display:block;
	background:rgba(255,0,4,0.3);
	border:#f00 solid 2px;
	height: 33px;
    margin-bottom: 9px;
	}
#gs65 .min-title strong{
	background: #f00;
    display: block;
    padding: 0px 15px;
	font-family: 'din_pro_bold';
	color:#000000;
	font-size:1.2em;
	}
#gs65 .min-title img{
	margin-top: -40%;
    padding: 1%;
	}
	
#gs65 .min-title p{
	padding:15px;
	color:#fff;
	background:rgba(0,0,0,0.5);
	}




/*--按鈕--*/
.bt{
			position: relative;
			text-align: center;
			width: 100%;
		}
.specbox{
			position: absolute;
			bottom:140%;
			color:#000;
			background:#fff;
			padding: 15px;
			width: 70%;
			left: 15%;
			display:none;
		}


.ui-box {
  text-decoration: none;
  border: none;
  position: relative;
  vertical-align: baseline;
  padding: 10px;
  background:rgba(255,255,255,0.3)
}


.border-inOutSpread:before, .border-inOutSpread:after, .border-inOutSpread > .ui-border-element:before, .border-inOutSpread > .ui-border-element:after {
  content: '';
  position: absolute;
}

.border-inOutSpread:before {
  border-top: 2px solid #fff;
  left: 51%;
  right: 51%;
  top: 0px;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -moz-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -o-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.border-inOutSpread:hover:before {
  left: 0%;
  right: 0%;
}

.border-inOutSpread:not(:hover):before {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.border-inOutSpread:before, .border-inOutSpread:after, .border-inOutSpread > .ui-border-element:before, .border-inOutSpread > .ui-border-element:after {
  content: '';
  position: absolute;
}

.border-inOutSpread .ui-border-element:after {
  border-right: 2px solid #fff;
  top: 50%;
  bottom: 50%;
  right: 0px;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -moz-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -o-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.border-inOutSpread:hover .ui-border-element:after {
  top: 0%;
  bottom: 0%;
}

.border-inOutSpread:not(:hover) .ui-border-element:after {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.border-inOutSpread:before, .border-inOutSpread:after, .border-inOutSpread > .ui-border-element:before, .border-inOutSpread > .ui-border-element:after {
  content: '';
  position: absolute;
}

.border-inOutSpread:after {
  border-bottom: 2px solid #fff;
  left: 51%;
  right: 51%;
  bottom: 0px;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -moz-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -o-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.border-inOutSpread:hover:after {
  left: 0%;
  right: 0%;
}

.border-inOutSpread:not(:hover):after {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.border-inOutSpread:before, .border-inOutSpread:after, .border-inOutSpread > .ui-border-element:before, .border-inOutSpread > .ui-border-element:after {
  content: '';
  position: absolute;
}

.border-inOutSpread .ui-border-element:before {
  border-left: 2px solid #fff;
  top: 50%;
  bottom: 50%;
  left: 0px;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -moz-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -o-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.border-inOutSpread:hover .ui-border-element:before {
  top: 0%;
  bottom: 0%;
}

.border-inOutSpread:not(:hover) .ui-border-element:before {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

#wtb{
	background: -webkit-linear-gradient(#161616,#1f1f1f);
    background: -o-linear-gradient(#161616,#1f1f1f);
    background: -moz-linear-gradient(#161616,#1f1f1f);
    background: linear-gradient(#161616,#1f1f1f);
    padding: 80px 0 50px 0;
	font-size:0.5em;
	color:#6A6A6A;
}

#wtb a{
	display: block;
	background: #fff; /* For browsers that do not support gradients */    
    background: -webkit-radial-gradient(#fff, #d9d9d9, #8e8e8e); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(#fff, #d9d9d9, #8e8e8e); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(#fff, #d9d9d9, #8e8e8e); /* For Firefox 3.6 to 15 */
    background: radial-gradient(#fff, #d9d9d9, #8e8e8e); /* Standard syntax (must be last) */
	border-radius: 5px; 
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
	margin-bottom: 10px;
}

#wtb .buybox{
	margin-top: 30px;
}
#Legal {
    text-align: left;
    margin: 0.1% 0;
}
#Legal hr{
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0;
    border-top: 1px dashed rgba(46,44,44,1.00); 
}
#gs65 .main #Legal p{
    color: #888 !important;
    font-size: 1.2em !important;
}
#menu li {
    display:inline-block;
    margin: 5px;
    color: #000;
    font-size: 21px;
    background:#fff;
    background: rgba(255,198,0,0.8);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#menu li.active{
    background: transparent;
    color: #e9d284;
}
#menu li a{
    text-decoration:none;
    color: #000;
}
#menu li.active a:hover{
    color: #000;
}
#menu li:hover{
    background: rgba(233,210,132, 0.5);
}
#menu li a,
#menu li.active a{
    display:block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
#menu li.active a{
    color: #e9d284;
}
#menu{
    position:fixed;
    bottom:20px;
    right:10px;
    height: 40px;
    z-index: 70;
    text-align: right;
    padding: 0;
    margin:0;
}

#topnav {
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: 50000000000;
  position:relative
}

#topnav ul {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

#topnav ul li {
  display: table-cell;
  width: 33%;
  text-align: center;
}

#topnav ul li a {
  display: block;
  background: #ff1a00;
  color: #fff;
  padding: 10px 0;
  vertical-align: none;
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  border: #ff1a00 3px solid;
  -webkit-transition: 0.5s all ease-in 0.1s;
  -o-transition: 0.5s all ease-in 0.1s;
  transition: 0.5s all ease-in 0.1s;
}

#topnav ul li a:hover {
  background: rgba(255, 255, 255, 0.8);
  color: #ff1a00;
  border: #fff 1px solid;
  border-bottom: #ff1a00 1px solid;
  text-decoration:none;
}

#topnav ul li a.line {
  border-left: #fff 1px solid;
}
@media screen and (max-width:960px){
  #topnav ul li{
    width: 100% !important;
    display:block !important;
  }
  #topnav ul li a{
    padding: 5px !important;
    font-size: 20px !important;
    border:none !important;
    border-bottom: #fff 1px solid !important;
  }
}
.fixed {
    position: fixed !important;
    z-index: 10000;
}
.title-container{ margin-top:2%;}
.title-container p{
	}
/* Top */
ul {
	list-style: none;
}
.navbar-fix {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 999;
	margin-right: 0;
	margin-bottom: 0;
	vertical-align: middle;
	text-align: right;
	width: 9%
}
.navbar-fix a {
	display: block;
	margin: 0;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	opacity: .75;
	vertical-align: middle;
	text-decoration:none;
}
.nav-icon a {
	background-color: rgba(220,220,220,1);
	display: inline-block
}
.top-icon a {
	font-size: 12px;
	color: #fff;
	text-align: center;
	display: inline-block;
	padding: 0;
	margin: 0;
	background-color: rgba(220,0,0,1);
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease
}
.navbar-fix a:hover {
	opacity: 1
}
.fa-icon {
	display: block;
	font-size: 26px;
	color: #000;
	padding: 0;
	margin: 0
}
.nav-icon .fa-facebook-f:before, .nav-icon .fa-facebook:before {
	content: "\f09a";
	padding: 0 5px
}	

/*-----前後圖片比較------*/


		.ba-slider {
		  position: relative;
		  overflow: hidden;
		}
		.ba-slider img {
		  width: 100%;
		  display: block;
		}
		.resize {
		  position: absolute;
		  top: 0;
		  left: 0;
		  height: 100%;
		  width: 50%;
		  overflow: hidden;
		}
		.handle {
		  /* Thin line seperator */
		  position: absolute;
		  left: 50%;
		  top: 0;
		  bottom: 0;
		  width: 4px;
		  margin-left: -2px;
		  background: rgba(0, 0, 0, 0.5);
		  cursor: ew-resize;
		}
		.handle:after {
		  /* Big orange knob  */
		  position: absolute;
		  top: 50%;
		  width: 64px;
		  height: 64px;
		  margin: -32px 0 0 -32px;
		  content: '\21d4';
		  color: white;
		  font-weight: bold;
		  font-size: 36px;
		  text-align: center;
		  line-height: 64px;
		  background: #ffb800;
		  /* @orange */
		  border: 1px solid #e6a600;
		  /* darken(@orange, 5%) */
		  border-radius: 50%;
		  transition: all 0.3s ease;
		  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 60px 50px -30px #ffd466;
		  /* lighten(@orange, 20%)*/
		}
		.draggable:after {
		  width: 48px;
		  height: 48px;
		  margin: -24px 0 0 -24px;
		  line-height: 48px;
		  font-size: 30px;
		}
		.great{
			margin-top:3%;
			}
/*-------------------*/
.event_area {
    overflow: hidden;
    height: 700px;
}
	.event_area form{
	margin-bottom: 20px;
}
.event_area .form-control{
	margin-right: 20px;
}
.form-control{
		margin-bottom:20px;
	}
.msical-event a .msical-event-heading{
	transition: all 0.2s;
}
.msical-event a:focus  .msical-event-heading,
.msical-event a:hover  .msical-event-heading{
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.75);
	transform: scale(1.25,1.25);
	z-index: 1;
}
.msical-event a .msical-event-image-overlay{
	opacity: 0;
	transition: all 0.2s;
}
.msical-event a:focus .msical-event-image-overlay,
.msical-event a:hover .msical-event-image-overlay{
	opacity: 0.85;
}
.msical-event a .msical-event-image .msical-event-name{
	opacity: 0;
	transform: scale(0.75,0.75);
	transition: all 0.4s;
}
.msical-event a:focus .msical-event-image .msical-event-name,
.msical-event a:hover .msical-event-image .msical-event-name{
	opacity: 1;
	transform: scale(1,1);
}
.msical-event-heading{
	background-color: #000000;
	border: thin solid #ff0000;
	border-radius: 5px;
	margin-bottom: 20px;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	width: 100%;
	z-index: 0;
}
.msical-event-name{
	bottom: 0;
	color: #ff0000;
	display: table;
	font-family: "DINCondMediumRegular", "bebas_neue_cyrillicregular", "BebasNeueTurkishSubset", "BebasNeuePolishSubset", "DIN Pro", "微軟正黑體", "新細明體", Helvetica, Arial, sans-serif;;
	font-size: 48px;
	height: 100%;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	text-align: center;
	text-transform: uppercase;
	top: 0;
	width: 100%;
}
.msical-event-name > *{
	bottom: 0;
	display: table;
	font-size: 48px;
	height: auto;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
}
.msical-event-image{
	background-position: 50% 50%;
	background-size: 100% auto;
	background-size: cover;
}

.msical-event-image .msical-event-name{
	color: #fff;
}
.msical-event-image-overlay{
	background-color: #000;
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: -1;
}
.msical-event-details{
	overflow: auto;
	color:#FF0004;
}
.msical-event-details dt{
/*	clear: left;*/
}
.msical-event-details dd{
	float: left;
}
.msical-event-enddate::before{
	content: "- ";
}
.msical-event-startdate-icon{
	background-color: #ffffff;
	border-radius: 5px;
	color: #000000;
	display: inline-block;
	margin-right: 10px;
	padding: 5px 8px;
}
.msical-event-startdate-j{
	display: block;
	font-size: 2em;
	font-weight: bold;
	line-height: 0.8em;
	text-align: center;
}
.msical-event-startdate-F{
	display: block;
	font-family: "DINCondMediumRegular", "bebas_neue_cyrillicregular", "BebasNeueTurkishSubset", "BebasNeuePolishSubset", sans-serif;
	font-size: 1.2em;
	letter-spacing: 0.2em;
	line-height: 0.8em;
	margin-top: 5px;
	text-align: center;
	text-indent: 0.2em;
	text-transform: uppercase;
}
.msical-event-startdate-F abbr,
.msical-event-enddate-F abbr{
	border-bottom: none;
	cursor: inherit;
	text-decoration: none;
}
.msical-event-startdate-l{
	display: none;
}
.msical-event-startdate-Y{
	display: none;
}
.msical-event-startdate-G,
.msical-event-enddate-G{
	display: none;
}
.msical-event-startdate-i,
.msical-event-enddate-i{
	display: none;
}
.msical-event-startdate-i:before,
.msical-event-enddate-i:before{
	content: ":";
}
.msical-event-location-name:after{
	content: ",";
}

.onepage-pagination li a{
  width: 8px;
  height: 8px;
  
}
.onepage-pagination li a:before{
  width: 8px;
  height: 8px;

}

.onepage-pagination li a.active:before{
  width: 10px;
  height: 10px;
}