/* basic */


*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

a, *:hover, *:active{-webkit-transition: background 300ms ease-in-out, height 300ms ease-in-out, color 300ms ease-in-out; -moz-transition: background 300ms ease-in-out, height 300ms ease-in-out, color 300ms ease-in-out; -ms-transition: background 300ms ease-in-out, height 300ms ease-in-out, color 300ms ease-in-out; -o-transition: background 300ms ease-in-out, height 300ms ease-in-out, color 300ms ease-in-out; transition: background 300ms ease-in-out, height 300ms ease-in-out, color 300ms ease-in-out; }

a,html,body,h1,h2,h3,h4,ul{
    -webkit-overflow-scrolling : touch !important;
    margin:0;
    padding: 0;
    font-family:"Noto Sans TC" ,"微軟正黑體";
    font-size: 1rem;
    list-style-type:none;
    text-decoration:none;
    
}
body{margin:0;   font-family:"Noto Sans TC" ,"微軟正黑體";font-size:0.75em; position: relative;overflow-x: hidden; }
.fc-daygrid-day-number:after {
    content: none;
  }


.content {
    width: 100%;
    height: auto;
    margin: auto;
  position: absolute;
    overflow-x:hidden;
  z-index: -1;
  }

  .anchor{opacity: 0;display: block; margin-top: -100px; padding-top: 100px;}
.img01{width: 100%;margin: 130px 0 0 0;}
.fc-view-harness{height: 1300px!important;}


.flex { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.a_c01{display: block;}
.clear{clear: both;}


/*麵包屑*/
.breadcrumb{width: 90%;height:auto;max-width: 100%;margin: 16px auto 0;padding: 10px;background-color: #ffffff;}
.breadcrumb__content{width: 1600px;height:auto;max-width: 100%;margin: auto;}
.breadcrumb__content li{display: inline-block;    position:relative; padding-right:30px;;}
.breadcrumb__content li a{color:#555555;position:relative;display: block;font-size:1.0em;}
.breadcrumb__content li a:hover{color: #a0a0a0;}
.breadcrumb__content li a::after{content: "";position: absolute;margin: 18px 0 0 18px;top: -15px;width: 1px;height: 16px;background-color: #4d4d4d;transform:rotate(24deg); -ms-transform:rotate(24deg); -webkit-transform:rotate(24deg);}
.breadcrumb__content li:last-child a::after{content: "";display: none;}
.breadcrumb--bodertop{padding-top:15px; border-top:1px #d4d4d4 solid;}

.breadcrumb-icon{position: relative;}
.breadcrumb-icon::after{content: "";position: absolute;}




/*header-topbox*/

.header-topbox{width: 1600px;max-width: 100%;height: 50px;margin: auto;z-index: 99;justify-content:center;display: flex;position: relative;transition: all 300ms ease-in;}
.header-topbox__contnet{max-width: 100%;height: 30px;line-height: 30px;display: inline-flex;margin: 0 0 0 0;}
.topbox-list{font-size:1.0em;margin: 0 0 0 20px;position:relative;}
.topbox-list a{color: #000000;font-size:1.0em;position:relative;}
.topbox-list::after{content: "";width: 1px;height: 15px;bottom: 0;margin: auto;right: -15px;top: 0;background-color: #000000;position: absolute;}
.topbox-list:last-child::after{content: "";display: none;}


.header-font{color: #ffffff;margin: 0 0 0 0;}
.topbox-list a:hover{color: rgb(30, 128, 255);}
.topbox-list a::before{content:"";position: absolute;width: 5px;height: 5px;background-size: 5px 5px;background-color: #ffffff;border-radius: 15px;left: -15px;bottom: 7px;}
.header-top {color: #000000;margin: 0  0 0 10px;}
.header-login{width: 87px;height: 35px;border: 1px solid #ffffff;text-align: center;margin: 12px 0 0 43px;line-height: 32px;}
.header-login a{width: 87px;height: 35px;;color: #ffffff;text-align: center;;display: block;}
.header-login:hover{background-color: rgba(255, 255, 255, 0.23);}




/*header*/
.header{width: 1500px;max-width: 100%;height: 65px;position: relative;z-index: 999;position: fixed;top: 15px;background-color: rgba(255, 255, 255, 0.856);transition: all 100ms ease-in;margin: auto;right: 0;left: 0;border-radius: 50px;}



.logo{width: 200px;height: auto;display: block;}
.logo a{width: 200px;height: auto;display: block;opacity: 1;font-size:0; overflow:hidden;}

/*header-font*/
.header-font__title{font-size: 1.25em;line-height: 50px;margin: 0 15px 0 35px;}
.font-list{line-height: 50px;font-size:1.5em;margin: 0 10px 0 ;}
.font-list__border{width:20px ;height: 20px;padding: 6px 9px 6px; }
.topbox-list a{padding: 7px;}
.font-list a{color:#121212;border:  1px solid #000000;}


#main{top: -150px;}

#mainLink:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px 0 0 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    font-size: 1.0em;
    left: -150px;
}




/*搜尋*/
.search-box{margin: 0 35px 0 35px ;position: relative;border-radius: 8px;width: 200px;max-width: 100%;}
.search-box input{background-color: rgba(255, 255, 255, 0);color: #004396;border-radius: 8px;}
.search{width: 155px;height: 20px;border: 1px solid #85A39C;color: #004396;padding: 10px;position: relative;}
.search-button{background-color: rgba(255, 255, 255, 0);border: 0;position: absolute;cursor: pointer;top:11px ;right:7px ;color: rgba(255, 255, 255, 0);}
.search-button::after{content:"";position: absolute;background-image: url(../images/index/search.png);width: 33px;height: 33px ;background-size: 33px 33px;margin: -13px 0px 0 -19px;}
.search-box input::placeholder{color: #ffffff;}


/*footer-icon*/
.footer-icon{padding: 7px;margin: 0 50px 0 0;}
.footer-icon img{width: 50px;height: 50px;display:block;margin: 0 15px;display: inline-block;}







.header-logo{width:200px;height: auto;z-index: 9;margin: 0 0 0 18px;}
.header-logo img{width: 50px;height: auto;display: block;}
.mobile-logo{display: none;}

.header-side{width: 90px;height: auto;background-color: #ffffff;position:fixed;right: 0px;top: 30%;text-align: center;margin: auto;padding: 15px 0;border: 1px solid #000000;border-radius: 15px 0 0 15px ;border-right: 0px;}
.header-side a img{width: 50px;height: 50px;padding: 2px;display: block;margin: auto;}

.logo-h1{font-size: 1.2em;color: rgba(255, 255, 255, 0);opacity: 0;position: absolute;top: 0;}



/*header__nav*/
.header__nav{width: 100%;height:65px;position: relative;align-items: center;justify-content: space-around;z-index: 999;border-radius: 50px;}
.nav{width: auto;height: 65px;line-height: 65px;text-align:center;margin: auto}
.nav-list, .nav-list a{font-size: 1.00em;color: #525252;display: inline-block;margin: 0 25px;  font-family: "Noto Sans TC", sans-serif;}
.nav-list{height: 65px;position: relative;}
.nav-list::after{content: "";position: absolute;width: 2px;height: 10px;background-color: #c3bba5;margin: auto;top: 0;bottom: 0;left: -23px;}
.nav-list:nth-child(2)::after{content: "";position: absolute;height: 0;}




.nav-account{margin:  0 0 0 30px ;}
.nav-account a{color: #ffffff;font-size: 1.5em;}
.header__nav-box{width: 100%;max-width: 100%;height: 50px;margin: auto;}
.menuextend img{width: 12px;height: 10px;margin: 0px 0 3px 14px;}
/*.menuextend span::after{content: "";position:absolute;width: 17px;height: 12px;background-image:url(../images/index/arrow.png);background-size: 17px 12px;background-repeat: no-repeat;display: block;right: 46px;top: 46px;}

/*menu延伸*/
.menuextend{position: relative;}
.nav-list__menu{width: 150px;position: absolute;top: 122%; left: 50%; transform: translate(-50%, 0);transition: all 200ms ease-in;margin: -15px 0 0 0;border-radius: 0px;z-index: 9; display: none; background-color: #153777;box-shadow: 1px 1px 10px rgb(0 0 0 / 10%);border-radius: 6px;}
.nav-list__menu01{right: -138%;top: 10%;width: 140%;}

.nav-list__menu02{width: 100%;left: 100%;top: 8%;z-index: 9999;border-radius: 6px;;position: absolute;display: none;transition: none;margin: 0; box-shadow:0px 1px 0px rgb(0 0 0 / 10%);background-color:rgb(255, 255, 255);border-radius: 0px;height: auto;}
.nav-list__menu02 li a{color: #000;}


.nav-list__menu02 li a:hover{background-color: #c9dee0;}


.menuextend02{position: relative;}
.nav-list__menu--width{width: 58%;right: 22%;}
.menuextend:hover > .nav-list__menu{ display: block;}
.menuextend02:hover > .nav-list__menu02{ display: block;}


.nav-menulist{width: 100%;height: 100%;border-bottom: 1px solid #dbdbdb;}
.nav-menulist a{width: 100%;min-height: 50px;color: #ffffff;font-size: 1.1em!important;display: block;margin: 0;text-align: center;line-height: normal;display: flex;justify-content: center;align-items: center;}

.nav-menulist a:hover{background-color: #0297a5;color: #fff;border-radius: 5px;}
.nav-list__menu .nav-menulist a:hover{color: #fff;}
.molile-icon,.molile-icon01 {display: none;}
.new-detail-link-text span,.nav-menulist span{width: 5px;height: 5px;background-color: #83bb8a;display: inline-flex;margin: 0 4px 4px 0px;}
.new-detail-link-text span{margin: 0 4px 3px 0px;}

.nav-list__menu .nav-menulist:nth-child(1){border-radius:5px 5px 0 0 ;}
.nav-list__menu .nav-menulist:last-child{border-radius:0 0  5px 5px ;}

.nav-menulist:last-child{border: 0;}

.molile-icon02{
  position: absolute;
  width: 100%;
  height: 53px;
  background: url(../images/svg/sort-up02-01.svg);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 999;
  background-position: center;
  background-position: 87% 48%;
  top: 0;
  display: block;
  margin: 0;
  padding: 0;
  right: 0;
  }


.menuextend02:focus-within .nav-list__menu02 {
    display: block;
}





/*banner*/
.banner{width: 100%;height: auto;margin: 0 auto 0;display: block;position: relative;}
.banner::after{content: "";display: block;position: absolute;width: 100%;bottom: 0;height: 116px;z-index: 9;background: url("../images/banner-deco.png") top center no-repeat;background-size: 100% 100%;}

.slick-dots{top:90%;left: 0%;z-index: 99;}
.banner ul li img{width:1920px;max-width: 100%;min-width: 100%;height: 650px;display: block;object-fit:cover;}

.banner ul li{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;}


.banner-text{position: absolute;max-width: 1400px;top: 50px;right: 0;bottom: 0;left: 0;margin: auto;}




/*banner-prev*/
.banner-prev, .banner-next{width: 50px;height: 50px;background-image: url(../images/svg/arrow.svg);background-size:50px 50px;background-repeat: no-repeat;cursor: pointer;position: absolute;top: 45%;right: 2%; opacity: 0.5;transition: all 100ms ease-in }
.banner-prev{left: 2%;z-index: 99;-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg); -o-transform:rotate(180deg);-ms-transform:rotate(180deg); transform:rotate(180deg);}
.autoplay:hover > .banner-prev{opacity: 1;}
.autoplay:hover > .banner-next{opacity: 1;}


/*map-prev*/

.map-prev, .map-next{width: 50px;height: 50px;background-image: url(../images/svg/arrow.svg);background-size:50px 50px;background-repeat: no-repeat;cursor: pointer;position: absolute;top: 45%;right: 2%; opacity: 0.5;transition: all 100ms ease-in }
.map-prev{left: 3%;z-index: 99;-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg); -o-transform:rotate(180deg);-ms-transform:rotate(180deg); transform:rotate(180deg);}

.index-councilor .slick-dots{top:100%;left: 0%;z-index: 99;}



/*遮罩*/
.best-mask{width: 100%;height:  100%;position: absolute;z-index: 9;top: 0;transition: all .20s ease-out;right: 0;margin: auto;bottom: 0;left: 0;font-size: 0;}
.best-mask span{display: none;}






/*footer*/
.footer{width: 100%;height: auto;position: relative;z-index: 15;margin: 0 0 0 0;}
/*.footer::after{content: "";width: 100%;height: 39px;background-image: url(../images/index05_02.png);background-size: contain;position: absolute;background-repeat: no-repeat;top: -35px;left:  0;;right: 0;margin: auto;z-index: -1;background-position: bottom;}*/
.footer-nav{margin: 0 auto 25px ;display: flex;justify-content: center;}
.footer-nav__list{display: inline-block;margin: 0px 60px 15px 0;position: relative;}
.footer-nav__list a{font-size:1.0em;color: #ffffff;position: relative;}
.footer-content{justify-content: center;margin: 20px auto 25px auto;width: 1200px;max-width: 100%;align-items: center;}
.footer-content__list{width: calc(100%/2 - 200px);color: #ffffff;letter-spacing: 5px;}
.footer-content-text{font-size: 1.5em;padding: 0;margin: 5px auto;}
.footer-content__list--img{width: calc(100%/2 - 450px);display: flex;justify-content: space-between;align-items: center;}
.footer-content-title{color: #ffffff;font-size: 1.5em;}
.footer-reserved-content{width: 100%;min-height: 55px;margin: auto;background-color: #2a5b41;display: flex;justify-content: center;align-items: center}
.reserved-text{text-align: center;color: #ffffff;font-size: 1.4em;}
.footer-li a{color: #ffffff;font-size: 1.2em;}
.footer-h1{font-size: 1.3em;font-weight: 400;}
.footer-box-style{width: 100%;max-width: 100%;margin: auto;padding: 10px 0 60px;background-color: #067aad;}
.footer-copyright{text-align: center;color: #ffffff;font-size: 1.4em;padding: 0;margin: 15px 0;}
.footer-box {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 30px 0 10px;
  background-color: #6e888b;
  overflow: hidden;
  transition:  all 0.3s ease;
}

.footer-box.collapsed {
  max-height: 0;
  padding: 0; /* Remove padding when collapsed */
}



.footer-nav-toggle{
  width: 120px;
  height: 40px;
  display: inline-block;
  text-indent: -9999px;
  position: absolute;
  left: 50%;
  top: -40px;
  transform: translateX(-50%);
  background: url("../images/FOOTER.png") ;
  transition: 0.3s;
  background-size: 120px 40px;
  border: 0;
  cursor: pointer;
  
}



/*頁碼*/
/*pagination*/

.pagination__box { padding: 0; margin: 0;margin: auto;text-align: center;display: inline-block;}
.pagination__box li{display: inline-block;vertical-align: top;}
.pagination__box li a {width: 32px;height: 32px;;display: inline-block;line-height: 32px;text-decoration: none; transition: background .3s;color: #485a80;font-size: 1.1em;margin: 0 8px 10px ;border-radius: 5px;vertical-align:bottom;}
.pagination__box li a:hover{background-color: #087cc9;color: #ffffff;}
.pagination__box strong{font-size: 0;}
.pagination__pagea-active {
    width: 32px;
    height: 32px;
    background-color: #485a80;
    display: inline-block;
    color: #ffffff !important;
    line-height: 32px;
    text-align: center; /* 確保數字居中 */
    text-decoration: none;
    transition: background .3s;
    font-size: 1em;
    margin: 0 8px 10px;
    border-radius: 5px;
    vertical-align: bottom;
    cursor: default; /* 讓當前頁滑鼠不要顯示手指 */
}

/* 確保 li 裡面的圖示垂直對齊 */
.pagination__box li a span {
    vertical-align: middle;
}

/*上一頁按鈕*/
.return-buttom{width: 175px;height: 60px;margin: 40px;;text-align: center;color:#000000;background-color: #242424;}
.return-buttom a{width: 100%;height: 100%;display: block ;position: relative;color:#ffffff;line-height: 60px;font-size: 1.6em;}
.return-buttom:hover{background-color: #585858;color: #ffffff;}
.return-buttom a:hover{color: #ffffff;}
.bottm-box{margin: auto;display: flex;justify-content: center;margin: auto;}



/*footer-top*/
.footer-top{width:50px;height: 50px;cursor: pointer;background-color: #465752;border-radius: 150px;border: 0;position: absolute;right: 2%;bottom: 10%;position: fixed;}
.footer-top_font{font-size:  1.2em;color: #ffffff;text-align: center;position: relative;margin: 20px 0 0 0;}
.footer-top_font::after{content:"";position: absolute;border-color:  transparent transparent #ffffff transparent;border-style: solid solid solid solid; border-width: 10px 7px ;margin: -22px 0 0 -22px;}


/*inner*/
.inner-banner{width: 100%;height: 0;padding-bottom:19.2% ;background-image:url(../images/inner/a02.png);background-repeat: no-repeat;position: relative;background-size:contain;position: relative;margin: 100px 0 0 0;background: #0d346e;background-repeat: no-repeat;background-size:contain;width: 100%;}
.inner-banner__box{font-size: 5.7em;color: #ffffff;padding: 0 0 0 142px;position: absolute;;background-color: #043d66d2;margin: auto;right:  0px;bottom: -30px;min-width: 40%;height: 240px;line-height: 240px;text-align: center;font-weight: 600;clip-path: polygon(36% 0, 100% 0, 100% 87%, 0 87%);}

.index-analyze__list{margin: 0 auto;}





    .hero {
      max-width: 750px;
      margin:auto;
      text-align: center;
      padding: 0 24px;
      position: absolute;
      right: 0;
      bottom: -75px;
      left: 0;
   z-index: 10;
    }





    
.hero__title {
  font-size: 45px;
  font-weight: 400;
  color: #474d4e;
  text-shadow: 1px 1px 4px rgba(255,255,255,0.7);
  line-height: 1.2;
}

.hero__subtitle {
  font-size: 20px;
  font-weight: 400;
  color: #494949;
  text-shadow: 1px 1px 3px rgba(255,255,255,0.6);
  margin-bottom: 36px;
}


    .hero__search {
      display: grid;
      gap: 16px;
      background: #fff;
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .hero__search-select {
      padding: 12px 14px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 8px;
      transition: border-color 0.3s, box-shadow 0.3s;
      width: 100%;
      color: #8f8f8f;
    }

    .hero__search-select:focus {
      border-color: #6B8E8D;
      box-shadow: 0 0 6px rgba(107,142,141,0.3);
      outline: none;
    }

    .hero__search-button {
      padding: 14px;
      font-size: 14px;
      border: none;
      border-radius: 8px;
      background: linear-gradient(90deg, #6B8E8D, #85A39C);
      color: #fff;
      font-weight: 500;
      cursor: pointer;
      transition: opacity 0.3s, transform 0.2s;
    }

    .hero__search-button:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }



.hero__field {
  display: block;

  gap: 6px;
}

.hero__label {
   display: block;
  font-size: 16px;
  font-weight: 400;
  color: #555;
  letter-spacing: 0.06em; 
  text-align: left;
  margin: 6px 14px;
}


.recommend-box{width: 1600px;max-width: 100%;height: auto;margin: 120px auto;display: grid;}

.index-heading {
  position: relative;
  padding-left: 20px;
  margin: 30px auto;

}
.index-heading::after{content: "";width: 15px;height: 70px;;position: absolute;background-image:url(../images/svg/TITLE.svg);background-repeat: no-repeat;background-size:contain;left: 0;top: 5px;bottom: 0;margin: auto;}



.index-heading__title {
  font-size: 1.8rem;
  color: #424242;
  margin: 0 0 5px 0;
  font-weight: 400;
}

.index-heading__subtitle {
  font-size: 0.95rem;
  color: #787878;
  margin: 0;
  text-transform:uppercase;
}

.recommend-box__content{width: 98%;height: auto;margin: auto;gap:45px;justify-content: center;display: grid; grid-template-columns: repeat(3, 1fr);; gap:20px;  justify-content:center;}
.clinic-card-box{margin: 8px 0 0 16px;}

   /* 第一種顏色 */
.clinic-card {
  width:100%;
  background:#f8fcfa;
  border-radius:14px;
  border:1px solid #ffffff;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:0.2s;
  box-shadow:1px 1px 4px #dadadacb;
  position:relative;
}



.recommend-box__content02{width: 100%;height: auto;margin: auto;gap:45px;justify-content: center;display: grid; grid-template-columns: repeat(3, 1fr);; gap:20px;  justify-content:center;}



.clinic-card::after{content: "";width: 6px;height: 98px;position: absolute;background-image:url(../images/svg/TITLE502-01.svg);background-repeat: no-repeat;background-size:contain;left: 12px;top: 18px;margin: auto;}






.clinic-card:hover{
  background:#f8fcfb;
}



    .clinic-name {
      font-size: 17px;
      font-weight: 400;
      margin-bottom: 6px;
      display: flex;
      justify-content: space-between;
      color: #4f5350;
    }

 .clinic-name--style{ font-size: 1.0vw;}

    .clinic-area {
      font-size: 15px;
      color: #777;
      margin-bottom: 4px;
    }

    /* Google 評論 */
    .rating {
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #444;
      margin-bottom: 5px;
      margin-left: 5px;
    }
 .rating strong{font-size: 13px;}
    .stars {
      color: #f4b400; /* Google 星星色 */
      margin-right: 6px;
      font-size: 14px;
      letter-spacing: 1px;
    }

    .review-count {
      color: #777;
      margin-left:2px;
      font-size: 14px;
    }

    /* 診所特色 */
    .clinic-desc {
      font-size: 14px;
      color: #555;
      margin-bottom: 20px;
      border-bottom: 1px solid #e2e2e2;
      border-top: 1px solid #e2e2e2;
      padding: 15px 0;
    }

    /* 資訊列 */
    .clinic-info {
      font-size: 0.7vw;
      color: #666;
      margin-bottom: 5px;
      
    }

    .clinic-info p {
      margin: 2px 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
    }

    /* CTA */
    .clinic-link {
      width: 80px;
      height: auto;
      font-size: 13px;
      color: #333;
      padding: 2px 6px;
      text-align: center;
      background-color: #ffffff;
      margin: 0  0 -20px auto;
      color: #5b885f;
      border-radius: 15px;
      border: 1px solid #7d9a96;
      
    }

    .clinic-link:hover {
    background-color: #effffc;
    }

.clinic-card__img{width: 100%;height: auto;text-align: center;}
.clinic-card__img img{width:320px;max-width: 100%;height: 220px;object-fit: cover;border-radius: 15px;}


.education-box{width:100%;max-width: 100%;height: auto;margin: 120px auto 0;display: grid;justify-content: center;background-color: #e9f3f2;padding: 50px 0;}
.education-card{height: 480px;width:auto;max-width: 480px; min-width: 220px; border-radius: 15px;  flex-grow:1;background-image:url(../images/index03_03.png); background-repeat: no-repeat; background-size: cover; background-position: center;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;}


.education-card h2{font-size: 28px;font-weight: 400;color: #ffffff;}
.education-card p{font-size: 16px;font-weight: 300;color: #ffffff;}
.education-content{width: 95%;max-width: 100%;height: auto;margin: auto; }
.education-article{width:50%;height: auto;margin: auto;gap: 30px;justify-content: end;flex-grow:2;}
.education-article__list{width:calc(100%/2 - 50px);height: auto;padding: 20px;gap: 22px;align-items: center;background-color: #ffffff;border-radius: 15px; display: flex;}
.education-article__img{width: 180px;height: 150px;object-fit:cover;max-width: 100%;border-radius: 10px;}
.education-article__date{font-size: 18px;color: #848080;margin: 6px 0;display: block;}
.education-article__title{color: #424242;font-size: 20px;font-weight: 400;}
.education-article__text{color: #848080;font-size: 16px;padding: 0;margin: 12px 0;}
.education-article__btn{background-color: #7d9a96;padding: 5px 14px;width: 140px;display: block;text-align: center;color: #ffffff;border-radius: 20px;margin: 0 0 0 auto;}
.business-box{width:100%;max-width: 100%;height: auto;margin: 120px auto 0;display: grid;justify-content: center;}
.education-article__content {flex: 1; width: auto; }
.education-article__list_img {flex: 0 0 35%;}

.step-flow {
 
justify-content: center;
  gap: 40px;
  max-width: 1600px;
  margin: 80px auto;
}

.step-item {
  width: calc(100%/4 - 50px);
  max-width: 250px;
  height: 250px;
  position: relative;
  border: 1px dashed #e0e0e0;
  border-radius: 4px;
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
}

.step-badge {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: #8ecac0;
  color: #fff;
  border-radius: 50%;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  top: -20px;
  left: -10px;
  font-size: 24px;
}


.step-title {
  font-size: 25px;
  font-weight: 400;
  color: #424242;
  text-align: center;
}

.step-text{font-size: 18px;color: #a09a9a;text-align: center;margin: 6px 0 0;}




/*team*/
.banner-inner{width: 100%;height: 40vh;margin: 0 auto 0;display: block;position: relative;background-image:url(../images/01_01.jpg);background-repeat: no-repeat;background-size:cover;}
.banner-inner-box{position: absolute;margin: auto;  top: 55%;  left: 50%; transform: translate(-50%, -50%);text-align: center;width: 100%;}

.inner-title{font-size: 48px;font-weight: 200;color: #353333;margin: 0 0 20px;}
.inner-text{font-size: 20px;font-weight: 300;color: #655d5d;}

.inner-content{width: 1600px;height: auto;margin:40px auto;max-width: 100%;justify-content: center;align-items: flex-start;padding: 0 15px;}


   :root {
            --jp-gray-dark: #333333;
            --jp-gray-med: #666666;
            --jp-gray-light: #f5f5f5;
            --jp-border: #e0e0e0;
            --jp-accent: #5a7d9a; /* 沉穩的日系藍灰色 */
        }


  :root {
  --jp-bg: #ffffff;
  --jp-text-main: #576357;
  --jp-text-sub: #a0a0a0;
  --jp-border-light: #d8e2e0;
  --jp-accent-color: #7d8471; /* 日系草本木色 */
  --jp-hover-bg: #fbfbfb;
}

.jp-filter-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--jp-border-light);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.filter-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
}

.filter-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

/* 垂直線裝飾 */
.filter-section:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--jp-border-light);
}

/* 標題美化 */
.section-label {
  display: flex;
  flex-direction: column;
}

.label-en {
  font-size: 8px;
  color: var(--jp-text-sub);
  transform: scale(0.85);
  transform-origin: left;
}

/* 城市頁籤切換 */
.city-tabs {
  display: flex;
  gap: 4px;
}

.tab-btn {
  background: none;
  border: 1px solid transparent;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--jp-text-sub);
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 2px;
}

.tab-btn.active {
  color: var(--jp-text-main);
  border-color: var(--jp-text-main);
  background: var(--jp-hover-bg);
}

/* 水平滾動標籤 */
.horizontal-scroll {
  display: flex;
  gap: 8px;
  max-width: 250px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.horizontal-scroll::-webkit-scrollbar { height: 2px; }
.horizontal-scroll::-webkit-scrollbar-thumb { background: #eee; }

/* 勾選標籤 (Checkbox 改造成 Tag) */
.check-tag {
  cursor: pointer;
  white-space: nowrap;
}

.check-tag input { display: none; }

.tag-text {
  font-size: 13px;
  padding: 4px 10px;
  border: 1px solid var(--jp-border-light);
  color: var(--jp-text-sub);
  transition: all 0.3s;
  display: inline-block;
}

.check-tag input:checked + .tag-text {
  background: var(--jp-accent-color);
  color: #fff;
  border-color: var(--jp-accent-color);
}

/* 搜尋框美化 */
.search-wrapper {
  display: flex;
  align-items: center;
  
  padding: 2px 0;
}

.minimal-input {
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  padding: 4px;
  width: 140px;
}

.minimal-btn {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--jp-text-main);
  font-size: 13px;
  font-weight: 500;
  transition: opacity 0.2s;
}

.minimal-btn:hover {
  opacity: 0.6;
}


.jp-filter-nav {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--jp-border-light);
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 101;
}

.filter-container {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0; /* 透過 section 的 padding/width 控制間距 */
}

/* 拉大篩選區塊寬度 */
.filter-section {
  position: relative;
  min-width: 220px; /* 拉開每個區塊的寬度 */
  flex-shrink: 0;
  padding: 0 30px;
}

/* 垂直裝飾線 */
.filter-section:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: var(--jp-border-light);
}

.section-label { cursor: pointer; display: flex; flex-direction: column; }
.label-zh { font-size: 15px; font-weight: 400; color: var(--jp-text-main); letter-spacing: 1px; }
.label-zh small {
  display: inline-block;
  font-size: 8px;
  color: #c0ccc9;
  margin-left: 6px;
  /* 修改這裡：負值越大越往上 */
  transform: translateY(-3px); 
  transition: transform 0.3s ease;
}

/* 展開時也要維持向上的偏移，再加上旋轉 */
.dropdown-group.is-open .label-zh small {
  transform: translateY(-1px) rotate(180deg);
}
.label-en { font-size: 10px; color: var(--jp-text-sub); }
.selected-preview { font-size: 13px; color: var(--jp-accent-color); margin-top: 5px; font-weight: 500; }

/* 搜尋區塊容器優化 */
.section-search {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-left: 10px;
}

.search-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 移除原本 wrapper 的下劃線，改由按鈕和輸入框自己展現層次 */
  width: 100%;
  max-width: 500px; 
}

/* 輸入框優化：加上淡淡的下劃線 */
.minimal-input {
  flex-grow: 1;
  border: none;
  border-bottom: 1.5px solid var(--jp-border-light);
  background: transparent;
  padding: 8px 0;
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s ease;
}

.minimal-input:focus {
  border-bottom-color: var(--jp-text-main);
}

/* 實體確認按鈕樣式 */
.confirm-search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--jp-text-main); /* 深灰色/黑色背景 */
  color: #ffffff; /* 白色文字 */
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  
}

.confirm-search-btn:hover {
  background-color: var(--jp-accent-color); /* 懸停時變草本木色 */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.confirm-search-btn:active {
  transform: translateY(0);
}

.confirm-search-btn svg {
  flex-shrink: 0;
}
/* 彈窗面板樣式 */
.filter-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 30px;
  width: 320px;
  background: #fff;
  border: 1px solid var(--jp-border-light);
  box-shadow: 0 15px 45px rgba(0,0,0,0.07);
  padding: 10px;
  margin-top: 5px;
  z-index: 1001;
}
.panel-wide { width: 520px; }

.dropdown-group.is-open .filter-panel { 
  display: block; 
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 網格排列 */
.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.panel-grid{
  display:grid;
  gap:10px;
}

.cols-2{
  grid-template-columns:repeat(3,1fr);
}

.cols-4{
  grid-template-columns:repeat(4,1fr);
}
/* --- 徹底隱藏圓圈，實現框框點擊變色 --- */
.btn-selector { cursor: pointer; display: block; }
.btn-selector input { display: none !important; }

.btn-text {
  display: block;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--jp-text-main);
  background: #fff;
  border: 1px solid #eeeeee;
  text-align: center;
  transition: all 0.2s;
}

.btn-selector:hover .btn-text {
  background: #fcfcfc;
  border-color: var(--jp-text-main);
}

/* 點擊後的狀態：框框填滿草本色 */
.btn-selector input:checked + .btn-text {
  background-color: var(--jp-accent-color);
  color: #ffffff;
  border-color: var(--jp-accent-color);
}


/*inner-seach*/
.inner-main{width: 100%;height: auto;margin: 0  auto;}
.clinic-card-inner{width: 100%;
      background: #fff;
      border-radius: 14px;
      border: 1px solid #e5e5e5;
      padding: 26px;
      transition: 0.2s;
      display: flex;
      gap:36px;
      margin: 0 0 40px 0;

}
.clinic-card-box-inner{width:100%;height: auto;}
.clinic-card__img-inner{width: auto;}
.rating-inner{margin: 20px 0 0 0;}


.card-btn-content{display: inline-flex;gap: 16px;margin:  0 0 6px;}
.clinic-btn{padding: 2px 22px ;background-color:#8dc8cf ;text-align: center;color: #ffffff;border-radius: 50px;font-size: 15px;}


.clinic-area--style{font-weight: 500;}



.clinic-link-inner{     width: 150px;
      height: auto;
      font-size: 14px;
      color: #333;
      padding: 6px 10px;
      text-align: center;
      background-color: #7d9a96;
      margin: 0 auto -27px;
      color: #ffffff;
      border-radius: 15px;
      display: block;
      margin: 0 0 0px auto;}



.clinic-info--style{margin: 20px 0 0 0;}
.search-box__inner{background-color: #ffffff;color: #cacaca;text-align: center;}
.search-box__inner .search{border: 1px solid rgb(218, 218, 218);background-color: #ffffff;width: 230px;max-width: 100%;height: 36px;margin: 30px 5px 20px;color: #cacaca;}

.search-box__inner .search::placeholder {
  color: #999;}

/*頁碼*/
/*pagination*/
.pagination{width: calc(100%/1 - 460px); width: 100%;margin: auto;text-align: center;padding: 50px 0 20px 0;}
.pagination__box { padding: 0; margin: 0;margin: auto;text-align: center;display: inline-block;}
.pagination__box li{display: inline-block;vertical-align: top;}
.pagination__box li a {width: 32px;height: 32px;;background-color: #6e888b;display: inline-block;line-height: 32px;text-decoration: none; transition: background .3s;color: #ffffff;font-size: 1em;margin: 0 8px 10px ;border-radius: 5px;vertical-align:bottom;}
.pagination__box li a:hover{background-color: #93acaf;}
.pagination__box li a.active { background-color: #598085;}
.pagination__box strong{font-size: 0;}
.icon-sort-up{transform:rotate(-90deg);font-size: 1.4em;margin: 5px 0px 0px 5px;display: block;}
.icon-sort-up--right{transform:rotate(90deg);margin: 5px 0px 0px -7px;}
.icon-backward--right{transform:rotate(180deg);display: block;margin: 9px 02px 0px 0px;}


.search-button__inner{width: 230px;max-width: 100%;margin: auto;text-align: center;padding: 10px 15px;margin: 0 0 15px;background-color: #6e888b;color: #ffffff;border-radius: 50px;border: 1px solid #6e888b;cursor: pointer;}
.clinic-card-detail{border: 0;padding: 0;}
.rating-detail{margin: 0 0 0 auto;}
.card-btn-content--style{display: flex;margin: 0 0 20px ;}
.detail-list{width: 100%;height: auto;font-size: 24px;color: #848080;margin: 10px 0;}
.detail-list__title{font-size: 24px;color: #848080;font-weight: 300;position: relative;margin: 0  0 30px 15px;}
.detail-list__title::after{content: "";width: 5px;height: 20px;background-color:#7d9a96 ;left: -15px;bottom: 0;top: 4px;margin: auto;position: absolute;}
.clinic-card-box--detail{margin: 0;}
.detail-list--style{margin: 100px 0 0;}
.detail-list img{max-width: 100%;}
.search-detail-style{width: 1400px;margin: 50px auto;}




/*門診*/

/* 外框卡片 */
.clinic-hours-wrapper {
  max-width: 1400px;
  margin: 20px auto;
  padding: 20px;
  background: #ffffff;
 
}

/* 標題 */
.clinic-title {
  text-align: center;
  font-size: 26px;
  letter-spacing: 6px;
  color: #1f4d3a; /* 深綠 */
  margin-bottom: 35px;
}


/* 表格 */
.clinic-hours {
  width: auto;
  border-collapse: collapse;
  text-align: center;
  min-width: 100%;
}

/* 表頭 */
.clinic-hours thead th {
  background: #e6f2ec; /* 淺綠 */
  color: #1f4d3a;
  font-weight: 600;
  padding: 16px 12px;
  border-bottom: 2px solid #cfe3d9;
}

/* 表格內容 */
.clinic-hours th,
.clinic-hours td {
  padding: 16px 12px;
  border-bottom: 1px solid #e3eee8;
  font-size: 15px;
}

/* 時段欄 */
.clinic-hours td:first-child {
  background: #f4faf7;
  font-weight: 500;
  color: #2f5e49;
}

/* 看診 ● */
.clinic-hours td:not(:first-child) {
  color: #1f4d3a;
  font-weight: 600;
}

/* Hover 效果 */
.clinic-hours tbody tr:hover {
  background: #f0f7f3;
  transition: 0.3s ease;
}

/* 備註 */
.notice {
  margin-top: 20px;
  text-align: right;
  font-size: 13px;
  color: #5f7f72;
}

@media (max-width: 768px) {
  .clinic-hours {
    min-width: auto;
  }

  .clinic-hours th,
  .clinic-hours td {
    padding: 6px 4px;
    font-size: 11px;
  }
}


 .sidebar {
            width: 320px;
            background: #ffffff;
            border: 1px solid var(--jp-border);
            padding: 0;
            max-width: 100%;
        }

        /* 側邊欄頂部標題 */
        .sidebar-header {
            padding: 25px 20px;
            border-bottom: 1px solid var(--jp-border);
            background-color: #fff;
        }

        .main-title {
            font-size: 18px;
            font-weight: 400;
            letter-spacing: 0.15em;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .reset-btn {
            font-size: 12px;
            color: #aaa;
            text-decoration: none;
            font-weight: 300;
            border-bottom: 1px solid #ddd;
        }

        /* 篩選群組 */
        .filter-group {
            padding: 25px 20px;
            border-bottom: 1px solid var(--jp-gray-light);
        }

        .filter-group:last-child { border-bottom: none; }

        .group-header {
            display: flex;
            align-items: center;
            margin-bottom: 18px;
        }

        .group-header h4 {
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0.05em;
        }

        .en-sub {
            font-size: 9px;
            color: #bbb;
            margin-left: 10px;
            margin-top: 2px;
            text-transform: uppercase;
        }



.detail-list iframe{max-width: 100%;}
.sidebar--style{border: 0;}
.category-selector{display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 12px;margin-bottom: 10px;}
.category-tab{border: 1px solid var(--jp-border);padding: 2px 4px;border-radius:5px;color:#8e8e8e ;text-align: center;}
.filter-group--style{border: 1px solid #ececec;border-radius: 15px;}
.article-selector{display: block;}
.article-tab{display: block;color: #8e8e8e;font-size: 15px;position: relative;margin: 26px 0 26px 15px;}
.article-tab::after{content: "";position: absolute;width: 4px;height: 4px;border-radius: 6px;background-color: #8e8e8e;left: -15px;top: 1px;bottom: 0;margin: auto;}
.article-tab::before{content: "";position: absolute;width: 100%;height: 1px;background-color: #e6e6e6;left: -18px;right: 0;bottom: -13px;margin: auto;}
.article-tab:hover{color: #b4b4b4;}
.group-header-style{border-bottom: 1px solid var(--jp-border);}
.filter-group--style:last-child{border-bottom:1px solid #ececec;}
.sidebar-header--style{border: 0;}
.dental-health__img{width: 320px;max-width: 100%;height: auto;}
.education-article__list__health{width: calc(100%/3 - 24px);border: 1px solid #dddddd;}
.inner-main--health{gap: 30px;width: 72%;height: auto;margin: 0  auto;}
.category-span{font-size: 14px;color: #8e8e8e;border: 1px solid #c4c4c4;padding: 4px 10px;display: flex;border-radius: 4px;}
.category-span a{color: #8e8e8e;}


.article-title{font-size: 34px;color: #424242;font-weight: 400;position: relative;margin:  0 0 0 15px;}
.article-title::after{content: "";width: 5px;height: 28px;background-color:#7d9a96 ;left: -15px;bottom: 0;top: 6px;margin: auto;position: absolute;}
.article-sub{align-items: center;gap: 25px;margin: 14px 0;}
.article-date{color: #848080;font-size: 16px;}

.article-content p{font-size: 15px;color: #848080;line-height: 1.8;}
.article-content img{width: 550px;max-width: 100%;height: auto;}
.contact-box{width: 50%;height: auto;text-align: center;}
.contact-box__title{font-size: 38px;color: #868686;font-weight: 300;}
.contact-box__text{font-size: 16px;color: #868686;font-weight: 350;}
.contact-box img{width: 200px;height: auto;max-width: 100%;}

.hero__label--style{margin: 6px 3px;}
.contact-form{width: 45%;height: auto;}
.hero__search--style{box-shadow:0 0 0 rgba(0,0,0,0.08);padding: 0;}

.select-wrapper{position: relative;}

.select-wrapper::before {
  content: '';
  position: absolute;

  right:30px;
  margin: auto;

  bottom: -3px;
  transform: translateY(-50%);
  height: 20px; /* 直線長度 */
  width: 1px;   /* 直線寬度 */
  background-color: #c5c5c5; /* 你想要的線顏色 */
  border-radius: 1px;
  z-index: 99;
}


.select-wrapper::after {
  content: '';
  position: absolute;
  right: 12px;
  margin: auto;
  bottom: 10px;
  width: 8px;
  height: 8px;
  pointer-events: none;
  transform: translateY(-50%) rotate(45deg);
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
}

.hero__search-select {
  appearance: none;        /* 標準 */
  -webkit-appearance: none; /* Chrome / Safari */
  -moz-appearance: none;   /* Firefox */
}


.clinic-card-box__title{justify-content: space-between;align-items: center;}
.clinic-box{width: 1400px;max-width: 100%;height: auto;margin: auto;gap: 20px;justify-content: space-evenly;}
.clinic-box img{width: 40%;max-width: 100%;height: auto;object-fit: cover;}
.clinic-content{width: 45%;}


.clinic-content li{font-size: 15px;color: #868686d2;margin: 10px 0;}

.clinic-form{width: 800px;max-width: 100%;margin: 80px auto;height: auto;text-align:center ;}


/* 日系簡約風格卡片 */
.jp-review-card {
    max-width: 100%;
    background-color: #ffffff;
    border: 1px solid #f0efeb;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
    font-family: "Helvetica Neue", "Helvetica", "Arial", "Noto Sans TC", sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.jp-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.user-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-right: 8px;
}

.review-date {
    font-size: 15px;
    color: #999;
    letter-spacing: 0.5px;
}

/* 星等組合樣式 */
.review-rating-group {
    display: flex;
    align-items: center;
    gap: 6px; /* 星星與數字的間距 */
}

.stars {
    color: #ffb836; /* 日系霧金 */
    font-size: 16px;
    letter-spacing: 1px;
}

.rating-number {
    font-size: 16px;
    font-weight: 700;
    color: #444;
    font-family: 'Georgia', serif; /* 數字使用襯線體更有質感 */
}

.clinic-tag {
    font-size: 14px;
    color: #8c8c8c;
    background: #f8f8f6;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    display: inline-block;
    letter-spacing: 1px;
}

.review-content {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin-top: 10px;
}

.jp-decoration-line {
    width: 30px;
    height: 1px;
    background-color: #e0e0e0;
    margin-top: 15px;
}





@media only screen and (min-width:1301px)
{

   .menuextend:hover > .nav-list__menu{ display: block!important;}

}




@media only screen and (max-width:1700px)
{
    .header-font__title{line-height: 40px;margin: 0 15px 0 15px;}
    
    .header-logo{width:200px;height: auto;max-width: 100%;}
    .footer-top{width: 50px;height: 50px;}
    .footer-top img{width: 50px;height: 50px;}
    .header__nav-box {height: 50px;}
.index-about__content{padding: 0 55px 0 0;}

}



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


    .footer-content__list{margin: 25px 0;text-align: center;display: block;}
    .footer-li{text-align: center;}
    .footer-content{justify-content: center;}
    .footer-nav{justify-content: center;}
    .footer-box{padding: 60px 15px 5px;}

    .index-about__list{margin: auto;justify-content: center;}
    .nav{margin: 0;}

    .nav-list, .nav-list a{margin: 0 10px;}
    .nav-list::after{content: "";left: -14px;}
    .header-topbox__contnet{margin: 0;}


}




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

    .nav-list, .nav-list a{font-size: 1.0em;}
    .footer-content__list--img{width: calc(100%/2 - 360px);}
    .about-introduce__box{width: 80%;margin: 15px auto;}
    .preview-link{width: 100%;height: 200px;}
    .education-article__list{width: 92%;}
  .clinic-info {font-size: 0.9vw;}
   .clinic-name--style{font-size:1.1vw;}
  .recommend-box__content02{grid-template-columns:repeat(3, 1fr);}
}





@media only screen and (max-width:1250px)
{
    .slick-dots{top: 91%;}
    
    .footer-content__list--img{width: calc(100%/2 - 320px);}
    .footer-content__list--margin{width: calc(100%/2 - -25px);}
.sidebar{width: 80%;height: auto;}
.city-selector{grid-template-columns:1fr 1fr 1fr 1fr}
.filter-item{width: 100px;}
.scroll-list{display: flex;}
.sidebar-header{padding: 10px;}
.search-box__inner{text-align: center;}
.filter-group{padding: 10px;}
.inner-main{width: 100%;margin: 20px auto;}
.recommend-box__content02{grid-template-columns:repeat(2, 1fr);}
 .clinic-name--style{font-size:1.5vw;}
}









@media only screen and (max-width:1100px)
{
   
    .footer-nav{line-height: 44px;text-align: center;}
    .footer-box{padding: 40px 15px;}
    .footer-nav__list{margin: 10px;}
    .header-topbox__contnet{margin: 0 0 0 0;}
        .nav-list, .nav-list a{margin: 0px 7px;font-size: 1.0em;}
    .nav-list::after{content: "";left: -10px;}
/*.clinic-card{width: calc(100%/2 - 40px);}*/
.clinic-card__img img{width: 100%;}
.recommend-box__content{grid-template-columns:repeat(2, 1fr);}
  .clinic-info {font-size: 1.3vw;}


}








@media only screen and (max-width:1024px)
{
  /*手機板選單往右移*/
 #mobile{left:  -320px;}
 /*選單手機板*/
 .header__nav{width: 220px;height: 100%;position: absolute;top: 0;border-radius: 0;right: 0;position: fixed;background-color: #708671;overflow-y:auto;overflow: auto;overflow-x:hidden;display: block;}
 .nav{width: 100%;margin: 55px auto 0px;height:auto;line-height:40px;}
 .nav-list, .nav-list a{margin: 0;height: auto;}
 .nav-list{width: 100%;}
 /*取消HOVER*/
 .molile-icon  > .nav-list__menu{ display: none;}
 .molile-icon01  > .nav-list__menu01{ display: none;}
 .molile-icon02  > .nav-list__menu02{ display: none;}


 .nav-menulist a:hover{color: #ffffff;}

 /*選單手機板修改樣式*/
 .nav-menulist{border-bottom: 1px solid #ffffff;}
 .nav-menulist:nth-last-child(1){border-bottom: 0 ;}
 .nav-list, .nav-list a{color: #ffffff;min-height: 40px;font-size: 1.1em;text-align: center;width: 100%;}
 .nav-list__menu{width: 100%;right: 78%;top: 5%;;z-index: 9999;position: relative;transition: none;margin: 0; box-shadow:0px 1px 0px rgb(0 0 0 / 10%);background-color:rgb(136, 196, 214);border-radius: 0px;height: auto}
 .hvr-underline-from-center:before{content: "";display: none;}
 /*手機板選單按鈕*/
 #header-buttons{width: 30px;height: 35px;background-image: url(../images/svg/menu-button-lines.svg);background-repeat: no-repeat;display: block;background-size: 30px 35px;position: absolute;left: 2%;top:8px;cursor: pointer;}
/*手機板關閉*/
 #trigger-close{width: 20px;height: 20px;display: block;position: absolute;top: 20px;right: 15px;background-image: url(../images/svg/close_icon.svg);background-repeat: no-repeat;cursor: pointer;background-size: 20px 20px;}
 .header-topbox {display: none;}
 .header{background-color: #ffffff;height: 50px;justify-content:space-between;top: 0;border-radius: 0;}
 .mobile-logo{width: 40px;height: 40px;display:flex;margin-left: 7%;align-items:center;display: block;}
 .mobile-logo a img{width:  40px;height: auto;display: block;margin: 5px 0 0 10px;}
 .logo{display: none;}  
 .nav-list--display{display: none;}
 .menuextend{position: relative;}
 .molile-icon, .molile-icon01{position: absolute;width: 100%;height:40px;background: url(../images/svg/sort-up.svg);background-size: 10px 10px;background-repeat: no-repeat;cursor: pointer;z-index: 999;background-position: center;background-position:84% 56%;top: 0;display: block;margin: 0;padding: 0;}
 .molile-icon--style{background-position: 96% 56%;}
 .header-logo{display: none;}
.molile-icon01{background-position:94% 56%;}

.header.mini{height: 50px;}

 /*介面調整*/
.nav-list{width: 100%;height: 40px;}
.nav-menulist{width: 100%;min-height: 40px;line-height: 40px;}
.nav-menulist a{padding: 0;width: 100%;;min-height: 40px;line-height: 40px;}

.menuextend:hover > .nav-list__menu{display:none;}



.menuextend img{display: none;}
.header__nav-box{height: auto;position: relative;}
.nav{padding: 0;}
.search-moblie{display: block;}
.search-button{background-color: rgba(255, 255, 255, 0);border: 0;position: absolute;cursor: pointer;top:11px ;right:7px ;color: rgba(255, 255, 255, 0);background-image: url(../images/index/search.png);width: 33px;height: 36px;background-size: 33px 36px;margin: -12px -7px;font-size: 0;}
.search-button::after{content:"";display: none;}
.nav-list::after{display: none;}
.banner{margin: 50px 0 0 0;}
.header-side{display: none;}

.header__nav{align-items:inherit}

.header-topbox__li--none{display: block;}
.topbox-list a{color: #ffffff;}
.topbox-list a::before{content: "";display: none;}
.footer-content__list{width: 100%;}
.card-btn-content--style{display: block;margin: 0 0 10px 0;}
.rating-detail{margin: 8px 0 0;display: block;}


.inner-content{display: block;}
.contact-box{width: 100%;}
.contact-form{width: 100%;margin: 20px auto;}


.banner-inner{height: 28vh;}
.inner-title{font-size: 24px;}
.inner-text{font-size: 16px;}
}









@media only screen and (max-width:850px)
{
    .footer-content-text{font-size:1.2em ;}

    .footer-list{width: 100%;}
    .footer-box{width: 100%;}
    .index-new_content__list{justify-content:left}
    .footer-top{display: none;}

    .text-right h3{font-size: 1.6em;}
     .text-right h4{font-size: 1.8em;}
      .text-right p{font-size: 1.0em;}
      .text-right{width: 70%;}

.education-content{display: block;}
.education-card{width: 95%;max-width:95%;margin: auto;height: 300px;}
.education-article{display: block;width: 95%;margin: auto;}
.education-article__list{width: 100%;margin: 25px 0;}
.business-box{margin: 50px 0;}
.step-item{width: calc(100%/2 - 50px);}

.clinic-card-inner{display: block;}
.clinic-link-inner{margin: 20px auto;}
.clinic-box img{width:90%;max-width: 90%;height: auto;display: block;}
.clinic-content{width: 100%;}



.recommend-box__content{grid-template-columns:repeat(1, 1fr);}
  .recommend-box__content02{grid-template-columns:repeat(1, 1fr);}
 .clinic-info {font-size: 2.2vw;}
.clinic-name{font-size: 16px;}
.clinic-link{font-size: 12px;}
 .clinic-name--style{font-size:2.6vw;}
}









@media only screen and (max-width:600px)
{
    .slick-dots{top: 82%;}
    .banner-prev, .banner-next{width: 25px;height: 25px;background-size: 25px 25px;}
 .education-article__list{display: block;}
.education-article__img{width: 100%;height: auto;}

}


@media only screen and (max-width:540px)
{
    
.marquee-item{height: 65px;line-height:65px;}
.marquee-item a{height: 65px;line-height:21px;}
.marquee-box{height:100px;}
.marquee-item a{ overflow: hidden; display: -webkit-box;-webkit-line-clamp:2;  -webkit-box-orient: vertical;   overflow: hidden;height:71px;letter-spacing:1px;}
.index-about__text{width: 100%;}
.sign-box{color: #838383;width: 74%;margin: auto;}
.footer-icon{margin: auto;width: 100%;text-align: center;}
.clinic-card{width:100%;}
.recommend-box__content{padding: 0 4px;}
.clinic-card__img img{width: 100%;}
.card-btn-content{display: block;width: 120px;margin: auto;}
.clinic-btn{display: block;margin: 15px 0;}


 .clinic-info {font-size: 2.5vw;}
}



@media only screen and (max-width:450px)
{
    .mobile-logo{margin-left:14%}
    .footer-reserved-content{padding: 0 15px;}
    .footer-box{padding: 10px 15px;}
      .text-right{width: 90%;}
.step-item{width: 100%;}
.education-article__btn{margin: 20px auto 0px;}
 .clinic-info {font-size: 2.7vw;}
 .review-count{font-size: 12px;}
 .clinic-name{font-size: 14px;}
 .rating strong{font-size: 12px;}

}

@media only screen and (max-width:365px)
{
.clinic-card-box__title{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;   /* 不掉行 */
  width:100%;
}

.clinic-name{
  margin:0;
  flex:1;             /* 佔剩餘空間 */
  min-width:0;        /* ⭐ flex ellipsis 核心 */
  overflow:hidden;
  text-overflow:ellipsis;
  font-size: 13px;

}

.rating{
  flex-shrink:0;      /* rating 不被壓 */
  margin-left:8px;
}
}









/* ====== 平板 ====== */
@media (max-width:1024px){

.filter-container{
  flex-wrap:wrap;
  gap:20px;
  padding:0 20px;
}

.filter-section{
  min-width:180px;
  padding:0 20px;
  width: 31%;
}

/* 下拉面板不要太大 */
.filter-panel{
  width:280px;
}

.panel-wide{
  width:420px;
}

.section-search{
  width:100%;
  margin-top:10px;
}

.search-wrapper{
  max-width:100%;
}

}


/* ====== 手機 ====== */
@media (max-width:768px){

.jp-filter-nav{
  padding:14px 0;
}

.filter-container{
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  padding:0 8px;
}

/* 每個篩選變一整行 */
.filter-section{
  width:100%;
  padding:6px 10px;
  background:#fafafa;
  border:1px solid var(--jp-border-light);
  border-radius:6px;
}

/* 篩選之間距離 */
.filter-section + .filter-section{
  margin-top:8px;
}

/* 取消分隔線 */
.filter-section::after{
  display:none;
}

.section-label{
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
}

.label-en{
  display:none;
}

.selected-preview{
  font-size:12px;
}

/* 下拉面板改滿版 */
.filter-panel{
  position:relative;
  left:0;
  width:100%;
  margin-top:10px;
}

.panel-wide{
  width:100%;
}

/* grid 調整 */
.panel-grid.cols-4{
  grid-template-columns:repeat(2,1fr);
}

.panel-grid.cols-2{
  grid-template-columns:repeat(2,1fr);
}

/* 搜尋 */
.section-search{
  width:100%;
}

.search-wrapper{
  width:100%;
}

.confirm-search-btn{
  padding:10px 16px;
}





}