@charset "utf-8";
/* CSS Document */
body{background:#f8f8f8;}
.page{width:1286px; max-width:1286px;}
#defaultimg .page, #header .page,.content .page, #footer .page{width:100%; max-width:1350px;}
/*--header--*/
#header{transition:.3s; background:#f8f8f8; padding-bottom: 1em;}
#header .page{height:98px;}

.nav{flex-direction: row-reverse; flex-wrap:wrap;}
/*--!syisnav default setting--*/
.syisnav {list-style:none; margin:0; padding:0; width:100%; justify-content: right;}
.syisnav li{position:relative; z-index:220;}
.syisnav li a{display:block; padding:0.3em 1.4em; text-decoration:none; color:#000; font-size:16px; letter-spacing:1px; z-index:220;}
.syisnav li.enter>a{color:#fff;}
.syisnav li ul{position:absolute; background:linear-gradient(rgba(148,8,8,.8),rgba(193,29,36,.8)); display:none; padding:15px 0 15px 0; left:50%; transform:translate(-50%,2px); z-index: 303; margin:0; width:100%;}
.syisnav li.enter>a::after{content:""; width:100%; height:2em; display:block; position:absolute; top:0; left:0; background:rgba(148,8,8,.8); z-index:-1;}
.syisnav li ul li{display:block; text-align:left;  padding:3px 12px;}
.syisnav li ul li a{font-size:13px; width:100%; letter-spacing:0; color:#fff; padding-left:1.5em; border-bottom:1px solid #efefef;}
.syisnav li ul li a::before{content:""; display:block; width:7px; height:7px; border:1px solid #bf3e3e; border-left:none; border-bottom:none; transform:rotate(45deg) translate(0,-50%); position:absolute; left:10px; top:50%;}
.syisnav li ul li ul{left:100%; display:none; top:0;}
.syisnav li:hover > ul{display:block; animation-name:fade; animation-duration:.5s;}
/*--!syistop default setting--*/
.syistop.fixed{position:fixed; top:0; right:0;}
.syistop{font-size:13px; line-height: 1.2em; width:auto; z-index: 1000; white-space: nowrap; float:right; margin-left:1em;}
.syistop a{padding-right:10px; position:relative;}
.syistop a, .syistop .searcharea{display:inline-block; vertical-align: middle; color:#000;}
.syistop img{vertical-align:middle;}
.searcharea{border:1px solid #ccc;}
.searcharea input{border:none; padding:5px; width:10em; margin:0; vertical-align: middle;}
.searcharea a::before{content:""; width:1px; height:1.3em; display:inline-block; background:#ccc; transform:translateY(25%); margin:0 0.3em;}
/*--!defaultimg--*/
#defaultimg .page{width:1530px; max-width:1530px;}

/*--!content default setting--*/
.sidetit{color:#000; padding:0 0.3em 5px 0; margin-bottom:0; font-size:50px; font-weight:normal; display: inline-block; white-space:nowrap;}
.sidetit span{font-size:20px; font-weight:100;}
.content .dtit{color:#000; font-size:22px; letter-spacing: 1px; position:relative; text-align: center; margin-bottom:50px;}
.content .dtit::before{content:""; width:2em; height:2px; background:#14549b; display: block; position:absolute; bottom:-0.5em; left:50%; transform:translateX(-50%);}
.main .btn{margin-top:2em; text-align:right;}

.side.top{display:flex; justify-content: flex-start; align-items: flex-end; border-top:1px solid #333; border-bottom:1px solid #333; padding:50px 30px; float:none;}
.main.top{padding-top:60px; padding:10px 30px 0 10px;}
.detailpage .main.top{max-width:900px; float:none; margin:0 auto; display:block;}
.detailpage .main.top .innerhtml{display:block; float:none;}
/*--!product_detail--*/
.proDetail select, .productDetail input{width:100%;}
a.minus, a.add{width:30px; background:#fff; font-size:20px; color:#333; border:1px solid #CCC; line-height:28px; display:inline-block; text-align:center; vertical-align: middle;}
a.minus:hover, a.add:hover{background:#CCC; color:#666;}
.bookmark{width:100%; height:auto; border-bottom:1px solid #efefef; display:inline-block; margin:1em 0 0 0; padding:0; list-style:none;}
.bookmark li{cursor:pointer; color:#999; display:inline-block; height:auto; text-align:left; padding:0.5em; font-size:16px; border:1px solid #efefef; border-radius:5px 5px 0 0; position:relative; transform:translateY(1px); background:#efefef; margin:0 2px; font-weight:bold;}
.bookmark li:hover{color:#000;}
.bookmark li.hit{background:#fff; color:#999; border-bottom:1px solid #fff;}
/*product qa*/
.qalist{display:none;}
.qablock{border:1px solid #efefef; background:#efefef; margin-top:3px; margin-bottom:3px;}
.qnum{color:#000; font-weight:bold; display:inline-block; width:40%; float:left; margin:0; padding:0.2em;}
.qdate{font-size:13px; color:#999; text-align:right; width:60%; display:inline-block; float:right;  margin:0; padding:0.2em;}
.qablock, .qablock section{width:100%; height:auto; float:left;}
.qablock .innerhtml{padding:0.2em;}
/*--!prodetail--*/
.list.propic a{border:1px solid #ccc; background:#fff; overflow:hidden; line-height: 0;}
.prodetail h1.subject{font-size:22px; margin-top:0; color:#000; border-bottom:1px solid #ccc; padding-bottom:1em;}
.prodetail .ll, .prodetail .rr{padding:0 1em;}
.prodetail h4.subtit{margin-bottom:0.5em; color:#999; border-bottom:1px solid #ccc;}
.prodetail h4.subtit span{display:inline-block; padding:0.3em 1em; border-radius:0.5em 0.5em 0 0; border:1px solid #ccc; border-bottom:none; transform:translateY(2px); background:#fff;}
.prodetail .innerhtml img{border: 0; box-shadow: 0; max-width:100%; height:auto;}
.prodetail .introduction{padding:0.5em;}
.simg{margin-top:10px;}
.simg .list{padding:3px; width:66px; height:66px; display:inline-block;}
.simg .list a.frm{padding:0; height:60px; overflow: hidden; border:1px solid #efefef;}

/*--footer--*/
#footer{font-size:14px; line-height: 1.4em; color:#fff; background:#000; word-break:break-all; padding: 40px 0;}
#footer .flexfrm{justify-content: space-evenly;}
#footer ul{margin:0; padding:0; width:100%;}
#footer ul li{padding:0; display:block;}
#footer a{display:block; color:#fff; padding:0.1em 0; letter-spacing: 1px; position:relative;}

#footer a:hover{color:#fff; text-decoration:underline;}
/*#footer .navb li a::before{content:""; width:1px; height:1em; background:#000; position:absolute; left:0; top:50%; transform:translateY(-50%); }*/

#footer p{margin:0;}

#footer h4{margin:10px 0; font-size:120%;}

.copyright{text-align:center; padding:20px 0; margin-top:20px;}

.copyright{line-height:180%;}
.copyright a{display:inline-block; vertical-align: middle;}
.copyright img{margin-right: 10px; vertical-align: middle;}
/*=============================*/
@media screen and (max-width:1529px){/*desktop*/
#defaultimg .page, #header .page{width:100%; max-width:100%;}
}
@media screen and (max-width:1286px){/*desktop*/
	#header .logo img{padding-left: 0px; padding-right:10px;}
	.page{padding:0 2%; width:100%; max-width:100%;}
	.syisnav li a{padding:0.3em 1em;}
	.syisnav li ul li a{padding:.3em 0 .3em 1.5em; font-size:12px;}
	#footer{font-size:12px;}
}
@media screen and (max-width:960px){/*desktop-small pad*/
	#header .page{height:70px;}
	.searcharea input{width:5em;}
	/*--!prodetail--*/
	.prodetail .ll, .prodetail .rr{padding:0 10px;}
	.simg .list{padding:3px; width:56px; height:56px; display:inline-block;}
	.simg .list a.frm{padding:0; height:50px; overflow: hidden; border:1px solid #efefef;}
	
	.syisnav li a, .syistop{font-size:13px;}
	.syisnav li > a{padding:.3em .7em;}
	.syisnav li ul li a{padding:.3em 0; font-size:12px;}
	.syisnav li ul li a::before{display:none;}
}
@media screen and (max-width:767px){/*phone*/

	/*header default*/
	.side, .main{padding:1em 0;}
	.side.top{flex-direction: column; border-top:none; border-bottom:none; padding:0;}
	
	#header{box-shadow:0 5px 10px rgba(0,0,0,0.3); padding:0;}
	#header .page{height:60px; padding:0;}
	#header .nav{transform: translateY(0px);}
	.syistop{width:100%; text-align:center; border-radius:0; background:#fff; padding:0.3em 0; justify-content: flex-start; flex-direction:column;}
	.syistop a{padding-right:0px; width:100%; display:inline-block;}
	.searcharea input{width:20em;}
	.page{padding:0 3%;}
	/*!nav default*/
	
	.pulldownlist.show{display:none;}
	.sidetit{width:100%; font-size:28px;}
	.sidetit span{font-size:18px;}	
	
	/*!subnav default*/
	.subnav ul li{padding:0;}
	.syisnav li ul li{width:50%;}
	/*--!syisnav default setting--*/
	.syistop{flex-wrap:nowrap; display:block;}
	.syistop a{width:32%; height:auto;}
/*nav default*/
.nav{width:100%; position:absolute; display:none; left:0; top:100%; background:#333; overflow-y: scroll; height:calc(100vh - 80px);}
.syisnav{text-align:left; margin:0; padding:0; list-style:none; width:100%; flex-direction: column; flex-wrap: wrap;}
.syisnav li{margin:0; padding:0 10px; font-size:18px; width:100%; flex-direction: row; display:inline-block;}
.syisnav li a{text-align:left; line-height:200%;  padding:0.2em; font-weight:normal; font-size:16px; display:block; border-radius:0; color:#fff; width:100%;}
.syisnav li a:hover{background:#333; color:#fff;}
.syisnav li ul{width:100%; position:static; transform:translate(0,0); padding:0;}
.syisnav li ul li{width:100%;}
.syisnav li ul li a{padding-left:1em; font-size:14px; border:none; width:auto; color:#dfd2bc;}
	.main.top{padding:3% 0;}
	
	/*--list default setting--*/
	.list, .list .frm{padding:5px;}
	
	/*download*/

#footer .flexfrm{flex-wrap: wrap;}
#footer .flexfrm div{width:50%; text-align:center;}

#header .logo img{padding-left: 10px;}

#footer .copyright a{display:inline-block;}


}