#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {padding-bottom: 2vw;}
section .title_box h2{color:#333;font-size: 33px;font-weight: 600;font-family: 'Noto Serif TC';letter-spacing: 5px;}
section .title_box .entitle_box{font-family: "Newsreader", serif;color: var(--primary);font-size: 70px;line-height: 1;}
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }

/* feature_area */
#feature_area {position: relative;z-index: 4;padding: 0;}
#feature_area .workframe{padding: 6vw 0;position: relative;width: min(90%, 1600px);}
#feature_area .workframe:before {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: linear-gradient(to right, rgb(247 246 245) 60%, rgb(247 246 245 / 0%) 100%);pointer-events: none;z-index: -1;}
#feature_area .workframe:after{content:'';position: absolute;right: 0;width: 40%;height: 100%;background-image: url(/images/44/img-featurebg.jpg);background-size: cover;top: 0;background-position: 50% 50%;background-repeat: no-repeat;z-index: -2;border-radius: 0 0 90px 0;}
#feature_area .feature_list {display: grid;grid-template-columns: repeat(4,1fr);gap: 30px;width: 65%;}
#feature_area .item_box {display: grid;align-items: center;gap: 25px;grid-template-columns: 55px 1fr;}
#feature_area .item_box:hover { transform: translateY(-6px); }
#feature_area .icon_box  img{aspect-ratio:1/1;object-fit: contain;}
#feature_area .info_box .h3 {margin: 0 0 5px;color: #2d4140;font-size: 20px;font-weight: 600;letter-spacing: 0.05em;font-family: 'Noto Serif TC';}
#feature_area .info_box p {margin: 0;color: #687675;font-size: 15px;}

/* about_area */
#about_area {position: relative;background: linear-gradient(275deg, #f7f6f5 0%, #ffffff 100%);}
#about_area .workframe{width:min(90%, 1600px)}
#about_area .about_grid {position: relative;z-index: 2;display: grid;grid-template-columns: 35% 60%;justify-content: space-between;}
#about_area .leftBox {margin: 30px 0;}
#about_area .title_box {display: flex;flex-direction: column-reverse;}
#about_area .info_box p {margin: 0 0 18px;color: #465555;font-size: 17px;line-height: 2.2;}
#about_area .btn_box { margin-top: 35px; }
#about_area .rightBox {display: grid;grid-template-columns: 1fr 250px;gap: 3px;align-items: stretch;box-shadow: 0 25px 60px rgba(80, 91, 91, 0.14);border-radius: 60px;overflow: hidden;}
#about_area .main_img {position: relative;overflow: hidden;display: flex;align-items: center;justify-content: center;}
#about_area .main_img img {width: 100%;height: 120%;object-fit: cover;transition: transform 0.8s ease;}
#about_area .main_img:hover img { transform: scale(1.06); }
#about_area .num_box {padding: 55px;background: var(--primary);color: #fff;display: flex;flex-direction: column;justify-content: center;gap: 32px;}
#about_area .num_box dl { margin: 0; }
#about_area .num_box dt {color: rgba(255,255,255,0.75);font-size: 16px;line-height: 1.8;}
#about_area .num_box dd {margin: 8px 0 0;font-family: "Noto Serif TC",serif;font-size: 25px;font-weight: 600;}

/* doctor_area */
#doctor_area {position: relative;padding: 7vw 0 8vw;background: #fff;overflow: hidden;}
#doctor_area::before {content: "";position: absolute;top: 0;right: 0;width: 44%;height: 26%;background: radial-gradient(circle at center,rgba(26,133,132,0.12) 0%,rgba(26,133,132,0.06) 38%,transparent 70%);filter: blur(12px);pointer-events: none;}
#doctor_area .workframe { position: relative; z-index: 1; }
#doctor_area .doctor_head {display: grid;grid-template-columns: 1fr 25%;align-items: end;gap: 40px;padding-bottom: 72px;}
#doctor_area .title_box {position: relative;display: flex;align-items: flex-start;flex-wrap: wrap;gap: 15px 50px;padding: 0;}
#doctor_area .entitle_box {width: 100%;}
#doctor_area .title_box h2 { margin: 0; color: #263837; font-size: clamp(26px,2.4vw,38px); font-weight: 600; letter-spacing: 0.12em; line-height: 1.5; }
#doctor_area .doctor_avatar_box {display: flex;align-items: center;transform: translateY(-8px);}
#doctor_area .doctor_avatar_list { display: flex; align-items: center; }
#doctor_area .avatar_item {position: relative;width: 70px;aspect-ratio: 1/1;border-radius: 50%;overflow: hidden;background: #f3eee6;border: 5px solid #fff;margin-left: -15px;}
#doctor_area .avatar_item:first-child { margin-left: 0; }
#doctor_area .avatar_item img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
#doctor_area .doctor_more {width: 70px;aspect-ratio: 1/1;margin-left: -15px;border-radius: 50%;background: var(--complement);color: #fff;display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: 600;letter-spacing: 0.04em;z-index: 2;border: 5px solid #fff;}
#doctor_area .doctor_desc { justify-self: end; padding-bottom: 12px; }
#doctor_area .doctor_desc h1 {margin: 0;color: #6f7f7d;font-size: 16px;font-weight: 400;letter-spacing: 0.08em;line-height: 2;word-break: keep-all;}
#doctor_area .doctor_slider_wrap {position: relative;}
#doctor_area .doctor_slider { margin: 0 -14px; }
#doctor_area .doctor_item {padding: 0 15px;}
#doctor_area .doctor_card {position: relative;background: #fff;border-left: 1px solid rgba(26,133,132,0.08);transition: transform 0.45s ease,box-shadow 0.45s ease;}
#doctor_area .doctor_card .img_box {position: relative;display: flex;width: 100%;aspect-ratio: 1/1;overflow: hidden;background: #555;}
#doctor_area .doctor_card .img_box img {position: relative;z-index: 2;width: 100%;aspect-ratio: 1/1;object-fit: cover;}
#doctor_area .doctor_card:hover .img_box img { transform: scale(1.04); }
#doctor_area .doctor_card .info_box {padding: 35px 40px 10px;}
#doctor_area .doctor_card .h3 {margin: 0 0 18px;color: #263837;font-size: 21px;font-weight: 600;letter-spacing: 0.08em;line-height: 1.5;font-family: 'Noto Serif TC';}
#doctor_area .doctor_content {color: #6f7f7d;font-weight: 400;letter-spacing: 0.04em;line-height: 2;}
#doctor_area .doctor_content p { margin: 0 0 16px; }
#doctor_area .doctor_arrow {position: absolute;top: 30%;z-index: 5;width: 66px;aspect-ratio: 1/1;border-radius: 50%;background: rgba(255,255,255,0.96);box-shadow: 0 16px 38px rgba(38,56,55,0.16);display: flex;align-items: center;justify-content: center;cursor: pointer;transition: background 0.35s ease,transform 0.35s ease,color 0.35s ease;}
#doctor_area .doctor_arrow span {color: #263837;font-size: 34px;font-weight: 300;line-height: 1;transform: translateY(-2px);font-family: "Cormorant", serif;}
#doctor_area .doctor_arrow:hover {background: var(--primary);transform: translateY(-3px);}
#doctor_area .doctor_arrow:hover span { color: #fff; }
#doctor_area .doctor_prev {left: -35px;}
#doctor_area .doctor_next {right: -35px;}
#doctor_area .doctor_more_btn { margin-top: 70px; text-align: center; }

/* service_area */
#service_area {position: relative;background: linear-gradient(
180deg, #f7f6f5 0%, #ffffff 100%);}
#service_area::before {content: "";position: absolute;left: 50%;top: -52px;width: 120%;height: 90px;background: #f7f6f5;border-radius: 50% 50% 0 0;transform: translateX(-50%);}
#service_area .workframe{width: min(90%, 1600px);}
#service_area .title_box {z-index: 2;display: flex;align-items: center;justify-content: center;padding-bottom: 3vw;flex-direction: column;}
#service_area .service_grid {position: relative;z-index: 2;display: grid;grid-template-columns: repeat(4,1fr) 240px;gap: 14px;}
#service_area .item_box {position: relative;padding: 30px 20px;border-radius: 20px;background: #f2eeea;text-align: center;overflow: hidden;transition: all 0.35s ease;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;white-space: unset;}
#service_area .item_box::before {content: "";position: absolute;inset: auto 0 0 0;height: 0;background: var(--secondary);transition: height 0.35s ease;z-index: 0;}
#service_area .item_box > * {position: relative;z-index: 1;display: flex;flex-direction: column;align-items: center;}
#service_area .item_box:hover { transform: translateY(-8px); box-shadow: 0 22px 42px rgba(75,95,94,0.13); }
#service_area .item_box:hover::before { height: 100%; }
#service_area .item_box svg{width:22px;height: 22px;}
#service_area .icon_box  {width: 70px;aspect-ratio: 1/1;margin: 0 auto 18px;transition: color 0.35s ease;}
#service_area .item_box:hover img, #service_area .all_service img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#service_area .icon_box img{width:100%;aspect-ratio: 1/1;object-fit: contain;}
#service_area .info_box .h3 {margin: 0 0 9px;color: #263737;font-size: 19px;font-weight: 600;line-height: 1.45;transition: color 0.35s ease;text-align: center;font-family: 'Noto Serif TC';}
#service_area .info_box p {margin: 0;color: #657170;font-size: 15px;line-height: 1.8;transition: color 0.35s ease;word-spacing: 100vw;text-align: center;}
#service_area .item_box:hover .info_box .h3,#service_area .item_box:hover .info_box p { color: #fff; }
#service_area .all_service {background: var(--primary);color: #fff;align-items: center;grid-column: 5 / 6;grid-row: 1 / 3;display: flex;justify-content: center;}
#service_area .all_service:before{background:var(--triadic1)}
#service_area .all_service .h3{margin-bottom:40px;}
#service_area .all_service .info_box .h3,#service_area .all_service .info_box p { color: #fff; }
#service_area .all_service i { margin-top: 18px; font-size: 24px; transition: transform 0.35s ease; }
#service_area .all_service:hover i { transform: translateX(8px); }

/* guide_area */
#guide_area { position: relative; padding: 0 0 92px; background: #fff; }
#guide_area .guide_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
#guide_area .item_box { position: relative; min-height: 190px; padding: 46px 52px; border-radius: 24px; overflow: hidden; background: #f8f5ef; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#guide_area .item_box::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(248,245,239,0.96) 0%,rgba(248,245,239,0.76) 46%,rgba(248,245,239,0.12) 100%); z-index: 1; }
#guide_area .item_box .bg_img {position: absolute;inset: 0;width: 100%;height: 110%;object-fit: cover;transition: transform 0.7s ease;}
#guide_area .item_box:hover .bg_img { transform: scale(1.06); }
#guide_area .info_box {position: relative;z-index: 2;display: flex;flex-direction: column;align-items: flex-start;}
#guide_area .title_box {display: flex;align-items: baseline;margin-bottom: 10px;padding: 0;gap: 10px;}
#guide_area .title_box h2 {font-size: 30px;letter-spacing: 2px;}
#guide_area .title_box .entitle_box { font-size: 18px; }
#guide_area .info_box p { margin: 0 0 22px; color: #5e6c6b; font-size: 16px; line-height: 1.9; }

@media screen and (max-width: 1400px) {
	#feature_area .feature_list{width:70%}
}
@media screen and (max-width: 1280px) {
	#feature_area .feature_list{grid-template-columns: repeat(2, 1fr);width: 60%;}
    #feature_area .workframe{width:min(90%, 1000px)}
}
@media screen and (max-width: 1024px) {
    #service_area .service_grid{grid-template-columns: repeat(3, 1fr);}
    #service_area .all_service{grid-column:unset;grid-row: unset;}
    #doctor_area{padding-bottom: 13vw;}
    #about_area .about_grid{display:flex;flex-direction: column;gap: 30px;}
}
@media screen and (max-width: 980px) {
    #guide_area .guide_grid{grid-template-columns:1fr}
    section .title_box .entitle_box{font-size:50px;}
    section .title_box h2{font-size:30px;}
	#product_list { width: 500px; }
	#product_list li .clip { height: 590px; }
	#about_area #about_info { margin-bottom: 8vw; }
	#about_area .about_sub_2 { top: auto; bottom: 35vw; width: 35vw; }
	#about_area .about_sub_3 { width: 29vw; left: 10vw; }
}
@media screen and (max-width: 760px) {
	section { padding: 8vw 0 2vw; }
	#product_sub_list>div { margin: 10px auto 50px; }
	#product_sub_list li { width: 150px; }
	#product_sub_list li .clip { height: 150px; }
	#product_list { width: 70vw; }
	#product_list li .clip { height: 80vw; }
	#product_list li .info_box { width: 45vw; height: 30vw; }
}
@media screen and (max-width: 550px) {
    #doctor_area .doctor_desc{margin-top:20px;}
    #guide_area{padding-bottom:12vw}
    #service_area .service_grid{grid-template-columns: 1fr;}
    #service_area .title_box{padding-bottom:40px;}
    #doctor_area .doctor_more_btn{margin-top:50px;}
    #doctor_area .doctor_card .info_box{padding: 28px 25px 10px;}
    #doctor_area .doctor_prev {left: -5px;}
    #doctor_area .doctor_next {right: -5px;}
    #doctor_area .doctor_arrow{width:50px}
    #doctor_area .doctor_item{padding:0 35px;}
    #doctor_area{padding: 15vw 0 30vw;}
    #doctor_area .doctor_head{display: block;flex-direction: column;align-items: flex-start;padding-bottom: 35px;}
    #about_area .num_box{display:grid;grid-template-columns: repeat(3, 1fr);padding: 25px;gap: 25px;}
    #about_area .rightBox{grid-template-columns:1fr;border-radius: 35px;}
    section .title_box .entitle_box{font-size:40px;}
    section .title_box h2{font-size: 25px;}
    #feature_area .workframe:before{background: linear-gradient(to bottom, rgb(247 246 245) 50%, rgb(247 246 245 / 0%) 100%);}
    #feature_area .workframe:after{width:100%;height: 50%;bottom: 0;top: unset;}
    #feature_area .info_box .h3{font-size:18px;}
    #feature_area .info_box p{font-size:14px;}
    #feature_area .feature_list{width: 90%;margin: 0 auto 50px;gap: 35px 15px;}
    #feature_area .item_box{grid-template-columns: 35px 1fr;gap: 15px;}
    #feature_area .workframe{padding: 12vw 0 50vw;width: 100%;}
	#guide_area .item_box{padding: 35px 30px;}
    #guide_area .title_box{flex-direction: column;}
    #guide_area .item_box .bg_img{height:120%}
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}