@charset "utf-8";
body{ padding:0; margin:0; overflow-x: hidden;}
ul.btnul,ul.btnul li {
    list-style: none;
}
ul.btnul li {
    position: relative;
	border-left: solid #666 2px;
	width:100%;
}
/* 選單 li 裡面連結之樣式 */
ul.btnul li a{
    display: block;
    padding:5px;
    color: #333;
	font-family: "微軟正黑體";
	text-decoration:none;
	letter-spacing: -1px;
    font-weight: bold;
}
.title{
	position: absolute;
	width:11.6%;
	height:auto;
	right: 45%;
	opacity: 0;
	float: right;
	transform-style: preserve-3d;
	transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
	animation: title 4s linear 0s 1 normal forwards;
}
.main {
	height: 100%;
	width: 100%;
	margin:0 auto;
	position:absolute;
	font-size:16px;
}
.top{
	position:relative;
	text-align: right;
	height: calc(100vh - 130px);
    display: block;
    width: 100%;
	margin-top: 55px;
}
.down{
	position: absolute;
    display: block;
    width: 100%;
    height: 100px;
    margin: 0 auto;
    margin-bottom: 50px;
}
.btnul {
	margin: 0;
	padding: 0px;
    opacity: 0;
    position: absolute;
    z-index: 1;
	text-align:left;
	visibility: collapse;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.submenu {
	opacity:0;
	height:0px;
	visibility: collapse;
	padding-left:10%;
}
.subon{
	opacity:1;
	height:auto;
	visibility: visible;
	transition: all 0.3s ease-in-out;
}
.logo {
    position: absolute;
    height: auto;
    width: 7.5%;
    left:15%;
    opacity: 0;
    transform-style: preserve-3d;
    transform: translate3d(0px, 0px, 0px);
    animation: logo 7s linear 0s 1 normal forwards;
}
.line {
    position: absolute;
    height: 100px;
    width: 6px;
    left: 32.9%;
    opacity: 0;
    animation: line 10.5s linear 0s 1 normal forwards;
}
.foottext-box{
	position: absolute;
    left: calc(50% - (8% * 2.1));
    top: 0px;
    width: 46%;
	height: 200px;
	overflow: hidden;
	font-family: "微軟正黑體";
	color: #2f2f2f;
    text-align: justify;
    line-height: 1.5em;
	font-weight: bold;
}
.foot-text{
	position:absolute;
	width: 100%;
	top: 0px;
	left: -100%;
	transform-style: preserve-3d;
	transform: translate3d(0px, 0px, 0px);
	animation: foot-text 10.5s linear 0s 1 normal forwards;
}
.btn1A{
	position: absolute;
	width:calc(100% / 5.3);
	height:160px;
	float: right;
	right:calc(50% / 1.18);
	margin-top:50px;
	vertical-align:top;
	opacity: 0;
	background-image: url(btn1A.png);
	background-size:contain;
	background-repeat:no-repeat;
	animation: btn2A 5s linear 0s 1 normal forwards;
}
.btn1A:hover{background-image: url(btn1B.png);}
.btn1A:hover ul.btnul{
	display: block;
    transition: all ease-out 1S;
    opacity: 1;
	visibility:visible;
}
@keyframes btn1A {
  0% {
	opacity: 0;
	animation-timing-function: linear;
  }
  80% {
	opacity: 0;
	animation-timing-function: linear;
  }
  100% {
	opacity: 1;
	animation-timing-function: linear;
  }
}
.btn2A{
	position: absolute;
    width: calc(100% / 5.3);
    height: auto;
    float: right;
    right: calc(50% / 2.36);
    margin-top: 50px;
    vertical-align: top;
    opacity: 0;
	background-image: url(btn2A.png);
	background-size:contain;
	background-repeat:no-repeat;
	animation: btn1A 5.5s linear 0s 1 normal forwards;
}
.btn2A:hover{background-image: url(btn2B.png);}
.btn2A:hover ul.btnul{
	display: block;
    transition: all ease-out 1S;
    opacity: 1;
	visibility: visible;
}
.subon > li:nth-child(1){ animation:btnli 0.3s linear 0s 1 normal forwards; opacity: 0;}
.subon > li:nth-child(2){ animation:btnli 0.3s linear 0.3s 1 normal forwards; opacity: 0;}
.subon > li:nth-child(3){ animation:btnli 0.3s linear 0.6s 1 normal forwards; opacity: 0;}
.subon > li:nth-child(4){ animation:btnli 0.3s linear 0.9s 1 normal forwards; opacity: 0;}
.subon > li:nth-child(5){ animation:btnli 0.3s linear 1.2s 1 normal forwards; opacity: 0;}
.subon > li:nth-child(6){ animation:btnli 0.3s linear 1.5s 1 normal forwards; opacity: 0;}
.subon > li:nth-child(7){ animation:btnli 0.3s linear 1.8s 1 normal forwards; opacity: 0;}

.btn1A:hover > ul.btnul > li:nth-child(1),.btn2A:hover > ul.btnul > li:nth-child(1),.btn3A:hover > ul.btnul > li:nth-child(1){ animation:btnli 0.3s linear 0s 1 normal forwards; opacity: 0;}
.btn1A:hover > ul.btnul > li:nth-child(2),.btn2A:hover > ul.btnul > li:nth-child(2),.btn3A:hover > ul.btnul > li:nth-child(2){ animation:btnli 0.3s linear 0.3s 1 normal forwards; opacity: 0;}
.btn1A:hover > ul.btnul > li:nth-child(3),.btn2A:hover > ul.btnul > li:nth-child(3),.btn3A:hover > ul.btnul > li:nth-child(3){ animation:btnli 0.3s linear 0.6s 1 normal forwards; opacity: 0;}
.btn1A:hover > ul.btnul > li:nth-child(4),.btn2A:hover > ul.btnul > li:nth-child(4),.btn3A:hover > ul.btnul > li:nth-child(4){ animation:btnli 0.3s linear 0.9s 1 normal forwards; opacity: 0;}
.btn1A:hover > ul.btnul > li:nth-child(5),.btn2A:hover > ul.btnul > li:nth-child(5),.btn3A:hover > ul.btnul > li:nth-child(5){ animation:btnli 0.3s linear 1.2s 1 normal forwards; opacity: 0;}
.btn1A:hover > ul.btnul > li:nth-child(6),.btn2A:hover > ul.btnul > li:nth-child(6),.btn3A:hover > ul.btnul > li:nth-child(6){ animation:btnli 0.3s linear 1.5s 1 normal forwards; opacity: 0;}
.btn1A:hover > ul.btnul > li:nth-child(7),.btn2A:hover > ul.btnul > li:nth-child(7),.btn3A:hover > ul.btnul > li:nth-child(7){ animation:btnli 0.3s linear 1.8s 1 normal forwards; opacity: 0;}

@keyframes btnli {
  0% {
	  opacity: 0;
	  transform: translate3d(0px, -30px, 0px);
	  animation-timing-function: linear;
	}
	100% {
	  opacity: 1;
	  transform: translate3d(0px, 0px, 0px);
	  animation-timing-function: linear;
	}
}
@keyframes btn2A {
      0% {
        opacity: 0;
        animation-timing-function: linear;
      }
      81.84% {
        opacity: 0;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        animation-timing-function: linear;
      }
    }
.btn3A{
	position: absolute;
    width: calc(100% / 5.3);
    height: auto;
    float: right;
	right:0;
	margin-top:50px;
	vertical-align:top;
	opacity: 0;
	background-image: url(btn3A.png);
	background-size:contain;
	background-repeat:no-repeat;
	animation: btn3A 6s linear 0s 1 normal forwards;
}
.btn3A:hover{background-image: url(btn3B.png);}
.btn3A:hover ul.btnul{
	display: block;
    transition: all ease-out 1S;
    opacity: 1;
	visibility: visible;
}
@keyframes btn3A {
      0% {
        opacity: 0;
        animation-timing-function: linear;
      }
      83.33% {
        opacity: 0;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        animation-timing-function: linear;
      }
    }
@keyframes title {
  0% {
	opacity: 0;
	right: 45%;
	width:11.6%;
	animation-timing-function: linear;
  }
  49.95% {
	opacity: 1;
	right: 39%;
	width:23.2%;
	margin-top: 25px;
	animation-timing-function: linear;
  }
  100% {
	opacity: 1;
	animation-timing-function: linear;
	right: 64%;
	margin-top: 25px;
	width:23.2%;
  }
}

@keyframes logo {
  0% {
	opacity: 0;
	transform: translate3d(0px, 0px, 0px);
	animation-timing-function: linear;
	left:15%;
  }
  85.71% {
	opacity: 0;
	transform: translate3d(0px, 0px, 0px);
	animation-timing-function: linear;
	left:15%;
  }
  100% {
	opacity: 1;
	transform: translate3d(0px, 0px, 0px);
	animation-timing-function: linear;
	left:23.7%;
  }
}
@keyframes line {
  0% {
	opacity: 0;
	animation-timing-function: linear;
  }
  65% {
	opacity: 0;
	animation-timing-function: linear;
  }
  71.40% {
	opacity: 1;
	animation-timing-function: linear;
  }
  99% {
	opacity: 1;
	animation-timing-function: linear;
  }
  100% {
	opacity: 0;
	animation-timing-function: linear;
  }
}
@keyframes foot-text {
  0% {
	transform: translate3d(0px, 0px, 0px);
	animation-timing-function: linear;
	left: -100%;
  }
  71.43% {
	transform: translate3d(0px, 0px, 0px);
	animation-timing-function: linear;
	left: -100%;
  }
  99% {
	transform: translate3d(0px, 0px, 0px);
	animation-timing-function: linear;
	left: 0;
  }
  100% {
	transform: translate3d(0px, 0px, 0px);
	animation-timing-function: linear;
	left: 0;
  }
}
.ellipsis {
	white-space: nowrap;
	/*overflow: hidden;
	text-overflow:ellipsis;*/
}