/*create by CStyle*/
/* ================================= MAIN =================================*/
html, body { height:100%;}
body { background:#0a0a0a url('../images/bg.png') repeat left top; margin:0; padding:0; font-size:14px; font-family: "Roboto", sans-serif; color:#5f5f5f; min-height:100%; height:auto!important; height:100%; position:relative;}
img {border:none; outline:none;}
a {outline-style: none; color:#333333;}
a:visited {color:#333333;}
a:hover {color:#03953c;}
.left { float:left;}	
.right { float:right;}
.clear { clear:both; font-size:0; line-height:0;}

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

#container {width:1200px; margin:30px auto 30px; padding: 0 0 190px 0; background:#fff;}
/* ================================= header =================================*/
.top {background:#f1f1f1; height: 37px; border-bottom: 1px solid #e1e1e1; padding: 13px 20px 0 20px;}
.top .phone {background: url('../images/phone.png') no-repeat left center; color:#333333; padding: 5px 0 5px 30px; margin: 0 20px 0 0; float: right;}
.top .phone a {text-decoration: none; font-size: 14px;}

.top .mail {background: url('../images/mail.png') no-repeat left center; color:#333333; padding: 5px 0 5px 30px; margin: 0 20px 0 0; float:right;}
.top .mail a {text-decoration: none; font-size: 14px;}

.top .address {background: url('../images/dot.png') no-repeat left center; color:#333333; padding: 5px 0 5px 30px; margin:0; float: left;}
.top .address a {text-decoration: none; font-size: 14px;}

#header {background: url('../images/header.png') no-repeat; padding: 15px 0; height: 90px;}
#header .logo {padding: 0 0 0 20px; max-height:80px; overflow:hidden; text-align:left;}
#header .logo img {height:80px;}

#search {width: 300px; float: right; margin: 13px 20px 0 0;}
#search input[type="text"] {float: right; width: 160px; background:#e5e5e5; border: none; height: 31px; font-style: italic; padding: 0 20px;transition: width .3s;}
#search input[type="text"]:hover {width: 208px;}
.button-search {float: right; width: 51px; height: 31px; background: url('../images/search.jpg') no-repeat left top; cursor:pointer;}
/* ================================= menu =================================*/
#menu {background:#03953c; height: 60px; width: 100%; box-shadow: inset 0 3px 3px #414141; text-align: center;}
/*#menu ul {float: left; width: 800px; }*/
#menu ul li {position: relative; transition:background .3s; display: inline-block;}
#menu ul li a {display: block; padding: 22px 40px; color:#fff; font-size: 16px; text-decoration: none;}
#menu ul li:hover {background:#333333; color:#fff;}
#menu ul li a.active {background:#333333; color:#fff;}
#menu ul li ul {display: none; position: absolute; top: 60px; left:0px; width: 230px; background:rgba(51, 51, 51, 0.9); z-index: 30;}
#menu ul li ul li {}
#menu ul li ul li a {display: block; padding: 15px 20px; width: 190px; border-bottom: 1px solid #5a5a5a; transition: background .3s; font-size: 14px;}
#menu ul li ul li a:hover {background:#03953c; color:#fff; }

#menu ul li:hover > ul {display: block;}

/* ================================= content =================================*/
#content {min-height: 400px;}
#content p {font-size: 16px; line-height: 28px; text-align:justify;}
#content h1 {font-size: 18px; color:#03953c; font-weight: normal; text-align:left; background: url('../images/h2.png') no-repeat left bottom; padding: 0 0 30px 0; margin: 30px 0 20px 0; display: block; text-transform:uppercase;}
#content h2 {font-size: 14px; color:#333333; font-weight: bold; text-align: center; padding: 0 0 20px 0; margin: 0 0 10px 0; display: block;}

.breadcrumb {width: 100%; height: 130px; background: url('../images/bread.png') no-repeat left top; color:#fff; font-size:16px; text-align:center; padding:70px 0 0 0;}
.breadcrumb a {color:#fff; font-size:16px; text-decoration:none; text-transform:uppercase;}
.breadcrumb a:hover {text-decoration:underline;}
.breadcrumb .texts {padding:25px 0; background: rgba(0, 0, 0, .7);}

.superslider {width: 1200px; height: 460px; overflow: hidden;}
.superslider ul {width: 2000px; height: 460px;}
.superslider li {width: 600px; height: 460px; float: left; position: relative; overflow: hidden; z-index: 3; transition: width .3s; box-shadow: -5px 0 15px #333333;}
.superslider li .image {width: 600px; height: 460px; position: absolute; top: 0px; left: 0px; z-index: 5;}
.superslider li .title {width: 290px; position: absolute; left: 0px; top: 20px; background:#03953c; color:#fff; font-size: 14px;text-transform: uppercase; z-index: 10; padding: 20px 5px; opacity: 100; transition: opacity .3s, left .3s;}
.superslider li .description {width: 290px; position: absolute; left: 0px; bottom: -120px; background:rgba(0, 0, 0, 0.9); color:#fff; font-size: 14px; z-index: 15; padding: 20px 5px; line-height: 22px; opacity: 0; transition: opacity .3s, bottom .3s, width .3s;}
.superslider .description h3 {font-size: 24px; color:#03953c; margin: 0 0 10px 0; font-weight: normal;}
.superslider li:nth-child(1) {z-index: 3;}
.superslider li:nth-child(2) {z-index: 4;}
.superslider li:nth-child(3) {z-index: 5;}
.superslider li:nth-child(4) {z-index: 6;}


.superslider ul:hover li {width: 750px;}
.superslider ul li:hover {/*z-index: 20;*/ width: 750px;}
.superslider li:hover a .title {opacity: 0; left: -300px;}
.superslider li:hover a .description {opacity: 100; bottom: 20px; width: 440px; padding: 20px 10px;}

.ads {background:#03953c; padding: 20px 30px; font-size: 14px; color:#fff; line-height: 22px; margin: 0;}
.ads .title {float: left; font-size: 18px; margin: 0 0 10px 0; display: block;}
.ads .text {float: left; width: 960px;}
.ads .readmore {float:right; display: block; width: 170px; margin:10px 0 0 0; padding: 15px 0; text-align: center; background:#fff;}
.ads .readmore a {text-decoration: none; font-size: 16px;}

.teather {background:#f0f0f0; padding: 30px 0 0 0;}
.teather h1 {font-size: 18px; color:#03953c; font-weight: normal; text-align: center!important; background: url('../images/h1.png') no-repeat center bottom!important; padding: 0 0 20px 0; margin: 0 0 10px 0; display: block;}
.teather h2 {font-size: 14px; color:#333333; font-weight: bold; text-align: center; padding: 0 0 20px 0; margin: 0 0 10px 0; display: block;}
.teather .item {width: 240px; height: 120px; padding: 9px; float: left; background:#fff; border:1px solid #e1e1e1; margin: 0 20px 40px; position: relative;}
.teather .item .icon {float: left; margin: 5px 10px 10px 5px; width: 42px; height:40px;}
.teather .item .title {color:#03953c; font-size: 16px; margin: 5px 0 10px 10px; display: block;}
.teather .item .title a {color:#03953c; text-decoration: none;}
.teather .item .text {font-size: 14px; line-height: 20px; margin: 0 0 0 10px;}
.teather .item .text a {text-decoration: none;}
.teather .item .readmore {font-size: 16px; color:#03953c; position: absolute; right:10px; bottom: 10px;}
.teather .item .readmore a {color:#03953c; text-decoration: none;}
.teather .item .readmore a:hover {text-decoration: underline;}

.about {background:#fff; padding: 50px 30px;}
.about .image {float: left; margin: 0 20px 20px 0; width: 500px; height: 340px;}
.about .text {float: right; width: 600px; font-size: 14px; line-height: 24px;}
.about h2 {background: url('../images/h2.png') no-repeat left bottom; padding: 0 0 20px 0; margin: 0 0 20px 0; color:#03953c; font-size:18px; font-weight: normal;}
.about p {margin: 5px 0; padding: 5px 0;}
.about ul {margin: 10px 0 0 20px;}
.about ul li {list-style: none; margin: 10px 0; background: url('../images/li.png') no-repeat left center; padding:0 0 0 30px;}
.about .readmore a {color:#fff; text-decoration: none; padding: 10px 0 0 45px; display: block; background: url('../images/readmore.png') no-repeat left top; width: 172px; height: 36px; margin: 20px 0;}

.desc-about {background:#fff; padding: 30px 30px 50px 30px; font-size:14px;}
.desc-about .image {margin: 10px 20px 20px 0; width: 500px; height: 340px;}
.desc-about .image2 {margin: 10px 20px 10px 0; width: 400px; height: 300px; border:1px solid #e5e5e5; line-height: 0px; font-size: 0px;}
.desc-about .text {width: 600px; font-size: 14px; line-height: 24px;}
.desc-about h2 {background: url('../images/h2.png') no-repeat left bottom; padding: 0 0 20px 0; margin: 0 0 20px 0; color:#03953c; font-size:18px; font-weight: normal;}
.desc-about h1 b {font-size: 14px; color:#696969; font-weight: normal; font-style: italic;}
.desc-about p {margin: 5px 0; padding: 5px 0; font-size:16px!important; line-height:24px;}
.desc-about ul {margin: 10px 0 0 20px;}
.desc-about ul li {list-style: none; margin: 10px 0; background: url('../images/li.png') no-repeat left center; padding:0 0 0 30px;}
.desc-about .readmore a {color:#fff; text-decoration: none; padding: 10px 0 0 45px; display: block; background: url('../images/readmore.png') no-repeat left top; width: 172px; height: 36px; margin: 20px 0;}

#column-left {width: 250px; margin: 50px 50px 0 50px; float: left;}
#column-left .title {background: url('../images/cat_bg.png') no-repeat left top; height: 28px; color:#fff; font-size: 16px; padding: 12px 0 0 40px;}
#column-left .cetagories {border: 1px solid #e1e1e1; width: 247px;}
#column-left ul {}
#column-left ul ul {display: none; background:#fff;}
#column-left ul ul ul {display: none; margin: 0 0 0 45px; padding: 0;}
#column-left ul li {}
#column-left ul a {padding: 13px 0 13px 25px; display: block; text-decoration: none; border-top:1px solid #f0f0f0;  background: url('../images/cat-arr.png') no-repeat 10px center; transition: background .3s, color .3s; font-size: 16px; color:#333333;}
#column-left ul a:hover {background-color:#03953c; color:#fff;}
#column-left .active > a {background-color:#03953c; color:#fff;}
#column-left .active2 > a {font-weight: bold; text-decoration: underline; color:#03953c;}
#column-left .active2 ul a {padding: 5px 0 5px 0;}
#column-left .active2 ul a:hover {background:none; color:#03953c; }


#column-left ul ul {border: none;}
#column-left ul ul li {}
#column-left ul ul li a {padding: 10px 0 10px 35px; font-size: 14px; background:none; border:none; color:#626262;}
#column-left .active > ul {display: block;}
#column-left .active2 > ul {display: block;}

.list {float: right; width: 850px; margin: 50px 0 0 0;}
.list .item {width: 250px; float: left; margin: 0 30px 30px 0; border: 1px solid #e1e1e1; padding: 10px 0; overflow: hidden;}
.list .item:nth-child(3n) {margin: 0 0 30px 0;}
.list .item .title a {font-size: 14px; text-transform: uppercase; color:#03953c; text-decoration: none; padding: 0 10px; display: block; height: 36px; line-height: 20px; overflow: hidden;}
.list .item .photo a {margin: 20px 0; display: block;}
.list .item .description a {text-decoration: none; padding: 0 5px; display: block; font-size: 14px; line-height: 20px; height:80px; overflow: hidden;}
.list .item .readmore a {text-decoration: none; padding: 0 5px; text-align: right; display: block; color:#03953c; font-size: 14px; margin: 20px 0 10px 0;}

.product-list-search {padding: 0 30px;}
.product-list-search .item {width: 250px; float: left; margin: 0 40px 40px 0; border: 1px solid #e1e1e1; padding: 10px 0; overflow: hidden;}
.product-list-search .item:nth-child(4n) {margin: 0 0 40px 0;}
.product-list-search .item .title a {font-size: 14px; text-transform: uppercase; color:#03953c; text-decoration: none; padding: 0 10px; display: block; height: 36px; line-height: 20px; overflow: hidden;}
.product-list-search .item .photo a {margin: 20px 0; display: block;}
.product-list-search .item .description a {text-decoration: none; padding: 0 5px; display: block; font-size: 14px; line-height: 20px; height:80px; overflow: hidden;}
.product-list-search .item .readmore a {text-decoration: none; padding: 0 5px; text-align: right; display: block; color:#03953c; font-size: 14px; margin: 20px 0 10px 0;}

.category-info {margin:20px 30px 20px 0; font-family:Arial, sans-serif!important; line-height:20px; font-size:14px;}
.category-info p {margin:10px 0; text-indent:20px; font-family:Arial, sans-serif!important;}
.category-info .image {width: 400px; height: 300px;margin: 0 20px 10px 0; float: left;}

.category-list {margin:50px 30px;}
.category_rarely li {width:50%; float:left;}
.category_often li {width:50%; float:left;}
#content .category-list h2 {color:#03953c; font-size:18px; font-weight:normal; background: url('../images/h1.png') no-repeat center bottom;}
.category-list ul {}
.category-list li {list-style:square;}
.category-list li a {font-size:16px; line-height:28px; text-decoration:none;}
.category-list li a:hover {color:#03953c; text-decoration:underline;}

#contact {width:300px; float:left; margin: 0 50px 50px 0;}
#contact b {color:#03953c;}
#contact input[type="text"] {width: 280px; border:1px solid #e1e1e1; font-size: 16px; padding: 3px 10px; margin: 5px 0;}
#contact textarea {width: 280px; border:1px solid #e1e1e1; font-size: 16px; padding: 3px 10px; margin: 5px 0; height:100px; min-height:50px; max-height:200px; min-width: 280px; max-width: 280px;}
.contact_down {width:calc(100% - 360px); float:right; line-height:24px;}
.button span {padding: 10px 30px; background-color: #03953c; color:#fff; text-decoration:none; cursor: pointer; display: block; text-align: center; font-weight: bold;}
.error {color:#BF0808; margin:3px 0 10px 0; display:block;}

/* ================================= footer =================================*/
#footer_box {bottom:0; left: 0; position:absolute; width:100%; height:190px; }
#footer {width:1140px; margin: 0 auto; padding: 0 30px 10px 30px; background:#f0f0f0;}

.fleft {float: left; width: 500px; color:#757575; font-size: 14px;}
.fleft .logo {margin: 20px 0; height:100px; width:100px;}
.fleft .text {line-height: 22px;}
.fleft .creator {line-height: 22px; margin: 30px 0 0 0;}

.fcenter {float: left; width: 640px; font-size: 14px; line-height: 20px;}
.fcenter .title {color:#03953c; font-size: 18px; margin:20px 0 10px 0; padding: 0 0 20px 0; background: url('../images/h2.png') no-repeat left bottom;}
.fcenter .address {padding: 0 0 0 30px; background: url('../images/adr.png') no-repeat left 3px;}
.fcenter .map {font-weight: bold; padding: 10px 0 0 30px; background: url('../images/map.png') no-repeat left 13px;}
.fcenter .map a {text-decoration: none;}
.fcenter .left {width: 50%;}
.fcenter .left {}
.fcenter .right {width: 50%; line-height: 23px;}
.fcenter .right b {width: 75px; display: inline-block;}
.fcenter .right a {text-decoration: none;}