@charset "utf-8";
body,html { margin:0; padding:0; height:100%; font-size: 100%; background-color: #fdf3e4;}
.pcI{display: inline-block;}
.mI{display: none;}

@media screen and (max-width: 1366px) {
body,html {  font-size: 95%; }
}
@media screen and (max-width: 1150px) {
body,html {  font-size: 90%; }
}
@media screen and (max-width: 980px) {

}
@media screen and (max-width: 720px) {
.mI{display: inline-block;}
.pcI{display: none;}
}

/*內容區*/
.main{ box-sizing: border-box; min-height:calc(80% ); padding-bottom: 0; padding-top: 60px;}

@media screen and (max-width: 1366px) {
.main{ padding-top: 50px; padding-bottom: 0;}
}
@media screen and (max-width: 980px) {
.main{ padding-top: 45px; padding-bottom: 0;}
}
@media screen and (max-width: 720px) {
.main{ min-height:calc(70% ); padding-bottom: 0;}
}

a { text-decoration:none;}
* { font-family:"微軟正黑體", Tahoma; margin:0; padding:0;}
img {border:0;}
input,textarea { font-size:100%;}





/*上方橫條*/
.topmenu{position: fixed; top: 0; box-sizing: border-box; display: flex; align-items: center;justify-content: space-between; z-index: 2; background-color: #008d6a; width: 100%; }
.topmenu .logoL{ height: 35px;  margin-left: 20px;cursor: pointer;}
.topmenu .logoR{ height: 60px;}
.topmenu .Mbnt{ color: #ffffff; flex: 1; text-align: right; }
.topmenu .Mbnt a{ color: #ffffff; white-space: nowrap; font-size: 115%; font-weight: 600; margin-right: 30px;}
.topmenu .Mmenubnt{display: none;}
.topmenu .Mbnt .close{ display: none;}
.topmenu .Mbnt a.bntMaYt{display: none}

@media screen and (max-width: 1366px) {
.topmenu .logoL{ height: 35px; }
.topmenu .logoR{ height: 50px;}
.topmenu .Mbnt a{ margin-right: 20px;}
}
@media screen and (max-width: 980px) {
.topmenu{height: 50px;}
.topmenu .logoL{ margin-left: 15px; }
.topmenu .logoR{ display: none;}
.topmenu .Mbnt{ display: none; position: fixed;top:0; left: 0;flex-direction:column; padding: 0 10%; height: 100%; box-sizing: border-box; text-align: center; max-height: none; z-index: 2; width: 100%; background-color: rgba(255,255,255,0.95); justify-content:center;}
.topmenu .Mbnt.open{display: flex;}
.topmenu .Mbnt a{ margin-left: 0%;border-bottom: 2px #008e6a solid; line-height: 300%; font-weight: 600; font-size: 140%; margin-right: 0; color: #333333; }
.topmenu .Mbnt a:last-child{ border-bottom: 0;}
.topmenu .Mmenubnt{display:inline-table;padding-top: 0; border-bottom: none; position: absolute; right: 15px; font-size: 250%; color: #ffffff;}
.topmenu .Mmenubnt:hover{ border-bottom: none;}
.topmenu .Mbnt .close{ position: absolute; top: 3%; right: 3%; font-size: 320%; color: #008e6a; display:block;}
.topmenu .Mbnt a.bntMaYt{display: block}
}

.title{font-family: '微軟正黑體', sans-serif; font-weight:bold; position: absolute; transform: translate(-120%,-50%); padding:2% 4% 0 25%; text-align:left; font-size: 120%; height: 100px; letter-spacing: 1px; line-height: 25px;-webkit-transition: all 400ms; transition: all 400ms;}
.title{display: inline-block;}
.title::after{position: absolute; content: ''; background-size: contain; background-repeat: no-repeat; width: 1200px; height: 225px;}
.titleS1 ,.MaYT_1 a{font-family: '微軟正黑體', sans-serif; font-weight:bold; font-size: 300%; line-height: 120%;}
.titleS2{font-family: '微軟正黑體', sans-serif; font-weight:bold; font-size: 240%; color: #5a5a5a; line-height: 120%;margin-top: 5px;}
.titleS3{}

@media screen and (max-width: 1600px) {
.title{height: 0px; line-height: 0px; padding:0 0 2% 25%; }
.title::after{ background-size: contain; background-repeat: no-repeat; width: 1000px; height: 188px;}
}
@media screen and (max-width: 1366px) {
.title{height: 0px; line-height: 0px; padding:0 0 2% 20%; }
.title::after{ background-size: contain; background-repeat: no-repeat; width: 900px; height: 169px;}
}
@media screen and (max-width: 980px) {
.title{height: 0px; line-height: 0px; padding:0 0 2% 9%; }
.title::after{ background-size: contain; background-repeat: no-repeat; width: 760px; height: 143px;}
}
@media screen and (max-width: 720px) {
.title{display: none;}
.title{height: 0px; line-height: 0px; padding:0 0 0 0; }
.title::after{ background-size: contain; background-repeat: no-repeat; width: 580px; height: 109px;}
.titleS1,.MaYT_1 a{ font-size: 200%;}
.titleS2{ font-size: 160%;}
}

.Ma{text-align: center; background: radial-gradient(ellipse at center,#eeeeee,#bbbbbb); box-sizing: border-box; padding: 0 0; }
.Ma img {max-width: 100%;}
@media screen and (max-width: 1366px) {
.Ma img {max-width: 100%;}
}
@media screen and (max-width: 720px) {
.Ma img {max-width: 100%;}
}

.WF{ transform: translateY(30%); opacity: 0; -webkit-transition: transform 1200ms; transition: transform 1200ms;}
.hover {opacity: 1}
.hover .WF { transform: translateY(0%); opacity: 1;}
.hover .title{ transform: translate(0%,-50%);}


.Ma1{position: relative; background-color: #fdf3e4; margin: 0 auto auto; padding-top: 8%; padding-bottom: 2%; opacity: 0; -webkit-transition: all 1600ms; transition: all 1600ms; background-image: url(../images/bg_1.jpg); background-repeat:no-repeat; background-position:left top; background-size:100% 20%;}
.Ma1.hover{ opacity: 1;}
.Ma1 .title{ color: #ffffff;}
.Ma1 .title::after{ background-image: url(../images/Ma1_TitleBg.png); transform: translateX(-8%) translateY(-40%);}
.Ma1 .titleM{ color: #ffffff;}
.Ma1 .titleM::after{ background-image: url(../images/Ma1_TitleBg_M.png); transform: translateX(8%) translateY(-40%);}

.Ma1_1{ padding-top: 5%; text-align: center;}
.Ma1_1 img{ margin-top: 1%;}

.Ma1_2 { padding-top: 1%; text-align: center;}
.Ma1_2 img{ margin-top: 1%;}

.Ma1_3 { padding-top: 1%;text-align: center;}
.Ma1_3 img{ margin-top: 1%;}

@media screen and (max-width: 1600px) {
.Ma1{margin: 0 auto; background-size:100% 19%;}
.Ma1_1{ padding-top: 5%;}
.Ma1_2{ padding-top: 2%;}
.Ma1_3{ padding-top: 1%;}
}
@media screen and (max-width: 1366px) {
.Ma1{margin: 0 auto; background-size:100% 20%;}
.Ma1_1{ padding-top: 7%;}
.Ma1_2{ padding-top: 2%;}
.Ma1_3{ padding-top: 1%;}
}
@media screen and (max-width: 980px) {
.Ma1{margin: 0 auto; background-size:100% 19%;}
.Ma1_2{ padding-top: 2%;}
.Ma1_3{ padding-top: 1%;}
}
@media screen and (max-width: 720px) {
.Ma1{margin: 0 auto; padding-top: 3%; padding-bottom: 6%; background-size:100% 15%;}
.Ma1_1{ padding-top: 1%; padding-bottom: 1%;}
.Ma1_2{ padding-top: 1%;}
.Ma1_3{ padding-top: 1%;}
}

.Ma2{position: relative; background-color: #f4e5cf; margin: 0 auto auto; padding-top: 8%; padding-bottom: 2%; opacity: 0; -webkit-transition: all 600ms; transition: all 600ms; background-image: url(../images/bg_2.jpg); background-repeat:no-repeat; background-position:right bottom; background-size:1920px 1080px;}
.Ma2.hover{ opacity: 1;}
.Ma2 .title{ color: #ffffff;}
.Ma2 .title::after{background-image: url(../images/Ma2_TitleBg.png); transform: translateX(-8%) translateY(-40%);}
.Ma2 .titleM{ color: #ffffff;}
.Ma2 .titleM::after{background-image: url(../images/Ma2_TitleBg_M.png); transform: translateX(8%) translateY(-40%);}

.Ma2_1{ padding-top: 5%; text-align: center;}
.Ma2_1 img{ margin-top: 1%;}

.Ma2_2 { padding-top: 1%; text-align: center;}
.Ma2_2 img{ margin-top: 1%;}

@media screen and (max-width: 720px) {
.Ma2{margin: 0 auto; padding-top: 3%; padding-bottom: 6%; background-size:1000px 563px;}
.Ma2_1{ padding-top: 1%;}
.Ma2_2{ padding-top: 1%;}
}

.Ma3{position: relative; background-color: #fdf3e4; margin: 0 auto auto; padding-top: 8%; padding-bottom: 0; opacity: 0; -webkit-transition: all 600ms; transition: all 600ms;}
.Ma3.hover{ opacity: 1;}
.Ma3 .title{ color: #ffffff;}
.Ma3 .title::after{background-image: url(../images/Ma3_TitleBg.png); transform: translateX(-8%) translateY(-40%);}
.Ma3 .titleM{ color: #ffffff;}
.Ma3 .titleM::after{background-image: url(../images/Ma3_TitleBg_M.png); transform: translateX(8%) translateY(-40%);}

.Ma3_1{ padding-top: 5%; text-align: center;}
.Ma3_1 img{ margin-top: 1%;}

.Ma3_2{ padding-top: 1%; text-align: center;}
.Ma3_2 img{ margin-top: 1%;}

@media screen and (max-width: 720px) {
.Ma3{margin: 0 auto; padding-top: 3%; padding-bottom: 6%;}
.Ma3_1{ padding-top: 1%;}
.Ma3_2{ padding-top: 1%;}
}

.MaYT{display: none;}

.Ma4{position: relative; background-color: #fdf3e4; margin: 0 auto auto; padding-top: 0; padding-bottom: 1%; opacity: 0; -webkit-transition: all 600ms; transition: all 600ms;}
.Ma4.hover{ opacity: 1;}
.Ma4 .title{ background-color: #c08f4d; color: #ffffff;}
.Ma4 .title::after{background-image: url(../images/Ma4_TitleBg.png);}

.Ma4_1{ padding-top: 5%; text-align: center;}
.Ma4_1 img{ margin-top: 1%;}

.Ma4_2 { padding-top: 1%; text-align: center;}
.Ma4_2 img{ margin-top: 1%;}

.Ma4_3 { padding-top: 1%;text-align: center;}
.Ma4_3 img{ margin-top: 1%;}


@media screen and (max-width: 720px) {
.Ma4{margin: 0 auto; padding-bottom: 6%;}
.Ma4_1{ padding-top: 2%;}
.Ma4_2{ padding-top: 2%;}
}

.Ma5{position: relative; background-color: #fdf3e4; margin: 0 auto auto; padding-bottom: 6%; opacity: 0; -webkit-transition: all 600ms; transition: all 600ms;}
.Ma5.hover{ opacity: 1;}
.Ma5 .title{ background-color: #ca849c; color: #ffffff;}
.Ma5 .title::after{background-image: url(../images/Ma5_TitleBg.png);}
.Ma5 .titleS1{ color: #057668;}
.Ma5_1{ padding-top: 7%;max-width: 95%; font-weight: 400; margin: auto; color: #616161;  text-align: center;}
.Ma5_1 .w3{ margin-top: 1%; font-size: 180%;}
.Ma5_1 b{white-space: nowrap; }
.Ma5_2 {text-align: center; margin-top: 1%;}
.Ma5_2 a{display: inline-table; padding: 10px 50px;font-size: 140%;background-color: #057668;color: #ffffff;margin:15px 10px auto;}

@media screen and (max-width: 720px) {
.Ma5{margin: 0 auto; padding-bottom: 12%;}
.Ma5_1{ padding-top: 6%; }
.Ma2_2{ padding-top: 2%; }
}




.Ma1 img,.Ma2 img ,.Ma3 img ,.Ma4 img {max-width: 100%;}

@media screen and (max-width: 1366px) {
.Ma1 img,.Ma2 img ,.Ma3 img ,.Ma4 img  {width:820px;}
}
@media screen and (max-width: 720px) {
.Ma1 img,.Ma2 img ,.Ma3 img ,.Ma4 img  {width:100%;}
}


@keyframes spin{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}}
@keyframes spinL{
from {transform: rotate(0deg);}
to {transform: rotate(-360deg);}}

.slogan{position: absolute; right: 15%; top:0; font-size: 170%; font-weight: 600; color: #5a5a5a; letter-spacing: 5px; transform: translate(0%,-100%);}

.slogan span{margin-right: 10px;}
.slogan img{margin: auto; letter-spacing: 0px;}
.slogan .s1{width: 30px; position: absolute; top: 100%; margin-left: -52px;animation: spin 3s linear infinite;}
.slogan .s2{width: 60px; position: absolute; top: 40%; margin-left: -20px;animation: spinL 5s linear infinite;}
.slogan .s3{width: 25px; position: absolute; top: 0%; margin-left: 28px;animation: spin 2s linear infinite;}
.slogan .s4{width: 40px; position: absolute; top: 45%; margin-left: 45px;animation: spinL 4s linear infinite;}
@media screen and (max-width: 1600px) {
.slogan{ right: 150px;}
}
@media screen and (max-width: 1366px) {
.slogan{ right: 100px;}
}
@media screen and (max-width: 980px) {
.slogan{ font-size: 140%;}
}
@media screen and (max-width: 730px) {
.slogan{ display:none;}
}

.Rytbnt{position: fixed;right: 0; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 1; opacity: 0; -webkit-transition: all 600ms; transition: all 600ms;}
.Rytbnt.hover{opacity: 1;}
@media screen and (max-width: 1600px) {
.Rytbnt{width: 55px;}
}
@media screen and (max-width: 1366px) {
.Rytbnt{width: 50px;}
}
@media screen and (max-width: 720px) {
.Rytbnt{display: none;}
}

.text{ position: relative; z-index: -1; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding: 1% 1% 1% 1%; font-size: 100%; font-weight:bold; text-align: left; background-color: #fdf3e4; color: #e50011; border-width: 1px; border-style:solid; border-color: #e50011; margin: 1% 5%; text-align:justify;}
.text a{ text-decoration: underline; color: #e50011;}
.text div span.w1{position: relative; display: block; width: 100%; text-align: left; max-width: 90%; font-weight: 600; margin: 10px auto; text-align:justify;}
.text div span.w1 b{color: #e50011;}

@media screen and (max-width: 1366px) {
.text{margin: 1% 3% 5% 3%}
.text div span.w1{margin: 5px auto;}
}

.footer{ position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding: 50px 0 0; font-size: 100%; text-align: center; background-color: #eeeeee; color: #000000;}
.footerM {width: 100%;}
.footer a{ text-decoration: underline; color: #000000;}
.footer div span.w1{display: block; text-align: left; max-width: 90%; margin: 0px auto 20px;}
.footer div span.w1 b{font-weight: 400; margin-right: 50px; white-space: nowrap;}
.footer div span.w1 b:last-child{margin-right: auto;}
.footer div span.w2{position: relative; display: block; width: 100%; max-width: 90%; font-weight: 600; margin: 10px auto;text-align:justify;}
.footer div span.w2 b{color: #a50000;}
.footer .gotop{ position:fixed; display: none; align-items: center; justify-content: center; text-decoration: none; width: 50px; height: 50px;border-radius: 50%; right: 30px; bottom:30px; color: #ffffff; background-color: #21a8b9; font-size: 140%; z-index:1; line-height:100%; box-sizing: border-box; padding: 0; box-shadow: 0px 0px 5px #000000;}
.footer .gotop.hover{ display: flex;}
@media screen and (max-width: 730px) {
.footer .gotop{width: 40px; height: 40px; right: 20px; bottom:20px;}
}
.footer .logoA {width: 100%;display: flex; align-items: center; justify-content: space-between; background-color: #008d6a; margin-top: 40px;}
.footer .logoA .logoL{margin-left: 20px; height: 35px;}
.footer .logoA .logoR{height: 60px;}
@media screen and (max-width: 1366px) {
.footer div span.w1{max-width: 95%;}
.footer div span.w2{max-width: 95%;}
.footer div span.w1 b{margin-right: 30px;}

.footer .logoA .logoR{height: 50px;}
}
@media screen and (max-width: 980px) {
.footer{padding: 50px 0 0;}
.footer div span.w1 b{display: block; margin: 5px auto;}
.footer div span.w2{margin-top: 40px;}
.footer .logoA .logoL{margin-left: 15px;}
}