@charset "UTF-8";
@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap";
@import"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap";

body {font-family:"Noto Sans TC", Arial, sans-serif}
b {color: #0d6c28;}
.headl {text-align: center; font-size: 32px; font-weight: bold; }
.headl b {color: #0d6c28;}
.intro {font-size: 18px; line-height: 30px;}
.intro b {color: #0c4a40; font-size: 25px;}
.intro span {color: #38b549; font-size: 36px; font-weight: bold;}
.box_new {background: rgb(222,232,222); background: linear-gradient(0deg, rgba(222,232,222,1) 0%, rgba(255,255,255,1) 59%); padding: 30px; border-radius: 40px; width: 100%; border: 3px solid #0d6c28; margin: 0 auto;  margin-top: 80px;}
.box_new:after {display:table; clear:both; content:"";}
.headword img {width: 600px; margin-top: -85px;}
.incontect_new {font-size: 18px; line-height: 30px; margin-top: 0px; padding: 0 30px;}
.incontect_new strong {color:#0c4a40; }
.incontect_new b {color: #0c4a40;}

.btn_action-new {text-align: center; background-color: #dee8de;  color: #0c4a40; font-size: 22px; border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-left-radius: 40px; border-bottom-right-radius: 15px; font-weight: bold; padding: 10px 30px; display: inline-block; height: auto;}

.offer-area {width: 100%; margin-top: 20px;}
.offera {width: 50%; float: left;}
.offerdec {font-size: 16px; line-height: 20px; padding-top: 20px; padding-right:160px }
.gold {width: 160px; float: right;}
.offera:first-child {padding-right: 18px;}
.offera:first-last {padding-left: 18px;}
.offerdec b {font-size: 23px; line-height: 28px;}
.border-right {border-right: 1px solid #545454;}

.bg {background: #4b998c; background: radial-gradient(circle, rgba(75, 153, 140, 1) 0%, rgba(48, 138, 121, 1) 57%, rgba(26, 97, 83, 1) 100%); margin-top: 30px; padding-bottom: 30px;}
.bg1 {background: #ebf2eb;
background: radial-gradient(circle, rgba(235, 242, 235, 1) 0%, rgba(226, 235, 226, 1) 67%, rgba(202, 217, 202, 1) 100%); margin-top: 30px; padding-bottom: 30px; padding-top: 20px;}

.headline {font-size: 28px; line-height: 40px; font-weight: bold; text-align: center; color: #0c4a40;}

.bgarea2 { padding-left: 40px;  padding-right: 200px; padding-bottom: 0px;}
.bgarea3 { padding-left: 200px;  padding-right: 40px; padding-bottom: 0px;}
.point1 {background: rgba(255,255,255,0.9); padding: 30px 20px; border-top-left-radius: 35px;  border-top-right-radius: 35px;  border-bottom-left-radius: 60px; border-bottom-right-radius: 95px;  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); width: 85%; margin: 0 auto; margin-top: 60px; transition: transform .2s; /* Animation */ }
.point1:hover {transform: scale(1.1);}
.phead {font-size: 22px; line-height: 60px; font-weight: bold; background-color: #0c4a40; color: #ffffff; margin-top: -60px; margin-left: -40px; height: 60px; border-radius: 30px; width: 350px; padding: 0 10px;}
.phead img {height: 60px; margin-right: 5px;}
.phead2 {font-size: 22px; line-height: 60px; font-weight: bold; background-color: #0c4a40; color: #ffffff; margin-top: -60px; margin-left: -40px; height: 60px; border-radius: 30px; width: 550px; padding: 0 10px;}
.phead2 img {height: 60px; margin-right: 5px;}
.incontect {font-size: 18px; line-height: 30px; padding-left: 50px; margin-top: 10px;}
.incontect strong {color:#0c4a40; }

.subhead {text-align: center; background-color: #dee8de;  color: #0c4a40;  font-size: 22px; border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-left-radius: 40px; border-bottom-right-radius: 15px; font-weight: bold;  height: auto; margin: 0 auto; width: 550px; padding: 15px 10px;}
.subarea {margin-top: 30px;}
.sub {width: 50%; float: left;}
.sub:first-child {padding-right: 20px;}
.sub:nth-child(2) {padding-left: 20px;}
.sub:nth-child(3) {padding-right: 20px; margin-top: 30px;}
.sub:last-child {padding-left: 20px; margin-top: 30px;}
.subbox {box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.3); padding: 10px; border-radius: 10px; height: 100%; flex-flow: column; position: relative; overflow: hidden; justify-content: space-between; cursor: pointer; align-items: center; height: 230px; padding-top: 30px;}
.subicon {text-align: center;}
.subicon img {width: 100px;}
.subdec {font-size: 23px; font-weight: bold; color: #0d6c28; text-align: center; margin-top: 15px;}
.overlay {
  position: absolute;
  background-color: rgba(62, 103, 93, 0.8);
  width: 100%;
  height: 100%;
top: 100%; /*direction*/
	left:0%; right:0%;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.subbox:hover .overlay {
 width: 100%;
  height: 100%;
  position: absolute; 
  top:0; /*direction*/
left:0;
	rigth:0;
  background-color: rgba(22, 69, 64, 0.9); display: list-item; 
}

.overlay .subpoint {color: #ffffff; font-size: 18px; line-height: 25px; padding: 25px;}
.overlay .subpoint p {margin-bottom: 10px; font-size: 22px; font-weight: bold;}
.overlay .subpoint ul {margin-left: 20px;}
.overlay .subpoint li {font-size: 18px; line-height: 25px;}

.tncfont {font-size: 16px; line-height:15px; margin: 30px 0; text-align: justify;}

.hidden{ margin:10px 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;}
.hidden .btn_tnc:after{ content:' '; text-indent:-999em; background:url(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 {
	height: 150px;
    width: 100%;
	border:0;
    overflow: hidden;
    overflow-y: scroll;
}
.hidden .content { color:#000000; position:relative; padding:0px }
.hidden .content ol { margin-top:10px; margin-left: 0px;}
.hidden .content li {font-size:11px; line-height:14px; }	

.hidden .content .remarkTable {margin: 5px 0;}
.hidden .content .remarkTable td{ border:1px solid #636363; padding:3px; text-align:center; background-color:#ffffff; font-size: 10px;}
.hidden .content .remarkTable th{ border:1px solid #636363; padding:3px; text-align:center; background-color:#ffffff; font-weight: bold; font-size: 10px;}

.screen {width: 440px; text-align: center; float: left;}
.screen img {width: 300px;}
.screendec {font-size: 18px; width: 100%; padding-top: 40px; padding-left: 440px;}

.desktop {display: block;}
.mobile {display: none;}

 @media screen and (max-width: 970px) {
.subbox {height: 250px; padding-top: 30px;} 
.screen {width: 310px; text-align: center; float: left;}
.screen img {width: 70%;}
.screendec {font-size: 18px; width: 100%; padding-top: 20px; padding-left: 310px;}	 
}

 @media screen and (max-width: 780px) {
.subhead {text-align: center; background-color: #dee8de;  color: #0c4a40;  font-size: 22px; line-height: 28px; border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-left-radius: 40px; border-bottom-right-radius: 15px; font-weight: bold;  height: auto; margin: 0 auto; width: 400px; padding: 15px 10px;}	 
.phead2 img {float: left;}	 
.phead2 {font-size: 22px; line-height: 28px; font-weight: bold; background-color: #0c4a40; color: #ffffff; margin-top: -60px; margin-left: -40px; height: 80px; border-radius: 30px; width: 400px; padding: 10px 10px;}	 
.incontect_new {font-size: 18px; line-height: 32px; margin-top: 0px; padding: 0 0px;}	 
.desktop {display: none;}
.mobile {display: block;}
.screen {width: 100%; text-align: center; float: none;}
.screen img {width: 290px; margin-top: 30px;}
.screendec {font-size: 18px; width: 100%; padding-top: 20px; padding-left: 0px;}		 
.headword img {width: 330px; margin-top: -85px;}	 
.offera {width: 100%; float: none; margin-top: 10px; padding-bottom: 20px;}
.offera:first-child {padding-right: 0px; padding-bottom: 40px; }
.offera:first-last {padding-left: 0px;}	
.border-right {border-bottom: 1px solid #545454; border-right: 0px solid #545454;}	 
.sub {width: 400px; float: none; margin: 0 auto;}
.sub:first-child {padding-right: 0px;}
.sub:nth-child(2) {padding-left: 0px; margin-top: 30px;}
.sub:nth-child(3) {padding-right: 0px; margin-top: 30px;}
.sub:last-child {padding-left: 0px; margin-top: 30px;}	
.subbox {height: 240px; padding-top: 40px;}
.offerdec {font-size: 18px; padding-top: 0px; padding-right:160px }	 
	}