@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Lato:100,400,900); /* font */
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c|Orienta');

/* CSS Document */
body, html { height:100%; }
body {
  font-family: 'Orienta', '微軟正黑體', sans-serif; /*自行增減使用 */
  font-size: 16px;
  line-height:1.5;
  color: #555;
  padding-top: 180px;
}
a {color: #555;text-decoration: none;
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition:  all .3s linear; /*連結淡入淡出*/
}
a:hover { color:#777; text-decoration: none;}

/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/

/*元件(共用)*/
.input1, .textarea, .select { background: #FFF; border: 1px solid #CCC; font-family: 'Lato', '微軟正黑體', sans-serif; font-size:15px; line-height:1.1; color:#555; }
.input1:focus, .textarea:focus, .select:focus { border:1px solid #000; }

/*線(共用)*/
hr { height:1px; background:#CCC; }

/*文字樣式(共用)*/
.white { color: #FFF; }
.gray { color:#999; }
.black { color:#000; }
.blue { color: #0097de; }
.red { color: #be0000; }
.green { color: #19a568; }
.orange { color: #FF6600; }
.yellow { color: #FFFF00; }
.purple { color:#6633CC; }
.brown { color:#6e453c; }

/* 回頂端 */
.goTop {
  position: fixed;
  z-index: 2;
  right: 30px;
  bottom: 30px;
}

.goTop .bttn {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  position: relative;
  color: #fff;
}
.goTop .bttn:after {
  transition: 0.3s all ease;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  border: 2px solid #ea6e1d;
}
.goTop .bttn:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #ea6e1d;
  z-index: -1;
  box-shadow: 0 0 5px rgba(91, 87, 86, 0.3);
}
.goTop .bttn:hover:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.goTop .bttn:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  color: #333;
}
.goTop .bttn:active:before {
  background-color: #fff;
}
.goTop .bttn:active:after {
  border-color: #ea6e1d;
}

/*卷軸設定*/
body::-webkit-scrollbar-track,.scroll-style::-webkit-scrollbar-track, .open>.dropdown-menu>.dropdown-inner>.list-all::-webkit-scrollbar-track
{
    background-color: transparent;
    border-radius: 10px;
}

body::-webkit-scrollbar,
.scroll-style::-webkit-scrollbar{
    width: 5px;
    background-color: #333;
}
.open>.dropdown-menu>.dropdown-inner>.list-all::-webkit-scrollbar{width:30px;background-color: #333;}
body::-webkit-scrollbar-thumb,
.scroll-style::-webkit-scrollbar-thumb, .open>.dropdown-menu>.dropdown-inner>.list-all::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background: #ea6e1d
}
.scroll-style::-webkit-scrollbar, .open>.dropdown-menu>.dropdown-inner>.list-all::-webkit-scrollbar{width: 1px;}
/*-------------------------------*/
/*縮放*/
.action1{-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);-webkit-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);}
.action1:hover{-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}

.action2{-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);-webkit-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);}
.action2:hover{-webkit-transform: scale(0.95);-ms-transform: scale(0.95);transform: scale(0.95);}

.action3{-webkit-transform: scale(.95);-ms-transform: scale(.95);transform: scale(.95);-webkit-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);}
.action3:hover{-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}

.action4{-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);-webkit-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);}
.action4:hover{-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}

/*-------------------------------*/
/*漸變用*/
.gradient-03s{-webkit-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);}
.gradient-1s{-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);}

/*---------------------- 頁面開始 ----------------------*/
/*全頁佈局*/
.wrapper { padding:3em 0; }
.container {  }
.mt50{margin-top: 50px;}
.area_pro{position:relative}
.area_pro .area_abso{position:absolute;left:0;top:-100px;}

/*錨點*/
.area_pro{position:relative}
.area_pro .area_abso{position:absolute;left:0;top:-100px;}

/*主選單*/
.header {  }
.header ul {list-style:none;padding:0;margin:0;font-size: 1.5rem;}
.pdt_mobile{display: none;}
.dropdown-menu.outer{border-radius: 0}
.dropdown.outer{position: relative;}
.navbar-custom {
    margin-bottom: 0;
    text-transform: uppercase;
    background: #fff;
    padding: 10px 0px;
}
.navbar-header{float:  inherit;text-align:  center;}
.navbar-header .img_h{display:none}
.navbar-header .img_v{display:block}
.navbar-collapse{text-align:center}
.navbar-nav{float:inherit}
.navbar-nav>li{position:  static;float:inherit;display:inline-block;min-width: 110px;vertical-align:  middle;}
.navbar-nav>li.search-box{}
.search-box .gsc-control-cse{background: transparent;border: none}
.search-box input.gsc-input, 
.search-box .gsc-input-box, 
.search-box .gsc-input-box-hover, 
.search-box .gsc-input-box-focus {border: none;position:  relative;}
.search-box .gsc-input-box:after{content:'';background: url(../images/all/line.png) no-repeat bottom left;width:100%;height:5px;position:  absolute;left:  0;bottom:  0;}
.search-box .gsc-search-button-v2, 
.search-box .gsc-search-button-v2:hover, 
.search-box .gsc-search-button-v2:focus{border-color: #ea6e1d;background-color: #ea6e1d;}
.navbar-custom .navbar-brand {
    display: inline-block;
    height:  auto;
    font-weight: 700;
    float: inherit;
    padding: 20px 0 10px;
}
.navbar-custom .navbar-brand img{max-height: 100%;height: auto;width: 60%;margin:  0 auto;}
.navbar-custom .navbar-brand:focus {outline: 0;}
.navbar-custom .navbar-brand .navbar-toggle {
    padding: 4px 6px;
    font-size: 16px;
    color: #fff;
}
.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
    outline: 0;
}
.navbar-custom .nav li > a {padding: 10px;text-transform:capitalize;font-size: 17px;}
.navbar-custom .nav li > a .fas{font-size: 21px;}
.dropdown-menu>.dropdown-inner>.list-all> li > a:hover {
    outline: 0;
    color: #ea6e1d;
    background-color: rgba(255, 255, 255, 0.8);
}
.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
    outline: 0;
    background-color: transparent;
}
.navbar-custom .nav li.active {
    outline: 0;
}
.navbar-custom .nav li.active > a {
    background-color: rgba(255,255,255,.3);
}
.navbar-custom .nav li.active > a:hover {
    color: #fff;
}
.open>.dropdown-menu{right:0;background: rgba(187, 163, 156, 0.8);min-height: 150px}
.open>.dropdown-menu.outer{left: 0;right: 0;position: fixed;top: 50px;}
.open>.dropdown-menu>.dropdown-inner>.list-all{max-height: 400px;overflow-y: auto;margin-top: 30px;}
.open>.dropdown-menu>.dropdown-inner>.list-all.pdt{margin-top: 0px;}
.open>.dropdown-menu>.dropdown-inner>.list-all>li>.pdf-list-all>li{padding:10px 0px;}
.open>.dropdown-menu>.dropdown-inner>.list-all>li>.pdf-list-all>li>a{color: rgba(255, 255, 255, 0.8);border-left: 1px solid rgba(255, 255, 255, 0.8);}
.open>.dropdown-menu>.dropdown-inner>.list-all>li>.pdf-list-all>li>a:hover{
    background:  #fff;
    color: #ea6e1d;
}
.navbar-custom.top-nav-collapse .navbar-nav>.dropdown.open>.dropdown-menu>.dropdown-inner>.list-all>li>.pdf-list-all{padding-top: 20px;}
.dropdown-menu{text-align:center}
.dropdown-menu>.dropdown-inner>.list-all>li{display:inline-block;vertical-align: top;}
.dropdown.outer>.dropdown-menu>.dropdown-inner.container{width: 100%;padding: 20px 0px;}
.dropdown.outer>.dropdown-menu>.dropdown-inner>.list-all>li{display: inherit;text-align:left;}
.dropdown-menu>.dropdown-inner>.list-all>li>a{color: #fff;display: block;}
.dropdown-menu>.dropdown-inner>.list-all>li>a>i{margin-left: 10px;font-size: 21px;}
.dropdown-menu>.dropdown-inner>.list-all>li>a .pic{height:100px;overflow:hidden;margin-bottom:5px}
.dropdown-menu>.dropdown-inner>.list-all>li>a img{max-width:100px;display:block;margin:0 auto}
.navbar-custom.top-nav-collapse .navbar-header .img_h{display:block;height: 27px;width:  inherit;}
.navbar-custom.top-nav-collapse .navbar-header .img_v{display:none}

.navbar-nav>li.lan-change{max-width:300px;margin-left: 50px;}
.navbar-nav>li.lan-change>a {display: inline-block;}
.navbar-nav>li.lan-change>a i{margin-right: 5px;border-left:  1px solid;padding-left: 15px;}
.navbar-nav>li.lan-change>a.active{background: #ea6e1d;padding: 10px;color: #fff;}

@media(min-width:1200px) {
  .navbar-nav>li.search-box{max-width: 300px;position:  absolute;right:  0;top: 0;}

}
@media(min-width:768px) {
  .navbar-custom {
    /* position:  static; */
    padding: 0;
    letter-spacing: 1px;
    -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
    transition: background .5s ease-in-out,padding .5s ease-in-out;
  }
  .navbar-custom.top-nav-collapse {/* position:fixed; */padding: 0;box-shadow: 0 0 10px rgba(0, 0, 0, .5);}
  .navbar-custom.top-nav-collapse .navbar-header{float:left}
  .navbar-custom.top-nav-collapse .navbar-brand{padding:15px 0}
  .navbar-custom.top-nav-collapse .navbar-nav{float:left}
  .navbar-custom.top-nav-collapse .nav li > a {padding: 19px 15px 10px}
  .navbar-nav>li.lan-change>a.active{padding: 5px;}


}

.nav .open > a, 
.nav .open > a:hover,
.nav .open > a:focus { background:none; }

/*次選單*/
.submenu { }
.submenu li { }

/*頁尾*/
.clear{clear: both;}
.isobox {float: left;width: 60%;}
.socialbox {float: left;width: 40%;padding-left: 20px;}
.socialbox p{text-align:center;margin-bottom: 0;}
.socialicon{display: -webkit-flex;display: flex;display: -ms-flexbox;-webkit-justify-content: space-around;justify-content: space-around;}
.socialicon a{width: 40px;}
.socialicon a:hover{opacity:.7}
.footer-img img{margin-left: -10px;    width: 100%;}
.footer {padding: 80px 0px;background:  #5b5756;color: #fff;clear:both;overflow:hidden;font-size: 1.4rem;}
.footer a{color:#fff;}
.footer .block{margin: 30px 0px;}
.footer .block a{display: block;}
.footer .block .company_name{font-size: 2rem;font-weight: 700;}
.footer .block .summary{position:relative;padding-left:30px}
.footer .block .summary span{position:absolute;left:0}
.footer .block.ft_menu{width: 100%;}
.footer .block.introduction{width: calc(100% - 310px);vertical-align:  top;padding-left: 150px;margin-top: 0;}
.footer .block.introduction ul{list-style:none;ff; */padding:;padding: 0;margin-top: 30px;}
.footer .block.introduction ul li{display:inline-block;padding:10px;width: calc(100% / 4.5);}
.footer .block.introduction ul.sub_menu{padding: 0;border-left: 0.5px solid rgba(255, 255, 255, 0.8);margin-left:  -10px;padding-left: 10px;}
.footer .block.introduction ul.sub_menu:after{content:'';display:block;clear:both;}
.footer .block.ft_menu a{padding-right: 20px;display: inline-block;}
.footer-img{width: 300px;}
.footer-img .imgg{margin:0px;}
.footer .block.introduction, .footer-img{display: inline-block;}
.footer .block.ft_menu a>p{border-right:1px solid #fff;width: 100px;}
.footer .block.ft_menu ul{list-style: none;margin: 0;padding: 0;}
.footer .block.ft_menu > ul > li{float: left;}
.footer .block.ft_menu .long{/* width: calc(100% - 250px); */}
.footer .block .unit_name{display:  block;font-weight: 700;}
.footer .block .sub_menu{font-size: 1rem;}
.footer .block.introduction ul li>.sub_menu li{float:left;width: 100%;padding: 10px 0px;}
.footer .block.introduction ul li>.sub_menu li>a>i{margin-left: 10px;}
.footer .copyright{font-size: 1.2rem;opacity:.5;text-align: left;margin-top: 20px;}
.control-center{
    list-style: none;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: 999;
    left: 0;
    bottom: 50%;
    -ms-transform: translate(0,50%);
    -webkit-transform: translate(0,50%);
    transform: translate(0,50%);
}
.control-center li{transition: all .3s;width: 50px;line-height:50px;text-align:center;margin:3px 0px;}
.control-center li:hover{width: 160px;border-radius: 0px 25px 25px 0px;}
.control-center li p{margin:0;}
.control-center li:nth-child(1){background: #ea6e1d;}
.control-center li:nth-child(2){background: #f72929}
.control-center li:nth-child(3){background: #ea6e1d; }
.control-center li:nth-child(4){background: #f72929}
.control-center li:nth-child(5){background: #ea6e1d;}
.control-center li a{color:#fff}
.control-center li a img{
    width: 50px;
    margin: 0 auto;
    padding: 5px;
}
.control-center li a p{text-align: left;transition: all .5s;width: calc(100% - 55px);margin-left: -30px;opacity: 0;white-space: nowrap;}
.control-center li:hover a p{margin-left: 2px;opacity:  1;white-space: nowrap;}
.control-center li a img, .control-center li a p{float: left;}
.control-center li a:after{content:'';display:block;clear:both;}
.imgg.block03{width: 30px;height: 30px;display: inline-table; margin: 0;}


/*按鈕*/
.btnWrap { margin:2em 0; text-align:center; }
.button.pdt{padding:0;}
.button.pdt>img.imgg{margin:0;}
.button {
  vertical-align: top;
  display: inline-block;
  position: relative;
  margin: 0 auto;
  padding: 10px 30px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  background: #ea6e1d;
  color: #ffffff;
  text-transform:capitalize;
  text-align:  center;
  letter-spacing: .25em;
  outline: none;
  cursor: pointer;
  font-weight: bold;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px currentcolor;
  transition: background .8s ease;
}
.button:hover {background: #5b5756;color: #fff}

/*RWD編輯器表格(X捲軸)*/
.table-container table td {
  min-width: 100px;
  padding: 5px;
  border: 1px solid #ccc;
}
@media screen and (max-width: 768px) {
  .table-container { 
    width: 100%;
    overflow-y: auto;
    _overflow: auto;
    margin: 0 0 1em;
     }
}

/*----banner---*/
.banner {height: 400px;}
.carousel {width: calc(100% - 60px);height: calc(100% - 60px);margin: 30px auto}
.carousel:hover .carousel-control {
  display:block;
}
.carousel .item,
.carousel .item.active,
.carousel .carousel-inner {
    height: 100%;
}
.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}
.carousel .item.active .fill {
    -webkit-animation: slideIn 7s cubic-bezier(.39,.575,.565,1) alternate infinite 0s;
  -moz-animation: slideIn 7s cubic-bezier(.39,.575,.565,1) alternate infinite 0s;
  -ms-animation: slideIn 7s cubic-bezier(.39,.575,.565,1) alternate infinite 0s;
  animation: slideIn 7s cubic-bezier(.39,.575,.565,1) alternate infinite 0s;
}
.carousel .carousel-control {
  background:none;
  display:none;
}
.carousel-control .icon-prev::before,
.carousel-control .icon-next::before {
  content:'';
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
  width:30px;
  height:60px;
  margin:-30px 0 0 0;
}
.carousel-control .icon-prev {
  background:url(../images/all/control-icon.png) 0 0 no-repeat;
}
.carousel-control .icon-next {
  background:url(../images/all/control-icon.png) -30px 0 no-repeat;
}
.carousel-caption{right: 5%;left: 5%;bottom: 0;/* bottom: calc(50% - 69px); *//* background: rgba(231, 82, 29, 0.8); *//* max-width: 400px; */margin: 0;/* padding: 10% 0; */padding: 0;-ms-transform: translate(0,50%);-webkit-transform: translate(0,50%);transform: translate(0,5%);color: #ffffff;text-shadow:  inherit;text-align:  right;}
.carousel-caption h2{margin: 0;font-size: 3.5vw;font-family: "Caveat","微軟正黑體";    text-shadow: 1px 1px 5px #000;}
.carousel-indicators{
    left: 55px;
    bottom: 0;
}
@keyframes slideIn{
0% {
    -webkit-transform: scale(1);
    transform: scale(1);}
20% {opacity: 1;}
100% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);}
}
/*淡入 淡出*/
.carousel-fade .carousel-inner .item {  transition-property: opacity; }
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {  opacity: 0; }
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {  opacity: 1; }
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {  left: 0;  transform: translate3d(0, 0, 0); }
/*麵包屑*/
.breadCrumbs-block{padding: 15px 15px 10px;background: rgba(255, 255, 255, 0.95);}
.breadCrumbs-block .breadCrumbs{float: right;list-style:  none;margin:  0;padding:  0;}
.breadCrumbs-block .breadCrumbs .item{/* position:  relative; */display: inline-block;padding: 0 7px 0 0;font-size: 1.4rem;}
.breadCrumbs-block .breadCrumbs .item:after{content: '/';display: inline-block;color:#999}
.breadCrumbs-block .breadCrumbs .item a{display: inline-block;padding: 0 7px 0 0;color: rgba(0, 0, 0, 0.5);}
.breadCrumbs-block .breadCrumbs .item.active:after{display:none}
.breadCrumbs-block .breadCrumbs .item.active a{padding-right:0;color: #4a4948;}

/*首頁*/
.index_product{position: relative;z-index: 1;padding: 50px 0 30px;}
.index_product:before{content:'';position: absolute;left:0;right:0;top:0;height:50%;background: #d6c7c4;background: #5b5756;}

.owl-product{margin: 30px auto 30px;}
.owl-product .item{padding: 15px 30px 40px;position:  relative;}
.owl-product .item .pro_name{
    left: 0;
    bottom: 0;
    margin:  0;
    padding: 0px;
}

.owl-sort{margin-top: 50px;}
.index-sort{padding: 50px 0 0;clear:  both;background: #e4dcda;}
.index-sort .item{position: relative;z-index: 1;/* overflow: hidden; */width: 180px;height: 350px;margin:  auto;}
.index-sort .item img{
    width:  auto;
    max-width: 100%;
    position: absolute;
    top: 30%;
    left: 50%;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

.index-sort .item .sort-tit-out{
    position:  absolute;
    bottom: 0;
    right: -15px;
    -ms-transform: rotate(90deg) translate(0,100%);
    -webkit-transform: rotate(90deg) translate(0,100%);
    transform: rotate(90deg) translate(0,100%);
    transform-origin: right center;
    text-transform: capitalize;
}
.index-sort .item .sort-tit{
    width: 140px;
    margin: 0;
    color: #666;
}
.index-sort .item:before{
    content:'';
    position: absolute;
    z-index: -1;
    top: 25px;
    left: 50%;
    width: 160px;
    height: 160px;
    background: #fff7f2;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.index-sort .item:hover{}
.index-sort .item:hover img{top: 60px;/*max-height: 100%;*/}
.index-sort .item:hover:before{width:100px;height:100px;border-radius:100%}

.index-news{}
.news-grid{margin: 0 -30px;text-align: center;}
.news-grid .item{display: inline-block;vertical-align: top;width: 33%;padding:30px;text-align: left;}
.news-grid .item a{display:  block;clear:  both;overflow:  hidden;border: solid 1px #ccc}
.news-grid .item .pic{position: relative;overflow:  hidden;}
.news-grid .item .pic img{
    width:100%;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -ms-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.news-grid .item:hover .pic img{-webkit-transform: scale(1.1) translateX(-3%);-ms-transform: scale(1.1) translateX(-3%);transform: scale(1.1) translateX(-3%);}
.news-grid .item .summary{padding: 30px}
.news-grid .item .summary p{margin-bottom:30px}
.news-grid .item .pic:before{
    -moz-transform: skewY(1.5deg);
    -ms-transform: skewY(1.5deg);
    -o-transform: skewY(1.5deg);
    -webkit-transform: skewY(1.5deg);
    transform: skewY(1.5deg);
    bottom: -15px;
    content: '';
    display: block;
    height: 18px;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 10;
    background: #fff;
}


.index-introduction{height: 500px;margin: 0;background: linear-gradient(to bottom, rgba(255, 255, 255, .6) 0%,rgba(255, 255, 255, 0.6) 100%),url(../images/index/about_bg.png)no-repeat center/cover;}
.index-introduction > div{position: relative;float: left;width: 100%;height: 100%;background: rgba(91, 87, 86, 0.2);/* background: rgba(231, 82, 29, 0.15); */}
.index-introduction > div:last-child{background: rgba(91, 87, 86, .1);/* background:  rgba(231, 82, 29, 0.15); */}
.index-introduction .summary{position: absolute;left: 50%;top: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.video-Introduction-area{position: relative;width: 100%;overflow: hidden;padding: 80px 0;background: #c7c2c1;}
.video-Introduction-area:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 30%;
    background: #fff;
    -ms-transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
.video-Introduction {position: relative;z-index: 1;height: 641px;width: 100%;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);}


/*關於我們*/

.about-zone{background: url(../images/about/about-bg.jpg) no-repeat;background-size:100%; background-position: bottom; }
.about-info-all{padding-bottom:360px;}
.about-bg-color{background: rgba(255, 255, 255, 0.7);padding:20px;}
.about-img{width: 80%;margin:0 auto;}
.about-word{max-width: 900px;margin: 0 auto;padding: 50px;}
.imgg.about-type{margin:0;}
.wrapper.about-type{padding:0;}
.font-bold{font-weight: bold;}
/*最新消息*/
.date-img-txt .wrap { padding-bottom:3em; }
.date-img-txt .wrap:nth-child(2n+1) { clear:both; }
.date-img-txt .title {margin:15px 0; line-height: 25px; width: 99%;  overflow: hidden; display: block;  white-space: nowrap;
              text-overflow: ellipsis;   -o-text-overflow: ellipsis;  overflow: hidden;font-weight: bold;height: 20px;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.date-img-txt .img img { max-width:100%;  max-height: 100%; }
.date-img-txt .date { background:rgba(231, 82, 29, .8); position:absolute; left:auto; top:0; padding:.8em 1.2em; color:#fff; font-size:13px; }
.date-img-txt .date.news {position: inherit;background:rgba(231, 82, 29, .8);padding:.8em 1.2em;color:#fff;font-size:13px;width: 91.95px;display:  inline-block;}
.date-img-txt .date .fa { display:none; }
.date-img-txt .date .yy {display:block;color:#f1a2a7;font-size: 14px;}
.date-img-txt .date .mm{font-size: 14px;}
.date-img-txt .date .dd {font-size: 24px;font-weight:bold;margin-left:5px;}
.date-img-txt .info {color: #555;overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;height: 45px;}
.date-img-txt a:hover { color:#ea6e1d; }
.date-img-txt .overlay-container { display: block; overflow: hidden; position: relative; }
.date-img-txt .overlay-container .picbox { height: 365px; text-align: center; }
.date-img-txt .overlay-container .picbox:before { content: ""; height: 100%; display: inline-block;  vertical-align: middle;}
.date-img-txt .overlay-container .picbox img{ display: inline-block; vertical-align: middle; }
.date-img-txt .overlay {    background-color: rgba(0, 0, 0, 0.5);    bottom: -1px;    cursor: pointer;    left: 0;    opacity: 0;    overflow: hidden;    position: absolute;    right: -1px;    top: 0;    transform: scale(0.8);    transition: all 0.2s linear 0s; }
.date-img-txt .overlay .fa { color: #ffffff;    font-size: 30px;    left: 50%;    margin-left: -15px;    margin-top: -15px;    position: absolute;    text-align: center;    top: 50%;}
.date-img-txt .overlay-container:hover .overlay {    opacity: 1;    transform: scale(1); }
@media (max-width: 1200px) {
.date-img-txt .overlay-container .picbox { height: 300px; }
}
@media (max-width: 992px) {
.date-img-txt .overlay-container .picbox { height: 230px; }
}
@media (max-width: 768px) {
.date-img-txt .overlay-container .picbox { height: 200px; }
}
@media (max-width: 640px) {
.date-img-txt .overlay-container .picbox { height: auto; min-height: 100px; }
.date-img-txt .wrap { float:inherit; width:100%; }
}

/*最新消息_底層頁*/
.date-img-txt.inner{
    border-bottom: 2px solid #ec754a;
}
.nth-lpic-rtxt .mjtitle {color: #ea6e1d;margin: 0;padding: 10px 0 10px 1.5em;font-weight:  bold;display:  inline-block;}
    font-family: Helvetica;  color: #3a59b5; }
.nth-lpic-rtxt .share-grid { border-top: none; float: right; padding: .8em 0 1em;  clear: inherit;   }
.nth-lpic-rtxt .btnWrap .btn-style {  padding: 8px 25px;   position: relative; border-top: 3px solid #3a59b5;  border-bottom: 3px solid #3a59b5; }
.nth-lpic-rtxt .btnWrap .btn-style:hover{ color: #fff; }
.nth-lpic-rtxt .btnWrap .btn-style:before{display:inline-block;position: absolute;z-index:0;left:-1px;right:-1px;bottom:0;top:100%;content: '';background:#3a59b5;     
   -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);    -moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);    -ms-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); }
.nth-lpic-rtxt .btnWrap .btn-style:hover:before{top:0;}
.nth-lpic-rtxt .btnWrap .btn-style h4{position: relative;z-index: 1; margin: 5px 0; font-size:16px; }
.page-content table { max-width:100%; }
.imgg { max-width:100%; display:block; margin:1em 0em 0em 10em; }
.imgg2 { max-width:100%; display:block; }
.tx01 { clear: both; margin-bottom:2em;}
.tx02 { clear: both; overflow:hidden; margin-bottom: 2em;}
.tx01 img { margin-top: 1em; }
.img-left,.img-left1 { float: left; padding-bottom: 1em; padding-right: 2em;}
.img-right,.img-right1 { float: right; padding-bottom: 1em; padding-left: 2em;}
.img-left img, .img-right img { max-width:300px; }
.img-left1 img, .img-right1 img { max-width:430px; }
.img_center img {  float: left;  padding: 1em;  width: 33.3%;   text-align: center;}

@media (max-width: 768px) { 
.page-content iframe { height:400px; }
}

@media (max-width: 640px) { 
.page-content iframe { height:320px; }
.img-left, .img-right, .img-left1, .img-right1 { float:inherit; padding-right: 0; padding-left: 0;}
.img-left img, .img-right img, .img_center img,
.img-left1 img, .img-right1 img { display:block; width:100%; max-width:inherit; }
}

@media (max-width: 480px) { 
.img-left1 img, .img-right1 img { max-width: 100%; }
.img-left,.img-left1,.img-right,.img-right1 { float:inherit; padding: 0 0 1em 0;}
.page-content iframe { height:250px; }
}


/*頁碼*/
.pagination > li > a {border:none;border-bottom: transparent 3px solid;margin:0 5px;color: #555;transition: all 0.3s ease 0s;background: inherit;}
.pagination > li > a:hover {border-color: #aaa;background:rgba(255, 255, 255, 0.45);}
.pagination > li.active > a, .pagination > li.active > a:hover {    border-bottom: 3px solid #ea6e1d;background: none;color: #ea6e1d;}
.pagination>li:first-child>a, .pagination>li:first-child>span { border-top-left-radius: 0;  border-bottom-left-radius: 0; }
.pagination>li:last-child>a, .pagination>li:last-child>span { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }


/*產品中類*/
.text-color-white,
.text-color-white a{color: #fff}
.class_summary{clear:  both;overflow: hidden;margin: 30px auto;background: #5b5756;color: #fff}
.class_summary > div{display: inline-block;width: calc(100% - 350px);vertical-align:  middle;}
.class_summary .index-sort{width: 300px;}
.class_summary .summary{padding: 50px 30px;font-size: 1.8rem;}
.class_block{margin: 30px -15px}
.class_block .item{float: left;width: 50%;padding: 0 15px;margin-bottom:30px}
.class_block .item:nth-child(2n+1){clear: both}
.class_block .item a{display: block;position: relative;}
.class_block .item img{max-width: 100%; padding: 20px;}
.class_block .item .summary{
  position:  absolute;
  z-index:1;
  left:  50%;
  top: 100%;
  width: 100%;
  padding: 15px 30px;
  font-size:2rem;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  color: #fff;
  opacity: 0;
  -webkit-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: rgba(231, 82, 29, .8);
}
.class_block .item:hover .summary{opacity:1;
  -ms-transform: translate(-50%,-100%);
  -webkit-transform: translate(-50%,-100%);
  transform: translate(-50%,-100%);
}
/*產品列表*/
.pro_item{background: #ccc;}
.item_block{
    padding: 50px 0;
    clear:  both;
    overflow: hidden;
}
.item_block .item{float: left;width: 50%;padding: 0 30px 30px;}
.item_block .item:nth-child(2n+1){clear:both}
.item_block .item .main{position:relative;z-index: 1;}
.item_block .item .main:after{content: '';position: absolute;z-index: -1;left: 50%;top: 50%;width: 30%;height: 60%;
  background: #eb741c;
  -ms-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);
  -webkit-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.item_block .item .list_color{float: right;list-style: none;margin: 0 -5px;padding: 0;}
.item_block .item .list_color li{float: left;w;width: 10px;height: 10px;margin: 0 5px 5px;border-radius: 100%;}
.item_block .item .summary{
    clear:  both;
}
.item_block .item:hover .main:after{left: 30%;width: 100px;height: 100px;border-radius: 100%;opacity: .5;}
/*產品底層頁*/
.pic-block img{margin:0 auto;}
.pro_main{clear:  both;overflow:  hidden;padding: 5%;    position: relative;}
.main_summary{display:  inline-block;width: 45%;padding-left: 50px;vertical-align: middle;color: #676767;}
.pro_main>div{position: relative;z-index: 10;}
.pro_main:after{content:'';position:absolute;background#fff;width:100%;height: 100%;top: 0;left:  0;right: 0;background: rgba(255, 255, 255, 0.8);}
.main_summary .pro-title{margin-bottom: 30px;font-weight:  bold;position:  relative;display:  inline-block;}
.main_summary .pro-title:after{content:'';position:absolute;display:  block;width: 100%;height: 4px;background: #676767;left: 0;bottom: -15px;}
.main_summary .editor{margin-bottom: 30px;}
.meta_icon{list-style: none;margin: 0 -5px 30px;padding: 0;clear: both;overflow: hidden;}
.meta_icon li{float: left;padding: 0 5px;}
.meta_icon li img{width: 50px;}
.accessories-grid{padding: 30px 0;background: rgba(255,255,255,.9);color: #555;}
.bg-color,
.text-color {transition-duration: 0.5s}
.tab__content {
  display:  inline-block;
  width: 53%;
  padding: 0;
  border-radius: 5px;
  vertical-align:  middle;
  padding-top:120px;
}
.tab__content > li {
  width: 100%;
  display: none;
  list-style: none;
}
.colors {list-style-type:  none;margin: 0 -10px;padding: 20px 0 20px;}
.colors > li {
  position:  relative;
  list-style: none;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border-bottom: 5px solid rgba(0, 0, 0, 0.1);
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
  transition-duration: 0.2s;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}
.colors > li img{
    position: absolute;
    top: 50%;
    left:50%;
    width: 55px;
    margin-top: 3px;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.colors > li:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.colors > li.active-color {
  -webkit-transform: scale(1.2) translateY(-10px);
  transform: scale(1.2) translateY(-10px);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}


/*產品詢價單*/

.product-price-all{background: #e4dcda;padding: 20px;margin: 50px 0px;}
.product-price-all:after{content:'';display:block;clear:both;}
.inquiry-zone-inner>.boxs>.list_txt>p{color: #f72929;margin: 0;}
.inquiry-zone-inner>.boxs>.list_txt>h4{margin:0;}
.inquiry-zone-inner>.boxs>.list_txt>.button{margin:10px 0px;}
.inquiry-zone-inner>.boxs>.list_txt>.button>a{color: #fff;}
.step_box_outer{padding: 20px 0px;}
.title-lform-rinfo .contact_form.inquiry_style{width: 100%;border-right: none;margin-left: 0;}
.step_box_outer>.page_form>.step_left, .step_box_outer>.page_form{padding-top:20px;}
.step_box_outer>.page_form>.step_left, .step_box_outer>.page_form>.text{display: inline-block;}
.step_box_outer>.page_form>.step_left, .step_box_outer>.page_form>.text>textarea{width: 100%;}
.step_box_outer>.page_form>.step_left{width: 20px;vertical-align: top;padding-top: 0;}
.step_box_outer>.page_form>.text{width: calc(100% - 25px);}
.title-lform-rinfo .contact_form.inquiry_style .page_form.col-md-6{padding:10px 0px;}
.title-lform-rinfo .contact_form.inquiry_style .page_form>label{font-weight:inherit;}
.step_title{color: #ea6e1d;letter-spacing: 2px;}

/*聯絡我們*/
.contact-zone-bg{background: url(../images/contact/contact-bg.jpg) no-repeat;background-position-y: bottom;}
.title-lform-rinfo .c_tit{  text-align:center; margin-bottom:1.5em;}
.title-lform-rinfo .contact_form { width: 49%; float: left;  margin-left: 3%;  border-right: 1px solid #E8E8E8; color: #333;}
.title-lform-rinfo .page_form .input1,.title-lform-rinfo .page_form select,.title-lform-rinfo .page_form textarea, .title-lform-rinfo .page_form .input3 {
  border: 1px solid #eaeaea;   padding: 5px 10px;  background: #f6f6f6;  line-height: 1.1;  color: #888;  box-shadow: none;  width: 94%; margin-bottom: 15px;  border-radius: 2px; }
.title-lform-rinfo .page_form .input3{ width:inherit; }
.title-lform-rinfo .contact_form .page_form.col-md-6 { padding-left: 0; }
.title-lform-rinfo .contact_form .page_form2 { margin: 2em 0;}

.title-lform-rinfo .contact_list { width: 42%; float: right; margin-right: 3%; list-style: none;  padding: 0; }
.title-lform-rinfo .contact_list li {  clear: both;  padding-bottom: 20px;  color: #333;  overflow: hidden; height: 70px;font-size: 0;}
.title-lform-rinfo .contact_list li:before {content: ""; height: 100%; display: inline-block; vertical-align: middle;}
.title-lform-rinfo .tx_r {  width: 80%;   display: inline-block;  vertical-align: middle;  font-size: 16px;}
.title-lform-rinfo .box1 {float: left;width: 50px;height: 50px;display: block;text-align: center;padding-top: 7px;border: 2px solid #ea6d1d;margin-right: 8px;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;}
.title-lform-rinfo .box1 i {color: #e96b1c;font-size: 26px;line-height: 30px;margin: 0;}
.title-lform-rinfo .contact_list li:hover .box1 { background: #CD0C0C;}
.title-lform-rinfo .contact_list li:hover i {  color: #fff;}

@media (max-width: 768px) { 
.title-lform-rinfo .contact_form { width: 90%;  float: none;  margin: 0 auto;  border: none;}
.title-lform-rinfo .contact_list { width: 90%;  float: none;  margin: 0 auto;  list-style: none;  padding: 25px 0 0;  border-top: 1px dashed #ccc;}
}
@media (max-width: 480px) { 
.title-lform-rinfo .contact_list li {  height: auto;}
.title-lform-rinfo .box1 { width: 40px; height: 40px;}
.title-lform-rinfo .box1 i { font-size: 22px; line-height: 23px; }
}

/*輪播設定*/
.owl-theme .owl-dots .owl-dot span{background: #eee}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{background: #bdaca8;}
/*標題*/
.h1, h1{font-size:3rem}
.h2, h2{font-size: 2.4rem;}
.h3, h3{font-size: 2rem;}
.mj-title{position: relative;display:  inline-block;padding: .5rem 30px 0;text-transform: capitalize;}
.mj-title:before,.mj-title:after{content: "";position: absolute;top: 50%;width: 80px;height: 1px;background: #666}
.mj-title:before{right: 100%;}
.mj-title:after{left: 100%;}
.mj-title.white{color:#fff}
.mj-title.white:before,.mj-title.white:after{background:#fff}
.sub-title{display: inline-block;margin-bottom: 15px;padding-bottom: 15px;border-bottom: solid 5px #ea6e1d}
.sub-title:after{content: "";display: block;clear: both}


@media (max-width: 1200px) {

/*banner*/
.carousel{margin-top: 120px;}

/*頁面調整高度*/
.pro_item, .news-zone, .contact-zone-bg{padding-top: 120px;}

/*footer*/
.control-center{padding-top: 50px;}


 }

@media (max-width: 1024px) { 
  /*banner*/
  .carousel-caption h2{font-size: 5vw;}
  /*頁尾*/
  .footer .block.ft_menu > ul > li{width: 150px;}
  .footer .block.ft_menu .long{width: calc(100% - 150px);}
  /*首頁*/
  .video-Introduction{height:56vw}
  /*產品底層頁*/
  .main_summary{width: 100%;padding: 0;}
  .tab__content {width: 100%;  padding-top: 0;}

}

@media (max-width: 996px) { 
  /*首頁*/
  .news-grid{clear: both;overflow: hidden;margin: 0 -15px 15px;}
  .news-grid .item{padding: 15px;}
  .index-introduction{height: auto}
  .index-introduction > div{width:100%;float:inherit;padding: 50px 30px;}
  .index-introduction .summary{position:static;width:90%;-ms-transform: translate(0,0);-webkit-transform: translate(0,0);transform: translate(0,0);}
  
  /*頁尾*/
  .footer{padding: 50px 0px;}
  .footer .block.ft_menu{width:100%;margin-top: 15px;padding: 15px 0;border-top: solid 1px #fff;}
  .footer .block.introduction{width:100%;padding-left: 0px; }


}

@media (max-width: 768px) { 
  body{padding-top: 80px;}
  /*主選單*/
  .pdt_mobile{
    margin-top: 20px;
    position: absolute;
    z-index: 50;
    margin-left: 80%;
    font-size: 15px;
    display: block;
  }
  .navbar-custom.top-nav-collapse>.container>.navbar-header>.pdt_mobile{margin-top: 14px;}
  .navbar-custom.top-nav-collapse>.container>.navbar-header>.navbar-toggle{    margin: 4px 15px 0 0;}
  .navbar-header{text-align:left;position:  relative;}
  .navbar-toggle{margin: 10px 15px 0 0;z-index: 99;}
  .navbar-custom .navbar-brand{padding: 0;}
  .navbar-custom .navbar-brand img:nth-child(1){margin: 10px;width: 15%;display: none;}
  .navbar-custom .navbar-header .img_h{display: block;height: 27px;width: inherit;}
  .navbar-custom .navbar-brand img:nth-child(2){    margin-top: 18px;height: 27px;width: inherit;padding: 0px 10px;}
  .navbar-custom.top-nav-collapse .navbar-brand img:nth-child(2){margin-top: 0px;}
  .navbar-nav>li{width:100%}
  .navbar-nav .open .dropdown-menu{padding: 15px;background: rgba(187, 163, 156, 0.8);}
  .dropdown-menu{position:static;}
  .dropdown-menu>li{margin-bottom: 15px}
  .dropdown-menu>li>a img{max-width:80px}
  .navbar-custom.top-nav-collapse .navbar-brand{padding-top:10px}
  .navbar-nav>li.lan-change{margin-left: 0px;}

  .dropdown-inner.container{padding:0;}
  .dropdown.outer>.dropdown-menu>.dropdown-inner>.list-all>li{width: 100%;text-align:center;}
  .dropdown-menu>.dropdown-inner>.list-all.pdt>li{width: 49%;}
  .dropdown-menu>.dropdown-inner>.list-all>li{width: 100%;}

  /*頁尾*/
/*   .control-center li:nth-child(5){display:none} */
  .footer{padding-bottom: 100px;}
  .footer .block{width:100%;}
  .footer .block.ft_menu > ul > li{width: 150px;}
  .footer .block.ft_menu .long{width: calc(100% - 150px);}
  .control-center li:nth-child(2){display:block;}
  .pc_mail{display: none;}
  .control-center li{background: #e4dcda;}
  .control-center li:nth-child(1){/* display: none; */}
  .control-center li:hover{width:calc(100% / 4);border-radius: 0px;}
  .control-center{padding-top: 0px;}
  .carousel{margin-top: 0px;}

  .goTop{bottom:80px}
  .control-center{
    left: 0;
    right: 0;
    bottom: 0;
    -ms-transform: translate(0,0);
    -webkit-transform: initial;
    transform: initial;
    z-index: 10;
  }
  .control-center li{float: left;width: calc(100% / 5);}
/*   .control-center li:nth-child(3) {background: #f72929;display: block;} */
  
  .control-center li:nth-child(4){line-height: 20px;}
  .control-center li:not(:nth-child(4)) p{padding-top:20px;}
  .control-center li:hover a p{display:none;}
  .control-center li a img{
    float:  none;
}
  .control-center li p{height: 50px;padding-top: 10px;}
  .control-center li{line-height:20px;height: 50px;}
  .goTop{bottom:100px;}
  .isobox {
    float: none;
}

.socialbox {
    float: none;
    padding-left: 0;
    margin-top: 20px;
}

  /*banner*/
  .banner{height: 60vw;}
  .carousel {height: calc(100vw - 60px);}
  .carousel-caption h2{font-size: 10vw;}
  /*產品列表*/
  .item_block .item{width: 100%}
  /*產品底層頁*/
  .main_summary .pro-title{font-size: 3rem;}
  .tab__content{padding-top:0px;}
  .pro_item, .news-zone, .contact-zone-bg{padding-top: 0px;}
  /*產品中類*/
  .class_block .item{width:100%}
  .class_block .item .summary{opacity:1;
    -ms-transform: translate(-50%,-100%);
    -webkit-transform: translate(-50%,-100%);
    transform: translate(-50%,-100%);
  }
  .control-center li{margin:0px;}
}

@media (max-width: 640px) { 


  /*標題*/
  .mj-title{width: calc(100% - 160px);}
  /*主選單*/
  .navbar-custom .navbar-brand img:nth-child(1){width: 20%;}
  .pdt_mobile{margin-left:78% }
  /*頁尾*/
  .footer .block.ft_menu > ul > li,.footer .block.ft_menu .long{width: 100%;}
  .footer .block.introduction {width: 100%;margin-top: 0px;}
  .footer {padding: 80px 25px;}
  .socialbox,.isobox {width: 100%;}
  /*首頁*/
  .news-grid{margin: 30px 0 15px;}
  .news-grid .item{width:100%}
  .news-grid .item .summary{padding:15px}
  /*產品中類*/
  .class_summary > div,
  .class_summary .index-sort{width: 100%;}
  .class_summary .summary{}  
  .index-sort .item {overflow: hidden;}
  /*最新消息_底層頁*/
  .nth-lpic-rtxt .mjtitle{width: calc(100% - 105px);padding: 0px 0 10px 0.5em;}
  .date-img-txt .date.news{vertical-align: top;}

  /*關於我們*/
  .about-word{padding:20px;}
  .about-info-all{padding-bottom: 200px;}

  /*聯絡我們*/
  .title-lform-rinfo .page_form .input1, .title-lform-rinfo .page_form select, .title-lform-rinfo .page_form textarea, .title-lform-rinfo .page_form .input3{width: 100%;}
} .space{padding:0px;}

@media (max-width: 550px) {

.footer .block.introduction ul li{width: 100%;}
.pdt_mobile{margin-left:73% }

}

@media (max-width: 480px) { 
  /*標題*/
  .mj-title{width: calc(100% - 80px);}
  .mj-title:before, .mj-title:after{width:40px}
  /*主選單*/
  .navbar-custom .navbar-brand img:nth-child(1){width: 30%;}
  .pdt_mobile{margin-left:69% }

  /*banner*/
  .carousel-caption h2{font-size: 13vw;}
  /*首頁*/
  .index-sort .item{width: 150px;height: 208px;}

  /*頁尾*/
  .footer-img {width: 270px;}
  

}


@media (max-width: 380px) { 

.pdt_mobile{margin-left:65% }

}

/* 手機版：螢幕寬度小於768px 時套用這裡 */
@media (max-width: 768px) {
  .imgg {
    margin: 1em auto 0 auto; /* 讓圖片置中 */
  }
}