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


html,body{ margin:0; padding: 0; font-family: "微軟正黑體", Verdana;}
body{ background:#031d33; font-size: 14px;}

.top_banner{ max-width: 100%; margin: 0 auto; display: block;}
.top_banner_m{ display: none; max-width: 100%;}
@media (max-width:850px){
body{ font-size: 12px;}

.top_banner{ display: none;}
.top_banner_m{ display: block;}
}

.zone_01>div{ max-width: 850px; margin: 0 auto; }
.zone_01 p{ color:#fff; text-align: center;}
.zone_01 .btn{ text-align:center;}
.zone_01 .btn a{ max-width:30%; display: inline-block;}
.zone_01 .btn a img{ max-width:100%;}
.zone_01>div>img{ max-width:100%; margin: 30px 0;}

@media (max-width:850px){
.zone_01>div{ padding:0 2.5%;}
.zone_01>div>img{ margin: 10px 0;}
}


.zone_02{ background:#7014f1; padding: 40px 0; color:#fff;}
.zone_02>img{ max-width:100%; margin: 0 auto; display: block;}
.zone_02>div{ display:flex; flex-wrap: wrap; max-width: 850px; margin: 0 auto; line-height: 24px;}
.zone_02 .left{ width:50%; border-right: 1px solid #fff; box-sizing: border-box; padding: 0 30px 0 0; margin: 40px 0;}
.zone_02 .left h3{ font-size: 40px; margin: 0; line-height: 1em;}
.zone_02 .right{ width:50%; box-sizing: border-box; padding: 0 0 0 30px; margin: 40px 0;}
.zone_02 .right h3{ font-size: 40px; margin: 0; line-height: 1em;}
.zone_02 h3 img{ vertical-align: sub; margin: 0 10px 0 0;}

.zone_02 .zone_02_note{ width: 100%; text-align: center; background:#fff; border-radius: 5px; color:#7014f1; padding: 20px 0;}
.zone_02 .btn{ text-align:center; width: 100%; margin: 40px 0 0 0;}
.zone_02 .btn a{ display: inline-block;}
.zone_02 .btn a img{ max-width:100%;}
.zone_02>div>img{ max-width:100%; margin: 30px 0;}

@media (max-width:850px){
.zone_02{ padding: 20px 0; }
.zone_02>div{ padding:0 2.5%;}
.zone_02 .left{ width:100%; border-right: 0px; border-bottom: 1px dashed #fff; padding: 0 ; margin:20px 0 0 0;}
.zone_02 .right{ width:100%; padding: 0 ; margin:20px 0 0 0;}
.zone_02 .left h3{ font-size: 20px;}
.zone_02 .right h3{ font-size: 20px;}
.zone_02 h3 img{ width: 19px;}
	
.zone_02 .zone_02_note{ text-align: left; padding: 10px;}
.zone_02 .btn{ margin: 20px 0 0 0;}
.zone_02 .btn a{ max-width:30%;}
}


.zone_03{ padding: 40px 0 0;}
.zone_03>img{ max-width:100%; margin: 0 auto; display: block;}
.zone_03 .zone03_pic01{ margin:40px auto 0;}
.zone_03>div{ background: #ffdd3d; padding: 40px 0;}
.zone_03>div>div{ display:flex; flex-wrap: wrap; max-width: 850px; margin: 0 auto; line-height: 24px; color: #4c00b6;}
.zone_03 .left{ width:50%; border-right: 1px solid #4c00b6; box-sizing: border-box; padding: 0 30px 0 0; margin: 40px 0;}
.zone_03 .left h3{ font-size: 40px; margin: 0; line-height: 1em;}
.zone_03 .right{ width:50%; box-sizing: border-box; padding: 0 0 0 30px; margin: 40px 0;}
.zone_03 .right h3{ font-size: 40px; margin: 0; line-height: 1em;}
.zone_03 h3 img{ vertical-align: sub; margin: 0 10px 0 0;}

.zone_03 .zone_03_note{ width: 100%; text-align: center; background:#fff; border-radius: 5px; color:#4c00b6; padding: 20px; box-sizing: border-box;}
.zone_03 .btn{ text-align:center; width: 100%; margin: 40px 0 0 0;}
.zone_03 .btn a{ display: inline-block;}
.zone_03 .btn a img{ max-width:100%;}
.zone_03>div>img{ max-width:100%; margin: 30px 0;}

@media (max-width:850px){
.zone_03{ padding: 20px 0; }
.zone_03>div{ padding:20px 2.5%;}
.zone_03 .left{ width:100%; border-right: 0px; border-bottom: 1px dashed #4c00b6; padding: 0 ; margin:20px 0 0 0;}
.zone_03 .right{ width:100%; padding: 0 ; margin:20px 0 0 0;}
.zone_03 .left h3{ font-size: 20px;}
.zone_03 .right h3{ font-size: 20px;}
.zone_03 h3 img{ width: 19px;}
	
.zone_03 .zone_03_note{ text-align: left; padding: 10px;}
.zone_03 .btn{ margin: 20px 0 0 0;}
.zone_03 .btn a{ max-width:30%;}
}


.zone_04{ padding: 40px 0;}
.zone_04>img{ max-width: 100%; margin: 0 auto 40px; display: block;}
.zone_04>div{max-width: 850px; margin: 0 auto;}
.zone_04 div img{ max-width:100%;}
.slider_banner .slider_banner_s{ padding:0 10px; box-sizing: border-box;}

@media (max-width:850px){
.zone_04{ padding: 0 0 20px 0;}
.zone_04>img{ margin: 0 auto 20px;}
.slider_banner .slider_banner_s{ padding:0 2.5%;}
}

.zone_05{ padding: 40px 0 0; background: #3cb96b;}
.zone_05>img{ max-width:100%; margin: 0 auto; display: block;}
.zone_05>div{  max-width: 850px; margin: 0 auto; line-height: 24px; text-align: center; padding: 30px 0;}
.zone_05 h3{ font-size: 40px; margin: 0; line-height: 1em; color: #fff;}
.zone_05 p{ color: #fff;}
.zone_05 h3 img{ vertical-align: sub; margin: 0 10px;}
.zone_05 .btn{ text-align:center; width: 100%; margin: 30px 0 0 0;}
.zone_05 .btn a{ display: inline-block;}
.zone_05 .btn a img{ max-width:100%;}
.zone_05>div>img{ max-width:100%; margin: 10px 0 0 0;}

@media (max-width:850px){
.zone_05{ padding: 20px 0; }
.zone_05>div{ padding:20px 2.5% 0;}
.zone_05 h3{ font-size: 20px;}
.zone_05 h3 img{ width: 19px;}
.zone_05>div>img{ margin: 0;}
.zone_05 .btn{ margin: 0;}
.zone_05 .btn a{ max-width:30%;}
}


.zone_06{ padding: 0; background: #27a255;}
.zone_06>div{  display: flex; flex-wrap: wrap; max-width: 850px; margin: 0 auto; line-height: 24px; text-align: center; padding: 30px 0;}
.zone_06 h3{ width: 100%; font-size: 40px; margin: 0; line-height: 1em; color: #fff;}
.zone_06 h3 img{ vertical-align: sub; margin: 0 10px;}
.zone_06 .zone_06_note{ width: 100%; text-align: left; background:#fff; border-radius: 5px; color:#4c00b6; padding: 20px; box-sizing: border-box; margin: 20px 0;}
.zone_06 .left{ width:50%; border-right: 1px solid #fff; box-sizing: border-box; padding: 0 30px 0 0; margin: 10px 0 0 0;}
.zone_06 .right{ width:50%; box-sizing: border-box; padding: 0 0 0 30px; margin: 10px 0;}
.zone_06 .btn{ text-align:center; width: 100%; margin: 30px 0 0 0;}
.zone_06 .btn a{ display: inline-block;}
.zone_06 .btn a img{ max-width:100%;}
.zone_06>div>p{ width: 100%; text-align: right; margin: 0; color: #fff;}
.zone_06>div>p a{ color:#fff; text-decoration: none;}

@media (max-width:850px){
.zone_06{ padding: 0px;}
.zone_06>div{  padding: 20px 2.5%;}
.zone_06 h3{ font-size: 20px;}
.zone_06 h3 img{ width: 19px;}
.zone_06 .left { width:100%; border-right: 0px; padding:0;}
.zone_06 .right { width:100%; padding: 0;}
.zone_06 .left img { max-width:100%;}
.zone_06 .right img { max-width:100%;}
.zone_06 .btn{ margin: 0;}
.zone_06 .btn a{ max-width:30%;}
.zone_06>div>p{ text-align: center;}
}


.zone_07{ padding: 20px 0; color: #fff; }
.zone_07>div{ max-width: 850px; margin: 0 auto; line-height: 24px;}
.zone_07 h3 { text-align:center; cursor: pointer; margin: 0;}
.zone_07 h3 span{ border:1px solid #fff; padding: 10px 20px; display: inline-block;}
.zone_07 a{ color:#fff;}
.zone_07 ol{ display:none;}
.zone_07 li+li{ margin: 10px 0 0 0;}
@media (max-width:850px){
.zone_07{ padding: 20px 0 70px; }
.zone_07>div{ padding:0 2.5%;}
}






/*-----集氣條-----*/
.gas_bg{ position:relative; margin: 0 auto; height: 120px; width: 81%;}
.gas_bg>img{ position:relative; z-index: 2;}
.gas{ position: absolute; top:5px; left: 5px; height: 102px; z-index: 1; background: url(../images/car.png) right no-repeat; min-width: 148px; max-width: 100%;}
.join_people{ text-align:center;}
.join_people>p{ display: inline-block; background: #ff4333; padding: 10px 20px; border-radius: 50px; margin: 0;}

.st{ position: relative; height: 5px; top: 105px; background: #7b614a;}
.st .gas{ position: absolute; top:0px; left: 0px; height: 5px; z-index: 1; background: none; background-color: #ffd202; min-width: 148px;}
@media (max-width:850px){
.gas_bg{ height: 40px; width: 91%;}
.gas{ height: 25px; min-width: 37px; background-size: contain;}
	
.st{ height: 2px; top: 30px;}
.st .gas{ height: 2px;min-width: 37px;}
}




/*-----lightbox-----*/
.overlay{ display: none; position:fixed; top: 0; left: 0; z-index: 97; width: 100vw; height: 100vh; background: rgba(0,0,0,0.75);}

.fakelightbox{ display: none; position: fixed; width: 600px; max-width: 100%; max-height: 400px; text-align: center; z-index: 98; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 20px;}
@media (max-width:500px){
.fakelightbox{ max-width: 90%;}
}




/*-----快速選單-----*/
.quick_link{ font-size: 0; position: fixed; bottom: 20px; right: 20px; z-index: 999;}
.quick_link img{ display:inline-block;}
.quick_btn{ background:url(../images/quick_btn_h.png); background-size: contain;}
.quick_btn .quick_btn_2{ display: none;}
/*.quick_btn:hover .quick_btn_1{ display: none;}
.quick_btn:hover .quick_btn_2{ display: inline-block;}*/


.quick_link_m{ display:none; font-size: 0; position: fixed; width: 100%; left: 0; bottom: 0; background: #fff; border-radius: 10px 10px 0 0; padding: 5px 0; box-sizing: border-box; text-align: center; z-index: 9999; box-shadow: 0px 0px 2px 2px rgba(20%,20%,40%,0.2);}
.quick_link_m img{ width: 40px; margin: 0 5px;}

@media (max-width:850px){
.quick_link{ display: none;}
.quick_link_m{ display:block;}
}