@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%; overflow-x: clip;}
body{ background: url(../images/backgroundS.jpg)}
.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 (min-width: 721px) {
.pcI{display: inline-block;}
.mI{display: none !important;}
}
@media screen and (max-width: 720px) {
.mI{display: inline-block;}
.pcI{display: none !important;}
}

/*內容區*/
.main{ box-sizing: border-box; min-height: calc(100% - 150px); }

@media screen and (max-width: 1366px) {
.main{}
}
@media screen and (max-width: 980px) {

}
@media screen and (max-width: 720px) {
.main{}
}

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

	div.banner{width: 100%; background: url(../images/flash.png) top no-repeat; background-size: 100% auto;background-position:0px -500px; opacity: 0; justify-content: center; margin: auto; -webkit-transition: all 400ms; transition: all 400ms;}
	div.banner.show{background-position:0px 0px; opacity: 1;}
	div.banner div.star{ display: flex;justify-content: center; align-items: center; width: 100%; background: url(../images/star.png) no-repeat; background-size:auto 105%; background-position: 50% top;}
	div.banner div.star img{ width: 100%; max-width: 1100px;opacity: 0; margin-top: 300px;; -webkit-transition: all 400ms; transition: all 400ms;}
	div.banner.show div.star img{opacity: 1; margin-top: 0px;}
	div.bannerM{display: none;}

@media screen and (max-width:720px){
	div.banner{display: none;}
	div.bannerM{display: block;}
	div.bannerM img{ width: 100%;}
}


.titleM{background-color: #f9e6b9; text-align: center; padding: 10px 0;}

.title{font-family: 'Noto Sans TC', sans-serif; width: 100%; transform: translate(-150%,0%);  text-align:center; font-size: 400%; letter-spacing: 5px; padding-left: 2px; -webkit-transition: all 400ms; transition: all 400ms;color: #333333; }
.title::before {
content: attr(data-storke);
position: absolute;
-webkit-text-stroke: 8px #ffffff;
text-stroke: 8px #ffffff;
z-index: -1;
}
.title span{font-family: 'Noto Sans TC', sans-serif;}
.title .w1{font-family: 'Noto Sans TC', sans-serif;color:#a04044;}

@media screen and (max-width: 1600px) {
.title{font-size: 370%;}
}
@media screen and (max-width: 1366px) {
.title{ font-size: 350%; }
}
@media screen and (max-width: 980px) {
.title{ font-size: 310%; }
}
@media screen and (max-width: 720px) {
.title{font-size: 240%;letter-spacing: 0px; padding-left: 0px;}
.title span{display: block}
}

.WF{  transform: translateX(100%); opacity: 0; -webkit-transition: transform 400ms; transition: transform 400ms;}
.hover {opacity: 1}
.hover .WF {  transform: translateX(0%); opacity: 1;}
.hover .title{transform: translate(0%,0%);  }

.titleS1 {
  position: relative;
font-weight: 600;
	text-shadow: 1px 1px 0px #333333;
  color: #ffffff;
  font-size: 210%;
	padding: 8px 45px; 
	margin: 30px auto auto;
	line-height: 110%;
	width: fit-content;
	background: #a04044;
  text-decoration: none;
}
@media screen and (max-width: 720px) {
	.titleS1 {font-size: 190%;}
	.titleS1 span{display: block}
}
.titleS1::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -24px;
	width: 30px;
	border-left: 15px solid #faf5df;
    z-index: 0;
    /* 背景色設在偽元素上 */
    background: #a04044;
    transform: skew(-29deg);
}

.titleS1::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -24px;
	width: 30px;
	border-right: 15px solid #faf5df;
    z-index: 0;
    /* 背景色設在偽元素上 */
    background: #a04044;
    transform: skew(-29deg);
}

.titleS2{font-size: 155%; font-weight: 600; color: #707070; margin-top: 10px;}
@media screen and (max-width: 720px) {
	.titleS2 span{display: block}
}

.wS1{font-size: 90%; font-weight: 600; color: #707070; margin-top: 20px;}
.wS2{font-size: 90%; font-weight: 600; color: #97292a; margin-top: 5px;}

.Ma1{position: relative; background-color: #faf5df;margin: 5% auto auto; padding:0px; box-sizing: border-box; width: 100%; padding-bottom: 5%;opacity: 0; -webkit-transition: all 400ms; transition: all 400ms;}
.Ma1.hover{ opacity: 1;}

.Ma1_titleS{display: flex;background-color: #ffffff;justify-content: center; padding: 10px 0; font-size: 105%;}
.Ma1_titleS i {color: #992929; font-size: 220%;}
.Ma1_titleS .b{font-size: 180%; padding: 0 10px;color: #ffffff; font-weight: 600;z-index: 0; white-space: nowrap;}
.Ma1_titleS .b::before {
content: attr(data-storke);
position: absolute;
-webkit-text-stroke: 8px #a04044;
text-stroke: 8px #a04044;
z-index: -1;
}
.Ma1_titleS>div{display: flex; align-items: center; padding: 0px 20px; border-right: 2px solid #999999;}
.Ma1_titleS>div:first-child{padding-left: 0;}
.Ma1_titleS>div:last-child{border-right: none; padding-right: 0;}

@media screen and (max-width: 1600px) {
.Ma1_titleS{font-size: 100%;}	
}
@media screen and (max-width: 1280px) {
	.Ma1_titleS>div{flex-wrap: wrap; padding: 0px 20px;}
	.Ma1_titleS>div:first-child{padding-left:20px}
}
@media screen and (max-width: 720px) {
	.Ma1_titleS{flex-direction:column; font-size: 105%;}
	.Ma1_titleS .b{padding: 0 20px 0 10px;}
	.Ma1_titleS .w{width: 100%; font-size: 125%; margin-top: 5px;}
	.Ma1_titleS>div{position: relative; border-right: none; padding: 15px 0; justify-content: center; text-align: center;}
	.Ma1_titleS>div:last-child{ padding-right: 0;}
	.Ma1_titleS>div:first-child{padding-left:0;}
	.Ma1_titleS>div::after{content: ''; display: block; position: absolute;  bottom: 0px; height: 2px; width: 60%; background-color: #bbbbbb;}
	.Ma1_titleS>div:last-child::after{ content: none;}
}

.Ma1_1{ padding-top: 0%; text-align: center;}
.Ma1_1 iframe{ margin-top: 1%; width: 100%; height: 80vw; max-width: 1024px; max-height: 576px; }

@media screen and (max-width: 720px) {
.Ma1{margin: 15% auto 15%; padding-bottom: 12%;}
.Ma1_1{ padding-top: 0%;}
}


.Ma2{position: relative; display: flex;  background-color: #f9e6b9; margin: 5% auto auto;  width: 100%; max-width: 1280px; padding-bottom: 6%;opacity: 0; -webkit-transition: all 400ms; transition: all 400ms; padding: 20px; box-sizing: border-box; border-radius: 70px;}
@media screen and (max-width: 720px) {
	.Ma2{width: 100%; border-radius: 0; padding: 30px 10px;}
}
.Ma2.hover{ opacity: 1; }

.Ma2 .title{writing-mode:vertical-lr; font-size: 500%; width: auto; text-align:left;}
.Ma2 .title::before {
writing-mode:vertical-lr;
content: attr(data-storke);
position: absolute;
-webkit-text-stroke: 8px #ffffff;
text-stroke: 8px #ffffff;
}
.Ma2 .title::after{ position: absolute; left: -40px; top: -60px; z-index: -2; content: ''; display: block; width: 200px; height: 200px; background-image: url(../images/circle.png); background-repeat: no-repeat; background-size: 100%;}

.Ma2 .titleS1::after,.Ma2 .titleS1::before{border-color: #f9e6b9;}

.Ma2 .r{width: 100%;}
.Ma2 .butM {display: flex; margin-bottom: 20px;justify-content: center;position: relative; z-index: 4; }
.Ma2 .butM .but{font-size: 120%; display: flex; justify-content: center; align-items: center;margin-right: 20px;  background-color: #999999; color: #ffffff; border-radius: 15px 15px 15px 0; padding: 7px 25px 7px 15px; box-shadow: 3px 3px 5px #888888; cursor: pointer;}
.Ma2 .butM .but b{ display: flex; justify-content: center; align-items: center; width: 55px; height: 55px; border-radius: 50%; background-color: #ffffff; color: #999999; font-size: 170%; line-height: 100%; margin-right: 15px;}

.Ma2 .butM .but.hover{font-weight: 600; background-color: #a04044;}
.Ma2 .butM .but.hover b{color: #a04044;} 

.Ma2_1{text-align: center}
.Ma2_1 .m2{display: none}
.Ma2_1 .m3{display: none}
.Ma2_1 img{ margin-top: 2%;width: 100%; max-width: 1024px;}

@media screen and (max-width: 720px) {
.Ma2{margin: 20% auto; padding-bottom: 12%; flex-direction: column;}
.Ma2 .title{writing-mode:lr; font-size: 300%; text-align: center; margin-bottom: 30px;}
.Ma2 .title::before {writing-mode:lr;}
.Ma2 .title::after{width: 100px; height: 100px; left: 50%; top: 50%; transform: translate(-120px,-50px)}
.Ma2 .butM {justify-content: space-around;z-index: auto;}
.Ma2 .butM .but{font-size: 135%; flex-direction:column; padding: 10px 0; margin: 0 5px; width: 100%; text-align: center;}
.Ma2 .butM .but b{margin-right: 0;font-size: 160%;}
.Ma2_1{ padding-top: 0%;}
}

.Ma3{position: relative; background-color: #faf5df; margin: 5% auto auto; width: 100%; padding-top: 3%;  padding-bottom: 6%;opacity: 0; -webkit-transition: all 400ms; transition: all 400ms; box-sizing: border-box;}
@media screen and (max-width: 720px) {
	.Ma3{width: 100%; border-radius: 0;}
}
.Ma3.hover{ opacity: 1; }
.Ma3 .title::after{ position: absolute; left: 50%; transform: translate(-100%,-80%);z-index: -2; content: ''; display: block; width: 160px; height: 160px; background-image: url(../images/circle.png); background-repeat: no-repeat; background-size: 100%;}

.Ma3 .titleS1::after,.Ma3 .titleS1::before{border-color: #faf5df;}

.Ma3_1{ text-align: center;}
.Ma3_1>div{margin-top: 7%;}
.Ma3_1>div:first-child{margin-top: 4%;}
.Ma3_1 img{ margin-top: 1%; width: 100%;  max-width: 1024px; }

@media screen and (max-width: 720px) {
.Ma3{margin: 20% auto; padding-bottom: 12%;padding: 30px 10px;}
.Ma3 .title{font-size: 300%;}
.Ma3 .title::after{width: 100px; height: 100px; left: 50%; top: 50%; transform: translate(-100px,-50px)}
.Ma3_1{ padding-top:0%;}
.Ma3_1>div{margin-top: 15%;}
.Ma3_1>div:first-child{margin-top: 9%;}
}

.Ma4{position: relative; display: flex;  background-color: #f9e6b9; margin: 5% auto auto;  width: 100%; max-width: 1280px; padding-bottom: 6%;opacity: 0; -webkit-transition: all 400ms; transition: all 400ms; padding: 20px; box-sizing: border-box; border-radius: 70px;}
@media screen and (max-width: 720px) {
	.Ma4{width: 100%; border-radius: 0; padding: 30px 10px;}
}
.Ma4.hover{ opacity: 1; }

.Ma4 .title{writing-mode:vertical-lr; font-size: 500%; width: auto; text-align:left;}
.Ma4 .title::before {
writing-mode:vertical-lr;
content: attr(data-storke);
position: absolute;
-webkit-text-stroke: 8px #ffffff;
text-stroke: 8px #ffffff;
}
.Ma4 .title::after{ position: absolute; left: -40px; top: -60px; z-index: -2; content: ''; display: block; width: 200px; height: 200px; background-image: url(../images/circle.png); background-repeat: no-repeat; background-size: 100%;}

.Ma4 .titleS1::after,.Ma4 .titleS1::before{border-color: #f9e6b9;}

.Ma4 .r{width: 100%;}

.Ma4_1{text-align: center}
.Ma4_1 img{ margin-top: 3%; width: 100%; max-width: 1024px;}

@media screen and (max-width: 720px) {
.Ma4{margin: 20% auto; padding-bottom: 12%; flex-direction: column;}
.Ma4 .title{writing-mode:lr; font-size: 300%; text-align: center; margin-bottom:0px;}
.Ma4 .title::before {writing-mode:lr;}
.Ma4 .title::after{width: 100px; height: 100px; left: 50%; top: 50%; transform: translate(-120px,-50px)}
.Ma4_1{ padding-top: 0%;}
}

.Ma5{position: relative; background-color: #faf5df; margin: 5% auto auto; width: 100%; padding-top: 3%;  padding-bottom: 6%;opacity: 0; -webkit-transition: all 400ms; transition: all 400ms; box-sizing: border-box;}
@media screen and (max-width: 720px) {
	.Ma5{width: 100%; border-radius: 0;}
}
.Ma5.hover{ opacity: 1; }

.Ma5 .titleS1::after,.Ma5 .titleS1::before{border-color: #faf5df;}

.Ma5_1{ text-align: center;}
.Ma5_1>div{margin-top: 7%;}
.Ma5_1>div:first-child{margin-top: 3%;}
.Ma5_1 img{ margin-top: 1%; width: 100%;  max-width: 1024px; }

@media screen and (max-width: 720px) {
.Ma5{margin: 20% auto; padding-bottom: 12%;padding: 30px 10px;}
.Ma5 .title{font-size: 300%;}
.Ma5 .title::after{width: 100px; height: 100px; left: 50%; top: 50%; transform: translate(-100px,-50px)}
.Ma5_1{ padding-top:0%;}
.Ma5_1>div{margin-top: 12%;}
.Ma5_1>div:first-child{margin-top: 5%;}
}

.Ma6{position: relative; display: flex;  background-color: #f9e6b9; margin: 5% auto auto;  width: 100%; max-width: 1280px; padding-bottom: 6%;opacity: 0; -webkit-transition: all 400ms; transition: all 400ms; padding: 20px; box-sizing: border-box; border-radius: 70px;}
@media screen and (max-width: 720px) {
	.Ma6{width: 100%; border-radius: 0; padding: 30px 10px;}
}
.Ma6.hover{ opacity: 1; }

.Ma6 .titleS1::after,.Ma6 .titleS1::before{border-color: #f9e6b9;}

.Ma6 .title{writing-mode:vertical-lr; font-size: 500%; width: auto; text-align:left;}
.Ma6 .title::before {
writing-mode:vertical-lr;
content: attr(data-storke);
position: absolute;
-webkit-text-stroke: 8px #ffffff;
text-stroke: 8px #ffffff;
}
.Ma6 .title::after{ position: absolute; left: -40px; top: -60px; z-index: -2; content: ''; display: block; width: 200px; height: 200px; background-image: url(../images/circle.png); background-repeat: no-repeat; background-size: 100%;}
.Ma6 .r{width: 100%;}
.Ma6 .butM {display: flex; margin-bottom: 20px;justify-content: center;position: relative; z-index: 4; }
.Ma6 .butM .but{font-size: 120%; display: flex; justify-content: center; align-items: center;margin-right: 20px;  background-color: #999999; color: #ffffff; border-radius: 15px 15px 15px 0; padding: 7px 25px 7px 15px; box-shadow: 3px 3px 5px #888888; cursor: pointer;}
.Ma6 .butM .but b{ display: flex; justify-content: center; align-items: center; width: 55px; height: 55px; border-radius: 50%; background-color: #ffffff; color: #999999; font-size: 170%; line-height: 100%; margin-right: 15px;}

.Ma6 .butM .but.hover{font-weight: 600; background-color: #a04044;}
.Ma6 .butM .but.hover b{color: #a04044;} 

.Ma6_1{text-align: center}
.Ma6_1 .m2{display: none}
.Ma6_1 .m3{display: none}
.Ma6_1 img{ margin-top: 2%; width: 100%; max-width: 1024px;}

@media screen and (max-width: 720px) {
.Ma6{margin: 20% auto; padding-bottom: 12%; flex-direction: column;}
.Ma6 .title{writing-mode:lr; font-size: 300%; text-align: center; margin-bottom: 30px;}
.Ma6 .title::before {writing-mode:lr;}
.Ma6 .title::after{width: 100px; height: 100px; left: 50%; top: 50%; transform: translate(-120px,-50px)}
.Ma6 .butM {justify-content: space-around;z-index: auto;}
.Ma6 .butM .but{font-size: 135%; flex-direction:column; padding: 10px 0; margin: 0 5px; width: 100%; text-align: center;}
.Ma6 .butM .but b{margin-right: 0;font-size: 160%; width: 48px; height: 48px;}
.Ma6_1{ padding-top: 0%;}
}

.Ma7{position: relative; background-color: #faf5df; margin: 5% auto auto; width: 100%; padding-top: 3%;  padding-bottom: 6%;opacity: 0; -webkit-transition: all 400ms; transition: all 400ms; box-sizing: border-box;}
@media screen and (max-width: 720px) {
	.Ma7{width: 100%; border-radius: 0;}
}
.Ma7.hover{ opacity: 1; }

.Ma7 .titleS1::after,.Ma7 .titleS1::before{border-color: #faf5df;}

.Ma7_1{ text-align: center;}
.Ma7_1>div{margin-top: 7%;}
.Ma7_1>div:first-child{margin-top: 1%;}
.Ma7_1 img{ width: 100%;  max-width: 1024px; }

@media screen and (max-width: 720px) {
.Ma7{margin: 20% auto; padding-bottom: 12%;padding: 30px 10px;}
.Ma7 .title{font-size: 300%;}
.Ma7 .title::after{width: 100px; height: 100px; left: 50%; top: 50%; transform: translate(-100px,-50px)}
.Ma7_1{ padding-top:0%;}
.Ma7_1>div{margin-top: 12%;}
.Ma7_1>div:first-child{margin-top: 3%;}
}



.Ma8{position: relative; background-color: #f9e6b9; margin: 5% auto auto; width: 100%; padding-top: 3%;  padding-bottom: 6%;opacity: 0; -webkit-transition: all 400ms; transition: all 400ms; box-sizing: border-box;}
@media screen and (max-width: 720px) {
	.Ma8{width: 100%; border-radius: 0;}
}
.Ma8.hover{ opacity: 1; }

.Ma8 .titleS1::after,.Ma8 .titleS1::before{border-color: #f9e6b9;}

.Ma8 .titleS1a{font-family: 'Noto Sans TC', sans-serif; color: #f9383b; font-size: 300%; line-height: 120%;}
.Ma8 .titleS2{font-family: 'Noto Sans TC', sans-serif; font-size: 240%; color: #5a5a5a; line-height: 120%;margin-top: 5px;}
.Ma8 .titleS2 span{font-family: 'Noto Sans TC', sans-serif;}
.Ma8_1{ padding-top: 2%;max-width: 95%; font-weight: 400; margin: auto; color: #616161;  text-align: center;}
.Ma8_1 .w3{ margin-top: 1%; font-size: 180%;}
.Ma8_1 b{white-space: nowrap; }
.Ma8_2 {text-align: center; margin-top: 1%;}
.Ma8_2 a{display: inline-table; padding: 10px 30px;font-size: 130%;background-color: #a04044;color: #ffffff;margin:15px 10px auto;}

@media screen and (max-width: 720px) {
.Ma8{margin: 20% auto; padding-bottom: 12%;padding: 30px 10px;}
.Ma8 .title{font-size: 300%;}
.Ma8 .title::after{width: 100px; height: 100px; left: 50%; top: 50%; transform: translate(-100px,-50px)}
.Ma8_1{ padding-top:0%;}
.Ma8_1>div{margin-top: 12%;}
.Ma8_1>div:first-child{margin-top: 8%;}
}




@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: #702b16; background-color: #ffffff; 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{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{}
.footer .logoA .logoL{margin-left: 15px;}
}
@media screen and (max-width: 720px) {
	.footer .logoA {flex-direction: column; font-size: 110%;}
	.footer .logoA .logoL{margin: 10px 0; height: 40px; }
}