@charset "utf-8";
* { margin: 0; padding: 0; } /*通用符號，選取所有元素*/
a:link, a:visited ,a:hover ,a:active {text-decoration: none; outline: none; hlbr:expression(this.onFocus=this.blur());}
*:link, *:visited, *:hover, *:active, *:focus , * {
-o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
transition: color .20s linear, background-color .20s linear, border-color .20s linear;}
img{ border:0;}
ul, li{ list-style:none;}

body, html{ height:100%;}
body{ width:100%; height:100%; margin:0; padding:0; background: url(../img/ind_bg.png) center center fixed no-repeat; -moz-background-size: cover; background-size: cover;  -webkit-text-size-adjust: 100%; position:relative; font-family: Microsoft JhengHei, Arial, sans-serif;}

#Load{ width:100%; height:100%; background:#FFF; text-align:center; position:relative;}
#Load img{ position:absolute; top:50%; margin:-50px auto 0 auto;}

h4{ display:none;}
.nav_wrap section h2{ display:none;}
nav h2{ display:none;}

/* action */
.floating2{ animation: floating2 3s infinite; -webkit-animation: floating2 3s infinite;}
@keyframes floating2 {
	0% {transform: translateX(0%);}
	50% {transform: translateX(30%);}	
	100% {transform: translateX(0%);}}

@-webkit-keyframes floating2 {
	0% {transform: translateX(0%);}
	50% {transform: translateX(15%);}	
	100% {transform: translateX(0%);}}

.line{animation: line 1.5s linear; -webkit-animation: line 1.5s linear; -moz-animation:line 1.5s linear; -o-animation: line 1.5s linear;}
@keyframes line { 
0% { width:0; opacity:0;} 100% { width:411px; opacity:1;}}
@-webkit-keyframes line {
0% { width:0; opacity:0;} 100% { width:411px; opacity:1;}}

.floating:hover{ animation: floating 1.5s infinite; -webkit-animation: floating 1.5s infinite;}
@keyframes floating {
	0% {transform: translateY(0%);}
	50% {transform: translateY(15%);}	
	100% {transform: translateY(0%);}}

@-webkit-keyframes floating {
	0% {transform: translateY(0%);}
	50% {transform: translateY(15%);}	
	100% {transform: translateY(0%);}}

.fadeIn2{ animation-name: fadeIn2 3s ease-in-out; -webkit-animation: fadeIn2 3s ease-in-out; -moz-animation:fadeIn2 3s ease-in-out; -o-animation: fadeIn2 3s ease-in-out; visibility: visible !important;}
@keyframes fadeIn2 { 0% { opacity: 0.0;} 100% {opacity: 1;}}
@-webkit-keyframes fadeIn2 {0% { opacity: 0.0;} 100% {opacity: 1;}}

.bounce{ animation: bounce 1.6s ease 2s infinite; -webkit-animation: bounce 1.6s ease 2s infinite; -moz-animation:bounce 1.6s ease 2s infinite; -o-animation:bounce 1.6s ease 2s infinite;}
@keyframes bounce {
	0% { transform: translateY(0%) scaleY(0.6);}
	60%{transform: translateY(-100%) scaleY(1.1);}
	70%{transform: translateY(0%) scaleY(0.95) scaleX(1.05);}
	80%{transform: translateY(0%) scaleY(1.05) scaleX(1);}	
	90%{transform: translateY(0%) scaleY(0.95) scaleX(1);}				
	100%{transform: translateY(0%) scaleY(1) scaleX(1);}}

@-webkit-keyframes bounce {
	0% {-webkit-transform: translateY(0%) scaleY(0.6);}
	60%{-webkit-transform: translateY(-100%) scaleY(1.1);}
	70%{-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);}
	80%{-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);}	
	90%{-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);}				
	100%{-webkit-transform: translateY(0%) scaleY(1) scaleX(1);}}

/* 選單 */
section{ text-align: center;}
section button { border: none; outline: none; background: #353535; -webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; text-align:center; width:85px; height:85px; font-size: 1.5em; color:#FFF; line-height:22px;}
section button img{ width:50px;}
section button:hover{ background: #77d9e0;}
.nav_wrap{ width:85px; position: fixed; top:20px; left:30px; z-index:9;}
.nav_wrap li img{ width:100%;}
.nav_wrap li a { color:#FFF;}
.logo{ width:88px; margin:0 0 5px 0;}
.sh_btn{background: #326c70; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; text-align:center; width:30px; height:30px; font-size: 1em; color:#FFF; line-height:31px; margin:10px auto;}
.sh_btn:hover{background: #77d9e0;}
.sh_btn2{background: #326c70; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; text-align:center; width:30px; height:30px; font-size: 1em; color:#FFF; line-height:31px; margin:10px auto;}
.sh_btn2:hover{background: #77d9e0;}

/* ind */
.ind_wrap{ width:100%; height:100%; position:relative;}
.ind_wrap li{ position:absolute; margin-top:3%;}
.ind_wrap li img{ width:100%;}
.ind_bg{ background:url(../img/ind_bg2.png) top center no-repeat; width:100%; height:100%; z-index:-1; top:-6%;}
.tit1{left:50%; top: 200px; width:411px; margin-left:-205px; animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s;}
.tit2{left:50%; top: 350px; width:411px; margin-left:-205px; animation-delay:2s; -moz-animation-delay:2s; -webkit-animation-delay:2s;}
.tit3{left:50%; top: 400px; width:411px; margin-left:-205px; animation-delay:3s; -moz-animation-delay:3s; -webkit-animation-delay:3s;}
.tit4{left:50%; top: 460px; width:411px; margin-left:-205px; animation-delay:4s; -moz-animation-delay:4s; -webkit-animation-delay:4s;}
.tit_pic{left:50%; top:280px; width:65px; margin-left:-45px; z-index:1;}
.ind_btn_td{left:50%; top:530px; z-index:1;}

.ind_btn{width:240px; height:60px; margin-left:-100px; background: url(../img/button.png) no-repeat; -moz-background-size: contain; background-size: contain; color:#222; line-height:60px; text-align:center; font-size:1.25em; font-weight:300; animation-delay:5s; -moz-animation-delay:5s; -webkit-animation-delay:5s;}
.ind_btn a{ color:#222; display: block; width: 100%; height: 100%;}
.ind_btn a:hover{ color:#222; background: url(../img/button2.png) no-repeat; -moz-background-size: contain; background-size: contain;}

.line1{ width:430px; background:#333; height:5px; top:175px; left:50%; margin-left:-200px; }
.line2{ width:430px; background:#333; height:1px; top:185px; left:50%; margin-left:-200px;}
.line3{ width:430px; background:#333; height:5px; top:500px; left:50%; margin-left:-200px;}
.line4{width:430px; background:#333; height:1px; top:510px; left:50%; margin-left:-200px;}
.cloud1{ top:400px; left:75%; width:107px; animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s;}
.cloud2{ top:200px; left:25%; width:107px; animation-delay:2s; -moz-animation-delay:2s; -webkit-animation-delay:2s;}
.cloud3{ top:30px; left:50%; width:107px;}
.pic1{top:30px; left:65%; width:26px; animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s;}
.pic2{top:10px; left:30%; width:26px; animation-delay:2s; -moz-animation-delay:2s; -webkit-animation-delay:2s;}
.pic3{top:450px; left:65%; width:26px; animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s;}
.pic4{top:300px; left:35%; width:26px; animation-delay:3s; -moz-animation-delay:3s; -webkit-animation-delay:3s;}
.pic5{top:70px; left:48%; width:26px; animation-delay:2s; -moz-animation-delay:2s; -webkit-animation-delay:2s;}

/* foot */
footer{ width:90%; bottom:20px; position: absolute; padding:10px 0 10px 40px; color:#222; font-size:0.813em; line-height:20px;}
footer a{ color:#222;}
footer a:hover{ color:#77d9e0;}
footer p{ margin:5px 0 0 0; padding:0 0 10px 0;}

ul.m_sh{ margin:0 0 10px 0; padding:0; float:left; list-style-type:none; width:100%;}
.m_line{ float:left; display:none;}
.m_fb{ float:left; margin:0; padding:0;}

@media screen and (max-width: 1280px) {
.ind_wrap li{ margin-top:2%;}
.cloud1{ top:300px;}
.pic4{left:20%;}
.pic3{left:75%;}
}

@media screen and (max-width: 1080px) {
.cloud2{ left:15%;}
}

@media screen and (max-width: 1024px) {
.line1{ top:125px;}
.line2{ top:135px;}
.line3{ top:450px;}
.line4{top:460px;}
.tit1{top: 150px;}
.tit2{top: 300px;}
.tit3{top: 350px;}
.tit4{top: 410px;}
.tit_pic{top:230px;}
.ind_btn_td{top:480px;}
}

@media screen and (max-width: 800px) {
.ind_wrap li{margin-top:8%;}
.ind_bg{ top:-10%;}
.cloud1{ left:80%;}
.cloud2{ top:300px; left:6%;}
.pic3{left:85%;}
.pic5{top:70px;}
footer{ padding:10px 5%;}
ul.m_sh{ margin:0;}
.m_line{ display: block;}
.m_line img{ width:84px; height:auto; margin:0 10px 0 0;}
}

@media screen and (max-width: 640px) {
.cloud2{ top:300px; left:3%;}
.pic4{top:400px; left:10%;}
footer{ padding:10px 5% 40px 5%;}
footer span{ display:none;}
footer p{ margin:10px 0 0 0;}
}

@media screen and (max-width: 600px) {
.nav_wrap{ width:100%; position: fixed; top:0; left:0; z-index:9; background:#fff; height:50px;}
.logo{ top:8px; left:20px; position:absolute;}
.sh_btn{ top:10px; right:60px; margin:0; position:absolute;}
.sh_btn2{ top:10px; right:20px; margin:0; position:absolute;}
section{ position:absolute; top:5px; left:50%; margin:0 0 0 -40px;}
.cloud3{ top:70px; left:60%;}
.pic1{top:70px; left:85%;}
.pic2{top:80px; left:15%;}
}

@media screen and (max-width: 480px) {
body{ background:url(../img/ind_bg3.png) top center no-repeat, url(../img/ind_bg.png) center center fixed no-repeat; -moz-background-size: cover; background-size: cover;}
.ind_bg{ display:none;}
#Load img{ position:absolute; top:50%; left:50%; margin-left:-50px;}
.tit1{width:80%; margin-left:-41%;}
.tit2{width:80%; margin-left:-41%;}
.tit3{width:80%; margin-left:-41%;}
.tit4{width:80%; margin-left:-41%;}
.line1{ width:80%; margin:0 10%; left:0;}
.line2{ width:80%; margin:0 10%; left:0;}
.line3{ width:80%; margin:0 10%; left:0;}
.line4{width:80%; margin:0 10%; left:0;}
.ind_btn_td{left:45%;}
.pic1{top:50px;}
.pic2{top:30px;}
.pic3{top:500px; left:80%;}
.pic4{top:420px; left:5%;}
.pic5{top:70px; left:48%;}

@keyframes line { 
0% { width:0; opacity:0;} 100% { width:80%; opacity:1;}}
@-webkit-keyframes line {
0% { width:0; opacity:0;} 100% { width:80%; opacity:1;}}
}

@media screen and (max-width: 361px) {
.logo{left:10px;}
.sh_btn{right:50px;}
.sh_btn2{ right:10px;}
.cloud1{ left:90%;}
.cloud2{ top:80px; left:-20px;}
.tit1{top: 150px;}
.tit2{top: 250px;}
.tit3{top: 290px;}
.tit4{top: 330px;}
.tit_pic{top:200px; width:40px; margin-left:-30px;}
.line3{ top:360px;}
.line4{top:370px;}
.pic3{top:430px; left:85%;}
.pic4{top:390px; left:7%;}
.ind_btn_td{top:390px;}
}

@media screen and (max-height: 720px) {
#Load img{ position:absolute; top:50%; left:50%; margin-left:-50px;}
footer{top:600px; margin:0 0 20px 0;}
}

@media screen and (max-height: 600px) {
footer{top:500px;}
}

@media screen and (max-height: 400px) {
footer{top:600px;}
}