@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);/*思源黑體 Noto Sans TC*/

@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);/*圓體 cwTeXYen*/

body{

	font-family: "微軟正黑體", "Arial Unicode MS";

	font-size: 15px;

	color: #000;

	word-wrap: break-word;

	word-break: break-all; 

	background-color: #f2ecec;

	}

a{color:#535353;}

a:hover{color:#122f41; text-decoration: none}



/*==反選的底色==========================================*/	

::selection {text-shadow: none;background: #362e2b;	color:#eee;}

img::selection {background: 0 0}

/*============================================================*/

.title{font-family:'微軟正黑體', Arial; font-size: 30px; color: #e64346; text-align: center;display:flex;

        align-items: center; margin:1% 0 2.5%; position:relative}/*標題*/

.title:after,.title:before {

        content: "";

        flex: 1;/*幾等份*/

        border: none;

        margin: 0 1.5rem;

        border-top: 5px solid #e64346;

}



.title2{font-family:'微軟正黑體', Arial; font-size: 30px; color: #fff; text-align: center;display:flex;

        align-items: center; margin:1% 0 2.5%;position:relative}/*標題*/

.title2:after,.title2:before {

        content: "";

        flex: 1;/*幾等份*/

        border: none;

        margin: 0 1.5rem;

        border-top: 5px solid #fff;

}

.title3{font-family:'微軟正黑體', Arial; font-size: 30px; color: #122f41; text-align: center;display:flex;

        align-items: center; margin:1% 0 2.5%;position:relative}/*標題*/

.title3:after,.title3:before {

        content: "";

        flex: 1;/*幾等份*/

        border: none;

        margin: 0 1.5rem;

        border-top: 5px solid #122f41;

}



.title-textsyle1{ color: #992621; text-align: left;margin: 1% 0 2%; padding: 0 0 3px 15px; width: 100%; }

.title-textsyle2{color: #a65d02; text-align: left;margin: 1% 0 2%; padding: 0 0 3px 15px; width: 100%;}

.title-textsyle3{color: #006633; text-align: left;margin: 1% 0 2%; padding: 0 0 3px 15px; width: 100%;}

.container-padding{padding: 1.5% 15px; min-height: 63vh; }

.container-bg-padding{padding: 1.5% 15px; min-height: 70vh; background-color:#fff; margin:1% auto;}

/*欄位設定*/

.col-bottom{ margin-bottom: 30px;}

@media (max-width:767px){

.col-bottom{ margin-bottom: 10px;}	

}

.img-box{position: relative; overflow: hidden;;box-sizing: border-box;background-color: #fff; box-shadow: 0 0 5px #d2d2d2}

.col-bottom img.img-borderstyle2:hover{opacity: .6}

/*img設定*/

.img-borderstyle1{transition: all 0.5s; padding: 5px;}

.img-borderstyle1:hover{opacity: 0.6; transform: scale(1.1);}

.img-borderstyle2{border: 1px solid #a2c571;transition: all 0.5s;}





/*scroll-up-top*/

.scroll-up{ width: 50px; height: 50px;background-color: #44413f; border: 1px solid #fff;border-radius: 50%;position: fixed;

    bottom: 65px;right: 20px;z-index: 100;cursor: pointer; text-align: center; line-height: 50px; display: none;color: #fff}

.scroll-up::before{content: "\f106";  font-family: FontAwesome; ; color:#fff;  position: absolute;top: -15px;width: 50px;

    left: 0px;}

.scroll-up:hover{ background-color: #333; color:#E4C798}



/*顏色設定*/

.color_red{ color:#FF0004}

.date-now {

    text-align: right;

    margin-top: 10px;

    color: #333;

    font-size: 14px;

	}

.date-now::before {

    content: "\f073";

    font-family: FontAwesome;

	padding-right: 5px;}

/*==navbar_padding==========================================*/	

.navbar_padding{padding-top:90px }

@media  (max-width : 768px) {

.navbar_padding{padding-top:60px }	

}



/*====index-link===========*/

.index-link{}

.index-link ul{ margin:0; padding:0}

.index-link > ul > li{ list-style: none;line-height:2.0; border-bottom:1px #fff dashed; padding-right:30px; padding:0; width:47%; float:left; box-sizing:border-box; margin-right:3%}

.index-link > ul > li::before{ content: "\f0da";  font-family: FontAwesome; padding-right: 5px}

.index-link > ul > li a:hover{ color:#d2d2d2}

@media (max-width: 767px) {

.index-link > ul > li{width:100%}

}

/*========indexnews============*/

.indexnews{margin: 5% auto 2%;}

.newtime{font-size: 14px;color: #676767;float: right;padding-top: 25px}

.indexnews ul{ margin:0; padding:0; width: 100%;display:flex;flex-wrap:wrap;}

.indexnews ul li{list-style:none;}

.indexnews .news-box{background-color:#fff; box-sizing: border-box; box-shadow: 0 0 5px #d2d2d2; overflow: hidden; transition:all .5s; padding-bottom: 10px;}

.indexnews .news-box:hover,.indexnews a news-box:hover{background-color:#122f41; color:#fff}

.indexnews .news-box:hover span,.news-box:hover h4{color:#fff}

.news-img-box{

	position: relative;

    overflow: hidden;

    box-sizing: border-box;

    width: 100%;

    height: 0;

    padding-top: 75%;/*4:3*/

}

.img-bg-h{ 

	position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    max-width: 100%;

    max-height: 100%;

    margin: auto;

	transition: all 0.5s;

}

.img-bg-h:hover{opacity: 0.6; transform: scale(1.1);}



.img-bg2{position: relative;background-size: cover; height:190px;background-position: center;transition: all 0.5s;width: 99.99%}

.img-bg2:hover{opacity: 0.6; transform: scale(1.1);}

.news-box h4{padding: 0 10px; line-height: 1.3}

.news-box h4:hover{ color:#fff}

.indexnews ul li h4 a{font-size: 17px; color:#fff;letter-spacing:1px;  }

.indexnews ul li h4 a:hover{color: #fff;text-decoration: none;}

.news-more-link {

    font-size: 17px;
	font-weight:600;
	position:absolute;
	right:30px;
	top:-5px;
}

.news-more-link2 a{
    font-size: 17px;
	font-weight:600;
	position:absolute;
	right:30px;
	top:-5px;
	color:#fff;
}
.news-more-link2 a:hover{
  color:#f8ccc4;
}

/*=====news==========================================*/

.news-title{font-family:'微軟正黑體', Arial; font-size: 30px; color: #122f41; text-align: center;display:flex;

        align-items: center; margin:1% 0 2.5%;}/*標題*/

.news-title:after,.news-title:before {

        content: "";

        flex: 1;/*幾等份*/

        border: none;

        margin: 0 1.5rem;

        border-top: 5px solid #122f41;

}



.news{box-shadow: 0 0 5px #d2d2d2; margin: 1% 0;background-color: rgba(255,255,255,.8);transition: all 0.5s;padding-bottom: 10px;}

.news:hover{ background-color:#122f41;color: #fff}

.news:hover a span.date{color:#fff;}



.news .news-img-box,.news .mv{overflow: hidden;background-color: #fff;}

.news:hover  h4{color:#fff;}

.news  h4{padding: 0 10px; line-height: 1.3}

.news  h4:hover{ color:#fff}

.img-bg{position: relative;background-size: cover; height:190px;background-position: center;transition: all 0.5s;width: 99.99%}

.img-bg:hover{opacity: 0.6; transform: scale(1.1);}

.news a span.date,.indexnews span.date{color: #898989; border-radius: 20px;padding: 1px 10px;font-size: 13px; letter-spacing: 0.5px}

.news a span.date::before,.indexnews span.date::before{content: "\f073";  font-family: FontAwesome; padding-right:5px;}



/*==news_detail==========================================*/	

.news_detail{}

.news_detail > h2{ font-size:24px; font-weight: bold;}

.news_detail_img{ text-align:center; width:auto;height: auto;max-width: 90%; margin-bottom:10px;}

.news_detail img{ max-width:100% !important; height:auto !important}

.share{}

.share ul{}

@media (max-width:420px){

.share ul{margin-left: 20%}	

}

.share ul li{list-style: none;float: left;margin-right: 3% }

.share ul li a{color: #fff;  }

.share ul li.share-fb{background-color:#3b5998;color: #fff;padding: 5px 10px;box-sizing: border-box;}

.share ul li.share-fb::before{content: "\f09a";font-family: FontAwesome; padding-right: 5px }

.share ul li.share-line{background-color:#01b901;color: #fff;padding: 5px 10px 5px 30px;box-sizing: border-box;position: relative;}

.share ul li.share-line::before{content: "";background-image: url(../images/symbol/line_icon.svg);width: 30px;height: 30px;position: absolute;left: 0;top: 0;background-repeat: no-repeat;}

.share ul li.share-fb a,.share ul li.share-line a{display: inline-block}

/*==bannerimg==========================================*/	

.bannerimg{ background-repeat: no-repeat; width: 100%; height: 100vh;background-size:contain;}

/*====MemoSpec===========*/

.memoSpec { font-size:15px; color: #000;}

.memoSpec a{ color:#333}

.memoSpec a:hover{ text-decoration:none; color:#003567 !important; font-weight:bold;}

.memoSpec p{font-size: 15px;letter-spacing: 1px;line-height:1.3;}

.memoSpec h1{font-family: 'Kaushan Script',"微軟正黑體", Arial; font-size: 48px;color: #362e2b;}/*英文標題*/

.memoSpec img{ max-width:100% !important; height: auto !important;}

.memoSpec table.noborder{ borer:0;}

.memoSpec table.noborder tr td{ text-align: center}

.memoSpec  table tr th{ background-color:#969696; color:#333; text-align:center;}

.table_style1{}

.table_style1 tr.block{ background-color:#262626; color:#fff;}

.table_style1 tr td{ padding:3% 0 2% 3%;}

/*==coll_info==========================================*/

.coll_info{color: #535353;font-size:14px;}

.coll_info h3{ color:#362e2b; text-align:center; line-height:1.5; font-size:16px;margin:15px 0 10px;}

/*===========bottom-comp-info===========*/

.comp-info{

	background:#009999;

	padding: 2% 0 0;

	color: #fff;

	line-height:1.5;

	letter-spacing:0.5px;

	}

.comp-info  a{color: #fff}

.comp-info h4{ padding:0; margin:0 0 1%; letter-spacing:1px; }

@media (max-width:767px) {

	.comp-info h4{ margin: 5% 0}	

}

.comp-info h2{ width: 50%; margin: 15px auto;color: #fff; text-align: center;}

.comp-time-title{ color:#fff;background-color: #982A2B; letter-spacing:2px; text-align:center; padding:2%; margin-bottom:1%}

.comp-time{ color:#fff;background-color: #B80608; letter-spacing:2px;padding:2% ;margin-bottom:1%}

.info-item{padding-bottom: 1%}

@media (max-width:767px) {

	.comp-info h2{ width: 100%;} 

}

/*====bottom-icon===========*/

.bottom-icon{ height: 40px;margin-top:2%;}

.bottom-icon ul {margin: 0; padding: 0;}

.bottom-icon ul li{ list-style: none;float: left; margin-right: 3%;}



/*====footer===========*/

footer {padding: 5px 0;text-align: center;font-size:13px;background-color:#3c3b40;color:#fff;}

footer a{ color:#fff}

footer a:hover{ color:#E4C798}

/*==============================公司網頁內文==============================*/

/*關於我們*/

.about{}

.about p{ line-height: 2.0}

/*==prodshow 產品===================================================================*/

/*prodimgbox*/

.prodimgbox{ padding:15px; }

.prodimgbox:hover{opacity:0.7;}

.prodimgsize{ height:200px; display: flex; justify-content: center; align-items: center; }/*垂直置中*/

@media (max-width: 420px){

.prodimgsize{ height:120px;}

}

/*prodshow*/

.prod_imggroup{}

.prod_imggroup ul{ margin: 10px 5px;}

.prod_imggroup ul li{float: left; border: 3px solid #fff; width:125px;height: 125px;  background-size: cover; background-position: center center;background-repeat: no-repeat;position: relative;display: inline-block;margin-right: 15px; margin-bottom: 10px;}

.prod_imggroup ul li:nth-child(4n){margin-right: 0px;}

.prod_imggroup ul li:after{width:130px;  height: 130px;  content: " ";  position: absolute;  top:-6px;  left:-6px;  border: 1px solid #c9c9c9;}

/*prodtext*/



.prodtext { }

.prodtext h6{color:#294273; font-size: 14px; font-weight: 600;margin: 10px 0 10px }/*型號*/

.prodtext h3{font-family: "微軟正黑體"," 新細明體", Arial Unicode MS; font-weight: 800;color: #000;font-size: 20px;margin: 10px 0 20px; }

.prodtext h4{color: #898989;line-height: 1.8;font-size: 15px;margin-bottom: 10px;}



.prodname{font-family: "微軟正黑體","新細明體", Arial Unicode MS; font-size: 15px;color: #000}

.prodname a{color: #000}

.prodname a:hover{color:#632a89 }

@media (max-width: 767px){

	.prodname{ height: 40px}

	

}

.price-1{color: #333; line-height:20px}/*原價*/

.price-2{color: #7d0000;font-weight: 600;line-height:20px}/*熱銷價*/



.prodshow_content{ padding-top: 20px;}

/*==產品選單===================================================================*/

/*leftemenu_prod*/



h5.lar i{color:#5e2b88}

h5.lar a{ color:#333;}

#menu{

	margin:0px; padding:0px;

	}

#menu h4{

	padding-bottom: 5px;

	color:#000; font-size:16px; font-weight:bold;letter-spacing:1px;

	padding-left: 5px;

	cursor: pointer;

	margin-bottom: 5px; margin-top:10px;

	}

#menu h4 span{color: #ccc;font-size: 15px;font-weight: normal;margin-left: 3px;}

#menu li{list-style-type: none;}

#menu li {color: #002a40;}	

#menu li a{

	color: #000; letter-spacing:1px;font-size:15px; padding: 2px 0px 2px 15px; display: block;position: relative;transition: all 0.3s;

	}

#menu li a::before{content: "\f101";font-family: FontAwesome; padding-right: 5px}	

#menu li a:hover{

	color: #002a40;padding-left:30px; font-weight:600;

	}

#menu li .active,#menu li .active:hover{

	background-color: #002a40;transition: all 0.5s;	color: #fff;

	}

.menu_style{

	display:none;

	margin:0;

	padding-left:10px;

	}

.menu_style li{

	list-style-type: none;

	font-size:14px;

	}

/*==prod===================================================================*/

/*會員專選單*/

.leftmenu{}

.leftmenu ul{ margin: 0; padding: 0}

.leftmenu ul li{list-style: none;margin-bottom: 10px;}

.leftmenu ul li a::before{content: "\f0a9";  font-family: FontAwesome; ; padding-right: 7px; }

.leftmenu ul li a{ color: #333}

.leftmenu ul li a:hover{ color:#555}

/*my_info_save*/

.col_bg{ background-color:#eee; padding:5px 0px 5px 10px; margin-bottom:5px;}



/*==nav2- 第一選單===================================================================*/

.nav2{ text-align:right}

.nav2 a{ font-size:13px; color:#333}

.nav2  span.nav-member{padding-top:5px; display:inline}

@media (max-width:420px){

.nav2{ text-align:center;}

.nav2 a{ font-size:14px;}

.nav2 span.nav-member{ padding:10px 0;}

	

	}

/*google-map*/	

.rwd-map {

display: block; position: relative;

overflow: hidden; height: 0; padding: 0;

padding-bottom: 100%;/*75%*/

}

.rwd-map iframe {

position: absolute;

height: 100%; width: 100%;

left: 0; top: 0;

}

/*20181214新增*/

.navbar-default {background-color: #f8f8f8; border-bottom:3px solid #ec553a;

}



.nav2-position{margin-left:10px;padding-top:10px;padding-top:35px; float:right}

.nav2-position2{display: inline !important}

.nav-padding{padding-top:35px;}

.navbar-form .input-group>.form-control { width:100px;}

@media (max-width:767px){

.navbar-default-bg{ background-image:none}

.nav-padding{padding-top:5px;}

.nav2-position{float: left;padding-top:10px;}

.nav2-position2{float:right; margin-left:0px;}

.navbar-form .input-group>.form-control { width:100%;}	

}

.navbar-default .navbar-nav>li>a{ color:#000 ; font-size:18px;}

.nav2 a{color:#333}