.showBckMenu{display:block;height:0px;width:100%;position:fixed;top:0px;right:0px;background-color:rgba(0,0,0,0.5);z-index:999;transition:all 0.5s ease-out 0.3s;}
.showBckMenu.showBg{display:block;height:calc(100vh);transition:height 0.5s ease-out 0s;}

.top-bar {justify-self:end;display:flex;justify-content:flex-end;align-items:center;margin-bottom: 20px}

.menuAccount{}
.menuAccount ul{list-style: none;}
.menuAccount ul li{display: inline-block;padding: 0px 15px;}
.menuAccount ul li a{color: var(--s-sc-color);font-weight: 400;transition:color .3s;}
.menuAccount ul.logIn li:first-child a:before{content: "login";font-family: 'Material Icons Outlined';display: inline-block;margin-right: 5px;font-size: 27px;vertical-align: middle;transition:color .3s;}
.menuAccount ul.logIn li:nth-child(2) a:before{content: "person_add";font-family: 'Material Icons';display: inline-block;margin-right: 5px;font-size: 27px;vertical-align: middle;transition:color .3s;}
.menuAccount ul.logOut li:first-child a:before{content: "account_circle";font-family: 'Material Icons Outlined';display: inline-block;margin-right: 5px;font-size: 27px;vertical-align: middle;transition:color .3s;}
.menuAccount ul.logOut li button[type="submit"]{padding: 0px;background-color: transparent;border: none;color: var(--s-sc-color);}
.menuAccount ul.logOut li button[type="submit"]:before{content: "logout";font-family: 'Material Icons Outlined';display: inline-block;margin-right: 5px;font-size: 27px;vertical-align: middle;transition:color .3s;}
.menuAccount ul.logOut li button[type="submit"]:hover:before{color:var(--s-sc-hColor);}
.menuAccount ul li a:hover:before{color:var(--s-sc-hColor);}


.menuTop{
text-align: center;
padding-right:100px;
background-color: #FFFFFF;
}

.menuTop ul{
list-style: none;
}

.menuTop ul.mobMenu{
display: none;
}

.menuTop>.inMenu>ul{
margin: 0px 0px 0px 0px;
display: table;
width: 100%;
}

.menuTop>.inMenu>ul>li{
position: relative;
z-index: 50;
display: table-cell;
vertical-align: middle;
padding: 0px 10px;
text-align: center;
}
.menuTop ul li.roll{
display: none;
}

.menuTop>.inMenu>ul>li>a{
color: #000;
font-size:18px;
padding: 30px 10px 40px 10px;
position: relative;
height: 100%;
display: table;
vertical-align: middle;
width: 100%;
box-sizing:border-box;
font-weight:300;
transition: all 0.3s ease-out 0s;
}
.menuTop>.inMenu>ul>li>a:before{
content: "";
position: absolute;
bottom: -3px;
left:50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
height:8px;
width: 0%;
background-color: var(--menuTop-sel-color);
transition: all 0.3s ease-out 0s;
}
.menuTop>.inMenu>ul>li.sel>a:before,.menuTop>.inMenu>ul>li:hover>a:before{
width: 100%;
}
.menuTop>.inMenu>ul>li:hover{
z-index: 51;
}


.menuTop>.inMenu>ul>li>a.subMenu .spSub{
content:"";
position: absolute;
width:6px;
height:6px;
box-sizing:border-box;
border-right: 1px solid var(--menuTop-sel-color);
border-bottom: 1px solid var(--menuTop-sel-color);
right:5px;
bottom: 55px;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.menuTop>.inMenu>ul>li:hover>a.subMenu .spSub,.menuTop>.inMenu>ul>li.sel>a.subMenu .spSub{
right: 0px;
bottom:50px;
}

.menuTop > .inMenu > ul > li>a:after {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAARCAYAAAAcw8YSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpiEBMTk2JiAAI48QyVCyZIUwIQYACANQJ9NSi/zwAAAABJRU5ErkJggg==');
display: inline-block;
position: absolute;
top: 50%;
margin-top: -8px;
right: -10px;
color: #aaa7a8;
font-size: 14px;
vertical-align: middle;
}
.menuTop > .inMenu > ul > li.l a:after {
display: none;
}

.menuTop>.inMenu>ul>li.submenu>a:after{
content:'';
position: absolute;
bottom: 12px;
left:50%;
width: 10px;
height: 6px;
background:url('../images/menu_sub.png') 0px 0px no-repeat;
margin-left: -5px;
transition: all 0.5s ease-out 0s;
}

.menuTop>.inMenu>ul>li>a>span.textMenu{
display: table-cell;
vertical-align: middle;
text-align: center;
}


.menuTop>.inMenu>ul>li>a>span.spSel{
position: absolute;
bottom: 0px;
left:0px;
width: 0%;
height: 4px;
background-color: #9f222f;
transition: all 0.3s ease-out 0s;
right: 0px;
margin: 0px auto;
}

.menuTop>.inMenu>ul>li.submenu:hover>a:after,.menuTop>.inMenu>ul>li.submenu.sel>a:after{
bottom: 8px;
}

.menuTop>.inMenu>ul>li>a:active{
color: #666768;
-webkit-transition: all 0.03s ease-out 0s;
transition: all 0.03s ease-out 0s;
}

.menuTop>.inMenu>ul>li.sel>a>span.spSel,.menuTop>.inMenu>ul>li:hover>a>span.spSel{
width:100%;
transition: all 0.5s ease-out 0s;
}


.menuTop>.inMenu>ul>li>ul {
opacity:0;
visibility:hidden;
left: 0;
position: absolute;
top: 140px;
width: 278px;
z-index: 50;
text-align: left;
padding: 0px 0px 0px 0px;
border-top: 3px solid #f6b73f;
transition: all 0.3s ease-out 0s;
right: 0px;
margin: 0px auto;
background-color: #FFFFFF;
box-shadow:0px 5px 5px 0px rgba(0,0,0,0.2);
}


.menuTop ul li:hover ul{
opacity:1;
top: 95%;
visibility: visible;
transition: all 0.3s ease-out 0s;
}




.menuTop>.inMenu>ul>li>ul>li{
padding: 1px;
position: relative;


}

.menuTop>.inMenu>ul>li>ul>li>a{
display: block;
padding: 12px 5px 12px 35px;
color: #76787a;
font-size: 15px;
text-transform: none;
letter-spacing: 0.02em;
position: relative;
font-weight: 300;
transition: all 0.3s ease-out 0s;
}

.menuTop>.inMenu>ul>li>ul>li>a:before{
content: "";
display: block;
width: 0px;
height: 3px;
transition: all 0.3s ease-out 0s;
opacity: 1;
background-color: #f6b73f;
left: 0px;
top:0px;
bottom: 0px;
margin: auto;
position: absolute;
}

.menuTop>.inMenu>ul>li>ul>li:hover>a:before,.menuTop>.inMenu>ul>li>ul>li.sel>a:before{
width: 25px;
}

.menuTop>.inMenu>ul>li>ul>li:first-child>a .textMenu{
border: none;
}

.menuTop>.inMenu>ul>li>ul>li.sel>a,.menuTop>.inMenu>ul>li>ul>li:hover>a{
color: #181612;
}




.menuTop>.inMenu>ul>li>ul>li ul{
padding-left:20px;
}
.menuTop>.inMenu>ul>li>ul>li ul li{

}

.menuTop>.inMenu>ul>li>ul>li ul li a{
padding: 15px 5px 15px 30px;
display: block;
color: #5e5e5e;
}

.menuTop>.inMenu>ul>li>ul>li ul li.sel a,.menuTop>.inMenu>ul>li>ul>li ul li a:hover{
color: #b20400;
}

.menuTop ul.mobileMenu{
display: none;
}

div.menuTop > a.showMenu{z-index: 1001;vertical-align:middle;width:35px;height:22px;padding:0px 0px 0px 0px;position:relative;z-index:100;background-color:transparent;border:none;outline-style:none;display:none;}
div.menuTop > a.showMenu > span{float:right;width:100%;height:4px;z-index:100;right:0px;background-color:var(--g2-color);transition:all 0.1s ease-out 0.3s;border-radius:9px;}
div.menuTop > a.showMenu > span:before,div.menuTop > a.showMenu > span:after{content:"";position:absolute;width:100%;height:4px;background-color:var(--menuTop-sel-color);right:0px;transition:top 0.3s ease-out 0.3s, bottom 0.3s ease-out 0.3s, transform 0.3s ease-out 0s;border-radius:9px;}
div.menuTop>a.selShow > span:before,div.menuTop>a.selShow > span:after{transition:top 0.3s ease-out 0s, bottom 0.3s ease-out 0s, transform 0.3s ease-out 0.3s;}
div.menuTop > a.showMenu > span:before{top:0px;}
div.menuTop > a.showMenu > span:after{bottom:0px;}
div.menuTop>a.selShow > span{height:0px;}
div.menuTop>a.selShow > span:before,div.menuTop>a.selShow > span:after{}
div.menuTop>a.selShow > span:before{transform:rotate(-45deg);top:9px}
div.menuTop>a.selShow > span:after{transform:rotate(45deg);bottom:9px}

.box-top{
box-sizing:border-box;
position: sticky;
left:0px;
width: 100%;
top: 0px;
background-color: #FFFFFF;
z-index: 55;
transition: all 0.3s ease-out 0s;
}

.div-top{
display: flex;
box-sizing:border-box;
position: relative;
padding-top: 15px;
justify-content: space-between;
align-items: center;
}

.div-top-right {
flex: 1 0 auto;
}

.div-top .div-top-left .top_page>a{
display: inline-block;
width:210px;
padding: 0px 100px 0px 130px;
-webkit-transition: 0.3s all ease-out 0s;
transition: 0.3s all ease-out 0s;
}
.div-top .div-top-left .top_page>a>img{
width:100%;
height:auto;
}

@media screen and (max-width:1600px) {
.div-top .div-top-left .top_page > a {width: 155px;}
.menuTop > .inMenu > ul > li > a {padding: 20px 10px 20px 10px;}
}

@media screen and (max-width:1420px){
.div-top .div-top-left .top_page > a{padding: 0px 30px 0px 0px;}
.menuTop{padding-right: 75px;}
}
@media screen and (max-width:1330px){
.menuTop > .inMenu > ul > li > a {font-size:17px;}
}


@media screen and (max-width:1150px){

.div-top-right{
flex: unset;
align-items: center;
}
.top-bar{margin: 0px}

.div-top .div-top-left .top_page > a {width: 74px;padding: 0px}
.div-top .div-top-left, .div-top .div-top-right{display: flex}
.div-top{padding: 10px 170px 10px 0px}

.div_top{padding-right:150px}
.menuTop{z-index:999999;}
.hfix .menuTop, .menuTop{padding:0px;margin:0px;}
.menuTop ul.mobileMenu{display:block;}
div.menuTop > a.showMenu{display:flex;position:absolute;top:25px;right:0px;align-items:center;z-index: 1001}
.menuTop>.inMenu{transition:max-height 0.5s ease-out 0s;box-sizing:border-box;max-height:0px;padding:0px;z-index:1000;display:block;background-color:#FFFFFF;position:fixed;right:0;left:0px;top:70px;bottom:0;overflow:auto;padding:0px 15px}
.menuTop>.inMenu.show{display:block;max-height:calc(100vh - 70px)}
.menuTop>.inMenu>ul{display:block;float:none}
.menuTop>.inMenu>ul>li>ul{display:block;visibility:visible;opacity:1;position:static;width:100%;border:none;box-shadow:none;}
.menuTop>.inMenu>ul>li{display:block;height:auto;padding:0px;}
.menuTop>.inMenu>ul>li.sel>a, .menuTop>.inMenu>ul>li:hover>a{color: var(--g1-color)}
.menuTop>.inMenu>ul>li>ul>li>a{background-color:transparent;}
.menuTop>.inMenu>ul>li>ul>li{margin:0px;padding:0px;background-color:transparent;}
.menuTop>.inMenu>ul>li>ul>li.sel>a, .menuTop>.inMenu>ul>li>ul>li:hover>a{}
.menuTop>.inMenu>ul>li:first-child > a{border:none;}
.menuTop>.inMenu>ul>li>ul>li:first-child > a .textMenu{border-top:1px solid #e3e3e3;}
.menuTop>.inMenu>ul>li>ul>li ul li a{padding-left:10px;}
.menuTop>.inMenu>ul>li>ul>li ul{padding-left:15px;}
.menuTop>.inMenu>ul>li::after{display:none;}
.menuTop>.inMenu>ul>li>ul>li>a{padding:10px 5px 10px 35px;}
.box_top_menu .box_menu{display:flex;justify-content:space-between;align-items:center;width:50%;}
.box_menu::after{display:none;}
.hfix .top_page img, .top_page img{height:50px;margin-top:0px;}
.hfix .box_top_menu, .box_top_menu, .box_top_menu, .box_top_menu{z-index:100;width:100%;top:0px;left:0px;transition:all 0.5s ease-out 0s;border:none}
.hfix .div_top_menu, .div_top_menu{padding:0px;}
.box_top{position:sticky;top:0px;z-index:50;background-color:#FFFFFF}
.social a.tel{font-size:0px}
.social a.tel::before{margin:0px}
.menuTop>.inMenu>ul>li>a::before{display:none}
.menuTop>.inMenu>ul>li>ul.ulMore li{width:100%}
.menuTop .inMenu ul{display:block;float:none}
.menuTop > .inMenu > ul > li > ul{position:static;width:100%;opacity:1;visibility:visible;max-height:unset;box-shadow:unset;padding-left:30px;box-sizing:border-box}
.menuTop > .inMenu > ul > li > ul > li{display:block}
.menuTop > .inMenu > ul > li{display:block;text-align:left}
.menuTop > .inMenu > ul > li > a{display:flex;justify-content:flex-start;align-items:center}
}

@media screen and (max-width:1150px){
.menuAccount ul li a{font-size: 0px}
.menuAccount ul.logOut li button[type="submit"] {font-size: 0px}
}

@media screen and (max-width:520px){
.menuAccount ul li {padding: 0px 10px;}
.menuAccount ul.logIn li:nth-child(2) a::before {font-size: 24px}
.menuAccount ul.logIn li:first-child a::before {font-size: 24px}
.top-bar{white-space: nowrap;padding-right: 117px;}
.div-top-right{justify-content: flex-end;flex: 1 0 auto;}
.div-top{padding-right: 0px}
}

@media screen and (max-width:450px){
.menuAccount ul li {padding: 0px 8px;}
}