* {
   margin: 0;
   padding: 0;
   text-decoration: none;
}

nav {
   display: flex;
   /* justify-content: center; */
   width: 100%;
   height: 60px;

   /* background-color: #141923; */
   background-color: var(--d1);
   /* background: radial-gra5ient(ellipse at bottom, #1e2533, #0f131b 50%); */
   text-align: center;
   align-content: center;
   position: fixed;
   top: 0px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
   /* font-family: 'BankGothic Md Bt'; */
   /* font-size: 1.2rem; */
   /* letter-spacing: 0.05rem; */
   /* font-weight: 0; */
}

.nav-container {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
   min-width: 1110px;
   /* border: 1px solid white; */
}

.nav-logo-container {
   /* display: inline-block; */
   /* background: rgba(255, 0, 0, 0.315); */
   height: 100%;
   float: left;
   width: 25%;
   /* min-width: 5em; */
   text-align: right;
   /* margin-right: 200px; */
   position: relative;
   /* padding-right: 200px; */
}

.cnlogo {
   margin: 0 auto;
   height: auto;
   width: 110px;
   opacity: 1;
   display: inline-block;
   /* margin-top: 18px; */
   animation: logo-fade-in 2s 1;
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   /* background-image: url('../imgs/cn_logo_white.png'); */
   /* background-size: 100%;
   background-repeat: no-repeat; */
   /* transform: scale(0.5); */
}

.cnlogo:hover {
   opacity: 0.9;
}

.nav-menu-container {
   display: inline-block;
   /* background-color: rgb(79, 79, 189); */
   width: auto;
   height: 3.1vw;
   text-align: center;
}

.nav-login-container {
   position: relative;
   height: 100%;
   width: auto;
   /* background: red; */
   float: left;
}

.nav-container ul {
   /* display: inline-block; */
   margin: 0;
   padding: 0;
   list-style: none;
   /* margin-bottom: -20px; */
   /* display: flex; */
   float: left;
}

.nav-container ul>li {
   list-style: none;
   float: left;
   transition: 0.1s;
   animation: fadeIn 0.3s 1;
   /* flex-grow: 1; */
}

.menu__line__height {
   line-height: 60px;
   border-bottom: 1px solid #ffae0000;
}

.nav-container ul>li:hover ul>li {
   display: block;
}

.nav-container ul>li>a {
   display: block;
   text-decoration: none;
   font-family: inherit;
   color: #ffffff8b;
   /* opacity: 0.6; */
   /* color: var(--d9); */
   padding: 0 1.3rem;
   font-family: 'Exo 2';
   font-family: BankGothic Md Bt;
   font-size: 0.9rem;
   /* font-size: 0.55vw; */
   background-color: #0f131b;
   background: none;
   /* letter-spacing: 0.02rem; */
   /* min-width: 80px; */
   min-width: 3.1vw;
   font-weight: lighter;
   /* text-transform: capitalize; */

   color: #ffffffac;
   /* opacity: 0.6; */
   /* font-size: 1rem; */
   /* text-transform: lowercase; */
   /* border: 1px solid white; */
}

.nav-container ul>li>a:hover {
   color: #fff;
   opacity: 1;
   /* background-color: #172333; */
}

.nav-container ul>li>a:active {
   color: #5a5a5a;
}

.btn-signup {
   width: 120px;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   /* animation: fadeIn 1s 1; */
   font-size: 1.1em;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   position: absolute;
}

.nav-account-container {
   /* background: red; */
   float: right;
   height: 60px;
   width: 30%;
}

.acc-icon-box {
   position: absolute;
   /* float: left; */
   width: 70px;
   height: 38px;
   background: var(--d2);
   /* padding: 10px 15px 10px 17px; */
   /* cursor: pointer; */
   transition: 0.2s;
   border-radius: 5px;
   box-sizing: border-box;
   padding: 0.4em;
   margin-left: 120px;
   /* border: 1px solid white; */
   top: 50%;
   transform: translateY(-50%);


}

.aaa {
   width: auto;
   padding: 0;
}

.aaa:hover {
   background-color: #0f0f0f;
}

.aaa:hover .btn-signup {
   border: 1px solid #ffae00;
}

.acc-icon-box:hover {
   background: #0f131b;
   background-color: var(--d3);

}

.acc-icon-box:hover .acc-icon {
   animation: fade-in-scale 0.3s 1;
}

.acc-icon {
   width: 25px;
   height: auto;
   display: inline-block;
   background-repeat: no-repeat;
   z-index: 1;
   animation: rotate-left 0.8s 1;
   transition: 0.2s;
   margin-left: 15px;
}

.acc-icon:hover {
   opacity: 1;
}

.arrow-down {
   position: absolute;
   width: 5px;
   height: 5px;
   border-left: 1.5px solid #ffae00;
   border-bottom: 1.5px solid #ffae00;
   display: inline-block;
   right: 13px;
   top: 15px;
   transform: rotate(-45deg);
   margin-right: 40px;
   margin-top: 0px;
   transition: 0.1s;
}

.acc-menu {
   /* background: blue; */
   position: absolute;
   right: 0px;
   padding: 0;
   transition: 0.2s;
   z-index: 1;
   opacity: 0;
   visibility: hidden;
   height: auto;
   /* margin-top: 70px */
   padding-top: 50px;
   top: -1px;
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.863);
   width: 222px;
   /* border: 1px solid; */
   border-radius: 8px;
   overflow: hidden;
}

.div__shadow {
   box-shadow: 0 0 15px 0 black;
}

.acc-icon-box:hover .acc-menu {
   visibility: visible;
   opacity: 1;
   top: 5px;
}

.acc-icon-box:hover .arrow-down {
   /* opacity: 0; */
   top: 20px;
   transform: rotate(135deg);
}

.acc-menu ul {
   padding: 0px;
   height: auto;
   width: auto;
   /* background-color: red; */
   margin-top: 0;
   /* border: 1px solid var(--d3); */
   border-bottom: none;
   border-radius: 8px;
   overflow: hidden;

}

.acc-menu ul li {
   /* background: red; */
   height: auto;
   /* opacity: 0; */
   overflow: hidden;
   position: relative;
}

.acc-menu ul li a {
   text-align: left;
   padding: 0;
   color: #888888;
   opacity: 1;
   margin-top: 0;
   line-height: 50px;
   /* border: 1px solid var(--d3); */

   width: 220px;
   box-sizing: border-box;
   transition: 0.1s;
   /* border: 1px solid #191919; */
   font-size: 0.8rem;
   background-color: var(--d1);
   font-family: 'Exo 2';
}

.acc-menu ul li a {
   padding-left: 10px;
}

.acc-menu ul li a:hover {
   color: #ffae00;
   padding-left: 20px;
   background-color: var(--d3);
}

.acc-menu ul li a:hover>.acc-menu-a {
   filter: none;
}

.acc-menu ul li a:active {
   color: #444444;
}

.acc-logout {
   padding: 0;
   opacity: 1;
   line-height: 50px;
   background-color: #2c2c2c;
   width: 200px;
   box-sizing: border-box;
   transition: 0.1s;
   background-color: #0f0f0f;
   color: #ffae00;
   outline: none;
   border: none;
   text-align: center;
   margin: 0;
   border: 1px solid #333333;
   width: 100%;
}

.acc-logout:hover {
   /* background-color: #ffae00; */
   color: #ffae00;
}

.acc__logout__btn {
   /* box-shadow: none;
   outline: none;
   border: none;
   border: 1px solid rgb(0, 138, 230);
   border-top: 1px solid rgb(146, 211, 255);
   margin: 5px;
   position: relative;
   color: rgb(99, 99, 99);
   font-size: 0.9rem;
   box-shadow: 0 0 1rem 0 #000000;
   border: 1px solid #444444;
   padding: 0.2rem 0rem;
   border-top: 1px solid #999999;
   font-family: BankGothic Md Bt; */
   cursor: pointer;
   /* background-image: -webkit-linear-gradient(#333333, #222222); */
   /* border-radius: 2px; */
   transition: 0.1s;
   cursor: pointer;
   padding-left: 20px;
   height: auto;
   width: 90%;
   margin-top: 7px;
   /* border-radius: 2px; */
   transition: 0.1s;
   padding-bottom: 10px;
   opacity: 0.8;
   box-shadow: 0 10px 1rem black inset;
}

.acc-logout:hover .acc__logout__btn {
   color: #ffae00;
   /* background-color: #252525; */
   /* border: 1px solid #666666; */
   /* border-top: 1px solid #dedede; */
   /* width: 90%; */
   /* opacity: 1; */
   padding-right: 1rem;
}

.logout-icon {
   background-image: url("../imgs/icons/icon_logout.svg");
   background-repeat: no-repeat;
   width: 7px;
   height: 7px;
   background-size: 50%;
   display: inline-block;
   /* background-color: red; */
   padding: 10px;
   background-position: center;
   margin-bottom: -9px;
   margin-right: -10px;
   opacity: 0;
   transition: 0.1s;
   filter: grayscale(1);
}

.acc-logout:hover .logout-icon {
   filter: grayscale(0);
   opacity: 1;
}

.acc-menu-name {
   /* background-color: #2c2c2c; */
   /* background-color: #1f2634; */
   background-color: #1f2634;
   text-align: left;
   margin: 0;
   /* padding-right: 15px; */
   font-size: 0.8rem;
   /* padding-bottom: 10px; */
   cursor: context-menu;
   font-family: 'Exo 2';
   position: relative;
   padding: 10px;
   color: #5f697d;
   border: 1px solid #333333;
   width: 100%;
   height: auto;
   box-sizing: border-box;
   /* border-radius: 15px 15px 0 0; */
   z-index: 3;
}

.acc-menu-occupation {
   top: 25px;
   left: 50%;
   position: absolute;
   /* right: 50%; */
   color: #ffae00;
   font-size: 0.9rem;
   transform: translateX(-50%);
}

.acc-cart-icon {
   background-image: url("../imgs/icons/icon_cart.svg");
   background-repeat: no-repeat;
   width: 30px;
   height: 30px;
   background-size: 100%;
   float: left;
   /* background-color: red; */
   /* padding: 10px; */
   background-position: center;
   margin-top: 8px;
   margin-right: 10px;
   /* opacity: 0.7; */
   transition: 0.1s;
   /* filter: grayscale(1); */
   transform: scale(0.7);
}

.active {
   color: #ffae00;
   border-bottom: 1px solid -webkit-linear-gradient(left, #000, #ffae00, #000);
}

.nav-mobile-container {
   display: none;
}

.nav-mobile-logo {}

.btn-mobile-menu-open {
   padding: 0px 4vw;
   outline: none;
   border: none;
   width: 14vw;
   height: 100%;
   cursor: pointer;
   background-color: #0f131b;
   background: transparent;
   /* border: 1px solid white; */
   box-sizing: border-box;
   opacity: 0.6;
   animation: 0.3s bounuce 1;
}

.btn-mobile-menu-open:hover {
   opacity: 1;
}

.btn-mobile-menu-open:focus {
   outline: none;
   opacity: 0.8;
}

.btn-mobile-menu-open:active {
   outline: none;
   opacity: 0.8;
}

.nav-mobile-menubar {
   /* display: inline-block; */
   display: block;
   width: 100%;
   height: 0.4vw;
   margin: 1.1vw 0px;
   background-color: white;
}

.mobile-menu {
   display: none;
   background: #000;
   width: 100%;
   height: 100%;
   z-index: 3;
   top: 0;
   animation: 0.2s showMobileMenu 1;
   margin-top: 13.9vw;
   /* position: fixed;  
   display: block; */
}

.mobile-menu-acc {
   display: none;
   background: #000;
   width: 100%;
   height: 100%;
   z-index: 3;
   top: 0;
   /* animation: 0.2s showMobileMenu 1; */
   margin-top: 13.9vw;
   /* position: fixed;  
   display: block; */
}

.mobile-menu-acc-logged {
   display: none;
   background: #000;
   width: 100%;
   height: 100%;
   z-index: 3;
   top: 0;
   /* animation: 0.2s showMobileMenu 1; */
   margin-top: 13.9vw;
   position: fixed;
   display: block;
}

.mobile-menu-acc-logged a {
   font-family: BankGothic Md Bt;
   display: grid;
   /* background-color: #000; */
   border-top: none;
   border-bottom: 3px solid #444;
   width: 100%;
   height: 20vw;
   align-items: center;
   justify-content: center;
   font-size: 3.5rem;
   text-decoration: none;
}

.mobile-menu-acc a {
   font-family: BankGothic Md Bt;
   display: grid;
   /* background-color: #000; */
   border-top: none;
   border-bottom: 3px solid #444;
   width: 100%;
   height: 20vw;
   align-items: center;
   justify-content: center;
   font-size: 3.5rem;
   text-decoration: none;
   /* text-align: left; */
   /* padding-left: 27vw; */
}

.mobile-menu a {
   font-family: BankGothic Md Bt;
   display: grid;
   /* background-color: #000; */
   border-top: none;
   border-bottom: 3px solid #444;
   background-color: #141923;
   width: 100%;
   height: 20vw;
   align-items: center;
   justify-content: center;
   font-size: 3.5rem;
   text-decoration: none;
}

.mobile-menu-a {
   color: #a7a7a7;
}

.mobile-menu-a-0 {
   animation: 0.5s showMob0 1;
}

.mobile-menu-a-1 {
   animation: 0.5s showMob1 1;
}

.mobile-menu-a-2 {
   animation: 0.5s showMob2 1;
}

.mobile-menu-a-3 {
   animation: 0.5s showMob3 1;
}

.mobile-menu-a-4 {
   animation: 0.5s showMob4 1;
}

.mobile-menu-aB-0 {
   animation: 0.5s showMobB0 1;
}

.mobile-menu-aB-1 {
   animation: 0.5s showMobB1 1;
}

.mobile-menu-aB-2 {
   animation: 0.5s showMobB2 1;
}

.mobile-menu-aB-3 {
   animation: 0.5s showMobB3 1;
}

.mobile-menu-aB-4 {
   animation: 0.5s showMobB4 1;
}

.mobile-menu-a-5 {
   animation: 0.5s showMob5 1;
   padding: 0;
   height: 100%;
   margin: 0;
   box-shadow: none;
   background-color: #ffae00;
   color: #000;
   /* justify-content: center; */
   text-align: center;
   padding: 0;
}

.mobile-menu-a-6 {
   animation: 0.5s showMob6 1;
   padding: 0;
   height: 100%;
   margin: 0;
   box-shadow: none;
}


.nav-mobile-login-container {
   /* border: 1px solid white; */
   width: 700px;
}

.btn-mobile-menu-close {
   width: 15vw;
   height: 15vw;
   /* background: red; */
   position: relative;
   background: none;
   outline: none;
   border: none;
   z-index: 3;
   position: fixed;
   top: 0;
   left: -0.4vw;
   display: none;
   z-index: 6;
}

.btn-mobile-menu-close-bar {
   width: 7vw;
   height: 0.4vw;
   background: rgb(190, 190, 190);
   position: absolute;
   top: 50%;
   left: 50%;
}

.btn-mobile-menu-close-bar-a {
   transform: translateX(-50%) translateY(-50%) rotate(-45deg);
   animation: 0.4s mobBtnCloseRotateLeft 1;

}

.btn-mobile-menu-close-bar-b {
   transform: translateX(-50%) translateY(-50%) rotate(45deg);
   animation: 0.4s mobBtnCloseRotateRight 1;
}

.nav-mobile-cn-logo {
   width: 200px;
   height: 100%;
   background-image: url(../imgs/svg/cn_logo.svg);
   background-repeat: no-repeat;
   background-size: 100%;
   position: fixed;
   left: 50%;
   top: 35%;
   transform: translateX(-50%);
   /* opacity: 0.8; */
}

.btn-mobile-account {
   background: none;
   border: none;
   outline: none;
   width: 14vw;
   height: 100%;
   position: absolute;
   top: 0;
   right: 0%;
   background-image: url(../imgs/acc_icon.png);
   background-repeat: no-repeat;
   background-color: none;
   background-size: 50%;
   background-position: center;
   /* acity: 0.8; */
}

.rel {
   position: relative;
}

.mobile-menu-acc-icon {
   padding: 0;
   margin: 0;
   width: 6vw;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 10%;
}

.btn-mobile-menu-acc-logout {
   width: 100%;
   height: 20vw;
   margin: 0;
   padding: 0;
   font-size: 3.5rem;
}

@keyframes bounuce {
   10% {
      transform: scale(0.8);
   }

   35% {
      transform: scale(1.3);
   }

   100% {
      transform: scale(1);
   }
}

@keyframes mobBtnCloseRotateRight {
   0% {
      background: #000;
      transform: translateX(-50%) translateY(-100%) rotate(-300deg);
   }
}

@keyframes mobBtnCloseRotateLeft {
   0% {
      background: #000;
      transform: translateX(-50%) translateY(100%) rotate(300deg);
   }
}

@keyframes showMob0 {
   0% {
      margin-left: -20%;
      opacity: 0;
   }
}

@keyframes showMob1 {
   0% {
      margin-left: -100%;
      opacity: 0;
   }

   16.6% {
      margin-left: -100%;
      opacity: 0;
   }
}

@keyframes showMob2 {
   0% {
      margin-left: -100%;
      opacity: 0;
   }

   32.2% {
      margin-left: -100%;
      opacity: 0;
   }
}

@keyframes showMob3 {
   0% {
      margin-left: -100%;
      opacity: 0;
   }

   49.8% {
      margin-left: -100%;
      opacity: 0;
   }
}

@keyframes showMob4 {
   0% {
      margin-left: -100%;
      opacity: 0;
   }

   66.4% {
      margin-left: -100%;
      opacity: 0;
   }
}

@keyframes showMob5 {
   0% {
      margin-left: -100%;
      opacity: 0;
   }
}

@keyframes showMob6 {
   0% {
      margin-left: -100%;
      opacity: 0;
   }

   50% {
      margin-left: -100%;
      opacity: 0;
   }
}

@keyframes showMobB0 {
   0% {
      margin-left: 20%;
      opacity: 0;
   }
}

@keyframes showMobB1 {
   0% {
      margin-left: 100%;
      opacity: 0;
   }

   16.6% {
      margin-left: 100%;
      opacity: 0;
   }
}

@keyframes showMobB2 {
   0% {
      margin-left: 100%;
      opacity: 0;
   }

   32.2% {
      margin-left: 100%;
      opacity: 0;
   }
}

@keyframes showMobB3 {
   0% {
      margin-left: 100%;
      opacity: 0;
   }

   49.8% {
      margin-left: 100%;
      opacity: 0;
   }
}

@keyframes showMobB4 {
   0% {
      margin-left: 100%;
      opacity: 0;
   }

   66.4% {
      margin-left: 100%;
      opacity: 0;
   }
}

@keyframes fade-in {
   0% {
      margin-left: 30px;
      opacity: 0;
   }
}

@keyframes logo-fade-in {
   0% {
      opacity: 0;
   }
}

@keyframes fade-in-menu {
   0% {
      opacity: 0;
      margin-top: -150px;
      transform: scale(0);
      right: -60px;
   }
}

@keyframes fade-in-scale {
   0% {
      transform: scale(0.8);
   }

   30% {
      transform: scale(1.15);
   }

   75% {
      transform: scale(0.9);
   }
}

@keyframes rotate-left {
   0% {
      transform: rotate(-720deg);
   }
}

@keyframes rotate {
   0% {
      transform: rotate(-360deg);
   }
}

@keyframes showMobileMenu {
   0% {
      opacity: 0;
      /* margin-bottom: 100%; */

   }

   100% {
      opacity: 1;
   }
}

@media only screen and (max-width: 1145px) {
   nav {
      height: 14vw;
   }

   .nav-container {
      display: none;
   }

   .nav-mobile-container {
      display: flex;
   }

   .mobile-menu {
      /* display: block; */
   }
}