h4 {
            color:red;
        }
            #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1002;
    }

    #popup {
      position: fixed;
      height:80vh;
      overflow: scroll;
      width:60%;
      top: 10%;
      left: 20%;
      background-color: white;
      padding: 20px 40px 40px 40px;
      border-radius: 30px;
      z-index: 1003;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

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

 #popup {
      width:90%;
      left: 5%;
    }

}    

    .close-btn {
      margin-top: 10px;
      background-color: #f44336;
      color: white;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }

    .wd33 {
        width:33%;
    }

    .wd34 {
        width:34%;
    }

    .border-1px-b {
        border:solid 1px black;
    }

.pro-cate-name {
  padding:24px 0px;
}

.navbar-light .navbar-toggler {
  border:unset!important;
}

.topnav {
  background-color: unset!important;
}

.topnav-logo {
  margin:0 auto 0 0;
}

body{
font-family: GenJyuuGothic!important;
}
li{
list-style: none;
}
p{
letter-spacing: 2.5px;
}
span{
letter-spacing: 2.5px;
}
a{
  color: rgba(0, 0, 0, 1.0)!important;
}

.detail_info {
}

.check_box_num {
    /*
    top: 1.4rem;
    right: -0.5rem;
    */
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: red;
    color: white;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    position: absolute;
    margin: -0.4rem 0px 0px 1.05rem;
}

.mg0 {
  margin:0px!important;
}
.pg0 {
  padding:0px!important;
}
.ls-1 {
  letter-spacing: 1px;
}
.ls-2 {
  letter-spacing: 2px;
}
.desk_left_mobile_center {
  text-align: left;
}

.accordion-box{
  display: none;
}
.accor{
  padding: 0px 20%!important;
}
.column ul li a{
color: rgba(180,180,180,1);
}
.logmem{
color: rgba(49,170,248,1);
}
.subtitle{
color: rgba(49,170,248,1);
margin-right: 20px;
}
#top-search.form-control{
  border-radius: 20px!important;
}
#year.form-control {
  border-radius: 20px!important;
}
#month.form-control {
  border-radius: 20px!important;
}
#date.form-control {
  border-radius: 20px!important;
}
.form-control{
appearance: auto;
border-radius: 0!important;
border: 1px solid rgba(49,170,248,1)!important;
}
.sticky-nav {
background-color: rgba(128, 128, 128, 0.5);
position: sticky;
top: 0;
z-index: 10;
margin: 0px;
}
.menu_area {
width: 100%;
}
.navbar {
margin: 0;
}
.navbar-nav {
margin: 0px!important;
display: flex;
justify-content: space-between; /* 將 nav items 保持在左右兩邊 */
}
.nav-item {
text-align: center; /* 將 nav items 居中 */
margin: 10px 0;
}
.nav-link {
color: black;
text-decoration: none;
}
.nav-link:hover {
text-decoration: none!important;
}
a:hover{
text-decoration: none!important;
}
h2{
margin: 0px!important;
}
.text {
transition: all 1s;
}
.text:hover{
text-decoration: none!important;
border-bottom:0px;
color:rgba(49,170,248,1);
letter-spacing:10px;
}
.pro-span:hover{
text-decoration: none;
}
.terms{
color: rgba(49,170,248,1);
}
.accordion-item1{
  background-color:transparent;
  border:0px!important;
}
.accordion-button1{
  width: 100%;
  text-align: left;
  color: black!important;
  background: transparent;
  box-shadow: none;
  border: 0px;
  margin: 0.6rem 0px!important;
  letter-spacing: 2px!important;
}     

/*
.accordion-button1.collapsed{
  margin-bottom: 1.4rem!important;
}
*/    

.accordion-header1{
   /*border-bottom: 1px solid rgba(0,0,0,0.2);*/
   text-align: left;
   margin-bottom: 0px!important;
}

.accordion-button1:after {
  border-bottom: gray 1px solid;
}

.menu_li {
  color:gray!important;
  letter-spacing:1px;
  line-height: 2.2rem;
}

.menu_ul {
  margin:0px 0px 0px 1rem;
}

.footet_ul {
    border-bottom: 1px solid gray;
    padding-bottom: 8px;
}

.dropdown-toggle::after {
  color:rgba(65,172,235,1)!important;
}

.accordion_body1{
  text-align: left;
  padding: 5px 10px;
}
.accordion-button:not(.collapsed){
/*border-color: white;
background-color: white;*/
}
.accordion {
border:unset;
}
.accordion-item {
margin:30px 0px;
border-top: 1px solid rgba(0,0,0,0.1)!important;
}
.collapsed{
color: rgba(49,170,248,1);
}
.accordion-button:not(.collapsed){
/*color: rgba(49,170,248,1);*/
}
.accordion-body{
color: rgba(0,0,0,0.8);
}
hr{
border-color: rgba(49,170,248,1);
width: 800px;
border-width: 2px;
}
table {
border-collapse: collapse;
margin: 0 auto;
width: 70%;
}
.dd {
border-bottom: 1px solid #000;
padding: 8px;
text-align: center;
font-size: 20px;
}
.dd-1 {
color: rgba(49,170,248,1);
border-bottom: 1px solid #000;
padding: 8px;
text-align: center;
font-size: 20px;
}
.breadcrumb_hover:hover {
        letter-spacing: 0.4px;
  color:rgba(49,170,248,1)!important;
}
.cate_button{
padding: 10px 20px;
margin:10px 15px;
font-size: 18px;
background-color: rgba(49,170,248,1)!important;
color: white;
text-align: center;
border-radius: 50rem;
border: 1px solid rgba(49,170,248,1)
}
.t-gua{
width: 200px;
padding: 5px;
font-size: 18px;
background-color: rgba(49,170,248,1)!important;
color: white;
text-align: center;
border-radius: 50rem;
border: 1px solid rgba(49,170,248,1)
}
.t-h2{
color: rgba(49,170,248,1);
text-align: center;
margin-bottom: 20px;
}
.t-h4{
color: rgba(49,170,248,1);
}
.description2 {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
margin: 30px auto;
}
.pic-box{
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.pro-video{
/*width: 560px;
height: 315px;
*/
}
iframe {
width: 95%;
height: 400px;
}
.column-box{
width: 100%;
}
.column{
margin: 0 auto;
}
.about-container{
width: 100%;
padding: 0px 30px;
margin-right: auto;
margin-left: auto;
max-width: 1100px;
}
.n-content{
font-size: 16px;
font-weight: 300;
color: rgba(0, 0, 0, 1.0);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 30px;
padding: 15px;
background-color: white;
margin: 0 auto;
}
.product_content_zone {
  margin:30px auto!important;
}
.input-group-text{
background-color: white!important;
border: 1px solid rgba(49,170,248,1)!important;
}
.par{
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
padding-bottom: 10px;
margin-bottom:10px ;
font-size: 16px;
font-weight: 300;
color: rgba(0, 0, 0, 1.0);
}
.par-n{
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
padding-bottom: 10px;
margin-bottom:10px ;
font-size: 16px;
font-weight: 300;
color: rgba(0, 0, 0, 1.0);
float:left;
word-break: keep-all ;
margin-right: 5px;
border-bottom: 0px;
margin: 0px
}
.par-w{
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
padding-bottom: 10px;
margin-bottom:10px ;
font-size: 16px;
font-weight: 300;
color: rgba(0, 0, 0, 1.0);
float:left;
border-bottom: 0px;
margin: 0px;
}
.par-mark{
color: rgba(49,170,248,1);
}
.product_pic_p {
    text-align:right;
}
.product_content {
    padding-left:5%!important;
    margin: 0 auto 30px auto;
}
.pro-pic{
margin: 0 auto;
text-align: center;
margin-bottom: 20px;
}
.pro-p1{
margin: 0px;
color: rgba(180,180,180,1);
line-height: 1.5;
}
.o_price {
  font-size:14px;
  margin:12px 0px 0px 0px;
  color:rgba(180,180,180,1);
}
.pro-p2{
margin: 0px;
line-height: 2.5;
}
.pro-span{
color: rgba(0, 0, 0, 1.0);
font-weight: 300;
font-family: GenJyuuGothic;
font-size: 18px;
line-height: 2;
}
.pro-box{
margin-bottom: 30px;
outline: none;
}

hr{
    width:100%!important;
}

.narration{
display: flex;
/*justify-content: center;*/
padding:5px 5px 3px 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
width: 45%;
/*width: 300px;*/
}
.price_set {
  font-size:24px;
  width: 100%;
  margin:15px 0px 30px 0px;
  font-weight: bold;
  transition: all 0.5s;
  text-align:right;
  line-height: 2px;
  color:red;
}
.price_set:hover {
  color:orangered;
}

.p-t {
width:30%;  
margin: 0px 30px 2px 0px;
font-weight: bold;
}
.p-c {
margin-bottom: 2px;
color:rgba(0, 0, 0, 0.7);
text-align: center;
width: 70%;
}
.swiper-slide{
width: auto !important;
}
li{
list-style: none;
}
.pro-des {
background-color: rgba(240, 240, 240, 1);
border: 1px solid rgba(240, 240, 240, 0.2);
border-radius: 10px;
padding: 10px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.pro-des h3 {
margin: 0;
}
.square-pic {
object-fit: cover;
border-radius: 10px;
width: 100%;
padding: 10px;
}
.title{
margin: 30px auto;
text-align: center;
}
.c-subtitle{
font-weight: bold;
-webkit-text-stroke: 0.5px black;
}
.b-line{
border-bottom: 1px solid rgba(49,170,248,1);
border-width: 2px;
margin-bottom: 20px;
}
.title_list{
border: 1px solid rgba(0,0,0,0.2);
border-color: #31A9F7;
background-color: #31A9F7;
font-size: 18px;
color: white;
padding: 10px;
}
.pro-cart{
border: 1px solid rgba(0,0,0,0.1);
padding: 25px!important;
}
.per-title{
font-size: 18px;
color: rgba(49,170,248,1);
margin-bottom: 40px;
}
.btn-signout{
padding: 5px;
width: 35%;
border-radius: 20px;
background-color: rgba(49,170,248,1);
border-color: rgba(49,170,248,1);
color: white;
}
.btn-qm {
position: relative;
top: -5px;
width: 25px;
height: 25px;
background-color: #31A9F7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
cursor: pointer;
}
.search-show{
padding: 0px 15px;
text-align: left;
margin: 10px auto;
}
.logo_pic{
  width: 190px;
}
.or-time{
  display: flex;
  margin-right: 10px;
  word-break: keep-all;
  align-items: center;
}
.nav-link.mob-icon1{
  display: none;
}
.nav-link.mob-icon2{
  display: none;
}

.pd_info_zone {
  align-items: center;
}

.pd_delete {
  margin-top:0rem;
}

.m_banner {
  display: none!important;
}

.pc_banner {
  display: block!important;
}

@media screen and (max-width: 1100px) {
h3{
text-align:center;
}
.narration{
margin: 0 auto;
}
.sticky-nav{
display: none;
}
.about-container{
max-width: 850px;
}
}
@media screen and (max-width: 991px){

.m_banner {
  display: block!important;
}

.pc_banner {
  display: none!important;
}

.pd_info_zone {
  align-items: unset;
}

.pd_delete {
  margin-top:0.2rem;
}

.check_box_num {
    top: -3px;
    right: 4px;
    margin: 5px 0px 0px 1rem;
}

.topnav-logo {
  margin:0 auto;
}

.nav-link.mob-icon1{
  display: block;
  right: 35px;
  position: absolute;
}
.nav-link.mob-icon2{
  display: block;
  right: 0px;
  position: absolute;
}
  .accordion-box{
  display: block;
}
.navbar-nav {
flex-direction: column; /* 將 nav items 垂直堆疊 */
align-items: center; /* 在手機版上水平居中 */
display: none!important;
}
.icon{
  width: 25px;
}
.logo_pic{
  width: 160px;
}
}
@media screen and (max-width: 767px) {

.desk_left_mobile_center {
  text-align: center;
}

  .per-info{
    font-size: 14px;
  }
iframe {
width:100%!important;
height:300px;
}
.about-container{
padding: 0px 30px;
}
}