@charset "UTF-8";
*{ margin: 0; padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
ul, li { margin: 0; padding: 0; list-style-type: none;}
img, div, iframe{ border: 0; vertical-align: bottom;}
body, html { width: 100%; height: 100%;}
h1{ display: none;}
li li, li p, li span, li p span, p span{ font-size: 1em;}
a:link, a:visited ,a:hover ,a:active {text-decoration: none;}
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
body, html {
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-family: 'Noto Sans TC', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;}

.kv-wrap{ width: 100%; height: 400px; padding-top: 100px; text-align: center;
background: url(../img/bg.jpg) center bottom no-repeat; background-size: cover;}
.kv-wrap img{ width: 30%;}

.Preface-wrap{ width: 100%; position: relative; float: left;}
.peo1{ position: absolute; width: 100px; left: 50%; top: -90px; margin-left: -50px;}
.alt-1{ width: 200px; position: absolute;}
.alt-2{ width: 160px; right: 0; position: absolute;}
.Preface-td{ width: 950px; margin: 50px auto;}
.Preface-td h2{ text-align: center; color: #139244; font-size: 2.25rem; line-height: 3rem; margin-bottom: 40px;}
.Preface-td p{ color: #555; font-size: 1rem; line-height: 1.63rem; margin-bottom: 20px;}
.Preface-td p a{ color: #36bec0; font-weight: 700; transition: 0.5s;}
.Preface-td p a:hover{ text-decoration: underline; transition: 0.5s;}
.Preface-td span{ color: #36bec0; cursor: pointer; font-weight: 700;}

.contact-wrap{ width: 100%; display: inline-flex; margin: 60px 0 120px; align-items: center; flex-wrap: wrap; position: relative;}
.peo2{ position: absolute; z-index: 9; width: 100px; left: 10%; top: -70px; margin-left: -50px;}
.contact-w{ width: 55%; padding: 50px; background: #10A4A0; position: absolute;}
.contact-w-td{ width: 65%; margin-right: 15%; float: right; overflow: hidden;}
.contact-w-td h2{ font-size: 2.25rem; line-height: 3rem; margin-bottom: 40px; color: #fff;}
.contact-w-td ul{ width: 100%; float: left;}
.contact-w-td ul li{ width: 100%; color: #fff; margin-bottom: 30px;
font-size: 1.13rem; line-height: 1.75rem; display: inline-flex; align-items: baseline;}
.contact-w-td ul li p{ width: 90%; display: inline-block; border-bottom: 1px solid #6fc8c6; padding-bottom: 3px;}
.contact-w-td ul li p a{ color: #fff; transition: 0.5s;}
.contact-w-td ul li p a:hover{ color: #ddd; transition: 0.5s;}
.fa{ margin-right: 20px; display: inline;}
.contact-map{ width: 50%; left: 50%; position: relative; z-index: 9;}
.contact-map iframe{ width: 100%; height: 500px;}

@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){
.contact-wrap{ display: inline-block; margin: 50px 0 120px;}
.contact-map iframe{ height: 400px; margin-top: 5%;}
.peo2{ top: -75px;}
}

.photo-wrap{ width: 100%; position: relative; overflow: hidden; margin-bottom: 50px;}
.photo-wrap h2{ text-align: center; color: #139244; font-size: 2.25rem; line-height: 3rem; margin-bottom: 40px;}
.list{ position: relative; float: left;
animation: 20s move infinite linear; width: 200%;}
.list li { list-style: none; width: 5%; float: left;}
.list li img{ width: 100%;}
.m-list{ display: block;}
@keyframes move {
0% { left: 0;}
100% { left: -100%;}
}

/* back to top */
#back-top { position: fixed; bottom: 200px; right: 0; z-index: 999;
text-align: center; width: 50px; height: 50px; display: block; border-radius: 3px;
background: rgba(85,85,85,0.5); line-height: 55px; font-size: 24px; color: #fff; font-weight: normal;
-webkit-transition: 1s; -moz-transition: 1s; transition: 1s;}
#back-top a { display: block; width: 100%; height: 100%; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; color: #fff;}
#back-top:hover { background-color: rgba(85,85,85,0.3);}

@media screen and (max-width: 1920px) {
.kv-wrap{ padding-top: 120px;}
.kv-wrap img{ width: 700px;}
}

@media screen and (max-width: 1600px),(-ms-high-contrast:active),(-ms-high-contrast:none) {
.contact-w{ padding: 30px;}
}

@media screen and (max-width: 1366px),(-ms-high-contrast:active),(-ms-high-contrast:none){
.contact-map iframe{ height: 600px;}
}

@media screen and (max-width: 1280px) {
.kv-wrap{ padding-top: 120px;}
.Preface-td{ width: 80%;}
.alt-1{ width: 10%;}
.alt-2{ width: 8%;}
}

@media screen and (max-width: 1024px) {
.kv-wrap img{ width: 70%;}
.contact-w-td{ width: 85%; margin-right: 10%;}
.contact-w{ padding: 60px 30px 30px;}
}

@media screen and (max-width: 1023px) {
.kv-wrap{ height: 300px; padding-top: 90px;}
.kv-wrap img{ width: 60%;}
.contact-wrap{ margin: 50px 0 100px;}
.contact-w{ width: 100%; position: relative; padding: 30px;}
.contact-w-td{ width: 100%; margin: 0; float: none;}
.contact-map{ width: 100%; left: 0;}
.contact-map iframe{ height: 400px; margin-top: 0;}
.list li { width: 10%;}
.m-list{ display: none;}
#back-top { bottom: 50px; width: 40px; height: 40px; font-size: 22px; line-height: 45px;}
}

@media screen and (max-width: 640px) {
.contact-wrap{ margin: 40px 0 60px;}
.kv-wrap{ height: 250px; padding-top: 85px;}
.kv-wrap img{ width: 70%;}
.Preface-td{ width: 85%;}
.Preface-td h2, .contact-w-td h2{ font-size: 1.875rem; line-height: 2.375rem;}
.photo-wrap h2{ font-size: 1.5rem; line-height: 2rem; margin: 0 auto 20px;}
.alt-1{ width: 12%;}
.alt-2{ width: 10%;}
.peo1{ width: 80px; top: -70px; margin-left: -40px;}
.peo2{ width:80px; top: -58px; left: 10%;}

}

@media screen and (max-width: 480px) {
.kv-wrap{ padding-top: 100px;}
.kv-wrap img{ width: 80%;}
.alt-1{ width: 14%;}
.alt-2{ width: 12%;}
.list li { width: 20%;}
.m-list2{ display: none;}
}

@media screen and (max-width: 320px) {
.kv-wrap{ padding-top: 110px;}
}