@charset "utf-8";
/* CSS Document */
.mt40{ margin-top: 40px;}

/*===============隱私政策 / 免責聲明==================*/
.policy-section {
    background: #f9f9f9;
    padding: 72px 0 100px;
}
.policy-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 30px;
}
.policy-header {
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid #e8e8e8;
}
.policy-tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #7bcbc1;
    font-weight: 600;
    margin-bottom: 14px;
}
.policy-title {
    font-size: 32px;
    font-weight: 300;
    color: #222;
    letter-spacing: 0.04em;
    margin: 0;
}
.policy-lead {
    font-size: 15px;
    color: #555;
    line-height: 1.9;
    margin-bottom: 48px;
    padding-left: 16px;
    border-left: 3px solid #7bcbc1;
}
.policy-body {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.policy-block {
    background: #fff;
    border-radius: 4px;
    padding: 32px 36px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.policy-block-title {
    font-size: 16px;
    font-weight: 500;
    color: #222;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.policy-block p {
    font-size: 14px;
    color: #666;
    line-height: 1.9;
    margin: 0 0 12px;
}
.policy-block p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .policy-section { padding: 48px 0 72px; }
    .policy-inner { padding: 0 20px; }
    .policy-block { padding: 24px 20px; }
}

/*===============關於我們==================*/
.ad-banner{ width: 100%; height:318px; position: relative;}
.ad-banner img{ max-width: 100%; display: none;}
.ad-banner .ad-title{ position: absolute; left: 0; top: 50%; margin-top:-24px; text-align: center; width: 100%;}
.ad-title h2{  color: #fff; line-height:28px;}
.ad-title p{  color: #fff; line-height:20px; margin-bottom: 0;}

/* 關於我們頁面主體 */
.about-section {
    background: #f9f9f9;
}

/* 圖文並排 */
.about-intro {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 30px 70px;
    display: flex;
    gap: 72px;
    align-items: center;
}
.about-intro-image {
    flex: 1;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.10);
}
.about-intro-image img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}
.about-intro-image:hover img {
    transform: scale(1.03);
}
.about-intro-content {
    flex: 1;
}
.about-tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #7bcbc1;
    font-weight: 600;
    margin-bottom: 16px;
}
.about-heading {
    font-size: 30px;
    font-weight: 300;
    color: #222;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
    line-height: 1.3;
}
.about-sub {
    font-size: 13px;
    color: #aaa;
    letter-spacing: 0.06em;
    margin: 0 0 28px;
}
.about-body {
    font-size: 15px;
    color: #555;
    line-height: 1.9;
    margin-bottom: 16px;
}

/* 數據欄 */
.about-stats {
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.about-stat-item {
    flex: 1;
    text-align: center;
    padding: 52px 20px;
}
.about-stat-number {
    font-size: 44px;
    font-weight: 200;
    color: #222;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}
.about-stat-number span {
    font-size: 24px;
    color: #7bcbc1;
    font-weight: 400;
}
.about-stat-label {
    font-size: 13px;
    color: #999;
    letter-spacing: 0.06em;
}
.about-stat-divider {
    width: 1px;
    height: 60px;
    background: #eee;
    flex-shrink: 0;
}

/* 服務特色 */
.about-features {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 30px 90px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.about-feature-item {
    background: #fff;
    border-radius: 4px;
    padding: 40px 28px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s, transform 0.3s;
}
.about-feature-item:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    transform: translateY(-4px);
}
.about-feature-icon {
    width: 44px;
    height: 44px;
    color: #7bcbc1;
    margin-bottom: 20px;
}
.about-feature-icon svg {
    width: 100%;
    height: 100%;
}
.about-feature-title {
    font-size: 16px;
    font-weight: 500;
    color: #222;
    margin: 0 0 12px;
}
.about-feature-desc {
    font-size: 13px;
    color: #888;
    line-height: 1.8;
    margin: 0;
}

@media (max-width: 992px) {
    .about-features {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .about-intro {
        flex-direction: column;
        padding: 48px 20px 40px;
        gap: 36px;
    }
    .about-stats {
        flex-wrap: wrap;
    }
    .about-stat-item {
        flex: 0 0 50%;
        padding: 36px 20px;
    }
    .about-stat-divider {
        display: none;
    }
    .about-features {
        grid-template-columns: 1fr;
        padding: 48px 20px 60px;
    }
}

/*left*/
.aboutus_left{ padding-right:40px; margin-bottom:40px; width: auto; flex-shrink: 0; float: none; }
.aboutus_left .list-group{ border-radius:0 0 ; line-height: 22px; background: #fff; border-right:1px solid #d9e2e0;}
.aboutus_left .list-group a{border-radius:0; border: none; display:block; padding:10px 16px; background: #fff;color: #555; white-space: nowrap; }
.aboutus_left .list-group a i{ float: right;line-height: 40px;}
.list-group-item:first-child {border-radius:0;}
.aboutus_left .list-group a.active{ background: #f3f3f3;color: #555;border-left: solid 3px #78cbc2;}
.aboutus_left .list-group a:hover{color: #78cbc2;    -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft;}
.aboutus_left .list-group a:hover i{-webkit-animation-name: fadeInLeft; animation-name: fadeInLeft;}

/*right*/
.aboutus_right{ }
.aboutus_left ~ [class*="col-"] { flex: 1; min-width: 0; width: auto; float: none; }
.row:has(.aboutus_left) { display: flex; flex-wrap: wrap; align-items: flex-start; }

.aboutus_title_bt{ height:50px; border-bottom:dashed 1px #d9d9d9;line-height:50px;}
.aboutus_title_bt h2{  line-height:50px; color: #333333; display:inline-block; float: left; margin-top: -1px; }
.aboutus_title_bt .crumbs-nav{ color: #999999;height:50px;overflow: hidden;}
.aboutus_title_bt .crumbs-nav a{ color: #999;}
.aboutus_title_bt .crumbs-nav i{ font-size:6px; color: #999; margin: 0 6px;}
.aboutus_title_bt .crumbs-nav a:last-child{color: #444;}

.text-container-box{ margin-top: 22px}
.text-container-box p{ margin:0; line-height:24px;}
.text-container-box p img{ max-width: 100%;}

/*================企業榮譽==================*/
.text-container-box{}
.text-container-box .honour{ border-bottom: dashed 1px #d9d9d9; margin:30px 0; padding-bottom:30px;}
.text-container-box .honour .col-md-3{ text-align: center;}
.text-container-box .honour .col-md-3 img{ max-width: 100%;}
.text-container-box .honour .col-md-3 p{ line-height:36px;}

/*================新聞中心==================*/
.news-list{}
.news-list ul{}
.news-list ul li{  border-bottom: dashed 1px #d9d9d9; height: 56px; overflow: hidden; line-height: 56px; font-size: 16px;-webkit-transition: all .4s ease; transition: all .4s ease;}
.news-list ul li b{ float: right; font-size: 12px; color: #999;}
.news-list ul li:hover{ background: #f5fefd; padding:0 10px }
.news-list ul li:hover a{ color: #78cbc2;}
/*翻頁*/
.Page{ text-align: center; margin:40px 0;}
.pagination>li>a, .pagination>li>span{ color: #444; text-align: center;}
.pagination>li>a, .pagination>li>span{ padding: 8px 15px; font-size: 16px;}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{ background: #78cbc2;border: solid 1px #78cbc2; }

/*================新聞詳情頁==================*/
.article-container-box{ width:98%; margin:20px auto;}
.article-title{ border-bottom: solid 1px #eee; padding: 15px 0;}
.article-title h1{ line-height:46px;}
.article-title p{}

.article-container-box p{ margin:0; line-height:24px;}
.article-container-box p img{ max-width: 100%; display: block; margin: 0 auto;}



/*==============聯絡我們================*/
.contact_title{ text-align: center; padding:60px 20px; border:solid 1px #dce5eb;}
.contact_title p{}
.contact_title div{}

/* 聯絡我們頁面主體 */
.contact-page-section {
    padding: 80px 0 100px;
    background: #f9f9f9;
}
.contact-page-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    gap: 40px;
    align-items: stretch;
    min-height: 480px;
}

/* 左側資訊卡 */
.contact-info-card {
    flex: 1;
    background: #fff;
    border-radius: 4px;
    padding: 52px 48px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}
.contact-info-header {
    margin-bottom: 44px;
}
.contact-info-tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #7bcbc1;
    font-weight: 600;
    margin-bottom: 12px;
}
.contact-info-title {
    font-size: 28px;
    font-weight: 300;
    color: #222;
    letter-spacing: 0.04em;
    margin: 0;
}
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.contact-info-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.contact-info-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #7bcbc1;
    margin-top: 3px;
}
.contact-info-icon svg {
    width: 100%;
    height: 100%;
}
.contact-info-content {
    flex: 1;
}
.contact-info-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #aaa;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.contact-info-value {
    display: block;
    font-size: 15px;
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}
.contact-info-value:hover {
    color: #7bcbc1;
    text-decoration: none;
}
.contact-info-hours {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hours-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #444;
    gap: 20px;
}
.hours-row.hours-closed {
    color: #aaa;
}
.hours-day { flex: 1; }
.hours-time { flex-shrink: 0; }

/* 右側辦公時間卡 */
.contact-hours-card {
    flex: 1;
    background: #fff;
    border-radius: 4px;
    padding: 52px 48px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
}
.contact-hours-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 36px;
}
.contact-hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    gap: 16px;
}
.contact-hours-row.closed .contact-hours-days,
.contact-hours-row.closed .contact-hours-time {
    color: #bbb;
}
.contact-hours-days {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #333;
}
.contact-hours-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #7bcbc1;
}
.contact-hours-row.closed .contact-hours-icon {
    color: #ccc;
}
.contact-hours-time {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    flex-shrink: 0;
}
.contact-hours-time.open {
    color: #7bcbc1;
}
.contact-hours-divider {
    height: 1px;
    background: #f0f0f0;
}
.contact-hours-note {
    font-size: 13px;
    color: #aaa;
    line-height: 1.7;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

@media (max-width: 900px) {
    .contact-page-inner {
        flex-direction: column;
    }
    .contact-info-card,
    .contact-hours-card {
        padding: 40px 28px;
    }
}

@media (max-width: 900px) {
    .contact-page-inner {
        flex-direction: column;
    }
    .contact-info-card {
        padding: 40px 28px;
    }
    .contact-map-card {
        min-height: 300px;
    }
    .contact-map-card iframe {
        min-height: 300px;
    }
}

.form-emails{}
.form-emails .input-group{ padding:11px 0; width: 100%; line-height: 60px;}
.form-emails .input-group .input-group-addon{ width: 220px; background:none; border:none; text-align: left;}
.form-emails .input-group .input-group-addon b{ color: #ff0000; }
.form-emails .input-group .form-input{ width: 380px;}
.form-emails .input-group .form-control{ box-shadow: none;}

.input-text{ line-height:60px;padding:15px;height:60px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border:none; background: #f4f4f4; border-radius:2px; -webkit-border-radius: 2px; width: 100%;}
.textarea-text{ line-height:22px;padding:15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border:none; background: #f4f4f4;  -webkit-border-radius: 2px; width: 100%; min-height: 140px; resize:vertical;}
.input-btn{ line-height:60px; border:none; border-radius:0;  background:#333333; color: #fff; width:180px; text-align: center; height:60px; margin:30px auto 120px; display: block;}
.input-btn:hover{ background: #7bcbc1; transition: all .5s ease-out; -webkit-transition: all .5s ease-out;}

/*==============产品展示================*/
.product-list{ clear: both; }
.product-list .row{ margin:10px 0; display: block !important; }
.product-list .row .col-md-4{ padding:4px 0;box-sizing: border-box; text-align: center; float: left; }
.product-list .product-item{ padding:10px;display: inline-block; vertical-align: top; border-radius:3px; -webkit-transition:all .5s ease-out; transition:all .5s ease-out; overflow: hidden;  }
.product-list .product-item:hover{ box-shadow:0 0px 8px rgba(0,0,0,0.1); }
.product-list .product-item .product-img{width: 100%; height: 220px; overflow: hidden;}
.product-list .product-item .product-img img{width:100%; height: 100%; object-fit: cover; -webkit-transition:all .5s ease-out; transition:all .5s ease-out; }
.product-list .product-item:hover .product-img img{ -ms-transform: scale(1.1);  -webkit-transform: scale(1.1);  transform: scale(1.1);}
.product-list .product-item h5{ line-height:24px;height:24px; margin-top: 20px; text-align: left;}

/*==============产品详情页================*/
.Product-details-box{}
.product-title{ text-align: center; margin: 40px 0 60px;}
.product-title p{ line-height: 30px; color: #999999;}

.product-container{}
.product-container p{ line-height: 24px;}
.product-container p img{ max-width: 100%; margin: 0 auto;}

.product-page{ padding: 28px 50px; margin: 40px 0 80px; border-top:dashed 1px #faf2cc; border-bottom:dashed 1px #faf2cc;}
.product-page li{ display: inline-block; width:38%;height: 26px; line-height: 26px; }
.product-page li:first-child{ background: url("../images/page-icon.png") left -9px no-repeat;padding-left:30px;}
.product-page li:nth-child(2){ background: url("../images/page-icon.png") left -137px no-repeat;padding-left:30px;}
.product-page li a{}
.product-page li:last-child{ width:20%; background: url("../images/page-icon.png") left -265px no-repeat;padding-left:30px;}

@media only screen and (max-width:1000px){
    .aboutus_left{ padding-right:15px;}
}


@media only screen and (max-width:768px){
    .mt40{ margin-top:.8rem;}

    /*===============關於我們==================*/
    .ad-banner{ background:none!important; height: auto;}
    .ad-banner img{ max-width: 100%; display: block;}
    /*left*/
    .aboutus_left{padding-right:15px; width: 100%; flex-shrink: unset;}
    .aboutus_left .list-group{  line-height:1rem; }
    .aboutus_left .list-group a{display:block; padding:.2rem .5rem; white-space: normal; }
    .aboutus_left .list-group a i{ float: right;line-height:1rem;}

    /*================新聞詳情頁==================*/
    .article-container-box{ width:98%; margin:.7rem auto;}
    .article-title{ border-bottom: solid 1px #eee; padding:.5rem 0;}
    .article-title h1{ line-height:1.8rem;}

    /*==============聯繫方式================*/
    .form-emails .input-group .input-group-addon{ width:100%; display:block; line-height: 36px; background:none; border:none; text-align: left;}
    .form-emails .input-group .input-group-addon b{ color: #ff0000; }
    .form-emails .input-group .form-input{ width:100%;}


    /*==============产品详情页================*/
    .product-page{ padding: 28px .6rem; margin: 1rem 0 1.2rem;}
    .product-page li{ display: inline-block; width:100%; margin:.6rem 0;}

    .product-page li:last-child{ width:100%; }


}

/*===============產品圖片頁==================*/
.product-page-section {
    background: #f9f9f9;
    padding: 64px 0 80px;
}
.product-page-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}
.product-page-header {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e8e8e8;
}
.product-page-tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #7bcbc1;
    font-weight: 600;
    margin-bottom: 10px;
}
.product-page-title {
    font-size: 28px;
    font-weight: 300;
    color: #222;
    letter-spacing: 0.04em;
    margin: 0;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}
.product-grid-item {
    display: block;
    overflow: hidden;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s, transform 0.3s;
}
.product-grid-item:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}
.product-grid-img {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.product-grid-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.product-grid-item:hover .product-grid-img img {
    transform: scale(1.06);
}
.product-page-pagination {
    text-align: center;
}

@media (max-width: 900px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .product-grid { grid-template-columns: 1fr; }
    .product-page-inner { padding: 0 16px; }
}















































