/* 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} /* search_box */ #openform {background: rgba(var(--white-rgb), .3);} /* section */ 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(0px)} .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{position: relative;margin-bottom:20px} .JJtitle .tmmtitle{font-weight:300;font-size: max(4.2*(1vw + 1vh) / 2,37px);text-transform:uppercase;color:#0e0e0e;line-height:120%;padding-left:60px;display: flex;align-items: center;gap: 10px;} .JJtitle .tmmtitle:before{position:absolute;width:13px;aspect-ratio:1/1;background:#7b7b7b;top:25px;left:22px;content:"";border-radius:50%;animation:myfirst 2s infinite} .JJtitle .tmmtitle:after{position:absolute;width:13px;aspect-ratio:1/1;background:#162142;top:25px;left:0px;content:"";border-radius:50%;animation:myfirst 2.2s infinite} .JJtitle .tmmtitle .aJJtan{position:relative;padding-left:16px;display:flex;align-items:center;font-size:max(1.5 * (1vw + 1vh) / 2,18px);font-weight:400;margin-top:18px} .JJtitle .tmmtitle .aJJtan:before{content:"";display: flex;position: absolute;width: 2px;height: 13px;background: #6b6b6b;left: 0;} @keyframes myfirst{0%{transform:translate(0px,0px)} 50%{transform:translate(0px,-10px)} 100%{transform:translate(0px,0px)} }.JJtitle .cnlittle{font-weight:400;font-size:max(1.7*(1vw + 1vh) / 2,20px);text-transform:uppercase;color:#363636} /*about_area*/ #about_area{display:flex;justify-content:flex-end;height:700px;align-items:center;background:url(/images/40/aboum_bg.jpg);background-size: cover;} #about_area .maJimg{position:relative;left:0;animation:float 3s ease-in-out infinite;width:45%} #about_area .maJimg img{border-radius:0 0 0 110px;box-shadow:38px 45px 0px #efefef} @keyframes float{0%{transform:translateY(0)} 50%{transform:translateY(-20px)} 100%{transform:translateY(0)} }#about_area .maJinfoo{position:relative;display:flex;justify-content:space-between;align-items:center;top:-60px} #about_area .maJinfoo .tctextbox{width:50%} #about_area .maJinfoo .tctextbox .tminfo p{overflow:hidden;margin:50px 0 80px;height:101px;width:94%;text-align:left;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;font-size:17px;color:#797979} .arrow_btns_box{cursor:pointer;position:absolute;top:38%;z-index:5} .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:50px;aspect-ratio:1/1;background:#118fce;border-radius:50%;padding:16px;fill:#ffffff} .mmtmore{display:flex} .mmtmore a{background:var(--secondary);display:flex;color:#ffffff;align-items:center;padding:0px 30px 0px 5px;border-radius:10px;font-size:14px} .mmtmore a:hover{background:#0c4765} .mmtmore a svg{width:30px;aspect-ratio:1/1;fill:#0087ca;background:#ffffff;border-radius:555px;margin:10px;padding:9px;margin-right:30px} .mmtmore a svg path{fill:#0087ca} /*listenJ_area*/ #listenJ_area{display: flex;justify-content: flex-end;overflow: hidden;flex-direction: column;align-items: flex-end;z-index: 5;} #listenJ_area:before{content:"";position: absolute;width: 100%;height: 440px;background: #f6f6f6;top: 0;} #listenJ_area:after{content:"";position: absolute;background: url(/images/40/poJlmftimg.jpg);width: 22vw;aspect-ratio: 423/976;left: 0;top: 0;background-size: cover;border-radius: 0 0 150px 0;} #listenJ_area .listenimg{width:72vw;display:flex;flex-direction:column;justify-content:center} #listenJ_area .listeninfo{position:absolute;margin-left:6vw} #listenJ_area .listeninfo .linntitle{font-size: max(2.1*(1vw + 1vh) / 2,20px);font-weight: 400;} #listenJ_area .listeninfo *{color:#fff} #listenJ_area .lintext h1{font-weight:300;padding-top:80px;margin-top:90px;border-left:#fff 1px solid;padding-left:10px;word-spacing:100vw;max-width:100%;font-size:max(1.2*(1vw + 1vh) / 2,15px)} #listenJ_area .listenimg .listen_bg{display:flex;align-items:center} #listenJ_area .listenimg .listen_bg:before{content:"";position:absolute;width:44vw;aspect-ratio:1/1;border:rgb(255 255 255 / 48%) 1px solid;border-radius:5555px;right:-26vw} #listenJ_area .listenservice{width:72vw;display:flex;flex-direction:column;justify-content:center;margin-top:40px} #listenJ_area .lissevJ{display:flex;align-items:center;gap:57px;display:grid;grid-template-columns:19% 19% 19% 19%;gap:0;flex-wrap:wrap;width:55vw;margin-left:2vw;margin-top:60px} #listenJ_area .lissevJ:before{content:"";position:absolute;right:-16vw;width:26vw;height:2px;background:#0e0e0e;margin-bottom:40px} #listenJ_area .lissevJ .item a{display:flex;flex-direction:column;align-items:center} #listenJ_area .lissevJ .item a p{font-weight:500} #listenJ_area .lissevJ .item a:hover .Jpoimg{background:#c4b296} #listenJ_area .lissevJ .item a:hover p{color:#c4b296} #listenJ_area .lissevJ .item .Jpoimg{background:#0e0e0e;border-radius:6666px;display:flex;flex-direction:column;align-items:center;width:min(150px ,95%);aspect-ratio:1/1;justify-content:center;margin-bottom:10px} #listenJ_area .lissevJ .item .Jpoimg img{width:50%} /*ganJJ_area*/ #ganJJ_area{padding:86px 0 26px;z-index:1} #ganJJ_area:before{content:"";position:absolute;width:10%;bottom:0;height:200px;background:#f4f4f4} #ganJJ_area .workframe{display:flex;padding:100px 0} #ganJJ_area .workframe:before{content:"";position:absolute;left:0;top:0;width:1px;height:697px;background:var(--secondary)} #ganJJ_area .workframe:after{content:"";position:absolute;left:0;top:0;width:107%;height:1px;background:var(--secondary)} #ganJJ_area .workframe .ganJJleftbox{width:46%;padding:50px 0px 50px 80px} #ganJJ_area .workframe .ganJJleftbox:before{content:"";width:0;height:0;border-style:solid;border-width:80px 80px 0 0;border-color:#319ad4 transparent transparent;position:absolute;top:-100px;left:0} #ganJJ_area .ganJJtitle h3{font-size:max(2.2*(1vw + 1vh) / 2,24px)} #ganJJ_area .ganJJinfo p{overflow:hidden;margin:50px 0;height:101px;width:84%;text-align:center;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;font-size:18px} #ganJJ_area .workframe .ganJJrightbox{position:absolute;width:82%;right:-32%} #ganJJ_area .workframe .ganJJrightbox:before{content:"";position:absolute;width:563px;aspect-ratio:563/694;background:url(/images/40/poomimg.jpg);top:-100px;right:39%;background-size:contain;z-index:0;background-repeat:no-repeat} #ganJJ_area .popolist .item{} #ganJJ_area .popolist .item p{padding:10px 10px;background:var(--secondary);text-align:center;color:#ffffff;border-radius:0px 0px 15px 15px;opacity:0;font-size:max(1.5*(1vw + 1vh) / 2,18px)} #ganJJ_area .popolist .item.slick-current p{opacity:1} /*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:#ffffff;font-size:max(2*(1vw + 1vh) / 2,23px);font-weight:300} #solgon_area .pomtext p{color:#ffffff;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:white} /* product_area */ .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:white} #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:#555555 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:0.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{} #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 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out} #newsBox .info .news_list li:hover{background:#ffffff} #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:white} #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{aspect-ratio: 384/470;} #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:before,#book_area .list_box .img_box:after{position:absolute;width:100%;height:100%;background:#ffffff59;z-index:9;opacity: 0;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: 0 10px;max-width:calc(80% - 40px);height:34px;line-height:36px;font-size:max(1.4*(1vw + 1vh) / 2,16px);font-size: 18px;opacity: 0;} /*fakeNumber*/ #countJJ_area{position: relative;width: 100%;display: flex;flex-direction: column;align-items: center;background: url(/images/40/indexcount_bg.jpg);padding: 110px 0;} #countJJ_area:before{content:"";position: absolute;background: url(/images/40/counnJtext.png);width: 69px;aspect-ratio: 23/103;background-size: cover;right: 11.3vw;top: -60px;} #fakeNumber{width: min(500px , 100%);display:grid;grid-template-columns: repeat(3,1fr);position: relative;margin-top: 40px;} #fakeNumber .statisticsItem{height: 121px;overflow:hidden;padding: 0 0;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;} #fakeNumber .statisticsItem .numberBox{font-size:0;font-weight:700;font-family:"Roboto","Noto Sans TC",sans-serif;letter-spacing:0;margin-bottom: 7px;display: flex;align-items: flex-end;flex-wrap: wrap;} #fakeNumber .statisticsItem .numberBox .number{font-size: max(3.2 * (1vw + 1vh) / 2, 37px);line-height:0.8;background: #ffffff;background-clip:text;-webkit-background-clip:text;color:transparent;font-weight: 500;line-height: 100%;font-family: 'Noto Sans TC';} #fakeNumber .statisticsItem .numberBox .unit{display:inline-block;font-size: max(1.2* (1vw + 1vh) / 2, 15px);line-height:1;margin-left:5px;background: #ffffff;background-clip:text;-webkit-background-clip:text;color:transparent;font-weight: 500;font-family: 'Noto Sans TC';} #fakeNumber .statisticsItem .numberBox .tt{font-size: max(2* (1vw + 1vh) / 2, 24px);vertical-align: bottom;margin-left: 7px;font-weight: 500;line-height: 100%;} #fakeNumber .statisticsItem .title{letter-spacing:0.5px;font-size: max(1.2 * (1vw + 1vh) / 2, 16px);font-weight: 400;color: #ffffff;width: 100%;} #countJJ_area .couunJtitle{display:flex;flex-direction:column;align-items:center} #countJJ_area .couunJtitle .takletitle{font-size: max(2.1*(1vw + 1vh) / 2,22px);color:#ffffff;font-weight:400} #countJJ_area .couunJtitle p{font-size: max(1.3*(1vw + 1vh) / 2,15px);color:#ffffff;font-weight:300} /*procss_area*/ #procss_area{position: relative;z-index: 8;background: url(/images/40/pocess_bg.jpg);padding: 120px 0 90px;background-size: cover;} #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(8,1fr);margin-bottom:60px;margin-top:105px;gap:20px} #procss_area .culistJJpocs:before{content:"";position:absolute;width:165vw;height:1px;background:#dadada;left:-17vw;top:89px;z-index:-1} #procss_area .culistJJpocs .rowJJ{display:flex;flex-direction:column;align-items:center} #procss_area .culistJJpocs .rowJJ:hover .cunumber,#procss_area .culistJJpocs .rowJJ:hover .cutitle{color:#c4b296} #procss_area .culistJJpocs .cunumber{font-size:max(3*(1vw + 1vh) / 2,41px);font-weight:700;font-family:Playfair;line-height:100%} #procss_area .culistJJpocs .rowJJ .cuimg{width:25px;border-radius:666px;background:#dadada;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center} #procss_area .culistJJpocs .rowJJ .minJJhight{min-height: 90px;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: 78px;background: #c4b296;} #procss_area .culistJJpocs .rowJJ .cuinfo{font-size: 15px;} #procss_area .culistJJpocs .rowJJ .cutitle{font-size: max(1.4*(1vw + 1vh) / 2,19px);font-family: 'Noto Sans TC';font-weight: 500;} #procss_area .btnBox{ display: flex; flex-direction: column; align-items: center; } /* 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 0px;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:aliceblue;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;padding: 160px 0 200px;} #book_area .title_box{width: 45%;margin-left:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center} #book_area .title_box .JJtitle:before{content:"";position: absolute;width: 65vw;height: 1px;background: rgb(188 188 188 / 47%);bottom: -40px;left: -14vw;} #book_area .title_box .JJtitle:after{content:"";position: absolute;width: 1px;height: 105vw;background: rgb(188 188 188 / 47%);bottom: -80vw;left: -6vw;z-index: 0;} #book_area .cootext{margin: 75px 0 67px;font-weight:300} #book_area .cootext .bookcaseJ{font-size: max(1.7*(1vw + 1vh) / 2, 18px);font-weight: 400;} #book_area .list_box{position:relative;width: 55%;right: 0%;} #book_area .list_box:before{content:"";position: absolute;width: 20vw;aspect-ratio: 1/1;background: #f4f4f4;right: -4vw;bottom: -4vw;} @media screen and (min-width: 1281px) { #book_area .list_box li:hover .badge{background:var(--primary);color:var(--white);opacity: 1;} #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 ,.mbshow {display: none!important;} } @media screen and (max-width: 1470px) { #about_area .maJinfoo .tctextbox:before{height:140px;top:-140px} #about_area .maJinfoo{top: -30px;} .coo_bJ img{height: 85px;width: 100%;object-fit: cover;} #procss_area .culistJJpocs{margin-bottom: 57px;margin-top: 76px;} #procss_area .culistJJpocs:before{top: 78px;} #procss_area .culistJJpocs .rowJJ .cuimg{width: 19px;} #procss_area .culistJJpocs .rowJJ .cuinfo{font-size: 14px;} #procss_area .workframe{width: min(1280px , 95%);} #about_area .maJimg{width: 42%;display: flex;flex-direction: column;align-items: center;} #about_area{height: auto;padding: 30px 0 30px;} #about_area:before{top:141px} #about_area .maJimg img{box-shadow: 11px 13px 0px #efefef;width: 460px;margin: 0 auto;} #ganJJ_area{padding:20px 0 20px} #ganJJ_area .workframe .ganJJrightbox:before{width:45%;top:-47px;right:41%} #ganJJ_area .workframe{padding:50px 0 20px} #ganJJ_area .workframe .ganJJleftbox:before{top:-50px;border-width:60px 60px 0 0} .maJfixbg{height:390px} .mamatitle .rightm span{width:190px} #solgon_area{padding:20px 0} #book_area .puobox{padding: 130px 0 150px;} #book_area:after{left:-598px;background-size:70%;background-position:50%} #book_area .list_box{right: -5%;width: 61%;} #custom_box .cumimgbox img{width:80px} .mamatitle .rightm img{width:45px} #countJJ_area:before{top: -30px;width: 55px;} #countJJ_area{padding: 80px 0;} } @media screen and (max-width: 1280px) { #ganJJ_area{padding:10px 0 0px} #custom_box ul li{position:relative;display:flex;flex-direction:column;width:33.3%} #book_area .puobox{display:flex;flex-direction:column;padding: 90px 0 100px;} #ganJJ_area .workframe .ganJJleftbox{padding:10px 0px 20px 80px} #book_area .title_box{width:100%} #book_area .list_box{right:0;width:100%} #book_area .list_box img{height:310px} #book_area .title_box .JJtitle:before{width: 105vw;} #book_area .list_box:before{display:none;} #countJJ_area:before{right: 9vw;} #procss_area .culistJJpocs{grid-template-columns: repeat(4, 1fr);} #procss_area .workframe{width: 85%;} #countJJ_area{padding: 100px 40px;} #fakeNumber .statisticsItem{height: auto;} #listenJ_area .lissevJ{grid-template-columns: 23% 23% 23% 23%;} } @media screen and (max-width: 1024px) { .JJtitle .tmmtitle{display: flex;flex-direction: column;align-items: flex-start;gap: 0;} .JJtitle .tmmtitle .aJJtan{font-size: 22px;font-weight: 500;display:flex;align-items:center;gap:10px;padding-left:20px;margin-top:0} #procss_area{padding:100px 0 90px} .JJtitle .tmmtitle .aJJtan:before{content:"";position: absolute;.: 50px;display: flex;width: 70px;height: 1px;background: #979797;left: -70px;} .coo_bJ , #listenJ_area:after , #book_area .title_box .JJtitle:after , #book_area .title_box .JJtitle:before, #countJJ_area:before{display: none;} #about_area .maJinfoo .tctextbox:before{top:-85px;height:85px} #about_area .maJinfoo .tctextbox:after{width:85px} #about_area:before{top:84px} #about_area .maJimg{width:40%} #ganJJ_area .workframe .ganJJleftbox{padding:10px 0px 20px 20px} #about_area .maJinfoo .tctextbox{width:58%} #about_area .maJinfoo{top: 0;} #listenJ_area .listenimg{width: 100%;} #listenJ_area .listenservice{width: 90%;} #listenJ_area:before{height: 330px;} #listenJ_area .lissevJ:before{display: none;} #listenJ_area .lissevJ{width: 100%;} .arrow_btns_box.lee{left:44%} #ganJJ_area .workframe{padding:50px 0 60px} #about_area{height: auto;padding: 50px 0;} .arrowbox{margin-left:0} .mamatitle .leftm span{margin:0 7px} .Japtab{margin-top:20px} #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} #book_area .cootext{margin: 60px 0;} #procss_area .culistJJpocs{grid-template-columns: repeat(3, 1fr);} #procss_area .culistJJpocs:before{display:none;} } @media screen and (max-width: 768px) { .mb-box{display:flex;flex-direction:column;width:100%;margin-top:50px} #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} #ganJJ_area:before{display:none} #fakeNumber{display:flex;margin-top:30px;justify-content: center;gap: 20px;} #fakeNumber .statisticsItem{border:0;margin-top:51px} #about_area .maJinfoo{display: flex;flex-direction: column;gap: 50px;} #about_area .maJimg{width: min(500px , 100%);animation: unset;order: -1;} #about_area .maJinfoo .tctextbox{width: 90%;} section .btnBox{display: flex;flex-direction: column;align-items: center;width: 100%;} #listenJ_area .listenimg .listen_bg:before{display:none;} #listenJ_area .listenimg{display: flex;flex-direction: column;align-items: center;} #listenJ_area .listeninfo{width: min(500px , 85%);margin-left: 0;margin: 0 auto;} #listenJ_area .lintext h1{border-left: none;} #listenJ_area .lintext h1:before{content:"";position: absolute;width: 1px;height: 100px;background: aliceblue;top: -50px;left: 48%;} .pcshow{display:none;} #book_area .cootext{margin: 20px 0 40px;} #book_area .list_box li{margin: 45px 0 0;} #book_area .puobox{padding: 90px 0 80px;} #procss_area .JJtitle{display: flex;align-items: flex-start;} #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;} footer .tit{margin-bottom: 30px;} } @media screen and (max-width: 640px) { #ganJJ_area .workframe{display:flex;flex-direction:column} #ganJJ_area .workframe .ganJJrightbox:before{display:none} #ganJJ_area .workframe .ganJJleftbox{width:100%} #ganJJ_area .workframe .ganJJrightbox{width:89%;right:0;position:relative;margin:0 auto} .arrow_btns_box.lee{left:auto;right:-4%} #about_area .maJimg{position:relative;top:0;width:90%;margin-bottom: 20px;} #about_area .maJinfoo{width:100%;gap: 40px;} #about_area .maJinfoo .tctextbox{width:90%;margin:15px auto} #about_area{display:flex;flex-direction:column;height:auto;background-position: 50%;} #book_area .list_box img{height: auto;aspect-ratio: 6/8;} #procss_area .culistJJpocs{grid-template-columns: repeat(2, 1fr);} #about_area .JJtitle .cnlittle{font-size: 15px;} #about_area .maJinfoo .tctextbox .tminfo p{margin:40px 0 60px;font-size:16px;height:152px;-webkit-line-clamp:5;width:100%;line-height:180%} #custom_box ul li{width:50%} #ganJJ_area .workframe .ganJJleftbox:before{border-width:40px 40px 0 0} #about_area:before,#about_area:after,#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} #listenJ_area .listenimg .listen_bg img{height: 450px;} #listenJ_area .listenservice{margin: 60px auto 20px;} #listenJ_area .lissevJ{margin-left: 0;grid-template-columns: 48% 48%;gap: 6% 1%;} #newsBox .info .news_list li{grid-template-columns:104px 1fr} #newsBox .mmtmore{position:relative;right:auto;top:auto} #ganJJ_area .workframe:before{height:100%} #ganJJ_area .ganJJinfo p{width:100%} } @media screen and (max-width: 550px) { .arrow_btns_box{top:-74px} .arrow_btns_box.ree{left:auto;right:50px} .arrow_btns_box.lee{right:-15px} #ganJJ_area .popolist .item img{height:300px;object-fit:cover} #ganJJ_area .popolist .item{margin-top:20px} } @media screen and (max-width: 480px) { .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} #product_area .bgBox{width:100%;object-fit:cover} #custom_box ul li{width:100%} .mainfobox{padding:67px 0} footer .mmanav{display:flex;justify-content:flex-start;margin: 0;gap: 10px 10px;} footer #f_info{padding-left:0rem !important;padding-right:0rem !important;padding-top:0px} footer #flogo img{width: 293px;margin:18px 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%} #about_area .maJimg img{box-shadow: unset;} }