/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body{
  font-family: "Noto Sans", "Microsoft JhengHei", PingFang, STHeiti, sans-serif, serif;
}


/* reset */


/* div{
  border:2px black dashed;
} */


.navb{
  height:134px;
  display:flex;
  justify-content:center;
}

.navb p:nth-child(2){
  font-size:18px;
}

.nav_left{
  font-size: 24px;
  margin:15px 20px 15px 0px;
  text-align: left;
  color:#FFFFFF;
  font-weight:bold;
}

.nav_right div{
  font-size: 24px;
  margin:15px 20px 15px 20px;
  text-align: center;
  color:#FFFFFF;
  font-weight:bold;
}

.nav_right div:hover{
  color:#A9A9A9;
}

.nav_right a{
  margin-right:10px
}

@media (max-width: 576px) {
  .nav_right a{
    font-size: 21px;
  }
  .nav_right p{
    font-size: 21px;
  }
}

.header{
  background-image:url( '../img/bg1M.svg' );
  background-repeat:no-repeat;
  background-position:0px 0px;
  height:936px;
}

.banner {
  align-items: center;
  margin:60px 0;
}

.product_intro{
  height:77px;
  width:312px;
  font-size: 48px;
  text-align: center;
  color:#334F81;
  font-weight:bold;
}

.product_intro2{
  height:77px;
  width:360px;
  font-size: 48px;
  background-color:white;
  display:flex;
  justify-content:center;
  align-items: center;
  color:#334F81;
  margin-top:180px;
  padding:10px;
  font-weight:bold;
  border-radius:5px;
}

.product_intro6{
  margin-top:15px;
}

@media(max-width: 576px){
  .product_intro2{
    width:90%;
    font-size: 30px;
    margin-top:130px;
  }
  .product_intro p{
    font-size: 36px;
  }
  .product_intro6{
    justify-content:center!important;
  }
}

.contact_card{
  font-size: 24px;
  color:white;
  margin:15px 0;
  font-weight:bold;
}

.cotact_text{
  font-size: 48px;
  color:white;
  margin:100px 0px ;
  font-weight:bold;
}

.banner_title{
  font-size: 48px;
  color:#FFFFFF;
  margin:50px 0;
  font-weight:bold;
}

.banner_content{
  font-size: 24px;
  color:#FFFFFF;
  font-weight:bold;
}

@media (max-width: 768px) {
  .banner_title{
    font-size: 36px;
    margin: 0;
  }

  .contact_card{
    font-size: 20px;
  }
}



@media (max-width: 993px) {
  .cotact_text{
    font-size: 40px;
    margin:45px 0px;
  }
  .nav_right{
    justify-content:flex-start !important;
    margin:15px 0;
  }
  .nav_right div{
    margin:15px 15px 15px 0px;
    color:white;
    font-size:24px;
  }

  .nav_left{
    margin:40px 20px 15px 0px;
  }

  .banner_title{
    margin-top:50px;
  }

}

@media(max-width: 576px){
  .cotact_text{
    font-size:30px;
    margin:80px 0px 50px 0px;
  }

  .banner_title{
    font-size: 24px;
    margin-top: 90px;
  }

  .banner_title p{
    font-size: 20px;
    margin: 0;
  }

  .item div:nth-child(1){
    height:90%;
    width:90%;
  }
  
  
}


.header .row ul p{
  color:black;
}


.contactus{
  background-image:url( '../img/bg2M.svg' );
  background-repeat:no-repeat;
  background-position:0px 0px;
  height:971px;
}

.contactuss{
  align-items: center;
  height:971px;
}

.footer{
  height:100px;
  text-align: center;
  align-items: center;
}



.pic_card{
  height:277px;
  width:435px;
}

.card_text{
  font-size: 36px;
  color:#334F81;
  margin-top:10px;
  font-weight:bold;
}

@media(max-width: 576px){
  .card_text{
    font-size: 30px;
  }
}

.owl-carousel{
  margin-top:50px;
}

@media(max-width: 576px){
  .owl-carousel{
    margin-top:20px;
  }
}

.pic_card img{
  opacity:0.7;
  transition: .5s ease;
}

.pic_card img:hover{
  opacity:1;
  cursor: pointer;
}

#listBtn:hover{
  cursor: pointer;
  
}

#textlistn{
  transition: opacity 1s ease;
  opacity:1;
}


.menu div{
  display:flex;
  justify-content:center;
  align-items: center;
  margin:10px 10px;
  padding:5px;
  background-color:white;
  font-size:18px;
  height: 40px;
  font-weight:bold;
  color:#505050;
  cursor: pointer;
  z-index:9999;
}

.menu div:hover{
  border:#2CA6FF 2px solid;
  color:#505050;
}

.menu{
  position:absolute;
  z-index:9999;
  background-color:white;
  border-radius: 10px 10px 10px 10px;
}

.gotop_bt{
  position:fixed;
  bottom:30px;
  right:45px;
  opacity:0.7;
  z-index:9999;
}

.gotop_bt:hover{
  opacity:1;
  cursor: pointer;
}

@media(max-width: 576px){
  .gotop_bt{
    width:25%;
    bottom:20px;
    right:30px;
  }
}


hr{
  margin:0!important;
  display:none;
}

@media(max-width: 993px){
  hr{
    margin:0!important;
    display:block;
    border: 1px solid white;
  }
}

.tri_top{
  border-right: 9px solid transparent;
  border-left: 9px solid transparent;
  border-top: 15px solid #FFFFFF;
  display:inline-block;
  margin:0px !important;
}