@import 'https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i';

html,body{font-family: Microsoft JhengHei;}
*{ box-sizing: border-box;}

/*-----menu-----*/
.menu{ position: fixed; left: 20px; bottom: 20px; z-index: 2;}
.menu ul{ margin:0; padding: 0; font-size: 0;}
.menu li{ display: inline-block; padding:0; font-size: 18px; transition: .5s;background-color: hsla(0, 0%, 100%, 0.62);padding: 3px;}
.menu a{ color:#e11839;}
.menu a+a{ padding: 0 0 0 10px;}
.menu a:hover {  color:#fff;}
.menu a:hover li{  border-bottom: 1px solid #e11839; background: #e33839;}

.m_only{ display:none;}

@media(max-width:750px){
.menu{ left: 0; bottom: 0; width: 100%; padding: 10px 0; background: #e11839;}
.menu ul{ text-align:center;}
.menu li{ font-size: 12px; background: #fff; padding: 5px 10px;margin-bottom: 5px;}
.m_only{ display:inline-block;}
}

@media(max-width:320px){
.menu li{ font-size: 12px; background: #fff; padding: 3px 5px;margin-bottom: 5px;}
}


/*-----arrow-----*/
.fp-controlArrow.fp-next{ border-width:unset; border-color:transparent; background: url(../images/3_37.png) no-repeat; width: 66px; height: 60px; animation: arrow 2s infinite; background-size: contain;}
.fp-controlArrow.fp-prev{ border-width:unset; border-color:transparent; background: url(../images/3_38.png) no-repeat; width: 66px; height: 60px; animation: arrow 2s infinite; background-size: contain;}
@keyframes arrow {
    0%  { opacity: 0;}
    20% { opacity: 1;}
	80% { opacity: 1;}
	100% { opacity: 0;}
}

@media(max-width:750px){
.fp-controlArrow.fp-next{ width: 33px; height: 30px;}
.fp-controlArrow.fp-prev{ width: 33px; height: 30px;}
}

/*-----zone01-----*/
.zone01{ display: flex; flex-wrap: wrap; position: relative;}
.white{ position: relative; width: 50%; min-height: 100vh; background: url(../images/line2.jpg) center center; background-color: #fff; overflow: hidden;}
.black{ position: relative; width: 50%; min-height: 100vh; background: url(../images/zone02_bg.png) center center; background-color: #232635; overflow: hidden;}

.time{ position: absolute; top: 10px; right: 10px; max-width: 50%;}
.time img{ max-width: 100%;}

.alignnone{ max-width: 100%; margin: 0 auto;position: absolute; top: 0;right: 100%; animation: mymove3 1s forwards;animation-delay: 1s;opacity: 0;}
@keyframes mymove3 {
    0%  {right: 100%;opacity: 0;}
    100% {right: 0%;opacity: 1;}
}

.alignnone2{ max-width: 100%; margin: 0 auto;position: absolute; bottom: 0;left: 100%;animation: mymove4 1s forwards;animation-delay: 1s;opacity: 0;z-index: 2;}
@keyframes mymove4 {
      0%  {left: 100%;opacity: 0;}
      100% {left: 0%;opacity: 1;}
}

.blackman{max-width: 81.46%; max-height: 100vh; position: absolute; animation: mymove 1s forwards; overflow: hidden; transform: translateY(-50%); top: 50%; opacity: 0;}
@keyframes mymove {
  0%  {right: 0%;opacity: 0;}
  100% {right: -40%;opacity: 1;}
}

.whiteman{max-width: 81.46%; max-height: 100vh; position: absolute; animation: mymove2 1s forwards; overflow: hidden; transform: translateY(-50%); top: 50%;}
@keyframes mymove2 {
    0%  {right: 100%;}
    100% {right: 60%;}
}

@media (max-width:860px){
.time{ max-width: 40%; right: 25%; transform: translateX(50%);}
}

@media (max-width:750px){
.blackman{ max-width: 160%; animation: mymove_m 1s forwards;}
.whiteman{ max-width: 160%; animation: mymove2_m 1s forwards;}
.alignnone2{ bottom: 46px;z-index: 2;}
}

@keyframes mymove_m {
  0%  {right: 0%;opacity: 0;}
  100% {right: -80%;opacity: 1;}
}
@keyframes mymove2_m {
    0%  {right: 100%;}
    100% {right: 20%;}
}


/*-----zone02-----*/
.zone_02{ position: relative;padding: 50px 0;}
.zone_02_bg{ position: absolute; top: 0; width: 100vw; min-height: 100vh; height: 100%; background: url(../images/zone02_bg.png) center center; background-color: #232634;}
.zone02_pic01{ display: block; width:65%; margin: 0 auto;}
.zone02_pic02{ position: absolute; width:33%; top: 44%; left: 57%; cursor: pointer;}

.zone02_pic01_m{ display: none;}
.zone02_pic02_m{ display: none;}

@media(max-width:750px){
.zone_02{ margin: 0 0 56px 0;}
.zone02_pic01{ display: none;}
.zone02_pic02{ display: none;}
	
.zone02_pic01_m{ display: block; max-width:100%;}
.zone02_pic02_m{ display: block; position: absolute; width:42%; top: 83%; left: 59%; cursor: pointer;}
}

/*-----zone03-----*/
.zone_03{ position: relative;padding: 50px 0;}
.zone_03_bg{ position: absolute; top: 0; width: 100vw; min-height: 100vh; height: 100%; background: url(../images/line2.jpg) center center; background-color: #fff;}
.zone03_pic01{ display: block; width:65%; margin: 0 auto;}
.zone03_pic02{ position: absolute; width:28.125%; top: 35%; left: 57%; cursor: pointer;}

.zone03_pic01_m{ display: none;}
.zone03_pic02_m{ display: none;}

@media(max-width:750px){
.zone_03{ margin: 0 0 56px 0;}
.zone03_pic01{ display: none;}
.zone03_pic02{ display: none;}
	
.zone03_pic01_m{ display: block; max-width:100%;}
.zone03_pic02_m{ display: block; position: absolute; width:37%; top: 81%; left: 63%; cursor: pointer;}
}

/*-----zone04-----*/
.zone_04{ position: relative;padding: 50px 0;}
.zone_04_bg{ position: absolute; top: 0; width: 100vw; min-height: 100vh; height: 100%; background: url(../images/zone02_bg.png) center center; background-color: #232634;}
.zone04_pic01{ display: block; width:65%; margin: 0 auto;}
.zone04_pic02{ position: absolute; width:33%; top: 71%; left: 21%; cursor: pointer;}

.zone04_pic01_m{ display: none;}
.zone04_pic02_m{ display: none;}

@media(max-width:750px){
.zone_04{ margin: 0 0 56px 0;}
.zone04_pic01{ display: none;}
.zone04_pic02{ display: none;}
	
.zone04_pic01_m{ display: block; max-width:100%;}
.zone04_pic02_m{ display: block; position: absolute; width:42%; top: 83%; left: 59%; cursor: pointer;}
}

/*-----zone05-----*/
.zone_05{ position: relative; position: relative; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 20px;}
.zone_05 img{ max-width:100%;}
.zone_05 li{ font-size:14px;}
.zone_05 li+li{ margin:10px 0 0 0;}

@media(max-width:750px){
.zone_05{ margin: 0 0 56px 0;}
.zone_05 img{ margin: 30px 0 0 0; }
.zone_05 ol{ padding: 0 0 0 15px;}
.zone_05 li{ font-size:12px;}
}



/*-----彈窗-----*/
.overlay {
    display: none;
    background: rgba(16, 21, 44, 0.64);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    cursor: pointer;
    z-index: 1;
}
.fakelightbox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 95%;
    max-width: 800px;
    transform: translate(-50%, -50%);
    background: #303341;
    border-radius: 10px;
    box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.5);
}

.close_btn{
	display: none;
    position: fixed;
    top: 0;
    right: 0;
    color: #fff;
}
.master_vision{display: none;}

.fakelightbox_4 p {color: #fff;text-align: center;}
.fakelightbox_4  h3{color:#fff;text-align: center;}
.fakelightbox_4{padding: 20px;text-align: center;}
.fakelightbox_4 a {background-color: #ddd;padding: 10px;display: inline-block;}