@charset "utf-8";

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

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

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

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

/** google font **/
@import "Open+Sans.css";

*{-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-size:medium;line-height: 1.6;font-family: 'Open Sans', sans-serif,"Microsoft JhengHei";}
.clearfix:after{content:""; display:block; height:0; clear:both; visibility:hidden;}
* html .clearfix{height:1%;}
a,a:hover{text-decoration:none;transition: all 0.3s ease 0s;}
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;}

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

/** 上版 **/
header{background:rgba(255,255,255,.9);position: fixed;width: 100%;z-index: 1000;box-shadow: 1px 0 8px 0 rgba(0,0,0,.15);}
.head-main{max-width:1200px; margin:0 auto; height:100px; padding:0; position:relative;}
.head-main .logo{width: 328px; position:absolute; left:0px; top:12px; height:auto;}
.head-main .logo a{display: block;}
.head-main .logo img{width:100%; height:auto;}
.home{display:none;}
@media screen and (max-width:950px){
	.head-main{height:60px;}
	.head-main .logo{width: 200px;left:5px;top:7px; }
}
@media screen and (max-width:767px){
	.head-main{height:0px;}
	.head-main .logo{width: 154px;top:4px; }
}

/** 主選單與下拉 **/
nav{margin: 0 0 0 520px;}
.menu{max-width:1200px; padding:0; list-style:none; position:relative; margin:0 auto; display:flex;}
.menu>li{flex:1; color:#333; font-size:18px; text-align:center; position:relative; cursor:pointer; padding:0; margin:0;text-transform: uppercase;}
.menu>li>a{color:#333; display:block; padding:36px 10px; margin:0;position: relative;}
.menu>li>a:before{content: "";display:block;visibility: hidden; opacity: 0; width: 0;height: 0;border-style: solid;border-width: 10px 10px 0 10px;border-color: #f96a32 transparent transparent transparent;position: absolute;top:-30px;left: calc(50% - 10px);transition: all 0.4s ease 0s;}
.menu>li>a:after{content: "";display:block;visibility: hidden;opacity: 0; width: 30px; height: 3px;overflow: hidden; border-radius:50px;margin: 0 auto;background: #f96a32;position: absolute;bottom: -3px;left: calc(50% - 15px);transition: all 0.4s ease 0s;}
.menu>li>a:hover{color: #f96a32;position: relative;}
.menu>li>a:hover:before{content: "";display: block;visibility: visible; opacity: 1; width: 0;height: 0;border-style: solid;border-width: 10px 10px 0 10px;border-color: #f96a32 transparent transparent transparent;position: absolute;top: 0;left: calc(50% - 10px);transition: all 0.4s ease 0s;}
.menu>li>a:hover:after{content: "";display: block;visibility: visible; opacity: 1; width: 30px; height: 3px;overflow: hidden; border-radius:50px;margin: 0 auto;background: #f96a32;position: absolute;bottom: 20px;left: calc(50% - 15px);transition: all 0.4s ease 0s;}
.menu>li.sub>ul.sub-menu{background:rgba(249,106,50,1); 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:100px;}
.menu>li.sub>ul.sub-menu>li{display:block; border-bottom:1px #fac8b4 solid;font-size: 15px;}
.menu>li.sub>ul.sub-menu>li:last-of-type{border-bottom:0;}
.menu>li.sub>ul.sub-menu>li>a{display:block; color:#fff; padding:8px 10px; margin:0;}
.menu>li.sub>ul.sub-menu>li>a:hover{background:#000000;}
@media screen and (max-width:1090px){
	nav{margin: 0 0 0 350px;}
}
@media screen and (max-width:950px){
	nav{margin: 0 0 0 210px;}
	.menu>li.sub:hover ul.sub-menu{top:60px;}
	.menu>li>a{padding:16px 8px;}
	.menu>li>a:hover:after{bottom: 5px;}
}
@media screen and (max-width:767px){
	.slicknav_menu{display:none;}
	#menu{display:none;}
	.slicknav_menu{display:block;background:rgba(255,255,255,1);position: fixed;width: 100%;z-index: 1000;box-shadow: 1px 0 8px 0 rgba(0,0,0,.15);}
}

/** edm輪播 **/
.edm{background:#ffffff; position:relative;}
.edm img{vertical-align:middle; width:100%; height:auto; position:absolute;}
@media screen and (max-width:767px){
	.edm{padding: 44px 0 0 0 ;}
}

/** 配置 **/
.warpper{}
.main{}

/** 首頁最新消息 **/
.i-news-main{margin: -110px 0 0 0;}
.i-news-main:before{content: "";display: block;width: 100%;height: 110px;background: url(../images/news-before.png)no-repeat bottom center;position: relative;z-index: 1;}
.i-news-main:after{content: "";display: block;width: 100%;height: 110px;background: url(../images/news-after.png)no-repeat top center;position: relative;z-index: 1;}
.i-news{max-width:1200px; margin:0 auto;padding:2% 0 1% 0;}
.i-news h3{font-size: 36px; color: #333333;background: url(../images/news-title-before.png)no-repeat left center;position: relative;text-transform: uppercase;font-weight: bold;font-style: italic;letter-spacing: 2px;padding: 0 0 0 18px;margin: 0 0 30px 0;}
.i-news h3:before{content: "";display: block;width: 100%; height: 38px; background: url(../images/title-before-bg.jpg)repeat-x;position: absolute;left: -100%;top:3px;}
.i-news h3 .news-more{display:block; font-size:14px; color:#f96a32; font-weight:normal;font-style: normal;letter-spacing: 0; position:absolute; top:5px; right:0;border: 1px #f96a32 solid;}
.i-news h3 .news-more a{display: block; color:#f96a32;background: #fff;padding: 8px 10px;text-transform: uppercase;}
.i-news h3 .news-more a:hover{color:#fff;background:#f96a32;}
.i-news ul{list-style:none; color:#333; padding:0px; margin:0;display: flex;}
.i-news ul li{padding:0; font-size:16px;color: #333333; width: 33.3333%;border-right:1px #f96a32 solid;}
.i-news ul li:nth-child(3n){border-right:0;}
.i-news ul li .day{font-size:30px;color: #fff;width: 92px; height: 46px;padding: 2px 0 0 0; border-radius: 50px 50px 0 0;margin: 0 auto;text-align: center;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8875a+20,f96a32+100 */
background: rgb(248,135,90); /* Old browsers */
background: -moz-linear-gradient(top, rgba(248,135,90,1) 20%, rgba(249,106,50,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(248,135,90,1) 20%,rgba(249,106,50,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(248,135,90,1) 20%,rgba(249,106,50,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8875a', endColorstr='#f96a32',GradientType=0 ); /* IE6-9 */}
.i-news ul li .i-news-content{background: #f4f4f4 url(../images/news_bg.png)no-repeat right bottom;padding:5px 12px;border-top:1px #f96a32 solid;}
.i-news ul li .i-news-content:before{content: "";display: block;width: 100%;height: 12px;background: url(../images/news-shadow.png)no-repeat bottom left;background-size: contain;margin: -18px 0 6px 0;position: relative;z-index: -1;}
.i-news ul li .i-news-content .year{font-size:14px;color: #f96a32;text-align: center;text-transform: uppercase;margin: 0 0 5px 0;}
.i-news ul li .i-news-content h4{padding:0; font-size:16px;color: #333333;line-height: 1.6;margin: 0 0 10px 0;height: 100px;overflow: hidden;}
.i-news ul li a{color:#333; display:block;padding: 8px 14px;}
.i-news ul li a:hover{}

@media screen and (max-width:1200px){
	.i-news-main{margin: -92px 0 0 0;}
	.i-news h3 .news-more{ right:15px;}
}
@media screen and (max-width:900px){
	.i-news-main{margin: -82px 0 0 0;}
}
@media screen and (max-width:767px){
	.i-news-main{margin: -76px 0 0 0;}
}
@media screen and (max-width:600px){
	.i-news-main{margin: -68px 0 0 0;}
	.i-news ul{display: block;}
	.i-news ul li{width:100%;border-right:0;}
	.i-news ul li .i-news-content h4{height: auto;}
}
@media screen and (max-width:450px){
	.i-news-main{margin: -65px 0 0 0;}
	.i-news h3{font-size: 30px;margin: 0 0 20px 0;}
	.i-news h3 .news-more a{padding: 4px 8px;}
}

/** 關於我們 **/
.i-about-main{background: url(../images/about_bg.jpg)no-repeat left 20% center fixed;background-size: cover;margin: -110px 0 0 0;}
.i-about{max-width: 1200px; margin: 0 auto;padding: 110px 0 140px 0;}
.i-about-information{background: rgba(255,255,255,.9);margin: 0 0 0 40%;padding: 20px 0;}
.i-about-information h3{font-size: 36px; color: #333333;position: relative;text-transform: uppercase;font-weight: bold;font-style: italic;letter-spacing: 2px;padding: 0 0 0 18px;margin: 0 0 15px 0;}
.i-about-information h3:before{content: "";display: block;width:12px; height: 38px; background: url(../images/about-title-before.png)no-repeat;position: absolute;left: 225px;top:3px;}
.i-about-information h3:after{content: "";display: block;width:calc(100% - 237px); height: 38px; background: url(../images/title-before-bg.jpg)repeat-x;position: absolute;left: 237px;top:3px;}
.i-about-information h3 .about-more{display:block; font-size:14px; color:#f96a32; font-weight:normal;font-style: normal;letter-spacing: 0; position:absolute; top:3px; right:20px;z-index: 1;}
.i-about-information h3 .about-more a{display: block; color:#f96a32;background: #fff;padding: 10px 10px;text-transform: uppercase;border: 1px #f96a32 solid;height: 38px;}
.i-about-information h3 .about-more a:hover{color:#fff;background:#f96a32;border: 1px #fff solid;}
.i-about-information .i-about-content{padding:0px 18px;font-size: 16px; color: #333333;}
@media screen and (max-width:1200px){
	.i-about-information{margin: 0 15px 0 30%;}
}
@media screen and (max-width:600px){
	.i-about-information h3:before{left: 220px;}
	.i-about-information h3:after{left: 232px;}
	.i-about-information{margin: 0 15px 0 15px;}
}
@media screen and (max-width:450px){
	.i-about-information h3{font-size: 30px;}
	.i-about-information h3:before{left: 190px;top: 0;}
	.i-about-information h3:after{left: 202px;top: 0;width:calc(100% - 202px); }
	.i-about-information h3 .about-more{ right:10px;top: 0;}
	.i-about-information h3 .about-more a{padding: 10px 8px;}
}


/** 首頁產品 **/
.i-pro{margin:0 auto;}
.i-pro-title{font-size:24px; color:#333; padding:10px 0; text-align:center; font-weight:normal; border-bottom:3px #DFDFDF solid; margin:10px 0;}
.i-pro ul{margin:0; padding:5px; list-style:none; display:flex; flex-wrap:wrap;}
.i-pro ul li{width:20%; margin:0; padding:10px; text-align:center;}
.i-pro ul li:hover{background:#f8f6f6;}
.i-pro ul li h4{font-size:15px; color:#504f4d; line-height:1.5em; font-weight:normal; padding:5px 0 5px 0; margin:0;}
.i-pro ul li .i-pro-store{color:#938c83; padding:10px 0 0px 0; display:block; text-decoration:line-through;}
.i-pro ul li .i-pro-price{color:#b83400; font-size:20px; padding:5px; display:block;}

.cart{color:#cecece; font-size:15px; display:block; width:100%; text-align:center;}
.cart a, .cart button{background:#ffffff; padding:5px 8px; color:#333333; font-size:15px; display:block; border:1px #bbbbbb solid; width:100%; text-align:center;}
.cart a:hover, .cart button:hover{background:#ffbe00; color:#fff; border:1px solid #ffbe00;}
.cart a[disable], .cart button[disable]{cursor:no-drop; color:#cecece;}
.cart a[disable]:hover, .cart button[disable]:hover{background-color:#fff; border:1px solid #bbbbbb;}
.pro-more{max-width:1200px; margin:15px auto 0 auto; position:relative;}
.pro-more a{background:#2a2a2a; color:#ffffff; display:table; padding:8px 20px; margin:0 auto; text-align:center;}
.pro-more a:hover{background:#000;}

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

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

/** 內頁banner **/
.inside-banner{background: url(../images/banner.jpg)no-repeat left bottom;background-size: cover; padding:150px 0 0 0 ;}
.inside-banner .banner-title{display: table;font-size:32px;font-style: italic;letter-spacing: 2px;font-weight: bold;color:#f96a32; margin:50px auto; padding:0 20px;border-radius:5px;box-shadow:0 0 0 4px rgba(255,255,255,.9), 0 0 14px 0 rgba(0,0,0,.5);border: 2px #f96a32 solid;text-align: center;text-transform: uppercase;position: relative;background: rgba(255,255,255,.9);
}
.inside-banner .banner-title:before{content: "";display: block;width: 30px; height: 4px;background:rgba(255,255,255,.9);position: absolute;top: calc(50% - 2px);left: -36px;}
.inside-banner .banner-title:after{content: "";display: block;width: 30px; height: 4px;background:rgba(255,255,255,.9);position: absolute;top: calc(50% - 2px);right: -36px;}
.inside-banner:after{content: "";display: block;width: 100%;height: 110px;background: url(../images/news-before.png)no-repeat top center;position: relative;z-index: 1;}
@media screen and (max-width:950px){
	.inside-banner{padding:110px 0 0 0 ;}
	.inside-banner .banner-title{margin:15px auto; }
	
}
@media screen and (max-width:860px){
	.inside-banner:after{height:90px;}
}
@media screen and (max-width:450px){
	.inside-banner .banner-title{font-size:28px;padding:0 15px;}
}

/** 內頁架構 **/
.content-body{max-width:1200px; margin:0 auto; background:#ffffff; padding:20px 0 110px 0;min-height: 500px;}
.page-title{font-size:36px;font-weight: bold;color:#333;margin:20px 0 20px 0;font-style: italic;position: relative;background: url(../images/news-title-before.png)no-repeat left top 3px;letter-spacing: 2px;padding: 0 0 0 18px;}
.page-title:before{content: "";display: block;width: 100%; height: 38px; background: url(../images/title-before-bg.jpg)repeat-x;position: absolute;left: -100%;top:3px;}
.page-main{padding:0; font-size:16px; color:#333;min-height: 300px;}
@media screen and (max-width:450px){
	.page-title{font-size:26px;padding: 7px 0 7px 18px;}
}
/** 左邊分類 **/
.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{}
.in-left-menu>ul{margin:0; padding:0; list-style:none;display:flex;flex-wrap: wrap;align-items:center;justify-content: center;}
.in-left-menu>ul>li{font-size:16px; color:#333; padding:0;margin:10px 8px; min-width: 170px;text-align: center;}
.in-left-menu>ul>li>a{background:#f8eeea; color:#333; display:block; padding:5px 10px;border:1px #f96a32 solid; }
.in-left-menu>ul>li>a:hover{background:#f96a32;color: #ffffff;}
.in-left-menu>ul>li>.current{background:#f96a32;color: #ffffff;}
.in-left-menu>ul>li>.current:after{content: "";display: block;margin: 6px auto -16px auto;width: 0;height: 0;border-style: solid;border-width: 10px 10px 0 10px;border-color: #f96a32 transparent transparent transparent;}
.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:860px){
	.classBox{padding:0 0 20px 0;}
	ul.classLink{display:none;}
	.m_classLink{display:block; position:relative; background-color:#ffffff; border:1px solid #f96a32;}
	.m_classLink a.main{display:block; background:none; font-size:15px; font-family:"Microsoft JhengHei", "新細明體", sans-serif; color:#333; position:relative; padding:8px;}
	.m_classLink a.main i{display:block; font-size:15px; background:#f96a32; 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 #f96a32; 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 #f96a32; font-family:"Microsoft JhengHei", "新細明體", sans-serif; font-size:15px; color:#222;}
	.m_classLink ul li:first-child a{border:none;}
	.m_classLink ul li a:hover{background:#f8eeea;}
	.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 #f96a32; position:inherit; left:inherit; top:inherit; z-index:999; box-sizing:border-box;}
	.left-menu-title{display:none;}
	.left-beautify{display:none;}
}

/** 最新消息 **/
.news{}
.news ul{margin:0; padding:0; list-style:none;display: flex;flex-wrap: wrap;}
.news ul li{width: calc(50% - 20px);padding: 0;margin: 10px;}
.news ul li a{color:#333; display:flex; align-items:center; padding:10px;background: #f8eeea;border-radius: 500px;box-shadow: 0 0 0 0 #f96a32;transition: all 0.3s ease 0s;}
.news ul li:nth-child(even) a{flex-direction: row-reverse;}
.news ul li a:hover{box-shadow: 0 0 0 2px #f96a32;background: #ffffff;transition: all 0.3s ease 0s;}
.news ul li .news-date{font-size:13px;text-transform: uppercase; color: #fff;width: 80px; height: 80px;padding:15px 5px; border-radius: 50px;margin: 0;line-height: 1;text-align: center;display: flex;flex-wrap: wrap; align-items: center;justify-content: center;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8875a+20,f96a32+100 */
background: rgb(248,135,90); /* Old browsers */
background: -moz-linear-gradient(top, rgba(248,135,90,1) 20%, rgba(249,106,50,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(248,135,90,1) 20%,rgba(249,106,50,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(248,135,90,1) 20%,rgba(249,106,50,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8875a', endColorstr='#f96a32',GradientType=0 ); /* IE6-9 */}
.news ul li .news-day{font-size:36px;display: block;width: 100%;}
.news ul li .news-content{flex:1; font-size:16px; color:#333;padding:10px}
.news-detail-date{font-size: 14px;display: table;color:#fff;text-transform: uppercase;letter-spacing: 2px;font-style: italic; padding:4px 10px;margin: 5px 0 15px 0;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8875a+20,f96a32+100 */
background: rgb(248,135,90); /* Old browsers */
background: -moz-linear-gradient(top, rgba(248,135,90,1) 20%, rgba(249,106,50,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(248,135,90,1) 20%,rgba(249,106,50,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(248,135,90,1) 20%,rgba(249,106,50,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8875a', endColorstr='#f96a32',GradientType=0 ); /* IE6-9 */}

@media screen and (max-width:767px){
	.news ul li{width: calc(100% - 0px);margin: 10px 0;}
}

/** 產品搜尋 **/
.search{padding:0;}
.search-input{padding:0px 0 10px 0; position:relative; color:#333;}
.search-input img{position:absolute; right:0; top:0px;}
.search input{background:#eeeeee; font-size:15px; color:#333; padding:5px 66px 5px 15px; width:100%; border:0; margin:0; vertical-align:middle; min-height:31px; font-family:"Microsoft JhengHei";}
.search img{vertical-align:middle;}
.pro-search-info{font-size:18px; color:#64691F; line-height:1.5em; border-bottom:1px #CCC dotted; margin-bottom:20px; text-align:center; padding-bottom:10px;}

/** 產品列表介紹 **/
.pro-store-info{font-size:15px; 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;}
.pro-list ul li:hover{background:#f8f6f6;}
.pro-list ul li h4{font-size:15px; 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:575px){
	.pro-list ul li{width:50%; padding:5px;}
}

/** 產品明細 **/
h3.pro-detaile-title{font-size:18px; color:#333; padding:5px; margin:0 0 10px 0; font-weight:normal;}
.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:15px; 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{background:#999; font-weight:normal; border-left:5px #111111 solid; padding:8px 10px; font-size:20px; color:#fff; margin:25px 0 15px 0;}
.pro-content{padding:0px 0; font-size:15px; 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;}
}


/** FAQ **/
.faq>ul{margin:0; padding:0 5px; list-style:none;}
.faq>ul>li{border-bottom:1px #fff solid; font-size:15px;}
.faq>ul>li .qa_title{background:#ffffff; font-weight:normal; border-left:8px #9c9c9c solid;}
.faq>ul>li .qa_title a{color:#555555; display:block; padding:10px 0 10px 10px;}
.faq>ul>li .qa_title a:hover{background:#dbdbdb;}
.faq>ul>li .qa_content{border-top:1px #CCC dotted; padding:10px; font-size:15px; color:#666;}
.faq>ul>li .qa_content a{color:#555555; display:initial;}
.faq>ul>li .qa_content a:hover{background:none; text-decoration:underline;}
.opacl{font-size:12px; line-height:20px; padding-bottom:10px;}
.opacl a{background:#959595; color:#fff; padding:7px 15px; margin:0 5px; -webkit-border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0;}
.opacl a:hover{background:#333;}
.faq>ul>li .qa_content .close_qa{font-size:12px; color:#999; text-align:right;}
.faq>ul>li .qa_content .close_qa a{color:#999;}
.faq>ul>li .qa_content .close_qa a:hover{color:#666; background:none;}

/** 聯絡我們 **/
.contact-body{}
.contact-note{padding:10px 0; font-weight:bold; font-size:15px; color:#900;}
.contact{}
.contact ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.contact ul li{display: flex;padding: 0;margin:10px;width: calc(50% - 20px);}
.contact ul li .contact-information{flex: 1;padding: 10px 0px 10px 20px;}
.contact ul li .contact-information h4{padding: 0;margin: 0px 0 15px 0;font-size: 20px;}
.contact ul li .contact-information .contact-tel{margin: 8px 0;display: flex;}
.contact ul li .contact-information .contact-fax{margin: 8px 0;display: flex;}
.contact ul li .contact-information .contact-address{margin: 8px 0;display: flex;}
.contact ul li .contact-information span.contact-title{color: #fff;margin: 0; padding: 3px 10px;display: flex;align-items: center;justify-content: center; width: 60px;min-width: 60px; text-align: center;border-radius: 5px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8875a+20,f96a32+100 */
background: rgb(248,135,90); /* Old browsers */
background: -moz-linear-gradient(top, rgba(248,135,90,1) 20%, rgba(249,106,50,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(248,135,90,1) 20%,rgba(249,106,50,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(248,135,90,1) 20%,rgba(249,106,50,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8875a', endColorstr='#f96a32',GradientType=0 ); /* IE6-9 */}
.contact ul li .contact-information span.contact-content{flex: 1;padding: 3px 0px 3px 10px;display: block;}
.contact ul li .contact-information span .fa-map-marker{padding: 0 0 0 10px;font-size: 24px;color: #333333;}
.contact ul li:hover .contact-information span .fa-map-marker{color: #f96a32;}
.contact-img{background:#ffffff; width:200px; position:relative;display:flex; align-items:center; justify-content:center;border: 1px #f8eeea solid;box-shadow: 3px 3px 0 0 #f8eeea;}
.contact-img a{}
.contact-img img.index-pro-img{width:auto; height:auto; flex-shrink:0;}
.contact ul li:hover .contact-img{border: 1px #f96a32 solid;box-shadow: 3px 3px 0 0 #f96a32;}
@media screen and (max-width:880px){
	.contact ul li{margin:10px 0;width: calc(100% - 0px);}
}
@media screen and (max-width:500px){
	.contact ul li{display:block;}
	.contact-img{width: 250px; margin: 0 auto;}
	.contact ul li .contact-information h4{text-align: center;}
	.contact ul li .contact-information{flex: 1;padding:10px 0;}
}
/** 表單欄位 **/
.form-box input, .form-box img{vertical-align:middle;}
.opinion{display:flex; flex-wrap:wrap; margin:5px 0; border:1px solid #ced4da; border-radius:3px; overflow:hidden;}
.opinion-left01{background:#e9ecef; width:110px; min-width:110px; padding:5px 15px; font-weight:bold; font-size:15px; 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:15px; 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:15px; 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:15px; 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:15px; 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:15px; 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:15px; 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:15px; 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:15px; 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;}

@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; border-top:5px solid #eee;}
.btn-send{font-size:13px;}
a.btn-send{padding:5px 20px; text-align:center; font-size:15px; font-weight:bold; color:#373737; min-width:100px; margin:2px; border:2px solid #373737; border-radius:5px;}
a.btn-send:hover{background:#e9ecef;}
a.btn-reset{background:#e9ecef; padding:5px 20px; text-align:center; font-size:15px; color:#373737; font-weight:bold; min-width:100px; margin:2px; border:2px solid #e9ecef; border-radius:5px;}
a.btn-reset:hover{background:#373737; color:#fff; border:2px solid #373737;}
a.btn-send-over{background:#7ea2c5; padding:5px 20px; text-align:center; font-size:15px; 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);}
}

/** 會員登入 **/
.member-login-box{max-width:900px; margin:0 auto;}
.login-tool ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.login-tool ul li{padding:0; margin:5px; min-width:50px;}
.login-tool ul li img{width:100%;}

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

/** 訂單列表 **/
.order-list ul{list-style:none; padding:0; margin:0;}
.order-list ul li{padding:8px 5px; margin:0;}
.order-list ul li .order-list-content{text-align:center; margin:0;}
.order-list ul li:first-of-type{border-bottom:0; padding:8px 5px;}
.order-list ul li:first-of-type .order-list-content{font-size:15px; text-align:center;}
.order-list ul li:first-of-type .order-list-content b{display:block; background-color:#f4f8fb; line-height:2; border-radius:5px;}
.order-list .order_number{font-size:15px; color:#333;}
.order-list .order_date{font-size:15px; color:#333;}
.order-list .order_total{font-size:15px; color:#333;}
.order-list .order_status{font-size:15px; color:#333;}
.order-list .order_details{font-size:15px; color:#333;}
.order-list .order_details a{display:block; color:#666; padding:3px 10px; line-height:1.5em;}
.order-list ul li:hover{background-color:#f4f8fb;}
.order-list ul li:hover .order_details a{color:#c72729;}
.oproject{display:none;}
.oproject-content{flex:1;}

@media screen and (max-width:767px){
	.order-list ul li .order-list-content{padding:5px 0;}
	.order-list ul li:first-of-type{display:none;}
	.oproject{display:inline-block; color:#000; width:100px; margin:0;}
	.oproject-content{width:100%; max-width:100%; text-align:left;}
}

/** 訂單明細 **/
.order-detail{font-size:15px; color:#333; margin:0 0 20px 0;}
.order-detail h3{color:#990000; font-size:18px; padding:0; margin:25px 0 10px 0;}
.order-numbering{color:#2d7fb9; font-size:18px;}

/** 訂單&購物車配置網格 **/
.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;}
}

/** step **/
.steps{text-align:center; padding:30px 0;}
.steps .step{display:inline-block; width:240px; max-width:33%; text-align:center; margin:0 -2px;}
.steps .step span{display:block; font-weight:bold;}
.steps .step span.badge{position:relative; height:30px; line-height:30px; text-align:center;}
.steps .step span.badge .text{position:absolute; left:calc(50% - 15px); font-size:18px; font-family:Arial; color:#fff; background-color:#d9d9d9; display:inline-block; width:30px; height:30px; line-height:30px; border-radius:50%; z-index:1;}
.steps .step.active span.badge .text{color:#fff; background-color:#000;}
.steps .step span.badge:before{content:""; position:absolute; background-color:#d9d9d9; width:100%; height:2px; top:50%; left:0; margin-top:-1px; z-index:0;}
.steps .step:first-child .badge::before{width:50%; left:50%;}
.steps .step:last-child .badge::before{width:50%; right:50%;}

/** 購物車第一步驟 **/
.shopping-car{margin:0 0 40px; padding:10px 0;}
.shopping-car ul{list-style:none; padding:0; margin:0;}
.shopping-car ul li{padding:12px 5px; margin:0;}
.shopping-car ul li .shopping-car-content{margin:0;}
.shopping-car ul li:first-of-type{border-bottom:0; padding:8px 5px;}
.shopping-car ul li:first-of-type .shopping-car-content{font-size:15px; text-align:center;}
.shopping-car ul li:first-of-type .shopping-car-content b{display:block; background-color:#f4f8fb; line-height:2; border-radius:5px;}
.shopping-car .shop-car-info{display:flex; font-size:15px; vertical-align:middle; text-align:left; align-items:center;}
.shopping-car .shop-car-info a.pro-photo{width:60px; margin:0 15px 0 0;}
.shopping-car .shop-car-info .description{font-size:15px; margin:0px; color:#000; flex:1; width:100%; text-align:left;}
.shopping-car .shop-car-info .description .shop-car-info-title{font-size:15px; font-weight:bold;}
.shopping-car .shop-car-info .description .spec{font-size:13px; color:#666;}
.shopping-car .shop-car-price{display:block; height:100%; font-size:15px; color:#333; text-align:center;}
.shopping-car .shop-car-price .original-price{display:block; font-size:12px; text-decoration:line-through; color:#999;}
.shopping-car .shop-car-quantity{display:block; font-size:15px; text-align:center;}
.shopping-car .shop-car-subtotal{display:block; font-size:15px; color:#900; text-align:center;}
.shopping-car .shop-car-del{display:block; font-size:15px; vertical-align:middle; text-align:center;}
.shopping-car .shop-car-del a{color:#333; padding:5px 10px;}
.shopping-car .shop-car-del a:hover{color:#f00;}
.shopping-car ul li.addcontainer{background-color:#eee; padding:10px 5px 10px 20px;}
.shopping-car ul li.addcontainer h1{background-color:#4697bf; margin:0 0 5px; padding:5px 10px; font-size:15px; line-height:1.2em; color:#fff; border-radius:3px;}
.shopping-car ul li.addcontainer b{color:#000;}
.shopping-car ul li.addcontainer .shop-car-img img.pro-photo{margin:0 15px 0 0; width:90px; height:90px; padding:10px; border:1px #ccc solid;}
.shopping-car ul li.addcontainer .addc-price{font-size:18px; font-weight:bold; color:#f00; margin:0 3px;}
.discountCoupon{position:relative;}
.discountCoupon span{content:"X"; display:inline-block; background-color:#e4e4e4; width:26px; height:26px; margin:1px; position:absolute; right:15px; top:0; font-size:12px; line-height:26px; text-align:center; cursor:pointer;}

@media screen and (max-width:767px){
	.shopping-car ul li .shopping-car-content{padding:5px 0;}
	.shopping-car ul li:first-of-type{display:none;}
	.shopping-car .shop-car-price{text-align:right;}
	.shopping-car .shop-car-quantity{text-align:left; flex:1; order:1;}
	.shopping-car .shop-car-subtotal{text-align:right; flex:1; order:3; font-weight:bold; font-size:18px;}
	.shopping-car .shop-car-del{width:50px; order:2;}
	.discountCoupon span{right:0;}

}

/** 總計 **/
.checkout-cart-summary{padding:10px 0;}
.checkout-cart-summary .subtotal{font-size:15px; color:#333; padding:5px; margin:0;}
.checkout-cart-summary .subtotal-name{font-weight:bold; text-align:left;}
.checkout-cart-summary .subtotal-name .subtotal-quantity{font-weight:bold;}
.checkout-cart-summary .subtotal-content{text-align:right;}
.checkout-cart-summary .total{display:flex; flex-wrap:wrap; font-size:15px; color:#333; border-top:1px #ccc solid; padding:5px; margin:10px 0 0 0;}
.checkout-cart-summary .toc{font-weight:bold; color:#900; font-size:18px;}

@media screen and (max-width:767px){
	.checkout-cart-summary .subtotal-name{padding:0;}
	.checkout-cart-summary .subtotal-content{padding:0;}
}

/** 購物車第二步驟 **/
.section-body{margin:0 0 20px 0;}
.shopping-list-more{background-color:#e9ecef; font-size:18px; text-align:center; padding:10px 0; display:block; width:100%; cursor:pointer; border-radius:5px; overflow:hidden;}
.shopping-list-more i.fa.fa-question-circle{margin-left:5px; font-size:24px; color:#2d7fb9;}
.shopping-list-more:hover i.fa.fa-question-circle{color:#ffbe00;}
.shopping-list-more:hover{background-color:#e9ecef;}
.shopping-list-more .shopping-car{margin:20px 0 0 0;}
.shopping-list-toc{text-align:center; font-weight:bold; color:#900; font-size:18px;}

/** 頁次 **/
.page{font:14px/2.4 "Microsoft JhengHei"; color:#333; text-align:center; clear:both; margin:15px 0;}
.page a{background:#333333; color:#fff; padding:4px 10px;}
.page a:hover{background:#c8400b; color:#fff;}
.page br{display:none;}

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

/** 下版 **/
footer{background: url(../images/footer_bg.jpg);position: relative;}
footer:before{content: "";display: block;width: 100%;height: 118px;background: url(../images/footer-before.png)no-repeat bottom center;position: absolute;top: -118px; left: 0;}
footer .footer{max-width:1200px; margin:0 auto; }
footer .footer .footer-logo{width: 304px; margin:0 auto;position: relative;top: -94px;}
footer .footer .footer-logo img{width: 100%;}
footer .footer .footer-information{display: flex;align-items: flex-end; margin: -94px 0 0 0;padding: 10px 0;}
footer .footer .footer-information .f-content{font-size: 15px ;color: #fff;flex: 1;line-height: 1.8;}
footer .footer .footer-information .f-content a{color: #fff;}
footer .footer .footer-information .f-content a:hover{text-decoration: underline;}
footer .footer .footer-information .f-content span{padding: 0 20px 0 0;}
footer .footer .footer-information .f-content i{width: 20px;margin: 0 6px 0 0;font-size: 16px;text-align: center;}
footer .footer .footer-information .copyright{font-size: 12px ;color: #fbd0bf;width:350px;margin: 0 0 0 15px;text-transform: uppercase;text-align: right;}
footer .footer .footer-information .copyright .wd{}
footer .footer .footer-information .copyright .wd a{color: #fbd0bf;}
footer .footer .footer-information .copyright .wd a:hover{color: #ffffff;}
footer .footer .footer-information .f-content i.fa-phone{font-size: 20px;}
footer .footer .footer-information .f-content i.fa-map-marker{font-size: 20px;}
@media screen and (max-width:1110px){
	footer .footer{padding:  0 10px;}
	footer .footer .footer-information{display: block;text-align: center;}
	footer .footer .footer-information .f-content{width: 100%;}
	footer .footer .footer-information .copyright{text-align: center;width: 100%;margin: 5px 0 0 0;}
}
@media screen and (max-width:690px){
	footer .footer .footer-logo{width: 280px;top: -92px;}
	footer .footer .footer-information{margin: -92px 0 0 0;}
	footer .footer .footer-information .f-content span{padding: 0;width: 100%;display: block;}
	footer .footer .footer-information .f-content br{display: none;}
}