@charset "utf-8";
.main__logo--img svg {width: 252px}
/* CSS Document */
.font-serif {font-family: var(--font-serif)}
.small_english {text-transform: uppercase;color:#896b25;font-size: 1.0rem;margin-bottom: 2rem;letter-spacing: 1.2rem ;border-left: 3px solid #896b25;padding-left: 10px}
.cooper_01 {padding: 200px 0;background:#faf8f5 url("../img/cooper/c-01.jpg") no-repeat left center ;}
.Estate_01 {padding: 200px 0;background:#ede9e4 url("../img/Estate/E001.jpg") no-repeat left center ;}

.cooper_02 {padding: 200px 0;background:#f0e6dc url("../img/cooper/c-02.jpg") no-repeat left center ;background-attachment: fixed}
.cooper_03 {padding: 200px 0;background:#f0e6dc}
.SINYUE_GAP_XL{
    --bs-gutter-x: 6rem;
    --bs-gutter-y: 6rem;
}
.title-4 {font-size: 30px;line-height: 1.2}
.single__widget.widget__bg {
    padding: 2.5rem 2rem;
    border-radius: 1.2rem;
    -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    background-color: #fff;
}
.widget__title {
    
    color:#2A2A2A;
    
}
.widget__title::before {
  
    background: #2A2A2A;
}
.home_section_color {
    padding: 200px 0;
    background: linear-gradient(180deg, #303e5d 0%, #303e5d 50%);
}
.home_section_color-dark {padding: 150px 0;background-color:  #303e5d }
.home_section_color-dark.gao {padding: 200px 0;background-color:  #303e5d }
.home_section_color-dark.class {padding: 280px 0;background: #303e5d url("../img/slider/class.jpg") no-repeat right center ;background-size: 1050px  }
.home_section_color-dark.server {padding: 200px 0;background:  rgba(4,10,24,1) url("../img/slider/home-5.jpg") no-repeat right center ;background-size: 1250px }
.home_section_color.class {padding: 200px 0;background:  #eae5dd url("../img/slider/home-7.jpg") no-repeat center right ;}

.home_section_whiteone {padding: 200px 0;background:#fff5e9 url("../img/slider/w001.jpg") no-repeat left center ;background-size: 1000px }
.card-icon {}
.card-icon img{max-width: 150px;display: block;margin: 0 auto 20px auto}
.card-number {text-align: center;font-size: 4rem;color:#ebcf8e;margin-bottom: 30px }
.card-titleOne {text-align: center;font-size: 2rem;margin-bottom: 10px;color:#fff }
.card-desOne {text-align: center;font-size: 1.4rem;margin-bottom: 10px;color:rgba(255,255,255,0.75) }
.qrcode {border-radius: 8px;overflow: hidden;margin-bottom: 20px}
.qrcode img {width: 100%}
.imageWords {position: absolute;top:20%;width: 100%;z-index: 1}
.slider__descK {color:#fff;}
.slider__descK ul {margin:24px 0}
.slider__descK li {display: inline-block;padding: 3px 5px;font-size: 16px;color:#F9F9F9}
/*淺色卡片*/
/* =========================================
   SINYU Luxury Light Card
========================================= */

.SINYU-light-card{
    text-align: center;

    position: relative;

    overflow: hidden;

    height: 100%;

    padding: 34px 32px;

    border-radius: 32px;

    background:
   linear-gradient(250deg, rgb(78 174 223) 0%, rgb(38 128 173) 60%);

    border: 1px solid rgba(215,205,190,.45);

    box-shadow:
    0 10px 40px rgba(30,42,56,.04),
    0 2px 10px rgba(30,42,56,.03),
    inset 0 1px 0 rgba(255,255,255,.95);

    backdrop-filter: blur(12px);

    transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-color .45s ease;
}

/* 上方柔光 */

.SINYU-light-card::before{

    content: "";

    position: absolute;

    top: -120px;
    right: -120px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
    radial-gradient(
        circle,
        rgba(200,163,106,.10) 0%,
        rgba(200,163,106,0) 72%
    );

    pointer-events: none;
}

/* 微玻璃光澤 */

.SINYU-light-card::after{

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.65),
        rgba(255,255,255,0)
    );

    pointer-events: none;
}

/* Hover */

.SINYU-light-card:hover{

    transform: translateY(-10px);

    border-color: rgba(200,163,106,.35);

    box-shadow:
    0 25px 60px rgba(30,42,56,.08),
    0 10px 25px rgba(200,163,106,.08);
}

/* =========================
   Icon
========================= */

.SINYU-light-card-icon{

    width: 95px;
    height: 95px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 20px auto;

    border-radius: 24px;

    background-color:transparent;

    border: 1px solid rgba(200,163,106,.18);

  
}

/* icon svg */

.SINYU-light-card-icon img{

    width: 100%;
    stroke: #c8a36a;
}

/* =========================
   Number
========================= */

.SINYU-light-card-number{

    font-size: 48px;

    line-height: 1;

    font-weight: 500;

    margin-bottom: 18px;

    color: #ebcf8e;

   
}

/* =========================
   Title
========================= */

.SINYU-light-card-title{

    font-size: 2rem;

    line-height: 1.35;

    letter-spacing: 1px;

    margin-bottom: 20px;

    color: #fff;

    font-weight: 600;
}

/* =========================
   Description
========================= */

.SINYU-light-card-text{

    font-size: 1.4rem;

    line-height: 1.9;

    color: #ebcf8e;
}

/* =========================
   Responsive
========================= */

@media(max-width:991px){

    .SINYU-light-card{

        padding: 42px 30px;
        border-radius: 26px;
    }

    .SINYU-light-card-title{

        font-size: 28px;
    }

}
/**/
.SINYU-icon-list{
  list-style: none;
  padding: 0;
  margin: 30px 0 0 0;
}

.SINYU-icon-list li{
  display: flex;
  align-items: center;
  gap: 18px;

  margin-bottom: 12px;

  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 1px;

  color: #3b3b3b;
 
}

/* 圈圈 */
.SINYU-icon{
  width: 32px;
  height: 32px;

  border: 2px solid #c49a4a;
  border-radius: 50%;

  position: relative;

  flex-shrink: 0;
}

/* icon 真正置中 */
.SINYU-icon i{
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 16px;
  color: #c49a4a;

  line-height: 1;
}

/**/
.SINYU-check-listA{
  list-style: none;
  padding: 0;
  margin: 0;
}

.SINYU-check-listA li{
  position: relative;
  padding-left: 42px;
  margin-bottom: 22px;

  font-size: 14px;
  font-weight: 600;
  color: #3b3b3b;
  line-height: 1.6;
  letter-spacing: 1px;
}

/* 外圓 */
.SINYU-check-listA li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 6px;

  width: 24px;
  height: 24px;

  border: 1px solid #c49a4a;
  border-radius: 50%;
  box-sizing: border-box;
}

/* check */
.SINYU-check-listA li::after{
  content: "";
  position: absolute;
  left: 8px;
  top: 12px;

  width: 7px;
  height: 12px;

  border-right: 2px solid #c49a4a;
  border-bottom: 2px solid #c49a4a;

  transform: rotate(45deg);
}
/* =========================
   SINYU 卡片淺藍漸層
========================= */

.SINYU-service-card-lightblue{
    margin-top: 30px;

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    padding: 42px 36px;

    border: 1px solid rgba(255,255,255,0.06);

    background:
    linear-gradient(
        145deg,
        rgba(20,35,60,0.95) 0%,
        rgba(8,18,38,0.98) 45%,
        rgba(4,10,24,1) 100%
    );

    box-shadow:
    0 10px 40px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);

    backdrop-filter: blur(10px);

    transition: all .45s ease;
}
.SINYU-service-card-lightblue:hover{

    transform: translateY(-8px);

    background:
    linear-gradient(
        145deg,
        rgba(28,48,80,1) 0%,
        rgba(12,25,48,1) 50%,
        rgba(5,12,28,1) 100%
    );

    box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 0 30px rgba(200,163,106,.08);
}

.server .SINYU-service-card {
    background:none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;

    transition: all .45s ease;
    
}
.server .SINYU-service-card:hover {
    background:none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;

    transition: all .45s ease;
    
}
.server .SINYU-service-card .card-icon {border-radius: 50%;width: 150px;padding:10px;text-align: center;height: 150px;border:3px solid #896b25;margin: 20px auto;}
.server .SINYU-service-card .card-icon img {max-width: inherit;width: 100%}
/* =========================
   SINYU 卡片深藍漸層
========================= */

.SINYU-service-card{
    margin-top: 30px;

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    padding: 42px 36px;

    border: 1px solid rgba(255,255,255,0.06);

   background: linear-gradient(145deg, rgb(81 99 139), rgb(56 71 105) 25%, rgba(48 62 93) 100%);

    box-shadow:
    0 10px 40px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);

    backdrop-filter: blur(10px);

    transition: all .45s ease;
}
.SINYU-service-card:hover{

    transform: translateY(-8px);

     background: linear-gradient(145deg, rgb(48 62 93) 20%, rgb(56 71 105) 60%, rgb(81 99 139) 100%);

    box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 0 30px rgba(200,163,106,.08);
}

.server .SINYU-service-card {
    background:none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;

    transition: all .45s ease;
    
}
.server .SINYU-service-card:hover {
    background:none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;

    transition: all .45s ease;
    
}
.server .SINYU-service-card .card-icon {border-radius: 50%;width: 150px;padding:10px;text-align: center;height: 150px;border:3px solid #896b25;margin: 20px auto;}
.server .SINYU-service-card .card-icon img {max-width: inherit;width: 100%}
/* =========================
   SINYU 英文標題前方直線
========================= */

.SINYU-section-label{
    position: relative;

    display: inline-flex;
    align-items: center;

    padding-left: 18px;

    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
color: #896b25;
    font-family: 'Noto Serif TC', serif;
    margin-bottom: 15px;
    
}

/* 前方直線 */

.SINYU-section-label::before{
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 2px;
    height: 14px;

    background: #896b25;

    transform: translateY(-50%);

    border-radius: 10px;
}

.SINYU-section-label_white{
    position: relative;

    display: inline-flex;
    align-items: center;

    padding-left: 18px;

    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
color: #fff;
  
    
}

/* 前方直線 */

.SINYU-section-label_white::before{
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 2px;
    height: 14px;

    background: #fff;

    transform: translateY(-50%);

    border-radius: 10px;
}

.SINYU-section-label_goldlight{
    position: relative;

    display: inline-flex;
    align-items: center;

    padding-left: 18px;

    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
color: #ebcf8e;
  
    
}

/* 前方直線 */

.SINYU-section-label_goldlight::before{
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 2px;
    height: 14px;

    background: #ebcf8e;

    transform: translateY(-50%);

    border-radius: 10px;
}




.gao .SINYU-section-label{
    position: relative;

    display: inline-flex;
    align-items: center;

    padding-left: 0px;

    font-size: 30px;
    letter-spacing: 4px;
    text-transform: uppercase;
color: #ebcf8e;
    font-family: 'Noto Serif TC', serif;
    margin-bottom: 30px
}
.gao .SINYU-section-label::before{
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 0px;
    height: 0px;

    background: #ebcf8e;

    transform: translateY(-50%);

    border-radius: 10px;
}
.line-pick {
    width: 100px;
    height: 2px;
    background-color: #896b25;
    display: block;
    margin: 60px 0;
}

.slogan {font-family: var(--font-serif);color:#896b25;font-size: 1.6rem;margin-bottom: 2rem;letter-spacing: 1.9rem;gap:2rem;font-weight: 500;  }
.home__three--slider__items.homeBanner-01 {background:url("../img/slider/home-01.jpg") no-repeat center top;background-size: cover;position: relative}
.home__three--slider__items.homeBanner-02 {background:url("../img/slider/home-02.jpg") no-repeat center top;background-size: cover;position: relative}
.home__three--slider__items.homeBanner-03 {background:url("../img/slider/home-03.jpg") no-repeat center top;background-size: cover;position: relative}
.bg-plantfinity {background: #afafaf url("../img/banner/bg002.jpg") no-repeat;background-attachment: fixed}
    .slider__items--inner {
        padding-top: 25%;
    }
.bg-color__plantfinity {background-color: #fdf5f5 }
.contact__section {background-color: #F0F0F0}
.form-check-input {
   
    margin-top: 20px;
    vertical-align: middle;
}
.pro_img_center {display: block;margin:0 auto 20px auto;max-width: 400px}
.shadowBG {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}
.shadowBG {
    -webkit-box-shadow: inherit !important;
    box-shadow: inherit !important;
}
.shadowBG.dark-hard {
    position: relative;
    z-index: 1;
}
.shadowBG.dark-hard:after {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    -webkit-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
.shadowBG.dark-hard::after {
   display: block
}
.shadowBG.dark-hard.colorful:after {
 
    background:#000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    -webkit-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
.banner-style-ten-area {
    padding-top: 220px;
    padding-bottom: 150px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.banner-style-ten-area video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
}
.banner-style-ten-area.smallpadding {
    padding-top: 100px;
    padding-bottom: 100px;
   
}

.header__account--items {display: block}
.hero__slider--sectionA{position: relative}
.upload-section {padding:30px 40px;background-color:#E9E8E8;position: relative}
.upload-section h4 {font-size: 2.6rem;font-weight: 500}
.ssi-imgToUpload {
    max-width: 150px;
    height: auto;
}
.ssi-imgToUploadTable tr td {
    width: auto;
}
.pro_img {}
.pro_img img {display: block;margin: 0 0 20px 0}
.grid__banner--title {font-size: 6rem;text-transform: uppercase}
.item-intra {padding:10px 10px 50px 10px;margin-bottom: 10px;text-align: center;background-color: #fff;box-shadow: 0px 0px 5px rgba(0,0,0,.3);margin-top: 30px}
.item-intra img {padding:0px 10px;margin-bottom: 20px;overflow: hidden;border-radius: 5px}
.item-intra  h4 {color: #5C4D2D;font-size: 2rem;line-height: 2.6rem;margin-bottom: 25px}
.item-intra  h5 {color: #1B1B1B;font-size: 1.45rem;line-height: 2rem;padding:10px 1px 50px 1px}
.blog__card {position: relative}
.stepicon {width: 100px;height: 100px;text-align: center;font-size:24px;padding-top:22px;background-color: #AC4435;color: #fff;border-radius: 50% }
.stepicon span {font-size:40px;display: block;margin-top: 5px;font-weight: 600}
.face__step--title {
   margin-bottom: 30px;
    color: #d5855d;
}
.face__step {
    margin-bottom: 4.5rem;
    padding-bottom: 4.5rem;
}
.accordion__items--body {
    
    padding: 20px;
}
.hero__word {position: absolute;z-index: 4;top:0;left: 0;width: 100%;height: auto}
.home__two--slider__items {
    position: relative;}
/*連動*/
.main-wrapper {
            position: relative;
            width: 100%;
            /* height: 100vh; 全螢幕高度 */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
    padding:50px 0
        }

        /* 2. 按鈕分散定位與樣式 */
        .custom-btn {
            position: absolute;
            padding: 15px 30px;
            z-index: 50;
            cursor: pointer;
            border: none;
            background: #ffffff;
            color: #333;
            font-size: 16px;
            font-weight: 600;
            border-radius: 50px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        /* 分散位置定義 */
        .pos-1 { top: 10%; left: 10%; }
        .pos-2 { bottom: 20%; right: 5%;  }
        .pos-3 { bottom: 10%; left: 15%; }
.pos-4 { bottom: 40%; left: 10%; }
.pos-5 { top: 30%; right: 15%; }

        /* Hover 效果 */
        .custom-btn:hover {
            transform: translateY(-8px); /* 向上浮起 */
            box-shadow: 0 12px 24px rgba(0,0,0,0.2);
            color: #007AFF;
        }

        /* Active 選中狀態與呼吸燈動畫 */
        .custom-btn.active {
            background: #333;
            color: #fff;
            box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.3);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* 3. 內容顯示區塊 */
        .display-container {
            width: 800px;
            height: 500px;
            position: relative;
        }

        .content-block {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            display: none; /* 初始隱藏 */
        }

        .content-block.active {
            display: block;
        }

        /* 圖片淡入 */
        .img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        /* 4. 文字位移效果 (由下而上) */
        .text-box {
            position: absolute;
            bottom: -30px;
            left: 40px;
            background: rgba(255, 255, 255, 0.9);
            padding: 25px;
            border-radius: 15px;
            max-width: 300px;
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease-out;
            backdrop-filter: blur(5px);
        }

        .content-block.active .text-box {
            opacity: 1;
            transform: translateY(-60px); /* 向上浮現到定位 */
        }

        .text-box h2 { margin: 0 0 10px; color: #1d1d1f; }
        .text-box p { margin: 0; color: #666; line-height: 1.6;font-size: 1.4rem }
/*連動*/
/*blog*/
.blog__card { padding: 20px;}
.blog__details--content__desc {white-space: pre-line;line-height: 26px}

/*blog*/
.section__heading h2 {font-size: 2rem}
.privacy__policy--content {}
.privacy__policy--content ul {}
.privacy__policy--content ul li {display: block;padding:10px 0;margin-bottom: 15px;line-height: 20px;font-size: 15px}
.hero__slider--section {background-color: #000;}
.header__sub--menu__link {
    font-size: 1.5rem;
    display: block;
    line-height: 1.6rem;
    padding: 10px 0;
    font-weight: 500;
    color: var(--primary-color);
}
.header__menu--link_level {
    font-size: 1.5rem;
    display: block;
    line-height: 1.6rem;
    padding: 10px 0;
    font-weight: 500;
    color: var(--primary-color);
}
.current__price {
    font-family:var( --Lato-fonts);
    
}
.current__price span {
    font-family:var( --Lato-fonts);
    color: var(--hover-color);
    font-weight: 400;
    line-height: 3rem;
    font-size: 3rem;
    display: inline-block;
    margin-left: 8px;
    
}
.account__content--title {
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.8rem;
    color: var(--primary-color);
    border-bottom: 1px dashed #000;
    padding-bottom: 20px;
}
.product__details--info__price .old__price {
    font-size: 1.4rem;
    margin-left: 0rem;
    display: block;
    font-family:var( --Lato-fonts);
}
.product__details--info__title {
    font-size: 2.6rem;
    line-height: 3rem;
    color: var(--primary-color);
}
.product__details--info__title.eng {
    font-size: 1.5rem;
    line-height: 3rem;
    color: var(--primary-color);
    color:#656565
}
    .product__details--info {
       padding-top: 20px;
    }
.product__details--media {
  
    padding:0 20px 20px;
}
.pro-material {padding:20px;background-color: #D46E63;font-size: 1.4rem;color:#fff;margin: 10px 0;white-space: pre-line}
.product__tab--conten {padding:25px 0}
.product__tab--content img {max-width: 1200px;display: block;margin: 0 auto;width: 100%}
.pro_Return {white-space: pre-line;font-size: 1.6rem; }
.pro_Return span {color: #AF4F35;font-size: 2.1rem;font-weight: 500 }
input.quantity__number {
    
    width: 6rem;
    
}
.membertravel-box {padding:0 15px}
.membertravel-box .btn {font-size: 1.6rem}
details {
  border: 0px solid #aaaaaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0; background-color: #efdcdc;
    display: block;padding:10px 5px
   
}

summary {
    text-align: left;
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
   
}
.section_diff {padding:10px 50px}
@media only screen and (min-width: 992px) {
    .product__details--info__title {
        font-size: 3.6rem;
        margin: 10px 0 20px 0;
    }
    .product__details--info__title.eng {
    font-size: 2.5rem;
    
}
}
.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 1rem 4rem;
    font-size: 2rem;
    border-radius: .25rem;
    transition: color .15s 
ease-in-out, background-color .15s 
ease-in-out, border-color .15s 
ease-in-out, box-shadow .15s 
ease-in-out;
}
.btn-block {width: 100%}
.btn-outline-danger {color: red;
    background-color: transparent;
    border-color: red;}
.btn-outline-danger:hover {color: white;
    background-color: red;
    border-color: red;}
.btn-dark {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
}
 .btn-dark:hover {
    color: #fff;
    background-color: #646464;
    border-color: #212529;
} 
.btn-danger {
  color: #fff !important;
  background-color: #dc3545;
  border-color: #dc3545
}
.btn-danger:hover {
  color: #fff;
  background-color: #bb2d3b;
  border-color: #b02a37
}
.btn-outline-dark {
    color: #212529;
    background-color: none;
    border-color: #212529;
}
.btn-outline-dark:hover {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
}
.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd
}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .5)
}
.btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd
}
.btn-check:active + .btn-outline-primary:focus, .btn-check:checked + .btn-outline-primary:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus, .btn-outline-primary:active:focus {
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .5)
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #0d6efd;
  background-color: transparent
}
.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d
}
.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d
}
.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
  box-shadow: 0 0 0 .25rem rgba(108, 117, 125, .5)
}
.btn-check:active + .btn-outline-secondary, .btn-check:checked + .btn-outline-secondary, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show, .btn-outline-secondary:active {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d
}
.btn-check:active + .btn-outline-secondary:focus, .btn-check:checked + .btn-outline-secondary:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus, .btn-outline-secondary:active:focus {
  box-shadow: 0 0 0 .25rem rgba(108, 117, 125, .5)
}
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
  color: #6c757d;
  background-color: transparent
}
.btn-outline-success {
  color: #198754;
  border-color: #198754
}
.btn-outline-success:hover {
  color: #fff;
  background-color: #198754;
  border-color: #198754
}
.btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
  box-shadow: 0 0 0 .25rem rgba(25, 135, 84, .5)
}
.btn-check:active + .btn-outline-success, .btn-check:checked + .btn-outline-success, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show, .btn-outline-success:active {
  color: #fff;
  background-color: #198754;
  border-color: #198754
}
.btn-check:active + .btn-outline-success:focus, .btn-check:checked + .btn-outline-success:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus, .btn-outline-success:active:focus {
  box-shadow: 0 0 0 .25rem rgba(25, 135, 84, .5)
}
.btn-outline-success.disabled, .btn-outline-success:disabled {
  color: #198754;
  background-color: transparent
}
.btn-outline-info {
  color: #0dcaf0;
  border-color: #0dcaf0
}
.btn-outline-info:hover {
  color: #fff;
  background-color: #0dcaf0;
  border-color: #0dcaf0
}
.btn-info {
  color: #fff;
  background-color: #0dcaf0;
  border-color: #0dcaf0
}
.btn-info:hover {
  color: #fff;
  background-color: #31d2f2;
  border-color: #25cff2
}
.btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
  box-shadow: 0 0 0 .25rem rgba(13, 202, 240, .5)
}
.btn-check:active + .btn-outline-info, .btn-check:checked + .btn-outline-info, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show, .btn-outline-info:active {
  color: #fff;
  background-color: #0dcaf0;
  border-color: #0dcaf0
}
.btn-check:active + .btn-outline-info:focus, .btn-check:checked + .btn-outline-info:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus, .btn-outline-info:active:focus {
  box-shadow: 0 0 0 .25rem rgba(13, 202, 240, .5)
}
.btn-outline-info.disabled, .btn-outline-info:disabled {
  color: #0dcaf0;
  background-color: transparent
}
.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107
}
.btn-outline-warning:hover {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107
}
.btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
  box-shadow: 0 0 0 .25rem rgba(255, 193, 7, .5)
}
.btn-check:active + .btn-outline-warning, .btn-check:checked + .btn-outline-warning, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show, .btn-outline-warning:active {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107
}
.btn-check:active + .btn-outline-warning:focus, .btn-check:checked + .btn-outline-warning:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus, .btn-outline-warning:active:focus {
  box-shadow: 0 0 0 .25rem rgba(255, 193, 7, .5)
}
.btn-outline-warning.disabled, .btn-outline-warning:disabled {
  color: #ffc107;
  background-color: transparent
}
.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545
}
.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545
}
.btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
  box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .5)
}
.btn-check:active + .btn-outline-danger, .btn-check:checked + .btn-outline-danger, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show, .btn-outline-danger:active {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545
}
.btn-check:active + .btn-outline-danger:focus, .btn-check:checked + .btn-outline-danger:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus, .btn-outline-danger:active:focus {
  box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .5)
}
.btn-outline-danger.disabled, .btn-outline-danger:disabled {
  color: #dc3545;
  background-color: transparent
}
.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa
}
.btn-outline-light:hover {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa
}
.btn-check:focus + .btn-outline-light, .btn-outline-light:focus {
  box-shadow: 0 0 0 .25rem rgba(248, 249, 250, .5)
}
.btn-check:active + .btn-outline-light, .btn-check:checked + .btn-outline-light, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show, .btn-outline-light:active {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa
}
.btn-check:active + .btn-outline-light:focus, .btn-check:checked + .btn-outline-light:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus, .btn-outline-light:active:focus {
  box-shadow: 0 0 0 .25rem rgba(248, 249, 250, .5)
}
.btn-outline-light.disabled, .btn-outline-light:disabled {
  color: #f8f9fa;
  background-color: transparent
}
.btn-outline-dark {
  color: #212529;
  border-color: #212529
}
.btn-outline-dark:hover {
  color: #fff;
  background-color: #212529;
  border-color: #212529
}
.btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus {
  box-shadow: 0 0 0 .25rem rgba(33, 37, 41, .5)
}
.btn-check:active + .btn-outline-dark, .btn-check:checked + .btn-outline-dark, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show, .btn-outline-dark:active {
  color: #fff;
  background-color: #212529;
  border-color: #212529
}
.btn-check:active + .btn-outline-dark:focus, .btn-check:checked + .btn-outline-dark:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus, .btn-outline-dark:active:focus {
  box-shadow: 0 0 0 .25rem rgba(33, 37, 41, .5)
}
.btn-outline-dark.disabled, .btn-outline-dark:disabled {
  color: #212529;
  background-color: transparent
}
.fraBanner_section {padding:150px 0 200px 0;background-color: #000}
.fraBanner_section_step {padding:90px 0 200px 0;background: #fde9e9 url("../img/banner/fra_bg.jpg"); background-repeat: repeat-x; }
.fraBanner_section_stepColor {background-color: #b66b58;margin-bottom: 100px}
.fra_title {font-size: 2rem;line-height: 3rem;font-weight: 500;margin-bottom: 30px;text-align: center}
.variant__color--list  input[type=radio] + label{
    border: 0px solid #000000;
    background-color: transparent;
    opacity: 1;
     -webkit-transition: var(--transition);
  transition: var(--transition);
}
.variant__color--list  input[type=radio]:hover + label{
    border: 0px solid #000000;
    background-color: #e5beb5;
    opacity: 1;
}
.variant__color--list  input[type=radio]:checked + label{
    border: 0px solid #000;
    background-color: #e5beb5;
    opacity: 1;
}
.variant__color--list  input[type=radio] + label .variant__color--value__img{
    
    opacity: 1;
    background-color: #000;
     -webkit-transition: var(--transition);
  transition: var(--transition);
}
.variant__color--list  input[type=radio]:hover + label .variant__color--value__img{
    
    background-color: transparent;
    opacity: 1;
}
.variant__color--list  input[type=radio]:checked + label .variant__color--value__img{
    
    background-color: transparent;
    opacity: 1;
}
.variant__color--list  input[type=radio] + label .variant__color--value__img img{
    
    opacity: .5;
    
     -webkit-transition: var(--transition);
  transition: var(--transition);
}
.variant__color--list  input[type=radio]:hover + label .variant__color--value__img img{
    
    
    opacity: 1;
}
.variant__color--list  input[type=radio]:checked + label .variant__color--value__img img{
    
    opacity: 1;
}
.stepname {padding:20px 10px;
    color:#fff;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
font-size: 1.8rem}
.stepname.active {background-color: #741A1C}
.stepname span {
    border-radius: 5px;
    color: #b66b58;
    font-size: 1.6rem;
    height: 2rem;
    margin: 0 .625rem 0 0;
    /* vertical-align: middle; */
    width: 2rem;
    text-align: center;
    line-height: 2.3rem;
    background-color: #fff;
    font-weight: 600;
}
.variant__color--list {
    margin-right: 0px;
    margin-bottom: 20px;
    width: 24%;display: inline-block;
}
.variant__color--value {
    width: 100%;
    height: auto;
    padding: 10px;
    
    display: block;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 10px;
    margin-right: 15px;
    line-height: 1;
    cursor: pointer;
}
.variant__color--value__img {border-radius: 10px;overflow: hidden}

.fra_choose {padding:10px}
.fra_choose_img {overflow: hidden;border-radius: 10px}
.fra_choose_des {
    font-size: 1.6rem;
    padding: 20px 10px;
    text-align: center;
    line-height: 2.5rem;
    color: #454545;
}
.slideimg a {display: inherit}
.text-shadow {text-shadow: 0 0 7px rgba(0,0,0,.8)}
.fra_choose_des span {font-size: 1.8rem;font-weight: 600;display: block;margin-bottom: 20px}
.hero__slider--items { background: url("../img/slider/home-01B.jpg");height: 100vh}
.hero__slider--items.second { background: url("../img/slider/home-02.jpg");height: 100vh}
.home_section {    padding: 200px 0;
    background: url(../img/slider/section_2.jpg) no-repeat top center;
    background-attachment: fixed;background-size: cover;}
.home_section-four {    padding: 170px 0;
    background:#fff url("../img/slider/w003.jpg") no-repeat center right;background-size: 1350px
    }
.image_card {border-radius: 15px;overflow: hidden}
.slider__desc.goodlogo img {display: block;width: 220px;margin: 0 auto 20px auto}
.slider__desc.home-dis {font-size: 4.3rem;text-shadow: 0 0 7px rgba(0,0,0,.8);line-height: 5rem}
.slider__maintitle.home-dis {font-size: 6.5rem;text-shadow: 0 0 7px rgba(0,0,0,.8);color:#fff;font-weight: 600}
.home_section.about {padding:200px 0;background: url("../img/banner/about01.jpg") no-repeat center;background-size: cover}

.home_section.about_3 {padding:150px 0;background:#faf0f0 url("../img/banner/about03A.jpg") no-repeat center;background-size: cover;background-attachment: fixed }
.home_section.about_4 {padding:200px 0;background:#f7e0d7 url("../img/banner/about03.jpg") no-repeat center;background-size: cover;background-attachment: fixed}
.home_section.about_5 {padding:250px 0;background:#faf0f0 url("../img/banner/about02A.jpg") no-repeat center;background-size: cover;position: relative}
.about_7 {padding:150px 0;background:#faf0f0;}
.about_8 {padding:200px 0;background:#f7e0d7 url("../img/about/a-02.jpg") no-repeat center;background-size: cover;background-attachment: fixed}
.about_01 {padding:150px 0;background:#f0e6dc url("../img/about/a-01.jpg") no-repeat center;}

.cooper_title {display: block;margin:20px 0 100px 0}
.home_section_3 {padding:250px 0;background: url("../img/slider/section_3.jpg") no-repeat center}
.home_section_3 .slider__desc {}
.gao .slider__desc {margin-bottom: 30px}

.section_padding-3 {padding:100px}
.section_pink {background-color:#f7e0d7 }
.home_section.about_6 {padding:200px 0;background:#f7e0d7 url("../img/banner/about02A.jpg") no-repeat center right;position: relative}
.section_left {background:#f7e0d7 url("../img/banner/about02A.jpg") no-repeat center bottom;background-size: cover;position: relative;min-height: 800px}
.home_section.cooper_1 {padding:200px 0;background:#f7e0d7 url("../img/banner/cooper001.jpg") no-repeat center top;background-size: cover;position: relative}
.product_3 {padding:200px 0;background:#f7e0d7 url("../img/banner/pr002.jpg") no-repeat center top;background-size: cover;position: relative}
.product_4 {padding:200px 0;position: relative}
.contact_banner {padding:100px 0;background:#f7e0d7 url("../img/banner/contact.jpg") no-repeat center;background-size: cover;position: relative}
.area_box {padding:20px 20px;border-radius: 15px;background-color: rgba(255,255,255,0.5);margin-bottom: 30px}
.area_slider_padding {padding:5px 20px}
.area_des {margin-bottom: 5px;padding:10px}
.area_des ul {align-items: center}
.area_des ul li {padding:4px 0;display: block;color:rgba(51,51,51,1.00);font-size: 1.6rem;font-weight: 500;line-height: 5rem}
.area_des ul li i {font-size: 3rem;display: inline-block;margin-right: 8px}
.area_icon {display: inline-block}
.area_des_icon  i {font-size: 9rem;color:rgba(30,172,37,1.00)}
.area_des_icon.FB  i {font-size: 9rem;color:rgba(10,100,183,1.00)}
.area_des_icon  i:hover {color:#535353}

/**/
.word_line {
  position: relative; /* 設置相對定位，方便控制偽元素位置 */
  padding-bottom: 20px; /* 讓底線與文字之間保持一定距離 */
}

.word_line::after {
    content: "";
  position: absolute;
  left: 50%; /* 從中央開始 */
  bottom: 0;
  transform: translateX(-50%); /* 將底線居中對齊 */
  width: 60px; /* 固定底線的寬度 */
  height: 3px;
  background-color: #795609;

}
/**/


.section_word {padding:50px 90px;border:3px solid #af8c7e;align-items:center}
.img_center img{display: block;margin:0 auto 30px auto;max-width: 200px}
.homt_section_color{padding:200px 0;background-color: #fffcf9}
.home_section_4 {padding:200px 0;background: url("../img/slider/section_4.jpg") no-repeat center}
.home_section_5 {padding:140px 0;background: url("../img/slider/home-6.jpg") no-repeat left center;background-attachment: fixed;background-size: cover;}
.product_move {display: block;position: absolute;bottom:10%;left:-8%;max-width: 400px;z-index: 1}
.product_move img{width: 100%}
.slider__content .title {font-size: 6.5rem;color:#fff;line-height: 70px;font-weight: 500}
.slider__content .title-2 {font-size: 5rem;color:#fff;line-height: 30px;font-weight: 500}
.cooper_2 {padding:200px 0;background:#f7e0d7 url("../img/banner/cooper002.jpg") no-repeat center;background-size: cover;}
.cooper_3 {padding:200px 0;background:#f7e0d7;}
.cooper_4 {padding:150px 0;background:url("../img/slider/section_4A.jpg") no-repeat center;background-size: cover;}
.cooper_area {overflow: hidden;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 40px;
    position: relative;
    background-color: #ffffffc2;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);}
.cooper_img {border-radius: 10px 10px 0 0;overflow: hidden}
.cooper_desc {padding:20px}
.cooper_desc i {display: block;margin-bottom: 20px;text-align: center;font-size: 7rem;color: #795609 }
.cooper_desc ul {}
.cooper_desc ul li {padding:10px;display: block;margin-bottom: 20px;font-size: 1.6rem;color: #2B2B2B;line-height: 2rem}
.cooper_desc ul li span {font-size: 1.6rem;color: #2B2B2B;font-weight: 600}
.cooper_who {display: block;width: 100%;padding:10px;border-radius: 8px;background-color: rgba(255,255,255,.7);margin-bottom: 20px;}
.cooper_who-img {border-radius: 50%;width: 110px;height: 110px;overflow: hidden;margin:0 auto}

.cooper_who-title {font-size:1.6rem;color:#454545;text-align: left}
.cooper_who-title span {font-size:1.8rem;font-weight: 600;color:#232323;display: block;margin-bottom: 20px;margin-top: 20px}
.cooper_block {padding:30px;background-color: #e7c7ba;border-radius: 25px}
.product_6 {padding:150px 0;background:url("../img/banner/pr001.jpg") no-repeat center;background-size: cover;}
.product_7 {padding:100px 0 150px 0;background:#000}
.product_8 {padding:150px 0;background:#f5d9d9}
.product__box {padding:20px;background-color: #fff;border-radius: 30px;margin-bottom: 30px;overflow: hidden}
.product_des {}
.product_des ul {}
.product_des ul li {display: block;padding: 10px 0;margin-bottom: 10px}
.section_pro {padding:150px 0;background-color: #f5d9d9}
.product_funtion {}
.product_funtion ul {padding:50px 0}
.product_funtion ul li {display: block;margin-bottom: 10px;padding:8px; font-size: 1.4rem;background-color: rgba(255,255,255,0.70);border:1px solid #fff;border-radius: 30px;line-height: 18px;width: auto}
.product_funtion ul li span {display: inline-block;height: 20px;width: 20px;border-radius: 50%;background-color: rgba(191,94,96,1.00);font-weight: 600;text-align: center;color: #fff;margin-right: 10px}
.product_funtion ul li bold {display: inline-block;
    border-radius: 45px;
    background-color: #8d7646;
    font-weight: 600;
    text-align: center;
    color: #fff;
    margin-right: 10px;
    padding:6px 10px;}
.product_funtionA {}
.product_funtionA ul {padding:50px 0}
.product_funtionA ul li {display: block;margin-bottom: 10px;padding:8px; font-size: 1.4rem;background-color:rgb(255 223 214 / 69%);border-radius: 30px;line-height: 18px;width: auto}
.product_funtionA ul li span {display: inline-block;height: 20px;width: 20px;border-radius: 50%;background-color: rgba(191,94,96,1.00);font-weight: 600;text-align: center;color: #fff;margin-right: 10px}
.product_funtionA ul li bold {display: inline-block;
    border-radius: 45px;
    background-color: #8d7646;
    font-weight: 600;
    text-align: center;
    color: #fff;
    margin-right: 10px;
    padding:6px 10px;}
.product_funtion_2 {padding:20px 30px;border-radius: 20px;background-color: #fff;text-align: center;font-size: 1.4rem}
.product_funtion_2 span {display: block;margin-bottom: 20px;font-size: 1.8rem;font-weight: 600;color:#795609}
.product_funtion_2 img {width: 120px;display: block;margin: 10px auto 30px auto}
.product_funtion_iconfirst {border-radius: 50px;padding:5px;border:1px solid #fff;margin: 10px 0 20px 0;min-height: 317px} 
.product_funtion_icon {border-radius: 45px;
    padding: 20px 20px 30px 20px;
    background-color: rgba(255, 255, 255, 0.27);
    display: block;
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-size: 2.4rem;
    box-shadow: inset 0px 0px 18px 5px rgba(255, 255, 255, .4);
text-shadow: 0 0 5px rgba(0,0,0,.3);min-height: 305px}
.product_funtion_icon img {display: block;
    max-width: 150px;
    margin: 10px auto 20px auto;
    border-bottom: 3px solid #fff;
    padding-bottom: 20px;}
.backdrop-blur {
  backdrop-filter: blur(5px);
}
.shadow {
    -webkit-box-shadow: inherit !important;
    box-shadow: inherit !important;
}
.banner-style-ten-area video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
}
.banner-style-ten-area {
    padding-top: 220px;
    padding-bottom: 150px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.shadow.dark-hard {
    position: relative;
    z-index: 1;
}
.bg-dark .banner-style-ten-area video {
    display: block;
}
.shadow.dark-hard:after {
    background: var(--bg-black-color) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    -webkit-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}

.title-3  {font-size: 4.5rem;
    
    line-height: 40px;
    font-weight: 500;
    line-height: 6.5rem;}

.lookbook__product--content__title {
    font-size: 1.5rem;
    line-height: 1.9rem;
    margin-bottom: 0rem;
    font-weight: 400;
    color:#575757;
}
.lookbook__product--content__title span {display: block;margin-bottom: 5px;font-size: 1.6rem;color: #232323;text-align: center}
.earth {padding:20px 40px;margin:30px 0}
.earth img {margin-bottom: 10px;padding:0 20px}
.earth h4 span {display: block;margin-bottom:10px;font-size: 2.0rem;font-weight: 600;color: #fbd783}
.earth h4 {font-size: 1.4rem;color: #fff;text-align: center;padding:20px 30px;font-weight: 400}
.earth ul li {display: block;padding:15px 0;margin:0 0 20px 0;align-items: center ; }
.earth ul li span {}
.header__account a {color: #fff}
.header__sticky.sticky .header__account a{color:#000}
.title-img {width: 300px;display: block;margin:0 0 30px 0}
.main__footer.section--padding {padding:150px 0}
.footer__bg {
    background: #ebe4dc url("../img/slider/footBg.jpg") no-repeat right bottom; background-attachment: fixed;border-top:1px solid #fff}

.footer_add {border-bottom: 1px solid #fff;padding-bottom: 15px;margin-bottom: 20px}
.footer_add h3 {font-size: 2rem;text-align: center}
.footer-border {border-right:1px solid var(--secondary-color)}
.display-xs-item {display: none}
.herosection {min-height: 741px}
.grid__banner--title.title-banner_1 {font-size: 1.2rem;text-align: center}
.grid__banner--title.title-banner_2 {font-size: 3rem;text-align: center}
.grid__banner--desc.title-banner_3 {font-size: 1.6rem;text-align: center;margin-bottom: 4rem}
.grid__banner--btn.primary__btn {background-color: #474747;}
.slider__content {
    position: relative;
    z-index:inherit
}
.product__badge {
    width: 80px;
    height: 80px;
    font-size: 1.8rem;
    line-height: 2.4rem;
    background: var(--secondary-color);
    color: var(--text-white-color);
    font-family: var(--inter-fonts);
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    text-align: center;
    border:3px solid #fff;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
    padding: 15px 0 0;
    border-radius: 50%;
    z-index: 65
}
.product__badge bold {font-size: 2.5rem;font-weight: 600;display: block;margin-bottom: 3px}
.product_Edit {
    width: 60%;
    font-size: 1.4rem;
    line-height: 2rem;
    position: absolute;
    top: 1.5rem;
    right: 0;
    text-align: center;
    border-radius: 0.4rem;
    padding: 5px 8px;
    z-index: 65
}
.product_5 {padding:200px 0;background: url("../img/banner/pr005.jpg") no-repeat center;background-size: cover;}
.pro_item {padding:10px 20px;position: relative}
.pro_line {border-radius: 150px;border:1px solid #7E6B5E;padding:15px}
.pro_frame {border-radius: 140px;overflow: hidden;text-align: center;align-items: center}
.pro_frame img {}
.pro_des {padding:40px 50px 20px 50px;text-align: center}
.pro_des-title {margin-bottom: 15px;font-size: 1.8rem;font-weight: 600}
.pro_des-cont {margin-bottom: 15px;font-size: 1.4rem;  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;}
.pro_des-price {margin-bottom: 15px;font-size: 1.8rem;font-weight: 600}
.pro_des-btn {}
.offcanvas__menu_item {
    line-height: 1;
    display: block;
    padding: 20px 20px;
   
    color: #f4e5ab;
    font-size: 1.8rem;
}
.offcanvas__sub_menu_item {
    line-height: 1;
    display: block;
    padding: 15px 0 15px 30px;
    color: var(--primary-color);
    font-size: 1.5rem;
}
.offcanvas__sub_menu {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #5d5d5d;
}
.offcanvas__sub_menu_li {
    position: relative;
    border-top: 1px solid #ffffff;
}
.offcanvas__sub_menu .offcanvas__sub_menu {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #e9c3b3;
}
 .header__minicart--items {display: block}
.header__sticky.sticky .offcanvas__header--menu__open--btn , .offcanvas__header--menu__open--btn {
    color: #958247 !important;
}
.cart__summary {
    -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
    padding: 3rem;
    background: var(--body-background-color);
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    margin-top: 90px;
}
.cart__summary--amount span {font-weight: 600;font-size: 36px;}
 #scroll__top {
        bottom: 15%;
    }
.videoBg {padding-top:8%;text-align: center;font-size: 40px;color:#fff;height: 100vh;}

.videoBg h1 {text-align: center;font-size: 80px;color:#fff;font-weight: 400;margin-bottom: 40px;letter-spacing: 1rem}
.videoBg h4 {text-align: center;font-size: 20px;color:#fff;}
#background-video {
   width: 100vw;
   height: 100vh;
   object-fit: cover;
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: -1;
}
.videoBg.about {padding:100px 0;text-align: center;font-size: 40px;color:#fff;height: inherit;}
.lookbook__banner--section {padding:100px 0;background-color: #faf0f0}
.product__details--info__desc {
    font-size: 1.8rem;
       white-space: pre-line;
       line-height: 3rem}

    .grid__banner--content.margin__left {
        margin-left: 4rem;padding:10px 0
    }

.table.esre {width: 100%;border:1px solid #BFBFBF}
 .table.esre thead>tr>th {padding: 20px 15px;font-size: 1.6rem;background-color: #CFCFCF;text-align: center;align-items: center;vertical-align: middle;word-break: keep-all}
.table.esre tbody>tr>td {padding: 20px 15px;font-size: 1.4rem;background-color: #fff;text-align: center;align-items: center;vertical-align: middle;word-break: keep-all}
.table.esre tbody>tr>td span {color: #733F30;font-size: 1.6rem}
   .blog__post--meta {
    font-size: 1.4rem
}
.post__header--title {
    margin-top: 20px;
    font-size: 2rem;
    line-height: 2.8rem;
    color: var(--primary-color);
}
.text-line {
    font-family: var(--font-heading);
    color: transparent !important;
    -webkit-text-stroke: .6px #f8edcc;
    text-transform: uppercase;
    font-size: 9.5rem;
    line-height: 11rem;
    font-weight: 800;
}
.text-line_2 {
    font-family: var(--font-heading);
    color: transparent !important;
    -webkit-text-stroke: .9px #fff;
    text-transform: uppercase;
    font-size: 7.5rem;
    line-height: 9rem;
    font-weight: 800;
}
.text-line_3 {
    font-family: var(--font-heading);
    color: transparent !important;
    -webkit-text-stroke: .7px #fff;
    text-transform: uppercase;
    font-size: 6.5rem;
    line-height: 8rem;
    font-weight: 800;
}
.text-colorlight {color:rgb(255 255 255 / 80%);font-size: 7.5rem;
    line-height: 9rem;
    font-weight: 800;}
.text-colorlight_A {color:rgb(255 255 255 / 80%);font-size: 7.5rem;
    line-height: 9rem;
    font-weight: 800;}
@media only screen and (min-width: 1366px) {
    .lookbook__banner--content { padding: 5px 150px; }
}
@media screen and (max-width: 1024px) {
	.lookbook__banner--content { padding: 5px 80px; }
	.videoBg {
    padding-top: 15%;
		padding-bottom: 200px;
    text-align: center;
    font-size: 40px;
    color: #fff;
    height: inherit;
}
}
@media only screen and (max-width: 991px) {
    #scroll__top {
        bottom: 20%;
    } 
    .main__footer.section--padding {
    padding: 60px 0 120px 0;
}
}
@media only screen and (min-width: 992px) {
    
    .footer__widget--title { margin-top: 2rem; }
    .footer__widget--info__text { line-height: 3.4rem; }
   
}
@media only screen and (max-width: 767px) {
    .cooper_01 {
    padding: 40px 0 300px 0;
    background: #faf8f5 url(../img/cooper/c-01M.jpg) no-repeat top center;
}
     .hero__word {position: absolute;z-index: 4;top:10%;left: 0;width: 100%;height: auto}
    .slider__items--inner {
        padding-bottom: 7rem;
    }
}
   @media only screen and (max-width: 767px) {
    .account__table--header {
        display: block;
    }
} 
@media only screen and (max-width: 575px) {
       .primary__btn_linelight {
    
    padding: 0 2rem;
    
}
    .footer__bg {
    background: #ebe4dc url(../img/slider/footBg-M.jpg) no-repeat right bottom;
   background-size: auto
}
    .Estate_01 {
    padding: 80px 0 400px 0;
    background: #ede9e4 url(../img/Estate/E001.jpg) no-repeat left 300px;
    background-size: 1000px;
}
    .home_section_color {padding: 80px 0;}
    .home__three--slider__items.homeBanner-01 {background:url("../img/slider/home-01M.jpg") no-repeat center bottom;background-size: cover;position: relative;padding:70px 0 280px 0}
.home__three--slider__items.homeBanner-02 {background:url("../img/slider/home-02M.jpg") no-repeat center bottom;background-size: cover;position: relative;padding:70px 0 280px 0}
.home__three--slider__items.homeBanner-03 {background:url("../img/slider/home-03M.jpg") no-repeat center bottom;background-size: cover;position: relative;padding:70px 0 280px 0}
    .pro_img_center {max-width: 300px}
    .custom-btn {
     padding: 5px 10px;
  font-size: 13px;
    
}
    .text-box p {
    
    line-height: 1.4;
    font-size: 1.2rem;
}
    
    .product_3 {padding:50px 0 600px 0;background:#f7e0d7 url("../img/banner/pr002-M.jpg") no-repeat center bottom;background-size: cover;position: relative}
   
    .product_funtion_icon img {max-width: 100px;
}
    .product_5 {padding:50px 0 500px 0;background: url("../img/banner/pr005-M.jpg") no-repeat center bottom;background-size: cover;}
  .text-colorlight_A {color:rgb(255 255 255 / 80%);font-size: 6.5rem;
    line-height: 9rem;
    font-weight: 800;}
    .pro_img img {display: block;margin: 0 auto 20px auto}
    .product_4 {
    padding: 100px 0;
    position: relative;
}
    .display-container {
    width: 100%;
    height: 300px;
    position: relative;
}
    .text-box {bottom:200px;bottom:inherit}
    .word_back {position: absolute;top:-330px;left:20px;z-index: 1}
    .cooper_4 {padding:150px 0;background:url("../img/slider/section_4A-M.jpg") no-repeat center}
    .cooper_who {padding:30px 10px;}
    .cooper_2 {padding:120px 0;}
    .cooper_3 {padding:400px 0 150px 0;}
    .cooper_who-title {text-align: center}
    .cooper_title {display: block;margin:20px 0 50px 0}
    .about_7 {
    padding: 100px 0;}
    .section_diff {padding:100px 20px 30px 20px}
    
    .footer-border {border-right:0px solid #fff}
    .text-line {
    
    font-size: 6.5rem;
    line-height: 8rem;
    font-weight: 800;
}
    .header__account--items {display: none}
    .post__header--title {
    
    font-size: 1.6rem;
    
}
    .blog__post--meta {
    font-size: 1.3rem
}
    .section__heading h2 {font-size: 1.4rem}
    .variant__color--list {
    margin-right: 0px;
    margin-bottom: 20px;
    width:96%;
        display: block
}
    .table.esre thead>tr>th {padding: 20px 15px;font-size: 1.6rem;background-color: #CFCFCF;text-align: center;align-items: center;vertical-align: middle;word-break: keep-all}
.table.esre tbody>tr>td {padding: 20px 15px;font-size: 1.4rem;background-color: #fff;text-align: center;align-items: center;vertical-align: middle;word-break: keep-all}
    .table.esre {width: 100%; overflow-x: auto;display: block}
    .grid__banner--content.margin__left {
    margin-left: 0rem;
    padding: 40px 10px;
}
    .product__details--media {
    padding: 0 10px 10px;
}
    .product__details--info__desc {
    font-size: 1.6rem;
}
    .footer_add h3 {
    font-size: 1.8rem;
    text-align: center;
}
    .product__details--info__title {font-size: 2.4rem;}
    .lookbook__banner--section {padding:50px 0}
    .lookbook__banner--content { padding: 5px 50px; }
    .videoBg {padding:150px 0;text-align: center;font-size: 40px;color:#fff;}
.slogan {
    
    font-size: 1.4rem;
   
    letter-spacing: 1.5rem;
    
}

.home_section_color-dark

 {
    padding: 100px 0;
    
}
    .home_section-four {
    padding: 100px 0;
    background: url(../img/slider/home-4.jpg) no-repeat center;
    
}
    .home_section_color-dark.server {
    padding: 100px 0;
    background: rgba(4, 10, 24, 1) url(../img/slider/home-5.jpg) no-repeat right bottom;
    background-size: 900px;
}
    .server .SINYU-service-card {
    padding:20px
}
.videoBg h1 {text-align: center;font-size: 70px;color:#fff;font-weight: 600;margin-bottom: 40px;}
.videoBg h4 {text-align: center;font-size: 18px;color:#fff;}
    .header__minicart--items {display: none}
    
    .line-pick-white {
    width: 100px;
    height: 2px;
    background-color: #fff;
    display: block;
    margin: 60px auto;
}
    
    .home_section {padding: 50px 0 500px;
        background: url(../img/slider/section_2-M.jpg) no-repeat center top;}
    .home_section.about {padding:50px 0 550px 0;background: url("../img/banner/about01-M.jpg") no-repeat center}
    .home_section.about_4 {padding:100px 0 400px 0 ;background: url("../img/banner/about03-M.jpg") no-repeat center bottom}
    .home_section_3 {padding:100px 0 550px 0;background: url("../img/slider/section_3-M.jpg") no-repeat center bottom}
.home_section_3 .slider__desc {font-size: 1.7rem;line-height: 30px}
.home_section_4 {padding:100px 0 380px 0;background: url("../img/slider/section_4-M.jpg") no-repeat center top}
    .grid__banner--title {font-size: 3.6rem;text-transform: uppercase;line-height: 4.2rem}
    .product_move {max-width: 300px;bottom:5%}
    .section_left {
    background: #f7e0d7 url(../img/banner/about02A.jpg) no-repeat center bottom;
    background-size: inherit;
    position: relative;
    min-height: 600px;
}
   
    .home_section_5 {padding:100px 0 200px 0;background: url("../img/slider/home-6M.jpg") no-repeat left center;background-attachment: fixed}
    .home_section_color.class {
    padding: 80px 0 300px 0;
    background: #eae5dd url(../img/slider/home-7.jpg) no-repeat bottom center;
    background-size: 850px;
}
       .home_section_color-dark.class {
    padding: 340px 0 60px 0;
    background: #303e5d url("../img/slider/class.jpg") no-repeat top center;
    background-size: 750px;
}
     .hero__word {position: absolute;z-index: 4;top:10%;left: 0;width: 100%;height: auto}
  .slider__content .title {font-size: 4.5rem;color:#fff;line-height: 40px;font-weight: 500}
.slider__content .title-2 {font-size: 3.1rem;color:#fff;line-height: 30px;font-weight: 500}
    .title-3  {font-size: 3rem;line-height: 36px;font-weight: 500}
    .title-img {margin:0 auto 30px auto}
    .display-xs-item {display: block;margin: 0 auto;width: 300px}
    .herosection {min-height: inherit}
}
/* =========================================
   SINYUEOVER Refinancing Section
========================================= */
.home_section_color.gaol {background:
    linear-gradient(
        180deg,
        #fbfaf8 0%,
        #f5f3ef 100%
    );}
.SINYUEOVER-refinancing-section{
    position: relative;
    overflow: hidden;
     /*padding: 150px 0;

   background:
    linear-gradient(
        180deg,
        #fbfaf8 0%,
        #f5f3ef 100%
    );*/
}

/* 背景光 */

.SINYUEOVER-bg-glow{
    position: absolute;

    top: -200px;
    right: -200px;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    background:
    radial-gradient(
        circle,
        rgba(200,163,106,.10),
        rgba(200,163,106,0)
    );
}

/* =========================
   TOP
========================= */

.SINYUEOVER-top-row{
    margin-bottom: 10px;
}

.SINYUEOVER-year{
    font-size: 20px;
    margin-bottom: 12px;
    color: #444;
}

.SINYUEOVER-price{
    font-size: 65px;
    line-height: 1;
    font-weight: 700;
    color: #111;
    font-family: var(--font-serif)
}

.SINYUEOVER-price span{
    font-size: 32px;
    margin-left: 6px;
}

.SINYUEOVER-growth-box{
    text-align: right;
}

.SINYUEOVER-growth-label{
    font-size: 26px;
    color: #c8a36a;
    margin-bottom: 12px;
}

.SINYUEOVER-growth-number{
    font-size: 96px;
    line-height: 1;
    font-weight: 700;
    color: #c8a36a;
    margin-bottom: 18px;
}

.SINYUEOVER-growth-number span{
    font-size: 40px;
}

.SINYUEOVER-growth-text{
    font-size: 20px;
    line-height: 1.8;
    color: #555;
}

/* =========================
   Line
========================= */

.SINYUEOVER-line-wrapper{
    position: relative;
    height: 80px;
    margin-bottom: 40px;
}

.SINYUEOVER-line{
    position: absolute;

    top: 50%;
    left: 0;

    width: 0;
    height: 2px;

    background:
    linear-gradient(
        to right,
        #d9b06f,
        #c8a36a
    );

    transform: translateY(-50%);

    transition:
    width 2.2s cubic-bezier(.19,1,.22,1);
}

.SINYUEOVER-line.active{
    width: 100%;
}

/* 點 */

.SINYUEOVER-dot{
    position: absolute;

    top: 50%;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: #c8a36a;

    transform: translate(-50%,-50%) scale(0);

    transition:
    transform .8s ease,
    box-shadow 1.5s ease;
}

.SINYUEOVER-dot.active{

    transform: translate(-50%,-50%) scale(1);

    animation:
    SINYUEOVER-pulse 2s infinite;
}

.SINYUEOVER-dot-1{
    left: 0;
}

.SINYUEOVER-dot-2{
    left: 40%;
}

@keyframes SINYUEOVER-pulse{

    0%{
        box-shadow:
        0 0 0 0 rgba(200,163,106,.5);
    }

    70%{
        box-shadow:
        0 0 0 18px rgba(200,163,106,0);
    }

    100%{
        box-shadow:
        0 0 0 0 rgba(200,163,106,0);
    }
}

/* =========================
   Step Card
========================= */

.SINYUEOVER-step-row{
    row-gap: 40px;
}

.SINYUEOVER-step-card{
    position: relative;
    text-align: center;
}

.SINYUEOVER-icon{

    width: 120px;
    height: 120px;

    margin: auto auto 24px;

    border-radius: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.95),
        rgba(247,243,238,.92)
    );

    border:
    1px solid rgba(200,163,106,.22);

    box-shadow:
    0 10px 30px rgba(30,42,56,.05),
    inset 0 1px 0 rgba(255,255,255,.9);

    transition:
    transform .45s ease,
    box-shadow .45s ease;
}

.SINYUEOVER-step-card:hover .SINYUEOVER-icon{

    transform: translateY(-8px);

    box-shadow:
    0 20px 40px rgba(200,163,106,.12);
}

.SINYUEOVER-icon i{

    font-size: 54px;
    color: #c8a36a;
}

.SINYUEOVER-step-title{

    font-size: 17px;
    line-height: 1.6;

    color: #1f2430;

}

/* 箭頭 */

.SINYUEOVER-arrow{

    position: absolute;

    top: 45px;
    right: -22px;

    color: #c8a36a;

    font-size: 30px;

    opacity: .45;
}

.SINYUEOVER-step-card:last-child
.SINYUEOVER-arrow{
   
}

/* =========================
   Responsive
========================= */

@media(max-width:991px){

    .SINYUEOVER-growth-box{
        text-align: left;
        margin-top: 40px;
    }

    .SINYUEOVER-price{
        font-size: 56px;
    }

    .SINYUEOVER-growth-number{
        font-size: 72px;
    }

    .SINYUEOVER-arrow{
        display: none;
    }

}