@charset "utf-8";

body{
background:url(/img2/bg.jpg) top repeat-x;
}



/*	drawer-nav
--------------------------------------------------*/

.drawer-nav{
	display: none;
}


@media(max-width:795px){
	.drawer-nav{
		display:block;
	padding-top:50px;
}
	.drawer-nav .drawer-menu{
	padding-bottom: 200px;

}
.drawer-nav ul{
	width:220px;
	padding:30px 0 0 0;
	margin-left: 20px;
}
.drawer-nav ul li{
	font-size: 15px;
	line-height: 1;
	color:#000000;
	margin: 0 0 20px;
}
.drawer-nav ul li a{
	color:#000000;
}

.drawer-nav ul li a:hover {
	color:#999;
	text-decoration: none;
}
.drawer-nav a.catalogbtn{
background: #e23627;
padding:10px 20px;
display: block;
font-size: 15px;
}
.drawer-nav a.catalogbtn:hover{
background: #9c1c1c;
text-decoration: none;
}
.drawer-nav a.loginbtn{
background: #e3e3e3;
color: #000;
padding:10px 20px;
display: block;
font-size: 15px;
}
.drawer-nav a.loginbtn:hover{
background: #ccc;
text-decoration: none;
}
}
/* ==============================================
★burgerbtn
 ==============================================*/
.burgerbtn{
	display: none;

}
@media(max-width:795px){
	.burgerbtn{
	display:block;
	position:fixed;
	left:95%;
		top:-5px;
	margin: 0 0 0 -35px;
	z-index: 1000;
		/*display:block;
	position:absolute;
	right:0;
		top:0px;

	margin: -3px 0 0 -30px;
	z-index: 100000;*/
}
}
/* ==============================================
��header
 ==============================================*/


#header {
	margin:0;
	padding:0;
	width:100%;
	height: 80px;
	position:absolute;
	top:0;
	left: 0;
	background: rgba(255,255,255,0.9);
	z-index: 100;
}
#header .con{
	margin:0 auto;
	padding:0;
	width:960px;
	height: 80px;
}
#header .con h1 {
float: left;
padding: 17px 0 0;
}
#header .con ul.headnav {
float: left;
margin: 0 0 0 25px;
}
#header .con ul.headnav li{
float: left;
}
#header .con ul.headnav li a{
display: block;
color: #000;
font-size: 14px;
font-weight: bold;
height: 48px;
padding:32px 12px 0;
}

#header .con ul.headnav li a:hover{
color: #999;
text-decoration: none;
}
#header .RNav{
position:absolute;
	top:0;
	right: 0;
	width:250px;
}
#header .RNav a{
width:125px;
display: table-cell;
text-align: center;
height: 80px;
font-size: 15px;
vertical-align: middle;
}
#header .RNav a:hover{
text-decoration: none;
}
#header .RNav a.catalogbtn{
background: #d32222;
}
#header .RNav a.catalogbtn:hover{
background: #9c1c1c;
}
#header .RNav a.loginbtn{
color:#000;
}
#header .RNav a.loginbtn:hover{
background: #dedede;
}
@media(max-width:990px){
#header .con{
	margin:0 auto;
	padding:0;
	width:100%;
	height: 80px;
}
#header .con h1 {
float: left;
padding: 17px 0 0;
}
#header .con ul.headnav {
float: left;
margin: 0 0 0 15px;
}
#header .con ul.headnav li{
float: left;
}
#header .con ul.headnav li a{
display: block;
color: #000;
font-size: 13px;
font-weight: bold;
height: 48px;
padding:32px 4px 0;
}
#header .con ul.headnav li a:hover{
color: #999;
text-decoration: none;
}
#header .RNav{
position:absolute;
	top:0;
	right: 0;
	width:200px;
}
#header .RNav a{
width:100px;
display: table-cell;
text-align: center;
font-size: 14px;
height: 80px;
vertical-align: middle;
}
}
@media(max-width:795px){
#header {
	height: auto;
}
#header .con{
	margin:0 auto;
	padding:0;
	width:100%;
	height: auto;
	text-align: center;
}
#header .con h1 {
float:none;
width: 100px;
padding: 9px 0;
margin: 0 auto;
}
#header .con h1 img{
width: 100px;
}
#header .con ul.headnav {
display: none;
}

#header .RNav{
display: none;
}

}
 /* ==============================================
��mainimg
 ==============================================*/
 #mainimg{
 width: 100%;
 min-width: 960px;
 height: 660px;
background-image:url(../../img2/mainimg.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
 }
 #mainimg p{
 width: 100%;
 min-width: 960px;
 padding: 10px 0 10px;
 position: absolute;
 top:470px;
 left:0;
 font-size: 36px;
 font-weight: bold;
 color:#FFF;
 text-align: center;
 background: rgba(102,217,232,0.8);
 }
 #mainimg p br{
 display: none;
 }
 @media(max-width:9606px){
  #mainimg{
 width: 100%;
 min-width: auto;
 height: 580px;
background-image:url(../../img2/mainimgsp.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
 }
 #mainimg p{
  min-width: auto;
 width: 100%;
 padding: 10px 0 10px;
 position: absolute;
 top:470px;
 left:0;
 font-size: 24px;

 }
 }
  @media(max-width:480px){
    #mainimg{

 height: 320px;
 }
 #mainimg p{
 width: 100%;
 padding: 6px 0 6px;
 position: absolute;
top:248px;
 left:0;
 font-size: 20px;

 }
  #mainimg p br{
 display: block;
 }
  }
 /* ==============================================
��#sec01
 ==============================================*/
#sec01{
	width:960px;
	/**/margin-left: -480px;
	position:absolute;
	top:580px;
	left:50%;
	height:auto;
	background:#FFF;
}

#sec01 ul.nav{
width:930px;
padding:15px 15px 0;
}
#sec01 ul.nav li{
float: left;
width:300px;
margin:5px;
padding: 0;
position: relative;
}
#sec01 ul.nav li img{
display: block;

}
figure {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 0;
	margin: 0;
}
figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
	text-align: center;
}
figcaption img{
	margin: 0 auto;
}
figure:hover figcaption {
	opacity: 1;
}
figure h3 {
			padding: 20px 0 5px;
			color: #fff;
			font-size: 24px;
			text-align: center;
			font-family: 'Open Sans', sans-serif;
			font-weight: 600;
		}
		figure p {
			color: #fff;
			text-align: center;
			font-family: 'Open Sans', sans-serif;
			font-weight: 400;
		}

.transform01 {
			-webkit-transform: scale(1);
			transform: scale(1);
			-webkit-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}
figure:hover .transform01 {
			-webkit-transform: scale(1.2);
			transform: scale(1.2);
}
@media(max-width:480px){
figcaption {
display: none;
}
}
#sec01 ul.nav li a{
color: #FFF;
margin:0;
padding: 0;
}
#sec01 ul.nav li p.ov{
position: absolute;
font-size: 20px;
padding: 6px 0 6px;
line-height: 1;
text-align: center;
width: 100%;
bottom:0;
z-index: 100;
}
#sec01 ul.nav li p.ov img{
margin: 0 auto;
}
#sec01 ul.nav li.n1 p.ov{
background: rgba(21,170,191,0.8);
}
#sec01 ul.nav li.n2 p.ov{
background: rgba(214,51,108,0.8);
}
#sec01 ul.nav li.n3 p.ov{
background: rgba(50,154,240,0.8);
}
#sec01 ul.nav li.n4 p.ov{
background: rgba(188,143,29,0.8);
}
#sec01 ul.nav li.n5 p.ov{
background: rgba(174,62,201,0.8);
}
#sec01 ul.nav li.n6 p.ov{
background: rgba(247,103,7,0.8);
}

@media(max-width:960px){
#sec01{
	width:100%;
	/**/margin-left: 0;
	position:static;
	height:auto;
	background:#FFF;
}

#sec01 ul.nav{
width:98%;
padding:10px 1% 8px;
}
#sec01 ul.nav li{
float: left;
width:32.1%;
margin:0.6%;
padding: 0;
position: relative;
}
#sec01 ul.nav li img{
display: block;
width:100%;

}
#sec01 ul.nav li a{
color: #FFF;
margin:0;
padding: 0;
}
#sec01 ul.nav li p{
position: absolute;
font-size: 16px;
padding: 5px 0 3px;
line-height: 1;
text-align: center;
width: 100%;
bottom:0;
}
#sec01 ul.nav li p.ov{
padding: 4px 0 4px;

}
}
@media(max-width:480px){


#sec01 ul.nav{
width:98%;
padding:5px 1% 8px;
}
#sec01 ul.nav li{
float: left;
width:48%;
margin:1%;
padding: 0;
position: relative;
}

#sec01 ul.nav li p{
position: absolute;
font-size: 14px;
padding: 5px 0 3px;
line-height: 1;
text-align: center;
width: 100%;
bottom:0;
}
#sec01 ul.nav li p.ov{
padding: 4px 0 4px;

}
}

 /* ==============================================
��#news
 ==============================================*/

  #news{
  width: 900px;
  margin: 400px auto 50px;
  }
  #news h2{
  text-align: center;
  font-size: 30px;
  line-height: 1;

  }
  #news ul{
  margin: 31px auto 0;
 border-top: 1px solid #e9ecef;
  }
  #news ul li{
  width:820px;
  font-size: 16px;
  padding:14px  40px 12px;
  margin: 0;
  border-bottom: 1px solid #e9ecef;
  }
  #news ul li a{
  color:#000;
 }
  #news ul li span{
  padding:0 30px 0 0;
}
#news a.btn{
display: block;
  width:260px;
  color: #000;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
  border: 1px solid #000;
  margin: 30px auto 0;
}
#news a.btn:hover{
text-decoration: none;
background: #dedede;
}
 @media(max-width:960px){
 #news{
  width: 100%;
  margin: 0 auto;
  padding:30px 0;
  background: #FFF;
  }
  #news h2{
  text-align: center;
  font-size: 20px;
  line-height: 1;

  }
  #news ul{
  margin: 20px auto 0;
 border-top: 1px solid #e9ecef;
  }
  #news ul li{
  width:95%;
  padding:10px  2.5% 8px;
  margin: 0;
    font-size: 14px;
  border-bottom: 1px solid #e9ecef;
  }
  #news ul li a{
  color:#000;
 }
  #news ul li span{
  padding:0 15px 0 0;
}
#news a.btn{
display: block;
  width:260px;
  color: #000;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  border: 1px solid #000;
  margin: 30px auto 0;
}
}
 @media(max-width:480px){
 #news{
  width: 100%;
  margin: 0 auto;
  padding:25px 0;
  background: #FFF;
  }
  #news h2{
  text-align: center;
  font-size: 20px;
  line-height: 1;

  }
  #news ul{
  margin: 20px auto 0;
 border-top: 1px solid #e9ecef;
  }
  #news ul li{
  width:95%;
  padding:10px  2.5% 8px;
  margin: 0;
    font-size: 14px;
  border-bottom: 1px solid #e9ecef;
  }
  #news ul li a{
  color:#000;
 }
  #news ul li span{
  display: block;
  padding:0 15px 0 0;
}
#news a.btn{
display: block;
  width:260px;
  color: #000;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  border: 1px solid #000;
  margin: 30px auto 0;
}
}
/* ==============================================
#productinfo
 ==============================================*/

  #productinfo{
  background:url(../../img2/productinfobg.gif) repeat-y center #daecff;
  width: 100%;
  padding: 45px 0 50px;
  }
  #productinfo h2{
  text-align: center;
  font-size: 30px;
  line-height: 1;

  }
  #productinfo ul{
  width:900px;
  margin: 31px auto 0;
 border-top: 1px solid #e9ecef;
  }
  #productinfo ul li{
  width:820px;
  font-size: 16px;
  padding:14px  40px 12px;
  margin: 0;
  border-bottom: 1px solid #e9ecef;
  }
  #productinfo ul li a{
  color:#000;
 }
  #productinfo ul li span{
  padding:0 30px 0 0;
}
#productinfo a.btn{
display: block;
  width:260px;
  color: #000;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
  border: 1px solid #000;
  margin: 30px auto 0;
}
#productinfo a.btn:hover{
text-decoration: none;
background: #dedede;
}
 @media(max-width:960px){
 #productinfo{
  width: 100%;
  margin: 0 auto;
  padding:30px 0;
  }
  #productinfo h2{
  text-align: center;
  font-size: 20px;
  line-height: 1;

  }
  #productinfo ul{
  width:100%;
  margin: 20px auto 0;
 border-top: 1px solid #e9ecef;
  }
  #productinfo ul li{
  width:95%;
  padding:10px  2.5% 8px;
  margin: 0;
    font-size: 14px;
  border-bottom: 1px solid #e9ecef;
  }
  #productinfo ul li a{
  color:#000;
 }
  #productinfo ul li span{
  padding:0 15px 0 0;
}
#productinfo a.btn{
display: block;
  width:260px;
  color: #000;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  border: 1px solid #000;
  margin: 30px auto 0;
}
}
 @media(max-width:480px){
 #productinfo{
  width: 100%;
  margin: 0 auto;
  padding:25px 0;

  }
  #productinfo h2{
  text-align: center;
  font-size: 20px;
  line-height: 1;

  }
  #productinfo ul{
  margin: 20px auto 0;
 border-top: 1px solid #e9ecef;
  }
  #productinfo ul li{
  width:95%;
  padding:10px  2.5% 8px;
  margin: 0;
    font-size: 14px;
  border-bottom: 1px solid #e9ecef;
  }
  #productinfo ul li a{
  color:#000;
 }
  #productinfo ul li span{
  display: block;
  padding:0 15px 0 0;
}
#productinfo a.btn{
display: block;
  width:260px;
  color: #000;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  border: 1px solid #000;
  margin: 30px auto 0;
}
}
  /* ==============================================
��#catalog
 ==============================================*/

  #catalog{
  width: 100%;
  height: 500px;
  margin: 0 auto 0;
  /*background:url(../../img2/catalogbg.jpg)top center;*/
    background: #FFF;
  }
  #catalog .con{
  width: 960px;
margin: 0 auto;
  }
#catalog .con h2{
  text-align: center;
  font-size: 30px;
  line-height: 1;
  padding: 52px 0 18px;
}
#catalog .con .LImg{
 float: left;
/* margin: 0 0 0 36px; */
 margin: 0 0 0 256px;
}
#catalog .con .RArea{
 float: right;
 width: 480px;
 margin: 18px 0 0 0;
 font-size: 16px;
}
#catalog .con .RArea h3{
 font-size: 16px;
}
#catalog .con .RArea p{
 margin:0 0 20px;
 padding: 0 0 0 12px;
}
#catalog a.btn{
display: block;
  width:260px;
  color: #000;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
  border: 1px solid #000;
  margin: 30px auto 0;
}
#catalog a.btn:hover{
text-decoration: none;
background: #73eaf9;
}
 @media(max-width:960px){
   #catalog{
  width: 100%;
  height: auto;
  margin: 0 auto 0;
  padding:0 0 30px;

  }
  #catalog .con{
  width: 95%;
margin: 0 auto;
  }
#catalog .con h2{
  text-align: center;
  font-size: 20px;
  line-height: 1;
  padding: 35px 0 15px;
}
#catalog .con .LImg{
 float: left;
 width: 35%;
 margin: 0 0 0 0;
}
#catalog .con .LImg img{
 width: 100%;
 margin: 0 0 0 0;
}
#catalog .con .RArea{
 float: left;
 width: 60%;
 margin: 12px 0 0 5%;
 font-size: 14px;
}
#catalog .con .RArea h3{
 font-size: 14px;
}
#catalog .con .RArea p{
 margin:0 0 15px;
 padding: 0 0 0 11px;
}
#catalog a.btn{
display: block;
  width:260px;
  color: #000;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  border: 1px solid #000;
  margin: 20px auto 0;
}
}
 @media(max-width:480px){
   #catalog{
  width: 100%;
  height: auto;
  margin: 0 auto 0;
  padding:0 0 30px;

  background-size: cover;
  }
  #catalog .con{
  width: 95%;
margin: 0 auto;
  }
#catalog .con h2{
  text-align: center;
  font-size: 20px;
  line-height: 1;
  padding: 35px 0 15px;
}
#catalog .con .LImg{
 float: none;
 width: 70%;
 margin: 0 auto 15px;
}
#catalog .con .LImg img{
 width: 100%;
 margin: 0;
}
#catalog .con .RArea{
 float: none;
 width: 100%;
 margin: 0;
 font-size: 14px;
}
#catalog .con .RArea h3{
 font-size: 14px;
}
#catalog .con .RArea p{
 margin:0 0 15px;
 padding: 0 0 0 11px;
}
#catalog a.btn{
display: block;
  width:260px;
  color: #000;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  border: 1px solid #000;
  margin: 5px auto 0;
}
}
/* ==============================================
��#footnav
 ==============================================*/
#footnav{
	width:100%;
  height: 260px;
  margin: 0 auto 0;
  background:url(../../img2/footnavbg.jpg)top center;
}

#footnav ul{
width:960px;
padding:30px 0 0;
margin: 0 auto;
}
#footnav ul li{
float: left;
width:231px;
margin:0 12px 0 0;
padding: 0;
}
#footnav ul li:last-child{
margin:0;
}
#footnav ul li img{
display: block;

}

#footnav ul li a:hover{
text-decoration: none;
}
#footnav ul li p{
font-size: 16px;
padding: 13px 0 11px;
line-height: 1;
text-align: center;
width: 100%;
color: #000;
background: #FFF;
}
 @media(max-width:960px){
 #footnav{
	width:100%;
  height: auto;
  margin: 0 auto 0;
  background:url(../../img2/footnavbg.jpg)bottom center;
}

#footnav ul{
width:98%;
padding:20px 0 ;
margin: 0 1%;
}
#footnav ul li{
float: left;
width:24%;
margin:0.5%;
padding: 0;
}
#footnav ul li:last-child{
margin:0.5%;
}
#footnav ul li img{
display: block;
width: 100%;

}

#footnav ul li p{
font-size: 12px;
padding: 7px 0 5px;
line-height: 1;
text-align: center;
width: 100%;
color: #000;
background: #FFF;
}
 }
  @media(max-width:600px){
  #footnav ul li{
float: left;
width:48%;
margin:1%;
padding: 0;
}
#footnav ul li:last-child{
margin:1%;
}
  #footnav ul li p{
font-size: 14px;
padding: 7px 0 5px;
line-height: 1;
text-align: center;
width: 100%;
color: #000;
background: #FFF;
}
  }
/* ==============================================
page-top
==============================================*/
  #page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
#page-top a {

}
#page-top a:hover {

}
 @media(max-width:480px){
 #page-top {
    position: relative;
	top:0;
	left:0;
	text-align: center;


}
#page-top a {
display: block;
width: 100%;
background: #000;

}
#page-top a img{

width: 40px;


}
 }
/* ==============================================
footobiNav
==============================================*/
.footobiNav{
width: 100%;
min-width: 960px;

padding: 20px 0;
text-align: center;
width:100%;
background: #6f6f6f;
}
.footobiNav a{
display: inline-block;
font-size: 12px;
line-height: 1;
color:#fff;
padding: 0 12px;
}
.footobiNav br.br01{
display: none;
}
 @media(max-width:960px){
 .footobiNav{
width: 100%;
min-width: auto;

padding: 20px 0 10px;
text-align: center;
width:100%;
background: #6f6f6f;
}
 .footobiNav a{
font-size: 12px;
line-height: 1;
color:#fff;
padding: 0 15px 10px;
}
.footobiNav br.br01{
display: block;
}
 }
  @media(max-width:480px){
  .footobiNav{
width: 100%;
min-width: auto;

padding: 0;
text-align: center;
width:100%;
background: #6f6f6f;
}
   .footobiNav a{
   display: block;
font-size: 14px;
line-height: 1;
color:#fff;
padding: 13px 0 11px;
border-bottom: 1px solid #969798;
}
.footobiNav a:hover{
   background: #333;
   text-decoration: none;
}
.footobiNav br.br01{
display: none;
}


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

#footer{
	padding:20px 0 20px;
	background:#FFF;
	width:100%;
	margin: 0 auto;
	text-align:left;
font-size: 16px;
line-height: 1.8;
}
#footer .con{
width:660px;
	margin: 0 auto;
	padding: 0 0 20px;
}
#footer .con p.LArea{
float: left;
}
#footer .con p.tel{
float: right;
background: url(../../img2/tel.gif)no-repeat left;
padding: 10px 0 0 40px;
font-size: 30px;
}
#footer a.btn{
float: right;
display: block;
  width:260px;
  color: #000;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
  border: 1px solid #000;
  margin: 0;
}
#footer a.btn:hover{
text-decoration: none;
background: #dedede;
}
#footer .underNav{
width: 100%;
border-top: 1px solid #dedede;
padding: 33px 0 0;
text-align: center;
width:100%;
}
#footer .underNav a{
font-size: 14px;
color:#000;
padding: 0 15px;
}
#footer p.copy{
margin: 20px 0 20px;
float: left;
width:100%;
font-size: 12px;
text-align: center;
}

  @media(max-width:768px){
  #footer{
	padding:18px 0 18px;
	background:#FFF;
	width:100%;
	margin: 0 auto;
	text-align:left;
font-size: 14px;
line-height: 1.8;
}
#footer .con{
width:90%;
	margin: 0 auto;
	padding: 0 0 20px;
}
#footer .con p.LArea{
float: left;
}
#footer .con p.tel{
float: right;
background: url(../../img2/tel.gif)no-repeat left;
background-size: 25px 25px;
padding: 2px 0 0 30px;
font-size: 26px;
}



#footer p.copy{
margin: 30px 0 0;
float: left;
width:100%;
font-size: 12px;
text-align: center;
}
}
@media(max-width:600px){
  #footer{
	padding:15px 0 10px;
	background:#FFF;
	width:100%;
	margin: 0 auto;
	text-align:center;
font-size: 14px;
line-height: 1.8;
}
#footer .con{
width:90%;
	margin: 0 auto;
	padding: 0 0 0;
	text-align: center;
}
#footer .con p.LArea{
float: none;
}

#footer .con p.tel{
float: none;
display: inline-block;
background: url(../../img2/tel.gif)no-repeat left;
background-size: 20px 20px;
padding: 0 0 0 25px;
font-size: 30px;
}

#footer .underNav{
margin: 10px 0 0;
padding: 0;
float:none;
width:100%;
border-left:none;
border-top:1px solid #edf0f2;
}
#footer .underNav a{
display: block;
font-size: 14px;
color:#000;
border-right:none;
border-bottom:1px solid #edf0f2;
padding: 10px 0;
}
#footer .underNav a:hover{
text-decoration: none;
background: #dedede;
}
#footer p.copy{
margin: 20px 0 20px;
float: left;
width:100%;
font-size: 10px;
text-align: center;
}
  }