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

@import 'https://fonts.googleapis.com/earlyaccess/notosanstc.css';

/* 根據bootstrap所做的調整 */


body{ font-family:'PT Sans', sans-serif,'Noto Sans TC', sans-serif, "Microsoft JhengHei","Open Sans", 游ゴシック体, "Yu Gothic",  メイリオ, Meiryo, "MS Gothic", sans-serif;line-height:2;color: #5c5c5c;letter-spacing:1px;font-size: 15px;}
form{height: 100%;}
a { color:#12549d;text-decoration: none;}
a:hover{ color: #000;text-decoration: none;}
a:focus{text-decoration: none;}
ul,li{list-style: none;padding: 0;margin: 0;}
p {margin: 0 0 8px;text-align: justify;}
img{max-width: 100%;}
:focus {outline: #36a4b5 auto 3px;}
hr{border-top: 1px solid #4e4e4e;}
.container{position: relative;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {letter-spacing:2px;
   font-family: 'PT Sans', sans-serif,'Noto Sans TC', sans-serif,  "微軟正黑體", "Microsoft YaHei","Open Sans", 游ゴシック体, "Yu Gothic",  メイリオ, Meiryo, "MS Gothic", sans-serif;
margin-top: 0;margin-bottom: 0;}
h1{font-size: 3.5em;line-height:1em;color:#ef644a;font-weight: 700;margin-bottom: 10px;}
h2{font-size: 3em;line-height: 2em;}
h3{font-size: 2em;line-height: 2em;}
h4{font-size: 1.5em;line-height: 1.6em;}
h5{font-size: 1.1em;line-height: 1.6em;}
h6{font-size: 1em;line-height: 1.4em;}

@media screen and (max-width: 1024px){
body{font-size: 13px;letter-spacing: 0;line-height:24px;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {margin-bottom: 5px;letter-spacing:1px;}
h1{font-size: 3em;line-height:2em;}
h2{font-size: 2.2em;line-height: 1.5em;}
h3{font-size: 1.7em;line-height: 1.5em;}
h4{font-size: 1.3em;line-height: 1.5em;}
h5{font-size: 1.1em;line-height: 1.5em;}
h6{font-size: 1em;line-height: 1.4em;}
}
@media screen and (max-width: 768px){
body{font-size: 14px;letter-spacing: 0;line-height:26px;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {margin-bottom: 5px;letter-spacing: 0;}
h1{font-size: 2.3em;line-height:2em;}
h2{font-size: 1.7em;line-height: 1.5em;font-weight: 700;}
h3{font-size: 1.3em;
    line-height: 1.8em;
    letter-spacing: 2px;}
h4{font-size: 1.2em;line-height: 1.5em;}
h5{font-size: 1.1em;line-height: 1.8em;}
h6{font-size: 1em;line-height: 1.4em;}
p {margin: 0 0 5px;text-align: justify;}
}


button,button:active,button:focus {
  outline: none!important;
}

.pc{display: block;}
.mo{display: none;}
@media screen and (max-width: 991px){
   .pc{display:none!important;}
.mo{display: block!important;} 
}
/** 文字/區塊對齊 **/
.maintitle{text-align: center;margin-bottom: 30px;}
.maintitle p{text-align: center;}
.maintitle h1{margin-bottom: 0;text-align: center;line-height:1.2em;    white-space: nowrap;
color: #ef644a;font-weight: 700;}

.tright{text-align: right!important;}
.tleft{text-align:left!important;}
.center{text-align: center!important;float: none;}
.it{transform-origin:bottom;
transform:skewX(-20deg);}
img.center{display: block;margin: auto;}
.list-line li{display: inline-block;padding:15px;}
.bold{font-weight: bold;}
.vertical-middle-zone{height: 100%;}
.vertical-middle{   position: relative;top:10%;
  margin: 0 auto;
  transform: translateY(50%);}
.sameHeigh-row{ display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; }
.sameHeigh{    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; }

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

}
@media screen and (max-width: 767px){
.vertical-middle{   position: relative;
  top: 50%;
  margin: 0 auto;
  transform:;}    
.list-line li{padding:5px;font-size: 14px;}
.sameHeigh-row{display: block; }
    .maintitle{margin-bottom: 20px;}
}
.wow {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s; /* Safari 兼容 */
}
/* ----------------------------------------------------------------
	Go To Top
-----------------------------------------------------------------*/
html{
  scroll-behavior: smooth;
}

#back-to-top {position: fixed;bottom: 10px;right:10px;z-index: 9999;
width:auto;height:auto;text-align: center;background:#c13929;line-height: 20px;color: #fff;padding:15px 15px;cursor: pointer;text-decoration: none;transition: opacity 0.2s ease-out;
opacity: 0;text-align: center;border-radius: 100px;}
#back-to-top i{display: block;}
#back-to-top:hover {}
#back-to-top.show {opacity:0.7;}


/* ----------------------------------------------------------------
	Header style1 :menu right
-----------------------------------------------------------------*/
.header {width: 100%;position: fixed;
    opacity: 1;
    transform: translateY(-100%); /* 預設往上隱藏 */
    transition: opacity 0.5s ease, transform 0.5s ease;}
.header .container{width: 100%;max-width: 1440px;padding: 0 15px;display: flex;    align-items: center;}
.header-style1{background: #718d5d;;box-shadow: 0 3px 19px rgba(0,0,0,0.2);transition: all 0.3s linear;}

/* logo */
.header-style1 .logo{display:block; padding:0px 0;transition: all 0.3s linear;float: left;}
.header-style1 .logo img{width:auto;max-height:80px; display: block;}

@media screen and (max-width:991px){ 
.header {display: block;transition: all 0.3s linear;opacity: 1;
            z-index: 888;
        position: fixed;
     transform: translateY(0%); /* 無往上隱藏 */
    transition: opacity 0.5s ease, transform 0.5s ease;
    }
}


/* 主選單 NAVIGATION */
.header-style1 .navigation{    display: flex;z-index: 1001;
    margin: auto;
    justify-content: center;}
.header-style1 .navigation ul {padding: 0px;margin: auto;list-style: none;float:none;display: block;
line-height: 1;}
.header-style1 .navigation ul li {margin: 0;display: inline-block;position: relative;}
.header-style1 .navigation ul li a{position: relative;}
.header-style1 .navigation ul li a:after{    display: block;
    width: 2px;opacity: 0.2;
    background-image: url(../images/mline.png);
    height: 60%;
    position: absolute;
    content: "";
    right: 0;
    top: 20%;}
.header-style1 .navigation ul li a {}
.header-style1 .navigation ul li a img{height: 80px;}
.header-style1 .navigation ul li:hover img {opacity: 0.8;}

@media screen and (max-width: 767px){
    
}
/* 主選單下拉 第二層 dropdownmenu */
.header-style1 ul.dropdownmenu{ display:none;position: absolute;background-color:#fff;
    z-index:9999;padding: 0;transition:all ease 0.5s;opacity: 0;min-width: 180px;
     left:-10px;box-shadow: 0 10px 20px -3px rgba(0,0,0,0.3);}
.header-style1 ul.dropdownmenu li{width: 100%;padding:0;margin: 0;}
.header-style1 ul.dropdownmenu li a {line-height:70px!important;float: none;text-decoration: none;
    display: block;text-align:center;border-top:1px solid #ccc;white-space:nowrap;
       /*background:linear-gradient(to top,#fbfbfb 0,#ffffff 100%);*/ }
.header-style1 ul.dropdownmenu li:first-child a{border-top: none;}
.header-style1 ul.dropdownmenu li:last-child a{}
.header-style1 ul.dropdownmenu li a:hover {color: #fff;
background:#ef644a;
}

.header-style1 .dropdown:hover ul.dropdownmenu {
    display: block; -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    opacity: 1;margin-top:0px;}  

/* 主選單下拉式 第二層 dropdownmenu--假如有子選單時顯示箭頭  */
.header-style1 .navigation li.has-child a:after{}
.header-style1 .navigation li.has-child ul li a:after{content:"";}    

/* 手機版選單右推開 mobimenu */
@media (max-width: 991px) {
    /* 漢堡按鈕 */
    .smobitrigger {
        position: fixed;
        top: 30px;
        right: 15px;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 26px;
        cursor: pointer;
    }

    /* 三條線的基本樣式 */
    .smobitrigger .icon-bar {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #fff;
        transition: transform 0.3s, opacity 0.3s;
    }

    /* 讓中間那條線居中 */
    .smobitrigger .icon-bar:nth-child(2) {
        margin: 4px 0;
    }

    /* 當選單展開時，變成 X 符號 */
    body.menu-open .smobitrigger .icon-bar:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }

    body.menu-open .smobitrigger .icon-bar:nth-child(2) {
        opacity: 0; /* 隱藏中間線 */
    }

    body.menu-open .smobitrigger .icon-bar:nth-child(3) {
        transform: translateY(-14px) rotate(-45deg);
    }

    /* 預設手機版選單隱藏 */
    .mobimenu {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        background: #888f7e;
        z-index: 999;
        transition: transform 0.3s ease-in-out;
        transform: translateX(100%); /* 預設關閉 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 200px;
    }

    /* 當 .menu-open 存在時，選單滑入顯示 */
    body.menu-open .mobimenu {
        transform: translateX(0);
    }
  .header-style1 .navigation ul{padding-top: 120px;}
    /* 選單項目樣式 */
    .mobimenu li {
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }

    .mobimenu li a img {
        width: auto !important;
        max-width: 100%;
        margin: auto;
        height: 70px !important;
        border-bottom: 1px solid #f6d3ab;
        padding: 15px;
    }
}

/* 桌機版隱藏按鈕 */
@media (min-width: 992px) {
    .smobitrigger {
        display: none;
    }
}
/* right-link */
.header-style1 .right-link{float: right;position: relative;}
.header-style1 .right-link ul {display: flex;}
.header-style1 .right-link ul li{position: relative;display: block;}
.header-style1 .right-link ul li a{display: block;line-height: 80px;padding: 0 5px;
font-size:18px;color:#000;cursor: pointer;}
.header-style1 .right-link ul li a:hover{color: #ef644a;}
.header-style1 .right-link ul.dropdownmenu{ background-color:#fff;border: none;min-width: 120px;}
.header-style1 .right-link ul.dropdownmenu li a{line-height:50px!important;font-size: 14px;color: #333;}
.header-style1 .right-link ul.dropdownmenu li a:hover{color: #fff;background-color: #ef644a;}

/* fixed-header */
.fixed-header {position: fixed;width: 100%; z-index: 99;height:auto;    opacity: 1;
    transform: translateY(0); /* 平滑滑下來 */
transition: all 0.3s linear;display: block;background: #53634b;transition: all 0.5s ease;}
.fixed-header .navigation ul li a{transition: all 0.3s linear;padding: 0 5px;
    text-align: center;
    display: block;}
.fixed-header .logo{padding:15px;transition: all 0.3s linear;    margin-top: -5px;}
.fixed-header .right-link ul li a{}

@media screen and (max-width: 1199px){ 
    .header-style1 .navigation ul li a img {
        height: 60px;padding-top: 5px;}
    .fixed-header .navigation ul li a{padding-top: 10px;        display: block;
        margin: auto;}
     .iconlink img{width:30px;}
}

@media screen and (max-width: 991px){ 
    .header-style1 .navigation ul li{    display: flex;
    position: relative;
    justify-content: center;}
    .header-style1 .navigation ul li a:after{display: none;}
    .header-style1 .logo{margin-left: 0;z-index: 88;}
   .fixed-header .logo{margin-top: 0px;}
    .fixed-header {display: block;position:fixed;}
.header-style1 .right-link {
    float: right;        display: block;
        position: absolute;
        z-index: 1001;
        right: 50px;
}
    .header-style1 .right-link ul{}
}
@media screen and (max-width: 480px){ 
    .fixed-header .logo{padding:15px 0;}
      .fixed-header .logo img{height: 55px;}
    .header-style1 .right-link ul li a{padding: 2px;}
}
/* ----------------------------------------------------------------
	sidemenu
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Footer 
-----------------------------------------------------------------*/

.copyrights{padding: 20px 5px;background:#718e5d;background-repeat: repeat;background-size:cover;text-align: center;color: #fff;display: flex;justify-content: center;    gap: 10px;}


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

}
@media screen and (max-width: 767px){
    .copyrights img{height: 20px;width: auto;}

}
/* ----------------------------------------------------------------
	Video Youtube RWD 影片輪播
-----------------------------------------------------------------*/
/* 讓影片輪播區塊有適當的間距 */
.video-carousel-container {
    max-width: 800px; /* 設定最大寬度，可根據需求調整 */
    margin: 0 auto;
    padding: 20px;
}

/* 讓影片區塊可以響應式縮放 */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 的影片比例 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: black;
}

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

/* 自訂左右箭頭樣式 */
.owl-theme .owl-nav [class*=owl-]:hover {
    background:transparent!important;}
.owl-prev, .owl-next {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px 15px;
    font-size: 20px;
    border-radius: 50%;
    cursor: pointer;
    width: 30px;
}

.owl-prev {
    left: -40px;
}

.owl-next {
    right: -40px;
}

/* 讓底部的點點更明顯 */
.owl-dots {
    text-align: center;
    margin-top: 10px;
}

.owl-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 5px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.owl-dot.active {
    background: #333;
}
@media screen and (max-width: 767px){
.owl-prev, .owl-next{
    width: 20px;}
 .owl-prev {
    left: -30px;
}

.owl-next {
    right: -30px;
}   
    }
/* ----------------------------------------------------------------
	Banner
-----------------------------------------------------------------*/
.main{display:block;min-height: 600px;
background-image: url(../images/s01_bg.jpg);background-repeat: no-repeat;background-size:cover;background-position: bottom;}
.mmb{position: relative;display:block;height: 100%;}
.mmb .m01{width: 45%;position: absolute;top:80px;}
.mmb .m02{position: absolute;top: 150px; right: 5%;width: 50%;}
@media screen and (max-width: 1200px){
    .main{display:block;min-height: 550px;}
}

@media screen and (max-width: 991px){
.main{padding-top: 80px;}
}
@media screen and (max-width:767px){
.main{min-height: 300px;}
}
/* ----------------------------------------------------------------
	mzone
-----------------------------------------------------------------*/
.mzone{display:block;
background-image: url(../images/s01_bg2.jpg);background-repeat: no-repeat;background-size:100%;}
.mzone ul{display: flex;padding: 50px 15px;justify-content: center;}
.mzone ul li a{display: block;padding:0 15px;position: relative;}
.mzone ul li a:hover img {opacity: 0.8;}
.mzone ul li a:after{display: block;width: 2px;background-image: url(../images/mline.png);height: 60%;
position: absolute;content: "";right: 0;top: 20%;}
.mzone ul li:last-child a:after{display: none;}
@media screen and (max-width: 991px){ 
    .mzone{display: none;}
}
/* ----------------------------------------------------------------
c01 02 03 04
-----------------------------------------------------------------*/
.c01{background: #aab193;padding-top: 30px;background-image: url(../images/c01bg.jpg);background-repeat: no-repeat;background-size:120%;
background-position: top right;}
.c01bg{}
.c01t{width: 65%;margin-top: 50px;margin-bottom:90px;    margin-left: 70px;}
.c012t{width: 65%;text-align: right;float: right;}
.c012bg{background-image: url(../images/c012bg.jpg);background-repeat: no-repeat;    background-size: cover;
    background-position: top left;
    padding-top: 40px;padding-bottom:90px;}
.c02{background-image: url(../images/c02bg-100.jpg);background-repeat: no-repeat;background-size:cover;
background-position: top right;padding-top: 40px;}
.c03{background-image: url(../images/c03bg1.jpg);background-repeat: no-repeat;background-size:cover;
padding-top:80px;background-position: top right; }


.c032bg{background-image: url(../images/c03bg2.jpg);background-repeat: no-repeat;background-size:100%;
padding: 40px 0;background-position: center;}
.c041bg{background-image: url(../images/c041bg.jpg);background-repeat: no-repeat;background-size:cover;
padding: 40px 0;background-position: center;}
.c042bg{background-image: url(../images/c042bg.jpg);background-repeat: no-repeat;background-size:cover;
padding: 40px 0;background-position: center;}
.c043bg{background-image: url(../images/c03bg.jpg);background-repeat: no-repeat;background-size:cover;
padding: 40px 0;background-position: center right;}
.c043n{display: block;}
.c043n img:nth-child(1){margin-bottom: -300px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;}
.c043n img{width: auto!important;}
@media screen and (max-width: 991px){
    .m01{display: none;}
}
@media screen and (max-width:767px){

}
/* ----------------------------------------------------------------
產品
-----------------------------------------------------------------*/
.pp{margin: auto;padding-top: 0px;width: 80%;    max-width: 1140px;
}
.pp1{display:block;
background-image: url(../images/pp1b.png);background-repeat: no-repeat;background-size:80%;
background-position:right 70px;position: relative;display: flex;}
.ppleft{width: 35%;position:relative;left: -3%;display: inline-block;margin-top: -50px;}
.ppright{width: 60%;position: relative;display: flex;margin-top:50px;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;}
.cp1{position: absolute;bottom:70px;z-index: 0;right:0;width:83%;}
.cp2{position: absolute;bottom:60px;z-index: 0;left:23%;width:25%;}
.btp{padding: 40px 15px 80px;position: relative;}
.btp a.btn{transform:translate(0px , 0px);position: relative;display: inline-block;margin: auto;}
.btp a.btn:hover{transform:translate(3px , 3px); opacity: 0.8;position: relative;}
.pp2{background-image: url(../images/pp2b.png);background-repeat: no-repeat;background-size:80%;
background-position:left 70px;position: relative;display: flex;    flex-direction: row-reverse;}

.pp3{display:block;
background-image: url(../images/pp3b.png);background-repeat: no-repeat;background-size:80%;
background-position:right 70px;position: relative;display: flex;    justify-content: flex-end;}
/* ----------------------------------------------------------------
影片
-----------------------------------------------------------------*/
.c05{display:block;
background-image: url(../images/vbg.jpg);background-repeat: no-repeat;background-size:cover;
background-position: center top;}
.vt{max-width: 100% ;margin: auto;}
.vt img{padding:10px;display: block;}
.videocm{max-width: 600px;margin: auto;padding-top: 30px;}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot
{    font-size: 44px !important;
    font-weight: 300 !important;
    color: #bcac98!important;}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{background: #555!important;}
/* ----------------------------------------------------------------
心得
-----------------------------------------------------------------*/
.c06{display:block;padding: 50px 15px 80px;z-index: 1;position: relative;
background-image: url(../images/vbg.jpg);background-repeat: no-repeat;background-size:cover;
background-position: left top;}


.rec{  width: 100%;margin-top: 50px;
 display: flex;
  gap: 16px;justify-content: space-around; }
.rec ul li{padding: 20px;border-radius: 10px;background: rgba(255,255,255,0.6);margin-bottom: 15px;
font-size: 20px;  position: relative; /* 為了讓偽元素定位 */}
.rec ul li:nth-child(2),.rec ul li:nth-child(4){margin-left: 30px;}
.rec ul li:nth-child(1),.rec ul li:nth-child(3){margin-right: 30px;}
.rec ul li::after {
content: "";
  position: absolute;
  top: 20px; /* 距離上方位置，可依需求調整 */
  left: -10px; /* 向左突出 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent rgba(255, 255, 255, 0.6) transparent transparent;
}
.mbt{background: #86917e;padding: 10px;border-radius: 8px;}
@media screen and (max-width: 767px){
    .mbt{display: block!important;background: none;padding: 0px;border-radius:0;}
    .mbt{}
    .rec{  width: 100%;margin-top: 20px;
        display: block;}
    .rec ul li{font-size: 14px; padding: 10px; }
    .c06{padding: 20px 15px 60px;}
   
}
/* ----------------------------------------------------------------
	購買
-----------------------------------------------------------------*/ 
.c07{display:block;position: relative;padding:80px 15px 50px;
background-image: url(../images/c03bg.jpg);background-repeat: no-repeat;background-size:cover;
background-position: center top;z-index: 0;position: relative;}
.c07t{position: absolute;right: 15%;right: 10%;z-index: 3;}
.c07pp{position: absolute;left: 8%;top:-30px;right: 15%;z-index: 3;width: 30%;}
.tit{background:#718e5d;background-size:100%;padding: 10px;}
.cbody{background-image: url(../images/c07bw.png);background-size:100%;padding:50px;
;background-repeat: no-repeat;margin-bottom: 50px;}
.cbody .buy{grid-template-columns: repeat(3, 1fr);display: grid;gap:30px;
width: 100%;    align-items: center;}
.cbody .buy img{display: block;margin: auto;}

.cbody .buy2 {
    display: flex;
    gap: 30px;
    width: 100%;
    justify-content: space-around;
    align-items: stretch;
}
.c08{display:block;position: relative;padding:50px 15px 50px;
background-image: url(../images/c08bg.jpg);background-repeat: no-repeat;background-size:cover;
background-position: center bottom;z-index: 0;position: relative;}
@media screen and (max-width: 767px){
    
.tit{background-size:cover;    }
    
}
/*右浮動*/
#fixedicon{width: 80px;position: fixed;top:30%;right: 0;z-index: 88;
transition: transform 0.3s ease-in-out;}
#fixedicon a:hover{opacity: 0.7;}
@media screen and (max-width: 991px){
    #fixedicon{display: none;}
}

/*動畫效果*/
@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px); /* 上移 8px */
    }
    100% {
        transform: translateY(0);
    }
}

.moveupdown {
    animation: floatUpDown 3s infinite ease-in-out;
}

/*手機版*/
@media screen and (max-width: 991px){
      .timg2{        width: auto; max-width: 80%;}
    .timg{        width: auto;
        max-width: 50%;}
.c01{display:block;padding: 0;}
    .c02{padding-top: 0;  }

.c07 {
 padding: 0;
}



    .tit img{width: 30%;margin: auto;}
.cbody .buy {
    grid-template-columns: repeat(2, 1fr);}
    .cbody{margin-bottom: 0;}
.btp {padding: 20px 15px 40px;}
}
@media screen and (max-width: 480px){
    .c01{background: #9ea586;}
.c02 {background: #ececec;}
    .c03d {
        margin-top: 0;
        width: 60%;
        margin: auto;
    }
    .c04{background: #9ea586; }
.rez02{    flex-direction: column;max-width:70%;margin: auto;}
}


/*動區*/

.shinepic{background: url(../images/mmb.png);background-repeat: no-repeat;background-size: 100%;display: block;margin: auto;max-width: 820px;background-position:bottom;padding: 55px 0 0;}
.sup{display: flex;}
.ppp{display: flex;}
.pptt{width: 50%;}
.ppro{width: 50%;}