@charset "utf-8";
@import 'https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i';
/* CSS Document */

::-webkit-scrollbar {
	width: 5px;
  	height: 5px;
	border-radius: 4px;
	background-color: #4a4a4a;
}  
  
::-webkit-scrollbar-track {    
    border-radius: 4px;
    background-color: #4a4a4a;
}  
  
::-webkit-scrollbar-thumb {  
    border-radius: 4px;
    background-color: #6d6d6d;
}

input,button,select,textarea{outline:none}
 *:focus { outline: none; }

iframe[name=google_conversion_frame] { 
    height: 0 !important;
    width: 0 !important; 
    line-height: 0 !important; 
    font-size: 0 !important;
    margin-top: -13px;
    float: left;
}

.last_text_box
{
	width:100%;
	max-width:800px;
	margin: 0 auto;
	padding-left:20px;
	padding-right:20px;
}


.mline{display:none!important;}
.line mline{display:none!important;}

#viewDiv {
    background-image: url(images/event1_notes.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    position: fixed;
    left: 50vw;
    top: 50%;
    z-index: 502;
    max-width: 500px;
    transform: translateX(-50%);
    margin-top: -228px;
    box-sizing: border-box;
    text-align: center;
}

#viewDiv iframe {
    margin: 16% 0 0 9%;
    max-width: 91%;
}


.viewDiv_overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.6;
	z-index: 501;
	transition: 0.5s;
}

.viewDiv_close {
	position: absolute;
	right: 30px;
	top: 30px;
	cursor: url(images/mouse_pointer.png), pointer;	
	z-index: 3;
	text-align: right;
}


.event{background-color:#fffbe9;border-radius:30px;}
.event2{background-color:#fff4a5;border-radius:30px;margin-bottom: 100px;padding-bottom: 50px;}
.event3{background-color:#fffbe9;border-radius:30px;margin-bottom: 100px;}
.event4{background-color:#fff4a5;border-radius:30px;margin-bottom: 50px;padding-bottom: 50px;}




.mv_btn{top:0px;}



.mv_btn_all{position: absolute;z-index:1000;}
.mv_btn_all_01{width:100%;max-width:1000px;}
.mv_btn_all_02{width:100%;max-width:1000px;}
.mv_btn_all_03{width:100%;max-width:1000px;}



.mv_btn_all_02_1{width:100%;float:left;}
.mv_btn_all_02_2{width:100%;float:left;}

.mv_btn_all_02_1_1{width:100%;max-width:466px;}
.mv_btn_all_02_1_2{width:100%;max-width:534px;}

@media screen and (min-width:1001px) {
.mv_btn_all_02_1{max-width: 466px;}
.mv_btn_all_02_2{max-width: 534px;}

}

@media screen and (max-width:1000px) {

.mv_btn_all_02_1{width:50%;max-width:466px;float:left;}
.mv_btn_all_02_2{width:50%;max-width:534px;float:left;}


}



@media screen and (min-width:1000px) {



.gas_tank_bg{
    margin-top: -80px;
position: relative;
background: url(images/gas_tank_bg.png);
padding-bottom:150px;
background-position: center bottom;
background-repeat: no-repeat;
width:100%;
max-width:1254px;
top:0px;
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-size:contain;


}

.item{margin-bottom: 80px!important;}

.gas_tank{max-width:800px!important;border: 0px solid #ccc!important;}


}

@media screen and (min-width:871px) {
html {
	margin:0;
	padding:0;
	width: 100%;
	background: url(images/bg.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	position: relative;
	background-color:#ffcb5c;
}
}

@media screen and (max-width:870px) {

html {background: url(images/bg_m.jpg);
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
}


@media screen and (max-width:350px) {

html {background: url(images/bg_m02.jpg);
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
}



body {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 1000px;
	background:url(images/mv_bg-1.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

#entries {
	display: none;
}



.side {
    z-index:600;
	position: fixed;
	right: 15px;
	top: 35%;
}

.side_btn1 {
    width: 79.6%;
    height: 17%;
    display: block;
    position: absolute;
    top: 6%;
    left: 3%;
    cursor: pointer;
}

.side_btn2 {
	width: 79.6%;
    height: 17%;
	display: block;
	position: absolute;
	top: 21%;
    left: 3%;
	cursor: pointer;
}

.side_btn3 {
	width: 79.6%;
    height: 17%;
	display: block;
	position: absolute;
	top: 36%;
    left: 3%;
	cursor: pointer;
}

.side_btn4 {
	width: 79.6%;
    height: 17%;
	display: block;
	position: absolute;
	top: 51%;
    left: 3%;
	cursor: pointer;
}












.fix-margin-top {
	margin-top: 0;
}

.mv {
	margin: 0 auto;
	width: 100%;
	max-width: 1500px;
}

.mv img {
	width: 100%;
	max-width: 1500px;
	height: auto;
}

.btn_group {
	position: absolute;
	top:275px;
	left: 50%;
	height: auto;
	margin: 3vw 0 0 0;
	display: inline-block;
	font-size: 0;
	transform: translateX(-50%);
	width: 100%;
    text-align: center;
}


/*--因設計編排才會用到--*/

.join btn{width: 500px!important;}

@media screen and (max-width:999px) {

.btn_group btn a{width: 500px!important;}
}
/*----*/

.btn {
    position: relative;
    margin: 0 1.1vw;
    display: inline-block;
    font-family: "微軟正黑體", Verdana;
    text-align: center;
}

.btn a {
    width: 10.7vw;
    max-width: 161px;
    background: url(images/btn.png);
    background-position: left top;
    background-repeat: no-repeat;
    color: #000;
    text-decoration: none;
    background-size: contain;
    display: flex;
    align-items: center;
}

.btn .btn_text {
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1vw;
    display: block;
    margin-top: -2%;
	white-space: nowrap;
	color:#ffffff;
	font-weight:bold;
}



.btn a:hover {
	background: url(images/btn_ov.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: contain;
}

.btn img {
    width: 100%;
	height: auto;
	display: block;
}

.mark {
	color: #000;
 	background-color: #fdff4f;
}

.community {
	position: absolute;
	right: 10px;
	top: 10px;
}

.community .icon {
	margin: 0 7px;
	width: 3.8vw;
	max-width: 57px;
	height: 58px;
	float: left;
}

.community .icon img {
	width: 100%;
	height: auto;
}









h2 {
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

h2 img {
	width: 100%;
	max-width: 774px;
	height: auto;
}


.event_text {
	font-family: "微軟正黑體", Verdana;
	font-size: 20px;
	text-align: center;
	
}









.event {
	text-align: center;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
	padding: 0;
	margin-bottom: 100px;

}

.event .btn {
	margin: 40px 0 60px 0;
}

.paper .event {
	padding-top: 20px;
}


.item {
	margin: 30px auto;
	float:left;
	width: 100%;
}

.item_img {
	position:relative;
	width: 20%;
	float:left;
	max-width: 228px;
}

.item_img img {
	width: 100%;
	height: auto;
}

.item_ov {
	width: 20%;
	position: absolute;
	z-index: 1;
	max-width: 228px;
}

.item_ov img {
	width: 100%;
	height: auto;
}

.gas_tank {
	position: relative;
	clear: both;
	margin: 0 auto;
	padding: 0;
	background-color-1: #ffffff;
	border-radius:99px;
	line-height: 42px;
	width: 100%;
	max-width: 800px;
	text-align: right;
	overflow: hidden;
	background-image:url(images/slash-1.png);
	background-repeat: repeat;
	border: 1px solid #ccc;
}


.gas_tank .text {
	position: absolute;
	left: 30px;
	padding: 0;
	font-family:"Microsoft Yahei";
	color: #ffffff;
	font-size: 22px;
	font-weight: bold;
	display: inline-block;	
}

.gas {
	background-color:#ff4545;
	background:-moz-linear-gradient(0deg, #ffa284 0%, #ff4545 100%);
	background:-webkit-linear-gradient(0deg, #ffa284 0%, #ff4545 100%);
	background:-o-linear-gradient(0deg, #ffa284 0%, #ff4545 100%);
	box-sizing:border-box;
	width: 0%;
	height: 42px;
}

.gift {
	margin: 30px 0 40px 0;
	padding: 0;
	
}

.gift img {
	width: 100%;
	height: auto;
	max-width: 852px;
}

.paper {
        background-color:#fffbe9;border-radius:50px;       
 /*--
 	background-image: url(images/paper.png);
	background-repeat: no-repeat;
	background-position: center top;
	-moz-background-size:cover;
        -webkit-background-size:cover;
        -o-background-size:cover;
        background-size:cover;

 --*/

}

.paper2 {
         background-color:#fffbe9;border-radius:50px;
 /*--
	background-image: url(images/paper2.png);
	background-repeat: no-repeat;
	background-position: center top;
	-moz-background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    background-size:cover;

 --*/

}





.tab_group {
	margin-top: 26px;
	display: flex;
	justify-content: center;
	position: relative;
    margin-bottom: -6px;
}


.event3 .tab_event{background-image: url(images/tab_event_bg02-1.png)!important;}


@media screen and (max-width:999px) {
.tab_group {
    margin-bottom: -7px!important;
}
.tab_event {
    background-image: url(images/tab_event_bg02.png)!important;
}

}
@media screen and (max-width:550px) {
.tab_event {
    background-image: url(images/tab_event_bg03.png)!important;
}

}


.tab_group>div.active{ 
	background-image: url(images/tab_ov.png);
}

.tab {
	margin: 0 15px;
	position: relative;
	background-image: url(images/tab.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	font-family: "微軟正黑體", Verdana;
	font-size: 22px;
	display: flex;
	justify-content: center;
	float: left;
	cursor: pointer;
}

.tab:hover {
	background-image: url(images/tab_ov.png);
}

.tab img {
	width: 100%;
	height: auto;
	display: block;
}

.tab .tab_text {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    white-space: nowrap;
    left: 50%;
}

.tab .tab_text a {
	color: #000;
	text-decoration: none;
}

.align-left {
	text-align: left;
}

.list_ul {
	margin: 0;
	padding: 0;
	text-align: left;
	width: 100%;
	max-width: 524px;
}

.list_ul li {
	margin: 0 0 15px 0;
	padding: 0;
	list-style: none;
	font-family: "微軟正黑體", Verdana;
	font-size: 16px;
}

.event_num {
	margin: 0 5px 0 0;
	float: left;
}

.ul_text {
	display: flex;
}

.table_img {
	text-align: left;
	width: 100%;
	height: auto;
	max-width: 513px;
}

.tab_event {
    background-image: url(images/tab_event_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 95%;
    max-width: 1080px;
    display: block;
    margin: 0 auto;
	padding: 50px 50px 0 50px;
	padding-bottom:50px;
}

.left {
	margin-bottom: 50px;
	width: 60%;
	float: left;
}

.right {
	margin-bottom: 50px;
	width: 40%;
	max-width: 383px;
	float: right;
}

.right img {
	width: 100%;
	height: auto;
	max-width: 383px;
}

.btn_box {
	clear: both;
	margin: 50px 0 0 0;
	text-align: center;
}

.btn_box .btn {
	margin: 0 15px;
}

.notes_box {
	position: relative;
}

.ul_notes {
	position: absolute;
	top: 58%;
	left: 57%;
	transform: translate(-50%, -50%);
	width: 75%;
    margin: 0;
    padding: 0;
}

.ul_notes li {
	font-size: 15px;
	margin: 0 0 5px 0;
	list-style: decimal;
}



.event3 {
	padding: 0px 0 0 0;
}

.event3 .btn_box .btn {
	margin: 0 0 80px 0;
}












.event4 {
	text-align: center;
}




.event4 .event_text {
	font-family: "微軟正黑體", Verdana;
	font-size: 20px;
	color: #000;
	line-height: 180%;
}

.event4 .btn_box {
    margin: 30px 0 0 0;
}




.event4_s_text
{font-size: 16px!important;}


.laba {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1226px;	
}

.laba img {
	width: 100%;
	height: auto;
	max-width: 1266px;
}

.laba_img_box {
	position: absolute;
	width: 40.5%;
	max-width: 498px;
	height: auto;
	top: 26.3%;
	left: 29%;
	overflow: hidden;
}

.laba_img_box img {
	width: 100%;
	height: auto;
}

.laba .laba_img1 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	max-width: 31.33%;
    margin: 0 1%;
	animation:5s infinite laba_img1;
	animation-timing-function: linear;
	-webkit-animation:5s infinite laba_img1;
	-webkit-animation-timing-function: linear;
}

@keyframes laba_img1 {
    0% {
		top: 0%;
    }

    100% {
		top: -790%;

    }
}

.laba .laba_img1 img {
	width: 100%;
	height: auto;
}

.laba .laba_img2 {
    position: absolute;
    left: 49%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
	max-width: 31.33%;
    margin: 0 1%;
	animation:5s infinite laba_img2;
	animation-timing-function: linear;
	-webkit-animation:5s infinite laba_img2;
	-webkit-animation-timing-function: linear;
}

@keyframes laba_img2 {
    0% {
		top: 0%;
    }

    100% {
		top: -790%;

    }
}

.laba .laba_img2 img {
	width: 100%;
	height: auto;
}

.laba .laba_img3 {
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	max-width: 31.33%;
    margin: 0 1%;
	animation:5s infinite laba_img3;
	animation-timing-function: linear;
	-webkit-animation:5s infinite laba_img3;
	-webkit-animation-timing-function: linear;
}

@keyframes laba_img3 {
    0% {
		top: 0%;
    }

    100% {
		top: -790%;

    }
}

.laba .laba_img3 img {
	width: 100%;
	height: auto;
}







.gift_info {
	position: fixed;
	left: 50%;
	top: 50%;
	height: 90vh;
	transform: translate(-50%, -50%);
	overflow: auto;
	width: 100%;
	z-index: 602;
}

.tb {
	margin: 30px auto 0 auto;
	width: 100%;
	max-width: 800px;
	border-radius:6px;
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
	font-family:Verdana, "微軟正黑體";
	font-size:15px;
	color: #000;
	line-height: 52px;
}

.tb th {
	padding: 0 30px;
	background-color:#e9e9e9;
	background:-moz-linear-gradient(270deg, #e9e9e9 0%, #f3f3f3 35%, #e4e4e4 100%);
	background:-webkit-linear-gradient(270deg, #e9e9e9 0%, #f3f3f3 35%, #e4e4e4 100%);
	background:-o-linear-gradient(270deg, #e9e9e9 0%, #f3f3f3 35%, #e4e4e4 100%);
	color: #000;
	height: 53px;
}

.tb th br{
 display:none;
}

.tb td {
	padding: 12px 30px;
	background-color: #fff;
	color: #000;
	border-right:1px solid #dddddd;
	box-sizing: border-box;
	word-break: break-all;
	font-size:14px;
	line-height: 180%;
}

.tb td:last-child {
	border-right:none;
}

.tb td img {
	margin:5px 0 4px 0;
	width:100%;
}

tr:first-child th:first-child {
	border-top-left-radius: 6px;
	border-right:1px solid #e4e4e4;
}

tr:first-child th:last-child {
	border-top-right-radius: 6px;
}

tr:last-child td {
	border-bottom:none !important;
}

tr:last-child td:first-child{
  	border-bottom-left-radius: 6px;
}

tr:last-child td:last-child{
  	border-bottom-right-radius: 6px;
}

.overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.9;
	z-index: 601;
	transition: 0.5s;
}

.close {
	position: fixed;
	right: 30px;
	top: 30px;
	cursor: pointer;
	z-index: 603;
	text-align: right;
	color: #fff;
}

.close img {
	width: 80%;
}

.line {
	width: 90%;
	max-width: 1139px;
	margin: 20px auto;
}

.line img {
	width: 100%;
	height: auto;
}

.mline {
	display: none;
	width: 90%;
	max-width: 1139px;
	margin: 0px auto 20px auto;
}

.mline img {
	width: 100%;
	height: auto;
}

.notes {
	margin: 0 auto 40px auto;
	width: 100%;
	max-width: 1140px;
}

.notes h3 {
	font-family: "微軟正黑體", Verdana;
	font-size: 20px;
	font-weight: normal;
	color: #000;
	margin: 20px 0 20px 20px;
}

.notes ul {
	margin: 0 auto;
	padding: 0 0 0 20px;
	width: 90%;
}

.notes li {
	margin: 0 0 15px 0;
	padding: 0;
	list-style: decimal;
	font-family: "微軟正黑體", Verdana;
	font-size: 14px;
	color: #000000;
}

.notes li a {
	color: #666;
	text-decoration: underline;
}


@media screen and (max-width:999px) {
.gas {	height: 22px;}
.gas_tank {	background-color: #ffffff;	}

}
@media screen and (max-width:1200px) {



.side {
	display: none;
}

.paper {
	background: none;
}

.paper2 {
	background: none;
}

.paper .event {
    padding-top: 15px;
    margin-bottom: 50px;
}

.paper2 .event3 {
    padding: 0;
}

.mline {
	display: block;
}

.event3 .btn_box .btn {
    margin: 0;
}

h2 img {
    width: 100%;
}

.event .event_text {
	margin: 1em auto 0 auto;
	width: 80%;
	font-size: 15px;
}

.item {
	margin: 15px 0; 
}

.gas_tank {
	width: 96%;
}

.gas_tank .text {
	font-size: 15px;
}

.gas {
	height: 42px;
}

.event .btn {
    margin: 20px 0;
}

.ul_notes li {
	font-size: 1.9vw;
}



.event4 .event_text {
    font-size: 15px;
	width: 90%;
	margin: 15px auto;
}

.fix_br {
	display: none;
}


}









@media screen and (max-width:992px) {

body {
    background-position: center 40px;
}

.mv {
	padding-top: 30px; 
}

.btn a {
    width: 22vw;
}

.mv .btn_group {
	top: 0;
}

.community {
	top: 5px;
	right: 5px;
}

.community .icon {
    margin: 0 4px;
    width: 6vw;
}

.tab_group {
    display: flex;
    width: 80%;
    margin: 26px auto 0 auto;
}

.tab {
	margin: 0 2%;
    background-size: contain;
    font-size: 15px;
    display: flex;
	align-items: baseline;
}

.tab_event {
	padding: 15px;
	width: 95%;
	margin: 0 auto;

}

.left {
	float: none;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    max-width: 513px;
}

.right {
	margin: 0 auto 15px auto;
	width: 50%;
	max-width: 383px;
	float: none;
}

.right img {
	width: 100%;
	height: auto;
	max-width: 383px;
	margin: 0 0 15px 0;
}

.event_text {
    font-size: 17px;
}

.list_ul li {
    font-size: 15px;
}

.left, .right {
	margin-bottom: 0;
}

.btn_box {
    margin: 30px 0 0 0;
}




}


@media screen and (max-width:800px) {

.event4 .btn_box .btn {
    margin: 0;
}

.btn .btn_text {
	font-size: 14px;
}

.ul_notes li {
    font-size: 13px;
}

}



@media screen and (max-width:550px) {

.tab_group {
    width: 94%;
}

.tab {
	margin: 0 1%;
}

.tab .tab_text a {
    font-size: 13px;
}

.right {
    width: 80%;
}

#viewDiv {
    width: 90%;
}

#viewDiv iframe {
	margin: 11% 0 0 9%;
    max-width: 81%;
}

.gform_wrapper .top_label .gfield_label {
	font-size: 15px;
}

.gift_info {
 padding: 0 10px; 
}

.tb { 
 margin: 0 auto 30px auto;
} 
 
.tb th {
 padding: 10px;    
 line-height: 1.5em;
    text-align: center; 
}  
 
.tb th br {
 display:block;
}
 
.tb td {
 padding: 10px;
} 
 
.close {
 top: 10px;
}

}