/* index.less */
#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}

/* search_box */
#openform{background:rgba(var(--white-rgb),.3)}

/* section */
section{padding:5vw 0 3vw}
section.section_pad{padding:5vw 0}
section>*{z-index:3}
section .title_box{margin-bottom:40px;display:flex;flex-direction:column;align-items:center}
section .title_box .area_title{font-weight:600;font-size:max(2.6*(1vw + 1vh) / 2,23px);color:#454444}
section .title_box .sub_title{font-weight:300;font-size:23px}

/* 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:rgba(var(--primary-rgb),.2);content:""}
.bg_box.white:before{background:rgba(var(--white-rgb),.2)}
.Jaright-title{position:relative;display:flex;flex-direction:column;align-items:flex-end}
.topmtext{display:flex;align-items:center}
.topmtext svg{fill:#d8ae40;width:40px;margin-right:11px}
.topmtext span{color:#b59b85}
.bigtitleJ{font-size:max(5 * (1vw + 1vh) / 2,25px);color:#b59b85;line-height:100%}
.malabout{display:flex;flex-direction:column;margin:60px 0 10px}
.malabout .btnBox{display:flex;justify-content:flex-end;margin-top:50px}
.malabout .maltitle{}
.maltitle .maltop{display:flex}
.malabout .maltitle .maltop svg{}
svg#star_icon{width:38px;aspect-ratio:1/1;fill:#d8ae40;animation:rotate 2s linear infinite}

@keyframes rotate{from{transform:rotateY(0deg);}to{transform:rotateY(360deg);}}

.malabout svg#star_icon{margin-right:15px}
.maltitle .maltop h3{font-size:max(4*(1vw + 1vh) / 2,17px);text-transform:uppercase;color:#1e514a}
.malabout .maltitle p{font-size:max(1.6*(1vw + 1vh) / 2,16px)}
.malabout .malinfo{padding:10px 0;overflow:hidden;font-size:16px;margin:10px 0;height: 248px;text-align:center;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 6;-webkit-box-orient:vertical}
.malabout .malinfo p{line-height:190%;color:#554c49}
.JJbg01{position:absolute;width:100%}
.JJbg01 img{height:1230px;width:100%}
.JJbg02{position:absolute;margin-top:200px;z-index:-1;height:1200px}
.JJbg02 img{height:100%;animation:move 8s infinite;max-width:unset}

@keyframes move{0%{transform:translateX(0);}50%{transform:translateX(-500px);}100%{transform:translateX(0);}}
@keyframes move2{0%{transform:translateY(10px);}50%{transform:translateY(-10px);}100%{transform:translateY(10px);}}

.JJbg03{position:absolute;margin-top:0;z-index:-1;height:1200px}
.leftstar{animation:float 3s ease-in-out infinite;position:absolute;left:5%}
.leftstar svg#star_icon{animation:unset}
.rightstar{animation:float 4s ease-in-out infinite;position:absolute;right:5%;bottom:10%}
.rightstar svg#star_icon,.fmJstar svg#star_icon{width:55px;animation:unset}
.fmJstar{animation:float 8s ease-in-out infinite;position:absolute;left:9%;top:40%}

@keyframes float{0%{transform:translateY(0);}50%{transform:translateY(-20px);transform:rotate(3.14159rad);}100%{transform:translateY(0);}}
#wrap{position:relative;z-index:5}
.mweb_bg01{position:absolute;top:-140px}
.mweb_bg02{margin-top:-300px;background-color:#f3f3f3}
.mweb_bg02 img{animation:compress 5s infinite}
@keyframes compress{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-20px) scale(1.01);}}

/* about_area */
#about_area:before{content:"";position:absolute;width:16vw;background:#1e514a;border-radius:500px;aspect-ratio:1/1;background-size:cover;z-index:0;right:-11vw;top:-1%}
#about_area #photo_list img{border-radius:30px}
#about_area #photo_list,#about_area #photo_list *{transition:all 0s ease-in-out;-webkit-transition:all 0s ease-in-out}
#about_area:after{content:"";position:absolute;width:250px;aspect-ratio:1/1;background:url(/images/40/flym.png);background-size:cover;z-index:0;right:-5%;top:28%}
#about_area .info_box article{margin-bottom:30px;width:90%;line-height:210%;letter-spacing:1.5px;font-weight:300}
@keyframes bounce{0%{transform:translateY(0);}50%{transform:translateY(-10px);}100%{transform:translateY(0px);}}
.sechouge{display:flex;flex-direction:column;align-items:center}

/* product_list */
#product_area{background:#f3f3f3;margin:0 0 0;padding:40px 0}
#product_prev{-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}
#product_area .btn a{display:flex;background:#1e514a;padding:10px;border-radius:500px}
#product_area .btn a svg{width:20px;aspect-ratio:1/1;fill:#ffffff}
#product_next{}
#product_list #oneBox{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:-178px}
#product_list #oneBox:before{content:"";position:absolute;width:21%;height:1px;background:#767676;bottom:66px;right:13%;filter:blur(5px)}
#product_list #oneBox ul{right:-25%}
#product_list #oneBox ul{width:95%}
#product_list #twoBox{position:relative}
#product_list #twoBox .btn.see2{position:absolute;display:flex;z-index:2;justify-content:space-between;padding:0;top:150px;width: 102%;right:-1%}
#product_list #twoBox ul{}
#product_list>div,#product_list>div*{transition:unset;-webkit-transition:unset}
#product_list li{margin:20px 10px;padding:20px;box-shadow:0 0 8px 2px rgb(155 155 155 / 15%);background:var(--white)}
#product_list #twoBox li{display:flex;flex-direction:column;align-items:center;padding:45px 30px;border-radius:20px}
#product_list #twoBox li .clip{width:min(150px,95%);margin-bottom:10px}
#product_list #twoBox li .clip:before{content:"";position:absolute;background:#f0f0f0;border-radius:500px;width:100%;aspect-ratio:1/1}
#product_list .powerlink{margin:50px 0}
#product_list .powerlink .btnBox{display:flex;margin:30px 0 15px;flex-wrap:wrap}
#product_list .pootext{display:flex}
#product_list .pootext p{padding:15px;color:#1e514a}
#product_list #twoBox li .clip img{}
#product_list #twoBox li:after{content:'';position:absolute;background:var(--primary);width:70px;bottom:0;height:6px}
#product_list #oneBox li{display:flex;flex-direction:column;align-items:center;border-radius:500px;box-shadow:0 0 6px 2px rgb(223 223 223 / 15%);animation:move2 8s infinite}
#product_list #oneBox li .info_box *{text-align:left}
#product_list #oneBox li .info_box .cate{font-size:17px;height:auto}
#product_list #oneBox li h3{margin-bottom:20px}
#product_list #oneBox li span{position:absolute;right:0;bottom:25px}
#product_list #oneBox li p{color:#575656;font-size:15px;margin:0}
#product_list #oneBox li .info_box{width:85%}
#product_list li .info_box{margin:2px 0;position:relative}
#product_list li .info_box>div{margin:auto;width:80%}
#product_list li .info_box h3{height:53px;font-size:20px;text-align:center;-webkit-line-clamp:2;line-height:120%;color:var(--primary);font-weight:400}
#product_list li .info_box .cate{color:#7a8388;font-size:14px;text-align:center;display:block;position:relative;z-index:5}
#product_list li .info_box p{margin-right:10px;font-weight:300}

/* news_area */
#news_area .list_box img{height:320px}
#news_area .list_box .info_box{padding:15px 30px}
#news_area .list_box .info_box p a{margin-right:10px;max-width:calc(100% - 100px);font-weight:400;z-index:2}
#news_area .list_box .info_box p .time{width:90px;font-weight:300}
#news_area .list_box .info_box h3{height:34px;font-size:20px}

/* book_area */
#book_area .list_box img{height:450px}
#book_area .list_box .img_box{border:var(--white) solid;border-width:0 1px 1px 0}
#book_area .list_box .img_box:before,#book_area .list_box .img_box:after{position:absolute;width:100%;height:100%;background:var(--white);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:20px}

/* 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:5vw 0 3vw}
#custom_area:before{position:absolute;width:100%;height:75%;background:rgba(var(--primary-rgb),.1);display:block;bottom:0;left:0;opacity:.3;content:""}
#custom_box{padding:8vw 0 5vw}
#custom_box li .row{margin:30px 20px;padding:30px;display:block;border-bottom:2px var(--primary) solid}
#custom_box li .row h2{font-size:20px}
#custom_box li .row article{margin-top:30px;line-height:200%}
@-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;}}
.poomore{display:flex;flex-direction:column;align-items:center;margin-top:-65px}

/*counJus*/
#counJus{background:url(/images/40/coouimg.jpg);background-attachment:fixed;padding:180px 0}
#counJus:before{content:"";position:absolute;width:16vw;background:#ffffff;border-radius:500px;aspect-ratio:1/1;background-size:cover;z-index:0;left:-11vw;top:-30%}
#counJus *{color:#ffffff}
#counJus .pootbox{display:flex;align-items:center}
#counJus .pootbox .pooleftJ{width:60%}
#counJus .pootbox .poorightJ{width:40%;display:flex;justify-content:flex-end}
#counJus .pootbox .poorightJ a{display:flex;padding:30px 50px;width:min(400px,100%);background:#ffffff;border-radius:550px;justify-content:center;align-items:center}
#counJus .pootbox .poorightJ a p{color:#1e514a;text-transform:uppercase}
#counJus .pootbox .poorightJ svg{fill:#1e514a;aspect-ratio:1/1;width:35px;margin-right:10px}
#counJus .maltop{display:flex;flex-direction:column}

@media screen and (min-width: 1281px) {
	#book_area .list_box li:hover .badge{background:var(--primary);color:var(--white)}
	#custom_box li:hover .row{box-shadow:0 4px 17px 0 rgba(var(--black-rgb),.2)}
}
@media screen and (max-width: 1470px) {
	.malabout .btnBox{margin-top:20px}
	.mweb_bg01{top:-100px}
	#product_list{grid-template-columns:59% 38%}
	#product_list #oneBox ul{right:-15%}
	#product_list #oneBox:before{right:23%;bottom:100px}
	#product_list li{margin:20px}
	.bigtitleJ{font-size:max(6 * (1vw + 1vh) / 2,25px)}
	.malabout .maltitle .maltop h3,section .title_box .area_title,.maltitle .maltop h3{font-size:max(3.9*(1vw + 1vh) / 2,34px)}
	.malabout .maltitle p{font-size:max(2*(1vw + 1vh) / 2,20px)}
	#about_area:before{}
	#about_area:after{width:160px;right:-3%}
	#photo_list img{height:460px}
	.malabout .malinfo{margin:20px 0 40px}
	.malabout{margin:20px 0 10px}
	.sechouge{}
	.sechouge img{width:min(1000px,90%)}
	.JJbg01 img{height:920px}
	#counJus{padding:130px 0;z-index:9}
}
@media screen and (max-width: 1024px) {
	#product_list:before{top:-55px;height:40%}
	#product_area .workframe{width:90%;margin:0 auto}
	#product_list{display:block}
	#product_list #oneBox{display:none}
}
@media screen and (max-width: 768px) {
	#news_area .list_box .info_box{padding:15px 0}
	#product_list #twoBox ul{margin-left:0}
	#product_list #twoBox .btn.see2{width:100%;right:0}
	#youtube_box{padding-bottom:60vw}
	#custom_box li .row{margin:10px 15px;padding:10px 0}
	.JJbg03 img{object-fit:cover;height:100%;max-width:500%;margin-left:-139%}
	.sechouge .mascoll{width:855px;display:flex;flex-direction:column}
	.sechouge{overflow-x:scroll;width:90%;margin:0 auto;padding-bottom:20px}
	.sechouge img{width:100%;margin-left:28%}
	.sechouge::-webkit-scrollbar{width:5px}
	.sechouge::-webkit-scrollbar-track{background:#5d5d5d}
	.sechouge::-webkit-scrollbar-thumb{background:#b59b85}
	#product_list #oneBox,#product_list:before,#product_area .fixTxt{display:none}
	#product_list #twoBox{display:block}
	#counJus .pootbox{display:flex;flex-direction:column;align-items:center}
	#counJus .maltop{display:flex;align-items:center}
	#counJus .maltop p{text-align:center}
	#counJus .pootbox .pooleftJ{width:100%}
	#counJus .pootbox .poorightJ{width:100%;justify-content:center;margin-top:30px}
}
@media screen and (max-width: 640px) {
	.malabout .btnBox{display:flex;justify-content:center}
	.maltitle .maltop{display:flex;flex-direction:column;align-items:center}
	#product_list .powerlink .btnBox{display:flex;flex-direction:column;align-items:center}
	.btnBox .btn.out02{margin-left:0;margin-top:20px;order:3}
	#about_area:before,#counJus:before{display:none}
	#about_area{background:#f2f2f2;padding:30px 0 60px}
	.malabout .malinfo{-webkit-line-clamp:6;height:190px;margin:10px 0}
	.malabout .malinfo p{}
	.mweb_bg01,.mweb_bg02{display:none;top:0}
	#book_area .list_box img{height:65vw}
	#photo_list{margin-top:30px}
	#photo_list img{height:90%;margin-bottom:52px}
	.Jaright-title{position:absolute;top:-613px;right:12px}
	.bigtitleJ{font-size:max(7 * (1vw + 1vh) / 2,50px)}
	.JJbg01 img{max-width:200%;width:200%}
	.JJbg01 div{display:flex;flex-direction:column;align-items:center}
	.JJbg02{margin-top:0}
	#product_area{padding:60px 0 1px;background:#fbfbfb}
	#product_list .pootext{margin-top:40px;position:relative;padding-top:20px}
	#product_list .pootext:before{content:"";position:absolute;left:-8%;width:104vw;height:330%;background:#f2f2f2;z-index:-1;top:0}
	.btnBox .btn.out02:before{}
	#counJus .pootbox .poorightJ a{padding:17px 0;background:#e0e0e0}
	#counJus{padding:100px 0}
	#counJus .maltitle .maltop h3{font-weight:400}
}
@media screen and (max-width: 480px) {
	.JJbg03 img{margin-left:-80%;max-width:275%}
	.JJbg01 img{height:930px}
	.poomore{margin-top:0;padding-bottom:41px;background:#fafafa;margin-bottom:0}
	.bg_box:before{height:150%}
	.rightstar svg#star_icon,.fmJstar svg#star_icon{width:40px}
	.rightstar{right:6%;bottom:9%}
}