@charset "utf-8";
@import url(./tool.css);
/*  global  */
body {
    font-family: Arial, 'Microsoft JhengHei';
}
.wrap {
    width: 100%;
}
.container {
    width: 1200px;
    margin: 0 auto;
}
.container.container-maxout {
    width: 1500px;
}
.container.container-zoomout {
    width: 1000px;
}
.container.container-xmiddle {
    width: 850px;
}
.container.container-middle {
    width: 700px;
}
.rwd-img {
    width: 100%;
}
.imgbox {
    overflow: hidden;
}
a {
    color: #000;
    text-decoration: none;
}
/*a:hover { color:#000; text-decoration:none;}*/
a:focus,
a:hover {
    text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-weight: normal;
}
ul,
section,
div,
h3 {
    position: relative;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul:after,
section:after,
div:after,
li:after {
    content: '';
    display: block;
    clear: both;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body,
div,
p {
    margin: 0;
    padding: 0;
}

/*	==========================================	*/

/*  icon  */
.icon-tel {
    margin-right: 3px;
    background: url(/assets/img/index/icon_03.png) no-repeat center;
    width: 27px;
    height: 27px;
    display: inline-block;
    vertical-align: middle;
}
.icon-fax {
    margin-right: 3px;
    background: url(/assets/img/index/icon_04.png) no-repeat center;
    width: 27px;
    height: 27px;
    display: inline-block;
    vertical-align: middle;
}
.icon-email {
    margin-right: 3px;
    background: url(/assets/img/index/icon_05.png) no-repeat center;
    width: 27px;
    height: 27px;
    display: inline-block;
    vertical-align: middle;
}
.icon-loc {
    margin-right: 3px;
    background: url(/assets/img/index/icon_06.png) no-repeat center;
    width: 27px;
    height: 27px;
    display: inline-block;
    vertical-align: middle;
}

/*  onscrolling  */
/*.onscrolling .headerbg { background-color:rgba(255,255,255,1); }*/

/*  header  */
.headerbox {
    padding: 0 15px;
    padding-top: 10px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    border-bottom: 1px solid #178c62;
    background-color: rgba(255, 255, 255, 0.8);
}

.logobox {
    float: left;
}
.langbox {
    position: absolute;
    right: 0;
    top: 0;
}
.lang li {
    display: inline-block;
    margin-left: 10px;
    position: relative;
}
.lang li:before {
    content: '';
    border-left: 1px solid #31322d;
    height: 100%;
    position: absolute;
    left: -5px;
    top: 0;
}
.lang li:first-child:before {
    content: '';
    border-left: 0;
}

.menubox {
    float: right;
    margin-top: 35px;
}
.menu li {
    display: inline-block;
    text-align: center;
    margin-right: 40px;
}
.menu li:last-child {
    margin-right: 0;
}
.menu li a {
    color: #333333;
    font-weight: bold;
    padding: 15px;
    display: block;
}
.menu li a.active,
.menu li a:hover {
    background-color: #71a99b;
    border-radius: 8px 8px 0 0;
    color: #fff;
}

/*  rwd menu  */
.rwdmenubtnbox {
    display: none;
    float: right;
    padding: 21px 0;
    z-index: 99;
}
.rwdmenubtn {
    color: #71a99c;
    font-size: 25pt;
}
.rwdclosebtn {
    display: none;
    color: #71a99c;
    font-size: 25pt;
}
.in .rwdclosebtn {
    display: block;
}
.in .rwdmenubtn {
    display: none;
}

.rwdmenubox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 270px;
    height: 100%;
    background: url(/assets/img/index/bg.png) repeat center;
    z-index: 99999;
    opacity: 0;
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 0.52s ease;
    -moz-transition: all 0.52s ease;
    transition: all 0.52s ease;
}
.rwdmenubox.in {
    opacity: 1;
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: all 0.52s ease;
    -moz-transition: all 0.52s ease;
    transition: all 0.52s ease;
}

.rwdmenumask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9;
    -webkit-transition: all 0.52s ease;
    -moz-transition: all 0.52s ease;
    transition: all 0.52s ease;
}
.rwdmenumask.in {
    display: block;
}

.rwdmenu {
    padding: 15px;
    text-align: center;
}
.rwdmenu li {
    border-bottom: 1px solid #fff;
    padding: 10px 0;
    margin: 0 30px;
}
.rwdmenu li a {
    font-size: 12pt;
    color: #333;
    display: block;
}

.rwdlinkbox {
    padding: 15px;
    text-align: center;
}
.rwdlink li {
    display: inline-block;
    margin: 0 8px;
}

.rwdlink li:nth-child(4) {
    display: none;
}
.rwdlink li:nth-child(5) {
    display: none;
}

.rwdlang {
    padding: 15px;
    text-align: center;
}
.rwdlang li {
    display: inline-block;
    position: relative;
    margin: 0 8px;
}
.rwdlang li a {
    color: #fff;
}
.rwdlang li:before {
    content: '';
    border-left: 1px solid #fff;
    height: 100%;
    position: absolute;
    left: -8px;
    top: 0;
}
.rwdlang li:first-child:before {
    content: '';
    border-left: 0;
}

/*	footer	*/
.footerbox {
    padding: 20px 0;
}
.footerbg {
    background-color: #e6e6e6;
}
.footinfobox {
    float: left;
}
.footinfo li {
    margin-bottom: 10px;
}
.footinfo li:last-child {
    margin-bottom: 0;
}
.footinfo li a {
    font-size: 12pt;
    color: #4d4d4d;
}

.footnavbox {
    float: right;
}
.footnav li {
    position: relative;
    float: left;
    margin-left: 63px;
    margin-bottom: 15px;
}
.footnav li:nth-child(3) {
    margin-right: 29px;
}
.footnav li:nth-child(4) {
    clear: both;
}
.footnav li:nth-child(n + 4) {
    margin-bottom: 0;
}
.footnav li a {
    font-size: 12pt;
    color: #4d4d4d;
}
.footnav li a:before {
    content: '';
    background: url(/assets/img/index/icon_07.png) no-repeat center;
    width: 25px;
    height: 25px;
    position: absolute;
    top: -4px;
    right: -30px;
    border-radius: 5px;
}

.copyright {
    float: right;
    font-size: 10pt;
    color: #4d4d4d;
    margin-top: 66px;
}

.gotop {
    position: fixed;
    right: 100px;
    bottom: 25%;
    opacity: 0;
    z-index: 9;
    width: 70px;
    -webkit-transition: all 0.52s ease;
    -moz-transition: all 0.52s ease;
    transition: all 0.52s ease;
}
.gotop.active {
    opacity: 1;
}

/*  index  */
.indexbg {
    margin-top: 115px;
}
.indexbg {
    background: url(/assets/img/index/bg.png) repeat center;
}
.index-scroll-x {
    overflow-x: hidden;
}
.bottombg:before {
    content: '';
    border-top: 1px solid #b3b3b3;
    position: absolute;
    left: 0;
    bottom: -49px;
    background: url(/assets/img/index/shadow.png) no-repeat center;
    width: 100%;
    height: 48px;
}
.index-bannerbox {
    margin-bottom: 30px;
}
.banner-textbox {
    position: absolute;
    top: 46%;
    left: 10%;
    opacity: 0;
    -webkit-transition: all 0.52s ease;
    -moz-transition: all 0.52s ease;
    transition: all 0.52s ease;
}

.index-left {
    padding: 60px 0;
}
.index-left:before {
    content: '';
    width: 73%; /*border-top:1px dashed #4d4d4d;*/
    position: absolute;
    top: 22px;
    right: 0;
}
.index-left .index-title {
    width: calc((100% - 989px) / 2);
    height: 35px;
    padding: 5px 0;
    text-align: right;
    background: #71a99c;
    position: absolute;
    top: -16px;
    left: -300px;
    -webkit-transition: all 0.52s ease;
    -moz-transition: all 0.52s ease;
    transition: all 0.52s ease;
}
.index-left .index-title.active {
    left: 0;
}
.index-left .index-title:before {
    content: '';
    position: absolute;
    top: 0;
    right: -30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17.5px 0 17.5px 30.3px;
    border-color: transparent transparent transparent #71a99c;
}
.index-about {
    margin: 0 -10px;
}
.index-about li {
    padding: 15px;
    margin: 0 5px;
    width: calc(100% / 3 - 24px);
    display: inline-block;
    background-color: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 20px;
}
.index-about li a {
    display: block;
}
.index-about li img {
    -webkit-transition: all 0.52s ease;
    -moz-transition: all 0.52s ease;
    transition: all 0.52s ease;
}
.index-about li:hover .morebtn {
    background-color: #4c756d;
}
.index-about .morebtn {
    -webkit-transition: all 0.52s ease;
    -moz-transition: all 0.52s ease;
    transition: all 0.52s ease;
}

.index-about.fee li {
    width: calc(100% / 4 - 24px);
}

.index-right {
    padding: 60px 0;
}
.index-right:before {
    content: '';
    width: 73%; /*border-top:1px dashed #4d4d4d;*/
    position: absolute;
    top: 0;
    left: 0;
}
.index-right .index-title {
    width: calc((100% - 989px) / 2);
    height: 35px;
    padding: 5px 0;
    text-align: left;
    background: #71a99c;
    position: absolute;
    top: -19px;
    right: -300px;
    -webkit-transition: all 0.52s ease;
    -moz-transition: all 0.52s ease;
    transition: all 0.52s ease;
}
.index-right .index-title.active {
    right: 0;
}
.index-right .index-title:before {
    content: '';
    position: absolute;
    top: 0;
    left: -30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17.5px 30.3px 17.5px 0;
    border-color: transparent #71a99c transparent transparent;
}

.index-news .date {
    display: inline-block;
    vertical-align: middle;
    background: url(/assets/img/index/icon_01.png) no-repeat left;
    width: 116px;
    height: 25px;
    padding-left: 30px;
    line-height: 25px;
    background-size: contain;
}
.index-news .sub {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 116px - 60px - 9px);
    padding: 0 15px;
    font-weight: bold;
}
.index-news .more {
    display: inline-block;
    vertical-align: middle;
    background: #4c756d url(/assets/img/index/icon_07_dk.png) no-repeat center;
    width: 60px;
    height: 28px;
    border-radius: 15px;
}
.index-news li {
    border-bottom: 1px dashed #5e5e5e;
}
.index-news li:last-child {
    border-bottom: 0;
}
.index-news li a {
    display: block;
    padding: 15px 0;
}

.index-activity li {
    margin: 10px;
}
.index-activity li a {
    display: block;
    position: relative;
}
.index-activity li a:hover:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(91, 113, 100, 0.8);
}
.index-activity li a:hover:after {
    content: '';
    position: absolute;
    right: 15px;
    bottom: 15px;
    background: url(/assets/img/index/icon_02.png) no-repeat center;
    height: 42px;
    width: 42px;
}
.index-activity li a .sub {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    height: 40px;
    font-weight: bold;
    color: #fff;
    padding: 0 15px;
    margin-top: 30px;
}
.index-activity li a:hover .sub {
    opacity: 1;
}
.owl-activitybox {
    position: absolute;
    width: 100%;
    top: calc((100% - 40px) / 2);
}
.owl-activitybox .owlprev {
    left: -12px;
}
.owl-activitybox .owlnext {
    right: -12px;
}

/*  about  */
.contentbg {
    background: url(/assets/img/index/banner_02.png) no-repeat center;
    height: 211px;
    margin-bottom: 60px;
}
.contentbg.bottombg:before {
    border-top: 0;
    bottom: -48px;
}
.index-left.content-left {
    padding: 0;
}
.cookie {
    float: right;
    margin-top: -8px;
}
.cookie li {
    line-height: 22px;
}
.cookie a,
.cookie li:hover a {
    color: #73a898;
}
.contentbox {
    padding: 15px;
    padding-bottom: 50px;
}
.contentbox .index-about li.active,
.contentbox .index-about li:hover {
    background-color: #f2f2f2;
}
.border-b-dashed {
    border-bottom: 1px dashed #c9c9c9;
}
.contentbox .index-about {
    margin-bottom: 50px;
}
.about-left {
    display: inline-block;
    vertical-align: top;
    width: 23%;
    height: 180px;
}
.about-right {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 23% - 6px);
    height: 180px;
}

/* news */
.pager li a {
    color: #6fa595;
}
.pager li a.active,
.pager li a:hover {
    border-radius: 50%;
    background-color: #6fa595;
    color: #fff;
    padding: 1px 7px;
}
.historybtn {
    background-color: #48786c;
    color: #fff;
    padding: 5px 10px;
    border-radius: 25px;
}

.newsothertable td {
    padding: 0.5rem 1.2rem;
}
.newsotherlistitem .img,
.newsotherlistitem .cont,
.newsotherlistitem .btn {
    display: inline-block;
    vertical-align: middle;
}
.newsotherlistitem .cont {
    width: calc(100% - 192px - 121px);
    vertical-align: top;
}

/* activity */
.activitylist li {
    margin: 8px;
    width: calc(100% / 3 - 16px);
    float: left;
    position: relative;
}
.activitylist:not(.noshow) li a .imgbox:hover:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(91, 113, 100, 0.8);
}
.activitylist:not(.noshow) li a .imgbox:hover:after {
    content: '';
    position: absolute;
    right: 15px;
    bottom: 15px;
    background: url(/assets/img/index/icon_02.png) no-repeat center;
    height: 42px;
    width: 42px;
}
.activitylist .sub {
    text-align: center;
    overflow: hidden;
    height: 40px;
    margin-top: 10px;
}
.activitylist li .rwd-img {
    height: 300px; /* 固定高度 */
    object-fit: cover; /* 確保圖片不被拉伸 */
}

/*  contact  */
.contactbtn {
    display: block;
    background-color: #71a99c;
    width: 100%;
    color: #fff;
    padding: 10px 0;
    border-radius: 8px;
    margin-top: 15px;
}
.contactform {
    float: left;
    background-color: #f2f2f2;
    border: 1px solid #dadada;
    border-radius: 5px;
    padding-bottom: 0;
    width: 49%;
    padding-top: 15px;
}
.mapbox {
    float: right;
    width: 49%;
    height: 600px;
}

.control-radio {
    position: relative;
    margin: 0;
    visibility: hidden;
}
.control-radio:before {
    content: '';
    visibility: visible;
    position: absolute;
    border: 1px solid #baaeae;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #f3f3f3;
}
.control-radio:checked:after {
    content: '';
    visibility: visible;
    position: absolute;
    top: 3px;
    left: 3px;
    background-color: #777;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.control-radio.green:checked:after {
    background-color: #73a79b;
}

/* recruit */
.recruitlist li img {
    display: inline-block;
    vertical-align: middle;
    width: 42px;
}
.recruitlist li .sub {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 47px);
}
.recruitlist li {
    border-bottom: 1px solid #cbcbcb;
    padding: 15px 0;
}
.recruitlist li:last-child {
    border-bottom: 0;
}

/* fee */
.feeform {
    float: left;
    background-color: #f2f2f2;
    border: 1px solid #dadada;
    border-radius: 5px;
    padding-bottom: 0;
    width: 100%;
    padding-top: 15px;
}
.aborderbot {
    text-decoration: underline;
}
.feeform .label-control {
    text-align: right;
    width: 150px;
}
.feeform .formblock {
    width: 86%;
}

/* hack  */
.owl-pagination {
    position: absolute;
    bottom: 15px;
    width: 100%;
}
.owl-theme .owl-controls .owl-page span {
    background: #fff;
    opacity: 1;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
    background: #108a5b;
    padding: 3px;
    border: 2px solid #108a5b;
}
.bx-controls-direction {
    display: none;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    border: 1px solid #005ca1;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    bottom: 15px;
}

.owlbtnbox {
    position: absolute;
    left: 0;
    top: 45%;
    width: 100%;
}
.owlprev {
    position: absolute;
    left: 5px;
}
.owlnext {
    position: absolute;
    right: 5px;
}
.articlebox {
    word-break: break-word;
    line-height: 1.6;
}
.articlebox img {
    max-width: 100%;
}

.fancybox-navigation {
    top: 50%;
}

@media screen and (min-width: 1921px) {
}

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

@media screen and (max-width: 1024px) {
    /* wrap*/
    .container {
        width: 100%;
    }

    /* footer */
    .gotop {
        width: 36px;
        right: 10px;
    }
    .footerbox {
        padding: 15px;
    }

    /* header */
    .menubox {
        display: none;
    }
    .rwdmenubox,
    .rwdmenubtnbox {
        display: block;
    }
    .headerbox {
        padding: 15px;
    }

    .logobox img {
        width: 100%;
    }
    .logobox {
        width: 140px;
    }
    .rwdmenubtnbox {
        padding: 17px 0;
    }

    /* index */
    .indexbg {
        margin-top: 98.09px;
    }
    .index-left .index-title {
        width: 200px;
    }
    .index-right .index-title {
        width: 200px;
    }
    .index-newsbox {
        padding: 15px;
    }
    .owl-activitybox .owlprev {
        left: 11px;
    }
    .owl-activitybox .owlnext {
        right: 11px;
    }
    .cookiebox {
        padding: 15px;
        margin: 0;
        padding-top: 20px;
    }
    .cookie {
        float: none;
        margin-top: 0;
        text-align: right;
    }
    .cookie li {
        float: none;
        display: inline-block;
    }
    .feeform .label-control {
        text-align: left;
        width: 100%;
    }
    .feeform .formblock {
        width: 100%;
    }
    .contactform {
        width: 100%;
    }
    .contactform .formblock {
        width: 100%;
    }
    .mapbox {
        width: 100%;
        margin-top: 15px;
    }
    .about-left {
        display: inline-block;
        vertical-align: top;
        width: 30%;
    }
    .about-right {
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 30% - 6px);
    }
}

@media screen and (max-width: 768px) {
    /* footer */
    .footinfobox {
        float: none;
    }
    .footnavbox {
        float: none;
        margin-top: 20px;
    }
    .footnav {
        display: none;
    }
    .copyright {
        float: none;
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }
    .cols-per-50 {
        width: 100%;
    }
    .about-left {
        display: inline-block;
        vertical-align: top;
        width: 20%;
    }
    .about-right {
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 20% - 6px);
    }
}

@media screen and (max-width: 450px) {
    /* index */
    .index-aboutbox {
    }
    .index-about li {
        width: 42%;
        margin: 15px;
    }

    .contentbox .index-about li img {
        display: none;
    }
    .contentbox .index-about li {
        padding: 0;
        width: calc(100% / 3 - 24px);
        margin: 0;
    }
    .contentbox .index-about li .font-normal {
        font-size: 10pt;
    }

    .contentbox .index-about.fee li {
        width: calc(100% / 4 - 24px);
    }

    .formblock {
        word-break: break-word;
    }
    .activitylist li {
        width: 100%;
        float: none;
        margin: 0;
        margin-bottom: 15px;
    }
    .about-left {
        display: inline-block;
        vertical-align: top;
        width: 40%;
    }
    .about-right {
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 40% - 6px);
    }

    .newsotherlistitem .img,
    .newsotherlistitem .cont,
    .newsotherlistitem .btn {
        display: block;
        width: 100%;
    }
    .newsotherlistitem .padding-full-15 {
        padding: 0;
        padding: 15px 0;
    }
    .newsotherlistitem .img div {
        margin: 0 auto;
    }
    .newsotherlistitem .btn {
        text-align: center;
    }
}

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

@media screen and (max-width: 375px) {
    .index-about li {
        width: 41%;
    }
}

@media screen and (max-width: 320px) {
    .index-about li {
        width: 40%;
    }
}