@charset "utf-8";
/* CSS Document */
@import url("reset.css");
a{ text-decoration:none; outline:none;}
ul, li{ list-style:none;}
.clearfix:before, .clearfix:after {content: "";display: table;height: 0;overflow: hidden;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
*{ margin:0; padding:0;}
.Header{text-align: center; background-color: #3a9cbc; line-height: 0}
.Border{ width: 950px; margin: auto;}
.Header img{height: auto; width: 100%;}
.WRAPPER{ width:100%; height:auto;padding-bottom: 1%;}
.EVENTCOVER{ width:100%; height:548px; margin:0 auto;background: url('../images/main1920.jpg') no-repeat center top;}
.EVENTCOVER .EVENTCOVER_AREA{width: 950px;height: 548px;margin: 0 auto;position: relative;}
.EVENTCOVER .EVENTCOVER_AREA a{display: block;width: 205px;height: 80px;position: absolute;top: 25px;left: 25px;}

.BELT{ width:100%; height:auto;background: url('../images/bg.jpg') repeat-y center top;padding-bottom: 10px;}
.BELT ul{max-width:930px; margin:0 auto 10px auto;background: url('../images/Feedbacktitle01.png') no-repeat center top #DD7AB5;border-radius: 10px;padding: 128px 10px 10px;display: flex;flex-direction:row;flex-wrap:wrap;align-items: center;align-content:center; justify-content: center; }
.BELT ul:nth-child(2){background: url('../images/Feedbacktitle02.png') no-repeat center top #4CB0C0;}
.BELT li{width: 16%;height: auto;margin: 10px 0px;background-color: #fff;position: relative; align-self:  center; text-align: center;}
.BELT li:after{content:"";border-right: 2px dashed #f46090;position: absolute;top: 5%;right: 0px;bottom: 5%;z-index: 99;}
.BELT li:last-child:after{border-right: 0px dashed transparent;}
/*.BELT li:nth-child(1){border-radius: 10px 0px 0px 10px;}*/
.BELT li:last-child{border-radius: 0px 10px 10px 0px;}
.BELT li:nth-child(6n+1){border-radius: 10px 0px 0px 10px;}
.BELT li:nth-child(6n+6){border-radius: 0px 10px 10px 0px;}
.BELT li:nth-child(6n+6):after{border-right: 0px dashed transparent;}

.PACKAGE{ width:100%; height:auto;background: url('../images/bg.jpg') repeat-y center top;}
.BOX_HOUSE{ width:960px; height:auto; margin:0 auto; overflow:hidden;padding-bottom: 5%;}
.BOX_HOUSE ul{ width:960px; height:auto;}
.BOX_HOUSE li.LONG{width:440px;height:auto;border-radius:5px; background-color:#FFF; margin:0px 5px 10px 5px; padding:0px 15px 20px 15px; float:left; position:relative;}
.BOX_HOUSE li h6{ width:440px;height: 45px; text-align:center; border-bottom:1px solid #8c8c8c; margin-bottom:15px; padding:10px 0px 5px 0px;}
.BOX_HOUSE li p{width:400px; margin:0px auto 15px auto;color:#333333;font: 17px/23px "微軟正黑體";}
.BOX_HOUSE li p.T1{}
.BOX_HOUSE li p.T1:before{content: "•";margin-right: 5px;}
.BOX_HOUSE li p.T1 span{color:#ff3e3e; font-weight:bold;}
.BOX_HOUSE li p.T1 span b.Z1, .BOX_HOUSE li p.T1 span b.Z2{font-size: 18px; font-family:"Century Gothic";}
.BOX_HOUSE li p.T1 small{font-size:14px; color:#545454;}
.BOX_HOUSE li p.T2{margin-top: 10%;}
.BOX_HOUSE li p.T2:after{content: "活動詳情";display:block;width:90%; height:32px;border-top:1px solid #8c8c8c; text-align: center;background-color:#727272;color: #fff;border-radius: 5px;font:bold 15px/30px "微軟正黑體";position: absolute;bottom: 2.5%;left:5%;}
.WRAPPER p.T3, .WRAPPER p.T4{ text-align:center; font:16px/65px "微軟正黑體"; color:#FFF;}
.WRAPPER p.T4{line-height:20px; margin-bottom:30px;}

.BOX_HOUSE li p.CONCERN{height: 137px;display:-webkit-flex;display:flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;font:bold 40px/42px "微軟正黑體"; color:#164093; text-align:center;}
.BOX_HOUSE li p.CONCERN2{height: 20px;font:bold 20px/20px "微軟正黑體"; color:#333333; text-align:center;}

.MENUAREA{width: 100%;height: auto;background-color: #000000;position:fixed;z-index:888;bottom: 0px;}
.MENUAREA ul{width: 950px;height: auto;margin: 0px auto 0px auto;list-style: none;}
.MENUAREA ul li a{float: left;width: 25%;height: 2em;font: bold 2em/2em "微軟正黑體";color: #FFFFFF;text-align: center;}
.MENUAREA ul li a:hover{color:#FFF100;}


@media screen and (max-width:768px){
	*{ padding:0; margin:0;}
	body, html{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
	.WRAPPER{ width:100%; height:auto;padding-bottom: 5%;}

	.EVENTCOVER{ width:100%; height:0px;padding-bottom: 57.842%; margin:0 auto;background: url('../images/main1920.jpg') no-repeat center top;background-size: cover;}
	.EVENTCOVER .EVENTCOVER_AREA{width:100%;height: 0px;padding-bottom: 57.842%;margin: 0 auto;position: relative;}
	.EVENTCOVER .EVENTCOVER_AREA a{display: block;width:30%;height:0px;padding-bottom:15%;position: absolute;top: 0;left:0;}

	.BELT{ width:100%; height:auto;background: url('../images/bg.jpg') repeat center top;}
	.BELT ul{ width:85%;height: auto;margin:0 auto 2.5% auto;background: url('../images/Feedbacktitle01.png') no-repeat center top #DD7AB5;background-size: 55% auto;border-radius: 10px;padding-top: 20%;overflow: hidden;padding-bottom:5%;}
	.BELT ul:nth-child(2){background: url('../images/Feedbacktitle02.png') no-repeat center top #4CB0C0;    background-size: 55% auto;}
	.BELT li{float:left;width:47%;height: auto;margin:0 2.5% 2.5% 0%;background-color: #fff;position: relative;border-radius:10px;}
	.BELT li:nth-child(2n+2){margin:0 0 2.5% 0%}
	.BELT li:nth-child(4n+1){border-radius: inherit;}
	.BELT li img{width: 100%;height: auto;padding: 0% 0%;}
	.BELT li:after{content:"";border-right:inherit;position: absolute;top: inherit;right:2%;bottom: 0%;left: 2%;z-index: 99;}
	.BELT li:last-child:after{border-right:inherit;}
	.BELT li:nth-child(1){border-radius: inherit;}
	.BELT li:last-child{border-radius: inherit;}

	.PACKAGE{ width:100%; height:auto;}
	.BOX_HOUSE{ width:96%; height:auto; margin:0 auto; overflow:hidden;}
	.BOX_HOUSE ul{ width:100%; height:auto;}
	.BOX_HOUSE li.LONG{ width:90%; height: auto; border-radius:5px; background-color:#FFF; margin:0% 2% 5% 2%; padding:0% 3% 2.5% 3%; float: none; position:relative;}
	.BOX_HOUSE li h6{ width:100%;height: auto; text-align:center; border-bottom:1px solid #8c8c8c; margin-bottom:5%;}
	.BOX_HOUSE li h6 img{ width:50%; height: auto;}
	.BOX_HOUSE li p{ width:90%; margin:0% auto 2% auto; font-family:"微軟正黑體"; color:#333333; line-height:1.6em; text-align:justify; font-size:0.9em;}
	.BOX_HOUSE li p.T1{}
	.BOX_HOUSE li p.T1:before{content: "•";margin-right: 2.5%;}
	.BOX_HOUSE li p.T1 span b.Z1, .BOX_HOUSE li p.T1 span b.Z2{ font-size:1.5em; font-family:"Century Gothic";}
	.BOX_HOUSE li p.T1 span b.Z2:before{ content:"$"; font-size:0.6em;}
	.BOX_HOUSE li p.T1 small{ font-size:0.8em; color:#545454;}
	.BOX_HOUSE li p.T2:after{content: "活動詳情";display:block;width:90%; height:32px;border-top:1px solid #8c8c8c; text-align: center;background-color:#727272;color: #fff;border-radius: 5px;font:bold 15px/30px "微軟正黑體";position: relative;bottom: 2.5%;left:5%;}
	.WRAPPER p.T3, .WRAPPER p.T4{ text-align:center; font:0.9em/3em "微軟正黑體"; color:#FFF;}
	.WRAPPER p.T4{ line-height:1.2em; margin-bottom:3%; text-align:justify;}

	.MENUAREA ul{width: 100%;}
	.MENUAREA ul li a{float: left;width: 25%;height: 1.8em;font: bold 1em/1.8em "微軟正黑體";color: #FFFFFF;text-align: center;}
	.Border{ width: 100%;}

}
