.cleancss {
    clear:both;
}


/* ====================================
HOME BANNER
==================================== */

.home-banner{
    position:relative;
    overflow:hidden;
}

.home-banner-swiper{
    width:100%;
}

/* ====================================
SLIDE
==================================== */

.home-banner-swiper .swiper-slide{
     aspect-ratio:1920 / 920;

    height:auto;
}

.home-banner-swiper img{

      width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:8s ease;
}

/* Ken Burns */

.home-banner-swiper .swiper-slide-active img{
    transform:scale(1.05);
}

/* ====================================
PAGINATION
==================================== */

.home-banner-swiper .swiper-pagination-bullet{

    width:12px;
    height:12px;

    background:#d2c2a4;

    opacity:1;
}

.home-banner-swiper .swiper-pagination-bullet-active{
    background:#e60012;
}

/* ====================================
ARROW
==================================== */

.home-banner-swiper .swiper-button-prev,
.home-banner-swiper .swiper-button-next{

    width:50px;
    height:50px;

    background:rgba(0,0,0,.25);

    border-radius:50%;

    color:#fff;
}

.home-banner-swiper .swiper-button-prev:after,
.home-banner-swiper .swiper-button-next:after{

    font-size:18px;
}

/* ====================================
TABLET
==================================== */

@media (max-width:1024px){

    .home-banner-swiper .swiper-slide{
        height:500px;
    }

}

/* ====================================
MOBILE
==================================== */

@media (max-width:768px){

    .home-banner-swiper .swiper-slide{
        height:260px;
    }

    .home-banner-swiper .swiper-button-prev,
    .home-banner-swiper .swiper-button-next{
        display:none;
    }

    .home-banner-swiper .swiper-pagination-bullet{

        width:10px;
        height:10px;
    }

}



/* ====================================
HOME NEWS
==================================== */

.home-news{

    background:#f7f6f3;

    padding:100px 20px 120px;
}

.home-news-wrapper{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:28px;
}

/* ====================================
TITLE
==================================== */

.news-title{

    text-align:center;

    margin-bottom:60px;
}

.news-title span{

    font-size: 18px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #e60012;
    margin-bottom:8px;
}

.title-line{

   width: 0.5px;
    height: 30px;
    background: #cdb991;
    display: block;
    margin: 0 auto 25px;
}

.news-title h2{
    font-size: 48px;
    font-weight: 600;
    color: #444;
    margin-top: -20px;
}

.news-date2 {
    font-size: 15px;
    color: #999;
    margin-bottom: 2px;
}

/* ====================================
COLUMN
==================================== */

.news-column{

    display:flex;

    flex-direction:column;

    align-items:center;
}

/* ====================================
BOX
==================================== */
.news-box{

    position:relative;

    width:100%;

    background:#fff;

    border:1px solid #c1ac8d;

    border-radius:10px;

    padding:24px;

    z-index:2;
	
	 box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

/* ====================================
CATEGORY
==================================== */

.news-category{
    display: inline-block;
    background: #e60012;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    padding-top: 4px;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 4px;
    margin-bottom: 20px;
}

.news-category small{

    font-size:14px;

    margin-left:5px;
}

/* ====================================
ITEM
==================================== */

.news-item{

    display:flex;

    gap:15px;

    padding:16px 0;

    text-decoration:none;

    border-bottom:1px solid #ececec;
	 transition:.3s ease;
}


.news-item:hover{
    transform:translateY(-3px);
}

.news-item:last-child{

    border-bottom:none;
}

.news-thumb{

    width:155px;

    flex-shrink:0;
	
	 overflow:hidden;
}

.news-thumb img{
    width: 100%;
    display: block;
    border: 1px solid #ccc;
	

    transition:.4s ease;
}

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

.news-info{

    flex:1;
}

.news-date{

    color:#222;

    font-size:14px;

    margin-bottom:8px;
}

.news-info h3{

    color:#444;

    font-size:16px;

    line-height:1.4;

    margin-bottom:8px;

    font-weight:500;
	
	 transition:.3s ease;
}

.news-item:hover .news-info h3{
    color:#e5341a;
}

.news-info span{

    color:#b9a381;

    font-size:13px;
}

/* ====================================
MORE
==================================== */

.news-more{

    margin-top:38px;

    width:160px;

    height:42px;

    border:1px solid #c1ac8d;

    border-radius:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    color:#c8b18d;

    text-decoration:none;

    font-size:16px;

    transition:.3s;
}

.news-more span{

    width:28px;

    height:28px;

    border:1px solid #c8b18d;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    line-height:1;

    transform:translateY(1px);
	 font-size: 24px;
	    padding-left: 0px;
    padding-bottom: 7px;
    box-sizing: border-box;
}

.news-more:hover{

    background:#c8b18d;

    color:#fff;
}

.news-more:hover span{

    border-color:#fff;
}

/* ====================================
TABLET
==================================== */

@media(max-width:1024px){

    .home-news-wrapper{

        grid-template-columns:1fr;

        gap:60px;
    }

    .news-title h2{

        font-size:48px;
    }

}

/* ====================================
MOBILE
==================================== */

@media(max-width:768px){

    .home-news{

        padding:70px 20px;
    }

    .news-title h2{

        font-size:36px;
    }

    .news-title span{

        font-size:16px;
    }

    .news-item{

        flex-direction:column;
    }

    .news-thumb{

        width:100%;
    }

    .news-info h3{

        font-size:18px;
    }

    .news-more{

        width:180px;

        height:48px;

        font-size:18px;
    }

}

/* =====================================
OEM ODM
===================================== */

.home-oem{

    position:relative;

    min-height:600px;

    background:url("../images/oem-bg.jpg")
               center center
               no-repeat;

    background-size:cover;

    overflow:hidden;
}

/* 遮罩 */

.home-oem-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to right,
        rgba(0,0,0,.25),
        rgba(0,0,0,.55)
    );
}

/* container */

.home-oem .container{

    max-width:1200px;

    margin:auto;

    position:relative;

    z-index:2;

    height:600px;

    display:flex;

    justify-content:flex-end;

    align-items:center;
}

/* 內容 */

.home-oem-content{

    width:48%;

    color:#fff;
}

/* OEM ODM */

.oem-en{
    display: block;
    font-size: 48px;
    font-weight: 500;
    letter-spacing: 4px;
    margin-left: 2px;
    margin-bottom: -12px;
}

/* 標題 */

.home-oem-content h2{

   font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 25px;
    letter-spacing: 0px;
}

/* 紅色標籤 */

.oem-tag{
    display: inline-block;
    background: #e60012;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding-top: 4px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom:4px;
    margin-bottom: 25px;
}

/* 內文 */

.home-oem-content p{

    font-size:17px;

    line-height:1.8;

    color:rgba(255,255,255,.95);

    margin-bottom:40px;
}

/* 按鈕 */

.oem-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width:160px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: .3s;
}

/* 箭頭圓圈 */

.oem-btn span{

   width: 28px;
    height: 28px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    padding-left: 0px;
    padding-bottom: 7px;
    box-sizing: border-box;

}

.oem-btn:hover{

    background:#fff;

    color:#222;
}

.oem-btn:hover span{

    border-color:#222;
}

/* =====================================
TABLET
===================================== */

@media(max-width:1024px){

    .home-oem-content{

        width:60%;
    }

    .oem-en{

        font-size:52px;
    }

    .home-oem-content h2{

        font-size:56px;
    }

}

/* =====================================
MOBILE
===================================== */

@media(max-width:768px){

	
	 .home-oem{
  background-image:url(../images/oem-bg-m.jpg);
        background-position:-545px 0;
        background-size:cover;

    }

	
	
    .home-oem .container{

        height:auto;

        padding:80px 25px;

        justify-content:center;
    }

    .home-oem-content{

        width:100%;

        text-align:center;
    }

    .oem-en{

        font-size:34px;
    }

    .home-oem-content h2{

        font-size:42px;

        margin-bottom:20px;
    }

    .oem-tag{

        font-size:16px;

        padding:8px 15px;
    }

    .home-oem-content p{

        font-size:16px;

        line-height:1.9;
    }

    .oem-btn{

        width:180px;

        height:46px;

        font-size:18px;
    }

}



/* ==========================
PHOTO FRAME
========================== */

.photo-frame{

    position:relative;

    background:#fff;

    padding:8px;

    z-index:1;
}

/* 上方柔光陰影 */

.photo-frame::before{

    content:"";

    position:absolute;

    left:50%;
    top:-10px;

    transform:translateX(-50%);

    width:96%;
    height:18px;

    background:
    radial-gradient(
        ellipse at center,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,.08) 45%,
        rgba(0,0,0,0) 75%
    );

    filter:blur(6px);

    z-index:-1;

    pointer-events:none;
}

/* 下方柔光陰影 */

.photo-frame::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-12px;

    transform:translateX(-50%);

    width:96%;
    height:24px;

    background:
    radial-gradient(
        ellipse at center,
        rgba(0,0,0,.20) 0%,
        rgba(0,0,0,.10) 45%,
        rgba(0,0,0,0) 75%
    );

    filter:blur(8px);

    z-index:-1;

    pointer-events:none;
}

/* 圖片 */

.photo-frame img{

    display:block;

    width:100%;

    height:auto;
}

/* ==========================
HOME INTRO
========================== */

.home-intro{
    background: #f6f5f2;
    padding-top: 0px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 120px;
    overflow: hidden;
}

.home-intro .container{

    max-width:1200px;

    margin:auto;
}

/* ==========================
TITLE
========================== */

.home-intro-title{

    text-align:center;

    margin-bottom:80px;
}

.home-intro-title .title-line{
    width: 0.5px;
    height: 70px;
    background: #cdb991;
    display: block;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 125px;
}

.home-intro-title h2{

    font-size:48px;
    font-weight:600;

    color:#444;

    margin-bottom:10px;
}

.home-intro-title p{
	
	font-size:18px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #e60012;
}

/* ==========================
ROW
========================== */

.home-intro-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

    margin-bottom:90px;
}

.home-intro-row:last-child{

    margin-bottom:0;
}

/* ==========================
IMAGE
========================== */

.home-intro-image{

    width:58%;
}

.image-frame{

    background:#fff;

    padding:12px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.05),
    0 25px 40px rgba(0,0,0,.04);
}

.image-frame img{

    width:100%;

    display:block;
}

/* ==========================
CONTENT
========================== */

.home-intro-content{

    width:42%;

    position:relative;
}

.home-intro-content h3{
    font-size: 36px;
    color: #75592c;
    margin-bottom: 35px;
    line-height: 1.4;
    position: relative;
    z-index: 2;
    font-weight: 400;
}


@media(max-width:1180px){
	
	.home-intro-content h3{
    font-size: 36px;
}
	.oem-text h3 {
     font-size: 36px;
}
	
	
	}
	
.home-intro-content p{

    font-size:17px;

    line-height:1.8;

    color:#444;

    margin-bottom:24px;

    position:relative;

    z-index:2;
}

/* ==========================
WATERMARK SVG
========================== */

.intro-watermark{

    position:absolute;

    top:50%;

    right:-120px;

    transform:
        translateY(-50%)
        rotate(-45deg);

    opacity:.03;

    pointer-events:none;

    z-index:0;
}

/* 左右交錯時使用 */

.home-intro-content.left .intro-watermark{

    left:-180px;

    right:auto;
}

.intro-watermark img{

    display:block;

    width:620px;     /* 依照LOGO大小微調 */

    height:auto;
}

/* 讓文字永遠在浮水印上方 */

.home-intro-content h3,
.home-intro-content p{

    position:relative;

    z-index:2;
}

/* ==========================
TABLET
========================== */

@media(max-width:1024px){
	
	.home-intro-row {
      gap: 20px;
}
	

    .intro-watermark img{

        width:320px;
    }

    .intro-watermark{

        right:-80px;
    }

    .home-intro-content.left .intro-watermark{

        left:-120px;
    }
	.news-info h3 {
   
    font-size: 18px;
}
	.home-intro-title {
    margin-bottom: 60px;
}

}

/* ==========================
MOBILE
========================== */

@media(max-width:768px){

    .intro-watermark{

        display:none;
    }

}


/* ==========================
TABLET
========================== */

@media(max-width:1024px){

    .home-intro-title h2{

        font-size:42px;
    }

    .home-intro-content h3{

        font-size:28px;
		margin-bottom: 15px;
    }

    .home-intro-content p{

        font-size:16px;
		line-height: 1.6;
    }
	

}

/* ==========================
MOBILE
========================== */

@media(max-width:768px){
	
	.home-intro-title .title-line {
  
    margin-bottom:15px;
}

    .home-intro{
    padding-top: 0px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 70px;
    }

    .home-intro-title{

        margin-bottom:60px;
    }

    .home-intro-title h2{

        font-size:28px;

        line-height:1.5;
    }

    .home-intro-title p{

        font-size:14px;
    }

    .home-intro-row{

        flex-direction:column;

        gap:30px;

        margin-bottom:70px;
    }

    .home-intro-row:nth-child(2){

        flex-direction:column-reverse;
    }

    .home-intro-image,
    .home-intro-content{

        width:100%;
    }

    .home-intro-content{

        text-align:center;
    }

    .home-intro-content h3{

        font-size:28px;

        margin-bottom:20px;
    }

    .home-intro-content p{

        font-size:18px;

        line-height:2;
    }

    .intro-watermark{

        display:none;
    }

}

/* =========================
   COMPANY
========================= */

.company-section{
    position:relative;
    overflow:hidden;

    padding:100px 20px 120px;

    background:#fffefd;
}

/* =========================
   RED SHAPE
========================= */
.company-section::before{
    content:"";

    position:absolute;

    top:1500px;
    left:50%;

    width:220vw;
    height:700px;

    background:#e60012;

    transform:
    translateX(-50%)
    rotate(40deg);

    z-index:1;
}

/* =========================
   INNER
========================= */

.company-inner{
    position:relative;
    z-index:2;

    max-width:1200px;
    margin:0 auto;

    text-align:center;
}

/* =========================
   TITLE
========================= */

.company-heading{
    display:flex;
    flex-direction:column;
    align-items:center;

    margin-bottom:60px;
}

/* EN */

.company-en{
    font-size:18px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #e60012;
    margin-bottom:18px;
}

/* LINE */

.company-line{
    width:0.5px;
    height:36px;

    background:#c1ac8d;

    margin-bottom:24px;
}

/* TITLE */

.company-title{
    font-size:40px;
    font-weight:600;

    color:#333;

    line-height:1.2;
}


/* =========================
   CONTENT
========================= */

.company-content{
    max-width:760px;
    margin:0 auto 90px;

    color:#555;
}

.company-content h3{
    font-size:32px;
    color:#e60012;

    font-weight:400;

    line-height:1.6;

    margin-bottom:40px;
}

.company-content p{
    font-size:18px;
    line-height:1.9;

    margin-bottom:32px;
}

/* =========================
   SLOGAN
========================= */

.company-slogan{
    display:inline-block;

    background:#e60012;
    color:#fff;

    font-size:32px;
    font-weight:500;

    padding:12px 50px;

    margin-bottom:70px;

    position:relative;
}

.company-slogan::after{
    content:"";

    position:absolute;
    left:50%;
    bottom:-28px;

    transform:translateX(-50%);

    width:0;
    height:0;

    border-left:34px solid transparent;
    border-right:34px solid transparent;
    border-top:28px solid #e60012;
}

/* =========================
   GRID
========================= */

.company-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:24px;

    max-width:900px;
    margin:0 auto;
}

/* =========================
   CARD
========================= */
.company-card {

    position:relative;

    background:linear-gradient(
        to bottom,
        #fdfdfd 0%,
        #e9e9e9 100%
    );

    padding:40px 34px 36px;

    min-height:360px;

    display:flex;
    flex-direction:column;
    align-items:center;

}

.company-card::after{

     content:"";

    position:absolute;

    left:50%;
    bottom:-14px;

    transform:translateX(-50%);

    width:96%;
    height:18px;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.10) 0%,
        rgba(0,0,0,.05) 35%,
        rgba(0,0,0,0) 100%
    );

    filter:blur(4px);

    z-index:-1;


}

.company-card-title{
    width:100%;

    background:#e60012;
    color:#fff;

    font-size:22px;
    font-weight:700;

    padding:14px 10px;
	    line-height: 1.2;

    margin-bottom:24px;
}

.company-card p{
    font-size:17px;
    line-height:1.6;

    color:#555;

    margin-bottom:auto;
}

/* =========================
   ICON
========================= */

.company-icon{
    margin-top:40px;
}

.company-icon img{
    height:110px;
    display:block;
}

/* =========================
   TABLET
========================= */

@media (max-width:1024px){

    .company-title{
        font-size:54px;
    }

    .company-content h3{
        font-size:32px;
    }

    .company-content p{
        font-size:22px;
    }

    .company-slogan{
        font-size:30px;
    }

    .company-card-title{
        font-size:22px;
    }

    .company-card p{
        font-size:18px;
    }

}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){
	
		
	
	    .company-founder-signature img {
        width: 100px;
    }

    .company-section{
        padding:70px 20px 90px;
    }

    .company-section::before{
        top:1500px;
        height:500px;
    }

    .company-title{
        font-size:42px;
        margin-bottom:40px;
    }

    .company-content{
        margin-bottom:60px;
    }

    .company-content h3{
        font-size:28px;
        margin-bottom:24px;
    }

    .company-content p{
        font-size:18px;
        line-height:1.9;
        margin-bottom:24px;
    }

    .company-slogan{
        font-size:22px;
        line-height:1.6;
        padding:14px 24px;
        margin-bottom:50px;
    }

    .company-grid{
        grid-template-columns:1fr;
    }

    .company-card{
        min-height:auto;
        padding:30px 24px;
    }

    .company-card-title{
        font-size:20px;
    }

    .company-card p{
        font-size:18px;
    }

    .company-icon img{
       height:100px;
    }

}


/* =========================
   FOUNDER
========================= */

.company-founder{
    width:100%;
    background:#2b241e;

    overflow:hidden;
}

/* =========================
   INNER
========================= */

.company-founder-inner{
    display:grid;
    grid-template-columns:1fr 1fr;

    align-items:stretch;
}

/* =========================
   IMAGE
========================= */

.company-founder-image{
    position:relative;
    min-height:860px;
}

.company-founder-image img{
    width:100%;
    height:100%;

    object-fit:cover;
    display:block;
}

/* =========================
   CONTENT
========================= */

.company-founder-content{

    background:#2b241e;

    color:#fff;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:
    100px
    90px
    80px;
}

/* TITLE */

.company-founder-title{
    font-size:40px;
    font-weight:600;

    line-height:1.3;

    margin-bottom:25px;
}

/* TEXT */

.company-founder-text{

    font-size:17px;
    line-height:1.8;

    color:rgba(255,255,255,.95);
}

.company-founder-text p{
    margin-bottom:22px;
}

/* SIGNATURE */

.company-founder-sign{

    margin-top:auto;

    display:flex;
    justify-content:flex-end;
    align-items:center;

    gap:24px;

    padding-top:40px;
}

.company-founder-position{
    font-size:18px;
    color:#fff;
}

.company-founder-signature img{
    width:100px;
    display:block;
}

/* =========================
   TABLET
========================= */

@media (max-width:1400px){

    .company-founder-content{
        padding:80px 60px;
    }

    .company-founder-title{
        font-size:36px;
    }

    .company-founder-text{
        font-size:18px;
    }

}

/* =========================
   MOBILE
========================= */

@media (max-width:1024px){

    .company-founder-inner{
        grid-template-columns:1fr;
    }

    /* IMAGE */

    .company-founder-image{
        min-height:auto;
    }

    .company-founder-image img{
        aspect-ratio:4 / 5;
        object-fit:cover;
    }

    /* CONTENT */

    .company-founder-content{

        padding:
        60px
        32px
        50px;
    }

    .company-founder-title{
        font-size:42px;

        margin-bottom:36px;
    }

    .company-founder-text{
        font-size:18px;
        line-height:2;
    }

    .company-founder-text p{
        margin-bottom:32px;
    }

    .company-founder-sign{

        flex-direction:column;
        align-items:flex-end;

        gap:12px;

        padding-top:20px;
    }

    .company-founder-position{
        font-size:18px;
    }

    .company-founder-signature img{
        width:100px;
    }

}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width:640px){

    .company-founder-content{
        padding:50px 24px 40px;
    }

    .company-founder-title{
        font-size:34px;
    }

    .company-founder-text{
        font-size:16px;
        line-height:1.9;
    }

    .company-founder-position{
        font-size:16px;
    }

    .company-founder-signature img{
        width:140px;
    }

	
	.company-heading {
     margin-bottom: 0px;
}
}


/* =========================
   SAFE SECTION
========================= */

.company-safe{
    position:relative;

    overflow:hidden;

    background:#f3f3f3;

    padding:
    140px
    40px
    180px;
}

/* =========================
   RED DIAGONAL
========================= */

.company-safe::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:220vw;
    height:800px;

    background:#e60012;

    transform:
    translate(-50%,-50%)
    rotate(-40deg);

    z-index:1;
}

/* =========================
   INNER
========================= */

.company-safe-inner{
    position:relative;
    z-index:2;

    max-width:1600px;
    margin:0 auto;
}

/* =========================
   CONTENT
========================= */

.company-safe-content{

    position:relative;

    text-align:center;

    color:#fff;

    margin-bottom:80px;
}

/* TITLE */

.company-safe-title{
    font-size: 43px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 40px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* TEXT */

.company-safe-text{
    font-size:20px;
    line-height:1.8;
    font-weight:500;
	
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================
   BG TEXT
========================= */

.company-safe-bgtext{

    position:absolute;

    right:80px;
    top:-40px;

    font-size:180px;
    font-weight:900;

    line-height:.95;

    color:rgba(255,255,255,.16);

    writing-mode:vertical-rl;

    pointer-events:none;

    user-select:none;
}

/* =========================
   LOGO GRID
========================= */

.company-safe-grid{

    display:grid;
    grid-template-columns:repeat(5,1fr);

    gap:28px;
}

/* =========================
   CARD
========================= */

.company-safe-card{

    position:relative;

   background:#ffffff;


    min-height:220px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:30px;

    overflow:visible;
}

/* SHADOW */

.company-safe-card::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-10px;

    transform:translateX(-50%);

    width:94%;
    height:14px;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.10) 0%,
        rgba(0,0,0,.04) 45%,
        rgba(0,0,0,0) 100%
    );

    filter:blur(4px);

    z-index:-1;
}

/* LOGO */

.company-safe-card img{
    width:100%;
    max-width:220px;

    display:block;
    object-fit:contain;
}

/* =========================
   TABLET
========================= */

@media (max-width:1400px){

    .company-safe-title{
        font-size:52px;
    }

    .company-safe-text{
        font-size:22px;
    }

    .company-safe-bgtext{
        font-size:140px;
    }

}

/* =========================
   TABLET
========================= */

@media (max-width:1024px){

    .company-safe{
        padding:
        100px
        24px
        120px;
    }

    .company-safe::before{
        height:1100px;
    }

    .company-safe-title{
        font-size:42px;
        margin-bottom:28px;
    }

    .company-safe-text{
        font-size:18px;
        line-height:1.9;
    }

    .company-safe-bgtext{

        right:10px;
        top:-10px;

        font-size:100px;
    }

    .company-safe-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

/* =========================
   MOBILE
========================= */

@media (max-width:640px){

	.footer-logo {
    margin-bottom:10px!important;
}

     .company-safe{
    background: #e60012;
    padding-top: 60px;
    padding-right: 24px;
    padding-left: 24px;
    padding-bottom: 60px;
    }

    .company-safe::before{

        left:auto;
        top:auto;

        width:100%;
        height:100%;

        transform:none;

        background:#e60012;
    }
    .company-safe-content{
        margin-bottom:50px;
    }

    .company-safe-title{
        font-size:38px;
    }

    .company-safe-text{
        font-size:20px;
        line-height:1.8;
    }

    .company-safe-bgtext{
    font-size: 70px;
    top: 20px;
    right: -10px;
    display: none;
    }

    .company-safe-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .company-safe-card{
        min-height:180px;
    }

}


/* =========================
   CONTACT CTA
========================= */

.footer-contact{

    position:relative;

    background:#e0ceaf;

    overflow:hidden;

    padding:
   70px
    40px;
}

/* =========================
   INNER
========================= */

.footer-contact-inner{

    max-width:1680px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
    auto
    1fr
    auto;

    align-items:center;

    gap:50px;
}

/* =========================
   LEFT
========================= */

.footer-contact-left{

    display:flex;
    align-items:center;

    gap:20px;

    min-width:0;
}

/* =========================
   CHILI IMAGE
========================= */

.footer-contact-image{

    flex-shrink:0;
}

.footer-contact-image img{

    width:260px;
    display:block;
}

/* =========================
   CONTENT
========================= */

.footer-contact-content{

    min-width:0;
}

/* OEM TAG */

.footer-contact-tag{
    display: inline-block;
    background: #e60012;
    color: #fff;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    padding-top: 4px;
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: 4px;
    margin-bottom: 0px;
}

/* CONTACT */

.footer-contact-title{

    font-size:60px;
    font-weight:500;
    line-height:1;
    color:#c1ac8d;
}

/* SUBTITLE */

.footer-contact-subtitle{

    font-size:15px;
    font-weight:400;

    color:#75592c;
    letter-spacing: -0.2px;
    line-height:1.6;
}

/* =========================
   CENTER
========================= */

.footer-contact-center {

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:40px;

    padding:0 60px;

    min-width:0;

    flex-wrap:wrap;
}

/* LEFT DOUBLE LINE */

.footer-contact-center::before{

    content:"";

    position:absolute;

    left:0;
    top:50%;

    transform:translateY(-50%);

    width:3px;
    height:72px;

    background:
    linear-gradient(
        to right,

        #f8ecd7 0,
        #f8ecd7 0px,

        #c1ac8d 1px,
        #c1ac8d 2px,

        #f8ecd7 1px,
        #f8ecd7 0px
    );
}

/* RIGHT DOUBLE LINE */

.footer-contact-center::after{

    content:"";

    position:absolute;

    right:0;
    top:50%;

    transform:translateY(-50%);

    width:3px;
    height:72px;

    background:
    linear-gradient(
        to right,

       #f8ecd7 0,
        #f8ecd7 0px,

        #c1ac8d 1px,
        #c1ac8d 2px,

        #f8ecd7 1px,
        #f8ecd7 0px
    );
}

/* TEL */

.footer-contact-tel{

    color:#75592c;

    min-width:0;
}



.footer-contact-tel a{

    color:#75592c;

}

	.footer-contact-top{

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-bottom:8px;
}
	
.footer-contact-tel small{

    font-size:22px;

    line-height:1;
}

/* NUMBER */

.footer-contact-tel-number{

    font-size:76px;
    font-weight:400;

    line-height:1;

    white-space:nowrap;
}

/* TIME */

.footer-contact-time{

    font-size:18px;

    color:#a7916e;

    white-space:nowrap;

    line-height:1;
	letter-spacing:-0.5px;
}

/* =========================
   BUTTON
========================= */

.footer-contact-button{

    flex-shrink:0;
}

.footer-contact-button a{

    width:280px;
    height:60px;

    background:#e60012;

    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:18px;

    color:#fff;

    font-size:20px;
    font-weight:400;

    transition:.3s;
	letter-spacing: 1px;
}

.footer-contact-button a:hover{
    opacity:.9;
}

/* ICON */

.footer-contact-icon img{

    width:40px;
    display:block;
}

/* =========================
   LARGE TABLET
========================= */

@media (max-width:1600px){

    .footer-contact-title{
        font-size:60px;
    }

    .footer-contact-tel-number{
        font-size:58px;
    }

}

/* =========================
   TABLET
========================= */

@media (max-width:1200px){

    .footer-contact{

        padding:
        60px
        30px;
    }

    .footer-contact-inner{

        grid-template-columns:1fr;

        gap:40px;
    }

    /* LEFT */

    .footer-contact-left{

        justify-content:center;
    }

    /* CENTER */

    .footer-contact-center{

        border-left:none;
        border-right:none;

        border-top:1px solid rgb(183 146 90 / 45%);
        border-bottom:1px solid rgb(183 146 90 / 45%);

        padding:
        35px
        0;
    }
	
	.footer-contact-center::before {
   
    background:none;
}
	.footer-contact-center::after {
   
    background:none;
}

    /* BUTTON */

    .footer-contact-button{

        display:flex;
        justify-content:center;
    }

}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    .footer-contact{

        padding:
        50px
        20px;
    }

    /* LEFT */

    .footer-contact-left{

        flex-direction:column;

        text-align:center;

        gap:24px;
    }

    .footer-contact-image img{

        width:180px;
    }

    .footer-contact-tag{

        font-size:16px;

        padding:
        8px
        14px;
    }

    .footer-contact-title{

        font-size:52px;
    }

    .footer-contact-subtitle{

        font-size:20px;
    }

    /* CENTER */

    .footer-contact-center{

        display:flex;

        flex-direction:row;

        align-items:center;
        justify-content:center;

        gap:20px;

        text-align:left;

        flex-wrap:wrap;
    }

    .footer-contact-tel small{

        font-size:18px;
    }

    .footer-contact-tel-number{

        font-size:42px;

        line-height:1;
    }

    .footer-contact-time{

        font-size:18px;

        white-space:nowrap;

        padding-top:8px;
    }

    /* BUTTON */

    .footer-contact-button a{

        width:100%;
        max-width:320px;

        height:60px;

        font-size:20px;
    }

    .footer-contact-icon img{

        width:28px;
    }

}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width:480px){
	
	.footer-contact-tag {
        font-size: 23px;
      
    }

    .footer-contact-title{

        font-size:60px;
    }

  
	.footer-contact-subtitle {
        font-size: 24px;
    }


    .footer-contact-tel-number{

        font-size:42px;
    }

	
	.footer-group-title {
 
    font-size: 18px!important;
    font-weight: 600!important;
}
	
	.footer-group li {
    font-size: 18px!important;
    line-height: 1.6!important;
}
	
	.footer-single a {
    font-size: 18px!important;
    font-weight: 600!important;
}
	
}



/* =========================
   FOOTER
========================= */

.footer{

    background:#fffefd;
}

/* =========================
   MAIN
========================= */

.footer-main{

    max-width: 1600px;
    margin: 0 auto;
    padding: 55px 40px 70px;
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    gap: 40px;
    align-items: start;

}

/* =========================
   LEFT
========================= */

.footer-left{
    min-width:0;
}

/* LOGO */

.footer-logo{

    margin-bottom:20px;
}

.footer-logo img{

    width:300px;
    display:block;
}

/* FOOD NUMBER */

.footer-food{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding-top: 6px;
    padding-right: 24px;
    padding-left: 24px;
    padding-bottom: 6px;
    border-radius: 999px;
    background: #bca27a;
    color: #fff;
    font-size: 13px;
    letter-spacing: .3px;
    line-height: 1.2;
}

/* =========================
   CENTER
========================= */

.footer-nav{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:55px;
}

/* GROUP */

.footer-group{
    min-width:0;
}

/* TITLE */

.footer-group-title{

    position:relative;

    font-size:17px;
    font-weight:400;

    color:#4e4e4e;

    padding-bottom:8px;

    margin-bottom:12px;
}
.footer-group-title::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:1px;

    background:
    repeating-linear-gradient(
        to right,

        #a9a9a9 0 1px,
        transparent 1px 4px
    );

    opacity:.9;
}

/* LIST */

.footer-group ul{

    display:flex;
    flex-direction:column;

    gap:10px;
}

.footer-group li{

    font-size:16px;
    line-height:1.2;
   
}

.footer-group li a{

    transition:.3s;
	 color:#898989!important;
}

.footer-group li a:hover{

    color:#e60012!important;
}

/* SINGLE MENU */

.footer-single{

    display:flex;
    flex-direction:column;

    gap:18px;

    padding-top:0px;
}

.footer-single a{

    font-size:17px;
    font-weight:400;

    color:#4e4e4e;

    transition:.3s;
}

.footer-single a:hover{

    color:#e60012;
}

/* =========================
   RIGHT
========================= */

.footer-right{

   display:flex;
    flex-direction:column;

    align-items:center;

    gap:26px;
}

/* QR */

.footer-qr{
 display:flex;
    flex-direction:column;
    align-items:center;
}

.footer-qr img{
    width: 96px;
    display: block;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 3px;
}

.footer-line{

    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    width:100%;

    font-size:14px;
    color:#111;
}

.footer-line img{

    width:28px;
    display:block;
}

/* FACEBOOK */

.footer-fb img{

    width:275px;
    display:block;
}

/* =========================
   NOTICE
========================= */

.footer-notice{

    background:#e60012;

    color:#fff;

    text-align:center;

    font-size:14px;
    line-height:1.4;

    padding:
    12px
    20px;
}


.footer-notice p{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================
   COPYRIGHT
========================= */

.footer-copyright{

    text-align:center;

    color:#bca27a;

    font-size:14px;

    line-height:1.8;

    padding:
    14px
    20px
    14px;
}

/* =========================
   TABLET
========================= */

@media (max-width:1400px){

    .footer-main{

        grid-template-columns:
        320px
        1fr;

        gap:60px;
    }

    .footer-right{

        grid-column:1 / -1;

        flex-direction:row;

        justify-content:center;

        align-items:center;
    }

}

/* =========================
   TABLET
========================= */

@media (max-width:1024px){

    .footer-main{

        grid-template-columns:1fr;

        gap:50px;

        padding:
        50px
        30px
        60px;
    }

    .footer-left{

        text-align:center;
    }

    .footer-logo img{

        margin:0 auto;
    }

    .footer-nav{

        grid-template-columns:
        repeat(2,1fr);

        gap:40px;
    }

    .footer-right{

        justify-content:center;
    }

}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    .footer-main{

        padding:
        45px
        20px
        55px;
    }

    .footer-logo img{

        width:280px;
    }

    .footer-food{

        font-size:15px;

        padding:
        0
        18px;
    }

    .footer-nav{

        grid-template-columns:1fr;

        gap:34px;
    }

    .footer-group{

        text-align:center;
    }

    .footer-group-title::after{

        left:50%;

        transform:translateX(-50%);

        width:180px;
    }

    .footer-single{

        align-items:center;
    }

    .footer-right{

        flex-direction:column;
    }

    .footer-notice{

        font-size:14px;

        line-height:1.6;
    }

    .footer-copyright{

        font-size:14px;

        line-height:1.6;
    }

}

/* =========================
   MENU LINE HOVER
========================= */
.footer-group li a,
.footer-single a{

    position:relative;

    display:inline-block;
}
/* 底線 */
.footer-group li a::after,
.footer-single a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-3px;

    width:100%;
    height:1px;

    background:#e60012;

    opacity:.75;

    transform:scale3d(0,1,1);
    transform-origin:left center;

    transition:transform .35s ease;

    will-change:transform;

    backface-visibility:hidden;
}

/* hover */
.footer-group li a:hover::after,
.footer-single a:hover::after{

    transform:scale3d(1,1,1);
}
/* =========================
   BRAND STORY
========================= */

.brand-story {
    background: #fffefd;
    padding: 90px 20px 120px;
    position: relative;
}

.brand-story-topline {
    width: 100%;
    height: 2px;
    background: #d60012;
    position: absolute;
    top: 0;
    left: 0;
}

.brand-story .container {
    max-width: 1200px;
    margin: 0 auto;
}

.brand-title {
    text-align: center;
    margin-bottom: 60px;
}

.brand-title span {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #d60012;
    margin-bottom: 14px;
}

.brand-title h2 {
    font-size: 48px;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
}

.brand-story-box {
    background: #fcf9f5;
    padding: 80px 70px;
}

.brand-logo {
    text-align: center;
    margin-bottom: 70px;
}

.brand-logo img {
    max-width: 240px;
    width: 100%;
}

.brand-logo2 {
    text-align: center;
    margin-bottom: 70px;
}

.brand-logo2 img {
    max-width: 120px;
    width: 100%;
}

.story-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 90px;
}

.story-row:last-child {
    margin-bottom: 0;
}

.story-row.reverse {
    flex-direction: row-reverse;
}

.story-image,
.story-content {
    width: 50%;
}

.story-image img {
    width: 100%;
    display: block;
}

.story-content h3 {
    font-size: 36px;
    font-weight: 500;
    color: #e60012;
    line-height: 1.3;
}

.story-content h3 span {
    font-size: 58px;
}

.story-content h4 {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    line-height: 1.5;
    margin-bottom:10px;
}

.story-content p {
    font-size: 17px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 24px;
}

.story-content p:last-child {
    margin-bottom: 0;
}
.story-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


.story-content h5 {
    font-weight: 500;	
    font-size: 17px;	
    margin-bottom: 8px;
}

.story-content ul li {
    position: relative;
    padding-left: 17px;
    margin-bottom: 5px;
    font-size: 17px;
    color: #444;
}
.story-content ul li::before {
    content: "";
    width: 4px;
    height: 4px;
    background: #666;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 13px;
}

.story-highlight{
    background: #fffefd;
    border-left: 5px solid #e60012;
    padding-top: 10px;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    color: #444;
}

/* =========================
   RWD
========================= */

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

    .brand-story-box {
        padding: 70px 50px;
    }

    .story-row {
        gap: 40px;
    }

    .story-content h3 {
        font-size: 38px;
    }

    .story-content h3 span {
        font-size: 48px;
    }

    .story-content h4 {
        font-size: 24px;
    }

    .story-content p {
        font-size: 16px;
        line-height: 2;
    }
}

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

    .brand-story {
        padding: 70px 16px 90px;
    }

    .brand-title {
        margin-bottom: 40px;
    }

    .brand-title h2 {
        font-size: 34px;
    }

    .brand-story-box {
        padding: 50px 24px;
    }

    .brand-logo {
        margin-bottom: 50px;
    }

    .story-row,
    .story-row.reverse {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 70px;
    }

    .story-image,
    .story-content {
        width: 100%;
    }

    .story-content h3 {
        font-size: 30px;
    }

    .story-content h3 span {
        font-size: 38px;
    }

    .story-content h4 {
        font-size: 22px;
        margin-bottom: 24px;
    }

    .story-content p {
        font-size: 15px;
        line-height: 2;
        margin-bottom: 18px;
    }
}

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

    .brand-title span {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .brand-title h2 {
        font-size: 28px;
    }

    .brand-story-box {
        padding: 40px 20px;
    }

    .story-content h3 {
        font-size: 24px;
    }

    .story-content h3 span {
        font-size: 30px;
    }

    .story-content h4 {
        font-size: 18px;
        line-height: 1.6;
    }

    .story-content p {
        font-size: 14px;
        line-height: 1.9;
    }
}


/* ==========================
   CONTACT
========================== */

.contact-us{
    background: #fffefd;
    padding-top: 90px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
}

.contact-inner{
    max-width: 1200px;
    margin: auto;
}


.contact-us .container{
    max-width:1200px;
    margin:auto;
	
	
}

.contact-us-box {
    background: #fcf9f5;
    padding-top: 80px;
    padding-right: 40px;
    padding-left: 40px;
    padding-bottom: 80px;
    margin-bottom: 80px;
}
/* ==========================
   INTRO
========================== */

.contact-intro{
    text-align:center;
    margin-bottom:50px;
}

.contact-intro p{
    font-size: 17px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 60px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.contact-intro span{
    color:#e60012;
}


.required{
    color:#e60012;
	margin-right:2px;
    font-weight:700;
}


/* ==========================
   WRAPPER
========================== */

.contact-wrapper{
    display:flex;
    gap:40px;
    align-items:flex-start;
}



/* ==========================
   FORM
========================== */
.contact-form *,
.contact-form *::before,
.contact-form *::after{
    box-sizing:border-box;
}


.contact-form{
    flex:1;
}

.form-row{
    display:flex;
    align-items:center;
    margin-bottom:15px;
}

.form-row label{
    width:157px;
    color:#444;
    font-size:17px;
}

.form-row input,
.form-row textarea{
    flex:1;
    border:1px solid #e5e5e5;
    border-radius:8px;
    background:#fff;
    padding:12px 15px;
    font-size:18px;

    box-shadow:
        0 1px 2px rgba(0,0,0,.04);
}

.form-row input:focus,
.form-row textarea:focus{
    outline: none;
    border-color: #e0ceaf;
	box-shadow:
        0 1px 2px rgba(0,0,0,.04);
}

.form-row textarea{
    height:220px;
    resize:none;
}

.textarea-row{
    align-items:flex-start;
}

.textarea-row label{
    padding-top:15px;
}

.captcha-group{
    display:flex;
    gap:10px;
    flex:1;
}

@media (max-width:768px){
	.contact-us-box {
    padding-top: 80px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 80px;
    margin-bottom: 80px;
}

    .captcha-group{
        display:flex;
        flex-wrap:wrap;
        width:100%;
    }

    .captcha-group input{
        width:100%;
    }

    .captcha-group img{
        width:120px;
        height:auto;
    }
	
	
	 /* 左右欄改上下 */

    .contact-wrapper{
        flex-direction:column;
        gap:30px;
    }
	
	
    /* 表單改上下排列 */

    .form-row{
        flex-direction:column;
        align-items:flex-start;
        margin-bottom:20px;
    }

    .form-row label{
        width:100%;
        margin-bottom:8px;
        font-size:16px;
    }

    .form-row input,
    .form-row textarea{
        width:100%;
        flex:none;
        font-size:16px;
    }

    .form-row textarea{
        height:180px;
    }

    /* 驗證碼 */

    .captcha-group{
        width:100%;
        flex-direction:column;
        gap:10px;
    }

    .captcha-group img{
        width:140px;
        height:auto;
    }

    .captcha-group button{
        width:140px;
        height:42px;
    }

    /* 公司資訊卡 */

    .company-info{
        padding:20px;
    }

    .company-logo{
        width:180px;
    }

    .company-info h3{
        font-size:22px;
    }

    .company-info li{
        font-size:15px;
    }

    /* 地圖 */

    .contact-map iframe{
        height:350px;
    }
	
	

}

.captcha-group img{
    height:48px;
    border:1px solid #ddd;
}

.captcha-group button{
    border:none;
    background:#efefef;
    padding:0 15px;
    cursor:pointer;
	 border-radius: 8px;
	    border: 1px solid #e5e5e5;
}

/* CMS DYNAMIC START: contact form states */
.form-alert{
    margin-bottom:20px;
    padding:14px 16px;
    border-radius:8px;
    font-size:16px;
    line-height:1.6;
    scroll-margin-top:120px;
}

.form-alert-success{
    border:1px solid #bfe6c9;
    background:#edf8ef;
    color:#226b35;
}

.form-alert-error{
    border:1px solid #f0b8b3;
    background:#fff1f0;
    color:#b42318;
}

.form-row{
    flex-wrap:wrap;
}

.form-error{
    flex-basis:calc(100% - 110px);
    margin-top:6px;
    margin-left:110px;
    color:#d71920;
    font-size:14px;
    line-height:1.5;
}

.form-error[hidden]{
    display:none;
}

.form-row input[aria-invalid="true"],
.form-row textarea[aria-invalid="true"]{
    border-color:#d71920;
}

.captcha-group img[data-captcha-image]{
    width:140px;
    height:44px;
    object-fit:cover;
}

.captcha-refresh-button{
    width:48px;
    height:44px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#555;
    transition:.2s;
}

.captcha-refresh-button:hover,
.captcha-refresh-button:focus-visible{
    background:#e8e8e8;
    border-color:#d8d8d8;
    color:#e60012;
}

.captcha-refresh-button svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.submit-btn:disabled,
.captcha-refresh-button:disabled{
    cursor:not-allowed;
    opacity:.6;
}

@media (max-width:768px){
    .captcha-group{
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
    }

    .captcha-group input{
        flex-basis:100%;
    }

    .form-error{
        flex-basis:100%;
        width:100%;
        margin-left:0;
    }
}
/* CMS DYNAMIC END */

.submit-btn{
    width:100%;
    height:50px;
    border:none;
    border-radius:8px;

    background:linear-gradient(
        90deg,
        #e70012,
        #f93445
    );

    color:#fff;
    font-size:18px;
    font-weight:600;
    cursor:pointer;

    transition:.3s;
}

.submit-btn:hover{
    opacity:.9;
}

/* ==========================
   CARD
========================== */

.contact-card{
    width:360px;
	 flex-shrink:0;
    background:#fff;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.company-info a[href^="tel"],
.company-info a[href^="tel"]:visited,
.company-info a[href^="tel"]:hover,
.company-info a[href^="tel"]:active{
    color:inherit !important;
    text-decoration:none !important;
}

@media (max-width:1024px){

    .contact-us-box{
        padding:60px 30px;
    }

    .contact-wrapper{
        flex-direction:column;
        gap:30px;
    }

    .contact-form,
    .contact-card{
        width:100%;
    }

    .contact-card{
        max-width:500px;
        margin:auto;
    }
}


@media (max-width:640px){
	
.contact-card{
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}
	
	.contact-us-box {
      
      padding-right: 6px;
       padding-left:6px;
    }
	
	
	}
.company-photo{
    width:100%;
    display:block;
}

.company-info{
    padding-top: 25px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 25px;
}

.company-logo{
    width:240px;
    margin-bottom:0px;
}

.company-info h3{
    font-size:22px;
    color: #444;
}
.company-info ul{
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.company-info li{
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.6;
    color: #666;
    font-size: 14px;
    margin-bottom: 4px;
}

.company-info li img{
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-top: 3px;
}

.company-info li span{
    flex:1;
}



.company-info i{
    color:#999;
    width:18px;
    margin-top:5px;
}

.card-bottom-line{
    height:4px;
    background:#e60012;
    margin:0 20px 20px;
}

/* ==========================
   MAP
========================== */

.contact-map{
    width:100%;
}

.contact-map iframe{
    width:100%;
    height:600px;
    border:0;
    display:block;
}


/* ==========================
   HISTORY
========================== */

.history-section{
    max-width:1100px;
    margin:auto;
    padding:80px 20px;
    position:relative;
}

.history-contact{
    margin-top: 100px;
}

.timeline-line{
       position: absolute;
    left: 260px;
    top: 300px;
    bottom: 180px;
    width: 0.5px;
    background: #b1b1b1;
}


.history-item{
    display:grid;
    grid-template-columns:240px 50px 1fr;
    margin-bottom:70px;
}

.history-year{
    text-align: right;
    padding-right: 34px;
    color: #d91f26;
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    font-style: italic;
    font-family: Constantia, Lucida Bright, DejaVu Serif, Georgia, serif;
    margin-bottom: 0px;
    margin-top: -8px;
}


.history-node span{
   position: absolute;
    top: 25px;
    left: 0px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d91f26;
    transform: translate(-50%, -50%);
}

.history-node span::before{
    content:"";
    position:absolute;
    top:50%;
    right:100%;
    width:20px;
    height:0.5px;
    background:#d91f26;
    transform:translateY(-50%);
}

.history-node span::after{
    content:"";
    position:absolute;
    top:50%;
    left:100%;
    width:20px;
    height:0.5px;
    background:#d91f26;
    transform:translateY(-50%);
}

.history-content{
    padding-left:0px;
}

.history-content h3{
    font-size: 26px;
    color: #222;
    margin-bottom: 15px;
    font-weight: 600;
}

.history-content p{
    color: #444;
    line-height: 1.6;
    margin-bottom: 12px;
    font-size: 17px;
}

.history-content img{
    width:100%;
    max-width:520px;
    display:block;
    margin-top:25px;
    border-radius:12px;
}

.history-label{
    display: inline-block;
    background: #d91f26;
    color: #fff;
    padding-top: 2px;
    padding-right: 14px;
    padding-left: 14px;
    padding-bottom: 2px;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 26px;
}

.history-ending{
    text-align:center;
    margin-top:120px;
}

.history-ending h2{
    font-size:42px;
    color:#666;
    line-height:1.7;
}

.history-node{
    position: relative;
    margin-top: 0px;
}
/* ==========================
   RWD
========================== */

@media(max-width:768px){
	
.history-label {
    font-size: 22px;
    line-height: 1.2;
}
	
.history-node{
    position: relative;
    margin-top: -35px;
}

	
.history-contact{
    margin-top: 0px;
}
	
    .timeline-line{
        left:50px;
    }

    .history-item{
        grid-template-columns:40px 1fr;
        margin-bottom:50px;
    }

    .history-year{
    grid-column: 1 / -1;
    text-align: left;
    padding-left: 60px;
    padding-right: 0;
    margin-bottom: 15px;
    font-size: 32px;
    }

    .history-node span{
        left:30px;
        top:8px;
    }

    .history-content{
        padding-left:20px;
    }

    .history-content h3{
     
    font-size: 22px;
    line-height: 1.2;
    }

    .history-ending h2{
        font-size:28px;
    }

}


/* ==========================
OEM ODM
========================== */

.oem-section{
    background:#f3f3f3;
    padding:100px 0;
}

.oem-section .container{
    max-width:1400px;
    margin:auto;
    padding:0 30px;
}

/* ==========================
HEADER
========================== */

.oem-header{
    text-align:center;
    margin-bottom:100px;
}

.en-title{
    display:block;
    color:#e60012;
    font-size:15px;
    letter-spacing:3px;
    font-weight:700;
    margin-bottom:15px;
}

.oem-header h2{
    font-size:56px;
    font-weight:700;
    color:#222;
}

/* ==========================
INTRO
========================== */

.oem-intro{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.oem-text{
    width:45%;
}

.oem-text h3{
    color:#e60012;
    font-size:28px;
    margin-bottom:25px;
    font-weight:500;
}

.oem-text p{
    font-size:17px;
    line-height:2;
    color:#444;
}

.oem-image{
    width:45%;
}

.oem-image img{
    width:100%;
    display:block;
}

/* ==========================
RED OVAL
========================== */

.oem-process-wrap{
    overflow:hidden;

    margin-top:140px;
    margin-bottom:160px;

    width:100%;
}

.oem-process{

    width:220%;
    margin-left:-60%;

    background:#e60012;

    border-radius:50%;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:90px 80px 120px;
}

.oem-process h3{
    color:#fff;
    font-size:38px;
    margin-bottom:70px;
    font-weight:500;
}
@media(max-width:1180px){
	
.oem-intro{
   
    gap: 8px!important;
    max-width: 960px!important;
}
	.oem-text h3 {
  
    font-size: 31px;
}
	.oem-description p {
    max-width: 900px!important;
    margin-left: auto;
    margin-right: auto;
}
}
/* ==========================
TABLET
========================== */

@media(max-width:1024px){

    .oem-process-wrap{
        margin-top:120px;
        margin-bottom:140px;
    }

    .oem-process{

        width:260%;
        margin-left:-80%;

        padding:80px 50px 100px;
    }

	
	

}

/* ==========================
MOBILE
========================== */

@media(max-width:768px){

    .oem-process-wrap{
        margin-top:100px;
        margin-bottom:120px;
    }

    .oem-process{

        width:320%;
        margin-left:-110%;

        padding:70px 20px 90px;
    }


}

/* ==========================
PROCESS GRID
========================== */

.process-grid{

    width:100%;
    max-width:1000px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.process-item{

    width:300px;
    height:300px;

    background:#efefef;

    border-radius:50%;

    border:6px solid #d8d8d8;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    margin:auto;

    padding:25px;
}

.process-item h4{
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 8px;
    color: #222;
    border-bottom: 1px solid #e60012;
    padding-bottom: 15px;
}

.process-item p{
    font-size: 17px;
    line-height: 1.6;
    color: #444;
}

/* ==========================
DESCRIPTION
========================== */

.oem-description{
    text-align:center;
    max-width:1100px;
    margin:0 auto 80px;
}

.oem-description h3{
    color: #e60012;
    font-size:34px;
    line-height:1.5;
    margin-bottom:35px;
	 font-weight: 500;
	
}

.oem-description p{
    color:#444;
    line-height:2.0;
    font-size:17px;
    margin-bottom:25px;
}

/* ==========================
GALLERY
========================== */

.oem-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.gallery-item img{
    width:100%;
    display:block;
}

/* ==========================
TABLET
========================== */

@media(max-width:1024px){

    .oem-intro{
        flex-direction:column;
    }

    .oem-text,
    .oem-image{
        width:100%;
    }

    .process-grid{
        grid-template-columns:repeat(2,1fr);
		
		    max-width: 660px;
    }

    .oem-process{
        border-radius:80px;
        aspect-ratio:auto;
        padding:80px 40px;
    }
	
	.contact-us-box {
    padding-top: 80px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 80px;
}

	

}

/* ==========================
MOBILE
========================== */

@media(max-width:768px){

    .oem-header h2{
        font-size:40px;
    }

    .oem-text h3{
        font-size:30px;
    }

    .oem-process h3{
        font-size:22px;
        text-align:center;
    }

    .process-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .process-item{
        width:360px;
        height:360px;
    }

    .oem-description h3{
        font-size:32px;
    }

    .oem-gallery{
        grid-template-columns:1fr;
    }

}

/* =================================
FEATURED PRODUCT
================================= */

.featured-product{
    background:#f5f5f5;
}

/* =================================
CONTAINER
================================= */

.featured-product .container{
    max-width:1200px;
    margin:auto;
    padding:100px 30px;
}

/* =================================
HEADER
================================= */

.fp-header{
    text-align:center;
    margin-bottom:60px;
}

.fp-en{
    display:block;
    color:#e60012;
    font-size:15px;
    letter-spacing:3px;
    font-weight:700;
    margin-bottom:15px;
}

.fp-header h2{
    font-size:54px;
    color:#222;
}

/* =================================
HERO
================================= */

.fp-hero{
    text-align:center;
    margin-bottom:70px;
}

.fp-hero img{
    max-width:800px;
    width:100%;
}

/* =================================
SLOGAN
================================= */

.fp-slogan{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    margin-bottom:40px;
}

.fp-slogan span{
    width:120px;
    height:12px;

    background:
    repeating-linear-gradient(
        90deg,
        #e60012,
        #e60012 1.5px,
        transparent 2px,
        transparent 4px
    );
}

.fp-slogan h3{
    color:#e60012;
    text-align:center;
    font-size:42px;
    line-height:1.4;
}

/* =================================
TITLE
================================= */

.fp-title{
    text-align: center;
    font-size: 34px;
    margin-bottom: 60px;
    color: #111;
}

/* =================================
CONTENT
================================= */

.fp-content{

    display:grid;

    grid-template-columns:
    200px
    1fr
    200px;

    gap:60px;

    align-items:center;

    margin-bottom:80px;
}

.dot-box{

    height:530px;

    background-image:
    radial-gradient(
        #e60012 0.8px,
        transparent 0.8px
    );

    background-size:14px 14px;
}

.content-text{
    text-align:center;
}

.content-text p{
    line-height: 1.8;
    color: #444;
    margin-bottom: 28px;
    font-size: 17px;
}

/* =================================
FOOD IMAGE
================================= */

.fp-food{
    text-align:center;
}

.fp-food img{
    width:100%;
    max-width:650px;
}

/* =================================
BOTTOM BANNER
================================= */

.fp-banner{

    display:grid;

    grid-template-columns:
    1fr
    1fr;
}

.banner-text{

    background:#e60012;
    color:#fff;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:80px;
}

.banner-text h3{
    font-size: 58px;
    line-height: 1;
    margin-bottom: 10px;
}

.banner-text h4{
    font-size: 34px;
    margin-bottom: 25px;
    font-weight: 300;
    margin-left: 10px;
	letter-spacing: -0.1px;
}

.banner-text p{
    line-height: 1.4;
   
	letter-spacing: 0.5px;
	  font-size:20px;
}

.banner-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* =================================
TABLET
================================= */

@media(max-width:1024px){

    .fp-content{

        grid-template-columns:1fr;
        gap:40px;
    }

    .dot-box{
        display:none;
    }

    .fp-banner{
        grid-template-columns:1fr;
    }

}

/* =================================
MOBILE
================================= */

@media(max-width:768px){

    .featured-product .container{
        padding:70px 20px;
    }

    .fp-header h2{
        font-size:38px;
    }

    .fp-slogan{
        gap:15px;
    }

    .fp-slogan span{
        width:50px;
    }

    .fp-slogan h3{
        font-size:28px;
    }

    .fp-title{
        font-size:28px;
    }

    .banner-text{
        padding:50px 30px;
    }

    .banner-text h3{
        font-size:36px;
		margin-bottom: -10px;
    }

    .banner-text h4{
        font-size:21px;
	    margin-left: 5px;
    }
	.banner-text p {
    line-height: 1.6;
    font-size: 18px;
}

}


/* ==========================
SALES CHANNEL
========================== */

.sales-channel{
    background:#f5f5f5;
    padding:120px 0;
}

.sales-channel .container{
    max-width:1200px;
    margin:auto;
    padding:0 30px;
}

/* ==========================
HEADER
========================== */

.sales-header{
    text-align:center;
}

.sales-header .en-title{

    display:block;

    color:#e60012;

    font-size:18px;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:15px;
}

.sales-header h2{

    font-size:64px;

    font-weight:700;

    color:#333;

    margin:0;
}

/* ==========================
BRAND
========================== */

.sales-brand{

    text-align:center;

    margin:70px 0 40px;
}

.sales-brand img{

    max-width:220px;
    width:100%;
}

/* ==========================
DESCRIPTION
========================== */

.sales-desc{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;
}

.sales-desc p{

    color:#444;

    font-size:17px;

    line-height:1.9;

    margin:0 0 10px;
}

/* ==========================
GRID
========================== */

.outlet-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;
}

.outlet-item{

    background:#fff;

    border:1px solid #d9d9d9;

    border-radius:4px;

    min-height:140px;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;
	 box-shadow:0 8px 20px rgba(0,0,0,.05);

    transition:.3s;
}

.outlet-item:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.outlet-item img{

    max-width:100%;

    max-height:90px;

    object-fit:contain;

    display:block;
}


/* ==========================
   BRAND SERIES
========================== */

.brand-series{
    background:#f5f5f5;
    padding:120px 0;
}

.section-title{
    text-align:center;
    margin-bottom:90px;
}

.section-title span{
    display:block;
    color:#e60012;
    font-size:18px;
    font-weight:700;
    letter-spacing:.15em;
    margin-bottom:15px;
}

.section-title h2{
    font-size:56px;
    font-weight:700;
    color:#333;
    margin:0;
}

/* ==========================
   GRID
========================== */

.product-grid{
    width:min(1600px,92%);
    margin:auto;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:120px 70px;
}

/* ==========================
   CARD
========================== */

.product-card{
    position:relative;
    padding-bottom:60px;
}

/* 圖片區 */

.product-image{
    overflow:hidden;
}

.product-image a{
    display:block;
}

.product-image img{

    width:100%;
    max-width:650px;

    display:block;
    margin:auto;

    transition:
        transform .6s ease,
        opacity .4s ease;
}

/* 文字區 */

.product-info {
    width: 88%;
    margin: auto;
    background: #fff;
    border: 1px solid #d9c8a3;
    min-height: 110px;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;   /* 左右改上下 */
    align-items: flex-start;
    gap: 15px;
    position: relative;
    z-index: 2;
    border-radius: 4px;
    transition: .35s ease;
}


/* 舊的

.product-info{
    width:88%;
    margin:auto;

    background:#fff;
    border:1px solid #d9c8a3;

    min-height:110px;

    padding:22px 26px;

    display:flex;
    align-items:flex-start;
    gap:25px;

    position:relative;
    z-index:2;
	 border-radius:4px;  
	    transition:.35s ease;
}*/


.product-card:hover .product-info{
    border-color:#e60012;
}

.product-info h3{
    margin: 0;
    flex-shrink: 0;
    font-size:28px;
    font-weight: 200;
    color: #333;
    line-height: 1.4;
}

.product-info h3 strong{
    font-weight:700;	
    border-bottom: 2px solid #c99c52;
}

.product-info p{
    margin:0;
    color:#666;
    font-size:17px;
    line-height:1.6;
}

/* 卡片陰影 */

.product-card{   	
	position:relative;
    overflow:hidden;
    transition:.35s ease;
}

.product-card:hover{
    transform:translateY(-8px);
}

.product-card:hover .product-image img{
    transform:scale(1.03);
}


.product-card::after{

     content:"";

    position:absolute;

    left:50%;
    bottom:-12px;

    transform:translateX(-50%);

    width:70%;
    height:18px;

    background:radial-gradient(
        ellipse at center,
        rgba(0,0,0,.12) 0%,
        rgba(0,0,0,.05) 55%,
        rgba(0,0,0,0) 100%
    );

    filter:blur(12px);

    pointer-events:none;
}


/* 右下角按鈕 */

.product-card-link{

    position:absolute;
    right:0;
    bottom:0;

    width:40px;
    height:40px;

    background:#e5341a;

    border-top-left-radius:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    text-decoration:none;

    z-index:10;

    transition:.35s;
}

.product-card-link span{

    font-size:28px;

    transform:translate(2px,-2px);

    transition:.35s;
}

.product-card:hover .product-card-link{
    background:#c91d0b;
}

.product-card:hover .product-card-link span{
    transform:translate(7px,-2px);
}


/* ==========================
   TABLET
========================== */

@media (max-width:1024px){

    .product-grid{
        gap:80px 40px;
    }

    .product-info{
        width:92%;
        flex-direction:column;
        gap:12px;
    }

    .product-info h3{
        font-size:22px;
    }

}

/* ==========================
   MOBILE
========================== */

@media (max-width:768px){

    .brand-series{
        padding:80px 0;
    }

    .section-title{
        margin-bottom:60px;
    }

    .section-title h2{
        font-size:42px;
    }

    .product-grid{
        grid-template-columns:1fr;
        gap:70px;
    }

    .product-image img{
        max-width:100%;
    }

    .product-info{
        width:100%;
        min-height:auto;
        padding:20px;
    }

    .product-info h3{
        font-size:20px;
    }

    .product-info p{
        font-size:14px;
        line-height:1.8;
    }

}

.product-series{
    text-align:center;
}
.product-series h3{

    font-size:40px;
    font-weight:600;

    color:#333;
    margin-bottom:20px;

    position:relative;	
	
    line-height: 1.2;

	
}

.product-series h3:after{

    content:"";

    width:60px;
    height:2px;

    background:#e60012;

    display:block;

    margin:15px auto 0;
}

.product-series p{

    font-size:18px;

    color:#666;

    line-height:1.9;

    max-width:800px;

    margin:auto;
}

@media(max-width:768px){

    .product-series h3{
        font-size:28px;
    }

    .product-series p{
        font-size:16px;
        line-height:1.9;
    }

}

/* ==========================
   MEDIA
========================== */

.media-section{
    padding:100px 0;
    background:#f4f4f4;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    display:block;
    color:#e60012;
    font-size:26px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:15px;
}

.section-title h2{
    font-size:56px;
    font-weight:700;
    color:#333;
}


/* ==========================
   GRID
========================== */

.media-grid{
    max-width:1400px;
    margin:auto;
    padding:0 30px;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:45px;
}


/* ==========================
   CARD
========================== */

.media-card{
    display:block;
    background:#fff;
    position:relative;
    color:inherit;
    text-decoration:none;

    box-shadow:
        0 5px 20px rgba(0,0,0,.05);

    transition:.35s;
}

.media-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.08);
}


/* ==========================
   IMAGE
========================== */

.media-image{
    display:block;
    overflow:hidden;
}

.media-image img{
    width:100%;
    display:block;

    aspect-ratio:740 / 500;
    object-fit:cover;

    transition:.5s;
}

.media-card:hover img{
    transform:scale(1.03);
}


/* ==========================
   CONTENT
========================== */

.media-content{
    padding:28px 30px 40px;
}

.media-meta{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;

    margin-bottom:18px;
}

.date{
    color:#d6322b;
    font-size:16px;
}

.tag{
    background: #d71920;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding-top: 3px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 3px;
    border-radius: 4px;
}

.media-content h3{
    color:#333;

    font-size:26px;
    font-weight:500;
    line-height:1.6;

    margin:0;
}

/* CMS DYNAMIC START: news list states */
.media-title-link{
    color:inherit;
    text-decoration:none;
}

.media-empty{
    grid-column:1 / -1;
    margin:0;
    padding:60px 30px;
    background:#fff;
    color:#666;
    text-align:center;
}
/* CMS DYNAMIC END */


/* ==========================
   右下角按鈕
========================== */

.media-card-link{
    position:absolute;
    right:0;
    bottom:0;

    width:40px;
    height:40px;

    background:#e5341a;

    border-top-left-radius:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    text-decoration:none;

    transition:.35s;
}

.media-card:hover .media-card-link{
    background:#c91d0b;
}

.media-card-link span{
    font-size:28px;
    transform:translate(2px,-2px);
    transition:.35s;
}

.media-card:hover .media-card-link span{
    transform:translate(7px,-2px);
}



/* ==========================
   TABLET
========================== */

@media(max-width:1200px){

    .media-content h3{
        font-size:24px;
    }

    .section-title h2{
        font-size:42px;
    }

    .section-title span{
        font-size:20px;
    }
}


/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

    .media-grid{
        grid-template-columns:1fr;
        gap:30px;
        padding:0 20px;
    }

    .media-section{
        padding:70px 0;
    }

    .media-content{
        padding:20px 20px 35px;
    }

    .media-content h3{
        font-size:20px;
        line-height:1.5;
    }

    .date{
        font-size:16px;
    }

    .tag{
        font-size:12px;
    }

    .section-title h2{
        font-size:34px;
    }

    .section-title span{
        font-size:16px;
    }
}

/* ==========================
   PAGINATION
========================== */

.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    margin-top:80px;
}

.pagination a{
    text-decoration:none;
}


/* 數字 */

.page-number{
     width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #ddd;
    background:#fff;

    color:#666;
    font-size:16px;
    font-weight:600;

    transition:.3s;
}

.page-number:hover{
    border-color:#e60012;
    color:#e60012;
}

.page-number.active{
    background:#e60012;
    border-color:#e60012;
    color:#fff;
}


/* 左右箭頭 */

.page-arrow{
    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #ddd;
    background:#fff;

    color:#666;
    font-size:16px;

    transition:.3s;
}

.page-arrow:hover{
    background:#e60012;
    border-color:#e60012;
    color:#fff;
}


/* ==========================
   NEWS DETAIL
========================== */

.news-detail{
    background:#f5f5f5;
    padding:100px 0;
}

.news-detail .container{
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

/* ==========================
   HEADER
========================== */

.news-header{
    text-align:center;
    margin-bottom:50px;
}

.news-date{
    font-size:18px;
    color:#999;
    margin-bottom:15px;
}

.news-header h1{
    font-size:36px;
    line-height:1.4;
    font-weight:600;
    color:#333;

    margin-bottom:15px;
}

.news-tag{
    font-size:18px;
    color:#999;
}

/* ==========================
   COVER
========================== */

.news-cover{
    margin-bottom:60px;
}

.news-cover img{
    width:100%;
    display:block;

    box-shadow:
        0 15px 40px rgba(0,0,0,.08);
}

/* ==========================
   CONTENT
========================== */

.news-content{
    max-width:900px;
    margin:auto;
}

.news-content p{
    font-size:18px;
    line-height:2;
    color:#444;
    margin-bottom:30px;
}

.news-content img{
    max-width:100%;
    height:auto;
}

/* ==========================
   BUTTON
========================== */

.news-btn-wrap{
    text-align:center;
    margin-top:60px;
}
.news-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    height: 50px;
    background: #e60012;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    border-radius: 8px;
    transition: .3s;
}

.news-btn:hover{
    background:#c70010;
    transform:translateY(-3px);
}

/* ==========================
   NAV
========================== */
.news-nav{

    margin-top:80px;
    padding-top:40px;

    border-top:1px solid #ddd;

    display:flex;
    justify-content:center;
    gap:20px;

    flex-wrap:wrap;
}

.nav-btn{

    display:flex;
    align-items:center;
    gap:10px;

   /* min-width:160px;*/
    height:50px;

    padding:0 24px;

    background:#f7f7f7;

    border:1px solid #e5e5e5;
    border-radius:8px;

    color:#666;
    text-decoration:none;

    transition:.3s;
}

.nav-btn:hover{

    background:#e60012;
    border-color:#e60012;

    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 10px 25px rgba(230,0,18,.2);
}

.nav-btn .icon{

    font-size:18px;
    font-weight:700;
}
/* ==========================
   RELATED
========================== */

.related-news{
    margin-top:100px;
}

.related-news h2{

    text-align:center;

    font-size:32px;
    font-weight:600;

    color:#333;

    margin-bottom:40px;
}

.related-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.related-card{

    display:block;
    background:#fff;
    color:inherit;
    text-decoration:none;

    box-shadow:
        0 5px 20px rgba(0,0,0,.05);

    transition:.3s;
}

.related-card:hover{

    transform:translateY(-5px);

    box-shadow:
        0 15px 30px rgba(0,0,0,.08);
}

.related-image{

    display:block;
    overflow:hidden;
}

.related-image img{

    width:100%;
    aspect-ratio:740 / 500;

    object-fit:cover;

    display:block;

    transition:.5s;
}

.related-card:hover img{
    transform:scale(1.05);
}

.related-info{
    padding:20px;
}

.related-info span{

    display:block;

    color:#999;
    font-size:14px;

    margin-bottom:10px;
}

.related-info h3{
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    margin: 0;
    font-weight: 500;
}

/* CMS DYNAMIC START: related news link */
.related-title-link{
    color:inherit;
    text-decoration:none;
}
/* CMS DYNAMIC END */

/* ==========================
   TABLET
========================== */

@media(max-width:1024px){

    .news-header h1{
        font-size:40px;
    }

    .related-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

    .news-detail{
        padding:70px 0;
    }

    .news-header h1{
        font-size:30px;
    }

    .news-date,
    .news-tag{
        font-size:16px;
    }

    .news-content p{
        font-size:18px;
        line-height:1.9;
    }

    .news-btn{
        width:100%;
        min-width:auto;
        height:50px;
        font-size:18px;
    }

    .news-nav{
        flex-direction:column;
        gap:15px;
    }

    .related-grid{
        grid-template-columns:1fr;
    }

    .related-news h2{
        font-size:32px;
    }
}