.skip a {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000, endColorstr=#90000000);
  width: 100%;
  height: 30px;
  text-align: center;
  color: #fff;
  z-index: 100;
  line-height: 30px;
  top: -30px;
  opacity: 0;
}

header.bg_off {
            position: fixed;
            top: 0px;
            width: 100%;
            z-index:9;
            transition: all ease 0.5s 0s;
}

header.bg_on {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index:9;
  transition: all ease 0.5s 0s;
}

@media (max-width: 991.98px) {
  .navbar .container {
      padding-left: 20px;
      padding-right: 20px;
  }
}

header.bg_off .navbar-default {
            border: none;
            width: 100%;
            margin: 0 auto;
            background-color: rgba(255, 255, 255, 1.0);
            transition: all ease 0.5s 0s;
}

header.bg_on .navbar-default {
  border: none;
  width: 100%;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 1.0);
  transition: all ease 0.5s 0s;
}

header.bg_off .navbar-brand>img.logo-dark {
  display: none;
}

header.bg_on .navbar-brand>img.logo-light {
  display: none;
}

.navbar {
  height: 100%;
border-bottom: 1px solid #ddd !important;
}

.navbar-fixed-top {
  z-index: 2;
}

.navbar-default .nav li>ul>li {
  border-bottom: 1px solid #ededed;
}

.navbar-nav {
  width: auto !important;
  margin: 0 auto;
}

.nav-item {
  width: auto !important;
}

.bg_off .navbar-collapse i {
  color: #fff;
  font-size: 20px;
}
.bg_on .navbar-collapse i {
  color: #fff;
  font-size: 20px;
}

.bg_off .nav-link {
  padding: 34px 0;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  transition: all ease 0.5s 0s;
}

.bg_on .nav-link {
  padding: 34px 0;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  transition: all ease 0.5s 0s;
}

.navbar {
  padding-top: 0;
  padding-bottom: 0
}

.nav-item:hover {
  transition: all ease 0.5s 0s;
  background-color:rgba(0, 48, 87, 1.0);
}

.nav-item:hover a {
  color: #fff;
  transition: all ease 0.5s 0s;
}

.nav-item:hover>.dropdown-menu {
  background-color:rgba(0, 48, 87, 1.0);
}

header .navbar-collapse>ul ul a {
  color: #fff !important;
  padding: 8px 0 8px 15px;
  font-size: 14px;
}

header .navbar-collapse>ul ul a:hover {
  color: #222 !important;
}

header .navbar-collapse>ul>li:hover>a:after {
  left: 0;
  width: 100%;
  border: 0;
  color: #fff;
}

header .navbar-collapse>ul>li>a:after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -1px;
            width: 0%;
            color: #fff;
            height: 4px;
            background: none;
            transition: all 0.5s;
}

.dropdown-toggle::after {
  border-left: 0;
  border-right: 0;
  margin-left: 0
}

header .form-control {
  width: 70%
}

.dropdown-menu {
  padding: 0;
  min-width: 100%;
  border-radius: 0;
  border: 0px solid rgba(0, 0, 0, .15);
}

.dropdown-menu .dropdown-item>a {
  color: #333;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #333;
  text-decoration: none;
  background-color: #fff;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: var(--bs-navbar-toggler-icon-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.navbar-default h1 {position: absolute; left: 30px;}
.sitemap_a {position: absolute; right: 30px;}



.list-inline>li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}

.top-bar-light {
  background-color: #f3f3f3;
}

.top-bar-dark {
  background-color: rgb(0, 0, 0, 0.8);
}

.top-dark-right {
  margin: 0px;
  padding: 0px;
}

.top-bar-light .top-dark-right li {
border-color: #ddd;
font-family: "Source Sans Pro", sans-serif;
}

        .top-dark-right li,
        .top-dark-right li a {
            color: #bbb;
            font-size: 12px;
            text-decoration: none;
        }


        .top-dark-right li {
            line-height: 40px;
            border-left: 1px solid #444;
            padding: 0px 10px;
        }

        .top-dark-right li i {
            margin-right: 5px;
        }

        .top-bar-socials {
            line-height: 18px;
            padding-top: 5px;
        }

        .top-bar-socials a {
            margin: 0px 3px;
        }

        .topbar-icons i {
            margin: 0px !important;
            display: block;
        }

        .topsearchbox {
            display: none;
            position: absolute;
            left: 0;
            right: 15px;
            top: 0;
            height: 100%;
            z-index: 99999;
        }

        .topsearchbox button {
          width: 35px;
          height: 38px;
          color: #000;
          background: none;
          border: 0px solid grey;
          border-left: none;
          cursor: pointer;
      }

        .topsearchbox .form-control {
          display: inline-block;
            height: 40px;
            position: absolute;
            top: 0;
            width: 99%;
            right: 0;
            border: 0px;
            background-color: #fff;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            -ms-box-shadow: none;
            box-shadow: none;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            -ms-border-radius: 0px;
            border-radius: 0px;
        }

        .search-close {
            position: absolute;
            right: 9px;
            top: 5px;
            cursor: pointer;
        }

        .text-right {
            text-align: right;
        }
        @media (min-width: 992px) {
            .navbar-expand-lg .navbar-nav .nav-link {
                padding-right: 3.5rem;
                padding-left: 3.5rem;
            }
        }    

@media (max-width: 991.98px) {
      .bg_off {
          position: fixed;
          top: 0px !important;
          width: 100%;
          transition: all ease 0.5s 0s;
      }

      .bg_on {
          position: fixed;
          top: 0px;
          width: 100%;
          transition: all ease 0.5s 0s;
      }

      header.bg_off .navbar-default {
          width: 100%;
          background-color: rgba(255, 255, 255, 1.0);
                  padding-top: 65px;
      }
header.bg_on .navbar-default {
      padding: 65px 0 0;
}
      .bg_off h1 {
          top: 15px;
      }

      .bg_on h1 {
          top: 15px;
      }

      .navbar>.container {
          max-width: none;
      }

      .navbar-nav {
          width: 100%;
          margin: 0 auto;
          background: rgba(0, 0, 0, 0.8);
      }

      .nav-item {
        width: auto !important;
        padding: 5px 15px 5px 15px;
      }

      .nav-item:hover>.dropdown-menu {
        background: none;
      }

      .nav-link {
          padding: 5px 0 !important;
          text-align: left;
          font-size: 14px !important;
      }
      .nav-item:hover {
        transition: all ease 0.5s 0s;
        background: #333;
      }

       
      .dropdown-menu {
          box-shadow: none;
      }

      header .navbar-collapse>ul>li:hover>a:after {
          display: none;
      }
      header .navbar-collapse>ul ul a {
        color: #fff !important;
        padding: 3px 0 8px 15px;
      }
      .topsearchbox {padding-bottom: 20px;}

      .navbar-brand img {max-height: 25px;}
      .navbar-default h1 {position: absolute; left: 10px;}
}


@media (min-width: 992px) {
  .animate {
      animation-duration: 0.3s;
      -webkit-animation-duration: 0.3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
      transform: translateY(1rem);
      opacity: 0;
  }

  100% {
      transform: translateY(0rem);
      opacity: 1;
  }

  0% {
      transform: translateY(1rem);
      opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
      -webkit-transform: transform;
      -webkit-opacity: 0;
  }

  100% {
      -webkit-transform: translateY(0);
      -webkit-opacity: 1;
  }

  0% {
      -webkit-transform: translateY(1rem);
      -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}



@media (min-width: 576px) {
  ...
}


@media (min-width: 768px) {
  ...
}


@media (min-width: 992px) {
  ...
}


@media (min-width: 1200px) {
  ...
}


@media (min-width: 1400px) {
  ...
}

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
  ...
}

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {
  ...
}

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) {}

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) {
  ...
}

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) {
  ...
}

@media (min-width: 768px) and (max-width: 991.98px) {
  ...
}

.navbar-toggle .icon-bar {
  background-color: #333;
}

.bg_off #itreetoggler {
  position: fixed;
  top: 0px;
  right: 5px;
  width: 66px;
  height: 66px;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  z-index: 2;
  transition: all ease 0.5s 0s;
}

.bg_on #itreetoggler {
  position: fixed;
  top: 0px;
  right: 5px;
  width: 66px;
  height: 66px;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  z-index: 2;
  transition: all ease 0.5s 0s;
}

.modal-search-fa {cursor: pointer; padding-right: 20px;}
.mobile-ver {display: none;}
.pc-ver {display: block;}

@media(max-width:991.98px) {
  .mobile-ver {display: block;}
}

@media (max-width: 991.98px) {
  .modal-search-fa {
    margin-right: 35px;
    font-size: 18px;
    color: #fff;
    z-index: 999999999;
    margin-top: -5px;
  }
  .pc-ver {display: none;}
}

@media (max-width: 767.98px) {
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: #fff;
}
}

#itreetoggler>span {
  display: block;
  position: absolute;
  left: 50%;
  width: 30px;
  height: 3px;
  margin-left: -15px;
  background: #cd8e59;
  transition: all .3s ease-in-out;
  transform: rotate(0deg);
  opacity: 1;
}

.collapsed>.bar1 {
  top: 24px;
  background: #000 !important;
}

.collapsed>.bar2 {
  top: 32px;
  background: #000 !important;
}

.collapsed>.bar3 {
  top: 40px;
  background: #000 !important;
}

.bg_on .collapsed>.bar1 {
  top: 24px;
  background: #000 !important;
}

.bg_on .collapsed>.bar2 {
  top: 32px;
  background: #000 !important;
}

.bg_on .collapsed>.bar3 {
  top: 40px;
  background: #000 !important;
}


#itreetoggler>.bar1 {
  top: 24px;
}

#itreetoggler>.bar2 {
  top: 32px;
}

#itreetoggler>.bar3 {
  top: 40px;
}

.navbar-toggler:focus {
  box-shadow: none;
}




.modal-backdrop {
  position: relative;
}

@media (min-width: 768px) {
  .modal {
      background: rgba(0, 0, 0, 0.7);
  }
}

.bg_on .modal_search {
  top: 71px;
}

.btn01 {
  display: block;
  border: none
}

.btn01 i {
  font-size: 18px;
}

.btn02 {
  display: block;
  border: none
}

.allmenu-btn {
                            position: absolute;
                            right: 20px;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 28px;
                            height: 20px;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            background: none;
                            border: none;
                            cursor: pointer;
                            z-index: 1300;
                            padding: 0;
                        }

                        .allmenu-btn span {
                            display: block;
                            height: 2px;
                            background: #000;
                            border-radius: 0px;
                            width: 28px;
                            transition: width 0.3s ease-in-out;
                        }

                        .allmenu-btn span:nth-child(2) {
                            width: 20px;
                            margin-left: auto;
                        }

                        .allmenu-btn:hover span:nth-child(2) {
                            width: 28px;
                        }

                        .js-hover .allmenu-btn span {
                            background: #000;
                        }

                        @media (max-width: 991px) {
                            .allmenu-btn {
                                display: none;
                            }
                        }