@import url(notosanstc.css);

/* ===== Banner ===== */
.banner{ display:block; }
.banner_mb{ display:none; }
.banner img,.banner_mb img { max-width:100%; height:auto; }

/* ===== Lattice / 內容區塊 ===== */
.lattice .float_group > div { width:60%; overflow:hidden; text-align:center; }
.lattice .float_group > div.small { width:40%; }
.lattice .float_group > div.first { width:80% !important; overflow:hidden; text-align:center; margin:auto; }
.lattice .float_group > div img { max-width:100%; vertical-align:middle; margin:0; }
.lattice .float_group > div .title { text-align:center; font:normal normal bold 32px/46px Noto Sans TC Bold; letter-spacing:0; color:#78B43C; }
.lattice .float_group > div .title span { text-align:center; font:normal normal bold 28px/28px Noto Sans TC Bold; letter-spacing:0; color:#78B43C; }
.lattice .float_group > div .title2 { text-align:center; font:normal normal bold 35px/42px Noto Sans TC Bold; letter-spacing:0; color:#78B43C; padding:2.5vw 0 0; }
.lattice .float_group > div .text { text-align:center; font:normal normal normal 22px/32px Helvetica Neue; letter-spacing:0; color:#707070; margin:30px auto; width:80%; }
.lattice .float_group > div .textfirst { text-align:center; font:normal normal normal 22px/32px Helvetica Neue; letter-spacing:0; color:#707070; margin:0 auto; width:85%; padding:40px 0 40px; }
.lattice .float_group > div .textsecond { text-align:center; font:normal normal normal 22px/32px Helvetica Neue; letter-spacing:0; color:#707070; margin:0 auto; width:85%; padding:15px 0 15px; }
.lattice .float_group > div .padding20{padding:30px 0 20px; }
.lattice .float_group > div .textfirst h1,.lattice .float_group > div .textfirst h2,
.lattice .float_group > div .textsecond h1,.lattice .float_group > div .textsecond h2 { text-align:center; font:normal normal bold 35px/42px Noto Sans TC Bold; letter-spacing:0; color:#78B43C; margin:0 auto; padding:0; }
.lattice .float_group > div .textfirst p { padding:20px 0 0; margin: 0px;font:normal normal normal 22px/32px Helvetica Neue; }

.bggreen,.bggreen2{
	background:#e6f4dc; padding: 15px 0px;
}
.bg1{ text-align:right;}
.bg2{ text-align:left; padding-top:20px;}
.bg1 img, .bg2 img{ max-width:100%}
.container {position: relative;	width: 100%;max-width: 1200px;	height: 400px; 	margin: 40px auto;}
.image-wrapper {	position: absolute;	width: 320px;	height: 320px;	border-radius: 50%;	overflow: hidden;background-color: #fff;	z-index: 1; }
.image-wrapper img {width: 100%;height: 100%;object-fit: cover;display: block;}
.img-left {	top: 0;	left: 0;}
.img-right {bottom: 0;	right: 0;}
.text-card {position: absolute;	background-color: #fce75a;	border-radius: 20px;padding:10px 15px;	text-align: center;	z-index: 2; width: 100%;max-width: 650px; }
.card-top {	top: 0px;left: 48%;	transform: translateX(-50%);margin-left: -20px; }
.card-bottom {	bottom: 0px;left: 52%;transform: translateX(-50%);margin-left: 20px;}
.text-card h2 {	font:normal normal bold 30px/42px Noto Sans TC Bold; color:#78B43C;	letter-spacing: 1px;margin:0px;}
.text-card p {color: #707070;font: normal normal normal 22px / 32px Helvetica Neue;	margin:0px;}
.features-container {max-width: 1200px;width: 100%;margin: 0 auto;}
.main-title {color: #63a83f;font-size: 2.2rem;font-weight: bold;text-align: center;margin-bottom: 50px;letter-spacing: 2px;}
.features-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 40px;}
.feature-item {	display: flex;	flex-direction: column; align-items: center;}
.feature-img {width: 100%;max-width: 260px;aspect-ratio: 1 / 1;	border-radius: 50%;	overflow: hidden;margin-bottom: 25px;box-shadow: 0 4px 10px rgba(0,0,0,0.05);flex-shrink: 0;}
.feature-img img {width: 100%;height: 100%;object-fit: cover;display: block;}
.feature-content {text-align: center;}
.feature-item h3 {	color: #63a83f;font:normal normal bold 32px/46px Noto Sans TC Bold; color:#78B43C;letter-spacing: 1px;	margin:0px;}
.feature-item p {color: #707070;font: normal normal normal 22px / 32px Helvetica Neue;padding: 0 20px; }

/* 平板尺寸：變成兩欄 */
@media (max-width: 992px) {
	.features-container {grid-template-columns: repeat(2, 1fr);	gap: 50px 30px;	}
}
.section-container {max-width: 1100px;width: 100%;margin: 0 auto;}
.section-title {font: normal normal bold 35px / 42px Noto Sans TC Bold;letter-spacing: 0;color: #78B43C;text-align: center;	margin-bottom: 50px;}
/* 網格容器：4欄佈局 */
.grid-container {display: grid;	grid-template-columns: repeat(4, 1fr); 	gap: 40px 20px; }
/* 單一痛症項目*/
.pain-item {display: flex;flex-direction: column;align-items: center; text-align: center; }
/* 圖示容器 */
.icon-wrapper {	width: 180px;height: 180px;	margin-bottom: 20px;transition: transform 0.3s ease; }
.icon-wrapper img {	width: 100%;height: 100%;object-fit: contain;display: block;}
.pain-item:hover .icon-wrapper {transform: scale(1.05);}
.pain-title {	color: #707070;	font: normal normal bold 22px / 24px Helvetica Neue;font-weight: bold;margin-bottom: 6px;}
.pain-subtitle {color: #707070; font: normal normal normal 18px / 18px Helvetica Neue;}

/* 平板尺寸：變成 2 欄 */
@media (max-width: 900px) {
	.grid-container {grid-template-columns: repeat(2, 1fr);gap: 50px 20px;	}
	.section-title {font-size: 1.8rem;	margin-bottom: 20px;}
}
	
/* ===== Form 標題 ===== */
.form_title { background:transparent linear-gradient(90deg,#78B43C 0%,#78B43C 100%) 0 0 no-repeat padding-box; padding:20px 0; text-align:center; }
.form_title .text { text-align:center; font:normal normal bold 35px/42px Noto Sans TC Bold; letter-spacing:0; color:#FFF; }

/* ===== Form Middle (桌面版) ===== */
.form_middle { width:100%; clear:both; position:relative; text-align:center; padding:0; }

/* ===== Form Middle Mobile ===== */
.form_middle_mb { display:none; }

/* ===== Step ===== */
.step { padding:32px 30px 20px; background:#f2f2f2; text-align:center; }
.step .title { text-align:center; font:normal normal bold 35px/42px Noto Sans TC Bold; letter-spacing:0; color:#78B43C; margin:0 0 0px; }
.step .text { text-align:center; font:normal normal normal 22px/32px Noto Sans TC Medium; letter-spacing:0; color:#707070; opacity:1; margin:10px auto 30px; width:60%; position:relative; }
.step .item { display:inline-block; margin:20px 4% 0; }
.step .item .text1 { text-align:center; font:normal normal normal 20px/29px Noto Sans TC Medium; letter-spacing:0; color:#707070; opacity:1; padding-top:15px; }
.step .note { font-size:12px; text-align:right; margin-top:60px; padding-right:10%; }

/* ===== 其他 ===== */
.cardblock { padding:0; display:flex; flex-direction:row; flex-wrap:wrap; }
.cardblockcontent { padding:40px 6% 0; }
.formpic{ margin-top:40px; }
.formpic img{ width:auto; margin:auto; max-width:100%; }
.free1 { max-width:100%; }
.floatingfree{ position:fixed; top:660px; right:0; width:175px; height:258px; z-index:99; cursor:pointer; }


@media (max-width:1024px) {
    .banner{ display:none; }
    .banner_mb{ display:block; }
	.bggreen { padding: 5px 0px 0px 0px;}
	.bggreen2{padding: 0px 0px;}
    .step .text { width:100% !important; }
	.lattice:nth-of-type(2),.lattice:nth-of-type(3),.lattice:nth-of-type(4){  padding:0px 30px;}
	.lattice .float_group > div.first {width:100% !important; }
	.lattice .float_group > div .textfirst { width: 100%; padding:30px 20px 20px;}
    .lattice .float_group > div .text { width:100%; margin:20px auto 0; }
    .lattice .float_group > div .textfirst,
    .lattice .float_group > div .textfirst p,
    .lattice .float_group > div .text { font:normal normal normal 15px/20px Noto Sans HK; }
    .lattice .float_group > div { margin-top:0; width: 100%;float: unset;}    
	.lattice .float_group > div.small { width: 100%;}
	.lattice .float_group > div .textfirst p { padding: 10px 15px 0;}
	.lattice:nth-of-type(3) {padding-bottom: 10px;}
	.cardblockcontent { padding: 20px 6% 0;background: #fff;}
    .form_middle { display:none; }
    .lattice .float_group > div .title,
    .lattice .float_group > div .title2,
    .lattice .float_group > div .textfirst h1,.lattice .float_group > div .textfirst h2,.lattice .float_group > div .textsecond h2,.section-title{ font-size:22px; line-height:28px; padding:0; }
    .lattice .float_group > div .title span { font:normal normal bold 20px/28px Noto Sans TC Bold; }
    .points { padding:0 0 30px; }
    .points h1 { font:normal normal bold 22px/35px Noto Sans TC Bold; padding:16px 0 0; }
    .step .text { margin:10px auto; }
    .step .title { font:normal normal bold 22px/36px Noto Sans TC Bold; margin:0 0 0px; }
    .step .item img{ max-width:80%; }
    .step .item:nth-of-type(1) img,
    .step .item:nth-of-type(2) img{ max-width:81px; }
    .form_title .text { font:normal normal normal 28px/36px Noto Sans TC Bold; }
    .form_title { padding:5px 0; }
    .cardblock { padding: 0px 0px 20px;background: #fff;flex-direction: column;flex-wrap: wrap;margin-bottom: 30px; }
    .videoshow p { margin:10px auto; line-height:35px; }
    .step .text, .step .item .text1 { font:normal normal normal 15px/20px Noto Sans HK; }
	.pain-title { font:normal normal normal 15px/16px Noto Sans HK; }
	.pain-subtitle {  font: normal normal normal 15px / 16px Helvetica Neue;}
	.lattice .float_group > div img.suitable {  max-width: 70%; vertical-align: middle;   margin-top: 20px;}
	.bgyellow{ background:#fff;}
	.section-container { width: 70%;}
	.container {height: auto;display: flex;flex-direction: column;align-items: center;gap: 0px;margin: 20px auto -45px auto;}
	.image-wrapper {position: relative;width: 250px;height:  250px;	}
	.text-card {position: relative;top: -60px;bottom: auto;left: auto;right: auto;transform: none;margin: 0;width: 90%;padding: 10px 25px;}
	.text-card:nth-of-type(2){bottom: -100px;	}
	.img-left { order: 1; }
	.card-top { order: 2; }
	.card-bottom { order: 4; top: -80px;}
	.img-right { order: 3; bottom: 40px;}
	.feature-content h3,.text-card h2 {font-size:20px; line-height:28px;  }
	.feature-content p,.text-card p {font:normal normal normal 15px/20px Noto Sans HK;}
	.grid-container {grid-template-columns: repeat(2, 1fr); gap: 10px;}
	.icon-wrapper {width: 115px;height: 115px;margin-bottom: 10px;}
	.lattice .float_group > div .textsecond {width: 100%; padding: 10px 0 10px;}	

	.features-grid {grid-template-columns: 1fr;	gap: 0; padding:0px 0px;	}
	.feature-item {flex-direction: row; align-items: center;gap: 10px;	padding: 15px 15px;	border-bottom: 5px solid #ffffff; 	}
	.feature-item:last-child {border-bottom: none;}
	.feature-item:nth-child(odd) {flex-direction: row;}
	.feature-item:nth-child(even) {flex-direction: row-reverse;	}
	.feature-img {width: 130px;height: 130px;max-width: none;margin-bottom: 0;	}
	.feature-content {text-align: left;	}
	.feature-item .feature-content {text-align: center;}
	.feature-content h3{text-align: center;    }
	.feature-item p { padding: 0 0px;}
	.donly {
        display: none !important;
    }
}