@charset "utf-8";
@import url(../bootstrap-icons-1.5.0/bootstrap-icons.css);

body{font:15px/24px Arial, "Microsoft JhengHei";}
.wrapper{width:95%; max-width:1140px; margin:0 auto;}
a{-webkit-transition:all 0.3s linear 0s; transition:all 0.3s linear 0s; color:#000; text-decoration:none;}
img{width:auto; height:auto; max-width:100%; max-height:100%;}
.btn{border-radius:0;}
header{}
header .wrapper{display:flex; flex-wrap:wrap; align-items:center;}
header .wrapper>div.logo{margin-right:auto; max-width:100%;}
header .wrapper>div:last-child{margin-left:1em;}
@media screen and (max-width:800px){
  header{position:fixed; top:0; z-index:100; width:calc(100% - 50px);}
  header .wrapper{display:flex; flex-wrap:wrap; align-items:center; height:55px;}
  header .wrapper>div.logo{max-width:100%;}
	header .wrapper>div:last-child{display:none;}
}
header .wrapper>div a{display:inline-flex; color:#000; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; border-radius:3px;}
header .wrapper>div a:hover{color:#ffcc00; text-decoration:none;}
header .logo img{float:left; margin:10px 10px 10px 0; max-height:94px; width:auto;}
header .logo hgroup{display:none;}
header .logo h1{word-break:keep-all; margin:30px 0 0; font-weight:bold; color:#000; font-size:20px;}
header .logo a:hover h1{color:#000;}
header .logo h2{word-break:keep-all; color:#999; margin:0; }
/* @media screen and (max-width:640px){
	header .wrapper>div.logo{margin:20px auto; width:470px; text-align:center;}
	header .wrapper>div a hgroup{display:block;}
	header .logo h1{margin:0;}
	header .logo img{float:none; margin:5px auto; width:120px; text-align:center;}
}*/
header .wrapper>div.functions a{display:inline-block; border:1px solid #ddd; margin:0 1px; padding:0 5px; border-radius:0;}
header .wrapper>div.functions a:hover{background-color:#fc0; border:1px solid #fc0; color:#fff;}
header i.bi{display:inline-block; margin:0 -5px; width:30px; height:30px; color:#333; line-height:30px; text-align:center; transition: all 0.3s ease;}
header a:hover i.bi{color:#fff;}
header .language{float:right; background-color:rgba(255,255,255,.8); margin-top:35px; padding:0 10px; line-height:1.8; border-radius:20px;}
@media (max-width:800px){
  header .logo img{margin:0; height:auto; max-height:55px;}
  header .logo h1{margin:5px 0 0;}
	header .wrapper>div{width:100%;}
	header .language{display:none;}
}
header .language:hover{color:#fff; background-color:#1c488f;}
header .language:hover a{color:#fff; text-decoration:none;}
nav{padding:20px 0; font-weight:bold; font-size:16px; line-height:27px;}
nav ul{margin:0; padding:0; list-style:none; text-align:center;}
nav ul li{display:inline-block; margin:0; padding:0; list-style:none;}
nav a{display:inline-block; margin:0 1em; text-align:center; color:#333; border-bottom:2px solid #fff; transition:all 0.2s linear 0s;}
nav a:hover{text-decoration:none; border-bottom:2px solid #3688B6; color:#3688B6;}
@media (max-width:800px){
nav{padding:0;}
}
footer{background-color:#efeff0; padding:20px 0; text-align:center;}
footer span{display:inline-block; margin-right:1.5em; line-height:1.5;}
.mobile-only{display:none;}
@media (max-width:800px){
	.mobile-only{display:block;}
}

/* edm */
.jssorl-004-double-tail-spin img{animation-name: jssorl-004-double-tail-spin; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear;}
@keyframes jssorl-004-double-tail-spin
{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.jssorb051 .i {position:absolute;cursor:pointer;}
.jssorb051 .i .b {fill:#fff;fill-opacity:0.5;stroke:#000;stroke-width:400;stroke-miterlimit:10;stroke-opacity:0.5;}
.jssorb051 .i:hover .b {fill-opacity:.7;}
.jssorb051 .iav .b {fill-opacity: 1;}
.jssorb051 .i.idn {opacity:.3;}
.jssora051 {display:block;position:absolute;cursor:pointer;}
.jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
.jssora051:hover {opacity:.8;}
.jssora051.jssora051dn {opacity:.5;}
.jssora051.jssora051ds {opacity:.3;pointer-events:none;}
.edm h1{margin:0; padding:20px; background-color:#3688B6; font:bold 36px/36px "Microsoft JhengHei"; color:#000; text-align:center;}
.edm h1 span{display:inline-block; height:36px; margin:0 20px 0 0; padding:0px 20px 0 0; border-right:1px solid #fff; }
@media (max-width:700px){
	.edm h1{font-size:24px;}
	.edm h1 span{position:relative; display:block; border-right:0; margin:0 0 20px; padding:0;}
	.edm h1 span:after{content:""; position:absolute; bottom:-10px; left:calc(50% - 50px); display:block; width:100px; height:1px; background-color:#fff;}
}

/* 首頁-關於我們 */
.index-about{background-color:#f1f1f1; margin:0 auto; padding:50px 0;}
.index-about .wrapper{display:flex; flex-wrap:wrap; width:100%;}
.index-about div.about-img{width:50%; background:url(../images/about-pic.jpg) center center; background-size:cover; border-radius:5px; border:1px solid #fff;}
.index-about div.about-txt{width:50%; padding:0 5% 60px;}
.index-about div.about-txt p{margin-bottom:2em; font-size:18px; line-height:1.8;}
.index-about div.about-txt a{margin-left:50%; background-color:#fff; border-color:#ccc; text-transform:uppercase; transform:translateX(-50%);}
.index-about div.about-txt a:hover{background-color:#3688B6; color:#fff; border-color:#3688B6; text-decoration:none;}
.index-about h3{position:relative; margin:0; padding:40px 0 80px 0; text-align:center; font-size:36px; line-height:33px; color:#3688B6;}
.index-about h3 span{font-weight:bold; font-size:30px; color:#000;}
.index-about h3:after{content:""; position:absolute; bottom:50px; left:calc(50% - 25px); display:block; width:50px; height:5px; background-color:#ccc; -webkit-transition:all 0.3s linear 0s; transition:all 0.3s linear 0s;}
.index-about:hover h3:after{left:calc(50% - 30px); display:block; width:60px;}
.index-about div.about-txt ul{margin-bottom:50px;}
.index-about div.about-txt li{margin-bottom:1em;}

@media screen and (max-width:800px){
	.index-about{padding:0;}
	.index-about div.about-img{width:100%; height:250px; border-radius:0; border:0;}
	.index-about div.about-txt{width:100%; margin-left:0%;}
  .index-about .wrapper{flex-direction:column-reverse;}
}


/* 首頁-產品介紹 */
.index-link{background-attachment:fixed; background-size:cover; padding:100px 0;}
.index-link h3{position:relative; margin:0 0 40px ; padding:0; text-align:center; font-weight:bold; font-size:30px; line-height:33px; color:#000;}
.index-link h3 em{font-style:normal;}
/* H1 */
.mTit{width:100%;}
.mTit.tit\(red\) .mTitCnt > *:before, .mTit.tit\(red\) .mTitCnt > *:after{background:#E68399;}
.mTit.tit\(blue\) .mTitCnt > *:before, .mTit.tit\(blue\) .mTitCnt > *:after{background:#3688B6;}
.mTitCnt{width:100%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; margin-bottom:40px; line-height:1;}
  .mTitCnt:before, .mTitCnt:after {
    content: "";
    display: block;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    height: 1px;
    background: #3b3b3b;
    -webkit-transition: flex-grow 0.5s, -webkit-box-flex 0.5s;
    transition: flex-grow 0.5s, -webkit-box-flex 0.5s;
    -o-transition: flex-grow 0.5s;
    transition: flex-grow 0.5s;
    transition: flex-grow 0.5s, -webkit-box-flex 0.5s, -ms-flex-positive 0.5s; }
  .mTitCnt > * {
    position: relative; }
    .mTitCnt > *:before, .mTitCnt > *:after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      width: 0;
      -webkit-transition: width 0.3s 0.3s;
      -o-transition: width 0.3s 0.3s;
      transition: width 0.3s 0.3s; }
    .mTitCnt > *:before {
      left: 0; }
    .mTitCnt > *:after {
      right: 0; }
.mTitCnt em{font-style:normal; font-size:2rem;}

@media screen and (min-width: 1701px) {
  .mTit {
     }
  .mTitCnt > * {
    padding-left: 88px;
    padding-right: 88px; } }

@media screen and (min-width: 1101px) {
  .mTit .mTitCnt > *:before, .mTit .mTitCnt > *:after {
    height: 5px;
    margin-top: -2px; }
  .mTit.ani .mTitCnt:before, .mTit.ani .mTitCnt:after {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
  .mTit.ani .mTitCnt > *:before, .mTit.ani .mTitCnt > *:after {
    width: 70px; } }

@media screen and (min-width: 1101px) and (max-width: 1700px) {
  .mTitCnt > * {
    padding-left: 6.47059vw;
    padding-right: 6.47059vw; } }

@media screen and (min-width: 641px) and (max-width: 1100px) {
  .mTit .mTitCnt > *:before, .mTit .mTitCnt > *:after {
    height: 5px;
    margin-top: -0.18182vw; }
  .mTit.ani .mTitCnt > *:before, .mTit.ani .mTitCnt > *:after {
    width: 6.36364vw; }
  .mTitCnt > * {
    padding-left: 10vw;
    padding-right: 10vw; } }

@media screen and (max-width: 1100px) {
  .mTit.ani .mTitCnt:before, .mTit.ani .mTitCnt:after {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; } }

@media screen and (device-width: 375px) and (orientation: landscape), screen and (max-width: 640px) {
  .mTit .mTitCnt > *:before, .mTit .mTitCnt > *:after {
    height: 5px;
    margin-top: -2px; }
  .mTit.ani .mTitCnt > *:before, .mTit.ani .mTitCnt > *:after {
    width: 7.8125vw; }
  .mTitCnt > * {
    padding-left: 14.0625vw;
    padding-right: 14.0625vw; } }







.index-link h3 span{font-size:24px; color:#1c7fed;}
.index-link .owl-carousel .item{overflow:hidden; border-bottom:3px solid #fff;}
.index-link .owl-carousel .item .link-photo{display:table; table-layout:fixed; width:100%;}
.index-link .owl-carousel .item .link-photo a{position:relative; display:table-cell; text-align:center; vertical-align:middle; background-color:#fff; border:1px solid #eee;}

.index-link .owl-carousel .item .link-photo a img{width:auto; max-width:100%; height:auto; max-height:150%; margin:0 auto; -webkit-transition:all 0.3s linear 0s; transition:all 0.3s linear 0s;}
.index-link .owl-carousel .item:hover .link-photo a img{}
.index-link .owl-carousel .item h4{margin:0; padding:5px; text-align:center; font-weight:bold; font-size:18px; line-height:24px; color:#000; transition:ease all .5s;}
.index-link .owl-carousel .item:hover h4{color:#3688B6;}

.content{}
.content .banner{border-bottom:5px solid #e7e7e7; margin-bottom:40px;}
.content>.wrapper{width:100%; max-width:1140px; padding:0 50px 50px; background-color:rgba(255,255,255,.9);}
.content>.wrapper>h1{position:relative; text-align:center; margin:50px auto;}
.content>.wrapper>h1:after{content:""; position:absolute; bottom:-10px; left:calc(50% - 25px); display:block; width:50px; height:2px; background-color:#ccc; -webkit-transition:all 0.3s linear 0s; transition:all 0.3s linear 0s;}
.content>.wrapper:hover>h1:after{left:calc(50% - 30px); display:block; width:60px;}
.content>.wrapper main.about h2{margin:20px 0; font-size:30px; line-height:1.2; color:#333; border-left:3px solid #3688b6; padding-left: 10px;}
.content>.wrapper main.about h2 small{display:block; font-size:19px; color:#ccc; font-weight:300; letter-spacing:1px;}
.content aside img{border-radius:5px;}
.content main h1{margin:0 0 25px; font-size:24px; line-height:1.8; color:#333; border-bottom:1px solid #ccc;}
.content h1 span.glyphicon{font-size:20px;}
.content main p{font-size:16px; line-height:2; margin-bottom:1em;}
.content main .information{margin:30px 0; padding:0; background-color:#fff;}
.content main .information ul{margin:0; padding:0; list-style:none;}
.content main .information ul li{font-size:18px; line-height:2.3;}
.content i.bi{margin-right:5px; padding:10px; font-size:20px; color:#3688b6; border:1px solid #3688b6;}
@media screen and (max-width:800px){
  .content{margin-top:50px;}
  .content i.bi{margin-right:5px; padding:5px; font-size:15px; color:#3688b6; border:1px solid #3688b6;}
}

/* 公司簡介 */
.content main.about ol{padding-left:0; list-style:none; counter-reset:li;}
.content main.about ol li{margin-left:3rem; counter-increment:li; font-size:16px; line-height:2; margin-bottom:1.5rem;}
.content main.about ol li::before{content:counter(li); display:inline-block; margin:0 1rem 0 -3rem; background-color:#3688b6; width:2rem; height:2rem; line-height:2rem; text-align:center; color:white; border-radius:50%;}


/* 工廠設備 */

/* 前置作業 */
.steps{font-size:24px; line-height:1.4;}
.steps li{display:flex; align-items: center; margin:0; padding:32px 0; border-bottom:1px solid rgba(179, 179, 179, 0.5);}
.steps i{padding:15px; margin-right:20px; font-size:36px; line-height:1; vertical-align: middle; border:5px solid #3688b6;}

/* 加工流程 */
.flow{font-size:20px; font-weight:bold; color:#683694;}
.flow li{position:relative; text-align:center; margin:20px 0 20px 40px; padding:5px;}
.flow li:after{content:""; display:block; position:absolute; left:calc(50% - 15px); width:30px; height:20px; background:url("../images/flow-arrow.gif") no-repeat;}
.flow .a-flow, .flow .b-flow{position:relative; padding-left:5px;}
.flow:first-child .a-flow:before, .flow:first-child .b-flow:before{content:""; position:absolute; top:20px; left:20px; width:20px; height:calc(100% - 40px); border:3px solid #47429a; border-right:none;}
.flow .a-flow:after, .flow .b-flow:after{position:absolute; top:calc(50% - 20px); left:0; background-color:#fff; display:block; width:40px; height:40px; font-weight:bold; border-radius:50%; border:2px solid #47429a; color:#47429a; text-align:center; line-height:35px;}
.flow:first-child .a-flow:after{content:"A";}
.flow:first-child .b-flow:after{content:"B";}
.flow .a-flow ul, .flow .b-flow ul{margin:0; padding:0; list-style:none;}
.flow .a-flow ul li{background-color:#c1ecbe;}
.flow .a-flow ul li:first-child{background-color:#7ca7d7; color:#1d1c66;}
.flow .b-flow ul li{background-color:#7dd4d9;}
.flow .b-flow ul li:last-child:after{display:none;}
.flow .part{background-color:#fff; display:inline-block; width:40px; height:40px; font-weight:bold; border-radius:50%; border:2px solid #47429a; color:#47429a; text-align:center; line-height:35px; text-align:center;}

/* 花紋種類 */
.texture aside .submenu{}
@media (max-width:640px){
  .texture aside{z-index:2;}
	.texture aside .submenu .classLink{display:none;}
}
.texture aside .submenu ul{margin:0; padding:0; list-style:none;}
.texture aside .submenu ul li{margin:2px 0; padding:5px 0;}
.texture aside .submenu ul li a{display:block; padding:10px 20px; color:#333; font-weight:bold; font-size:18px; border:1px solid #ccc; transition:ease all .3s;}
.texture aside .submenu ul li a:hover{text-decoration:none; color:#3688B6; border-color:#3688B6;}
#pro02, #pro03, #pro04, #pro05, #pro06{padding-top: 80px;}

/*分類選單*/
.m_classLink{display:none; }

@media screen and (max-width:800px){ /* 褐色樣式 */
	ul.classLink{display:none; }
	.m_classLink{display:block; position:relative; }
	.m_classLink a.main{display:block; background:none; font-size:18px; font-family:"微軟正黑體", "新細明體", sans-serif; border:1px solid #3688B6; color:#333; position:relative; padding:10px; text-align:center;}
	.m_classLink a.main i{display:block; margin-right:0; font-size:15px; background:#3688B6; width:30px; height:100%; text-align:center; color:#fff; line-height:40px; position:absolute; right:0; top:0; }
  .m_classLink a.main i::before{display:block; padding:10px 0;}
	.m_classLink ul{display:none; width:100%; background:#fff; border:1px solid #3688B6; border-top:0; position:absolute; padding:10px 0; left:0; top:100%; z-index:999; box-sizing:border-box; }
	aside .m_classLink ul li{margin:0; padding:0;}
  aside .submenu .m_classLink ul li a{display:block; margin:0; padding:10px; border-top:1px solid #d1d1d1; font-family:"微軟正黑體", "新細明體", sans-serif; font-size:18px; color:#222; border:0; text-align:center;}
  aside .submenu .m_classLink ul li a:hover{background-color:#fafafa; color:#3688B6;}
  .m_classLink ul li:first-child a{border:none; }
}

#pro01 .row, #pro02 .row, #pro03 .row, #pro04 .row, #pro05 .row, #pro06 .row, #pro07 .row, #pro08 .row, #pro09 .row, #pro10 .row, #pro11 .row {display:flex; flex-wrap:wrap;}
hgroup h2{margin:10px 0; font:14px/1.2em Arial;}
hgroup h3{margin:0 0 5px; font:bold 16px/1.2em Arial;}
.elem, .elem * {
	box-sizing: border-box;
	margin: 0 !important;
}
.elem {
	display: block;
  padding: 4px;
  margin-bottom: 20px!important;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
       -o-transition: border .2s ease-in-out;
          transition: border .2s ease-in-out;
}
.elem:hover{
	border-color: #337ab7;
}
.elem > span {
	display: block;
	cursor: pointer;
	height: 0;
	padding-bottom: 100%;
	background-size: contain;
	background-position: center center;
	background-repeat:no-repeat;
}
/* LIGHTBOX FADING SHOW/HIDE EFFECT (as explained in documentation) */
.lcl_fade_oc.lcl_pre_show #lcl_overlay, .lcl_fade_oc.lcl_pre_show #lcl_window, .lcl_fade_oc.lcl_is_closing #lcl_overlay, .lcl_fade_oc.lcl_is_closing #lcl_window {
	opacity: 0 !important;
}
.lcl_fade_oc.lcl_is_closing #lcl_overlay {
	-webkit-transition-delay: .15s !important;
	transition-delay: .15s !important;
}

/* 加工實績 */
.case aside .submenu{}
@media (max-width:640px){
	.case aside .submenu .classLink{display:none;}
}
.case aside .submenu ul{margin:0; padding:0; list-style:none; text-align:center;}
.case aside .submenu ul li{display:inline-block; margin:2px 0; padding:5px 0;}
.case aside .submenu ul li a{display:block; padding:10px 20px; color:#333; font-weight:bold; font-size:18px; border:1px solid #ccc; transition:ease all .3s;}
.case aside .submenu ul li a:hover{text-decoration:none; color:#3688B6; border-color:#3688B6;}

@media screen and (max-width:800px){ /* 褐色樣式 */
  .case aside{z-index:2;}
	.case aside .m_classLink ul li{display:block;}
  .case aside .submenu .m_classLink ul li a{border:0;}

}


/* TTI聯盟 */
.tti .card{background-color:rgba(0,0,0,.03); border:0;}
.tti .card-header{background-color:#3688b6; font-weight:bold; text-align:center; color:#fff; border-bottom:0;}
.card-body{padding:1rem 2rem;}
.tti .card-text{font-size:16px; line-height:2;}
#pills-tab{background-color:#efeff0; padding:0 0 5px 5px;}
.nav-pills .nav-link{margin:5px 5px 0 0; background-color:#efeff0; font-size:14px; color:#333; border-radius:0; border:1px solid #fff;}
.nav-pills .nav-link.active, .nav-pills .nav-link.active:hover{background-color:#3688b6;}
.nav-pills .nav-link:hover{background-color:#fff;}
.tab-pane{padding:25px; font-size:24px; line-height:1.5; color:#3688b6; border:1px solid #eee;}
.tab-pane img{display:block; margin-bottom:10px; border:1px solid #ccc;}
.tab-pane li{font-size:18px; line-height:2.3; color:#333;}

/* 常見問答 */
.accordion-button{font-size:18px; line-height:1.8;}
.accordion-button .badge{margin-right:.5rem;}
.accordion-button:not(.collapsed){color:#3688b6; font-weight:bold; background-color:#fff;}
.accordion-body{font-size:18px;font-weight:bold; color:#dc3545;}
.accordion-body .badge{margin-right:.5rem;}

/* 最新消息 */
#accordion{font-family:"Microsoft JhengHei";}
.ui-accordion .ui-accordion-header{font-size:large; color:#1c7eed;}
.ui-accordion-header.ui-accordion-header-active{color:#fff;}

/* 聯絡我們 */
@media (max-width:767px){
	.contact-pic{display:none;}
}

/* SlickNav */
.slicknav_menu{display:none;}
@media screen and (max-width:800px){
	#menu{display:none;}
	.slicknav_menu{display:block;
    position: fixed;
    top:0;
    width: 100%;
    padding:5px 0;
    z-index: 99;}
  .slicknav_nav{background-color:#fff; padding:20px 0;}
  .slicknav_nav>li{display:inline-block; width:48%; text-align:center;}
}

/* Go Top */
#scrollUp {
    background: #454545 url(../images/top.png);
    bottom: 20px;
    right: 20px;
    width: 38px;    /* Width of image */
    height: 38px;   /* Height of image */
}