body{font-family: "Arial","微軟正黑體";background:  url("../images/Body-BG.svg") repeat center center/20%;overflow-x: hidden;}
a:hover{text-decoration: none;}
p{font-size: 20px;}
.top{height:65px;background:#282828; color:#FFF;}
.top_h2{color:#FFF;float:left; font-size:1.8em; font-weight:600; letter-spacing:2px; padding-left:20px;line-height: 70px;display: block;} 
.top_img{float:left; height:60px; padding-left:20px;}

/* visual */
header#visual{height: 75vh;background-color: #3496dd;position: relative;background:  url("../images/BG.svg") no-repeat 20px center/80%;padding-bottom: 52%;background-position: center 80px;}
.button{display: block;width: 330px;height: 250px;position: absolute;bottom:10%;left: 28%;z-index: 100;}

header#visual img.title{width: 48%;position: absolute;top:22%;left:50%;right:50%;margin-left: -25%;z-index: 1000;}
header#visual img.logo{display: block;}
.book{width: 330px;position: absolute;bottom: 3%;left: 0;}
.Bwei{width: 160px;position: absolute;bottom: 100px;right: 40%;}
.coupon{width: 280px;position: absolute;top:48%;right: 30%;}
.event-title{width: 25%;}


div#EventBanner { position: fixed; top:0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 99999999; }
div#EventBanner > div.Content { margin: 150px auto 0 auto; width: 1100px;}
div#EventBanner > div.Content > h1 { color: #555; font-size: 3em; padding: 0 0 10px 0; letter-spacing: 1.5px; }
div#EventBanner > div.Content > p{font-weight: 600;color: #C33;text-align: center;font-size: 22px;}
div#EventBanner > div.Content ol{margin-left: 250px;font-size: 18px;}
div#EventBanner > div.Content img { width: 40%; padding: 0;display: block;margin:150px auto 0 auto; }
div#EventBanner > div.BTN-CLOSE { width: 150px; height: 40px; line-height: 40px; text-align: center; background-color: #96929c;  color: #FFF; margin: 20px auto 0 auto; border-radius: 5px; transition: 0.3s; }
div#EventBanner > div.BTN-CLOSE:hover { cursor: pointer; background-color: #000; transition: 0.3s; }
div#EventBanner > div.BTN-CLOSE a{color: #FFFFFF;}

#button{width: 80%;display: block;margin:20px auto;}

.class-prmo{background-color: #ffede3;border: 3px solid #000000;border-radius: 20px;}
.event{background-color: #f4bc9d;border: 3px solid #000000;border-radius: 20px;}
.class_box{padding: 20px 0;}

.left_class{width:95%;height:100%;margin:10px auto;overflow:hidden;color:#333;padding-top:20px;}
.left_class ul{float:left;text-align:left;margin-top:0px;}
.left_class li{font-size:1.2em;font-family:"微軟正黑體";list-style:none;margin-bottom:8px;}
.left_class li i{color:#933;}
.left_class li a{color:#666;text-decoration:none;}
.left_class li a:hover{color:#000;}

.draw-title{width: 40%;display: block;margin: auto;}

#PP{display: none;}

.st0:hover, .st2:hover{fill:#FFFFFF; transition: all .4s ease;}
.btn-secondary:hover {color: #fff;background-color: #000;border-color: #000;}
.btn:not(:disabled):not(.disabled) {cursor: pointer;}
.btn-secondary:hover {color: #fff;background-color: #000;border-color: #000;}

#close .btn {border-radius: 0;}
#page2{display: block;}




section#PP{ padding: 20px; }
section#PP h1{ font-weight: bold; text-align: center;}

section#PP > div.row{ padding: 50px; }
section#PP a > button{ width: 250px; margin: 50px 0 0 30px; background-color: #f4bc9d; color: #000000; padding:15px 5px; border-radius: 10px;font-weight: bold;border: 2px solid #000000;font-size: 1.35rem;height: 85px;}
section#PP a > button:hover{ background:#FFFFFF; transition: .2s linear; cursor: pointer;}
section#PP a > .blue{background-color: #b0dcd4;}

@media(max-width:1800px){}
@media(max-width:1680px){}
@media(max-width:1600px){}
@media(max-width:1440px){
	header#visual{height: 100vh;background-color: #3496dd;position: relative;background:  url("../images/BG.svg") no-repeat 20px center/100%;padding-bottom: 50%;background-position: center 80px;}
	.book{width: 280px;position: absolute;bottom: 10%;left: -50px;}.Bwei{width: 160px;position: absolute;bottom: 100px;right: 200px;}
}
@media(max-width:1366px){}
@media(max-width:1280px){}
@media(min-width:1200px){
	.container {max-width: 1360px;}
	div#EventBanner > div.Content { margin: 0 auto 0 auto; width: 70%;}
}


@media(max-width: 767px){
p{font-size: 16px;text-align: justify;}

/* visual */
header#visual{height: 630px;background:  url("../images/BG-MB.svg") no-repeat center 80px/98%;}
.button{display: block;width: 200px;height: 150px;position: absolute;bottom: 9%;left: 0;z-index: 10000;}
.book{width: 200px;}
.Bwei{width: 120px;position: absolute;bottom: 100px;right: 20px;}
.coupon{width: 220px;position: absolute;top:30%;right: 21%;}
.top_h2{display: none;}

/* 活動說明 */
.event-title{width: 35%;}

/*燈箱*/
div#EventBanner > div.Content img { width: 80%; padding: 0;display: block;margin: auto; }
div#EventBanner > div.Content { margin: 150px auto 0 auto; width: 100%;}

.draw-title{width: 90%;}
section#PP a > button{ width: 100%; margin: 50px 0 0 0; background-color: #f4bc9d;padding:15px 5px; border:none; border-radius: 5px; font-size: 1rem;height: 85px;}
section#PP{ padding: 0; }
}

@media(max-width: 375px){

}