@charset "UTF-8";

body{font-family: 'Microsoft JhengHei','微軟正黑體', arial;}

b {color: #0d6c29;}
.desktop {display: block;}
.mobile {display: none;}
.font20 {font-size:20px; line-height: 32px;}
.font18 {font-size:18px; line-height: 30px;}
.offera {max-width: 970px; margin: 0 auto;}

.intro {margin-top: 10px; margin-bottom: 20px;}
.pic {background:url("pic_new.jpg"); background-position: no-repeat center fixed; background-size: cover; width: 500px; height: 300px; padding: 30px; background-color: #e1dfdb; border-top-left-radius: 40px; border-bottom-left-radius: 40px;}
.bg {padding: 30px; background-color: #055541; color: #ffffff; width: 570px; margin-left: 400px; margin-top: -240px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; }
.mtop {margin-top: 60px;}
.bg b {font-size: 23px; color: #e6f0be;}

.point:after {display:table; clear:both; content:"";}
.pleft {width: 33%; float: left;}
.pleft:first-child {width: 33%; float: left; margin-right: 0.5%;}
.pleft:last-child {width: 33%; float: left; margin-left: 0.5%;}

.ptop {background: rgb(5,85,65);
background: linear-gradient(180deg, rgba(5,85,65,1) 0%, rgba(13,108,40,1) 100%);  padding: 20px; text-align: center; font-size:23px; line-height: 32px; color: #ffffff; border-bottom: 6px solid #9bbea5; border-top-left-radius: 15px; border-top-right-radius: 15px;}
.ptop img {width: 120px;}

.worda {text-align: center; padding: 20px 40px; background-color: #efefef; height: 310px;}
.worda b {font-size: 130%;}

.bottoma {height: 6px; background-color:#0d6c29; }

.point1 {margin-bottom: 10px;}
.point1:after{display:table; clear:both; content:"";}
.dot {width: 30px; float: left;}
.dot img {width: 20px; margin-top: 0px;}
.dotword {padding-left: 30px;  width: 100%; font-size:20px; line-height: 28px;}
.dotword li {margin-left: 20px;}

.tncbig {font-size: 15px; }

.headnew {font-size: 28px; font-weight: bold; color: #0d6c29; text-align: center; margin-bottom: 30px; margin-top: -40px;}
.headlinebar {background-color: #e6f0be; width: 660px; margin: 0 auto; height: 15px;}

.mtopnew {margin-top: 40px;}

@media (max-width: 1360px) {
.worda {text-align: center; padding: 20px 30px; background-color: #efefef; height: 360px;}
}

@media (max-width: 1140px) {
.worda {text-align: center; padding: 20px 30px; background-color: #efefef; height: 460px;}
}


@media (max-width: 970px) {
.desktop {display: none;}
.mobile {display: block;}
.pic {background:url("pic_new.jpg"); background-position: no-repeat center fixed; background-size: cover; width: 680px; height: 400px; padding: 30px; background-color: #e1dfdb; border-top-right-radius: 40px;  border-top-left-radius: 40px; border-bottom-left-radius: 0px;}
.bg {padding: 30px; background-color: #055541; color: #ffffff; width: 680px; margin-left: 0px; margin-top: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px;}	
.offera {max-width: 680px; margin: 0 auto;}
.point {max-width: 680px; margin: 0 auto;}
.pleft {width: 100%; float: left;}
.pleft:first-child {width: 100%; float: left; margin-right: 0%;}
.pleft:last-child {width: 100%; float: left; margin-left: 0%;}
.worda {text-align: center; padding: 20px 40px; background-color: #efefef; height: auto;}	
.bottoma {height: 6px; background-color:#0d6c29; margin-bottom: 20px;}
.headnew {font-size: 28px; line-height: 35px; font-weight: bold; color: #0d6c29; text-align: center; margin-bottom: 30px; margin-top: -70px;}
.headlinebar {background-color: #e6f0be; width: 350px; margin: 0 auto; height: 15px;}
.mtopnew {margin-top: 80px;}	
}


@media (max-width: 700px) {
.pic {background:url("pic_new.jpg"); background-position: no-repeat center fixed; background-size: cover; width: 450px; height: 300px; padding: 30px; background-color: #e1dfdb;}
.bg {padding: 30px; background-color: #055541; color: #ffffff; width: 450px; margin-left: 0px; margin-top: 0px; }	
.offera {max-width: 450px; margin: 0 auto;}
.point {max-width: 450px; margin: 0 auto;}
.pleft {width: 100%; float: left;}
.pleft:first-child {width: 100%; float: left; margin-right: 0%;}
.pleft:last-child {width: 100%; float: left; margin-left: 0%;}
.worda {text-align: center; padding: 20px 40px; background-color: #efefef; height: auto;}	
.bottoma {height: 6px; background-color:#0d6c29; margin-bottom: 20px;}
	
}

.outbox {padding-left: 60px; margin-top: 60px;}
.sbox { background-color: #fff; box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2), 0 2px 20px 0 rgba(0, 0, 0, 0.15); padding: 30px; border-bottom-right-radius: 80px; }
.sbox:after{display:table; clear:both; content:"";}
.kvicon img {width: 170px; margin-left: -85px; margin-top: -70px; float: left;}
.detail-area {padding-left: 110px; padding-right: 60px;}
.head {color: #0c6c29; font-size: 28px; font-weight: bold; margin-bottom: 10px;}
.subhead {text-align: center; color: #0c6c29; font-size: 28px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;}
.bar {width: 70px; height: 15px; background-color: #cff09e; margin: 0 auto;}
.barline {border-top:1px solid #cff09e; margin-top: -8px; margin-bottom: 40px;}
.plan-area {margin-bottom: 40px;}
.plan-area:after{display:table; clear:both; content:"";}
.planbox1 {width: 328px; height: 380px; float: left; background:url("bg1b.jpg"); background-position: no-repeat center fixed; background-size: cover; position: relative; margin-right: 38px;}
.planbox2 {width: 328px; height: 380px; float: left; background:url("bg2b.jpg"); background-position: no-repeat center fixed; background-size: cover; position: relative; margin-right: 38px;}
.planbox3 {width: 250px; height: 380px; float: left; background:url("bg3.jpg"); background-position: no-repeat center fixed; background-size: cover; position: relative; margin-right: 20px;}
.planbox4 {width: 328px; height: 380px; float: left; background:url("bg3b.jpg"); background-position: no-repeat center fixed; background-size: cover; position: relative;}
.blackbg {position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 0.6); height: 160px; width: 328px;}
.planhead {color: #ffffff; font-size: 24px; font-weight: bold; padding: 20px;}
.planbtn {position: absolute; bottom: 15px; right: 15px; }
.planbtn button {width: 120px; padding: 5px; background-color: #ffffff; font-size: 16px; color: #0c6c29; font-weight: bold; border-radius: 18px; height: 36px;}
.planbtn button img {width: 18px; margin-top: -3px; margin-left: 3px;}

.poparea {padding: 20px;}
.pophead {font-size: 26px;  color: #0c6c29; font-weight: bold; margin-bottom: 10px;}
.popcontact {padding: 5px 20px; font-size: 18px; line-height: 29px;}
.gbg {background-color: #efefef; border-radius: 10px; padding: 20px 0;}
.gbg ul {margin-left: 40px;}
.gbg ol {margin-left: 40px;}
.gbg li {font-size: 18px; line-height: 25px; }

.logoarea {width: 100%; position: relative;  background: #ededed; padding: 10px 20px;}
.cata-sub-nav {
    background: #ededed;
    padding: 10px 0px;
    margin: 0 35px;
    /* Make this scrollable when needed */
    overflow-x: auto;
    /* We don't want vertical scrolling */
    overflow-y: hidden;
    /* Make an auto-hiding scroller for the 3 people using a IE */
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* For WebKit implementations, provide inertia scrolling */
    -webkit-overflow-scrolling: touch;
    /* We don't want internal inline elements to wrap */
    white-space: nowrap;
    /* Remove the default scrollbar for WebKit implementations */
}
.cata-sub-nav::-webkit-scrollbar {
        display: none;
    }
.cata-sub-nav ul {
    margin: 0  0 0 0px;
        display: flex;
          -webkit-padding-start: 0px;
}
.cata-sub-nav li {
    display: inline-table;
    margin: 0 10px;
        font-size: 16px;
}
.nav-prev img {width: 15px;}
.nav-next img {width: 15px;}
.nav-prev {
	top: 50%;
    position: absolute;
    left: 15px;
}
.nav-next {
	top: 50%;
    position: absolute;
    right: 15px;

}
.wbox {background-color: #ffffff; padding: 5px; width: 170px;}
.wboxword {text-align: center;  color: #0c6c29; font-weight: bold; font-size: 15px; margin-top: 10px;}
.bottombar {background-color: #0c6c29; padding: 10px; font-size: 28px; color: #ffffff; font-weight: bold; text-align: center; height: 60px; border-radius: 30px; width: 650px; margin: 0 auto; margin-top: 40px; margin-bottom: -60px;}
.hotline {margin-top: 50px; color:  #0c6c29; text-align: center; font-size: 28px;}

.point-area {margin-bottom: 50px;}
.pointhead {text-align: center;}
.point3 {display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center; margin-top: 20px;}
.pointcol {width: 270px; font-weight: bold; text-align: center; white-space: nowrap}
.pointcol img {width: 70px;}

.arrshow {display: none;}
.poptnc {font-size: 13px; padding: 30px 20px 0 20px;}
.poptnc ul {margin-left: 20px;}
.poptnc li { font-size: 13px;}

@media (max-width: 1400px) {
.plan-area {width: 100%; margin: 0 auto; margin-bottom: 30px;}
.planbox1 {margin-right: 10px; width: 32%; height: 380px;}
.planbox2 {margin-right: 10px; width: 32%; height: 380px;}
.planbox4 {margin-right: 0px; width: 32%; height: 380px;}
.blackbg { width: 100%; }		
.cata-sub-nav ul {
    margin: 0  0 0 0px;
        display: flex;
          -webkit-padding-start: 0px;
}	
}

@media (max-width: 970px) {
.plan-area {width: 328px; margin: 0 auto; margin-bottom: 30px;}
.planbox1 {margin-right: 0px; width: 328px;}
.planbox2 {margin-right: 0px; margin-top: 20px; width: 328px; }
.planbox3 {margin-right: 0px; margin-top: 20px; width: 328px; }
.planbox4 { margin-top: 20px;  margin-top: 20px; width: 328px; }	
}

@media (max-width: 1060px) {
.pointcol {width: 270px; font-weight: bold; text-align: left; white-space: nowrap; margin-top: 10px;}
.cata-sub-nav ul {
    margin: 0  0 0 30px;
        display: flex;
          -webkit-padding-start: 0px;
}	
.arrshow {display: block;}	
}


.break1 {display: none;}

@media (max-width: 850px) {
.bottombar {background-color: #0c6c29; padding: 10px; font-size: 28px; line-height: 40px; color: #ffffff; font-weight: bold; text-align: center; height: 100px; border-radius: 50px; width: 400px; margin: 0 auto; margin-top: 40px; margin-bottom: -60px;}	
.break1 {display: block;}	
}

@media (max-width: 580px) {
.sbox {padding: 10px; border-bottom-right-radius: 0px; border-radius: 20px;}
.head {text-align: center;}
.outbox {padding-left: 0px; margin-top: 60px;}	
.kvicon {text-align: center;}	
.kvicon img {width: 170px; margin-left: 0px; margin-top: -70px; float: none;}	
.detail-area {padding-left: 10px; padding-right: 10px;}
}

.logoareaw {width: 100%; display: flex; flex-wrap: wrap; max-width: 900px; margin: 0 auto;}
.logow {width: 170px; margin: 5px;}

@media (max-width: 970px) {
.logoareaw {width: 100%; display: flex; flex-wrap: wrap; width: 360px; margin: 0 auto;}	
}