@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

.screen a {
  display: contents;
  text-decoration: none;
}

.valign-text-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hidden,
.hidden * {
  pointer-events: none;
  visibility: hidden;
}

* {
  box-sizing: border-box;
}

.alert {
  background-color: var(--black-2);
  display: none;
  width: 100%;
  position: absolute;
  z-index: 1;
  height: 100vh;
}

.alert .alert-popup{
  display: flex;
  width: 200px;
  height: 130px;
  align-items: flex-start;
  background-color: var(--app-colorwhite);
  border-radius: 4px;
  flex-direction: column;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.alert .alert-content{
  display: flex;
  position: relative;
  width: 100%;
  height: 80px;
}

.alert .alert-text{
  display: flex;
  position: relative;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding-left: 30px;
  flex-grow: 1;
  font-family: var(--font-family-nanumsquareround-bold);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 700;
}

.alert .alert-okay{
  display: flex;
  position: relative;
  width: 200px;
  height: 50px;
  background-color: #84BF04;
  color: white;
  border-radius: 0 0 4px 4px;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-nanumsquareround-bold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
}

.alert .alert-close {
  border: none;
  background-color: transparent;
  display: flex;
  padding: 0;
}


.link {
  background-color: var(--black-2);
  display: none;
  width: 100%;
  position: absolute;
  z-index: 1;
  height: 100vh;
}
:root {
  --alto: #dddddd;
  --app-colorblack-200: #222222;
  --app-colorblack-400: #444444;
  --app-colorblue-4587: #4487ff;
  --app-colorchat-my-color: #cbef7d;
  --app-colordeep-color: #699804;
  --app-colorgray-66: #666666;
  --app-colorgray-83: #828282;
  --app-colorgray-c4: #c4c4c4;
  --app-colorgray-e1: #e1e1e1;
  --app-colorgray-f6: #f6f6f6;
  --app-colormain-color: #84bf04;
  --app-colormenu-30: #2323234c;
  --app-colorpink: #f07b7b;
  --app-colorred-3323: #ea3323;
  --app-colorred-5050: #fc5050;
  --app-colorstar: #f8c204;
  --app-colorwhite: #ffffff;
  --apple: #42ac3a;
  --black: #000000;
  --black-2: #00000099;
  --black-3: #00000066;
  --black-4: #00000059;
  --bombay: #abb0bc;
  --cod-gray: #09080c;
  --concrete: #f2f2f2;
  --denim: #2c5dc4;
  --desert-storm: #f8f8f8;
  --gray-nurse: #eaeaea;
  --iron: #d7d7d7;
  --jaguar: #04040f;
  --log-cabin: #22222259;
  --mercury: #e7e7e7;
  --mine-shaft: #333333;
  --mischka: #d2d3d8;
  --mountain-mist: #98979a;
  --nobel: #b2b2b2;
  --pink-swan: #bbbbbb;
  --shady-lady: #aaaaaa;
  --shark: #22242a;
  --sheen-green: #8ccd01;
  --sprout: #c0e2aa;
  --sushi: #87bd35;
  --the-haru-app-colorname-color: #828282;
  --the-haru-app-colortitle-color: #222222;
  --white: #ffffffcb;
  --white-2: #ffffff4c;
  --white-3: #ffffff66;
  --x-black: #232323;
  --x-black-5: #f6f6f6;
  --x-black-75: #666666;
  --x-dark-gray: #828282;
  --x-deep-dark-gray: #606060;
  --x-gray-70: #787e85;
  --x-white: #ffffff;

  --font-size-11px: 11px;
  --font-size-24px: 24px;
  --font-size-l: 15px;
  --font-size-m: 14px;
  --font-size-s: 13px;
  --font-size-xl: 16px;
  --font-size-xs: 12px;
  --font-size-xxl: 22px;
  --font-size-xxs: 10px;

  --font-family-nanumsquareround-bold: "NanumSquareRound-Bold", Helvetica;
  --font-family-nanumsquareround-extrabold: "NanumSquareRound-ExtraBold", Helvetica;
  --font-family-nanumsquareround-regular: "NanumSquareRound-Regular", Helvetica;
  --font-family-noto_sans_kr: "Noto Sans KR", Helvetica;
  --font-family-roboto: "Roboto", Helvetica;
  --font-family-rubik: "Rubik", Helvetica;
  --font-family-sf_pro_display-medium: "SF Pro Display-Medium", Helvetica;
  --font-family-sf_pro_display-regular: "SF Pro Display-Regular", Helvetica;
  --font-family-sf_pro_display-semibold: "SF Pro Display-Semibold", Helvetica;
  --font-family-sf_pro_text-regular: "SF Pro Text-Regular", Helvetica;
  --font-family-undefined-regular: "undefined-Regular", Helvetica;
}


/*====*/

.font-size20-font24-40 {
  font-family: var(--font-family-nanumsquareround-extrabold);
  font-size: var(--font-size-24px);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
}
:root {
  --alto: #dddddd;
  --app-colorblack-200: #222222;
  --app-colorblack-400: #444444;
  --app-colorblue-4587: #4487ff;
  --app-colorchat-my-color: #cbef7d;
  --app-colordeep-color: #699804;
  --app-colorgray-66: #666666;
  --app-colorgray-83: #828282;
  --app-colorgray-c4: #c4c4c4;
  --app-colorgray-e1: #e1e1e1;
  --app-colorgray-f6: #f6f6f6;
  --app-colormain-color: #84bf04;
  --app-colormenu-30: #2323234c;
  --app-colorpink: #f07b7b;
  --app-colorred-3323: #ea3323;
  --app-colorred-5050: #fc5050;
  --app-colorstar: #f8c204;
  --app-colorwhite: #ffffff;
  --apple: #42ac3a;
  --black: #000000;
  --black-2: #00000099;
  --black-3: #00000066;
  --black-4: #00000059;
  --bombay: #abb0bc;
  --cod-gray: #09080c;
  --concrete: #f2f2f2;
  --denim: #2c5dc4;
  --desert-storm: #f8f8f8;
  --gray-nurse: #eaeaea;
  --iron: #d7d7d7;
  --jaguar: #04040f;
  --log-cabin: #22222259;
  --mercury: #e7e7e7;
  --mine-shaft: #333333;
  --mischka: #d2d3d8;
  --mountain-mist: #98979a;
  --nobel: #b2b2b2;
  --pink-swan: #bbbbbb;
  --shady-lady: #aaaaaa;
  --shark: #22242a;
  --sheen-green: #8ccd01;
  --sprout: #c0e2aa;
  --sushi: #87bd35;
  --the-haru-app-colorname-color: #828282;
  --the-haru-app-colortitle-color: #222222;
  --white: #ffffffcb;
  --white-2: #ffffff4c;
  --white-3: #ffffff66;
  --x-black: #232323;
  --x-black-5: #f6f6f6;
  --x-black-75: #666666;
  --x-dark-gray: #828282;
  --x-deep-dark-gray: #606060;
  --x-gray-70: #787e85;
  --x-white: #ffffff;

  --font-size-11px: 11px;
  --font-size-24px: 24px;
  --font-size-l: 15px;
  --font-size-m: 14px;
  --font-size-s: 13px;
  --font-size-xl: 16px;
  --font-size-xs: 12px;
  --font-size-xxl: 22px;
  --font-size-xxs: 10px;

  --font-family-nanumsquareround-bold: "NanumSquareRound-Bold", Helvetica;
  --font-family-nanumsquareround-extrabold: "NanumSquareRound-ExtraBold", Helvetica;
  --font-family-nanumsquareround-regular: "NanumSquareRound-Regular", Helvetica;
  --font-family-noto_sans_kr: "Noto Sans KR", Helvetica;
  --font-family-roboto: "Roboto", Helvetica;
  --font-family-rubik: "Rubik", Helvetica;
  --font-family-sf_pro_display-medium: "SF Pro Display-Medium", Helvetica;
  --font-family-sf_pro_display-regular: "SF Pro Display-Regular", Helvetica;
  --font-family-sf_pro_display-semibold: "SF Pro Display-Semibold", Helvetica;
  --font-family-sf_pro_text-regular: "SF Pro Text-Regular", Helvetica;
  --font-family-undefined-regular: "undefined-Regular", Helvetica;
}

.nanumsquareround-regular-normal-gray-16px {
  color: var(--app-colorgray-83);
  font-family: var(--font-family-nanumsquareround-regular);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}
.nanumsquareround-regular-normal-mist-gray-16px {
  color: var(--app-colorgray-c4);
  font-family: var(--font-family-nanumsquareround-regular);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}


/*border*/
@keyframes rotate {
  100% {
    transform: rotate(360deg); } }

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35; }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124; } }
@keyframes infinite-blink {
  0% {
    opacity: 1;
    top: 0; }
  30% {
    opacity: 1;
    top: 30%; }
  70% {
    opacity: 0;
    top: 30%; }
  100% {
    opacity: 0;
    top: 0; } }
@-webkit-keyframes play-button-pulse {
  0% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0; } }

@-moz-keyframes play-button-pulse {
  0% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0; } }

@-ms-keyframes play-button-pulse {
  0% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0; } }

@-o-keyframes play-button-pulse {
  0% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0; } }

@keyframes play-button-pulse {
  0% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0; } }


/*== heartBeat ==*/
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  25% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  40% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  60% {
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    -o-transform: scale(1.04);
    transform: scale(1.04); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }

@keyframes cluster-animation {
  0%, 100% {
    -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1); }
  50% {
    -webkit-box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.1); } }

/*====== starsAnimation ========*/
@keyframes starsAnimation {
  from {
    transform: translateY(-2000px); }
  to {
    transform: translateY(0px); } }

/*====== background-move ========*/
@keyframes background-move {
  0% {
    background-position: 0 0, 0 0; }
  100% {
    background-position: 100vw 0, 0 0;
    background-position: max(100vw, 40em) 0, 0 0; } }

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

ul {
  padding: 0;
  margin: 0;
  list-style-type: none; }

a:hover,
a:focus {
  text-decoration: none; }
input:focus {
  outline: none; }


h1, p {
  margin: 0; }

body {
  font-size: 16px;
  line-height: 28px;
  font-family: "Roboto", sans-serif;
  color: #5d646d;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
.border {
  border-color: rgba(128, 137, 150, 0.1) !important; }
.theme-btn {
  font-size: 15px;
  color: #fff;
  line-height: 45px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #287dfa;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  display: inline-block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #287dfa;
  font-weight: 500; }
  .theme-btn:hover {
    background-color: #fff;
    color: #287dfa; }
.theme-btn-small {
  line-height: 35px;
  padding-left: 15px;
  padding-right: 15px; }
.padding-right-100px {
  padding-right: 100px; }

.padding-left-100px {
  padding-left: 100px; }
.title {
  font-size: 18px;
  color: #0d233e; }
.list-items li {
  margin-bottom: 6px;
  color: #5d646d; }
  .list-items li a {
    color: #5d646d;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; }
    .list-items li a:hover {
      color: #287dfa; }

#back-to-top {
  position: fixed;
  right: -150px;
  bottom: 40px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  background-color: #2273e5;
  -webkit-box-shadow: 0 10px 40px rgba(82, 85, 90, 0.2);
  -moz-box-shadow: 0 10px 40px rgba(82, 85, 90, 0.2);
  box-shadow: 0 10px 40px rgba(82, 85, 90, 0.2);
  color: #0d233e;
  font-size: 18px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  opacity: 0;
  visibility: hidden; }
.header-top-bar {
  background-color: #fff;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(128, 137, 150, 0.1); }
  @media (max-width: 1366px) {
    .header-top-bar {
      padding-right: 0;
      padding-left: 0; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-top-bar {
      padding-top: 10px;
      padding-bottom: 18px;
      display: none;
      height: auto !important;
      border-bottom: 1px solid rgba(128, 137, 150, 0.1) !important;
      opacity: 1 !important;
      visibility: visible !important; } }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .header-top-bar {
      padding-top: 10px;
      padding-bottom: 18px;
      display: none;
      height: auto !important;
      border-bottom: 1px solid rgba(128, 137, 150, 0.1) !important;
      opacity: 1 !important;
      visibility: visible !important; } }
  @media only screen and (min-width: 320px) and (max-width: 479px) {
    .header-top-bar {
      padding-top: 10px;
      padding-bottom: 18px;
      display: none;
      height: auto !important;
      border-bottom: 1px solid rgba(128, 137, 150, 0.1) !important;
      opacity: 1 !important;
      visibility: visible !important; } }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-top-content {
    text-align: center; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .header-top-content {
    text-align: center; } }

@media only screen and (min-width: 320px) and (max-width: 479px) {
  .header-top-content {
    text-align: center; } }

.header-top-content .list-items li {
  padding-right: 13px;
  margin-bottom: 5px;
  display: inline-block;
  color: #0d233e;
  text-transform: inherit;
  font-size: 14px; }
  .header-top-content .list-items li:last-child {
    padding-right: 0; }
  .header-top-content .list-items li .la {
    margin-right: 3px; }
  .header-top-content .list-items li a {
    color: #0d233e; }
    .header-top-content .list-items li a:before {
      display: none; }

/*========== header-right ========*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-right {
    padding-top: 5px; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .header-right {
    padding-top: 5px; } }

@media only screen and (min-width: 320px) and (max-width: 479px) {
  .header-right {
    padding-top: 5px; } }

@media (max-width: 375px) {
  .header-right {
    display: block !important;
    padding-top: 0; } }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-right.justify-content-end {
    -ms-flex-pack: center !important;
    justify-content: center !important; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .header-right.justify-content-end {
    -ms-flex-pack: center !important;
    justify-content: center !important; } }

@media only screen and (min-width: 320px) and (max-width: 479px) {
  .header-right.justify-content-end {
    -ms-flex-pack: center !important;
    justify-content: center !important; } }

@media (max-width: 600px) {
  .header-right .list-items {
    margin-right: 0 !important; } }

/*========== header-right-action ========*/

.header-right-action .theme-btn {
  font-size: 14px; }

/*===== header-menu-wrapper ========*/
.header-menu-wrapper {
  background-color: #fff;
  z-index: 1024; }
  @media (max-width: 1366px) {
    .header-menu-wrapper {
      padding-right: 0;
      padding-left: 0; } }

/*===== menu-wrapper ========*/
.menu-wrapper {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  position: relative; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .menu-wrapper {
      padding-top: 15px;
      padding-bottom: 15px;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; } }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .menu-wrapper {
      padding-top: 15px;
      padding-bottom: 15px;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; } }
  @media only screen and (min-width: 320px) and (max-width: 479px) {
    .menu-wrapper {
      padding-top: 15px;
      padding-bottom: 15px;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; } }

.down-button {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 30px;
  text-align: center;
  height: 22px;
  line-height: 20px;
  background-color: rgba(128, 137, 150, 0.1);
  color: #5d646d;
  display: none;
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
  z-index: 3;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }
  .down-button .la {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; }
  .down-button:hover {
    color: #fff;
    background-color: #287dfa; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .down-button {
      display: block; } }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .down-button {
      display: block; } }
  @media only screen and (min-width: 320px) and (max-width: 479px) {
    .down-button {
      display: block; } }

.logo {
  z-index: 2; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .logo {
      width: 100%;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: justify;
      justify-content: space-between; } }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .logo {
      width: 100%;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: justify;
      justify-content: space-between; } }
  @media only screen and (min-width: 320px) and (max-width: 479px) {
    .logo {
      width: 100%;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: justify;
      justify-content: space-between; } }
  .logo a {
    display: inline-block; }


.menu-toggler {
  width: 40px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: none;
  margin-left: auto;
  background-color: rgba(128, 137, 150, 0.1);
  color: #0d233e;
  font-size: 26px;
  position: relative; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    
    .menu-toggler {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;; } }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    
    .menu-toggler {
	    display: flex;
	    flex-direction: column;
	    justify-content: center; } }
  @media only screen and (min-width: 320px) and (max-width: 479px) {
    
    .menu-toggler {
	    display: flex;
	    flex-direction: column;
	    justify-content: center; } }
  
  .menu-toggler .la-bars {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; }
  
  .menu-toggler .la-times {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; }

/*======== main-menu-content =========*/
.main-menu-content {
  padding-top: 22px;
  margin-left: auto;
  padding-right: 28px; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .main-menu-content {
      display: none;
      margin-left: 0 !important;
      padding: 15px 0 0 0;
      width: 100%; } }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-menu-content {
      display: none;
      margin-left: 0 !important;
      padding: 15px 0 0 0;
      width: 100%; } }
  @media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-menu-content {
      display: none;
      margin-left: 0 !important;
      padding: 15px 0 0 0;
      width: 100%; } }
  .main-menu-content ul li {
    /* display: inline-block; */
    display: inline-flex;
    text-transform: capitalize;
    padding-right: 23px;
    position: relative; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .main-menu-content ul li {
        display: block;
        padding-bottom: 15px;
        padding-right: 0; } }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
      .main-menu-content ul li {
        display: block;
        padding-bottom: 15px;
        padding-right: 0; } }
    @media only screen and (min-width: 320px) and (max-width: 479px) {
      .main-menu-content ul li {
        display: block;
        padding-bottom: 15px;
        padding-right: 0; } }
    .main-menu-content ul li .drop-menu-toggler {
      position: absolute;
      right: 0;
      top: 0;
      width: 35px;
      height: 35px;
      text-align: center;
      line-height: 35px;
      color: #0d233e;
      cursor: pointer;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      display: none;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      border: none;
      outline: none;
      z-index: 2;
      background-color: transparent; }
      .main-menu-content ul li .drop-menu-toggler .la-angle-down {
        font-size: 16px; }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .main-menu-content ul li .drop-menu-toggler .la-angle-down {
            display: block; } }
        @media only screen and (min-width: 480px) and (max-width: 767px) {
          .main-menu-content ul li .drop-menu-toggler .la-angle-down {
            display: block; } }
        @media only screen and (min-width: 320px) and (max-width: 479px) {
          .main-menu-content ul li .drop-menu-toggler .la-angle-down {
            display: block; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .main-menu-content ul li .drop-menu-toggler {
          display: block; } }
      @media only screen and (min-width: 480px) and (max-width: 767px) {
        .main-menu-content ul li .drop-menu-toggler {
          display: block; } }
      @media only screen and (min-width: 320px) and (max-width: 479px) {
        .main-menu-content ul li .drop-menu-toggler {
          display: block; } }
      .main-menu-content ul li .drop-menu-toggler:hover {
        background-color: rgba(128, 137, 150, 0.1); }
    .main-menu-content ul li a {
      color: #0d233e;
      display: block;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      position: relative;
      z-index: 1;
      padding-bottom: 22px; }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .main-menu-content ul li a {
          padding-bottom: 0; } }
      @media only screen and (min-width: 480px) and (max-width: 767px) {
        .main-menu-content ul li a {
          padding-bottom: 0; } }
      @media only screen and (min-width: 320px) and (max-width: 479px) {
        .main-menu-content ul li a {
          padding-bottom: 0; } }
      .main-menu-content ul li a .la-angle-down {
        font-size: 12px;
        color: #5d646d; }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .main-menu-content ul li a .la-angle-down {
            display: none; } }
        @media only screen and (min-width: 480px) and (max-width: 767px) {
          .main-menu-content ul li a .la-angle-down {
            display: none; } }
        @media only screen and (min-width: 320px) and (max-width: 479px) {
          .main-menu-content ul li a .la-angle-down {
            display: none; } }
      .main-menu-content ul li a:hover {
        color: #287dfa; }
    .main-menu-content ul li .dropdown-menu-item {
      text-align: left;
      position: absolute;
      top: 50px;
      left: 0;
      width: 200px;
      background-color: #fff;
      padding-top: 10px;
      padding-bottom: 10px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      opacity: 0;
      visibility: hidden;
      z-index: 4;
      -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2);
      -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2);
      box-shadow: 0 0 40px rgba(82, 85, 90, 0.2);
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      transform-origin: top;
      -webkit-transform: perspective(250px) rotateX(-15deg);
      -moz-transform: perspective(250px) rotateX(-15deg);
      -ms-transform: perspective(250px) rotateX(-15deg);
      -o-transform: perspective(250px) rotateX(-15deg);
      transform: perspective(250px) rotateX(-15deg); }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .main-menu-content ul li .dropdown-menu-item {
          opacity: 1;
          visibility: visible;
          -webkit-transform: perspective(0) rotateX(0);
          -moz-transform: perspective(0) rotateX(0);
          -ms-transform: perspective(0) rotateX(0);
          -o-transform: perspective(0) rotateX(0);
          transform: perspective(0) rotateX(0);
          display: none;
          width: 100%;
          height: 210px;
          overflow-x: auto;
          overflow-y: auto;
          -webkit-border-radius: 0;
          -moz-border-radius: 0;
          border-radius: 0;
          -webkit-box-shadow: 0 0 0 0;
          -moz-box-shadow: 0 0 0 0;
          box-shadow: 0 0 0 0;
          position: relative;
          top: auto;
          left: auto;
          padding-bottom: 0;
          background-color: transparent; }
          .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar {
            width: 8px; }
          .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-track {
            background-color: rgba(128, 137, 150, 0.1);
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px; }
          .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-thumb {
            background-color: rgba(128, 137, 150, 0.2);
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px; }
          .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-thumb:hover {
            background-color: rgba(128, 137, 150, 0.4); } }
      @media only screen and (min-width: 480px) and (max-width: 767px) {
        .main-menu-content ul li .dropdown-menu-item {
          opacity: 1;
          visibility: visible;
          -webkit-transform: perspective(0) rotateX(0);
          -moz-transform: perspective(0) rotateX(0);
          -ms-transform: perspective(0) rotateX(0);
          -o-transform: perspective(0) rotateX(0);
          transform: perspective(0) rotateX(0);
          display: none;
          width: 100%;
          height: 210px;
          overflow-x: auto;
          overflow-y: auto;
          -webkit-border-radius: 0;
          -moz-border-radius: 0;
          border-radius: 0;
          -webkit-box-shadow: 0 0 0 0;
          -moz-box-shadow: 0 0 0 0;
          box-shadow: 0 0 0 0;
          position: relative;
          top: auto;
          left: auto;
          padding-bottom: 0;
          background-color: transparent; }
          .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar {
            width: 8px; }
          .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-track {
            background-color: rgba(128, 137, 150, 0.1);
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px; }
          .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-thumb {
            background-color: rgba(128, 137, 150, 0.2);
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px; }
          .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-thumb:hover {
            background-color: rgba(128, 137, 150, 0.4); } }
      @media only screen and (min-width: 320px) and (max-width: 479px) {
        .main-menu-content ul li .dropdown-menu-item {
          opacity: 1;
          visibility: visible;
          -webkit-transform: perspective(0) rotateX(0);
          -moz-transform: perspective(0) rotateX(0);
          -ms-transform: perspective(0) rotateX(0);
          -o-transform: perspective(0) rotateX(0);
          transform: perspective(0) rotateX(0);
          display: none;
          width: 100%;
          height: 210px;
          overflow-x: auto;
          overflow-y: auto;
          -webkit-border-radius: 0;
          -moz-border-radius: 0;
          border-radius: 0;
          -webkit-box-shadow: 0 0 0 0;
          -moz-box-shadow: 0 0 0 0;
          box-shadow: 0 0 0 0;
          position: relative;
          top: auto;
          left: auto;
          padding-bottom: 0;
          background-color: transparent; }
          .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar {
            width: 8px; }
          .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-track {
            background-color: rgba(128, 137, 150, 0.1);
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px; }
          .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-thumb {
            background-color: rgba(128, 137, 150, 0.2);
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px; }
          .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-thumb:hover {
            background-color: rgba(128, 137, 150, 0.4); } }
      .main-menu-content ul li .dropdown-menu-item li {
        display: block;
        padding-right: 0; }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .main-menu-content ul li .dropdown-menu-item li {
            padding-bottom: 0; } }
        @media only screen and (min-width: 480px) and (max-width: 767px) {
          .main-menu-content ul li .dropdown-menu-item li {
            padding-bottom: 0; } }
        @media only screen and (min-width: 320px) and (max-width: 479px) {
          .main-menu-content ul li .dropdown-menu-item li {
            padding-bottom: 0; } }
        .main-menu-content ul li .dropdown-menu-item li a {
          display: -webkit-flex;
          display: -ms-flex;
          display: flex;
          -ms-flex-align: center;
          align-items: center;
          justify-content: space-between;
          position: relative;
          padding: 3px 25px;
          color: #5d646d;
          font-size: 15px; }
          .main-menu-content ul li .dropdown-menu-item li a:hover {
            color: #287dfa; }
    .main-menu-content ul li:last-child {
      padding-right: 0; }

@media (min-width: 992px) {
  .main-menu-content ul li:hover .dropdown-menu-item {
    -webkit-transform: perspective(300px) rotateX(0);
    -moz-transform: perspective(300px) rotateX(0);
    -ms-transform: perspective(300px) rotateX(0);
    -o-transform: perspective(300px) rotateX(0);
    transform: perspective(300px) rotateX(0);
    opacity: 1;
    visibility: visible; } }