body {font-family: 'Microsoft JhengHei','微軟正黑體', 'arial';}
.card {text-align: center; margin-bottom: 10px;}
.headl {text-align: center; color: #0d6c28; font-size: 28px; font-weight: bold;}
.head {text-align: center;  font-size: 25px;}
b {color: #0d6c28;}
.intro { font-size: 20px; line-height:32px; color: #3E3E3E; text-align: center;}
.bg1 {background-color: #e6ebe9; padding: 10px 0 30px 0;}
.bg2 {background-color: #fff6e1; padding: 10px 0 30px 0;}
.bg3 {background-color: #f0f8fb; padding: 10px 0 30px 0;}
.wbox1 {box-shadow: inset 0 0 8px #90ad9f; background-color: #ffffff; padding: 30px; border-radius: 15px; margin-top: 30px;} 
.wbox2 {box-shadow: inset 0 0 8px rgba(114, 41, 0, 0.3); background-color: #ffffff; padding: 30px; border-radius: 15px; margin-top: 90px;} 
.headline1 {text-align: center;}
.headline1 img {height: 70px; margin-top: -70px;}
.headline2 {text-align: center;}
.headline2 img {height: 120px; margin-top: -130px;}
.headline3 {text-align: center; margin-top: 20px;}
.headline3 img {height: 70px;}
.subhead {background: #009944;
background: linear-gradient(180deg, rgba(0, 153, 68, 1) 0%, rgba(0, 105, 52, 1) 100%); font-size: 24px; font-weight: bold; width: 550px; margin: 0 auto; height: 60px; border-radius: 30px; color: #ffffff; padding: 12px; margin-top: 25px;}
.giftbox {float: left;}
.subh {width: 500px; margin: 0 auto;}
.subh2 {width: 350px; margin: 0 auto;}
.subh3 {width: 250px; margin: 0 auto;}
.giftboxword {padding-left: 45px;}

.offerword { font-size: 20px; line-height:32px; color: #3E3E3E; text-align: center; margin-top: 15px;}
.offerword b {font-size: 140%;}

.offer-area-new:after{display:table; clear:both; content:"";}
.offer-area-new {width: 100%; margin-top: 20px;}
.offerleft {width: 50%; float: left;}
.offermid {width: 10%; float: left;}
.offerright {width: 40%; float: left;}

.gbg1 {background-color: #5ead47;}
.gbg2 {background-color: #287f34;}
.gbg3 {background:url("bgbox1.svg");background-color: #287f34; background-repeat: no-repeat; background-position: right bottom; background-size: 160px;}
.wordarea {padding: 20px; height: 220px;}
.arrarea img {height: 220px;}
.offerarea  {padding: 20px; height: 220px;}
.ohead {font-size: 24px; line-height: 30px; text-align: center; color: #ffffff; height: 60px;  display: grid;  place-items: center;}
.ohead small {font-size: 16px;}
.wline {border-top:  1px solid #ffffff; margin-top: 10px;}
.list_pt {margin-left: 40px; margin-top: 20px; }
.list_pt ul { list-style: none; }
.list_pt ul li {margin-bottom: 10px; font-size: 20px; line-height: 33px;  color: #ffffff; }
.list_pt ul li .circle { margin-left: -35px; background-color: #ffffff; height: 30px; width: 30px; color: #84bd76; font-weight: bold;}
.list_pt ul { font-size: 16px; }

.ogbg1 {background-color: #eaa268;}
.ogbg2 {background-color: #dd7c2c;}
.ogbg3 {background:url("bgbox2.svg"); background-color: #dd7c2c; background-repeat: no-repeat; background-position: right bottom; background-size: 160px;}

.offerbigword {font-size: 40px; font-weight: bold; color: #ffffff;  display: flex;
  align-items: center;  justify-content: center; height: 130px;}
.offerbigword b {font-size: 160%; color: #ffffff; }

.dec {font-size: 20px; line-height:32px; color: #3E3E3E;}
.phase-area {background-color: #5ead47; color: #fffffff; padding: 20px;  margin: 0 auto; width: 360px; margin-top: 15px;}
.phase {color: #fff; font-size: 18px; margin: 0 auto; margin-top: 15px;} 
.logo {width: 100%; text-align: center;}
.logo img {width: 550px;}

.aTable {border: none; width: 100%; margin-top: 10px; }
.aTable th {font-size: 20px; line-height: 26px;  background-color: #fff;  border-top: 1px solid #fff; border-right: 1px solid #fff; border-left: 1px solid #fff;}
.aTable td {font-size: 20px; line-height: 26px;  background-color: #fff;  border-right: 1px solid #fff; border-left: 1px solid #fff;}
.aTable tr { border-bottom: 1px solid #d9d9d9;}
.aTable .bigfont {color: #0e6d28; font-size: 26px; font-weight: bold;}
.aTable .bottom { border-bottom: 2px solid #0d6c29; }
.aTable .tbg4 {background-color: #5ead47; border-top-left-radius: 30px; border-left: 1px solid #fff; color: #ffffff; }
.aTable .tbg3 {background-color: #287f34; border-bottom-right-radius: 30px; border-right: 1px solid #fff; color: #ffffff;}
.topw1 { border-top: 2px solid #ffffff; }

.tncword {font-size: 12px; line-height: 18px;}
.ophase {color: #fff; font-size: 18px; margin: 0 auto; margin-top: 15px; width: 300px;} 
.owordarea {padding: 20px; height: 260px;}
.oarrarea img {height: 260px;}
.oofferarea  {padding: 20px; height: 260px;}
.oofferbigword {font-size: 40px; line-height: 160%; font-weight: bold; color: #ffffff; text-align: center;}
.oofferbigword b {font-size: 160%; color: #ffffff; }
.oword {font-size: 18px; font-weight: bold; text-align: center; color: #ffffff;}
.oword b {font-size: 130%; line-height: 130%; color: #ffffff;}

.hidden{ margin:0px 0 0 0; display:table; width:100%; position:relative; padding:0 0 0px 0; }
.hidden.tnc { padding:0; }
.hidden .btn_tnc,
.hidden .btn_tnc:focus{font-size:11px; padding:0 0px; font-weight:normal; background:#ffffff; color:#222222; display:block; display:table; float:left; margin-left:0px;}
.hidden .btn_tnc:after{ content:' '; text-indent:-999em; background:url(https://www.hangseng.com/cms/emkt/pmo/common/img/icon_15px.png) no-repeat 0px -90px; width:15px; height:15px; margin-left:0px; display:inline-block; vertical-align:middle; }
.hidden .btn_tnc:hover{ color:#000; }
.hidden .btn_tnc:hover:after{ background-position:0px -90px; }
.hidden .btn_tnc.expanded:after{ background-position:-15px -90px; }
.hidden .btn_tnc.expanded:hover:after{ background-position:-15px -90px; }

.hidden.tnc .content { background:#ffffff; height: 100%; width: 100% border:0; overflow: hidden; margin-left:-20px;}
.hidden .content { color:#000000; position:relative; padding:0px 0px; }

.arrm {display: none;}
.arrd {display: block;}

@media(max-width: 830px){
.arrm {display: block;}
.arrd {display: none;}	
.headline1 {text-align: center;}
.headline1 img {height: 130px; margin-top: -90px;}
.headline2 {text-align: center;}
.headline2 img {height: 110px; margin-top: -130px;}
.headline3 {text-align: center; margin-top: 20px;}
.headline3 img {height: 130px;}	

.offerleft {width: 100%; float: none;}
.offermid {width: 100%; float: none; width: 100%;}
.offerright {width: 100%; float: none;}
.ohead {font-size: 24px; line-height: auto; text-align: center; color: #ffffff; height: 60px;  display: grid;  place-items: center;}	
.arrarea {text-align: center; width: 100%;  display: flex; align-items: center; justify-content: center;}	
.arrarea img {height: 40px;}
.offerbigword {font-size: 40px; font-weight: bold; color: #ffffff;  display: flex;  align-items: center; justify-content: center; height: auto;}
.oarrarea {text-align: center; width: 100%;  display: flex; align-items: center; justify-content: center;}	
.oarrarea img {height: 40px;}	
}
.linebreakd {display: block;}
.linebreak {display: none;}
.logo2 {text-align: center; margin-top: 20px;}
.logo2 img {width: 350px;}

@media(max-width: 620px){
.linebreak {display: block;}
.linebreakd {display: none;}	
.phase-area {background-color: #5ead47; color: #fffffff; padding: 20px;  margin: 0 auto; width: 390px; margin-top: 15px;}
.subhead {background: #009944;
background: linear-gradient(180deg, rgba(0, 153, 68, 1) 0%, rgba(0, 105, 52, 1) 100%); font-size: 24px; font-weight: bold; width: 390px; margin: 0 auto; height: 90px; border-radius: 45px; color: #ffffff; padding: 12px; margin-top: 0px;}
.subh {width: 340px; margin: 0 auto;}
.subh2 {width: 340px; margin: 0 auto;}
.subh3 {width: 250px; margin: 0 auto;}
.ptop {padding-top: 25px;}
.offerarea  {padding: 20px; height: auto;}	
.oofferarea  {padding: 20px; height: auto;}	
}