body{padding:0;margin:0;background-color:#f8f8f8}body .ero_nav{max-width:1080px;width:100%;min-height:100px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex}.ero_nav_item{--animation-time:80ms;--horizonal-line-width:90px;--vertical-line-height:95px;position:relative;display:block;text-align:center;background:#fff;border-radius:10px;padding:5px;margin:5px;color:#333;font-weight:500;border:1px solid #f0f0f0;-webkit-box-shadow:1px 1px 0 0 rgb(226 227 231 / .8);box-shadow:1px 1px 0 0 rgb(226 227 231 / .8);cursor:pointer;-webkit-transition:all 0.5s;transition:all 0.5s;right:0}.ero_nav_item:first-child{margin-right:390px}.ero_nav_item .ero_nav_item_row .ero_n_i_title{font-size:25px;padding:10px;margin:5px;font-variant:small-caps}.ero_nav_item .ero_nav_item_row p{padding:0 10px}.ero_nav_item .ero_nav_item_row img{width:100%;height:180px}.ero_nav_item .nav_sub_items{display:flex;position:absolute;top:0;right:-250px;height:100%;width:250px;align-items:center}.ero_nav_item .nav_sub_items ul{align-items:center;display:flex;flex-direction:column;list-style:none}.ero_nav_item .nav_sub_items .nav_lines{position:absolute;height:100%;top:50%;padding:0;margin:auto}.ero_nav_item .nav_sub_items .nav_lines .line-animation{background-color:#ccc}.ero_nav_item .nav_sub_items .nav_lines .line-animation.left-right{height:1.82px;width:var(--horizonal-line-width);top:0;left:0;position:absolute;transform:scaleX(1.3);transform-origin:0% 0%;animation:left-right-reverse var(--animation-time) ease forwards calc(var(--reverse-order) * var(--animation-time) + 200ms)}.ero_nav_item .nav_sub_items .nav_lines .line-animation.left-top{height:var(--vertical-line-height);width:1px;left:0;top:1px;position:absolute;transform:rotate(-125deg) scaleY(1.55);transform-origin:0% 0%;animation:left-top-reverse var(--animation-time) ease forwards calc(var(--reverse-order) * var(--animation-time) + 200ms)}.ero_nav_item .nav_sub_items .nav_lines .line-animation.left-bottom{height:var(--vertical-line-height);width:1px;left:0;top:2px;position:absolute;transform:rotate(-54deg) scaleY(1.5);transform-origin:0% 0%;animation:left-bottom-reverse var(--animation-time) ease forwards calc(var(--reverse-order) * var(--animation-time) + 200ms)}.ero_nav_item .nav_sub_items .nav_ul{position:absolute;left:calc(var(--horizonal-line-width) + 40px);top:148px;margin:0}.ero_nav_item .nav_sub_items .nav_ul li{padding:15px 10px!important;color:#fff;border-radius:5px;background-color:#564787;min-width:219px!important;white-space:nowrap;width:255px}.ero_nav_item .nav_sub_items .nav_ul li.left-right-text{left:0;position:absolute;transform-origin:0% 0%;transform:scaleX(1);animation:left-right-text-reverse var(--animation-time) ease forwards calc(var(--reverse-order) * var(--animation-time) + 200ms);position:absolute}.ero_nav_item .nav_sub_items .nav_ul li.next-order.order-1{top:calc(var( --vertical-line-height) * -1);top:calc(var( --vertical-line-height) * -1)}.ero_nav_item .nav_sub_items .nav_ul li.next-order.order-2{top:0}.ero_nav_item .nav_sub_items .nav_ul li.next-order.order-3{top:var(--vertical-line-height)}.ero_nav_item.active .nav_sub_items .nav_lines .line-animation.left-right{transform:scaleX(0);animation:left-right var(--animation-time) ease forwards calc(var(--order) * var(--animation-time) + 200ms)}.ero_nav_item.active .nav_sub_items .nav_lines .line-animation.left-top{transform:rotate(-125deg) scaleY(0);animation:left-top var(--animation-time) ease forwards calc(var(--order) * var(--animation-time) + 200ms)}.ero_nav_item.active .nav_sub_items .nav_lines .line-animation.left-bottom{transform:rotate(-60deg) scaleY(0);animation:left-bottom var(--animation-time) ease forwards calc(var(--order) * var(--animation-time) + 200ms)}.ero_nav_item.active .nav_sub_items .nav_ul.brand li{padding:15px 10px!important;min-width:219px!important}.ero_nav_item.active .nav_sub_items .nav_ul li.left-right-text{transform:scaleX(0);animation:left-right-text var(--animation-time) ease forwards calc(var(--order) * var(--animation-time) + 200ms)}@keyframes left-right{0%{transform:scaleX(0)}100%{transform:scaleX(1.3)}}@keyframes left-right-reverse{0%{transform:scaleX(1.3)}100%{transform:scaleX(0)}}@keyframes left-right-text{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}@keyframes left-right-text-reverse{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}@keyframes left-top{0%{transform:rotate(-125deg) scaleY(0)}100%{transform:rotate(-125deg) scaleY(1.55)}}@keyframes left-top-reverse{0%{transform:rotate(-125deg) scaleY(1.55)}100%{transform:rotate(-125deg) scaleY(0)}}@keyframes left-bottom{0%{transform:rotate(-60deg) scaleY(0)}100%{transform:rotate(-54deg) scaleY(1.5)}}@keyframes left-bottom-reverse{0%{transform:rotate(-54deg) scaleY(1.5)}100%{transform:rotate(-60deg) scaleY(0)}}