/* index.less */
#product_area.list_box ul li{transform:translate(0,0);-webkit-transform:translate(0,0)}@media(min-width:1281px){#product_area.list_box ul li:hover{transform:translate(0,-20px);-webkit-transform:translate(0,-20px)}}#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}@media(min-width:1281px){#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)}}#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{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);}
}
/* search_box */
#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;display: flex;flex-direction: column;align-items: center;}
section .title_box .area_title{font-weight: 700;font-size: max(2.5*(1vw + 1vh) / 2,24px);line-height: 130%;color: #b4614d;}
section .title_box .sub_title{font-weight: 600;font-size: 40px;color: #b6634e;text-transform:uppercase;line-height: 170%;}
section .title_box .gotarimg img{width: 58px;}
.webBox .hanJ01  .pageh1{position: relative;animation: unset;top: auto;font-size: 18px;font-weight: 400;display: flex;align-items: center;gap: 7px;margin-top: 10px;}
.webBox .hanJ01 .pageh1:before , .webBox .hanJ01 .pageh1:after{content:"";position: relative;display: flex;width: 5px;aspect-ratio: 1/1;background: #9d9d9e;}

section .title_box .area_ppJan{font-size: max(1.4 * (1vw + 1vh) / 2, 16px);color:#575756;margin-top: 20px;}

a.fmlink{display:flex;height:auto;width: 160px;margin-top: 60px;padding: 8px 20px;justify-content: center;color:white;font-size: max(1.15 * (1vw + 1vh) / 2,14px);background: linear-gradient(0deg, #836034 0%, #ecbd78 100%);border-radius: 6666px;box-shadow: 0 0 20px rgb(114 114 114 / 30%);}
a.fmlink:hover{background: linear-gradient(63deg, #836034 0%, #ecbd78 100%);}
a.fmlink svg{fill:white;width:20px;aspect-ratio:1/1}


/* bg_box */
.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}


/* product_area */
#product_area{overflow:hidden;max-width:100vw;padding: 100px 0;}
#product_area .bg_box{
    opacity: 1;
}
#product_area .list_box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
}
#product_area .list_box .btn{
    position: absolute;
    width: 85%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 68px;
    z-index: 88;
    pointer-events: none;
}
#product_area .list_box .btn #product_prev , #product_area .list_box .btn #product_next{pointer-events: auto;}

#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{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}

#product_list.indexlimst{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    gap: 10px;
}
#product_list.indexlimst li img{
    aspect-ratio: 1/1;
}
#product_list.indexlimst .info_box{
    background: unset;
    width: 100%;
}
#product_list.indexlimst .info_box .subtmtile{
    font-size: 22px;
    font-weight: 500;
}


/* book_area */
#book_area .list_box img{height:650px}
#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%;background:#ffffff59;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)}

/* 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}


/* custom_area */
#custom_area{margin:0;padding: 0;background: #d7896a;}
section#custom_area .title_box{display:flex;flex-direction:column;align-items:center}
#custom_area:before{position:absolute;width:100%;height:100%;background:rgba(var(--primary-rgb),.1);display:block;bottom:0;left:0;opacity:.3;content:""}
#custom_box{}
#custom_box ul{margin-top: 0;display: grid;grid-template-columns: repeat(4, 1fr);gap: 40px;}
#custom_box ul li{display:flex;flex-direction:column;align-items: center;padding: 60px 0;}
#custom_box ul li:hover{}
#custom_box ul li:nth-child(odd) .cum_imgg , #custom_box ul li:nth-child(odd) .row{filter: brightness(1);}
#custom_box .cum_imgg{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#custom_box .cum_imgg img{
    width: min(195px , 100%);
}
#custom_box .cumimgbox{display:flex;flex-direction:column;align-items:center;margin-bottom:10px}
#custom_box .cumimgbox img{width:100px;aspect-ratio:1/1}
#custom_box li .row{margin: 0px 0;padding: 0px 20px 0px 20px;display:flex;flex-direction:column;align-items:center}
#custom_box li .row *{color: #ffffff;}
#custom_box li .row .mentext{
    font-size: max(1.5 * (1vw + 1vh) / 2, 18px);
    font-weight: 500;
    line-height: 100%;
    margin-bottom: 12px;
}
#custom_box li .row .h2{font-size: max(1.6*(1vw + 1vh) / 2, 18px);text-align:center;font-weight: 500;line-height: 150%;}
#custom_box li .row article{margin-top:19px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight: 400;}
#custom_box li:hover .row article{}
@-webkit-keyframes spineer{0%{-webkit-box-shadow:0 0 0 0 var(--info)}
70%{-webkit-box-shadow:0 0 0 20px transparent}
100%{-webkit-box-shadow:0 0 0 0 transparent}
}
@keyframes spineer{0%{box-shadow:0 0 0 0 var(--info)}
70%{box-shadow:0 0 0 20px transparent}
100%{box-shadow:0 0 0 0 transparent}
}
@keyframes scroll{from{transform:translateX(100%)}
to{transform:translateX(-100%)}
}
@-webkit-keyframes scroll{from{-webkit-transform:translateX(100%)}
to{-webkit-transform:translateX(-100%)}
}
@keyframes scroll2{from{transform:translateX(0)}
to{transform:translateX(-200%)}
}
@-webkit-keyframes scroll2{from{-webkit-transform:translateX(0)}
to{-webkit-transform:translateX(-200%)}
}

/*cutmJ_area*/
#cutmJ_area{
    padding: 60px 0 50px;
}
#cutmJ_area .workframe{
    display: grid;
    grid-template-columns: 40% 50%;
    gap: 5%;
    align-items: end;
    padding: 80px 0;
}

.title_box .ct_top{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
#cutmJ_area .ct_bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
#cutmJ_area .ct_bottom span{}
#cutmJ_area .ct_bottom b{}
#cutmJ_area .cut_rightbox p{line-height: 180%;}
#cutmJ_area .ct_bottom *{font-size: max(4 * (1vw + 1vh) / 2, 20px);font-weight: 400;text-transform: uppercase;line-height: 110%;}
#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}
#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:relative;width:70%;right:-13%}
#moJind_area{display: flex;align-items: center;}
#moJind_area .workframe{width: 100%;}
#moJind_area .workframe img{width: 100%;}
#moJind_area:before{content:"";width: 100%;position: absolute;height: 471px;background: #dcad71;}

/*buttomaoum_area*/
#buttomaoum_area .boyumowo{display: flex;position: relative;padding: 90px 0;gap: 26px;justify-content: center;flex-wrap: wrap;}
#buttomaoum_area{
    padding: 50px 0 100px;
}
/*boyumowo*/
.boyumowo a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 30px;
    width: 222px;
    border: #818181 1px solid;
    border-radius: 10px;
    justify-content: space-between;
}
.boyumowo a:hover{
    background: #dcad71;
    border-color: #dcad71;
}
.boyumowo a:hover{color:white;}
.boyumowo a:hover span{background:white;}
.boyumowo a span{
    position: relative;
    display: flex;
    width: 11px;
    aspect-ratio: 1/1;
    background: #545454;
    flex-direction: column;
    align-items: center;
    border-radius: 55555px;
}



/*about_area*/
#about_area {background-image: url(/userfiles/images/20250526065856918.jpg);padding: 60px 0;}
#about_area .workframe{
    display: grid;
    grid-template-columns: 35% 60%;
    position: relative;
    padding: 0px 0;
    gap: 5%;
    align-items: center;
    background-image: url(/userfiles/images/20250526065856918.jpg);
}
#about_area p{
	font-size: max(1.4 * (1vw + 1vh) / 2, 18px);
}
#about_area .title_box {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 20px;
}
#about_area .about_area_right{
    padding: 30px;
    width: min(880px , 100%);
}
#about_area .cominte_box{
    padding: 20px 0 40px;
}

#about_area .dwdwtext{background-repeat:repeat-x;background-image: url(/images/40/artmruning.png);animation:bgroop 100s linear infinite;position:absolute;height: 6.0rem;width:130vw;bottom: -60px;z-index:5;left:-26vw;background-size:cover}
@keyframes bgroop {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -4469px 0;
  }
}
#about_area .about_area_left {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#about_area .about_area_left img{
    border-radius: 5555px;
    width: min(500px , 100%);
}

@media screen and (min-width: 1281px) {
	#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 (max-width: 1470px) {
	#custom_box .cum_imgg img{
    width: min(175px, 100%);
}
	#custom_box ul li img{width: 80px;}
	#custom_box ul li{}
	a.fmlink{margin-top: 30px;}
	.mooimlink .spanlinesot{width: 120px;}
    .JJtitle .midtexrb{width:min(45px,100%)}
    .JJtitle .Jterightbox{margin-left:5px}
    .JJtitle .Jterightbox p{display:flex;}
    .JJtitle{margin-bottom: 40px;}
    .maloogo{width:220px}
    #philosophy_area .coomcebox{width:min(900px,80%);margin-top:0}
    .maJfixbg{height:390px}
	#reviews_area{padding: 60px 0;}
    #solgon_area{padding:20px 0}
    #book_area .list_box img{height:480px}
    #book_area:after{left:-598px;background-size:70%;background-position:50%}
    #book_area .list_box{right:-10%;width:68%}
    #custom_box .cumimgbox img{width:80px}
    .ceeservice{margin-top:-188px}
    .rigthJJufoimg img{width:17vw;margin-top:-12vw;right:-8px}
}

@media screen and (max-width: 1280px) {

	#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: 1024px) {
	#cutmJ_area .workframe{display: flex;flex-direction: column;align-items: flex-start;gap: 40px;padding: 40px 0;}
	#custom_box ul li.mbJooshow{display: flex;flex-direction: column;align-items: center;}
	#custom_box ul li.mbJooshow img{width: 80%;height: 67%;object-fit: contain;position: absolute;}
    .rigthJJufoimg img{width:23vw;margin-top:-18vw}
    #moJind_area:before{display:none;}
    .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;}
	#product_list.indexlimst{
    grid-template-columns: repeat(3, 1fr);
}
    
}
@media screen and (max-width: 980px){
	.JJtitle{padding-top:20px}
    .mideyeembox .mieitem img{margin:0 auto}
    .ceeservice img{height:999px}
    .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;}
	#product_area .list_box .btn{width: 100%;}
	#product_area .list_box .btn img{width: 20px;}
	#about_area .workframe{display: flex;flex-direction: column;gap: 50px;padding: 20px 0;}
	#about_area .about_area_right{width: 100%;padding: 10px 25px 0px;}
	#about_area .boyumowo a{background: #ffffff;}
	#about_area .dwdwtext{z-index: -1;}
        #custom_area{
    padding: 20px 0 30px;
}
}

@media screen and (max-width: 768px) {
	section .title_box .gotarimg img{width: 35px;}
	.arrow_btns_box svg{width: 40px;padding: 13px;}
	.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}
	#product_area{padding: 40px 0;}
	#product_area .list_box{margin-top:40px;}
	#youtube_box{padding-bottom:60vw}
	#custom_box li .row{margin: 0;padding: 0;}
	#custom_box li .row article{bottom:-2px}
	.arrowbox .arrow_btns_box{margin-right:0;margin:0 5px}
	#buttomaoum_area .boyumowo a{width: 47%;padding: 10px 10px;}
	#buttomaoum_area .boyumowo{gap: 20px;padding: 40px 0;}
	    #product_list.indexlimst {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    section .title_box .sub_title{
    font-size: 32px;
    line-height: 120%;
    margin: 8px 0 15px;
}
    #custom_box ul{
    grid-template-columns: repeat(2, 1fr);
    width: 94%;
    margin: auto;
    gap: 9px;
}
    	#custom_box ul li{
    padding: 20px 0;
}
    	section .title_box .area_ppJan{width:90%;text-align: left;}

}
@media screen and (min-width: 641px) {
	.mmtmore.mbshowJ{display: none;}
}
@media screen and (max-width: 640px) {
	.runingtext{top:30%}
    .pcshowJ{display:none}
    .mmtmore.pcshowJ{display:none}
    .arrow_btns_box.lee{left:auto;right:-4%}
    #fakeNumber ul{display:flex}
    #fakeNumber ul li{width:33.3%;display:flex;align-items:center}
    #book_area .list_box img{height:65vw}

    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}
    .lusancall{margin-left:0}
    .lusanline{width:100vw;margin-right:0}
	.sooptext , .sooptext2 , .sooptext3{display:none;}
    .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}

}

@media screen and (max-width: 550px) {
	.arrow_btns_box{top:-74px}
    .arrow_btns_box.ree{left:auto;right:50px}
    .arrow_btns_box.lee{right:-15px}
    .mmtmore a{padding:1px 7px 4px 29px}
    #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: 18px;}
}

@media screen and (max-width: 480px) {
	.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}
    #custom_box ul li{
    padding: 0;
}
	#custom_box .cum_imgg img {
        width: min(130px, 100%);
    }
    .mainfobox{padding:67px 0}
    .maloogo{display:none}
    #VCRabout .VCRbottom{grid-template-columns:repeat(2,1fr);margin-top:60px}
    .rigthJJufoimg img{width:55vw;margin-top:-167vw;right:-7vw;transform:rotate(7deg)}
    .ceeservice{margin-top:-60px}
    .ceeservice img{display:flex;height:1200px}
    .title_box .ct_top{display:flex;flex-direction:column;align-items:center}
    #cutmJ_area .workframe,#about_area .title_box{display:flex;flex-direction:column;align-items:center}
    #about_area .workframe{gap:30px;margin:0;padding:0;width: 90%;margin: 0 auto;}
   
}