@charset "utf-8";

.about-us-wrap img { border-radius:30px; display:block; max-width:100%; height:auto; margin:0 auto;}
.about-us-wrap .about-us-img { margin-bottom:30px;}
.about-us01 .about-us-box-text h3 { color: #5b87c4; font-size: 36px; font-weight: bold; margin-bottom: 40px; letter-spacing: 2px; }
.about-us01 .about-us-box { display:flex; gap:20px; margin-bottom:30px; align-items:center;}
.about-us01 .about-us-box-1 {flex-direction:row-reverse;}

.descr { position:relative;}
.about-us-wrap.about-us02 { display:none;}
.service-container { background:url(../Images/Layout/RWD/about-service/services-bg.png) top center no-repeat; background-size:cover; padding:20px 10px; position:relative; margin-bottom:40px; border-radius:30px;}
.service-container:before { content:'Featured Services'; width:100%; height:auto; text-align:center; font-size:10vw; font-family:Arial, Helvetica, sans-serif; color:white; font-style:italic; position:absolute; top:0; left:0; z-index:1; font-weight:lighter; line-height:1;}
.service-container > * { position:relative; z-index:2;}
.service-container .service-header-title { text-align:center; margin-bottom:30px;}
.service-container .features-top { display: flex; justify-content: space-between; align-items: flex-start; width: 840px; max-width:100%; flex-wrap: wrap; margin:0 auto; margin-bottom:90px;}
.service-container .features-top .feature-circle { display: flex; text-decoration: none; width:260px; height:auto; aspect-ratio: 1 / 1; transition: margin-top 0.3s ease; overflow:hidden; position:relative; background-color: #eaf8ff; border: 2px solid #bce0fd; border-radius: 50%;
box-shadow: 10px 17px 20px 0px rgba(0, 0, 0, 0.2);}
.service-container .features-top .feature-circle:hover { margin-top:-10px;  border: 2px solid #f7b52c;
box-shadow: 15px 25px 30px 0px rgba(0, 0, 0, 0.15);}
.service-container .features-top .feature-circle .circle-icon { width:100%; height:auto; background:#d0ecfc; border:5px solid white;border-radius: 50%; transition: all 0.3s ease; position: relative; }
.service-container .features-top .feature-circle:hover .circle-icon { box-shadow: 0 10px 20px rgba(0,0,0,0.1); background:#f7b52c; color:#f7b52c;}
.service-container .features-top .feature-circle .circle-icon img { display:block; position:absolute; margin:0 auto; width:70%; top:10%; left:15%;}
.service-container .features-top .feature-circle .feature-circle-text { font-size:24px; color: #3391c7; text-align: center; transition: color 0.3s; position:absolute; left:0; bottom:10%; font-weight:bold;}
.service-container .features-top .feature-circle:hover .feature-circle-text { color:#fff; }
.service-container .section-title { font-size:40px; color:#5185c5; text-align:center; margin-bottom:40px;}
.service-container .advantages-grid { width:1480px; max-width:100%; display: flex;  gap: 24px; margin:0 auto; margin-bottom: 60px; flex-wrap: wrap; justify-content:space-between;}
.service-container .advantage-card { width:calc( ( 100% - 72px ) / 4 ); background: white; border-radius: 12px; overflow: hidden;box-shadow: 7.5px 13px 70px 0px rgba(138, 117, 96, 0.2);transition: box-shadow 0.3s ease, transform 0.3s ease;}
.service-container .advantage-card:hover { transform: translateY(-5px); box-shadow: 12px 20px 90px rgba(138, 117, 96, 0.15); }
.service-container .advantage-card:active { transform: translateY(2px); box-shadow: 4px 6px 30px rgba(138, 117, 96, 0.3);transition: all 0.1s ease-in; }
.service-container .advantage-card .card-image { width: 100%; aspect-ratio: 350 / 195; object-fit: cover; display: block;}
.service-container .advantage-card .card-content { padding:10px 15px;}
.service-container .advantage-card .card-header { position:relative; display:flex; align-items:center;}
.service-container .advantage-card .card-header .card-number{ font-family:Arial, Helvetica, sans-serif; font-style:italic; font-weight:bold; font-size:50px; color:#d0ecfc; line-height:1; margin-right:5px;}
.service-container .advantage-card .card-header .card-title{ font-weight:bold; font-size:30px; color:#5185c5; line-height:1;}
.service-container .advantage-card .card-header .card-icon { position:absolute; right:-10px; top:-60px; width:100px; height:100px; border-radius: 50%; border:1px solid #ebeae9; background:white; padding:15px;}
.service-container .advantage-card .card-header .card-icon img{ display:block;}
.service-container .advantage-card .card-description { font-size:16px; color:#222; margin:0; padding:0; margin-bottom:15px;}

.service-container .features-grid { width:1100px; max-width:100%; display: flex;  gap: 24px; margin:0 auto; margin-bottom: 60px; flex-wrap: wrap; justify-content:space-between;}
.service-container .feature-card { display:flex; align-items:center; justify-content:flex-end;width:calc( ( 100% - 24px ) / 2 ); border-radius: 12px; height:auto; aspect-ratio: 535 / 260; overflow: hidden;box-shadow: 7.5px 13px 70px 0px rgba(138, 117, 96, 0.2);transition: box-shadow 0.3s ease, transform 0.3s ease;}
.service-container .feature-card-01 { background:url(../Images/Layout/RWD/about-service/services-03-1.jpg) top center no-repeat; background-size:100% auto;}
.service-container .feature-card-02 { background:url(../Images/Layout/RWD/about-service/services-03-2.jpg) top center no-repeat; background-size:100% auto;}
.service-container .feature-card-03 { background:url(../Images/Layout/RWD/about-service/services-03-3.jpg) top center no-repeat; background-size:100% auto;}
.service-container .feature-card-04 { background:url(../Images/Layout/RWD/about-service/services-03-4.jpg) top center no-repeat; background-size:100% auto;}
.service-container .feature-card:hover { transform: translateY(-5px); box-shadow: 12px 20px 90px rgba(138, 117, 96, 0.15); }
.service-container .feature-card:active { transform: translateY(2px); box-shadow: 4px 6px 30px rgba(138, 117, 96, 0.3);transition: all 0.1s ease-in; }
.service-container .feature-card-content { width:55%; float:right; padding-right:90px;}
.service-container .feature-card-title { font-size:30px; color:#5185c5; line-height:1.2; margin:0; padding:0;}
.service-container .feature-card-description { font-size:16px; color:#222; margin:0; padding:0;}

/*FB留言板API*/
.fb-comments-api { margin-bottom:20px;}

.btn-wrap  { -webkit-justify-content:center; justify-content:center; margin-top:30px;}

@media only screen and (min-width:1025px) {
	.about-us01 .ani-content { opacity:0;  transition:opacity .5s;}
	.about-us01 .ani-content.Ani_o { opacity:1;}
	.about-us01 .ani-content.Ani_o .about-us-box-text { opacity:0; transform: translate(-20px, 0px);
	animation:left-to-right_Ani 0.5s forwards linear; animation-delay:0.5s;}
	.about-us01 .ani-content.Ani_o .about-us-box-img { opacity:0; transform: translate(20px, 0px);
	animation:right-to-left_Ani 0.5s forwards linear; animation-delay:0.75s;}
	.about-us01 .about-us-box-2.Ani_o .about-us-box-text { opacity:0; transform: translate(20px, 0px);
	animation:right-to-left_Ani 0.5s forwards linear; animation-delay:0.75s;}
	.about-us01 .about-us-box-2.Ani_o .about-us-box-img { opacity:0; transform: translate(-20px, 0px);
	animation:left-to-right_Ani 0.5s forwards linear; animation-delay:0.5s;}
}
@media only screen and (min-width:0px) and (max-width:1500px) {
	.service-container .advantage-card .card-header .card-title { font-size:24px;}
	.service-container .feature-card-title { font-size:24px;}
}
@media only screen and (min-width:0px) and (max-width:1280px) {
	.service-container .advantages-grid { gap:15px;}
	.service-container .advantage-card { width:calc( ( 100% - 45px ) / 4 );}
	.service-container .advantage-card .card-header .card-number { font-size:40px;}
	.service-container .advantage-card .card-header .card-icon { width:80px; height:80px; top:-40px;}
	.service-container .features-grid { gap:15px; }
	.service-container .feature-card { width:calc( ( 100% - 15px ) / 2 );}
}
@media only screen and (min-width:0px) and (max-width:1200px) {
	.service-container .advantage-card .card-header .card-icon { width:60px; height:60px; top:-30px; right:-5px;}
	.service-container .advantage-card .card-header .card-title { font-size:20px;}
	.service-container .advantage-card .card-description { font-size:14px; margin-bottom:10px;}
	.service-container .feature-card-title  { font-size:20px; margin-bottom:5px;}
	.service-container .feature-card-description { font-size:14px;}
}
@media only screen and (min-width:0px) and (max-width:1024px) {
	.about-us01 .about-us-box { display:block;}
	.about-us01 .about-us-box-text h3 { margin-bottom:0;}
	
	.service-container .features-top { gap:10px; justify-content:center; margin-bottom:80px;}
	.service-container .features-top .feature-circle { width:calc( ( 100% - 20px ) / 3 );}
	
	.service-container .advantage-card { width:calc( ( 100% - 15px ) / 2 );}

	.service-container .feature-card-content { padding-right:80px;}
}
@media only screen and (min-width:0px) and (max-width:900px) {
	.service-container .features-grid { width:480px;}
	.service-container .feature-card { width:100%;}
}
@media only screen and (min-width:0px) and (max-width:768px) {
	.service-container .section-title { font-size:36px;}
	.service-container .features-top { width:480px; max-width:100%; gap:20px; margin-bottom:70px;}
	.service-container .features-top .feature-circle { width:calc( ( 100% - 20px ) / 2 );}
}
@media only screen and (min-width:0px) and (max-width:512px) {
	.service-container .section-title { font-size:30px;}
	.service-container .features-top { width:200px; margin-bottom:60px;}
	.service-container .features-top .feature-circle { width:100%;}
	.service-container .advantages-grid { width:350px;}
	.service-container .advantage-card { width:100%;}
	.service-container .feature-card-content { padding-right:20px;}
	.service-container .feature-card-description {
	/* 1. 設定白色外框，粗細為 3px */
	-webkit-text-stroke: 3px #ffffff;  
	/* 2. 關鍵：設定繪製順序為「先外框，後填色」 */
	paint-order: stroke fill;}
}
@media only screen and (min-width:0px) and (max-width:390px) {
	.service-container .features-top { margin-bottom:50px;}
	.service-container .section-title { font-size:26px;}
}