/* index.less */
#product_area.list_box ul li { transform: translate(0,0); -webkit-transform: translate(0,0) }
#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 }
#book_area.list_box li.img_box:after { transform-origin: center bottom; -webkit-transform-origin: center bottom }
#book_area.list_box li.img_box:before,#book_area.list_box li.img_box:after { transform: scaleY(0); -webkit-transform: scaleY(0) }
/* search_box */
#openform { background: rgba(var(--white-rgb),.3) }
section.section_pad { padding: 5vw 0 }
section>* { z-index: 3 }
section .title_box { margin-bottom: 30px }
section .title_box .area_title { font-weight: 400; font-size: max(1.2*(1vw + 1vh)/2,21px); line-height: 100%; color: #898989 }
section .title_box .sub_title { font-weight: 300; font-size: max(3.7*(1vw + 1vh)/2,37px); color: #898989; text-transform: uppercase }
/* 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: center }
.ml11 .letter,.ml112 .letter { display: inline-block }
.ml112 .letter { opacity: 0 }
.mamatitle { display: flex; justify-content: space-between }
.mamatitle .leftm { display: flex; align-items: center }
.mamatitle .leftm p { font-size: max(1.9*(1vw + 1vh)/2,21px); border-bottom: #484848 1px solid; line-height: 110% }
.mamatitle .leftm span { font-size: max(3.1*(1vw + 1vh)/2,20px); margin: 0 25px }
.mamatitle .leftm b { font-weight: 200; font-size: max(1.3*(1vw + 1vh)/2,15px) }
.mamatitle .rightm { display: flex; align-items: center; margin-right: -5% }
.mamatitle .rightm img { width: 50px }
.mamatitle .rightm span { position: relative; display: flex; width: 280px; height: 1px; background: #d4d4d4; margin-right: 15px }
.JJtitle { margin-bottom: 42px }
.JJtitle h2 { font-weight: 600; font-size: 3rem; text-transform: uppercase; color: #d5d5d5; line-height: 170%; line-height: 100%; font-family: 'Montserrat',sans-serif; margin-bottom: 10px; }
@keyframes myfirst {
  0% { transform: translate(0,0) }
  50% { transform: translate(0,-10px) }
  100% { transform: translate(0,0) }
}
.JJtitle .cnlittle { font-weight: 600; font-size: max(1.5*(1vw + 1vh)/2,26px); text-transform: uppercase; color: var(--primary); display: flex; align-items: center; }
.JJtitle .cnlittle:before { content: ""; display: flex; width: 15px; aspect-ratio: 1/1; background: var(--complement); margin-right: 10px; border-radius: 6666px; }
.maloogo { position: absolute; right: 5%; bottom: 0 }
.maloogo.boo2 { bottom: auto; top: 0 }
#about_area { padding: 0px 0 150px; background-image: url(/images/40/indewx_about_bg.jpg); background-size: cover; background-position: 50% 100%; }
#about_area .workframe { display: grid; grid-template-columns: 1fr 360px; gap: 10px }
.laJtext { position: absolute; width: auto; height: 100%; left: -4%; top: 20px; webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; flex-direction: row; align-items: center }
.laJtext span { position: relative; display: flex; width: 1px; height: 90px; background: #757575 }
.laJtext.boo2 { right: -4%; left: auto }
#about_area .maJimg { position: relative; display: flex; align-items: flex-end; margin-bottom: 15px }
@keyframes float {
  0% { transform: translateY(0) }
  50% { transform: translateY(-20px) }
  100% { transform: translateY(0) }
}
#about_area .maJinfoo { position: relative; display: flex }
#about_area .maJinfoo .tctextbox { width: 90% }
#about_area .tminfo { margin-bottom: 40px; }
.webBox #about_area .pageh1 { color: white; }
#about_area .tminfo p {   }
#about_area .topmvan h3 { font-weight: 500; font-size: max(1.6*(1vw + 1vh)/2,21px); text-transform: uppercase; color: #363636; line-height: 140% }
#about_area .maJinfoo .tctextbox .tminfo p,#benefit_area .footenbox .tminfo p,#Hula_Hoop .moontext p { font-size: 1rem; font-weight: 400; line-height: 200%; color: #ededed; margin: 20px 0; }
#benefit_area { z-index: 22; background-color: #050505; }
#benefit_area .footenbox { position: relative; padding: 80px 0px 240px 120px; margin-left: 13vw }
#benefit_area .footenbox:before { content: ""; position: absolute; width: 26vw; height: 100%; background: #191919; left: -26vw; top: 0vw; }
#benefit_area .footenbox:after { content: ""; position: absolute; width: 75vw; height: 100%; top: 0; left: 0; z-index: -1; border-radius: 0 0 110px 0; background: #060606; }
/*mdexenJ*/
#benefit_area .mdexenJ { position: relative; display: grid; grid-template-columns: 24% 24% 24% 24%; gap: 2%; justify-content: space-between; z-index: 8; margin-top: -140px }
#benefit_area .mdexenJ .mdenitem { aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 31px; position: relative; border: #af503e 3px solid; border-radius: 10px; overflow: hidden; }
#benefit_area .mdexenJ .mdenitem img { width: 84px; margin-bottom: 10px; }
#benefit_area .mdexenJ .mdenitem .h3 { font-size: 1.4rem; margin-bottom: 10px; letter-spacing: 2px; color: var(--complement); font-weight: 700; }
#benefit_area .mdexenJ .mdenitem * { color: #fff; z-index: 10; }
#benefit_area .mdexenJ .mdenitem.Jmd01 { background: url(/images/40/down_bg-1.jpg) }
#benefit_area .mdexenJ .mdenitem.Jmd02 { background: url(/images/40/down_bg-2.jpg) }
#benefit_area .mdexenJ .mdenitem.Jmd03 { background: url(/images/40/down_bg-3.jpg) }
#benefit_area .mdexenJ .mdenitem.Jmd04 { background: url(/images/40/down_bg-4.jpg) }
#benefit_area .mdexenJ .mdenitem p { font-size: 1rem; text-align: center; height: 140px; }
#benefit_area .mdexenJ .mdenitem {   }
#benefit_area .mdexenJ .mdenitem:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom,#0000009e 0%,rgb(0 0 0/91%),rgb(0 0 0/99%)); z-index: 0; opacity: 1; }
/*sideflyJJ*/
.sideflyJJ { position: absolute }
#banner .sideflyJJ.sebox01 { top: 20vw; left: -3vw; width: 13vw; z-index: 2 }
#banner .sideflyJJ.sebox02 { right: -7vw; bottom: 6vw; width: 33vw; z-index: 2; opacity: 0; }
#banner .sideflyJJ img { height: auto; min-height: auto }
.sideflyJJ.sebox03 { right: 62vw; top: 7vw; width: 27vw; z-index: 4; filter: brightness(0) invert(1); }
.sideflyJJ.sebox03 img { opacity: 0.6; }
.sideflyJJ.sebox07 { left: -10vw; }
.sideflyJJ.sebox07 img { width: 26vw; }
.sideflyJJ.sebox08 img { width: 12vw; }
.sideflyJJ.sebox08 { right: 4vw; bottom: -3vw; }
.sideflyJJ.sebox04 { left: 1vw; margin-top: -7vw; width: 10vw; }
.sideflyJJ.sebox05 { bottom: 5vw; width: 10vw; right: 5vw; }
.sideflyJJ.sebox09 { top: -4vw; width: 10vw; left: 78vw; }
/*buob_area*/
#buob_area { background: url(/images/40/img-bg-02.jpg); }
#buob_area .workframe { display: flex; flex-direction: column; padding: 92px 0 }
#buob_area .booJJbox { width: 100%; margin: 110px auto 50px; }
#buob_area .booJJbox .booJJlist { display: grid; grid-template-rows: repeat(1,1fr); grid-template-columns: repeat(4,1fr); gap: 40px; }
#buob_area .booJJbox .booJJlist .booitem { position: relative; display: flex; flex-direction: column; align-items: center; padding-right: 20px; }
#buob_area .booJJbox .booJJlist .booitem img { width: 100px; padding: 22px; margin-bottom: 20px }
#buob_area .booJJbox .booJJlist .booitem .outmming { position: relative }
#buob_area .booJJbox .booJJlist .booitem .outmming:before { content: ""; position: absolute; width: 100%; aspect-ratio: 1/1; top: 0; z-index: 1; -moz-transform-origin: center; -webkit-transform-origin: center; -o-transform-origin: center; -ms-transform-origin: center; transform-origin: center; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; background-image: url(/images/40/outimg.png); background-size: contain; background-repeat: no-repeat; background-position: 50%; animation: spin 15s linear infinite }
@keyframes spin {
  0% { transform: rotate(0) }
  100% { transform: rotate(360deg) }
}
#buob_area .booJJbox .booJJlist .booitem:hover:before { -moz-transform: scale(.8); -webkit-transform: scale(.8); -o-transform: scale(.8); -ms-transform: scale(.8); transform: scale(1.4) }
#buob_area .booJJbox .booJJlist .booitem p { color: var(--primary); font-size: max(1.6*(1vw + 1vh)/2,20px); font-weight: 500 }
#buob_area .booJJbox .booJJlist .booitem span { font-size: 1rem; color: #bbbbbb; margin-top: 10px; }
#buob_area .mmtmore,#philosophy_area .mmtmore { width: 100%; margin: 0 auto; display: flex; justify-content: center }
#buob_area .JJtitle { position: relative; display: flex; flex-direction: column; align-items: flex-start; margin-left: 10.5vw; margin-bottom: 0; margin-top: 50px }
#buob_area:before { content: ""; position: absolute; width: 7vw; height: 345px; background: var(--primary); left: 11%; top: -53px; border-radius: 20px; }
@keyframes float {
  0% { transform: translateY(0) }
  50% { transform: translateY(-20px) }
  100% { transform: translateY(0) }
}
/*Hula_Hoop*/
#Hula_Hoop { padding: 250px 0 300px; display: flex; flex-direction: column; align-items: center; background-color: #060606; }
#Hula_Hoop:before { content: ""; position: absolute; width: 100%; height: 100%; background: url(/images/40/big_oo.jpg); background-size: cover; background-position: 43% 0%; background-repeat: no-repeat; opacity: .6; top: 41%; left: 50%; transform: translate(-50%,-50%); }
.wencirebox { position: relative; width: 600px; height: 600px; margin: 0 auto 90px; border-radius: 50%; display: flex; justify-content: center; align-items: center }
.wencirebox:before { content: ""; position: absolute; background: url(/images/40/cre_ibox.png); width: 156%; height: 150%; background-size: cover; z-index: -1; animation: spin360 16.5s linear infinite; transform-origin: center; }
.wenlist { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform-origin: center; z-index: 5; }
.wenlist .wenitem { position: absolute; width: 140px; height: 140px; display: flex; text-align: center; transform-origin: center bottom; padding: 10px; border-radius: 10px; background: #1e1e1d; border-radius: 50%; box-shadow: 0 3px 8px rgba(0,0,0,0.1); top: 33%; left: 36%; right: 0; bottom: 0; flex-direction: column; align-items: center; justify-content: center }
.wenlist .wenitem:nth-child(2n) { background: var(--complement) }
.wenlist .wenitem p { text-align: center; color: #fff; line-height: 140% }
#Hula_Hoop .wencirebox .wenlist .wenitem:after { content: ''; position: absolute; width: 120%; aspect-ratio: 1/1; background: #828282; z-index: -33; opacity: .15; border-radius: 50%; top: -15px; left: -15px }
.wenlist .wenitem .stepBox { font-weight: bold; margin-bottom: 5px; display: flex; justify-content: center; align-items: baseline; gap: 4px }
.wenlist .wenitem .stepBox .number { font-size: 26px; color: #f5f5f5; line-height: 100% }
.wenlist .wenitem .stepBox .text { font-size: 12px; color: #fff; opacity: .4 }
.wenlist.rou02 { display: flex; justify-content: center; align-items: center; z-index: -10; background: #000000; top: -40px; left: -10px; border-radius: 50% }
.wenlist.rou02 h5 { font-size: 35px; text-align: center; color: white; margin-top: 25px; }
.wenlist.rou02 h5 span { display: block; font-size: 14px; opacity: 0.8; margin-top: 5px; color: white; }
#Hula_Hoop .moontext { width: min(636px,90%); background: #1a1919; box-shadow: 0 0 20px rgba(var(--black-rgb),.3); padding: 30px; border-radius: 15px; position: absolute; bottom: 70px; border: #545454 3px solid; }
#Hula_Hoop .moontext p { text-align: center; }
@keyframes spin360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/*newsJ_area*/
a.masklinkJ { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; }
#newsJ_area { padding: 40px 0; background: url(/images/40/nnindex_bg.jpg); background-size: cover; }
#newsJ_area .JJtitle { display: flex; flex-direction: column; align-items: center }
#newsJ_area .newsJlist { padding: 0 10%; margin-bottom: 100px; }
#newsJ_area .newsJlist .nwenboix { position: relative; margin: 10px 10px 30px }
#newsJ_area .newsJlist .nwenboix:hover .neneimgbox img { -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
#newsJ_area .newsJlist .nwenboix:hover .neneinfo { -moz-transform: translateY(-0.75em); -webkit-transform: translateY(-0.75em); -o-transform: translateY(-0.75em); -ms-transform: translateY(-0.75em); transform: translateY(-0.75em); }
#newsJ_area .newsJlist .nwenboix .neneimgbox { display: flex; flex-direction: column; align-items: center; overflow: hidden; }
#newsJ_area .newsJlist .nwenboix .neneimgbox img { aspect-ratio: 11/7; object-fit: cover; }
#newsJ_area .newsJlist .nenelink svg { width: 25px }
#newsJ_area .newsJlist .neneinfo {position: relative;width: 90%;margin: -60px auto 0;background: #e7e7e7;box-shadow: 0 0 20px rgba(var(--black-rgb),.3);z-index: 22;padding: 30px 30px;}
#newsJ_area .newsJlist .nenelink a {display: flex;justify-content: center;color: var(--secondary);font-size: max(1*(1vw + 1vh)/2,15px);border: #c6c6c6 1px solid;width: min(200px , 100%);align-items: center;padding: 10px 0;border-radius: 66666px;}
#newsJ_area .newsJlist .nenelink a svg { fill: var(--secondary) }
#newsJ_area .newsJlist .neneinfo h5 { text-align: left; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: max(1.5*(1vw + 1vh)/2,20px); overflow: hidden; color: #565656 }
#newsJ_area .newsJlist .neneinfo p {height: 63px;width: 100%;text-align: left;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 15px;overflow: hidden;margin: 31px 0;color: #373737;}
#newsJ_area .newsJlist .nenelink a:hover{
    background: var(--primary);
    color: white;
    gap: 10px;
}
#newsJ_area .newsJlist .nenelink a:hover svg{
    fill: white;
}

/*bookJ_area*/
#bookJ_area { padding: 70px 0 50px 0; background: url(/images/40/goan_bg.jpg); background-size: cover; }
#bookJ_area .JJtitle { display: flex; flex-direction: column; align-items: center }
#bookJ_area .bookJlist { padding: 0 6%; margin-bottom: 50px; }
#bookJ_area .bookJlist .nwenboix { position: relative; margin: 10px 10px 30px }
#bookJ_area .bookJlist .nwenboix:hover .neneimgbox img { -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
#bookJ_area .bookJlist .nwenboix:hover .neneinfo { -moz-transform: translateY(-0.75em); -webkit-transform: translateY(-0.75em); -o-transform: translateY(-0.75em); -ms-transform: translateY(-0.75em); transform: translateY(-0.75em); }
#bookJ_area .bookJlist .nwenboix .neneimgbox { display: flex; flex-direction: column; align-items: center; overflow: hidden; }
#bookJ_area .bookJlist .nenelink svg { width: 25px }
#bookJ_area .bookJlist .neneinfo { position: relative; width: 90%; margin: -60px auto 0; background: #fff; box-shadow: 0 0 20px rgba(var(--black-rgb),.3); z-index: 22; padding: 30px 50px }
#bookJ_area .bookJlist .nenelink a { display: flex; justify-content: flex-end; color: var(--secondary); font-size: max(1*(1vw + 1vh)/2,15px) }
#bookJ_area .bookJlist .nenelink a svg { fill: var(--secondary) }
#bookJ_area .bookJlist .neneinfo h5 { text-align: left; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: max(1.5*(1vw + 1vh)/2,20px); overflow: hidden; color: #565656 }
#bookJ_area .bookJlist .neneinfo p { height: 63px; width: 100%; text-align: left; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; overflow: hidden; margin: 31px 0 }
#bookJ_area .mmtmore a { background: #ffffff; }
#bookJ_area .mmtmore a:hover { background: var(--secondary); }
/*philosophy_area*/
#philosophy_area { padding: 100px 0 50px; background-image: url(/images/40/philosophy_area_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: 50% 50% }
#philosophy_area:before { content: ""; position: absolute; background: url(/images/40/in-ball.png); width: 60px; aspect-ratio: 1/1; left: 13%; top: -2%; background-repeat: no-repeat; background-size: contain; animation: float 3s ease-in-out infinite; z-index: 2 }
#philosophy_area:after { content: ""; position: absolute; background: url(/images/40/in-ball.png); width: 60px; aspect-ratio: 1/1; right: 17%; bottom: -2%; background-repeat: no-repeat; background-size: contain; animation: float 3s ease-in-out infinite; z-index: 2 }
#philosophy_area .JJtitle { display: flex; flex-direction: column; align-items: center }
#philosophy_area .coomcebox { display: flex; flex-direction: column; align-items: center; margin: 0 auto; margin-bottom: 60px; margin-top: -35px; width: min(1280px,80%) }
.runingtext>div { position: relative; padding: 10px 0; display: flex; text-align: center; transition: all .7s ease-out; -webkit-animation: picture_scroll 40s linear infinite; animation: picture_scroll 20s linear infinite; transform: translateX(0); width: 100%; justify-content: space-between }
.runingtext { display: flex; position: relative; padding: 15px 0; width: 200%; position: absolute; top: 50%; z-index: -1 }
.runingtext .focus { margin: 0 9px }
.clickshow>div { display: none }
.clickshow>div h3 { font-size: 22px; margin-bottom: 10px }
.clickshow>div p { font-size: 16px }
@keyframes picture_scroll {
  from { transform: translateX(0) }
  to { transform: translateX(-50%) }
}
@-webkit-keyframes picture_scroll {
  from { -webkit-transform: translateX(0) }
  to { -webkit-transform: translateX(-100%) }
}
/*conutJ_area*/
#ceniceJ_area { padding: 110px 0 120px; background: url(/images/40/cen_int.jpg) }
#ceniceJ_area .rowJJ { display: flex; flex-direction: column; align-items: center }
#ceniceJ_area .JJtitle { display: flex; flex-direction: column; align-items: center }
#conutJ_area { padding: 110px 0; background-image: url(/images/40/indexab_bg.jpg); background-size: cover; margin-top: -6px }
#conutJ_area:before { content: ""; position: absolute; width: 1px; height: 100%; background: #b1b1b1; left: 4%; top: 0 }
#conutJ_area .workframe { display: flex; align-items: center; width: min(1440px,82%) }
#conutJ_area .coJleftbox { width: 37% }
#conutJ_area .JJtitle * { color: #535353 }
#conutJ_area .coJrightbox { width: 63% }
#conutJ_area .coJrightbox iframe { width: 100%; height: 472px }
#conutJ_area .JJtitle { margin-bottom: 55px }
#conutJ_area .JJtitle h2 { text-transform: math-auto }
#conutJ_area .coeJJtext { margin-bottom: 55px }
.arrow_btns_box { cursor: pointer; position: absolute; top: 38%; z-index: 5 }
.arrow_btns_box.ree { right: 2%; }
.arrow_btns_box.lee { left: 2%; }
.arrow_btns_box .prev svg { -moz-transform: scalex(-1); -webkit-transform: scalex(-1); -o-transform: scalex(-1); -ms-transform: scalex(-1); transform: scalex(-1) }
.arrow_btns_box svg { width: 50px; aspect-ratio: 1/1; background: #118fce; border-radius: 50%; padding: 16px; fill: #fff }
.mmtmore { display: flex }
.mmtmore a { background: var(--secondary); background: unset; display: flex; color: var(--primary); align-items: center; padding: 14px 10px 14px 30px; border-radius: 100px; font-size: max(1.2*(1vw + 1vh)/2,15px); width: min(220px,90%); justify-content: space-between; border: var(--primary) 1px solid; }
.mmtmore a:hover { background: var(--primary); color: #fff }
.mmtmore a:hover svg path { fill: #fff }
.mmtmore a svg { width: 30px; aspect-ratio: 1/1; border-radius: 555px; margin: 0; margin-right: 25px }
.mmtmore a svg path { fill: var(--primary); }
#newsJ_area .mmtmore,#bookJ_area .mmtmore { flex-direction: column; align-items: center; }
/*solgon_area*/
#solgon_area { position: relative; padding: 50px 0; background: url(/images/40/solgonbg.jpg); background-attachment: fixed; z-index: 2 }
#solgon_area .pomtext { padding: 50px 0; display: flex; flex-direction: column; align-items: center }
#solgon_area .pomtext img { width: 70px; aspect-ratio: 1/1 }
#solgon_area .pomtext .somainfoo { display: flex; flex-direction: column; align-items: center; padding: 30px 0 }
#solgon_area .pomtext h4 { color: #fff; font-size: max(2*(1vw + 1vh)/2,23px); font-weight: 300 }
#solgon_area .pomtext p { color: #fff; margin-bottom: 20px; font-weight: 200 }
#solgon_area .mmtmore a { background: #ffffff00; border: #ffffffba 1px solid }
#solgon_area .mmtmore a:hover { background: var(--secondary) }
/*maJfixbg*/
.maJfixbg { position: relative; width: 100%; height: 450px; background: url(/images/40/downimg.jpg); background-attachment: fixed; background-size: cover; background-position: 50% 0 }
.maJfixbg .workframe { height: 100% }
.maJfixbg .maJinfo { position: absolute; right: 0; bottom: 7px }
.maJfixbg .maJinfo p { color: #fff }
/* product_area */
#product_area { overflow: hidden; max-width: 100vw }
#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 }
/* newsBox */
#newsBox { position: relative; padding: 50px 0 3vw; display: flex; grid-template-columns: 52% 50%; justify-content: space-between; flex-direction: column; align-items: center; background: #fcfcfc }
#newsBox .mmtmore { position: absolute; top: 140px; right: 13% }
#newsBox .workframe { padding: 90px 20px 20px 80px }
#newsBox:before { content: ""; width: 10%; height: 100%; aspect-ratio: 1/1; position: absolute; background: rgb(244 244 244); left: 0; top: 0; border-radius: 0; z-index: 0 }
#newsBox .bg { position: relative; order: 2; opacity: 1; background-size: cover; border-radius: 0 0 0 250px; background-position: 50% }
#newsBox .info { padding: 0 0; margin-bottom: 20px; margin-top: 30px }
#newsBox .info .tit { width: 5em }
#newsBox .info .tit a { color: #000 }
#newsBox .info .news_list li { position: relative; display: grid; grid-template-columns: 160px 1fr 90px; padding: 30px 3px; border-top: 1px solid #ddd; align-items: center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out }
#newsBox .info .news_list li:hover { background: #fff }
#newsBox .info .news_list li.slick-current { border-top: unset }
#newsBox .info .news_list li a { position: absolute; width: 100%; height: 100%; left: 0; z-index: 2; top: 0 }
#newsBox .news_list li .date { border-right: 1px solid #ddd; margin-right: 30px; display: flex; align-items: center; justify-content: center }
#newsBox .news_list li .time { color: #505050; display: flex; flex-direction: column; align-items: center; font-family: "Nunito Sans",sans-serif; font-size: max(1 * (1vw + 1vh)/2,14px) }
#newsBox .news_list li .time b { color: #505050; font-size: max(3.3 * (1vw + 1vh)/2,39px); font-family: "Nunito Sans",sans-serif; line-height: 1 }
#newsBox .info .news_list .news_txt { position: relative; width: 95% }
#newsBox .info .news_list .news_txt .mmtop { display: flex; align-items: center; margin-bottom: 15px }
#newsBox .info .news_list .golink { display: flex; position: absolute; right: 2%; bottom: 45px }
#newsBox .info .news_list .golink a { position: relative; padding: 10px; background: var(--secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1/1; border-radius: 50px }
#newsBox .info .news_list .golink a svg { width: 22px; fill: #fff }
#newsBox .info .news_list .news_txt span { display: inline-block; background: #f2f2f2; font-size: max(1 * (1vw + 1vh)/2,13px); padding: 7px 9px; width: 111px; text-align: center }
#newsBox .info .news_list .news_txt h3 { height: auto; font-size: max(1.5 * (1vw + 1vh)/2,17px); font-weight: 600; margin: 10px 0; margin-left: 10px; text-align: left; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; width: calc(100% - 110px) }
#newsBox .info .news_list .news_txt p { -webkit-line-clamp: 2; height: 53px; font-size: 16px; color: #343333; overflow: hidden; margin: 10px 0; text-align: left; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical }
#newsBox .info .news_list .noBox { position: absolute; width: 2em; text-align: center; top: 50%; right: -6em; -webkit-transform: translateY(-47%); transform: translateY(-47%) }
#newsBox .bttn { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 30px }
#newsBox .info .news_btn { position: relative; width: 9em; display: flex; justify-content: space-between; align-items: center; z-index: 5 }
#newsBox .info .news_btn font { width: 5.5em; display: flex; justify-content: flex-end }
#newsBox .info .news_btn font span { min-width: 2em; text-align: center }
#newsBox .info .news_btn font span:nth-child(2) { min-width: 1.5em }
#newsBox .info .news_btn #prevBtn { -webkit-transform: scaleX(-1); transform: scaleX(-1) }
#newsBox .arrow_btns_box a { width: 45px; height: 45px; background: #509930; border-radius: 50px; display: inline-flex!important; align-items: center; justify-content: center; margin: 0 5px }
#newsBox .arrow_btns_box a svg { width: 17px; height: 17px; fill: #fff }
#newsBox .arrow_btns_box a.prev svg { transform: scaleX(-1) }
/* 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: 5vw 0 5vw }
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 { padding: 0 0 }
#custom_box ul { display: flex; margin-top: 50px; flex-wrap: wrap }
#custom_box ul li { display: flex; width: 20%; flex-direction: column }
#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: 30px 0; padding: 20px 10px 30px; display: flex; border-bottom: 5px var(--primary) solid; flex-direction: column; align-items: center }
#custom_box li .row h2 { font-size: max(1*(1vw + 1vh)/2,16px); text-align: center; font-weight: 400 }
#custom_box li .row article { margin-top: 19px; line-height: 200%; position: absolute; bottom: 14px; border-radius: 50px; background: #57402f; color: #f0f8ff; aspect-ratio: 1/1; width: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center }
#custom_box li:hover .row article { background: #bf4e2d }
@-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%) }
}
#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% }
@media screen and (max-width:1470px) {
  #about_area .maJinfoo .tctextbox { width: 93% }
  .JJtitle { margin-bottom: 20px; }
  #about_area .topmvan h3 { font-size: max(1*(1vw + 1vh)/2,17px) }
  .maloogo { width: 220px }
  #philosophy_area .coomcebox { width: min(900px,80%); margin-top: 0 }
  .maJfixbg { height: 390px }
  .mamatitle .rightm span { width: 190px }
  #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 }
  .mamatitle .rightm img { width: 45px }
  #about_area { padding: 30px 0 120px; }
  #benefit_area .footenbox:after { width: 140vw; left: -70px; }
  #benefit_area .mdexenJ { grid-template-columns: 23% 23% 23% 23%; width: 95%; margin: -160px auto 0; }
  #buob_area:before { left: 9% }
}
@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:hover.img_box:before,#book_area.list_box li:hover.img_box:after { transform: scaleY(1); -webkit-transform: scaleY(1) }
  #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); border-bottom: 5px var(--complement) solid }
  #buob_area .booJJbox .booJJlist .booitem:not(:last-child) { border-right: 1px solid rgba(0,0,0,0.2) }
  #buob_area .booJJbox .booJJlist .booitem:nth-child(4) { border-right: 0px solid rgba(0,0,0,0.2) }
  #buob_area .booJJbox .booJJlist .booitem:nth-child(4)::before { display: none }
  #buob_area .booJJbox .booJJlist .booitem:not(:last-child)::before { content: ""; position: absolute; top: calc(50% - 70px); right: -1px; width: 1px; height: 50%; background-color: var(--complement); z-index: 1 }
}
@media screen and (max-width:1280px) {
  #custom_box ul li { position: relative; display: flex; flex-direction: column; width: 33.3% }
  #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 }
  #buob_area .booJJbox .booJJlist .booitem { padding-right: 0; margin: 0 10px }
}
@media screen and (max-width:1024px) {
  #buob_area .booJJbox .booJJlist { grid-template-rows: repeat(2,1fr); grid-template-columns: repeat(2,1fr); }
  #about_area:before,.laJtext { display: none }
  #about_area .workframe { display: flex; flex-direction: column }
  #about_area .maJimg { width: 100%; display: flex; flex-direction: column; align-items: center; display: none; }
  #about_area .maJinfoo { margin-top: 30px; }
  .arrowbox { margin-left: 0 }
  .mamatitle .leftm span { margin: 0 7px }
  .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 }
  #newsBox .bg { width: 100%; height: 50vh; border-radius: 0 }
  #newsBox { display: flex; margin-top: 0; flex-wrap: wrap; padding: 0 0 40px }
  #newsBox .workframe { padding: 50px 10px 10px 10px }
  #newsBox .mmtmore { top: 40px }
  #conutJ_area:before { display: none }
  #benefit_area .footenbox { padding: 80px 0px 70px 120px; }
  #benefit_area .mdexenJ { display: grid; grid-template-columns: 50% 50%; margin: 50px auto 0; width: 100%; }
  #bookJ_area { padding: 50px 0 50px 0; }
}
@media screen and (max-width:980px) {
  .sideflyJJ { display: none }
  #buob_area:before { display: none }
  .sideflyJJ { display: none!important }
  #Hula_Hoop:before { background-position: 46% 0%; }
  .wencirebox:before { animation: unset; width: 160%; height: 116%; opacity: 0.3; }
  #buob_area .workframe { padding: 20px 0; }
}
@media screen and (min-width:769px) {
  .mb-box { display: none; }
}
@media screen and (max-width:768px) {
  .maloogo { display: none }
  #buob_area .booJJbox .booJJlist { grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(2,1fr); gap: 20px }
  #buob_area .JJtitle {display: flex;align-items: flex-start;width: 100%;margin-left: 0;}
  .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 }
  #youtube_box { padding-bottom: 60vw }
  #custom_box li .row { margin: 10px 15px; padding: 10px 0 20px; border-bottom: 2px #90785d3b solid }
  #custom_box li .row article { bottom: -2px }
  .arrowbox .arrow_btns_box { margin-right: 0; margin: 0 5px }
  #benefit_area .footenbox { margin-left: 0; padding: 40px 0; }
  #benefit_area .footenbox:before { display: none; }
  #benefit_area  .workframe {   }
  #benefit_area .mdexenJ .mdenitem { aspect-ratio: 3/4 }
  #benefit_area .mdexenJ .mdenitem p { height: auto; }
  #benefit_area .mdexenJ .mdenitem img { width: 60px; }
}
@media screen and (min-width:641px) {
  .mmtmore.mbshowJ { display: none; }
  /* 設定圓形位置：每個 .wenitem 對應角度擺放 */
  .rou03 .wenitem:nth-child(1) { transform: rotate(0deg) translateY(-270px) rotate(0deg); }
  .rou03 .wenitem:nth-child(2) { transform: rotate(40deg) translateY(-270px) rotate(-40deg); }
  .rou03 .wenitem:nth-child(3) { transform: rotate(80deg) translateY(-270px) rotate(-80deg); }
  .rou03 .wenitem:nth-child(4) { transform: rotate(120deg) translateY(-270px) rotate(-120deg); }
  .rou04 .wenitem:nth-child(1) { transform: rotate(160deg) translateY(-270px) rotate(-160deg); }
  .rou01 .wenitem:nth-child(1) { transform: rotate(-40deg) translateY(-270px) rotate(40deg); }
  .rou01 .wenitem:nth-child(4) { transform: rotate(200deg) translateY(-270px) rotate(-200deg); }
  .rou01 .wenitem:nth-child(3) { transform: rotate(240deg) translateY(-270px) rotate(-240deg); }
  .rou01 .wenitem:nth-child(2) { transform: rotate(280deg) translateY(-270px) rotate(-280deg); }
}
@media screen and (max-width:640px) {
  .JJtitle h2 { font-size: 2rem; margin-bottom: 15px; }
  .wencirebox { width: 100%; height: 100%; display: flex; flex-direction: column-reverse; align-items: center; gap: 20px; margin: 0 auto 40px }
  .wencirebox .wenitem { display: flex; position: relative; align-items: center; width: 120px; height: 120px }
  #Hula_Hoop .moontext { position: relative; bottom: 0; padding: 10px 30px; }
  .wenlist { position: relative }
  .wenlist.rou04 { display: contents }
  .wenlist .wenitem { top: 0; left: 0 }
  #Hula_Hoop .wencirebox .wenlist .wenitem:after { display: none }
  .rou03,.rou01 { display: grid; grid-template-columns: repeat(2,1fr); justify-items: center; gap: 20px 0 }
  .wenlist.rou02 { position: absolute; top: -140px; left: 0; width: -webkit-fill-available; height: auto; background-color: #ffffff00 }
  #Hula_Hoop:before { background-position: 48% 50%; }
  .rou01 { display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); }
  .rou01 .wenitem:first-child { grid-column-start: 2; grid-row-start: 2; grid-row-end: 2; }
  .rou01 .wenitem:nth-child(2) { grid-column-start: 1; grid-row-start: 2; grid-row-end: 2; }
  .rou01 .wenitem:nth-child(3) { grid-column-start: 2; grid-row-start: 1; grid-row-end: 2; }
  #Hula_Hoop { padding: 190px 0 50px 0; }
  .runingtext { top: 30% }
  .pcshowJ { display: none }
  .mmtmore.pcshowJ { display: none }
  .arrow_btns_box.lee { left: calc(50% - 40px); right: auto; }
  #about_area .maJimg { position: relative; top: 0; width: 90%; margin-bottom: 0 }
  #about_area .maJinfoo {   }
  #about_area .maJinfoo .tctextbox { width: 100%; margin: 0 auto; }
  #about_area { display: flex; flex-direction: column; height: auto; padding: 30px 0 60px; background-position: 51% 50%; }
  #fakeNumber ul { display: flex }
  #fakeNumber ul li { width: 33.3%; display: flex; align-items: center }
  #book_area .list_box img { height: 65vw }
  #custom_box ul li { width: 50% }
  #about_area:after,#about_area:before,#book_area:after,#newsBox:before { display: none }
  #newsBox .info .news_list .news_txt { width: 80% }
  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 }
  #newsBox .info .news_list li { grid-template-columns: 104px 1fr }
  #newsBox .mmtmore { position: relative; right: auto; top: auto }
  #conutJ_area .coJrightbox iframe { height: 300px }
  #philosophy_area { padding: 50px 0 50px }
  .arrow_btns_box { top: auto; bottom: 80px; }
  .arrow_btns_box.ree { left: calc(50% - -30px) }
  .arrow_btns_box img { width: 20px }
  #newsJ_area .newsJlist .neneinfo { padding: 20px 25px }
  #newsJ_area .newsJlist { margin-bottom: 70px; padding: 0; }
  #bookJ_area .bookJlist .neneinfo { padding: 20px 20px }
  #bookJ_area .bookJlist .neneinfo p { margin: 8px 0 }
  #bookJ_area .bookJlist { padding: 0 0%; margin-bottom: 70px; }
  #newsJ_area .newsJlist .neneinfo p { margin: 8px 0; height: 61px }
}
@media screen and (max-width:550px) {
  .JJtitle .cnlittle { font-size: 1.2rem; line-height: 150%; }
  .mmtmore a { padding: 8px 7px 8px 20px; width: min(170px,90%); }
  .mmtmore a svg { width: 26px; padding: 1px; margin-right: 10px; }
  #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 }
  #buob_area .booJJbox .booJJlist .booitem img { margin-bottom: 23px }
  #benefit_area .mdexenJ .mdenitem { aspect-ratio: 2/1.8; padding: 20px 17px; }
  #benefit_area .mdexenJ { display: flex; flex-direction: column; gap: 30px }
  #buob_area .booJJbox { margin: 50px auto 20px }
  .webBox #about_area .pageh1 { margin-bottom: 50px; font-size: 20px; margin-top: 50px; text-align: center; background: rgb(4 4 4/58%); padding: 9px 0; border-radius: 6666px; border: #a1a1a1 1px solid; }
}
@media screen and (max-width:480px) {
  .JJtitle h2 { font-weight: 700; }
  #buob_area .workframe {padding: 25px 0;}
  .mamatitle .leftm p { font-size: max(1.9*(1vw + 1vh)/2,26px) }
  .mamatitle .leftm span { font-size: max(3.1*(1vw + 1vh)/2,31px); margin: 0 9px }
  .mamatitle .leftm { width: 100%; display: flex }
  .mamatitle .leftm b { display: flex; flex: 1; justify-content: flex-end }
  .shpaeline { display: none }
  #about_area .maJinfoo .tctextbox .tminfo p,#benefit_area .footenbox .tminfo p,#Hula_Hoop .moontext p { font-size: 16px; }
  #product_area .bgBox { width: 100%; object-fit: cover }
  #custom_box ul li { width: 100% }
  .mainfobox { padding: 67px 0 }
  footer .mmanav {   }
  footer #f_info { padding-left: 0!important; padding-right: 0!important; padding-top: 0 }
  #newsBox .info .news_list .news_txt .mmtop { display: flex; flex-direction: row; align-items: center; margin-bottom: 0 }
  #newsBox .info .news_list .news_txt span { padding: 2px 2px; width: 100px; margin-right: 5px; display: none }
  #newsBox .info .news_list .news_txt h3 { width: 100%; margin: 0 }
  #newsBox .info .news_list li { grid-template-columns: 89px 1fr; padding: 20px 0 }
  #newsBox .news_list li .date { margin-right: 10px }
  #newsBox { padding: 40px 0 80px }
  #newsBox .info .news_list .golink { display: none }
  #newsBox .info .news_list .news_txt { width: 100% }
  .maloogo { display: none }
  #buob_area .booJJbox .booJJlist { display: flex; flex-direction: column }
  #buob_area .slick-prev,#buob_area .slick-next { top: 44px }
  #buob_area .slick-prev { left: 30px }
  #buob_area .slick-next { right: 57px }
  #buob_area .booJJbox .slick-prev:before { content: ""; position: absolute; width: 30px; aspect-ratio: 1/1; background: url(/images/40/arrowleft.png); background-size: contain; background-repeat: no-repeat }
  #buob_area .booJJbox .slick-next:before { content: ""; position: absolute; width: 30px; aspect-ratio: 1/1; background: url(/images/40/arrowright.png); background-size: contain; background-repeat: no-repeat }
  #buob_area .booJJbox .booJJlist .booitem span { text-align: center }
  .wencirebox:before{
    left: -40%;
}
}