/*--------------copyright by vicky start-------------------------------*/
@font-face {
  font-family: FakePearl-Regular;
  src: url(https://cdn.jsdelivr.net/gh/max32002/FakePearl@1.1/webfont/FakePearl-Regular.woff2) format("woff2")
  , url(https://cdn.jsdelivr.net/gh/max32002/FakePearl@1.1/webfont/FakePearl-Regular.woff) format("woff");
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
th,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    font-family: 'Jua', 'Noto Sans TC', 'Zen Maru Gothic', sans-serif, 'Sacramento', cursive;
    position: relative;
    font-size: 16px;
    letter-spacing: 2px;
    color: #1a1a1a;
    background: #fff;
    line-height: 1.5;
    overflow-x: hidden;
}

ol,
ul {
    list-style: none;
    margin-bottom: 0px;
    list-style: none;
}
h1, h2, h3, h4, h5, h6{
    line-height: 1.5;
}
blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    display: block;
    color: #264a33;
}

a:hover {
    text-decoration: none;
}

.clear {
    clear: both;
}

a:focus,
a:hover {
    color: #1a1a1a;
    text-decoration: none;
}

img {
    max-width: 100%;
}

/***snowflake**/
.petal-stage-wrap {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 10px;
}

.petal-stage {
    position: relative;
}

.petal-model {
    position: absolute;
    top: 0;
    right: 0;
}

.petal-model img {
    width: 100%;
}

.petal-model-s {
    width: 14px;
    z-index: 99998;
}

.petal-model-m {
    width: 22px;
    z-index: 99999;
}

.petal-model-l {
    width: 30px;
    z-index: 100001;
}

::-webkit-scrollbar {
    width:15px;
}
::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin:0 0 5px 0;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background:rgb(61, 118, 83,.5);
}

::selection {
  background: rgb(61, 118, 83,.5);
  color: black;
}

::-moz-selection {
  background: rgb(61, 118, 83,.5);
  color: black;
}

.custom-text-selection::selection {
  background: rgb(61, 118, 83,.5);
  color: white;
}
/****************************************************************************************************************************************/
/*********************************************************************************************************************************************/
/*gotop*/
#gotop {
    position: fixed;
    bottom: 10%;
    right: 0%;
    cursor: pointer;
    display: none;
    z-index: 12;
    transition: .3s ease-in-out;
}
#gotop:hover {
    transform: translateY(-10px);
}
.lineq{
    position: fixed;
    bottom: 1%;
    right: 0%;
    cursor: pointer;
    z-index: 999;
    transition: .3s ease-in-out;
}
.lineq:hover {
    transform: translateY(-10px);
}


@media screen and (max-width:500px) {
    #gotop {
        width: 11%;
    }

    #gotop img {
        width: 100%;
    }
    .lineq{
        width: 11%;
    }

    .lineq img {
        width: 100%;
    }
}
@media screen and (max-width:414px){
	.lineq{
		bottom: 5%;
	}
	#gotop {
    bottom: 13%;
}
}
/*---header--------------------------------------------------------------------------------------------------------------------------------------*/
header {
    background: #fff;
    padding: 0 1em;
    z-index: 30;
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 0;
    min-width: 100%;
    opacity: 1;
    transition: opacity .5s ease-out;    
    z-index: 999;

}



/*logo*/
.logo {
    display: inline-block;
    width: 25%;
    vertical-align: middle;
    text-align: left;
    padding-left: 18rem;
}

.logo a {}

.logo img {
    max-width: 100%;
}

/*nav*/
nav {
    display: inline-block;
    width: 70%;
    vertical-align: middle;
    text-align: right;
}

#mobmenu {
    display: none;
}

ul.first_menu {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}

ul.first_menu>li {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    /*width:19%;*/
    padding: 1em 1%;
    position: relative;
	transition: .3s ease all;
}
ul.first_menu>li:hover{
	background-color: #99bca6;
    
}
ul.first_menu>li a {}

h1 {
    font-size: 20px;
    color: #264a33;
    display: inline-block;
    transition: .3s ease all;
}

ul.first_menu>li a img {}

ul.first_menu li:hover h1 {
color: #fff;
}

/*hover*/
ul.first_menu>li:hover {}

/*submenu*/
.submenu {
    background: #e8efe1;
    position: absolute;
    top: 82px;
    left: 0;
    width: 245px;
    height: 168px;
    padding: 1em 0 1em 1em;
    border-radius: 20px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
	border: 1px #264a33 solid;
}

.submenu ul {
    list-style: disc;
    padding-left: 1.5em;
    color: #3c7451;
    line-height: 35px;
    font-size: 18px;
}

.submenu li {}

.submenu a {
    transition: .3s ease all;
}

.submenu a:hover {
    color: #56b679;
}

/*sub*/
.sub {
    position: relative;
}

.fa-angle-double-right {
    font-size: 12px;
}

/*lastmenu*/
.lastmenu {
    position: absolute;
    top: 0;
    right: -255px;
    width: 245px;
    height: 100%;
    background: #e8efe1;
    border-radius: 20px;
    padding: 1em 1em 13em 1em;
    opacity: 0;
    visibility: hidden;
	border: 1px #264a33 solid;
}

.lastmenu ul {
    list-style: disc;
    color: #000;
    font-size: 18px;
    line-height: 28px;
}

.lastmenu li {}

.lastmenu a {}

/*language*/
.language {
    display: inline-block;
    width: 140px;
    vertical-align: middle;
    text-align: center;
    border: solid 1px #000;
    padding: 10px 0;
    cursor: pointer;
    position: relative;
}

b.switch {
    font-weight: normal;
}

.fa-globe {
    color: #c24747;
    font-size: 20px;
}

/*#google_translate_element*/
#google_translate_element {
    display: inline-block;
    vertical-align: top;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    width: 100%;
}

.goog-te-gadget {
    font-size: 0 !important;
}

.goog-logo-link {
    display: none;
}

.goog-te-combo {
    cursor: pointer;
}

.goog-te-gadget .goog-te-combo {
    padding: 8px 0;
    margin: 0 !important;
    width: 100%;
}

select {
    font-size: 10pt;
}

/*menu show on*/
.show {
    opacity: 1;
    visibility: visible;
    bottom: -320px;
}

a.fail {
    cursor: default;
    color: #000 !important;
}

#mobmenu i {
    font-size: 13px;
}

/*****/
ul.lev1 {
    background: #e8efe1;
}

ul.lev1>li {
    padding: 10px 0;
}

.lev3 {
    background: #e8efe1;
}

.lev3 .sub {
    margin-left: 6em;
}

.lev3 .sub:after {
    width: 0;
}

/*mobile*/
.mobile {
    display: none;
}

#nav-icon {
    width: 100px;
    height: 66px;
    position: fixed;
    top: 0;
    right: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    cursor: pointer;
}

#nav-icon span {
    display: block;
    position: absolute;
    height: 4px;
    width: 34px;
    background: #1b1b1b;
    border-radius: 9px;
    opacity: 1;
    left: calc(50% - 17px);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

#nav-icon span:nth-child(1) {
    top: 20px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#nav-icon span:nth-child(2) {
    top: 30px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#nav-icon span:nth-child(3) {
    top: 40px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#nav-icon.open span {
    background: #000;
}

#nav-icon.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#nav-icon.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

#nav-icon.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 43px;
}
@media screen and (max-width:1500px) {
	.logo {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
}
@media screen and (max-width:1400px) {
    header {
        padding: 0;
    }

    nav {
        display: inherit;
        width: auto;
    }

    #desk ul.first_menu {
        display: none;
        padding-bottom: 1em;
        text-align: center;
        display: none;
        height: 0;
        width: 0;
    }

    .language {
        width: 115px;
        position: fixed;
        top: 3%;
        right: 3%;
    }

    #mobmenu {
        display: none;
        height: 100vh;
        overflow-y: scroll;
        width: 100%;
    }

    .logo {
        display: block;
        padding: 1% 0;
        margin: 1rem 0 1rem 2rem;
        text-align: center;
    }

    .mobile {
        display: block;
    }

    ul.first_menu {
        width: 80%;
    }

    ul.first_menu>li {
        width: 16%;
        display: block;
        width: 100%;
        text-align: left;
        padding: 1em 0;
    }

    li.hasmenu a {
        position: relative;
    }

    li.hasmenu a:before {
        content: '+';
        position: absolute;
        top: 15%;
        right: 45%;
        color: #000;
        font-size: 20px;
    }

    h2 {
        margin-top: 5px;
    }

    .submenu {
        position: relative;
        bottom: 0;
        width: 100%;
        height: auto;
        margin: 1% 0;
        display: none;
        padding: 1em 0;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .submenu:before {
        display: none;
    }

    .submenu a:before {
        display: none;
    }

    .submenu ul {
        list-style: none;
    }

    .lastmenu {
        position: relative;
        top: 0;
        right: 0;
        width: 230px;
        height: 100%;
        background: #c24747;
        padding: 0 0 0 4em;
        opacity: 1;
        visibility: visible;
        margin: 0 auto;
        text-align: left;
        display: none;
    }

    .lastmenu ul {
        list-style: disc;
    }

    .show {
        display: none;
    }
	.lev3 {
    padding-left: 2rem;
}
ul.mtree li {
    list-style: disc;
}
}

@media screen and (max-width:1300px) {
    .logo img {}
}

@media screen and (max-width:580px) {
    b.switch {
        font-size: 0;
    }

    .fa-globe {
        font-size: 25px;
    }

    .language {
        border: 0;
        width: auto;
        padding: 0;
        top: 27px;
    }
}

/***dex_mask**/

.dex_mask {
    position: relative;
    overflow-x: hidden;
}



.dex_mask lottie-player{
        position: absolute;
    top: -35rem;
    right: -3rem;
    max-width: 29%;
}


@media screen and (max-width: 1400px) {
    .dex_mask:before {
        background-position: top 28% left 21%, top left;
        background-size: 18%, 86%;
    }
    .dex_mask lottie-player {
    top: -27rem;
}
}

@media screen and (max-width: 1200px) {
    .dex_mask:before {
        background-position: top 14% left 15%, top left;
        background-size: 18%, 74%;
    }

    .dex_mask lottie-player {
    top: -22rem;
}
}

@media screen and (max-width: 991px) {
    .dex_mask:before {
        display: none;
    }

    .dex_mask lottie-player {
    top: -15rem;
}
}

@media screen and (max-width: 768px) {

    .dex_mask:after {
        background-size: 30%;
    }
    .dex_mask lottie-player {
    top: -8rem;
    right: -1rem;
}
}

@media screen and (max-width: 450px) {

    .dex_mask:after {
        background-size: 30%;
    }
    .dex_mask lottie-player {
    top: -7rem;
}
}

@media screen and (max-width: 350px) {

    .dex_mask:after {
        background-size: 15%;
    }
}

/***main*********************************************************************************************************************************************/
main {
    position: relative;
   
}


/*dex*/
.dex {
    position: relative;
    z-index: -5;
}

.container {
    width: 100%;
    padding: 0;
}

/*inews*/
#inews {
	transform:translateY(-60px);
}
.inews_bg {
    background: #fff;
    width: 100%;
    padding-top: 1em;
    position: relative;
    padding: 1rem 0 6rem;
}

.inews_con {
    max-width: 1635px;
    margin: 0 auto;
    text-align: center;
    padding: 0 0 4.5rem 0;

}

.inews_title {
    padding-bottom: 4.25rem;
}

.inews_title h2 {
    font-size: 40px;
    color: #264a33;
    font-family: 'Zen Maru Gothic';
    padding-bottom: 2rem;
}

.inews_title h6 {
    font-size: 24px;
    color: #55b679;
    font-family: 'Sacramento';
    position: relative;
    width: 17%;
    margin: auto;
}

.inews_title h6:before,
.inews_title h6:after {
    content: '';
    position: absolute;
    background: url(../../images/inews_deco01.png) top left no-repeat;
    width: 47px;
    height: 18px;
}

.inews_title h6:before {
    top: 0;
    left: 0;
}

.inews_title h6:after {
    top: 0;
    right: 0;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

.inews_more {
    max-width: 280px;
    background: #3c7451;
    border-radius: 23px;
    padding: 2rem;
    margin: 3rem auto 0;
    transition: .5s all;

}

.inews_more span {
    font-size: 24px;
    color: #fff;
    font-family: 'Zen Maru Gothic';
    padding-right: 1rem;
}

.inews_more i {
    font-size: 24px;
    color: #fff;
}

a .inews_more:hover {
    background: #e7aea3;
}

@media screen and (max-width:1630px) {}

@media screen and (max-width:1400px) {}

@media screen and (max-width:1200px) {
    .inews_title h6 {
        width: 23%;
    }
}

@media screen and (max-width:991px) {
    .inews_title h6 {
        width: 27%;
    }
}

@media screen and (max-width:768px) {
    .inews_title h6 {
        width: 37%;
    }
}

@media screen and (max-width:450px) {
    .inews_title h6 {
        width: 67%;
    }
}

@media screen and (max-width:390px) {
    .inews_title h6 {
        width: 80%;
    }
}

/*---footer----------------------------------------------------------------------------------------------------------------------------------*/

footer {
    background-color: #e8efe1;
    text-align: center;
    font-family: 'Noto Sans TC', sans-serif;
    padding-top: 1em;
    z-index: 3;
    position: relative;
}

/*ft_list*/
.ft_list {
    width: 1600px;
    max-width: 100%;
    margin: 0 auto;
}

.ft_list2 {
    width: 1200px;
    max-width: 95%;
    margin: 0 auto;
}
.ft_left{
	display:inline-block;
	width:30%;
}
.ft_right{
	display:inline-block;
	width:45%;
}
/*ft_logo*/
.ft_logo {
    vertical-align: top;
    max-width: 422px;
    margin: 0 auto;
}

.ft_logo>img {
    max-width: 100%;
}

/*ft_btn*/
.ft_btn {
    max-width: 276px;
    padding: 2rem 0 4rem 0;
    margin: 0 auto;
}

.ft_btn ul {}

.ft_btn li {
    position: relative;
    display: inline-block;
    width: 17%;
    padding: 4% 1%;
}

.ft_btn li a {
    position: relative;
    transition: 0.5s all;
}

.ft_btn li a:hover {
    filter: invert(-45%);
    opacity: .7;
}

/*ft_info*/
.ft_info {
    vertical-align: top;
    padding: 0 1em;
    text-align: center;
    font-size: 16px;
    color: #264a33;
    line-height: 1.5;
    max-width: 422px;
    margin: 0 auto;
}

.ft_info ul {}

.ft_info li {
    padding-bottom: 1rem;
}

.ft_info i {
    color: #3c7451;
    vertical-align: top;
    text-align: center;
    width: 10%;
    padding-top: 5px;
}

.ft_info p {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    width: 85%;
}

.ft_info hr {
    margin: 3rem auto 6rem;
    background: #626565;
    width: 90%;
    height: 2px;
}

/*ft_icon*/
.ft_icon {
    margin: 4em auto 1em;
}

.share {
    display: inline-block;
    color: #155765;
    font-size: 12px;
    vertical-align: bottom;
    padding-bottom: 5px;
}

.icons {
    display: inline-block;
    vertical-align: bottom;
}

.icons a {
    display: inline-block;
    padding: 5px;
    transition: .3s linear;
}

.icons img {
    max-width: 100%;
}

.icons a:hover {
    transform: translateY(-5px);
    opacity: .7;
}

/*copyright*/
.copyright {
    background: url(../../images/copyright_bg.png) bottom left no-repeat;
    max-width: 1388px;
    min-height: 76px;
    text-align: center;
    padding-top: 4rem;
    font-size: 14px;
    margin: 0 auto;
    color: #264a33;
    background-size: 100%;
}

.copyright a {
    display: inline-block;
    transition: .3s linear;
    color: #264a33;
}

.copyright a:hover {
    color: #e7aea3;
}

@media screen and (max-width:1230px) {
    .ft_left {
    width: 40%;
}

    .copyright {}
}

@media screen and (max-width:990px) {
    .ft_logo {
        width: 285px;
        display: block;
        margin: 0 auto;
    }

    .ft_info {
        width: 43%;
        padding: 2em 1em 0;
    }

    .ft_info hr {
        margin: 3rem auto 3rem;
    }

    .copyright {
        padding-top: 4rem;
        margin: -3rem auto 0;
    }

    .ft_list2 {
        margin: 1rem auto;
    }
}

@media screen and (max-width:768px) {
    .ft_list {
        margin: 1rem auto 0;
    }
	.ft_left {
    width: 100%;
    display: block;
}
.ft_right {
    width: 90%;
    margin-top: 2rem;
}

    .ft_info {
        width: 48%;
    }

    .ft_icon {
        margin: 0;
    }
}

@media screen and (max-width:540px) {
    .ft_info {
        width: 100%;
        padding: 1em 1em 0;
    }

    .share {
        width: 20%;
    }

    .copyright {
        font-size: 12px;
        background: #fff;
        padding-top: 1rem;
        margin: 1rem auto 0;
    }
}

@media screen and (max-width:440px) {
    .share {
        width: 92px;
    }

    .icons {
        width: 100%;
    }

    .icons a {
        width: 10%;
        padding: 2px;
    }

    .ft_icon {
        margin: 1em 0em 1em 0;
    }
}

@media screen and (max-width: 350px) {
    .ft_list {
        margin: 1rem auto 0;
    }

    .ft_info {
        width: 100%;
        padding: 0;
    }

    .ft_info li {
        padding-bottom: 1rem;
        text-align: left;
        word-break: break-all;
    }
}

/*---album-----------------------------------------------------------------------------------------------------------------------------------*/
/*************************
******service_album******
**************************/
#service_album {
    min-height: 500px;
    min-height: 500px;
    width: 1200px;
    margin: 0 auto;
    max-width: 100%;
    padding: 2em 0;
    position: relative;
    z-index: 4;
}

#service_album table {
    transition: .3s linear;
    border: 0px;
}

#service_album table:hover {}

#service_album a {
    color: #1a1a1a;
    display: inline;
    transition: .3s linear;
}

#service_album a:visited,
#service_album a:focus {
    color: rgba(51, 51, 51, 1);
}

#service_album a:hover {
    color: #c24747;
}

#service_album td {
    font-size: 15px;
    letter-spacing: 2px;
}

.table1 table {
    min-width: 23%;
}

.table2 td {
    max-width: 200px;
    height: 70px;
    padding: 10px 0;
    letter-spacing: 2px;
}
.example-image-link img{
    height: auto;
}
table.tablelist {}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
    background: transparent;
    border: solid 1px #155765;
    color: #155765;
    border-radius: 2px;
    padding: 10px 20px;
    letter-spacing: 2px;
    transition: .3s linear;
    margin: 5px;
}

button:hover,
html input[type=button]:hover {
    background: #155765;
    color: #fff;
}


@media(max-width:992px) {
    .contactm {
        margin-bottom: 20px
    }

    .table1 table {
        width: 100%;
        max-width: 100%;
    }

    table.tablelist {
        width: 30%;
    }
}

@media(max-width:768px) {
    table.tablelist {
        width: 45%;
    }

    .table-responsive {
        width: 30%;
        margin: 5px !important;
    }

    .table-responsive img {
        max-width: 100%;
    }
}

@media(max-width:560px) {
    .table-responsive {
        width: 50%;
        padding: 1%;
        display: inline-block;
        margin: 0px !important;
    }
}

@media(max-width:480px) {
    #service_album .col-xs-12 {
        padding: 0;
    }

    .table2 td {
        height: 60px;
    }

    #service_album {
        padding: 0;
    }
}

@media(max-width:330px) {
    table.tablelist {
        width: 90%;
    }
}

.example-image-link img:hover {
    opacity: 1;
    -webkit-animation: flash_example 3s;
    animation: flash_example 3s;
}

@-webkit-keyframes flash_example {
    0% {
        opacity: .2;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flash {
    0% {
        opacity: .2;
    }

    100% {
        opacity: 1;
    }
}

.albumimg:hover {
    opacity: 1;
    -webkit-animation: flash_albumimg 3s;
    animation: flash_albumimg 3s;
}

@-webkit-keyframes flash_albumimg {
    0% {
        opacity: .2;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flash {
    0% {
        opacity: .2;
    }

    100% {
        opacity: 1;
    }
}

.row {
    margin: 0;
}

/***inews***/
.inews {
    background: rgba(217, 217, 217, .93);
    text-align: center;
    padding: 3em 2em;
    position: relative;
}

.inews:after {
    content: '';
    background: url(../../images/inews_bg.png) right center no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
}

/*inews_tit*/
.inews_tit {
    width: 720px;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    padding: 0 1em 0 1em;
    font-size: 42px;
    text-align: left;
    line-height: 1.2;
    z-index: 3;
}

/*---inews---------------------------------------------------------------*/
.inews {
    background: rgba(217, 217, 217, .93);
    text-align: center;
    padding: 3em 2em;
    position: relative;
}

.inews:after {
    content: '';
    background: url(../../images/inews_bg.png) right center no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
}

/*inews_tit*/
.inews_tit {
    width: 720px;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    padding: 0 1em 0 1em;
    font-size: 42px;
    text-align: left;
    line-height: 1.2;
    z-index: 3;
}

.inews_tit:before {
    content: '';
    background: #004c77;
    width: 20px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.inews_tit p {
    font-size: 25px;
}

/*inews_list*/
.inews_list {
    width: 900px;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    z-index: 3;
}

.inews_list .page_num {
    display: none;
}

.page_num a {
    display: inline-block;
}

.inews_list .newslist_rwd {
    width: 40%;
    padding: 0em 0 0;
    margin-right: 4em;
}

/*morebtn*/
.morebtn {
    position: relative;
    z-index: 3;
    width: 720px;
    margin: 0 auto;
    max-width: 100%;
    text-align: right;
}

.morebtn a {
    display: inline-block;
    letter-spacing: 0;
    transition: .3s linear;
    font-size: 14px;
}

.morebtn a:hover {
    letter-spacing: 3px;
}

@media screen and (max-width:1080px) {
    .ispace {
        background: url(../../images/ibg1.jpg) top center no-repeat;
        background-size: cover;
        min-height: 550px;
    }
}

@media screen and (max-width:800px) {
    .inews_list {
        margin: 0;
        max-width: 80%;
    }

    .inews_list .newslist_rwd {
        width: 34%;
        padding: 0;
        position: relative;
        left: 8em;
        margin: 1em 6em;
        top: -6em;
    }
}

@media screen and (max-width:700px) {
    .ispace {
        min-height: 480px;
    }

    .menulogo {
        padding: .5em 1em .5em 1em;
        width: 34vw;
    }

    .inews_tit {
        font-size: 36px;
        white-space: nowrap;
    }

    .inews:after {
        width: 60%;
        opacity: .5;
    }
}

@media screen and (max-width:600px) {
    .ispace {
        min-height: 340px;
    }

    .menulogo {
        width: 200px;
        padding: .1em 1em .1em 1em;
    }

    .inews_tit {
        font-size: 36px;
        white-space: nowrap;
    }

    .inews:after {
        opacity: .5;
    }

    .menu_btn {
        width: 80px;
    }

    .navbar_block {
        width: 300px;
        transform: translateX(220px);
    }

    .ibutton {
        width: 100%;
    }

    .mibutton b,
    .mibutton span {
        right: 1em;
    }

    .inews_tit {
        font-size: 30px;
    }

    .inews_tit p {
        font-size: 22px;
    }

    .inews {
        padding: 2em 2em 1em 2em;
    }

    .navbar_block {
        margin-top: 1em;
        position: fixed;
        top: 0;
        z-index: -1;
    }

    .ontop {
        z-index: 90;
    }

    .morebtn {
        text-align: center;
    }

    .inews_list .newslist_rwd {
        left: 1em;
        top: -4em;
    }
}

@media screen and (max-width:450px) {
    .ispace {
        min-height: 240px;
    }

    .inews:after {
        width: 70%;
    }

    .btn1 span {
        font-size: 12px;
    }

    .inews_tit:before {
        width: 10px;
    }

    .inews_tit {
        padding: 0 0em 0 .6em;
        font-size: 26px;
    }

    .inews_tit p {
        font-size: 20px;
    }

    .mibutton b {
        font-size: 13px;
        bottom: .2em;
    }

    .menu_btn {
        width: 70px;
    }

    .navbar_block {
        width: 290px;
        margin-top: 1em;
    }

    .ibutton {
        padding: 1em 0;
    }

    .mibutton span:nth-child(1) {
        top: 1.4em;
    }

    .mibutton span:nth-child(2) {
        top: 1.65em;
    }

    .mibutton span:nth-child(3) {
        top: 1.9em;
    }

    .inews_list {
        max-width: 100%;
    }

    .inews_list .newslist_rwd {
        left: -10em;
        top: -4em;
        width: 32%;
        margin: 1em 7em;
    }
}

@media screen and (max-width: 414px) {
    .inews_list .newslist_rwd {
        left: -12em;
        top: -4em;
        width: 28%;
        margin: 1em 9em 1em 9.6em;
    }
}

@media screen and (max-width:380px) {
    .inews_list {
        min-height: 100px;
    }

    .ispace {
        min-height: 180px;
    }
}

@media screen and (max-width:350px) {
    .inews_list {
        min-height: 100px;
    }

    .ibutton {
        max-height: 90vh;
        overflow-y: scroll;
    }

    .inews {
        padding: 1em 1em 1em 1em;
    }
}

/***news*************************************************************************************************/
.news {
    margin: 0 auto;
    max-width: 1330px;
    text-align: center;
    padding-bottom: 5em;
    color: #000;
    background: url(../../images/news_bg.jpg)top left repeat;
}

.newslist {
    margin: 8em auto 2em;
    text-align: center;
    padding: 2rem 3rem 0;
    position: relative;
}


.newslist table {
    color: #000;
}

.tableimg {
      width: 100%;
    margin: 0 auto;
	text-align: left;
}
.tableimg a{
	display:inline-block;
}
.news_bot{
	text-align:right;
}
/***newslist_rwd***/
.newslist_rwd {
    text-align: center;
    padding: 1em 0;
    display: inline-block;
    width: 47%;
    margin: 1rem;
    position: relative;
	z-index:0;

}

.newslist_rwd:after {
    content: '';
    border: 1px #99bca6 solid;
    border-radius: 30px;
    width: 100%;
    height: 209px;
    position: absolute;
    bottom: -8px;
    left: 0;
    z-index: -1;
}

.newslist_rwd .ntitle {
    text-align: left;
    position: relative;
    margin: 0;
    width: 40%;
    padding: 3rem 0 0 1.6rem;
    display: inline-block;
    vertical-align: middle;
}

.newslist_rwd .ntitle h3 {
    font-size: 26px;
    color: #3c7451;
    margin-bottom: 2rem;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.newslist_rwd .ntitle p {
    font-size: 16px;
    color: #264a33;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin: 0 0 4rem;
    font-weight: 400;
    letter-spacing: 2px;
    padding-bottom: 2px;
    min-height: 65px;
}

.newslist_rwd .ntitle span {
    font-size: 20px;
    color: #3c7451;
    font-family: 'Zen Maru Gothic';
    position: relative;
    z-index: 1;
}

.newslist_rwd .ntitle span:nth-of-type(1) {
    font-size: 14px;
    color: #99bca6;
    font-family: 'Jua';
    padding-right: 5rem;
}

.newslist_rwd .ntitle span:nth-of-type(2):after {
    content: '';
    position: absolute;
    background: url(../../images/more_deco01.png) top right no-repeat;
    bottom: -10px;
    right: -25px;
    width: 64px;
    height: 63px;
    z-index: -1;
}

.newslist_rwd a {
    position: relative;
    transition: .3s ease all;
    line-height: 1.5;
    color: #000;
}

.newslist_rwd a:hover .ntitle span {
    color: #bcb7b3;
}

/***newslist_rwd2***/
.newslist_rwd2 {
    text-align: center;
    padding: 1em 0;
    display: inline-block;
    width: 95%;
    margin: 1rem;
    position: relative;

}

.newslist_rwd2:after {
    content: '';
    border: 1px #99bca6 solid;
    border-radius: 30px;
    width: 100%;
    height: 209px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.newslist_rwd2 .npic{
	width: 40%;
}
.newslist_rwd2 .ntitle {
    text-align: left;
    position: relative;
    margin: 0;
    width: 50%;
    padding: 3rem 0 0 1.6rem;
    display: inline-block;
    vertical-align: middle;
}

.newslist_rwd2 .ntitle h3 {
    font-size: 26px;
    color: #3c7451;
    padding-bottom: 0;
}
.newslist_rwd2 .ntitle h3 a:nth-of-type(1){
	    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.newslist_rwd2 .ntitle p {
    font-size: 16px;
    color: #264a33;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin: 0 0 3rem;
    font-weight: 400;
    letter-spacing: 2px;
	padding-top: 4rem;
}

.newslist_rwd2 .ntitle span {
    font-size: 20px;
    color: #3c7451;
    font-family: 'Zen Maru Gothic';
    position: relative;
    z-index: 1;
}

.newslist_rwd2 .ntitle span:nth-of-type(1) {
    font-size: 14px;
    color: #99bca6;
    font-family: 'Jua';
    padding-right: 26rem;
}

.newslist_rwd2 .ntitle span:nth-of-type(2):after {
    content: '';
    position: absolute;
    background: url(../../images/more_deco01.png) top right no-repeat;
    bottom: -10px;
    right: -25px;
    width: 64px;
    height: 63px;
    z-index: -1;
}

.newslist_rwd2 a {
    position: relative;
    transition: .3s ease all;
    line-height: 1.5;
    color: #000;
	    display: initial;
}

.newslist_rwd2 a:hover .ntitle span {
    color: #bcb7b3;
}


/*npic*/
.npic {
    position: relative;
    width: 390px;
    min-height: 261px;
    transition: .3s ease all;
    display: inline-block;
    vertical-align: top;
    border: 1px #fff solid;
    max-width: 100%;
}

.npicimg {
    position: absolute;
    top: 3%;
    left: 2%;
    width: 96%;
    height: 95%;
}

.newslist_rwd a:hover .npic {
    transform: translateY(-5px);
}

.newslist_rwd2 a:hover .npic {
    transform: translateY(-5px);
}



/*page_num*/
.page_num {
    padding: 1em 0;
}

.page_num a {
    display: inline-block;
}

.inews .page_num {
    display: none;
}

@media (max-width:1400px) {
    .newslist_rwd .ntitle {
        width: 39%;
    }

    .newslist_rwd .ntitle span:nth-of-type(1) {
        padding-right: 1rem;
    }

    .newslist_rwd .ntitle span:nth-of-type(2):after {
        bottom: -22px;
        right: -8px;
        background-size: 67%;
    }
}

@media (max-width:1200px) {

    
    .newslist_rwd .ntitle {
        width: 74%;
        padding: 0rem 0 0 1.6rem
    }

    .newslist_rwd .ntitle h3 {
        padding-bottom: 2rem;
    }

    .newslist_rwd .ntitle span:nth-of-type(1) {
        padding-right: 13rem;
    }

    .newslist_rwd:after {
        height: 309px;
        bottom: 0rem;
    }
    .newslist_rwd2 .ntitle span:nth-of-type(1) {
    padding-right: 19rem;
}
}

@media (max-width:1024px) {
    .newslist_rwd .ntitle span:nth-of-type(1) {
        padding-right: 10rem;
    }

    .npic {
        min-height: 285px;
    }

    .newslist_rwd2 {
        width: 98%;
    }

    .newslist_rwd2 .npic {
        width: 40%;
    }

    .ntitle {
        width: 57%;
    }
}

@media (max-width:991px) {
    .newslist_rwd .ntitle {
        width: 100%;
        padding: 2rem 0 0 1.6rem;
    }

    .newslist_rwd {
        padding: 2em 0;
        margin: 0.5rem;
    }

    .newslist_rwd:after {
        height: 250px;
        bottom: 0rem;
		display:none;
    }

    .newslist_rwd2 .ntitle {
        width: 56%;
        padding: 2rem 0 0 1.6rem;
    }

    .newslist_rwd2 {
        padding: 2em 0;
        margin: 0.5rem;
    }

    .newslist_rwd2:after {
        height: 203px;
        bottom: 0rem;
    }
    .newslist_rwd2 .ntitle span:nth-of-type(1) {
    padding-right: 4rem;
}

    .ntitle {
        width: 100%;
    }

}

@media (max-width:900px) {
    .npic {
        min-height: 245px;
    }

    .news {
        padding: 0 0 0 0;
    }
}

@media (max-width:768px) {
    

   
}

@media (max-width:650px) {
    .npic {
        min-height: 280px;
        width: 100%;
    }

    .newslist {
        margin: 0;
    }


    .ntitle {
        width: 100%;
        padding: 1em 0 0 0em;
    }

    .ntitle p {
        margin: 1em 0 .5em;
    }
	.newslist_rwd2 .ntitle {
    width: 85%;
}
	.newslist_rwd2:after {
		border:none;
}
    .newslist_rwd2 .npic {
    width: 100%;
}
}

@media (max-width:500px) {
    .npic {
        min-height: 210px;
    }
    .newslist {
    padding: 2rem 2rem 0;
    left: 0;
}

    .ntitle b,
    .ntitle span {
        font-size: 15px;
    }

    .newslist_rwd {
        padding: 1em 0;
        width: 90%;
    }
    .newslist_rwd2 {
        padding: 1em 0;
        width: 100%;
    }

    .newslist_rwd2 .ntitle p {
        font-size: 22px;
		padding-top: 4rem;
		    margin-bottom: 3rem;
    }
}

@media (max-width:450px) {
    .newslist_rwd {
        width: 80%;
		margin-bottom: 8rem;
    }
	.newslist {
    padding: 2rem 1rem 0;
}

    .newslist_rwd:after {
       width: 110%;
    left: -1.6rem;
    bottom: -3rem;
    height: 190px;
    }
	.newslist_rwd .ntitle h3 {
    padding-bottom: 0rem;
}

    .newslist_rwd .ntitle span:nth-of-type(1) {
        padding-right: 6rem;
    }
    .newslist_rwd2 {
    width: 100%;
    margin-bottom: 3rem;
}
    

    .newslist_rwd2 .ntitle span:nth-of-type(1) {
        padding-right: 9rem;
    }
    .newslist_rwd2 .ntitle {
    width: 100%;
    padding: 2rem 1rem;
}
.npicimg {
        left: -3%;
    width: 103%;
    height: 100%;
}
}
@media (max-width: 390px){
.newslist_rwd2 .ntitle span:nth-of-type(1) {
    padding-right: 5rem;
}

}
@media (max-width:350px) {
    .newslist_rwd .ntitle {
        width: 100%;
        padding: 4rem 0 0 0;
    }

    .newslist_rwd .ntitle span:nth-of-type(1) {
        padding-right: 1rem;
    }
    .newslist_rwd2 .ntitle {
        width: 100%;
        padding: 2rem 0 0 1.6rem;
    }

    .newslist_rwd2 .ntitle span:nth-of-type(1) {
        padding-right: 1rem;
    }
	.npicimg {
    left: -10%;
    width: 108%;
}

}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
    background: transparent;
    border: solid 2px #c2bdb9;
    border-radius: 2px;
    color: #464341;
    padding: .5em 1em;
    margin: .5em;
    transition: .3s ease all;
    letter-spacing: 2px;
    font-weight: 400;
}

button:hover,
html input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
    border-radius: 20px;
}

/***inews_block***/
.inews_block .npic {
    width: 100%;
    min-height: 285px;
}

.inews_block .ntitle {
    width: 100%;
    padding: 1em 0em 0 0em;
}

.inews_block .newslist_rwd {
    width: 450px;
    max-width: 90%;
    border-bottom: 0;
}

.inews_block .ntitle b {
    font-size: 15px;
}

.inews_block .ntitle p {
    font-size: 22px;
    margin: 1em 0 0em;
}

.inews_block .ntitle span {
    text-align: left;
    font-size: 15px;
}

@media (max-width:1080px) {
    .inews_block .newslist_rwd {
        padding: 1em 0;
    }
}

@media (max-width:900px) {
    .inews_block .npic {
        min-height: 240px;
    }

    .inews_block .newslist_rwd {
        width: 390px;
    }
}

@media (max-width:600px) {
    .inews_block .npic {
        width: 100%;
    }

    .inews_block .npic {
        min-height: 195px;
        width: 70%;
    }
}

@media (max-width:450px) {
    .inews_block .npic {
        min-height: 135px;
        width: 50%;
    }

    .inews_block .ntitle p {
        font-size: 20px;
        margin: .5em 0 0em;
    }

    .inews_block .ntitle b {
        font-size: 14px;
        padding: .2em 1em;
    }

    .inews_block .ntitle {
        padding: 0em 0em 0 0em;
    }
}

@media (max-width:350px) {
    .inews_block .npic {
        width: 70%;
    }
}
/*scroll*/
.scroll {
	position: absolute;
	z-index:999;
	    bottom: 20%;
    left: 50%;
}
.scroll h3{
	color:#fff;
}
.scroll img {
	padding-top: 60px;
}


/*scroll-line*/

.scroll-line {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 50px;
    overflow: hidden;
    margin-bottom: 40%;
}

.scroll-line:after {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	content: '';
	animation: updown ease-in-out 1.5s infinite;
	background: #fff;
	width: 100%;
	height: 100%;
}

@keyframes updown {
	0% {
		transform: translateY(-60px);
	}
	100% {
		transform: translateY(60px);
	}
}
.dex_wave {
    position: absolute;
    max-width: 102%;
    width: 100%;
    height: 200px;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: url(../../images/dex_wave.png) repeat-x;
    animation: wave 10s cubic-bezier(0.44, 0.66, 0.67, 0.37) infinite;
}

@keyframes wave {
    0% {
        background-position: 0;
    }

    100% {
        background-position: 1440px;
    }
}

@media screen and (max-width: 767px) {
    .dex_wave {
        background: url(../../images/dex_wave02.png) repeat-x;
        height: 97px;
    }
}

@media screen and (max-width: 450px) {
    .dex_wave {
        height: 30px;
    }
}

@media screen and (max-width: 414px) {
    .dex_wave {}
}

/***inab*************************************************************************************************/
.inab {
    background-image: url(../../images/inab_deco01.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #e8efe1;
    position: relative;
}

.inab_txt {
    max-width: 450px;
    margin: 0 auto;    
    padding: 13.2rem 4rem 8.5rem 4rem;
    font-family: 'Zen Maru Gothic';
	display: flex;
    flex-direction: row-reverse;

}

.inab_txt h3 {
    font-size: 28px;
    color: #384f40;
    padding-left: 3.6rem;
    line-height: 4.2rem;
	-webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.inab_txt h4 {
    font-size: 45px;
    color: #55b679;
    line-height: 4.2rem;
    font-family: 'Noto Sans TC';
    padding-left: 4rem;
	-webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.inab_bot {
    max-width: 1094px;
    margin: -6rem auto 0;
    text-align: center;
    padding-bottom: 3rem;
}

.inab_bot a {
    vertical-align: top;
    margin: 2rem 1rem 0 0;
    width: 24%;
}

.inab_more {
    background: #3c7451;
    border-radius: 23px;
    padding: 1rem 1rem;
    margin: 3rem auto 0;
    transition: .5s all;

}

.inab_more span {
    font-size: 24px;
    color: #fff;
    font-family:'Noto Sans TC';
    padding-right: 1rem;
}

.inab_more i {
    font-size: 24px;
    color: #fff;
}

a .inab_more:hover {
    background: #e7aea3;
}

.inab_bot lottie-player {
    max-width: 620px;
    height: 350px;
    display: inline-block;
    margin-top: -31rem;
	margin-left: 17rem;
}

@media screen and (max-width: 991px) {
    

    .inab_bot {
        padding: 0 2rem;
    }

    .inab_bot lottie-player {
        width: 50%;
    }
	.inab_more {
    padding: 1rem 0;
}
}
@media screen and (max-width: 768px) {
.inab_bot {
    margin: 11rem auto 0;
}
.inab_bot a {
    width: 45%;
	 margin: 0 auto;
}
.inab_bot lottie-player {
    width: 70%;
    display: block;
    margin-top: 0;
    margin-left: 11rem;
}

}
@media screen and (max-width: 450px) {
   .inab {
    background-size: 140%;
    background-position-y: 40%;
}

    .inab_txt {
        padding: 10.2rem 0 0 0rem;
		justify-content: center;
    }

    .inab_bot {
    margin: 5rem auto 0;
	display: flex;
    flex-wrap: wrap;
	padding-bottom:2rem;
}

    .inab_bot a {
    width: 70%;
}

    .inab_txt h3 {
        font-size: 20px;
        padding-left: 1.6rem;
        line-height: 3.2rem;
    }

    .inab_txt h4 {
        color: #55b679;
        line-height: 3.2rem;
    }

    .inab_bot lottie-player {
    width: 95%;
    margin-left: 0rem;
	order: -1;
}
}

@media screen and (max-width: 350px) {
    .inab_bot lottie-player {
        height: 275px;
    }
}

/***map***/
.map {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    min-height: 500px;
}


.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width:900px) {
    .map {
        min-height: 520px;
    }

    
}

@media screen and (max-width:650px) {
    .map {
        min-height: 480px;
    }
}

@media screen and (max-width:500px) {
    .map {
        margin: 0 auto;
        min-height: 400px;
    }

   
}

@media screen and (max-width:430px) {
    .map {
        min-height: 350px;
    }
}

@media screen and (max-width:350px) {
    .map {
        min-height: 300px;
    }
}

/***all title*******************************************************/
/*title*/
.title {
    padding: 12rem 0 4.25rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    overflow-x: clip;
    z-index: 2;
	pointer-events: none;
}



.title:after {
    content: '';
    background: url(../../images/inner_deco.png) top right no-repeat;
    background-size: 100%;
    width: 422px;
    min-height: 405px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}
.title lottie-player{
        position: absolute;
    top: 5rem;
    right: -14rem;
    max-width: 700px;
    min-height: 400px;
    overflow-x: hidden;
}
.title h2 {
    font-size: 40px;
    color: #264a33;
    font-family: 'Zen Maru Gothic';
    padding-bottom: 2rem;
}

.title h6 {
    font-size: 24px;
    color: #55b679;
    font-family: 'Sacramento';
    position: relative;
    width: 17%;
    margin: auto;
}

.title h6:before,
.title h6:after {
    content: '';
    position: absolute;
    background: url(../../images/inews_deco01.png) top left no-repeat;
    width: 47px;
    height: 18px;
}

.title h6:before {
    top: 0;
    left: 0;
}

.title h6:after {
    top: 0;
    right: 0;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

/*title2*/
.title2 {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.title2 h2 {
    font-size: 26px;
    color: #3c7451;
    font-family: 'Noto Sans TC';
    padding-bottom: 1rem;
    position: relative;
    width: 19%;
    margin: 0 auto;
}

.title2 h2:before,
.title2 h2:after {
    content: '';
    position: absolute;
    background: url(../../images/title2_deco02.png) top left no-repeat;
    width: 57px;
    height: 39px;
}

.title2 h2:before {
    top: 1rem;
    left: 0;
}

.title2 h2:after {
    top: 1rem;
    right: 0;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

.bgcolor:before {
    background-color: #fff;
}
@media screen and (max-width:1440px) {
	.title2 h2:before {
    left: -5rem;
}
.title2 h2:after {
    right: -5rem;
}
}
@media screen and (max-width:1400px) {
    .title h6 {
        width: 23%;
    }

    .title2 h2 {
        width: 26%;
    }
}

@media screen and (max-width:1200px) {
    

    .title:after {
        background-size: 80%;
    }

    .title h6 {
        width: 28%;
    }

    .title2 h2 {
        width: 30%;
    }
}

@media screen and (max-width:991px) {
   

    .title:after {
        background-size: 60%;
    }

    .title h6 {
        width: 33%;
    }

    .title2 h2 {
        width: 35%;
    }
}

@media screen and (max-width:768px) {
    .title lottie-player {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 265px;
    min-height: 185px;
}

    .title:after {
        background-size: 50%;
    }

    .title h6 {
        width: 43%;
    }

    .title2 h2 {
        width: 45%;
    }
}

@media screen and (max-width:450px) {
    .title {
        padding: 19rem 0 4.25rem;
    }

   

    .title lottie-player {
    position: absolute;
    top: -5rem;
    right: 0rem;
    max-width: 162px;
    min-height: 320px;
}


    .title:after {
        background-size: 40%;
    }

    .title h6 {
        width: 80%;
    }

    .title h6:before {
        top: 0;
        left: 2rem;
    }

    .title h6:after {
        top: 0;
        right: 2rem;
    }

    .title2 h2 {
        width: 88%;
    }
}

@media screen and (max-width:390px) {
    

    .title:after {
        background-size: 30%;
    }

    .title h6 {
        width: 100%;
    }

    .title h6:before {
        left: 2rem;
    }

    .title h6:after {
        right: 2rem;
    }

    .title2 h2 {
        width: 94%;
    }
}
@media screen and (max-width:350px) {
	.title2 h2 {
    width: 65%;
}
}
/***aba*******************************************************/
.aba1 {
    max-width: 1619px;
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    margin-top: 6rem;

}

.aba1>.aba1_left_wrap {
    max-width: 539px;
}

.aba1>.aba1_left_wrap>.aba1_left {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    min-height: 100vh;
    background: url(../../images/aba1_deco03.png) top left no-repeat;
    background-size: 100%;
}

.aba1_left_con {
    padding: 15rem 9rem 0 2rem;
    margin: 0 auto;
    position: relative;

}
.aba1_left_con img{
	
}

.aba1_left_con:after {
    content: '';
    background: url(../../images/aba1_deco01.png) top right no-repeat;
    position: absolute;
    top: 20rem;
    right: 10rem;
    width: 130px;
    height: 213px;
    z-index: -1;
    animation: rabbit 5s infinite;

}

@keyframes rabbit {
    0% {
        right: 10rem;
        transform: rotate3d(1, 1, 1, -29deg);
    }

    50% {
        right: -1rem;
        transform: rotate3d(1, 1, 1, 0deg);
    }
    100% {
        right: 10rem;
        transform: rotate3d(1, 1, 1, -29deg);
    }
}

.aba1_left_con h2 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding: 3.1rem 2rem 1rem 0;
    text-align: right;
}

.aba1_right {
    max-width: 978px;
    text-align: justify;
    position: relative;
}

.aba1_right:after {
    content: '';
    background: url(../../images/aba_deco01.png) top right no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 74px;
}

.aba1_right h3 {
    padding: 2.2rem 0 4.6rem;
    font-size: 26px;
    color: #3c7451;
    font-weight: 500;
    text-align: left;

}

.aba1_right h4 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-bottom: 2.4rem;
    font-weight: 500;
    text-align: left;

}

.aba1_right p {
    font-size: 16px;
    color: #264a33;
    padding-bottom: 2rem;
    line-height: 1.8;
    text-align: justify;

}

.aba1_right b {
    font-weight: 500;
}

.text-highlight {
    all: unset;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: color calc(1s / 4) cubic-bezier(0.25, 1, 0.5, 1), background-color calc(1s / 4) cubic-bezier(0.25, 1, 0.5, 1), background-size 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    background-image: linear-gradient(transparent calc(100% - 0.1em), hsl(60, 0%, 71%) 0.1em);

}

.text-highlight.active {
    background-size: 100% 100%;
    padding-bottom: 0.6rem;
}


.aba1_pic02 {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding-bottom: 2rem;

}

.aba1_pic02 img {}

.aba1_pic03 {
    padding-bottom: 2rem;
}

.text-highlight2 {
    all: unset;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: color calc(1s / 4) cubic-bezier(0.25, 1, 0.5, 1), background-color calc(1s / 4) cubic-bezier(0.25, 1, 0.5, 1), background-size 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    background-image: linear-gradient(transparent calc(100% - 1em), hsl(10, 60.3%, 75.3%) 1em);
    transition-delay: 1s;
}

.text-highlight2.active {
    background-size: 100% 100%;
    padding-bottom: 0.6rem;
}

.aba1_pic04 {
    padding-bottom: 3.5rem;
}

.aba1_pic04 img {
    padding-bottom: 1rem;
}

.aba1_info {
    margin: 2.5rem 0;
    border: 1px #e6a79a solid;
    border-radius: 20px;
    padding: 1rem 3rem 2rem;
}

.aba1_info {
    text-align: left;
}

.aba1_info .info_top {
    text-align: left;
}

.aba1_info .info_top img {
    display: inline-block;
}

.aba1_info .info_top h5 {
    display: inline-block;
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-left: 1.2rem;
    vertical-align: middle;
}

.aba1_info .info_bot {}

.aba1_info .info_bot ul li {
    font-size: 18px;
    color: #55b679;
    font-family: 'Noto Sans TC';
    margin: 1.5rem 0;
    line-height: 29px;
}


/**aba2**/
.aba2 {
    max-width: 1619px;
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    margin-top: 10rem;

}

.aba2>.aba2_left_wrap {
    max-width: 539px;
}

.aba2>.aba2_left_wrap>.aba2_left {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    min-height: 100vh;
    background: url(../../images/aba2_deco03.png) top left no-repeat;
    background-size: 100%;
}

.aba2_left_con {
    padding: 12rem 9rem 0 10rem;
    margin: 0 auto;
    position: relative;
    text-align: right;

}

.aba2_left_con h2 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding: 3.1rem 2rem 1rem 0;
    text-align: right;
}

.aba2_deco01 {
    padding-right: 4rem;
}

.aba2_right {
    max-width: 978px;
    text-align: justify;
    position: relative;
}

.aba2_right:after {
    content: '';
    background: url(../../images/aba_deco01.png) top right no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 74px;
}

.aba2_right h3 {
    padding: 2.2rem 0 4.6rem;
    font-size: 26px;
    color: #3c7451;
    font-weight: 500;
    text-align: left;

}

.aba2_right h4 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-bottom: 2.4rem;
    font-weight: 500;
    text-align: left;
    line-height: 46px;

}

.aba2_right p {
    font-size: 16px;
    color: #264a33;
    padding-bottom: 2rem;
    line-height: 1.8;
    text-align: justify;

}

.aba2_right b {
    font-weight: 500;
}


.text-highlight.active {
    background-size: 100% 100%;
    padding-bottom: 0.6rem;
}

.aba2_pic02 {
    padding-bottom: 2rem;

}

.aba2_deco04 {
    padding-bottom: 2rem;
}


.aba2_info {
    margin: 2.5rem 0 6rem;
    border: 1px #e6a79a solid;
    border-radius: 20px;
    padding: 1rem 3rem 2rem;
}

.aba2_info {
    text-align: left;
}

.aba2_info .info_top {
    text-align: left;
}

.aba2_info .info_top img {
    display: inline-block;
}

.aba2_info .info_top h5 {
    display: inline-block;
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-left: 1.2rem;
    vertical-align: middle;
}

.aba2_info .info_bot {}

.aba2_info .info_bot ul li {
    font-size: 18px;
    color: #55b679;
    font-family: 'Noto Sans TC';
    margin: 1.5rem 0;
    line-height: 29px;
}

.aba2_con {
    padding-bottom: 3rem;
    text-align: left;
}

.aba2_con img {
    display: inline-block;
}

.aba2_con span {
    display: inline-block;
    width: 78%;
    vertical-align: middle;
    line-height: 30px;
    font-size: 16px;
    color: #264a33;
}

.aba2_cl {
    margin-top: 2rem;
}

.aba2_cl_l {
    display: inline-block;
    width: 48%;
}

.aba2_cl_l h3 {
    color: #55b679;
    font-size: 22px;
    font-family: 'Zen Maru Gothic';
}

.aba2_cl_l p {
    color: #264a33;
    font-size: 16px;
}

.aba2_cl_r {
    display: inline-block;
    width: 35%;
    vertical-align: bottom;
    padding-left: 1.5rem;
}

/**aba3**/
.aba3 {
    max-width: 1619px;
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
    margin-top: 6rem;

}

.aba3>.aba3_left_wrap {
    max-width: 539px;
}

.aba3>.aba3_left_wrap>.aba3_left {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    min-height: 100vh;
    background: url(../../images/aba3_deco03.png) top left no-repeat;
    background-size: 100%;
}

.aba3_left_con {
    padding: 15rem 5rem 0 3rem;
    margin: 0 auto;
    position: relative;
    text-align: right;
}

.aba3_left_con h2 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding: 3.1rem 2rem 1rem 0;
    text-align: right;
}

.aba3_deco02 {
    padding-right: 2rem;
}

.aba3_right {
    max-width: 978px;
    text-align: justify;
    position: relative;
}

.aba3_right:after {
    content: '';
    background: url(../../images/aba_deco01.png) top right no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 74px;
}

.aba3_right h3 {
    padding: 2.2rem 0 4.6rem;
    font-size: 26px;
    color: #3c7451;
    font-weight: 500;
    text-align: left;

}

.aba3_right h4 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-bottom: 1.4rem;
    font-weight: 500;
    text-align: left;
    line-height: 40px;

}

.aba3_right h5 {
    position: relative;
    font-size: 18px;
    color: #264a33;
    line-height: 40px;
    padding-left: 3rem;
    padding-bottom: 2.4rem;
    text-align: left;
}

.aba3_right h5:before {
    content: '';
    background: #264a33;
    width: 1px;
    height: 77%;
    position: absolute;
    top: 1rem;
    left: 0;
}

.aba3_right h6 {
    font-size: 18px;
    color: #55b679;
    padding: 2.2rem 0 4rem;
    text-align: left;

}

.aba3_right p {
    font-size: 16px;
    color: #264a33;
    padding-bottom: 2rem;
    line-height: 1.8;
    text-align: justify;

}

.aba3_right b {
    font-weight: 500;
}

.aba3_inner {
    text-align: left;

}

.aba3_inner p {
    font-size: 16px;
    color: #264a33;

}

.aba3_inner .inner_top {}

.aba3_inner .inner_top img {
    display: inline-block;
}

.aba3_inner .inner_top h4 {
    display: inline-block;
    padding-left: 1.6rem;
}

.aba3_inner .inner_bot {
    margin: 3.5rem 0;
}

.aba3_inner .inner_bot .inner_con {
    display: inline-block;
    margin-bottom: 2rem;
}

.aba3_inner .inner_bot .inner_txt {
    display: inline-block;
    width: 59%;
    padding-left: 1rem;
    vertical-align: middle;
}

.aba3_inner .inner_bot h6 {
    font-size: 26px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-bottom: 2rem;
}

.aba3_inner .inner_bot span {
    font-size: 16px;
    color: #264a33;
    line-height: 30px;
}

.yilan_f {
    max-width: 100%;
    min-height: 600px;
    position: relative;
}

.yilan_f lottie-player {
    max-width: 100%;
    height: 488px;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: 4rem;
}

.yilan_f h4 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-bottom: 1.4rem;
    font-weight: 500;
    text-align: left;
    line-height: 40px;

}

.yilan_f h6 {
    font-size: 18px;
    color: #55b679;
    max-width: 355px;
    line-height: 31px;
    text-align: left;
}

.text-highlight3 {
    all: unset;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: color calc(1s / 4) cubic-bezier(0.25, 1, 0.5, 1), background-color calc(1s / 4) cubic-bezier(0.25, 1, 0.5, 1), background-size 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    background-image: linear-gradient(transparent calc(100% - 0.03em), hsl(142, 39.9%, 52.4%) 0.03em);
    transition-delay: 1s;
}

.text-highlight3.active {
    background-size: 100% 100%;
    padding-bottom: 0.1rem;
}

.history {
    background: url(../../images/aba3_deco04.png) top right no-repeat;
    min-height: 512px;
    margin-bottom: 2rem;
}

.history_txt {
    text-align: left;
}

.history_txt p:nth-of-type(1) {
    width: 60%;
}

.history_txt p:nth-of-type(3) {
    width: 40%;
}
.history_top{
	margin-bottom: 3rem;
}
.history_top img {
    display: inline-block;
}

.history_top h4 {
    display: inline-block;
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-bottom: 1.4rem;
    font-weight: 500;
    text-align: left;
    line-height: 40px;
}

.aba3_deco04 {
    display: none;
}

.aba3_house .house {
    display: inline-block;
}

.aba3_house .house2 {}

.aba3_house .house .txt {
    text-align: right;
    padding-top: 0.4rem;
    font-size: 14px;
    color: #99bca6;
}

.aba3_house .house .txt span {
    vertical-align: sub;
}

.aba3_info {
    margin: 3.5rem 0 6rem;
    border: 1px #e6a79a solid;
    border-radius: 20px;
    padding: 1rem 3rem 2rem;
}

.aba3_info {
    text-align: left;
}

.aba3_info .info_top {
    text-align: left;
}

.aba3_info .info_top img {
    display: inline-block;
}

.aba3_info .info_top h5 {
    display: inline-block;
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-left: 1.2rem;
    vertical-align: middle;
    padding-bottom: 1rem;
}

.aba3_info .info_top h5:before {
    display: none;

}

.aba3_info .info_bot {
    text-align: right;
}

.aba3_info .info_bot p {
    font-size: 16px;
    color: #264a33;
    font-family: 'Noto Sans TC';
    margin: 1.5rem 0;
    line-height: 29px;
}

.aba3_info .info_bot span {
    font-size: 16px;
    color: #264a33;
    font-family: 'Noto Sans TC';
    margin: 1.5rem 0;
    line-height: 29px;
    position: relative;
}

.aba3_info .info_bot span:before {
    content: '';
    background: #264a33;
    width: 49%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: -60%;
    opacity: .5;
}
@media screen and (max-width: 1500px) {
	.aba1_right, .aba2_right, .aba3_right {
    margin: 0 2rem;
}
.aba1_left_con:after {
    top: 12rem;
}
.aba1_left_con h2 {
    font-size: 15px;
}
.aba2_left_con h2 {
    font-size: 15px;
}
.aba3_left_con h2 {
    font-size: 17px;
    padding: 1.1rem 2rem 1rem 0;
}
.aba3_deco02 {
    width: 50%;
}
}
@media screen and (max-width: 1400px) {
    .aba1 {
        justify-content: flex-start;
    }

    .aba1>.aba1_left_wrap {
        max-width: 30%;
    }
	.aba1_left_con {
    padding: 10rem 4rem 0 3rem;
}
@keyframes rabbit {
    0% {
        right: 10rem;
        transform: rotate3d(1, 1, 1, -29deg);
    }

    50% {
        right: -6rem;
        transform: rotate3d(1, 1, 1, 0deg);
    }
    100% {
        right: 10rem;
        transform: rotate3d(1, 1, 1, -29deg);
    }
}
.aba1_left_con h2 {
    font-size: 16px;
}
    .aba1_left_con:after {
    top: 11rem;
}

    .aba1_right {
        max-width: 50%;
        margin-left: 7rem;
    }

    .aba1_right:after {
        right: 10rem;
    }
	.aba1_pic02 img {
    width: 30%;
}

    .aba2 {
        justify-content: flex-start;
    }

    .aba2>.aba2_left_wrap {
        max-width: 30%;
    }
	.aba2_left_con {
    padding: 20rem 2rem 0 1rem;
}

    .aba2_right {
        max-width: 50%;
        margin-left: 7rem;
    }

    .aba2_right:after {
        right: 10rem;
    }

    .aba3 {
        justify-content: flex-start;
    }

    .aba3>.aba3_left_wrap {
        max-width: 30%;
    }
	.aba3_left_con {
    padding: 9rem 2rem 0 1rem;
}
.aba3_left_con h2 {
    font-size: 18px;
	padding: 1.1rem 2rem 1rem 0;
}
.aba3_deco02 {
    width: 50%;
}

    .aba3_right {
        max-width: 50%;
        margin-left: 7rem;
    }

    .aba3_right:after {
        right: 10rem;
    }
}

@media screen and (max-width: 1200px) {
    .aba1_left_con:after {
        top: 11rem;
    background-size: 80%;
}
.aba1_left_con h2 {
    padding: 1.1rem 2rem 1rem 0;
	font-size: 13px;
}
    .aba1_right {
        margin-left: 4rem;
    }
	

    .aba2_left_con {
    padding: 12rem 9rem 0 10rem;
}
    .aba2_right {
        margin-left: 4rem;
    }

    .aba2_con span {
        width: 75%;
    }

    .aba3_left_con {
    padding: 9rem 2rem 0 1rem;
}
.aba3_left_con h2 {
    font-size: 15px;
}
.aba3_deco02 {
    width: 35%;
}
    .aba3_right {
        margin-left: 4rem;
    }

    .aba3_inner .inner_bot .inner_txt {
        width: 55%;
    }

    .aba3_house .house {
        width: 44%;
    }

    .aba3_house .house2 {
        width: 54%;
    }
}

@media screen and (max-width: 991px) {
    .aba1 {
        display: block;
    }

    .aba1>.aba1_left_wrap {
            max-width: 65%;
    }

    .aba1>.aba1_left_wrap>.aba1_left {
        min-height: 800px;
    }
	.aba1_left_con {
    padding: 16rem 4rem 0 3rem;
}
.aba1_left_con h2 {
    font-size: 22px;
}
.aba1_left_con:after {
    top: 19rem;
    background-size: 100%;
}

    .aba1_right {
        max-width: 90%;
        margin: 5rem auto 0;
        text-align: center;
    }

    .aba2 {
        display: block;
    }

    .aba2>.aba2_left_wrap {
        max-width: 65%;
    }

    .aba2>.aba2_left_wrap>.aba2_left {
        min-height: 800px;
    }
	.aba2_left_con {
    padding: 12rem 5rem 0 3rem;
}

    .aba2_left_con h2 {
        font-size: 19px;
    }

    .aba2_right {
        max-width: 90%;
        margin: 5rem auto 0;
        text-align: center;
    }

    .aba2_con span {
        width: 80%;
    }

    .aba3 {
        display: block;
    }

    .aba3>.aba3_left_wrap {
        max-width: 65%;
    }

    .aba3>.aba3_left_wrap>.aba3_left {
        min-height: 800px;
    }
    .aba3_left_con {
    padding: 21rem 4rem 0 4rem;
}
.aba3_left_con h2 {
    font-size: 22px;
}

    .aba3_right {
        max-width: 90%;
        margin: 5rem auto 0;
        text-align: center;
    }

    .aba3_house .house {
        width: 35%;
    }

    .aba3_house .house2 {
        width: 42%;
    }

}

@media screen and (max-width: 767px) {
    .aba1_left_con:after {
		display:none;
}
	.aba3_inner .inner_bot .inner_con {
        text-align: center;
    }

    .aba3_inner .inner_bot .inner_txt {
        width: 100%;
        text-align: left;
    }

    .aba3_inner .inner_bot h6 {
        padding-left: 0;
        text-align: center;
    }

    .history {
        background: none;
    }

    .history_txt p:nth-of-type(1),
    .history_txt p:nth-of-type(3) {
        width: 100%;
    }

    .aba3_deco04 {
        display: block;
        margin: 0 auto;
    }

    .aba3_house .house {
        width: 100%;
    }

    .aba3_house .house2 {
        width: 100%;
        padding-top: 2rem;
    }

    .aba3_house .house .txt {
        width: 82%;
    }

    .aba3_house .house:nth-of-type(2) .txt {
        width: 100%;
    }
}

@media screen and (max-width: 450px) {
    .aba1>.aba1_left_wrap>.aba1_left {
        min-height: 250px;
    }

    .aba1_left_con {
        padding: 12.1rem 3rem 0 1rem;
        margin: 0 auto;
        position: relative;
    }

    .aba1_left_con:after {
        top: 19rem;
        right: 8rem;
        background-size: 40%;
    }

    .aba1_left_con h2 {
        font-size: 17px;
        padding: 1.1rem 2rem 1rem 0;
    }
    .aba1_right {
    margin: 0 auto;
}

    .aba2_deco01 {
        width: 70%;
        padding-right: 2rem;
    }

    .aba1_pic02 img {
        width: 33%;
    }

    .aba1_right:after {
        right: 2rem;
        top: 4rem;
        background-size: 70%;
    }

    .aba2>.aba2_left_wrap>.aba2_left {
        min-height: 250px;
    }

    .aba2_left_con {
        padding: 9.1rem 3rem 0 1rem;
        margin: 0 auto;
        position: relative;
    }
	.aba2_left_con lottie-player {
            max-width: 80%;
    margin: 0 auto;
    }

    .aba2_left_con h2 {
        font-size: 15px;
        padding: 0;
    }
    .aba2_right {
    margin: 0 auto;
}

    .aba2_pic02 img {
        width: 33%;
    }

    .aba2_right:after {
        right: 2rem;
        top: 4rem;
        background-size: 70%;
    }

    .aba2_right h4 {
        font-size: 20px;
    }

    .aba2_con ul li{
         margin-bottom: 2rem;
    }

    .aba2_con img {
        width: 20%;
    }

    .aba2_con span {
        width: 75%;
    }

    .aba2_cl_l {
        width: 90%;
    }

    .aba2_cl_r {
        width: 90%;
        padding-left: 0;
    }

    .aba3>.aba3_left_wrap>.aba3_left {
        min-height: 250px;
    }

    .aba3_left_con {
        padding: 11.1rem 3rem 0 1rem;
        margin: 0 auto;
        position: relative;
    }

    .aba3_left_con h2 {
        font-size: 16px;
        padding: 1.1rem 2rem 1rem 0;
    }

    .aba3_deco02 {
        width: 50%;
    }

    .aba3_right:after {
        right: 2rem;
        top: -9rem;
        background-size: 70%;
    }

    .aba3_right h4 {
        font-size: 19px;
    }

    .aba3_right h6 {
        line-height: 31px;
    }
}

@media screen and (max-width: 414px) {
    .aba1>.aba1_left_wrap {
        max-width: 93%;
    }
    .aba1_left_con {
    padding: 8.1rem 3rem 0 1rem;
}

    .aba1_right {
        max-width: 88%;
    }

    .aba1_right h3 {
        padding: 5rem 0 2.8rem;
    }

    .aba2>.aba1_left_wrap {
        max-width: 93%;
    }

    .aba12_right {
        max-width: 88%;
    }

    .aba2_right h3 {
        padding: 5rem 0 2.8rem;
    }

    .aba2_right h4 {
        font-size: 18px;
    }

    .aba3>.aba3_left_wrap {
        max-width: 93%;
    }
    .aba3_left_con {
    padding: 9.1rem 3rem 0 1rem;
}

    .aba3_right {
        max-width: 88%;
    }

    .aba3_right h3 {
        padding: 5rem 0 2.8rem;
    }
}

@media screen and (max-width: 350px) {

    .aba1_left_con:after {
        top: 9rem;
    }

    .aba1_right {
        max-width: 86%;
    }
    .aba2_left_con {
    padding: 6.1rem 3rem 0 1rem;
}

    .aba2_right {
        max-width: 86%;
    }
    .aba2_right:after {
    right: 0;
    top: 4rem;
    background-size: 47%;
}

    .aba3_right {
        max-width: 86%;
    }

    .aba3_right h5 {
        font-size: 15px;
    }

    .aba3_house .house .txt {
        width: 92%;
    }

    .aba3_house .house2 {
        width: 86%;
    }

}

/***abb*******************************************************/

.abb1 {
    max-width: 1619px;
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    margin: 6rem 0;

}

.abb1>.abb1_left_wrap {
    max-width: 539px;
}

.abb1>.abb1_left_wrap>.abb1_left {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 539px;
    min-height: 100vh;
    background: url(../../images/abb1_deco03.png) top left no-repeat;
    background-size: 100%;
    max-width: 100%;
}

.abb1_left_con {
    margin: 0 auto;
    position: absolute;
    top: 18%;
    left: 15%;
	width: 75%;
}

.abb1_left_con:after {
    content: '';
    border: 1px #000 solid;
    width: 100%;
    min-height: 478px;
    position: absolute;
    bottom: 3rem;
    left: -3rem;
    z-index: -1;
}

.abb1_left_con h2 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding: 3.1rem 2rem 1rem 0;
    text-align: right;
}

.abb1_right {
    max-width: 978px;
    text-align: justify;
    position: relative;
}

.abb1_right:after {
    content: '';
    background: url(../../images/aba_deco01.png) top right no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 74px;
}

.abb1_right h3 {
    padding: 2.2rem 0 4.6rem;
    font-size: 26px;
    color: #3c7451;
    font-weight: 500;
    text-align: left;

}

.abb1_right h4 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-bottom: 4rem;
    font-weight: 500;
    text-align: left;

}

.abb1_right h4:nth-of-type(2) {
    padding-top: 4rem;

}

.abb1_right p {
    font-size: 16px;
    color: #264a33;
    padding-bottom: 2rem;
    line-height: 1.8;
    text-align: justify;

}

.abb1_right b {
    font-weight: 500;
}

.abb1_info {
    margin: 1rem 0 3.5rem 0;
    border: 1px #e6a79a solid;
    border-radius: 20px;
    padding: 1rem 3rem 2rem;
    text-align: left;
}


.abb1_info .info_top {
    text-align: left;
    padding: 1.8rem 0;
}

.abb1_info .info_top img {
    display: inline-block;
}

.abb1_info .info_top h5 {
    display: inline-block;
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-left: 1.2rem;
    vertical-align: middle;
}

.abb1_info .info_bot {}

/**abb2**/
.abb2 {
    background: url(../../images/abb2_pic01.jpg) top left fixed;
    max-width: 100%;
    min-height: 676px;
    background-size: cover;
}

/**abb3**/
.abb3 {
    max-width: 1619px;
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    margin-top: 6rem;

}

.abb3>.abb3_left_wrap {
    max-width: 539px;
}

.abb3>.abb3_left_wrap>.abb3_left {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 539px;
    min-height: 100vh;
    background: url(../../images/abb3_deco03.png) top left no-repeat;
    background-size: 100%;
    max-width: 100%;
}

.abb3_left_con {
    margin: 0 auto;
    position: absolute;
    top: 27%;
    left: 10%;
    width: 73%;
}

.abb3_left_con:after {
    content: '';
    border: 1px #000 solid;
    width: 100%;
    min-height: 282px;
    position: absolute;
    bottom: 2.3rem;
    left: -3rem;
    z-index: -1;
}

.abb3_left_con h2 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding: 3.1rem 2rem 1rem 0;
    text-align: right;
}

.abb3_right {
    max-width: 978px;
    text-align: justify;
    position: relative;
}

.abb3_right:after {
    content: '';
    background: url(../../images/aba_deco01.png) top right no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 74px;
}

.abb3_right h3 {
    padding: 2.2rem 0 4.6rem;
    font-size: 26px;
    color: #3c7451;
    font-weight: 500;
    text-align: left;

}

.abb3_right h4 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding: 3rem 0;
    font-weight: 500;
    text-align: left;

}

.abb3_right h4:nth-of-type(2) {
    padding-top: 4rem;

}

.abb3_right p {
    font-size: 16px;
    color: #264a33;
    padding-bottom: 2rem;
    line-height: 1.8;
    text-align: justify;

}

.abb3_right p:nth-of-type(3) {
    margin-top: 2rem;

}

.abb3_right b {
    font-weight: 500;
}

.abb3_info {
    margin: 1rem 0 3.5rem 0;
    border: 1px #e6a79a solid;
    border-radius: 20px;
    padding: 1rem 3rem 2rem;
    text-align: right;
}

.abb3_info .info_top {
    text-align: left;
    padding: 1.8rem 0;
}

.abb3_info .info_top img {
    display: inline-block;
}

.abb3_info .info_top h5 {
    display: inline-block;
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-left: 1.2rem;
    vertical-align: middle;
}

.abb3_info p:nth-of-type(3) {
    margin-top: 0;
}

.abb3_info .info_bot {}

/**abb4**/
.abb4 {
    max-width: 1619px;
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
    margin-top: 6rem;

}

.abb4>.abb4_left_wrap {
    max-width: 539px;
}

.abb4>.abb4_left_wrap>.abb4_left {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 539px;
    min-height: 100vh;
    background: url(../../images/abb4_deco03.png) top left no-repeat;
    background-size: 100%;
    max-width: 100%;
}

.abb4_left_con {
       margin: 0 auto;
    position: absolute;
    top: 19%;
    left: 9%;
    width: 72%;
}

.abb4_left_con:after {
    content: '';
    border: 1px #000 solid;
    width: 100%;
    min-height: 476px;
    position: absolute;
    bottom: 3rem;
    left: -3rem;
    z-index: -1;
}

.abb4_left_con h2 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding: 3.1rem 2rem 1rem 0;
    text-align: right;
}

.abb4_right {
    max-width: 978px;
    text-align: justify;
    position: relative;
}

.abb4_right:after {
    content: '';
    background: url(../../images/aba_deco01.png) top right no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 74px;
}

.abb4_right h3 {
    padding: 2.2rem 0 4.6rem;
    font-size: 26px;
    color: #3c7451;
    font-weight: 500;
    text-align: left;

}

.abb4_right h4 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-bottom: 4rem;
    font-weight: 500;
    text-align: left;

}

.abb4_right h4:nth-of-type(2) {
    padding-top: 4rem;

}

.abb4_right p {
    font-size: 16px;
    color: #264a33;
    padding-bottom: 2rem;
    line-height: 1.8;
    text-align: justify;

}

.abb4_right b {
    font-weight: 500;
}



.abb4_info {
    margin: 1rem 0 3.5rem 0;
    border: 1px #e6a79a solid;
    border-radius: 20px;
    padding: 1rem 3rem 2rem;
}

.abb4_info {
    text-align: left;
}

.abb4_info .info_top {
    text-align: left;
    padding: 1.8rem 0;
}

.abb4_info .info_top img {
    display: inline-block;
}

.abb4_info .info_top h5 {
    display: inline-block;
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-left: 1.2rem;
    vertical-align: middle;
}

.abb4_info .info_bot {}
@media screen and (max-width: 1500px) {
	.abb1_right, .abb2_right, .abb3_right, .abb4_right {
    margin: 0 2rem;
}

}
@media screen and (max-width: 1400px) {
    .abb1 {
        justify-content: flex-start;
    }

    .abb1>.abb1_left_wrap {
        max-width: 30%;
    }

    .abb1>.abb1_left_wrap>.abb1_left {
        background-size: 100%;
    }

    .abb1_left_con {
        max-width: 67%;
        top: 17%;
    }

    .abb1_left_con:after {
        width: 100%;
        min-height: 330px;
        bottom: 2rem;
        left: -3rem;
    }

    .abb1_right {
        max-width: 50%;
        margin-left: 7rem;
    }

    .abb1_right:after {
        right: 10rem;
    }

    .abb3 {
        justify-content: flex-start;
    }

    .abb3>.abb3_left_wrap {
        max-width: 30%;
    }

    .abb3>.abb3_left_wrap>.abb3_left {
        background-size: 100%;
    }

    .abb3_left_con {
        max-width: 80%;
        top: 27%;
        left: 8%;
    }

    .abb3_left_con:after {
        width: 100%;
        min-height: 215px;
        bottom: 2rem;
        left: -2rem;
    }

    .abb3_right {
        max-width: 50%;
        margin-left: 7rem;
    }

    .abb3_right:after {
        right: 5rem;
    }

    .abb4 {
        justify-content: flex-start;
    }

    .abb4>.abb4_left_wrap {
        max-width: 30%;
    }

    .abb4>.abb4_left_wrap>.abb4_left {
        background-size: 100%;
    }

    .abb4_left_con {
        max-width: 60%;
        top: 25%;
    left: 20%;
    }

    .abb4_left_con:after {
        width: 100%;
        min-height: 311px;
        bottom: 2rem;
        left: -3rem;
    }

    .abb4_right {
        max-width: 50%;
        margin-left: 7rem;
    }

    .abb4_right:after {
        right: 10rem;
    }

}

@media screen and (max-width: 1200px) {
    .abb1>.abb1_left_wrap>.abb1_left {
        background-size: 100%;
    }

    .abb1_left_con {
        max-width: 70%;
		top: 14%;
    }

    .abb1_left_con:after {
        min-height: 304px;
    }

    .abb1_right {
        margin-left: 4rem;
    }

    .abb3>.abb3_left_wrap>.abb3_left {
        background-size: 98%;
    }

    .abb3_left_con {
        max-width: 80%;
        top: 22%;
    }

    .abb3_left_con:after {
        min-height: 185px;
    }

    .abb3_right {
        margin-left: 4rem;
    }

    .abb4>.abb4_left_wrap>.abb4_left {
        background-size: 100%;
    }

    .abb4_left_con {
        max-width: 70%;
    }

    .abb4_left_con:after {
        min-height: 518px;
    }

    .abb4_right {
        max-width: 42%;
        margin-left: 4rem;
    }
}

@media screen and (max-width: 991px) {
    .abb1 {
        display: block;
    }

    .abb1>.abb1_left_wrap {
        max-width: 95%;
    }

    .abb1>.abb1_left_wrap>.abb1_left {
        min-height: 800px;
        background-size: 100%;
    }

    .abb1_left_con {
        max-width: 73%;
    }

    .abb1_left_con:after {
        min-height: 473px;
    }

    .abb1_right {
        max-width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .abb1_right:after {
        right: 10rem;
        top: 4rem;
    }

    .abb1_right h3 {
        padding: 6.2rem 0 4.6rem;
    }

    .abb2 {
        background-attachment: initial;
        background-size: auto;
        background-position: top center;
        min-height: 443px;
    }

    .abb3 {
        display: block;
    }

    .abb3>.abb3_left_wrap {
        max-width: 95%;
    }

    .abb3>.abb3_left_wrap>.abb3_left {
        min-height: 690px;
        background-size: 100%;
    }

    .abb3_left_con {
        top: 37%;
    }

    .abb3_left_con:after {
        min-height: 288px;
    }

    .abb3_right {
        max-width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .abb3_right:after {
        right: 10rem;
        top: 4rem;
    }

    .abb3_right h3 {
        padding: 6.2rem 0 4.6rem;
    }

    .abb4 {
        display: block;
    }

    .abb4>.abb4_left_wrap {
        max-width: 95%;
    }

    .abb4>.abb4_left_wrap>.abb4_left {
        min-height: 800px;
        background-size: 100%;
    }

    .abb4_left_con {
        max-width: 75%;
        top: 22%;
    }

    .abb4_left_con:after {
        min-height: 493px;
    }

    .abb4_right {
        max-width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .abb4_right:after {
        right: 10rem;
        top: 4rem;
    }

    .abb4_right h3 {
        padding: 6.2rem 0 4.6rem;
    }

}

@media screen and (max-width: 767px) {
    .abb1>.abb1_left_wrap>.abb1_left {
        min-height: 473px;
        background-size: 100%;
    }

    .abb1_left_con {
        max-width: 69%;
    left: 18%;
    top: 21%;
    }

    .abb1_left_con:after {
        min-height: 365px;
        left: -1.5rem;
        bottom: 1rem;
    }

    .abb1_right:after {
        right: 1rem;
    }

    .abb2 {
        background-size: cover;
        min-height: 333px;
    }

    .abb3>.abb3_left_wrap>.abb3_left {
        min-height: 453px;
        background-size: 95%;
    }

    .abb3_left_con {
        max-width: 75%;
        left: 11%;
    }

    .abb3_left_con:after {
        min-height: 236px;
        left: -1.5rem;
        bottom: 1rem;
    }

    .abb3_right:after {
        right: 1rem;
        background-size: 70%;
    }

    .abb3_right h3 {
        padding: 6.2rem 0 1.6rem;
    }

    .abb4>.abb4_left_wrap>.abb4_left {
        min-height: 473px;
        background-size: 100%;
    }

    .abb4_left_con {
        max-width: 63%;
    left: 21%;
    top: 27%;
    }

    .abb4_left_con:after {
        min-height: 343px;
        left: -1.5rem;
        bottom: 1rem;
    }

    .abb4_right:after {
        right: 1rem;
    }
}

@media screen and (max-width: 450px) {
    .abb1>.abb1_left_wrap>.abb1_left {
        min-height: 436px;
        background-size: 100%;
    }

    .abb1_left_con {
            max-width: 70%;
    left: 16%;
    }

    .abb1_left_con:after {
        min-height: 336px;
    }

    .abb1_info .info_top h5 {
        padding: 0.8rem 0 0;
    }

    .abb1_right:after {
        right: 0rem;
        background-size: 73%;
    }

    .abb3>.abb3_left_wrap>.abb3_left {
        min-height: 436px;
        background-size: 100%;
    }

    .abb3_left_con {
        max-width: 80%;
        left: 10%;
    }

    .abb3_left_con:after {
        min-height: 235px;
    }

    .abb3_info .info_top h5 {
        padding: 0.8rem 0 0;
    }

    .abb3_right:after {
        right: 0rem;
        background-size: 60%;
    }

    .abb4>.abb4_left_wrap>.abb4_left {
        min-height: 436px;
        background-size: 100%;
    }

    .abb4_left_con {
        max-width: 62%;
        left: 20%;
    }

    .abb4_left_con:after {
        min-height: 310px;
    }

    .abb4_info .info_top h5 {
        padding: 0.8rem 0 0;
    }

    .abb4_right:after {
        right: 0rem;
        background-size: 73%;
    }
}

@media screen and (max-width: 414px) {
    .abb1>.abb1_left_wrap {
        max-width: 93%;
    }

    .abb1>.abb1_left_wrap>.abb1_left {
        min-height: 410px;
    }

    .abb1_left_con {}

    .abb1_left_con:after {
        min-height: 327px;
    }

    .abb1_right {
        max-width: 88%;
    }

    .abb1_right h3 {
        padding: 5rem 0 2.8rem;
    }

    .abb1_right h4 {
        font-size: 20px;
    }

    .abb1_info {
        padding: 1rem 2rem 2rem;
    }

    .abb3>.abb3_left_wrap {
        max-width: 93%;
    }

    .abb3>.abb3_left_wrap>.abb3_left {
        min-height: 410px;
    }

    .abb3_left_con {}

    .abb3_left_con:after {
        min-height: 210px;
    }

    .abb3_right {
        max-width: 88%;
    }

    .abb3_right:after {
        background-size: 38%;
    }

    .abb3_right h3 {
        padding: 5rem 0 2.8rem;
    }

    .abb3_right h4 {
        font-size: 20px;
    }

    .abb3_info {
        padding: 1rem 2rem 2rem;
    }

    .abb4>.abb4_left_wrap {
        max-width: 93%;
    }

    .abb4>.abb4_left_wrap>.abb4_left {
        min-height: 410px;
    }

    .abb4_left_con {}

    .abb4_left_con:after {
        min-height: 300px;
    }

    .abb4_right {
        max-width: 88%;
    }

    .abb4_right h3 {
        padding: 5rem 0 2.8rem;
    }

    .abb4_right h4 {
        font-size: 20px;
    }

    .abb4_info {
        padding: 1rem 2rem 2rem;
    }


}

@media screen and (max-width: 390px) {
    .abb1_left_con:after {
    min-height: 312px;
}

    .abb3_left_con:after {
        min-height: 195px;
    }

    .abb3_right:after {
        top: 0rem;
    }
	.abb4_left_con:after {
    min-height: 279px;
}
}

@media screen and (max-width: 350px) {

    .abb1>.abb1_left_wrap>.abb1_left {
        min-height: 325px;
    }

    .abb1_left_con {}

    .abb1_left_con:after {
        min-height: 253px;
    }

    .abb1_right {
        max-width: 86%;
    }

    .abb1_right:after {
        right: 0rem;
        background-size: 43%;
    }

    .abb3>.abb3_left_wrap>.abb3_left {
        min-height: 325px;
    }

    .abb3_left_con {}

    .abb3_left_con:after {
        min-height: 155px;
    }

    .abb3_right {
        max-width: 86%;
    }

    .abb3_right:after {
        right: 0rem;
        background-size: 43%;
    }

    .abb4>.abb4_left_wrap>.abb4_left {
        min-height: 325px;
    }

    .abb4_left_con {}

    .abb4_left_con:after {
        min-height: 230px;
    }

    .abb4_right {
        max-width: 86%;
    }

    .abb4_right:after {
        right: 0rem;
        background-size: 43%;
    }
}

/***abc*******************************************************/

.abc1 {
    max-width: 1619px;
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    margin-top: 6rem;

}

.abc1>.abc1_left_wrap {
    max-width: 539px;
}

.abc1>.abc1_left_wrap>.abc1_left {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 539px;
    min-height: 100vh;
    background: url(../../images/abb1_deco03.png) top left no-repeat;
    background-size: 100%;
    max-width: 100%;
}

.abc1_left_con {
    margin: 0 auto;
    position: absolute;
    top: 27%;
    left: 8%;
    width: 85%;
}

.abc1_left_con:after {
    content: '';
    border: 1px #000 solid;
    width: 100%;
    min-height: 322px;
    position: absolute;
    bottom: 3rem;
    left: -3rem;
    z-index: -1;
}

.abc1_left_con h2 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding: 3.1rem 2rem 1rem 0;
    text-align: right;
}

.abc1_right {
    max-width: 978px;
    text-align: justify;
    position: relative;
}

.abc1_right:after {
    content: '';
    background: url(../../images/aba_deco01.png) top right no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 74px;
}

.abc1_right h3 {
    padding: 2.2rem 0 4.6rem;
    font-size: 26px;
    color: #3c7451;
    font-weight: 500;
    text-align: left;

}

.abc1_right h4 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-bottom: 4rem;
    font-weight: 500;
    text-align: left;

}

.abc1_right h4:nth-of-type(2) {
    padding-top: 4rem;
    line-height: 1.5;

}

.abc1_right p {
    font-size: 16px;
    color: #264a33;
    padding-bottom: 2rem;
    line-height: 1.8;
    text-align: justify;

}

.abc1_right b {
    font-weight: 500;
}

.abc1_info {
    margin: 1rem 0 3.5rem 0;
    border: 1px #e6a79a solid;
    border-radius: 20px;
    padding: 1rem 1.5rem 2rem;
    text-align: left;
}


.abc1_info .info_left,
.abc1_info .info_right {
    display: inline-block;
    text-align: left;
    padding: 1.8rem 0;
    width: 48%;
    vertical-align: top;
}

.abc1_info .info_right {
    width: 50%;
    padding-top: 3rem;
    padding-left: 1.5rem;
}

.abc1_info .info_left img {
    display: inline-block;
}

.abc1_info .info_left h5,
.abc1_info .info_right h5 {
    display: inline-block;
    font-size: 16px;
    color: #264a33;
    font-family: 'Noto Sans TC';
    padding-left: 1.2rem;
    padding-bottom: 3rem;
    vertical-align: initial;
    font-weight: 300;
}


.abc1_info .info_right h5 {
    padding-left: 0;
}

/* TIMELINE */
.timeline {
      overflow-x: hidden;	
	}

.timeline ul {
    padding: 50px 0;
}

.timeline ul li {
    list-style-type: none;
    position: relative;
    width: 6px;
    margin: 0 auto;
    background: #6b988a;
}

.timeline ul li:nth-of-type(odd) {
    background: #8bad8b;
}

.timeline ul li::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: inherit;
    z-index: 1;
}

.timeline ul li:first-child::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: inherit;
    z-index: 1;
}

.timeline ul li div {
    position: relative;
    bottom: 0;
    width: 295px;
    padding: 15px;
    background: #8bad8b;
}

.timeline ul li:nth-child(odd) div {
    background: #6b988a;
}

.timeline ul li div::before {
    content: "";
    position: absolute;
    bottom: 7px;
    width: 0;
    height: 0;
    border-style: solid;
}

.timeline ul li:nth-child(odd) div {
    left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #6b988a transparent transparent;
}

.timeline ul li:nth-child(even) div {
    left: -332px;
}

.timeline ul li:nth-child(even) div::before {
    right: -15px;
    border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent #8bad8b;
}

.timeline ul li div p {
    color: #fff;
}

time {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
    color: #fff;
    font-family: 'Jua';
}


/* EFFECTS */

.timeline ul li::after {
    transition: background 0.5s ease-in-out;
}

.timeline ul li.in-view::after {
    background: url(../../images/tl_deco01_01.jpg) bottom left no-repeat;
    width: 23px;
    height: 23px;
}

.timeline ul li.in-view:nth-child(odd)::after {
    background: url(../../images/tl_deco01_02.jpg) bottom left no-repeat;
    width: 23px;
    height: 23px;
}

.timeline ul li.in-view:nth-child(1)::before {
    background: url(../../images/tl_deco01_01.jpg) top left no-repeat;
    width: 23px;
    height: 23px;
}

.timeline ul li div {
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
    transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
    transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
    transform: none;
    visibility: visible;
    opacity: 1;
    font-size: 16px;
    color: #264a33;
}

/*abc12*/
.abc12 {
    margin-top: 11rem;
}

.abc12 h3 {
    position: relative;

}

.abc12 h3:after {
    content: '';
    background: url(../../images/abc1_deco02_01.jpg) top left no-repeat;
    background-size: 100%;
    width: 116px;
    height: 72px;
    position: absolute;
    top: -2.2rem;
    right: 0;
}

.abc12_pres {
    border: 1px #a2c2ae solid;
    width: 100%;
    border-radius: 30px;
    padding: 2rem 1rem 1.5rem 2rem;
    margin: 0 0 1rem;
}

.abc12_pres .pres_left {
    display: inline-block;
    vertical-align: middle;
    width: 17%;
}

.abc12_pres .pres_left img {}

.abc12_pres .pres_left h2 {
    font-size: 18px;
    color: #264a33;
    padding: 2rem 0 0;
    text-align: left;

}

.abc12_pres .pres_right {
    display: inline-block;
    width: 80%;
    vertical-align: middle;
}

.abc12_pres .pres_right h4 {
    font-size: 16px;
    font-family: 'Noto Sans TC';
    color: #264a33;
    padding: 0 0 0 2rem;
    line-height: 30px;
}

/*abc13*/
.abc13 {
    margin-top: 11rem;
}

.abc13 h3 {
    position: relative;

}

.abc13 h3:after {
    content: '';
    background: url(../../images/abc1_deco02_02.jpg) top left no-repeat;
    background-size: 100%;
    width: 116px;
    height: 72px;
    position: absolute;
    top: -2.2rem;
    right: 0;
}
/**abc2**/
.abc2 {
    max-width: 1619px;
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    margin-top: 6rem;

}

.abc2>.abc2_left_wrap {
    max-width: 539px;
}

.abc2>.abc2_left_wrap>.abc2_left {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 539px;
    min-height: 100vh;
    background: url(../../images/abc2_deco03.png) top left no-repeat;
    background-size: 100%;
    max-width: 100%;
}

.abc2_left_con {
    margin: 0 auto;
    position: absolute;
    top: 27%;
    left: 11%;
    width: 80%;
}

.abc2_left_con:after {
    content: '';
    border: 1px #000 solid;
    width: 100%;
    min-height: 302px;
    position: absolute;
    bottom: 3rem;
    left: -3rem;
    z-index: -1;
}

.abc2_left_con h2 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding: 3.1rem 2rem 1rem 0;
    text-align: right;
}

.abc2_right {
    max-width: 978px;
    text-align: justify;
    position: relative;
}

.abc2_right:after {
    content: '';
    background: url(../../images/aba_deco01.png) top right no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 74px;
}

.abc2_right h3 {
    padding: 2.2rem 0 4.6rem;
    font-size: 26px;
    color: #3c7451;
    font-weight: 500;
    text-align: left;

}

.abc2_right h4 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding-bottom: 4rem;
    font-weight: 500;
    text-align: left;

}

.abc2_right h4:nth-of-type(2) {
    padding-top: 4rem;

}

.abc2_right p {
    font-size: 16px;
    color: #264a33;
    padding-bottom: 2rem;
    line-height: 1.8;
    text-align: justify;

}

.abc2_right b {
    font-weight: 500;
}

.abc2_info {
    margin: 1rem 0 3.5rem 0;
    /*border: 1px #e6a79a solid;*/
    border-radius: 20px;
    padding: 2.5rem 3rem;
    text-align: left;
    width: 60%;
}
.abc2_info p {
    font-size: 16px;
    color: #264a33;
    padding-bottom: 2rem;
    text-align: justify;
    line-height: 35px;
}
.abc22{
	margin: 3rem 0 5rem;	
}
.abc22{
	font-size: 16px;
	color: #264a33;
	font-family: 'Noto Sans TC';
}
.abc22 dl dt{
	font-weight: 400;
    padding-bottom: 2rem;
}
.abc22 dl dd{
	padding-bottom: 1rem;
	font-weight: 500;
}
.abc23{
	margin: 3rem 0 5rem;	
}
.abc23{
	font-size: 16px;
	color: #264a33;
	font-family: 'Noto Sans TC';
}
.abc23 dl dt{
	font-weight: 400;
    padding-bottom: 2rem;
}
.abc23 dl dd{
	padding-bottom: 1rem;
	font-weight: 400;
}
.abc24{
	margin: 3rem 0 5rem;	
}
.abc24{
	font-size: 16px;
	color: #264a33;
	font-family: 'Noto Sans TC';
}
.abc24 dl dt{
	font-weight: 400;
    padding-bottom: 2rem;
    line-height: 2.5;
}
.abc24 dl dt:nth-of-type(3) {
	padding-top: 2rem;
}
.abc24 dl dd{
	padding-bottom: 1rem;
	font-weight: 400;
}
.abc2_info2 {
    margin: 1rem 0 3.5rem 0;
    border: 1px #e6a79a solid;
    border-radius: 20px;
    padding: 2.5rem 3rem;
    text-align: left;
    font-size: 16px;
    color: #264a33;
}
.abc2_info2 p{
    padding-bottom: 2rem;
    line-height: 30px;
}
.abc2_info2 ul{}
.abc2_info2 ul li{
	padding: 0 0 1rem 0;
}
.abc25 {
    margin: 5rem 0 4rem;
}
.abc25 p{
 padding-bottom: 0;
}
.abc2_info3 {
    margin: 1rem 0 3.5rem 0;
    border: 1px #e6a79a solid;
    border-radius: 20px;
    padding: 2.5rem 3rem;
    text-align: justify;
    font-size: 16px;
    color: #264a33;
}
.abc2_info3 p{
    padding-bottom: 2rem;
    line-height: 27px;
}
.abc2_info3 ul{}
.abc2_info3 ul li{
	padding: 0 0 1rem 0;
	line-height: 29px;
}
.abc26{
	margin: 5rem 0;
}
.abc26 p{
	padding-bottom: 0.9rem;
    line-height: 30px;
}
.abc27{
	margin: 5rem 0;
}
.abc27 p{
	padding-bottom: 0.9rem;
    line-height: 30px;
}
.abc27 dl{
	margin: 1.5rem 0 0.5rem;
	font-size: 16px;
    color: #264a33;

}
.abc27 dl dt{
	padding-bottom: 1.9rem;
	font-weight: 300;
}
.abc27 dl dd{
	padding-bottom: 1.1rem;
	font-weight: 500;
}
/**abc3**/
.abc3 {
    max-width: 1619px;
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    margin-top: 6rem;

}

.abc3>.abc3_left_wrap {
    max-width: 539px;
}

.abc3>.abc3_left_wrap>.abc3_left {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 539px;
    min-height: 100vh;
    background: url(../../images/abc3_deco03.png) top left no-repeat;
    background-size: 100%;
    max-width: 100%;
}

.abc3_left_con {
    margin: 0 auto;
    position: absolute;
    top: 19%;
    left: 16%;
    width: 60%;
}

.abc3_left_con:after {
    content: '';
    border: 1px #000 solid;
    width: 80%;
    min-height: 411px;
    position: absolute;
    bottom: 2rem;
    left: -3rem;
    z-index: -2;
}
.abc3_left_con:before {
    content: '';
    background: url(../../images/abc3_deco02.png) top left no-repeat;
    background-size: 70%;
    width: 117px;
    min-height: 517px;
    position: absolute;
    top: 5rem;
    left: -7rem;
    z-index: -1;
    max-width: 100%;
}

.abc3_right {
    max-width: 978px;
    text-align: justify;
    position: relative;
}

.abc3_right:after {
    content: '';
    background: url(../../images/aba_deco01.png) top right no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 74px;
}

.abc3_right h3 {
    padding: 2.2rem 0 4.6rem;
    font-size: 26px;
    color: #3c7451;
    

}
.abc3_right h4 {
    padding: 3.7rem 0 4.6rem;
    font-size: 22px;
    color: #55b679;
    font-weight: 500;
    text-align: left;
    font-family: 'Zen Maru Gothic';

}

.abc3_right p {
    font-size: 16px;
    color: #264a33;
    padding-bottom: 2rem;
    line-height: 1.8;
    text-align: justify;

}

.abc3_right b {
    font-weight: 500;
}

.abc3_info {
    margin: 1rem 0 3.5rem 0;
    border: 1px #e6a79a solid;
    border-radius: 20px;
    padding: 2.5rem 3rem;
    text-align: left;
    font-size: 16px;
    color: #264a33;
}
.abc3_info p{
    padding-bottom: 2rem;
    line-height: 30px;
}
.abc3_info ul{}
.abc3_info ul li{
	padding: 0 0 1rem 0;
	line-height: 35px;
}
.abc31, .abc32, .abc33, .abc34, .abc35{
	margin-bottom: 4.5rem;
}
.abc36{
	margin-bottom: 2rem;
}

/**abc4**/
.abc4 {
    max-width: 1619px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
    margin-top: 6rem;

}

.abc4>.abc4_left_wrap {
    max-width: 906px;
}

.abc4>.abc4_left_wrap>.abc4_left {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 903px;
    min-height: 100vh;
    background: url(../../images/abc4_deco03.png) top left no-repeat;
    background-size: 100%;
    max-width: 100%;
}

.abc4_left_con {
    margin: 0 auto;
    position: absolute;
    top: 23%;
    left: 16%;
}

.abc4_left_con:after {
    content: '';
    border: 1px #000 solid;
    width: 80%;
    min-height: 721px;
    position: absolute;
    bottom: 2rem;
    left: -3rem;
    z-index: -2;
}
.abc4_left_con:before {
    content: '';
    background: url(../../images/abc4_deco02.png) top left no-repeat;
    background-size: 100%;
    width: 117px;
    min-height: 517px;
    position: absolute;
    top: 18rem;
    left: -11rem;
    z-index: -1;
    max-width: 100%;
}

.abc4_right {
    max-width: 646px;
    text-align: justify;
    position: relative;
}

.abc4_right h3 {
    padding: 2.2rem 0 4.6rem;
    font-size: 26px;
    color: #3c7451;
    

}
.abc4_right h4 {
    padding: .7rem 0 4.6rem;
    font-size: 22px;
    color: #55b679;
    font-weight: 500;
    text-align: left;
    font-family: 'Zen Maru Gothic';

}

.abc4_right p {
    font-size: 16px;
    color: #264a33;
    padding-bottom: 2rem;
    line-height: 1.8;
    text-align: justify;

}

.abc4_right b {
    font-weight: 500;
}

.abc4_info {
    margin: 1rem 0 3.5rem 0;
    border: 1px #e6a79a solid;
    border-radius: 20px;
    padding: 3.5rem;
    text-align: left;
    font-size: 16px;
    color: #264a33;
}
.abc4_info p{
    padding-bottom: 5rem;
    line-height: 30px;
}
.abc4_info p:nth-of-type(3){
	padding-bottom: 0;
}
.abc4_info ul{}
.abc4_info ul li{
	padding: 0 0 1rem 0;
	line-height: 35px;
}
.abc41, .abc42, .abc43{
	margin-bottom: 4.5rem;
}

.abc42 p:nth-of-type(1){
	margin-top: 4rem;
}
.abc43{
	margin-top: 7rem;
	text-align: left;
}
.abc43 h4{
	margin: 4.2rem 0;
	padding: 0;
}
@media screen and (max-width: 1500px) {
	.abc1_right, .abc2_right, .abc3_right {
    margin: 0 2rem;
}
.title h6:before {
    left: -4rem;
}
.title h6:after {
    right: -4rem;
}
}
@media screen and (max-width: 1400px) {
    .abc1 {
        justify-content: flex-start;
    }

    .abc1>.abc1_left_wrap>.abc1_left {
        background-size: 100%;
    }

    .abc1>.abc1_left_wrap {
        max-width: 30%;
    }



    .abc1_left_con {
        max-width: 76%;
        top: 30%;
        left: 13%;
    }

    .abc1_left_con:after {
        width: 100%;
        min-height: 225px;
        bottom: 2rem;
        left: -3rem;
    }

    .abc1_right {
        max-width: 50%;
        margin-left: 7rem;
    }

    .abc1_right:after {
        right: 10rem;
    }

    .abc12_pres .pres_left {
        width: 20%;
    }

    .abc12_pres .pres_right {
        width: 75%;
    }

.abc2 {
        justify-content: flex-start;
    }

    .abc2>.abc2_left_wrap>.abc2_left {
        background-size: 100%;
    }

    .abc2>.abc2_left_wrap {
        max-width: 30%;
    }



    .abc2_left_con {
        max-width: 76%;
        top: 30%;
        left: 13%;
    }

    .abc2_left_con:after {
        width: 100%;
        min-height: 233px;
        bottom: 2rem;
        left: -3rem;
    }

    .abc2_right {
        max-width: 50%;
        margin-left: 7rem;
    }

    .abc2_right:after {
        right: 0;
    }
    .abc2_info {
    width: 72%;
}
.abc3 {
        justify-content: flex-start;
    }

    .abc3>.abc3_left_wrap>.abc3_left {
        background-size: 100%;
    }

    .abc3>.abc3_left_wrap {
        max-width: 30%;
    }



    .abc3_left_con {
    max-width: 63%;
    top: 17%;
    left: 18%;
}

    .abc3_left_con:before {
    background-size: 50%;
    top: 5rem;
    left: -5rem;
}
    .abc3_left_con:after {
    width: 83%;
    min-height: 288px;
    bottom: 4rem;
    left: -3rem;
}


    .abc3_right {
        max-width: 50%;
        margin-left: 7rem;
    }

    .abc3_right:after {
        right: 10rem;
    }
    .abc4 {
        justify-content: flex-start;
    }

    .abc4>.abc4_left_wrap>.abc4_left {
        background-size: 100%;
    }

    .abc4>.abc4_left_wrap {
        max-width: 48%;
    }



    .abc4_left_con {
    max-width: 63%;
    top: 8%;
    left: 13%;
}

    .abc4_left_con:before {
    background-size: 70%;
    top: 12rem;
    left: -8rem;
}
    .abc4_left_con:after {
    width: 83%;
    min-height: 518px;
    bottom: 4rem;
    left: -3rem;
}


    .abc4_right {
        max-width: 40%;
        margin-left: 7rem;
    }
    .abc41, .abc42, .abc43 {
    margin-bottom: 2.5rem;
}

    
}

@media screen and (max-width: 1200px) {
    .abc1>.abc1_left_wrap>.abc1_left {
        background-size: 87%;
    }

    .abc1_left_con {
        max-width: 70%;
        left: 10%;
		    top: 20%;
    }

    .abc1_left_con:after {
        width: 90%;
		min-height: 180px;
		left: -2rem;
    }

    .abc1_right {
        margin-left: 2rem;
    }

    .abc1_info .info_left img {
        width: 6%;
    }

    .abc1_info .info_left h5,
    .abc1_info .info_right h5 {
        padding-left: 0.2rem;
    }

    .abc1_info .info_right {
        padding-top: 1.6rem;
    }

    .abc12_pres .pres_left {
        width: 23%;
    }
    .abc2>.abc2_left_wrap>.abc2_left {
        background-size: 87%;
    }

    .abc2_left_con {
        max-width: 70%;
        left: 10%;
		top: 20%;
    }

    .abc2_left_con:after {
    min-height: 178px;
    width: 90%;
    left: -2rem;
}

    .abc2_right {
        margin-left: 2rem;
    }

       
    .abc2_info {
    width: 85%;
}
.abc24 {
    margin: 3rem 0;
}
.abc2_info2 {
    padding: 2.5rem 2rem;
}
.abc2_info3 {
    padding: 2.5rem 2rem;
}
.abc24 dl dt:nth-of-type(3) {
    padding-top: 1rem;
}
.abc3>.abc3_left_wrap>.abc3_left {
        background-size: 87%;
    }

    .abc3_left_con {
    max-width: 55%;
    left: 13%;
    top: 10%;
}

    .abc3_left_con:before {
    background-size: 33%;
    top: 6rem;
    left: -3rem;
}
    .abc3_left_con:after {
    min-height: 246px;
    bottom: 2rem;
    left: -2rem;
}

    .abc3_right {
        margin-left: 2rem;
    }
    .abc4>.abc4_left_wrap>.abc4_left {
        background-size: 87%;
    }

    .abc4_left_con {
    max-width: 57%;
    left: 10%;
    top: 6%;
}

    .abc4_left_con:before {
    background-size: 42%;
    top: 15rem;
    left: -4rem;
}
    .abc4_left_con:after {
    min-height: 419px;
    bottom: 2rem;
    left: -2rem;
}

    .abc4_right {
        max-width: 42%;
        margin-left: 2rem;
    }


    
}

@media screen and (max-width: 991px) {
    .abc1 {
        display: block;
    }

    .abc1>.abc1_left_wrap {
        max-width: 100%;
    }

    .abc1>.abc1_left_wrap>.abc1_left {
        min-height: 800px;
        background-size: 100%;
    }

    .abc1_left_con {
    max-width: 100%;
    top: 36%;
}

    .abc1_left_con:after {
        min-height: 342px;
        left: -2rem;
    }

    .abc1_right {
        max-width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .abc1_right:after {
        right: 10rem;
        top: 4rem;
    }

    .abc1_right h3 {
        padding: 6.2rem 0 4.6rem;
    }
    .abc2 {
        display: block;
    }

    .abc2>.abc2_left_wrap {
        max-width: 100%;
    }

    .abc2>.abc2_left_wrap>.abc2_left {
        min-height: 800px;
        background-size: 100%;
    }

    .abc2_left_con {
        max-width: 100%;
        top: 35%;
    }

    .abc2_left_con:after {
        min-height: 315px;
        left: -2rem;
    }

    .abc2_right {
        max-width: 90%;
        margin: 0 auto;
        text-align: left;
    }

    .abc2_right:after {
        right: 10rem;
        top: 4rem;
    }

    .abc2_right h3 {
        padding: 6.2rem 0 4.6rem;
    }
    .abc3 {
        display: block;
    }

    .abc3>.abc3_left_wrap {
        max-width: 95%;
    }

    .abc3>.abc3_left_wrap>.abc3_left {
        background-size: 100%;
    }

    .abc3_left_con {
        max-width: 100%;
    top: 20%;
    left: 17%;
}

    .abc3_left_con:before {
    background-size: 55%;
    top: 10rem;
    left: -6rem;
}
    .abc3_left_con:after {
    min-height: 404px;
}

    .abc3_right {
        max-width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    
    .abc3_right:after {
        right: 10rem;
        top: 4rem;
    }

    .abc3_right h3 {
        padding: 6.2rem 0 4.6rem;
        text-align: left;
    }
    .abc4 {
        display: block;
    }

    .abc4>.abc4_left_wrap {
        max-width: 95%;
    }

    .abc4>.abc4_left_wrap>.abc4_left {
        min-height: 640px;
        background-size: 85%;
    }

    .abc4_left_con {
    max-width: 55%;
    top: 11%;
}

    .abc4_left_con:before {
    background-size: 65%;
    top: 13rem;
    left: -7rem;
}
    .abc4_left_con:after {
    min-height: 504px;
}

    .abc4_right {
        max-width: 90%;
        margin: 8rem auto 0;
        text-align: center;
    }

    
  

    .abc4_right h3 {
        padding: 6.2rem 0 4.6rem;
        text-align: left;
    }


}

@media screen and (max-width: 900px) {
    .timeline ul li div {
        width: 295px;
    }

    .timeline ul li:nth-child(even) div {
        left: -335px;
    }
}

@media screen and (max-width: 767px) {
    .abc1>.abc1_left_wrap>.abc1_left {
        min-height: 473px;
        background-size: 100%;
    }

    .abc1_left_con {
        max-width: 80%;
        left: 13%;
        top: 26%;
    }

    .abc1_left_con:after {
        min-height: 246px;
        left: -1.5rem;
        bottom: 1rem;
    }

    .abc1_right:after {
        right: 1rem;
    }

    .abc12 {
        margin-top: 6rem;
    }

    .abc12 h3:after {
        background-size: 60%;
        top: -0.2rem;
        right: 0;
    }

    .abc12_pres .pres_left {
        width: 27%;
    }

    .abc12_pres .pres_right {
        width: 70%;
    }
    .abc2>.abc2_left_wrap>.abc2_left {
        min-height: 473px;
        background-size: 100%;
    }

    .abc2_left_con {
        max-width: 80%;
        left: 13%;
        top: 30%;
    }

    .abc2_left_con:after {
        min-height: 246px;
        left: -1.5rem;
        bottom: 1rem;
    }

    .abc2_right:after {
        right: 1rem;
        background-size: 60%;
    }
    .abc2_info {
    width: 100%;
}
.abc3>.abc3_left_wrap>.abc3_left {
        background-size: 100%;
            min-height: 515px;
    }

    .abc3_left_con {
    max-width: 64%;
    left: 13%;
    top: 17%;
}

    .abc3_left_con:before {
    background-size: 40%;
    top: 11rem;
    left: -4rem;
    min-height: 240px;
}
.abc3_left_con:after {
    min-height: 344px;
}

    .abc3_right:after {
        right: 1rem;
    }
    .abc4>.abc4_left_wrap>.abc4_left {
        min-height: 442px;
        background-size: 100%;
    }

    .abc4_left_con {
    max-width: 64%;
    left: 13%;
    top: 11%;
}

    .abc4_left_con:before {
    background-size: 40%;
    top: 11rem;
    left: -4rem;
    min-height: 240px;
}
.abc4_left_con:after {
    min-height: 344px;
}

   .abc4_right {
    max-width: 90%;
    margin: 6rem auto 0;
    text-align: center;
}
}


@media screen and (max-width: 600px) {
    .timeline ul li {
        margin-left: 8px;
        padding-top: 5rem;
    }

    .timeline ul li div {
        width: calc(100vw - 91px);
    }

    .timeline ul li:nth-child(even) div,
    .timeline ul li:nth-child(odd) div {
        left: 35px;
    }

    .timeline ul li:nth-child(even) div::before {
        left: -15px;
        border-width: 8px 16px 8px 0;
        border-color: transparent #8bad8b transparent transparent;
    }
}

@media screen and (max-width: 450px) {
    .abc1>.abc1_left_wrap>.abc1_left {
        min-height: 436px;
        background-size: 100%;
    }

    .abc1_left_con {
        max-width: 80%;
        left: 10%;
    }

    .abc1_left_con:after {
        min-height: 230px;
    }

    .abc1_info .info_top h5 {
        padding: 0.8rem 0 0;
    }

    .abc1_right:after {
        right: 0rem;
        background-size: 73%;
    }

    .abc1_info {
        padding: 1rem 2.5rem 2rem;
    }

    .abc1_info .info_left,
    .abc1_info .info_right {
        width: 100%;
    }

    .abc12 h3:after {
        background-size: 70%;
        top: -2.2rem;
        left: 0;
    }

    .abc12_pres {
        padding: 1rem;
    }

    .abc12_pres .pres_left {
        width: 40%;
        margin-bottom: 1rem;
    }

    .abc12_pres .pres_right {
        width: 100%;
    }

    .abc12_pres .pres_right h4 {
        padding: 0 1rem;
    }

    .abc13 h3:after {
        background-size: 70%;
        top: -2.2rem;
        left: 0;
    }
    .abc2>.abc2_left_wrap>.abc2_left {
        min-height: 436px;
        background-size: 100%;
    }

    .abc2_left_con {
        max-width: 80%;
        left: 10%;
    }

    .abc2_left_con:after {
        min-height: 230px;
    }

    .abc2_info .info_top h5 {
        padding: 0.8rem 0 0;
    }

    .abc2_right:after {
        right: 0rem;
        background-size: 73%;
    }

    .abc2_info {
        padding: 2rem 1.5rem;
    }

    
    .abc2_right:after {
    background-size: 40%;
}
.abc24 dl dt {
    padding-bottom: 1rem;
}
.abc3>.abc3_left_wrap>.abc3_left {
        min-height: 478px;
    }

    .abc3_left_con {
        max-width: 64%;
    left: 18%;
    top: 24%;
}

    .abc3_left_con:before {
    background-size: 40%;
    top: 8rem;
    min-height: 224px;
}
    .abc3_left_con:after {
        min-height: 300px;
    }

    .abc3_info .info_top h5 {
        padding: 0.8rem 0 0;
    }

    .abc3_right:after {
        right: 0rem;
        background-size: 73%;
    }

    .abc3_info {
        padding: 1rem 2.5rem 2rem;
    }

    .abc4>.abc4_left_wrap>.abc4_left {
        min-height: 436px;
        background-size: 100%;
    }

    .abc4_left_con {
    max-width: 64%;
    left: 13%;
}

    .abc4_left_con:before {
    background-size: 40%;
    top: 8rem;
    min-height: 224px;
}
    .abc4_left_con:after {
        min-height: 320px;
    }

    .abc4_info .info_top h5 {
        padding: 0.8rem 0 0;
    }

   

    .abc4_info {
        padding: 1rem 2.5rem 2rem;
    }
}

@media screen and (max-width: 414px) {
    .abc1>.abc1_left_wrap {
        max-width: 93%;
    }

    .abc1>.abc1_left_wrap>.abc1_left {
        min-height: 410px;
    }

    .abc1_left_con {}

    .abc1_left_con:after {}

    .abc1_right {
        max-width: 88%;
    }

    .abc1_right h3 {
        padding: 5rem 0 2.8rem;
    }

    .abc1_right h4 {
        font-size: 20px;
    }

    .abc1_info {
        padding: 1rem 2rem 2rem;
    }
    .timeline {
    overflow-x: hidden;
}

    .timeline ul li {
        margin-left: 9px;
    }

    .abc1_right h3 {
        font-size: 23px;
    }

    .abc12 h3:after {
        background-size: 70%;
        top: -2.2rem;
        right: -2rem;
    }
    .abc2>.abc2_left_wrap {
        max-width: 93%;
    }

    .abc2>.abc2_left_wrap>.abc2_left {
        min-height: 410px;
    }

    .abc2_left_con {}

    .abc2_left_con:after {}

    .abc2_right {
        max-width: 88%;
    }

    .abc2_right h3 {
        padding: 5rem 0 2.8rem;
    }

    .abc2_right h4 {
        font-size: 20px;
    }

    .abc2_info {
       
    }
    .abc2_info p {
    font-size: 15px;
}
.abc3>.abc3_left_wrap {
        max-width: 93%;
    }

    .abc3>.abc3_left_wrap>.abc3_left {
        min-height: 463px;
    }

    .abc3_left_con {}

    .abc3_left_con:after {}

    .abc3_right {
        max-width: 88%;
    }

    .abc3_right h3 {
        padding: 5rem 0 2.8rem;
    }

    .abc3_right h4 {
        font-size: 20px;
    }

    .abc3_info {
        padding: 1rem 2rem 2rem;
    }
    .abc4>.abc4_left_wrap {
        max-width: 93%;
    }

    .abc4>.abc4_left_wrap>.abc4_left {
        min-height: 410px;
    }

    .abc4_left_con {}

    .abc4_left_con:after {}

    .abc4_right {
        max-width: 88%;
    }

    .abc4_right h3 {
        padding: 5rem 0 2.8rem;
    }

    .abc4_right h4 {
        font-size: 20px;
    }

    .abc4_info {
        padding: 1rem 2rem 2rem;
    }
}

@media screen and (max-width: 390px) {
    .abc1>.abc1_left_wrap>.abc1_left {
        min-height: 400px;
    }

    .abc1_left_con {}

    .abc1_left_con:after {
        min-height: 213px;
    }

    .abc1_right {
        max-width: 90%;
    }

    .abc1_right:after {
        right: 0rem;
        background-size: 43%;
    }
    .abc2>.abc2_left_wrap>.abc2_left {
        min-height: 400px;
    }

    .abc2_left_con {}

    .abc2_left_con:after {
        min-height: 213px;
    }

    .abc2_right {
        max-width: 90%;
    }

    .abc2_right:after {
        right: 0rem;
        background-size: 43%;
    }
    .abc3>.abc3_left_wrap>.abc3_left {
        min-height: 436px;
    }

    .abc3_left_con {}
	
	.abc3_left_con:before {
    top: 6rem;
}
    .abc3_left_con:after {
        min-height: 267px;
    }

    .abc3_right {
        max-width: 90%;
    }

    .abc3_right:after {
        right: 0rem;
        background-size: 43%;
    }
    .abc4>.abc4_left_wrap>.abc4_left {
        min-height: 370px;
    }

    .abc4_left_con {}

    .abc4_left_con:after {
        min-height: 285px;
    }

    .abc4_right {
        max-width: 90%;
    }

    
}

@media screen and (max-width: 350px) {
    .abc1>.abc1_left_wrap>.abc1_left {
        min-height: 328px;
    }

    .abc1_left_con:after {
        min-height: 173px;
    }

    .abc1_right h3 {
        font-size: 19px;
    }
    .abc2>.abc2_left_wrap>.abc2_left {
        min-height: 328px;
    }

    .abc2_left_con:after {
        min-height: 173px;
    }

    .abc2_right h3 {
        font-size: 19px;
    }
        .abc3>.abc3_left_wrap>.abc3_left {
        min-height: 368px;
    }

    .abc3_left_con:before {
    background-size: 31%;
    top: 4rem;
    min-height: 173px;
    left: -3rem;
}
    .abc3_left_con:after {
        min-height: 216px;
    }

    .abc3_right h3 {
        font-size: 19px;
    }
    .abc4>.abc4_left_wrap>.abc4_left {
        min-height: 298px;
    }

    .abc4_left_con:before {
    background-size: 31%;
    top: 6rem;
    min-height: 173px;
    left: -3rem;
}
    .abc4_left_con:after {
        min-height: 235px;
    }

    .abc4_right h3 {
        font-size: 19px;
    }

}
/***abd*******************************************************/
.abd1 {
    max-width: 1619px;
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
    margin-top: 6rem;

}

.abd1>.abd1_left_wrap {
    max-width: 539px;
}

.abd1>.abd1_left_wrap>.abd1_left {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 539px;
    min-height: 100vh;
    background: url(../../images/abd1_deco03.png) top left no-repeat;
    background-size: 100%;
    max-width: 100%;
}

.abd1_left_con {
    margin: 0 auto;
    position: absolute;
    top: 29%;
    left: 13%;
    width: 80%;
}

.abd1_left_con:after {
    content: '';
    border: 1px #000 solid;
    width: 100%;
    min-height: 302px;
    position: absolute;
    bottom: 3rem;
    left: -3rem;
    z-index: -1;
}

.abd1_left_con h2 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding: 3.1rem 2rem 1rem 0;
    text-align: right;
}

.abd1_right {
    max-width: 978px;
    text-align: justify;
    position: relative;
}

.abd1_right:after {
    content: '';
    background: url(../../images/aba_deco01.png) top right no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 74px;
}

.abd1_right h3 {
    padding: 2.2rem 0 4.6rem;
    font-size: 26px;
    color: #3c7451;
    font-weight: 500;
    text-align: left;

}

.abd1_right h4 {
    font-size: 22px;
    color: #55b679;
    font-family: 'Zen Maru Gothic';
    padding: 2rem 0 4rem;
    font-weight: 500;
    text-align: left;
    line-height: 38px;

}



.abd1_right p {
    font-size: 16px;
    color: #264a33;
    padding-bottom: 2rem;
    line-height: 1.8;
    text-align: justify;

}

.abd1_right b {
    font-weight: 500;
}
.abd12{
	margin-bottom: 4rem;
}
.abd12 h4 {
    padding: 2rem 0 3rem;
}


.abd13_info {
    margin: 0 0 3.5rem;
    padding: 0 0 2rem;
    text-align: left;
}


.abd13_info .info_left,
.abd13_info .info_right {
display: inline-block;
   
   vertical-align: top;
   font-family: 'Noto Sans TC';
}
.abd13_info .info_left{
	width: 40%;
}
.abd13_info .info_right{
	width: 51%;
}
.abd13_info .info_left h5,
.abd13_info .info_right h5 {
	font-size: 18px;
	color: #55b679;
	    margin-bottom: 1rem;
	    font-weight: 300;
   
}

.abd13_info .info_left p,
.abd13_info .info_right p{
	    padding-bottom: 0.5rem;
}
.abd14{
	font-size: 16px;
	color: #264a33;	
	font-family: 'Noto Sans TC';
	    text-align: left;
}
.abd14 dl dt{
	font-weight: 300;
	padding-bottom: 2rem;
}
.abd14 dl dd{
	padding-bottom: 1rem;
}
.abd15{
	margin-top: 3rem;
}
.abd15_info {
    margin: 1rem 0 3.5rem 0;
    border: 1px #e6a79a solid;
    border-radius: 20px;
    padding: 2.5rem 1.5rem 2.5rem 0;
    text-align: left;
}
.abd15_info .info_left,
.abd15_info .info_right {
display: inline-block;
   
   vertical-align: middle;
   font-family: 'Noto Sans TC';
}
.abd15_info .info_left{
	width: 13%;
	text-align: center;
}
.abd15_info .info_left h5{	
	font-size: 20px;
	color: #55b679;
	font-family:'Jua';
	padding-top: .5rem;
	font-weight: 500;
}
.abd15_info .info_right{
	width: 85%;
	border-left: 1px #e6a79a solid;
    padding: 0 0 2rem 2.5rem;
}
.abd15_info .info_right .info_title{

}
.abd15_info .info_right .info_title:nth-of-type(2) {
    padding-top: 3rem;
}
.abd15_info .info_right .info_title img{
	display: inline-block;
}
.abd15_info .info_right .info_title h5{
	display: inline-block;
	width: 80%;
	font-size: 18px;
	color: #55b679;
	font-weight: 300;
	padding-left: 1rem;
    line-height: 1.5;
}
.abd15_info .info_right ul li{
	font-size: 16px;
	color: #264a33;
	padding: 0.5rem 0;
	line-height: 28px;
	text-align: justify;
}
.abd16{
	font-size: 16px;
	color: #264a33;	
	margin-top: 5rem;
	font-family: 'Noto Sans TC';
	    text-align: left;
}
.abd16 dl dt{
	font-weight: 300;
	padding-bottom: 1.8rem;
	line-height: 30px;
}
.abd16 dl dd{
	padding-bottom: 1rem;
	font-weight: 500;
}
.abd17{
	margin-top: 2rem;
	    text-align: left;

}
.abd17 h4{
    padding: 2rem 0 2rem;
}
.abd17 p{}
.abd13_info {
    margin: 0 0 3.5rem;
    padding: 0 0 2rem;
    text-align: left;
}


.abd17_info .info_left,
.abd17_info .info_right {
display: inline-block;
   
   vertical-align: top;
   font-family: 'Noto Sans TC';
}
.abd17_info .info_left{
	width: 50%;
}
.abd17_info .info_right{
	width: 40%;
}
.abd17_info .info_left h5,
.abd17_info .info_right h5 {
	font-size: 18px;
	color: #55b679;
	    margin-bottom: 1rem;
	    font-weight: 300;
   
}

.abd17_info .info_left p,
.abd17_info .info_right p{
	    padding-bottom: 0.5rem;
}
.abd17 dl{
font-size: 16px;
	color: #264a33;	
	margin-top: 2rem;
	font-family: 'Noto Sans TC';
}
.abd17 dl dt{
	font-weight: 300;
	padding-bottom: 1.8rem;
	line-height: 30px;
}
.abd17 dl dd{
	padding-bottom: 2rem;
	font-weight: 300;
}
.abd18_info {
    margin: 1rem 0 3.5rem 0;
    border: 1px #e6a79a solid;
    border-radius: 20px;
    padding: 2.5rem 1.5rem 2.5rem 0;
    text-align: left;
}
.abd18_info .info_left,
.abd18_info .info_right {
display: inline-block;
   
   vertical-align: middle;
   font-family: 'Noto Sans TC';
}
.abd18_info .info_left{
	width: 13%;
	text-align: center;
}
.abd18_info .info_left h5{	
	font-size: 20px;
	color: #55b679;
	font-family:'Jua';
	padding-top: .5rem;
	font-weight: 500;
}
.abd18_info .info_right{
	width: 85%;
	border-left: 1px #e6a79a solid;
    padding: 0 0 2rem 2.5rem;
}
.abd18_info .info_right .info_title{

}
.abd18_info .info_right .info_title:nth-of-type(2) {
    padding-top: 3rem;
}
.abd18_info .info_right .info_title img{
	display: inline-block;
	vertical-align: middle;
}
.abd18_info .info_right .info_title h5{
	display: inline-block;
	vertical-align: middle;
	width: 90%;
	font-size: 18px;
	color: #55b679;
	font-weight: 300;
	padding-left: 1rem;
    line-height: 1.5;
}
.abd18_info .info_right ul li{
	font-size: 16px;
	color: #264a33;
	padding: 0.5rem 0;
	line-height: 28px;
	text-align: justify;
}
.abd18 hr{
    border-top: 1px solid #e6a79a;
}
@media screen and (max-width: 1500px) {
	.abd1_right {
    margin: 0 2rem;
}
}
@media screen and (max-width: 1400px) {

.abd1 {
        justify-content: flex-start;
    }

    .abd1>.abd1_left_wrap>.abd1_left {
        background-size: 100%;
    }

    .abd1>.abd1_left_wrap {
        max-width: 30%;
    }



    .abd1_left_con {
        max-width: 76%;
        top: 30%;
        left: 13%;
    }

    .abd1_left_con:after {
        width: 100%;
        min-height: 227px;
        bottom: 2rem;
        left: -3rem;
    }

    .abd1_right {
        max-width: 50%;
        margin-left: 7rem;
    }

    .abd1_right:after {
        right: 10rem;
    }

    .abd12_pres .pres_left {
        width: 20%;
    }

    .abd12_pres .pres_right {
        width: 75%;
    }
    

}

@media screen and (max-width: 1200px) {
.abd1>.abd1_left_wrap>.abd1_left {
        background-size: 87%;
    }

    .abd1_left_con {
    max-width: 70%;
    left: 11%;
    top: 22%;
}

    .abd1_left_con:after {
       min-height: 175px;
    left: -2rem;
    }

    .abd1_right {
        margin-left: 2rem;
    }

    .abd1_info .info_left img {
        width: 6%;
    }

    .abd1_info .info_left h5,
    .abd1_info .info_right h5 {
        padding-left: 0.2rem;
    }

    .abd1_info .info_right {
        padding-top: 1.6rem;
    }

    .abd12_pres .pres_left {
        width: 23%;
    }
}

@media screen and (max-width: 991px) {
.abd1 {
        display: block;
    }

    .abd1>.abd1_left_wrap {
        max-width: 100%;
    }

    .abd1>.abd1_left_wrap>.abd1_left {
        min-height: 800px;
        background-size: 100%;
    }

    .abd1_left_con {
        max-width: 100%;
        top: 43%;
    }

    .abd1_left_con:after {
        min-height: 312px;
        left: -2rem;
    }

    .abd1_right {
        max-width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .abd1_right:after {
        right: 10rem;
        top: 4rem;
    }

    .abd1_right h3 {
        padding: 6.2rem 0 4.6rem;
    }


}

@media screen and (max-width: 767px) {
.abd1>.abd1_left_wrap>.abd1_left {
        min-height: 473px;
        background-size: 100%;
    }

    .abd1_left_con {
        max-width: 80%;
        left: 13%;
        top: 30%;
    }

    .abd1_left_con:after {
        min-height: 246px;
        left: -1.5rem;
        bottom: 1rem;
    }

    .abd1_right:after {
        right: 1rem;
    }

}

@media screen and (max-width: 450px) {

.abd1>.abd1_left_wrap>.abd1_left {
        min-height: 526px;
        background-size: 100%;
    }

    .abd1_left_con {
        max-width: 80%;
    left: 10%;
    top: 45%;
    }

    .abd1_left_con:after {
        min-height: 227px;
    }

    .abd1_info .info_top h5 {
        padding: 0.8rem 0 0;
    }

    .abd1_right:after {
        right: 0rem;
        background-size: 73%;
    }

    .abd1_info {
        padding: 1rem 2.5rem 2rem;
    }

    .abd1_info .info_left,
    .abd1_info .info_right {
        width: 100%;
    }
    .abd13_info .info_left {
    width: 55%;
}
.abd13_info .info_right {
    margin-top: 2rem;
    width: 100%;
}
}

@media screen and (max-width: 414px) {

.abd1>.abd1_left_wrap {
        max-width: 93%;
    }

    .abd1>.abd1_left_wrap>.abd1_left {
        min-height: 410px;
    }

    .abd1_left_con {
    top: 42%;
}

    .abd1_left_con:after {}

    .abd1_right {
        max-width: 88%;
    }

    .abd1_right h3 {
        padding: 5rem 0 2.8rem;
    }

    .abd1_right h4 {
        font-size: 20px;
    }

    .abd1_info {
        padding: 1rem 2rem 2rem;
    }
    .abd15_info {
    padding: 1.5rem;
}
    .abd15_info .info_left {
    width: 50%;
    text-align: left;
    padding: 0 0 1rem 1rem;
}
    .abd15_info .info_right {
    width: 100%;
    border-left: none;
    border-top: 1px #e6a79a solid;
    padding: 1rem 0 0 1rem;
}
.abd15_info .info_right .info_title img {
    width: 7%;
    vertical-align: middle;
}
.abd15_info .info_right .info_title h5 {
    width: 90%;
    vertical-align: middle;
}
    .abd17_info .info_left {
    width: 100%;
}
.abd17_info .info_right {
    width: 100%;
}

.abd18_info {
    padding: 1.5rem;
}
    .abd18_info .info_left {
    width: 50%;
    text-align: left;
    padding: 0 0 1rem 1rem;
}
    .abd18_info .info_right {
    width: 100%;
    border-left: none;
    border-top: 1px #e6a79a solid;
    padding: 1rem 0 0 1rem;
}
.abd18_info .info_right .info_title img {
    width: 7%;
    vertical-align: middle;
}
.abd18_info .info_right .info_title h5 {
    width: 90%;
    vertical-align: middle;
}
}
@media screen and (max-width: 390px) {

.abd1>.abd1_left_wrap>.abd1_left {
        min-height: 400px;
    }

    .abd1_left_con {}

    .abd1_left_con:after {
        min-height: 213px;
    }

    .abd1_right {
        max-width: 90%;
    }

    .abd1_right:after {
        right: 0rem;
        background-size: 43%;
    }
    
}

@media screen and (max-width: 350px) {
.abd1>.abd1_left_wrap>.abd1_left {
        min-height: 328px;
    }

    .abd1_left_con:after {
        min-height: 173px;
    }

    .abd1_right h3 {
        font-size: 19px;
    }
    .abd17 dl dd {
    line-height: 35px;
}

}
/***friendly*******************************************************/
.fd{
	max-width: 1318px;
	margin: 0 auto;
	padding-top: 5rem;
}
.fd ul{
	text-align: left;
	margin-bottom: 2rem;
    padding-bottom: 4rem;
}
.fd ul li{
	display: inline-block;
	width: 20%;
	padding: 1rem;
}
.fd img{}
.fd p{
	font-size: 16px;
	color: #264a33;
	text-align: center;
	padding-top: 1rem;
}
.fd a:hover{
    opacity: 0.5;
}
@media screen and (max-width: 1400px){
	.fd {
    padding-top: 18rem;
}
}
@media screen and (max-width: 1200px){}
@media screen and (max-width: 991px){
	.fd {
    padding-top: 10rem;
}
}
@media screen and (max-width: 767px){
	.fd {
    padding-top: 4rem;
}
	.fd ul li {
    width: 48%;
}
}
@media screen and (max-width: 450px){}
@media screen and (max-width: 414px){}