/* 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: 5;position: relative;width: 100vw;} .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>*{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} .webBox .hanJ01 .pageh1{position: relative;animation: unset;top: auto;font-size: max(1.4*(1vw + 1vh) / 2,18px);font-weight: 400;display: flex;align-items: center;gap: 7px;justify-content: flex-start;margin-bottom: 0px;z-index: 2;} /* 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} /*top_Jtitle*/ .top_Jtitle{ display: flex; flex-direction: column; align-items: center; } .top_Jtitle .totle{font-size: 2.8rem;font-weight: 600;color: white;} .top_Jtitle .tosub{font-size: 1.5rem;color: white;} .top_Jtitle .onJline{display:flex;flex-direction: column;align-items: center;} .top_Jtitle .onJline span{width:10px;display: flex;aspect-ratio: 1/1;background: var(--secondary);border-radius: 666px;position: relative;justify-content: center;align-items: center;} .top_Jtitle .onJline span:before{content:"";position: absolute;width: 300px;height: 1px;background: var(--secondary);transform: scaleX(0);transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;} .top_Jtitle .onJline.aos-animate span:before{ transform: scaleX(1); transform-origin: center; transition-delay: 1.2s; } /*Jamore*/ .Jamore{display: flex;} .Jamore a{display:flex;align-items:center;padding:20px 30px;border-radius:300px;border:#959595 1px solid;justify-content:space-between;width:230px} .Jamore a:hover{background:var(--primary)} .Jamore a:hover span{color:white} .Jamore a:hover svg{fill:white} .Jamore a span{font-weight:500} .Jamore a svg{width:20px} .maloogo{position:absolute;right:5%;bottom:0} .maloogo.boo2{bottom:auto;top:0} #pJh1box_area .workframe{} #about_area{padding: 0px 0 60px;display: flex;flex-direction: column;z-index: 20;overflow-y: visible;align-items: center;background: #e4d3a7;padding: 140px 0 160px;} #about_area .JJtitle{margin-bottom: 0;} #about_area:before{content: "";width: 22vw;opacity: 1;right: -4vw;z-index: 1;position: absolute;bottom: 31%;aspect-ratio: 432/313;background: url(/images/40/down_bg.png);background-size: contain;background-repeat: no-repeat;animation: sway2 4s linear infinite;} #about_area:after{content: "";width: 6vw;opacity: 1;right: 45vw;z-index: 1;position: absolute;bottom: 13%;aspect-ratio: 1/1;background: url(/images/40/fomlum.png);background-size: contain;background-repeat: no-repeat;} #about_area .workframe{display:grid;grid-template-columns: 46% 47%;gap: 7%;margin: 0;margin-top: 0;align-items: center;z-index: 2;overflow-y: visible;} .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} .Jterightbox .cnlittle::after{display:none;} #flypaper03{bottom: 2%;right: -5%;} #flypaper03 *{transition: all 0s ease-in-out;-webkit-transition: all 0s ease-in-out;} #flypaper03 img{width: 17.5vw;} .rigthJJufoimg{position: absolute;right: 0;z-index: 5;} .rigthJJufoimg img{position: relative;width: 21vw;right: -18px;margin-top: -17vw;} .count_us{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;width:278px;aspect-ratio:1/1;bottom:5vw;left:15.5vw;z-index:6} .count_us a{position:absolute;width:100%;height:100%;z-index:5} .count_us p{color:#3f3f3f;line-height:120%} .count_us .couitem_boo{position:absolute;display:flex;flex-direction:column} .count_us .couitem_boo img{aspect-ratio:1/1;min-height:unset} .count_us .couitem_boo.moJ1 img{animation:rotateJ 9s linear infinite} .count_us .couitem_boo.moJ2 img{animation:rotateJ2 5s linear infinite} @keyframes sway { 0% {transform: rotate(0deg);} 50% {transform: rotate(-9deg);} 100% {transform: rotate(0deg);} } @keyframes sway2 { 0% {transform: scale(1) rotate(0deg);} 50% {transform: scale(0.9) rotate(-2deg);} 100% {transform: scale(1) rotate(0deg);} } /*steak_area*/ #steak_area{z-index: 5;} #steak_area:before{content:"";position: absolute;background: url(/images/40/fball01.png);width: 9vw;aspect-ratio: 1/1;top: -7vw;left: 10vw;background-size: cover;z-index: 6;opacity: 1;animation: sway2 4s linear infinite;} #steak_area:after{content:"";position: absolute;background: url(/images/40/fball01.png);width: 7vw;aspect-ratio: 1/1;bottom: 16vw;right: 17vw;z-index: 9;background-size: cover;animation: sway2 5s linear infinite;} #steak_area .cen_baJbg{position:absolute;z-index:0;top:-192px} #steak_area .cen_baJbg img{max-width: 300%;} #steak_area .molist_box{position: relative;display:flex;flex-direction:column;align-items:center;margin-top: 0;z-index: 5;padding: 70px 0 400px;background: url(/images/40/ca_bg.jpg);justify-content: center;} #steak_area .molist_box:before{content:"";background-image: url(/images/40/ua_bg.png);position: absolute;width: 100%;aspect-ratio: 1920/257;bottom: 0;background-size: contain;background-repeat: no-repeat;} #steak_area .arrow_btns_box{position:absolute;width: min(1600px,100%);display:flex;justify-content:space-between;margin-top: 80px;} #steak_area .molist_box .stJbox{width: min(1440px , 90%);} #steak_area .stJbox .stJJitem{position:relative;display:flex;flex-direction:column;align-items:center;padding: 80px 0 0;} #steak_area .stJbox .stJJitem.slick-center{opacity:1} #steak_area .stJbox .stJJitem .phtoJbox{display:flex;flex-direction:column;align-items:center;-moz-transform: scale(0.9);-webkit-transform: scale(0.9);-o-transform: scale(0.9);-ms-transform: scale(0.9);transform: scale(0.9);} #steak_area .stJbox .stJJitem .phtoJbox img{-moz-transform: scale(0.8);-webkit-transform: scale(0.8);-o-transform: scale(0.8);-ms-transform: scale(0.8);transform: scale(0.8);transform-origin: center;} #steak_area .stJbox .stJJitem .phtoJbox:after{content:"";position: absolute;background: url(/images/40/hover-more.png);aspect-ratio: 47/51;width: 94px;background-size: cover;z-index: -1;left: 0;-moz-transform: translate(90px,62px);-webkit-transform: translate(90px,62px);-o-transform: translate(90px,62px);-ms-transform: translate(90px,62px);transform: translate(90px,62px);opacity: 0;} #steak_area .stJbox .stJJitem .phtoJbox:before{content:"";width: 100%;aspect-ratio: 1/1;background: #f6bf6d;position: absolute;border-radius: 666px;opacity: 0.4;} #steak_area .stJbox .stJJitem .phtoJbox:before, #steak_area .stJbox .stJJitem .phtoJbox:after{transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;} #steak_area .stJbox .stJJitem.slick-center .phtoJbox img{-moz-transform: scale(1);-webkit-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);} #steak_area .stJbox .stJJitem.slick-center .phtoJbox img{margin-right:60px} #steak_area .stJbox .stJJitem .stJJinfo{position: relative;width: 100%;height:100%;} #steak_area .stJbox .stJJitem .stJJinfo:before{content:"";position:absolute;width: 22vw;background:url(/images/40/pooum_icon.png);aspect-ratio: 22/19;background-size:contain;background-repeat:no-repeat;background-position:50%;right: 0%;z-index:-1;top:27%;opacity:0;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out} #steak_area .stJbox .stJJitem.slick-center .stJJinfo:before{opacity:1;top: 0%;transition-delay:0.9s} #steak_area .stJbox .stJJitem .stJJinfo .entitle,#steak_area .stJbox .stJJitem .stJJinfo .chtitle{position: relative;} #steak_area .stJbox .stJJitem .stJJinfo .entitle{font-size: max(3.2*(1vw + 1vh) / 2,22px);text-transform:uppercase;line-height:120%;color:white;font-weight:700;opacity:0;top:105px;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;transition-delay:0.6s} #steak_area .stJbox .stJJitem .stJJinfo .chtitle{height:auto;display:flex;justify-content:center;background-size:cover;font-size: 1.4rem;font-weight:500;padding: 0rem 0;align-items:center;padding-right:0.22em;opacity:0;transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;color: white;} #steak_area .stJbox .stJJitem:hover .chtitle{opacity: 1;} #steak_area .stJbox .stJJitem:hover .phtoJbox:before{opacity: 1;} #steak_area .stJbox .stJJitem:hover .phtoJbox:after{ -moz-transform: translate(28px, -19px); -webkit-transform: translate(28px, -19px); -o-transform: translate(28px, -19px); -ms-transform: translate(28px, -19px); transform: translate(10px, -22px); opacity: 1; transition-delay: 0.1s; } #steak_area .stJbox .stJJitem:hover .phtoJbox img{-moz-transform: scale(1);-webkit-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);} #steak_area .stJbox .stJJitem.slick-center .stJJinfo .entitle{opacity:1;top:50px} #steak_area .stJbox .stJJitem.slick-center .stJJinfo .chtitle{opacity:1;bottom:53px} /*tQtitle_area*/ #tQtitle_area{width:min(980px,90%);margin:0 auto;display:flex;align-items:center;position:relative;z-index:1;gap: 25px;} #tQtitle_area .mootbox{position:relative;font-size:max(5*(1vw + 1vh) / 2,35px);line-height:120%;font-weight:700;margin-bottom:50px} #tQtitle_area .mootbox .motext{position:absolute;bottom:21px;left:50%;font-weight:400;font-size:max(1.4 * (1vw + 1vh) / 2,18px)} #tQtitle_area .mootbox.aos-animate .motext{ -webkit-animation: clipPathAni 0.8s ease-in-out 0.8s both; animation: clipPathAni 0.8s ease-in-out 0.8s both; } @keyframes clipPathAni{0%{opacity:0;-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);} 100%{opacity:1;-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);} } .dwdwtext{background-repeat:repeat-x;background-image: url(/images/40/artmruning.png);animation:bgroop 100s linear infinite;position:absolute;height: 3rem;width:130vw;bottom: 50px;z-index:5;left:-26vw;background-size:cover} @keyframes bgroop { from { background-position: 0 0; } to { background-position: -4469px 0; } } @keyframes bigsmall{0%{transform: scale(1);} 50%{transform: scale(1.1);} 100%{transform: scale(1);} } #about_area .maJimg{position:relative;display:flex;margin-bottom:15px;flex-direction: column;align-items: center;margin-left: 0;overflow: visible;} #about_area .maJimg a{object-fit:cover;display:flex;width:100%;position:relative;transition: all 0s ease-in-out;-webkit-transition: all 0s ease-in-out;} #about_area .maJimg img{border-radius: 0;z-index: 2;position: relative;margin: 0;width: 100%;object-fit: cover;width: min(617px , 100%);animation: float 5s linear infinite;} #about_area .maJimg:before{content:"";position: absolute;width: 24vw;background: url(/images/40/animal.png);aspect-ratio: 443/385;top: -86px;z-index: 0;left: -20vw;background-size: contain;background-repeat: no-repeat;transform-origin: right bottom;animation: sway2 5s linear infinite;} #about_area .maJimg:after{content:"";position:absolute;width:5vw;background:url(/images/40/flyiom.png);right:0;top:15%;aspect-ratio:19/16;background-size:contain;background-repeat:no-repeat} @keyframes float{0%{transform:translateY(0)} 50%{transform:translateY(-20px)} 100%{transform:translateY(0)} } #about_area .maJinfoo{position:relative;display:flex;justify-content: flex-start;padding-left: 0;margin-bottom: 0vw;margin-top: 0px;margin-bottom: 150px;} #about_area .maJinfoo:before{content:"";background: url(/images/40/shake.png);aspect-ratio:125/81;width:9vw;position:absolute;right: -6vw;top: -7vw;background-position:50%;background-repeat:no-repeat;background-size:contain;animation: sway 3s linear infinite;} #about_area .maJinfoo .tctextbox{width: min(650px , 90%);margin-left: 0;display: flex;flex-direction: column;} #about_area .maJinfoo .tctextbox .row{width: 100%;margin-right: 0;margin-left: 0;} #about_area .maJinfoo .tctextbox .row .col-md-12{padding-right: 0;padding-left: 0;} #about_area .maJinfoo .tctextbox .JJtitle{display:flex;align-items:flex-start;margin-left: 76px;} #about_area .boomJJ{position:relative;display:flex;align-items:flex-end;margin-bottom: 3vw;} #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 .VCRtop p{overflow:hidden;height: 65px;width: 90%;text-align:left;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;font-size: 16px;font-weight: 400;color:#1e1e1e;margin: 2vw 0 3vw;} #benefit_area{box-shadow:0 -9px 12px rgb(110 110 110 / 15%)} #benefit_area .footenbox{position:relative;padding:46px 105px 240px;border-radius:0 0 110px 0;background:#efefef;margin-left:13vw} #benefit_area .footenbox:before{content:"";position:absolute;width:26vw;height:100%;background:var(--secondary);left:-26vw;top:0} #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:#efefef} #about_area .bigtitle{display:flex;gap:10px;padding:25px 0} #about_area .bigtitle *{font-size: max(3.4 * (1vw + 1vh) / 2,27px);} .tminfo{margin-left:35px} .tminfo .ssatext{ overflow: hidden; height: 3.5rem; font-size: 1rem; width: 100%; text-align: left; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 300; color: #1e1e1e; } .mabouttitle{margin-bottom: 30px;position: relative;padding-bottom: 20px;} .balltitle{ position: relative; } .balltitle:before{content:"";position: absolute;width: 25px;aspect-ratio: 1/1;background: var(--complement);border-radius: 666px;left: -30px;top: -31px;} .mabouttitle:after{content:"";position: absolute;bottom: 0;background: var(--complement);width: 80px;height: 5px;} .mabouttitle *{color: var(--complement);} .mabouttitle .hanJ01{font-size: 4.5rem;line-height: 100%;font-weight: 800;} .mabouttitle p{font-size:1.25rem} .mabouttitle .bigJ{font-size: 2.9rem;font-weight:600} .mabouttitle .bigJ.aos-animate{ -webkit-animation: clipPathAni 0.8s ease-in-out 1s both; animation: clipPathAni 0.8s ease-in-out 1s both; } .tctextbox h1{ color: var(--complement); font-size: 1.5rem; font-weight: 300; margin-bottom: 40px; } /*ceeservice*/ .ceeservice{position:absolute;margin-top: -300px;} .ceeservice:before{content:"";background:url(/images/40/linwaveJJ.png);position:absolute;width:100%;aspect-ratio:60/7;margin-top:118px;animation:verticalSquash 5.2s ease-in-out infinite;transform-style:preserve-3d} @keyframes verticalSquash { 0%, 100% {transform: scaleY(1);} 50% {transform: scaleY(0.6);} } /*mdexenJ*/ #benefit_area .mdexenJ{position:relative;display:grid;grid-template-columns:24% 24% 24% 24%;gap:1%;justify-content:space-between;z-index:2;margin-top:-140px} #benefit_area .mdexenJ .mdenitem{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px} #benefit_area .mdexenJ .mdenitem img{width:84px;margin-bottom:15px} #benefit_area .mdexenJ .mdenitem h3{font-size:max(1.6*(1vw + 1vh) / 2,15px);margin-bottom:10px} #benefit_area .mdexenJ .mdenitem *{color:#fff} #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)} /*sideflyJJ*/ .sideflyJJ{position:absolute} .sideflyJJ.sebox01{top: -21vw;left: -4vw;width: 45vw;z-index: 0;} .sideflyJJ.sebox02{right: -4vw;bottom: -15vw;width: 39vw;z-index: 0;} .sideflyJJ img{height:auto;min-height:auto;aspect-ratio: 1/1;animation: spin 10s linear infinite;} .sideflyJJ.sebox03{right:25vw;top:-2vw;width:9vw;z-index:6} .sideflyJJ.sebox07{left:0} .sideflyJJ.sebox07 img{width:18vw} .sideflyJJ.sebox08 img{width:17vw} .sideflyJJ.sebox08{right:0;bottom:20vw} .sideflyJJ.sebox04{right: 3vw;margin-top: -5vw;} @keyframes spin { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } /*buob_area*/ #buob_area:before{content:"";position:absolute;background-image:url(/images/40/lefttopbJ.png);width:39vw;background-size:contain;background-repeat:no-repeat;left:0vw;top:-176px;aspect-ratio:423/229} #buob_area .workframe{display:flex;flex-direction:column;padding:120px 0} #buob_area .booJJbox{width:100%;margin:120px auto 50px} #buob_area .booJJbox .slick-list{overflow:visible} #buob_area .booJJbox .booJJlist .booitem img{width:110px;padding:18px;margin-bottom:20px} #buob_area .booJJbox .booJJlist .booitem .outmming{position:relative} #buob_area .booitem{display:flex;flex-direction:column;align-items:center;background:#f4f4f4;margin:0 20px;border-radius:20px;aspect-ratio:1/1;justify-content:center;opacity:0} #buob_area .booitem:hover{border:#85ba53 5px solid} #buob_area .booitem.slick-active{opacity:1} #buob_area .booitem:before{content:"";width:195px;position:absolute;aspect-ratio:212/233;background-image:url(/images/40/doctor.png);background-size:contain;background-repeat:no-repeat;top:-21px;z-index:-1;opacity:0;transition:all linear 0.3s} #buob_area .booJJbox .booJJlist .booitem:hover:before{-moz-transform: translate(4.75em, -9.75em);-webkit-transform: translate(4.75em, -9.75em);-o-transform: translate(4.75em, -9.75em);-ms-transform: translate(4.75em, -9.75em);transform: translate(4.75em, -9.75em);opacity: 1;} #buob_area .booJJbox .booJJlist .booitem p{color:#565656;font-size:max(1.6*(1vw + 1vh) / 2,18px);font-weight:500} #buob_area .booJJbox .booJJlist .booitem span{font-size:max(1.2*(1vw + 1vh) / 2,15px);color:#565656} #buob_area .mmtmore,#philosophy_area .mmtmore{width:100%;margin:0 auto;display:flex;justify-content:center} #buob_area .JJtitle{display:flex;flex-direction:column;margin-bottom:0;align-items: center;} @keyframes float{0%{transform:translateY(0)} 50%{transform:translateY(-20px)} 100%{transform:translateY(0)} } /*doctorpicbox*/ #doctorpicbox{position:relative;display:flex;flex-direction:column;align-items:center;padding: 15px 0;} #doctorpicbox .arrow_btns_box{width:30vw;display:flex;flex-direction:row;justify-content:space-between;margin:0 auto;position:absolute;top:130px} #doctorpicbox .workframe{width: 100%;} #doctorpicbox .boomJJ .workframe{display:flex;flex-direction:column;align-items:center} #doctorpicbox .doumbox{display:flex;flex-direction:column;align-items:center;margin: 0 7px;} #doctorpicbox .doumbox img{border-radius: 0;} #doctorpicbox .doumbox p{color:#5e798a;font-size:max(1.3*(1vw + 1vh) / 2,17px);font-weight:500;padding:10px 0} /*newsJ_area*/ #newsJ_area{padding: 100px 0 280px;background: #ffffff;} #newsJ_area{display:flex;justify-content:flex-end} #newsJ_area:before{content:"";width:100%;height:100%;position:absolute;background-image:url(/images/40/nwdb_bg.png);background-size:cover;background-position:50% 60%} #newsJ_area .mewn_img{position:absolute;left:8vw;z-index:0;width:32vw} #newsJ_area .mewn_img:before{content:"";position:absolute;width:100%;height:100%;background:#116537;z-index:-1;left:-2vw;top:-3vw;border-radius:0px 0px 0px 40px} #newsJ_area .mewn_img img{width:min(600px,100%);border-radius:0px 40px 0px 0px} #newsJ_area .workframe{width:min(1290px,70vw);margin:0;display:flex;flex-direction:column;align-items:flex-end;margin-top:36px} #newsJ_area .JJtitle{display:flex;flex-direction:row;align-items:center} #newsJ_area .wenGbox{width:79%} #newsJ_area .luenbuom{display:flex;align-items:center;margin:60px 0;margin-left:140px} .lusanline{position:relative;height:2px;border-bottom:#dcdcdc 1px solid;margin-right:12vw} .lusanline span{width:50px;height:3px;background:#116537;display:flex} .lusancall{display:flex;margin-left:140px} .lusancall svg{width:38px;fill:#595959;margin-right:20px} .lusancall span{font-size:max(3.6*(1vw + 1vh) / 2,26px);color:#595959;font-family:"Cinzel Decorative",serif;font-weight:700} #newsJ_area .luenbuom .luenntext{position:relative;padding-left:30px;margin-left:30px;display:flex;align-items:center} #newsJ_area .luenbuom .luenntext:before{content:"";position:absolute;width:2px;height:50%;background:#929292;left:0px} #newsJ_area .newsJlist{padding:16px 10%;background:#f4f4f4} #newsJ_area .newsJlist .nwenboix{margin:10px;position:relative} #newsJ_area .newsJlist .nwenboix:hover .neneinfo{-moz-transform:translateY(-0.25em);-webkit-transform:translateY(-0.25em);-o-transform:translateY(-0.25em);-ms-transform:translateY(-0.25em);transform:translateY(-0.25em)} #newsJ_area .newsJlist .nwenboix a.mmasklink{position:absolute;width:100%;height:100%;z-index:96} #newsJ_area .newsJlist .nwenboix .neneimgbox{display:flex;flex-direction:column;align-items:center} #newsJ_area .newsJlist .nenelink svg{width:25px} #newsJ_area .newsJlist .neneinfo{position:relative;width:90%;border-bottom:dashed 2px #a5a5a5;z-index:22;padding:15px 80px 15px 150px;display:flex;align-items:center;justify-content:space-between} #newsJ_area .newsJlist .neneinfo:before{content:"";position:absolute;width:10px;aspect-ratio:1/1;background:#7a7a7a;aspect-ratio:1/1;margin-left:-50px;border-radius:55px} #newsJ_area .newsJlist .nenelink a{display:flex;justify-content:flex-end;color:var(--secondary);font-size:max(1*(1vw + 1vh) / 2,15px)} #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,16px);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} #newsJ_area .newsJlist .neneinfo svg{width:20px;aspect-ratio:1/1} /*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%)} } /*Distributor_area*/ #Distributor_area{background: url(/images/40/gn_bg.jpg);} #Distributor_area .distwo{display: grid;grid-template-columns: 64% 47%;gap: 1%;padding: 40px 0 60px;} #Distributor_area .distwo .disleft{margin-top: 85px;} #Distributor_area .distitle{display: flex;align-items: flex-end;gap: 10px;} #Distributor_area .distitle .teetitle{font-size: 2.9rem;line-height: 100%;font-weight: 700;} #Distributor_area .distitle .teesub{font-size: 2.4rem;line-height: 100%;text-transform: uppercase;color: var(--secondary);font-weight: 700;} #Distributor_area .balltitle:before{background: var(--secondary);} #Distributor_area a.fmlink{width: min(200px , 100%);} #Distributor_area .tareabox{display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;margin: 50px 0 80px;} #Distributor_area .tarlist{display:flex;align-items: center;gap: 20px;} #Distributor_area .tar01{display:flex;flex-direction: column;aspect-ratio: 1/1;width: 91px;align-items: center;justify-content: center;} #Distributor_area .tar02{display:flex;flex-direction: column;} #Distributor_area .tar02 .toptext{font-size:1.2rem;display: flex;align-items: flex-end;} #Distributor_area .tar02 .toptext span{font-size:3.2rem;font-weight: 600;line-height: 100%;} #Distributor_area .tar01 span{color:white;font-size: 1.4rem;line-height: 120%;} #Distributor_area #color01 .tar01{background: #b66349;} #Distributor_area #color02 .tar01{background: #ecb35d;} #Distributor_area #color03 .tar01{background: #a2bdb4;} #Distributor_area #color04 .tar01{background: #444444;} /*conutJ_area*/ #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: relative;z-index:5;display: flex;gap: 15px;pointer-events: none;} .arrow_btns_box .slick-arrow.slick-prev{left:unset;position:relative;display: flex;} .arrow_btns_box .slick-arrow.slick-next{right:unset;position:relative;display: flex;} .arrow_btns_box .slick-arrow{-webkit-transform:unset;-ms-transform:unset;transform:unset;width:auto;height:auto;} .arrow_btns_box button{pointer-events: auto;} .arrow_btns_box .slick-prev:before, .arrow_btns_box .slick-next:before{display:none;} .arrow_btns_box.ree{left:-1%} .arrow_btns_box.lee{left:31%} .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: 60px;aspect-ratio:1/1;background: rgb(255 255 255 / 0%);border-radius: 0;padding: 18px;fill: #ffffff;border: #ffffff00 1px solid;} .mmtmore{display:flex} .mmtmore , .mmtmore *{border-radius: 0;} .mmtmore a{background:var(--secondary);background:unset;display:flex;color:#5c8537;align-items:center;padding: 2px 10px;font-size: max(1.1*(1vw + 1vh) / 2,15px);justify-content:space-between;border-bottom: #5c8537 1.5px solid;border-top: #5c8537 1.5px solid;line-height: 100%;} .mmtmore a:hover{background:var(--secondary);color:#fff} .mmtmore a:hover svg{fill:#fff;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);} .mmtmore a svg{width: 63px;aspect-ratio: 5/3;border-radius:555px;margin: 2px 0px;padding: 8px;margin-right: 0;fill: var(--secondary);} .mmtmore a svg path{fill:#5c8537} .arrow_btns_box svg{width: 71px;padding: 21px;border-radius: 555px;} .arrow_btns_box .iconCircle{position:absolute;top:0;left:0;width: 75px;height:auto;aspect-ratio:1/1;display:flex;justify-content:center} .arrow_btns_box .iconCircle circle{top:0;left:0} .arrow_btns_box svg.pathJ{position:relative;z-index:1;width:100%;height:100%;border-radius:100%;stroke-dasharray: 236;stroke-dashoffset:236;stroke:rgba(30,84,93,0.2);fill:none;stroke-width:3px;background:unset;stroke:#ffffff;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:0;padding:0;top: -2px;left: -2px;border:unset} .arrow_btns_box .slick-arrow:hover svg.pathJ{stroke-dashoffset:0;fill:none;background:unset} .arrow_btns_box .slick-arrow:hover svg{background: var(--secondary);fill: #ffffff;} /*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: visible;max-width:100vw;z-index: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;padding-bottom: 350px;background-image: url(/images/40/indexproduct_bg.png);background-position: 50% 100%;} #product_area .arrow_btns_box{display:flex;justify-content:space-between;width:106%;left:-3%;position:absolute} #product_area .list_box{display:flex;align-items:center} #product_area .list_box ul.slick-slider{display:flex;flex-direction:column;width:100%} #product_area .bg_box{top:-40%;background:url(/images/40/pog_bg.jpg);opacity:1;background-position:50%} #product_area:before{content:"";width: 100vw;height: 100%;z-index: 4;position: absolute;top: 0;background: linear-gradient(to bottom, #ffffff, rgb(255 255 255 / 0%));} #product_area .bg_box:before{background:unset} #product_area:after{content:"";position:absolute;width: 9vw;aspect-ratio:196/113;background:url(/images/40/fly_paper02.png);bottom: 15vw;left:25vw;background-size:contain} #product_area .inside_amJ{z-index:6;padding:100px 0;width:min(92%,1680px)} #product_area .boomJJ,#procss_area .boomJJ{display:flex;flex-direction:column;align-items:center} #product_area .slick-list .slick-slide{padding: 20px 0;} .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} .poctopbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:35px} #product_area .list_box li div{display:flex;flex-direction:column;align-items:center} .poctopbar .lefcocoJ{display:flex;align-items:center;gap:15px} .poctopbar .lefcocoJ .mooline a{display:flex;padding:10px 25px;background:#5db456;color:white;align-items:center;gap:14px} .poctopbar .lefcocoJ .mooline svg{width:40px;aspect-ratio:1/1;fill:#ffffff} /* #newsBox2 */ #newsBox2 .info .mdmiJJ{display: flex;gap:5%;align-items:center;background:#ffffff;-webkit-box-shadow:0 0 12px 6px rgb(196 196 196 / 24%);box-shadow:0 0 12px 6px rgb(196 196 196 / 24%);max-width:100%;padding: 30px;} #newsBox2 .mdJbox02{display:flex;width:100%;flex-direction:column} #newsBox2 .nwJJoox{display:grid;grid-template-columns:45% 54%;gap:1%;align-items:center} #newsBox2 .nwJJoox .mwJJright img{border-radius:0 20px 20px 0;width:100%} #newsBox2 .mwJJleft h3{color:#494647;font-weight:500;overflow:hidden;margin:10px 0;width:min(380px,100%);font-size:26px;height:46px;text-align:left;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical} #newsBox2 .mwJJleft p{overflow:hidden;margin:10px 0;font-size:16px;height:92px;width:min(380px,100%);text-align:left;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical} #newsBox2 .bg_box{opacity:1;display:flex;flex-direction:column;align-items:center} /* 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%} /*procss_area*/ #procss_area{position: relative;z-index: 0;background: url(/images/40/pocess_bg.jpg);padding: 120px 0 90px;background-size: cover;} #procss_area .bg_box{top:-40%;height:140%;background:url(/images/40/bcess_bg.jpg);opacity:1;background-position:50%} #procss_area .bg_box:before{background:unset} #procss_area .JJtitle{display:flex;flex-direction:column;align-items:center} #procss_area .JJtitle .tmmtitle:before{top:-10px;left:48%} #procss_area .JJtitle .tmmtitle:after{top:-10px;left:40%} #procss_area .JJtitle .tmmtitle{padding-left:0} #procss_area .culistJJpocs{position:relative;display:grid;grid-template-columns: repeat(5,1fr);margin-bottom:60px;margin-top:105px;gap: 48px;} #procss_area .culistJJpocs .rowJJ{display:flex;flex-direction:column;align-items:center;aspect-ratio: 1/1;border: #cecece 1px solid;border-radius: 666px;justify-content: center;} #procss_area .culistJJpocs .rowJJ:hover .cunumber,#procss_area .culistJJpocs .rowJJ:hover .cutitle{color: var(--primary);} #procss_area .culistJJpocs .rowJJ:hover{border-color: var(--primary);} #procss_area .culistJJpocs .cunumber{font-size: max(3*(1vw + 1vh) / 2,36px);font-weight:700;font-family:Playfair;line-height:100%} #procss_area .culistJJpocs .rowJJ .cuimg{width: 13px;border-radius:666px;background: #676767;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center} #procss_area .culistJJpocs .rowJJ .minJJhight{min-height: 50px;display: flex;align-items: center;} #procss_area .culistJJpocs .rowJJ .cuimg img{width: 0;} #procss_area .culistJJpocs .rowJJ:hover .cuimg img{width: 65%;} #procss_area .culistJJpocs .rowJJ:hover .cuimg{width: 36px;background: unset;} #procss_area .culistJJpocs .rowJJ .cuinfo{font-size: 15px;} #procss_area .culistJJpocs .rowJJ .cutitle{font-size: max(1.4*(1vw + 1vh) / 2,17px);font-family: 'Noto Sans TC';font-weight: 500;} #procss_area .btnBox{display: flex;flex-direction: column;align-items: center;} .too_btm{display:flex;gap:27px;margin-top:90px} .too_btm a.fmlink{margin-top:0} .too_btm .slick-next{right:0} .too_btm .slick-next,.too_btm .slick-prev{position:relative;width:60px;height:auto;top:auto;transform:translate(0,0%)} .arrow_btns_box .slick-prev{left: 0;transform: scaleX(-1);} @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);border-bottom:5px var(--complement) solid} } @media screen and (min-width: 769px) { .mb-box {display: none; } } @media screen and (max-width: 1470px) { a.fmlink{margin-top: 30px;} .balltitle:before{width: 19px;} #steak_area .cen_baJbg{top: -157px;} #steak_area .cen_baJbg img{object-fit: cover;} #about_area .maJimg:before{width: 18vw;top: -1vw;left: -12vw;} #about_area{padding: 100px 0 93px;} #about_area:before{bottom: 26%;} #steak_area .molist_box{margin-top: 0;padding: 70px 0 300px;} #steak_area .arrow_btns_box{width: min(1280px, 100%);} #steak_area .molist_box .stJbox{width: min(1024px, 90%);} #steak_area .stJbox .stJJitem .phtoJbox img{-moz-transform:scale(0.6);-webkit-transform:scale(0.6);-o-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6)} #steak_area .stJbox .stJJitem.slick-center .phtoJbox img{-moz-transform:scale(0.9);-webkit-transform:scale(0.9);-o-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)} #steak_area .stJbox .stJJitem .stJJinfo:before{right: -2%;} #steak_area .stJbox .stJJitem.slick-center .stJJinfo:before{top: 3%;} #steak_area .stJbox .stJJitem{padding: 70px 0 5px;} #steak_area .stJbox .stJJitem.slick-center .stJJinfo .chtitle{bottom: 60px;right: 3%;} .mabouttitle .hanJ01{font-size: 3.6rem;} .mabouttitle .bigJ{font-size: 2.1rem;} #Distributor_area .distwo{grid-template-columns: 68% 40%;} #Distributor_area .tar02 .toptext span{font-size: 2.5rem;} #Distributor_area .tar02 .toptext{font-size: 1rem;} #Distributor_area .distwo .disleft{margin-top: 33px;} #Distributor_area .distitle .teetitle{font-size: 2.2rem;} #Distributor_area .distitle .teesub{font-size: 1.5rem;} #Distributor_area .tar01 span{font-size: 1.2rem;} .tctextbox h1{font-size: 1.3rem;} #Distributor_area .tar01{width: 80px;} #about_area .workframe{grid-template-columns: 39% 54%;margin-top: 0vw;display:grid;} #flypaper03{bottom: -4%;right: -2%;} #about_area:after{width: 7vw;bottom: 8%;right: 51vw;} #newsBox2 .bg_box:before{height:366px} #newsBox2 .bg_box:after{height:160px} .JJtitle .midtexrb{width:min(45px,100%)} .JJtitle .Jterightbox{margin-left:5px} .JJtitle .Jterightbox p{display:flex;justify-content:flex-start} #about_area .maJinfoo .tctextbox .tminfo p{font-size:16px} #about_area #VCRabout .VCRbottom p.matitle{margin:0; font-size:16px} #newsBox2 .nwJJoox .mwJJright img{object-fit:cover;object-position:30%;height:390px} #buob_area .booJJbox{margin:80px auto 50px} #buob_area .workframe{padding:100px 0} #about_area .maJinfoo .tctextbox{width: min(540px,100%);} #about_area .maJinfoo{padding-right: 0;margin-bottom: 90px;} .JJtitle{margin-bottom:45px} #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{top: 10%;height:390px} .mamatitle .rightm span{width:190px} #buob_area:before{top:-78px;width:31vw} #about_area .maJimg:after{right:1vw} .count_us{width:211px} .count_us .couitem_boo.moJ2{width:75%} #buob_area .booitem:before{width:150px;top:10px} #newsJ_area .newsJlist .neneinfo{padding:15px 80px 15px 150px} #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} #newsJ_area .newsJlist{padding:4px 0} #doctorpicbox .arrow_btns_box{width:31vw;top:110px} .ceeservice{margin-top:-188px} .rigthJJufoimg img{width:17vw;margin-top:-12vw;right:-8px} #doctorpicbox .doumbox img{height:448px;object-fit:cover} #procss_area .culistJJpocs{margin-bottom:57px;margin-top:76px} #procss_area .culistJJpocs:before{top:78px} #procss_area .culistJJpocs .rowJJ .cuimg{width:17px} #procss_area .culistJJpocs .rowJJ .cuinfo{font-size:14px} #procss_area .workframe{width:min(1280px,95%)} #product_area{padding-bottom:300px} } @media screen and (max-width: 1280px) { #about_area:after{display:none;} #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} #procss_area .culistJJpocs{grid-template-columns: repeat(5, 1fr);gap: 15px;} #procss_area .workframe{width: 85%;} #Distributor_area .distwo{ grid-template-columns: 68% 34%; } } @media screen and (max-width: 1024px) { .webBox .hanJ01{margin-left: 0;} .webBox .hanJ01 .pageh1:before{display: none;} .webBox .hanJ01 .pageh1{margin-bottom: 0;padding: 20px 0;display: flex;justify-content: center;} #about_area .maJimg:before{width: 26vw;height:300px;left: -17vw;top: 2vw;} .rigthJJufoimg img{width:23vw;margin-top:-18vw} #doctorpicbox .doumbox img{height: auto;} #buob_area .booJJbox .booJJlist{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr)} .laJtext{display:none} #steak_area .stJbox .stJJitem .stJJinfo{width: 92%;} #steak_area .stJbox .stJJitem.slick-center .stJJinfo .chtitle{bottom: 10px;} #steak_area .stJbox .stJJitem.slick-center .stJJinfo:before{width: 28vw;top: 4%;right: 0%;} #steak_area .arrow_btns_box{width: min(600px, 100%);} #about_area .maJinfoo:before{width: 12vw;right: 85vw;top: 0vw;} #flypaper03{bottom: 23%;right: 4%;} #flypaper03 img{width: 23vw;} #about_area .workframe{display:flex;flex-direction:column;width: 100%;margin: 0 auto;align-items: center;} #about_area .maJimg , #about_area .maJimg a{width:100%;display: flex!important;flex-direction:column;align-items:center;box-shadow: none;transform: skewX(0deg);right: auto;margin: 0 auto;} #about_area .maJinfoo{width:100%;margin-top:50px;display: flex;justify-content: center;margin-bottom: 20px;padding-right: 0;} #tQtitle_area{display: flex;flex-direction: column;} #tQtitle_area .mootbox{margin-bottom: 0;} #Distributor_area .distwo{ display: flex; flex-direction: column; align-items: center; } .dwdwtext{bottom: -16px;} #tQtitle_area .mootbox .motext{position: relative;left: auto;bottom: auto;} .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} #conutJ_area:before{display:none} .ceeservice{margin-top:-10px} #about_area{padding:60px 0 49px;gap: 50px;} #about_area:before{content:"";width: 30vw;bottom: 47%;} #product_area{background: #ececec;padding-bottom: 20px;} #product_area:before{opacity: 0;display: none;} #steak_area .cen_baJbg img{max-width: 164%;} .too_btm{display: flex;justify-content: center;} #about_area .maJimg img{width: min(400px,80%);object-fit: cover;height: auto;} #procss_area{padding:100px 0 90px} #procss_area .culistJJpocs{grid-template-columns: repeat(3, 1fr);} #procss_area .culistJJpocs:before{display:none;} .boomJJ{display: flex;flex-direction: column;align-items: center;} #about_area .maJinfoo .tctextbox{display: flex;flex-direction: column;align-items: center;width: min(600px, 100%);} #about_area .maJinfoo .tctextbox .JJtitle , .tminfo{margin-left: 0;display: flex;flex-direction: column;align-items: center;} #about_area .maJinfoo .tctextbox .tminfo p{width: 100%;} #product_area:after{bottom: 40px;left: 10vw;} .twoJJ{ display: flex; flex-direction: row; } } @media screen and (max-width: 980px){ .mideyeembox .mieitem img{margin:0 auto} .ceeservice img{display:none} #newsJ_area .luenbuom{display:flex;flex-direction:column;align-items:center;margin:51px 0} .count_us{position:relative;margin:50px auto 0;left:auto} .Jamore{justify-content:center} } @media screen and (max-width: 768px) { #steak_area .cen_baJbg img{max-width: 200%;} #steak_area .stJbox .stJJitem.slick-center .stJJinfo:before{width: 31vw;top: 2%;right: 0%;} #steak_area .stJbox .stJJitem .stJJinfo{width: 79%;} #steak_area .molist_box{padding: 50px 0 200px;} .arrow_btns_box svg{width: 49px;padding: 13px;} .maloogo{display:none} #steak_area .molist_box .stJbox{width: 80%;} #steak_area .stJbox .stJJitem{padding: 50px 0 10px;} #steak_area .cen_baJbg{top: -134px;} #steak_area .arrow_btns_box{width: 100%;} #steak_area .stJbox .stJJitem .stJJinfo .chtitle{right: 3%;font-size: 1.2rem;opacity: 1;} #steak_area .stJbox .stJJitem.slick-center .stJJinfo .chtitle{right: 2%;bottom: 15px;font-size: 1.2em;} #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%} #Distributor_area .tareabox{grid-template-columns: repeat(1, 1fr);} #Distributor_area .distwo .disleft{ width: 100%; } .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} #procss_area .JJtitle{display: flex;align-items: center;} #procss_area .JJtitle .tmmtitle{padding-left: 60px;} #procss_area .JJtitle .tmmtitle:before{top: 25px;left: 22px;} #procss_area .JJtitle .tmmtitle:after{top: 25px;left: 0px;} } @media screen and (min-width: 641px) { .mmtmore.mbshowJ{display: none;} } @media screen and (max-width: 640px) { #product_area:before{width: 100%;} .poctopbar{display: flex;flex-direction: column;background: #ffffff;padding: 50px 20px;} #product_area .inside_amJ{padding-top: 60px;margin-top: 0;} .webBox .hanJ01 {padding-bottom: 0;} #steak_area .cen_baJbg img{max-width: 250%;} #steak_area .stJbox .stJJitem.slick-center .stJJinfo .chtitle{right: 4%;bottom: 34px;} #newsBox2 .nwJJoox{display:flex;flex-direction:column;gap:25px} #newsBox2 .nwJJoox .mwJJleft{order:2;display:flex;flex-direction:column;align-items:flex-start} #newsBox2 .nwJJoox .mwJJright{order:1} #newsBox2 .mdJbox01,#newsBox2 .info .mdmiJJ:before{display:none} #newsBox2 .info .mdmiJJ{display:flex;flex-direction:column;box-shadow:unset;box-shadow:unset;background:unset} #newsBox2 .nwJJoox .mwJJright img{border-radius:20px;height:auto;aspect-ratio:6/5} #newsBox2{padding: 0 0;background: #ffffff;} #steak_area .molist_box .stJbox{width: min(400px , 100%);} #steak_area .arrow_btns_box {width: 95%;margin-top: 50px;} #steak_area .stJbox .stJJitem.slick-center .phtoJbox img{-moz-transform: scale(0.8);-webkit-transform: scale(0.8);-o-transform: scale(0.8);-ms-transform: scale(0.8);transform: scale(0.8);} #steak_area .stJbox .stJJitem{padding: 50px 0 20px;} #steak_area .stJbox .stJJitem .phtoJbox:before{opacity: 1;} #steak_area .stJbox .stJJitem .phtoJbox:after{ -moz-transform: translate(28px, -19px); -webkit-transform: translate(28px, -19px); -o-transform: translate(28px, -19px); -ms-transform: translate(28px, -19px); transform: translate(10px, -22px); opacity: 1; transition-delay: 0.1s; } #steak_area .stJbox .stJJitem .phtoJbox img{ -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #steak_area .cen_baJbg{top: -97px;} #steak_area .stJbox .stJJitem.slick-center .stJJinfo:before{width: 46vw;top: 0%;right: 8%;} .runingtext{top:30%} .pcshowJ{display:none} .mmtmore.pcshowJ{display:none} .arrow_btns_box.lee{left:auto;right:-4%} #about_area .maJimg{position:relative;top:0;margin: 0 auto;width: 100%;margin-bottom:0} #about_area .maJimg a{margin: 0;} #about_area .maJimg a::-webkit-scrollbar{width:5px} #about_area .maJimg a::-webkit-scrollbar-track{background:#116537} #about_area .maJimg a::-webkit-scrollbar-thumb{background:#003c1e} #about_area .maJimg img{max-width: 100%;margin: 0 auto;} #about_area .maJinfoo{width: 100%;margin-top:20px;padding-right: 0;padding-left: 0;} #about_area .maJinfoo .tctextbox{width: 89%;margin: 15px auto 2vw;display: flex;gap: 20px;} .tminfo{width: 90%;display: flex;align-items: flex-start;} #about_area{display:flex;flex-direction:column;height:auto;padding: 0px 0 30px;gap: 30px;} #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,#book_area:after{display:none} 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} #newsJ_area{display:flex;flex-direction:column;align-items:center;background:#f3f3f3;padding:80px 0 0px} #newsJ_area .mewn_img{position:relative;left:auto;width:90%;margin:0 auto} #newsJ_area .workframe{width:100%} #newsJ_area .wenGbox{width:100%;display:flex;flex-direction:column;align-items:center} #newsJ_area .luenbuom{padding-left:0;margin:32px auto;display:flex;flex-direction:column;align-items:center;gap:20px} .lusancall{margin-left:0} .lusanline{width:100vw;margin-right:0} #newsJ_area .luenbuom .luenntext{padding-left:0;margin-left:0} #newsJ_area .luenbuom .luenntext:before{display:none} #newsJ_area .newsJlist .neneinfo{width:90%;padding:15px 26px 15px 40px;margin:0 auto} #newsJ_area .newsJlist .neneinfo h5{width:calc(100% - 40px)} #newsJ_area .newsJlist .neneinfo:before{width:5px;margin-left:-20px} #doctorpicbox .arrow_btns_box{width: 90vw;} #procss_area .culistJJpocs{grid-template-columns: repeat(2, 1fr);} #procss_area .culistJJpocs:after{content:"";position:absolute;width:29vw;aspect-ratio:140 / 131;background:url(/images/40/foo_flower.png);background-size:contain;background-position:50%;background-repeat:no-repeat;bottom:0vw;right:0vw;animation:myfirst 1s infinite;animation-duration:2s;animation-timing-function:ease-in-out} .poctopbar .lefcocoJ .mooline svg{width: 35px;} .poctopbar .lefcocoJ .mooline a{padding: 8px 25px;} #product_area:after {display:none;} #product_area .list_box{width: 90%;margin: 0 auto;} #product_area .arrow_btns_box{width: 100%;left: 0;margin-bottom: 60px;} #flypaper03{ bottom: 25%; } #flypaper03 img{ width: 36vw; } } @media screen and (max-width: 550px) { .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} #buob_area .booJJbox .booJJlist .booitem img{margin-bottom:23px} .JJtitle{display:flex;flex-direction:column;margin-bottom: 26px;} #buob_area .JJtitle{display:flex;flex-direction:column;align-items:center} .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(200px , 100%);margin: 19px 0;padding: 14px 20px;} .foocont a.fmlink{width: 270px;margin-top: 10px;} #newsBox2 .mwJJleft h3 , #newsBox2 .mwJJleft p{width: 100%;} .cnlittle::before, .cnlittle::after{width: 45px;} .JJtitle .Jterightbox .cnlittle:before{width: 82px;} #procss_area .culistJJpocs .rowJJ .cuimg{width: 10px;} #procss_area .culistJJpocs .rowJJ .minJJhight{min-height: 30px;} #VCRabout .VCmtitle:before{content:"";position: absolute;width: 150vw;left: -15vw;height: 1px;background: #a1a1a1;bottom: -20px;} #VCRabout .VCmtitle{margin-bottom:50px} #about_area .boomJJ{display: flex;align-items: flex-start;} } @media screen and (max-width: 480px) { .webBox .hanJ01{padding-bottom: 0;padding-top: 0;font-size: 2.2rem;} .mabouttitle .bigJ{font-size: 1.4rem;} .webBox .hanJ01 .pageh1{padding: 0;} .balltitle:before{display:none;} .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} .top_Jtitle .totle{font-size: 2.2em;} .top_Jtitle .tosub{font-size: 1.4em;} #steak_area .molist_box .stJbox{width: min(300px , 100%);} #steak_area:before{width: 17vw;top: -12vw;} #steak_area .stJbox .stJJitem.slick-center .stJJinfo:before{width: 52vw;} #steak_area .stJbox .stJJitem .stJJinfo .chtitle{right: 0;} #steak_area .molist_box{padding: 50px 0 150px;} #steak_area:after{width: 15vw;bottom: 97px;right: 7vw;} .tctextbox h1{font-size: 1.2rem;margin-bottom: 140px;} .tminfo{margin-bottom: 10px;} #about_area:before{width: 55vw;bottom: 43%;} .tminfo .ssatext{font-size: 0.9rem;height: 3rem;} #flypaper03{bottom: 232px;right: 9vw;} #about_area .maJinfoo:before{top: -119vw;right: 2vw;width: 23vw;opacity: 0;} #buob_area .workframe{padding:70px 0} #steak_area .molist_box:before{background-size: cover;width: 169%;} .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} #Distributor_area .distitle{display: flex;flex-direction: column;align-items: flex-start;} #Distributor_area .moobtn{display: flex;flex-direction: column;align-items: center;margin-bottom: 20px;} #Distributor_area .tareabox{margin-bottom: 35px;} #Distributor_area .tarlist{display:grid;grid-template-columns: 28% 70%;gap: 2%;} #about_area .maJinfoo .tctextbox .tminfo p{height:auto;-webkit-line-clamp: 3;margin: 20px 0 0px;font-size:16px;width:100%;font-weight: 400;} #product_area .bgBox{width:100%;object-fit:cover} #custom_box ul li{width:100%} .mainfobox{padding:67px 0} .maloogo{display:none} #VCRabout .VCRbottom{grid-template-columns:repeat(2,1fr);margin-top:60px;} #about_area .boomJJ{display:flex;justify-content:flex-start;margin-top: 30px;} .rigthJJufoimg img{width:55vw;margin-top:-167vw;right:-7vw;transform:rotate(7deg)} .ceeservice{margin-top:-60px} .ceeservice img{display:flex;height:1200px} #steak_area .cen_baJbg img{max-width: 303%;} #newsJ_area .JJtitle .Jterightbox{padding-bottom:500px} #newsJ_area .mewn_img{position:absolute;top:330px;display:flex;flex-direction:column;align-items:center} #newsJ_area .mewn_img img{height:400px;object-fit:cover;width:85%} #newsJ_area .mewn_img:before{display:none} }