?
áEÓê¤ÎïLwebshll2019
header.header {
position: relative;
width: 100%;
background-color: #1c1c1c;
top: 0; left: 0;
z-index: 99999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
@include translate3d(0,0,0);
@include transition(all .3s ease);
&.header-home {
position: absolute;
background-color: transparent;
top: 0; left: 0;
padding-top: 20px;
}
&.header-sticky.header-fixed {
position: fixed;
padding-top: 0;
background-color: #1c1c1c;
z-index: 9999999;
.logo {
padding: 15px 0;
a {
img {
max-height: 25px;
}
}
}
.on-navigation {
padding: 8px 0;
}
}
.logo {
float: left;
padding: 18px 0;
a {
display: inline-block;
img {
max-height: 30px;
@include transition(all .3s ease);
}
}
}
.on-navigation {
padding: 15px 0;
&.text-right {
margin-right: -23px;
}
ul.nav {
display: inline-block;
font-size: 0;
margin: 0;
li {
position: relative;
display: inline-block;
margin: 0 23px;
&:before {
display: none;
}
a {
display: inline-block;
font-family: $la;
font-size: 12px;
font-weight: 700;
color: #fff;
text-align: center;
background: none;
padding-left: 0;
padding-right: 0;
@include transition;
}
&:hover {
> a {
color: $color;
}
}
&.active, &.current-menu-item {
> a {
color: $color;
}
> .plus {
color: $color;
}
}
}
span.plus {
position: static;
color: #fff;
font-size: 20px;
text-align: center;
cursor: pointer;
margin-right: 5px;
> span {
display: inline-block;
@include transition;
line-height: .5em;
}
}
.sub-menu {
position: absolute;
width: 210px;
margin: 0;
padding: 5px 0;
z-index: 9;
top: 55px;
left: -23px;
opacity: 0;
visibility: hidden;
text-align: left;
background-color: #1c1c1c;
border-top: 3px solid $color;
@include transition(all .2s linear .1s);
li {
display: block;
margin: 0;
padding: 0 20px;
a {
display: block;
padding: 15px 0;
text-align: left;
// color: #141414;
border-bottom: 1px solid rgba(255,255,255,.1);
}
&:last-child {
> a {
border: 0;
}
}
&:hover {
.sub-menu {
top: 0;
}
}
}
.sub-menu {
top: 10px;
left: 100%;
}
}
li:hover {
> .sub-menu {
opacity: 1;
visibility: visible;
top: 45px;
}
}
}
}
}
/* Menu mobile */
.open-menu {
position: absolute;
width: 50px; height: 14px;
cursor: pointer;
margin: auto;
top: 0; right: 0; bottom: 0;
z-index: 999999;
span {
position: absolute;
display: block;
font-size: 0;
width: 20px; height: 2px;
background-color: #fff;
margin: auto;
left: 0; right: 0;
overflow: hidden;
&:after {
content: '';
display: block;
position: absolute;
width: 100%; height: 2px;
background-color: $color;
top: 0; left: 0;
@include translateX(100%);
@include transition(all .2s linear);
}
}
.item-1 {
top: 0;
}
.item-2 {
top: 0; bottom: 0;
&:after {
@include transition-delay(.1s);
}
}
.item-3 {
bottom: 0;
&:after {
@include transition-delay(.2s);
}
}
&:hover {
span {
&:after {
@include translateZ(0);
}
}
}
}
.close-menu {
position: absolute;
top: 15px; right: 15px;
}
.menu-mobile {
&.on-navigation {
position: fixed;
top: 0; right: 0;
width: 270px; height: 100%;
overflow: hidden;
padding: 50px 15px;
text-align: left;
background-color: #1c1c1c;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
z-index: 99999999;
@include translateZ(0);
@include translateX(100%);
@include transition(all .3s ease);
&:after {
/*fixscroll overflow hidden android*/
content: '';
display: block;
position: fixed;
width: 0; height: 0;
left: 0; bottom: 0;
}
&.navigation-active {
@include translateX(0);
}
.nav {
margin: 0;
li {
display: block;
margin: 0;
padding: 0;
border-bottom: 1px solid rgba(255,255,255,.12);
&:before {
display: none;
}
a {
display: block;
font-family: $ms;
font-size: 12px;
color: #fff;
background: none;
padding: 12px 0;
&:hover {
color: $color;
}
}
&:last-child {
border: 0;
}
span.plus {
position: absolute;
top: 0; right: 0;
display: block;
color: #fff;
font-size: 26px;
width: 50px; height: 45px;
text-align: center;
cursor: pointer;
z-index: 9;
> span {
display: inline-block;
@include transition;
line-height: .5em;
}
&.plus-active {
> span {
@include rotate(45);
color: $color;
}
+ a {
color: $color;
background-color: rgba(255,255,255,.12);
}
}
}
&.active, &.current-menu-item {
> a {
color: $color;
}
> .plus {
color: $color;
}
}
}
}
.sub-menu {
display: none;
margin: 0;
border-top: 1px solid rgba(255,255,255,.12);
li {
a {
position: relative;
font-size: 10px;
text-indent: 10px;
&:before {
content: '';
display: block;
position: absolute;
width: 2px; height: 2px;
@include rounded(50%);
margin: auto;
left: 15px; top: 0; bottom: 0;
background-color: #fff;
}
}
}
}
}
}
header.header .on-navigation ul.nav .sub-menu .left {
left: 100%;
}
header.header .on-navigation ul.nav .sub-menu .right {
left: -100%;
}
.breadcrumbs-wrapper {
background-color: #e8e8e8;
padding: 20px 0;
.breadcrumbs {
background: none;
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
li {
position: relative;
display: inline-block;
font-family: $pd;
font-size: 12px;
font-style: italic;
color: #a3a3a3;
margin-left: 12px;
margin-right: 12px;
span {
color: #141414;
}
a {
color: #a3a3a3;
&:hover {
color: $color;
}
}
&:after {
content: '//';
display: block;
position: absolute;
top: 50%; right: -12px;
@include translate(50%, -50%);
}
&:last-child {
&:after {
display: none;
}
}
}
}
}