@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500&display=swap');

* {
  padding    : 0;
  margin     : 0;
  box-sizing : border-box;
  font-family: 'Noto Sans TC', sans-serif;
}


/* .logo img {
  width: 80%;
} */

nav {
  background : #FFF;
  position   : fixed;
  width      : 100%;
  z-index    : 999;
  height     : 100px;
  line-height: 100px;
  top        : 0;
  z-index    : 1200;
}

nav .wrapper {
  position          : relative;
  /* max-width      : 1300px; */
  padding           : 0 30px;
  margin            : auto;
  display           : flex;
  align-items       : center;
  justify-content   : space-around;
}

/* @media screen and (min-width:1650px) {
  nav .wrapper {
    max-width: 1400px;
  }
} */

.wrapper .logo a {
  color          : #222;
  text-decoration: none;
  font-size      : 27px;
  font-weight    : 600;
}

.wrapper .nav-links {
  display: inline-flex;
}

.nav-links li {
  list-style: none;
}


.nav-links li a {
  color          : #222;
  text-decoration: none;
  font-size      : 16px;
  font-weight    : 400;
  padding        : 9px 15px;
  border-radius  : 5px;
  transition     : all .3s ease;

}

.nav-links li a:hover {
  background: rgb(247, 247, 247);
  color     : #005ABB;
}

.nav-links .drop-menu,
.nav-links .drop-menu2,
.nav-links .drop-menu3 {
  background : #efefef;
  width      : 180px;
  top        : 85px;
  line-height: 45px;
  position   : absolute;
  opacity    : 0;
  visibility : hidden;
  box-shadow : 0 0px 3px #CCC;
}

/* @media (any-hover:hover) { */

.nav-links li:hover .drop-menu,
.nav-links li:hover .drop-menu2,
.nav-links li:hover .drop-menu3,
.nav-links li:hover .mega-box,
.nav-links li:hover .mega-box2 {
  top       : 100px;
  opacity   : 1;
  visibility: visible;
  transition: all .3s ease;
}

/* } */

.drop-menu li a,
.drop-menu2 li a,
.drop-menu3 li a {
  width        : 100%;
  display      : block;
  padding      : 0 0 0 15px;
  font-weight  : 400;
  border-radius: 0;
}

.mega-box,
.mega-box2 {
  position  : absolute;
  top       : 80px;
  width     : 100%;
  left      : 0;
  opacity   : 0;
  visibility: hidden;
  box-shadow: 0 0px 3px #CCC;
}

.mega-box .content,
.mega-box2 .content {
  background     : #efefef;
  display        : flex;
  width          : 100%;
  justify-content: space-between;
  padding        : 20px 5%;


}

.content .row {
  width      : calc(25%-30px);
  line-height: 40px;
}

.content .row img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

.content .row header {
  color      : #20298c;
  font-size  : 18px;
  font-weight: 500;
}

.content .row .mega-links {
  margin-left: -40px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.content .row:nth-child(1) .mega-links,
.content .row:nth-child(2) .mega-links {
  border-left: 0px;
}

.row .mega-links li {
  padding: 0 20px;
}

.row .mega-links li a {
  padding  : 0 20px;
  color    : #222;
  font-size: 15px;
  display  : block;
}

.row .mega-links li a:hover {
  color: #f2942f;
}


.menuopen {
  display: none;
}


/*手機版*/
@media screen and (max-width:1198px) {
  nav {
    height: auto;
  }

  nav .wrapper {
    flex-direction: column;
    align-items   : flex-start;
  }


  .navpic {
    display: none;
  }

  .nav-links .drop-menu,
  .nav-links .drop-menu2,
  .nav-links .drop-menu3 {
    width     : 100vw;
    position  : relative;
    top       : 0;
    opacity   : 1;
    visibility: visible;
    display   : none;
  }

  .nav-links li:hover .drop-menu,
  .nav-links li:hover .drop-menu2,
  .nav-links li:hover .drop-menu3,
  .nav-links li:hover .mega-box,
  .nav-links li:hover .mega-box2 {
    top       : 0px;
    opacity   : 1;
    visibility: visible;
    transition: all .3s ease;
  }

  .wrapper .nav-links {
    flex-direction: column;

    height     : 0vh;
    opacity    : 0;
    transition : all .3s ease;
    width      : 100%;
    overflow-y : auto;
    line-height: 40px;
  }

  .mega-box,
  .mega-box2 {
    position  : relative;
    height    : 60vh;
    overflow  : auto;
    opacity   : 1;
    visibility: visible;
    display   : none;
  }

  .mega-box .content,
  .mega-box2 .content {
    flex-direction: column;
  }

  .menuopen {
    display        : block;
    color          : #222;
    text-decoration: none;
    position       : absolute;
    top            : 0px;
    right          : 15px;
  }


  /*JS 運用*/
  .visible {
    opacity       : 1;
    height        : 90vh !important;
    padding-bottom: 60px;
    opacity       : 1 !important;
    transition    : all .3s ease;
  }

  .visible2 {
    opacity   : 1;
    display   : block !important;
    transition: all .3s ease;
  }

  .visible3 {
    opacity   : 1;
    display   : block !important;
    transition: all .3s ease;
  }

  .visible4 {
    opacity   : 1;
    display   : block !important;
    transition: all .3s ease;
  }

  i.fas.fa-chevron-down {
    transform: rotate(270deg);
  }

  .CHANGE i:before {
    color  : #222;
    content: "\f00d";
  }
}


/* ---------------細節客制-------------------- */
i.fas.fa-bars {
  font-size: 30px;
}

ul.nav-links>li {
  margin-top: 20px;
}

ol.detail li {
  list-style : disc;
  margin-left: 68px;
}

ol.detail li a {
  margin-left: -30px;
  line-height: 30px;
  font-size  : 14px !important;

}

a.btn001,
a.btn002,
a.btn003,
a.btn004,
a.btn005,
a.btn006,
a.btn007,
a.btn008 {
  position: relative;
}

a.btn001:before {
  content             : '';
  position            : absolute;
  top                 : -20%;
  left                : 50%;
  transform           : translate(-50%, -50%);
  /* background       : url('../../images/icon01.png'); */
  background          : url('../../images/info-circle-solid.svg');
  background-repeat   : no-repeat;
  width               : 42px;
  height              : 42px;
  background-size     : contain;
  filter              : opacity(0.6);

}

a.btn002:before {
  content                : '';
  position               : absolute;
  top                    : -28%;
  left                   : 50%;
  transform              : translate(-50%, -50%);
  background             : url('../../images/m-icon02-2.png');
  /* background          : url('../../images/vials-solid.svg'); */
  background-repeat      : no-repeat;
  width                  : 56px;
  height                 : 56px;
  background-size        : contain;
  filter                 : opacity(0.6);
}

a.btn003:before {
  content             : '';
  position            : absolute;
  top                 : -20%;
  left                : 50%;
  transform           : translate(-50%, -50%);
  /* background       : url('../../images/icon03.png'); */
  background          : url('../../images/newspaper-solid.svg');
  background-repeat   : no-repeat;
  width               : 42px;
  height              : 42px;
  background-size     : contain;
  filter              : opacity(0.6);
}

a.btn004:before {
  content             : '';
  position            : absolute;
  top                 : -20%;
  left                : 50%;
  transform           : translate(-50%, -50%);
  /* background       : url('../../images/icon04.png'); */
  background          : url('../../images/wrench-solid.svg');
  background-repeat   : no-repeat;
  width               : 42px;
  height              : 42px;
  background-size     : contain;
  filter              : opacity(0.6);
}

a.btn005:before {
  content             : '';
  position            : absolute;
  top                 : -20%;
  left                : 50%;
  transform           : translate(-50%, -50%);
  /* background       : url('../../images/icon05.png'); */
  background          : url('../../images/envelope-solid.svg');
  background-repeat   : no-repeat;
  width               : 42px;
  height              : 42px;
  background-size     : contain;
  filter              : opacity(0.6);
}

a.btn006:before {
  content             : '';
  position            : absolute;
  top                 : -20%;
  left                : 50%;
  transform           : translate(-50%, -50%);
  /* background       : url('../../images/icon05.png'); */
  background          : url('../../images/globe-solid.svg');
  background-repeat   : no-repeat;
  width               : 42px;
  height              : 42px;
  background-size     : contain;
  filter              : opacity(0.6);
}

a.btn007:before {
  content             : '';
  position            : absolute;
  top                 : -20%;
  left                : 50%;
  transform           : translate(-50%, -50%);
  /* background       : url('../../images/icon05.png'); */
  background          : url('../../images/shopping-cart-solid.svg');
  background-repeat   : no-repeat;
  width               : 42px;
  height              : 42px;
  background-size     : contain;
  filter              : opacity(0.6);
}

a.btn008:before {
  content          : '';
  position         : absolute;
  top              : -20%;
  left             : 50%;
  transform        : translate(-50%, -50%);
  background       : url('../../images/search-solid.svg');
  background-repeat: no-repeat;
  width            : 42px;
  height           : 42px;
  background-size  : contain;
  filter           : opacity(0.6);
}

@media screen and (max-width:1198px) {

  a.btn001:before,
  a.btn002:before,
  a.btn003:before,
  a.btn004:before,
  a.btn005:before,
  a.btn006:before,
  a.btn007:before,
  a.btn008:before {
    display: none;
  }
}



/*=========================SCROLLBAR=========================================*/
@media screen and (max-width:768px) {

  /*Chreome SCROLLBAR 設定*/
  .nav-links::-webkit-scrollbar,
  .mega-box::-webkit-scrollbar,
  .mega-box2::-webkit-scrollbar {
    width: 6px;
  }

  .nav-links::-webkit-scrollbar-button {
    background: #083d65;
    height    : 0
  }


  .mega-box::-webkit-scrollbar-button,
  .mega-box2::-webkit-scrollbar-button {
    background: #04223a;
    height    : 0
  }

  .nav-links::-webkit-scrollbar-track-piece,
  .mega-box::-webkit-scrollbar-track-piece,
  .mega-box2::-webkit-scrollbar-track-piece {
    background   : #CCC;
    /* background: transparent; */
  }

  .nav-links::-webkit-scrollbar-thumb {
    background-color: #0B64AA;
    border-radius   : 2px;
  }

  .mega-box::-webkit-scrollbar-thumb,
  .mega-box2::-webkit-scrollbar-thumb {
    background-color: #04223a;
    border-radius   : 2px;
  }

  /*Firefox SCROLLBAR 設定*/
  .nav-links {
    overflow-y     : scroll;
    scrollbar-color: #CCC #999;
    scrollbar-width: thin;
  }

}

/*=========================SEARCH=========================================*/
.modal-dialog {
  top: 20%;
}

.modal-body {
  overflow: hidden;
}