@charset "utf-8";

@import url("reset.css");

@import url("loading.css");

@import url("aos.css");

@import url("fontawesome_all.css");

@import url("../fancybox-master/dist/jquery.fancybox.css");

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Noto+Serif+HK:wght@200..900&family=Noto+Serif+JP:wght@200..900&display=swap');

/* ----------------------------------------------------------------------------------------------------------------*/

/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

html {

    height: 100%

}

body {

    margin-left: 0px;

    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 0px;

    -webkit-text-size-adjust: none;

    font-size: 15px;

    overflow-x: hidden;

    overflow-y: scroll

}

body,

td,

th {

    font-size: 16px;

    font-family: 'Roboto Condensed', sans-serif;

}

.iframe_ch {

    display: none

}

.middle {

    vertical-align: middle;

}

.container { position:relative; width:100%; overflow: hidden;}

.container .wrap {position: relative;max-width: 1200px;overflow: hidden;margin: 0px auto;padding: 0px 10px;}

.container .wrap .layout-left {width: 25%;float:left;box-sizing: border-box;padding: 0 30px 0 10px;margin: 0 0 50px 0;text-align: center;}

.container .wrap .layout-right {width: 75%;float:left;box-sizing: border-box;padding: 1px 10px;}

.container .wrap .layout-all {width:100%;/* border: 1px solid #ebebeb; */}

.container .wrap .layout-right .end {margin-bottom: 50px;}

.container .wrap .layout-flex { display:flex; }

.container .wrap .layout-news { flex:2; }

.container .wrap .layout-quicklink { flex:1; }

.container .wrap .layout-cart-left {width: 60%;float:left;box-sizing: border-box;padding: 0 30px 0 10px;margin: 0 0 40px 0;text-align: left;}

.container .wrap .layout-cart-right {width: 40%;float:left;box-sizing: border-box;padding: 0px 10px;}

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

	.container .wrap .layout-left { width:30%; }

	.container .wrap .layout-right { width:70%; }	

  .container .wrap .layout-cart-left {width: 100%;padding: 30px 0px 0 0px;}

  .container .wrap .layout-cart-right {width: 100%;padding: 0 0px;}

  

}

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

  .container .wrap .layout-flex { display:block; }

	.container .wrap .layout-left { display:none; }

	.container .wrap .layout-right { width:100%; }

    

}

.layout-left .caption {

    font-size: 22px;

    /* font-weight: bold; */

    text-align: center;

    /* background: #c7e0d8; */

    color: #5e4d31;

    border-radius: 20px;

    padding: 25px 10px 0px 10px;

    margin: 0 0 0px 0;

}

.layout-left .caption-en {

    font-size: 14px;

    color: #a58d64;

    margin: 20px 0 15px 0;

    letter-spacing: 1px;

}

.layout-left > ul {list-style:none;margin:0;/* background-color: #f9ede4; */background-image:url(../../images/left-menu-bg.png);background-position:bottom;background-repeat:no-repeat;padding: 10px 20px 10px 20px;border-radius: 20px;/* min-height: 500px; *//* border-top: 5px solid #bed38f; *//* border-bottom: 5px solid #bed38f; */}

.layout-left > ul > li {

  width: 100%;

  font-size: 1em;

  background: #fde9cf; 

  text-align: left;

  margin: 10px 0;

  border-radius: 18px;

  padding: 7px; 

  box-sizing: border-box; 

  /* border: 2px dashed #d6c4b2; */ 

  transition: all 0.3s ease; 

  display: flex;

      justify-content: center;

}

.layout-left > ul > li > a {

  position: relative;

  color: #504c40;

  /* font-weight: bold; */

  text-decoration: none;

  display: block;

  letter-spacing: 3px;

  padding: 7px 15px 7px 10px; 

  min-height: 50px;

  transition: all 0.3s ease; 

  border: 2px dotted #dfa86f;

  border-radius: 13px;

  display: flex;

  align-items:center;

  width:100%;

  justify-content: center;

  font-weight:500;

}

.layout-left > ul > li:hover {

  background: #8c1b01; 

  border-color: #8c1b01; 

  transition: all 0.3s ease; 

}

.layout-left > ul > li:hover > a {

  color: #e1cab0; 

  transition: all 0.3s ease; 

}

.layout-left > ul > li > a img {

  margin-right: 5px;

  transition: all 0.3s ease;

}

.layout-left > ul > li:hover > a img {

  filter: brightness(0) invert(1);

  transition: all 0.3s ease;

}

.layout-left > ul > li:hover > a:before {

  color: #e1cab0; 

  transition: all 0.3s ease; 

}

#sitemap .wrap {width:100%;max-width: 1200px;overflow:hidden;margin: 0 auto;padding: 40px 0px;color: #85704d;font-size: 14px;text-align: center;border-bottom: 1px dashed #b1b0af;letter-spacing: 2px;}

#sitemap .wrap img { padding-right:5px; }

#sitemap .wrap a {text-decoration:none; }

#sitemap .wrap a {text-decoration: none;}

#sitemap .wrap {font-size: 0.95rem; }

/*NAV*/

#fix-menu {
  position: fixed;
  bottom: 10%;
  right: 10px;
  z-index: 100001;
  width: 60px;
  pointer-events: none;
}

#fix-menu .gotop {
  display: inline-block;
  pointer-events: auto;
}

#fix-menu .gotop img {
  display: block;
  padding: 0;
  width: 50px;
  height: auto;
}

	

input:not([type="radio"]):not([type="checkbox"]),

select,

textarea {

-ms-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

-webkit-box-sizing: content-box;

-webkit-appearance: none;

appearance: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.common-title {/* text-align: center; */font-size: 40px;color: #1c3464;/* font-weight:bold; */letter-spacing: 1px;line-height: 30px;padding: 0vw 0px 2.5vw 0vw;margin: 0 0 0 0;}

.common-title span {position: relative;display: inline-block;line-height: 30px;text-transform: uppercase;font-size: 20px;padding-bottom: 15px;margin: 0px 0px;color: #ad9b6d;/* font-weight: bold; */letter-spacing: 1px;font-family: 'Noto Sans TC', sans-serif;}

.common-title span i { position: relative;font-size: 36px;color: #000000;display: block;font-style: normal;padding: 20px 0px;/* border-bottom: 1px solid #000000; */}

.common-title span i:after {

    content: "";

    position: absolute;

    bottom: -3px;

    left: 7px;

    width: 23px;

    height: 1px;

    background-color: black;

}

.common-title > .line {background: #c8bfb0;width: 250px;height: 1px;margin: 20px auto 20px auto;animation:1s ease-in-out 0.8s 1 widthGroup-1;}

.common-title > .line {background: #c8bfb0;width: 250px;height: 1px;margin: 20px auto 20px auto;animation:1s ease-in-out 0.8s 1 widthGroup-1;}

/* ★ .editor 的樣式已移到 webfile/css/css_editor.css（2026-08-27）

   原本這裡定義基底、後台編輯器另外吃 css_editor.css，兩份規則不一樣，

   在編輯器裡排好的版到前台就變一個樣。現在兩邊共用同一支檔案，

   選擇器同時涵蓋前台的 .editor 與後台 Froala 的 .fr-element.fr-view。

   用到 .editor 的前台頁面都要載入那支 CSS，新增頁面時記得補。 */

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

    .bx-wrapper { margin:0 auto !important; }

  

  

  

  

  

  

  

}

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

  

  

  .common-title span i { display: inline-block;}

  

  .common-title span i:after { background: transparent;}

    

  

  

  

    

}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Common <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

#wrapper {

    width: 100%;

    margin: 0 auto;

}

#wrapper .common_wrap {

    max-width: 1200px;

    min-height: 800px;

    margin: 0px auto 0 auto;

}

.submenu1 {

    font-size: 18px !important;

    overflow: hidden;

    background-color: rgba(232, 220, 208, 0.7);

    /* border:1px solid #EBEBEB; */

    position: absolute;

    margin-left: -25px;

    width: 130px;

    top: 130px;

    box-shadow: 2px 2px 8px rgba(15%, 15%, 40%, 0.1);

    border-bottom-left-radius: 15px;

    border-bottom-right-radius: 15px;

}

.submenu1 a {

    font-size: 18px !important;

    color: #776e64 !important;

    font-weight: normal !important;

    display: block !important;

    /* border-bottom:1px solid #dedede; */

    padding: 11px 25px;

    -webkit-transition: all .4s ease;

    -moz-transition: all .4s ease;

    -o-transition: all .4s ease;

    transition: all .4s ease;

    -ms-transition: all .4s ease;

}

.submenu1 a:hover {

    color: #a98579 !important;

    /*background:#d3474d !important;*/

}

nav {

    -webkit-transition: all .4s ease;

    -moz-transition: all .4s ease;

    -o-transition: all .4s ease;

    transition: all .4s ease;

    -ms-transition: all .4s ease

}

.header_box {position: fixed;top: 0;left: 0;z-index: 999;padding: 0;width: 100%;/* background-color: #fff; */}

.header_box_main {

    max-width: 1200px;

    position: relative;

    /* overflow: hidden; */

    margin-right: 70px;

    margin-left: 70px;

    margin: 0px auto 0px auto;

}

.header_box .header_box_main .logo_box {width: 100%;max-width: 1200px;height: 130px;margin: 0 auto;position: relative;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;-ms-transition: all .3s ease;}

.header_box .header_box_main .menu {
    margin-top: 10px;
    margin-bottom: 0px;
    height: 100%;
    line-height: 25px;
    font-weight: 700;
    font-size: 14px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    -ms-transition: all .4s ease;
    animation: 1s ease-out 0s 1 transiTop20;
    float: right !important;
    position: absolute;
    top: 40px;
    left: 330px;
}

.header_box .header_box_main .menu li {
    float: left;
    list-style: none;
    padding: 0 1.5vw 0px;
    position: relative;
    text-align: center;
}

.header_box .header_box_main .menu li a {
    position: relative;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    transition: all 0.3s ease;
    padding: 0px 0;
}

.header_box .header_box_main .menu li a {
    font-size: 16px;
    /* font-weight: 600; */
    letter-spacing: 1px;
    color: #ffffff;
    /* text-shadow: 0 1px 2px rgba(0,0,0,0.3); */
}

.header_box .header_box_main .menu li span {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    color: #ffffff;
    opacity: 0.9;
    margin-top: 0px;
    margin-bottom: 5px;
    display: inline-block;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    border-bottom: 1px solid #ffffff;
    font-style: italic;
}

.header_box .header_box_main .menu li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    /* background: linear-gradient(90deg, #ffffff, #f0f0f0, #ffffff); */
    transform: translateX(-50%);
    transition: width 0.3s ease;
    /*box-shadow: 0 0 10px rgba(255,255,255,0.5);*/
}

.header_box .header_box_main .menu li:hover a {
    color: #ffffff;
    transform: translateY(-2px);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.header_box .header_box_main .menu li:hover span {
    color: #ffffff;
    opacity: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.header_box .header_box_main .menu li:hover a::after {
    width: 80%;
}

.header_box .header_box_main .menu li:hover {
    animation: diamondShimmer 0.6s ease-in-out;
}

@keyframes diamondShimmer {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    25% {
        transform: scale(1.05);
        filter: brightness(1.2);
    }
    50% {
        transform: scale(1.02);
        filter: brightness(1.1);
    }
    75% {
        transform: scale(1.05);
        filter: brightness(1.2);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

.header_box .header_box_main .menu li:hover::before {
    width: 120px;
    height: 120px;
}

@media screen and (max-width: 1024px) {
    .header_box .header_box_main .menu {
        left: 280px;
    }
    
    .header_box .header_box_main .menu li {
        padding: 0 1vw 15px;
    }
    
    .header_box .header_box_main .menu li a {
        font-size: 14px;
    }
    
    .header_box .header_box_main .menu li span {
        font-size: 10px;
    }
}

@media screen and (max-width: 768px) {
    .header_box .header_box_main .menu {
        display: none;
    }
}

.header_box .header_box_main .menu li img {

    padding: 0 3px;

}

.header_box .header_box_main .menu li a {

    position: relative;

    text-decoration: none;

}

.header_box .header_box_main .menu li a::before {

    top: -10px;

}

.header_box .header_box_main .menu li a::after {

    bottom: -10px;

}

.header_box .header_box_main .menu li a:hover::before,

.header_box .header_box_main .menu li a:hover::after {

    transform: scaleX(1);

}

.header_box_scroll1 {

background: #68adb7;

transition: background 0.3s;

/* top: -20px; */
}
.header_box_scroll1.bg-colored {
  background: #68adb7;
}

.header_box_scroll1.header-transparent {
  background: transparent !important;
}

.header_box_scroll1 .menu {

    margin-top: 35px;

    margin-bottom: 10px

}

.header_box_scroll1 .menu li a {

    color: #ffffff;

    font-size: 18px;

    font-weight: normal;

    letter-spacing: 1px;

    text-decoration: none;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

}

.header_box_scroll1 .logo-big {

display: none;

position: absolute;

margin-top: 30px;

max-width: 558px;

opacity: 1;

/*

 -webkit-transition: all .4s ease;

 -moz-transition: all .4s ease;

 -o-transition: all .4s ease;

 transition: all .4s ease;

 -ms-transition: all .4s ease;

 */
}

.header_box_scroll1 .logo-mid {

/* position: absolute; */

margin-top: 30px;

margin-left: 5px;

max-width: 558px;

opacity: 1;

/*

 -webkit-transition: all .4s ease;

 -moz-transition: all .4s ease;

 -o-transition: all .4s ease;

 transition: all .4s ease;

 -ms-transition: all .4s ease;

 */
}

.header_box_scroll1 .logo-small {

opacity: 0;

/*

 -webkit-transition: all .4s ease;

 -moz-transition: all .4s ease;

 -o-transition: all .4s ease;

 transition: all .4s ease;

 -ms-transition: all .4s ease

 */
}

.header_box_scroll2 .menu {

    margin-top: 0;

    margin-bottom: 0;

    height: 100%

}

.header_box_scroll2 .menu>li>a {

    /* color: #fff; */

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out

}

.lang-switch a:hover,
.lang-switch a.active {
  background: #94570D; 
  color: #94570D; 
  border: 1px solid #94570D;;
}

#nav {

position: absolute;

right: 0px;

top: 10px;

z-index: 9999;

color: #ffffff;

font-size: 15px;

/* background: #AD9B6D; */

/* min-width: 440px; */

/*-webkit-transition: all .4s ease;-moz-transition: all .4s ease;-o-transition: all .4s ease;transition: all .4s ease;-ms-transition: all .4s ease;*/
}

#nav span {
    padding: 5px 5px;
    display: inline-block;

}

#nav span .input-cartNum {
    border-radius: 50%;
    border: 1px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    font-size: 14px;
    margin: 0 5px;
    min-width: 15px;
    text-align: center;
}

#nav span img {vertical-align: -80%;margin-left: 5px;}

#nav a {

color: #ffffff;

text-decoration: none;

letter-spacing: 2px;

margin-left: 5px;
}

#nav a:hover {

    text-decoration: underline;

}

.overlay1-content {

    position: relative;

    top: 0%;

    width: 100%;

    text-align: center;

    padding-bottom: 150px;

    animation: slideInFromRight 0.6s ease-out;

}

@keyframes slideInFromRight {

    from {

        opacity: 0;

        transform: translateX(30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes shimmer {

    0%, 100% { opacity: 0.5; }

    50% { opacity: 1; }

}

/*.overlay1_item:hover{ background:#000; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }*/

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

    .header_box_scroll1 .logo-mid {

/* width: 50%; */

min-width: 200px;

}

}

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

    

    

}

#banner-inner {

  position: relative;

  height: 540px;

  background-size: cover;  

}

#banner-inner .overlay {display:flex;align-items:center;justify-content: center;width:100%;/* max-width: 1200px; */margin: 0px auto 0 auto;padding: 100px 1vw 0 5vw;height: 100%;background-color: rgba(0, 0, 0, 0.2);}

#banner-inner .title {opacity:0;text-align:center;color:#ffffff;font-size: 30px;font-weight: bold;letter-spacing: 5px;padding: 0 0 10px 0;text-shadow: 2px 2px 2px #101010;}

#banner-inner .common-title {color: #ffffff;text-align: center;/* text-shadow: 2px 2px 2px #999999; */font-size: 16px;text-shadow: 1px 1px 1px #000000;}

#banner-inner .common-title span {

    display: block;

    color: #ffffff;

    /* text-shadow: 2px 2px 2px #999999; */

    font-size: 36px;

    letter-spacing: 20px;

    padding: 0 0 10px 20px;

    /* text-shadow: 1px 1px 1px #CCCCCC; */

}

#banner-inner .common-title span:before {filter: brightness(0) invert(1);}

#banner-inner .common-title span:after {

    filter: brightness(0) invert(1);

}

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

  #banner-inner {

    height: 400px;

  }

  

}

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

.product-title {

  font-size: clamp(26px, 2vw, 36px);

  /* font-weight: bold; */

  color: #5e4d31;

  margin: 0 0 5px 0;

  

}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

  

#inner-news .wrap {

    /*display:flex;flex-wrap: wrap;*/

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

}

.news-frame .news-title span, .news-frame .news-date span { color: #000000; margin-right: 20px;}

.news-frame .news-title > div, .news-frame .news-date > div { display: inline-block;}

#inner-news .editor {border-top:1px dashed #b2b2b2;border-bottom:1px dashed #b2b2b2;margin: 0 0 40px 0;padding: 40px 0;}

.news-date {

  font-size: clamp(18px, 1.5vw, 24px);

  color: #cb9a69;

  margin-bottom: 10px;

  text-align: left;

}

.news-title span, .news-date span {font-size: 16px;margin: 0 5px 0 0;color: #cb9a69;}

.news-title  img,.news-date  img { margin: 0 5px 0 0;}

.news-title {

  font-size: clamp(20px, 1.5vw, 24px);

  color: #191919;

  margin: 20px 0;

  font-weight: normal;

  text-align: left;

}

.news-title a:hover { text-decoration: underline;}

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

  

  .news-title {margin:10px 0;}

  

  

}

@media (max-width: 768px) {

  

  .news-frame .news-title > div { display: block;}

}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

.faq-items .faq-content .editor {padding: 0px 20px;}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

#inner-signup input::placeholder, #mem_login .input input::placeholder, textarea::placeholder {

    color: #b3a48a; 

    font-size: 16px; 

    letter-spacing: 1px; 

    font-family: 'Noto Sans TC', sans-serif; 

  color: #b3a48a; 

}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

#inner-signup .flex-table .middle { display:flex; align-items:center; }

#fancy-frame .bottom { width:100%; padding:30px 30px; text-align:center; }

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

#product-detail-detail .left .editor { padding-bottom:10px !important; }

/*owl*/

#product-detail .right .spec span:hover, #product-detail .right .spec span.active { 

  border: 1px solid #ed931f; 

  color: #ed931f; 

}

 

 

 

.add-on-products .addon-product-item .product-title {

  font-size: 16px;

  color: #333;

  margin: 10px 0;

}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

.cart-table .product-title {

  /* font-weight: bold; */

  color: #333333;

  font-size: 18px;

}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

.cart-steps .step.active .circle {

  background-color: #8c1b01; 

  color: #fff; 

  border-color: #8c1b01;

}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> checkbox/radio template <<<------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

/* The container */

/* Hide the browser's default checkbox */

/* Create a custom checkbox */

/* On mouse-over, add a grey background color 

.container-item:hover input ~ .checkmark {

  background-color: #ccc;

}*/

/* When the checkbox is checked, add a red background and a checkmark */

/* Create the checkmark/indicator (hidden when not checked) */

/* Show the checkmark when checked */

/* Create a custom checkbox */

/* Create the checkmark/indicator (hidden when not checked) */

/* Create the checkmark/indicator (hidden when not checked) */

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Footer <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#footer {
  width: 100%;
  background: #313131;
  padding: 0px 0 0 0;
  position: relative;
  overflow: hidden;
}

#footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  /* background: linear-gradient(90deg, transparent 0%, #68adb7 50%, transparent 100%); */
}

#footer .footer_wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

.footer_left {
  flex: 0 0 auto;
  max-width: 380px;
}

.footer_logo {
  margin-bottom: 40px;
}

.footer_logo img {
  max-width: 200px;
  height: auto;
}

.footer_contact {
  margin-bottom: 40px;
}

.contact_item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #ffffff;
  font-size: 15px;
}

.contact_label {
  /* font-weight: bold; */
  margin-right: 15px;
  min-width: 50px;
}

.contact_value {
  color: #cccccc;
}

.footer_social {
  display: flex;
  gap: 10px;
}

.social_icon {
  width: 40px;
  height: 40px;
  /* background: linear-gradient(135deg, #68adb7 0%, #97dbe1 100%); */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #97dbe1;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid #97dbe1;
  box-shadow: 0 4px 12px rgba(104, 173, 183, 0.2);
}

.social_icon:hover {
  background: linear-gradient(135deg, #5a9ba5 0%, #7bbfc2 100%);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(104, 173, 183, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
}

.footer_right {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  max-width: 920px;
}

.footer_menu_column {
  flex: 0 1;
  min-width: 150px;
}

.footer_menu_header {
  margin-bottom: 25px;
  color: #c1fffb;
}

.menu_english {
  color: #c1fffb;
  font-size: 14px;
  font-style: italic;
  display: block;
  margin-bottom: 5px;
}

.menu_chinese {
  color: #c1fffb;
  font-size: 18px;
  font-weight: normal;
  margin: 0 0 10px 0;
  letter-spacing: 1px;
}

.menu_underline {
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, #68adb7 0%, #97dbe1 100%);
  margin-bottom: 20px;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(104, 173, 183, 0.3);
}

.footer_menu_links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer_menu_links a {
  color: #cccccc;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  line-height: 1.4;
  padding: 5px 0;
  position: relative;
  border-radius: 4px;
}

.footer_menu_links a::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #68adb7 0%, #97dbe1 100%);
  transition: all 0.3s ease;
}

.footer_menu_links a:hover {
  color: #ffffff;
  padding-left: 8px;
}

.footer_menu_links a:hover::before {
  width: 100px;
}

.footer_bottom {
  /* background: #3a3a3a; */
  margin: 50px 0 0 0;
  text-align: center;
}

.copyright_text {
  color: #999999;
  font-size: 12px;
  letter-spacing: 1px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px;
  text-align: right;
  border-top: 1px solid #999999;
}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Cookie <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

.cookie-notice {position: fixed;max-width: 1100px;font-size: 14px;margin: 0 auto;bottom: 30px;left: 10px;right: 10px;background: rgba(45, 45, 45, 0.55);color: #ffffff;line-height: 1.7;padding: 18px 24px 20px;text-align: left;display: none;

    border-radius: 14px;/* border: 1px solid rgba(245, 130, 32, 0.45); */box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);z-index: 999;}

.cookie-notice a,

.cookie-notice a:visited {

    color: #f58220;

    text-decoration: underline;

    text-underline-offset: 2px;

    transition: color 0.2s ease;

}

.cookie-notice a:hover {

    color: #ffa256;

}

.cookie-notice button {

    background: #000000;

    color: #ffffff;

    border: 1px solid #000000;

    border-radius: 999px;

    padding: 8px 26px;

    margin-top: 12px;

    font-size: 13px;

    letter-spacing: 1.5px;

    cursor: pointer;

    display: block;

    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;

}

.cookie-notice button:hover {

    background: #222222;

    color: #ffffff;

    border-color: #222222;

    transform: translateY(-1px);

}

.cookie-notice button:active {

    transform: translateY(0);

}

/* 手機版：文案有 110 個字，用桌機的字級與行高會撐到 252px、佔掉螢幕三成
   （實測 375×812）。縮字級、收行高與內距，讓它回到兩成以內。
   桌機版一律不動。 */
@media screen and (max-width: 768px) {

    .cookie-notice {

        font-size: 12.5px;

        line-height: 1.6;

        padding: 12px 16px 14px;

        bottom: 12px;

        left: 8px;

        right: 8px;

        border-radius: 12px;

    }

    .cookie-notice button {

        margin-top: 10px;

        /* 按鈕靠右：它是 display:block，左邊 margin 給 auto 就會推到右側 */

        margin-left: auto;

        padding: 7px 22px;

        font-size: 12px;

        letter-spacing: 1px;

    }

}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

.bannerArea a.scrollDown {

    display: block;

    color: #000;

    text-align: center;

    width: 80px;

    position: absolute;

    bottom: 20px;

    left: 50%;

    margin-left: -40px;

    z-index: 999;

}

.bannerArea a.scrollDown i {

    display: inline-block;

    text-align: center;

    font-size: 25px;

    color: #FFF;

    text-align: center;

}

.index_story a.scrollDown {

    display: block;

    color: #000;

    text-align: center;

    width: 80px;

    position: absolute;

    bottom: -120px;

    left: 50%;

    margin-left: -40px;

    z-index: 999;

}

.index_story a.scrollDown i {

    display: inline-block;

    text-align: center;

    font-size: 25px;

    color: #FFF;

    text-align: center;

}

.story-float-img-1,

.story-float-img-2 {

  position: absolute;

  bottom: -100px;

  width: auto;

  max-width: 300px; 

  animation: floatEffect 2s ease-in-out infinite; 

  transition: all 0.5s ease; 

}

.story-float-img-1 {

  left: 8%;

  animation-delay: 0s; 

}

.story-float-img-2 {

  right: 8%;

  animation-delay: 0.5s; 

}

@keyframes floatEffect {

  0%, 100% {

    transform: translateY(0); 

  }

  50% {

    transform: translateY(-10px); 

  }

}

@media (max-width: 1024px) {

    .story-float-img-1 {

        max-width: 200px;

        left: 4%;

        bottom: -50px;

      }

      

      .story-float-img-2 {

        max-width: 200px;

        right: 4%;

        bottom: -50px;

      }

}

@media (max-width: 768px) {

  .story-float-img-1,

  .story-float-img-2 {

    transform: translateY(200%); 

    opacity: 0; 

    pointer-events: none; 

  }

}

@-webkit-keyframes upDown {

    0% {

        bottom: 20px;

        opacity: 1;

    }

    50% {

        bottom: 28px;

        opacity: 0.5;

    }

    100% {

        bottom: 20px;

        opacity: 1;

    }

}

@-moz-keyframes upDown {

    0% {

        bottom: 20px;

        opacity: 1;

    }

    50% {

        bottom: 28px;

        opacity: 0.5;

    }

    100% {

        bottom: 20px;

        opacity: 1;

    }

}

@keyframes upDown {

    from {

        bottom: 20px;

        opacity: 1;

    }

    50% {

        bottom: 28px;

        opacity: 0.5;

    }

    to {

        bottom: 20px;

        opacity: 1;

    }

}

.upDown {

    -webkit-animation: upDown ease-out 1s infinite;

    -moz-animation: upDown ease-out 1s infinite;

    -o-animation: upDown ease-out 1s infinite;

    animation: upDown ease-out 1s infinite;

}

/*scaleZoom*/

.scaleZoom {

    -webkit-animation: scaleZoom 2s ease both;

    animation: scaleZoom 2s ease both;

}

@-webkit-keyframes scaleZoom {

    from {

        opacity: 0;

        -webkit-transform: scale(1.2);

    }

}

@keyframes scaleZoom {

    from {

        opacity: 0;

        -webkit-transform: scale(1.2);

        transform: scale(1.2);

    }

}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Swiper Slider <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

html,

body {

    position: relative;

    height: 100%;

}

.swiper-container {

    position: relative;

    width: 100%;

    height: 100%;

}

.swiper-slide {

    text-align: center;

    font-size: 48px;

    color: #fff;

    letter-spacing: 1px;

    background-size: cover;

    background-position: center;

}

.swiper-word {

    display: none;

    width: 100%;

    max-width: 1200px;

    position: absolute;

    left: 0;

    right: 0;

    margin-left: auto;

    margin-right: auto;

    font-size: 2.75vw;

    bottom: 30%;

    text-align: right;

    padding-right: 4%;

    box-sizing: border-box;

}

.swiper-word span {

    font-size: 16px;

}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Transition Effect <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

@keyframes nudge {

    0%,

    100% {

        transform: translate(0, 0);

    }

    50% {

        transform: translate(15px, 0);

    }

    50% {

        transform: translate(-15px, 0);

    }

}

@keyframes rotate-btn {

    0% {

        transform: rotate(0);

    }

    100% {

        transform: rotate(-360deg);

    }

}

@keyframes transiTop20 {

    0% {

        transform: translateY(-20%);

    }

    100% {

        transform: translateY(0);

    }

}

/*image mask*/

/*image zoom*/

/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Loadaction <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

.Loadaction_Box {

    position: relative;

    height: 100%;

    width: 0%;

    position: fixed;

    overflow: auto;

    top: 0;

    left: 0;

    overflow: auto;

    background-color: rgba(232, 220, 208, 0.7);

    z-index: 100000000

}

.Loadaction {

    width: 220px;

    height: 90px;

    line-height: 18px;

    top: 42%;

    position: absolute;

    margin-left: auto;

    margin-right: auto;

    left: 0;

    right: 0;

    padding: 10px;

    background-color: rgba(232, 220, 208, 0.9);

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    border-radius: 2px;

}

.Actionupload_Text {

    font-size: 13px;

    color: #FFFFFF;

    /* height:25px; */

    padding: 8px 0;

    letter-spacing: 2px;

}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ---------------------------------->>> pagelink <<<--------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

/*------Zoom--------*/

.scaleZoom {

    -webkit-animation: scaleZoom 2s ease both;

    animation: scaleZoom 2s ease both;

}

@-webkit-keyframes scaleZoom {

    from {

        opacity: 0;

        -webkit-transform: scale(1.2);

    }

}

@keyframes scaleZoom {

    from {

        opacity: 0;

        -webkit-transform: scale(1.2);

        transform: scale(1.2);

    }

}

.swiper-scroll {

    z-index: 999999;

}

.swiper-scroll a.scrollDown {

    display: block;

    color: #000;

    text-align: center;

    position: absolute;

    left: 0;

    right: 0;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 0%;

    z-index: 999;

}

.swiper-scroll a.scrollDown i {

    display: inline-block;

    text-align: center;

    font-size: 25px;

    color: #FFF;

    text-align: center;

}

 

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

/* */

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

#useCoupon_state.active {display: inline-flex !important;}

::placeholder { 

  color: #5e4d31;

}

::-webkit-input-placeholder { /* Chrome, Safari */

  color: #5e4d31;

}

:-ms-input-placeholder { /* IE 10+ */

  color: #5e4d31;

}

::-moz-placeholder { /* Firefox 19+ */

  color: #5e4d31;

  opacity: 1;

}

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

    

    .d-footer-nav {

        display: none;

    }

}

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

    .header_box_scroll1 .logo-big,

    .header_box_scroll1 .logo-mid {

margin-top: 50px;

/* margin-left: 5px; */
}

    .header_box_scroll1 .logo-big {

        display: none;

    }

    

    

    

    

    

    

    

}

.search_input-container {
    position: relative;
    display: inline-block;
}

.search_input-container img {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

@media screen and (max-width: 1024px) {
    .overlay1 .search_input-container {
        width: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30px 0;
        padding: 0 0px;
        /* background: rgba(255, 255, 255, 0.15); */
        border-radius: 20px;
        /* backdrop-filter: blur(15px); */
        /* border: 2px solid rgba(104, 173, 183, 0.4); */
        /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); */
        position: relative;
    }

    .overlay1 .search_input-container img {
        width: 24px;
        height: 24px;
        margin: 0 20px;
        filter: brightness(0) invert(0);
        opacity: 0.9;
        transition: all 0.3s ease;
        /* filter: brightness(1) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(180deg) brightness(118%) contrast(119%); */
    }

    .overlay1 .search_input-container .search_input {
        flex: 1;
        padding: 18px 25px 18px 60px;
        font-size: 1.2rem;
        border: none;
        border-radius: 30px;
        outline: none;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.95);
        color: #1a1a2e;
        font-weight: 500;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.1);
        min-height: 50px;
    }

    .overlay1 .search_input-container .search_input:focus {
        background: rgba(255, 255, 255, 1);
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.1), 0 0 15px rgba(104, 173, 183, 0.5);
        /*transform: scale(1.02);*/
        border: 2px solid rgba(104, 173, 183, 0.6);
    }

    .overlay1 .search_input-container .search_input::placeholder {
        color: #666;
        opacity: 0.7;
    }

    .overlay1 .search_input-container .search_button {
        padding: 15px 30px;
        font-size: 16px;
        color: #fff;
        background: linear-gradient(135deg, #68adb7 0%, #5a9ba5 100%);
        border: none;
        border-radius: 30px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 600;
        letter-spacing: 1px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        box-shadow: 0 4px 12px rgba(104, 173, 183, 0.4);
        margin-left: 15px;
        min-height: 50px;
        min-width: 80px;
    }

    .overlay1 .search_input-container .search_button:hover {
        background: linear-gradient(135deg, #5a9ba5 0%, #4a8b95 100%);
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(104, 173, 183, 0.5);
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    }
}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

@keyframes diamondPulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.1);
    opacity: 0.8;
  }
}

       
       @keyframes diamondRotate {
         0% { 
           transform: rotateY(0deg);
         }
         50% { 
           transform: rotateY(180deg);
         }
         100% { 
           transform: rotateY(360deg);
         }
       }

@keyframes textFade {
  0%, 100% { 
    opacity: 0.7;
    transform: translateY(0);
  }
  50% { 
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

.product-header {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  margin-bottom: 50px;
  padding: 0 20px;
}

.common-title-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}

.title-circle {
  position: relative;
  width: 130px;
  height: 130px;
  border: 3px dashed #f2f2f2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  /* align-self: flex-end; */
  /* margin-right: 20px; */
}

.title-english {
  position: absolute;
  left: 65px;
  display: inline-block;
  white-space: nowrap;
  font-size: 36px;
  color: #b8dadc;
  font-weight: 900;
  /* margin-left: 260px; */
  letter-spacing: 1px;
  text-transform: uppercase;
}

.title-bottom {
  position: absolute;
  bottom: 0px;
  left: 155px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 15px;
}

.title-line {
  width: 100px;
  height: 1px;
  background: #68adb7;
  border-radius: 1px;
}

.product-title {
  font-size: 25px;
  color: #097984;
  font-weight: normal;
  margin: 0;
  letter-spacing: 2px;
}

.icon-dashed-circle-arrow {
  width: 16px;
  height: 16px;
  border: 2px dashed #68adb7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
}

.icon-dashed-circle-arrow::before {
  content: ">";
  font-size: 8px;
  color: #68adb7;
  font-weight: bold;
  transform: translateX(1px);
}

.icon-dashed-circle-arrow.small {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}

.icon-dashed-circle-arrow.small::before {
  font-size: 6px;
}

.icon-dashed-circle-arrow.large {
  width: 20px;
  height: 20px;
  border-width: 2.5px;
}

.icon-dashed-circle-arrow.large::before {
  font-size: 10px;
}

.icon-dashed-circle-arrow.primary {
  border-color: #68adb7;
}

.icon-dashed-circle-arrow.primary::before {
  color: #68adb7;
}

.icon-dashed-circle-arrow.secondary {
  border-color: #5a9ba5;
}

.icon-dashed-circle-arrow.secondary::before {
  color: #5a9ba5;
}

.icon-dashed-circle-arrow.white {
  border-color: #ffffff;
}

.icon-dashed-circle-arrow.white::before {
  color: #ffffff;
}

.view-more-btn {
  display: flex;
  align-items: center;
  gap: 25px;
  background: #7bbfc2;
  color: white;
  padding: 15px 50px;
  margin: 0 10px;
  /* border-radius: 25px; */
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(104, 173, 183, 0.3);
}

.view-more-btn:hover {
  background: #5a9ba5;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(104, 173, 183, 0.4);
}

.btn-icon {
  width: 28px;
  height: 28px;
  border: 1px dotted rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
}

.btn-icon::before {
  /* content: ">"; */
  font-size: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
  transform: translateX(1px);
}

@media (max-width: 1024px) {
  .product-header {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }
  
  
  
  
}

@media (max-width: 768px) {
  
  .product-title {
    font-size: 24px;
  }
  
  
  
  
  
  .view-more-btn {
    padding: 10px 20px;
    font-size: 12px;
  }
  
  
  
  
}

.video-section {
  /* margin-top: 80px; */
  padding: 0 0 0px 0;
  /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
}

.video-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5vw 0;
  padding: 0 20px;
}

.video-title-section {
  display: flex;
  flex-direction: column;
  max-width: 450px;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  flex: 1;
}

.video-description {
  flex: 1;
  /* text-align: right; */
  color: #6c757d;
  font-size: 16px;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 40px;
}

.video-container {
  width: 100%;
  /* max-width: 1200px; */
  margin: 0 auto;
  /* padding: 0 20px; */
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  background: #000;
  /* border-radius: 15px; */
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 1024px) {
  .video-header {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }
  
  .video-description {
    text-align: center;
    margin-left: 0;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  
  .video-header {
    margin-bottom: 30px;
  }
}

.news-section {
  /* margin-top: 80px; */
  padding: 0 0 0px 0;
  /* background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); */
}

.news-date {
  color: #6c757d;
  font-size: 16px;
  font-weight: 500;
  flex: 1;
}

.brand-section {
  /* margin-top: 80px; */
  padding: 60px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.brand-section .common-title-section {
  text-align: center;
  margin-bottom: 50px;
}

.brand-row {
  display: flex;
  /* align-items: center; */
  /* gap: 60px; */
  /* margin-bottom: 80px; */
  background: #ffffff;
}

.brand-row:last-child {
  margin-bottom: 0px;
  margin-top: -10px;
}

.brand-content {
  flex: 1;
  width: 50%;
  max-width: 50%;
  padding: 5vw 40px;
  border: 1px solid #ebebeb;
  /* border-bottom: 1px solid #ebebeb; */
}

.brand-content-header {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
}

.brand-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #68adb7 0%, #97dbe1 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(104, 173, 183, 0.3);
  flex-shrink: 0;
}

.brand-text-group {
  flex: 1;
  /* text-align: center; */
}

.brand-content-title {
  font-size: 24px;
  color: #097984;
  font-weight: normal;
  margin: 0 0 8px 0;
  letter-spacing: 10px;
}

.brand-content-subtitle {
  font-size: 16px;
  color: #097984;
  font-weight: normal;
  margin: 0;
  line-height: 2.4;
  letter-spacing: 3px;
}

.brand-title-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 30px;
}

.brand-description {
  color: #333333;
  font-size: 16px;
  line-height: 1.8;
  text-align: justify;
  text-indent: 2em;
  letter-spacing: 0.5px;
}

.brand-slider-wrapper {
  flex: 1;
  width: 50%;
  max-width: 50%;
}

.brand-image {
  flex: 1;
  width: 50%;
  max-width: 50%;
  
}

.brand-image img {
  width: 100%;
}

.brand-story-content {
  flex: 1;
  width: 50%;
  max-width: 50%;
  box-sizing: border-box;
  padding: 5vw 40px;
  border: 1px solid #ebebeb;
}

.brand-story-header {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
}

.brand-story-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #68adb7 0%, #97dbe1 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(104, 173, 183, 0.3);
  flex-shrink: 0;
}

.brand-story-text-group {
  flex: 1;
  /* text-align: center; */
}

.brand-story-title {
  font-size: 24px;
  color: #097984;
  font-weight: normal;
  margin: 0 0 8px 0;
  letter-spacing: 5px;
}

.brand-story-subtitle {
  font-size: 16px;
  color: #097984;
  font-weight: normal;
  margin: 0;
  line-height: 2.4;
}

.brand-story-description {
  color: #333333;
  font-size: 16px;
  line-height: 1.8;
  text-align: justify;
  text-indent: 2em;
  letter-spacing: 0.5px;
}

/*bxslider*/
.bxslider-bullet ul {

  list-style: none;

}

.bxslider-bullet li {

  width: 100%;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  height: 550px;

}

.bx-wrapper .bx-pager.bx-default-pager a:hover,

.bx-wrapper .bx-pager.bx-default-pager a.active {

  background: #c7e0d8;

}

.bxslider-bullet img {width: 100%;height: auto;object-fit: cover;

  /* border-radius: 30px; */

  }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> News <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.news-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 5vw 0;
    padding: 0 20px;
}

#news-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0 20px;
}

.news-recommend-item {
    background: #fff;
    /* border-radius: 15px; */
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    position: relative;
}

.news-recommend-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(104, 173, 183, 0.05) 0%, rgba(151, 219, 225, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.news-recommend-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(104, 173, 183, 0.15);
}

.news-recommend-item:hover::before {
    opacity: 1;
}

.news-recommend-item:hover .news-item-image img {
    transform: scale(1.05);
}

.news-item-content {
    padding: 20px;
    background: #fff;
    position: relative;
    z-index: 2;
    border-bottom: 1px solid #ebebeb;
}

.news-category {
    color: #68adb7;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.5px;
}

.news-view-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #68adb7;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.news-view-detail:hover {
    color: #097984;
    opacity: 1;
    transform: translateX(3px);
}

.news-view-detail:hover .news-detail-icon {
    border-color: #097984;
    background: rgba(7, 121, 132, 0.1);
}

.news-title {
    font-size: 16px;
    color: #1a1a2e;
    margin: 0 0 15px 0;
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.news-recommend-item:hover .news-title {
    color: #097984;
}

.news-recommend-item:hover .news-divider {
    opacity: 0.6;
}


/* ================================================================ */
/* === 併入來源：and-loading.css                                    
/* === 用途：Loading 動畫                                             
/* === 合併日期：2026-07-10                                          
/* ================================================================ */
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> 大雁出版 載入畫面（真 loading） <<<-----------------------------------------*/
/* 參考：版型/diamonds 同樣結構／動畫邏輯，改成 andbooks 橘＋深灰配色                                                  */
/* ----------------------------------------------------------------------------------------------------------------*/

.and-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, rgba(248, 245, 238, 0.98) 0%, rgba(243, 237, 226, 0.98) 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}

.and-loading-container {
    position: relative;
    z-index: 2;
    text-align: center;
    animation: andLoadingFadeInUp 0.8s ease-out;
}

/* Logo 容器 */
.and-loading-logo {
    position: relative;
    margin-bottom: 14px;
    display: inline-block;
    animation: andLoadingFloat 3s ease-in-out infinite;
}

.and-loading-logo img {
    position: relative;
    z-index: 2;
    display: block;
    width: 64px;
    height: auto;
    max-width: 28vw;
    filter: drop-shadow(0 4px 10px rgba(56, 40, 24, 0.18));
}

/* Logo 光暈 */
.and-loading-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle,
        rgba(118, 84, 50, 0.22) 0%,
        rgba(118, 84, 50, 0.1) 52%,
        transparent 72%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: andLoadingGlow 2s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* 載入文字 */
.and-loading-text {
    margin-bottom: 12px;
}

.and-loading-text .text-line {
    display: block;
    color: #3a2a1a;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    font-family: "Noto Serif TC", "PMingLiU", serif;
    margin: 4px 0;
    opacity: 0;
    animation: andLoadingTextIn 0.6s ease-out forwards;
}

.and-loading-text .text-line:first-child {
    color: #5f442a;
    font-weight: 600;
    animation-delay: 0.3s;
}

.and-loading-text .text-line:last-child {
    animation-delay: 0.6s;
    color: #6a5946;
    font-size: 12px;
}

/* 進度條 */
.and-loading-progress {
    width: 140px;
    margin: 0 auto;
}

.and-loading-progress .progress-bar {
    width: 100%;
    height: 3px;
    background: rgba(95, 68, 42, 0.18);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.and-loading-progress .progress-fill {
    position: relative;
    height: 100%;
    width: 0%;
    border-radius: 2px;
    background: linear-gradient(90deg,
        rgba(95, 68, 42, 0.68),
        rgba(95, 68, 42, 0.95),
        rgba(95, 68, 42, 0.68));
    animation: andLoadingProgress 2.4s ease-in-out infinite;
}

.and-loading-progress .progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.7),
        transparent);
    animation: andLoadingShine 2.4s ease-in-out infinite;
}

/* 背景粒子 */
.and-loading-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(245, 130, 32, 0.35), transparent),
        radial-gradient(2px 2px at 40% 70%, rgba(245, 130, 32, 0.28), transparent),
        radial-gradient(1px 1px at 90% 40%, rgba(245, 130, 32, 0.45), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(245, 130, 32, 0.35), transparent),
        radial-gradient(2px 2px at 10% 80%, rgba(245, 130, 32, 0.28), transparent);
    animation: andLoadingSparkle 8s linear infinite;
    pointer-events: none;
}

/* ---------------------------- 動畫 keyframes ---------------------------- */
@keyframes andLoadingFadeInUp {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes andLoadingFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes andLoadingGlow {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes andLoadingTextIn {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes andLoadingProgress {
    0%   { width: 0%; }
    50%  { width: 100%; }
    100% { width: 0%; }
}

@keyframes andLoadingShine {
    0%   { left: -100%; }
    50%  { left: 100%; }
    100% { left: 100%; }
}

@keyframes andLoadingSparkle {
    0%   { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-100px) rotate(360deg); }
}

/* ---------------------------- 淡出收尾 ---------------------------- */
.and-loading-overlay.fade-out {
    animation: andLoadingFadeOut 0.8s ease-in-out forwards;
}

@keyframes andLoadingFadeOut {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.1); visibility: hidden; }
}

/* ---------------------------- RWD ---------------------------- */
@media screen and (max-width: 768px) {
    .and-loading-logo { margin-bottom: 12px; }
    .and-loading-logo img { width: 56px; }
    .and-loading-glow { width: 88px; height: 88px; }
    .and-loading-text { margin-bottom: 10px; }
    .and-loading-text .text-line { font-size: 12px; letter-spacing: 1.5px; }
    .and-loading-progress { width: 120px; }
}

@media screen and (max-width: 480px) {
    .and-loading-logo { margin-bottom: 10px; }
    .and-loading-logo img { width: 48px; }
    .and-loading-glow { width: 76px; height: 76px; }
    .and-loading-text { margin-bottom: 8px; }
    .and-loading-text .text-line { font-size: 12px; letter-spacing: 1px; }
    .and-loading-progress { width: 100px; }
}

/* ================================================================ */
/* === 併入來源：and-header.css                                    
/* === 用途：全站共用 Header                                             
/* === 合併日期：2026-07-10                                          
/* ================================================================ */
/* ==========================================================
   and-header 新版頭部（依 2026-04-20 設計稿，兩層版型）
   ========================================================== */

/* 隱藏原本的 .header_box，避免綠色導覽列 */
.header_box,
nav.header_box {
    display: none !important;
}

/* ---------- 整體容器 ---------- */
.and-header {
    position: sticky;
    top: 0;
    z-index: 999;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    background: #ffffff;
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); */
}

/* ============================================================
   第一層：Logo / 右側功能列
   ============================================================ */
.and-header-top {
    width: 100%;
    background: #ffffff;
}

.and-header-top-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0px;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-bottom: 1px solid #e8e8e8;
}

/* 左：Logo + 副標 */
.and-header-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.and-logo {
    display: inline-block;
    line-height: 0;
}

.and-logo img {
    display: block;
    height: 56px;
    width: auto;
    max-width: none;
}

.and-header-subtitle {
    font-size: 15px;
    color: #666;
    letter-spacing: 1px;
    white-space: nowrap;
    padding-left: 20px;
}

/* 右：社群 + 搜尋 */
.and-header-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.and-yt,
.and-fb {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.and-yt {
    background: #ff0000;
    border: 1px solid #ff0000;
}

.and-yt:hover {
    background: #e60000;
    border-color: #e60000;
}

.and-fb {
    background: #1877f2;
    border: 1px solid #1877f2;
}

.and-fb:hover {
    background: #166fe5;
    border-color: #166fe5;
}

.and-yt i,
.and-fb i {
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
}

.and-header-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: #c9c9c9;
    flex-shrink: 0;
}

.and-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    background: #313131;
    color: #ffffff;
    border-radius: 999px;
    font-size: 15px;
    text-decoration: none;
    letter-spacing: 1px;
    transition: background 0.2s ease;
    border: 1px solid #1a1a1a;
}

.and-search-btn:hover {
    background: #000;
    color: #ffffff;
    text-decoration: none;
}

.and-search-btn i {
    flex-shrink: 0;
    font-size: 15px;
}

/* ---------- 手機版漢堡按鈕 ---------- */
/* 桌機時隱藏 */
.and-header-right #mobileMenuPosition {
    display: none;
}

/* 強制重設：覆蓋 common_rwd.css 內 position:absolute、白色 span 等舊樣式 */
.and-header-right #mobileMenu {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 30px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    display: inline-flex !important;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    cursor: pointer;
    box-sizing: content-box;
}

.and-header-right #mobileMenu span {
    display: block !important;
    width: 28px !important;
    height: 3px !important;
    margin: 0 !important;
    background: #1a1a1a !important;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
}

.and-header-right #mobileMenu:hover span {
    background: #f58220 !important;
}

/* ============================================================
   第二層：主選單
   ============================================================ */
.and-header-nav {
    width: 100%;
    background: #ffffff;
}

.and-header-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.and-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 0 10px 0;
    width: 100%;
    /* justify-content: space-around; */
}

.and-nav > li {
    position: relative;
    padding: 0 1.5vw;
    flex: 0 1 auto;
    text-align: center;
}

.and-nav > li > a {
    display: inline-block;
    padding: 18px 24px;
    font-size: 16px;
    color: #1a1a1a;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 500;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.and-nav > li > a:hover,
.and-nav > li:hover > a {
    color: #e8831f;
}

/* ---------- Hover 時的橘色指示箭頭（飛鏢形 ▼）---------- */
.and-nav > li.has-sub::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%) translateY(8px);
    width: 12px;
    height: 8px;
    background: #f58220;
    clip-path: polygon(0 0, 50% 45%, 100% 0, 50% 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 1001;
}

.and-nav > li.has-sub:hover::after,
.and-nav > li.has-sub:focus-within::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- 次選單 ---------- */
.and-sub {
    list-style: none;
    padding: 10px 10px;
    margin: 0;
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 180px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 1000;
}

.and-nav > li.has-sub:hover .and-sub,
.and-nav > li.has-sub:focus-within .and-sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.and-sub li {
    padding: 0;
}

.and-sub li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    font-size: 15px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
    position: relative;
}

/* 飛鏢形右箭頭 */
.and-sub li a::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 10px;
    background: #1a1a1a;
    clip-path: polygon(0 0, 100% 50%, 0 100%, 35% 50%);
    margin-right: 2px;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.and-sub li a:hover {
    background: #f7f7f7;
    color: #e8831f;
}

.and-sub li a:hover::before {
    background: #e8831f;
}

/* NEW 標籤 */
.and-badge-new {
    display: inline-block;
    margin-left: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f7ece6;
    color: #b3430c;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.4;
    vertical-align: middle;
}

/* 全站共用：書籍標題 hover 換色（與精選文摘標題一致 #f58220） */
.and-book-card:hover .book-title,
.and-book-list-card:hover .and-book-list-card__title,
.and-book-list-card__link:hover .and-book-list-card__title,
a.ticker-text:hover,
.bd-related__card:hover .bd-related__name {
  color: #f58220;
}

.and-book-card .book-title,
.and-book-list-card__title,
a.ticker-text,
.bd-related__name {
  transition: color 0.2s ease;
}

/* 全站共用：前台 UI 按鈕（圓角矩形；更多／圖示等區塊重複使用） */
.and-ui-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: inherit;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #d8d8d8;
  color: #333333;
  border-radius: 15px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.and-ui-btn:hover {
  background: #333333;
  border-color: #333333;
  color: #ffffff;
  text-decoration: none;
}

.and-ui-btn:focus {
  outline: none;
}

.and-ui-btn--icon {
  width: 46px;
  height: 46px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}

.and-ui-btn--icon i {
  line-height: 1;
  pointer-events: none;
}

.and-ui-btn--more {
  gap: 25px;
  padding: 15px 15px;
  font-size: 15px;
  letter-spacing: 1px;
  white-space: nowrap;
}

@media screen and (max-width: 600px) {
  .and-ui-btn--icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .and-ui-btn--more {
    padding: 10px 20px;
    font-size: 13px;
    letter-spacing: 0.5px;
  }
}

/* 全站共用：飛鏢形右箭頭（與桌機子選單同造型） */
.ticker-more-arrow,
.and-ui-btn__arrow,
.btn-arrow,
.ticker-bullet {
    display: inline-block;
    width: 8px;
    height: 10px;
    font-size: 0 !important;
    line-height: 0;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
}

.ticker-more-arrow::before,
.and-ui-btn__arrow::before,
.btn-arrow::before,
.ticker-bullet::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%, 35% 50%);
}

.and-ui-btn__arrow--left,
.btn-arrow--left {
    transform: scaleX(-1);
}

/* 導覽按鈕用飛鏢箭頭（左／右） */
.and-dart-arrow {
    display: inline-block;
    width: 10px;
    height: 12px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
    pointer-events: none;
}

.and-dart-arrow::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%, 10% 50%);
}

.and-dart-arrow--left {
    transform: scaleX(-1);
}

/* ============================================================
   Banner 1200 置中
   ============================================================ */
.and-banner-wrap {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.and-banner-wrap .swiper-container {
    width: 100%;
    height: auto;
    aspect-ratio: 1968 / 1000;
    margin: 0 auto;
    overflow: hidden;
}

.and-banner-wrap .swiper-slide {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 可縮放背景層：繼承 slide 的 background-image（對齊 ncku_me banner zoom） */
.and-banner-wrap .swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transform: scale(1.12);
    transform-origin: center center;
    will-change: transform;
    pointer-events: none;
}

.and-banner-wrap .swiper-slide > a {
    position: relative;
    z-index: 1;
}

/* fade 時非 active 的 slide 仍可能蓋住左右鈕；只讓目前這張吃點擊 */
.and-banner-wrap .swiper-slide {
    pointer-events: none;
}
.and-banner-wrap .swiper-slide-active,
.and-banner-wrap .swiper-slide-active > a {
    pointer-events: auto;
}

/* 左右鈕必須高於 slide／連結 */
.and-banner-wrap .swiper-button-next,
.and-banner-wrap .swiper-button-prev {
    z-index: 30;
    pointer-events: auto;
}

@keyframes and-banner-zoom-in {
    from {
        transform: scale(1.12);
    }
    to {
        transform: scale(1);
    }
}

.and-banner-wrap .swiper-slide.is-zooming::before {
    animation: and-banner-zoom-in 5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .and-banner-wrap .swiper-slide::before {
        transform: scale(1);
        will-change: auto;
    }
    .and-banner-wrap .swiper-slide.is-zooming::before {
        animation: none;
    }
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------- Banner 底部自訂 pager（白圓點 + 橘色長條 active）---------- */
.and-banner-wrap .and-banner-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    line-height: 0;
    transform: none;
    z-index: 10;
    pointer-events: auto;
}

.and-banner-wrap .and-banner-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 !important;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    border-radius: 999px;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: width 0.35s ease, background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    cursor: pointer;
}

.and-banner-wrap .and-banner-pagination .swiper-pagination-bullet:hover {
    border-color: #f58220;
}

.and-banner-wrap .and-banner-pagination .swiper-pagination-bullet-active {
    width: 45px;
    height: 8px;
    background: #f58220;
    border-color: #f58220;
    box-shadow: 0 2px 2px rgba(245, 130, 32, 0.35);
}

/* ============================================================
   RWD
   ============================================================ */
@media screen and (max-width: 1200px) {
    .and-header-top-inner,
    .and-header-nav-inner {
        padding: 0 20px;
    }

    .and-header-subtitle {
        display: none;
    }

    .and-nav > li > a {
        padding: 18px 14px;
        font-size: 15px;
        letter-spacing: 1px;
    }

    .and-banner-wrap .swiper-container {
        /* 等比縮小，維持 1968:1000 */
        height: auto;
        aspect-ratio: 1968 / 1000;
    }
}

@media screen and (max-width: 991px) {
    .and-header-nav,
    .and-header-right .and-yt,
    .and-header-right .and-fb,
    .and-header-right .and-header-divider {
        display: none;
    }

    /* 手機版搜尋按鈕縮小、只保留 icon */
    .and-header-right .and-search-btn {
        width: 15px;
        height: 15px;
        padding: 6px 6px;
        font-size: 0;
        gap: 0;
        background: #1a1a1a;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }
    .and-header-right .and-search-btn i {
        font-size: 16px;
    }
    .and-header-right .and-search-btn span {
        display: none;
    }

    .and-header-right #mobileMenuPosition {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: static !important;
        top: auto !important;
        right: auto !important;
        width: 40px;
        height: 40px;
        margin: 0;
        vertical-align: middle;
        float: none;
    }

    .and-header-right {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .and-header-right #mobileMenu {
        width: 30px !important;
        height: 24px !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        margin: 0 !important;
    }

    .and-header-top-inner {
        height: 70px;
        padding: 0 16px;
    }

    .and-logo img {
        /* height: 50px; */
    }

    .and-banner-wrap .swiper-container {
        height: auto;
        aspect-ratio: 1968 / 1000;
    }

    .and-banner-wrap .and-banner-pagination {
        bottom: 14px;
        gap: 8px;
    }

    .and-banner-wrap .and-banner-pagination .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
    }

    .and-banner-wrap .and-banner-pagination .swiper-pagination-bullet-active {
        width: 30px;
    }
}

@media screen and (max-width: 560px) {
    .and-header-top-inner {
        height: 62px;
        padding: 0 14px;
        gap: 10px;
    }

    .and-logo img {
        height: 50px;
    }

    .and-header-right .and-search-btn {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }

    .and-header-right #mobileMenuPosition {
        width: 36px;
        height: 36px;
    }

    .and-header-right #mobileMenu {
        width: 26px !important;
        height: 20px !important;
    }
    .and-header-right #mobileMenu span {
        width: 24px !important;
        height: 2.5px !important;
    }

    .sidenav .jq-submenu .and-arrow {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

    .and-banner-wrap .swiper-container {
        height: auto;
        aspect-ratio: 1968 / 1000;
    }

    .and-banner-wrap .and-banner-pagination {
        bottom: 10px;
        gap: 6px;
    }

    .and-banner-wrap .and-banner-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }

    .and-banner-wrap .and-banner-pagination .swiper-pagination-bullet-active {
        width: 24px;
    }
}

/* ============================================================
   手機版側欄選單（sidenav）— andbooks 橘 / 深灰
   ============================================================ */

/* 背景遮罩 */
.bg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.bg-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* 右側滑出側欄 */
.sidenav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    max-width: 100%;
    background: #ffffff;
    z-index: 10000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease;
    box-shadow: -6px 0 18px rgba(0, 0, 0, 0.15);
}

/* 上方可滾動區 */
.sidenav .menu-top {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 頂部品牌列 */
.sidenav .head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: #f7f6f6;
    border-top: 3px solid #f58220;
}

.sidenav .head .sidenav-logo {
    display: inline-block;
    line-height: 0;
}

.sidenav .head .sidenav-logo img {
    display: block;
    max-width: 200px;
    height: 40px;
    width: auto;
    object-fit: contain;
}

.sidenav .head .closebtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #1a1a1a;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none;
    font-size: 18px;
}

.sidenav .head .closebtn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #f58220;
}

/* 選單列 */
.sidenav .jq-submenu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 15px;
    min-height: 52px;
    background: #ffffff;
    border-left: 5px solid #e8831f;
    border-bottom: 1px solid #ebebeb;
    cursor: pointer;
    transition: background 0.2s ease;
}

.sidenav .jq-submenu:hover {
    background: #fff5eb;
}

.sidenav .jq-submenu > a {
    flex: 1 1 auto;
    display: block;
    padding: 14px 0;
    font-size: 16px;
    color: #2d2d2d;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sidenav .jq-submenu:hover > a,
.sidenav .jq-submenu.is-open > a {
    color: #f58220;
}

.sidenav .jq-submenu .and-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    font-style: normal;
    font-size: 16px;
    font-weight: 700;
    color: #555;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.25s ease, color 0.2s ease;
}

.sidenav .jq-submenu.is-open .and-arrow {
    transform: rotate(180deg);
    color: #f58220;
}

/* 搜尋列 */
.sidenav .jq-submenu.srh {
    padding: 0;
    background: #f2f2f2;
    border-bottom: 1px solid #ebebeb;
    min-height: 50px;
    cursor: default;
}

.sidenav .jq-submenu.srh:hover {
    background: #f2f2f2;
}

.sidenav .jq-submenu.srh input {
    flex: 1 1 auto;
    height: 50px;
    padding: 0 16px;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: #2d2d2d;
    letter-spacing: 1px;
}

.sidenav .jq-submenu.srh input::placeholder {
    color: #999;
}

.sidenav .jq-submenu.srh .srh-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #2d2d2d;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    font-size: 16px;
}

.sidenav .jq-submenu.srh .srh-btn:hover {
    color: #ffffff;
    background: #f58220;
}

/* 子選單容器（預設收合） */
.sidenav .submenu-nav {
    display: none;
    background: #ffffff;
    border-bottom: 1px solid #ebebeb;
}

.sidenav .submenu-nav > div {
    position: relative;
    padding: 0 20px 0 33px;
    border-left: 5px solid rgba(232, 131, 31, 0.35);
    border-top: 1px solid #f2f2f2;
}

.sidenav .submenu-nav > div::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    width: 8px;
    height: 10px;
    background: #1a1a1a;
    clip-path: polygon(0 0, 100% 50%, 0 100%, 35% 50%);
    transform: translateY(-50%);
    border-radius: 0;
}

.sidenav .submenu-nav > div > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
    font-size: 15px;
    color: #555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sidenav .submenu-nav > div > a:hover {
    color: #f58220;
}

.sidenav .submenu-nav.layer3 > div {
    padding-left: 58px;
}

.sidenav .submenu-nav.layer3 > div::before {
    left: 42px;
}

/* 側欄社群（置中圓形圖示，接在選單與版權之間） */
.sidenav-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-shrink: 0;
    padding: 18px 20px;
    background: #f7f6f6;
    border-top: 1px solid #ebebeb;
}

.sidenav-social .and-yt,
.sidenav-social .and-fb {
    width: 38px;
    height: 38px;
}

.sidenav-social .and-yt i,
.sidenav-social .and-fb i {
    font-size: 18px;
}

/* 底部列 */
.sidenav .menu-bottom {
    flex-shrink: 0;
    padding: 14px 20px;
    background: #2d2d2d;
    color: #cfcfcf;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    letter-spacing: 0.5px;
}

.sidenav .menu-bottom .copyright a {
    color: inherit;
    text-decoration: none;
}

.sidenav .menu-bottom .copyright a:hover {
    text-decoration: underline;
}

/* 桌機隱藏側欄相關元素 */
@media screen and (min-width: 992px) {
    .bg-overlay,
    .sidenav {
        display: none !important;
    }
}

/* 手機 RWD 微調 */
@media screen and (max-width: 560px) {
    .sidenav .head {
        padding: 15px 16px;
    }

    .sidenav .head .sidenav-logo img {
        height: 40px;
        max-width: 160px;
    }

    .sidenav .jq-submenu {
        padding: 0 16px;
        min-height: 48px;
    }

    .sidenav .jq-submenu > a {
        font-size: 15px;
        padding: 12px 0;
    }

    .sidenav .submenu-nav > div {
        padding-left: 34px;
    }

    .sidenav .submenu-nav > div::before {
        left: 18px;
    }
}

/* ================================================================ */
/* === 併入來源：and-footer.css                                    
/* === 用途：全站共用 Footer                                             
/* === 合併日期：2026-07-10                                          
/* ================================================================ */
/* =========================================================
   大雁出版基地 - Footer (and-footer.css)
   ========================================================= */

   .and-footer-top-bg {
    width: 100%;
    line-height: 0;
    overflow: hidden;
    /* background: #2d2d2d; */
}

.and-footer-top-bg img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
    margin-top: 3px;
}

   .and-footer {
    background: #2d2d2d;
    color: #d5d5d5;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    letter-spacing: 0.3px;
}

/* ---------- 主要內容 ---------- */
.and-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px 30px 10px 35px;
    display: flex;
    gap: 70px;
    align-items: flex-start;
}

/* ---------- 左側 ---------- */
.and-footer-left {
    flex: 0 0 335px;
    display: flex;
    flex-direction: column;
    padding: 0 0 20px 0px;
    border-bottom: 1px solid #5a5a5a;
}

.and-footer-logo {
    display: inline-block;
    line-height: 0;
    margin-bottom: 20px;
}

.and-footer-logo img {
    height: 65px;
    width: auto;
    display: block;
}

.and-footer-info {
    font-size: 14px;
    line-height: 2.1;
    color: #d5d5d5;
    letter-spacing: 0.5px;
}

.and-footer-info div {
    white-space: nowrap;
}

.and-footer-info a {
    color: inherit;
    text-decoration: none;
}

.and-footer-info a:hover {
    text-decoration: underline;
}

.and-footer-divider {
    height: 1px;
    background: #4a4a4a;
    margin: 22px 0 18px;
    width: 100%;
}

.and-footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.and-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    color: #1a1a1a;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.and-footer-social a:hover {
    background: #f58220;
    color: #ffffff;
}

.and-footer-social a i {
    font-size: 18px;
    line-height: 1;
    color: inherit;
}

/* ---------- 右側選單 ---------- */
.and-footer-nav {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding-top: 4px;
}

.and-footer-col h2 {
    color: #f58220;
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 22px;
    letter-spacing: 1.5px;
    line-height: 1.4;
}

.and-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.and-footer-col li {
    margin-bottom: 14px;
}

.and-footer-col a {
    color: #d5d5d5;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 0.8px;
    line-height: 1.6;
    display: inline-block;
    position: relative;
    border: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: none;
}

/* hover：只出現 #9a9a9a 圓角框，文字不變色、位置不位移 */
.and-footer-col a:hover {
    color: #d5d5d5;
}

.and-footer-col a:hover::after {
    content: "";
    position: absolute;
    left: -14px;
    right: -14px;
    top: -3px;
    bottom: -3px;
    border: 1px solid #9a9a9a;
    border-radius: 999px;
    pointer-events: none;
    box-sizing: border-box;
}

/* ---------- 底部版權列 ---------- */
.and-footer-bottom {
    /* border-top: 1px solid #4a4a4a; */
}

.and-footer-bottom-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 0px 24px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #9a9a9a;
    font-size: 13px;
    letter-spacing: 0.5px;
    gap: 16px 28px;
    flex-wrap: nowrap;
    box-sizing: border-box;
}

.and-footer-bottom-inner .and-footer-social {
    flex: 0 0 auto;
    order: 1;
}

.and-footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: right;
    order: 2;
    min-width: 0;
}

.and-footer-bottom-inner .and-copyright,
.and-footer-bottom-inner .and-design-by,
.and-footer-bottom-inner .and-privacy-link {
    letter-spacing: 0.5px;
    line-height: 1.5;
    white-space: nowrap;
}

.and-footer-bottom-inner .and-design-by,
.and-footer-bottom-inner .and-privacy-link {
    color: #9a9a9a;
}

.and-footer-bottom-inner .and-design-by a,
.and-footer-bottom-inner .and-privacy-link a {
    color: inherit;
    text-decoration: none;
}

.and-footer-bottom-inner .and-design-by a:hover,
.and-footer-bottom-inner .and-privacy-link a:hover {
    text-decoration: underline;
}

/* 隱藏舊版 footer 內部（若頁面其他地方還有殘留） */
#footer .footer_wrap,
#footer .footer_bottom {
    display: none !important;
}

/* =========================================================
   RWD - 響應式設計
   ========================================================= */

/* 平板（直向）以下：選單改 3 欄 */
@media screen and (max-width: 1100px) {
    .and-footer-inner {
        gap: 40px;
        padding: 45px 30px 30px;
    }

    .and-footer-left {
        flex: 0 0 240px;
    }

    .and-footer-nav {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 20px;
    }

    .and-footer-bottom-inner {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* 平板以下：改為上下堆疊 */
@media screen and (max-width: 820px) {
    .and-footer-inner {
        flex-direction: column;
        gap: 30px;
        padding: 40px 24px 24px;
    }

    .and-footer-left {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    .and-footer-divider {
        margin: 18px 0 14px;
    }

    .and-footer-nav {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px 18px;
        width: 100%;
    }

    .and-footer-info div {
        white-space: normal;
    }

    .and-footer-bottom-inner {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* 手機 */
@media screen and (max-width: 540px) {
    /* 手機版隱藏波浪圖片，改用 CSS 畫波浪，避免縮放產生的縫隙 */
    .and-footer-top-bg img {
        display: none;
    }

    .and-footer-top-bg {
        /* height: 30px; */
        /* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 36' preserveAspectRatio='none'><path d='M0,18 C40,0 60,0 100,16 C140,32 160,32 200,14 L200,36 L0,36 Z' fill='%232d2d2d'/></svg>"); */
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .and-footer-inner {
        padding: 32px 20px 20px;
    }

    .and-footer-logo img {
        /* height: 42px; */
    }

    .and-footer-info {
        font-size: 13px;
        line-height: 2;
    }

    .and-footer-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }

    .and-footer-col h2 {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .and-footer-col li {
        margin-bottom: 10px;
    }

    .and-footer-col a {
        font-size: 13px;
    }

    .and-footer-bottom-inner {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 20px 20px;
        font-size: 12px;
    }

    .and-footer-bottom-right {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        gap: 8px;
        flex-direction: column;
        align-items: flex-start;
    }

    .and-footer-bottom-inner .and-copyright,
    .and-footer-bottom-inner .and-design-by {
        white-space: normal;
    }

    .and-footer-bottom-inner .and-design-by {
        display: block;
    }
}

/* ================================================================ */
/* === 併入來源：common_rwd.css                                    
/* === 用途：全站共用 RWD（media queries，須放最後）                                             
/* === 合併日期：2026-07-10                                          
/* ================================================================ */
@charset "utf-8";





/*Common Rwd*/



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

	.header_box_main {

	 padding: 70px auto;

	 margin-right: 10px;

	 margin-left: 10px

	}

	.swiper-container .font1 {

	 font-size: 40px

	}

	.swiper-word {

	 font-size:30px;

	}

}

#mobileMenuPosition { display: none; }



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

	

	#nav{ /*display:none;*/ }

	#nav{

    min-width: 135px;

    padding-left: 5px;

	}

	

	#nav img{

    /* height: 30px !important; */

}

	#nav span{/* padding: 2px 0px; */}

	#nav a{}

		

	.header_box_line {

		border:0;

	}

	#mobileMenuPosition {

display: inline-block;

position: absolute;

top: 0px;

right: 0px;

width: 30px;

height: 30px;

margin-right: 1%;

vertical-align: middle;

float: right

}

	.mobileMenuPosition_top {

		 margin-top: 8px

	}

	#mobileMenu {

		 width: 30px;

		 height: 25px;

		 position: absolute;

		 top: 75px;

		 z-index: 999;

		 cursor: pointer

	}

	#mobileMenu span {

		 width: 25px;

		 height: 3px;

		 display: block;

		 background: #ffffff;

		 margin-top: 5px;

		 -webkit-transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1);

		 -moz-transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1);

		 -ms-transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1);

		 -o-transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1);

		 transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1)

	}

	.mobileMenu_spac {

	 	/*background: #fff !important*/

	}

	#mobileMenu span:first-child {

		margin-top: 0

	}

	#mobileMenu .top {

		 position: absolute;

		 top: 10px;

		 -webkit-transform: rotate(225deg);

		 -moz-transform: rotate(225deg);

		 transform: rotate(225deg)

	}

	#mobileMenu .bottom {

		 position: absolute;

		 top: 10px;

		 margin-top: 0 !important;

		 -webkit-transform: rotate(-225deg);

		 -moz-transform: rotate(-225deg);

		 transform: rotate(-225deg)

	}

	#mobileMenu .middle {

	 	opacity: 0

	}

	.menu-active .navigation {

	 	right: 0

	}

	.menu-active .navigation ul li {

		 -moz-transform: translateX(0);

		 -webkit-transform: translateX(0);

		 opacity: 1;

		 transform: translateX(0)

	}



	

	.navigation {

		 display: inline !important;

		 height: 100%;

		 width: 100%;

		 padding: 0;

		 position: fixed;

		 right: -100%;

		 top: 0;

		 overflow: scroll !important;

		 overflow-x: hidden !important;

		 overflow-y: auto !important;

		 -webkit-overflow-scrolling: touch !important;

		 background: rgba(0, 0, 0, 0.75);

		 margin-top: 0px !important;

		 padding-top: 100px;

		 text-align: center

	}

	.navigation_spen {

		 margin-top: 58px !important;

		 width: 235px !important;

		 background: rgba(255, 255, 255, 0.9);

		 padding-top: 10px;

		 color: #000000;

		 text-align: left

	}

	.navigation ul:nth-child(1) {

		 margin-top: 70px;

		 vertical-align: middle

	}

	.navigation ul li {

		 -moz-transform: translateX(15%);

		 -webkit-transform: translateX(15%);

		 margin: 0 20px;

		 opacity: 0;

		 display: block;

		 vertical-align: top;

		 transform: translateX(15%);

		 text-align: left

	}

	.navigation ul li a {

	 	padding: 10px 0

	}

	.header_box .header_box_main .menu {

	 	height: 100%

	}

	.header_box .header_box_main .menu {

float: inherit !important;

display: none !important;

}

	.header_box .header_box_main .menu li {

		 float: inherit;

		 list-style: none

	}

	.header_box .header_box_main .menu li a {

		 padding-left: 10px;

		 padding-right: 10px;

		 line-height: 40px;

		 font-size: 20px

	}

	.header_box .header_box_main .menu li a:hover {

	 	color: #2EA8E1

	}

	.swiper-container .font1 {

		 font-size: 45px;

		 line-height: 60px

	}

	.swiper-container .font2 {

	 	font-size: 25px

	}

	.banner_br {

	 	display: block !important

	}

	.banner_de {

	 	display: none !important

	}

}



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

	.swiper-container .font1 {

		font-size: 25px

	}

}



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

	.swiper-container .font1 {

	 font-size: 20px

	}

}

/* 隱藏桌面版搜尋功能 */
#nav .search_input-container{ display: none;}

/* 共用圖示樣式 - 小圓形虛線中間箭頭 */
.icon-dashed-circle-arrow {
  width: 16px;
  height: 16px;
  border: 2px dashed #68adb7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
}

.icon-dashed-circle-arrow::before {
  content: ">";
  font-size: 8px;
  color: #68adb7;
  font-weight: bold;
  transform: translateX(1px);
}

/* 不同尺寸的變體 */
.icon-dashed-circle-arrow.small {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}

.icon-dashed-circle-arrow.small::before {
  font-size: 6px;
}

.icon-dashed-circle-arrow.large {
  width: 20px;
  height: 20px;
  border-width: 2.5px;
}

.icon-dashed-circle-arrow.large::before {
  font-size: 10px;
}

/* 不同顏色的變體 */
.icon-dashed-circle-arrow.primary {
  border-color: #68adb7;
}

.icon-dashed-circle-arrow.primary::before {
  color: #68adb7;
}

.icon-dashed-circle-arrow.secondary {
  border-color: #5a9ba5;
}

.icon-dashed-circle-arrow.secondary::before {
  color: #5a9ba5;
}

.icon-dashed-circle-arrow.white {
  border-color: #ffffff;
}

.icon-dashed-circle-arrow.white::before {
  color: #ffffff;
}

/* 動畫效果 */
.icon-dashed-circle-arrow.animated {
  transition: all 0.3s ease;
}

.icon-dashed-circle-arrow.animated:hover {
  transform: scale(1.1);
  border-color: #5a9ba5;
}

.icon-dashed-circle-arrow.animated:hover::before {
  color: #5a9ba5;
}

/* 影片區塊響應式樣式 */
@media screen and (max-width: 1024px) {
  .video-header {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }
  
  .video-description {
    text-align: center;
    margin-left: 0;
    max-width: 100%;
    margin: 0 0;
  }
}

@media screen and (max-width: 768px) {
  /* 統一標題區塊樣式 - 手機版 */
  .common-title-section .title-english,
  .video-title-section .title-english,
  .news-section .common-title-section .title-english,
  .brand-section .common-title-section .title-english,
  .brand-title-section .title-english,
  .title-english {
    left: 0 !important;
    font-size: 26px;
  }
  
  .common-title-section .title-bottom,
  .video-title-section .title-bottom,
  .news-section .common-title-section .title-bottom,
  .brand-section .common-title-section .title-bottom,
  .brand-title-section .title-bottom,
  .title-bottom {
    left: 0 !important;
  }


  /* .video-section {
    margin-top: 60px;
    padding: 40px 0;
  } */
  
  .video-header {
    margin-bottom: 30px;
  }
  
  /* .video-container {
    padding: 0 15px;
  } */
  
  /* .video-wrapper {
    border-radius: 10px;
  } */
  
  /* .video-title-section .title-circle {
    width: 60px;
    height: 60px;
  } */
  
  .video-title-section .product-title {
    font-size: 24px;
  }
  
  .video-description {
    font-size: 15px;
  }
}

/* 最新消息區塊響應式樣式 */
@media screen and (max-width: 1024px) {
  /* 統一標題區塊樣式 - 平板版 */
  .common-title-section .title-english,
  .video-title-section .title-english,
  .news-section .common-title-section .title-english,
  .brand-section .common-title-section .title-english,
  .brand-title-section .title-english,
  .title-english {
    position: static;
    left: 0 !important;
  }
  
  .common-title-section .title-bottom,
  .video-title-section .title-bottom,
  .news-section .common-title-section .title-bottom,
  .brand-section .common-title-section .title-bottom,
  .brand-title-section .title-bottom,
  .title-bottom {
    left: 0 !important;
  }

  .title-line{ width:unset;}  

  .news-section .product-header {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .news-date {
    order: 1;
    text-align: center;
  }
  
  .news-section .common-title-section {
    order: 2;
  }
  
  .news-section .view-more-btn {
    order: 3;
    justify-content: center;
  }
  
  /* 最新消息標題區塊樣式 */
  .news-header {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    align-items: center;
  }
  
  .news-header .video-title-section {
    order: 1;
    text-align: center;
  }
  
  .news-header .view-more-btn {
    order: 2;
    justify-content: center;
  }
}

/* 最新消息響應式設計 */
@media screen and (max-width: 1200px) {
  #news-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}

@media screen and (max-width: 768px) {
  .news-section {
    /* margin-top: 60px; */
    padding: 40px 0;
  }
  
  .news-header {
    margin: 3vw 0;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    align-items: center;
  }
  
  .news-header .video-title-section {
    order: 1;
    text-align: center;
  }
  
  .news-header .view-more-btn {
    order: 2;
    justify-content: center;
  }
  
  .news-section .common-title-section .title-circle {
    width: 60px;
    height: 60px;
  }
  

  
  .news-section .view-more-btn {
    font-size: 14px;
    margin: 30px 0;
  }
  
  #news-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 0 10px;
  }
  
  .news-recommend-item {
    margin-bottom: 20px;
  }
  
  .news-item-content {
    padding: 15px;
  }
  
  .news-title {
    font-size: 14px;
  }
  
  .news-category {
    font-size: 12px;
  }
  
  .news-view-detail {
    font-size: 11px;
  }
}

@media screen and (max-width: 480px) {
  /* 小螢幕標題樣式 */
  .news-header {
    margin: 2vw 0;
    gap: 15px;
  }
  
  .news-header .video-title-section .title-english {
    /* font-size: 8px; */
  }
  
  .news-header .view-more-btn {
    font-size: 12px;
  }
  
  #news-list {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 10px;
  }
  
  .news-recommend-item:hover {
    transform: translateY(-4px);
  }
  
  /* 品牌簡介小螢幕樣式 */
  .brand-section {
    padding: 30px 10px;
  }
  
  .brand-row {
    margin-bottom: 20px;
    border-radius: 10px;
  }
  
  .brand-content {
    padding: 25px 15px;
  }
  
  .brand-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  
  .brand-content-title {
    font-size: 18px;
    letter-spacing: 3px;
  }
  
  .brand-content-subtitle {
    font-size: 13px;
  }
  
  .brand-description {
    font-size: 13px;
    line-height: 1.6;
  }
  
  .bxslider li img {
    height: 180px;
  }
  
  .brand-image img {
    height: 180px;
  }
  
  .brand-story-content {
    padding: 25px 15px;
  }
  
  .brand-story-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  
  .brand-story-title {
    font-size: 16px;
    letter-spacing: 1px;
  }
  
  .brand-story-subtitle {
    font-size: 13px;
  }
  
  .brand-story-description {
    font-size: 13px;
    line-height: 1.6;
  }
}

/* Footer 響應式設計 */
@media screen and (max-width: 1024px) {
  #footer {
    padding: 50px 0 0 0;
  }
  
  #footer .footer_wrap {
    flex-direction: column;
    gap: 50px;
    padding: 0 30px;
  }
  
  .footer_left {
    width: 100%;
    text-align: center;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .footer_logo {
    margin-bottom: 30px;
  }
  
  .footer_contact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 500px;
    width: 100%;
    margin-bottom: 30px;
  }
  
  .contact_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .contact_label {
    font-size: 12px;
    color: #c1fffb;
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .contact_value {
    font-size: 14px;
    color: #ffffff;
    line-height: 1.4;
  }
  
  .footer_social {
    justify-content: center;
    gap: 15px;
  }
  
  .social_icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, #68adb7 0%, #97dbe1 100%);
    transition: all 0.3s ease;
  }
  
  .social_icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(104, 173, 183, 0.4);
  }
  
  .footer_right {
    gap: 30px;
    justify-content: center;
  }
  
  .footer_menu_column {
    min-width: 140px;
    text-align: center;
  }
  
  .footer_menu_header {
    margin-bottom: 20px;
  }
  
  .menu_underline {
    width: 40px;
    margin: 10px auto;
  }
}


@media screen and (max-width: 768px) {
  #footer {
    padding: 0px 0 0 0;
  }
  
  #footer .footer_wrap {
    padding: 0 15px;
    gap: 30px;
  }
  
  .footer_contact {
    max-width: 100%;
  }
  
  .contact_item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 10px;
    gap: 5px;
  }
  
  .contact_label {
    margin-right: 0;
    min-width: auto;
    font-size: 14px;
    font-weight: normal;
  }
  
  .contact_value {
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 1px;
  }
  
  .social_icon {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
  
  .footer_right {
    /* flex-direction: column; */
    gap: 20px;
    align-items: center;
  }
  
  .footer_menu_column {
    flex: none;
    width: 100%;
    /* max-width: 300px; */
    padding: 20px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  .footer_menu_header {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .menu_english {
    font-size: 10px;
  }
  
  .menu_chinese {
    font-size: 15px;
  }
  
  .menu_underline {
    display: none;
  }
  
  .footer_menu_links {
    gap: 6px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer_menu_links a {
    font-size: 12px;
    padding: 8px;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
  }
  
  .footer_menu_links a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #68adb7 0%, #97dbe1 100%);
    transition: all 0.3s ease;
  }

  .footer_menu_links a:hover {
    background: rgba(255, 255, 255, 0.08);
    padding-left: 8px;
    transform: translateY(-1px);
  }

  .footer_menu_links a:hover::before {
    width: 100px;
  }
  
  .footer_bottom {
    /* margin-top: 30px; */
    /* padding: 15px 0; */
  }
  
  .copyright_text {
    font-size: 12px;
    padding: 10px 10px;
    text-align: center;
  }
}

/* 品牌簡介區塊響應式樣式 */
@media screen and (max-width: 1024px) {
  /* 品牌簡介大標題樣式 - 與最新商品一致 */
  .brand-section .common-title-section {
    text-align: center;
    margin-bottom: 40px;
    align-items: center;
  }
  
  .brand-section .common-title-section .title-circle {
    align-self: center;
  }
  
  .brand-section .common-title-section .title-bottom {
    position: static !important;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  
  .brand-section .common-title-section .product-title {
    text-align: center;
  }
  
  .brand-row {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 30px;
    background: #ffffff;
  }
  
  .brand-content {
    width: 100%;
    max-width: 100%;
    text-align: center;
    padding: 40px 30px;
    box-sizing: border-box;
    border: none;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  }
  
  .brand-content-header {
    margin-bottom: 25px;
  }
  
  .brand-icon {
    width: 70px;
    height: 70px;
    font-size: 28px;
    box-shadow: 0 6px 20px rgba(104, 173, 183, 0.4);
  }
  
  .brand-text-group {
    text-align: left;
  }
  
  .brand-content-title {
    font-size: 22px;
    margin-bottom: 10px;
  }
  
  .brand-content-subtitle {
    font-size: 15px;
    line-height: 1.8;
  }
  
  .brand-description {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
  }
  
  .brand-title-section {
    align-items: center;
  }
  
  .brand-slider-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0 0 30px 0;
  }
  
  .brand-slider-wrapper .bxslider-bullet {
    border-radius: 0 0 15px 15px;
  }
  
  .brand-image {
    width: 100%;
    max-width: 100%;
    order: 1;
  }
  
  .brand-image img {
    width: 100%;
    /* height: 250px; */
    object-fit: cover;
    display: block;
  }
  
  .brand-story-content {
    width: 100%;
    max-width: 100%;
    padding: 40px 30px;
    order: 2;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  }
  
  .brand-story-header {
    justify-content: center;
    margin-bottom: 25px;
  }
  
  .brand-story-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #68adb7 0%, #97dbe1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    box-shadow: 0 6px 20px rgba(104, 173, 183, 0.4);
    flex-shrink: 0;
    margin-right: 15px;
  }
  
  .brand-story-text-group {
    text-align: left;
  }
  
  .brand-story-title {
    font-size: 22px;
    color: #097984;
    margin-bottom: 10px;
  }
  
  .brand-story-subtitle {
    font-size: 15px;
    color: #097984;
    line-height: 1.8;
  }
  
  .brand-story-description {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    text-align: left;
  }
}

@media screen and (max-width: 768px) {
  .brand-section {
    margin-top: 60px;
    padding: 40px 15px;
  }
  
  .brand-section .common-title-section {
    margin-bottom: 30px;
  }
  
  .brand-section .common-title-section .title-bottom {
    position: static !important;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  
  .brand-section .common-title-section .product-title {
    text-align: center;
  }
  
  .brand-row {
    gap: 0;
    margin-bottom: 25px;
    border-radius: 12px;
  }
  
  .brand-content {
    padding: 30px 20px;
  }
  
  .brand-content-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .brand-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
    margin: 0 auto;
  }
  
  .brand-content-title {
    font-size: 20px;
    letter-spacing: 5px;
  }
  
  .brand-content-subtitle {
    font-size: 14px;
    letter-spacing: 1px;
  }
  
  .brand-description {
    font-size: 14px;
    line-height: 1.7;
    margin-top: 20px;
  }
  
  .brand-title-section {
    margin-bottom: 20px;
  }
  
  .bxslider li img {
    height: 200px;
    object-fit: cover;
  }
  
  .brand-image img {
    height: 200px;
    object-fit: cover;
  }
  
  .brand-story-content {
    padding: 30px 20px;
  }
  
  .brand-story-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .brand-story-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
    margin: 0 auto 0 auto;
  }
  
  .brand-story-title {
    font-size: 18px;
    letter-spacing: 2px;
  }
  
  .brand-story-subtitle {
    font-size: 14px;
    letter-spacing: 1px;
  }
  
  .brand-story-description {
    font-size: 14px;
    line-height: 1.7;
    margin-top: 20px;
  }
}

/* ============================================================
   書目搜尋 Fancybox 彈窗
   ============================================================ */
.book-search-fancybox-wrap .fancybox-bg {
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.book-search-fancybox-wrap .fancybox-slide--inline {
  padding: 24px;
}

.book-search-fancybox-wrap .fancybox-slide--inline::before {
  display: none;
}

.book-search-fancybox-wrap .fancybox-content {
  padding: 0;
  margin: 0;
  background: transparent;
  overflow: hidden;
  vertical-align: middle;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 720px;
  max-width: 100%;
}

.book-search-fancybox-wrap .fancybox-close-small {
  display: none;
}

.book-search-modal {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
}

.book-search-modal__head {
  background: #313131;
  color: #ffffff;
  text-align: center;
  padding: 20px 24px;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1.4;
}

.book-search-modal__body {
  background: #ffffff;
  padding: 32px 36px 36px;
}

.book-search-modal__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 28px;
}

.book-search-modal__field {
  min-width: 0;
}

.book-search-modal__label {
  display: block;
  margin: 0 0 12px;
  font-size: 15px;
  color: #111111;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.book-search-modal__input,
.book-search-modal__select {
  display: block;
  width: 100%;
  height: 55px;
  min-height: 55px;
  border: 1px solid #b5b5b5;
  border-radius: 999px;
  padding: 0 20px;
  font-size: 15px;
  color: #333333;
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  background: #ffffff;
  outline: none;
  transition: border-color 0.2s ease;
  line-height: 48px;
  border-radius: 15px !important;
}

.book-search-modal__input:focus,
.book-search-modal__select:focus {
  border-color: #f58220;
}

.book-search-modal__input::placeholder {
  color: #aaaaaa;
}

.book-search-modal__select-wrap {
  position: relative;
  display: block;
}

.book-search-modal__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  line-height: normal;
}

.book-search-modal__select-wrap::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #333333;
  pointer-events: none;
}

.book-search-modal__submit-wrap {
  text-align: center;
  margin-top: 32px;
}

.book-search-modal__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 32px;
  border: 1px solid #d0d0d0;
  border-radius: 15px;
  background: #ffffff;
  color: #4c4c4c;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  box-sizing: border-box;
}

.book-search-modal__submit:hover {
  border-color: #f58220;
  color: #f58220;
}

@media screen and (max-width: 768px) {
  .book-search-fancybox-wrap .fancybox-slide--inline {
    padding: 16px;
  }

  .book-search-fancybox-wrap .fancybox-content {
    border-radius: 16px;
  }

  .book-search-modal {
    border-radius: 16px;
  }

  .book-search-modal__body {
    padding: 24px 20px 28px;
  }

  .book-search-modal__fields {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .book-search-modal__head {
    font-size: 16px;
    padding: 16px 20px;
  }
}



/* ========== 頁內錨點的捲動保險 ========== */
/*
 * JS（jquery_action.js 的 scrollToAnchorTarget）會扣掉固定元件高度後才捲，
 * 這裡的 scroll-margin-top 是 JS 沒跑到時的 fallback：
 * 瀏覽器原生錨點跳轉會自動保留這段距離，標題就不會被 sticky 版頭切掉。
 * 數值抓 .and-header 的實際高度再多留一點呼吸空間。
 * 用法與眉角見 /customise-anchor-nav skill。
 */
/* 本站版頭刻意不吸頂（見 css_book_detail.css 的說明），所以一般頁面只需要一點呼吸空間。
   單書詳細頁另有 sticky 的頁籤列，那一頁由 JS 依實際高度計算，不靠這裡的固定值。 */
.inner-cate-block,
#brands,
#platform,
#promotion,
#form,
#order-browse {
  scroll-margin-top: 20px;
}

/* ========== 下載按鈕防連點的鎖住狀態 ========== */
/*
 * 由 jquery_action.js 的 initDownloadOnce() 加上／移除（點過鎖 3 秒）。
 * 套用對象是任何帶 .js-download-once 的下載連結，不限模組。
 *
 * pointer-events: none 只擋得住滑鼠，鍵盤 Enter 仍會觸發 click，
 * 所以 JS 那邊還會再判斷一次 hasClass——兩層缺一不可。
 */
.is-download-locked {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

/* ============================================================
   SweetAlert2 按鈕改成站台主色（2026-08-19 業主指示：統一顏色）
   ------------------------------------------------------------
   套件預設是紫色 #7066e0，在橘色系的站台裡很突兀。
   只覆寫 CSS 變數即可，:hover 與 :active 是套件用 color-mix() 從這個
   變數推出來的，會自動跟著變，不用另外寫。

   ★ 選擇器用 html:root 不是 :root：sweetalert2 的 :root 宣告在
     contact.php 的載入順序裡排在 css_main.css 後面，同權重後者會贏。
     多一個 html 讓權重高於它，之後不管誰先誰後都不會被吃掉。
   ============================================================ */
html:root {
    --swal2-confirm-button-background-color: #e8831f;
}