@charset "UTF-8";
body{
font-family: 'Microsoft JhengHei','微軟正黑體', arial;
}
b {color: #0d6c29;}
.desktop {display: block;}
.mobile {display: none;}
.mobilenew {display: none;}
.font25 {font-size:25px; line-height: 130%;}
.font20 {font-size:20px; line-height: 32px;}
.font30 {font-size:30px; line-height: 30px;}
.font17 {font-size:17px; line-height: 24px;}
.font40 {font-size:40px; line-height: 130%;}
.font50 {font-size:50px; line-height: 60px;}

.inword {font-size:20px; line-height: 32px; text-align: justify; color: #19553b;  max-width:970px; font-weight: bold; text-align: center; margin: 0 auto;  margin-top: 10px;}

.mtop20 {padding-top: 20px;}

.mtop20a {margin-top: 20px;}

@media (max-width: 860px) {
.desktop {display: none;}
.mobile {display: block;}
.mobilenew {display: block;}	
}

.bmg {max-width: 1200px; margin: 0 auto;}
.allbg {background-color: #f0f6f4; padding: 20px 0; margin-top: 30px;}
.head {text-align: center; color: #40655d;}
.headpic {text-align: center;}
.headpic img {max-width: 330px; width: 100%; margin-top: 15px;  margin-bottom: 15px;}

.offer-area {margin-top: 40px;}
.offerbg {background-color: #ffffff; border-bottom-right-radius: 30px; }

.headbar:after{display:table; clear:both; content:"";}
.headbar {background: #32B557;
background: linear-gradient(90deg, rgba(50, 181, 87, 1) 0%, rgba(80, 142, 119, 1) 100%); padding: 10px 30px;  border-bottom-right-radius: 30px; max-width: 780px;}
.baricon {width: 70px; float: left;}
.barword {color: #fff; font-weight: bold; padding-left: 90px;}
.offerdec {padding: 20px 40px;}

.logoarea {margin-top: 30px; margin-bottom: 30px;}
.logoarea:after{display:table; clear:both; content:"";}
.logobbox {width: 30%; float: left;}
.logobbox:first-child {margin-right: 5%;}
.logobbox:last-child {margin-left: 5%;}

.logowbox {background: #337362;
background: linear-gradient(180deg, rgba(51, 115, 98, 1) 0%, rgba(22, 81, 76, 1) 100%); padding: 20px; border-top-right-radius: 40px; border-bottom-left-radius: 40px; text-align: center; height: 360px; -webkit-box-shadow: 4px 4px 0px 2px rgba(22,81,76,0.25); 
box-shadow: 5px 5px 0px 2px rgba(22,81,76,0.25); position: relative;}

.offerhead {color: #fff; font-weight: bold; text-decoration: underline;}
.logodec {color: #fff; font-weight: bold; margin-top: 30px;}
.logodecs {color: #fff; }
.offericon {position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);}
.offericon img {width: 100px;}

.act-area {margin: 20px 0; line-height: 50px;}
.tl {width: 13px; float: left;}
.tr {width: 100%; padding-left: 13px;}
.tnc a {color: #000; text-decoration: underline;}
.tnc a:hover {color: #0d6c29;}
.tnc ol {margin-left: 10px;}

.gbg:after{display:table; clear:both; content:"";}
.gbg {padding: 30px; border-top-right-radius: 40px; border-bottom-left-radius: 40px; background:url("mapbg.svg"); background-repeat: no-repeat;
  background-size: 480px auto;  background-color: #0b5144; background-position: 190px 70px; height: auto;}
.point-area {padding-left: 60px; margin-top: 60px;}
.pic img {width: 300px; margin-top: -60px; margin-left: -90px; float: left;}

.pointhead {font-weight: bold;}
.pword {margin-bottom: 15px;}
.pointword:first-child {padding-right: 10px;}
.pointword:last-child {padding-left: 10px;}
.pointword {margin-top: 20px; width: 50%; float: left;}

.pointdec:after{display:table; clear:both; content:"";}
.pointdec {padding-left: 230px; color: #fff; }
.pdot img {float: left; width: 20px;}
.pdec {padding-left: 30px; }
.dechead {font-size: 25px;  margin-bottom: 5px; font-weight: bold;}
.pdec a {color: #ffffff; text-decoration: underline; }
.pdec a:hover {color: #39ff76;}

@media (max-width: 860px) {
.gbg:after{display:table; clear:both; content:"";}
.gbg {padding: 30px; border-top-right-radius: 40px; border-bottom-left-radius: 40px; background:url("mapbg.svg"); background-repeat: no-repeat;
  background-size: 400px auto;  background-color: #0b5144; background-position: 10px 270px; height: auto;}	
.logowbox {height: 320px;}	
.logobbox {width: 100%; float: none; margin-bottom: 30px;}
.logobbox:first-child {margin-right: 0%;}
.logobbox:last-child {margin-left: 0%;}
.pointdec {padding-left: 0px; color: #fff; margin-top: 20px;}
.pointword:first-child {padding-right: 0px;}
.pointword:last-child {padding-left: 0px;}		
.pointword {margin-top: 20px; width: 100%; float: none;}
.pic img {width: 300px; margin-top: -60px; margin-left: -90px; float: none;}	
}

.display-left{position:absolute;top:60%;left:1%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.display-right{position:absolute;top:60%;right:1%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}

.display-left img {width: 25px;}
.display-right img {width: 25px;}

.step-area {width: 100%; margin: 0 auto; position:relative; height: 100%;}
.sledeshead {font-size: 23px; line-height: 35px; color:#0d6c29; font-weight: bold;}

.steparea .word {font-size: 20px; line-height: 28px; margin-bottom: 20px; min-height: 50px; margin-top: 10px;}
.steparea .circle {background-color: #245441;}

.word strong {color:#0d6c29; }
.step-top {width: 100%; text-align: center;}

.mobile-new {width: 70%; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 10px; text-align: center;}
.mobe {width: 300px;}

.desktopscreen {width: 100%; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 10px; text-align: center;}
.desktopscreen img {width: 90%;}

.m {display: none;}
.mc {display: block;}

.stephead {text-align: center; color: #005bac; font-weight: bold;}
.stepborder {border: 4px solid #306a31; border-radius: 20px; padding: 30px; margin-top: 60px;}

.headpic2 {text-align: center;}
.headpic2 img {max-width: 300px; width: 100%; margin-top: -85px;}

@media (max-width: 970px) {
.display-left{position:absolute;top:65%;left:1%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.display-right{position:absolute;top:65%;right:1%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}	
.steparea .word {font-size: 18px; line-height: 28px; margin-bottom: 20px; min-height: 90px;}	
.stepborder {border: 4px solid #306a31; border-radius: 20px; padding: 20px; margin-top: 60px;}	
.desktopscreen img {width: 85%;}
.m {display: block;}
.mc {display: none;}
}
@media (max-width: 970px) {
.steparea .word {font-size: 18px; line-height: 28px; margin-bottom: 20px; min-height: 110px;}	
}