/* #product_area */
#product_area.list_box ul li {transform:translate(0,0);-webkit-transform:translate(0,0)}

/* #book_area */
#book_area.list_box li.img_box:before,#book_area.list_box li.img_box:after {transform:scaleY(0);-webkit-transform:scaleY(0)}
#book_area.list_box li.img_box:after {transform-origin:center bottom;-webkit-transform-origin:center bottom}

/* #youtube_box */
#youtube_box a {width:83px;height:83px;border-radius:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-webkit-animation:spineer 2s infinite;animation:spineer 2s infinite}

/* #wrap */
#wrap {z-index:6;position:relative;width:100vw;background-color:#ffffff}
.midtexrb img {animation:rotate3 8s ease-in-out infinite;transform-origin:100% 100%}
@keyframes rotate3{0%,100%{transform:rotate(30deg)}50%{transform:rotate(-10deg)}}

/* #openform */
#openform {background:rgba(var(--white-rgb),.3)}
section.section_pad {padding:5vw 0;background-color:#f0f0f0}
section>* {z-index:3}
section .title_box {margin-bottom:30px}
section .title_box .area_title {font-weight:400;font-size:max(1.2*(1vw+1vh) / 2,21px);line-height:100%;color:#898989}
section .title_box .sub_title {font-weight:300;font-size:max(3.7*(1vw+1vh) / 2,37px);color:#898989;text-transform:uppercase}
.webBox .hanJ01 .pageh1 {position:relative;animation:unset;top:auto;font-size:18px;font-weight:300;display:flex;align-items:center;gap:7px}
.webBox .hanJ01 .pageh1:before,.webBox .hanJ01 .pageh1:after {content:"";position:relative;display:flex;width:5px;aspect-ratio:1/1;background:#9d9d9e}
a.fmlink {display:flex;height:auto;width:110px;margin-top:60px;padding:12px 20px;justify-content:center;color:white;font-size:max(1.15 * (1vw+1vh) / 2,14px);background:#86968e;border-radius:6666px;box-shadow:inset 0 -1em 3em rgb(45 78 87 / 53%),0 0 0 0px white,0.1em 0.1em 1em rgb(116 116 116 / 34%)}
a.fmlink:hover {background:#69a886}
a.fmlink svg {fill:white;width:20px;aspect-ratio:1/1}
.bg_box {width:100%;height:100%;background:no-repeat 50%/cover;background-attachment:fixed;opacity:.3;top:0;left:0}
.bg_box:before {width:100%;height:100%;display:block;background:rgb(255 255 255 / 20%);content:""}
.bg_box.white:before {background:rgba(var(--white-rgb),.2)}
.ml11,.ml112 {position:relative;font-weight:700;text-align:center;opacity:0}
.ml11 .text-wrapper,.ml112 .text-wrapper {position:relative;display:inline-block}
.ml11 .line,.ml112 .line {opacity:0;position:absolute;left:0;height:70%;width:1px;background-color:#4d4d4d;transform-origin:0 50%}
.ml11 .line1,.ml112 .line {top:15%;left:0}
.ml112 .line {transform:translateX(0)}
.ml11 .line1 {display:none}
.ml11 *,.ml112 * {transition:all 0s ease-in-out;-webkit-transition:all 0s ease-in-out}
.letters {display:flex;width:100%;justify-content:flex-start}
.ml11 .letter,.ml112 .letter {display:inline-block}
.ml112 .letter {opacity:0}
.Jamore {display:flex}
.Jamore a {display:flex;align-items:center;padding:20px 30px;border-radius:300px;border:#959595 1px solid;justify-content:space-between;width:230px}
.Jamore a:hover {background:var(--primary)}
.Jamore a:hover span {color:white}
.Jamore a:hover svg {fill:white}
.Jamore a span {font-weight:500}
.Jamore a svg {width:20px}
.maloogo {position:absolute;right:5%;bottom:0}
.maloogo.boo2 {bottom:auto;top:0}

/* #banner_newbox */
#banner_newbox {width: 33vw;position:absolute;z-index:666;right: 13vw;margin-top: -6vw;z-index:9487;padding: 0vw 2vw 0vw 48vw;background: linear-gradient(to left, rgb(113 77 46 / 86%), rgb(0 0 0 / 0%));height: 6vw;display: flex;align-items: center;}
#banner_newbox .nwblist {position: relative;display:grid;grid-template-columns: 30% 67%;gap:3%;align-items:center;margin:5px 0}
#banner_newbox .nwblist * {line-height:1.5}
#banner_newbox .nwblist * {color:white;font-family:'Noto Serif TC'}
#banner_newbox .nwblist .nwbdate {display:flex;background:var(--primary);padding:5px;color:white;justify-content:center;align-items:center;font-size:12px;display: none;}
#banner_newbox .nwblist .nwbtitle {font-size:16px;background: var(--primary);padding: 0 8px;text-align: center;}
#banner_newbox .nwblist .nwbinfo {font-size:14px;height:22px}
#banner_newbox .clamptext {overflow:hidden;margin:0px 0;height:26px;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.arrow_boxJ {display:flex;gap:20px}
.arrow_boxJ .btmJ {cursor:pointer}
.ceeservice {position:absolute;margin-top:-230px}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-20px)}100%{transform:translateY(0)}}

/* #indexbook_area */
#indexbook_area {position:relative;min-height:clamp(820px,48vw,890px);overflow:hidden;background:var(--design-paper)}
#indexbook_area .twoo_JJbg {position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}
#indexbook_area .twoo_JJbg .twooright {position:absolute;top:0;right:0;bottom:0;left:0;background:var(--design-paper);z-index:0}
#indexbook_area .twoo_JJbg .twooleft {position:absolute;top:0;overflow:hidden;z-index:1}
#indexbook_area .twoo_JJbg .twooleft:nth-child(1) {left:0;width:52%;height:64%}
#indexbook_area .twoo_JJbg .twooleft:nth-child(2) {right:0;width:48%;height:76%}
#indexbook_area .twoo_JJbg .twooleft::after {content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}
#indexbook_area .twoo_JJbg .twooleft:nth-child(1)::after {background:linear-gradient(90deg,rgba(250,248,244,.05) 0%,rgba(250,248,244,.48) 100%)}
#indexbook_area .twoo_JJbg .twooleft:nth-child(2)::after {background:linear-gradient(135deg,rgba(59,67,72,.16) 0%,rgba(35,42,46,.62) 100%)}
#indexbook_area .twoo_JJbg .twooleft img {width:100%;height:100%;display:block;object-fit:cover;object-position:center}
#indexbook_area>.workframe {position:relative;width:auto;max-width:none;min-height:inherit;margin-right:0;margin-left:7vw;z-index:2}
#indexbook_area .case_box {display:grid;grid-template-columns:45vw 48vw;min-height:inherit}
#indexbook_area .case_left {position:relative;min-width:0;padding:90px clamp(46px,4.4vw,86px) 30px 0;z-index:2}
#indexbook_area .case_left .common_titlebox::after {content:"";position:absolute;top:-23px;right:-23px;width:54px;height:54px;border-top:1px solid rgba(198,166,95,.4);border-right:1px solid rgba(198,166,95,.4)}
#indexbook_area .gogoinfo {position:relative;max-width:520px;margin:28px 0 33px;padding-left:24px;border-left:1px solid rgba(198,166,95,.48)}
#indexbook_area .gogoinfo p {margin:0;font-size:15px;font-weight:400;line-height:2.05;letter-spacing:.08em;color:var(--design-text)}
#indexbook_area .booklist {display:flex;gap:26px;width:100%;margin:0;padding:0;overflow:hidden}
#indexbook_area .booklist.slick-initialized {display:block;overflow:visible}
#indexbook_area .booklist .slick-list {margin:0 -13px;overflow:hidden}
#indexbook_area .booklist .slick-track {display:flex}
#indexbook_area .booklist .slick-slide {height:auto;margin:0 13px;display:flex}
#indexbook_area .booklist li {position:relative;min-width:0;margin:0;padding:0;list-style:none}
#indexbook_area .booklist .img_box {position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--design-taupe)}
#indexbook_area .booklist .img_box::before {content:"";position:absolute;right:0;bottom:0;left:0;height:50%;background:linear-gradient(to top,rgba(29,34,37,.68) 0%,rgba(29,34,37,0) 100%);z-index:1;transition:height .55s ease,background .55s ease}
#indexbook_area .booklist .img_box::after {content:"";position:absolute;top:15px;right:15px;width:28px;height:28px;border-top:1px solid rgba(255,255,255,.6);border-right:1px solid rgba(255,255,255,.6);opacity:0;z-index:2;transform:translate(-7px,7px);transition:opacity .45s ease,transform .45s ease}
#indexbook_area .booklist .img_box img {width:100%;height:100%;display:block;object-fit:cover;object-position:center;transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .8s ease}
#indexbook_area .booklist .teeetx {position:absolute;right:19px;bottom:20px;left:19px;padding-left:20px;font-size:14px;font-weight:400;line-height:1.6;letter-spacing:.08em;color:#fff;z-index:2;transition:transform .45s ease}
#indexbook_area .booklist .teeetx::before {content:"";position:absolute;top:50%;left:0;width:7px;height:7px;border:1px solid var(--design-gold);transform:translateY(-50%) rotate(45deg)}
#indexbook_area .booklist .masklink {position:absolute;top:0;right:0;bottom:0;left:0;display:flex;z-index:4}
#indexbook_area .booklist .masklink:focus-visible {outline:2px solid var(--design-gold);outline-offset:-5px}
#indexbook_area .booklist li:hover .img_box img {transform:scale(1.045);filter:brightness(.9)}
#indexbook_area .booklist li:hover .img_box::before {height:62%;background:linear-gradient(to top,rgba(29,34,37,.8) 0%,rgba(29,34,37,0) 100%)}
#indexbook_area .booklist li:hover .img_box::after {opacity:1;transform:translate(0,0)}
#indexbook_area .booklist li:hover .teeetx {transform:translateY(-5px)}
#indexbook_area .case_actions {display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:28px}
#indexbook_area .learrow {display:flex;align-items:center;flex-shrink:0}
#indexbook_area .arrow_boxJ {display:flex;align-items:center;gap:7px}
#indexbook_area .btmJ {position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:34px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;transition:opacity .35s ease,transform .35s ease}
#indexbook_area .btmJ img {display:block;width:36px;max-height:16px;object-fit:contain;filter:brightness(0) saturate(100%) invert(23%) sepia(7%) saturate(669%) hue-rotate(163deg) brightness(94%) contrast(88%)}
#indexbook_area .btmJ.pre:hover {transform:translateX(-4px)}
#indexbook_area .btmJ.nex:hover {transform:translateX(4px)}
#indexbook_area .btmJ:focus-visible {outline:1px solid var(--design-gold);outline-offset:2px}
#indexbook_area .btmJ.slick-disabled {opacity:.3;pointer-events:none}
#indexbook_area .number {display:flex;align-items:center;gap:14px;margin-left:15px;padding-left:19px;border-left:1px solid rgba(59,67,72,.28);font-size:12px;font-weight:400;line-height:1;color:#82766b}
#indexbook_area .number .cumber {min-width:22px;color:var(--design-dark)}
#indexbook_area .number .tatal {min-width:22px;color:var(--design-light-text)}
#indexbook_area .number_line {color:rgba(59,67,72,.35)}
#indexbook_area .case_actions .common_more_btn {width:203px;height:54px}

#indexbook_area .case_right {position:relative;min-width:0;min-height:inherit;overflow:hidden}
#indexbook_area .case_right::before {content:"";position:absolute;top: 50px;right: 110px;width:70px;height:70px;border-top:1px solid rgba(198,166,95,.6);border-right:1px solid rgba(198,166,95,.6);z-index:5;pointer-events:none}
#indexbook_area .case_right::after {content:"SELECTED  /  PROJECT";position:absolute;right:38px;bottom:80px;font-size:8px;font-weight:500;line-height:1;letter-spacing:.3em;color:rgba(59,67,72,.48);z-index:5;pointer-events:none}
#indexbook_area .bigimg {position:relative;width:100%;height:100%;min-height:inherit;overflow:hidden}
#indexbook_area .bigimg::before {content:"";position:absolute;top:0;right:0;width:53%;height:76%;background-color:var(--design-dark);background-image:linear-gradient(135deg,rgba(113,129,142,.2) 0%,rgba(59,67,72,.18) 42%,rgba(34,40,44,.62) 100%),url("/images/40/cacabook-2.jpg");background-position:center;background-size:cover;z-index:1}
#indexbook_area .bigimg::after {content:"Everyday and Future";position:absolute;top:23px;left:58.5%;writing-mode:vertical-rl;font-size: clamp(22px,3vw,30px);font-weight:400;line-height:1;letter-spacing:.10em;color:rgba(242,239,234,.8);z-index:4;pointer-events:none}
#indexbook_area .bigimg>img {position:absolute;top:0;left: -2px;width:48%;height: 98%;display:block;object-fit:cover;object-position:center;box-shadow:9px 5px 10px rgb(27 32 35 / 12%);z-index:3;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter 1.2s ease;border-radius: 0 0 888px 888px;}
#indexbook_area .case_right:hover .bigimg>img {filter:brightness(.95)}
#indexbook_area .seinfobook {position:absolute;right:7vw;bottom:32%;left:57%;padding-left:25px;font-size:15px;font-weight:400;line-height:2.05;letter-spacing:.09em;color:rgba(255,255,255,.94);z-index:4}
#indexbook_area .seinfobook::before {content:"";position:absolute;top:16px;right:100%;width:clamp(105px,14vw,200px);height:1px;margin-right:18px;background:linear-gradient(to left,rgba(255,255,255,.95) 0%,rgba(198,166,95,.78) 62%,rgba(198,166,95,0) 100%)}
#indexbook_area .seinfobook::after {content:"";position:absolute;top:13px;left:0;width:5px;height:5px;background:var(--design-gold);transform:rotate(45deg)}
#indexbook_area .seinfobook h1 {font-size:1.05rem}

/* #newsJ_area */
#newsJ_area {padding:100px 0 280px;background:#ffffff}
#newsJ_area {display:flex;justify-content:flex-end}
#newsJ_area:before {content:"";width:100%;height:100%;position:absolute;background-image:url(/images/40/nwdb_bg.png);background-size:cover;background-position:50% 60%}
#newsJ_area .mewn_img {position:absolute;left:8vw;z-index:0;width:32vw}
#newsJ_area .mewn_img:before {content:"";position:absolute;width:100%;height:100%;background:#116537;z-index:-1;left:-2vw;top:-3vw;border-radius:0px 0px 0px 40px}
#newsJ_area .mewn_img img {width:min(600px,100%);border-radius:0px 40px 0px 0px}
#newsJ_area .workframe {width:min(1290px,70vw);margin:0;display:flex;flex-direction:column;align-items:flex-end;margin-top:36px}
#newsJ_area .JJtitle {display:flex;flex-direction:row;align-items:center}
#newsJ_area .wenGbox {width:79%}
#newsJ_area .luenbuom {display:flex;align-items:center;margin:60px 0;margin-left:140px}
.lusanline {position:relative;height:2px;border-bottom:#dcdcdc 1px solid;margin-right:12vw}
.lusanline span {width:50px;height:3px;background:#116537;display:flex}
.lusancall {display:flex;margin-left:140px}
.lusancall svg {width:38px;fill:#595959;margin-right:20px}
.lusancall span {font-size:max(3.6*(1vw+1vh) / 2,26px);color:#595959;font-family:"Cinzel Decorative",serif;font-weight:700}
#newsJ_area .luenbuom .luenntext {position:relative;padding-left:30px;margin-left:30px;display:flex;align-items:center}
#newsJ_area .luenbuom .luenntext:before {content:"";position:absolute;width:2px;height:50%;background:#929292;left:0px}
#newsJ_area .newsJlist {padding:16px 10%;background:#f4f4f4}
#newsJ_area .newsJlist .nwenboix {margin:10px;position:relative}
#newsJ_area .newsJlist .nwenboix:hover .neneinfo {-moz-transform:translateY(-0.25em);-webkit-transform:translateY(-0.25em);-o-transform:translateY(-0.25em);-ms-transform:translateY(-0.25em);transform:translateY(-0.25em)}
#newsJ_area .newsJlist .nwenboix a.mmasklink {position:absolute;width:100%;height:100%;z-index:96}
#newsJ_area .newsJlist .nwenboix .neneimgbox {display:flex;flex-direction:column;align-items:center}
#newsJ_area .newsJlist .nenelink svg {width:25px}
#newsJ_area .newsJlist .neneinfo {position:relative;width:90%;border-bottom:dashed 2px #a5a5a5;z-index:22;padding:15px 80px 15px 150px;display:flex;align-items:center;justify-content:space-between}
#newsJ_area .newsJlist .neneinfo:before {content:"";position:absolute;width:10px;aspect-ratio:1/1;background:#7a7a7a;aspect-ratio:1/1;margin-left:-50px;border-radius:55px}
#newsJ_area .newsJlist .nenelink a {display:flex;justify-content:flex-end;color:var(--secondary);font-size:max(1*(1vw+1vh) / 2,15px)}
#newsJ_area .newsJlist .nenelink a svg {fill:var(--secondary)}
#newsJ_area .newsJlist .neneinfo h5 {text-align:left;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:max(1.5*(1vw+1vh) / 2,16px);overflow:hidden;color:#565656}
#newsJ_area .newsJlist .neneinfo p {height:63px;width:100%;text-align:left;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px;overflow:hidden;margin:31px 0}
#newsJ_area .newsJlist .neneinfo svg {width:20px;aspect-ratio:1/1}

/* #newsBox2 */
#newsBox2 {padding-bottom:0}
#newsBox2 .info {margin-bottom:50px}
.slick-3d .slide {transform:scale(0.85);opacity:0.6;transition:all 0.6s ease;transform-origin:center center;perspective:1000px}
.slick-3d .slick-center {opacity:1}
.slick-3d .slick-slide {opacity:0}
.slick-3d .slick-slide.slick-active {transform:scale(0.85);transform-style:preserve-3d;perspective:100px;perspective-origin:center center;transition:all linear 0.3s;opacity:1}
.slick-3d .slick-active.slick-current+.slick-slide {transform:rotateY(-15deg) scale(0.9);opacity:1}
.slick-3d .slick-active.slick-current+.slick-slide .mwmimg {transform:rotateY(-2deg)}
.slick-3d .slick-current.slick-center {transform:scale(1.1) rotateY(0deg)}
.slick-3d .slick-active .mwmimg {transform:rotateY(2deg)}
.slick-3d .slick-center .mwmimg {transform:rotateY(0deg)}
.slick-3d .slick-active:first-child {transform:rotateY(15deg) scale(0.85);opacity:0.7}
.slick-3d img {width:100%;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,0.15)}
#newsBox2 .news_list .mdmiJJ {display:flex;align-items:center;justify-content:center}
#newsBox2 .workframe {width:min(100%,1680px)}

#newsBox2 .news_list .mdJbox01 {position:absolute;width:90vw}
#newsBox2 .news_list .mdJbox02 {width:100%}

#newsBox2 .news_list .mdJbox01 .arrow_btns_box {width:100%;display:flex;flex-direction:row;justify-content:space-between}
#newsBox2 .news_list .mdJbox01 .arrow_btns_box .slick-prev {-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1)}
#newsBox2 .mwmtext .h3 {overflow:hidden;margin:10px 0;height:38px;font-size:21px;text-align:left;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
#newsBox2 .mwmtext p.text-clamp {overflow:hidden;margin:10px 0;height:63px;font-size:16px;text-align:left;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#newsBox2 .mwmimg {padding:40px 10px}
#newsBox2 .mwmtext {padding:10px 10px}
#newsBox2 a.fmlink {margin:20px auto 0}
#newsBox2 .bg_box {opacity:1}
#newsBox2 .bg_box:before {height:200%;background:#e0e5e2;opacity:1}

/* #philosophy_area */
#philosophy_area {padding:100px 0 50px;background-image:url(/images/40/philosophy_area_bg.jpg);background-repeat:no-repeat;background-size:cover;background-position:50% 50%}
#philosophy_area:before {content:"";position:absolute;background:url(/images/40/in-ball.png);width:60px;aspect-ratio:1/1;left:13%;top:-2%;background-repeat:no-repeat;background-size:contain;animation:float 3s ease-in-out infinite;z-index:2}
#philosophy_area:after {content:"";position:absolute;background:url(/images/40/in-ball.png);width:60px;aspect-ratio:1/1;right:17%;bottom:-2%;background-repeat:no-repeat;background-size:contain;animation:float 3s ease-in-out infinite;z-index:2}
#philosophy_area .JJtitle {display:flex;flex-direction:column;align-items:center}
#philosophy_area .coomcebox {display:flex;flex-direction:column;align-items:center;margin:0 auto;margin-bottom:60px;margin-top:-35px;width:min(1280px,80%)}
.runingtext>div {position:relative;padding:10px 0;display:flex;text-align:center;transition:all .7s ease-out;-webkit-animation:picture_scroll 40s linear infinite;animation:picture_scroll 20s linear infinite;transform:translateX(0);width:100%;justify-content:space-between}
.runingtext {display:flex;position:relative;padding:15px 0;width:200%;position:absolute;top:50%;z-index:-1}
.runingtext .focus {margin:0 9px}
.clickshow>div {display:none}
.clickshow>div h3 {font-size:22px;margin-bottom:10px}
.clickshow>div p {font-size:16px}
@keyframes picture_scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@-webkit-keyframes picture_scroll{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(-100%)}}

/* #conutJ_area */
#conutJ_area {padding:110px 0;background-image:url(/images/40/indexab_bg.jpg);background-size:cover;margin-top:-6px}
#conutJ_area:before {content:"";position:absolute;width:1px;height:100%;background:#b1b1b1;left:4%;top:0}
#conutJ_area .workframe {display:flex;align-items:center;width:min(1440px,82%)}
#conutJ_area .coJleftbox {width:37%}
#conutJ_area .JJtitle * {color:#535353}
#conutJ_area .coJrightbox {width:63%}
#conutJ_area .coJrightbox iframe {width:100%;height:472px}
#conutJ_area .JJtitle {margin-bottom:55px}
#conutJ_area .JJtitle h2 {text-transform:math-auto}
#conutJ_area .coeJJtext {margin-bottom:55px}
.arrow_btns_box {cursor:pointer;position:relative;z-index:5;display:flex;gap:20px}
.arrow_btns_box .slick-prev {transform:unset;left:unset;position:relative;width:auto;height:auto;-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1)}
.arrow_btns_box .slick-next {transform:unset;right:unset;position:relative;width:auto;height:auto}
.arrow_btns_box .slick-disabled svg {background:#cac3b9}
.arrow_btns_box .slick-arrow {width:auto;height:auto}
.arrow_btns_box .slick-arrow:hover svg {fill:var(--primary)}
.arrow_btns_box .slick-prev:before,.arrow_btns_box .slick-next:before {display:none}
.arrow_btns_box.ree {left:-1%}
.arrow_btns_box.lee {left:31%}
.arrow_btns_box .prev svg {-moz-transform:scalex(-1);-webkit-transform:scalex(-1);-o-transform:scalex(-1);-ms-transform:scalex(-1);transform:scalex(-1)}
.arrow_btns_box svg {width:60px;aspect-ratio:1/1;border-radius:50%;padding:18px;fill:#0f0f0f}
.mmtmore {display:flex}
.mmtmore,.mmtmore * {border-radius:0}
.mmtmore a {background:var(--secondary);background:unset;display:flex;color:#5c8537;align-items:center;padding:2px 10px;font-size:max(1.1*(1vw+1vh) / 2,15px);justify-content:space-between;border-bottom:#5c8537 1.5px solid;border-top:#5c8537 1.5px solid;line-height:100%}
.mmtmore a:hover {background:var(--secondary);color:#fff}
.mmtmore a:hover svg {fill:#fff;-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}
.mmtmore a svg {width:63px;aspect-ratio:5/3;border-radius:555px;margin:2px 0px;padding:8px;margin-right:0;fill:var(--secondary)}
.mmtmore a svg path {fill:#5c8537}
.arrow_btns_box svg {width:25px;padding:8px}

/* #solgon_area */
#solgon_area {position:relative;padding:50px 0;background:url(/images/40/solgonbg.jpg);background-attachment:fixed;z-index:2}
#solgon_area .pomtext {padding:50px 0;display:flex;flex-direction:column;align-items:center}
#solgon_area .pomtext img {width:70px;aspect-ratio:1/1}
#solgon_area .pomtext .somainfoo {display:flex;flex-direction:column;align-items:center;padding:30px 0}
#solgon_area .pomtext h4 {color:#fff;font-size:max(2*(1vw+1vh) / 2,23px);font-weight:300}
#solgon_area .pomtext p {color:#fff;margin-bottom:20px;font-weight:200}
#solgon_area .mmtmore a {background:#ffffff00;border:#ffffffba 1px solid}
#solgon_area .mmtmore a:hover {background:var(--secondary)}
.maJfixbg {position:relative;width:100%;height:450px;background:url(/images/40/downimg.jpg);background-attachment:fixed;background-size:cover;background-position:50% 0}
.maJfixbg .workframe {height:100%}
.maJfixbg .maJinfo {position:absolute;right:0;bottom:7px}
.maJfixbg .maJinfo p {color:#fff}

/* #product_area */
#product_area {overflow:hidden;max-width:100vw}
#product_area .slick-list {overflow:visible}
.shpaeline {position:absolute;width:100%;margin-top:-270px}
.shpaeline img {object-fit:cover}
.Japtab {display:flex;align-items:center;justify-content:center;margin-top:70px}
.Japtab a {padding:0 9px;cursor:pointer}
.activJ {border-bottom:#555 2px solid;color:#252525}

/* #showJ01 */
#showJ01 {display:block}
.moreJbox a {display:flex;align-items:center;width:auto;border-bottom:#cfcfcf 1px solid}
.moreJbox a:hover svg {margin-left:30px}
.moreJbox svg {width:18px;aspect-ratio:1/1;margin-left:10px}
.arrowbox {display:flex;margin-left:95px}
.arrowbox svg {width:57px;aspect-ratio:1/1;padding:20px;border:#8a8a8a 1px solid;border-radius:50px;cursor:pointer}
.arrowbox .arrow_btns_box {margin-right:15px;opacity:.5}
.arrowbox .arrow_btns_box:hover {opacity:1}

/* #book_area */
#book_area .list_box img {aspect-ratio:16/9;border-radius:10px}
#book_area .list_box li {margin-left:10px}
#book_area .list_box .img_box {border:var(--white) solid;border-width:0 1px 1px 0}
#book_area .list_box .img_box:after,#book_area .list_box .img_box:before {position:absolute;width:100%;height:100%;z-index:9;opacity:.4;content:""}
#book_area .list_box .img_box:after {right:0;bottom:0}
#book_area .list_box .atag_item {z-index:10}
#book_area .list_box .badge {margin:auto;padding:10px 20px;max-width:calc(80% - 40px);height:34px;line-height:36px;font-size:max(1.4*(1vw+1vh) / 2,16px);display:none}

/* #youtube_box */
#youtube_box {min-height:1px;padding-bottom:30%}
#youtube_box a {position:absolute;background:var(--white);display:flex;top:50%;left:50%;z-index:99}
#youtube_box a i {margin:auto;font-size:30px;color:var(--primary)}
#youtube_box iframe {position:absolute;width:100%;height:100%;top:0;left:0;z-index:5}

/* #book_area */
#book_area {margin:100px 0}
#book_area:after {content:"";position:absolute;width:800px;aspect-ratio:1/1;background:url(/images/40/abbgrightimg.png);background-repeat:no-repeat;background-size:contain;right:-440px;-moz-transform:rotate(3deg);-webkit-transform:rotate(3deg);-o-transform:rotate(3deg);-ms-transform:rotate(3deg);transform:rotate(45deg);bottom:-120px;left:-640px}
#book_area .puobox {display:flex;flex-direction:column}
#book_area .title_box {width:30%;margin-left:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
#book_area .cootext {margin:30px 0;font-weight:300}
#book_area .list_box {position:absolute;width:100%;opacity:0;margin:80px 0 50px;z-index:1}
#book_area .list_box.active {opacity:1;z-index:2}
#book_area .coumeshow {height:550px}
#book_area .choueebox {display:flex;gap:10px}
#book_area .choueebox * {color:#8a5d3d;font-size:max(1.6 * (1vw+1vh) / 2,19px);border-radius:666px;font-weight:600}
#book_area .choueebox .activeJ {border:#8a5d3d 1px solid}
#book_area .choueebox a {padding:0px 28px}

/* #reviews_area */
#reviews_area {background:url(/images/40/paper-texture_bg.png);padding:140px 0}
#reviews_area .JJtitle {display:flex;align-content:flex-start}
.JJtitle .Jterightbox {width:100%;display:flex;align-items:flex-end;gap:20px}
.JJtitle .Jterightbox .titlebameoo {margin:0}
#reviews_area .tctextbox p.text-clamp {height:66px;-webkit-line-clamp:2;padding-right:0}
#reviews_area a.fmlink {margin-top:20px}
#reviews_area .workframe {width:92%;margin:0px 0px 0 8%;display:grid;grid-template-columns:35% 62%;gap:50px;justify-items:center;align-items:center}

#reviews_area .revright {width:100%;display:flex}

/* #book_area */
#book_area .JJtitle {margin-bottom:30px}

/* #custom_area */
#custom_area {position:relative;padding:clamp(130px,8vw,90px) 0 clamp(90px,7vw,130px);overflow:hidden;background:linear-gradient(180deg,var(--design-ivory,#f2efea) 0%,var(--design-paper,#faf8f4) 100%);margin-top:-60px}
#custom_area::after {content:"";position:absolute;right:0;top:0;width:100%;height:1px;background:linear-gradient(to top,var(--design-taupe,#c5baa4),rgba(197,186,164,0))}
#custom_area .process_bg_word {position:absolute;top:80px;right:0%;font-size:clamp(100px,14vw,260px);font-weight:500;line-height:1;letter-spacing:.02em;color:rgb(59 67 72 / 2%);white-space:nowrap;pointer-events:none}
#custom_area .workframe {position:relative;margin:0 auto;z-index:2}
#custom_area .inin_box {position:relative}

/* #indexbook_area */
#indexbook_area+#custom_area .inin_box::before {content:"";position:absolute;top:-50px;right:0;width:55px;height:55px;border-top:1px solid rgba(198,166,95,.42);border-right:1px solid rgba(198,166,95,.42)}

/* #custom_area */
#custom_area .process_header {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);align-items:end;gap:80px;margin-bottom:65px}
#custom_area .common_titlebox {max-width:680px;margin-bottom:10px}
#custom_area .process_header_side {width:100%;max-width:520px;justify-self:end;padding-bottom:3px}
#custom_area .process_intro {position:relative;padding-left:27px;border-left:1px solid rgba(198,166,95,.5)}
#custom_area .process_intro span {display:block;margin-bottom:13px;font-size:10px;font-weight:500;line-height:1;letter-spacing:.28em;color:var(--design-gold,#c6a65f)}
#custom_area .process_intro p {margin:0;font-size:14px;font-weight:400;line-height:2;letter-spacing:.08em;color:var(--design-text,#655f57)}
#custom_area .process_controls {display:flex;align-items:center;gap:9px;margin-top:25px}
#custom_area .process_controls .btmJ {position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0;padding:0;border:1px solid rgba(59,67,72,.28);border-radius:50%;background:rgba(250,248,244,.6);cursor:pointer;transition:background-color .4s ease,border-color .4s ease,transform .4s ease}
#custom_area .process_controls .btmJ img {display:block;width:28px;max-height:14px;object-fit:contain;filter:brightness(0) saturate(100%) invert(25%) sepia(5%) saturate(654%) hue-rotate(162deg) brightness(93%) contrast(88%);transition:filter .4s ease}
#custom_area .process_controls .btmJ:hover {border-color:var(--design-dark,#3b4348);background:var(--design-dark,#3b4348)}
#custom_area .process_controls .btmJ:hover img {filter:brightness(0) invert(1)}
#custom_area .process_controls .btmJ.pre:hover {transform:translateX(-4px)}
#custom_area .process_controls .btmJ.nex:hover {transform:translateX(4px)}
#custom_area .process_controls .btmJ:focus-visible {outline:2px solid var(--design-gold,#c6a65f);outline-offset:3px}
#custom_area .process_controls .btmJ.slick-disabled {opacity:.3;pointer-events:none}
#custom_area .custom_box {position:relative}
#custom_area .process_slider {display:flex;gap:24px;margin:0;padding:0;counter-reset:process-step}
#custom_area .process_slider.slick-initialized {display:block}
#custom_area .process_slider .slick-list {margin:0 -12px;padding:10px 0 32px;overflow:hidden}
#custom_area .process_slider .slick-track {display:flex}
#custom_area .process_slider .slick-slide {height:auto;margin:0 12px}
#custom_area .process_slider li {position:relative;min-width:0;margin:0;padding:0;list-style:none;counter-increment:process-step}
#custom_area .process_slider li::after {content:"";position:absolute;top:calc((100% - 190px) / 2);right:-24px;width:24px;height:1px;background:linear-gradient(to right,rgba(198,166,95,.55),rgba(198,166,95,0));pointer-events:none}
#custom_area .process_slider li:last-child::after {display:none}
#custom_area .process_item {position:relative;display:flex;height:100%;min-height:300px;flex-direction:column;border:1px solid rgb(198 166 95 / 36%);background:rgba(250,248,244,.9);color:inherit;text-decoration:none;transition:transform .55s cubic-bezier(.2,.7,.2,1),border-color .45s ease,box-shadow .55s ease}
#custom_area .process_item:before {content:'';width:0;height:0;border-style:solid;border-width:0 0px 2vw 2vw;border-color:transparent transparent #f5f2ee;position:absolute;transform:rotate(180deg);z-index:9;top:-1px;left:-1px}
#custom_area .process_item:after {content:'';width:0;height:0;border-style:solid;border-width:0 0px 2vw 2vw;border-color:transparent transparent #f9f7f2;position:absolute;z-index:9;bottom:-1px;right:-1px}
#custom_area .cum_imgg {position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--design-taupe,#c5baa4);display:flex}
#custom_area .cum_imgg::before {content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(59,67,72,.02) 35%,rgba(38,44,48,.38) 100%);z-index:1;transition:background .55s ease}
#custom_area .cum_imgg::after {content:"";position:absolute;top:17px;right:17px;width:29px;height:29px;border-top:1px solid rgba(255,255,255,.6);border-right:1px solid rgba(255,255,255,.6);z-index:2;opacity:0;transform:translate(-7px,7px);transition:opacity .45s ease,transform .45s ease}
#custom_area .cum_imgg img {width:100%;height:100%;display:block;object-fit:cover;object-position:center;transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .8s ease}
#custom_area .ponumber {position:absolute;right:20px;bottom:18px;display:flex;align-items:center;justify-content:center;width:45px;height:65px;border:1px solid rgba(255,255,255,.65);border-radius:42px;background:rgba(59,67,72,.22);backdrop-filter:blur(5px);color:#fff;z-index:2}
#custom_area .ponumber::before {content:counter(process-step,decimal-leading-zero);font-size:12px;font-weight:500;line-height:1;letter-spacing:.1em}
#custom_area .process_content {position:relative;display:flex;flex:1;flex-direction:column;padding:28px 27px 25px}
#custom_area .process_content:after {content:"";position:absolute;width:52px;height:1px;background:rgb(198 166 95 / 36%);transform:rotate(-45deg);bottom:18px;right:-7px}
#custom_area .process_content::before {content:"";position:absolute;top:0;left:27px;width:38px;height:2px;background:var(--design-gold,#c6a65f)}
#custom_area .cutitle {margin-bottom:15px;font-size: 1.5rem;font-weight:500;line-height:1.55;letter-spacing:.13em;color:var(--design-dark,#3b4348)}
#custom_area .cudesc {display:-webkit-box;margin-bottom:24px;overflow:hidden;font-size:14px;font-weight:400;line-height:1.9;letter-spacing:.06em;color:var(--design-text,#655f57);-webkit-box-orient:vertical;-webkit-line-clamp:3}
#custom_area .process_more {display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:18px;border-top:1px solid var(--design-line,rgba(59,67,72,.16));color:var(--design-slate,#71818e)}
#custom_area .process_more span {font-size:9px;font-weight:500;line-height:1;letter-spacing:.22em}
#custom_area .process_more i {position:relative;width:30px;height:1px;background:currentColor;transition:width .4s ease}
#custom_area .process_more i::after {content:"";position:absolute;right:0;bottom:0;width:7px;height:1px;background:currentColor;transform:rotate(35deg);transform-origin:right center}
#custom_area .process_item:hover {transform:translateY(-9px)}
#custom_area .process_item:hover .cum_imgg img {transform:scale(1.05);filter:brightness(.92)}
#custom_area .process_item:hover .cum_imgg::before {background:linear-gradient(180deg,rgba(59,67,72,.04) 20%,rgba(38,44,48,.55) 100%)}
#custom_area .process_item:hover .cum_imgg::after {opacity:1;transform:translate(0,0)}
#custom_area .process_item:hover .process_more i {width:40px}
#custom_area .process_item:focus-visible {outline:2px solid var(--design-gold,#c6a65f);outline-offset:4px}
#custom_area .JaJacenter {display:flex;justify-content:center;margin-top:35px}
#custom_area .JaJacenter .common_more_btn {width:230px}


#custom_area .process_bg_Jback {position: absolute;overflow: hidden;width: 100%;height: 100%;top: 0;opacity: 0.1;z-index: 1;}
/* 左上葉子 */
#custom_area .process_bg_Jback::before {content: "";position: absolute;top: -70px;left: -70px;width: 220px;height: 280px;background: url("/images/40/leaf-left.png") no-repeat center/contain;pointer-events: none;z-index: 0;transform-origin: 20% 10%;animation: processLeafLeft 5s ease-in-out infinite alternate;}
/* 右下葉子 */
#custom_area .process_bg_Jback::after {content: "";position: absolute;right: -20px;bottom: -70px;width: 281px;height: 300px;background: url("/images/40/leaf-right.png") no-repeat center/contain;pointer-events: none;z-index: 0;transform-origin: 80% 90%;animation: processLeafRight 6s ease-in-out infinite alternate;}
/* 確保內容在葉子上面 */
#custom_area .process_bg_Jback > * { position: relative; z-index: 1; }
/* 左上葉子自然搖擺 */
@keyframes processLeafLeft {
  0% { transform: rotate(-2deg) translate3d(0,0,0); }
  50% { transform: rotate(2.5deg) translate3d(3px,2px,0); }
  100% { transform: rotate(-1deg) translate3d(-2px,4px,0); }
}
/* 右下葉子自然搖擺 */
@keyframes processLeafRight {
  0% { transform: rotate(2deg) translate3d(0,0,0); }
  50% { transform: rotate(-2.5deg) translate3d(-3px,-2px,0); }
  100% { transform: rotate(1deg) translate3d(2px,-4px,0); }
}
@media screen and (max-width:768px) {
  #custom_area .process_bg_Jback::before { top: -15px; left: -30px; width: 130px; height: 170px; }
  #custom_area .process_bg_Jback::after { right: -30px; bottom: -15px; width: 140px; height: 180px; }
}
@media (prefers-reduced-motion:reduce) {
  #custom_area .process_bg_Jback::before,#custom_area .process_bg_Jback::after { animation: none; }
}

/* @media */
@media screen and (max-width:1500px) {
  #indexbook_area .case_left { padding-right: 52px }
  #indexbook_area .case_left .common_title_main { font-size: 34px }
  #indexbook_area .case_actions { gap: 15px }
  #indexbook_area .case_actions .common_more_btn { width: 190px; padding-right: 18px; padding-left: 20px }
  #indexbook_area .seinfobook { right: 4%; left: 60%; font-size: 14px }
}
@media screen and (max-width:1470px) {
  #custom_box ul { height: 400px }
  #custom_area .process_content:after { bottom: 14px; right: -8px; width: 41px; }
  .sout_bg:before { width: 10vw }
  .sout_bg:after { width: 8vw }
  .JJtitle .midtexrb { width: min(45px,100%) }
  .JJtitle .Jterightbox { margin-left: 5px }
  .JJtitle .Jterightbox p { display: flex }
  .sout_bg { padding-bottom: 90px }
  .JJtitle { margin-bottom: 40px }
  .maloogo { width: 220px }
  #philosophy_area .coomcebox { width: min(900px,80%); margin-top: 0 }
  .maJfixbg { height: 390px }
  #custom_area::before,#contact_area::before { left: clamp(30px,3.2vw,60px); }
  #reviews_area { padding: 60px 0 }
  #newsJ_area .newsJlist .neneinfo { padding: 15px 80px 15px 150px }
  #solgon_area { padding: 20px 0 }
  #book_area { margin: 60px 0 }
  #book_area:after { left: -598px; background-size: 70%; background-position: 50% }
  #book_area .list_box { margin: 50px 0 0px }
  #book_area .coumeshow { height: 480px }
  #newsJ_area .newsJlist { padding: 4px 0 }
  .ceeservice { margin-top: -188px }
  .rigthJJufoimg img { width: 17vw; margin-top: -12vw; right: -8px }
}
@media screen and (max-width:1400px) {
  #custom_area .workframe { width: calc(100% - 80px) }
  #custom_area .process_header { grid-template-columns: minmax(0,1fr) minmax(340px,.8fr); gap: 55px }
  #custom_area .process_slider li { flex-basis: calc(25% - 18px) }
  #custom_area .process_item { min-height: 465px }
  #custom_area .process_content { padding: 25px 22px 22px }
  #custom_area .process_content::before { left: 22px }
  #custom_area .cutitle { font-size: 17px }
}
@media screen and (max-width:1280px) {
  #custom_box ul { grid-template-columns: repeat(3,1fr) }
  #book_area .puobox { display: flex; flex-direction: column }
  #book_area .title_box { width: 100% }
  #book_area .list_box { right: 0; width: 100% }
  #book_area .list_box img { height: 310px }
}
@media screen and (max-width:1200px) {
  #indexbook_area { min-height: 790px }
  #indexbook_area>.workframe { margin-left: 35px }
  #indexbook_area .case_box { grid-template-columns: minmax(0,47%) minmax(0,53%) }
  #indexbook_area .case_left { padding: 48px 38px 60px 0 }
  #indexbook_area .case_left .common_title_main { font-size: 30px }
  #indexbook_area .gogoinfo { margin: 24px 0 28px }
  #indexbook_area .gogoinfo p { font-size: 14px }
  #indexbook_area .booklist { gap: 18px }
  #indexbook_area .booklist li { flex-basis: calc(50% - 9px) }
  #indexbook_area .booklist .slick-list { margin: 0 -9px }
  #indexbook_area .booklist .slick-slide { margin: 0 9px }
  #indexbook_area .booklist .teeetx { right: 12px; bottom: 15px; left: 12px; font-size: 12px }
  #indexbook_area .case_actions { align-items: flex-start; flex-direction: column; margin-top: 22px }
  #indexbook_area .bigimg>img { width: 53%; height: 92% }
  #indexbook_area .bigimg::before { width: 49% }
  #indexbook_area .bigimg::after { left: 57%; font-size: 36px }
  #indexbook_area .seinfobook { right: 4%; bottom: 25%; left: 61%; padding-left: 18px; font-size: 13px }
  #indexbook_area .seinfobook::before { width: 105px }
  #custom_area .process_header { grid-template-columns: minmax(0,1fr) minmax(310px,.75fr); gap: 40px }
  #custom_area .process_slider { gap: 20px }
  #custom_area .process_slider li { flex-basis: calc(33.333% - 14px) }
  #custom_area .process_slider li::after { right: -20px; width: 20px }
}
@media screen and (max-width:1024px) {
  #banner_newbox { width: 100%; position: relative; background: #292929; right: 0; margin-top: 0; padding: 7px 0; height: auto; }
  #banner_newbox .nwblist { grid-template-columns: 10% 28% 56% }
  #custom_box ul li.mbJooshow { display: flex }
  #custom_box ul li.mbJooshow img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0 }
  .rigthJJufoimg img { width: 23vw; margin-top: -18vw }
  .arrowbox { margin-left: 0 }
  .Japtab { margin-top: 20px }
  .mmtmore { display: flex; flex-direction: column; align-items: center; width: 100% }
  #conutJ_area .workframe { display: flex; flex-direction: column }
  #conutJ_area .coJleftbox { width: 100% }
  #conutJ_area .coJrightbox { width: 100%; margin-top: 30px; margin-bottom: 50px }
  #conutJ_area:before { display: none }
  .ceeservice { margin-top: 0 }
  #custom_box ul li:before { display: none }
  #custom_box { width: 90%; margin: 0 auto }
  #custom_box ul li { margin: 0 9px }
  #custom_box ul li .cum_imgg img { box-shadow: 0 0 8px rgba(var(--black-rgb),.2) }
  #custom_box ul { height: auto }
  #custom_area::before,#contact_area::before { display: none; }
}
@media screen and (max-width:991px) {
  #indexbook_area { min-height: 0; padding: 75px 0 0 }
  #indexbook_area .twoo_JJbg .twooleft:nth-child(1) { width: 100%; height: 52% }
  #indexbook_area .twoo_JJbg .twooleft:nth-child(2) { display: none; }
  #indexbook_area>.workframe { width: calc(100% - 70px); min-height: 0; margin: 0 auto }
  #indexbook_area .case_box { display: block; min-height: 0 }
  #indexbook_area .case_left { padding: 0 0 75px }
  #indexbook_area .case_left .common_title_main { font-size: clamp(32px,5vw,40px) }
  #indexbook_area .gogoinfo { max-width: 620px }
  #indexbook_area .booklist .img_box { aspect-ratio: 4/3 }
  #indexbook_area .case_actions { align-items: center; flex-direction: row }
  #indexbook_area .case_right { width: calc(100%+70px); height: 800px; min-height: 0; margin-left: -35px }
  #indexbook_area .bigimg { height: 100%; min-height: 0 }
  #indexbook_area .bigimg::before { width: 115%; height: 100%; background-image: linear-gradient(180deg,rgba(59,67,72,.2) 0%,rgba(42,49,53,.95) 100%),url("/images/40/cacabook-2.jpg"); }
  #indexbook_area .bigimg>img { top: 0; left: 7%; width: 64%; height: 640px }
  #indexbook_area .bigimg::after { top: 83px; right: 15%; left: auto; font-size: 42px }
  #indexbook_area .seinfobook { right: 8%; bottom: 64px; left: 42%; padding-left: 25px; font-size: 14px }
  #indexbook_area .seinfobook::before { width: 35vw }
  #indexbook_area .case_right::after { color: rgba(255,255,255,.45) }
  #custom_area { padding: 90px 0 }
  #custom_area .workframe { width: calc(100% - 70px) }
  #custom_area .process_header { display: block; margin-bottom: 50px }
  #custom_area .process_header_side { max-width: 620px; margin-top: 32px; justify-self: auto }
  #custom_area .process_controls { margin-top: 22px }
  #custom_area .process_slider li { flex-basis: calc(50% - 12px) }
  #custom_area .process_item { min-height: 480px }
}
@media screen and (max-width:980px) {
  .JJtitle { padding-top: 20px }
  .mideyeembox .mieitem img { margin: 0 auto }
  .ceeservice img { height: 999px }
  #newsJ_area .luenbuom { display: flex; flex-direction: column; align-items: center; margin: 51px 0 }
  .Jamore { justify-content: center }
  #reviews_area .workframe { display: flex; flex-direction: column; margin: 0 auto }
  #reviews_area .revright { display: none }
  #reviews_area { padding: 20px 0 50px }
  .JJtitle .Jterightbox { display: flex; flex-direction: column; align-items: center }
}
@media screen and (max-width:768px) {
  .arrow_btns_box svg { width: 23px; padding: 0 }
  .maloogo { display: none }
  .mb-box { display: flex; flex-direction: column; width: 100%; margin-top: 11px }
  .toballbox { display: grid; align-items: center; grid-template-rows: repeat(2,1fr); grid-template-columns: repeat(2,1fr); grid-template-areas: "colorJ01 colorJ01" "colorJ02 colorJ03"; justify-content: center }
  .alwashow { position: relative; width: 100%; padding: 30px 25px; background: #f6f6f6; border-radius: 3px; outline: 1px solid rgb(0 0 0/15%); outline-offset: -15px; margin: 5px 0 10px; aspect-ratio: 12/2; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; color: #b01a26 }
  .toballbox .ballitem { width: 200px; aspect-ratio: 1/1; display: grid; border-radius: 500px; justify-content: center; align-items: center }
  .toballbox .ballitem span { color: #fff }
  .toballbox .colorJ01 { left: 25%; position: relative; background: #b01a26; grid-area: colorJ01 }
  .toballbox .colorJ02 { position: relative; top: -70px; right: -20px; mix-blend-mode: darken; background: #57423f; grid-area: colorJ02 }
  .toballbox .colorJ03 { position: relative; top: -70px; left: -20px; mix-blend-mode: color; background: #ba6355; grid-area: colorJ03 }
  #youtube_box { padding-bottom: 60vw }
  #custom_box li .row { margin: 10px 15px; padding: 10px 0 20px }
  #custom_box li .row article { bottom: -2px }
  .arrowbox .arrow_btns_box { margin-right: 0; margin: 0 5px }
}
@media screen and (max-width:767px) {
  .common_title_meta { margin-bottom: 16px }
  .common_title_number { width: 32px; height: 32px }
  .common_title_en { margin-left: 12px; padding-left: 44px; font-size: 10px }
  .common_title_en::before { width: 30px }
  .common_title_zh { font-size: 12px; top: 0; right: 1px; }
  .common_title_main { font-size: 28px; line-height: 1.6 }
  #indexbook_area { padding-top: 58px }
  #indexbook_area>.workframe { width: calc(100% - 40px) }
  #indexbook_area .case_left { padding-bottom: 58px }
  #indexbook_area .case_left .common_titlebox::after { top: -23px; width: 42px; height: 42px; right: -12px; }
  #indexbook_area .case_left .common_title_main { font-size: 28px }
  #indexbook_area .gogoinfo { margin: 24px 0 28px; padding-left: 18px }
  #indexbook_area .gogoinfo p { font-size: 14px; line-height: 1.95 }
  #indexbook_area .booklist { gap: 14px }
  #indexbook_area .booklist li { flex-basis: calc(50% - 7px) }
  #indexbook_area .booklist .slick-list { margin: 0 -6px }
  #indexbook_area .booklist .slick-slide { margin: 0 6px }
  #indexbook_area .booklist .img_box { aspect-ratio: 1/1 }
  #indexbook_area .booklist .teeetx { right: 8px; bottom: 11px; left: 11px; padding-left: 17px; font-size: 18px; }
  #indexbook_area .booklist .teeetx::before { width: 5px; height: 5px }
  #indexbook_area .case_actions { align-items: flex-start; flex-direction: column; margin-top: 20px }
  #indexbook_area .case_right { width: calc(100%+40px); height: 720px; margin-left: -20px }
  #indexbook_area .case_right::before { top: 20px; right: 20px; width: 45px; height: 45px }
  #indexbook_area .case_right::after { right: 21px; bottom: 19px; font-size: 7px }
  #indexbook_area .bigimg>img { left: 0; width: 78%; height: 555px }
  #indexbook_area .bigimg::after { top: 42px; right: 38px; font-size: 28px }
  #indexbook_area .seinfobook { right: 9%; bottom: 57px; left: 2%; padding-left: 74px; font-size: 13px; line-height: 1.9 }
  #indexbook_area .seinfobook::before { top: 14px; right: auto; left: 0; width: 54px; margin-right: 0; background: var(--design-gold) }
  #indexbook_area .seinfobook::after { top: 12px; left: 60px; }
  #custom_area { padding: 140px 0 70px; }
  #custom_area::before { left: 25px; height: 55px }
  #custom_area::after { right: 25px; height: 55px }
  #custom_area .process_bg_word { top: 30px; font-size: 90px }
  #custom_area .workframe { width: calc(100% - 40px) }
  #custom_area .process_header { margin-bottom: 38px }
  #custom_area .process_header_side { margin-top: 25px }
  #custom_area .process_intro { padding-left: 18px }
  #custom_area .process_intro p { font-size: 14px; line-height: 1.9 }
  #custom_area .process_controls .btmJ { width: 46px; height: 46px }
  #custom_area .process_slider { gap: 15px }
  #custom_area .process_slider li { flex-basis: calc(50% - 8px) }
  #custom_area .process_slider li::after { display: none }
  #custom_area .process_item { min-height: 430px }
  #custom_area .process_content { padding: 23px 18px 20px }
  #custom_area .process_content::before { left: 18px; width: 30px }
  #custom_area .cutitle { margin-bottom: 11px; font-size: 18px; }
  #custom_area .cudesc { font-size: 14px; line-height: 1.8 }
  #custom_area .ponumber { right: 14px; bottom: 13px; width: 46px; height: 46px }
  #custom_area .JaJacenter { margin-top: 25px }
}
@media screen and (max-width:640px) {
  .runingtext { top: 30% }
  .pcshowJ { display: none }
  .mmtmore.pcshowJ { display: none }
  .arrow_btns_box.lee { left: auto; right: -4% }
  #banner_newbox .nwblist .nwbinfo:after { content: ""; position: absolute; width: 22px; aspect-ratio: 1/1; display: flex; background: url(/images/40/com_link.png); top: 0; right: 0%; background-size: cover }
  #banner_newbox .nwblist .nwbinfo { width: 90%; padding-right: 10% }
  #about_area { display: flex; flex-direction: column; height: auto; padding: 0px 0 0px; background: #ffffff }
  #fakeNumber ul { display: flex }
  #fakeNumber ul li { width: 33.3%; display: flex; align-items: center }
  #book_area .list_box img { height: auto }
  #custom_box ul { grid-template-columns: repeat(2,1fr) }
  #about_area:after,#about_area:before,#book_area:after { display: none }
  section .title_box .area_title { font-weight: 600 }
  .maJfixbg .maJinfo { right: auto; bottom: auto; width: 100% }
  .maJfixbg { height: 300px }
  .maJfixbg .workframe { display: flex; flex-direction: column; align-items: center; justify-content: center }
  .maJfixbg .maJinfo p { text-align: center }
  #conutJ_area .coJrightbox iframe { height: 300px }
  #philosophy_area { padding: 50px 0 50px }
  #newsJ_area { display: flex; flex-direction: column; align-items: center; background: #f3f3f3; padding: 80px 0 0px }
  #newsJ_area .mewn_img { position: relative; left: auto; width: 90%; margin: 0 auto }
  #newsJ_area .workframe { width: 100% }
  #newsJ_area .wenGbox { width: 100%; display: flex; flex-direction: column; align-items: center }
  #newsJ_area .luenbuom { padding-left: 0; margin: 32px auto; display: flex; flex-direction: column; align-items: center; gap: 20px }
  .lusancall { margin-left: 0 }
  .lusanline { width: 100vw; margin-right: 0 }
  #newsJ_area .luenbuom .luenntext { padding-left: 0; margin-left: 0 }
  #newsJ_area .luenbuom .luenntext:before { display: none }
  #newsJ_area .newsJlist .neneinfo { width: 90%; padding: 15px 26px 15px 40px; margin: 0 auto }
  #newsJ_area .newsJlist .neneinfo h5 { width: calc(100% - 40px) }
  #newsJ_area .newsJlist .neneinfo:before { width: 5px; margin-left: -20px }
  .sout_bg { padding-bottom: 0 }
  .sout_bg:after { content: ""; position: absolute; background: url(/images/40/mb_leftbox.png); background-size: cover; bottom: 0; animation: unset; top: auto; left: 0vw; width: auto; height: 77px; bottom: -77px }
  .mooimlink { display: flex; flex-direction: column }
  .mooimlink .spanlinesot { width: 1px; height: 92px }
  .mooimlink .spanlinesot:before { bottom: 0; right: -5px }
  .mooimlink .spanlinesot:after { bottom: -6px; right: -9px }
  .slick-3d .slick-active.slick-current+.slick-slide { opacity: 0 }
  .sambox { display: none }
}
@media screen and (max-width:550px) {
  #banner_newbox .nwblist { grid-template-columns: 14% 83%; }
  #banner_newbox .nwblist .nwbinfo { display: none; }
  #doctor_area { background: #eee4de; padding: 50px 0 225px }
  .sout_bg:before { width: 27vw; z-index: 6; top: 964px; right: 28vw }
  #book_area .choueebox { display: flex; justify-content: center }
  #book_area { background: #f9f6f4; margin: 0; padding: 20px 0 50px }
  #book_area .right_box { position: absolute; width: 90vw; display: flex; justify-content: space-between }
  #book_area .right_box .arrow_btns_box { width: 100%; display: flex; justify-content: space-between; top: 210px }
  .JJtitle .twobox .arrow_btns_box svg { background: unset; fill: #272727; width: 23px; padding: 0 }
  .JJtitle .twobox { display: flex; flex-direction: column; align-items: center }
  .arrow_btns_box.ree { left: auto; right: 50px }
  .arrow_btns_box.lee { right: -15px }
  .mmtmore a { padding: 1px 7px 4px 29px }
  #custom_box ul { grid-template-columns: repeat(1,1fr); width: 90%; margin: 0 auto }
  #custom_box ul li {   }
  #custom_box li .row { display: flex; flex-direction: column; align-content: flex-start }
  #custom_box li .row .h2 { text-align: left; width: 100% }
  #custom_box ul li:before,#custom_box ul li:last-child:before { right: auto; left: 21%; display: flex; height: 50%; display: none }
  #philosophy_area .JJtitle h2 { text-align: center }
  #philosophy_area:after,#philosophy_area:before { display: none }
  #conutJ_area .JJtitle { margin-bottom: 30px }
  #conutJ_area .coeJJtext { margin-bottom: 10px }
  #conutJ_area { padding: 80px 0 }
  .JJtitle { display: flex; flex-direction: column; margin-bottom: 26px; margin-top: 0 }
  .JJtitle2 { display: flex; flex-direction: column; align-items: center }
  .JJtitle2 h2 { display: flex; flex-direction: column; align-items: center }
  .JJtitle2 h2:before { left: calc(50% - 10px) }
  .JJtitle2 h2:after { left: calc(50% - -10px) }
  a.fmlink { width: min(180px,100%); margin: 35px auto 0; padding: 13px 0 }
  .cnlittle::before,.cnlittle::after { width: 45px }
  .JJtitle .Jterightbox .cnlittle:before { width: 82px }
  .webBox .hanJ01 .pageh1 { font-size: 13px }
}
@media screen and (max-width:520px) {
  #custom_area .process_slider { display: block }
  #custom_area .process_slider li { width: 100%; margin-bottom: 18px }
  #custom_area .process_slider.slick-initialized li {margin-bottom: 0;display: flex;flex-direction: column;}
  #custom_area .process_slider .slick-list {margin: 0;}
  #custom_area .process_slider .slick-slide { margin: 0 7px }
  #custom_area .process_item:hover{transform: translateY(0px);}
  #custom_area .cum_imgg {aspect-ratio: auto;height: 250px;width: 100%;}
  #custom_area .cudesc { -webkit-line-clamp: 4 }
  #custom_area .JaJacenter .common_more_btn { width: 220px }
}
@media screen and (max-width:480px) {
  #indexbook_area .case_left .common_title_main { font-size: 25px }
  #indexbook_area .booklist { display: block }
  #indexbook_area .booklist li { width: 100%; margin-bottom: 15px }
  #indexbook_area .booklist.slick-initialized li { margin-bottom: 0 }
  #indexbook_area .booklist .img_box {aspect-ratio: auto;height: 240px;}
  #indexbook_area .arrow_boxJ { gap: 4px }
  #indexbook_area .number { gap: 9px; margin-left: 8px; padding-left: 12px }
  #indexbook_area .case_actions .common_more_btn { width: 200px }
  #indexbook_area .case_right {height: 650px;width: 100vw;}
  #indexbook_area .case_right::before , #indexbook_area .bigimg::after{display:none;}
  #indexbook_area .bigimg>img {width: 80%;height: 490px;left: 10%;}
  #indexbook_area .bigimg::after {font-size: 21px;}
  #indexbook_area .seinfobook { right: 7%; bottom: 53px; left: 8%; font-size: 12px; letter-spacing: .05em }
  .JJtitle .Jterightbox p { display: flex; justify-content: flex-start }
  .JJtitle h2 { margin-bottom: 6px; max-width: 100%; height: auto; text-overflow: unset; display: flex; -webkit-box-orient: unset; -webkit-line-clamp: unset }
  .shpaeline { display: none }
  #product_area .bgBox { width: 100%; object-fit: cover }
  .mainfobox { padding: 67px 0 }
  .maloogo { display: none }
  #custom_box ul li .cum_imgg img { height: 171px }
  .rigthJJufoimg img { width: 55vw; margin-top: -167vw; right: -7vw; transform: rotate(7deg) }
  .ceeservice { margin-top: -60px }
  .ceeservice img { display: flex; height: 1200px }
  #newsJ_area .JJtitle .Jterightbox { padding-bottom: 500px }
  #newsJ_area .mewn_img { position: absolute; top: 330px; display: flex; flex-direction: column; align-items: center }
  #newsJ_area .mewn_img img { height: 400px; object-fit: cover; width: 85% }
  #newsJ_area .mewn_img:before { display: none }
  .sout_bg:before { width: 39vw; top: 818px; right: 27vw }
  #book_area .coumeshow { height: 350px }
  #newsBox2 .info { margin-bottom: 10px }
}
@media screen and (min-width:1281px) {
  #product_area.list_box ul li:hover { transform: translate(0,-20px); -webkit-transform: translate(0,-20px) }
  #book_area.list_box li:hover.img_box:before,#book_area.list_box li:hover.img_box:after { transform: scaleY(1); -webkit-transform: scaleY(1) }
  #book_area .list_box li:hover .badge { background: var(--primary); color: var(--white) }
  #custom_box ul li.mbJooshow { display: none }
}
@media screen and (min-width:769px) {
  .mb-box { display: none }
}
@media screen and (min-width:641px) {
  .mmtmore.mbshowJ { display: none }
}