@charset "utf-8";
/* CSS Document */

/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tfoot, thead, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;

border: 0;
font-size: 100%;
font-family: Arial,微軟正黑體,新細明體,sans-serif;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
html{height:100%;}
body {
line-height: 1;
height:100%;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

.item-link{
	width:100%;
    height:100%;
    font-size:0px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:30;
	}

table{
	border-collapse:collapse;
	border-spacing:0;
	text-align:center;
	width:100%;
	}

/*start*/
#wrapper{min-height:100%; position:relative;}
header{
	height:90px;
	width:100%;
	border-top:#3e3e3e 2px solid;
	border-bottom:#333333 2px solid;
	background-color:#424242;
	position:fixed;
	z-index: 990;
}
img{max-width:100%;}

nav div li{background-color:#323232; width:160px;}

nav div li:hover{background-color:#000000; width:160px;}

nav{width:100%; margin:0 auto;}

nav ul{float:right; padding-right:180px;}

nav ul li{display:inline;}

nav ul li a{
	padding:0 2em;
	color:#ffffff;
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	font-size:1.1em;
	text-decoration:none;
	line-height:94px;
	letter-spacing:.1em;
	transition: all .4s ease;
}
nav ul li a:hover{color:#62bdff;}

#logo{float:left; padding-left:100px;}

#logo img{max-width:350px; padding-top:5px;}

a{
	color:#ffffff;
	font-size:16px;
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	text-decoration:none;
}
p{
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	font-size:18px;
	color:#000000;
	line-height:1.8em;
}
p a{
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	font-size:18px;
	color:blue;
	line-height:1.5em;
	text-decoration:none;
}
#bannerS{display:none;}

#mobile{display:none;}

#mobile a{
	color:#ffffff;
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	letter-spacing:2px;
}
li{list-style:none;}

.item{
	width:160px;
	height:45px;
	padding:25px 0 0 30px;
	color: #ffffff;
    font-size:18px;
    font-family:Arial,微軟正黑體,新細明體,sans-serif;
    letter-spacing:2px;
}
.aa_item{position:absolute; left:0px; cursor:pointer;}

#bannerBg{background:url(images/midBg.png) repeat;}

#banner{padding-top:94px;}

.group4{width:98%;}

.video{width:560px; height:315px;}

#contentBg{height:auto; width:100%;}

#content{
	margin:0 auto;
	overflow:hidden;
	/*background:#e6e6e6;*/
}
#navlist{
	background-color:#7d7d7d;
	line-height:3.5em;
	/*height: 3.5em;*/
	position:inherit;
    width:100%;
    padding:0;
    background-image:linear-gradient(180deg,#4d4d4d,#7d7d7d 15%);
}
#navlist a{transition:all 0.4s ease;}

#navlist a:hover{color:#000000;}

#navlist_mobile{display:none; background-color:#3d3d3d;}

#navlist_mobile ul{box-sizing: border-box; padding-left:30px;}

#navlist_mobile ul li{
	background:url(images/icon_mobile.png) no-repeat left;
	border-bottom:1px #000000 dashed;
	height:55px;
	box-sizing:border-box;
	padding:20px 0 0 30px;
}
#navlist_mobile ul li a{color:#ffffff;}

#contentBox{
    padding-bottom:3%;
	position:relative;
	overflow:inherit;
}
#navlist ul{
	text-align:center;
	padding-left:0;
	width:90%;
	max-width:1250px;
	margin:0 auto;
	line-height:50px;
	}

#navlist ul li{
  	background:url(images/icon.png) no-repeat left;
 	padding:0 0 0 20px;
 	display:inline;
}
.ccin{
	width:100%;
	display:table;
	text-align:center;
	background-color:#2f2f2f;
    padding:5px 0 10px 0;
}
.ccin li{font-size:12px;}

.ccin img{vertical-align:middle; padding:0 10px 0 10px;}

footer{
	background-color:#424242;
	width:100%;
	float:left;
	width:100%;
	color:#999999;
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	line-height:1.4em;
}
#keyBg{
	background-color:#7d7d7d;
	height:100%;
	width:100%;
}
.key{
	width:100%;
	color:#000000;
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	font-size:16px;
	text-align:center;
	margin:0 auto;
	line-height:50px;
	letter-spacing:2px;
}
.key a{
	color:#000000;
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	font-size:0.9em;
	text-align:center;
	margin:0 auto;
	text-decoration:none;
}

.key a:hover{color:#bababa;}

.Lang{
    position:absolute;
    right:216px;
    top:10px;
	font-size:12px;
    color:#c1c1c1;
}
.Lang a{font-size:12px; color:#c1c1c1;}

footer a {
	color:#999999;
	text-decoration: underline;
	transition:all 0.4s ease;
	font-size:14px;
}
footer a:hover{color:#e6e6e6;}

.footbox{width:650px; margin:20px auto 10px; display:table;}

#footFloat{float:left; width:70%;}

#footFloat p{line-height:1.5em; font-size:14px; color:#d3d3d3;}

#footlogo{float:left; padding-right:10px;}

.hot{
	height:auto;
	margin:0 auto;
	float:left;
	width:1185px;
}
.abgne_tab{display:none;}


.about{
	border-bottom: #7b7b7b 1px solid;
    margin-top:7%;
    font-size:2.5em;
    font-weight:bold;
    text-align:center;
}
.about::before{content:"▼";}

.pmargin{margin:8% 0;}

.aboutImg img{width:100%;}

.ptext h1{font-size:18px!important;}

.hot_text h1{font-size:18px!important; padding-top:7px;}

.pmargin h1{font-size:22px; color:#000;}

.pmargin ul{padding-left:20px;}

.pmargin li{
	padding:5px 0;
    list-style:disc;
    word-break:break-all;
    line-height:25px;
    font-size:18px;
    }

/*index*/
#index_margin{width:1185px; margin:0 auto;}

.hot1{
	width:330px;
	height:315px;
	border-bottom:10px solid;
	float:left;
	margin:0 2em;
	box-shadow:0px 0px 5px hsla(0,0%,0%,.3);
	background:#ffffff;
	transition:all 0.4s ease;
	text-align:center;
}

.hot1 a{display:block;}

.hot1 img{transition:all 0.4s ease;}

.hot1 img:hover{opacity:0.5;}

.more{
	width:150px;
	margin: 10px 25px 0 0;
	line-height: 3em;
	color:#595757;
	font-size:1em;
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	float:right;
}
.hot_text{margin:5px 8px;}

.hot_text h1:hover{color:#062193;}

.table{padding:0 0 30px 30px;}

.newtable1{height:100%; line-height:33px;}

.newtable2{background-color:#f5f5f5; height:100%; line-height:33px;}

.date{
	color:#3891E6;
	font-size:18px;
	padding:0 0 0 60px;
	font-family:Arial, Helvetica, sans-serif;
	float:left;
  	width:150px;
  	vertical-align:top;
}
.news{
	color:#323232;
	font-size:18px;
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	display: inline-block;
 	width: 700px;
}

.news a{
	color:#323232;
	font-size:18px;
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
}
.news a:hover{color:#b7b7b7;}

.news2{
	color:#323232;
	font-size:1em;
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	padding-left:230px;
}
.page{
	width:255px;
	margin:50px auto;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
}
.page a{
	color:#000000;
	font-size:16px;
	text-decoration:none;
	padding:8px 13px;
}

.page a:hover{
	background-color:#3891e6;
	color:#ffffff;
	font-size:16px;
	text-decoration:none;
}
.spanpage a{background-color:#3891e6; color:#ffffff;}


/*about*/
.blue{
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	font-size:18px;
	color:#3180c7;
	line-height:1.5em;
	font-weight:bold;
}
.about_margin{margin:0 auto; width:1000px;}

/*news*/
.news_margin{margin:0 auto; width:1100px;}

.news_t{
	color:#0063d0;
	font-size:24px;
	font-weight:bold;
	float:left;
}
.news_img{float:left; margin-right:10px;}

hr{width:100%;}

.back{color:#0063d0; float:right; margin-top:100px;}

/*product*/
.product_margin{
	width:100%;
	max-width:1280px;
	margin:0 auto;
	}

.productBlock{padding:50px 0; position:relative;}

.proItemList{
	padding-left:0;
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	}

.proItemList li{
	width:50%;
	margin-bottom:50px;
	position:relative;
	}

.proItemList li .box__inner{display:flex; align-items:flex-start;}

.proItemCover{flex-basis:250px;}
.proItemTxt{flex:1;}

.proItemCover .img-cover{
	display:block;
    height:0;
    text-align:center;
    padding-bottom:100%;
    border:1px solid rgba(204,204,204,0.5);
    overflow:hidden;
    position:relative;
	}

.img-cover>img{
    height:100%!important;
    max-width:100%;
    min-width:100%;
    object-fit:cover;
    -moz-object-fit:cover;
    -ms-object-fit:cover;
    -o-object-fit:cover;
    -webkit-object-fit:cover;
    position:absolute;
    transform:translate(-50%, 0) scale(1);
    transition:all 0.3s;
	}

.proItemTxt{padding:20px 15px;}

.proItemTxt h4{
	font-size:18px;
	font-weight:bold;
	padding-bottom:7px;
	margin-bottom:3px;
	border-bottom:1px solid rgba(204,204,204,0.5);
	}

.proItemBrief{min-height:50px;}

.proItemBrief p{font-size:14px; color:#646464;}

.moreBtnBlock{
	margin-top:20px;
    margin-right:10px;
    display:flex;
    justify-content:flex-end;
	}

.moreBtnBox{
	padding:5px 15px;
	border:1px solid #ccc;
	border-radius:999em;
	}

.moreBtnBox span{font-size:14px; letter-spacing:1px;}

.proItemList li:hover .img-cover>img{transform:translate(-50%, 0) scale(1.1);}
.proItemList li:hover .proItemTxt h4{color:#fc6c1f;}
.proItemList li:hover .moreBtnBox{
	color:#fff;
	border:1px solid #424242;
	background-color:#424242;
	}

.float_left{float:left;}

.productdt_margin{margin:0 auto; width:850px;}

.product_box{
	width:410px;
	height:200px;
	float:left;
	box-sizing:border-box;
	margin:15px 20px 25px 20px;
}
.photoimg{margin:0 auto; width:760px;}

h1{
	color:#2994E2;
	font-size:18px;
	font-weight:bold;
	line-height:1.3em;
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
}
h2{
	color:#646464;
	font-size:14px;
	line-height:1.5em;
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	
}
.product_img{
  	box-sizing:border-box;
	margin:0 10px;
	float:left;
	transition:all 0.4s ease;
    width:254px;
    /*height:220px;
    overflow:hidden;
	background-color:#ffffff;
    text-align:center;*/
}
.product_img img{width:100%;}

.product_img:hover{opacity:0.5;}

.p_page{text-align:center; margin:10px auto; width:200px;}

.p_page a{
	color:#595757;
	font-family:Arial,微軟正黑體,新細明體,sans-serif;
	font-size:18px;
	text-decoration:none;
}
.pro_text{color:#7f3200; font-size:21px; font-weight:bold;}

.pro_p{font-size:16px;}

.picture_big{margin:0 auto; display:block;}

/*產品內頁縮圖*/
.showbox{width:605px; height:456px; float:left; margin:0 25px 0 0;}

.abgne-block-20120106 img{width:128px; height:98px; margin-bottom:12px;}

/*contact*/
.contact_margin{margin:0 auto; width:1000px;}

.contact_margin iframe{width:500px; height:350px;}

.contact-txt{float:left; width:48%;}

.contact-form{float:right; width:48%;}

.contact-form h2{
	color:#696969;
	font-size:16px;
	line-height:15px;
	padding:20px 0;
	}

.formBox .form{position:relative; margin-bottom:25px;}

.b-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.formBox .form label{
    display:block;
    background:#188800;
    font-weight:bold;
    font-size:15px;
    height:30px;
    line-height:30px;
    width:90px;
    padding:0 10px;
    color:#ffffff;
    position:absolute;
    left:0;
    top:0;
}
.formBox .form select{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    padding:5px;
    height:31px;
    border:1px solid #D6D6D6;
    border-radius:3px;
    margin-left:110px;
    width:50%;
}
.formBox .form input[type="text"]{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    padding:5px;
    padding-left:110px;
    width:100%;
    height:30px;
    line-height:30px;
    border:1px solid #ccc;
}
option{
    font-weight:normal;
    display:block;
    white-space:pre;
    min-height:1.2em;
    padding:0px 2px 1px;
}
input[type="text"]{-webkit-appearance:none;}

.formBox .form textarea {
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    width:100%;
    height:100px;
    padding:5px 5px;
    padding-left:110px;
    border: 1px solid #ccc;
	font-family:arial,微軟正黑體,Microsoft JhengHei,新細明體,PMingLiU;

}
.formBox{margin-bottom:25px; color:#222; font-size:1em;}

/*download*/
.download-box{margin:3% auto; text-align:center;}

.download-pro {
	width:300px;
	float:left;
    margin:15px 15px 20px 15px;
	height:520px;
}
.download-pro img{
	width:100%;
	border:1px solid #b7b7b7;
	border-radius:4px;
	margin-bottom:5px;
}
.top-menu{margin-top:11px;}

/*tab選單*/
.abgne_tab ul, li{
	margin:0;
	padding:0;
	list-style:none;
}
.abgne_tab{
	clear:left;
	width:400px;
	margin:10px 0;
}
ul.tabs{
	width:100%;
	height:32px;
	border-bottom:1px solid #999;
	border-left:1px solid #999;
}
ul.tabs li{
	float:left;
	height:31px;
	line-height:31px;
	overflow:hidden;
	position:relative;
	margin-bottom:-1px;/*讓 li 往下移來遮住 ul 的部份 border-bottom*/
	border:1px solid #999;
	border-left:none;
	background-color:#2994E2;
}
ul.tabs li a{
	display:block;
	padding:0 10px;
	color:#ffffff;
	border:1px solid #ffffff;
	text-decoration:none;
}
ul.tabs li a:hover{background:rgba(255,255,255,0.5);}

ul.tabs li.active{border-bottom:1px solid #fff;}

ul.tabs li.active a:hover{background:rgba(255,255,255,0.5);}

div.tab_container{
	clear:left;
	width:100%;
	border-bottom:8px solid #595757;
	border-top:none;
	background:#fff;
}
div.tab_container .tab_content h1{margin:0 5px;}

div.tab_container .tab_content h2{margin:0 5px 20px;}

.tab_content{text-align:center;}

.pic{width:100%;}

.tab_a{background-color:#595757;}

.tab_b{background-color:#385796;}

.tab_c{background-color:#d0a100;}

.ptext{width:30%; float:left;}

.btn-link{
	float:left;
	width:100px;
	margin-top:20px;
	text-align:center;
	background:#ccc;
	padding:6px 8px;
	border-radius:12px;
	}
.btn-link a{color:#000; font-weight:bold;}

.btn-link:hover{background:#424242;}
.btn-link:hover a{color:#fff;}

.popup-gallery{width:600px; margin:auto;}

.popup-gallery img{width:90%;}

.youtubecontent{
	position:relative;
	padding-top:30px;
	height:0;
	overflow:hidden;
	}

.youtubecontent{padding-bottom:56.25%;}

.youtubecontent iframe, .youtubecontent object, .youtubecontent embed{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	}

/*螢幕大小*/
@media screen and (max-width:1600px){
	#contentBox{padding-left:0;}
	#logo{padding-left:70px;}
	nav ul{padding-right:10px;}
	}

@media screen and (max-width:1400px){
	#logo{padding-left:8px;}
	.Lang{right:30px;}
	nav ul {padding-right:7px;}
	nav ul li a{padding:13px;}
	}

@media screen and (max-width:1200px){
	#index_margin{width:1002px; margin:0 auto;}
	.hot1{width:300px; margin:0 1em;}
	nav ul{padding-right:7px;}
	nav ul li a{padding:13px;}
	.news_margin{width:90%;}
	.news{width:750px;}
	.date{padding:0 0 0 40px; width:130px;}
	.hot{width:1000px;}
	}

@media screen and (max-width:1080px){
	nav ul{display:none;}
	#aa{background:url(images/aa.png) no-repeat;
	width:55px; height:35px; margin:25px 0 0 10px; float:left; cursor:pointer;}
	#logo{text-align:center; float:none;}
	#index_margin{width:936px;}
	.hot1{width:280px; height:250px;}
	nav ul{padding-right:60px;}
	.date{padding:0 0 0 30px; width:100px;}
	.news{width:80%;}
	.hot{width:940px;}
	.about_margin{width:90%;}
	.contact_margin{width:700px;}
	.contact-form{float:none; width:100%; margin:3% auto;}
	.contact-txt{float:none; width:100%;}
	.contact_margin iframe{margin:0 auto; display:block;}
	.Lang{position:initial;}
	.download-pro{margin:15px 7%;}
	}

@media screen and (max-width:980px){
	nav ul{padding-right:50px;}
	.about{font-size: 2em;}
	.download-pro{margin:15px 5%;}
	.product_margin{max-width:600px;}
	.proItemList li{width:100%;}
	}

@media screen and (max-width:840px){
	#navlist{display:none;}
	#contentBox{overflow:inherit;}
	.hot1{width:220px; height:200px; margin:0 0.5em;}
	#index_margin{width:720px;}
	#keyBg{background-color:#3d3d3d;}
	#navlist_mobile{display:block;}
	.key{width:516px; line-height:35px;}
	.footbox{width:500px;}
	#footlogo{float:none; width:100%; max-width:120px; margin:0 auto; padding:0;}
	#footlogo img {width:100%;}
	#footFloat{float:none; width:100%; max-width:320px; margin:0 auto 15px;}
	.key a{color:#bfbfbf;}
	.key a:hover{color:#ffffff;}
	.date{padding:0 0 0 10px;}
	.news{width:75%;}
	.hot {width:100%}
	.product_box{width:250px; height:290px; margin:15px 25px 25px 5px;}
	.product_img{margin:0; padding-bottom:5px; float:none; width:100%;}
	.ptext{float:none; text-align:center;}
	.btn-link{float:none; margin:15px auto 10px;}
	.product_margin{width:560px;}
	.productdt_margin{width:95%;}
	.showbox{float:none; margin:0 auto;width:600px;}
	.abgne-block-20120106{width:600px; margin:0 auto;}
	.abgne-block-20120106 img{margin:10px 8px 0 8px;}
	.photoimg{width:100%;}
	.ptext{width:100%;}
	.download-pro{margin:15px 3%; width:40%; height:345px;}
	}

@media screen and (max-width:768px){
	.hot1{width:210px;}
	#index_margin{width:680px;}
	.contact_margin{width:600px;}
	.contact-form{font-size:1em; width:90%;}
	.contact-txt{width:100%; margin:0 auto;}
	.contact_margin iframe{width:100%; height:300px;}
	}

@media screen and (max-width:640px){
	.hot1{width:300px; margin:10px auto 20px; float:none; text-align:center;}
	#index_margin{width:95%;}
	#footFloat{font-size:0.9em;}
	.news{width:70%; padding:0 0 0 10px;}
	.pic{width:initial; float:none; height:80%;}
	.key{width:100%;}
	.hot_text{height:initial; float:none; padding:10px;}
	.hot_box{margin:0 auto; width:410px;}
	.news_t{float:none;}
	.contact_margin{width:480px;}
	.contact_margin p{width:100%;}
	.product_box{width:200px; height:290px;margin:15px 15px 25px 5px;}
	.product_margin{width:440px;}
	.showbox{float:none; margin:0 auto; width:500px; height:385px;}
	.abgne-block-20120106{width:500px; margin:0 auto;}
	.abgne-block-20120106 img{margin:10px 2px 0 0px; width:118px; height:90px;}
	.footbox{width:75%;}
	.video{width:98%;}
	.popup-gallery{width:100%;}
	}

@media screen and (max-width:480px){
	header{height:70px;}
	#banner{padding-top:75px;}
	#aa{margin:13px 0 0 10px;}
	#logo{margin-top:0.1em;}
	#logo img{width:228px; padding-top:5px;}
	/*.abgne_tab{display:inline;}*/
	.hot_box{width:100%;}
	.more {display:none;}
	.news{width:60%;}
	.contact_margin iframe{padding-bottom:5px;}
	.contact_margin{width:380px;}
	.product_box{width:180px; height:290px; margin:15px 10px 25px 5px;}
	.product_margin{width:390px;}
	.showbox{float:none; margin:0 auto; width:400px; height:287px;}
	.abgne-block-20120106{width:400px; margin:0 auto;}
	.abgne-block-20120106 img{margin:25px 2px 0 0px; width:93px; height:70px;}
	#aa{background-size:80%; margin:20px 0 0 10px;}
	.pmargin td>p{font-size:14px;}
	.proItemList li .box__inner{flex-wrap:wrap;}
	.proItemCover{flex-basis:100%;}
	.proItemTxt{flex:100%; margin-top:15px;}
	}

@media screen and (max-width:400px){
	#footlogo{width:100%;}
	.contact_margin iframe{width:330px; height:230px; padding-bottom:5px;}
	.contact_margin{width:330px;}
	.showbox{float:none; margin:0 auto; width:320px; height:245px;}
	.abgne-block-20120106{width:330px; margin:0 auto;}
	.abgne-block-20120106 img{margin:5px 0 0 0; width:75px; height:58px; margin-bottom:0px;}
	.product_box{width:100%; margin:15px 5px 25px 0px; height:initial;}
	.ptext{margin-top:15px;}
	.product_margin{width:80%;}
	.product_img{width:100%; height:210px;}
	.contact_margin p{font-size:0.9em;}
	.tableTx td{padding:2px;}
	.tableTx td span{font-size:12px!important; word-break:break-word;}
	}

@media screen and (max-width:340px){
	ul.tabs li a{padding:0 7px;}
}