@charset "utf-8";

*{box-sizing:border-box;-webkit-box-sizing:border-box;}
body{font-family:微軟正黑體,Arial;color:#000;font-size:15px;background:#fff;}

.CLEAR{clear:both;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto !important}
#NAV li, .CONTENT li, #FOOTER li, #HOME_TOP>div ul>li, #qaContent li{list-style:none;}
.CONTAINER, .LIST_NEWS{max-width:1000px; margin:0 auto;}
#HEADER, #FOOTER {width:90%;margin:0 auto}

.menu-button .menu-button-friend, .menu-button .menu-button-products{
	display: none;
}
.menu-button-cart {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: #fff;
    padding: 10px;
    border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border: solid 1px;
    border-right: none;
}
#FOOTER_BG{background: #132d4a /*#826b68url(../images/footer.gif) center top no-repeat;*/}
#FOOTER{padding:20px; }
#FOOTER .CONTACT{text-align:center;display:inline-block;}
#FOOTER .CONTACT>li{float:left;margin-right:15px;font-size:15px}
#FOOTER .CONTACT>li a{color:#fff;}
#FOOTER .CONTACT>li a:hover{color:#fff;}

.f-container{margin: 0 auto;
    width: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;}

.f_nav{width:800px;margin:0 auto;margin-bottom:10px;}
.f_nav dl dt {
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	color: #ffffff;
	border-bottom:1px solid #9c817e;
	margin-bottom: 10px;
	font-weight: bold;
}
.f_nav dl {
	display: block;
	width: 128px;
	float: left;
	margin-left: 3%;
	color: #fff;
	font-size: 15px}
.f_nav dd{line-height: 30px;}


#HEADER_BG{background:url(../images/header.jpg) center top no-repeat; box-shadow:0px 1px 4px #aaa; border-bottom:1px solid #fff;}
#HEADER{padding: 24px;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;}

#NAV{margin-right:-40px;}
#NAV li{float:left;}
#NAV li a{display:block;text-decoration:none;font-size:16px;font-weight:bold;padding:10px 10px;color:#000;}
#NAV li a:hover, #NAV li a.SELECTED{
	color:#278ce1;
}

/*---廣告 輪播圖---*/
#BANNER{box-shadow:0px 1px 3px #aaa;}
#BANNER>.bxslider{padding:0px;margin:0px;}
#BANNER li{	list-style:none;}
.BANNER{margin-bottom:20px;}
.BANNER img{width:100%;}
/*.bx-wrapper img{width:100%;}*/


/*--首頁 index--*/
.CONTAINER{padding:20px;margin-bottom:20px;}

#HOME_TOP{width:85%;margin:50px auto 30px}
#HOME_PRO{padding:1%;width:95%;margin:0 auto;}


#HOME_PRO li{height:200px; overflow:hidden;border:1px solid #e1e1e1;}
#HOME_PRO li a{position:relative;display:block;text-align:center;height:100%;overflow:hidden;}
#HOME_PRO li span{position:absolute; bottom:0; width:100%; padding:15px;background:rgba(255,255,255,0.7);}
#HOME_PRO li a:hover span{background:rgba(255,255,255,0.8);}

div.search_bar {margin-bottom: 1rem}
dl.search {width: 70%; display: inline-block; padding: 0 .5rem}
dl.search>dd {width: 50%; float: left}
dl.search>dd:nth-child(1) {color: #8ec21f}
dl.search>dd:nth-child(2) {text-align: right}
dl.search>dd>a {color: #666}
dl.search>dd>input {
	background: #fff;
	border: #ccc 1px solid;
	border-radius: .25rem;
	padding: .25rem .5rem .35rem
}
dl.search>dd>button {
	background: #fff;
	border: #8ec21f 1px solid;
	border-radius: .25rem;
	color: #8ec21f;
	margin-left: .25rem;
	padding: .25rem .5rem
}
dl.search>dd>button:hover {
	background: #8ec21f;
	color: #fff
}

#HOME_PRO .slide{height:200px; overflow:hidden;border:1px solid #e1e1e1;}
#HOME_PRO .slide a{position:relative;display:block;text-align:center;height:100%;overflow:hidden;}
#HOME_PRO .slide span{position:absolute; bottom:0; left:0;width:100%; padding:15px;background:rgba(255,255,255,0.7);}
#HOME_PRO .slide a:hover span{background:rgba(255,255,255,0.8);}

#HOME_PRO .bx-pager{display: none;}

#HOME_PRO .bx-wrapper .bx-controls-direction a{width:32px;height:32px;}
#HOME_PRO .bx-wrapper .bx-prev{background: url(../images/arrow-left.png) no-repeat 0 0;left:-40px}
#HOME_PRO .bx-wrapper .bx-next{background: url(../images/arrow-right.png) no-repeat 0 0;right:-40px}
#HOME_PRO .bx-wrapper .bx-prev:hover{background-position: 0 0}

#HOME_PRO .bx-wrapper{margin:0 auto;}

#HOME_BOTTOM{background:url(../images/home_bottom.jpg) center top no-repeat; padding:36px 0;}
#HOME_BOTTOM img{border:1px solid #fff;}
.HOME_TITLE{margin-bottom:20px;}


.MORE{display:block;text-decoration:underline;color:#7a7a7a;font-size:13px;}

.MEDIA{display:table;margin-top:15px;}
.MEDIA li{float:left;margin:0 15px;}
.MEDIA li img{width: 40px;}


/*--內頁--*/
.CONTAINER{line-height:160%;}
.BANNER1{margin-bottom:10px;}
.TITLE{margin:0 0 15px 15px;}
.SUBTITLE{font-size:18px; font-weight:bold; padding:10px 0px; margin-bottom:12px; line-height:100%; letter-spacing: 1px; padding-left:25px; background:url(../images/icon.png) left center no-repeat;}
.DETAIL_TITLE{ font-size:16px; font-weight:bolder; color:#005aab; /*margin-bottom:20px;*/ margin-top:10px; padding-bottom:5px; border-bottom:1px solid #ccc;}
.HTML{line-height:170%;padding:10px 0px;}
.HTML table td{padding:5px;}
.HTML img{max-width:100%;height:auto !important;}
.HTML ul{padding-left:20px;}


/*框固定 圖片自動縮放*/
/*#TOPIC_DETAIL .PHOTO_GALLERY li a {position:relative; display:block; height:150px;overflow:hidden;}
#TOPIC_DETAIL .PHOTO_GALLERY li img{vertical-align:middle; width:100%; display:block;}*/


/*圖片垂直水平置中*/
.img-contain {  position: relative;  text-align: center;  width: 100%;  height: 0;  padding-bottom: 100%;  background:#fff; }
.img-contain img {  display:inline-block; max-width: 100%;  height: auto;  max-height: 100%;  vertical-align: middle;}
.img-shiv {  position: absolute;  width: 100%;  height: 100%;  font-size: 0;}
.img-shiv:before {  content: "";  display: inline-block;  height: 100%;  vertical-align: middle;}



/*左側選單*/
#menu2{border:1px solid #ddd}
#menu2 li{list-style:none;line-height:150%;padding:5px;}
#menu2>li>ul>li>a{color:#000;font-weight: 600;letter-spacing: 0.5px;}
/*#menu2>li li li{border-bottom:1px solid #ddd;}*/
#menu2 ul>li{border-bottom:1px dotted #ddd;}
#menu2 ul>li:last-of-type{border-bottom:none;}
.MENU_TITLE{background:url(../images/menu_title.gif);font-size:15px;padding:4px; text-align:center;font-weight: bold;font-family: Arial,微軟正黑體;}

#menu3{border:1px solid #fff}
#menu3 li{list-style:none;line-height:150%;padding:5px;}
#menu3>li>ul>li>a{color:#000;}
/*#menu2>li li li{border-bottom:1px solid #ddd;}*/
#menu3 ul>li{border-bottom:1px dotted #ddd;}
#menu3 ul>li:last-of-type{border-bottom:none;}
#menu3 ul>li{display: inline-block;}


dl.left_contact {}
dl.left_contact>dd {}
dl.left_contact>dd:nth-child(1) {
	background: url(../images/icon_phone01.svg) .25rem 50% no-repeat;
	font-size: 1.05rem;
	font-weight: bold;
	color: #f60;
	background-size: 3.5rem;
	padding: 2.25rem 0 2rem 4.5rem
}

dl.left_contact>dd:nth-child(4) {
	background: url(../images/LINE-icon.png) .25rem 50% no-repeat;
	font-size: 0.8rem;
	font-weight: bold;
	color: #000;
	background-size: 3.5rem;
	padding: 2.25rem 0 2rem 4rem
}

dl.left_contact>dd:nth-child(5) {
	background: url(../images/wechat.png) .25rem 50% no-repeat;
	font-size: 0.8rem;
	font-weight: bold;
	color: #000;
	background-size: 3.5rem;
	padding: 2.25rem 0 2rem 4rem
}


dl.left_contact>dt>img { padding : 5px; padding-top: 15px;}
dl.left_contact>dt {font-weight: bold}


/*產品區*/
.CONTAINER2{max-width: 90%}
.LIST_PRO li a img{/*opacity:0.8;*/}
.LIST_PRO li a:hover img{/*opacity:1;*/transition: background .5s ease-out ;-moz-transition: background .5s ease-out;-webkit-transition: background .5s ease-out; -o-transition: background .5s ease-out;}
.LIST_PRO h2{font-size: 15px; }
.LIST_PRO .tgy{ color:#808183; text-decoration:line-through; font-size: 13px; margin-bottom: 0px; }
.LIST_PRO .tgr{ color:#ec1b23;  font-size: 16px; font-weight: 900; margin-bottom: 0px; }


#PRO .LEFT_50 img{max-width:100%;}
.CONTAINER2 .TOP{margin-bottom:30px;}
#PRO .RIGHT_80 .HTML{max-width: 80%}
#PRO .RIGHT_80 .HTML .tgy{ color:#808183; text-decoration:line-through; font-size: 13px; margin-bottom: 0px; }
#PRO .RIGHT_80 .HTML .tgr{ color:#ec1b23;  font-size: 16px; font-weight: 900; margin-bottom: 0px; }

.LEFT_MENU{float:left;width:220px;font-size:14px;}
.CONTAINER2 .RIGHT_80{width:calc(100% - 240px)}

dl.left_news {}
dl.left_news>dd {
	border-bottom: #ddd 1px dotted;
	padding: .25rem 0
}
dl.left_news>dd:last-child {border: none}

.owl-prev, .owl-next {position: absolute; top: 4rem}
.owl-prev {left: -2rem}
.owl-next {right: -2rem}

/*常見問答*/
#qaContent li{border-bottom:1px dotted #ccc;line-height:180%;}
#qaContent li:div:first-of-type{font-size:16px;cursor:pointer;}
.Q{color:#005aab;font-weight:bold;margin-right:5px;}
.A{color:#70d3ff;font-weight:bold;margin-right:5px;}



.MAP{width:700px;margin:0 auto;padding:8px;border:1px dotted #ccc;}
.MAP>ul>li {
	border-bottom: 1px dashed #ccc;
	padding: 10px;
	list-style: none;
}
.MAP>ul>li:last-of-type{border-bottom:none}
.MAP>ul>li>a{font-weight:bold;font-size:16px;}
.MAP .menu a{margin-right:10px;;color:#444;}
.MAP .menu a:hover{text-decoration: underline}



/*----模 組----*/
.WHITE{color:#fff;}
.BLACK{color:#000;}
.GRAY{color:#333;}
.BLUE{color:#278ce1;}
.BOLD{font-weight:bold;}

/*左右*/
.LEFT{float:left;}
.RIGHT{float:right;}
.LEFT_20{ float:left;width:19%;  _display:inline;}
.LEFT_40{ float:left;width:39%;  _display:inline;}
.LEFT_50{ float:left;width:47.5%;  _display:inline;}
.RIGHT_50{ float:right;width:47.5%;  _display:inline;}
.RIGHT_60{ float:right;width:58%;  _display:inline;}
.RIGHT_80{ float:right;width:78%;  _display:inline;}
/* .LEFT_logo{float:left;margin-left: -44px; margin-top: -10px; margin-bottom: -18px;
} */
.LEFT_logo{float:left;margin-left: -44px;}

.CENTER{margin:0 auto;}

.ALIGN-RIGHT{text-align:right;}
.ALIGN-LEFT{text-align:left;}
.ALIGN-CENTER{text-align:center;}


/*列表*/
.LIST{ padding:0; margin:0; padding-bottom:5px; /*overflow:auto;*/ list-style-type:none;}
.LIST>li{padding:7px 0; overflow:auto;vertical-align:top;}
.LIST li *{ /*vertical-align: middle;*/}
.LIST_LEFT{ display:block; float:left; margin-right:20px; vertical-align:top;}
.LIST_RIGHT{ display:block; overflow:auto; vertical-align:top;}

.LIST_NEWS li{border-bottom:1px solid #ccc;}



/*長度*/
.WIDTH_60PX { width:60px;}
.WIDTH_100PX { width:100px;}
.WIDTH_200PX { width:200px;}
.WIDTH_400PX { width:400px;}


/*圖文列表*/
.COLUMN3{ padding:0; margin:0; list-style-type:none; margin-left:-0.5%; margin-right:-0.5%; }
.COLUMN3>li{ display:inline-block;width:31.5%; margin-left:0.5%; margin-right:0.5%; margin-top:10px; vertical-align:top; }
.COLUMN3>li:nth-of-type(1),.COLUMN3>li:nth-of-type(2),.COLUMN3>li:nth-of-type(3){ /*margin-top:0px;*/}
.COLUMN4{ padding:0; margin:0; list-style-type:none; margin-left:-1%; margin-right:-1%; }
.COLUMN4>li, #HOME_PRO .COLUMN4 li{ display:inline-block; vertical-align:top; width:22.5%; margin-left:1%; margin-right:1%; margin-bottom:20px;}
.COLUMN4>li img{width:100%;}
.COLUMN5{ padding:0; margin:0; list-style-type:none; margin-left:-1%; margin-right:-1%; }
.COLUMN5>li{ display:inline-block; vertical-align:top; width:18.5%; margin-left:1%; margin-right:1%; margin-bottom:20px; background:#fff;}


/*表單*/
input[type="text"],
input[type="password"],
input[type="file"],
textarea,
select{ padding:3px 0;padding-left:1%; padding-right:1%; border:1px solid #aaa;font-family:"微軟正黑體"; outline:none; vertical-align:top; }

input[type="text"].WIDTH_100,
input[type="password"].WIDTH_100,
input[type="file"].WIDTH_100,
textarea.WIDTH_100,
select.WIDTH_100{ width:96%; padding-left:1.5%; padding-right:1.5%; }


/*按鈕*/
.BTN_BOX{height:32px;width:380px;margin:0 auto;	}
.BTN{border:none;cursor:pointer;color:#fff;background:#278ce1;padding:5px 10px;}
.BTN:hover{background:#38c2e7;transition: background .3s ease-out ;-moz-transition: background .3s ease-out;-webkit-transition: background .3s ease-out; -o-transition: background .3s ease-out;}


/*---頁碼---*/
.PAGES {margin-top:20px;}
.page{margin:30px 5px 0; color:#666;}
.PAGES .active{background:#278ce1; padding:0px 5px; color:#fff; border-radius:3px; -webkit-border-radius:3px;}


/*---公用---*/
.WIDTH20{width:20%;}
.WIDTH30{width:30%;}
.WIDTH40{width:40%;}
.WIDTH50{width:50%;}
.WIDTH60{width:60%;}
.WIDTH70{width:70%;}
.WIDTH75{width:75%;}
.WIDTH80{width:80%;}

.MARGIN_TOP20{margin-top:20px;}
.MARGIN_BOTTOM10{margin-bottom:10px;}
.MARGIN_BOTTOM20{margin-bottom:20px;}


.BORDER{border:1px solid #ccc;}
.BORDER:hover{border:1px solid #278ce1;}


/*--手機--*/
.LEFT20>span.MOBILE_TITLE{ display:none}
.MOBILE_TITLE{color:#fe5000; font-size:20px; font-weight:bold; letter-spacing:2px; padding:10px 8px;}


@media screen and (max-width:1305px){
	#NAV li a{padding:10px 15px;}
	#NAV{margin-right:0}


}

@media screen and (max-width:1185px){
	#HEADER{padding:10px 0}
	#NAV li a{padding:10px;}
}

@media screen and (max-width:1000px){
	#NAV li a{padding:10px 15px}
}

@media screen and (max-width:890px){
	.HEADER>.LEFT{margin-left:25px}
	.HEADER>.RIGHT, .CONTAINER2{width:100%}
	#NAV{margin-right:0}
	#PRO .RIGHT_80 .HTML{max-width: 100%}
	.f_nav{width:100%;}
	.f_nav dl{width:47%;margin-bottom:10px;}
}


@media screen and (max-width:768px){
	.LEFT_20,
	.LEFT_50,
	.RIGHT_80,
	.RIGHT_50,
	.CONTAINER,
	.WIDTH_100PX,
	.COLUMN4>li
	{float:none;width:98%; margin:2% auto;}


	.HOME_NEWS,
	.HOME_PRO
	{ float:none; width:98%; margin:0 auto;margin-bottom:20px;}

	.HOME_PRO .LEFT, .HOME_PRO .RIGHT
	{float:inherit !important;}

	.TINYMAV, .TITLE, .LEFT_MENU{ display:none;}

	.LEFT20>span.MOBILE_TITLE{ display:block;width:100%;float:none; padding:0 0 10px 0}

	#LOGO{float:none;display:block;vertical-align:middle;text-align:center;}

	img{ max-width:84%; height:auto;}

	.LIST_GALLERY>li,
	.COLUMN2>li,
	.COLUMN4>li,
	.COLUMN5>li,
	.COLUMN8>li{ width:48%}

	#contactform{width:98% !important;}
	.WIDTH_400PX{ width:97%; padding-left:1%; padding-right:1%;}

	#HEADER{padding:5px}

	.CONTAINER2 .RIGHT_80{width:100%;}
	.MAP{width:100%;}
	.LEFT_logo {margin-left: 0px;}
	#FOOTER_BG {
		padding-bottom: 60px;
	}
	.menu-button .menu-button-friend, .menu-button .menu-button-products{
		display: block;
	}
	.menu-button-cart {
		position: initial;
		border-radius: 0;
		transform: translateY(0%);
    	border: none;
	}
	.menu-button {
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		background: #fff;
		align-items: center;
	}
	.menu-button-friend {
		position: relative;
		width: 180px;
		margin: 0 auto;
		padding: 5px 0;
		text-align: center;
	}
	.menu-button-products{
		width: calc(100% - 90px);
		margin: 0 auto;
		text-align: center;
		border-left: solid 1px;
		padding: 10px 5px;
	}
	.menu-button-cart {
		text-align: center;
		width: calc(100% - 90px);
		border-left: solid 1px;
		padding: 10px;
	}
	.menu-button-friend ul {
		display: none;
		text-align: center;
		position: absolute;
		bottom: 49px;
		left: 10px;
		background: #ffffff;
		padding: 10px;
	}
	.menu-button-friend ul li {
		width: 45px;
		height: 45px;
		margin-bottom: 10px;
		list-style-type: none;
	}
	.menu-button ul.clicked{
		display: block;
	}
	.all-right-friend-click {
		font-size: 25px;
		color: #000;
		position: relative;
	}
	.all-right-friend-click span {
		font-size: 12px;
		display: block;
	}
}

@media screen and (max-width:650px){
	.LEFT,
	.RIGHT,
	.LEFT_20,
	.LEFT_50,
	.RIGHT_80,
	.RIGHT_50,
	.COLUMN4>li
	{ float:none; width:98%; margin:2% auto;}


	#HOME_TOP .MORE{float:right;width:initial;}
	#HOME_CONTAINER .LEFT_50{float:inherit;}

	.COLUMN4>li, #HOME_PRO .COLUMN4 li{ width:47%;}
}

@media screen and (max-width:480px){

	.LIST_GALLERY>li,
	.COLUMN2>li,
	.COLUMN4>li,
	{width:48%}

	#HEADER{padding:15px;}

	#HOME_NEWS{margin-bottom:10px;}
	#HOME_CONTAINER .MORE{display:inline;float:right;}
	#HOME_PRO{margin-top:20px;}
	#FOOTER .CONTACT li{float:none;margin-bottom:5px;}
	.CONTAINER{padding:2% !important;}
	.HTML{padding:0;}
	.MAP .menu a{display: block}

	.COLUMN4>li, #HOME_PRO .COLUMN4 li{ width:47%;}

}