@charset "UTF-8";
/* ================================ */
/* 請改scss並編譯成css，不要直接改css */
/* ================================ */

body {
  margin: 0;
  padding: 0;
  font-family: "Regular", sans-serif;;-webkit-text-size-adjust:100%;
  font-size: 100%;
  color: #333;
  -webkit-text-size-adjust: none;
  margin: 0;
  padding: 0;
  /*font-family:"微軟正黑體","sans-serif";-webkit-text-size-adjust:100%;*/
  overflow: hidden;
}

/*=======================↓reset↓=======================*/
img {
  border: 0;
}

input {
  font-family: MyCustomFont, sans-serif;
  font-size: 100%;
  color: #333;
}

/*=======================↑reset↑=======================*/


/*=======================↓Loading↓=======================*/
#LoadingBox {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 3;
}

#LoadingBox:after {
  position: absolute;
  content: "";
  border: 10px solid #f3f3f3;
  /* Light grey */
  border-top: 10px solid #333333;
  /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  top: 50%;
  left: 50%;
  margin-top: -35px;
  margin-left: -35px;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/*=======================↑Loading↑=======================*/
#preloadBox{
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  z-index: 0;
}
#WrapperBox{
	margin:0 auto;
	width:2048px;
	height:1536px;
	position: relative;
	font-size: 1em;
	overflow: hidden;
	z-index: 1;
	background-color: #ffffff;
}
#WrapperBox .warn {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #ffffff;
  z-index: 99;
  display: none;
}
#WrapperBox .warn img{
  position: absolute;
  width: 60%;
  top:11%;
  left: 20%;
}

#WrapperBox .warn p {
  position: relative;
  font-size: 10vmin;
  text-align: center;
  margin: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media (orientation: portrait) {
  /* 直式樣式 */
  #WrapperBox .warn {
    display: block;
  }
}

.start_page{
	position: relative;
	top:0;
	left:0;
  width: 100%;
  height:100%;
}
.start_page .bg{
	position: relative;
	width:100%;
	height:100%;
  z-index: 0;
}
.start_page .logo{
  position: absolute;
  top: 7%;
  width: 71.8%;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}
.start_page .start_page_subhead{
  position: absolute;
  top: 81.5%;  
  width: 35%;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%); 
}
.start_page .gomap_btn{
  position: absolute;
  top:86.5%;
  left: 39%;
  width: 21%;
  z-index: 1;
  cursor: pointer;
}
.start_page .loadtext{
  position: absolute;
  top: 86%;
  left: 28%;
  width: 44%;
  text-align: center;
  font-size: 1.3em;

}
.start_page .setting_btn{
  position: absolute;
  bottom:5%;
  left:8%;
  width: 8%;  
  cursor: pointer;
}
.start_page .language_btn{
  position: absolute;
  bottom:5%;
  right:8%;
  width: 8%;  
  cursor: pointer;
}
.iframe_page{
  position: relative;
  width: 100%;
  height:100%;
  display: none;
}
.con_page,
.con_page #demos .owl-carousel{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  z-index: 1;
}

.con_page #demos,
.con_page #demos .row,
.con_page #demos .row .large-12,

.con_page #demos .owl-carousel .item
{
  position: relative;
  width: 100%;  
  height: 100%;
  overflow: hidden;
}
.con_page .item{
  position: relative;
  background: #ffffff;
}
.con_page .item .owl_img{
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  z-index: 0;
}
.con_page .item .owl_img_text{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.con_page .item .owl_img_text:nth-child(3){
  opacity: 0;
}
.con_page.en .item .owl_img_text:nth-child(2){
  opacity: 0;
}
.con_page.en .item .owl_img_text:nth-child(3){
  opacity: 1;
}
.con_page #demos .row .large-12{
  background: #ffffff;
}
#demos .owl_gomap_btn{
  position: absolute;
  bottom:2%;
  right:2%;
  width: 7%;  
  cursor: pointer;
  z-index: 3;  
}
#demos .next_img{
  position: absolute;
  bottom:0%;
  left:50%;
  margin-left: -3.5%;
  width: 7%;  
  cursor: pointer;
  z-index: 3;  
  transform: scale(0.7);
  display: none;
}
#demos .next_img .pic_arrow{
  width: 100%;
  position: relative;

}
#demos .next_img .pic_hand{
  width: 100%;
  position: absolute;
  top:8%;
  animation: _xx 1.8s ease-out infinite;
  /*left:2em;*/
}
@keyframes _xx
{
0% {transform: translateX(-6em);}
50% {transform: translateX(-10em);}
100% {transform: translateX(-6em);}
}
.con_page .con_page_v{
  position: absolute;
  top:0;
  left: 0;
  background: #ff0000;
  color:#000000;
  z-index: 50;
}
/*.main_div1{
  width: 232.78688%;
  height:100%;
}*/
.map_page{
  position: relative;
  width: 100%;
  height:100%;
  display: none;
  overflow: hidden;
}
.lightbox{
  position: absolute;
  z-index: 50;
  width: 100%;
  height:100%;
  top:0;
  left:0; 
  display: none;  
}
.lightbox_sound{
  display: block;
}
.lightbox_cover{
  background-color: rgba(0, 0, 0, 0.8);
  background-image:url(about:blank); 
  position: absolute;
  z-index: 1;
  width: 100%;
  height:100%;

}
.lightbox_sound .sound_lightbox{
  position: absolute;
  z-index: 2;
  width: 77%;
  top:24%;
  left: 11%;
}
.lightbox_sound .close_btn{
  position: absolute;
  z-index: 3;
  width: 7%;
  top:20%;
  right: 10%;
  cursor: pointer;
}
/*c*/
.lightbox_c{
  /*display: block;*/
}
.lightbox_c .c_lightbox{
  position: absolute;
  z-index: 2;
  width: 100%;
  top:0%;
  left: 0%;
}
.lightbox_c .close_btn{
  position: absolute;
  z-index: 3;
  width: 9%;
  top:82%;
  right: 9%;
  cursor: pointer;
}
/*c end*/
/*setting*/
.lightbox_setting{
  /*display: block;*/
}
.lightbox_setting .setting_lightbox{
  position: absolute;
  z-index: 2;
  width: 82%;
  top:21%;
  left: 9%;
}
.lightbox_setting .close_btn{
  position: absolute;
  z-index: 3;
  width: 7%;
  top:18%;
  right: 7%;
  cursor: pointer;
}
.setting_options_outer{
  position: absolute;
  width: 100%;
  text-align: center;
  bottom:40%;
  left: 0;
  z-index: 3;
}
.setting_options_outer .setting_options{
  width: 18%;
  margin:0 2%;   
  display: inline-block;
}
/*setting end*/
.lightbox_language{
  
}
.lightbox_language .language_lightbox{
  position: absolute;
  z-index: 2;
  width: 82%;
  top:5%;
  left: 9%;
}
.lightbox_language .close_btn{
  position: absolute;
  z-index: 3;
  width: 7%;
  top:3%;
  right: 7%;
  cursor: pointer;
}
.language_options_outer{
  position: absolute;
  width: 100%;
  text-align: center;
  bottom:44%;
  left: 0;
  z-index: 3;
}
.language_options_outer .language_options_in{
  width: 29%;
  margin:0 2%;   
  color:#451b1b;
  display: inline-block;
  font-size: 2em;
  font-weight: bolder;
}
.language_options_outer .language_current_arrow{
  width: 7%;
}
.language_options_outer .language_options{
  width: 73%;  
}

.btn_hover{
  cursor: pointer;
}
.btn_hover:hover{
  animation: _breathe 1s linear infinite;
}
@keyframes _breathe
{
0% {transform: scale(1);}
40% {transform: scale(0.95);}
80% {transform: scale(1);}
}
.btn_hover2{
  cursor: pointer;
}
.btn_hover2{
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;  
  -webkit-filter:brightness(1);
}
.btn_hover2:hover{
  -webkit-filter:brightness(1.2);
}
.language_current_arrow_en,.language_options_en_text{
  opacity: 0;
}
.audio1,.audio2{
  position: absolute;  
  left: 4%;
  width: 7%;
  z-index: 1;
  cursor: pointer;
}
.audio1{
  top:4%;
}
.audio2{
  top:16%;
}
.contentmap{
  position: relative;
  width: 100%;
  height:100%; 
  overflow: hidden;
  z-index: 2;
}
.contentmap-img{
  height:100%;
}
.contentmap-img_outer{
  position: relative;
}
.contentmap-jpg{
  position: absolute;
  top:0;
  left:0;
  width: 231.34765625%;
  height: 100%;
  z-index: 0;
  cursor: e-resize;
}
.contentmap .mapbtn{
  position: absolute;
  pointer-events: auto;
  z-index: 2;
}
.contentmap .mapbtn img{
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}
.contentmap .map_btn1{
  width: 34.91%;
  top: 44.8%;
  left: 22%;
}
.contentmap .map_btn2{
  width: 52.34%; 
  top: 69%;
  left: 62%;
}
.contentmap .map_btn3{
  width: 38.09%;
  top: 3%;
  left: 115%;
}
.contentmap .map_btn4{
  width: 38.04%;
  top: 49%;
  left: 174%;
}
.map_home{
  position: absolute;
  width: 7.2%;
  bottom: 4%;
  left: 4.4%;
  z-index: 2;
  cursor: pointer;
}
.contentmap .map_title{
  position: absolute;
  width: 27.8%;
  top: 7%;
  left: 12%;
  z-index: 2;
}
/*@keyframes _breathe
{
0% {transform: brightness(1);}
40% {transform: brightness(0.5);}
80% {transform: brightness(1);}
}
*/

/*-webkit-filter:brightness(1.1);*/

/*class*/
.class_page{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  z-index: 2;
  /*display: none;*/
}
.class_page .bg{
  position: relative;
  width:100%;
  height:100%;
  z-index: 0;
}

.class_page .class1_main_title{
  position: absolute;
  top:4.5%;
  left: 2%;
  width: 67.6%;
  z-index: 1;  
}
.class_page .class_main_gobtn{
  position: absolute;
  top:87%;
  left: 39%;
  width: 21%;
  z-index: 1;
  cursor: pointer;
}
.class_page .class_main_gomap_btn{
  position: absolute;
  bottom:5%;
  left:6%;
  width: 8%;  
  cursor: pointer;
}
.class_page .language_btn{
  position: absolute;
  bottom:5%;
  right:6%;
  width: 8%;  
  cursor: pointer;
}

.class_page .class2_main_title{
  position: absolute;
  top:4.5%;
  left: 2%;
  width: 67.6%;
  z-index: 1;  
}
.class_page .class3_main_title{
  position: absolute;
  top:4.5%;
  left: 2%;
  width: 74.6%;
  z-index: 1;  
}
.class_page .class4_main_title{
  position: absolute;
  top:4.5%;
  left: 2%;
  width: 67.6%;
  z-index: 1;  
}

#progressBox {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  width: 98%;
  height: 6px;
  background: #ddd;
  border-radius: 10px;
  margin: 8px 0;
  overflow: hidden;
  z-index: 10;
}
#progressBar {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #480a09, #862e29);
  transition: width 0.3s ease;
}