@charset "UTF-8";
.grecaptcha-badge {
    display: none !important;
}


main{
	    overflow-x: hidden;
}
img {
	width:100%;
	height:auto;
}

.text-hono{
	color:#324a87;
}
.text-white{
	color:white !important;
}
.text-gray{
	color:#ccc !important;
}
.bg-white{
	background-color:#FAFEFF;
}

.bg-black{
	background-color:#06070f;
	color:white:
}

.bg-hono-temp{
   background-image: url(https://hono-group.com/image/base/bg.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%; 
    position: absolute; 
    top: 0;
    left: 0;
    z-index: -1;
}

.bg-hono{
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    pointer-events: none; 
    z-index: -1;
	    overflow: hidden;
}

.top-page.bg-hono{
    z-index: 3 !important;
}

.bg-hono li:nth-child(1){position: absolute;
    top: 5%;
    right: -140px;
    width: 80%;
    height: 50vw;
    opacity: 0.5;
    z-index: 2;
    border-radius: 50%;
    background: radial-gradient(43.93% 43.93% at 50% 50%, rgba(54, 121, 202, 0.35) 0%, rgba(239, 248, 251, 0.00) 100%);}


.bg-hono li:nth-child(2){
    position: absolute;
    top: 15%;
    left: -300px;
    width: 66%;
    height: 50vw;
    opacity: 0.7;
    z-index: 2;
    border-radius: 50%;
    background: radial-gradient(43.93% 43.93% at 50% 50%, rgba(54, 121, 202, 0.35) 0%, rgba(239, 248, 251, 0.00) 100%);}


.bg-hono.partner li:nth-child(2){
	position: absolute;
    top: 45%;
    left: -420px;
    width: 96%;
    height: 50vw;
    opacity: 0.5;
    z-index: 2;
    border-radius: 50%;
    background: radial-gradient(43.93% 43.93% at 50% 50%, rgba(54, 121, 202, 0.35) 0%, rgba(239, 248, 251, 0.00) 100%);
}




.text-left{
	text-align:left !important;
}
.mx-auto{    margin-left:auto !important;margin-right:auto !important;
}
.p-relative{
	position:relative;
	
}
html {
	margin-top:0 !important;
	letter-spacing:1px;
}

.container{
	padding:70px 0px;
	position:relative;
	max-width: 1440px;
	width:80%;
    margin: 0 auto;
	color: #324a87;
}
.text-center{
	text-align:center;
}

.en {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
}

p{
	  font-family: "Noto Sans HK", sans-serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal;
font-size:16px;
}

.sp {
  display:none !important;

}
	 .pc {
  display:block !important;

}

 @media (max-width: 768px) {
	 
	 .container {
    padding: 120px 20px;}
	 

.sp {
  display:block !important;

}
.pc {
  display:none !important;

}
        }



/**************************************************************
BUTTON
**************************************************************/

   .hero-btn {
            color: #4a6fa5;
            background: transparent;
            padding: 12px 30px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            font-weight: 500;
            font-size: 14px;
            border-radius: 25px;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .hero-btn::after {
            content: '→';
            margin-left: 8px;
            font-size: 16px;
            font-weight: bold;
			    font-family: 'Noto Sans HK';
			    font-weight: 100;

        }
        
        .hero-btn:hover {
            background: #4a6fa5;
            color: white;
            transform: translateX(3px);
        }
        
 

.hero-btn-rounded {
    color: #324a87;
    border: none;
    padding: 10px 0px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.hero-btn-rounded::after {
    content: '→';
    font-family: 'Noto Sans HK';
    width: 24px;
    font-weight: 100;
    height: 24px;
    background: #324a87;
    border-radius: 50%;
    margin-left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-weight: 200;
    font-size: 13px;
    transition: transform 0.3s ease;
}

.hero-btn-rounded:hover::after {
	transform: translateX(3px);}


/**************************************************************
TOP-PAGE
**************************************************************/


.content-below {
    position: relative;
    z-index: 2;
        margin-top:100vh;
	border-radius: 25px 25px 0 0;
}

section.about {
	border-radius:25px 25px 0 0;
}
 .heroSwiper {
 position: fixed;
    z-index: 1; /* 初始為正值，讓按鈕可點擊 */
    width: 100vw;
    height:100vh;
    overflow: hidden;
    transition: z-index 0.3s ease;
    }

 .heroSwiper video {
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.heroSwiper .swiper-wrapper{
	position:relative;
}

.heroSwiper .service.swiper-slide {
       display: flex;
    flex-direction: row;
}

.hero-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.hero-content_tt {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}


.hero-service-bg{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
	position: relative;
z-index:-1;
}

.hero-service_tt  {
    position: absolute;
    top: 50%;
    left: 70px;
    transform: translateY(-50%);
	width:35vw;
}

.family .hono-club-btn{
    margin-top: 32px;
	font-size:20px;
	color:#1b9da5;
}
.family .hono-club-btn::after {
	background: #37a7b1;
}


.beauty .hono-club-btn{
    margin-top: 32px;
	font-size:20px;
	color:#bb6c73;
}
.beauty .hono-club-btn::after {
	background: #cf7b83;}


.pet .hono-club-btn{
    margin-top: 32px;
	font-size:20px;
	color:#dba664;
}
.pet .hono-club-btn::after {
	background: #dba664;}


.bio .hono-club-btn{
    margin-top: 32px;
	font-size:20px;
	color:#53b26f;
}
.bio .hono-club-btn::after {
	background: #53b26f;}


.hero-service_tt h3 {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 8px;
	    margin-left: 3px;
}

.hero-service_tt p {
   margin-left: 3px;
	margin-top:20px;
}

 
.hero-content_tt_left{
	    display: block;
    width: 45% !important;
    height: auto !important;
    object-fit: contain;
}
.hero-content_tt_right{
	    display: block;
    width: 30% !important;
    height: auto !important;
    object-fit: contain;
}
    .hono-club-btn {
            display: inline-flex;
            align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);color: #324a87;
            padding: 12px 20px;
            border-radius: 45px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .hono-club-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 100%);
    transform: translateY(-1px);
        }
        
        .hono-club-btn::after {
            content: '→';
            width: 28px;
            height: 28px;
            background: #324a87;
            border-radius: 50%;
            margin-left: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 14px;
            transition: transform 0.3s ease;
        }
        
        .hono-club-btn:hover::after {
            transform: translateX(3px);
        }

.hero-content_info_wrapper{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    bottom: 40px;
    left: 10%;
	    color: white;
    z-index: 2;
}
.kv-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    height: 30%;
    background: linear-gradient(to top, #324a87 0%, rgba(46, 72, 136, 0) 100%);
    pointer-events: none;
}
.hero-content_info_wrapper h1{
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 2px;
	margin-bottom:10px;
}
.hero-content_info_wrapper p{
    font-size: 15px;
}

.hero-service_left{
	position:relative;
	width:50vw;
}
.hero-service_left img{
	      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
}

.hero-service_right {
	position:relative;
		height:100%;
		width:50vw;
}
     .heroSwiper .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #444;
      display: flex;
      justify-content: center;
      align-items: center;
    }

     .heroSwiper .slide-kv {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
   .heroSwiper .slide-logo {
    position: absolute;
    width: 40%;
    z-index: 3;
    bottom: 0;
    right: 0;
    width: 60%;
    }
.hero-service_left{
	position:relative;
	height:100%;
}
.hero-service_left::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: url(https://hono-group.com/image/top/wave.svg);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

.about-content {
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
	padding: 70px 0;
}
.about-title h2{
    font-size: clamp(24px, 3.5vw, 54px);
    letter-spacing: 0px;
margin-top:10px;
}

.about-title p{
	font-size:24px;
	letter-spacing:4px;
}
.about-title{
width:566px}

.about-text{
	font-size:16px;
	width:40%;
	line-height:180%;
}
     
.about-text P
{padding-bottom:32px;
	
}

      .news-section {
            margin: 0 auto;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-tag {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 20px;
    gap: 8px;
    letter-spacing: 2px;
			    position: relative;
			    margin-left: 30px;

        }
        
.section-tag::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid #3d5a80;
    border-radius: 50%;
    top: 3px;
    left: -30px;
}

/* 第二個圓環 */
.section-tag::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid #3d5a80;
    border-radius: 50%;
    top: 9px;
    left: -24px;
}

.section-tag.text-white::before {
	border: 2px solid #ffffff !important;}

.section-tag.text-white::after {
	border: 2px solid #ffffff !important;}

        .news-grid {
            display: grid;
grid-template-columns: repeat(3, 1fr);gap: 30px;
            margin-bottom: 40px;
			margin-top: 64px;
    z-index: 4;
			position:relative;
        }
        
        .news-card {
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .news-card:hover {
            transform: translateY(-5px);
        }
        
        .news-image {
            width: 100%;
            height:14vw;
            background: #e9ecef;
            position: relative;
            overflow: hidden;
        }

        .news-content {
            padding: 20px 0px;
        }
        
        .news-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .news-category {
    background: #324a87;
    color: white;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 300;
        }
        
        .news-date {
            font-size: 12px;
        }
        
        .news-title {
            font-size: 16px;
            font-weight: 500;
            line-height: 1.4;
            margin-bottom: 10px;
        }
        
        .news-subtitle {
            font-size: 13px;
            line-height: 1.4;
        }
        
        .view-all-container {
            text-align: center;
        }
        
        .view-all-btn {
            background: transparent;
            border: none;
            padding: 10px 25px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            font-weight: 500;
            font-size: 16px;
            border-radius: 50px;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .view-all-btn::after {
            content: '→';
            width: 32px;
            height: 32px;
            background: #4a6fa5;
            border-radius: 50%;
            margin-left: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 16px;
            transition: transform 0.3s ease;
        }

     .services-section {
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: start;
                padding: 0px 0 120px;
		 z-index:4;
        }
     .services-section .section-header {
		 text-align: left;}
        
        .services-left {
            position: relative;
        }


        .image-container {
            position: relative;
width: min(35vw, 600px);
height: min(35vw, 600px);
            border-radius: 15px;
            overflow: hidden;
        }
   
        .service-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 0.5s ease;
			object-position: bottom;
        }
        

        .service-image.active {
            opacity: 1;
        }
        
      
        
        .image-caption {
            font-size: 14px;
            color: #f0f0f0;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }
        
        .services-right {
            padding-left: 20px;
        }
        
        .services-list {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        
        .service-item {
            border-bottom: 1px solid rgba(46, 72, 136, 0.1);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .service-item:last-child {
            border-bottom: none;
        }
        
        .service-link {
            display: flex;
            justify-content: space-between;
    align-items: flex-start;padding: 25px 0;
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
        }
        
        .service-content {
            flex: 1;
        }
        
        .service-title {
font-size: 24px;
    font-weight: 400;
    margin-bottom: 20px;
    transition: color 0.3s ease;
    font-family: 'Lora';
}
        
       
        
        .service-description {
            font-size: 16px;
			line-height: 1.5;
        }
        
        .service-icon {
            width: 40px;
            height: 40px;
            background: #324a87;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            font-weight: bold;
            transition: all 0.3s ease;
            margin-left: 20px;
        }

        .blue.service-item:hover .service-title {
            color: #1DB7C2;
        }
      
        .green.service-item:hover .service-title {
            color: #53B26E;
        }

        .red.service-item:hover .service-title {
            color: #CF7B83;
        }
      
        .yellow.service-item:hover .service-title {
            color: #dba765;
        }

        .gold.service-item:hover .service-title {
                background: linear-gradient(to right, #d28b1c, #556477);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
        }
        
        .blue.service-item:hover .service-icon {
            background: #1DB7C2;
            transform: translateX(3px);
        }
 .yellow.service-item:hover .service-icon {
            background: #dba765;
            transform: translateX(3px);
        }
 .red.service-item:hover .service-icon {
            background: #CF7B83;
            transform: translateX(3px);
        }
             
 .green.service-item:hover .service-icon {
            background: #53B26E;
            transform: translateX(3px);
        }
 .gold.service-item:hover .service-icon {
background: linear-gradient(to right, #E3C889, #D2AD62);transform: translateX(3px);
        }
        

  .testimonial-section {
            margin: 0 auto;
            background: linear-gradient(135deg, #324a87 15%, #7795BB 100%);
            border-radius: 35px 35px 0 0;
            padding: 60px 0px;
            position: relative;
            overflow: hidden;
        }
        
        .testimonial-section::before {
content: '';
    position: absolute;
    bottom: -50px;
    left: -48%;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    content: '';
    background: url(https://hono-group.com/image/base/bglogo.svg) no-repeat center;
    background-size: contain;
    filter: brightness(0) invert(1);
        }
        

        
       .testimonial-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
    text-align: left;
        }

.testimonial-section .section-title{
    background: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
        
        .section-left {
            flex: 1;
        }

        .tab-navigation {
            display: flex;
            gap: 20px;
            align-items: center;
			    margin-bottom: 15px;
        }
        
.white.section-tag::before {
border: 2px solid white;}
.white.section-tag::after {
border: 2px solid white;}

        .tab-button {
    background: transparent;
    border: none;
    color: white;
    font-size: 16px;
    font-weight: 400;
    padding: 8px 0;
    cursor: pointer;
    letter-spacing: 1px;
    position: relative;
    transition: all 0.3s ease;
        }
        
        .tab-button::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: white;
            transition: width 0.3s ease;
        }
        
        .tab-button.active::after {
            width: 100%;
        }
        
        .tab-button:hover {
            opacity: 0.8;
        }
        
        .cursor-icon {
            width: 30px;
            height: 30px;
            margin-left: 15px;
            opacity: 0.8;
        }
        
        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
            position: relative;
            z-index: 2;
			    margin-top: 84px;
        }
        
        .testimonial-card {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .user-age {
            font-size: 14px;
        }
        
        .user-type {
    color: #324a87;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 400;
    border: 1px solid #324a87;
        }
        
        .testimonial-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.7;
    margin-top: 48px;
        }
        
        
        .testimonial-content {
            font-size: 14px;
            line-height: 1.7;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        .partners-section {
            margin: 0 auto;
        }
        .partners-section .section-left {
            flex: 0 0 auto;
            min-width: 300px;
			    text-align: left;

        }

        .partners-section .section-header {
            display: flex;
            align-items: flex-start;
            gap: 80px;
			    justify-content: space-between;
margin-bottom: 0px;
        }
        

        .section-content {
    padding-top: 20px;
    text-align: left;
    max-width: 500px;
			margin-right:10%;
        }
        
        .partners-section .content-text {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 20px;
        }
        
        .logo-carousel-container {
            width: 100%;
            overflow: hidden;
            padding: 40px 0;
            position: relative;
        }
        
        .logo-carousel {
            display: flex;
            animation: scroll-left 30s linear infinite;
            width: calc(200px * 14); /* 7 logos * 2 sets */
        }
        
        .logo-item {
               flex: 0 0 200px;
    height: 120px;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
        }
        

        .logo-placeholder {
            color: #324a87;
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 2px;
            z-index: 2;
            position: relative;
        }
        
        .logo-image {
            width: 120px;
            height: 100%;
            object-fit: contain;
            z-index: 2;
            position: relative;
        }
        
        @keyframes scroll-left {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(calc(-200px * 7 - 140px)); /* Move by width of first set */
            }
        }
        
        .logo-carousel:hover {
            animation-play-state: paused;
        }
        
        
        .articles-section {
            margin: 0 auto;
			padding:100px 0 100px 10%; 
			overflow: hidden;
        }
        
.articles-section .section-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 50px;
			text-align:left;
	    margin-right: 10%;
        }

        
        
        .articles-section .swiper-container {
            width: 100%;
            padding-bottom: 40px;
            overflow: visible;
        }
        
        .articles-section .swiper-wrapper {
            display: flex;
        }
        
        .articles-section .swiper-slide {
            width: 25vw !important;
            flex-shrink: 0;
        }

        
       
.swiper-scrollbar {
    display: none;
}

        
        .swiper-scrollbar {
            background: rgba(46, 72, 136, 0.1);
            height: 4px;
            border-radius: 2px;
        }
        
        .swiper-scrollbar-drag {
            background: #324a87;
            border-radius: 2px;
        }

        /* 五部曲 */

        
    .health-section * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .health-section {
            overflow-x: hidden;
            height: 300vh; /* 5 times viewport height for 5 steps */
            position: relative;
        }
        
        .health-section .health-container {
            position: sticky;
            top: 0;
            height: 100vh;
            overflow: hidden;
        }
        
        .health-section .section-header {
    text-align: left;
    position: absolute;
    top: 60px;
    left: 10%;
    z-index: 10;
        }

        
   
        .health-section .slides-container {
            display: flex;
            width: 300vw; /* 5 times viewport width for 5 steps */
            height: 100vh;
            will-change: transform;
			    padding-left: 20%;
        }
        
        .health-section .slide {
max-width: 800px;
    width: 52vw;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 11vw 0 0;
        }
        
        .health-section .slide-content {
    max-width: 700px;
    width: 100%;
    height: 100%;
    gap: 0;
    padding-top: 240px;
			    position: relative;
        }
        
        .health-section .slide-number {
    font-size: 52px;
    font-weight: bold;
    color: #324a87;
    position: absolute;
    top: -15px;
    left: -8px;
    font-weight: 400;
    z-index: 2;
}
        
        
        .health-section .slide-image {
    position: relative;
			height:45vh;
        }
        
        .health-section .slide-image img {
			position:relative;
            width: 100%;
            height: 100%;
            border-radius: 120px 0 120px 0;
			object-fit:cover;
            overflow: hidden;
            position: relative;
            z-index: 1;
        }
        
        .health-section .slide-text {
    width: 100%;
    padding: 0 0 0 0px;
    margin-left: -20px;
    position: relative;
    margin-top: -60px;
    z-index: 4;
    left: 0px;
        }
        
        .health-section .slide-title {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 16px;
    line-height: 1.2;
    letter-spacing: 5px;
        }
#en-home .health-section .slide-title {
    letter-spacing: 2px;
        }
        
#en-home .health-section .slide-description {
    line-height: 1.5;
}
        .health-section .slide-tag {
padding: 3px 6px;
    border: 1px solid;
    font-size: 14px;
    font-weight: 400;
    display: inline-block;
    margin-right: 10px;
    text-align: center;
    white-space: nowrap;
        }
        
        .health-section .slide-description {
color: #324a87;
    font-size: 14px;
    line-height: 2;
    margin-bottom: 10px;
        }
        

.health-section .book-btn{
    position: absolute;
    right: 70px;
    top: 130px;
	z-index:99;
	background: linear-gradient(135deg, #d8dff3 15%, #e9edf3 100%);
}

	
        .health-section .slide-item {
margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
			width:110%;
        }

        .health-section .image-overlay {
   position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background:linear-gradient(to bottom, transparent 0%, /* 完全透明 */ transparent 30%, /* 保持透明到 30% */ rgb(250 254 255) 100% /* 從 30% 開始漸變到實色 */);
    );
			
    pointer-events: none;
    z-index: 3;
    border-radius: 0 0 20px 0;
}

     
        /* Alternating layout */
        .health-section .slide-2 .slide-content,
        .health-section .slide-4 .slide-content {
            flex-direction: row-reverse;
        }




/**************************************************************
共通PAGE
**************************************************************/


.page .page-title { 
    text-align: center; 
    margin-bottom: 80px; 
	    margin-top: 120px;
	    position: relative;
}

.page .section-subtitle { 
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 5px;
    margin-top: 20px;
}

.page .hero-image { 
    width: 100%; 
    height: 400px; 
    border-radius: 15px; 
    overflow: hidden; 
    margin-bottom: 100px; 
    box-shadow: 0 15px 40px rgba(46, 72, 136, 0.1); 
}

.page .hero-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.page .content-section { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 100px; 
    align-items: start; 
	position:relative;
}


.about-section{
	position:relative;
}
.about-section::before {
position: absolute;
    bottom: 0;
    right: -50px;
    width: 33%;
    height: 33%;
    content: '';
    background: url(https://ezc.iey.temporary.site/image/base/bglogo-blue.svg) no-repeat center;
    background-size: contain;
}

.p-bio .about-section::before {
position: absolute;
    bottom: 150px;
    z-index: 2;
    right: -200px;
    width: 47%;
    height: 47%;
    content: '';
    background: url(https://hono-group.com/image/base/bglogo-green.svg) no-repeat center;
    background-size: contain;
    opacity: 0.5;
}

.page .content-left { 
    display: flex; 
    flex-direction: column; 
}

.page .main-title { 
    font-weight: 400; 
    line-height: 1.8; 
    margin-bottom: 30px; 
	    font-size: clamp(28px, 3.5vw, 54px);
    letter-spacing: 0px;
margin-top:10px;
}

.main-title_cn {
    display: flex;
    position: absolute;
    right: 50px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 26px;
    font-weight: 300;
    margin-left: 20px;
    letter-spacing: 3px;
    flex-direction: column-reverse;
}
.main-title_cn li:first-child { 
    margin-top: 40px !important;
}

.main-title_cn  li:first-child { 
    margin-top: 40px;
}

.page .content-right { 
    padding-top: 20px; 
}

.page .content-text_wrapper{
	margin-top:240px;
}
.page .content-text { 
    font-size: 16px; 
    line-height: 1.8; 
    margin-bottom: 25px; 
}


     .courses-section {
            min-height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .background-image {
position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    height: 96%;
    background-size: cover;
    background-position: center;
    filter: blur(20px);
    z-index: -1;
    transition: background-image 0.8s 
ease;
        }
        
        .background-overlay {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #5773A4;
    opacity: 0.5;
    z-index: -1;
        }
          .courses-section .content-container {
    position: relative;
    z-index: 2;
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
			  padding: 120px 0;
        }

        .courses-left {
            display: flex;
            flex-direction: column;
        }
        
        .section-header {
            margin-bottom: 40px;
        }

.gradient-background {
    background: linear-gradient(to bottom, #DFE8F5 0%, #dfebfd 0%, transparent 39%)

}        
        .section-title {
			background: linear-gradient(to right, #324a87, #7795bb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
            font-weight: 400;
            letter-spacing: 2px;
            line-height: 1.2;
			    font-size: clamp(32px, 5vw, 60px);
        }
        
        .main-image-container {
            position: relative;
            overflow: hidden;
        }
        
        .main-image {border-radius: 20px;
    max-width: 33vw;
    height: 33vw;
    transition: opacity 0.8s ease;
			object-fit:cover;
        }
        
        .image-overlay-logo {
            position: absolute;
            bottom: 30px;
            right: 30px;
            font-size: 60px;
            font-weight: bold;
            color: rgba(255, 255, 255, 0.9);
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
            letter-spacing: 3px;
        }
        
        .courses-right {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        
        .booking-button {
            align-self: flex-end;
            margin-bottom: 30px;
        }
        
        .book-btn {
            background: rgba(255, 255, 255, 0.7);
            color: #324a87;
            padding: 12px 20px;
            border-radius: 25px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            transition: all 0.3s ease;
        }
        
        .book-btn::after {
            content: '→';
            width: 24px;
            height: 24px;
            background: #324a87;
            border-radius: 50%;
            margin-left: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 12px;
        }
        
        .book-btn:hover {
            background: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .course-item {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 4px;
            margin-bottom: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: box-shadow 0.3s ease;
        }
        
        .course-header {
            padding: 20px 25px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .course-header:hover {
            background: rgba(46, 72, 136, 0.05);
        }
        
        .course-title {
    font-size: 18px;
    color: #324a87;
    font-weight: 400;
        }
        

        
        .course-content {
            padding: 0 25px;
            height: 0;
            overflow: hidden;
            transition: height 0.3s ease, padding 0.3s ease;
            background: rgba(255, 255, 255, 0.98);
        }
        
        .course-item.active .course-content {
            height: auto;
            min-height: 120px;
            padding: 20px 25px 25px;
        }
        
 .course-icon {
            color: #7795BB;
            font-size: 16px;
            transition: transform 0.3s ease;
            transform-origin: center center;
        }

        .course-item.active .course-icon {
            transform: rotate(180deg);
        }
        
        .course-description {
            font-size: 16px;
            color: #324a87;
            line-height: 1.7;
            opacity: 0.9;
			    margin-bottom: 20px;
        }


 .advanced-training-container {
            max-width: 950px;
            margin: 0 auto;
        }
        
        .advanced-training-item {
            background: #DBE3F2;
            border: 1px solid rgba(46, 72, 136, 0.2);
            border-radius: 8px;
            margin-bottom: 10px;
            overflow: hidden;
            transition: background 0.3s ease;
        }
.advanced-training-item.active {
    background: unset;
}

        .advanced-training-item:hover {
            background: rgba(255, 255, 255, 0.9);
        }
        
        .advanced-training-header {
    padding: 25px 40px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    max-width: 900px;
    margin: 0 0 0 auto;
        }
        
        .advanced-training-title {
    font-size: 18px;
    font-weight: 400;
        }
        
        .advanced-training-arrow {
            color: #324a87;
            font-size: 14px;
            transition: transform 0.3s ease;
            opacity: 0.7;
        }
        
        .advanced-training-content {
            padding: 0 25px;
            height: 0;
            overflow: hidden;
            transition: height 0.4s ease;
            background: rgba(255, 255, 255, 0.95);
        }
        
        .advanced-training-item.active .advanced-training-content {
            height: auto;
            padding: 20px 25px 25px;
        }
        
        .advanced-training-item.active .advanced-training-arrow {
            transform: rotate(180deg);
        }
        
        .advanced-content-wrapper {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    max-width: 780px;
    margin: 0 auto;
        }
        
        .advanced-content-image {
            width: 40%;
            height: 250px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .advanced-content-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .advanced-content-text {
    font-size: 16px;
    line-height: 1.7;
    opacity: 0.9;
        }
        

/**************************************************************
ABOUT-PAGE
**************************************************************/

.p-about .about-section { 
    margin: 0 auto; 
	position: relative;
}
.p-about .founder-section {
    position: relative;
}

.p-about .founder-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 460px;
    background: linear-gradient(135deg, #324a87 0%, #7795BB 100%);
    z-index: -1;
    border-radius: 120px 0 0 0;
}
.p-about .founder-section .section-title {
    background: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.p-about .founder-section > * {
    position: relative;
    z-index: 1;
}

.about-lead_image{
    max-width: 470px;
    margin-top: 100px;
	margin-left:20px;
}
.about-lead_image img{
    border-radius: 70px 0 70px 0px;
}

.p-about .founder-section .section-header {
    justify-content: space-between;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
    max-width: 80%;
    text-align: left;
    margin: 0 auto;
    padding: 150px 0 40px;
	    z-index: 0;
}

.p-about .founder-image { 
height: 100%;
    overflow: hidden;
    position: relative;
}

.page .founder-content {
    align-items: start;
    margin-bottom: 80px;
}



.p-about .founder-image-section .founder-image img { 
width: 100%;
    height: 100%;
    object-fit: contain;
}

.founder-caption { 
    margin-top: 15px;
    font-size: 14px;
    display: flex;
    align-items: center;
	margin-left: 20px;
	opacity: 0.8;
}



.p-about .hono-logo-bg { 
    position: absolute; 
    right: -50px; 
    bottom: -50px; 
    font-size: 200px; 
    color: rgba(46, 72, 136, 0.05); 
    font-weight: bold; 
    z-index: -1; 
    letter-spacing: 5px; 
}

        

        
.p-about .tab-navigation {
    position: absolute;
    top: 260px;
    right: 10%;
    display: flex;
    gap: 16px;
    width: 80%;
    justify-content: flex-end;
}
        
.p-about .tab-button {
            background: transparent;
            border: none;
            color: white;
            font-size: 16px;
            font-weight: 400;
            padding: 8px 0;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
            opacity: 0.7;
        }
        
.p-about .tab-button.active {
            opacity: 1;
        }
        
.p-about .tab-button::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 1px;
            background: white;
            transition: width 0.3s ease;
        }
        
.p-about .tab-button.active::after {
            width: 100%;
        }
        
.p-about .founder-section .content-container {
    background-color: white;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    margin-left: 14%;
    margin-top: 18px;
        }
        
.p-about .founder-image-section {padding: 40px 40px 0;
    background: linear-gradient(135deg, #f1f2f3 0%, #D6E0F5 100%);
    position: relative;
	    height: 600px;
}

.founder-title_wrapper {
    position: absolute;
}
        
.p-about .founder-title {
            font-size: 18px;
            margin-bottom: 10px;
            opacity: 0.8;
        }
        
.p-about .founder-name {
            font-size: 20px;
            color: #324a87;
            font-weight: 500;
        }
        

        
.p-about .founder-section .content-section {
            padding-top: 40px;
        }
        
.p-about .tab-content {
            display: none;
	    padding: 70px 20% 70px 0;
        }
        
.p-about .tab-content.active {
            display: block;
	    padding: 70px 20% 70px 0;
        }
        
.p-about .founder-section .content-text {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 30px;
            opacity: 0.9;
        }

.p-about .timeline { 
    position: relative;
    padding-left: 0;
    margin-top: 100px;
    margin-bottom: auto;
    margin: 120px 40px 0;
    padding-left: 70px;
}

.p-about .timeline-item { 
    position: relative; 
    padding: 60px 0; 
    border-top: 1px solid rgba(46, 72, 136, 0.1); 
}

.p-about .timeline-item:last-child { 
    border-bottom: none; 
}

.p-about .timeline-content { 
    display: grid; 
    grid-template-columns: 220px 1fr; 
    gap: 60px; 
    align-items: start; 
}

.p-about .timeline-year { 
    font-size: 46px;
    font-weight: 300;
    opacity: 0.8;
    letter-spacing: 5px;
	padding-left: 32px;
}

.p-about .timeline-details { 
    padding-top: 5px; 
}

.p-about .timeline-title { 
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 15px;
}

.p-about .timeline-description { 
    font-size: 16px; 
    line-height: 1.7; 
    margin-bottom: 15px; 
    opacity: 0.8; 
}

.p-about .timeline-bullet { 
    font-size: 14px; 
    opacity: 0.7; 
    line-height: 1.6; 
    margin-left: 15px; 
}

.p-about .timeline-bullet::before { 
    content: '• '; 
    color: #324a87; 
    font-weight: bold; 
}

.p-about .timeline-note { 
    font-size: 13px; 
    opacity: 0.6; 
    margin-top: 8px; 
    margin-left: 15px; 
}
.p-about .marquee-container {
            width: 100%;
            overflow-x: hidden;
            padding: 40px 0;
        }
        
.p-about .marquee-track {
            display: flex;
            animation: scroll-left 40s linear infinite;
            width: calc(300px * 20); /* 10張照片 × 2組 = 20張 */
        }
        
.p-about .photo-item {
            width: 30vw;
            margin-right: 40px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
.p-about .photo-item img {
            width: 100%;
            height: auto;
            transition: transform 0.3s ease;
        }
        

/**************************************************************
BRMT-PAGE
**************************************************************/

.courses-section .section-title {
    background: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.p-brmt .content-right h2{
	font-size:20px;
	margin-bottom: 32px;
}
   .specialty-program-section {
            min-height: 100vh;
            position: relative;
            background: url('https://hono-group.com/image/brmt/sp-bg.webp') center/cover no-repeat;
            display: flex;
            align-items: center;
        }
        
        .specialty-program-section .background-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.85);
            z-index: -1;
        }

        .program-left {
            padding-right: 40px;
        }

.sp-course img{
    border-radius: 20px;
    margin-bottom: 30px;
}
        
        .program-title {
background: linear-gradient(to right, #324a87, #7795bb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.2;
    font-size: clamp(32px, 5vw, 60px);
        }
        
        .program-subtitle {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 400;
    margin-top: 20px;
        }
        
        .program-tags {
            display: flex;
            gap: 8px;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }
        
        .program-tag {
    background: #324a87;
    color: white;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 400;
        }
        
        .program-description {
            font-size: 16px;
            margin-bottom: 40px;
            line-height: 1.7;
        }
        
        .program-info-box {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(46, 72, 136, 0.2);
            border-radius: 8px;
            padding: 25px;
            margin-bottom: 40px;
			    max-width: 556px;
        }
        
        .info-highlight {
            font-weight: 600;
            display: inline;
        }
        
        .program-info-text {
            font-size: 16px;
            line-height: 1.7;
            margin-bottom: 10px;
        }
        
        .program-info-text:last-child {
            margin-bottom: 0;
        }
        
        .inquiry-btn {
            background: transparent;
            border: 2px solid #324a87;
            padding: 12px 25px;
            border-radius: 25px;
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            transition: all 0.3s ease;
        }
        
        .inquiry-btn::after {
            content: '→';
            width: 28px;
            height: 28px;
            background: #324a87;
            border-radius: 50%;
            margin-left: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 14px;
            transition: transform 0.3s ease;
        }
        
        .inquiry-btn:hover {
            background: #324a87;
            color: white;
        }
        
        .inquiry-btn:hover::after {
            transform: translateX(3px);
            background: white;
            color: #324a87;
        }
        
        .program-right {
            position: relative;
        }
        
        .program-image {
            width: 100%;
            height: 500px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        .program-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }



        
        .brmt-history .history-timeline {
display: flex;
    flex-direction: column;
    gap: 80px;
    position: relative;
    margin: 120px 40px 0;
    padding-left: 70px;
        }
        
        .brmt-history .timeline-item {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
        }
        
        .brmt-history .timeline-image {
width: 90%;
    height: 330px;
			
    border-radius: 75px 0 75px 0;
    overflow: hidden;
        }
        
        .brmt-history .timeline-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .brmt-history .timeline-content {
            padding-top: 0;
            position: relative;
        }
        
        .brmt-history .timeline-number {
            position: absolute;
            right: -50px;
            top: -20px;
            font-size: 140px;
            font-weight: 200;
            color: rgba(46, 72, 136, 0.08);
            z-index: 1;
        }
        
        .brmt-history .timeline-title {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 32px;
            line-height: 1.3;
        }
        
        .brmt-history .timeline-description {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 20px;
            opacity: 0.9;
        }

/**************************************************************
BIO-PAGE
**************************************************************/


.p-bio .content-left .section-title{
    font-size: 36px;
    line-height: 1.5;
}

.p-bio .section-title{
    background: #2EB285;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.p-bio .gradient-background {
    background: linear-gradient(to bottom, #ECF1EB 0%, #ECF1EB 50%, transparent 70%)
}

.p-bio .advanced-training-item {
	background: #ECF1EB;}

.p-bio .content-container .section-title{
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.p-bio .background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #bed4bc;
    opacity: 0.3;
    z-index: -1;
}

.p-bio .content-text {
    line-height: 2.5;
}
        .products-store {
            max-width: 1200px;
            margin: 0 auto;
            padding: 80px 50px;
        }

.products-header {
    display: flex;
    justify-content: space-between;
}


        .products-store .category-navigation {
            display: flex;
            gap: 30px;
			height: 32px;
			margin-top: 74px;
        }
        
        .products-store .category-selector {
            background: transparent;
            border: none;
            font-size: 16px;
            font-weight: 400;
            padding: 8px 0;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
        letter-spacing: 1px;
			color: #324a87;
}
        
        .products-store .category-selector.selected {
            opacity: 1;
            color: #2eb385;
        }
        
        .products-store .category-selector::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 1px;
            background: #2eb385;
            transition: width 0.3s ease;
        }
        
        .products-store .category-selector.selected::after {
            width: 100%;
        }
        
        .products-store .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }
        
        .products-store .product-card {
background: #F6F6F6;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
        }
        
        .products-store .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        }
        
        .products-store .product-image {
width: 100%;
    height: 250px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
        }
        
        .products-store .product-image img {
            width: 80%;
            height: 80%;
            object-fit: contain;
        }
        
        .products-store .product-tag {
position: absolute;
    top: 15px;
    border: 1px solid;
    right: 15px;
    color: rgba(46, 72, 136, 0.9);
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.8;
        }
        
        .products-store .product-content {
            padding: 25px;
        }
        
        .products-store .product-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .products-store .product-subtitle {
            font-size: 16px;
            margin-bottom: 15px;
			font-weight:500;
        }
        
        .products-store .product-description {
            font-size: 13px;
            line-height: 1.6;
            opacity: 0.7;
        }
        
        .products-store .category-panel {
            display: none;
        }
        
        .products-store .category-panel.active-panel {
            display: block;
        }

        

        
        .faq-list {
    overflow: hidden;
    position: relative;
    margin: 80px 40px 0;
    padding-left: 70px;
        }
        
        .faq-item {
            border-top: 1px solid #e9ecef;
        }
        
        .faq-item:last-child {
        }
        
        .faq-question {
            width: 100%;
            background: none;
            border: none;
            padding: 30px 40px;
            text-align: left;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
        }
        
        
        .faq-question-number {
    font-size: 48px;
    letter-spacing: 4px;
    font-weight: 200;
    margin-right: 20px;
    min-width: 20%;
			color: #324a87;
        }
        
        .faq-question-text {
            flex: 1;
			    font-size: 20px;
    letter-spacing: 2px;
    font-weight: 400;
			color: #324a87;
        }
        
        .faq-icon {
            width: 24px;
            height: 24px;
            transition: transform 0.3s ease;
        }
        
        .faq-item.faq-active .faq-icon {
            transform: rotate(180deg);
			    fill: #324b87;
        }
        
        .faq-item.faq-active .faq-question-number {
            color: #2eb385;
        }
        
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .faq-answer-content {
            padding: 0 40px 30px 25%;
            line-height: 1.8;
            opacity: 0.8;
        }
        
        .faq-item.faq-active .faq-answer {
            max-height: 500px;
        }


/**************************************************************
ARCHIVE-PAGE
**************************************************************/

  .archive-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        .archive-navigation {
            display: flex;
            justify-content: center;
            margin-bottom: 60px;
            border-bottom: 1px solid #ddd;
        }
        
        .archive-nav-item {
            background: transparent;
            border: none;
            font-size: 16px;
            font-weight: 500;
            padding: 15px 20px;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
			letter-spacing:1px;
            margin: 0 10px;
    font-weight: 400;
			color: #324a87;
        }
        
        .archive-nav-item:hover {
            color: #324a87;
        }
        
        .archive-nav-item.archive-active {
            font-weight: 600;
        }
        
        .archive-nav-item.archive-active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 1px;
            background: #324a87;
        }
        
        .archive-content {
            display: none;
        }
        
        .archive-content.archive-show {
            display: block;
        }
        
        .archive-grid {
            display: grid;
grid-template-columns: repeat(3, 1fr);gap: 30px;
        }
        
        .archive-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .archive-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .archive-image {
            width: 100%;
            height: 200px;
            background: #e0e0e0;
            position: relative;
            overflow: hidden;
        }
        
        .archive-image::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>') no-repeat center;
            background-size: contain;
            opacity: 0.3;
        }
        
        .archive-content-area {
            padding: 20px;
        }
        
        .archive-category {
            display: inline-block;
            background: #324a87;
            color: white;
            font-size: 12px;
            padding: 4px 12px;
            border-radius: 4px;
            margin-bottom: 12px;
            font-weight: 500;
        }
        
        .archive-date {
            color: #666;
            font-size: 12px;
            margin-left: 8px;
        }
        
        .archive-title {
            font-size: 16px;
            font-weight: 500;
            line-height: 1.4;
            margin-bottom: 15px;
        }
        
        .archive-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #888;
            font-size: 12px;
        }
        
        .archive-duration {
            color: #888;
        }


#s-blog {
    max-width: 1170px;
    margin: 70px auto 0;
    text-align: left;
    padding: 60px 30px 70px;
}

.cover-image{
	margin-bottom:20px;
}

.s-blog-side .thumbnail {
    height: 150px;
}


.s-blog-side .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	border-radius:5px;

}

.s-blog-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.s-blog-wrapper2 {
    width: 75%;
}

#s-blog .bg-white {
    padding: 80px 60px 70px;
    border-radius: 10px;
    position: relative;
    border: 1px solid #E5E5E5;
    background: white;
	z-index: 4;
}


#s-blog h1{
    text-align: center;
    font-size: 24px;
    max-width: 600px;
    margin: 0 auto 20px;
    font-weight: 500;
}

.sns-container{
    display: flex;
    align-items: center;
    position: absolute;
    right: 40px;
    top: 40px;
}
.sns{
	width:30px;
	    margin: 5px;
}


/**************************************************************
SINGLE-PAGE
**************************************************************/
.s-blog-side {
    width: 25%;
    padding: 0 0 0 20px;
	    position: relative;
}

.s-blog-side .title02 {
    position: absolute;
    top: -20px;
    right: 0;
}

.s-blog-side li:nth-child(2) {
    margin-top: 20px;
    font-size: 16px;
    padding-bottom: 40px;
}

.s-blog-side h4 {
    margin-top: 5px;
    font-weight: 500;
	font-size:14px;
	line-height: 1.7;
}

#s-blog .date {
    margin-top: 0;
    margin-bottom: 20px;
}

.s-blog-content {
    font-size: 18px;
    line-height: 2;
}
.s-blog-content p{
margin-bottom:30px;
}

.s-blog-content img {
    margin-top: 10px;
}

.s-blog-content h2,
.s-blog-content h3,
.s-blog-content h4,
.s-blog-content h5 {
    font-weight: bold;
    margin-bottom: 10px;
}

.s-blog-nav {
    margin: 30px 0 45px;
    background-color: #fff;
    padding: 30px;
    position: relative;
    display: flex;
    justify-content: space-between;
}


.s-blog-prev {
    width: 50%;
    border-right: 1px solid #333;
    padding: 0 20px;
}

.s-blog-next {
    width: 50%;
    padding: 0 20px;
    text-align: right;
}

.s-blog-side li {
    padding: 20px 20px 0;
    font-weight: 500;
		font-size: 18px;}

.s-blog-wrapper .news-meta {
    display: flex
;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
}

.share-section {
            padding: 30px 0;
            border-top: 1px solid #d1d1d1;
        }

        .share-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }

        .share-left {
            display: flex;
            align-items: center;
            gap: 25px;
			width: 50%;
        }

        .share-title {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 2px;
        }

        .share-icons {
            display: flex;
            gap: 15px;
        }

.wechat-share img{
width:24px !important;
	height:24px !important;
        }


        .share-icon svg {
            width: 22px;
            height: 22px;
            fill: white;
        }

        .divider {
            width: 1px;
            height: 60px;
            background-color: #d1d1d1;
        }

        .back-link {
    color: #3d5a80;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
			    justify-content: flex-end;
			width: 50%;
        }

        .back-link:hover {
            color: #2c4460;
        }

        .back-link:hover .arrow-circle {
            background-color: #2c4460;
            transform: translateX(5px);
        }

.share-icons img{
	width:22px ;
	height:22px;
}

        .share-section .arrow-circle {
    width: 20px;
    height: 20px;
            background-color: #3d5a80;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .share-section .arrow-circle svg {
            width: 20px;
            height: 20px;
            fill: white;
        }

/**************************************************************
聯絡我們
**************************************************************/

.contact{

    display: flex;
    margin: 0px auto;	
}


.p-about .container.contact {
}


.contact-disc{
	width:50%;
    min-width: 400px;
    margin-right: 30px;
	    margin-top: 56px;
}

.contact-text{
    padding: 20px 0;
    max-width: 410px;
	line-height:2;
}

      .contact-table {
color: #324a87;
        }

         .contact-table table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 12px;
        }

         .contact-table td {
            padding: 8px 0px;
        }

         .contact-table td:first-child {
    width: 130px;
        }

         .contact-table .address {
            line-height: 1.6;
        }

.contact-form{
	width:70%;
}

.e-btn {
    width: 400px;
    text-align: center;
    border: 1px solid;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}
.e-btn img {
	width:40px;
	margin-right:10px;
}

#form{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 18px;
    gap: 16px;
}


#form li:nth-child(1) , #form li:nth-child(2)  ,  #form li:nth-child(3) , #form li:nth-child(4) {
	width: 48%;
}

#form li:nth-child(5) {
    width: 100%;
    padding-right: 10px;
}

#form input {
    height: 40px;
    border: 0;
    padding: 0px 10px;
    font-size: 16px;
    margin-top: 10px;
    border-radius: 3px;
    border: 1px solid #e5e5e5;
	background-color: rgba(207, 221, 238, 0.6);
	    width: 100%;
	
}

#form label{
    margin-bottom: 30px;
	    display: block;

}

#form textarea {
    border: 0;
	    padding: 10px 10px;
	    font-size: 16px;
background-color: rgba(207, 221, 238, 0.6);
    width: 100%;
    margin-top: 10px;
    border-radius: 3px;
    border: 1px solid #e5e5e5;
}

.wpcf7-list-item-label a {
	color: rgb(99 134 177);
}
#submit{
	width:100%;
}
/* Submit button */
#submit .wpcf7-submit {
border: 0;
    padding: 0;
    font-size: 16px;
    position: relative;
    font-family: inherit;
    letter-spacing: 1px;
    background: #324a87;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 32px 0 0 0;
    width: 220px;
    transition: 0.3s 
ease-in-out;
    font-weight: 500;
    color: #fff;
    height: 50px;
}
#submit .wpcf7-submit:hover {
background: rgb(99 134 177);
    color: #fff;
}

#submit .wpcf7-submit:hover:after {
    border-color: #333;
}

.contact-memo{
    color: #c04851;
    font-size: 21px;
	    width: 50%;
}
.wpcf7-not-valid-tip{
    font-size: 13px !important;
}

.contact #submit {
    padding-left: 0px;
}

	.privacyCheck{
		    padding: 0 0 0px 0px;
	}	
.contact-disc h2{
	    font-weight: normal;
    font-size: 42px;
    margin-bottom: 40px;
    letter-spacing: 1px;
    color: #333;
}
.contact-disc .description {
    line-height: 2;
    margin-bottom: 10px;
    font-size: 16px;
    letter-spacing: 0.05em;
}

.privacy-policy{
	max-width:800px;
	margin:0 auto 70px;
	color:#555;
	line-height:2;
}

#location .container {
	padding: 70px 70px;}

.thx #vision {
    text-align: center;
    padding: 48px 20px;
    line-height: 2.5;
    height: 50vh;
    margin-top: 55vh;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
}

.privacy h3{
    margin: 20px 0;
}



/**************************************************************
HONO-PET
**************************************************************/

.page .p-pet .content-section {
    align-items: center;
}
 
.p-pet .content-section h2 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
	color:#dba765;
}

.section-image {
	height: 400px;
	width:100%;
position: relative;
display: inline-block;
}


.p-pet .section-image::after {
content: "";
    top: 12px;
    width: 100%;
    left: 11px;
    height: 400px;
    position: absolute;
    background-color: #f4e7d4;
    z-index: -1;
    border-radius: 12px;
}


.section-image img{
	border-radius: 50px 0 50px 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
}


.contact-banner  {
	position:relative;
    height: 500px;
    width: 100vw;
	overflow:hidden;
}


.contact-banner_bg {
    position: absolute;
    object-fit: cover;
    left: 0;
    top: 0;
	z-index:-1;
	object-position: center;
}

.contact-banner h2 {
    margin-bottom: 20px;
    letter-spacing: 3px;
    font-size: 28px;
	font-weight:200;
}

.p-pet .about-section::before {
display:none
}

.p-pet .section-title {
    background: linear-gradient(to right, #dba765, #ffd9c2);
	-webkit-background-clip: text !important;
}

.contact-banner_bg {
    width: 100%;
    height: 100% !important;
}

.contact-banner_box {
    padding: 70px;
    max-width: 1160px;
    margin: 0 auto;
}
/**************************************************************
HONO-BEAUTY
**************************************************************/

.p-beauty .section-title {
	background: linear-gradient(to right, #CF7B83, #f0b3b9);
    -webkit-background-clip: text !important;
}


.page .p-beauty .content-section {
    align-items: center;
}
 
.p-beauty .content-section h2 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
	color:#CF7B83;
}
.p-beauty .section-image {
position: relative;
display: inline-block;
}


.p-beauty .section-image::after {
content: "";
    top: 12px;
    width: 100%;
    left: 11px;
    height: 400px;
    position: absolute;
    background-color: #e7d8da;
    z-index: -1;
    border-radius: 12px;
}


.p-beauty .section-image img {
display: block;
border-radius: 12px;
position: relative;
z-index: 1;
}

.p-beauty .about-section::before {
display:none
}

.contact-banner_logo{
    width: 30%;
    position: absolute;
    right: 0;
    bottom: 0;
}