
/* 改成 visible，避免 sticky 被卡住 */
.wrapper{overflow:visible}
.txdiv {position: sticky;top: 0;filter: grayscale(0) contrast(999) invert(0);}

.topbox{width: 100%;float: left; margin:0;margin-bottom: 80px;}
.toptx{position: absolute;left: 40%; bottom: 28%; width:20%;z-index: 8;color: #fff;letter-spacing:0.3;text-align: center;letter-spacing: 0.1em}
.toptx h3{font-size:20px;line-height: 1.2em;font-weight: 500;margin-bottom:30px;}
.toptx h1{font-size:13px;line-height: 1.2em;}
.toptx h4{font-size:15px;margin-bottom:10px;}
.hero{width:100%;float: left; position:relative;}
.vimeo-container {position: relative;padding-bottom: 60%;padding-top: 0;height: 0;overflow: hidden;}
.vimeo-container iframe{position: absolute;width:113%;height:113%;top: 50%;left: 50%;transform: translate(-50%, -50%);clip-path: ellipse(100% 93% at top);}
.top-tx {position:absolute;left:15%;top:35%;z-index:2;width:70%;text-align: center;color: #ffffff}
.top-tx h1{font-size:60px;margin:0;letter-spacing:0.03em;line-height:1.2em;font-weight: 400;font-family:"Times", "Times New Roman", 'cwTeXFangSong', serif;}
.top-tx .txline{width: 150px;height: 2px;background-color: #fff;display:inline-block;vertical-align: middle}

@media only screen and (max-width: 1600px) {
.topbox{margin-bottom: 70px;}
.toptx{position: absolute;left: 30%; bottom: 38%; width:40%;}
.vimeo-container {padding-bottom: 65%;}
.vimeo-container iframe{width:115%;height:115%}
}
@media only screen and (max-width: 1200px) {
.topbox{margin-bottom: 60px;}
.toptx{position: absolute;left: 25%; bottom: 38%; width:50%;}
.vimeo-container {padding-bottom: 65%;}
}
@media only screen and (max-width: 980px) {
.topbox{margin-bottom: 30px;}
.toptx{position: absolute;left: 18%; bottom: 35%; width:64%;}
.toptx h1{line-height: 1.8em;}
.toptx h3{margin-bottom: 25px;}
.toptx h4{margin-bottom:10px;}
.vimeo-container {padding-bottom:85%;}
.vimeo-container iframe{width:155%;height:155%;clip-path: ellipse(100% 80% at top);}
}
@media only screen and (max-width: 767px) {
.toptx{position: absolute;left: 10%; bottom: 25%; width:80%;}
.toptx h1{line-height: 1.6em;}
.toptx h3{margin-bottom: 20px;}
.vimeo-container {padding-bottom:100%;}
.vimeo-container iframe{width:200%;height:200%;clip-path: ellipse(100% 74% at top);}	
}

.index-b{width:100%; float: left; margin:0;position: relative;}
.indexb-top{width:1400px; margin:0 auto 60px;text-align: center}
.info-title{width:100%;float:left;margin: 0;}
.info-title h2{margin: 0 0 50px; font-size: 14px;}
.info-title h3{margin: 0 0 40px; font-size:30px;line-height: 2em;letter-spacing: 0.2em;font-weight: 400}
.info-title p{line-height:2.2em;font-size: 16px;letter-spacing: 0.2em}
.cir2{position: absolute;bottom: -54%;left: 0;width: 140%; height: 65%; background:#ffffff;border-radius:0 0 50% 50%; margin-left: -20%;z-index:8}
.indexb-box{width:100%;float: left;}
.indexb-container{width:1460px; margin:0 auto;text-align: center}
.indexb-left{width:20%;float: left;margin: 50px 7% 0 0;}
.indexb-left img{max-width:100%;height: 100%;border-radius:43%;display: block}
.indexb-middle{width:46%;float: left;margin-right: 8%}
.indexb-middle img{max-width:100%;height: 100%;border-radius:43%}
.indexb-rightbox{width:19%;height: 530px; float: left;margin:50px 0 0 0;position: relative;}
.indexb-en{width:100%;float: left;margin:0;font-size: 200px;color: #ddd; text-align: right}
.indexb-en img{max-width:70%;height: auto;margin: 0 auto; opacity: 0.1}
.indexb-right{position: absolute;left:0;top:30px; width:100%;height: 500px; float: left;margin:0;-webkit-writing-mode: vertical-lr;writing-mode: vertical-lr;text-align: left;}
.indexb-right p{font-size:20px;line-height:3.5em;margin-top:50px;margin-left: 40px;letter-spacing: 0.3em;}
.indexb-right p:last-child{margin-left: 0}
.indexb-right span{font-size:32px;color: #777;font-weight: 400; letter-spacing: 0.3em;text-orientation: upright;text-combine-upright: all;text-align: center;margin:0 0 5px}
.info-sideright{width:100%;float:left;margin-top: 40px}
.info-stx{width:100%;float:left;line-height:2em;margin: 0 0 30px;padding: 0 15px; font-size: 16px;text-align:justify;}
.linkbox{width:100%;float: left;}
.link-studio{width:150px; text-align:center; margin:0 auto;transition: background-position 0.5s; }
.link-studio a {color: #231815;font-size:15px; width:100%;display:block; background-color:transparent;padding:3px 15px 6px;text-decoration:none;  transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;-o-transition: 0.5s;cursor: pointer; border:0px;border-radius:99em;border: 1px solid #231815;line-height: 34px}
.link-studio a:hover {color: #fff;background-color: #231815;border: 1px solid #231815}

@media screen and (max-width: 1600px) {
.indexb-top{width:1160px; margin:0 auto 55px;}	
.indexb-container{width:1160px;}
}
@media screen and (max-width: 1280px) {
.indexb-top{width:88%; margin:0 auto 50px;}	
.indexb-container{width:88%; margin:0 auto;}
.indexb-left{width:20%;margin: 50px 5% 0 0}	
.indexb-left img,.indexb-middle img{margin: 0 auto}
.indexb-middle{width:47%;margin-right: 4%;}
.indexb-rightbox{width:22%;height: 530px;margin:0;padding-left: 40px;}
.indexb-right p{font-size:20px;line-height:3.3em;margin-top:50px;}
}
@media screen and (max-width: 980px) {
.indexb-top{width:90%; margin:0 auto 40px;}	
.indexb-container{width:90%;}
.indexb-left{width:20%;margin: 20px 5% 0 0}	
.indexb-middle{width:45%;margin-right: 5%}
.indexb-rightbox{width:25%;margin:0;height: 500px;}
.indexb-right p{font-size:18px;line-height:3em;margin-top:20px;}
.info-title h2{margin: 0 0 30px;}
.info-title h3{margin: 0 0 20px; font-size:26px;line-height: 2em;}
.info-stx{margin: 0 0 20px;padding: 0; }
.info-sideright{margin-top: 25px}
.link-studio a {width:140px;padding:3px 12px 6px;}
}
@media screen and (max-width: 767px) {
.indexb-top{margin:0 auto 25px;}	
.indexb-left{width:70%;margin:0 15% 40px;}	
.indexb-middle{width:50%;margin: 50px 5% 0 0}
.indexb-rightbox{width:45%;height: 450px;margin:0;padding-top:0;}
.info-title h2{margin: 0 0 20px;}
.info-title h3{margin: 0 0 20px; font-size:20px;line-height: 1.8em;letter-spacing: 0.1em}
.info-title p{line-height:1.9em;font-size: 16px;}
}

*{box-sizing:border-box}

  /* ── 手風琴本體（全裝置作用）── */
  .service-item-2.is-open .accordion-body {opacity: 1;}
  .service-item-2:not(.is-open) {cursor: pointer;}
  .accordion-body {overflow: hidden;transition:height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),opacity 0.4s ease,margin-top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);opacity: 0;margin-top: 0 !important;}
  .accordion-title {transition: transform 0.3s ease;display: inline-block;}
  .service-item-2:not(.is-open):hover .accordion-title {transform: translateX(20px);}

  /* ── 圖片切換（只在桌機版作用）── */
  @media (min-width: 992px) {
.rizis .service-item-1 {display: none;}
.rizis .service-item-1.is-active {display: block;}
.rizis .service-item-1 .image-left {clip-path: inset(0 0 100% 0);}
.rizis .service-item-1.is-active .image-left {clip-path: inset(0 0 0% 0);transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
  }

:root{--_color-variant---bg-color:#f5f5f5;--_color-variant---text-color:#050505;--_color-variant---secondary-text-color:#a5a5a5;--_color-variant---border-color:#dadada;}body{background-color:var(--_color-variant---bg-color);color:var(--_color-variant---text-color)}
.service2{grid-column-gap:100px;grid-row-gap:100px;flex-flow:column;width:100%;padding-top:2rem;display:flex}
.service-box2{grid-column-gap:1.5rem;grid-row-gap:1.5rem;flex-flow:column;justify-content:space-between;align-items:center;width:100%;padding-bottom:8rem;padding-left:3rem;padding-right:3rem;display:flex;position:relative}

.service{width: 100%;float: left}
.service-box{width: 86%;margin: 120px auto 20px}
.service-title{width: 100%;float: left;font-size:14px;text-align: center;margin-bottom: 60px}
.accordion-text p{text-align:left;letter-spacing:.05em;margin-bottom:0;font-size:15px;font-weight:400;line-height:1.7;}
.service-list{grid-column-gap:16px;grid-row-gap:16px;height:100%}
.accordion-body{grid-column-gap:60px;grid-row-gap:60px;flex-flow:row;justify-content:space-between;align-items:flex-end;width:100%;padding-top:4px;padding-bottom:12px;padding-left:44px;display:flex}
.service-grid{grid-column-gap:40px;grid-row-gap:40px;justify-content:space-between;align-items:flex-start;width:100%;display:flex;position:relative}
.service-list-2{flex-flow:column;display:flex}
.service-right{width:68%}
.service-item-2{border-top:1px solid var(--_color-variant---border-color);background-color:var(--_color-variant---bg-color);justify-content:space-between;align-items:stretch;height:100%;padding-top:40px;padding-bottom:20px;display:flex}
.accordion-text{grid-column-gap:8px;grid-row-gap:8px;flex-flow:column;justify-content:space-between;align-items:flex-start;width:45%;height:100%;display:flex;}
.image-left{object-fit:fill;width:100%}
.accordion-item-inner{flex-flow:column;justify-content:flex-start;width:100%;display:flex}
.accordion-number{justify-content:flex-start;align-items:flex-start;display:flex;color:var(--_color-variant---secondary-text-color);padding-bottom:8px;font-size:18px;font-style:italic;font-weight:400;line-height:100%}
.image-right{object-fit:cover;width:100%;height:100%}
.accordion-img{aspect-ratio:4/3;object-fit:cover;width:300px;overflow:hidden;border-radius: 10px}
.service-item-1{aspect-ratio:4/3;object-fit:cover;width:100%;}
.service-item-1 img{border-radius: 10px}
.accordion-header{grid-column-gap:18px;grid-row-gap:18px;justify-content:flex-start;align-items:center;display:flex}
.service-left{width:32%;position:sticky;top:88px}
.service-tagline{grid-column-gap:1.2rem;grid-row-gap:1.2rem;flex-flow:column;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-left:12rem;padding-right:12rem;display:flex}
.accordion-cn{grid-column-gap:12px;grid-row-gap:12px;flex-flow:column;display:flex;padding-bottom:8px;font-size:20px;font-weight:400;line-height:100%}
.accordion-title{color:var(--_color-variant---text-color);letter-spacing:.03em;font-size:28px;font-weight:500;line-height:1.8}
.service-list-1{width:100%}
@media screen and (max-width: 1600px) {
.service-box{width: 88%;margin: 80px auto 20px}
.accordion-title{font-size:26px;}
}
@media screen and (max-width:991px){
	.accordion-text p{text-align:left;font-size:16px;grid-column-gap:20px;grid-row-gap:20px;padding-top:1rem}
	.service-box{width: 90%;margin: 0 auto;padding-bottom:2rem;padding-left:0;padding-right:0}
	.service-title{margin-bottom: 40px}
	.accordion-number{font-size:16px}
	.accordion-body{grid-column-gap:20px;grid-row-gap:20px;flex-flow:column;justify-content:space-between;align-items:flex-start;padding-top:4px}
	.service-grid{grid-column-gap:24px;grid-row-gap:24px}
	.service-right{width:100%}
	.service-item-2{height:auto}
	.accordion-text{justify-content:space-between;align-items:flex-start;width:100%;height:auto;min-height:auto}
	.accordion-img{aspect-ratio:4/3;width:100%;height:100%}
	.service-item-1{width:100%}
	.service-left{width:50%;display:none}
	.service-tagline{margin-bottom:4rem;padding-left:1.5rem;padding-right:1.5rem}
}
@media screen and (max-width:767px){
.service-box{width: 90%;margin: 40px auto 0;padding-bottom:2rem;}
.service-title{margin-bottom: 30px}
.accordion-title{font-size:22px;}
.service-item-2{padding-top:20px;padding-bottom:0px;}
}

.column{width:100%;float:left;margin:120px auto 110px;display: flex;flex-wrap: nowrap;}
.column::after{content:"";display:block;clear:both;}
.column-inner{width:1400px;margin:0 auto ; position:relative;}
.column-left{position:-webkit-sticky;position:sticky;top:130px;width:21%;margin:0 4% 0 0;z-index:2;will-change:transform;transform:translateZ(0);-webkit-writing-mode: vertical-lr;writing-mode: vertical-lr;text-align: left;letter-spacing: 0.3em;font-size: 20px;line-height:2em;float: left;background-image: url("../images/percent.png");background-repeat: no-repeat;background-position: top left;background-size:50%;padding:40px 0 0 120px}
.column-left span{font-size:22px;letter-spacing: 0.3em;text-orientation: upright;text-combine-upright: all;text-align: center;}
.column-right{width:75%;float: left;margin-left:0;margin-top: 30px;}
.blog-title{width: 100%;float: left; margin-bottom: 30px; font-size: 14px;}
.blog-item{width:100%;-moz-transition: opacity 0.6s, -moz-transform 0.6s;-o-transition: opacity 0.6s, -o-transform 0.6s;-webkit-transition: opacity 0.6s, -webkit-transform 0.6s;transition: opacity 0.6s, transform 0.6s;margin: 25px 0; padding-bottom: 44px; border-bottom: 1px solid #eee;}
.blog-img{width:15%;margin-right: 5%}
.blog-img img {max-width: 100%; height: auto;display: block; border-radius: 10px}
.blog-date{width: 100%; margin-bottom: 10px; font-size:11px;}
.blog-date span{font-size:11px;color: #999;font-weight: 600; margin: 5px 5px 0}
.blog-item a:hover{color: #b05f10;}
.blog-tx{width:80%;letter-spacing: 0.1em;}
.blog-tx h2{ font-size: 19px; margin-bottom: 14px;font-weight: 500;color: #231815; ext-align: justify;line-height: 1.5em}
.blog-tx p{line-height: 1.8em;text-align: justify;font-size: 15px;margin-bottom: 14px;}
.blog-item, .blog-tx, .blog-date, .blog-img{float: left;}

@media only screen and (max-width: 1600px) {
.column{margin:70px 0;}
.column-inner{width:1160px;}
.column-left{background-size:50%;padding:40px 0 0 100px}
}
@media only screen and (max-width: 1280px) {
.column{margin:50px 0;}
.column-inner{width:88%;}
.column-left{top:110px;width:21%;margin:0 4% 0 0;font-size: 18px;}
.column-right{margin-top: 20px;}
.blog-item{margin: 20px 0; padding-bottom: 30px; }
}

@media only screen and (max-width: 980px) {
.column{margin:0 0 40px;}
.column-inner{width:90%;}
.blog-item{margin:20px 0; padding-bottom: 15px; }
.column-left{position:static;width:100%;margin:0; font-size: 18px;line-height:1.7em;-webkit-writing-mode: horizontal-tb;writing-mode: horizontal-tb;letter-spacing: 0.1em;background-size:160px;padding:30px 0 30px 145px}
.column-right{width:100%;margin:20px 0 0 0}	
.blog-title{margin-bottom: 10px; }
}
@media only screen and (max-width: 767px) {
.column{margin:15px 0 25px;}
.column-left{font-size: 18px;background-size:130px;padding:10px 0 10px 125px;}
.blog-img{width:100%;margin:0 0 20px}
.blog-tx{width:100%;letter-spacing: 0.1em;}
}


