body {
  background-position: left top;
  background-attachment: scroll;
}
body .block-item {
  background-position: left top;
  background-attachment: scroll;
  border-style: none;
}
body .widget-item {
  background-position: left top;
  background-attachment: scroll;
  border-style: none;
}
body .header {
  background-position: left top;
  background-attachment: scroll;
  border-style: none;
}
body .left {
  background-position: left top;
  background-attachment: scroll;
  border-style: none;
}
body .right {
  background-position: left top;
  background-attachment: scroll;
  border-style: none;
}
body .footer {
  background-position: left top;
  background-attachment: scroll;
  border-style: none;
}
/*-------- header --------*/
.sf_header .module{ position: fixed; background: rgb(0 0 0 / 50%); width: 100%; z-index: 2;    border-bottom: 1px solid rgb(255 255 255 / 20%);}
.sf_header .header-part{ width: 100%; background-color: transparent; max-width: 1400px; margin: 0 auto; padding: 0; }
.sf_header .header-part .navbar-collapse { height: 95px; }
.sf_header .header-part .navbar-nav{ align-items: center;}
.sf_header .header-part .navbar-nav,
.sf_header .header-part .navbar-nav li{ height: 100%; }
.sf_header .header-part .navbar-nav li a{ height: 100%;display: -ms-flexbox; display: flex; align-items: center;}
.sf_header .header-part .navbar-brand { height: auto; padding: 5px 0; }
.sf_header .header-part .navbar-nav .nav-link{ position: relative; font-size: 20px; letter-spacing: 1px; padding-left: 18px; padding-right: 20px;}
.sf_header .header-part .navbar-nav .nav-link:focus,
.sf_header .header-part .navbar-nav .nav-link:hover{ background-color:transparent;}
.sf_header .header-part .navbar-nav .nav-link::before{ content:""; position: absolute; background: #b50000; background: -moz-linear-gradient(top,  #b50000 0%, #9b0000 100%); background: -webkit-linear-gradient(top,  #b50000 0%,#9b0000 100%); background: linear-gradient(to bottom,  #b50000 0%,#9b0000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b50000', endColorstr='#9b0000',GradientType=0 ); 
 width:100%;; height: 0%; left: 0; top: 0; z-index: -1; -webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;  -ms-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.sf_header .header-part .navbar-nav .nav-link:hover::before{ content:"";position: absolute; height: 100%;}
.sf_header .header-part .navbar-toggler-icon {position: relative; width: 30px; height: 1px; background: #ffffff;}
.sf_header .header-part .navbar-toggler-icon,.sf_header .header-part .navbar-toggler-icon::before,.sf_header .header-part .navbar-toggler-icon::after{
    transition: opacity 400ms ease, -webkit-transform 400ms ease 0s;
    transition: transform 400ms ease 0s, opacity 400ms ease;
    transition: transform 400ms ease 0s, opacity 400ms ease, -webkit-transform 400ms ease 0s;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 0 50% 0;
    -ms-transform-origin: 0 50% 0;
    transform-origin: 0 50% 0; 
}
.sf_header .header-part .navbar-toggler-icon::before{ content: ""; position: absolute; width: 30px; height: 1px; top: -8px; left:0; background: #ffffff;}
.sf_header .header-part .navbar-toggler-icon::after{ content: ""; position: absolute; width: 30px; height: 1px; bottom: -8px; left:0; background: #ffffff;}
.sf_header .header-part .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{background: transparent;}
.sf_header .header-part .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{  -webkit-transform: rotate( 43deg ); -ms-transform: rotate(43deg); transform: rotate( 43deg ); width: 35px; top: -15px;}
.sf_header .header-part .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after{  -webkit-transform: rotate( -43deg ); -ms-transform: rotate(-43deg); transform: rotate( -43deg ); width: 35px;}

@media (max-width:1400px) {
    .sf_header .header-part .navbar-brand{ padding-left: 20px;}
}
@media (max-width:991px) {
    .sf_header .module { background:transparent; }
    .sf_header .header-part{ background: rgb(0 0 0 / 70%);}
    .sf_header .header-part .navbar-collapse { height: 100%; }
    .sf_header .header-part .navbar-nav, .sf_header .header-part .navbar-nav li { height: initial;  width: 100%;}
    .sf_header .header-part .navbar-nav{height: 100vh;}
    .sf_header .header-part .navbar-toggler{ border:0; outline: none;}
    .sf_header .header-part .navbar-nav .nav-link{ padding-top: 15px; padding-bottom: 15px; justify-content: center;}
    .sf_header .header-part .navbar-brand{ height: 70px;}
    .sf_header .header-part .navbar-nav .nav-link::before { -webkit-transition: all 0s ease-in-out; -moz-transition: all 0s ease-in-out; -ms-transition: all 0s ease-in-out; -o-transition: all 0s ease-in-out; transition: all 0s ease-in-out; }
}
@media (max-width:575px) {
    .sf_header .header-part .navbar-brand{ height: 55px;}
}
/*-------- 共用 --------*/
/* 主標題 */
.sf_title{margin: 70px 0;}
.sf_title .header-title{ display: table; margin: 0 auto; padding: 10px 0; font-size: 32px; font-weight: 600; color:#222222; letter-spacing: 2px; border-bottom: 5px solid #c4a87b; }
.mt-100{ margin-top: 100px;}
@media (max-width:575px) {
    .sf_title { margin: 50px 0; }
    .sf_title .header-title{ font-size: 28px;}
    .mt-100{ margin-top: 50px;}
}
/*-------- 首頁 --------*/
/* 主圖 */
.sf_mainpic .carousel-indicators,.sf_mainpic .carousel-control-next,.sf_mainpic .carousel-control-prev{ display: none; }
.sf_mainpic .carousel-caption{ right: 0; bottom: initial; left: 0; top: 50%; transform: translate(0, -50%); padding-top: 0; padding-bottom: 0; text-align: left; overflow: hidden; }
.sf_mainpic .carousel-caption h1{ font-size: 30px; letter-spacing: 5px; color:#c4a87b;}
.sf_mainpic .carousel-caption h2{ margin-bottom: 30px; font-size: 18px; font-family: 'Roboto', sans-serif !important; letter-spacing: 1px; color:#c4a87b;}
.sf_mainpic .bs-carousel .carousel-item p{ font-size: 18px; font-weight: 400; text-shadow: 0 0 black; letter-spacing: 1px; }
.sf_mainpic h1,.sf_mainpic h2,.sf_mainpic article{ margin-left: 16.6666%;}
.sf_mainpic article{ padding-top: 30px}
.sf_mainpic .GoldLine{ height: 1px; width: 35%; position: absolute; background-color: #c4a87b;}
/* 前言 */
.sf_Preface article{ margin-bottom: 0; padding-top: 80px; padding-bottom: 120px; font-size: 18px; color: #222222; line-height: 45px; letter-spacing: 1px; }
.sf_Preface span{ font-size: 28px;}
.sf_Preface article::before{ content: "";  background: #c4a87b; width: 22px; height: 22px; position: absolute; border-radius: 22px; top: -10px; z-index: 1; left: 50%; transform: translate(-50%, 0); }
.sf_Preface article::after{ content: ""; background: #c4a87b; width: 1px; height: 70px; position: absolute;     top: 0; left: 50%; transform: translate(-50%, 0); }
/* 首頁公司介紹區 */
.main_company{ height: 590px;}
.main_company > .module-container,.main_company > .module-container > .main,
.main_company > .module-container > .main > .mix-wrapper,.main_company > .module-container > .main > .mix-wrapper > .row{ height: 100%;}
.main_company > .module-container > .main > .mix-wrapper > .row{ align-items: center; }
.main_company article{ font-size: 18px; line-height: 2em; }
.main_company article h1{ font-size: 24px; color:#cd0202; font-family: 'Roboto', sans-serif !important; margin-bottom: 20px;}
.main_company article h2{ font-size: 32px; color:#222222; font-weight: 600; padding-bottom: 30px;  margin-bottom: 30px; border-bottom: 1px solid #c4a87b;}
.main_company article .company_content{ max-width: 660px; margin-right: 20px;}
.main_company .pic-content.img-mode { height: 100%; width: 648px; min-width: 648px; max-width: 648px; flex-grow: 0; }
.main_company .img-mode .img-box { text-align: right;  padding: 0; }
.main_company .no-gutters { position: absolute; bottom: 0; right: 0; }
.main_company .editor-content { flex-grow: 1; width: auto; padding-right: 0; }
.main_company article a{ background: #c4a87b;  border: 1px solid #c4a87b; color: #ffffff; text-decoration: none; margin-top: 20px; padding:8px 10px; width: 200px; text-align: center; display: table; font-size: 20px; letter-spacing: 1px; font-family: 'Roboto', sans-serif !important;
 -webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;  -ms-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.main_company article a:hover{background: transparent; color:#c4a87b; }
.main_company article a span { padding-right: 25px; position: relative; }
.main_company article a span::before{ content:""; position: absolute;  top: 2px;  right: 0;  background-image: url(https://materials.fillo.com.tw/materials/spfoot/images/b33fae90-ad8b-42c7-83c8-fa67373d9433.svg); background-position: center; background-repeat: no-repeat;  
    width:20px; height: 20px; -webkit-filter:brightness(2);}
.main_company article a:hover span::before{ -webkit-filter:brightness(1); }
/* 首頁主要產品區 */
.main_product_block.white{padding-top: 120px; padding-bottom: 120px;} 
.goldLineRight::before { content: ""; position: absolute; width: 400px; height: 1px; background: #c4a87b; top: 0; right: -53px; z-index: 1; 
-webkit-transform: rotate( 30deg ); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate( 30deg );
-webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;}
.goldLineRight::after{ content: ""; position: absolute; width: 150px; height: 1px; background: #c4a87b; bottom: 0; right: -20px; z-index: 1; 
    -webkit-transform: rotate( -30deg ); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate( -30deg );
    -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;}
.main_product .mix-wrapper{ padding: 0 15px;}
.main_product .pic-content,.main_product .editor-content{ margin-top: 0; margin-bottom: 0; padding: 0;overflow: hidden;}
.main_product .editor-content{ color:#ffffff;}
.main_product_block.white .editor-content{ color:#222222;}
.main_product > .module-container > .main > .mix-wrapper > .row{ align-items: center; }
.main_product .editor-content article { padding-left: 60px; padding-right: 60px;}
.main_product .editor-content h1 { font-size: 36px; font-weight: 600; margin-bottom: 20px; padding-left: 60px; }
.main_product .GoldLine{ height: 1px; width: calc(100% - 60px); position: absolute; background-color: #c4a87b;}
.main_product_block.white .GoldLine{background-color: #cd0202; left: 0; }
.main_product .product_content { padding-top: 20px; font-size: 24px; }
.main_product article a{ background:transparent; float: right; border: 1px solid #c4a87b; color:#c4a87b; text-decoration: none; margin-top: 20px; padding:8px 10px; width: 200px; text-align: center; display: table; font-size: 20px; letter-spacing: 1px; font-family: 'Roboto', sans-serif !important;
-webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;  -ms-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.main_product article a:hover{background: #c4a87b; color:#ffffff; }
.main_product article a span { padding-right: 25px; position: relative; }
.main_product article a span::before{ content:""; position: absolute;  top: 2px;  right: 0;  background-image: url(https://materials.fillo.com.tw/materials/spfoot/images/b33fae90-ad8b-42c7-83c8-fa67373d9433.svg); background-position: center; background-repeat: no-repeat;  
    width:20px; height: 20px; -webkit-filter:brightness(1);}
.main_product article a:hover span::before{ -webkit-filter:brightness(2); }
.main_product_block.white article a{border: 1px solid #cd0202; color:#cd0202; }
.main_product_block.white article a:hover{background: #cd0202; color:#ffffff; }
.main_product_block.white article a span::before{ background-image: url(https://materials.fillo.com.tw/materials/spfoot/images/e8ffada8-2636-4182-a67d-c59ba50d2596.svg); background-position: center; background-repeat: no-repeat; }
.main_product_block.white article a:hover span::before{background-image: url(https://materials.fillo.com.tw/materials/spfoot/images/8029f051-c03b-4dbc-b11f-29e1e6cee03a.svg);}
.product_eg { position: absolute; color: #ffffff; font-size: 28px; font-family: 'Roboto', sans-serif !important; font-weight: 400; letter-spacing: 2px; top: 50%; transform: translate(0, -50%); padding-left: 50px; }
.product_eg p:nth-child(2){ font-size: 32px; font-weight: 600;}
.main_product_block.white .product_eg { color: #222222; right: 0; padding-left: 0; padding-right: 40px; }

@media (max-width:1600px) {
    .sf_mainpic .carousel-caption{ top: 60%; transform: translate(0, -60%); } 
    .sf_mainpic .GoldLine{ width: 40%; }   
}
@media (max-width: 1400px){
    .sf_mainpic .carousel-caption { top: 70%; transform: translate(0, -70%);}
}
@media (max-width: 1280px){
    .sf_mainpic .carousel-caption h1{ font-size: 24px; }
    .sf_mainpic .carousel-caption h2{ margin-bottom: 20px; font-size: 16px; }
    .sf_mainpic article{ padding-top: 20px; }
    .sf_mainpic .bs-carousel .carousel-item p { font-size: 15px; margin-bottom: 0.7em; }    
    .main_company { height: 480px; }
    .main_company .pic-content.img-mode { width: 500px; min-width: 500px; max-width: 500px; }
    .main_company article { font-size: 16px; line-height: 2em; }
    .main_company article h1 { margin-bottom: 10px; }
    .main_company article h2 { margin-bottom: 20px; padding-bottom: 20px; }
    .product_eg{ font-size: 22px; padding-left: 40px; }
    .main_product_block.white .product_eg { padding-left: 0px; padding-right: 20px; }
    .product_eg p:nth-child(2) { font-size: 24px; }
    .main_product .editor-content h1 {font-size: 24px;}
    .main_product .product_content { font-size: 16px; }
}
@media (max-width: 991px){
    .sf_mainpic .carousel-caption { top: 90%; transform: translate(0, -90%); }
    .sf_mainpic .carousel-caption h2 { margin-bottom: 15px; font-size: 15px; }
    .sf_mainpic .GoldLine { width: 50%; }
    .sf_mainpic article { padding-top: 10px; }
    .sf_mainpic .bs-carousel .carousel-item p { font-size: 14px; margin-bottom: 0.5em; }
    .main_company { height: 460px; }
    .main_company .pic-content.img-mode { width: 400px; min-width: 400px; max-width: 400px; }
    .main_company article h1 { font-size: 20px;}
    .main_company article h2 { font-size: 28px;}
    .goldLineRight::before,.goldLineRight::after{ display: none;}
    .main_product_block.white { padding-top: 0; padding-bottom: 0; }
    .main_product .editor-content { padding: 30px 0; }
    .main_product .GoldLine{ width:60%;}
    .product_eg { top: 25%; transform: translate(0, -25%); }
    .main_product .order-md-first { -ms-flex-order: 13; order: 13; }
}
@media (max-width: 768px){
    .sf_Preface article{ padding-bottom: 80px;}
    .sf_mainpic .carousel-caption { display: block !important; top: 20%; transform: translate(0, -20%);}
    .sf_mainpic .GoldLine { width: 70%; }
    .main_company { height: auto; }
    .main_company .pic-content.img-mode { width: 100%; min-width: 100%; max-width: 100%; flex-grow: initial; height: auto; }
    .main_company .editor-content { flex-grow: 1; width: 100%; }
    .main_company .no-gutters { position: initial; bottom: initial; right: initial; }
}
@media (max-width: 575px){
    .sf_mainpic .carousel-caption { top: 25%; transform: translate(0, -25%);}
    .sf_mainpic .carousel-caption h1 { font-size: 18px; margin-bottom: 0.2em; }
    .sf_mainpic .carousel-caption h2 { margin-bottom: 5px; margin-left: 5px;font-size: 14px; }
    .sf_mainpic h1,.sf_mainpic article {  margin-left: 10%;}
    .sf_mainpic .carousel-caption h1,.sf_mainpic .carousel-caption h2 { display: inline-block;}
    .sf_mainpic article { padding-top: 5px; }
    .sf_mainpic .bs-carousel .carousel-item p { font-size: 13px; margin-bottom: 0.2em; }
    .sf_Preface article { font-size: 16px; letter-spacing: 0; padding-left: 20px; padding-right: 20px; }
    .main_product .editor-content h1,.main_product .editor-content article{ padding-left: 20px; padding-right: 20px;}
    .product_eg { font-size: 16px; top: 15%; transform: translate(0, -15%); padding-left: 20px;}
    .product_eg p:nth-child(2) { font-size: 20px; } 
}

/*-------- 公司介紹區 --------*/
.sf_title.com_pic_title { margin: 50px 0 0; }
.sf_title.com_pic_title .header-title{ position: absolute; left: 50%; transform: translate(-50%, 0);}
.sp_theme_top article{  position:relative;color: #c4a87b; max-width: 1460px; margin: 0 auto; padding: 0 30px;}
.sp_theme_top article::before { content: ""; position: absolute; width: 100%; height: 1px; background: #c4a87b; bottom: 5px; left: -100%; overflow: hidden; }
.sp_theme_top article h1{ font-size: 32px; font-weight: 600; letter-spacing: 2px;}
.sp_theme_top article h2{ font-size: 20px;  font-family: 'Roboto', sans-serif !important;}
.com_top_block{ position: absolute; }
.com-content-block { margin-top: 380px; margin-bottom: 80px; padding: 0 70px 80px; background:#ffffff;box-shadow: 0 0 8px rgb(0 0 0 / 30%); }
.com-content-block::before{ content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background: #f8f5ef; -webkit-clip-path: polygon(0 31%, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 31%, 100% 0, 100% 100%, 0% 100%); }
.com-content-block .com_content  article{ font-size: 18px; line-height: 2em;}
.com-content-block .com_content.top{ margin-bottom: 20px; padding-top: 100px; padding-bottom: 40px;}
.com-content-block .com_content.top::before{ content: "";  background: #c4a87b; width: 22px; height: 22px; position: absolute; border-radius: 22px; top: -10px; z-index: 1; left: 50%; transform: translate(-50%, 0); }
.com-content-block .com_content.top::after{ content: ""; background: #c4a87b; width: 1px; height: 70px; position: absolute;     top: 0; left: 50%; transform: translate(-50%, 0); }
.com-content-block .com_content.top article { max-width:800px; margin: 0 auto; text-align: center; color:#222222; }
.com-content-block .com_content.top article h3 { font-size: 26px; font-weight: 600; margin-bottom: 30px; }
.com_content.left article, .com_content.right article { height: 300px;display: -ms-flexbox; display: flex; align-items: center; background: transparent;    border: 1px solid #c4a87b;  padding: 10px 20px;}
.com_pic .swiper-container { padding-top: 80px; }
.com_pic .swiper-slide-style{ border-radius: 0; box-shadow: none; cursor: default;}
.com_pic .swiper-slide .swiper-img{ margin-bottom: 0;}
.com_pic .swiper-slide .swiper-img img { border-top-left-radius: 0; border-top-right-radius:0; }
.com_pic .swiper-pagination{ text-align: left;}
.com_pic .swiper-pagination-bullet { width: 8px; height: 8px; background: #1d1d1d; vertical-align: middle;}
.com_pic .swiper-pagination-bullet-active { background: #cd0202; width: 10px; height: 10px; }
.com_pic .swiper-button-prev,.com_pic .swiper-button-next { top: 50px; width: 40px; height: 40px; opacity: 1; outline: none;}
.com_pic .swiper-button-prev{left: inherit; right:70px; }
.com_pic .swiper-button-prev:after,.com_pic .swiper-button-next:after{ background: #c4a87b; padding: 0; width: 40px; height: 40px; border-radius: 20px; font-size: 20px; text-align: center; line-height: 40px;}

@media(min-width:768px){
    .com_content.left, .com_content.right { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 991px){
    .sp_theme_top .bgfixed.fixed{ min-height: 320px !important; }
    .com-content-block { margin-top: 260px; margin-bottom: 0; padding-bottom: 50px;   box-shadow: none; }
}
@media (max-width: 767px){
    .com_content.left article, .com_content.right article { height: auto; }
    .sp_theme_top article h1{ font-size: 28px; }
    .sp_theme_top article h2{ font-size: 18px; }
}
@media (max-width: 575px){  
    .sf_title.com_pic_title .header-title { left: 0px; transform: translate(0, 0); }
    .com-content-block{padding: 0 50px 100px;}
    .com-content-block  .com_content.left .mix-wrapper,.com-content-block  .com_content.right .mix-wrapper{ padding: 15px;}
    .sp_theme_top .bgfixed > div { vertical-align: initial !important; padding-top: 100px; min-height: 280px!important; }
}

/*-------- 產品介紹區 --------*/
.product-content-block{ margin-bottom: 80px; }
.sp_theme_top.product .bgfixed{ background-position: bottom center;}
.product_title{ overflow: hidden;}
.product_title article { padding-right: 10px; }
.product_title h3{  color: #222222; font-weight: 600; font-size: 32px; margin-bottom: 25px;}
.product_title h4{ color:#cd0202; font-family: 'Roboto', sans-serif !important; margin-top: 25px;}
.product_title .redLine{ height: 1px; width: 100%; background-color: #cd0202;}
.product_content>.module-container { height: 100%; display: flex; align-items: center; }
.product_content article{ font-size: 18px; line-height: 2em; padding-left: 20px; }
.product_pic .swiper-slide-style{ border-radius: 0; box-shadow: none; border: 1px solid #cccccc; cursor: default; margin-bottom: 10px;}
.product_pic .swiper-slide .swiper-img{ margin-bottom: 0;}
.product_pic .swiper-slide .swiper-img img { border-top-left-radius: 0; border-top-right-radius:0; }
.product_pic .swiper-pagination{ text-align: left;}
.product_pic .swiper-pagination-bullet { width: 8px; height: 8px; background: #1d1d1d; vertical-align: middle;}
.product_pic .swiper-pagination-bullet-active { background: #cd0202; width: 10px; height: 10px; }
.product_pic .swiper-button-prev,.product_pic .swiper-button-next { top: 10px; width: 40px; height: 40px; opacity: 1; outline: none;}
.product_pic .swiper-button-prev{left: inherit; right:50px; }
.product_pic .swiper-button-prev:after,.product_pic .swiper-button-next:after{ background: transparent; padding: 0; width: 25px; height: 25px; border-radius: 20px; font-size: 0;text-align: center; line-height: 25px; 
background-image: url(https://materials.fillo.com.tw/materials/spfoot/images/b33fae90-ad8b-42c7-83c8-fa67373d9433.svg); background-size: 25px; background-repeat: no-repeat; }
.product_pic .swiper-button-prev:after { transform: rotate( 180deg ); }
.product_pic .swiper-button-prev.swiper-button-disabled, .product_pic .swiper-button-next.swiper-button-disabled {opacity: 0.4; cursor: default; pointer-events: initial; }

@media(max-width:991px){
    .product_title .main, .product_content .main, .product_pic .main { padding-left: 20px; padding-right: 20px; }
    .product_content { margin: 20px 0; }
    .product_content article{ padding-left:0px; }
}
@media(max-width:767px){
    .product_title h3 {  font-size: 28px; margin-bottom: 15px;}
    .product_title h4 { margin-top: 15px; font-size: 20px; }
}
@media(max-width:575px){
    .sp_theme_top.product{max-height:280px;}
    .sp_theme_top.product .bgfixed.fixed{ min-height: 280px !important; max-height:280px;}
    .sp_theme_top.product .bgfixed.fixed>div{ min-height: 280px !important;  max-height:280px;}
    .product-content-block { background: #ffffff; margin-top: 0; padding-top: 50px;}
}

/*-------- footer --------*/
.sf_footer .footer-sample{ flex-direction: column; align-items: center; padding-top: 38px; padding-bottom: 38px;}
.sf_footer .footer-sample,.sf_footer .powered{ background-color: transparent;}
.sf_footer .footer-sample>div { -ms-flex:0 0 100%; flex: 0 0 100%; max-width: 100%; text-align: center; }
.sf_footer .footer-sample .logo-part,.sf_footer .footer-sample .service-item-part { margin-top: 0; }
.sf_footer .footer-sample .contact-us-part { margin-top: 20px; margin-bottom: 30px; }
.sf_footer .footer-sample .contact-us-part .contact-title { font-size: 20px; margin-bottom: 40px; }
.sf_footer .footer-sample .contact-us-part .contact-use-row { font-size: 18px; padding-right: 0; letter-spacing: 1.5px;}
.sf_footer .powered { padding-bottom: 18px; font-size: 15px; }
.sf_footer .footer-sample .service-item-part{ display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center;}
.sf_footer .footer-sample .service-item-part .service-items{ -ms-flex:0 0 50%;flex: 0 0 50%; max-width:50%; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: row;
    -webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;  -ms-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.sf_footer .footer-sample .service-item-part>div.service-items:first-child{ justify-content: flex-end; }
.sf_footer .footer-sample .service-item-part>div.service-items:nth-child(2){ justify-content: flex-start; }
.sf_footer .footer-sample .service-item-part>div.service-items:first-child,
.sf_footer .footer-sample .service-item-part>div.service-items:nth-child(2){border: 1px solid #c4a87b; -ms-flex: 0 0 500px; flex: 0 0 500px; max-width: 500px;     margin: 0 10px;}
.sf_footer .footer-sample .service-item-part .service-items a{ 
    font-family: 'Roboto', sans-serif; color:#c4a87b !important; font-size: 28px; letter-spacing: 2px; font-weight: 700;
    height: 88px; -ms-flex:0 0 100%; flex: 0 0 100%; max-width: 100%;display: -ms-flexbox; display: flex; align-items: center; justify-content: center; position: relative; padding: 15px 15px 15px 65px;
}
.sf_footer .footer-sample .service-item-part>div.service-items:first-child:hover,
.sf_footer .footer-sample .service-item-part>div.service-items:nth-child(2):hover{ border:1px solid rgb(39 39 39 / 80%); background: rgb(39 39 39 / 80%); }
.sf_footer .footer-sample .service-item-part>div.service-items:first-child a{align-items: flex-end;}
.sf_footer .footer-sample .service-item-part>div.service-items:nth-child(2) a{ font-size: 26px;font-weight: 700; padding: 15px; }
.sf_footer .footer-sample .service-item-part>div.service-items:first-child a::before{ 
    content: ""; position:absolute; width:32px; height:32px; 
    background:url("https://materials.fillo.com.tw/materials/spfoot/images/06b75563-185e-4adc-b321-cb76d139c5a0.svg");
    background-position: center; background-repeat: no-repeat; left: 110px; top: 50%; transform: translate(0, -50%);
}
.sf_footer .footer-sample .service-item-part>div.service-items:nth-child(2) a::before{ content: "";  width:55px; height:32px; background:url("https://materials.fillo.com.tw/materials/spfoot/images/7b11cd85-d0c5-43f4-87ae-148c6267d5b6.svg"); background-position: center; background-repeat: no-repeat; }
.sf_footer .footer-sample .service-item-part>div.service-items:first-child a::after { content: "服務專線"; position: absolute; font-size: 18px; left: 155px; top: 10px; font-weight: 400; }
.sf_footer .footer-sample .service-item-part .social-btn { margin-top: 30px;display: -ms-flexbox; display: flex; width:100%;  justify-content: center;}
.sf_footer .footer-sample .service-item-part .social-btn a{ margin-left: 5px; width: 45px; height: 45px; background: #555555; border-radius: 25px;display: -ms-flexbox; display: flex; justify-content: center; align-items: center; font-size: 23px; opacity: 0.6;
    -webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;  -ms-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.sf_footer .footer-sample .service-item-part .social-btn a:hover{ opacity: 1; color:#ffffff}
.sf_gotop .actGotop{bottom: 60px;}
.sf_gotop .actGotop a,.sf_gotop .actGotop a:link{ width: 27px; height: 71px;  background: transparent;
    background-image: url(https://materials.fillo.com.tw/materials/spfoot/images/f37e0c2d-46ce-42df-8f1d-c8866ff95bc1.svg); background-position: center; background-repeat: no-repeat; background-size: 45px;
    transform: translate(0,0px); -webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;  -ms-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
.sf_gotop .actGotop a,.sf_gotop .actGotop a:hover{transform: translate(0,5px);}

@media (max-width:1199px ){
    .sf_footer .footer-sample .service-item-part>div.service-items:first-child, .sf_footer .footer-sample .service-item-part>div.service-items:nth-child(2) { -ms-flex: 0 0 400px; flex: 0 0 400px; max-width: 400px; }
    .sf_footer .footer-sample .service-item-part .service-items a { padding: 15px 15px 15px 55px;} 
    .sf_footer .footer-sample .service-item-part>div.service-items:first-child a::before{left: 60px;}
    .sf_footer .footer-sample .service-item-part > div.service-items:first-child a::after { left: 100px; }
}
@media (max-width:991px ){
    .sf_footer .footer-sample .service-item-part>div.service-items:first-child, .sf_footer .footer-sample .service-item-part>div.service-items:nth-child(2) { -ms-flex: 0 0 300px; flex: 0 0 300px; max-width: 300px; }
    .sf_footer .footer-sample .service-item-part .service-items a{ height: 70px; font-size: 20px; padding:10px 15px 10px 50px;}
    .sf_footer .footer-sample .service-item-part>div.service-items:nth-child(2) a{font-size:20px; padding:10px 15px;}
    .sf_footer .footer-sample .service-item-part>div.service-items:first-child a::before { left: 40px; background-size: 26px; }
    .sf_footer .footer-sample .service-item-part>div.service-items:first-child a::after { left: 75px; font-size: 15px; line-height: 20px;}
    .sf_footer .footer-sample .service-item-part>div.service-items:nth-child(2) a::before { width: 40px; background-size: 26px; }
}
@media (max-width:767px ){
    .sf_footer .footer-sample .service-item-part>div.service-items:first-child, .sf_footer .footer-sample .service-item-part>div.service-items:nth-child(2) { -ms-flex: 0 0 250px; flex: 0 0 250px; max-width: 250px; }
    .sf_footer .footer-sample .service-item-part>div.service-items:first-child a::before { left: 15px; }
    .sf_footer .footer-sample .service-item-part>div.service-items:first-child a::after { left: 55px; }
}
@media (max-width:575px ){
    .sf_footer .footer-sample .service-item-part { flex-direction: column; align-items: center; }
    .sf_footer .footer-sample .service-item-part>div.service-items:first-child, .sf_footer .footer-sample .service-item-part>div.service-items:nth-child(2) { -ms-flex: auto; flex: auto; width: 250px; margin: 10px 0;}
    .sf_footer .powered { padding-bottom: 18px; font-size: 15px; padding: 0 40px 18px; }
    .sf_gotop .actGotop { bottom: 40px; right: 10px; width: 30px; }
    .sf_footer .footer-sample .service-item-part .service-items a {letter-spacing: 1px;}
    .service-item-part>div.service-items:first-child a::after { left: 60px; }
}