body { font-family: Arial, Helvetica, sans-serif; background: #f2f2f2; font-size: 14px; color: #333; }

/* + header */
.header { width: 100%; min-height: 100px; background: #FFF; }
.header .box { width: 960px; height: auto; margin: 0px auto; }
.header .icon {float:right;  margin:25px 10px 0px 0px; display:none; }
.header .box .logo { float: left; display: block; }
.header .box .logo img { width: 100%; }
.menu { float: right; margin:35px 0px 0px 0px; display:block ; }
.menu ul li { display: block; float: left;  }
.menu ul li a {  font-size: 16px; color: #333;  padding: 5px; margin:0px 15px;  }
/* - header */

/* + slider */
.slidesjs-pagination, .slidesjs-play, .slidesjs-stop {display: none !important;}
.slide {width: 100%; max-width: 1280px; margin: 0px auto;}
.slidesjs-slide img {width: 100%;} 
/* - slider */

/* + page */
.content { max-width: 960px; width: 100%; height: auto; margin: 0px auto 5% auto;}
.hpContent {width: 28%; height: auto; float: left; margin: 3% 0% 0% 5%; }
	.hpContent h4 {padding: 2%; font-size: 16px;}
	.hpContent img {width: 100%;}
h1 {padding: 2% 0%; border-bottom: 1px solid #333;}
.left {width: 16%; height: auto; padding: 3% 2%; float: left; }
.left ul li a { color: #333;}
.left ul li {list-style: circle; list-style-position: inside; margin: 5% 0%;}
.right {float: right;; width: 75%; height: auto; border-left: 1px solid #333; padding: 3% 2% 3% 2%; text-align: justify;}
.right .logo {float: left; border:5px solid #fff; margin: 0% 2% 2% 0%;}
.right p {margin: 0% 0% 1% 0%; line-height: 17px;}
.right .products {width: 31%; height: auto; float: left; margin: 0% 1% 4% 1%; display: block;}
.right .products img {width: 100%;}
.right .products h3 { text-align: center; margin-bottom: 2%; color: #333;}
.left select  {display: none;}
#detail img { width: 100% }
#detail .dBox .fi {float: left; width: 39%; padding: 1% 0% 1% 1%; font-weight: bold;}
#detail .dBox .se {float: right; width: 59%; padding: 1% 1% 1% 0%}
#detail .dBox {width: 100%; height: auto;}
#detail .dBox:nth-child(odd) { background: #fff}
#contact iframe {width: 100%;}
#contact h3 {margin-top: 10px;}
#contact h4 {margin: 5px 0px 0px 5px; font-weight: normal;}
#contact h4 a {color: #003398;}
/* - page */

@media screen and (min-width: 0px) and (max-width: 960px) { 
/* + header */
.header .box { width: 100%; }
.menu { display:none ; width:100%; clear:both;  margin:10px 0px 0px 0px;  }
.header .icon {display:block; }
.header ul { float: none; margin:0px; }
.header ul li {float: none; text-align:center; margin:4% 0px; }
.header ul li a {font-weight: bold; }
/* + header */

/* + home */
.hpContent {width: 45%;  float: none; margin: 3% 0% 0% 0%; }
	.hpContent h4 {text-align: center;}
.content .hpContent:nth-child(odd) { float: left;}
.content .hpContent:nth-child(even) {float: right;}
/* - home */ 

h1 {padding: 2% 1%; text-align: center;}
.left {float: none; width: 100%; padding: 2% 0%; border-bottom: 1px solid #333;}
.left ul {margin: 0px auto; width: 320px; }
.left .productsMenu {width: 450px;}
.left ul li {list-style: none;  margin: 5% 10px; float: left;  }
.right {border:none; width: 90%; padding: 3% 0%; float: none; margin: 0px auto;}
.right p {margin: 0% 0% 3% 0%; line-height: 17px;}
}

@media screen and (min-width: 0px) and (max-width: 768px) { 
.right .products {width: 48%; }
}

@media screen and (min-width: 0px) and (max-width: 480px) { 
.hpContent h4 {font-size: 13px;}
.right .products {width: 48%; height: auto; float: left; margin: 0% 1% 4% 1%; display: block;}
.right .logo {float: none; margin: 2% 0%; width: 100%;}
.left .productsMenu {display: none;}
.left select {display: block; width: 80%; margin: 0px auto; text-align: center; font-size: 18px;}
h1 {font-size: 19px;}
#detail .dBox .fi {float: none; width: 90%; padding: 1% 0% 1% 1%; margin: 0px auto; text-align: center; }
#detail .dBox .se {float: none; width: 90%; padding: 1% 1% 1% 0%; margin: 0px auto; text-align: center;}
}