@font-face {
	font-family: bentonSans;
	src: url(../font/BentonSans.woff);
}

html,
body
{
  padding: 0;
  margin: 0;
  font-family:bentonSans, Arial, Helvetica, sans-serif, "微軟正黑體", "Microsoft JhengHei", "微軟雅黑體", "Microsoft YaHei", "蘋果儷中黑", "Apple LiGothic Medium";
  color:#FFF;
}

img { border:0; }

/* hide horizontal scrollbars, since we use the vertical ones to scroll to the right */
body
{
  overflow-x: hidden;
}

h1
{
  font-size: 20px;
  font-weight: normal;
  color: #2e6e80;
}

/**
  * important: keep position fixed, you can however use top:0 instead of bottom:0
  * if you want to make it stick to the top of the browser
  */
.scroll
{
  position: fixed;
  top: 0;
  left: 0;
}

.scroll img { width:100%; }

/**
  * z-index ordering of the different layers, do this for your layers,
  * also assign absolute width (to prevent issues if the script gets executed before the images get loaded)
  */
.horizon
{
  z-index: 3;
  width: 1200px;
  top:18%;
}

.middle
{
  z-index: 4;
  width: 1412px;
}

.front
{
  z-index: 5;
  width: 1695px;
}

#logo, #header-text { position:fixed; z-index:5; }

#header-lang, #facebook-logo { position:fixed; z-index:6; top:5%; right:10%; cursor:pointer; border:0px; }

#logo img, #header-text img, #header-lang img, #facebook-logo img { width:100%; }

#logo { top:5%; left:45%; }

#header-text { top:5%; left:4%; }

#facebook-logo { top:5.25%; right:4%; }

.overlay1 {
	position:absolute;
	width:1671px;
	height:1622;
	left:0px;
	top:200%;
}

.overlay1 .bg { position:absolute; width:100% }
.overlay1 .bg img { width:100%; }

.overlay1 .overley-year { position:absolute; top:18%; left:14%; font-size:65px; font-weight:bold;  }
.overlay1 .overley-header { font-size:40px; font-weight:bold; margin-bottom:3%; }
.overlay1 .overley-content { position:absolute; bottom:59%; left:27%; font-size:120%; width:55%; }

.open-button, .open-button2 { position:absolute; background-image:url(1.png); }

.button1 { width:4.05%; height:19%; cursor:pointer; }
.button2 { width:4.95%; height:6.4%; cursor:pointer; }
.button3 { width:4.95%; height:7.8%; cursor:pointer; }
.button4 { width:5.55%; height:6.2%; cursor:pointer; }
.button5 { width:5%; height:8.8%; cursor:pointer; }
.button6 { width:6%; height:6.2%; cursor:pointer; }
.button7 { width:6%; height:8.2%; cursor:pointer; }

.slider { width:800px; height:400px; position:absolute; left:12.2%; top:38%; }

.slider .img { height:400px; margin-right:30px; cursor:pointer; }

.slider .img .image-text { display:none; }

.slick-arrow { width:30px; height:50px; margin-top:-25px; top:50%; background-position:left top; background-repeat:no-repeat; }

.slick-prev, .slick-prev:hover { background-image:url(../images/left-arrow.png)!important; left:-5%; }

.slick-next, .slick-next:hover { background-image:url(../images/right-arrow.png)!important; right:-5%; }

.slick-prev:hover {}

.slick-next:hover {}

.slick-next:before, .slick-prev:before { content:none; }

.image-content-box { position:absolute; top:83%; left:17.2%; text-align:center; width:66%; }

.overlay1 .b-close { position:absolute; top:5%; right:5%; background:url(../images/close.png) left top no-repeat; width:36px; height:36px; cursor:pointer; }

.overlay1 .pop-image { width:800px; position:absolute; left:12.1%; top:2.2%; display:none; height:800px; text-align:center; cursor:pointer; }

.overlay2 { background-color:#EFEFEF; width:100%; height:100%; }

.overlay2 .b-close { position:absolute; bottom:2%; left:2%; background:url(../images/back-btn.png) left top no-repeat; padding-left:45px; padding-right:10px; padding-top:8px; padding-bottom:8px; font-size:22px; cursor:pointer; color:#000; }

.video { position:absolute; top:-200%; right:0px; }

.overlay2 .text-box { position:absolute; left:0; top:0; padding:20px; width:675px; height572px; overflow:hidden; overflow-y:scroll; color:#000; }

.overlay2 .text-box {}

.overlay2 .text-box h1 { width:200px; padding-left:1%; padding-top:2%; }

.overlay2 .text-box h1 img { width:100%; }

.en, .tw { display:none; }