/* -------- CORE -------- */
body {font-family: Arial; font-size: 1em; color: #000; background: #fff; margin: auto; padding: 60px 0 0 0;}
* {box-sizing: border-box;}
a {text-decoration: none;}
p {margin: 0 0 20px 0;}

h1 {font-size: 2em; font-weight: bold; text-align: center; color: #e70;}
h2 {font-size: 2em; font-weight: bold; text-align: center;}
h3 {font-size: 1.5em; line-height: 1; font-weight: bold; text-align: center;} /* about oem */
h4 {font-size: 1.5em; font-weight: bold; text-align: left; text-indent: 40px; border-bottom: #d56 2px dotted;} /* about oem */
h5 {font-size: 1.5em; font-weight: bold; margin: 0 0 10px 30px;} /* products */

hr {margin: 30px 15%; border: 0.5px solid #bbb;}

.page_tittle {font-size: 1.8em; font-weight: bold; text-align: center; line-height: 2.5; margin: 0 0 40px 0; background: #08c; color: #fff;}
.page-content {margin: auto; width: 1260px; min-width: 340px;}
.spacer {width: 100%; height: 60px;}

@media screen and (max-width: 1280px) {
	.page-content {width: 100%;}
}

.clear {clear: both;}

/* -------- HEADER -------- */
#Header {background: #fff; margin: 0; padding: 0; box-shadow: #000 0 0 6px; position: fixed; top: 0; width: 100%; z-index: 1000;}
.header {margin: auto; width: 1280px; min-width: 340px;}

.logo {padding: 0 20px; display: inline-block; text-align: left; width: 30%;}

.menu {display: inline-block; vertical-align: bottom; text-align: right; width: 70%;}
.menu ul {margin: 0; padding: 0;}
.menu li {padding: 0px 30px; display: inline-block; line-height: 3; cursor: pointer; list-style: none;}
.menu a {color: #000; font-weight: bold; display: block; border-bottom: transparent solid medium; transition: all .35s ease;}
.menu li:hover a {border-bottom: #08c solid medium; transition: all .35s ease;}

.menu2 {float: right; display: none;}
.menu2 input {position: absolute; opacity: 0;}
.menu2-content {background: #dadada; position: absolute; display: none; right: 0; text-align: center; line-height: 2; width: 100%;}
.menu2 label {cursor: pointer;}
.menu2 li {list-style: none;}
.menu2 input:checked + label img {background: #dadada; transform: rotate(90deg); transition: all .35s ease; z-index: 2;}
.menu2 input:not(checked) + label img {transform: rotate(0deg); transition: all .35s ease;  z-index: 2;}
.menu2 input:checked ~ .menu2-content {display: block; /*box-shadow: #000 0 0 6px;*/ animation: showmenu .35s ease;  z-index: 1;}
.menu2-content a {display: inline-block; color: #000; font-weight: bold; padding: 10px 15px;}
.menu2-content a:hover {background-color: #ccc;}

@keyframes showmenu {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@media screen and (max-width: 1280px) {
	.header {width: 100%;}
}

@media screen and (max-width: 1024px) {
	.menu {display: none;}
	.menu2 {display: block;}
}

/* -------- SLIDER -------- */
#Slider {margin: auto;}
.slider {/*width: 1920px; height: 540px;*/ width: auto; max-width: 1920px; height:  540px;}

@media screen and (max-width: 1200px) {
	.slider {height: 440px;}
}

@media screen and (max-width: 1000px) {
	.slider {height: 340px;}
}

@media screen and (max-width: 800px) {
	.slider {height: 240px;}
}

/* -------- INDEX -------- */
#Index {}
#Index_feats {text-align: center;}
#Index_feats a {color: #000;}
.feats_block {background: #f5f5f5; box-shadow: #999 0 0 10px; display: inline-block; margin: 20px 20px;}
.feats_pict {}
.feats_text {}
.feats_text p {text-align: left; line-height: 2; margin: 0; padding: 30px 20px;}

@media screen and (max-width: 1280px) {
	.feats_block {margin: 20px 0;}
	.feats_pict {display: inline-block;}
	.feats_text {display: inline-block; vertical-align: top; width: 360px; padding-top: 10%;}
}

@media screen and (max-width: 768px) {
	.feats_block {width: 100%; min-width: 640px; margin: 20px 0;}
	.feats_block img { width: 100%;}
	.feats_pict {display: inline-block; width: 50%;}
	.feats_text {display: inline-block; vertical-align: top; padding-top: 10%; width: 50%;}
}


#Family {text-align: center; padding: 30px;}
.family {display: inline-block; margin: 30px 60px; border: #08c 10px solid; border-radius: 50%;}
.family img {border-radius: 50%; opacity: 0; transition: all .5s ease;}
.family:hover {border: #e70 10px solid;}
.family img:hover {opacity: 1; transition: all .5s ease;}

.news {text-align: center; margin: 40px auto; width: 1260px;}
.news_block {border: #ddd solid 1px; display: inline-block; margin: 10px; width: 500px; vertical-align: top; font-size: 1.4em; transition: all 0.35s;}
.news_block:hover {box-shadow: #999 0 0 6px 0; transition: all 0.35s;}
.news_text {display: inline; text-align: left; line-height: 2; margin: 0; padding: 0;}
.news a {color: #000;}

.partners {text-align: center; margin: 40px 0;}
.partnersBG {margin: auto; background: url(../img/partners.jpg) repeat-x; height: 100px; width: 1250px; animation: partners_anim 20s linear infinite;}

@keyframes partners_anim {
	0% {background-position: bottom left;}
	100% {background-position: bottom right;}
}

.eco {background: url(../img/eco.jpg) no-repeat; background-position: center; background-size:auto; height: 600px; padding: 20px;}
.eco p {font-size: 1.5em; line-height: 1.5; padding: 30px 20px; text-align: center; width: 600px; margin: 50px auto; background: rgba(255,255,255,0.5); border-radius: 20px;}

.oemodm {background: url(../img/odm.jpg) no-repeat; background-position: center; background-size:auto; height: 600px; padding: 20px;}

/* -------- PRODUCT -------- */
#Products {}
.tabs {background: #08c; text-align: center;}
.tabs input {display: none;}
.tabs label {color: #fff; display: inline-block; padding: 0 25px; line-height: 3; cursor: pointer; transition: all .35s;}
.tabs label:hover {background: #0af;}
.tabs [id^="tab"]:checked + label {background: #eee; color: #333;}

#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3,
#tab4:checked ~ #tab-content4 {background: #eee; display: block; padding: 30px 0;}

.tab-content {display: none;}
.tab-content * {animation: showprod .5s ease;}
.content {margin: auto; width: 1260px;}
.prod {background: #fff; box-shadow: #aaa 0 0 1px 1px; display: inline-block; text-align: left; margin: 30px; transition: all .35s;}
.prod a {color: #000;}
.prod p {line-height: 1.5; padding: 0 20px;}
.prod:hover {transform: scale(1.05,1.05); box-shadow: #333 0 0 15px; transition: all .35s;}

@keyframes showprod {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@media screen and (max-width: 1280px) {
	.content {width: 100%;}
}

.prods {
	background: #eee; display: block; padding: 30px 0;
}



/* -------- ITEMS -------- */
#Items {padding: 0 0 40px 0; text-align: center;}
.item_split {width: 50%; display: inline-block; vertical-align: top;}

.split_tab_left {font-weight: bold; text-align: right; vertical-align: top;}
.split_tab_right {text-align: left; padding-left: 10px; vertical-align: top;}

.item_feat {margin: 0; padding: 20px;}
.item_feat li {text-align: left; list-style: disc inside; font-size: 1em; padding: 5px 0;}

@media screen and (max-width: 960px) {
	.item_split {width: 100%; display: block;}
}

#Feat_icon {padding: 20px 0 40px 0; text-align: center;}
.feat_icon {display: inline-block; margin: 0 20px; vertical-align: top; width: 120px;}
.feat_icon img {width: 60px; border: #000 2px solid; border-radius: 20%;}
.feat_icon p {margin: 5px 0 20px 0;}

#Picts {text-align: center;}
#Picts img {max-width: 100%;}
.item_bg {background-position: center; background-size: cover; background-repeat: no-repeat;}
.spec {background: #ddd; padding: 40px 0; line-height: 1.5;}

/* --------- OEM --------- */
#Oem {line-height: 1.5; text-align: center; padding-bottom: 30px; background: #08c; background-image: url(../img/oem_bg.jpg); background-position: center; background-attachment: fixed;}
#Oem p {padding: 0 20px;}
#Oem img {max-width: 100%; outline: #000 1px solid;}
.oem {margin: 40px 60px 0 60px; padding: 10px;}
.oem_split {display: inline-block; width: 40%; margin: 40px 5%; vertical-align: top; border: #ccc 2px solid;}
.oem_split2 {width: 50%; display: inline-block; vertical-align: top; padding: 0 40px 20px 40px;}

@media screen and (max-width: 768px) {
	.oem_split {width: auto; display: block; margin: 40px 60px;}
	.oem_split2 {width: 100%; display: block;}
}

/* -------- ABOUT -------- */
#About {line-height: 1.5; background: #08c; background-image: url(../img/about_bg.jpg); background-position: center; background-attachment: fixed; padding-bottom: 30px;}
#About p {padding: 0 20px;}
#About img {max-width: 100%; outline: #000 1px solid;}
.vision {background: #d56; margin: 60px 60px 0 60px; padding: 10px; text-align: center; color: #fff;}
.about_split {width: 50%; display: inline-block; vertical-align: top; padding: 20px;}

@media screen and (max-width: 768px) {
	.about_split {width: 100%; display: block;}
}

/* -------- NEWS -------- */
#News {line-height: 1.5; padding-bottom: 30px; text-align: center;}
#News p {padding: 0 24px; text-align: left;}
#News img {max-width: 100%; display: inline; margin: 20px 7px;}
#News video {margin: 0 0 40px 0;}

/* -------- CONTACT -------- */
#Contact {line-height: 2; padding-bottom: 40px;}
#Contact a {color: #08c;}
#Contact a:hover {color: #c90;}

#Contact form {border: #8ce 2px solid; background: #bde; padding: 20px;}
#Contact label {display: inline-block; font-weight: bold; width: 70px; text-align: right;}
#Contact input{margin: 10px; padding: 5px; width: 160px; border: #ccc 1px solid;}
#Contact textarea {width: 100%; min-height: 100px; border: #ccc 1px solid; padding: 5px;}
#Contact button {background: #eee; margin-top: 10px; border: #ccc 1px solid; width: 80px; line-height: 2; cursor: pointer;}

.contact_split {width: 50%; display: inline-block; vertical-align: top; padding: 0 20px;}
.contact_split p {display: inline-block;}

@media screen and (max-width: 768px) {
	.contact_split {width: 100%; display: block;}
}

/* -------- FOOTER -------- */
#Footer {background: #333; color: #bbb; margin: 0; padding: 30px 0; text-align: center; font-size: 0.8em;}
#Footer a {color: #fff; opacity: 0.6; display: inline-block; margin: auto;}
#Footer a:hover {opacity: 1;}
#Footer p {margin: 0 0 10px 0;}
.footer-panel_L {display: inline-block; width: 60%; text-align: left;}
.footer-panel_L img {margin: 0 20px;}
.footer-panel_R {display: inline-block; vertical-align: top; width: 40%;}
.footer-panel {display: inline-block; margin: 0 20px 0 20px;}

@media screen and (max-width: 880px) {
	.footer-panel_L {display: block; width: 100%; text-align: center; margin: auto;}
	.footer-panel_R {display: block; width: 100%; margin: auto;}
	.footer-panel {margin-top: 40px; margin-bottom: 0;}
}