@charset "utf-8";
/* CSS Document */
.navbar-default .navbar-nav > li.na_first > a {
color: #ffffff !important;
padding: 0;
font-size: inherit;
background: none !important;
}
.navbar{ background-color: #f1f1f1 !important; border-top: 1px solid #bbbbbbbb !important;border-bottom: 1px solid #bbbbbbbb !important;}
.navbar ul li.na_first{ padding: 15px 30px; background-color: #c32428; color: #fff; display: inline-flex; justify-content: center; align-items: center;transition: all .3s ease;-webkit-transition: all .3s ease; cursor: pointer; position: static;}
.navbar ul li.na_first .fa-angle-down{ font-size: 18px; margin-left: 15px;transition: all .3s ease;-webkit-transition: all .3s ease;}
.navbar ul li.na_first:hover{ background-color: #444;}
.navbar ul li.na_first:hover .fa-angle-down{transform: rotate(180deg);}
.navbar ul li.na_first .submenu{ position: absolute; left: 0px; top: 100%; width: 100%; background-color: #444; color: #fff; padding: 32px 21px; overflow-y: auto;border-top: 6px solid #c32428;transform-origin: 50% 0; transform: scaleY(0) translateZ(0);
    opacity: 0;visibility:hidden; z-index: 20; overflow: hidden; transition: all .3s ease;-webkit-transition: all .3s ease; pointer-events: none;}
.navbar ul li.na_first:hover .submenu{visibility: visible; opacity: 1; pointer-events: visible; transform: scaleY(1) translateZ(0);}
.navbar .submenu .box{ display: flex; align-items: stretch;}
.navbar .submenu .box .subMenu-class{ width: 20%; border-right: 1px #000 solid;  -webkit-box-shadow: 1px 0 #4d4d4e;box-shadow: 1px 0 #4d4d4e;}
.navbar .submenu .box .subMenu-class a{ color: #FFF !important;;}
.navbar-default .navbar-nav > li > a{ color: #333 !important;}
.navbar-default .navbar-nav > li > a:hover{ color:#fff !important;}
.navbar .navbar-collapse{ position: relative;}
.navbar .submenu .box .subMenu-class ul li{ font-size: 16px; line-height: 15px; cursor: pointer; padding: 0px 15px; margin-bottom: 15px;text-transform: capitalize;}
.navbar .submenu .box .subMenu-class ul li:hover{ text-decoration: underline;}
.navbar .submenu .box .subMenu-class ul li:last-child{ margin-bottom: 0px;}
.navbar .submenu .box .sub_right{ flex:1; overflow: hidden; padding: 0rem 28px;}
.navbar .submenu .box .sub_right .sub_list {display: none;}
.navbar .submenu .box .sub_right .sub_list:nth-child(1){display: block;}
.navbar .submenu .box .sub_right .sub_list ul{display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 24px 16px;
align-items: stretch;}
.navbar .submenu .box .sub_right .sub_list ul li{ text-align: center; overflow: hidden; display:flex;align-items: center; justify-content: center;} 
.navbar .submenu .box .sub_right .sub_list ul li .photo{ margin-bottom: 7px; width:100%;}
.navbar .submenu .box .sub_right .sub_list ul li a{ color: #fff; display:block; width:100%;}
.navbar .submenu .box .sub_right .sub_list ul li a:hover{ text-decoration: underline;}
.navbar .submenu .box .sub_right .sub_list ul li .photo img{ width: 100%; height: 135px;object-fit: cover;object-position: center center;}
.navbar-default .navbar-nav > li > a:hover{ color: #fff;}
.navbar ul li.hop2{ display: none;}
.navbar ul li.na_first .submenu .logo{
    width: 15%;
    position: absolute;
    transform: translate(20px,10px);
    -webkit-transform: translate(20px,10px);
    right: 0;
    bottom: 0;
    padding: 0;
    pointer-events: none;
    margin: 0;
}
@media screen and (max-width: 768px) 
{
    .navbar ul li.na_first{ display: none;}
    .navbar ul li.hop2{ display: block;}
}