@charset "utf-8";
@font-face {
 font-family: 'Noto Sans TC';
 src: url(../webfonts/static/NotoSansTC-Black.ttf);
}

body,html { margin:0; padding:0; height:100%; font-size: 100%; }
.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; background-color: #f8f4ea; min-height: calc(100% - 60px); padding-bottom: 7%; padding-top: 60px;}

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

}
@media screen and (max-width: 720px) {
.main{ min-height:calc(70% ); padding-bottom: 12%;}
}

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;border-bottom: 1px #cad1d8 solid; align-items: center;justify-content: space-between; z-index: 2; background-color: #ffffff; width: 100%; }
.topmenu .logoL{ height: 45px;  margin-left: 20px;cursor: pointer;}
.topmenu .logoR{ height: 60px;}
.topmenu .Mbnt{ color: #3d4752; flex: 1; text-align: right; }
.topmenu .Mbnt a{ color: #3d4752; white-space: nowrap; font-size: 120%; font-weight: 600; margin-right: 35px;}
.topmenu .Mmenubnt{display: none;}
.topmenu .Mbnt .close{ display: none;}


@media screen and (max-width: 1366px) {
.topmenu .logoL{ height: 35px; }
.topmenu .logoR{ height: 50px;}
.topmenu .Mbnt a{ margin-right: 25px;}
}
@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: 1px #cad1d8 solid; line-height: 300%; font-weight: 600; font-size: 140%; margin-right: 0; color: #3d4752; }
.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: #3b5168;}
.topmenu .Mmenubnt:hover{ border-bottom: none;}
.topmenu .Mbnt .close{ position: absolute; top: 2%; right: 2%; font-size: 320%; color: #3b5168; display:block;}
.topmenu .Mbnt a.bntMaYt{display: block}
}

.title{font-family: 'Noto Sans TC', sans-serif; font-weight: 400;color: #d78c45; display: block;  text-align:center;transform: translate(0%,-100%); font-size: 400%; letter-spacing: 5px;-webkit-transition: all 400ms; transition: all 400ms; margin-bottom: 10px;}
.title span{color: #d78c45;font-family: 'Noto Sans TC', sans-serif;}

.titleS1 {font-family: 'Noto Sans TC', sans-serif; font-size: 220%; line-height: 120%; color: #b49336;}
.titleS1 span {font-family: 'Noto Sans TC', sans-serif;}
.titleS1 b{ color: #5a5a5a;}
.titleS2{font-family: 'Noto Sans TC', sans-serif;font-size: 150%; line-height: 120%;margin-top: 5px; color: #333333; max-width: 1024px; margin:15px auto auto;}
.titleS2 span{color: #eb6e19;font-family: 'Noto Sans TC', sans-serif;}
.titleS3{}
.slogan{font-family: 'Noto Sans TC', sans-serif;display: block; text-align: center; font-size: 150%; line-height: 120%; color: #333333; letter-spacing: 1px; }
.slogan span{display: block;font-family: 'Noto Sans TC', sans-serif;}
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1366px) {
}
@media screen and (max-width: 980px) {
}

@media screen and (max-width: 720px) {
.title{ font-size: 280%;letter-spacing: 0px;line-height: 120%;}
.slogan{font-size: 150%; letter-spacing:  0px; width: 95%; margin: auto; }
.slogan span{display:inline;}
.titleS1{ width: 95%; font-size: 170%; margin: auto; }
.titleS2{width: 95%; font-size: 140%;}
/*.titleS1 span ,.titleS2 span{display: block}*/
}

.Ma{position: relative; text-align: center; box-sizing: border-box; }
.Ma img {width: 100%;}
.Ma img.kvA{display: none;opacity: 0;  position: absolute; left: 50%; transform: translateX(-110%); top: 15%; width: 48%;}
.Ma img.kvB{display: none;opacity: 0;  position: absolute; left: 50%; transform: translateX(-110%); bottom: 15%; width: 48%;}
@media screen and (max-width: 1366px) {

}
@media screen and (max-width: 720px) {
.Ma img.kvA { left: 5%; transform: translateX(0%);width: 85%; }
.Ma img.kvB { left: 5%; transform: translateX(0%);width: 75%; }
}

.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%,0%);}


.Ma1{position: relative; margin: 3% auto auto;padding-bottom: 0%; opacity: 0; -webkit-transition: all 600ms; transition: all 600ms;}
.Ma1.hover{ opacity: 1;}

.Ma1 .titleS1{}
.Ma1 .time{display: block; position: absolute;width: 100%; text-align: center;  top: -5%; transform: translate(0,-50%);font-family: 'Noto Sans TC', sans-serif;font-size: 300%; color: #1c485c;
	text-shadow:2px 0 0 #ffffff,0 2px 0 #ffffff,-2px 0 0 #ffffff,0 -2px 0 #ffffff,3px 3px 0 #00000099; }

.Ma1_1{text-align: center;}
.Ma1_1 img{ margin-top: 0%;}

@media screen and (max-width: 1600px) {
	.Ma1 .time{transform: translate(0,-40%) }
}
@media screen and (max-width: 1280px) {
	.Ma1 .time{transform: translate(0,-20%) }
}
@media screen and (max-width: 720px) {
.Ma1{margin: 12% auto auto; padding: 0;}
.Ma1 .time{ transform: translate(0,-50%);font-size: 250%; }
.Ma1_1{ padding-top: 0%;}
}

.Ma2{position: relative; background-color: #ffffff;  margin: 5% auto auto; padding: 5% 0; opacity: 0; -webkit-transition: all 600ms; transition: all 600ms;}
.Ma2.hover{ opacity: 1;}

.Ma2 .titleS1{ color: #6fabab;}

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


@media screen and (max-width: 720px) {
.Ma2{margin: 12% auto auto; padding: 12% 0;}
.Ma2_1{ padding-top: 0%;}
.Ma2_1 img{ margin-top: 2%;}
}

.Ma3{position: relative; margin: 5% auto auto; padding: 0;opacity: 0; -webkit-transition: all 600ms; transition: all 600ms;}
.Ma3.hover{ opacity: 1;}

.Ma3 .titleS1{}

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

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

.Ma3_3 { margin-top: 3%;text-align: center;}
.Ma3_3 img{ margin-top: 1%;}


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


.Ma4{position: relative; background-color: #ffffff; margin: 5% auto auto; padding: 5% 0; opacity: 0; -webkit-transition: all 600ms; transition: all 600ms;}
.Ma4.hover{ opacity: 1;}

.Ma4 .titleS1{ color: #333333;}

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

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

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

.Ma4_4 { padding-top: 3%;text-align: center;}
.Ma4_4 img{ margin-top: 3%;}

.Ma4_5 { padding-top: 3%;text-align: center;}
.Ma4_5 img{ margin-top: 3%;}

@media screen and (max-width: 720px) {
.Ma4{margin: 12% auto auto; padding: 12% 0;}
.Ma4_1{ padding-top: 1%;}
.Ma4_2{ padding-top: 11%;}
.Ma4_3{ padding-top: 11%;}
.Ma4_4{ padding-top: 11%;}
.Ma4_5{ padding-top: 11%;}
}

.Ma5{position: relative; margin: 5% auto auto; padding: 0; opacity: 0; -webkit-transition: all 600ms; transition: all 600ms;}
.Ma5.hover{ opacity: 1;}

.Ma5 .titleS1{ color: #b49336;}
.Ma5 .titleS2{ font-size: 200%; font-weight: 600%;margin-bottom: 15px;color: #c5762b; }
.Ma5_1{ text-align: center;}
.Ma5_1 img{ margin-top: 1%;}
.Ma5_2{ padding-top: 3%;max-width: 95%; font-weight: 400; margin: auto; color: #616161;  text-align: center;}
.Ma5_2 .titleS1{ color: #3b5168;}
.Ma5_2 .w3{ margin-top: 1%; font-size: 180%;}
.Ma5_2 b{white-space: nowrap; }
.Ma5_3 {text-align: center; margin-top: 1%;}
.Ma5_3 a{display: inline-table; padding: 10px 30px;font-size: 130%;background-color: #3b5168;color: #ffffff;margin:15px 10px auto;}

@media screen and (max-width: 720px) {
.Ma5{margin: 12% auto auto; padding: 0;}
.Ma5 .titleS1{font-size: 200%;}
.Ma5_1{ padding-top: 0%; }
.Ma5_2{ padding-top: 9%; }

}




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

@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 720px) {
.Ma1 img,.Ma2 img ,.Ma3 img ,.Ma4 img ,.Ma5 img {width:98%;}
}


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


.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;}
}

.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: #ffffff; color: #000000;}
.footerM {width: 100%;}
.footer a{ text-decoration: underline; color: #000000;}
.footer div span.w2{position: relative; display: block; width: 100%; max-width: 90%; font-weight: 600; margin: 10px auto;text-align:justify; line-height: 160%;}
.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: #3b5168; 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; background-color: #d03232; margin-top: 40px; padding: 10px 0; color: #ffffff;}
.footer .logoA a{ color: #ffffff;}
.footer .logoA span.w1{display: flex;justify-content: space-evenly; width: 100%;}
.footer .logoA .logoL{margin-left: 20px; height: 35px;}
@media screen and (max-width: 1366px) {
.footer div span.w2{max-width: 95%;}
}
@media screen and (max-width: 980px) {
.footer{padding: 50px 0 0;}
.footer .logoA span.w1,.footer .logoA span.w1 b{display: block; margin: 5px auto;}
.footer div span.w2{margin-top: 40px;}
.footer .logoA .logoL{margin-left: 15px;}
}