@import url('/css/43/index.min.css'); /* section */
section{margin-bottom:12vw}
section.last{margin-bottom:1vw}
section.section_pad{padding:5vw 0}
section >*{z-index:3}
section .title_box{margin:0px auto 10px}
section .title_box font{padding:0px 0;box-sizing:border-box;line-height:1;z-index:5}
section .title_box font span{width:40px;height:1px;top:10px;left:40px;z-index:1;position:absolute}
section .title_box font span:before,section .title_box font span:after{position:absolute;width:50%;height:100%;background:var(--primary);display:block;top:0;left:0;content:""}
section .title_box font span:after{left:auto;right:0}
#wrap .title_box font span{-webkit-transform:translate(-100%,0%) rotate(0deg)}
#wrap .title_box.showtime font span,#wrap .title_box.showtime font span{-webkit-transform:translate(-50%,-50%) rotate(0deg)}
section .title_box font b{line-height:100%;letter-spacing:2.2px;font-style:initial;font-size:24px;font-weight:bold;text-transform:inherit;z-index:4;opacity:1;color:var(--black);text-transform:uppercase;font-family:'Rajdhani',sans-serif;padding-left:50px}
section .title_box font strong{display:block;font-weight:400;color:#ffffff;font-size:18px;position:relative;padding:0 10px;letter-spacing:2px}
section .title_box font strong,#custom_area .titleBox .title b{font-weight:400;font-size:19px;line-height:190%}
section .title_box font strong:before{content:"";position:absolute;background-color:var(--complement);width:200px;-webkit-clip-path:polygon(0% 0%,80% 0%,100% 100%,0% 100%);height:36px;left:0px;top:-1px;z-index:-10}
section .title_box font strong::after{content:"";display:block;width:20px;height:1px;margin-top:20px;background-color:var(--complement);padding:0 10px;margin-left:-10px}
section .title_box font .sub_title{font-weight:bold;font-size:22px;text-transform:uppercase;font-style:italic;top:80px;left:85px;opacity:0}
section .title_box.showtime font span:before,section .title_box.showtime font span:after{-webkit-transition-delay:.2s;transition-delay:.2s}
section .title_box.showtime font b{opacity:1;-webkit-transition-delay:.6s;transition-delay:.6s}
section .title_box.showtime font .sub_title{opacity:1;-webkit-transition-delay:.8s;transition-delay:.8s}
section .img_show:before{position:absolute;width:200%;height:100%;background:var(--secondary);content:"";top:0;left:-50%;z-index:10}
section .img_show.showtime:before{left:120%}
section #title_boxwow font{text-transform:uppercase;line-height:130%;letter-spacing:0px;line-height:1;background:-webkit-gradient(linear,left top,right top,from(var(--secondary)),to(var(--complement)));background:linear-gradient(to right,var(--secondary),var(--complement));background-clip:text;-webkit-background-clip:text;color:transparent;font-weight:bold;text-transform:uppercase;font-family:'Josefin Sans'}
section #title_boxwow font:last-child{margin-left:15px;color:var(--info);position:relative}
section #title_boxwow .title_box font:last-child{margin-left:0}
section .title_box.showtime font span:after{display:none}
section .TTTXT{font-size:24px;font-weight:600;line-height:160%;margin-bottom:30px;margin-top:20px;color:var(--info);font-weight:500}
section .TTTxt{line-height:200%;font-size:16px;color:var(--info);padding-bottom:1em;line-height:180%}
#custom_area .titleBox p font,#title_boxwow p font{font-size:38px;margin-top:10px}

/* bg_box */
.bg_box{width:100%;height:100%;background:no-repeat 50% / cover;opacity:.5;top:0;left:0}
.bg_box:before{width:100%;height:100%;display:block;background:rgba(var(--white-rgb),.3);content:""}
.bg_box.white:before{background:rgba(var(--white-rgb),.2)}

/* about_area */
#about_area .workframe{display:flex;flex-direction:row;justify-content:space-between;margin:0 0 0 auto;width:90%}
#about_info{position:relative}
#about_info:before{content:"about us";position:absolute;right:-120px;top:0px;font-size:80px;color:#f1f0f2;transform:rotate( -90deg) translateX(-50%);font-family:'Poppins',sans-serif;font-weight:bold;text-transform:uppercase;z-index:2;border-bottom:1px solid;line-height:120%}
#about_area .workframe:nth-child(2n) #about_info:before{display:none}
#about_area article{margin-bottom:30px;line-height:180%;letter-spacing:0.8px;font-weight:400}
#about_area article .Txt h2,#about_area article .Txt p{font-size:22px;font-weight:500}
.project_box ul{display:flex;flex-wrap:wrap}
.project_box ul li{width:calc((100% / 2) - 10px);margin:5px 10px 5px 0px}
.project_box ul li a{padding:10px;background-color:var(--primary);display:flex;align-items:center;justify-content:space-between;height:100%;position:relative}
.project_box ul li a p{color:var(--white)}
.project_box ul li a .crossBox{width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,0.3);position:relative}
.project_box ul li a .crossBox::after{content:"";width:3px;height:3px;background-color:var(--white);position:absolute;top:calc(50% - 1.5px);left:calc(50% - 1.5px);z-index:2}
.project_box ul li a .crossBox .cross{width:100%;height:100%;position:relative}
.project_box ul li a .crossBox .cross::before{content:"";width:31px;height:1px;display:block;background-color:#fff;position:absolute;top:calc(50% - 0.5px);left:calc(50% - 15.5px)}
.project_box ul li a .crossBox .cross::after{content:"";width:1px;height:31px;display:block;background-color:#fff;position:absolute;top:calc(50% - 15.5px);left:calc(50% - 0.5px)}
#about_area .more{margin-top:60px}
#about_area .title_box{margin:30px auto 10px}
#about_info .aboutsub_title{font-size:17px;padding:0 0 10px 0px;display:block;font-weight:400;letter-spacing:0.8px}
.webBox #SeoStarRating font:first-child,.webBox #SeoStarRating font,.webBox #SeoStarRating font *{color:#bfbfbf}
.webBox #SeoStarRating font:last-child{color:#19d6d4}

/* slognBox */
#services_area{background-color:#f9f9f9;background-image:url(/images/43/img-sbg.jpg);background-position:50% -30%;background-repeat:no-repeat;margin:0;padding:70px 0;overflow:hidden}
#slognBox .rightBox{max-width:600px;height:600px;margin-left:auto;margin-right:auto;width:calc(100% - 600px);padding:50px;position:relative;left:0px}
#slognBox .rightBox::before{content:"";position:absolute;top:50px;left:50px;width:calc(100% - 100px);height:calc(100% - 100px);background:url(/images/43/process_circle.png) no-repeat center;background-size:contain}
#slognBox .processList .ImgBox{position:absolute;top:0px;left:calc(50% - 60px);z-index:5;width:100px;height:50%;-webkit-transform-origin:bottom center;transform-origin:bottom center;pointer-events:none}
#slognBox .processList .listItem .Txt{opacity:0;display:none;visibility:visible;-webkit-transition:transform 1s ease-out 0.3s,opacity 1s ease-out 1.7s;transition:transform 1s ease-out 0.3s,opacity 1s ease-out 1.7s;right:0;text-align:center}
#slognBox .processList .listItem:nth-child(1) .Txt{opacity:1;display:block}
#slognBox .processList .listItem .Img{display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;width:110px;height:110px;border-radius:50%;-webkit-box-shadow:0 4px 10px rgb(0 0 0 / 8%);box-shadow:0 4px 10px rgb(0 0 0 / 8%);background-color:#fff;pointer-events:auto;flex-direction:column;align-items:center;border:8px solid rgb(255 255 255);-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out}
#slognBox .processList .listItem:nth-child(1) .ImgBox{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
#slognBox .processList .listItem:nth-child(1) .Img{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
#slognBox .processList .listItem:nth-child(2) .ImgBox{-webkit-transform:rotate(36deg);transform:rotate(36deg)}
#slognBox .processList .listItem:nth-child(2) .Img{-webkit-transform:rotate(-36deg);transform:rotate(-36deg)}
#slognBox .processList .listItem:nth-child(3) .ImgBox{-webkit-transform:rotate(72deg);transform:rotate(72deg)}
#slognBox .processList .listItem:nth-child(3) .Img{-webkit-transform:rotate(-72deg);transform:rotate(-72deg)}
#slognBox .processList .listItem:nth-child(4) .ImgBox{-webkit-transform:rotate(108deg);transform:rotate(108deg)}
#slognBox .processList .listItem:nth-child(4) .Img{-webkit-transform:rotate(-108deg);transform:rotate(-108deg)}
#slognBox .processList .listItem:nth-child(5) .ImgBox{-webkit-transform:rotate(144deg);transform:rotate(144deg)}
#slognBox .processList .listItem:nth-child(5) .Img{-webkit-transform:rotate(-144deg);transform:rotate(-144deg)}
#slognBox .processList .listItem:nth-child(6) .ImgBox{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
#slognBox .processList .listItem:nth-child(6) .Img{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}
#slognBox .processList .listItem:nth-child(7){-webkit-transform:rotate(216deg);transform:rotate(216deg)}
#slognBox .processList .listItem:nth-child(7) .Img{-webkit-transform:rotate(-216deg);transform:rotate(-216deg)}
#slognBox .processList .listItem:nth-child(8){-webkit-transform:rotate(252deg);transform:rotate(252deg)}
#slognBox .processList .listItem:nth-child(8) .Img{-webkit-transform:rotate(-252deg);transform:rotate(-252deg)}
#slognBox .processList .listItem:nth-child(9){-webkit-transform:rotate(288deg);transform:rotate(288deg)}
#slognBox .processList .listItem:nth-child(9) .Img{-webkit-transform:rotate(-288deg);transform:rotate(-288deg)}
#slognBox .processList .listItem:nth-child(10){-webkit-transform:rotate(324deg);transform:rotate(324deg)}
#slognBox .processList .listItem:nth-child(10) .Img{-webkit-transform:rotate(-324deg);transform:rotate(-324deg)}
#slognBox .processList .focus .Img{background-color:var(--secondary);border:8px solid rgb(255 255 255);border-radius:50%;background:linear-gradient(to right,var(--secondary),var(--complement));background-size:200%;background-position:0;position:relative}
#slognBox .processList .listItem .Img .title{position:absolute;bottom:-50px;letter-spacing:0.5px;font-weight:400}
#slognBox .processList .focus .Txt,#slognBox .processList .listItem:nth-child(1) .Txt{opacity:1;width:300px;height:300px;top:50%;left:50%;transform:translate(-50%,-50%);display:block;position:absolute;z-index:5;border-radius:50%;background-color:#fff;padding:20px}
#slognBox .processList .listItem .Txt .text{background:-webkit-gradient(linear,left top,right top,from(var(--secondary)),to(var(--complement)));background:linear-gradient(to right,var(--secondary),var(--complement));background-clip:text;-webkit-background-clip:text;color:transparent;font-size:50px;font-weight:900;line-height:120%;margin-top:20px;background-size:20%;font-family:'Josefin Sans'}
#slognBox .processList .listItem .Txt .text,#slognBox .processList .listItem .Txt .text-clamp,#slognBox .processList .listItem .Txt .boxtext{text-align:center}
#slognBox .processList .listItem .Txt .titleSub{font-style:initial;color:var(--triadic2)}
#slognBox .processList .listItem .Txt .text-clamp{font-size:30px}
#slognBox .processList .listItem .Txt .boxtext{font-weight:400;font-size:16px}
#slognBox .processList .listItem .Txt .more{margin-top:10px}
#slognBox .processList .focus .Img img:first-child{opacity:1;-webkit-filter:contrast(0) brightness(200%);filter:contrast(0) brightness(200%)}
#slognBox .processList .listItem.active .Img img:nth-child(2),#slognBox .processList .listItem:hover .Img img:nth-child(2){opacity:1;visibility:visible}
#slognBox .processList .listItem.active .Img::before,#slognBox .processList .listItem:hover .Img::before{opacity:1}
#title_boxwow01{margin-bottom:30px;width:100%}
#slognBox .leftBox .slognBtnItem{display:flex}
#slognBox .leftBox .slognBtnItem .slognBtn{opacity:1;padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
#slognBox .leftBox .slognBtnItem .slognBtn> a:hover{color:var(--secondary)}
#slognBox .leftBox .slognBtnItem .slognBtn .btn{width:100px;height:110px;border-radius:50%;position:relative;background:-webkit-gradient(linear,left top,right top,from(var(--secondary)),to(var(--complement)));background:linear-gradient(to right,var(--secondary),var(--complement));display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
#slognBox .leftBox .slognBtnItem .slognBtn .btn:hover{background-color:var(--secondary)}
#slognBox .leftBox .slognBtnItem .slognBtn .btn span{color:#000304;border:4px solid #fff;width:100px;height:90px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;background-color:#fff;font-size:18px}
#slognBox .leftBox .slognBtnItem .slognBtn .btn::before{content:"";position:absolute;background-image:url("/images/39/arrowLink.png");background-repeat:no-repeat;background-position:center;background-size:contain;z-index:1;width:20px;height:17px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);top:50%;left:50%}
#slognBox .leftBox .slognBtnItem .slognBtn .btn::after{content:"";position:absolute;border-radius:50%;top:0;left:0;bottom:0;right:0;z-index:-1;background-color:#bdbdbd;-webkit-animation:dotAni 1.2s infinite ease-out forwards;animation:dotAni 1.2s infinite ease-out forwards}
@-webkit-keyframes dotAni{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
80%{opacity:0.1;-webkit-transform:scale(1.3);transform:scale(1.3)}
100%{opacity:0;-webkit-transform:scale(1.4);transform:scale(1.4)}
}@keyframes dotAni{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
80%{opacity:0.1;-webkit-transform:scale(1.3);transform:scale(1.3)}
100%{opacity:0;-webkit-transform:scale(1.4);transform:scale(1.4)}
}#book_area{margin-top:0px;padding:0 0 2vw 0}
#book_area .nowrap_box .img_scale{margin:0 5px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}
#book_area .nowrap_box .img_scale .bookTxt{background-color:#fff;padding:20px;display:none}
#book_area .nowrap_box .img_scale .bookTxt .txt_clamp{font-weight:600;font-size:22px;padding-bottom:10px}
#book_area a b{margin:auto;padding:0 10%;width:80%;height:42px;letter-spacing:.15em;font-weight:700;font-size:25px}
#book_area .slick-current a b{letter-spacing:.4em}
#book_area .nowrap_box .img_scale a{z-index:10}

/* canvas */
canvas{height:100%;left:0;position:absolute;top:0;width:100%;z-index:2;opacity:1}

/* custom_area */
#custom_area .titleBox .title{text-align:center;display:flex;flex-direction:column;align-items:center}
#custom_area .titleBox .title span{font-size:44px;font-weight:700;color:var(--complement);line-height:140%}
#custom_area .titleBox .title b{color:var(--primary);display:inline-block;font-weight:500}
#custom_area{margin:0;padding:4vw 0 6vw 0;background-position:0 100%;background-repeat:no-repeat}
#custom_area:after{position:absolute;background-size:cover;background-position:0 100%;background-repeat:no-repeat;display:block;top:0;left:0;content:"";opacity:1}
#custom_area .titleBox,#custom_area .titleBox p{text-align:center}
#custom_area .title_box{text-align:center}
#custom_area .title_box font span{width:2px;height:80px;top:-70px;z-index:1;position:absolute;left:50%;-webkit-transform:translate(-50%,-50%) rotate(0deg)}
#custom_area .title_box font span:before{position:absolute;width:50%;height:100%;background:var(--primary);display:block;top:0;left:0;content:""}
#custom_area .title_box font b{padding-left:0}
#custom_area .titleBox .TTTXT{text-align:center}
#custom_box{padding:5vw 0 6vw;margin:auto;width:70%;z-index:3}
#custom_box ul{overflow:hidden}
#custom_box ul li{display:inline-block;width:19%;height:280px;overflow:hidden}
#custom_box li .row{margin:0px 20px;padding:30px 0px;width:auto;display:flex;flex-direction:column;align-items:center;margin-bottom:10px;border-radius:40px 40px 40px 0;background-color:#f1f1f1;overflow:hidden}
#custom_box li .row .circle{position:relative;margin:0 auto 15px;width:100px;height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;box-sizing:border-box;text-align:center;line-height:114px}
#custom_box li .row:hover .circle{animation:flipInX 1.5s both;-webkit-animation:flipInX 1.5s both;animation-duration:1s;-webkit-animation-duration:1s}
#custom_area .more_btn{width:200px}
@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}
40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}
60%{transform:perspective(400px) rotateX(10deg);opacity:1}
80%{transform:perspective(400px) rotateX(-5deg)}
to{transform:perspective(400px)}
}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;opacity:0}
40%{-webkit-transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in}
60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1}
80%{-webkit-transform:perspective(400px) rotateX(-5deg)}
to{-webkit-transform:perspective(400px)}
}#custom_box li .row h2{font-size:25px;text-align:center;padding:0px 0;border-bottom:var(--complement) 1px solid;color:var(--complement);line-height:180%;height:auto;margin-bottom:15px;letter-spacing:0.5px;font-weight:600;display:flex;justify-content:center}
#custom_box li .row article{line-height:150%;font-weight:500;text-align:center;word-wrap:unset;opacity:1;font-size:18px;height:auto;letter-spacing:0.5px}

@media screen and (max-width: 1715px) {
    section.last{width:100%}
}

@media screen and (min-width: 1441px) {
    #services_area::before{content:"";position:absolute;bottom:-10px;margin-top:0;width:420px;height:300px;left:-160px;background-repeat:no-repeat;background-image:url(/images/43/img-s-01.png);background-size:cover}
	#slognBox .leftBox{width:400px;padding-left:130px}
	#about_area .leftBox{width:410px}
}

@media screen and (max-width: 1440px) {
    #services_area::before{content:"";position:absolute;bottom:-10px;margin-top:0;width:370px;height:260px;left:-140px;background-repeat:no-repeat;background-image:url(/images/43/img-s-01.png);background-size:cover}
	#slognBox .leftBox{width:400px;padding-left:130px}
	#about_area .leftBox{width:300px}
	#about_area #photo_list{width:calc(100% - 300px)}
}

@media screen and (min-width: 1281px) {
    #book_area li:hover a b{letter-spacing:.4em}
	#custom_box li:hover .row article{transform:translateY(0px);opacity:1;display:block;background-color:rgb(255 255 255 / 62%);padding:10px 30px}
	#custom_box li:hover .row .sgeee{display:none}
	#custom_area:after{background-attachment:fixed}
	.project_box ul li:hover a{background-color:var(--complement)}
	#about_area::after{content:"";position:absolute;top:-50px;right:180px;z-index:-1;width:7px;height:7px;background-color:rgba(160,160,160,0.15);-webkit-box-shadow:0px 0px rgba(160,160,160,0.15),0px 22px rgba(160,160,160,0.15),0px 44px rgba(160,160,160,0.15),0px 66px rgba(160,160,160,0.15),0px 88px rgba(160,160,160,0.15),0px 110px rgba(160,160,160,0.15),0px 132px rgba(160,160,160,0.15),0px 154px rgba(160,160,160,0.15),0px 176px rgba(160,160,160,0.15),22px 0px rgba(160,160,160,0.15),22px 22px rgba(160,160,160,0.15),22px 44px rgba(160,160,160,0.15),22px 66px rgba(160,160,160,0.15),22px 88px rgba(160,160,160,0.15),22px 110px rgba(160,160,160,0.15),22px 132px rgba(160,160,160,0.15),22px 154px rgba(160,160,160,0.15),22px 176px rgba(160,160,160,0.15),44px 0px rgba(160,160,160,0.15),44px 22px rgba(160,160,160,0.15),44px 44px rgba(160,160,160,0.15),44px 66px rgba(160,160,160,0.15),44px 88px rgba(160,160,160,0.15),44px 110px rgba(160,160,160,0.15),44px 132px rgba(160,160,160,0.15),44px 154px rgba(160,160,160,0.15),44px 176px rgba(160,160,160,0.15),66px 0px rgba(160,160,160,0.15),66px 22px rgba(160,160,160,0.15),66px 44px rgba(160,160,160,0.15),66px 66px rgba(160,160,160,0.15),66px 88px rgba(160,160,160,0.15),66px 110px rgba(160,160,160,0.15),66px 132px rgba(160,160,160,0.15),66px 154px rgba(160,160,160,0.15),66px 176px rgba(160,160,160,0.15),88px 0px rgba(160,160,160,0.15),88px 22px rgba(160,160,160,0.15),88px 44px rgba(160,160,160,0.15),88px 66px rgba(160,160,160,0.15),88px 88px rgba(160,160,160,0.15),88px 110px rgba(160,160,160,0.15),88px 132px rgba(160,160,160,0.15),88px 154px rgba(160,160,160,0.15),88px 176px rgba(160,160,160,0.15),110px 0px rgba(160,160,160,0.15),110px 22px rgba(160,160,160,0.15),110px 44px rgba(160,160,160,0.15),110px 66px rgba(160,160,160,0.15),110px 88px rgba(160,160,160,0.15),110px 110px rgba(160,160,160,0.15),110px 132px rgba(160,160,160,0.15),110px 154px rgba(160,160,160,0.15),110px 176px rgba(160,160,160,0.15);box-shadow:0px 0px rgba(160,160,160,0.15),0px 22px rgba(160,160,160,0.15),0px 44px rgba(160,160,160,0.15),0px 66px rgba(160,160,160,0.15),0px 88px rgba(160,160,160,0.15),0px 110px rgba(160,160,160,0.15),0px 132px rgba(160,160,160,0.15),0px 154px rgba(160,160,160,0.15),0px 176px rgba(160,160,160,0.15),22px 0px rgba(160,160,160,0.15),22px 22px rgba(160,160,160,0.15),22px 44px rgba(160,160,160,0.15),22px 66px rgba(160,160,160,0.15),22px 88px rgba(160,160,160,0.15),22px 110px rgba(160,160,160,0.15),22px 132px rgba(160,160,160,0.15),22px 154px rgba(160,160,160,0.15),22px 176px rgba(160,160,160,0.15),44px 0px rgba(160,160,160,0.15),44px 22px rgba(160,160,160,0.15),44px 44px rgba(160,160,160,0.15),44px 66px rgba(160,160,160,0.15),44px 88px rgba(160,160,160,0.15),44px 110px rgba(160,160,160,0.15),44px 132px rgba(160,160,160,0.15),44px 154px rgba(160,160,160,0.15),44px 176px rgba(160,160,160,0.15),66px 0px rgba(160,160,160,0.15),66px 22px rgba(160,160,160,0.15),66px 44px rgba(160,160,160,0.15),66px 66px rgba(160,160,160,0.15),66px 88px rgba(160,160,160,0.15),66px 110px rgba(160,160,160,0.15),66px 132px rgba(160,160,160,0.15),66px 154px rgba(160,160,160,0.15),66px 176px rgba(160,160,160,0.15),88px 0px rgba(160,160,160,0.15),88px 22px rgba(160,160,160,0.15),88px 44px rgba(160,160,160,0.15),88px 66px rgba(160,160,160,0.15),88px 88px rgba(160,160,160,0.15),88px 110px rgba(160,160,160,0.15),88px 132px rgba(160,160,160,0.15),88px 154px rgba(160,160,160,0.15),88px 176px rgba(160,160,160,0.15),110px 0px rgba(160,160,160,0.15),110px 22px rgba(160,160,160,0.15),110px 44px rgba(160,160,160,0.15),110px 66px rgba(160,160,160,0.15),110px 88px rgba(160,160,160,0.15),110px 110px rgba(160,160,160,0.15),110px 132px rgba(160,160,160,0.15),110px 154px rgba(160,160,160,0.15),110px 176px rgba(160,160,160,0.15)}
	.bg_box:before{content:'';position:absolute;top:0;width:30%;height:100%;background-color:#eaeaea;-webkit-transform:skew(30deg);-ms-transform:skew(30deg);transform:skew(30deg);z-index:-1;-webkit-transition:all cubic-bezier(0.16,1.08,0.38,0.98) 1s;-o-transition:all cubic-bezier(0.16,1.08,0.38,0.98) 1s;transition:all cubic-bezier(0.16,1.08,0.38,0.98) 1s;left:38%}
	#book_area .nowrap_box .img_scale{background-color:#000}
	#book_area .nowrap_box .img_scale .ImgBorder{position:absolute;top:0;left:0;width:calc(100% - 20px);height:calc(100% - 20px);padding:10px;z-index:100}
	#book_area .nowrap_box .img_scale .ImgBorder .dashed{position:relative;width:100%;height:100%}
	#book_area .nowrap_box .img_scale .ImgBorder .dashed::before,#book_area .nowrap_box .img_scale .ImgBorder .dashed::after{content:"";position:absolute;height:100%;width:100%;-webkit-transform-origin:center;transform-origin:center;opacity:1;-webkit-transition:all 0.7s ease-in-out;transition:all 0.7s ease-in-out}
	#book_area .nowrap_box .img_scale .ImgBorder .dashed::before{border-top:1px dashed #fff;border-bottom:1px dashed #fff;-webkit-transform:scale3d(1,0,1);transform:scale3d(1,0,1)}
	#book_area .nowrap_box .img_scale .ImgBorder .dashed::after{border-left:1px dashed #fff;border-right:1px dashed #fff;-webkit-transform:scale3d(0,1,1);transform:scale3d(0,1,1)}
	#book_area .nowrap_box .img_scale:hover .ImgBorder .dashed::before,#book_area .nowrap_box .img_scale:hover .ImgBorder .dashed::after{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);opacity:0.7}
	#book_area .img_cover{-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;width:100%}
	#book_area .nowrap_box .img_scale:hover .img_cover{opacity:0.5}
}

@media screen and (max-width: 1280px) {
    #slognBox .leftBox{margin-bottom:40px}
	#slognBox .leftBox{width:400px;padding-left:40px}
	#slognBox .rightBox{width:calc(100% - 100px)}
	#services_area::before{display:none}
}

@media screen and (min-width: 1141px) {
    #about_area .workframe:nth-child(2n) article{width:80%;margin-top:20px}
	#about_area article{width:70%}
	#slognBox{display:flex}
}

@media screen and (max-width: 1140px) {
    #about_area .workframe{display:flex;flex-direction:column;align-items:flex-start;padding:30px 0;width:90%;margin:0 auto}
	#about_info,.row{margin:0}
	#about_area .more{margin-top:15px;margin-left:15px;margin:15px 0;width:auto;text-align:center}
	#about_info:before{display:none}
	#about_area .leftBox{width:100%;margin:0 auto 40px}
	#about_area #photo_list{width:calc(100% - 0px)}
	#about_area #photo_list .img_cover{width:100%;height:620px;object-position:100% 50%;object-fit:cover}
	#slognBox .leftBox{width:100%;padding-left:0}
	#title_boxwow{width:100%}
	section .title_box,section #title_boxwow p,section .TTTXT,section .TTTxt{text-align:center}
	section .TTTXT{
    font-size: 20px;
    margin-bottom: 20px;
}
	#slognBox .leftBox .slognBtnItem{display:flex;align-items:center;justify-content:center}
	#slognBox .leftBox .slognBtnItem .slognBtn{margin:10px 40px}
	#services_area{background-position:50% 50%;padding:20px 0 70px}
}

@media screen and (min-width: 1025px) {
    section{margin-bottom:4vw;margin-top:100px}
	#about_area #photo_list{order:1}
	#about_area .workframe:nth-child(2n){background-color:var(--white);flex-direction:row-reverse;padding:5vw 0 0}
	#about_area .workframe:nth-child(2n) #about_info{margin-left:100px;width:calc(45% - 30px);margin-right:32px}
}

@media screen and (max-width: 1024px) {
    #about_area .title_box{margin:0px auto 20px}
	#about_area article .Txt h2,#about_area article .Txt p{font-size:19px}
	#about_area #photo_list .img_cover{height:560px}
	.nowrap_box li .row{margin:0}
	.nowrap_box li .row .classTitle{position:absolute;top:-24px}
	#slognBox .processList .listItem .Txt .text-clamp{font-size: 24px;}
	#slognBox .processList .listItem .Txt .text{margin-top: 30px;line-height: 90%;font-size: 40px;}
	#slognBox .processList .listItem .Txt .text-clamp{font-size: 24px;}
	#slognBox .processList .listItem .Txt .text{margin-top: 30px;line-height: 90%;}
}

@media screen and (max-width: 960px) {
    #custom_area{padding:9vw 0 6vw 0}
	#custom_area .titleBox p font,#title_boxwow p font{font-size:36px}
}

@media screen and (max-width: 768px) {
    #about_area #photo_list .img_cover{height:400px}
	#custom_box li .row{margin:10px 10px;padding:20px 0}
	#custom_box{width:90%;padding:9vw 0 8vw 0}
	#about_area #photo_list .img_cover{height:430px}
}

@media screen and (max-width: 640px) {
    section .title_box{margin:10px auto 20px}
	section .title_box font b{font-size:20px;letter-spacing:1.2px}
	section #title_boxwow p font{font-size:36px}
	section .title_box font .sub_title{font-size:17px;left:55px}
	#about_area #photo_list .img_cover{height:330px}
	#slognBox .rightBox{max-width:480px;height:480px;margin-left:auto;margin-right:auto;width:calc(100% - 460px);padding:50px;position:relative;left:0}
	#slognBox .processList .listItem .Img{width:80px;height:80px;border:10px solid rgb(255 255 255)}
	#slognBox .processList .listItem .Img img{width:48px}
	#slognBox .processList li:nth-child(1) .Img img,#slognBox .processList li:nth-child(4) .Img img,#slognBox .processList li:nth-child(5) .Img img,#slognBox .processList li:nth-child(6) .Img img{width:39px}
	#slognBox .processList .listItem .Img .title{font-size:12px;display:none}
	#slognBox .processList .listItem:hover .Txt,#slognBox .processList .listItem:nth-child(1) .Txt{width:260px;height:260px;padding:30px}
	#slognBox .processList .listItem .Txt .text,#slognBox .processList .listItem .Txt .text-clamp,#slognBox .processList .listItem .Txt .boxtext,#slognBox .processList .listItem .Txt .titleSub,#slognBox .processList .listItem .Txt .more{width: 230px;margin:auto}
	#slognBox .processList .focus .Txt,#slognBox .processList .listItem .Txt{width:280px;height:280px;padding:10px}
	#slognBox .processList .listItem .Txt .text{font-size: 26px;margin-top: 31px;line-height:90%}
	#slognBox .processList .listItem .Txt .titleSub{display:flex;justify-content:center;font-size: 14px;line-height: 150%;}
	#slognBox .processList .listItem .Txt .text-clamp{font-size: 20px;}
	#slognBox .processList .listItem .Txt .boxtext{font-size:14px;margin-bottom:10px;line-height: 160%;}
	#slognBox .rightBox::before{width:calc(100% - 50px);height:calc(100% - 50px);top:25px;left:25px}
	#book_area .img_cover{height:220px}
	#custom_area{padding:7vw 0 8vw 0}
	#book_area{margin-bottom:4vw}
	#custom_box li .row .circle{width:60px;height:60px;line-height:60px}
	#custom_box li .row article{font-size:16px}
	#custom_box ul li{height:240px}
	section{margin-bottom:5vw}
	section .TTTXT{font-size:20px}
	#custom_area .titleBox .TTTXT{font-size:18px}
	#services_area .TTTXT,#about_area .TTTXT{word-spacing:100vw}
	#slognBox .leftBox .slognBtnItem .slognBtn{margin:10px 10px}
	#slognBox .rightBox{width:calc(100% - 60px);padding:30px;max-width:450px;height:450px}
}

@media screen and (max-width: 480px) {
    #about_area #photo_list .img_cover{height:250px}
	#slognBox .rightBox{width:calc(100% - 20px);padding:20px 0px 20px 0;max-width:360px;height:360px;left: -10px;}
	#slognBox .processList .ImgBox{left:calc(50% - 40px);z-index:5;width:80px;height:50%;z-index:10}
	#slognBox .processList .listItem .Img{width:70px;height:70px;border:5px solid rgb(255 255 255)}
}

@media screen and (max-width: 380px) {
	#slognBox .processList .listItem{left:calc(50% - 25px);width:50px}
	#slognBox .rightBox{left:-10px}
	#about_area #photo_list .img_cover{height:210px}
}