@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');


@charset "utf-8";
:root {
   --init-about-editor-slick-ratio:1296 /546;
}
body {
    background: #fff;
}
body, .editor,
.contentbuilder-box body, 
.contentbuilder-box table.body,
.contentbuilder-box p,
.contentbuilder-box td, 
.contentbuilder-box th {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 19px;
    letter-spacing: 1px;
}
.contentbuilder-box h1, .contentbuilder-box h2, .contentbuilder-box h3,
.contentbuilder-box h4, .contentbuilder-box h5, .contentbuilder-box h6,
.contentbuilder-box body, .contentbuilder-box table.body, .contentbuilder-box h1,
.contentbuilder-box h2, .contentbuilder-box h3, .contentbuilder-box h4,
.contentbuilder-box h5, .contentbuilder-box h6, .contentbuilder-box p,
.contentbuilder-box td, .contentbuilder-box th, .contentbuilder-box a {
    font-family: "Noto Sans TC", sans-serif;
}

/*side*/
.side .wid ul li .collapsed-sub-btn,
.side .filter-title .collapsed-btn,
.side .filter-sidebar.multiple-collapse .collapsed-btn {
    display: block;
    position: relative;
    padding: 8px 0 8px 20px;
    z-index: 1;
    background: none;
    border: none;
}

.side .wid ul li {
    line-height: 1.5;
    font-size: 16px;
}

    .side .wid ul li .collapsed-sub-btn:hover:before,
    .side .filter-title .collapsed-btn:hover:before,
    .side .filter-sidebar.multiple-collapse .collapsed-btn:hover:before {
        width: 100%;
    }

.side .filter-title .collapsed-btn, .side .filter-sidebar.multiple-collapse .collapsed-btn {
    background: #f6f6f6;
    font-size: 18px;
}

    .side .wid ul li .collapsed-sub-btn:hover,
    .side .wid ul li .collapsed-sub-btn:hover,
    .side .filter-title .collapsed-btn:hover {
        /*   color:#fff;*/
    }

.side .filter-content > ul {
    padding: 0;
    /* padding-left: 32px; */
    /* background: url(../images/all/list_icon2.png)no-repeat 15px 6px; */
    margin-left: 15px;
}
.side .wid ul li .collapsed-sub-btn {
    padding-left: 13px;
    background: url(../images/list-icon.png) no-repeat left 1px top 18px;
    background-size: 5px;
}
.side .filter-content,
.side .filter-sidebar.multiple-collapse .collapse-content {
    border: 0;
}


.side .h3 {
    padding: 6px 10px;
    font-size: 16px;
    text-align: center;
    line-height: 1.5;
    background: var(--main-color);
    font-weight: normal;
}

    .side .h3 .txt-tw {
        border: none;
        padding: 0;
        font-size:inherit;
    }

.main .side .h3 .txt-en {
    display: block;
    border-bottom: 1px solid rgb(255 255 255 / 36%);
    display:none;
}
.main .side .h3 {
    margin-bottom: 0;
    font-size: 20px;
    padding: 10px;
}
.main .side .h3 .txt-en, .side .h3,body.about .txt .videoArea p,body.about .txt .videoArea a,body.about .txt .sec07,body.about .txt .sec07 h3{
    color: #fff;
}
.side .filter-item + .filter-item {
    margin-top: 0;
    border-top: 1px solid #fff;
}
/*settings*/
/*字主色*/
.btn.btn-bord, .sec01 .h4, .editor b, .editor strong {
    color: var(--main-color);
}

/*字副色*/
a:hover,
.footer .footer_content .sitemap > ul > li > a:hover, body.home .coreValue.sec01 p strong {
    color: var(--second-color);
}

/*背景主色*/

/*
.footer {
    background: var(--main-color);
}*/

/*背景副色*/
.anchor-title.scroll-to-fixed-fixed,
.list-creative .list-terms:before,
.bsnav-mobile.full .navbar-nav .nav-item:hover > a,
.btn.cover:before {
    background: var(--second-color);
}
/*背景第五色*/
.toast,
.list-creative > li:nth-child(2n) .list-terms:before {
    background: var(--fifth-color);
}
/*描邊 currentColor*/

.btn.btn-bord, .page-link {
    border-color: currentColor;
}

.header .navbar-nav .nav-item:hover > .nav-link .caret, .header .navbar-nav .nav-link .caret {
    border-top-color: currentColor;
}


.header .navbar .nav-item.dropdown.dropdown-left .navbar-nav .nav-item:hover .nav-link.trigger:before {
    border-left: solid 5px #ffffff;
}

/*背景主色，白字*/
.header .navbar .nav-item.dropdown > .navbar-nav .nav-item:hover > a,
body.show .page-item .page-link:hover, body.home .home_about .btn-more:hover,
.bsnav-mobile.full .navbar-nav .nav-item .navbar-nav .nav-link:hover,
.btn.btn-primary, .gotop a,
.btn-info, .tab-area .tab-title a.active,
.nav-tabs .nav-link.active,
.btn.btn-primary:hover,
body.show .page-item:first-child .page-link, body.show .page-item:last-child .page-link {
    background: var(--main-color);
    color: #fff;
}
    /*.gallery-list.cover.hov-cart .item-detail .cover .btn-box .btn:hover,
body.show .page-item .page-link:hover, body.home .home_about .btn-more:hover,
.bsnav-mobile.full .navbar-nav .nav-item .navbar-nav .nav-link:hover {
    background: var(--main-color);
    color: #000;
}*/

    /*背景副色，白字*/
    .iso-kind li.active a, .iso-kind li a:hover,
    .header .bsnav-mobile.full .navbar-nav .nav-item:hover > .nav-link,
    .article-grid .item .info .kind a, .btn-info:hover, body.article .page-content .tag_group li .tag:hover {
        background: var(--second-color);
        color: #fff;
    }

/*背景第三色，白字*/
/*.btn.btn-primary:hover, .side .h3 .txt-tw {
    background: var(--third-color);
    color: #fff;
}*/

/*背景第五色，白字*/
/*.nav-item.dropdown > .navbar-nav .nav-item:hover > a,
.member-function-box .item > a:hover,.btn.more {
    background: var(--fifth-color);
    color: #fff;
}*/

/*footer*/
.footer ul li a,
.footer ul li,
.footer .footer-info .desc,
.footer .footer_content.fc_seperate_bottom .right-area a,
.footer .footer_content.fc_seperate_bottom .social-box svg,
.footer .footer-seo .h4, .footer .footer-seo .desc,
.footer .editor, .footer .editor ul li a,
.footer .footer_content .sitemap > ul > li > a,
.footer .footer_content .sitemap > ul > li > a:hover,
.footer .footer-info ul li .icon, .footer .social-box a,
.footer .copyrights-info a, .footer .copyrights,
.footer .powered a, .footer .footer_content.fc_seperate_bottom .footer_left, .ezshare-box a:hover {
    color: #fff;
}

.editor {
    line-height: 1.5;
}


.header > .navbar {
    padding: 0 10px;
    box-shadow: rgb(0 0 0 / 30%) 0px -1px 6px;
    border-bottom: none;
}

.header .navbar .navbar-brand{
    width: 290px !important;
    height: 84px !important;
}
.header .navbar-nav .nav-item > .nav-link {
    position: relative;
    padding: 8px;
}

.header .navbar-nav.nav-1 > .nav-item > .nav-link::before {
    content: "";
    display: block;
    width: 100%;
    border-top: 4px dotted var(--main-color);
    opacity: 0;
    transition: 0.5s ease all;
    margin-bottom: 8px;
}
.header .navbar-nav.nav-1 >.nav-item:hover > .nav-link::before {
    opacity: 1;
}

.nav-item.dropdown > .navbar-nav .nav-item {
    font-size:18px;
}

.header .navbar .contactBtn.navbar-mobile a {
    height: 100%;
}

.header .navbar .contactBtn.navbar-mobile .contactbtn {
    display: block;
    padding: 10px;
    font-size: 20px;
    background: url(../images/pen-01.svg) no-repeat center left 6px var(--second-color);
    padding-top: 10px;
    border-radius: 0 0 0 20px;
    padding-left: 46px;
    color: #fff;
}
.is_scroll .header > .navbar {
    background: rgb(255 255 255 / 90%);
    backdrop-filter: blur(3px);
}

.is_scroll .header .navbar .navbar-brand {
    width: 190px !important;
    height: 60px !important;
}
.sec01 {
    padding: 70px 0;
}
body:not(.home) .main {
    background: url(../images/aboutBg6.jpg) top center no-repeat;
    padding: 80px 0;
}
.more-btn-area .btn-primary:after, .btn-more::after {
    content: "";
    display: inline-block;
    width: 38px;
    height: 38px;
    vertical-align: middle;
    border-radius: 50%;
    background: url(../images/more.svg) no-repeat center #ffffff31;
    margin-left: 10px;
    position: absolute;
    right: 10px;
    top: calc(50% - 38px / 2);
    
}
.more-btn-area .btn-primary, .txt .btn-more, .btn-more {
    border-radius: 34px;
    background: var(--second-color);
    font-size: 20px;
    padding: 15px 16px;
    width: 260px;
    text-align: left;
    position: relative;
    padding-right: 60px;
    color: #fff;
}
.more-btn-area .btn-primary:hover,.txt .btn-more:hover, .btn-more:hover {
    background: var(--main-color);
    color: #fff;
    filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.2));
}
.banner {
    position: relative;
}

body.home .banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 86px;
    background: url(../images/bannerDeco.png) no-repeat bottom center;
    z-index: 1;
    pointer-events: none;
}

.banner .banner-txt .banner-info {
    background: rgb(255 255 255 / 90%);
    padding: 40px 65px;
    color: #000;
}



.banner .banner-txt {
    justify-content: end;
    width: 80%;
    line-height: 1.5;
    opacity: 0;
    transition: 0.5s ease all;
    transition-delay:0.5s;
}
.banner .item.slick-current .banner-txt {
    opacity: 1;
}
.banner .banner-txt .banner-info {
    font-size: 40px;
}

.banner .banner-txt .banner-info strong {
    display: block;
    margin-top: 10px;
    color: var(--main-color);
}
.banner .banner-txt .banner-info a {
    display: block;
}
.banner .banner-txt .banner-info .btn.btn-primary {
    display: inline-block;
    font-size: 24px;
    margin-top: 20px;
    background: #2ebcbb;
    padding: 12px 44px;
    letter-spacing: 5.5px;
    box-shadow: rgb(0 0 0 / 15%) 4px 4px 6px;
    width: 250px;
    transition: 0.5s ease all;
}
.banner .banner-txt .banner-info .btn.btn-primary:hover{
    transform:scale(1.05);
}
body.home .h2, .kind-info .h2, body.contact h3.h1, .txt h3,.product .editor h3 {
    border: none;
    font-size: 35px;
    /* padding: 10px 0; */
    padding-bottom: 0;
    padding-left: 56px;
    color: #484848;
    background: url(../images/bigTitle.png) no-repeat left 5px top 4px;
    font-weight: 900;
    margin-bottom: 30px;
}
.txt h3[style*=text-align],.product .editor h3[style*=text-align] {
    display: block;
    /* color: #dc3545; */
    text-align: center;
    background-position: center top;
    padding: 50px 0 0 0;
}
body.home .h2 .txt-en,.kind-info .h2 .txt-en, body.contact h3.h1 .txt-en {
    font-size: 26px;
    display: block;
    color: #d2d2d2;
    margin-top: 8px;
    font-weight: normal;
}
.kind-info .h2 .txt-en, body.contact h3.h1 .txt-en {
    display: inline-block;
    margin: 0 0 0 12px;
}
body.home section .wid-page_unit img,  .article-grid.ar-img .item .pic img,
body.product .gallery-list .item .pic img{
    width: 100%;
}
body.home section .wid-page_unit img, .article-grid.ar-img .item .pic, .article-grid.ar-img .item .pic img,
body.product .gallery-list .item .pic, body.product .gallery-list .item .pic img,
.product-pic .slick-slide img, .product-pic.slick.st .slider-for .item a {
    border-radius: 10px;
}
.slider-nav .thumbnail img{
    border-radius:0;
}
.subtitle {
    color: var(--second-color);
    border-bottom: 4px dotted;
    display: inline-block;
    padding-bottom: 5px;
    font-size: 30px;
    margin-bottom: 15px;
}
body.home .sec01 .check_list li {
    background: url(../images/check-01.svg) no-repeat left -15px top -6px;
    margin-bottom: 10px;
    padding: 5px;
    padding-left: 30px;
    width: 49%;
    display: inline-block;
}
body.home .topAbout .about01 .tit_box .subtitle li + li:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--second-color);
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 8px 0 1px;
    opacity: 0.5;
}
body.home .topAbout .about01 > .container {
    max-width: 85%;
}

body.home .topAbout .about01 .tit_box .h4 {
    font-weight: normal;
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 28px;
}
body.home .topAbout .about01 .tit_box .h4:after {
    content: "";
    display: inline-block;
    width: 60%;
    /* height: 1px; */
    border-top: 1px solid #ddd;
    vertical-align: super;
    max-width: 280px;
    margin-left: 20px;
}

body.home .topAbout .about01 .tit_box {
    width: 40%;
}

body.home .topAbout .about01 .editor > .d-flex, body.home .intro .tit_box {
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -10px;
    display: flex;
}
body.home .topAbout .about01 .editor > .d-flex .tit_box, body.home .topAbout .about01 .editor > .d-flex .innerPic {
    padding: 0 10px;
}

body.home .topAbout .about01 .rightArea.innerPic {
    width: 60%;
}
body.home .topAbout .about01 .tit_box .subtitle li {
    display: inline-block;
 
}
body.home .topAbout .about01 .innerPic {
    text-align: center;
}

body.home .topAbout .about01 .d-flex .innerPic h3 {
    font-size: 20px;
    margin-top: 10px;
}
body.home .topAbout .about01 .rightArea.innerPic .row > div {
    margin-bottom: 40px;
}
body.home .intro .tit_box {
    margin-bottom: 40px;
    margin: 0;
    margin-bottom: 40px;
}
body.home .intro .tit_box .h2 {
    width: 25%;
    margin-bottom: 0;
}

body.home .intro .tit_box .descbox {
    width: 55%;
}
body.home .intro .tit_box .more-btn-area {
    width: 15%;
}
body.home .intro .wid-home-product .h2 {
    display: none;
}

body.home .intro .wid-home-product .swiper-slide *{

    transition:0.5s all;
}

body.home .intro .wid-home-product .swiper-slide {
 /*   margin: 0 40px;*/
    filter: grayscale(90%);
    opacity: 0.6;
}

body.home .intro .swiper-container-3d .swiper-slide-shadow-left, 
body.home .intro .swiper-container-3d .swiper-slide-shadow-right {
    background:none;
}
body.home .intro .wid-home-product .swiper-slide .info {
    opacity: 0;
    transform: translateY(26px);
    display: block;
    position: relative;
    padding: 18px 0;
    color: #333;
}
body.home .intro .wid-home-product .swiper-slide a {
    display: block;
}
body.home .intro .wid-home-product .swiper-slide .info .more {
  
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
}
body.home .intro .wid-home-product .swiper-slide .info .more {
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: #989898;
    padding: 8px;
    border-radius: 20px;
    /* background: #eee; */
    /* border-color: #333; */
}
body.home .intro .wid-home-product .swiper-slide .info .title {
    font-size: 24px;
    margin-bottom: 10px;
}
body.home .intro .wid-home-product .swiper-slide .info .desc {
    font-size: 18px;
}
body.home .intro .wid-home-product .swiper-slide.swiper-slide-active {
    filter: grayscale(0);
    opacity: 1;
}
body.home .intro .wid-home-product .swiper-slide.swiper-slide-active .pic {
    box-shadow: 0 0 8px 0px rgb(0 0 0 / 20%);
}
body.home .intro .wid-home-product .swiper-slide.swiper-slide-active .info{
    opacity: 1;
       transform: translateY(0);
}
body.home .intro .wid-home-product .swiper-slide.swiper-slide-active .pic,
body.home .intro .wid-home-product .swiper-slide.swiper-slide-active .pic img {
    border-radius: 15px;
}
body.home .intro .wid-home-product .swiper-button-next, body.home .intro .wid-home-product .swiper-button-prev {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    /* justify-content: center; */
    /* align-items: center; */
    /* z-index: 19; */
    text-align: center;
    background: var(--main-color);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px 0px rgb(0 0 0 / 20%);
    transform: translateY(-50%);
}
body.home .intro .tit_box .more-btn-area .btn-primary,
body.home .home_news .btn-more {
    width: auto;
}
body.home .topAbout.sec01 {
    background: url(../images/aboutBg1.png) no-repeat right 5px center, url(../images/aboutBg2.png) no-repeat left 5px bottom 30%;
}
body.home .coreValue.sec01 .pic {
    width: 95%;
}
body.home .coreValue.sec01 .check_list {
    margin: 40px 0;
}
body.home .coreValue.sec01 p strong {
    font-weight:normal;
}
body.home .coreValue.sec01 {
    padding-top: 0;
}
body.home .middleAbout .public h3 {
    font-size: 22px;
    margin-bottom: 20px;
    color: #333;
    font-weight: normal;
    position: relative;
    padding-left: 94px;
    min-height: 84px;
    display: flex;
    align-items: center;
    width: 100%;
    letter-spacing: 1px !important;
}
body.home .middleAbout .public h3:before {
    content: "";
    display: inline-block;
    height: 80px;
    width: 80px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: url(../images/publicIcon.svg) #7fbeba no-repeat top 10px center;
}


body.home .middleAbout .public .row > div {
    margin-bottom: 60px;
}
body.home .middleAbout .public .row > div:nth-child(2) h3::before {
    background-position: top -127px center;
}
body.home .middleAbout .public .row > div:nth-child(3) h3::before {
    background-position: top -280px center;
}
body.home .middleAbout .public .row > div:nth-child(4) h3::before {
    background-position: top -429px left 8px;
}
body.home .middleAbout .public .row > div:nth-child(5) h3::before {
    background-position: top -609px center;
}
body.home .middleAbout .public .row > div:nth-child(6) h3::before {
    background-position: top -759px center;
}

body.home .middleAbout.sec01 {
    background: url(../images/aboutBg5.jpg) no-repeat center;
    background-size: contain;
    padding-top: 0;
}
body.home .service {
    padding: 180px 0 70px;
}
body.home .service .inner {
    justify-content: space-between;
    align-items: stretch;
}
body.home .service .list_item h3 {
    font-size: 24px;
    color: var(--main-color);
}

body.home .service .list_item h3 small {
    font-size: 18px;
    color: #535353;
    margin-left: 10px;
}

body.home .service .inner .logopic {
    width: 350px;
    text-align: center;
    height: 350px;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 50%;
    background: #f9f9f9;
    position: relative;
    z-index: 0;
    filter: drop-shadow(22px 15px 25px rgba(0, 0, 0, 0.08));
    flex-direction: column;
}
body.home .service .inner .logopic:before {
    content: "";
    position: absolute;
    left: -90px;
    right: -90px;
    top: -90px;
    bottom: -90px;
    z-index: -1;
    background-size: contain;
    display: block;
    border-radius: 50%;
    background: url(../images/circlebg1-01.svg) no-repeat center;
    background-size: contain;
    animation: rotate-circle 5s linear infinite;
}
body.home .service .inner .list_box {
    /* width: calc(100% - 112px); */
    flex: 1 1 auto;
}
 body.home .service .inner .logopic p {
        font-size: 22px;
        letter-spacing: 4px;
        color: #5e5e5e;
        display: block;
}

body.home .service .inner .logopic .logo {
    background: url(../images/circlelogo.svg) no-repeat center;
    display: block;
    background-size: contain;
    width: 230px;
    height: 88px;
}
body.home .service .inner .list_item ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

body.home .service .inner .list_item ul li {
    background: url(../images/list-icon.png) no-repeat left 1px top 11px;
    padding-left: 12px;
    letter-spacing: 0;
    background-size: 6px;
}
body.home .service .inner > *{
       z-index: 1;
}
body.home .service .inner .list_box {
    /* width: calc(100% - 112px); */
    flex: 1 1 0;
    min-width: 424px;
}
body.home .service .list_item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position:relative;
}
body.home .service .list_item .pic {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: url(../images/serviceIcon-01.svg) top -13px center no-repeat #f8f8f8;
    outline: 3px solid var(--main-color);
    outline-offset: 1px;
    filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.1));
    position: absolute;
}

body.home .service .list_item.l2 .pic {
    background-position: top -259px left -3px;
}


body.home .service .list_item.l3 .pic {
    background-position: top -490px center;
}

body.home .service .list_item.l4 .pic {
    background-position: top -718px center;
}

body.home .service .list_item.l5 .pic {
    background-position: top -988px left -6px;
}
body.home .service .list_item.l6 .pic {
    background-position: top -1330px center;
}

body.home .service .bottom .list_item {
    padding-left: 125px;
}
body.home .service .top .list_item {
    padding-right: 125px;
}
body.home .service  .top .list_item .pic {
    right:0;
}

body.home .service  .bottom .list_item .pic {
    left:0;
}



body.home .service .list_item .info {
    font-size: 18px;
}
body.home .service .list_box .list_item.l1, body.home .service .list_box .list_item.l4 {
    top: -60px;
}
body.home .service .list_box .list_item.l5 {
    right: -28px;
}
body.home .service .list_box .list_item.l2 {
    right: 28px;
}
body.home .service .list_box .list_item.l3, body.home .service .list_box .list_item.l6 {
    bottom: -60px;
}

body.home .service .list_box .list_item.l6, body.home .service .list_box .list_item.l4 {
    left: -30px;
}

body.home .service .list_box .list_item.l1, body.home .service .list_box .list_item.l3 {
    right: -30px;
}


body.home .visualArea.pos-relative {
    background: url(../images/visualBg.jpg) no-repeat center;
    height: 500px;
    /* background-size: cover; */
}
body.home .visualArea:before, .footer:before {
    content: "";
    height: 110px;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    background: url(../images/Deco2.png) no-repeat bottom center;
}
.slick .slick-arrow, .product-pic.slick.st .slick-arrow, .product-pic.slick.st .slick-arrow:hover {
    background: url(../images/arrow-01.svg) no-repeat left 10px top 5px #9d9d9d;
    border-radius: 50%;
    background-size: 50%;
    box-shadow: 0 0 8px 0px rgb(0 0 0 / 20%);
    width: 40px;
    height: 40px;
}
.slick .slick-arrow.slick-prev,.product-pic.slick.st .slick-prev, .product-pic.slick.st .slick-arrow.slick-prev:hover {
    background-position: left 8px top -58px;
}

body.home .testimonials  .subtitle {
    border-bottom: 0;
    font-size: 25px;
    line-height: 1.5;
}

body.home .testimonials .subtitle small {
    display: block;
    font-size: 70%;
}

body.home .testimonials .subtitle p {
    margin-bottom: 0;
}
body.home .testimonials .rightArea .h2 {
    display: none;
}
body.home .testimonials .more-btn-area {
    text-align: center;
    margin-top: 40px;
}


body.home .testimonials .list_item {
    background: #e5f5f4;
    padding: 25px;
    border-radius: 30px;
    margin: 0 12px;
}
body.home .testimonials .list_item .desc {
    margin-top: 10px;
    margin-bottom: 0;
}
body.home .testimonials .list_item .desc, 
body.home .testimonials .list_item .intro p,.desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.home .testimonials .list_item .intro h5 {
    color: var(--main-color);
    margin-bottom: 12px;
    font-size: 22px;
}
body.home .testimonials .list_item .intro {
    padding-bottom: 24px;
    border-bottom: 1px solid #cacaca;
    margin-bottom: 20px;
}
body.home .testimonials .list_item .intro p {
    -webkit-line-clamp: 3;
    font-size: 18px;
    margin-bottom: 0;
}
body.home .testimonials .list_item .companyInfo .title {
    margin-bottom: 0;
    font-size: 18px;
}


body.home .testimonials {
    background: url(../images/aboutBg3.png) left -53px top no-repeat;
}
body.home .home_news .list_item {
    background: #f8f8f8;
    height: 100%;
}
body.home .home_news .list > div {
    margin-bottom: 34px;
}
body.home .home_news .list_item .info {
    padding: 15px;
    display: block;
}
body.home .home_news .list_item .info .date {
    font-size: 16px;
    color: #333;
}
body.home .home_news .list_item .info .title {
    color: #222;
    font-size: 20px;
}
body.home .home_news .btn-more{
    position: absolute;
    right: 0;
    top: 0;
}
body.home .home_news {
    background: url(../images/aboutBg4.jpg) right 0 center no-repeat;
}
.sort-area .btn-info {
    background: none;
    border: 1px solid;
    color: #888888;
}
.function-bar .display-mode .btn-mode {
    color: #b5b5b5;
}
.footer {
    background: url(../images/footer.jpg) right 0 center no-repeat;
    position: relative;
    padding: 145px 0 60px;
    background-size: cover;
}
.footer .social-box {
    margin-bottom: 12px;
}
.footer .footer_content,.footer .footer_content.fc_seperate_bottom .footer-bottom {
    background: none;
}

.footer:before {
    background: url(../images/footerbf.png) no-repeat bottom center;
    top: 0;
}

.footer .cominfo-list li {
    display: block;
    position: relative;
    padding-left:60px;
    font-size:18px;
}
.footer .cominfo-list label {
    display: block;
    opacity: 0.7;
    font-weight: normal;
}
.footer .cominfo-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 10px;
}

.footer .cominfo-list li .icon {
    width: 52px;
    height: 52px;
    position: absolute;
    background: url(../images/contacticon.svg) no-repeat center top;
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 1px solid;
}
.footer .cominfo-list li.tel .icon {
    background-position: center 1px;
}

.footer .cominfo-list li.bstime .icon {
  background-position: top -284px center;
}
.footer .cominfo-list li.taxid .icon {
    background-position: top -657px center;
}
.footer .cominfo-list li.add .icon {
    background-position: center -465px;
}
.footer .cominfo-list li.mail .icon {
    background-position: top -846px center;
}
.footer .cominfo-list li.fax .icon {
    background-position: top -1115px center;
}
.footer .footer_content.fc_seperate_bottom .footer-bottom .copyrights-info {
    border-top: 1px solid rgb(255 255 255 / 40%);
}
.footer .social-box ul li {
    margin: 0 2px;
}
.footer .social-box ul li a {
    background: url(../images/social_white.svg) center top -9px no-repeat;
    width: 40px;
    height: 40px;
    display: block;
    text-indent: -9999px;
    background-size: 150%;
    /* opacity: .8; */
}

.footer .social-box ul li a:hover {
    transform: scale(1.2)
}

.footer .social-box ul li.icon_i a {
    background-position: center top -123px;
}

.footer .social-box ul li.icon_y a {
    background-position: center top -235px;
}

.footer .social-box ul li.icon_t a {
    background-position: center top -340px;
}

.footer .social-box ul li.icon_l a {
    background-position: center top -610px;
}
.footer .social-box ul li.icon_p a {
    background-position: center top -483px;
}

.footer .social-box ul li.icon_tel a {
    background-position: center top -1465px
}
.footer .wid-page_unit p {
    font-size: 18px;
        color: #fff;
}
.wid-float-section ul {
    background: none;
}
.wid-float-section ul li a {
    width: 55px;
    color: #fff;
    height: 55px;
    border-radius: 50%;
    /* line-height: 55px; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.wid-float-section ul li a:hover .icon,.wid-float-section ul li a:hover {
    color: #fff;
}
.wid-float-section ul li.icon_f a {
    background: linear-gradient(140deg, #4486c7, #296bad);
}
.wid-float-section ul li.icon_i a {
    background: linear-gradient(140deg, #da32a5, #cf299b);
}
.wid-float-section ul li.icon_y a,.wid-float-section ul li.icon_p a {
    background: linear-gradient(140deg, #d91818, #aa1111);
}
.wid-float-section ul li.icon_t a {
    background: linear-gradient(140deg, #383838, #181818);
}

.wid-float-section ul li.icon_l a {
    background: linear-gradient(140deg, #5eb118, #4c9f06);
}
.wid-float-section ul li.gotop {
    position: static;
    right: auto;
    padding: 0;
}

.wid-float-section ul li.gotop a {
    background:url(../images/gotop.svg) center #a6a6a6 no-repeat;
}


.wid-float-section ul li {
    padding: 0;
}
.wid-float-section ul li + li {
    border-top: 0;
}
.tag {
    border-radius: 5px;
}
.breadcrumb-section.mb-5 {
    margin-bottom: 0 !important;
}
.article-grid.ar-img .item .info {
    height: auto;
    padding: 8px 0;
    border: 0;
}

body.news .subject-sec h1 {
    font-size: 30px;
    color: #333;
}

body.show .page-item .page-link {
    border-radius: 8px;
    padding: 6px 20px;
    font-size: 18px;
}
body.news .sort-area {
    text-align: right;
    margin-bottom: 30px;
}

.gallery-list.border-solid .item .item-detail {
    border: 0;
    height: 100%;
}
.gallery-list .item .info {
    margin: 0 !important;
}
.gallery-list .item .info .price-box {
    display: none !important;
}
.gallery-list .item .title {
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 1px;
    margin-top: 0 !important;
}
.h5 .sub-txt {
    color: #333;
}

.slick-prev:before, .slick-next:before {
    content:none;
}

.product-pic.slick.st .slick-arrow, .product-pic.slick.st .slick-arrow:hover {
    background-color: var(--main-color);
}
body.product .pro-name {
    display: inline-block;
    padding-bottom: 12px;
    position: relative;
    font-size: 26px;
}
body.product .pro-name::after {
    content: "";
    display: block;
    width: 100%;
    border-top: 4px dotted #85c1bd;
    margin-top: 6px;
}
body.product.show .tab-area .tab-title a {
    padding: 10px;
    text-align: center;
    border-radius: 37px;
    border: 1px solid;
    color: var(--second-color);
    background: #fff;
}
body.product.show .tab-area .tab-title a.nav-link.active {
    background: var(--second-color);
    color: #fff;
}
.tab-area {
    border-top: 0;
}
.tab-area .tab-title li + li {
    margin-left: 18px;
}

.product-info-area .item.desc .cont {
    width: 100%;    font-size: 19px;
}

.product-info-area .item.desc .cont table {
    width: 100%;
}
.product-info-area .item.desc .cont table tr td {
    padding: 15px 5px;
    color: #333;
}
.product-info-area .item.desc .cont table tr:nth-child(even) {
    background: #e7f2f2;
}
.product-info-area .item.desc .cont table tr + tr {
    border-top: 1px solid #e8e8e8;
}
.product-info-area .item.desc .cont table tr > td:first-child {
    padding-left: 49px;
    background: url(../images/product/productIcon-01.svg) no-repeat left -3px top 11px;
    padding-right: 20px;
    text-align: right;
    min-width: 150px;
    vertical-align: top;
}
.product-info-area .item.desc .cont table tr.price > td:first-child {
    background-position: left -3px top -92px;
}
.product-info-area .item.desc .cont table tr.sqm > td:first-child {
    background-position: left -3px top -195px;
}
.product-info-area .item.desc .cont table tr.special > td:first-child {
    background-position: left -3px top -308px;
}
.product-info-area .item.desc .cont table tr.equipment > td:first-child {
    background-position: left -3px top -426px;
}
.product-info-area .item.desc .cont table tr.tool > td:first-child {
    background-position: left -3px top -542px;
}


.product .editor h3 {
    font-size: 28px;
    background-size: 30px;
    padding-top: 0;
}

.product .editor h3[style*=text-align] {
    padding: 40px 0 0 0;
}
.product .contentbuilder-box .list > p {
    margin-left: 0 !important;
    line-height: 1.5;
    font-size: 18px;
}
.product .contentbuilder-box .list {
    position: relative;
    background: #eee;
    margin: 0;
    height: 100%;
    padding: 30px 14px;
    border-radius: 20px;
    padding-left: 135px;

}
.product .contentbuilder-box .rent > div {
    margin-bottom: 35px;
}
.product .contentbuilder-box .list:before {
    width: 120px;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    background:#7fbeba;
    left: 0;
    border-radius: 20px 0 0 20px;
    background-size: 80%;
}
.product .contentbuilder-box .list:after {
    width: 80px;
    height: 80px;
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: url(../images/product/productIcon2-01.svg) no-repeat center top 8px;
    left: 20px;
    background-size: 100%;
}

.product .contentbuilder-box .l2 .list:after {
    background-position:center top -209px;
   
}
.product .contentbuilder-box .l3 .list:after {
    background-position: center top -438px;
}
.product .contentbuilder-box .l4 .list:after {
    background-position: center top -668px;
}
.product .contentbuilder-box .l5 .list:after {
    background-position: center top -818px;
    background-size: 90%;
}
.product .contentbuilder-box .l6 .list:after {
    background-position: center top -1158px;
}
.product .contentbuilder-box .list h5 {
    font-size: 22px;
    color: var(--main-color);
    padding-bottom: 8px;
    border-bottom: 1px solid #cecece;
}
.product .editor .inner {
    height: 100%;
    background: #eeeeee;
    /* padding: 30px; */
    border-radius: 20px;
    letter-spacing: 0;
}

.product .editor .inner h4 {
    background: var(--second-color);
    color: #fff;
    padding: 15px;
    text-align: center;
    border-radius: 20px 20px 0 0;
    margin-bottom: 0;
}
.product .editor .inner ul {
    list-style-type: circle;
    padding-left: 24px;
}
.product .editor .inner ul li + li {
    margin-top: 10px;
}
.product .editor .inner .info {
    padding: 22px;

}
.product .editor  p,.product .editor ul li {
    line-height: 1.6;
}
.product .editor .inner ul li label {
    font-weight: 600;
}
.product .editor .inner strong {
    color: var(--second-color);
}
.product .editor .inner .info h5 {
    font-size: 24px;
    padding-left: 45px;
    color: var(--main-color);
    background: url(../images/product/parking.png) no-repeat left -1px top;
    font-weight: normal;
}
.product .editor .inner .info h5.facilities {
    background-position: left -1px top -478px;
}
.product .editor .inner .info h5 small {
    display: block;
    color: #373737;
    margin-top: 6px;
}
.product .editor .contentbuilder-box p,.product .editor .inner .info {
    font-size: 18px;
}

.product .editor .inner .info .time {
    background: url(../images/product/time.svg) no-repeat left -6px top -4px;
    padding-left: 35px;
    margin-bottom: 0;
}
.product .editor .FAQ h3 {
    margin-bottom: 65px;
}
.product .editor .FAQ .inner h4 {
    top: -18px;
    left: -26px;
    position: relative;
    text-align: left;
    font-size: 20px;
    /* margin-right: 21px; */
    border-radius: 20px;
    background: url(../images/product/question.svg) no-repeat left 6px top 3px #2e958f;
    padding-left: 60px;
    border-radius: 50rem;
}
.product .editor .FAQ .inner {
    padding: 15px;
    padding-top: 0;
    /* width: 95%; */
    margin: 0 auto;
}
.product .editor .FAQ .row > div {
    margin-bottom: 60px;
}
body.product .h4.mb-5 {
    text-align: center;
    display: table;
    margin: 0 auto;
    border-bottom: 5px dotted;
    padding-bottom: 8px;
    color: var(--second-color);
}
.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
    height: auto;
}

.recommend .slick .list_item {
    /* border: 1px solid #ddd; */
    margin: 0 13px;
    padding: 21px;
    background: rgb(243 237 230 / 64%);
    position: relative;
    border-radius: 20px;
}

    .recommend .slick .list_item h3 {
        font-size: 22px;
        margin: 14px 0;
        color: var(--main-color);
        line-height: 1.5;
        font-weight: 600;
    }

.page-content .recommend {
    margin: 34px 0
}

.recommend .slick .list_item .name small {
    display: block;
    line-height: 1;
    color: #8a8a8a
}

.recommend .slick .list_item .pic {
    width: 20%;
    margin: 0 auto 8px
}

.recommend .slick .list_item .name {
    text-align: center;
    font-size: 16px
}

/*body.contact .info-area h3 {
    display: none;
}*/

body.contact .main > .container {
    max-width: 100%;
}

.list-creative a, .list-creative p {
    color: #6d6d6d;
    font-size: 18px;
}
body.contact .info-area .list-creative {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
body.contact .info-area .list-creative > li
 {
    width: calc(100% / 2 - 10px);
    padding: 12px 0 12px 73px;
    position: relative;
}
body.contact .needs-validation .btn.btn-primary {
    background: #333;
    padding: 8px 30px;
}
body.contact .needs-validation #ctl00_content_holder__contactTemplates_Send {
    background: var(--second-color);
}
body.contact .info-area .list-creative > li:before {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    background: url(../images/contacticon2-01.svg) no-repeat center top #a0a0a0;
    left: 0;
    border-radius: 10px;
}
body.contact .info-area .list-creative li + li {
    border-top: 0;
}
body.contact .info-area .list-creative .list-terms:before {
    content:none;
}
.list-creative .list-terms {
    padding-left: 0;
}

body.contact .info-area .list-creative > li.bstime:before {
    background-position: top -897px center;
}
body.contact .info-area .list-creative > li.add:before {
    background-position: top -220px center;
    background-size: 80%;
}
body.contact .info-area .list-creative > li.tax-id:before {
    background-position: top -1282px center;
}
body.contact .info-area .list-creative > li.tel:before {
    background-position: top -657px center;
}
body.contact .info-area .list-creative > li.mail:before {
    background-position: top -137px center;
}
body.contact .info-area .list-creative > li.fax:before {
    background-position: top -449px center;
}
body.contact .info-area h4 {
    font-size: 20px;
    color: #333;
}
body.contact .info-area .lineArea p {
    font-size: 16px;
    color: #515151;
}
body.contact .info-area h3 {
    display: inline-block;
    border-bottom: 4px dotted #c2c2c2;
    padding-bottom: 9px;
    color: #333;
    font-weight: 500;
    font-size:28px;
}
body.contact .info-area .lineArea img {
    width: 100px;
    margin-left: 0;
}
.contact-info-area > .container {
    max-width: 100%;
}

.contact-info-area .needs-validation {
    width: 80%;
    margin: 0 auto;
    padding: 31px;
}
body.contact .col-form-label {
    width: 30%;
    font-size: 18px;
}
body.contact .form-group.row > div {
    width: 70%;
}
.contact-info-area {
    background: #f5f5f5;
    margin-bottom: 0 !important;
}
body.contact .info-area ul .list-inline-item a {
    background: url(../images/social_square-01.svg) center top -9px no-repeat;
    width: 40px;
    height: 40px;
    display: block;
    text-indent: -9999px;
    background-size: 150%;
    /* opacity: .8; */
    background-size: 111%;
}

body.contact .info-area ul .list-inline-item.icon_i a {
    background-position: center top -141px;
}
body.contact .info-area ul .list-inline-item.icon_l a {
    background-position: center top -633px;
}
body.contact .info-area ul .list-inline-item.icon_y a {
    background-position: center top -770px;
}
span.radio-inline {
    /* margin-left: 13px; */
    display: inline-block;
    padding: 0 5px;
    margin-bottom: 5px;
}
body.contact .main {
    padding-bottom: 0 !important;
}
body.contact .side2 {
    margin-bottom: 0;
}
body.contact .footer:before {
    content: none;
}

body.contact .footer {
    padding: 60px 0;
}
@-webkit-keyframes rotate-circle {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotate-circle {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/*編輯器*/

.txt img {
    width: 100%;
    border-radius: 15px;
}


body.about.kind_3 .main, body.about.kind_72 .main {
    background: none;
}

.txt .row, body.about .txt .spaceIntro,
body.about .txt .videoArea, 
body.about.kind_72 .txt .sec07,
body.about.kind_72 .txt .sec08 {
    position: relative;
    z-index: 1;
}


body.about.kind_3 .txt .row.sec02:before {
    content: "";
    background: url(../images/about/aboutBg5.png) no-repeat center left 6px;
    width: 700px;
    height: 700px;
    display: block;
    position: absolute;
    right: -28%;
    top: -285px;
    z-index: -1;
    background-size: contain;
}

body.about.kind_3 .txt .row.sec03:before {
    content: "";
    background: url(../images/about/aboutBg6.png) no-repeat;
    width: 800px;
    height: 460px;
    display: block;
    position: absolute;
    left: -28%;
    bottom: 0;
    z-index: -1;
    background-size: contain;
}
.circlebox {
    margin: 26px 0;
}
.circlebox .list_item {
    width: 144px;
    height: 144px;
    position: relative;
    text-align: center;
    background: #fff;
    /* backdrop-filter: drop-shadow(27px 26px 6px black); */
    border-radius: 50%;
    /* outline: 4px solid var(--main-color); */
    filter: drop-shadow(10px 6px 14px rgba(0, 0, 0, 0.08));
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}
.circlebox .list_item:before {
    content: "";
    position: absolute;
    left: -5px;
    background: rgb(255 255 255);
    right: -5px;
    top: -5px;
    bottom: -5px;
    border-radius: 50%;
    z-index: -1;
    border: 3px solid var(--main-color);
}
.circlebox .list_item.i2:after, .circlebox .list_item.i3:after {
    content: "";
    position: absolute;
    left: -40px;
    background: url(../images/about/circlebf.png) center center no-repeat;
    right: -40px;
    top: -10px;
    bottom: -10px;
    z-index: -2;
    background-size: contain;
}
.circlebox .list_item.i3:after {
    background-image: url(../images/about/circlebf2.png);

}
.circlebox .list_item.logo:before,.circlebox .list_item.logo:after{
    content:none;
}
.circlebox .list_item.i1 {
   order:1;
}
.circlebox .list_item.i2 {
   order:2;
}

.circlebox .list_item.i3 {
   order:4;
}
.circlebox .list_item.i4 {
   order:5;
}
.circlebox ul {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    position: relative;
    z-index:1;
}
.circlebox ul:before {
    z-index: -1;
    content: "";
    position: absolute;
    left: 46px;
    right: 46px;
    height: 55px;
    background: linear-gradient(45deg, #35b3c4, #2fa0a4);
    -webkit-animation: color-change-2x 2s linear infinite alternate both;
	        animation: color-change-2x 2s linear infinite alternate both;
}
.circlebox .logo {
    display: block;
    width: 230px;
    height: 230px;
    background: url(../images/circlelogo.svg) center center no-repeat, linear-gradient(45deg, #fff, #fff) padding-box, linear-gradient(45deg, #3ccbec, #2d9896) border-box;
    background-size: 80%, 100%, 100%;
    border-radius: 50%;
    border: 20px solid transparent;
    order: 3;
    filter: none;
}

.circlebox .list_item .pic {
    background: url(../images/about/iconset1-01.svg) center top -10px no-repeat;
    display: block;
    width: 65px;
    height: 70px;
    margin: 0 auto 10px;
}
.circlebox .list_item.i2 .pic {
    background-position: center top -303px;
}
.circlebox .list_item.i3 .pic {
    background-position: center top -623px;
}
.circlebox .list_item.i4 .pic {
    background-position: center top -922px;
}
.txt h4 {
    display: table;
    margin: 0 auto 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid;
    color: var(--second-color);
    font-size: 20px;
}
.txt p {
    margin-bottom: 20px;
    line-height: 1.5;
    color: #272727;
}
body.about.kind_3 .side, body.about.kind_72 .side {
    display: none;
}
body.about.kind_3 .content, body.about.kind_72 .content {
    width: 100%;
}
body.about.kind_3 .txt .row.sec04:before {
    content: "";
    background: url(../images/aboutBg5.jpg) no-repeat;
    display: block;
    position: absolute;
    left: -23%;
    top: 0;
    bottom: 0;
    z-index: -1;
    background-size: 100%;
    right: -23%;
}
body.about .sec05 {
    align-items: center;
}
body.about .sec05 ul {
    padding-left:0 !important;
}
body.about .sec05 ul li {
    list-style: none;
    position: relative;
    padding-left: 130px;
}
body.about .sec05 ul li span {
    display: block;
    font-size: 22px;
    margin-bottom: 10px;
    color: var(--second-color);
}
body.about .sec05 ul li + li {
    margin-top: 28px;
}
body.about .sec05 ul li:before {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    background: url(../images/about/traffic-01.svg) center top 14px no-repeat var(--second-color);
    border-radius: 50%;
    left: 18px;
    top: 0;
}
body.about .sec05 ul li.traffic:before {
    background-position: center top -174px;
}
body.about .sec05 ul li.service:before {
    background-position: center top -349px;
}
.txt h3 {
    margin-bottom: 40px;
}
body.about .sec05 img {
    margin-bottom: 0;
}
body.about .sec05 .pic, body.about .txt .servicebox {
    position: relative;
    z-index: 1;
}
body.about .sec05 .pic:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 8px;
    right: 8px;
    top: 0;
    bottom: 0;
    background: #bfe0de;
    transform: rotate(-3deg);
    border-radius: 15px;
}
body.about .sec05::after {
    content: "";
    background: url(../images/about/aboutBg4.png) no-repeat;
    width: 1090px;
    height: 445px;
    display: block;
    position: absolute;
    right: -36%;
    bottom: -160px;
    z-index: -1;
    /* background-size: contain; */
}
body.about .sec05 h3 {
    margin-bottom: 60px;
}
body.about.kind_3 .txt, body.about.kind_72 .txt {
    margin-bottom: 0 !important;
    padding-bottom: 0 !IMPORTANT;
}


body.about .sec05::after,
body.about.kind_3 .txt .row.sec04:before,
body.about.kind_3 .txt .row.sec03:before,
body.about.kind_3 .txt .row.sec02:before,
.footer:before,
body.home .visualArea:before,
body.about.kind_72 .sec08::after,
body.about .txt .sec07::after{
    pointer-events:none;

}



body.about.kind_72 .kind-info .h2 {
    background-position: center top;
    padding: 50px 0 0 0;
    text-align: center;
}

body.about.kind_72 .container .ezshare-box {
    display:none;
}


body.about.kind_72 .sec02 img {
    width: auto;
    opacity:0;
    text-align: center;
    margin: 0 auto 22px;
    -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    transition-property: transform, clip-path, -webkit-clip-path;
    transition: .5s cubic-bezier(0.5, 0.1, 0.1, 1);
}

body.about.kind_72 .sec02.aos-animate  img{
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity:1;
}
body.about .txt .spaceIntro .nav-pills {
    width: 15%;
    margin-right: 0 !important;
}
body.about .txt .spaceIntro .tab-content {
    width: 83%;
}

body.about .txt .spaceIntro {
    flex-wrap: wrap;
    justify-content: space-between;
}
body.about .txt .spaceIntro, body.about .txt .servicebox {
    padding: 50px 0;
}
body.about .txt .spaceIntro .tab-content .subtitle small, body.about .txt .spaceIntro .tab-content .subtitle {
    display: block;
    /* display: block; */
}
body.about .txt .spaceIntro .tab-content .subtitle small {
    color: #747474;
}
body.about .txt .spaceIntro .nav-pills .nav-link {
    border-radius: 0;
    color: #333;
    padding: 14px 10px;
    border: 1px solid #eee;
    text-align: left;
    padding-left: 40px;
    background: url(../images/about/arrow_icon.png) top -255px left 10px no-repeat #fff;
}
body.about .txt .spaceIntro .nav-pills .nav-link.active, body.about .txt .spaceIntro .nav-pills .show > .nav-link {
    background-color: var(--second-color);
    background-position: top 18px left 10px;
    color: #fff;
}
body.about .txt .spaceIntro.facilities:before {
    content: "";
    position: absolute;
    left: -30%;
    right: -30%;
    top: 0;
    bottom: 0;
    background: #fff8ed;
    z-index: -1;
}

body.about .txt .videoArea {
    padding: 120px 0 160px 0;
}

body.about .txt .videoArea:before {
    content: "";
    position: absolute;
    left: -30%;
    right: -30%;
    top: 0;
    bottom: 0;
    background: url(../images/about/aboutBg7.jpg) center no-repeat;
    z-index: -1;
}
body.about .txt .videoArea::after {
    content: "";
    position: absolute;
    left: -30%;
    right: -30%;
    height: 126px;
    bottom: 0;
    background: url(../images/about/aboutbf.png) top center no-repeat;
    z-index: -1;
}
body.about .txt .videoArea, body.about .txt .videoArea p,body.about .txt .sec07,body.about.kind_72 .txt .sec08 p{
    text-align: center;
}
body.about .txt .videoArea a,body.about .txt .sec07 a {
    border-radius: 34px;
    /* background: var(--second-color); */
    font-size: 20px;
    padding: 15px 16px;
    width: 260px;
    text-align: left;
    position: relative;
    padding-right: 60px;
    color: #fff;
    border: 1px solid;
    margin-top: 40px;
    background: url(../images/about/play.png) no-repeat right 10px center;
    display:inline-block;
}

.second-line {
    display: block;
}
body.about .txt .servicebox .desc {
    text-align: center;
    margin-bottom: 50px;
    display: block;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: auto;
    text-overflow: initial;
}
body.about .txt .servicebox ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
body.about .txt .servicebox  ul li p{
    margin-bottom:0;
}
body.about .txt .servicebox > ul > li {
    width: calc(100% / 3 - 10px);
    margin-bottom: 30px;
    position: relative;
}
body.about .txt .servicebox ul.service {
    margin-bottom: 100px;
}
body.about .txt .servicebox ul.service > li {
    padding-left: 100px;
    min-height: 84px;
}
body.about .txt .servicebox ul.service > li:before {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    background: url(../images/serviceIcon2-01.svg) no-repeat center top 10px #7fbeba;
    border-radius: 50%;
    left: 0;
    top: 0;
}
body.about .txt .servicebox ul.service > li.i22:before {
    background-position: center top -172px;
}
body.about .txt .servicebox ul.service > li.i3:before {
    background-position: center top -366px;
}
body.about .txt .servicebox ul.service > li.i4:before {
    background-position: center top -560px;
}
body.about .txt .servicebox ul.service > li.i5:before {
    background-position: center top -747px;
}
body.about .txt .servicebox ul.service > li.i6:before {
    background-position: center top -940px;
}
body.about .txt .servicebox ul.service > li.i7:before {
    background-position: center top -1134px;
}
body.about .txt .servicebox ul.service > li.i8:before {
    background-position: center top -1523px;
}
body.about .txt .servicebox ul.service > li.i9:before {
    background-position: center top -1332px;
}
body.about .txt .servicebox ul.service > li h5 {
    font-size: 22px;
    color: var(--main-color);
}
body.about .txt .servicebox .desc b {
    font-size: 22px;
    color: var(--second-color);
}
body.about .txt .servicebox ul.good h5 {
    display: inline-block;
    padding: 5px 20px 5px 40px;
    background: url(../images/about/check.svg) left 8px center no-repeat var(--second-color);
    border-radius: 50px;
    color: #fff;
}
body.about .txt .servicebox > ul > li small {
    display: block;
    color: #333;
    font-size: 18px;
}
body.about .txt .servicebox ul li li + li {
    margin-top: 18px;
}
body.about .txt .sec07 a {
    background-image: none;
}
body.about .txt .sec07:before {
    content: "";
    position: absolute;
    left: -30%;
    right: -30%;
    top: 0;
    bottom: 0;
    background: url(../images/about/aboutBg8.jpg) center no-repeat;
    z-index: -1;
}
body.about .txt .sec07 {
    padding: 150px 0 100px;
}
body.about .txt .sec07 h3 {
    background: none;
    padding: 0;
    margin-bottom: 0;
    font-size: 30px;
}
body.about .txt .sec07::after {
    content: "";
    position: absolute;
    left: -30%;
    right: -30%;
    height: 126px;
    top: 0;
    background: url(../images/about/aboutaf.png) bottom center no-repeat;
    z-index: -1;
}
body.about.kind_72 .txt .sec08 {
    padding: 80px 0;
}
body.about.kind_72 .txt .sec08 h3 {
    background: none;
    padding-top: 0;
}
body.about.kind_72 .txt .sec08 .btn-group {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 50px;
}
body.about.kind_72 .txt .sec08 .btn-group .btn-primary:before {
    content: "";
    width: 95px;
    height: 95px;
    display: block;
    position: absolute;
    background: url(../images/about/abcontact-01.svg) top -4px left -1px no-repeat rgb(255 255 255 / 32%);
    border-radius: 50%;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

body.about.kind_72 .txt .sec08 .btn-group .btn-primary {
    padding: 20px;
    font-size: 30px;
    border-radius: 500rem;
    position: relative;
    padding-left: 150px;
    width: 100%;
    line-height: 1.5;
    background: #1f9ac8;
    color:#fff;
    transition:0.5s ease all;
}

body.about.kind_72 .txt .sec08 .btn-group .btn-primary:hover{
    
    filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.2));
}

body.about.kind_72 .txt .sec08 .btn-group .btnbox {
    width: 49%;
}
body.about.kind_72 .txt .sec08 .btn-group .mail .btn-primary {
    background: var(--main-color);
}
body.about.kind_72 .txt .sec08 .btn-group .mail .btn-primary::before {
    background-position: top -574px left 0px;
}
body.about.kind_72 .txt .sec08 .btn-group .btn-primary span {
    display: block;
    opacity: 0.8;
    font-size: 26px;
}
body.about.kind_72 .sec08::after {
    content: "";
    background: url(../images/about/aboutBg9.png) no-repeat;
    width: 630px;
    height: 561px;
    display: block;
    position: absolute;
    left: -22%;
    top: 0;
    z-index: -1;
    background-size: contain;
}


/* ----------------------------------------------
 * Generated by Animista on 2025-6-3 13:9:56
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation color-change-2x
 * ----------------------------------------
 */
@-webkit-keyframes color-change-2x {
    0% {
        background: #35b3c4;
    }

    100% {
        background: #2fa0a4;
    }
}

@keyframes color-change-2x {
    0% {
        background: #35b3c4;
    }

    100% {
        background: #2fa0a4;
    }
}