@charset "utf-8";
/* CSS Document */

html,body{ margin: 0; padding: 0; font-family:"Microsoft JhengHei";}

img{ display:block;}

.p_only{}
.m_only{ display:none;}
@media(max-width:750px){
.p_only{ display:none;}
.m_only{ display:block;}
}

/*--電腦板固定選單--*/
.topbar_p{ display: none; position: fixed; z-index: 25; top: 10px; right: 20px;}
.topbar_p>div{ width: 47px; height: 47px; background: #fff; border-radius: 50%; cursor: pointer; text-align: center; line-height: 47px; font-size: 24px; transition: .5s; box-shadow: 0px 0px 10px 0px rgba(0%,0%,0%,0.2);}
.topbar_p>div+div{ margin:0 0 0 10px;}
.topbar_p>div img{ width: 80%; display: inline-block; margin: 5px 0 0 0;}
.topbar_p>div:hover{ background: #f5d34d; }

@media(max-width:1140px){
.topbar_join, .topbar_buy, .topbar_event, .topbar_notice, .topbar_ig{ display: none;}
}
@media(max-width:750px){
.topbar_p{ right: 20px;}
.topbar_p>div.topbar_close{ width: 30px; height: 30px; line-height: 30px; font-size: 18px;}
}

/*--彈窗--*/
.overlay{ display: none; position: fixed; z-index: 30; width: 100vw; height: 100vh; left: 0; top: 0; background: rgba(0,0,0,0.8); cursor: pointer;}
.fakelightbox{ display: none; position: fixed; z-index: 31; width: 600px; height: 350px; left: 50%; top: 50%; margin: -175px 0 0 -300px; padding: 20px; box-sizing: border-box; background: #fff; border:5px solid #f5d34d; border-radius: 10px;}
.fakelightbox_close{ display: none; position: fixed; z-index: 31; width: 47px; height: 47px; right: 20px; top: 10px; background: #fff; border-radius: 50%; cursor: pointer; text-align: center; line-height: 47px; font-size: 24px;}
@media(max-width:750px){
.fakelightbox { width: 95%; left: 2.5%; margin: -175px 0 0 0;}
.fakelightbox_close{ width: 30px; height: 30px; line-height: 30px; font-size: 18px;}
}


/*--第一組--*/
.zone01 .top_banner{ background:url(images/zone01_topbanner.jpg) center top no-repeat; text-align: center;}
.top_banner img{ width: auto; max-width:100%; margin: 0 auto;}

.zone01{ display: none; position: fixed; z-index: 16; top: 0; left: 0; width: 100vw; height: 100vh; -webkit-overflow-scrolling: touch; overflow: auto;}
.zone01_main1{ background: #f5f5f5; }
.zone01_main1>div{ max-width:1000px; margin: 0 auto; padding: 60px 50px; box-sizing: border-box;}
.zone01_main1>div img{ width: auto; max-width:100%; margin:0 auto;}
.zone01_title01{ padding: 0 0 30px 0; }
.zone01_main1 p{ font-size:24px; line-height: 1.8em;}
.zone01_main1 span{ background: #e2e2e2; border-radius: 50px; padding: 3px 15px; display: inline-block; margin: 10px 0;}
.zone01_main1 span+span{ margin: 0 0 10px 0;}
.zone01_main1 .zone01_btn01{ margin:30px auto 0;}


.zone01 .mid_line{ background:url(images/zone04_pic02.jpg)center top no-repeat; text-align: center;}
.mid_line img{ width: auto; max-width:100%; margin: 0 auto;}

.zone01_main2{ background: #f5f5f5; }
.zone01_main2>div{ max-width:1000px; margin: 0 auto; padding: 60px 50px; box-sizing: border-box;}
.zone01_main2>div img{ width: auto; max-width:100%; margin:0 auto;}
.zone01_title02{ padding: 0 0 30px 0; }
.zone01_main2 p{ font-size:24px; line-height: 1.8em; text-align: center; color: #273758;}
.zone01_main2 h3{ font-family:"Microsoft Yahei"; background:url(images/zone01_pic02.jpg) center top repeat; border-radius: 10px; border:5px solid #f5d34d; text-align: center; line-height: 94px; color: #082f54; font-size: 48px;}

.zone01_main2>div img.zone01_pic04{ margin:0;}
.zone01_gift{ position: relative;}
.zone01_gift a{ position: absolute; top: -120px; left: 50%; margin: 0 0 0 -135px;}
.zone01_main2 table{ width: 100%; border: 5px solid #f5d34d; border-radius: 10px; margin: 30px 0 0 0;}
.zone01_main2 th{ background:#7a5fcc; padding: 20px 0; color: #fff;}
.zone01_main2 td{ background:#f5f5f5; padding: 15px 0; color: #000; text-align: center;}
.zone01_main2 td a{ text-decoration:none; color: #ff544d;}

@media(max-width:1140px){
.zone01_main2>div{ padding: 20px 2.5%;}
}

@media(max-width:1000px){
.zone01_main1>div{ padding: 20px 2.5%;}
.zone01_title01{ padding: 0;}
.zone01_main1 p{ font-size:16px;}
.zone01_main1 span{ display: block; padding: 10px 15px; font-size: 12px; border-radius: 5px;}
.zone01_main1 .zone01_btn01{ margin: 10px auto 0;}

.zone01_main2>div{ padding: 20px 2.5%;}
.zone01_title02{ padding: 0;}
.zone01_main2 p{ font-size:16px;}
.zone01_main2 h3{ border: 2px solid #f5d34d; line-height: 48px; font-size: 16px; border-radius: 5px;}	
.zone01_main2>div img.zone01_pic04{ margin: 0 0 120px;}
.zone01_gift a{ top: -145px;}
	
.zone01_main2 table{ border: 2px solid #f5d34d; border-radius: 5px; font-size: 12px; margin: 10px 0 0 0;}
.zone01_main2 th{ padding: 15px 0;}
.zone01_main2 td{ padding: 10px 0;}
}

@media(max-width:600px){
.zone01_main2>div{ padding: 20px 2.5%;}
}


/*--第二組--*/
.zone02 .top_banner{ background:url(images/zone02_topbanner.jpg) center top no-repeat; text-align: center;}

.zone02{ display: none; position: fixed; z-index: 16; top: 0; left: 0; width: 100vw; height: 100vh; -webkit-overflow-scrolling: touch; overflow: auto;}
.zone02_main1{ background: #f5f5f5; }
.zone02_main1>div{ max-width:1000px; margin: 0 auto; padding: 60px 50px; box-sizing: border-box;}
.zone02_main1>div img{ width: auto; max-width:100%; margin:0 auto;}
.zone02_title01{ padding: 0 0 30px 0; }
.zone02_main1 p{ text-align: center; font-size:24px; line-height: 1.8em;}
.zone02_main1 span{ background: #e2e2e2; border-radius: 50px; padding: 3px 15px; display: inline-block; margin: 10px 0;}
.zone02_main1 span+span{ margin: 0 0 10px 0;}
.zone02_main1 .zone02_btn01{ margin:30px auto 0;}

.zone02 .mid_line{ background:url(images/zone02_pic04.jpg)center top no-repeat; text-align: center;}

.zone02_main2{ background: #f5f5f5; }
.zone02_main2>div{ max-width:1000px; margin: 0 auto; padding: 60px 50px; box-sizing: border-box;}
.zone02_main2>div img{ width: auto; max-width:100%; margin:0 auto; margin: 0 auto 30px;}
.zone02_title02{ padding: 0 0 30px 0; }
.zone02_main2 p{ font-size:24px; line-height: 1.8em; color: #ba223e;}
.zone02_main2 span{ background: #e2e2e2; border-radius: 50px; padding: 3px 15px; display: inline-block; margin: 10px 0;}
.zone02_main2 span+span{ margin: 0 0 10px 0;}
.zone02_main2 h3{ font-family:"Microsoft Yahei"; background:url(images/zone01_pic02.jpg) center top repeat; border-radius: 10px; border:5px solid #f5d34d; text-align: center; line-height: 94px; color: #082f54; font-size: 48px;}
.zone02_main2 .zone02_btn01{ margin:30px auto 0;}

.zone02_main2 table{ width: 100%; border: 5px solid #d83553; border-radius: 10px;}
.zone02_main2 th{ background:#940620; padding: 20px 0; color: #fff;}
.zone02_main2 td{ background:#f5f5f5; padding: 15px 15px; color: #000; text-align:left;}
.zone02_main2 td a{ text-decoration:none; color: #ff544d;}

@media(max-width:1140px){
.zone02_main2>div{ padding: 20px 2.5% 300px;}
}

@media(max-width:1000px){
.zone02_main1>div{ padding: 20px 2.5%;}
.zone02_title01{ padding: 0;}
.zone02_main1 p{ font-size:16px;}
.zone02_main1 span{ display: block; padding: 10px 15px; font-size: 12px; border-radius: 5px;}
.zone02_main1 .zone02_btn01{ margin: 10px auto 0;}

.zone02_main2>div{ padding: 20px 2.5% 300px;}
.zone02_main2>div img{ margin: 0 auto 10px;}
.zone02_title02{ padding: 0;}
.zone02_main2 p{ font-size:16px;}
.zone02_main2 h3{ border: 2px solid #f5d34d; line-height: 48px; font-size: 16px; border-radius: 5px;}	
.zone02_main2 span{ display: block; padding: 10px 15px; font-size: 12px; border-radius: 5px;}
.zone02_main2 .zone02_btn01{ margin: 10px auto 0;}
	
.zone02_main2 table{ border: 2px solid #f5d34d; border-radius: 5px; font-size: 12px;}
.zone02_main2 th{ padding: 15px 0;}
.zone02_main2 td{ padding: 10px 5px;}
}

@media(max-width:600px){
.zone02_main1 p{ text-align: left;}
.zone02_main2>div{ padding: 20px 2.5% 200px;}
}



/*--第三組--*/
.zone03 .top_banner{ background:url(images/zone03_topbanner.jpg) center top no-repeat; text-align: center;}

.zone03{ display:none; position: fixed; z-index: 16; top: 0; left: 0; width: 100vw; height: 100vh; -webkit-overflow-scrolling: touch; overflow: auto;}
.zone03_main1{ background: #f5f5f5; }
.zone03_main1>div{ max-width:1000px; margin: 0 auto; padding: 60px 50px; box-sizing: border-box;}
.zone03_main1>div img{ width: auto; max-width:100%; margin:0 auto;}
.zone03_title01{ padding: 0 0 30px 0; }
.zone03_main1 p{ font-size:24px; line-height: 1.8em;}
.zone03_main1 span{ background: #e2e2e2; border-radius: 50px; padding: 3px 15px; display: inline-block; margin: 10px 0;}
.zone03_main1 span+span{ margin: 0 0 10px 0;}
.zone03_main1 .zone02_btn01{ margin:30px auto 0;}

.zone03_link{ text-align: center; margin: 0;}
.zone03_link a{ font-size: 13px; line-height: 1.8em; background: #f5d34d; text-decoration: none; color: #000; padding: 2px 15px; border-radius: 50px; display: inline-block; text-align: center;}
.zone03_link a+a{ margin: 0 0 0 5px;}

.zone03_main1 table{ width: 100%; border: 5px solid #132c64; border-radius: 10px; margin: 20px 0 0 0; font-size: 13px;}
.zone03_main1 th{ background:#132c64; padding: 20px 0; color: #fff; width: 50%;}
.zone03_main1 td{ background:#f5f5f5; padding: 15px 15px; color: #000; text-align:left;}
.zone03_main1 td a{ text-decoration:none; color: #ff544d;}

@media(max-width:1140px){
.zone03_main1>div{ padding: 20px 2.5% 300px;}
}

@media(max-width:1000px){
.zone03_main1>div{ padding: 20px 2.5% 300px;}
.zone03_title01{ padding: 0;}
.zone03_main1 p{ font-size:16px;}
.zone03_main1 span{ display: block; padding: 10px 15px; font-size: 12px; border-radius: 5px;}
.zone03_main1 .zone03_btn01{ margin: 10px auto 0;}
.zone03_main1>div img{ margin: 0 auto 10px;}
	
.zone03_link{ text-align: center; margin:10px 0 0 0;}
	
.zone03_main1 table{ border: 2px solid #132c64; border-radius: 5px; font-size: 12px;}
.zone03_main1 th{ padding: 15px 0;}
.zone03_main1 td{ padding: 10px 5px;}
}

@media(max-width:600px){
.zone03_main1>div{ padding: 20px 2.5% 200px;}
.zone03_main1 p{ text-align: left;}
.zone03_link{ text-align: center !important; margin:10px 0 0 0;}
.zone03_link a{ font-size: 12px;}
}


/*--第四組--*/
.zone04 .top_banner{ background:url(images/zone04_topbanner.jpg) center top no-repeat; text-align: center;}

.zone04{ display:none; position: fixed; z-index: 16; top: 0; left: 0; width: 100vw; height: 100vh; -webkit-overflow-scrolling: touch; overflow: auto;}
.zone04_main1{ background: #f5f5f5; }
.zone04_main1>div{ max-width:1000px; margin: 0 auto; padding: 60px 50px; box-sizing: border-box; text-align: left;}
.zone04_main1>div img{ width: auto; max-width:100%; margin:0 auto;}
.zone04_title01{ padding: 0 0 30px 0; }
.zone04_main1 p{ font-size:24px; line-height: 1.8em; text-align: left;}
.zone04_main1 span{ background: #e2e2e2; border-radius: 50px; padding: 3px 15px; display: inline-block; margin: 10px 0;}
.zone04_main1 span+span{ margin: 0 0 10px 0;}
.zone04_main1 .zone04_btn01{ margin:30px auto 0;}

.zone04_main1>div>div{ font-size:0;}
.zone04_main1>div>div img{ display:inline-block; width: 50%; margin: 30px 0 0 0;}

.zone04_main1 p.zone04_link{ text-align: center; margin: 0;}
.zone04_main1 p.zone04_link a{ font-size: 13px; line-height: 1.8em; background: #f5d34d; text-decoration: none; color: #000; padding: 2px 15px; border-radius: 50px; display: inline-block; text-align: center;}
.zone04_main1 p.zone04_link a+a{ margin: 0 0 0 5px;}

.zone04_pic04{ cursor:pointer; margin: 20px auto 0 !important;}

.zone04 .mid_line{ background:url(images/zone04_pic02.jpg)center top no-repeat; text-align: center;}

.zone04_main2{ background: #246b5e;}
.zone04_main2>div{ max-width:1000px; margin: 0 auto; padding: 60px 50px; box-sizing: border-box; text-align: center;}
.zone04_main2>div img{ width: auto; max-width:100%; margin:0 auto;}
.zone04_title02{ padding: 0 0 30px 0; }
.zone04_main2 h3{ padding: 0 0 0 10px; font-size: 15px; color: #fada5b; text-align: left; border-left: 15px solid #fada5b; line-height: 15px;}
.zone04_main2 p{ font-size: 15px; line-height: 1.8em; color: #e8e8e8; text-align: left;}
.zone04_main2 span{ background: #e2e2e2; border-radius: 50px; padding: 3px 15px; display: inline-block; margin: 10px 0;}
.zone04_main2 span+span{ margin: 0 0 10px 0;}
.zone04_main2 hr{ border: 1px solid #e8e8e8; border-bottom: 0;}
.zone04_main2 p a{ text-decoration:none; color: #f6d44f;}
.zone04_btn02{ margin:20px auto 0 !important;}

@media(max-width:1140px){
.zone04_main1>div{ padding: 20px 2.5%;}
.zone04_main2>div{ padding: 20px 2.5% 300px;}

.zone04_main2 h3{ font-size: 12px; border-left: 12px solid #fada5b; line-height: 12px;}
.zone04_main2 p{ font-size: 12px;}
}

@media(max-width:1000px){
.zone04_main1>div{ padding: 20px 2.5%x;}
.zone04_title01{ padding: 0;}
.zone04_main1 p{ font-size:16px;}
.zone04_main1 span{ display: block; padding: 10px 15px; font-size: 12px; border-radius: 5px;}
.zone04_main1 .zone04_btn01{ margin: 10px auto 0;}
.zone04_main1>div img{ margin: 0 auto 10px;}
.zone04_main1>div>div img{ margin: 10px 0 0 0;}


	
.zone04_main1 p.zone04_link{ text-align: center; margin:10px 0 0 0;}
	
.zone04_main2>div{ padding: 20px 2.5% 300px;}
.zone04_title02{ padding: 0;}
.zone04_main2 span{ display: block; padding: 10px 15px; font-size: 12px; border-radius: 5px;}
.zone04_main2>div img{ margin: 0 auto 10px;}
	

}

@media(max-width:600px){
.zone04_main1>div{ padding: 20px 2.5%;}
.zone04_main1 p{ text-align: left;}
.zone04_link{ text-align: center !important; margin:10px 0 0 0;}
.zone04_link a{ font-size: 12px;}
	
.zone04_main2>div{ padding: 20px 2.5% 200px;}
}


/*--注意事項--*/
.zone05 .top_banner{ background:url(images/zone05_topbanner.jpg) center top no-repeat; text-align: center;}

.zone05{ display:none; position: fixed; z-index: 16; top: 0; left: 0; width: 100vw; height: 100vh; -webkit-overflow-scrolling: touch; overflow: auto;}
.zone05_main1{ background: #f5f5f5; }
.zone05_main1>div{ max-width:1000px; margin: 0 auto; padding: 60px 50px; box-sizing: border-box;}
.zone05_main1>div p{ display: inline-block; padding: 10px 20px; margin: 20px 0 0 0; font-size: 19px; background: #e1e1e1;}
.zone05_main1>div ol{ padding: 0 0 0 15px;}
.zone05_main1>div li{ font-size: 14px; line-height: 1.8em;}
.zone05_main1>div li+li{ margin: 10px 0 0 0;}

@media(max-width:1140px){
.zone05_main1>div{ padding: 20px 2.5% 300px;}
}

@media(max-width:1000px){
.zone05_main1>div{ padding: 20px 2.5% 300px;}
}

@media(max-width:600px){
.zone05_main1>div p{ display: inline-block; padding: 10px 20px; margin: 20px 0 0 0; font-size: 14px; background: #e1e1e1;}
.zone05_main1>div li{ font-size: 12px; line-height: 1.8em;}

.zone05_main1>div{ padding: 20px 2.5% 200px;}
}


/*--第五組--*/
.zone06 .top_banner{ background:url(images/zone06_topbanner.jpg) center top no-repeat; text-align: center;}

.zone06{ display:none; position: fixed; z-index: 16; top: 0; left: 0; width: 100vw; height: 100vh; -webkit-overflow-scrolling: touch; overflow: auto;}
.zone06_main1{ background: #f5f5f5; }
.zone06_main1>div{ max-width:1000px; margin: 0 auto; padding: 60px 50px; box-sizing: border-box; text-align: center;}
.zone06_main1>div img{ width: auto; max-width:100%; margin:0 auto;}
.zone06_title01{ padding: 0 0 30px 0; }
.zone06_main1 p{ font-size:24px; line-height: 1.8em; text-align: center;}
.zone06_main1 span{ background: #e2e2e2; border-radius: 50px; padding: 3px 15px; display: inline-block; margin: 10px 0;}
.zone06_main1 span+span{ margin: 0 0 10px 0;}

.zone06_main1 table{ width: 100%; border: 5px solid #dd5756; border-radius: 10px; margin: 20px 0 0 0; font-size: 13px;}
.zone06_main1 th{ background:#dd5756; padding: 20px 0; color: #fff; width: 33.3%;}
.zone06_main1 td{ background:#f5f5f5; padding: 15px 15px; color: #000; text-align:center;}

.zone06 .mid_line{ background:url(images/zone02_pic04.jpg)center top no-repeat; text-align: center;}

.zone06{ display: none; position: fixed; z-index: 16; top: 0; left: 0; width: 100vw; height: 100vh; -webkit-overflow-scrolling: touch; overflow: auto;}
.zone06_main2{ background: #b5203d;}
.zone06_main2>div{ max-width:1000px; margin: 0 auto; padding: 60px 50px; box-sizing: border-box;}
.zone06_main2>div img{ width: auto; max-width:100%; margin:0 auto;}
.zone01_title01{ padding: 0 0 30px 0; }
.zone06_main2 p{ font-size:24px; line-height: 1.8em; color:#fff;}
.zone06_main2 span{ background: #e2e2e2; border-radius: 50px; padding: 3px 15px; display: inline-block; margin: 10px 0;}
.zone06_main2 span+span{ margin: 0 0 10px 0;}
.zone06_main2 .zone01_btn01{ margin:30px auto 0;}


@media(max-width:1140px){
.zone06_main2>div{ padding: 20px 2.5% 300px;}
.zone06_main2>div:nth-child(1){ padding: 20px 2.5%;}
}

@media(max-width:1000px){
.zone06_main1>div{ padding: 20px 2.5%;}
.zone06_title01{ padding: 0;}
.zone06_main1 p{ font-size:16px;}
.zone06_main1 span{ display: block; padding: 10px 15px; font-size: 12px; border-radius: 5px;}
.zone06_main1 .zone06_btn01{ margin: 10px auto 0;}
.zone06_main1>div img{ margin: 0 auto 10px;}

.zone06_main1 table{ border: 2px solid #dd5756; border-radius: 5px; font-size: 12px;}
.zone06_main1 th{ padding: 15px 0;}
.zone06_main1 td{ padding: 10px 5px; text-align: center;}	
	
.zone06_link{ text-align: center; margin:10px 0 0 0;}


.zone06_main2>div{ padding: 20px 2.5% 300px;}
.zone06_main2>div:nth-child(1){ padding: 20px 2.5%;}	
.zone01_title01{ padding: 0;}
.zone06_main2 p{ font-size:16px;}
.zone06_main2 span{ display: block; padding: 10px 15px; font-size: 12px; border-radius: 5px;}
.zone06_main2 .zone01_btn01{ margin: 10px auto 0;}
}

@media(max-width:600px){
.zone06_main1 p{ text-align: left;}
.zone06_link{ text-align: center !important; margin:10px 0 0 0;}
.zone06_link a{ font-size: 12px;}
	
.zone06_main1 th:nth-child(1){ width: 20%;}
.zone06_main1 th:nth-child(2){ width: 40%;}
.zone06_main1 th:nth-child(2){ width: 40%;}

.zone06_main2>div{ padding: 20px 2.5% 200px;}
.zone06_main2>div:nth-child(1){ padding: 20px 2.5%;}

}