section {position: relative;padding: 5vw 0;background: no-repeat 50% / cover;}
section .title_box font {text-transform: uppercase;line-height: 100%;letter-spacing: 2px;font-size: 60px;font-weight: bold;-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;color: rgb(197 197 197 / 20%);}
section .page_title, section .page_title span {text-align: left;font-weight: bold;font-size: 42px;word-spacing: 100vw;line-height: 130%;letter-spacing: 4px;}
section .page_title span{color: #f18700;vertical-align: baseline;}
section .more_box >* { padding: 5px 30px; border: 1px rgba(255, 255, 255, .3) solid; display: inline-block; color: #fff; }
section .slick-dots li button:before{color:#f18700;}

.more_btn {margin-top: 0px;}
.more_btn a {width: 170px;padding: 7px 20px;color: #f18700;border: 2px solid #f18700;border-radius: 50px;display: flex;align-items: center;justify-content: space-between;position: relative;overflow: hidden;}
.more_btn font {text-align: left;font-weight: 600;text-transform: uppercase;letter-spacing: 3px;color: #f18700;}
.more_btn.white a:before {content: "";width: 0;height: 100%;background: #f18700;border-radius: 50px;display: block;position: absolute;bottom: 5px;left: 0;z-index: -1;-webkit-transform: translate(0,5px);-ms-transform: translate(0,5px);transform: translate(0,5px);-webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;}
.more_btn.white span {right: 30px;position: absolute;width: 80px;height: 1px;background: #000;display: block;right: 0;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;}
.more_btn.white:after {width: 252px;}
.more_btn.white span {position: absolute;width: 40px;height: 1px;background: #4f3c30;display: block;right: 20px;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;}
.more_btn.white span:before {position: absolute;width: 0;height: 0;border-style: solid;border-width: 0 16px 7px 0;border-color: transparent transparent #4f3c30 transparent;right: -1px;bottom: 50%;content: "";}
.more_btn.white svg {width: 35px;height: 35px;fill: #f18700;}

section .slick-dots li button:before{color:#f18700;font-size: 10px;}
section .slick-dots li.slick-active button:before{color:#f18700;}
/* AboutLIFE */
#AboutLIFE{position:relative;padding: 5vw 0 10vw;}
#AboutLIFE .title_box{position:relative}
#AboutLIFE .title_box p{position:absolute;left: -110px;top: 0px;}
#AboutLIFE .nowrap_box{/* width: 82%; */display:flex;align-items:flex-start;flex-direction:row;/* margin-right:0; *//* padding:0px 0 190px; */justify-content: space-between;}
#AboutLIFE .nowrap_box .deck02,#AboutLIFE .nowrap_box .deck03{position:absolute;z-index:10}
#AboutLIFE .nowrap_box .deck02{left:-520px;bottom:-170px}
#AboutLIFE .nowrap_box .deck02 img,#AboutLIFE .nowrap_box .deck03 img{width:100%}
#AboutLIFE .nowrap_box .deck03{bottom:-120px;right:-170px}
#AboutLIFE .nowrap_box .info_item{text-align:left;width: 45%;margin: 0;}
#AboutLIFE .aboutAreaBG{position:absolute;height:100%;width:0;top:0;left:0;background:#ccbcad;opacity:0.3;z-index:0;transition:all 1.1s ease-in-out;-webkit-transition:all 1.1s ease-in-out}
#AboutLIFE .img_item{order:1;width: 50%;}
#AboutLIFE .img_item img{width:100%}
#AboutLIFE .info_item article{margin-bottom:30px;line-height:180%;letter-spacing:0.5px;font-weight:300;color:#000}
#AboutLIFE .info_item article .info h3{padding:5px 0 10px 0;font-size:26px;color:var(--primary);font-weight:600;letter-spacing:0.5px;line-height:160%}
#AboutLIFE .info_item article .info p,#productBox .info .title_box h3{width:100%;margin-top:20px;letter-spacing:0px;font-weight: 400;font-size: 16px;}
#AboutLIFE .info_item article .info .textEditor{margin-top:30px;width:90%}
#AboutLIFE .info_item article .info .textEditor ol{display:flex;flex-direction:row;flex-wrap:wrap}
#AboutLIFE .info_item article .info .textEditor ol li{line-height:180%;font-weight:400;letter-spacing:2.5px;padding:6px 20px;width:auto;text-align:center;margin-right:15px;margin-bottom:15px;background-color:#4c3d33;color:#fff;font-size:20px}
#AboutLIFE.tooolong .aboutAreaBG{width:70%}
#AboutLIFE:after{content: '';background-image: url(/images/38/img-01.png);position:absolute;background-size: contain;background-repeat: no-repeat;width: 160px;aspect-ratio: 1/1;bottom: 13%;right: 3%;z-index:0;animation-name:fish;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:2s}
@keyframes fish{0%{transform-origin:right bottom;transform:rotate(-3deg)}
100%{transform-origin:right bottom;transform:rotate(3deg)}
}
/* secabout */
#secabout { margin-top: 50px; }
#secabout:before { position: absolute; width: 60%; height: 100%; background: #dc8661; display: block; top: 0; left: 0; content: ""; }
#secabout >div { width: 50%; display: inline-block; vertical-align: top; }
#secabout .customBox ul { margin: 0 auto; width: 500px; }
#secabout .customBox ul li { padding: 60px 0; }
#secabout .customBox ul li .page_sub_title { margin-bottom: 25px; font-weight: 400; font-size: 36px; color: #fff; }
#secabout .customBox ul li article { font-weight: 200; font-size: 18px; color: #ece4e0; }
#secabout .youtubeBox { top: 45px; }
#secabout .youtubeBox iframe { width: 90%; height: 350px; }

/* Service */
#Service{position:relative;display:flex;flex-direction:column;align-items:center;padding:5vw 0 8vw;background-position:50% 50%;background-repeat:no-repeat;background-color:#f9f9f9}
#Service .title_box font,#Reviews .title_box font,#Faq .title_box font{writing-mode:horizontal-tb;font-size:120px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#Service a.photo{-webkit-clip-path:url(#clip_product);clip-path:url(#clip_product);aspect-ratio:13 / 12}
#Service .Img{-webkit-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;max-width:95%}
#Service .Img img{width:350px;height:400px;object-fit:contain}
#Service ul{max-width:100%}
#Service ul .slick-dots{z-index:100}
#Service ul li{margin:0 5px;}
#Service ul .item{position:relative;display:flex;flex-direction:column;align-items:center}
#Service ul .item p.ponumber{position:absolute;left:35px;top:10px;font-weight:600;font-family:"Poppins",sans-serif}
#Service .JJlink a{background-color:unset;border:#666666 1px solid;padding:15px 15px}
#Service .JJlink a:hover{background:#ca2423;border:#ca2423 1px solid}
#Service .JJlink a:hover svg{fill:white}
#Service .JJlink a:hover span.smallJ{color:white}
#Service .JJlink a span.smallJ{color:#454545;font-size:15px;font-weight:600}
#Service .JJlink a svg{fill:#4c4c4c}
#Service .info{position:relative;padding-top: 20px;}
#Service .maskJlink a{position:absolute;width:100%;height:100%;left:0;top:0}
#Service .info h3{text-align:center;font-size: 24px;letter-spacing: 5px;font-weight: 400;}
.seebox{position:relative;width: 1366px;margin:0 auto;max-width:95%}
.titlrJ{margin-bottom: 70px;display:flex;flex-direction:column;align-items:center;position:relative}
.titlrJ p{}
.JJlink{display:flex;align-items:center}
.JJlink a{display:flex;align-items:center;background:#ca2423;padding:10px 25px}
.JJlink a:hover{background:#cca82b}
.JJlink a span{color:white;font-size:22px;padding:0 10px;font-weight:400}
.JJlink a span.smallJ{font-size:17px}
.JJlink a svg{fill:white;width:30px;height:30px}

#Reviews article.center{}
#mshareBox{position:relative}
#mshareBox .workframe{padding-bottom:3vw}
#mshareBox .more_btn{display:flex;justify-content:center}
#shareBox{margin-top:50px}
#shareBox .slick-slider{margin-bottom:0}
#shareBox li{background:#f6f6f6;margin:10px;aspect-ratio:4/5;display:flex}
#shareBox li .text{padding:25px 30px;position:relative}
#shareBox li .text:before{content:"";font-size:100px;position:absolute;top:-15px;right:30px;line-height:100%;width:50px;height:100px;background-size:contain;background-repeat:no-repeat;z-index:0;background-image:url(/images/38/img-review.png)}
#shareBox li img{aspect-ratio:1/1;object-fit:contain}
#shareBox li h3{line-height:100%;margin:10px 0;font-weight:400}
#shareBox li p{color:#f7d323;line-height:100%;font-size:14px;letter-spacing:2px}
#shareBox li article{overflow:hidden;height:auto;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;font-size:15px;margin-top:20px}
#shareBox .slick-dots li button{}
#shareBox .slick-dots li button:before{}
#shareBox .slick-dots{position:relative;margin-top:15px;bottom:0}
#shareBox .slick-dots li{display:inline-flex;outline-offset:unset;outline:unset;background:unset}
#mshareBox:after{content:'';background-image:url(/images/38/img-03.png);position:absolute;background-size:contain;background-repeat:no-repeat;width:200px;aspect-ratio:4/3;bottom:-7%;right:5%;z-index:0;animation-name:fish;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:2s}
#mshareBox:before{content:'';background-image:url(/images/38/img-02.png);position:absolute;background-size:contain;background-repeat:no-repeat;width:110px;aspect-ratio:4/3;bottom:-5%;left:10%;z-index:0;animation-name:fish;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:2s}

/* newsBox */
#newsBox ul li { margin: 20px 15px 20px 0; width: calc((100% - 30px) / 2); display: inline-block; }
#newsBox ul li:nth-child(2n) { margin: 20px 0 20px 15px; }
#newsBox ul li .img_box_cover , #newsBox ul li .img_box_cover img { height: 250px; }
#newsBox ul li .info_box { margin-top: 15px; }
#newsBox ul li .info_box h4 { height: 33px; font-weight: 500; font-size: 21px; }
#newsBox ul li .info_box article { margin: 10px 0 0; color: #111; }
#newsBox ul li .info_box .time { color: #8f8f8f; }

/* bookBox */
#bookBox ul{margin:0 auto;width:1200px;display:grid;grid-gap:0;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}
#bookBox ul li{overflow:hidden}
#bookBox ul li img{height:275px}
#bookBox ul li:first-child{grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3}
#bookBox ul li:nth-child(8){grid-column-start:4;grid-column-end:5;grid-row-start:2;grid-row-end:4}
#bookBox ul li:first-child img,#bookBox ul li:nth-child(8) img{height:550px}

/* Faq */
#Faq{position:relative;background:url(/images/38/cn_big_bg.jpg);background-attachment:fixed}
#Faq .conJbox{position:relative;margin:0 auto;width:min(90%,1440px);font-size:0;z-index:1}
#Faq:before{content:"";position:absolute;background-image:url(/images/38/img-faq-bg.png);width:100%;height:200%;top:0;z-index:-1}
#Faq:after{content:"";position:absolute;background-image:url(/images/38/side-line.png);width:60px;height:275px;top:-88px}
#Faq .fexxJ{display:flex;justify-content:space-between;flex-wrap:wrap}
#Faq .fexxJ .leftboxx{position:relative;display:flex;flex-direction:column;width:50%;align-items:flex-start}
#Faq .fexxJ .leftboxx:before{content:"";position:absolute;width:580px;background-image:url(/images/38/img-faq.png);height:410px;background-size:contain;background-repeat:no-repeat;left:0;bottom:-30px;z-index:1}
#Faq .fexxJ .more:after{content:"";position:absolute;width:calc(100% + 0px);height:100px;background:#bfc5d2;right:0;bottom:-233px;moz-transform-origin:bottom;-moz-transform:-35deg;-webkit-transform-origin:bottom;-webkit-transform:-35deg;-o-transform-origin:bottom;-o-transform:-35deg;-ms-transform-origin:bottom;-ms-transform:-35deg;transform-origin:bottom;transform:skewX(-35deg);z-index:0}
#Faq .fexxJ .rightboxx{display:flex;flex-direction:column;width:45%}
#Faq .fexxJ .botBox{width:100%;display:flex;margin-top:100px;justify-content:center;gap:60px}
#Faq .title_box{margin-bottom:40px}
#Faq .title_box font{width:300px}
#faqList{height:584px;overflow-y:scroll;padding:4px 8px}
#faqList ul{width:calc(100% - 6px)}
#faqList::-webkit-scrollbar{width:5px}
#faqList::-webkit-scrollbar-track{background:rgb(255 255 255 / 0%)}
#faqList::-webkit-scrollbar-thumb{background:rgba(0,0,0,.4);border-radius:50px}
#faqList li .titlebox{margin-bottom:10px;border-bottom:1px solid #efeff0;-webkit-box-shadow:0px 3px 10px 0px rgba(0,0,0,0.1);box-shadow:0px 3px 10px 0px rgba(0,0,0,0.1);background-color:white}
#faqList li .titlebox{display:flex;align-items:center;padding:20px;border-radius:20px}
#faqList li .titlebox h3{display:flex;align-items:center;width:100%}
#faqList li .titlebox b{padding:9px 22px;background:#1b325f;border-radius:20px;color:white;font-size:32px}
#faqList li .title{position:relative;padding:5px 65px 5px 25px;display:flex;flex:1}
#faqList li .title font{font-size:19px}
#faqList li .title span{position:absolute;width:30px;height:25px;display:block;top:calc((100% - 30px) / 2);right:25px;border-radius:5px;padding:2px 0px 3px 6px}
#faqList li .title span:before,#faqList li .title span:after{width:22px;height:3px;background:#1b325f;display:block;content:"";-webkit-transform:translateY(10px);transform:translateY(10px)}
#faqList li .title span:after{-webkit-transform:translateY(8px) rotate(90deg);transform:translateY(8px) rotate(90deg)}
#faqList li .info{padding:30px 20px 30px;background:#183168;color:#686868;font-size:14px;line-height:1.8;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;margin:20px 0 20px;border-radius:20px;display:flex;align-items:center}
#faqList li .info b{padding:9px 22px;background:#ffffff;border-radius:20px;color:#1b325f;font-size:32px;display:flex;flex-direction:column}
#faqList li .info font{color:white;position:relative;padding:5px 70px 15px 25px;display:flex;flex:1;font-size:16px;align-items:center}
#faqList li .info span:before,#faqList li .info span:after{background:white}
#faqList li.current .title.info span:after{-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transform:translateY(8px) rotate(180deg);transform:translateY(180deg) rotate(0)}
#faqList li.current .title.info span{right:42px}

@media screen and (max-width:1500px){
    #faqList{height:621px}
    #Faq .fexxJ{padding-top:60px}
    #faqList li .titlebox{padding:11px 20px}
    #Faq .fexxJ .more:after{width:calc(89% + 0px);bottom:-179px;height:85px}
    #Faq .fexxJ .leftboxx:before{}
    #Faq:after{width:29px;height:206px}
}
@media screen and (max-width:1440px){
    #AboutLIFE .title_box p{left:-75px}
    #AboutLIFE .nowrap_box{width:80%}
    #AboutLIFE.tooolong .aboutAreaBG{width:960px}
    #AboutLIFE .nowrap_box .info_item{width:48%}
    #AboutLIFE .img_item img{width:95%}
    #AboutLIFE .nowrap_box .deck02 img,#AboutLIFE .nowrap_box .deck03 img{width:65%}
    #shareBox{width:90%;margin:50px auto 0}
}
@media screen and (min-width:1281px){
    .more_btn.white a:hover{color:#fff}
    .more_btn.white a:hover:before{width:100%}
    .more_btn.white a:hover svg{fill:#ffffff}
    .more_btn.white a:hover font{color:#ffffff}
    #AboutLIFE .d_flex{align-items:center}
}
@media screen and (max-width:1280px){
    section .page_title,section .page_title span{font-size:25px}
    #AboutLIFE .nowrap_box{width:85%}
    #AboutLIFE .img_item{}
    #AboutLIFE .img_item:before,#AboutLIFE .img_item img{width:100%}
    #AboutLIFE .img_item img{height:100%;width:100%}
    #AboutLIFE:after{display:none}
    #Faq .title_box font{width:150px}
    #faqList{height:585px}
    #Service .title_box font,#Reviews .title_box font,#Faq .title_box font{font-size:60px}
    #Service .slick-prev{left:-65px}
    #Service .slick-next{right:-20px}
    #Service .info:before{content:"";width:2px;height:40px;position:absolute;background:#6c6c6c;margin-left:calc(50% - 1px);margin-top:45px;display:none}
    #Service .info h3{font-size:1.5em;font-weight:600;letter-spacing:1px}
    #bookBox ul{width:90%}
    #bookBox ul li img{height:22.5vw}
    #bookBox ul li:first-child img,#bookBox ul li:nth-child(8) img{height:45vw}
}
@media screen and (max-width:1140px){
    #AboutLIFE .nowrap_box{display:flex;flex-direction:column-reverse;align-items:flex-start;width:90%;margin:auto;padding:0px 0 0;align-content:flex-start}
    #AboutLIFE:before,#AboutLIFE::after{display:none}
    #AboutLIFE .nowrap_box .info_item,#AboutLIFE .img_item{margin:0;width:100%;position:relative;left:0}
    #AboutLIFE .img_item{margin:50px 0 30px auto}
    #AboutLIFE .info_item article{width:100%;padding:0;margin-bottom:20px}
    #AboutLIFE .more_btn{position:relative;left:0}
    #AboutLIFE .nowrap_box:before,#AboutLIFE .title_box p,#AboutLIFE .nowrap_box .deck02,#AboutLIFE .nowrap_box .deck03,section .track,#AboutLIFE.tooolong .aboutAreaBG,#secabout .SecaboutBG,#productBox .info .title_box::after{display:none}
    #AboutLIFE .img_item img{object-fit:cover}
    #AboutLIFE{padding:4vw 0 4vw}
    #Faq .fexxJ{display:flex;flex-direction:column}
    #Faq .fexxJ .leftboxx{width:100%;margin-bottom:45px}
    #Faq .fexxJ .rightboxx{width:100%}
    #Faq .fexxJ .leftboxx:before{width:245px;right:0;height:438px;bottom:0;display:none}
    #Faq .fexxJ .leftboxx:after{display:none}
    #Faq .fexxJ .more:after{display:none}
    #Faq:after{width:30px;height:145px;right:350px;top:0}
    #Faq:before{top:0;height:240%}
}
@media screen and (max-width:1024px){
    .titlrJ{margin-bottom:20px}
    #AboutLIFE{padding:6vw 0 4vw}
    #AboutLIFE .img_item{width:100%;margin:50px 0 0px auto;order:inherit}
    #AboutLIFE .img_item:before{border:0;top:0;right:0;z-index:2}
    #AboutLIFE .info_item{margin-top:0px;z-index:4}
    #AboutLIFE::after{top:-283px;width:950px;height:870px}
    #secabout:before{width:90%;height:calc(100% - 300px)}
    #secabout >div{width:95%}
    #secabout .customBox ul{width:80%}
    #secabout .youtubeBox{width:100%;text-align:right;top:0}
    #faqList{height:500px}
    #Faq .fexxJ .botBox{margin-top:50px}
}
@media screen and (max-width:768px){
    #Service .JJlink a{width:auto}
    #newsBox ul li{margin:20px 5px 20px 0;width:calc((100% - 10px) / 2)}
    #newsBox ul li:nth-child(2n){margin:20px 0 20px 5px}
    #bookBox ul{grid-template-rows:repeat(4,1fr)}
    #bookBox ul li:first-child{grid-column-end:4}
    #bookBox ul li:nth-child(8){grid-column-start:3;grid-column-end:5;grid-row-start:3;grid-row-end:5}
}
@media screen and (max-width:640px){
    #AboutLIFE{padding:7vw 0 5vw}
    #AboutLIFE .img_item{width:100%}
    #AboutLIFE .img_item:before{background:rgba(var(--secondary-rgb),0)}
    #AboutLIFE .info_item{margin-top:40px}
    #AboutLIFE::after{top:-370px;background-position:top}
    #AboutLIFE:before{right:-160px;top:330px;background-size:90%;background-repeat:no-repeat}
    #AboutLIFE .info_item article .info h3{font-size:22px;padding:5px 0 0px 0}
    #bookBox ul{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(5,1fr)}
    #bookBox ul li:first-child{grid-column-end:3}
    #bookBox ul li:nth-child(8){grid-column-start:1;grid-column-end:3;grid-row-start:5;grid-row-end:6}
    #bookBox ul li:nth-child(7){grid-column-start:2;grid-column-end:4;grid-row-start:3;grid-row-end:5}
    #bookBox ul li img,#bookBox ul li:nth-child(8) img{height:30vw}
    #bookBox ul li:first-child img,#bookBox ul li:nth-child(7) img{height:60vw}
    #mshareBox:before{width:80px;left:-3%;bottom:-8%}
    #mshareBox:after{right:-14%;width:160px;bottom:-10%}
}
@media screen and (max-width:550px){
    .more_btn a{width:125px}
    .more_btn.white svg{width:23px}
    #Service ul.proList li.slick-slide{margin:0 20px}
    #Service .title_box font,#Reviews .title_box font,#Faq .title_box font{font-size:50px;width:260px}
    #Faq .title_box font{width:150px}
    #Reviews{padding:10vw 0 15vw}
    #secabout:before{width:100%}
    #Service a.photo{-webkit-clip-path:unset;clip-path:unset}
    #Service .info{padding:9px 0 5px}
    #Service .info h3.text-clamp{padding:0 0;height:26px;margin:2px 0}
    #Service{background-size:cover;padding:10vw 0 15vw}
    #newsBox ul li,#newsBox ul li:nth-child(2n){margin:20px 0;width:100%}
    #Faq .fexxJ{padding-top:20px}
    #Faq .fexxJ .leftboxx:before{width:140px;height:263px;bottom:139px}
    #Faq:after{right:220px;width:9px;height:57px}
    #faqList{height:483px}
    #Faq .titlleJ{width:62%}
    #Faq .textt p{font-size:20px}
    #faqList li .info b{width:50px;height:50px;padding:0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:18px}
    #faqList li .titlebox b{width:50px;height:50px;padding:0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:18px}
    #faqList li .title{padding:5px 25px 5px 16px}
    #faqList li .title font{font-size:16px}
    #faqList li .title span{right:0;width:18px;height:18px}
    #faqList li .title span:before,#faqList li .title span:after{width:17px;height:2px}
    #faqList li .info{display:flex;align-items:center;padding:30px 20px}
    #faqList li .info font{padding:5px 20px 5px 12px;font-size:15px}
    #faqList li.current .title.info span{right:15px}
    #Faq .fexxJ .botBox{margin-top:20px;gap:15px}
}
@media screen and (max-width:425px){
    #productBox .list_box{width:100%}
}
@media screen and (max-width:320px){
    #aboutBox .right_box .list_box{width:100%;border-right:0}
    #productBox .list_box{width:100%}
}