.pre-head {
height: 60px;
}
header {
height: 70px;
border-bottom: 1px solid #f0f0f0;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
z-index: 4;
position: fixed;
background: #fff;
left: 0;
width: 100%;
top: 0;
}
header .wrapper {
position: initial;
}
@media (max-width: 500px) {
header .wrapper {
padding-left: 0;
padding-right: 0;
}
}
header .logo {
height: 70px;
display: inline-flex;
padding-right: 10px;
}
header .logo a {
margin: auto;
margin-left: 0;
}
header .logo a img {
height: 70px;
}
header .menu-responsive {
display: none;
}
@media (max-width: 1000px) {
header .menu-responsive {
height: 70px;
width: 60px;
position: relative;
margin-left: 10px;
display: inline-flex;
}
}
header .menu-responsive:before {
height: 2px;
width: 60px;
background: #333;
position: absolute;
left: 0;
content: "";
top: calc(50% - 15px);
}
header .menu-responsive:after {
height: 2px;
width: 60px;
background: #333;
position: absolute;
left: 0;
content: "";
top: calc(50% + 14px);
}
header .menu-responsive span {
height: 2px;
width: 60px;
background: #333;
position: absolute;
left: 0;
top: calc(50% - 1px);
}
header .menu {
display: inline-flex;
vertical-align: top;
height: 70px;
}
@media (max-width: 1000px) {
header .menu {
display: block;
position: fixed;
top: 70px;
width: 100%;
background: #fff;
height: calc(100% - 70px);
overflow: scroll;
left: -100%;
transition: 0.2s;
padding-bottom: 30px;
}
}
header .active-menu-sec {
left: 0;
}
header img {
height: 50px;
}
header ul {
padding: 0;
margin: auto;
margin-left: 0;
height: 70px;
}
@media (max-width: 1000px) {
header ul {
padding-top: 10px;
padding-bottom: 10px;
height: auto;
}
}
header li {
display: flex;
float: left;
padding-right: 10px;
padding-left: 10px;
height: 70px;
border-bottom: 2px solid transparent;
}
@media (max-width: 1000px) {
header li {
width: 100%;
height: auto;
display: block;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}
}
header li:hover {
border-bottom: 2px solid #a10a00;
}
header li:hover .child-menu {
display: block;
}
header li a {
margin: auto;
margin-left: 0;
text-decoration: none;
color: inherit;
font-size: 16px;
}
@media (max-width: 1000px) {
header li a {
font-family: "Bold";
font-size: 18px;
}
}
header .child-menu {
position: absolute;
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1);
padding: 20px;
left: 0;
display: none;
z-index: -1;
top: 70px;
width: 100%;
background: #fff;
}
@media (max-width: 1000px) {
header .child-menu {
display: block;
position: relative;
background: #ddd;
z-index: 2;
top: 0;
padding: 0px;
margin-top: 10px;
overflow: scroll;
}
}
header .child-menu .picture {
height: 200px;
background: #333;
width: 430px;
display: inline-flex;
background-position: center;
background-size: cover;
vertical-align: top;
position: relative;
}
@media (max-width: 1000px) {
header .child-menu .picture {
display: none;
}
}
header .child-menu .picture:after {
content: "";
height: 100%;
width: 100%;
background: #000;
opacity: 0.4;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
header .child-menu .picture .desc {
margin: auto;
margin-left: 0;
padding: 20px;
font-size: 17px;
font-family: "Bold";
color: #fff;
position: relative;
z-index: 2;
}
header .child-menu .picture:before {
content: "";
position: absolute;
z-index: 3;
right: 0;
top: 0;
width: 0;
height: 0;
border-top: 40px solid #fff;
border-left: 40px solid transparent;
}
header .child-menu ul {
min-height: 200px;
width: calc(100% - 470px);
display: inline-block;
vertical-align: top;
}
@media (max-width: 1000px) {
header .child-menu ul {
width: 100%;
min-height: auto;
padding-top: 0;
height: auto;
padding-bottom: 0px;
}
}
header .child-menu li {
height: auto; display: inline-block;
vertical-align: top;
width: 48%;
margin-bottom: 7px;
}
@media (max-width: 1000px) {
header .child-menu li {
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 0;
}
header .child-menu li a {
font-family: "Regular";
font-size: 16px;
}
}
header .child-menu li:hover {
color: #a10a00;
border-bottom: 2px solid transparent;
}
header .cont-head {
height: 70px;
float: right;
display: flex;
}
header .cont-head .middle {
margin: auto;
margin-left: 10px;
text-align: right;
}
@media (max-width: 500px) {
header .cont-head .middle {
margin-left: 0;
}
}
header .cont-head .mobile-head {
height: 27px;
width: 27px;
margin: auto;
background-size: 27px;
display: none;
margin-right: 10px;
margin-left: 7px;
}
@media (max-width: 500px) {
header .cont-head .mobile-head {
display: block;
}
}
header .cont-head .telephone-head {
font-size: 20px;
color: inherit;
text-decoration: none;
}
@media (max-width: 500px) {
header .cont-head .telephone-head {
display: none;
}
}
header .cont-head .mailto {
font-size: 14px;
color: inherit;
text-decoration: none;
}
@media (max-width: 500px) {
header .cont-head .mailto {
display: none;
}
}
header .cart-sec {
height: 70px;
width: 50px;
display: flex;
}
header .cart-sec a {
height: 27px;
width: 27px;
margin: auto;
background-size: 27px;
display: block;
position: relative;
}
header .cart-sec a .count {
height: 25px;
width: 25px;
background: #3c3c3c;
display: flex;
position: absolute;
right: -10px;
top: -10px;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
header .cart-sec a .count span {
margin: auto;
font-size: 14px;
color: #fff;
}
footer {
padding-top: 20px;
padding-bottom: 20px;
background: #fff;
border-top: 1px solid #f0f0f0;
}
footer .copyright {
display: inline-block;
vertical-align: top;
}
footer .copyright .name {
font-size: 20px;
}
footer .copyright .data-info {
font-size: 12px;
margin-top: 10px;
}
footer .right-sec {
display: inline-block;
vertical-align: top;
text-align: right;
}
footer .right-sec a {
text-decoration: none;
color: inherit;
font-size: 20px;
}
footer .right-sec .developed {
font-size: 12px;
margin-top: 10px;
}