@import url('/css/animate.css');
.wow {animation: fadeIn 1.5s both;-webkit-animation: fadeIn 1.5s both;animation-duration: 1s;-webkit-animation-duration: 1s;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}

/* section */
section{padding: 2vw 0 8vw;}
section*{z-index:3}
section .title_box font{line-height: 140%;letter-spacing: 0.4px;font-size: 18px;color:var(--primary);font-family: 'Gallery';padding-bottom: 12px;font-style: oblique;}
section .title_box h2 font{font-size: 50px;text-align:left;line-height: 120%;margin-bottom: 0;font-weight: 500;color: var(--primary);position:relative;text-transform:uppercase;letter-spacing: 5px;font-family: 'Cardo',serif;font-style: normal;}
section .title_box h2 font:nth-child(2){margin-left: 50px;}
section .decoText, section .decoText2{position:absolute;font-size: 15px;line-height: 1.5;}
section .track{position:absolute;top: 0;left: 0;z-index: 0;width: max-content;}
section .track p{font-weight: 100;font-size: 20px;margin:0;text-transform:uppercase;letter-spacing:2px;will-change:transform;line-height: 90%;color: rgb(190 169 118 / 20%);font-family: 'Gallery';}

.more{display: flex;flex-direction: row-reverse;justify-content: flex-end;}
.more .atag_item{position: absolute;z-index: 10;}
.more b {width: 120px;font-weight: 300;font-size: 14px;color: #655c4c;letter-spacing: 2px;line-height: 1.5;text-transform: uppercase;font-family: 'Cardo',serif;display: flex;align-items: center;}
.more .arrowWrap {width: 70px;height: 90px;position: relative;padding-right: 20px;}
.more .arrowWrap:before,.more .arrowWrap:after{content:"";position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);width: 40px;height: 40px;border:1px solid #bcbcbc;box-sizing:border-box;border-radius:50%}
.more .arrowWrap:before{left: 10%;}
.more .arrowWrap:after{left: 40%;}
@keyframes ripple{0%{border:3px solid #bcbcbc;width:30px;height:30px;opacity:0.3}
5%{opacity:0.1}
10%{opacity:0.2}
15%{opacity:0.3}
20%{border:1px solid rgb(29 29 29 / 70%);opacity:0.1}
25%{opacity:0.5}
30%{opacity:0.6}
35%{opacity:0.7}
40%{opacity:0.9}
45%,100%{border:1px solid rgba(255,255,255,0.3);opacity:0.2;width:60px;height:60px}
}
.more .arrowWrap .arrow{display: block;height: 15px;background-image: url(/images/18/more_shape2.png);background-repeat: no-repeat;background-size: contain;position: absolute;top: calc(50% - 6px);right: 48px;width: 15px;animation: moreArrow 1s infinite;}
.webBox *,.webBox:before,.webBox:after{transition: all 0.8s ease-in-out;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;-ms-transition: all 0.8s ease-in-out;}


/* about_area */
#mainArea{position: relative;overflow: hidden;}
#about_area .info_item article:before{content:"";width: 200px;height:1px;background: #9a7961;display:block;position:absolute;top: 20px;left: -200px;z-index: 4;}
#about_area .Txttrack p{color:#313131}
#about_area .Txttrack p:before,#about_area .Txttrack p:after{background-color:#313131}
#about_area .title_box h2{color:var(--primary);padding-bottom: 30px;}
#about_area .more .arrowWrap::before{border:1px solid #cbcbcb}
#about_area{position:relative;padding: 6vw 0 0;}
#about_area .track{top: -60px;right: 0;left: auto;}
#about_area .track p:before{content:'';position:absolute;width: 1px;height: 100%;top: -200px;right: 9px;z-index:0;background-color: #7d604b;transition: all 1.1s ease-in-out;-webkit-transition: all 1.1s ease-in-out;opacity: 0.4;}
#about_area.tooolong .track p:before{height: 160%;}
#about_area .track p{color: #a1816a;writing-mode: tb-rl;font-style: initial;background-color: #e3e3e3;}
#about_area .title_box p{position: relative;}
#about_area .title_box p:before{content: '';top: -48px;left: -44px;position: absolute;background-color: #fff;background-size: contain;width: 60px;height: 60px;border-radius: 50%;z-index: -1;}
#about_area .title_box p:after{content: '';top: -32px;left: -24px;position: absolute;background-image: url(/images/18/icon-txt.png);background-repeat: no-repeat;background-size: contain;width: 16px;height: 16px;}
#about_area .title_box{position:relative}
section .nowrap_box{width:var(--width-xxl);margin: auto;z-index: 10;}
#about_area .nowrap_box{width:var(--width-xxl);display:flex;align-items:flex-start;flex-direction: row-reverse;padding: 20px 0 130px;position: relative;}
#about_area .ABImg01,#about_area .ABImg02{position: absolute;}
#about_area .ABImg01{top: 80px;left: -110px;z-index: 10;}
#about_area .ABImg02{bottom: 40px;right: 50px;z-index: 50;}
#about_area .leftBox{margin-top: 40px;position:relative;width: 40%;padding-left: 40px;}
#about_area .rightBox{margin-right: 45px;padding-top: 0;width: 50%;position:relative}
#about_area .rightBox:after{content:'';position:absolute;width: 545px;height: 326px;bottom: -90px;right: -440px;background-image: url(/images/18/img-ab-02.png);background-size: contain;background-repeat: no-repeat;z-index:-1;}
#about_area .rightBox:before{content:'';position:absolute;width: 470px;height: 540px;top: 70px;right: -240px;background-image: url(/images/18/img-ab-05.png);background-size: contain;background-repeat: no-repeat;z-index:-1;}
#about_area .nowrap_box:before{content:'';position:absolute;width: 1px;height: 100%;top: 130px;right: 25px;z-index: -6;background-color: #7d604b52;transform-origin:top left;transition:all 1.1s ease-in-out;-webkit-transition:all 1.1s ease-in-out}
#about_area.tooolong .nowrap_box:before{height: 61%;}
#about_area .nowrap_box .deck02,#about_area .nowrap_box .deck03{position:absolute;z-index:10}
#about_area .nowrap_box .deck02{right: -150px;bottom:70px}
#about_area .nowrap_box .deck02 img,#about_area .nowrap_box .deck03 img{width:80%}
#about_area .nowrap_box .deck03{bottom:-120px;right:-170px}
#about_area .nowrap_box .info_item{width:auto}
#about_area .decoText p{color: #1f1711;font-size: 18px;text-align: right;letter-spacing: 3.5px;}
section .decoText2 p{color: #685547;font-size: 14px;opacity: 0.7;font-family: 'Cardo',serif;width: 280px;}
#about_area .decoText{top: 50px;right: 0;}
#about_area .aboutAreaBG{position:absolute;bottom:0;right:460px;width: 0;height: 0;border: 25px solid;border-color: transparent transparent transparent #fbb034;z-index:0;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out}
section .decoText2{font-family: 'Cardo',serif;position: absolute;top: 230px;right: 100px;writing-mode: tb-rl;height: 400px;font-style: oblique;font-size: 10px;}
#about_area .img_item{width:100%;padding-top: 230px;position: relative;}
#about_area .img_item:before{content:"";width: 90%;height: 80%;border: 0.5px solid #9a7961;display:block;position:absolute;left: 50%;transform: translate(-50%, -5%);z-index: 4;padding-top: 0;}
#about_area .img_item img{width:100%}
#about_area .info_item article{margin-bottom:50px;line-height: 220%;letter-spacing:0.5px;padding-left: 90px;position: relative;z-index: 5;color: #3a2c21;font-size: 18px;}
#about_area .info_item article h2{padding: 0px 0 30px 0;font-weight: 500;letter-spacing: 6px;font-size: 27px;color: #1f1711;line-height:1.5;position:relative;word-spacing: 100vw;}
#about_area::after{content:'';position:absolute;height: 1365px;width: 1282px;top: -240px;right: -160px;background-image: url(/images/18/img-ab-06.png);z-index:0;transform-origin:top left;transition:all 1.1s ease-in-out;-webkit-transition:all 1.1s ease-in-out}
.aboutAreaBG{height: 100%;width: 100%;background: url(/images/18/img-awrap-bg.png);background-size: cover;position: absolute;top: 320px;left: 0;z-index: 0;}
#about_area:before{content:'';position:absolute;height: 487px;width: 487px;top: -300px;left: 80px;background: url(/images/18/img-ab-01.png);background-size: contain;background-repeat: no-repeat;z-index: 0;}
.list_box .info_box h3{height:30px;font-weight:400;font-size:18px;color:#fff;margin:0px 0 0}



/* service_area */
#service_area{margin:0;position:relative;padding: 7vw 0 0vw 0;width: 90%;margin: auto;z-index: 10;}
#service_area:before{content:'';position:absolute;width:100%;height:0;z-index: -2;background-image:url(/images/39/img_v_01.png);background-repeat:no-repeat;background-size: contain;left: 50%;top: 38%;transform:translate(-50%,-50%);transform-origin:bottom right;transition:all 1.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out}
#service_area.tooolong:before{height:445px}
#service_area .more_btn{right: 100px;bottom: 0;}
#service_area .serviceBox{height: 650px;margin-left: 0px;width: calc(100% - 630px);padding:0;}
#service_area .info_item{position:absolute;right: 30%;top:310px}
#service_area .title_box h2{margin-left:0;line-height:100%;padding-bottom:0}
section .title_box h3{font-size:20px;font-weight:400;letter-spacing:3.5px;color:var(--complement)}
#service_area .track{right:auto;left: 210px;bottom:20px;top:auto}
#service_area .processList li.focus .Txt .img{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:.3s;-webkit-transition-delay:.3s}
#service_area .processList li .Txt .img{opacity: 0.8;-webkit-transform:translateY(15px);transform: translateY(15px);}
#service_area .processList .ImgBox{right: 0;position:absolute;bottom:200px;left: calc(100% - -60px);z-index:55;width: 440px;height:40px;-webkit-transform-origin:bottom center;transform-origin:bottom center}
#service_area .processList .ImgBox .title{position:relative;display: flex;align-items: baseline;justify-content: flex-end;}
#service_area .processList .ImgBox .title,#service_area .processList .ImgBox span,#service_area .processList .ImgBox b{color:#676152;font-weight:400;letter-spacing:1.5px;font-size:19px}
#service_area .processList .ImgBox span{margin:0 20px 0 50px;font-family:'Gallery';letter-spacing:2.5px}
#service_area .processList .focus .ImgBox .title, #service_area .processList .focus .ImgBox span, #service_area .processList .focus .ImgBox b{color:var(--primary);}
#service_area .processList .ImgBox .title:before{content:'';position:absolute;width: 0;height:1px;top:50%;left: -90%;z-index:-1;background-color: #ffffff00;transform-origin: bottom right;transition: all 1.1s ease-in-out;-webkit-transition: all 3.1s ease-in-out;}
#service_area .processList .focus .ImgBox .title:before{width: 90%;background-color:var(--primary)}
#service_area .serviceBox .processList .listItem:nth-child(1) .ImgBox{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
#service_area .processList .listItem:nth-child(1) .Txt{opacity:0}
#service_area .serviceBox .processList .listItem:nth-child(2) .ImgBox{bottom:150px}
#service_area .serviceBox .processList .listItem:nth-child(3) .ImgBox{bottom:100px}
#service_area .serviceBox .processList .blur .Txt{-webkit-transform:translate(0%,-200%);transform:translate(0%,-200%)}
#service_area .serviceBox .processList .focus .Txt{-webkit-transform:translate(0%,-50%);transform:translate(0%,-50%);transition:all 0.5s}
#service_area .processList .listItem .Txt{opacity:0;display:none;visibility:visible;right:0;text-align:center;transition:all 0.5s}
#service_area .processList .listItem:nth-child(1) .Txt{opacity:1;display:block}
#service_area .processList .listItem .Img .title{letter-spacing:0.5px;font-weight:400}
#service_area .processList .focus .Txt{opacity:0;transform:translate(-20%,0%);display:block;z-index:5;position:absolute;top:0;right:0}
#service_area .processList .listItem .Txt .img{position:relative;padding: 0 50px 50px 0;}
#service_area .processList .listItem .Txt .img img{height: 630px;object-fit:cover;border-radius:0 0 0 13em;display:block;width: 100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
#service_area .processList .focus .Txt .img:before{content:'';position:absolute;height:160px;width:160px;bottom:0;right:0;background:rgb(228 218 197 / 60%);z-index:-1}
#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt{width: 1040px;height: 740px;top:50%;left:0;transform: translate(0%,-50%);display:block;position:absolute;z-index:-15;padding:20px 0;opacity:1;transition:all 0.5s}
#service_area .processList .listItem .Txt .text{font-size:50px;font-weight:900;line-height:120%;margin-top:20px;background-size:20%;position:absolute;width:380px;left:-30px;bottom:0;background-color:var(--primary);padding:50px;display:none}
#service_area .processList .listItem .Txt span{position:absolute;right:40px;top:-30px;font-size:40px;font-weight:300;font-family:'Montserrat',sans-serif}
#service_area .processList .listItem .Txt .text,#service_area .processList .listItem .Txt span,#service_area .processList .listItem .Txt .text-clamp,#service_area .processList .listItem .Txt .boxtext{color:#fff}
#service_area .processList .listItem .Txt .titleSub{font-style:initial;color:var(--triadic2)}
#service_area .processList .listItem .Txt .text-clamp{font-size:22px;padding-bottom:10px;letter-spacing:0.5px}
#service_area .processList .listItem .Txt .boxtext{font-weight:400;font-size:16px;color:#9ba2ba}
#service_area .processList .listItem .Txt .more{margin-top:10px}
#service_area .processList .focus .Img img:first-child{opacity:1;-webkit-filter:contrast(0) brightness(200%);filter:contrast(0) brightness(200%)}
#service_area .processList .listItem.active .Img img:nth-child(2),#service_area .processList .listItem:hover .Img img:nth-child(2){opacity:1;visibility:visible}
#service_area .processList .listItem.active .Img::before,#service_area .processList .listItem:hover .Img::before{opacity:1}
#service_area .ServiceBG{position:absolute;height:100%;width:calc(70% - 90px);bottom:0;left:0;background:#fff9ec;z-index:0;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out}
#service_area.tooolong .ServiceBG{width:calc(100% - 90px)}

/* secabout */
#secabout{padding: 6vw 0 5vw;position:relative}
#secabout:before{content:'';position:absolute;width: 470px;height: 470px;top: -260px;left: -140px;background-image: url(/images/18/img-n-02.png);background-size: contain;background-repeat: no-repeat;z-index: 1;}
#secabout.tooolong:after{height:100%}
#secabout .track{left:auto;right:0;top:-100px}
#secabout .decoText p{color:#86795e;position:relative;}
#secabout .workframe .left{width: 50%;margin-right:60px;z-index: 10;}
#secabout .SecaboutBG{position:absolute;height:100%;width: calc(100% / 2);bottom:0;left: 0;background: #ece0d0;z-index:0;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out}
#secabout.tooolong .SecaboutBG{width: calc(100% / 2);}

/* newsBox */
#newsBox{padding:0;position: relative;}
#newsBox:after{content:'';position:absolute;width: 314px;height: 365px;background-image: url(/images/18/img-n-01.png);background-size: contain;background-repeat: no-repeat;z-index: 1;top: 200px;left: 80%;transform: translate(-80%, -50%);}
#newsBox .info{position:relative;display:flex;justify-content:space-between;z-index:10;flex-direction:column}
#newsBox .info_item{width: 70%;margin: auto;}
#newsBox .info ul li{font-size:0;overflow: hidden;position: relative;padding: 20px 60px;display: inline-block;vertical-align: top;-webkit-transition: all .9s ease;-o-transition: all .9s ease;transition: all .9s ease;}
#newsBox .info ul li p.time{margin-right:10px;width:90px;display:inline-block;line-height:27px;color:#8a7644;font-weight:600;font-family:'Gallery';letter-spacing:1.5px;font-size:14px;display: flex;justify-content: center;align-items: center;}
#newsBox .info ul li .Txt{margin-top: -20px;margin-bottom: 30px;}
#newsBox .info ul li .Img img{width: 100%;height: 350px;object-fit: cover;border-radius: 20em 20em 0 0;}
#newsBox .info ul li .top{display: flex;align-items: flex-end;justify-content: space-between;}
#newsBox .info ul li .top .classTitle{color: #7e7269;}
#newsBox .info ul li h2{color: #1f1711;font-size: 16px;font-weight: 500;margin-top: 8px;letter-spacing: 0.5px;overflow: hidden;height: 28px;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
#newsBox .info ul li p{color: #635c57;font-size: 13px;-webkit-line-clamp: 2;height: 64px;letter-spacing: 0.5px;line-height: 190%;}
#newsBox .info ul li .newsDate {display: flex;flex-wrap: wrap;-webkit-box-align: center;align-items: flex-end;padding: 0;font-size: 15px;color: #152c50;letter-spacing: 0;text-transform: uppercase;}
#newsBox .info ul li .newsDate span {margin-right: 6px;font-family: 'Cardo', serif;color: #304564;font-style: italic;font-size: 14px;}
#newsBox .info ul li .newsDate .day {font-size: 65px;line-height: 1;}
#newsBox .info ul li .Nmore{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 10;}
#newsBox ul li.slick-center .info p {opacity: 1;-webkit-transition-delay:.5s;transition-delay:.5s;}
#newsBox ul li.slick-center .bookStyle {margin: 0;-webkit-transition-delay:.5s;transition-delay:.5s;}

/* productBox */
#productBox{position:relative;padding: 2vw 0 0;}
#productBox .Txttrack{background-color:#f8f2e6;z-index: 1;}
#productBox .workframe:before{content:'';position:absolute;width:0;height:1px;left:50%;top: 57%;transform:translate(-50%,-50%);z-index:-2;background-color:rgb(212 191 149 / 25%);transform-origin:top left;transition:all 1.1s ease-in-out;-webkit-transition:all 1.1s ease-in-out}
#productBox.tooolong .workframe:before{width:170%;}
#productBox .workframe{position:relative;border-left: 1px solid #d6c6b5;width: 1560px;margin: 0 0 0 auto;display: flex;flex-direction: row-reverse;justify-content: flex-end;align-items: center;}
#productBox.tooolong:before{height: 70%;}
#productBox .leftBox{position:absolute;left: -40px;bottom: 150px;z-index: 10;}
#productBox .rightBox{width: calc(100% - 200px);}
#productBox:after{content:'';position:absolute;width: 354px;height: 406px;bottom: 470px;left: -70px;background-image: url(/images/18/img-p-01.png);background-size: contain;background-repeat: no-repeat;z-index: 1;}
#productBox:before{content:'';position:absolute;width: 572px;height: 390px;top: 0px;right: -230px;background-image: url(/images/18/img-p-02.png);background-size: contain;background-repeat: no-repeat;z-index: 1;}
#productBox .decoText2{writing-mode: rl;top: -20px;left: 0px;height: auto;}
#productBox .decoText2 p{background-color: #ece0d0;padding: 0px 40px;opacity: 1;}
#productBox .decoText2:after{content:'';position:absolute;width: 400%;height: 1px;top: 20px;left: -900px;z-index: -1;background-color: #7d604b;transition: all 1.1s ease-in-out;-webkit-transition: all 1.1s ease-in-out;opacity: 0.2;}
#productBox .left_box{padding: 190px 0px 80px 0px;}
#productBox .left_box .info_item{position:absolute;left:0;top: -10%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
#productBox .track{top: -330px;right: -330px;left: auto;}
#productBox .left_box .page_title:before{bottom:-80px}
#productBox .left_box .title_box font:last-child{margin-left:0}
#productBox .right_box{position:relative;z-index:6;}
#productBox .right_box .product_nav li{margin-bottom:20px}
#productBox .right_box .product_nav li img{height: 670px;object-fit:cover;border-radius:13em 0 0 0;display:block;width: 1010px;object-fit: cover;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
#productBox .right_box .slick-list{overflow:visible}
#productBox .right_boxli .img{margin-right:10px;display:block}
#productBox .right_boxli .imgimg{width:100%;height:655px;object-position:50% 0}
#productBox .right_box .btns{position:absolute;display:flex;right:-4%;bottom:0px;z-index:20}
#productBox .btnsa.facarrow{width:50px;height:45px;background:rgb(51 51 51);display:inline-block}
#productBox .btnsa.facarrowi{padding:14px 20px;color:#fff}
#productBox .product_forh3{margin-top:9px;height:33px;font-weight:400;line-height:30px;letter-spacing:0.13em;font-size:16px;-webkit-line-clamp:1}
#productBox .product_forh4{letter-spacing:0.5px;font-weight:400;font-size:19px;opacity:0.8;padding:5px 0px 20px}
#productBox .product_forarticle{font-size:15px;font-weight:300;letter-spacing:0.04em;line-height:190%;color:rgb(73,62,48);padding:10px 0px 0px}
#productBox .title_box{margin-bottom:0px}
#productBox .decoText p{color:#86795e;position:relative;font-size: 15px;letter-spacing: 2px;line-height: 1.5;font-family: 'Gallery';font-weight: 600;}
#productBox .decoText{position:absolute;text-decoration:underline;top: -120px;left: 690px;width:460px;border-bottom:1px solid #d4cab5;border-top:1px solid #d4cab5;padding:25px 25px}
.carouselFunctionBox {width: 150px;padding-left: 20px;}
.guideList {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;padding-top: 60px;padding-bottom: 60px;}
.guideList li {position: relative;padding-top: 8px;padding-bottom: 8px;cursor: pointer;letter-spacing: 1px;color: #a09186;}
.guideList li::before {content: "";position: absolute;top: 50%;z-index: 1;width: 8px;height: 8px;margin-top: -4px;border-radius: 50%;background-color: #998a80;left: -24px;}
.guideList li:hover {color: #222;}
.guideList li:hover::before {background-color: #7d604b;}
.guideList li a{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 10;}
.titleBox {margin-bottom: 20px;}
.titleBox .titleMain {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: 15px;font-weight: 400;font-size: 17px;color: #3c3c3c;letter-spacing: 1px;border-bottom: 1px solid rgba(34, 34, 34, 0.2);padding-bottom: 20px;margin-top: 10px;}
.titleBox .titleEn,.titleBox .titleEmbellish {display: block;line-height: 1;font-size: 50px;line-height: 140%;font-family: 'Cardo',serif;position: relative;}
.titleBox .titleEn {letter-spacing: 0.4px;font-size: 18px;color: var(--primary);font-family: 'Gallery';padding-bottom: 20px;font-style: oblique;}
.titleBox .titleEn:before{content: '';top: -48px;left: -44px;position: absolute;background-color: #fff;background-size: contain;width: 60px;height: 60px;border-radius: 50%;z-index: -1;}
.titleBox .titleEn:after{content: '';top: -32px;left: -24px;position: absolute;background-image: url(/images/18/icon-txt.png);background-repeat: no-repeat;background-size: contain;width: 16px;height: 16px;}
.titleBox .titleEmbellish {color: #304564;word-spacing: 100vw;}
#productBox ul li .img_show{position: relative;margin-right: 60px;width: calc(100% - 400px);}
#productBox ul li .img_show:before{content:"";width: 100%;height: 100%;background-color: #d6cabc;display:block;position:absolute;left: 0;transform: translate(-5%, 7%);z-index: 0;padding-top: 0;}
#productBox .left_box:after{content:"";width: 343px;height: 458px;background-image: url(/images/18/img-awrap-bg-2.png);background-repeat: no-repeat;display:block;position:absolute;left: 0;top: -90px;transform: translate(20%, 10%);z-index: -1;padding-top: 0;}
#productBox .product_for .txt_box h3{color: #967054;font-size: 24px;font-weight:400}
#productBox .product_for .txt_box h4{margin-top: 20px;margin-bottom: 10px;color: #635c57;font-size: 18px;font-weight:400;}
#productBox .nowrap_box.arrow_box {width: auto;right: 80px;display: flex;justify-content: flex-end;bottom: -300px;display: none;}
#productBox .product_for .txt_box p{margin-bottom: 10px;}
#productBox .arrow_box a {position: relative;border-radius: 50%;border: 1px solid rgb(101 92 76 / 69%);box-sizing: border-box;width: 60px;height: 60px;display: flex;}
#productBox .arrow_box a.next {-webkit-transform: scaleX(-1);transform: scaleX(-1);margin-left: 20px;}
#productBox .arrow_box a:before , #productBox .arrow_box a:after {position: absolute;width: 10px;height: 1px;background: #655c4c;display: block;top: 50%;left: calc((100% - 10px) / 2);-webkit-transform: rotate(45deg);transform: rotate(45deg);-webkit-transform-origin: left;transform-origin: left;content: "";}
#productBox .arrow_box a:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#service_area .processList .focus .Txt, #service_area .processList .listItem:nth-child(1) .Txt{width: 90%;}
#productBox .product_for .slick-slide .img_show .img{object-fit:cover;}
#productBox .product_for .slick-slide .img_show{padding: 0 0px  30px 30px;}
#productBox .product_for .slick-slide .info{width: 380px;margin-right: 50px;}
#productBox .titleBox .titleEn:before{display: none;}


@media screen and (max-width: 1760px){
	#productBox .leftBox{left: -120px;width:420px}
}

@media screen and (max-width: 1680px){
	#service_area .info_item{right: 32%;top: 220px;}
	#service_area .processList .ImgBox{left:calc(100% - -40px)}
	#newsBox{margin:auto}
	#about_area .decoText p{left:-60px;top:-190px}
	#about_area .leftBox:before{left:-400px}
	#secabout .workframe{width: var(--width-xxl);}
	section .title_box h2{font-size:30px}
	#service_area .serviceBox{margin-left: 50px;width:calc(100% - 770px)}
	#service_area .serviceBox,#service_area .processList .listItem .Txt .img img,#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt{height: 550px;}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt{width:800px}
	#service_area{padding:10vw 0 7vw 0;width:100%;margin:auto}
	#service_area .more_btn{bottom:60px}
	#productBox .right_box .product_nav li img{height:580px;width:930px}
	#productBox .leftBox{left: -120px;width:420px}	#productBox .product_for .txt_box h3{font-size:22px}

}
@media screen and (max-width:1560px){
	#service_area .serviceBox{margin-left:20px;width:calc(100% - 640px)}
	section .title_box h2{font-size:30px}
	#service_area .serviceBox,#service_area .processList .listItem .Txt .img img,#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt{height:490px}
	#service_area .processList .listItem .Txt .img img{width:730px}
	#productBox .right_box .product_nav li img{height:630px;width:760px}
	#productBox .leftBox{left:-130px;width:380px}
	#productBox .left_box{padding: 150px 0px 50px 0px;}
	#productBox{padding:10vw 0 8vw}
	#productBox .workframe{width: 80%;}
	.titleBox .titleEmbellish,section .title_box h2 font{font-size: 38px;}
	.titleBox .titleEn{padding-bottom: 10px;}
	#about_area .ABImg02{bottom: -90px;right: 0px;}
	section .decoText2{right: 20px;
}
}
@media screen and (min-width: 1441px) {
	#productBox .workframe:after { left: calc((100% - var(--width-xxl)) / 2); }
}

@media screen and (max-width: 1440px){
	section .title_box h2{font-size: 28px;}
	section .nowrap_box,#about_area .nowrap_box{width: 90%;margin:auto}
	#about_area .aboutAreaBG{right:230px}
	#about_area .info_item article .info h3{font-size:18px}
	#about_area .info_item article .info p{font-size:15px}
	#service_area .serviceBox{margin-left:30px;width:calc(100% - 650px)}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt,#service_area .processList .listItem .Txt .img img{width:750px;height:540px}
	#service_area .info_item{right:450px}
	#service_area.tooolong .ServiceBG{width:80%}
	#newsBox .info .tit.row{padding:20px 0px 20px}
	#newsBox .info ul li p.txt{font-size:16px}
	#productBox{margin: 10px 0 0px;padding: 6vw 0 0vw;}
	#productBox .right_box li .img img{height: 540px;}
	#productBox .track{top:-270px}
	#productBox .decoText{left:610px}
	#productBox .left_box .info_item{-webkit-transform:translateY(0%);transform:translateY(0%)}
	#productBox .nowrap_box.arrow_box{bottom:-70px}
	#productBox .arrow_box a{width:50px;height:50px}
}
@media screen and (max-width: 1366px) {
	.more .arrowWrap{width:75px;height:40px;position:relative;}
	#service_area .info_item{right:380px;top:190px}
	#service_area .processList .ImgBox{left:calc(100% - -50px)}
	#about_area .info_item article{margin-bottom:30px;padding-left: 50px;}
	#productBox .right_box li .img img{height:530px}
	#productBox .leftBox{left:-40px;width:330px;top: -140px;}
	#productBox .workframe:before{top:56%}
	#productBox .track{top:-190px;right: -330px;}
	#productBox .decoText{left:410px}
    #productBox .rightBox{width: 92%;}
	#newsBox .info_item{margin: auto;width: 50%;}#newsBox .info ul li{padding: 20px 40px;}
	#newsBox .info ul li .Img img{height: 240px;}

}
@media screen and (min-width: 1281px){
	.more:hover .arrowWrap .arrow{animation: moreArrow 1s infinite;}
	#about_area .d_flex {align-items: center; }
}
@media screen and (max-width: 1300px){
	#service_area .processList .listItem .Txt .text-clamp{font-size:20px}
	#service_area .processList .listItem .Txt .text{padding:30px}
	#service_area .processList .listItem .Txt .boxtext{font-size:14px}
	#service_area .info_item{right: 390px;top: 110px;}
	#service_area {padding: 0 0 4vw 0;}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt,#service_area .processList .listItem .Txt .img img{width:670px;height:460px}
	#service_area .processList .ImgBox{left:calc(100% - -100px)}
	#service_area .more_btn{right: 100px;}
}
@media screen and (max-width: 1280px){
	section .title_box font{font-size:20px}
	#about_area .img_item:before,#about_area .img_item img{width:100%}
	#about_area .img_item img{height:100%}
	#secabout .track{top: -140px;}
	#newsBox .info .tit.row{padding:10px 0px 0px}
	#newsBox .info .title_box{margin-top:0;margin-bottom: 10px;}
	section .title_box h2{margin-bottom: 0;padding-bottom:25px}
	section .title_box h3{font-size:18px;padding:10px 0 0}
	#about_area .nowrap_box:before, #about_area .leftBox:before,  #about_area .rightBox:after, #about_area::after, #secabout .decoText p, #secabout:before, #secabout::after{display:none}
	#about_area{padding: 11vw 0 0;}
	#about_area .leftBox{width:40%;padding-right:0}
	#about_area .aboutAreaBG{right:0}
	#about_area .track{display: none;}
	#productBox .right_box li .img img{height: 530px;width: 670px;}
	#productBox .workframe{width: 90%;}
	#secabout .workframe{width: 100%;margin:auto}
	#newsBox .info ul li h2{
    font-size: 17px;
}
#newsBox .info ul li p{
    height: 56px;
    font-size: 15px;
}
}
@media screen and (min-width: 1141px){
	#productBox .product_for .slick-slide{display:flex;flex-direction: row;align-items: center;}
}
@media screen and (max-width: 1140px){
	#about_area .title_box font{padding-left:0;margin-left: 0;}
	#about_area .title_box h2 font, section .title_box h2{padding-bottom: 0px;letter-spacing: 1.5px;}
	section .title_box h2,section .title_box p{text-align:center;display:flex;align-items: flex-start;flex-direction:column;padding-bottom: 0;}
	#about_area .title_box h2:before{left:50%;transform:translate(-50%,-50%)}
	#about_area .info_item article .info h3,#about_area .info_item article .info p{text-align:center}
	#about_area .nowrap_box, #secabout .workframe .info_item{display:flex;flex-direction:column;align-items:flex-start;width: 80%;margin:auto;padding:0px 0 0;align-content:flex-start}
	#about_area .leftBox,#secabout .workframe .right{width:100%}
	#about_area .nowrap_box{display:flex;flex-direction:column-reverse;align-items:flex-start}
	#about_area .rightBox,#secabout .workframe .left{width:100%;padding-left:0;padding-top:0}
	#about_area .nowrap_box .info_item,#about_area .img_item{margin:0;width:100%;position:relative;left:0}
	#about_area .img_item{margin-bottom:40px;padding-top: 150px;}
	section .decoText2{display: none;}
	#about_area .info_item article{width:100%;padding:0;margin-bottom:30px;font-size: 16px;}
	#about_area .more_btn{position:relative;left:0}
	#about_area.tooolong .aboutAreaBG{width:100px}
	#about_area.tooolong .aboutAreaBG{height:60%;bottom:auto;top:0}
	#about_area .track{top:-60px;left:0}
	section .more_btn{display:flex;align-items:center;justify-content: flex-start;padding-top: 20px;}
	#newsBox .info{padding: 20px 0 0;}
	#newsBox .more_btn{position:relative}
	#secabout .workframe .left{display:none}
	#secabout.tooolong .SecaboutBG{width:calc(100% - 0px)}
	#secabout .track{top:0}
	#service_area .info_item{right:190px}
	#service_area .processList .ImgBox{left:calc(100% - -260px)}
	#service_area.tooolong .ServiceBG{width:90%}
	section .info_item{display:contents}
	#service_area.tooolong .ServiceBG{width:100%;height:100%}
	#service_area .info_item{position:absolute;right:auto;left:20px;-webkit-writing-mode:initial;-ms-writing-mode:initial;writing-mode:initial;height:0;width:auto;top:auto;bottom:210px;}
	#service_area .title_box h2{margin-left:0}
	#service_area{padding: 0vw 0 24vw 0;position:relative}
	#service_area .track{left:auto;right:0;bottom:auto;top:0;z-index:10}
	#service_area .serviceBox{height: 670px;margin:0 30px;width:calc(100% - 60px)}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt,#service_area .processList .listItem .Txt .img img{width:100%;height: 590px;padding:0}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt,#service_area .processList .listItem:nth-child(2) .Txt,#service_area .processList .listItem:nth-child(3) .Txt{transform: translate(0%,-57%);}
	#service_area .processList .listItem .Txt .img{padding:0}
	#service_area .processList .listItem .Txt .text{position:relative;width:calc(100% - 60px);left:0;margin-top:0}
	#service_area .processList .ImgBox{left: calc(100% - 440px);bottom: -40px;}
	#service_area .serviceBox .processList .listItem:nth-child(2) .ImgBox{bottom: -90px;}
	#service_area .serviceBox .processList .listItem:nth-child(3) .ImgBox{bottom:-180px}
	#service_area .more_btn{left:0;bottom:-40px;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:100%}
	#productBox .decoText,#productBox .leftBox,#productBox .workframe:before,#productBox::before,#about_area_1 .deck01,#about_area_1 .deck02{display: none;}
	#productBox .workframe{display:flex;justify-content:center;border-left: 0px solid #d6c6b5;margin: 0 auto;}
	#productBox .rightBox{display:flex;flex-direction:column-reverse;align-items:center;width:100%}
	.carouselFunctionBox{display: none;}
	#productBox .track{top:-40px;left: -20px;}
	#productBox .left_box{width: calc(100% - 20px);margin:auto;}
	#productBox .right_box li .img img{height:530px;width:90%;margin:auto;border-radius:8em 0 0 0}
	#productBox .right_box{margin-top:0;width: 100%;}
	#productBox .nowrap_box.arrow_box{padding-right:0;width: 100%;right: 0;left: 0;bottom: -40px;-webkit-transform: translateY(0%);transform: translateY(0%);align-items: center;justify-content: center;}
	#productBox .arrow_box a{width:40px;height:40px}
	#productBox .product_for .slick-slide .img_show{width:100%;padding: 0 0px 10px 30px;}
	#productBox ul li .img_show:before{transform: translate(-5%, 0%);top: 20px;}
	#productBox .product_for .slick-slide .img_show .img{height:100%;}
	#productBox .product_for .slick-slide .info{width: 100%;margin-right:0;margin-top: 50px;}
	#newsBox .info ul li{padding: 20px 20px;}
	#newsBox .info ul li .Img img{height: 260px;}
	#about_area .ABImg02, #about_area .info_item article:before, #about_area:before,#about_area .ABImg01{display: none;}
	#about_area .rightBox:after,#productBox:after,#newsBox:after{display: none;}
	#about_area .info_item article h2{font-size: 23px;}
	#about_area .leftBox{padding-left: 10px;}
}
@media screen and (min-width:1025px) {
	#newsBox .slick-prev{left:auto;right:150px;top:-100px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:70px;height:70px;background:#3b5670;border-radius:50px}
	#newsBox .slick-track{padding: 70px 0 0;}
	#newsBox .slick-slide{-moz-transform:scale(1.3);-webkit-transform:scale(1.3);-o-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3);z-index:99999;opacity:1}
	#newsBox .slick-track .slick-center	{-moz-transform:scale(0.95);-webkit-transform:scale(0.95);-o-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);opacity:1;-webkit-transition:all .9s ease;-o-transition:all .9s ease;transition:all .9s ease}
	#newsBox .slick-cloned{opacity:0}
	#newsBox .slick-slide.slick-active{opacity:1}
	#newsBox .info ul li .Txt{opacity: 1;-webkit-transition-delay: .5s;transition-delay: .5s;}
	#newsBox .slick-track .slick-center .Txt{opacity: 0;-webkit-transition-delay: 0s;transition-delay: 0s;}

}
@media screen and (max-width: 1024px){
	#about_area{padding: 6vw 0 2vw;}
	#about_area .img_item{width:100%;margin:0 0 30px auto;order:inherit}
	#about_area .img_item:before{border:0;top:0;right:0;z-index:2}
	#about_area .info_item{margin-top:0px;z-index:4}
    section .info .info_item{width: 100%;}
	#service_area .processList .ImgBox .title, #service_area .processList .ImgBox span, #service_area .processList .ImgBox b{font-size: 19px;}
	#productBox .left_box{padding: 0px 0px 0px 0px;}
	#productBox .right_box{margin-left: 0;width: calc(100% - 0px);}
	#productBox .left_box:after{width: 100%;height: 100%;top: -20px;transform: translate(-10%, 50%);}
}
@media screen and (max-width: 960px){
	.list_box .info_box h3{margin: 0;}
	.titleBox .titleEmbellish{word-spacing: inherit;}
	#newsBox .info ul li{padding: 20px 40px;}
}
@media screen and (max-width: 768px){
	#book_area .row img { height: 350px; }
    #secabout{padding: 9vw 0 6vw;}
}

@media screen and (max-width: 640px){
	#about_area{padding: 50vw 0 3vw;}
	#about_area .img_item{width:100%}
	#about_area .nowrap_box .deck02{right:0px;bottom:70px}
	#about_area .nowrap_box .deck02 img{width:140px}
	#about_area .img_item:before{background:rgba(var(--secondary-rgb),0)}
	#about_area .info_item{margin-top:40px}
	#about_area::after{top:-370px;background-position:top}
	#about_area .info_item article .info h3{font-size:20px;padding:5px 0 0px 0}
	#about_area .img_item img{height:100%;width:100%}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt,#service_area .processList .listItem .Txt .img img{height:380px}
	#service_area .processList .listItem .Txt .img img{border-radius:0 0 0 6em}
	#service_area .serviceBox{height:460px}
	#service_area{padding:0vw 0 19vw 0}
	#service_area .processList .ImgBox{bottom:-50px}
	#service_area .serviceBox .processList .listItem:nth-child(2) .ImgBox{bottom:-100px}
	#service_area .serviceBox .processList .listItem:nth-child(3) .ImgBox{bottom:-220px}
	#service_area .processList .focus .ImgBox .title:before{width: 80%;left: -65%;}
	#service_area .info_item{bottom:200px}
	#about_area.tooolong .aboutAreaBG{height:37%}
	#productBox .right_box li .img img{height:300px;border-radius:6em 0 0 0}

}
@media (min-width:361px) and (max-width:640px){
	#service_area .processList .listItem{left:calc(50% - 30px);width:60px}
}

@media screen and (max-width: 500px){
	section .title_box h2{font-size: 28px;letter-spacing: 2.5px;}
    #newsBox .info .tit.row{padding:0px 0px 10px}
	#newsBox .info .tit a{font-size:29px}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt,#service_area .processList .listItem .Txt .img img{height: 280px;}
	#service_area .serviceBox{height:380px}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt,#service_area .processList .listItem:nth-child(2) .Txt,#service_area .processList .listItem:nth-child(3) .Txt{transform: translate(0%,-70%);}
	#service_area{padding: 8vw 0 29vw 0;}
	#service_area .processList .ImgBox{bottom: 0px;}
	#service_area .serviceBox .processList .listItem:nth-child(2) .ImgBox{bottom: -50px;}
	#service_area .serviceBox .processList .listItem:nth-child(3) .ImgBox{bottom:-180px}
	#service_area .info_item{bottom:180px}
	#service_area .processList .listItem .Txt .text{width:calc(100% - 40px);padding:20px}
	#productBox .arrow {width: 20px;}
	#productBox .arrow a { width: 50px; height: 50px; }
	#productBox {margin: 20px 0 30px;}
	#newsBox .info ul li .Img img{height: 320px;}
}
@media (max-width:360px){
	#service_area .processList .listItem{left:calc(50% - 25px);width:50px}
}