@charset "utf-8";

/** bootstrap **/
@import "bootstrap.css";

/** 文字icon **/
@import "font-awesome.min.css";

/** 手機選單 **/
@import url("slicknav.css") screen and (max-width:900px);

/** edm **/
@import "edm.css";

/* google font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;700&family=Noto+Serif:wght@400;700&display=swap');

*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html{width:100%; height:auto;}
body{background:#fff; margin:0; padding:0; width:100%; height:auto; font:medium/1.5 "Microsoft JhengHei";}
.clearfix:after{content:""; display:block; height:0; clear:both; visibility:hidden;}
* html .clearfix{height:1%;}
a,a:hover{text-decoration:none;}
img{border:0; vertical-align:middle; max-width:100%;}
input{vertical-align:middle;}
.slicknav_menu{display:none;}
input.select-box{margin-bottom:5px; padding:5px 3%; width:20px; height:20px; text-align:center; border:1px solid #cbcbcb;}
input:focus, select:focus, textarea:focus, button:focus{outline:0;}

/** 表單預設文字顏色設定 **/
::-webkit-input-placeholder{color:#999999;}
::-moz-placeholder{color:#999999;}
:-ms-input-placeholder{color:#999999;}
input:-moz-placeholder{color:#999999;}
#field2::-webkit-input-placeholder{color:#999999;}
#field3::-webkit-input-placeholder{color:#999999; background:lightgreen; text-transform:uppercase;}
#field4::-webkit-input-placeholder{font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999999;}
#field2::-moz-placeholder{color:#999999;}
#field3::-moz-placeholder{color:#999999; background:lightgreen; text-transform:uppercase;}
#field4::-moz-placeholder{font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999999;}
.writing-mode-vertical{writing-mode:tb-lr; -ms-writing-mode:tb-lr; -webkit-writing-mode:vertical-lr; -moz-writing-mode:vertical-lr; -ms-writing-mode:vertical-lr; writing-mode:vertical-lr;}


:root{
    --primary: #113578;
    --secondary: #8fa9da;
    --third: #ebf1fd;
}

/** 手機選單、選單 色塊-變色 **/
.b-color, .slicknav_menu{}
.slicknav_icon-bar{background-color:#FFF;}
.b-color>li:hover, .b-color>li>ul>li>a:hover, .slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover{background:var(--primary);}
.border-color{border-left:7px #A0A0A0 solid;}
.slicknav_nav .slicknav_arrow{font-family:Arial;}

::selection{background: #bbd2ff;}

/** 上版 **/
header{position: fixed; width: 100%; background: rgba(54,54,54,0.3); z-index: 999;}
.header_bg{background: var(--secondary);}
.head-tool{display:flex; justify-content: flex-end; border-bottom: 1px solid #fff; padding: 0 10px; transition: all 0.6s;}
.head-tool li{list-style:none; padding:0px; margin:0 8px; color:#ffffff;}
.head-tool li:last-child{margin-right: 0;}
.head-tool li a{width:35px; display:block; padding: 5px;}
.head-tool li a:hover{background: var(--primary)}
.head-main{width:100%; height:70px; padding:0 15px; display: flex; justify-content: space-between; align-items: center; transition: all 0.6s;}
.head-main .logo{width: 402px; height:auto; transition: all 0.6s;}
.head-main .logo a{display: block;}
.head-main .logo img{width:100%; height:auto;}

header.header_bg .head-main{height: 50px;}
header.header_bg .head-main .logo{width: 280px;}

@media screen and (max-width: 1030px){
    .head-main .logo{width: 35%; min-width: 280px;}
}
@media screen and (max-width: 900px){
    .head-tool{padding-right: 50px;}
    .head-main{height: 50px;}
}
@media screen and (max-width: 480px){
    .head-main{flex-direction: column; height: inherit; padding: 5px 15px;}
    .head-main .logo{ margin-bottom: 5px;}
    header.header_bg .head-main{height: inherit;}
}
/** 主選單與切換語系 **/
.nav-language-box{display: flex; flex-wrap: wrap; align-items: center; transition: all 0.6s;}

@media screen and (max-width: 480px){
    .nav-language-box{width: 60%;}
}


/** 主選單與下拉 **/
.menu{list-style:none; display:flex; flex-wrap: wrap; margin: 0;padding: 0;}
.menu>li{color:#fff; font-size:18px; position:relative;cursor:pointer; padding:0; margin:0;}
.menu>li>a{color:#fff; display:block; padding:4px 15px; margin:0; border-radius: 20px; transition: all 0.6s;}
.menu>li>a:hover{ background: var(--primary);}
.menu>li.sub>ul.sub-menu{ display:none; position:static; z-index:999; margin:0; padding:0; border-radius:0 0 5px 5px; overflow:hidden;}
.menu>li.sub:hover ul.sub-menu{position:absolute; display:block; width:100%; left:0; top:47px;}
.menu>li.sub>ul.sub-menu>li{display:block; border-top:1px #fff dotted;}
.menu>li.sub>ul.sub-menu>li>a{display:block; color:#fff; padding:5px 10px; margin:0;}
.menu>li.sub>ul.sub-menu>li>a:hover{background:#000000;}


@media screen and (max-width:1030px){
    .menu>li>a{padding: 4px 12px;}
}
@media screen and (max-width:900px){
	.slicknav_menu{display:none;}
	#menu{display:none;}
	.slicknav_menu{display:block;}
}
/** 切換語系 **/
.nav-language-box .language{border:1px solid #fff; border-radius: 20px; padding: 0 5px; margin-left: 5px; transition: all 0.6s;}
.nav-language-box .language ul{display: flex; flex-wrap: wrap; list-style: none; margin: 0;padding: 0; font-size: 16px; transition: all 0.6s;}
.nav-language-box .language ul li{padding: 6px 9px;position: relative; transition: all 0.6s;}
.nav-language-box .language ul li::after{content: ""; position: absolute;top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 60%; background: #fff;}
.nav-language-box .language ul li:last-child::after{content: none;}
.nav-language-box .language ul li a{color: #fff; padding: 3px 6px; border-radius: 50%; transition: all 0.6s;}
.nav-language-box .language ul li a:hover{background: var(--primary);}

header.header_bg .nav-language-box .language ul li{ padding: 2px 9px;}

@media screen and (max-width:1030px){
    .nav-language-box .language ul li{ padding: 6px;}
}
@media screen and (max-width:900px){
    .nav-language-box .language ul li{ padding: 2px 9px;}
    .nav-language-box .language ul li a{padding: 1px 4px;}
}
@media screen and (max-width: 480px){
    .nav-language-box .language{margin: 0;width: 100%;}
    .nav-language-box .language ul{width: 100%;}
    .nav-language-box .language ul li{flex: 1; text-align: center;}
}
/** edm輪播 **/
.edm-main{background:#ffffff; max-width:100%; margin:0 auto; position:relative;}
.edm-main img{vertical-align:middle; width:100%; height:auto; position:absolute;}
.edm{position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1920px; height: 1011px; overflow: hidden; visibility: hidden;}
.edm-loading-main{position: absolute; top: 0px; left: 0px;}
.edm-loading{filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;}
.edm-loading-photo{position:absolute;display:block;background:url(../images/loading.gif) no-repeat center center;top:0px;left:0px;width:100%;height:100%;}
.edm-photo{cursor: default; position: relative; top: 0px; left: 0px; width: 1920px; height: 1011px; overflow: hidden;}
.edm-navigator{width:16px;height:16px;}

/** 配置 **/
.warpper{background:#fff;}
.main{padding-top:0px;}



/* 產品+消息 */
.pro-news{padding: 0;overflow: hidden; transition: all 0.6s; background: url("../images/pro-bg.jpg") no-repeat left bottom;}
.pro-news-main{max-width: 1280px; margin: 0 auto; padding: 0 15px; display: flex; flex-wrap: wrap; justify-content: space-between;transition: all 0.6s;}

@media screen and (max-width: 1000px){
    .pro-news-main{flex-direction: column;}
}

/** 首頁產品 **/
.i-pro{width: 62.9%; padding: 40px 0; transition: all 0.6s;}
.title-btn-box{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.i-pro-title{color: var(--primary); }
.i-pro-title .title-en{font-size: 30px; font-family: 'Noto Serif', serif;font-weight: bold;}
.i-pro-title .title-ch{font-size: 20px;}
.more{ border-radius: 28px;  background: var(--primary); padding: 4px 15px ; font-size:15px; font-weight:bold; width: 30px; white-space:nowrap; transition: all 0.3s; overflow: hidden;}
.more:hover{width: 110px;}
.more a{color:#fff;}
.more span{ font-size: 16px; padding: 0 0 0 26px; position: relative; line-height: 10px;}
.more span:before,.more span:after{ content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 2px; height: 18px; background: #fff;}
.more span:after{ transform: translateY(-50%) rotate(90deg);}
.i-pro-main{ padding: 0 50px; margin: 30px 0; transition: all 0.6s;}
.i-pro-main ul{margin:0; padding:0; list-style:none;}
.i-pro-main ul li{text-align:center; padding: 0;}
.i-pro-main ul li:hover{}
.i-pro-main ul li h4{font-size:16px; color:#333;font-weight:normal; padding:0; margin:10px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;text-overflow: ellipsis;}
.pro-photo{background: #fff; width:100%; position:relative; overflow: hidden;}
.pro-photo:hover{background: var(--primary);}
.pro-photo a{display:flex; height:100%; vertical-align:middle; text-align:center; align-items:center; justify-content:center;}
.pro-photo img{transition: all 0.6s;}
.pro-photo:hover img{ transform: scale(1.2); opacity: 0.5;}
.pro-photo img.index-pro-img{width:auto; height:auto; flex-shrink:0;}
.i-pro-main .owl-theme .owl-nav{ position: absolute; top: 30%; width: 100%; transition: all 0.3s}
.i-pro-main .owl-theme .owl-nav .owl-prev,.i-pro-main .owl-theme .owl-nav .owl-next{position: absolute; width: 40px; height: 40px; transition: all 0.6s ; z-index: 99}
.i-pro-main .owl-theme .owl-nav .owl-prev{left: -60px; background: url("../images/arrow-l.png") no-repeat center center;background-size: 30px;}
.i-pro-main .owl-theme .owl-nav .owl-prev:hover{background:#8fa9da url("../images/arrow-l.png") no-repeat center center;background-size: 30px;}
.i-pro-main .owl-theme .owl-nav .owl-next{right: -60px; background: url("../images/arrow-r.png") no-repeat center center;background-size: 30px;}
.i-pro-main .owl-theme .owl-nav .owl-next:hover{background:#8fa9da url("../images/arrow-r.png") no-repeat center center;background-size: 30px;}
.i-pro-main .owl-theme .owl-dots{display: none;}

@media screen and (max-width: 1280px){
    .i-pro-main{padding: 0 20px;}
    .i-pro-main .owl-theme .owl-nav .owl-prev{left: 0; background: #ebf1fd url("../images/arrow-l.png") no-repeat center center;background-size: 30px;}
    .i-pro-main .owl-theme .owl-nav .owl-next{right: 0; background:#ebf1fd url("../images/arrow-r.png") no-repeat center center;background-size: 30px;}
}
@media screen and (max-width: 1000px){
    .i-pro{width: 100%;padding: 20px 0;}
    .i-pro-main{padding: 0; margin: 15px 0;}
}
@media screen and (max-width: 575px){
    .i-pro-title .title-en{font-size: 24px;}    
    .i-pro-title .title-ch{font-size: 18px;}
}

/** 首頁最新消息 **/
.i-news{width: 29.5%; padding: 40px 0 40px 0; transition: all 0.6s; position: relative;}
.i-news::after,.i-news::before{content: ""; position: absolute; height: 110%; top:0;}
.i-news::before{background: url('../images/new-bg-2-2.png') no-repeat left top;left: 0; width: 193%;}
.i-news::after{background: url("../images/new-bg-2-1.png") no-repeat left top; left: -109px; width: 109px;}
.i-news h3{font-size: 20px; color: var(--primary); text-align: right; position: relative; z-index: 1; transition: all 0.6s;}
.i-news h3::after{content: "NEWS"; position: absolute; right: 0;top: -10px; font-size: 50px; color: #c9c9c9;font-family: 'Noto Serif', serif;font-weight: bold; opacity: 0.3; z-index: -1; transition: all 0.6s;}
.i-news ul{list-style:none; color:#333; padding:0px; margin:0; position: relative; z-index: 1;}
.i-news ul li{padding:0; font-size:16px; transition: all 0.6s;}
.i-news ul li:nth-child(odd){background: var(--third);}
.i-news ul li:hover{background: var(--secondary);}
.i-news ul li:nth-child(n+5){display: none;}
.i-news ul li a{color:#333; display:block;padding:14px 18px;}
.i-news ul li:hover a{color: #fff;}
.i-news ul li a .date{color: #aaa; font-size: 14px;}
.i-news ul li:hover a .date{color: #fff;}
.i-news ul li a .content{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;text-overflow: ellipsis;}
.i-news .news-more{font-size: 14px; text-align: right; padding-right: 30px; background: url("../images/more.png") no-repeat center right; background-size: 25px; position: relative;z-index: 1;}
.i-news .news-more a{ color: #333;}
.i-news .news-more a::after{content: ""; position: absolute; right: 0; top: 0; width: 30px; height: 100%; background: var(--secondary); z-index: -1;opacity: 0; transition: all 0.6s;}
.i-news .news-more a:hover::after{right: 50px;opacity: 1;}

@media screen and (max-width: 1000px){
    .i-news{width: 100%; padding: 0 0 30px;}
    .i-news h3{text-align: left;font-size: 30px;font-family: 'Noto Serif TC', serif; font-weight: bold;}
    .i-news h3::after{top: 4px;}
    .i-news::after,.i-news::before{content: none;}
    .i-news h3::after{content: none;}
}
@media screen and (max-width: 575px){
    .i-news h3{font-size: 24px;}
}




/** 內頁banner **/
.inside-banner{ padding:25px 15px;}
.banner-photo{height: 400px; overflow: hidden; transition: all 0.6s;}
.banner-photo .img{height: 500px; background-repeat: no-repeat; background-position: center; background-size: cover;transition: all 0.6s;}
.inside-banner .banner-title{max-width:1200px; font-size:30px; color: var(--primary); margin:0 auto; padding:0; text-align: center;}

@media screen and (max-width:767px){
    .banner-photo{height: 350px;}
    .banner-photo .img{height: 450px;}
}
@media screen and (max-width:575px){
    .banner-photo{height: 200px;}
    .banner-photo .img{height: 300px;}
}

/** Breadcrumb **/
nav[aria-label="breadcrumb"]{max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; padding: 0 15px;}
.breadcrumb{padding:2px 20px; list-style:none; border: 1px solid var(--secondary); position: relative;border-radius: 20px;}
.breadcrumb::after{content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 10px;height: 10px; background: var(--secondary); border-radius: 50%;}
.breadcrumb-item{padding-left:0.5rem;}
.breadcrumb-item + .breadcrumb-item::before{display:inline-block; padding-right:0.5rem; color:var(--secondary); content:"/";}
.breadcrumb-item a{font-weight:bold; text-decoration:none; color:var(--secondary); transition: all 0.6s;}
.breadcrumb-item:hover a{color:var(--primary); text-decoration:none;}
.breadcrumb-item.active{color: var(--secondary);}

@media screen and (max-width: 575px){
    nav[aria-label="breadcrumb"]{justify-content: center; margin-bottom: 10px;}
    .breadcrumb::before{content: ""; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 10px;height: 10px; background: var(--secondary); border-radius: 50%;}
}
@media screen and (max-width: 360px){
    .breadcrumb::before,.breadcrumb::after{content: none;}
}


/** 內頁架構 **/
.content-body{max-width:1200px; margin:0 auto; background: #fff; padding:20px 0;}

.page-title{font-size:24px; color:var(--primary); padding:5px 0; margin:0; position: relative;z-index: 1; margin-bottom: 15px;}
.page-title::after{content: ""; position: absolute; left: 0; bottom: 0; width: 10%; height: 50%; background: var(--third);z-index: -1;}
.page-main{padding:0; font-size:16px; color:#333;}

/** 左邊分類 **/
/*.left-menu-title{background:#e9ecef; text-align:center; font-size:18px; font-weight:bold; padding:8px 0; border-radius:5px 5px 0 0; margin-bottom:3px; border-bottom:2px solid #6d6d6d; color:#525252;}*/
.in-left-menu>ul{margin:0; padding:0; list-style:none;}
.in-left-menu>ul>li{font-size:16px; color:#666; padding:0; margin: 10px 0;position: relative;z-index: 1; color: #fff;}
.in-left-menu>ul>li::before{content: ""; position: absolute; height: 100%;width: 0; background: var(--third);z-index: -1; transition: all 0.6s;}
.in-left-menu>ul>li:hover::before{width: 100%;}
.in-left-menu>ul>li>a{color:#333; border-left:3px var(--primary) solid; display:block; padding:10px 5px 10px 25px; line-height:1.5em;}
.in-left-menu>ul>li>.current{background: var(--third);}
.in-left-menu>ul>li ul{margin:5px 0 0 30px; padding:0; list-style:square;}
.in-left-menu>ul>li ul li{border-top:1px #CCC dotted; padding:5px 5px 5px 0;}
.in-left-menu>ul>li ul li a{font-size:13px; color:#666; display:block;}
.in-left-menu>ul>li ul li a:hover{color:#71743D;}
.left-beautify img{width:100%; height:auto; margin-top:0px;}
.m_classLink{display:none;}

@media screen and (max-width:575px){
	.classBox{padding:0 0 20px 0;}
	ul.classLink{display:none;}
	.m_classLink{display:block; position:relative; background-color:#fff; border:1px solid #ddd;}
	.m_classLink a.main{display:block; background:none; font-size:16px; font-family:"Microsoft JhengHei", "新細明體", sans-serif; color:#333; position:relative; padding:8px;}
	.m_classLink a.main i{display:block; font-size:16px; background:var(--secondary); width:45px; height:100%; text-align:center; color:#FFF; line-height:40px; position:absolute; right:0; top:0;}
	.m_classLink ul{display:none; margin:0; padding:0; list-style:none; width:100%; background:#FFF; border:1px solid #d1d1d1; position:absolute; left:0; top:100%; z-index:99; box-sizing:border-box;}
	.m_classLink ul li{margin:0; padding:0;}
	.m_classLink ul li a{display:block; padding:8px; border-top:1px solid #d1d1d1; font-family:"Microsoft JhengHei", "新細明體", sans-serif; font-size:16px; color:#222; transition: all 0.6s;}
	.m_classLink ul li:first-child a{border:none;}
	.m_classLink ul li a:hover{background:var(--third);}
	.m_classLink ul li ul{display:block; margin:0 10px 10px 10px; padding:0; list-style:none; width:calc(100% - 20px); background:#FFF; border:1px solid #d1d1d1; position:inherit; left:inherit; top:inherit; z-index:999; box-sizing:border-box;}
	.left-menu-title{display:none;}
	.left-beautify{display:none;}
}

/** 關於我們 **/
.about-style .title-b{ font-size: 20px; padding: 5px 20px; position: relative; z-index: 1; margin-bottom: 15px;}
.about-style .title-b::before,.about-style .title-b::after{content: ""; position: absolute;}
.about-style .title-b::before{left: -1px; top: 0; width: 0; height: 0; border-style: solid; border-width: 25px 25px 0 0; border-color: var(--primary) transparent transparent transparent;}
.about-style .title-b::after{right: 0; bottom: 0; width: 99.5%; height: 90%; background: var(--third); z-index: -1;}
.about-style .list-style{list-style: none; margin: 0; padding: 0;}
.about-style .list-style li{padding: 5px 0 5px 20px;  background: url("../images/icon-list.png") no-repeat left top 9px; background-size: 15px; }
.about-style .list-style02 {list-style: none; padding: 0; margin: 0;}
.about-style .list-style02 li{display: flex; flex-wrap: wrap; padding: 5px;}
.about-style .list-style02 li .title{width: 100px; background: var(--third); margin-right: 10px; padding: 5px; text-align: center;}
.about-style .list-style02 li .content{flex: 1; text-align: left;padding: 5px;}
.about-style .list-style02 li .content .photo-box{margin: 0;padding: 0;list-style: none; display: flex; flex-wrap: wrap;}
.about-style .list-style02 li .content .photo-box li{width: calc(100%/5); padding: 5px;}
.about-style .list-style03{padding: 0;margin: 0; list-style: none;}
.about-style .list-style03>li{ padding: 20px 0;}
.about-style .list-style03 .title{ color: var(--primary); font-size: 18px; font-weight: bold; border-bottom: 1px solid #ddd; padding: 10px 5px; margin-bottom: 15px;}
.about-style .list-style04{padding: 0;margin: 0;list-style: none; display: flex; flex-wrap: wrap;}
.about-style .list-style04 li{ width: calc(100%/5 - 10px); text-align: center; margin: 5px; background: var(--third); padding: 10px; border-radius: 5px; font-weight: bold; border: 3px solid var(--third); transition: all 0.6s;}
.about-style .list-style04 li:hover{background: #fff;}
.about-style .list-style04 li a{color: #333;}
.about-style .list-style04 li:hover a{color: var(--primary);}
.about-style .list-style04 li .photo{margin-bottom: 5px;}

.equipment ul{list-style:none; padding:0; margin:0;}
.equipment ul li{padding:8px 5px; margin:0; transition: all 0.6s;}
.equipment ul li .equipment-content{text-align:center; margin:0;}
.equipment ul li:nth-child(odd){background: var(--third);}
.equipment ul li:first-of-type{border-bottom:0; padding:8px 5px; background: var(--secondary);}
.equipment ul li:first-of-type:hover{ background: var(--secondary);}
.equipment ul li:first-of-type .equipment-content{font-size:16px; text-align:center;}
.equipment ul li:first-of-type .equipment-content.title{display:block;color: #fff; line-height:2; border-radius:5px;}

.equipment ul li:hover{background: #b2c5e7;}
.equipment ul li:hover .order_details a{color:#c72729;}

.equipment .oproject{display:none;}
.equipment .oproject-content{flex:1;}
.equipment .equipment-content:nth-child(1) .oproject-content{text-align: left;}

.shopnote-style .smail-style{color: var(--secondary); font-size: 14px;margin: 10px 0; padding: 0 15px;}

@media screen and (max-width: 850px){
    .about-style .list-style02 li .content .photo-box li{width: calc(100%/4);}
    .about-style .list-style04 li{ width: calc(100%/3 - 10px);}
}
@media screen and (max-width:767px){
	.equipment ul li .equipment-content{padding:5px 0;}
	.equipment ul li:first-of-type{display:none;}
	.equipment .oproject{display:inline-block; color:#000; width:90px; margin:0; text-align: left; padding: 0 5px;}
	.equipment .oproject-content{width:100%; max-width:100%; text-align:left;padding: 0 5px;}
    .about-style .list-style02 li .content .photo-box li{width: calc(100%/3);}
}
@media screen and (max-width: 575px){
    .about-style .list-style02 li{flex-direction: column;}
    .about-style .list-style02 li .title{width: 100%!important;}
    .about-style .list-style04 li{ width: calc(100%/2 - 10px);}
}
@media screen and (max-width: 380px){
    .about-style .list-style02 li .content .photo-box li{width: calc(100%/2);}
}


/** 認證與製程 **/
.service-style ul.service-list{padding: 0;margin: 0;list-style: none; display: flex; flex-wrap: wrap;}
.service-style ul.service-list>li{width: calc(100% / 4); padding: 10px;}
.service-style ul.service-list>li:hover{background: var(--third);}
.service-style .title{color: var(--primary); font-size: 18px; font-weight: bold; border-bottom: 1px solid #ddd; padding: 10px 5px; margin-bottom: 15px; }
.service-style ul.service-list li a{ display: block;text-align: center; color: #333;}
.service-style ul.service-list li:hover{background: var(--third);}
.service-style .video-box{width:100%;position:relative; padding-bottom:56.25%; height: 0;}
.service-style .video-box iframe{position: absolute;top:0; left: 0;  width: 100%; height: 100%; padding: 10px 0;}
@media screen and (max-width: 767px){
    .service-style ul.service-list>li{width: calc(100% / 2);}
}

/** 證書 **/
.certificate{}
.certificate ul{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap;}
.certificate ul li{width:calc(100%/2 - 20px); margin:10px; padding:0; text-align:center;}
.certificate ul li h3{font-size:16px; color:#333333; line-height:1.4; font-weight:normal; padding:0; margin:15px 0;}
.certificate-photo{background:#ffffff; width:100%; position:relative;display:flex; align-items:center; justify-content:center;box-shadow: 0 5px 15px 0 rgba(0,0,0,.1);}
.certificate-photo img.index-pro-img{width:auto; height:auto; flex-shrink:0;}
@media screen and (max-width: 450px){
    .certificate ul li{width:calc(100%/1 - 0px);margin: 10px 0;}
}

/** 相片集 **/
/* PhotoSwipe Repository */
.my-gallery figcaption{text-align:center; padding:5px 0; font-size:16px;}
.my-gallery .pro-photo{display:flex; align-items:center; justify-content:center; padding: 5px;}
.my-gallery .pro-photo:hover{background: var(--third);  }
.my-gallery .pro-photo:hover img{transform: scale(1); opacity: 1;}
/** 最新消息 **/

.news ul{list-style:none; color:#333; padding:0px; margin:0; position: relative; z-index: 1;}
.news ul li{padding:0; font-size:16px; transition: all 0.6s;}
.news ul li:nth-child(odd){background: var(--third);}
.news ul li:hover{background: var(--secondary);}
.news ul li:nth-child(n+5){display: none;}
.news ul li a{color:#333; display:block;padding:14px 18px;}
.news ul li:hover a{color: #fff;}
.news ul li a .date{color: #aaa; font-size: 14px;}
.news ul li:hover a .date{color: #fff;}
.news ul li a .content{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;text-overflow: ellipsis;}

@media screen and (max-width:400px){
	.news ul li a{display:block;}
	.news ul li .news-date{width:100%; text-align:left;}
}

/** 產品列表介紹 **/
.pro-store-info{font-size:16px; color:#666; padding:10px; margin-bottom:20px;}
.pro-list ul{max-width:1200px; margin:0 auto; padding:0; list-style:none; display:flex; flex-wrap:wrap;}
.pro-list ul li{width:25%; margin:0; padding:10px; text-align:center; transition: all 0.6s;}
.pro-list ul li:hover{background:var(--third);}
.pro-list ul li h4{font-size:16px; color:#504f4d; line-height:1.5em; font-weight:normal; padding:5px 0 5px 0; margin:0;}
.pro-list ul li .pro-store{color:#938c83; padding:10px 0 0px 0; display:block; text-decoration:line-through;}
.pro-list ul li .pro-price{color:#b83400; font-size:20px; padding:5px; display:block;}

@media screen and (max-width:767px){
	.pro-list ul li{width:33.3333%;}
}

@media screen and (max-width:450px){
	.pro-list ul li{width:50%; padding:5px;}
}

/** 產品明細 **/
.pro-detaile-title{font-size:20px; color:var(--primary); padding:10px; margin:0 0 10px 0;font-weight: bold;position: relative;z-index: 1;}
.pro-detaile-title::after{content: "";position: absolute; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 40px 40px 0 0; border-color: var(--third) transparent transparent transparent;z-index: -1;}
.pro-detaile-box{display:flex; flex-wrap:wrap; margin:0 0 15px 0;}
.pro-detaile-photo-box{width:calc(50% - 25px); margin:0 25px 0 0;}
.pro-detaile-spe-box{width:50%; position:relative; padding-bottom:210px;}
.pro-detaile .pro-photo-box{background:#fff; width:100%; margin:0; padding:0;}
.pro-detaile .pro-photo-box img{width:100%; height:auto;}
.pro-list-time{background:url(../images/time.png) left center no-repeat; font-size:12px; color:#968c69; padding-left:20px;}
.pro-specification{font-size:16px; color:#333; position:relative;}
.cart-info{position:absolute; width:100%; bottom:0;}
.cart-info .price{font-size:22px; font-weight:bold; color:#F00; vertical-align:middle; display:block; text-align:right;}
.cart-info .price.origin{font-size:smaller; color:#666; text-decoration:line-through;}
.cart-info .price.special{font-size:smaller; color:#000;}
h3.pro-introduce{font-size: 18px; padding: 5px 20px; position: relative; z-index: 1; margin-bottom: 15px;}
h3.pro-introduce::before,h3.pro-introduce::after{content: ""; position: absolute;}
h3.pro-introduce::before{left: -1px; top: 0; width: 0; height: 0; border-style: solid; border-width: 25px 25px 0 0; border-color: var(--primary) transparent transparent transparent;}
h3.pro-introduce::after{right: 0; bottom: 0; width: 99.5%; height: 90%; background: var(--third); z-index: -1;}
.pro-content{padding:0px 0; font-size:16px; color:#333; clear:both;}




@media screen and (max-width:767px){
	.pro-detaile-box{display:block;}
	.pro-detaile-photo-box{width:100%; margin:0 0 15px 0;}
	.pro-detaile-spe-box{width:100%; padding-bottom:0;}
	.cart-info{position:inherit; bottom:inherit;}
}

/** 產品明細圖片特效 **/
.slider-wrap{width:100%;}
.stripViewer .panelContainer{width:400% !important;}
.stripViewer .panelContainer .panel ul{text-align:left; margin:0 15px 0 30px; width:100%;}
.stripViewer{position:relative; overflow:hidden; width:100%; height:auto;}
.stripViewer .panelContainer{position:relative; left:0; top:0; width:400%;}
.stripViewer .panelContainer .wrapper{width:100%; display:flex; vertical-align:middle; text-align:center; align-items:center; justify-content:center;}
.stripViewer .panelContainer img{width:auto; height:auto; max-width:100%; max-height:100%;}
.stripViewer .panelContainer .panel{float:left; position:relative;}
.stripNavL, .stripNavR, .stripNav{display:none; width:100%;}
.slider-wrap a{height:auto;}
.nav-thumb{margin-right:0;}
#movers-row{margin:5px 0 0 0; width:101%;}
#movers-row div{width:25%; float:left; padding-right:1%;}
#movers-row div a.cross-link{float:right; display:flex; width:100%; vertical-align:middle; text-align:center; align-items:center; justify-content:center; border:1px #C0C0C0 solid;}
#movers-row div a.cross-link img{width:auto; height:auto; max-width:100%; max-height:100%;}
.cross-link{display:block; margin-top:0px; position:relative; padding-top:0px;}
.active-thumb{}
.panel{width:25%;}

@media screen and (max-width:370px){
	.stripViewer .panelContainer .wrapper{height:323px;}
	#movers-row div a.cross-link{height:77px;}
}


/* 產品明細-加入購物車動態視窗 */
.addcart-box .modal-title{}
.addcart-box .price.member{color:#9e0c36; font-weight:bold;}
.addcart-box .spec-title{padding:10px 0;}
.addcart-box ul.specs li{display:inline-block; width:auto; margin:0 5px 20px 0; padding:5px; border:2px solid #333; border-radius:5px; cursor:pointer;}
.addcart-box ul.specs li[disable],.addcart-box ul.specs li.current[disable]{background-color:#fff; color:#ccc; border-color:#ccc;}
.addcart-box ul.specs li.current{background-color:#d63b68; color:#fff;}
             ul.specs {margin-left:0; padding-left:0;}
.input-group-text{height: 100%;}


/** 聯絡我們 **/
.contact-body{}
.contact-note{padding:10px 0; font-weight:bold; font-size:16px; color:#900;}
.contact-body .title{font-size: 20px; padding: 5px 20px; position: relative; z-index: 1; margin-bottom: 15px;}
.contact-body .title::before,.contact-body .title::after{content: ""; position: absolute;}
.contact-body .title::before{left: -1px; top: 0; width: 0; height: 0; border-style: solid; border-width: 25px 25px 0 0; border-color: var(--primary) transparent transparent transparent;}
.contact-body .title::after{right: 0; bottom: 0; width: 99.5%; height: 90%; background: var(--third); z-index: -1;}

.contact-body .list-style{list-style: none; margin: 0; padding: 0;}
.contact-body .list-style li{padding: 5px 0 5px 20px;  background: url("../images/icon-list.png") no-repeat left center; background-size: 15px; }







/** 表單欄位 **/
.form-box input, .form-box img{vertical-align:middle;}
.opinion{display:flex; flex-wrap:wrap; margin:10px 0;overflow:hidden;}
.opinion-left01{background:var(--third); width:110px; min-width:110px; padding:5px 15px; font-weight:bold; font-size:16px; font-family:"Microsoft JhengHei"; color:#495057; line-height:1.8; display:flex; align-items:center;}
.input-main-style01{flex:1; width:100%; border:0; margin:0; padding:5px 15px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; min-height:37px;}
.input-main-style02{background:#f4f8fb; flex:1; width:100%; border:0; margin:0; padding:5px 15px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; min-height:37px;}
.input-main-style03{background:#f4f8fb; flex:1; width:100%; border:0; margin:5px 0 0 0; padding:5px 15px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; min-height:37px;}
.input-main-select{background:none; flex:1; width:100%; border:0; margin:0; padding:5px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; display:flex; flex-wrap:wrap;}
.input-main-select select{background:#f4f8fb; width:calc(50% - 2.5px); margin-right:5px; padding:5px 15px; line-height:1.8; border:0; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; min-height:37px;}
.input-main-select select:nth-child(2){margin-right:0;}
.select-style{background:#8a6e0c; font-size:16px; color:#ffffff; line-height:20px; padding:5px 10px; border:0;}
.input-style01{background:#f4f8fb; flex:1; width:100%; border:0; margin:0; padding:5px 15px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; min-height:37px;}
input:disabled{background-color:#fff; color:#2d7fb9; cursor:no-drop;}
.btn.openlink{margin:3px 0; padding:0 10px; text-align:center; font-size:16px; line-height:1.5; font-weight:bold; background-color:#2d7fb9; color:#fff; border-radius:5px;}
.btn.openlink:hover{background-color:#ffbe00;}
img.code{width:100px; height:37px; margin:0; vertical-align:middle; display:inline-block;}
.pay-main{padding:0;font-size: 16px; color: #333333;border-radius:0;margin: 15px 0 ;}
@media screen and (max-width:400px){
	.opinion{display:block;}
	.opinion-left01{width:100%;}
	.input-main-style02{width:calc(100% - 104px); display:inline-block;}
}

/** 按鈕 **/
.cart-btn{padding:20px 0; text-align:center; margin-top:40px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.btn-send{font-size:13px;}
a.btn-send{padding:5px 20px; text-align:center; font-size:16px; font-weight:bold; color: var(--primary); min-width:100px; margin:2px; border:1px solid var(--primary); border-radius:20px; transition: all 0.6s;}
a.btn-send:hover{background: var(--primary); color: #fff;}
a.btn-reset{background:var(--third); padding:5px 20px; text-align:center; font-size:16px; color:var(--primary); font-weight:bold; min-width:100px; margin:2px; border-radius:20px;}
a.btn-reset:hover{background:var(--primary); color:#fff;}
a.btn-send-over{background:#7ea2c5; padding:5px 20px; text-align:center; font-size:16px; color:#fff; min-width:100px; margin:2px; border-radius:5px; border:2px solid #7ea2c5;}
a.btn-send-over:hover{background:#96b9dc; border:2px solid #96b9dc;}

@media screen and (max-width:575px){
	a.btn-send{padding:5px 10px; width:calc(50% - 4px);}
	a.btn-reset{padding:5px 10px; width:calc(50% - 4px);}
	a.btn-send-over{padding:5px 10px; width:calc(50% - 4px);}
}



/** 送出訊息 **/
.jump-window-box{max-width:500px; margin:0 auto; border:1px #ccc solid; padding:20px; border-radius:5px;}



/** 訂單&購物車配置網格 **/
.o-col-sm, .o-col-sm-1, .o-col-sm-10, .o-col-sm-11, .o-col-sm-12, .o-col-sm-2, .o-col-sm-3, .o-col-sm-4, .o-col-sm-5, .o-col-sm-6, .o-col-sm-7, .o-col-sm-8, .o-col-sm-9, .o-col-sm-auto{position:relative; width:100%; min-height:1px; padding-right:15px; padding-left:15px;}
.o-col-sm{-ms-flex-preferred-size:0; flex-basis:0; -ms-flex-positive:1; flex-grow:1; max-width:100%;}
.o-col-sm-auto{-ms-flex:0 0 auto; flex:0 0 auto; width:auto; max-width:none;}
.o-col-sm-1{-ms-flex:0 0 8.333333%; flex:0 0 8.333333%; max-width:8.333333%;}
.o-col-sm-2{-ms-flex:0 0 16.666667%; flex:0 0 16.666667%; max-width:16.666667%;}
.o-col-sm-3{-ms-flex:0 0 25%; flex:0 0 25%; max-width:25%;}
.o-col-sm-4{-ms-flex:0 0 33.333333%; flex:0 0 33.333333%; max-width:33.333333%;}
.o-col-sm-5{-ms-flex:0 0 41.666667%; flex:0 0 41.666667%; max-width:41.666667%;}
.o-col-sm-6{-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%;}
.o-col-sm-7{-ms-flex:0 0 58.333333%; flex:0 0 58.333333%; max-width:58.333333%;}
.o-col-sm-8{-ms-flex:0 0 66.666667%; flex:0 0 66.666667%; max-width:66.666667%;}
.o-col-sm-9{-ms-flex:0 0 75%; flex:0 0 75%; max-width:75%;}
.o-col-sm-10{-ms-flex:0 0 83.333333%; flex:0 0 83.333333%; max-width:83.333333%;}
.o-col-sm-11{-ms-flex:0 0 91.666667%; flex:0 0 91.666667%; max-width:91.666667%;}
.o-col-sm-12{-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%;}

@media screen and (max-width:767px){
	.o-col-sm, .o-col-sm-1, .o-col-sm-10, .o-col-sm-11, .o-col-sm-12, .o-col-sm-2, .o-col-sm-3, .o-col-sm-4, .o-col-sm-5, .o-col-sm-6, .o-col-sm-7, .o-col-sm-8, .o-col-sm-9, .o-col-sm-auto{width:100%; max-width:100%; flex:inherit;}
}



/** 頁次 **/
.page{font:13px/2.4 "Microsoft JhengHei"; color:#333; text-align:center; clear:both; margin:15px 0;}
.page a{background:#fff; color: var(--primary); padding:4px 20px;border: 1px solid var(--primary); transition: all 0.6s; border-radius: 20px;}
.page a:hover{background:var(--primary); color:#fff;}
.page br{display:none;}

@media screen and (max-width:640px){
	.page br{display:block;}
}


/** 下版 **/
footer{background:#333;padding:30px 15px; color: #fff;}
footer .footer{display: flex; flex-wrap: wrap; justify-content: space-between;transition: all 0.6s;}
footer .footer .f-logo{width: 320px; margin-bottom: 15px; transition: all 0.6s;}
footer .footer .contact>ul{list-style: none; margin: 0 0 0 20px;padding: 0;transition: all 0.6s;}
footer .footer .contact>ul>li img{width: 16px; margin-right: 15px; transition: all 0.6s;}
footer .footer .contact>ul>li a{ color: #fff;}
footer .footer .contact>ul>li a:hover{ color: var(--secondary);}
footer .footer .copyright-box{display: flex; justify-content: flex-end; align-items: flex-end; flex-direction: column; font-size: 14px;transition: all 0.6s;}
footer .footer .copyright-box .designer a{color: #fff;}
footer .footer .copyright-box .designer a:hover{ color: var(--secondary);}


@media screen and (max-width: 767px){
    footer .footer{flex-direction: column; align-items: center;}
    footer .footer .contact{margin-bottom: 20px;}
    footer .footer .contact>ul{margin: 0;}
    footer .footer .contact>ul>li{text-align: center;}
    footer .footer .contact>ul>li img{display: none;}
    footer .footer .copyright-box{align-items: center; text-align: center;}
}
@media screen and (max-width:575px){
    footer .footer .f-logo{width: 280px;}
}



/** 購物車模組 **/
#sidr-left{font:16px/1.6 Arial, "Microsoft JhengHei"; display:none; position:absolute; position:fixed; top:0; height:100%; z-index:999999; width:260px; overflow-x:none; overflow-y:auto; font-family:"lucida grande", tahoma, verdana, arial, sans-serif; font-size:16px; background:#333; color:#fff; -webkit-box-shadow:inset 0 0 5px 5px #222; -moz-box-shadow:inset 0 0 5px 5px #222; box-shadow:inset 0 0 5px 5px #222;}
#sidr-left *{font:15px/1.6 Arial, "Microsoft JhengHei"; color:#fff;}
#sidr-left .cart-header{padding:15px; text-align:center; position:relative;}
#sidr-left .cart-header .cross{position:absolute; top:5px; right:10px;}
#sidr-left .cart-header .fa{font:20px FontAwesome;}
#sidr-left .ng-hide{padding:15px; text-align:center;}
#sidr-left .cart-items{padding:15px;}
#sidr-left .cart-item{margin:10px 0; display:flex;}
#sidr-left .cart-item .product-link{width:45px;}
#sidr-left .cart-item .product-link img{width:100%;}
#sidr-left .cart-item .cart-item-content{flex:1; margin:0 10px;}
#sidr-left .cart-item .cart-item-content .title{font-size:13px;}
#sidr-left .cart-item .cart-item-content .ng-scope{font-size:13px;}
#sidr-left .cart-item .cart-item-content .price-details{font-size:13px;}
#sidr-left .cart-item .cart-item-content .ng-binding{font-size:13px;}
#sidr-left .cart-item a.remove{width:30px; font-size:14px; color:#ddd; font-family:Arial, "Microsoft JhengHei";}
#sidr-left .cart-item a.remove:hover{color:#c0392b;}
#sidr-left .cart-chkt-btn{width:100%; display:block; padding:15px;}
#sidr-left .cart-chkt-btn button{width:100%; font-size:14px; line-height:1.4em; padding:6px 12px; border:1px solid #888; text-align:center; background-color:transparent; border-radius:4px;}
#sidr-left .cart-chkt-btn button:hover{background-color:#1f2429;}
.modal-backdrop{position:fixed; top:0; right:0; bottom:0; left:0;}