@charset "UTF-8";

.main-nav {background: #97E6FF; position: relative;}
.main-nav::before {content: ""; background: #fff; width: 100%; height: 260px; position: absolute; top: 100%; left: 0; z-index: 10; box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.05); display: none;}
.main-nav.active::before {display: block;}
.main-nav.active .depth2 {opacity: 1; visibility: visible;}
.main-nav .menu-toggle {display: none;}
.main-nav .nav-list {display: flex; justify-content: space-between;}
.main-nav .depth1 { position: relative; height: 100px; display: flex; align-items: center;}
.main-nav .depth1 > a { font-weight: 700; font-size: 22px; line-height: 22px; color: #000; height: 56px; padding: 17px 20px; transition: 0.3s;}
.main-nav .depth1:hover > a {background: rgba(255, 255, 255, 0.25); border-radius: 50px;}
.main-nav .depth2 { background: #fff; position: absolute; top: 100%; left: 0; width: 100%; opacity: 0; visibility: hidden; z-index: 20; padding: 61px 20px;}
.main-nav .depth2 a {display: block; color: #404040; font-weight: 400; font-size: 22px; line-height: 22px; transition: 0.2s;}
.main-nav .depth2 a:hover {font-weight: 700; color: #000; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 5px;}
.main-nav .depth2 a + a {padding: 36px 0 0 0;}

.main-nav.sub {display: none ;}

@media (max-width: 1200px) {
  .main-nav { position: fixed; bottom: 0; left: 0; z-index: 999; background: #fff; width: 100%; box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.06); border-radius: 20px 20px 0px 0px; overflow: hidden;}
  .main-nav::before,
  .main-nav.active::before {display: none;}
  .main-nav .nav-list { flex-direction: column; padding: 20px; display: none;}
  .main-nav .depth1 {height: auto; position: relative; flex-direction: column;}
  [lang="ru"] .main-nav .depth1 {align-items: flex-start;}
  .main-nav .depth1 + .depth1 {margin: 10px 0 0 0;}
  .main-nav .depth1 > a {height: auto; width: 100%; font-size: 16px; line-height: 18px; padding: 12px 10px 12px 16px;}
  [lang="ru"] .main-nav .depth1 > a {width: calc(100% - 30px);}
  .main-nav .depth1 > a::before {content: ""; background: url(/public/assets/medical_asset/images/main/icon_down.png) no-repeat;}
  .main-nav .depth1.active > a::before {background: url(/public/assets/medical_asset/images/main/icon_up.png) no-repeat;}
  .main-nav .depth1 > a::before,
  .main-nav .depth1.active > a::before { width: 22px; height: 22px; position: absolute; right:10px; top: 21px; transform: translateY(-50%); background-size: 22px 22px;}
  .main-nav .depth2 {background: #EBFAFF; padding: 20px 16px; border-radius: 10px; position: initial; opacity: 1; visibility: visible; display: none;}
  .main-nav .depth2 a {font-size: 14px; line-height: 16px; color: #000;}
  .main-nav .depth2 a:hover {font-weight: 400; text-decoration: none !important;}
  .main-nav .depth2 a + a {padding: 20px 0 0 0;}
  .main-nav .nav-title {font-family: 'SUIT', sans-serif; font-weight: 700; font-size: 18px; line-height: 18px; color: #000; position: relative; text-align: center; padding: 33px 20px 18px 20px;}
  .main-nav .nav-title::before {content: ""; background: url(/public/assets/medical_asset/images/main/icon_menu_mo.png) no-repeat;}
  .main-nav .nav-title.active::before {background: url(/public/assets/medical_asset/images/main/icon_menu_on_mo.png) no-repeat;}
  .main-nav .nav-title::before,
  .main-nav .nav-title.active::before {background-size: contain; width: 37px; height: 9px; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);}

  .main-nav.sub {display: block;}
  .main-nav.main{ display: none;}
}

@media (max-width: 1024px) {
  .main-nav.main{ display: block;}
}