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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


body{ font-family: "Montserrat","Noto Sans TC", sans-serif; letter-spacing: 0.5px;}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 { font-family: "Montserrat","Noto Sans TC", sans-serif; line-height: 1.4!important; }

.navbar-brand h1{line-height:normal!important;}
.navbar-brand h1 img{ width: 140px;}
@media (max-width: 768px) {
.navbar-brand h1 img{ width: 100px;}
}

/*** 頁面開啟的loading Start ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease-out, visibility 0s linear .5s;
    z-index: 99999;
 }

 #spinner.show {
     transition: opacity .8s ease-out, visibility 0s linear .0s;
     visibility: visible;
     opacity: 1;
 }
/*** 頁面開啟的loading End ***/



@media (max-width: 768px) {
.p-5{ padding: 1rem!important;}
.mb-5{ margin-bottom:1rem!important; }
.breadcrumb{ font-size: 14px;}
.dropdown-item{ font-size: 0.95rem;}
}


.text-right{ text-align: right; }
.text-left{ text-align: left; }
.back-to-top { position: fixed; right: 25px; bottom: 280px; display: flex; width: 58px; height: 58px; border: 1px solid #fff; align-items: center;
               justify-content: center; z-index: 99;}
@media (max-width: 768px) {
    .back-to-top { right: 10px; width: 45px; height: 45px; bottom: 120px;}
}

.btn { text-transform: uppercase; font-weight: 500; transition: .5s; }
.mt-myset-100{ margin-top: 100px;}





/*首頁*/
.Air_pollution_block{ position: relative; height: 500px; overflow: hidden; border-radius:20px; margin: 25px 0;}
.Air_pollution_block .word{ position: absolute; bottom:15%; z-index: 999; padding: 80px; width: 50%;}
.Air_pollution_block h3 a{ color: #fff!important; text-shadow: 0 0 4px #555; font-size: 36px;}
.Air_pollution_block p.from {display: inline-block; padding: 1px 12px; border-radius: 20px; font-size: 13px; color: #333; margin-bottom: 10px;
                             background-color: #fff; }
@media (max-width: 1440px) {
    .Air_pollution_block .word{ width: 75%; top:-5%;}
}
@media (max-width: 1366px) {
    .Air_pollution_block{ height: 380px;}
}
@media (max-width: 1200px) {
    .Air_pollution_block{ height: 390px;}
    .Air_pollution_block .word{ width: 75%; min-width:550px; top: -10%;}
}
@media (max-width: 768px) {
    .Air_pollution_block{ height: 400px; background-color: #eee;}
    .Air_pollution_block .word{ width: 100%; padding: 0 20px; top: 30%; min-width:auto; }
    .Air_pollution_block h3 a{ font-size: 30px;}
}
/*Addwii 官網首頁活動*/
#carouselId-adwii .carousel-indicators{
    margin-left: 0%;
    margin-right: 0%;
}
#carouselId-adwii .carousel-indicators li{
    width: 25%;
    color: #AFAFAF;
    font-size: 18px;
    border-top: 2px solid #AFAFAF;
    text-align: center;
    padding-top: 10px;
    margin: 0;
    text-indent: inherit;
}
#carouselId-adwii .carousel-indicators li::before{
    content: "";
    width: 22px;
    height: 22px;
    background: #AFAFAF;
    position: absolute;
    top: -10px;
    border-radius: 50%;
    border: 4px solid #fff;
    margin-left: 30px;
}
#carouselId-adwii .carousel-indicators li.active {
    color: #00B3BC!important;
    border-top: 2px solid #00B3BC;
    font-weight:500;
}
#carouselId-adwii .carousel-indicators li.active::before{
    background: #00B3BC;
}
@media (max-width: 768px) {
    #carouselId-adwii .carousel-indicators{
        top: -60px;
    }
    #carouselId-adwii .carousel-inner{
        margin-top: 100px;
    }
    #carouselId-adwii .carousel-indicators li{
        font-size: 13px;
    }
    #carouselId-adwii .carousel-indicators li::before{
        width: 15px;
        height: 15px;
        top: -7px;
        border: 3px solid #fff;
        margin-left: 18px;
    }
}


.CTA_feature_bg1{ background: url("../img/CTA-to-descript-02-2560.jpg") 50% center no-repeat; background-size: cover; position: relative; background-color: #e9e9e9;}
.CTA_feature_bg1 span{ font-size: 19px; color:#6666cc; text-decoration: underline; font-weight: 600; letter-spacing: 1px; }

@media (max-width: 1200px) {
    .CTA_feature_bg1{  background-position:52% bottom; background-size:auto 100%;}
}
@media (max-width: 768px) {
    .CTA_feature_bg1{  background-position:68% bottom; background-size:auto 50%;}
	.CTA_feature_bg1 span{ font-size: 18px; display: block;}
}

@media (max-width: 1200px) {
    .about-word h3{ font-size:22px;}
}

.about-word p{
    font-size: 16px;
    color: #666;
    line-height: 1.6rem;
    margin-bottom: 0rem;
    margin-top: 0rem;
    text-align: justify;
}

.data_count_block .list1{ padding: 20px;}
.data_count_block h3{ font-size: 30px; color: #333!important;}

/* 首頁封面區塊樣式 */
.hero-section {
    background: url("../img/index-cover-bg.jpg") center center no-repeat;
    background-size: cover;
    min-height: 65vh;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.hero-content {
    padding-bottom: 20px;
    text-align: left;
    z-index: 2;
    width: 100%;
}

.hero-title {
    font-family: serif;
    color: #fff;
    font-size: 4rem;
    line-height: 0.8;
    font-weight: 400;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.6rem;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 0 4px #9b9b9b;
    font-weight: 300;
}

/* 響應式設計 */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 3.5rem;
    }

    .hero-subtitle {
        font-size: 1.4rem;
    }

    .hero-content {
        padding-bottom: 60px;
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 70vh;
        background-position: center top;
    }

    .hero-title {
        font-size: 2.8rem;
        line-height: 0.9;
    }

    .hero-subtitle {
        font-size: 1.2rem;
        line-height: 1.4;
    }

    .hero-content {
        padding-bottom: 40px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-section {
        min-height: 60vh;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.5;
    }

    .hero-content {
        padding-bottom: 30px;
        text-align: center;
    }
}

/* 新的數據區塊樣式 */
.sub-title{
    font-size: 1.6rem;
    color: #fff;
    line-height: 1.3;
    margin-top: 0.5rem;
    text-shadow: 0 0 4px #9b9b9b;
}
.data_count_block .content-section {
    padding: 20px 40px 20px 0;
    text-align: center;
}

.data_count_block .main-title {
    font-size: 36px;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
    margin-bottom: 20px;
}

.data_count_block .description-text {
    font-size: 16px;
    color: #999;
    line-height: 1.6;
    margin-bottom: 40px;
}

.data_count_block .stats-container {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.data_count_block .stat-circle {
    width: 140px;
    height: 140px;
    border-radius: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: linear-gradient(135deg, #e6feff 0%, #7dc7c7 100%);
}

.data_count_block .stat-number {
    font-size: 48px;
    font-weight: 400;
    color: #00B3BC;
    line-height: 1;
    margin-bottom: 1px;
}

.data_count_block .stat-unit {
    font-size: 16px;
    font-weight: 400;
    color: #375d5f;
    margin-bottom: 8px;
}

.data_count_block .stat-description {
    font-size: 13px;
    color: #fff;
    line-height: 1.2;
    font-weight: 300;
}

.Certification_icon{ width: 90px; height: 90px; margin: 0 auto; }
.Certification_icon img{ width: 100%; border-radius: 0;}

@media (max-width: 1300px) {
    .Certification_icon{ width: 80px; height: 80px; margin:10px auto;}

    .data_count_block .main-title {
        font-size: 32px;
    }

    .data_count_block .stat-circle {
        width: 130px;
        height: 130px;
    }

    .data_count_block .stat-number {
        font-size: 42px;
    }
}

@media (max-width: 1200px) {
    .data_count_block .content-section {
        padding: 20px 20px 20px 0;
    }

    .data_count_block .main-title {
        font-size: 28px;
    }

    .data_count_block .stats-container {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .data_count_block .content-section {
        padding: 20px 0;
        text-align: center;
    }

    .data_count_block .main-title {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .data_count_block .description-text {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .data_count_block .stats-container {
        justify-content: center;
        gap: 15px;
    }

    .data_count_block .stat-circle {
        width: 120px;
        height: 120px;
    }

    .data_count_block .stat-number {
        font-size: 36px;
    }

    .data_count_block .stat-unit {
        font-size: 14px;
    }

    .data_count_block .stat-description {
        font-size: 10px;
    }
}
/*===首頁===*/





/*===關於===*/
.culture_list{ padding: 20px 0;}
.culture_list h3{ display: contents;}
.culture_list span{ padding:0 10px;}
@media (max-width: 1200px) {
	.culture_list{ padding:0;}
    .culture_list h3{ display: initial; font-size: 22px;}
    .culture_list span{ display: block; margin-bottom: 12px; font-size: 15px; padding:0px;}
}
@media (max-width: 768px) {
    .culture_list h3{ font-size: 18px;}
}
/*網站時間軸*/
.timeline{ width: 100%; }
.timeline li{ list-style-type: none; box-sizing: border-box; padding: 0px 40px; position: relative;}
.timeline li::after{ content: ''; position: absolute; z-index: -1; width: 1px; top: 0; height: 100%; background-color: #71BABA; left: 0;}
.timeline li:before{ content: ''; position: absolute; top: 50px; bottom: 0; width: 22px; height: 22px; border-radius: 50%;
    background-color: #00B3BC; border: 4px solid #fff; z-index: 2; }
.timeline li::before{ left: -10px;}
.timeline p{ font-size: 17px; color: #555; margin-bottom: 0; padding-top: 10px; padding-bottom: 30px;}
.company-tag{ font-size: 15px; line-height:normal; color: #00B3BC;; background-color: #E5F7F8;; padding: 4px 12px; border-radius: 30px; display: inline-block;
              margin-bottom: 10px; border: 1px solid #00B3BC; }
.company_photo img{ border-radius: 15px 50px 15px 50px; }
@media (max-width: 1300px) {
    .timeline p{ font-size: 15px; }
}
@media (max-width: 768px) {
    .timeline li{ padding:0 0 0 20px ;}
    .timeline li::after{ left: -8px;}
    .timeline li::before{ left: -19px;}
    .timeline p{ font-size: 14px; padding-bottom: 10px;}
    .company_photo img{ width:100%;}
}
.certificate img{ border:1px solid #71BABA; display: block; border-radius:15px; padding: 10px; width: 95%; margin:10px auto 30px auto ;}
.certificate p{ font-size: 16px; text-align: center;}
@media (max-width: 1200px) {
    .certificate p{ font-size:13px; }
}

/*===關於===*/







/*===活動===*/
.activity_list_block .list{ padding: 20px 60px;}
.activity_list_block h3{ font-size:32px!important; color: #333!important;}
.activity_list_block h4{ font-size: 20px; color: #333;}
.activity_list_block p{ font-size: 16px;}
.activity_border{ border: 1px solid #00B3BC; border-radius:15px 50px 15px 50px;}
.activity_border1{ border: 1px solid #00B3BC; border-radius:50px 15px 50px 15px;}
.activity_border2{ border: 1px solid #00B3BC; border-radius:15px;}
.activity_photo-radius img{ border-radius:0px 50px 15px 0px; width: 100%; }
.activity_photo-radius1 img{ border-radius:50px 0px 0px 15px; width: 100%; }

.activity_photo{ text-align: center;}
.activity_photo img{ margin:1rem auto; width: 98%;}
.photo_border-radius1 img{ border-radius: 50px 15px 50px 15px!important; }
.photo_border-radius2 img{ border-radius: 15px 50px 15px 50px!important; }
.photo_border-radius3 img{ border-radius: 15px 50px 15px 50px!important; }
.photo_border-radius4 img{ border-radius: 50px 15px 50px 15px!important; }

@media (max-width: 1200px) {
    .activity_list_block h3{ font-size:26px!important; }
}

@media (max-width: 1000px) {
    .activity_list_block h3{ font-size:22px!important; }
    .activity_list_block h4{ font-size:15px; margin-bottom:8px;}
	.activity_list_block p{ font-size: 14px; line-height: 22px;}
    .activity_photo-radius img{ border-radius:15px 50px 0px 0px;}
    .activity_photo-radius1 img{ border-radius:50px 15px 0px 0px;}
}
@media (max-width: 768px) {
    .activity_list_block .list{ padding: 15px;}
    .activity_photo img{ margin:0.5rem auto; width:100%;}
}
/*===活動===*/







/*===活動內頁===*/
.one_activity-header { background-repeat: no-repeat; background-position: center center; background-size: cover; min-height: 600px; display: flex;
                       justify-content: flex-end; align-items: flex-end; padding:0;}
.one_activity-header h1{ font-size: 32px; color: #fff;}
.one_activity-header h4{ font-size: 20px; color: #fff; margin-bottom: 0;}
.one_activity-title{ width:100%; background-color:rgba(113, 186, 186, .8); position: relative;}
.share_btn, .share_btn a{ color: #fff; margin-bottom: 12px; text-align: end;}
.share_btn i{ font-size: 20px;}
.round_block{ background-color: #fff; width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
              position: absolute; bottom: 70px; right: 17%;}
.round_block img{ width:70%;}

@media (max-width: 1440px) {
    .share_btn{ text-align: left;}
}
@media (max-width: 1200px) {
    .share_btn i{ font-size: 18px;}
    .one_activity-header h1{ font-size: 28px;}
    .round_block{ width: 120px; height: 120px; right: 10%; top: -22%; }
}
@media (max-width: 1000px) {
    .round_block{ width: 90px; height: 90px; right: 10%; top: -22%; }
}
@media (max-width: 768px) {
    .one_activity-header{ min-height:auto; height: 410px; background-position: top center; background-size: 220%; width: 100%;}
    .one_activity-header h1{ font-size:22px;}
    .one_activity-header h4{ font-size: 15px; margin-bottom: 3px;}
    .one_activity-title{ background-color:rgba(113, 186, 186, 1); min-height: 195px;}
    .round_block{ width: 75px; height: 75px; right: 10%; top: -22%;}
    .share_btn{ font-size: 14px; margin-bottom: 10px; margin-top: 10px;}

}
/*===活動內頁===*/








/* ===媒體報導=== */
.rwdTable {
    display: table;
    width: 100%;
    border-collapse: separate;
  }

  .rwdTr, .rwdTitle_gorup {
    display: table-row;
  }

  .rwdTh, .rwdTd {
    display: table-cell;
    vertical-align: top;
    padding: 20px 10px;
  }
  .rwdTd{ border-bottom: 1px solid #AFAFAF;}

  .rwdTh {
    background-color: #eee;
  }


.report_tag{ padding: 20px 0;}
.report_tag a{ display: inline-block; padding: 3px 12px; line-height: normal; font-size: 15px; color: #fff;
                margin:0px; background-color: #71BABA; width: max-content; }
.report_tag a:hover{ background-color: #333; color: #fff;}
.report_tag a.click{ background-color: #333; color: #fff;}

.report_tag1{ padding: 20px 0;}
.report_tag1 a{ display: inline-block; padding: 3px 12px; line-height: normal; font-size: 15px; color: #fff;
                margin:3px 4px 3px 0px; background-color: #B5B5B5; }
.report_tag1 a:hover{ background-color: #71BABA; color: #fff;}
.report_tag1 a.click{ background-color: #71BABA; color: #fff;}

@media (max-width: 1000px) {

    /* 將表格中間的空間刪掉 */
    .rwdTable {
      border-spacing: 0px;
    }

    /* 隱藏表頭列 */
    .rwdTr:first-of-type {
      display: none;
    }

    .rwdTr{
      display: inline-block;
      border-bottom: 1px solid #ccc;
      margin: 5px 0;
      width: 100%;
    }

    .rwdTd {
      display: table;
      padding: 3px 10px;
      width: 100%;
      border-bottom:1px solid #fff ;
      font-size: 15px;
    }

    .rwdTd:before{
      content: attr(data-th);
      display: table-cell;
      font-weight: bold;
      padding: 3px 10px;
      white-space: nowrap;
      text-align: left !important;
      width: 100px;
      vertical-align: top;
      background-color: #EEEEEE;
      display: none;
    }

    .rwdTd span{
      padding: 0;
      display: inline-block;
    }
  }
/* ===媒體報導=== */




/* ===法律隱私條款=== */
.terms_block h1{ font-size:40px; padding: 1em 0;}
.terms_block h2{ font-size:30px!important; font-weight: 600; padding: 1em 0 0.5em 0;}
.terms_block p{ font-size: 18px; line-height:1.6;}
.terms_block p b{font-size: 20px; font-weight: 600; padding-top: 1em;}

.terms_block li{ font-size: 18px; line-height:1.8; padding:3px 0;}
.terms_block a{ color:#999!important; }
.terms_block a:hover{ color:#3668e4!important; text-decoration: underline;}
.number_ul{list-style-type: decimal;}
@media (max-width: 768px) {
	.terms_block h1{ font-size:28px!important; }
	.terms_block h2{ font-size:20px!important; }
	.terms_block p b{font-size: 17px; }
	.terms_block p, .terms_block li{ font-size: 15px; line-height: 24px;}
}
/* ===法律隱私條款=== */




/*** Navbar Start ***/
.navbar .navbar-nav {
    padding: 0;
}

.navbar .navbar-nav .nav-link {
    padding: 15px;
    color: var(--bs-dark);
    font-weight: 500;
    font-size: 16px;
    outline: none;
    transition: .5s;
	cursor: pointer;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active  {
    color: var(--bs-primary);
    transition: .5s;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 800;
    vertical-align: middle;
    margin-left: 8px;
}


@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        transition: .5s;
        opacity: 0;
    }
}

.dropdown .dropdown-menu a:hover,
.dropdown .dropdown-menu a.active {
    background: var(--bs-dark);
    color: var(--bs-primary);
}

.navbar .nav-item:hover .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    transition: .5s;
    opacity: 1;
}

.navbar-toggler {
    /*background: var(--bs-secondary);*/
    color: var(--bs-light) !important;
    padding: 5px 12px;
    /*border: 2px solid var(--bs-primary) !important;*/
}

@media (max-width: 1200px) {
	.navbar{ padding-top: 0; padding-bottom: 0;}
    .navbar .navbar-nav .nav-link {
	padding: 15px 10px;
    font-size: 15px;
	}
}
/*** Navbar End ***/









/*** Carousel Start ***/
.carousel-item {
    position: relative;
	text-align:center;
    height: 700px;
	overflow: hidden;
}

.carousel-item1{
    height: 620px;
}

.carousel-item2{
    height: 500px;
    margin-top: 20px;
}
@media (max-width: 768px) {
    .carousel-item2{
        height: 550px;
        margin-top: 0px;
    }
}

.carousel-item iframe {
    z-index: 1;
    position: relative;
}

/* 只針對 product-carousel 使用 background-image 方式處理圖片 */
#product-carousel .carousel-item {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center; /* 2560尺寸靠左對齊 */
}

/* 只隱藏 product-carousel 內的 img 標籤 */
#product-carousel .carousel-item img {
    display: none !important;
}

/* 各個 product-carousel item 的背景圖片 */
#product-carousel .carousel-item.baby-slide {
    background-image: url('../img/product-carousel-slide-baby-2560.jpg');
}

#product-carousel .carousel-item.kitchen-slide {
    background-image: url('../img/product-carousel-slide-kitchen-2560.jpg');
}

#product-carousel .carousel-item.bathroom-slide {
    background-image: url('../img/product-carousel-slide-bathroom-2560.jpg');
}

#product-carousel .carousel-item.livingroom-slide {
    background-image: url('../img/product-carousel-slide-livingroom-2560.jpg');
}

#product-carousel .carousel-item.bedroom-slide {
    background-image: url('../img/product-carousel-slide-bedroom-2560.jpg');
}

#product-carousel .carousel-item.dining-slide {
    background-image: url('../img/product-carousel-slide-dining-2560.jpg');
}

.carousel-item::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}
.add_mask::after {
    background: rgba(0, 0, 0, .2);
}

.carousel-caption {
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 1;
    left: 10%;
    right: 10%;
    text-align: end;
    justify-content: flex-end;
}

.carousel-caption .word-position{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


.carousel-content{ max-width:700px; margin: 0;}
.carousel-content h1, .carousel-content p, .carousel-content h4{ width: 70%;}
.carousel-content h1{ line-height: 1.3!important;}
.carousel-content p.from{ font-size: 14px;}
.carousel-content p.text-linkstyle2 a:hover i{ margin-left: 20px; transition: all .5s;}
.carousel-content h4{ font-size: 16px;}
.carousel-content h4 img{ position: relative; left:auto; top:auto; transform:inherit;}
.text-color1{ color: #222;}
.text-color2{ color: #00B3BC !important;}
.text-color-shadow{ text-shadow: 0 0 5px #666;}

@media (max-width: 1200px) {
    .carousel-item1{ height: 500px!important;}
	.carousel-content h1, .carousel-content p, .carousel-content h4{ width: 70%; }
    .carousel-content h1{ font-size: 40px;}
	.carousel-content p{ font-size: 15px; line-height: 1.5; }
}


@media (max-width: 768px) {
/* 手機版背景圖片居中 - 只針對 product-carousel */
#product-carousel .carousel-item {
    background-position: center center !important;
}

/* 手機版使用不同的背景圖片 - 只針對 product-carousel */
#product-carousel .carousel-item.baby-slide {
    background-image: url('../img/product-carousel-slide-baby-1350.jpg') !important;
}

#product-carousel .carousel-item.kitchen-slide {
    background-image: url('../img/product-carousel-slide-kitchen-1350.jpg') !important;
}

#product-carousel .carousel-item.bathroom-slide {
    background-image: url('../img/product-carousel-slide-bathroom-1350.jpg') !important;
}

#product-carousel .carousel-item.livingroom-slide {
    background-image: url('../img/product-carousel-slide-livingroom-1350.jpg') !important;
}

#product-carousel .carousel-item.bedroom-slide {
    background-image: url('../img/product-carousel-slide-bedroom-1350.jpg') !important;
}

#product-carousel .carousel-item.dining-slide {
    background-image: url('../img/product-carousel-slide-dining-1350.jpg') !important;
}

.carousel-item h2{ font-size: 26px!important;}
.carousel-item1{ height: 800px!important;}
.carousel-content{ margin-top: 100px;}
.carousel-content h1, .carousel-content p, .carousel-content h4{ width: 100%;}
.carousel-content h4 img{ width: 120px;}
.carousel-content h1{ line-height: 1.4 !important; font-size: 30px;}
.carousel-content p{ font-size: 15px; line-height: 1.6; height: 100px; overflow: hidden;}
.carousel-content p.from{ font-size: 12px; line-height: 1.2; height:auto; }
}

@media (max-width: 500px) {
    .carousel-caption{ right: 5%; left: 5%;}
    .carousel-content h4 img{ width: 100px; height: auto;}
    .text-color-shadow{ text-shadow: 0 0 3px #666;}
}



.carousel-control-prev {
    width: 80px;
    position: absolute;
    left: 0;
    transition: .5s;
    opacity: 1;
	border: none!important;
}
.carousel-control-prev:hover{
	background-color:transparent!important;
	box-shadow:none!important;
}
.carousel-control-next {
    width: 80px;
    position: absolute;
    right: 0;
    border-radius: 30px 0 0 30px;
    transition: .5s;
    opacity: 1;
	border: none !important;
}
.carousel-control-next:hover{
	background-color:transparent!important;
	box-shadow:none!important;
}

#product-carousel .carousel-indicators ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}


#product-carousel .carousel-indicators li {
    width: auto;
    font-size: 24px;
    margin: 0 20px 30px 0;
	opacity: 1;
	text-indent: inherit;
	background-color:transparent;
	color: rgba(255, 255, 255, .5);
	font-weight:600;
}
.carousel-indicators1{
    right:auto!important;
    margin-bottom: 3rem;
}
@media (max-width: 768px) {
    .carousel-indicators1{
        right:0!important;
        width: 100%!important;
        margin: 0;
    }
    #product-carousel .carousel-indicators li{ text-align: center;}
}

#product-carousel .carousel-indicators li.active { color: #fff; }
@media (max-width: 768px) {
     #product-carousel .carousel-indicators li { font-size: 16px; }
     #product-carousel .carousel-indicators li.active { color:#fff; }
 }

#carouselId-2 .carousel-indicators li {
    width: 8px;
    height: 8px;
    margin: 0 5px 30px 5px;
	opacity: 1;
	text-indent: inherit;
	text-align: center;
	background-color:#fff;
	color: #fff;
	border-radius: 50%;
	border: none;
}

#carouselId-2 .carousel-indicators li.active {
    background-color: #71BABA;
}

#carouselId-3 .carousel-indicators li {
    width: 8px;
    height: 8px;
    margin: 0 5px 30px 5px;
    opacity: 1;
    text-indent: inherit;
    text-align: center;
    background-color:#CCCCCC;
    color: #fff;
    border-radius: 50%;
    border: none;
}
#carouselId-3 .carousel-indicators li.active {
	background-color: #71BABA;
	width: 52px;
	border-radius: 15px!important;

}
@media (max-width: 768px) {
    .carousel-item {
        width: 100%;
    }
    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }
}

/* 大螢幕 2560px 特殊樣式 - 只針對 product-carousel */
@media (min-width: 2560px) {
    #product-carousel .carousel-item {
        height: 700px; /* 固定高度 */
        background-position: left center; /* 靠左對齊 */
    }

    /* 確保文字內容在正確位置 */
    #product-carousel .carousel-caption {
        left: 5%;
        right: 5%;
    }
}

/* 超大螢幕優化 - 只針對 product-carousel */
@media (min-width: 1920px) and (max-width: 2559px) {
    #product-carousel .carousel-item {
        background-position: left center; /* 靠左對齊 */
    }
}
/*** Carousel End ***/


/*** About Hero Section Start ***/
.about-hero {
    position: relative;
    height: 500px;
    background-image: url('../img/about-cover.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-hero-content {
    text-align: center;
    color: white;
    z-index: 2;
    position: relative;
}

.about-hero-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #00B3BC;
}

.about-hero-subtitle {
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    background-color: #00B3BC;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Tablet styles */
@media (max-width: 1200px) {
    .about-hero {
        height: 400px;
    }

    .about-hero-title {
        font-size: 40px;
        margin-bottom: 16px;
    }

    .about-hero-subtitle {
        font-size: 18px;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    .about-hero {
        height: 350px;
        background-position: center center;
    }

    .about-hero-content {
        padding: 0 20px;
    }

    .about-hero-title {
        font-size: 32px;
        margin-bottom: 16px;
        line-height: 1.2;
    }

    .about-hero-subtitle {
        font-size: 16px;
        line-height: 1.4;
    }
}

/* Small mobile styles */
@media (max-width: 480px) {
    .about-hero {
        height: 300px;
    }

    .about-hero-title {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .about-hero-subtitle {
        font-size: 14px;
    }
}
/*** About Hero Section End ***/






/*** 空污議題 Start ***/
.pollution-news {
    position: relative;
    margin-right: 60px;
	padding-bottom: 50px;
}

.pollution-news .owl-nav .owl-prev,
.pollution-news .owl-nav .owl-next {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 48px;
    height: 48px;
    background: #F1EFFF;
    color: #706BB4;
	border: 1px solid #706BB4;
    font-size: 22px;
    bottom: 5%;
    right: 24%;
    border-radius: 50%;
    transition: .5s;
}

.pollution-news .owl-nav .owl-prev:hover {
	background-color: #706BB4;
	color:#fff!important;
}

.pollution-news .owl-nav .owl-next {
    left: auto;
    right: 20%;
}

@media (max-width: 1200px) {
.pollution-news .owl-nav .owl-next {
    right: 15%;
}
}


@media (max-width: 768px) {
    .pollution-news {
        margin-top: 0;
    }
    .pollution-news .owl-nav .owl-prev,
	.pollution-news .owl-nav .owl-next {
		width: 40px; height: 40px; right: 20%;
	}
	.pollution-news .owl-nav .owl-next{
		right: 6%;
	}

}

.pollution-news .owl-nav .owl-next:hover {
	background-color: #706BB4;
	color:#fff!important;
}

.pollution-news .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pollution-news .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 8px;
    height: 8px;
    background: var(--bs-secondary);
    border-radius: 15px;
    transition: .5s;
}

.pollution-news .owl-dot.active {
    width: 30px;
    background: var(--bs-primary);
}
/*** 空污議題 End ***/



.activity-block{ display: flex; align-items: center; justify-content: center; }
.activity_word{ text-align: left;}
.activity_word h3{ font-size: 36px;}
.activity_word h4{ font-size: 20px;}
.activity_word button{ position: relative; z-index: 999;}
.activity_photo img{ width:100%; border-radius: 15px 50px 15px 50px; transform:none; position: relative; left:auto; top:auto; }
@media (max-width: 1200px) {
    .activity_word h3{ font-size: 24px;}
    .activity_word h4{ font-size: 15px;}
    .activity_photo img{ border-radius: 15px;}
}







/*連結效果*/

.text-linkstyle2 a { font-size:16px; color: #fff; position: relative; font-family: "poppins","Noto Sans TC", sans-serif;
                     display: inline-block; padding: 2px 6px; cursor: pointer; margin-top: 8px; line-height: normal!important;}
.text-linkstyle2 a, .text-linkstyle2 a:after, .text-linkstyle2 a:before { transition: all .5s; }
.text-linkstyle2 a:hover{ color: #fff;  }

.text-linkstyle2 a:after { position: absolute; bottom: 0; left: 0; right: 0; width: 0%; content: '.'; color: transparent;
	                       background-color: #fff; height: 2px; text-align: left; content: '.'; margin: 0; opacity: 0; }

.text-linkstyle2 a:hover:after{ width: 100%; z-index: 10; animation: fill 1s forwards; -webkit-animation: fill 1s forwards; -moz-animation: fill 1s forwards; opacity: 1;}









/*** Footer Start ***/
.footer {
	background-color: #71BABA;
    background-size: cover;
    color: rgba(255, 255, 255, .7);
}


.footer-item p{ margin-bottom: 2px;}

/*** Footer End ***/


/*** Copywright Start ***/

.copyright .copyright-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.copyright .copyright-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.copyright{ font-size: 15px; color:#231F20; }
@media (max-width: 768px) {
.copyright{ text-align: center; font-size: 13px;}
}
/*** Copywright End ***/





.navbar-toggler { border-radius: 5px; }
.dropdown-menu { border-radius: 5px; }




h1{ font-family: "Montserrat","Noto Sans TC", sans-serif; font-size:4rem; }
h2{ font-family: "Montserrat","Noto Sans TC", sans-serif; font-size: 40px!important;}
p{ font-family: "Montserrat","Noto Sans TC", sans-serif; font-size: 18px; line-height: 30px;}


@media (max-width: 1200px) {
	h1{ font-size: calc(1.5rem + 4vw);}
    h2{ font-size: 30px!important; line-height: 1.5;}
    p{ font-size: 15px; line-height: 24px;}
}


.btn-myset{ min-width: 180px; min-height: 52px; border: none; border-radius: 3px; padding: 0 10px; }
.btn-myset:hover{ background-color: #fff; color: #71BABA; }
.btn-myset i{ font-size: 18px; margin-left: 10px; position: relative; top:4px;}



.btn-myset1{ min-width: 250px; min-height: 52px; border: none; border-radius: 3px; background-color: #fff; color: #000;}
.btn-myset1:hover{ background-color: #333; color: #fff;}
.btn-myset1:active, .btn-myset1:focus, .btn-myset1:checked{ color: #00B3BC!important;}
@media (max-width: 768px) {
    .btn-myset{ min-width:100px; width: 90%; margin:5px auto;}
    .btn-myset1{ min-width:100px; width: 90%; margin:5px auto;}
}


.btn-myset2{ min-width: 180px; min-height: 50px; border: 1px solid #00B3BC; background-color: #E5F7F8; border-radius: 4px; color: #00B3BC;}
.btn-myset2:hover{ background-color: #00B3BC; color: #fff;}

.btn-myset2_w{ min-width:auto; min-height: 40px!important; border: 1px solid #00B3BC; background-color: #E5F7F8!important; border-radius: 4px; color: #00B3BC!important;
               width: fit-content; padding: 5px 10px 6px 10px!important;}
.btn-myset2_w:hover{ background-color: #00B3BC; color: #fff;}
.btn-myset2_w i{position: relative; top:4px; font-size: 22px;}
@media (max-width: 768px) {
    .btn-myset2{ font-size: 15px; min-width: 120px; min-height: 42px; margin-bottom: 20px;}
}


.btn-myset3{ min-width: 250px; min-height: 52px; border: none; border-radius: 3px; background-color: #333; color: #fff;}
.btn-myset3:hover{ background-color: #00B3BC; color: #fff;}
.btn-myset3:active, .btn-myset1:focus, .btn-myset1:checked{color: #fff;}
.btn-myset3 i{ font-size: 18px; margin-left: 10px; position: relative; top:4px;}










.footer-about{ padding-right: 40px; }
.footer-about .logo img{ width: 160px;}
.footer-about p{ font-size:15px; line-height: 1.8; color: #fff;}
.footer-about p a{ color:#fff!important; font-size: 15px; margin-right: 20px; display:inline-block;}
.footer-about p a:hover{ color:#fff!important;}

.footer-community i{ font-size: 30px; }
.footer-community a{ color: #fff; margin-left:15px;}

@media (max-width: 768px) {
	.footer-about{ padding-right: 0px; }
	.footer-about .logo img{ width: 120px;}
	.footer-about p{ font-size:15px;}
	.footer-about p a{ display:block; font-size:14px;}
	.footer-community{ text-align: left; margin-bottom: 30px;}
}


.footer h4 a{ color: #fff; font-size: 18px!important;}
.footer-item a { position: relative; font-family: "poppins","Noto Sans TC", sans-serif; display: inline-block; cursor: pointer;
	             font-size: 16px; color: #fff;}

.footer-item a, .footer-item a:after, .footer-item a:hover { transition: all .5s; }
.footer-item a:hover{ color: #231F20;}

.footer-item a:after { position: absolute; bottom: 0; left: 0; right: 0; width: 0%; content: '.'; color: transparent;
	                   background-color:#231F20; height: 2px; text-align: left; content: '.'; margin:0; opacity: 0; }

.footer-item a:hover:after { width: 100%; z-index: 10; animation: fill 1s forwards; -webkit-animation: fill 1s forwards; -moz-animation: fill 1s forwards; opacity: 1;}

@media (max-width: 1000px) {
	.footer-item a { font-weight: 400; font-size: 13px; margin-left:0 ; margin-right: 20px;}
}

.copyright .footer-item{ text-align: right;}
.copyright .footer-item a{ color:#231F20; font-size: 15px; margin-left: 30px; }
@media (max-width: 1000px) {
    .copyright .footer-item a{ margin-left: 10px;}
}
@media (max-width: 500px) {
    .copyright .footer-item{ text-align:center;}
    .copyright .footer-item a{ font-size: 14px; line-height: 22px;}
}


.CTA_block{  padding: 4em;}
.CTA_btn_position{ text-align: right;}
.bg_colo1{ /*background-color: #E5E5E5;*/ background-color: #E7E8EA;}
.bg_colo2{ background-color: #E1DEF3;}
.bg_colo3{ background-color: #999; }
.bg_colo4{ background-color: #7C7B89;}
.bg_colo5{ background-color: #F2F1FA;}
.bg_colo6{ background-color: #E0EBFB;}


@media (max-width: 1000px) {
    .CTA_block { padding: 4em 2em 2.5em 2em; text-align: center;}
	.CTA_btn_position { text-align: center; margin: 0.6em auto; }
}

@media (max-width: 768px) {
	.CTA_block { padding: 4em 0.8em 2.5em 0.8em;}
}



/*影片播放鈕*/
.btn-play {
    position: relative;
    display: block;
    box-sizing: content-box;
    width: 26px;
    height: 36px;
    border-radius: 100%;
    border: none;
    outline: none !important;
    padding: 18px 20px 20px 28px;
    background: #4761ff;
	float: left;
}
@media (max-width: 768px) {
	.btn-play { padding: 13px 15px 15px 23px;}
}

.btn-play:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 60px;
    height: 60px;
    background: #4761ff;
    border-radius: 100%;
    animation: pulse-border 1500ms ease-out infinite;
}

.btn-play:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 60px;
    height: 60px;
    background:#4761ff;
    border-radius: 100%;
    transition: all 200ms;
}

.btn-play span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    left: 3px;
    border-left: 18px solid #FFFFFF;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
        opacity: 0;
    }
}
.modal-dialog { max-width: 1000px; margin: 30px auto; }
.modal-body { position:relative; padding:0px; }
.btn-close { position:absolute; right:-40px; top:0;
             background-color: #fff; opacity: 1; padding: 10px; border-radius: 2px; }
.btn-close a{ color: #fff!important; }


.about-reverse{ display: flex; align-items: center; justify-content: center;}
@media (max-width: 1000px) {
.about-reverse{ flex-direction: column-reverse;}
}




/*高度置中*/
.vision-block{ display: flex; align-items: center; justify-content: center;}
.vision-block h5{ color: #999; font-size: 16px; font-weight: normal; }
.vision-block h3{ color: #fff; font-size: 32px; }
.CTA_word h3.margin-top{ margin-top: 3em; background-color: #fff; border-radius: 30px; padding:3px 15px; display:inline-block; font-size: 20px;}
.CTA_word p.margin-bottom{ margin-bottom:0;}
.CTA_word,.CTA_word1{ text-align: left;}
.CTA_word .word_break1{ display: contents;}
.vision-block-word{ max-width: 550px;}
.vision-block-photo{ background-image:url("../img/about-mission-01.jpg"); background-size: cover; min-height: 500px; }



@media (max-width: 1400px) {
	.CTA_word h3.margin-top{ margin-top: 1.5em;}
}
@media (max-width: 1300px) {
	.vision-block-word{ padding:1.5em 4em 1em 1em;}
	.CTA_word h3.margin-top{ margin-top: 1em;}
}
@media (max-width: 1000px) {
	.CTA_word,.CTA_word1{ text-align: center; padding:1em;}
	.vision-block h5{ margin-top: 1em; }
    .CTA_word .word_break1{ display:block;}
    .CTA_solution_bg .flat-set img{ position: relative; right:70px;}

    .block_reverse{ flex-direction: column-reverse; }
}
@media (max-width: 768px) {
	.CTA_word{ text-align: center; }
    .CTA_word1{ text-align: center; margin-bottom: 180px; }
	.vision-block h5{ font-size: 15px; margin-top: 1.5em; }
	.vision-block h3{ font-size: 22px; }
}
@media (max-width: 700px) {
	.vision-block-word{ padding: 2em 1em 2em 1.5em;}
	.CTA_word h3.margin-top{ margin-top: 2em;}
}





@media (min-width: 2560px) {
.img-cover{ width: 100%;}
}



@media (max-width: 1000px) {
.phone-padding{ padding-bottom: 20px!important;}
}


.web-see{ display: block;}
.phone-see{ display: none;}
@media (max-width: 500px) {
.web-see{ display: none;}
.phone-see{ display: block;}
}