#cookie-consent {position: fixed;width: 80%;background-color: #f0f0f0;padding: 10px 10%;text-align: center;bottom: 0;left: 0;z-index: 99999;align-items: center;grid-template-columns: 1fr 150px;} #cookie-consent p {text-align: left;} #cookie-consent button {background-color: var(--primary);color: #fff;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;} #cookie-consent button:hover {background-color: var(--secondary);} /* section */ section{padding: 7vw 0;} section >*{z-index:5} section .title_box .page_title, .productArea .productBox .productItem .toptitle b{font-weight: 600;font-size: 1.6rem;letter-spacing: 3px;position: relative;line-height: 140%;display: flex;align-items: center;gap: 10px;opacity: 1;} section .title_box .page_title span{content:'';display:block;width:32px;height: 4px;background: var(--complement);transform: rotate(-60deg);} section .title_box .subtitle{color: var(--triadic1);font-family:"Outfit",sans-serif;font-size: 3.5rem;font-weight: 600;line-height: 1.03;padding-bottom: 15px;} section .title_box .subtitle::first-letter {color:var(--complement);} section.bg_box{background:no-repeat 50% / cover;} section .title_box {-webkit-animation: clipPathAni 0.8s ease-in-out 0.3s both;animation: clipPathAni 0.8s ease-in-out 0.3s 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); } } .more_btn{background:linear-gradient(to right,#0a667a,#078ba8);color:var(--white);padding:12px 40px 12px 20px;position:relative;border-radius:80px;width:120px;margin-top:0px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center} .more_btn:before{content:"";height:100%;width:0;display:block;position:absolute;bottom:0;left:0px;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;background-color: var(--complement);} .more_btn:hover:before{width:100%;} .more_btn a{position:relative;overflow:hidden;width: 120px;padding: 12px 50px 12px 30px;display:inline-block;border-radius: 100px;} .more_btn font{font-size: 16px;position:relative;color:#fff;font-family: "Outfit", sans-serif;text-align: left;font-weight: 400;letter-spacing: 1px;text-align: center;} .more_btn b{position:absolute;top:50%;right:-10px} .more_btn b::before{content:"";position:absolute;top:calc(50% - 5px);right: 45px;width:10px;height:10px;border-top: 1px solid #fff;border-right: 1px solid #fff;transform:rotate(45deg);opacity: .5;} .more_btn b::after{content:"";position:absolute;top:calc(50% - 5px);right: 39px;width:10px;height:10px;border-top: 1px solid #fff;border-right: 1px solid #fff;transform:rotate(45deg)} /* linkArea */ #Service_area{overflow:hidden;position:relative;padding: 2vw 0 9vw 0;} #Service_area .workframe{width:100%} #Service_area .aboutArea{display:grid;grid-template-columns:1fr 50%;width:100%;align-items:center} #Service_area .aboutLeft{margin-right:-90px} #Service_area .aboutArea .aboutRight{background-color:#e9e9e9;padding: 70px 70px 130px;position:relative;overflow:hidden} #Service_area .linkArea{background-color:#fff;width:70%;position:absolute;right:0;bottom: -150px;} #Service_area .linkList{padding: 40px 30px;} #Service_area .linkList li{position:relative;height: 190px;padding: 10px 20px;} #Service_area .linkList li:after{content:'';position:absolute;right: 0px;top:0;width:1px;height:100%;background:#dbdbdb;opacity:.6} #Service_area .linkList li:last-child:after{display:none} #Service_area .linkList li .noBox{position:absolute;color:#122f6f;opacity:.2;font-size:35px;top:50%;right:0;transform:translate(-50%,-50%);width:37px} #Service_area .linkList li .Img img{aspect-ratio:1 / 1;width:65px;object-fit:contain} #Service_area .linkList li .Txt{margin-top:20px} #Service_area .linkList li .Txt h2{color:var(--triadic2);font-size: 22px;line-height: 130%;margin-bottom: 10px;} #Service_area .linkList li .Txt p{color:#9196a2;font-size: 16px;} /* news_area */ #news_area{padding: 4vw 0 0vw 0;position:relative} #news_area:before{position:absolute;display:block;top:0;content:"";background-image:url(/images/39/img_news_BG.png);background-repeat:no-repeat;background-size:cover;z-index:1;height:100%;width:100%;left:0} #news_area .right .list_box{margin-bottom:40px} #news_area .right .right_box{ position: relative; } #news_area #imglist{display:grid;grid-template-columns:44% 46%;gap:80px;width:100%;align-items:end;} #news_area li .item .Txt {font-size: 1.3rem;letter-spacing:1px;-webkit-line-clamp: 1;height:auto;font-weight: 500;} #news_area .left .img_box{position:relative} #news_area .left .img_box:after{position:absolute;right:-70px;top:-70px;content:"";width:36%;height:35%;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);background-color:var(--triadic1);z-index:-1;border-radius:80px 20px 0px 20px} #news_area .left .img_box li{border-radius:50px;position:relative;margin:10px} #news_area .left .img_box li .leftItem{display:grid;gap:0px;border-radius:50px;overflow:hidden} #news_area .left .img_box li .img_scale img{aspect-ratio:4 / 3;width:100%;height:100%} #news_area .left .img_box li .item{padding:50px 30px;gap:20px;display:flex;flex-direction:column;justify-content:space-between;position:absolute;width:calc(100% - 80px);bottom:0px;left:50%;transform:translate(-50%,0%);padding:80px 40px 40px;background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0 0 0 / 80%));} #news_area .left .img_box li .item *{color:#fff} #news_area .left .img_box li .item{display:grid;grid-template-columns:60px 1fr;gap:20px} #news_area .left .img_box li .item .time{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Outfit",sans-serif;font-size:1.4rem} #news_area .left .img_box li .item .info_box .Ntxt{color: #fff;padding: 2px 18px;background: rgb(255 255 255 / 15%);margin-bottom: 10px;} #news_area .left .img_box li .item .time b{font-size: 50px;font-weight:400;line-height:90%;font-family: "Outfit", sans-serif;} #news_area .right{position:relative} #news_area .right .img_nav li .item .Txt{-webkit-line-clamp:1;height:auto;font-size: 1.3rem;letter-spacing: 1px;} #news_area .right .img_nav li:hover .item .Txt{color:var(--black)} #news_area .right .img_nav li .row{padding:0 15px} #news_area .right .img_nav li .rightItem:before{content:'';width:0;height:1px;position:absolute;background: linear-gradient(to right,var(--triadic2),var(--primary));bottom:0;left:0;opacity:0} #news_area .right .img_nav li:hover:before{opacity:1;width:100%} #news_area .right .img_nav li .rightItem{display: flex;align-items: flex-start;flex-direction: column;border-bottom: 1px solid rgb(5 59 71 / 20%);padding: 20px 0;position: relative;margin-bottom: 11px;} #news_area .right .img_nav li .info_box{display:flex;align-items:center;gap:20px;margin-bottom:10px} #news_area .right .img_nav li .info_box .Ntxt{background: var(--complement);color:#fff;padding:2px 18px;} #news_area .right .img_nav li .info_box .time{font-weight: 500;font-size: 1rem;color: var(--primary);letter-spacing:.5px;font-family: "Outfit", sans-serif;} #news_area .right .img_nav li .info_box .time b{font-size:60px;line-height:140%;font-weight:500;color:var(--triadic1);font-family:'Lato',sans-serif} #news_area .newsImgbg{position:absolute;top:0px;left:0} #news_area .newsImgbg_1,#news_area .newsImgbg_2{position:absolute;top: 200px;left: -140px;z-index: 0;} #news_area .newsImgbg_2{right: 10px;left: auto;top: 100px;} .newsbtn,.bookbtn{display:flex;justify-content:space-between;align-items:center;position:absolute;top: 50%;right: -100px;flex-direction: row;transform: rotate(90deg);} #news_prev,#book_prev{-webkit-transform:scaleX(-1);transform:scaleX(-1);position:relative} #news_prev,#news_next,#book_prev,#book_next{border-radius:150px;margin: 0 7px;} #news_prev svg,#news_next svg,#book_prev svg,#book_next svg{width: 20px;height: 20px;fill: var(--primary);background-color: var(--white);border-radius:150px;padding: 12px;border-style: solid;display: flex;justify-content: center;align-items: center;flex-direction: row;flex-wrap: nowrap;} #news_next svg,#book_next svg{background-color: var(--primary);fill:var(--white)} /* services_area */ #services_area{padding: 2vw 0px 7vw 0;} #services_area .workframe::before{content:"";background-image:url(/images/39/img-ad-bg.jpg);background-repeat:no-repeat;background-position:50% 50%;position:absolute;width:1500px;height:780px;top: 56%;left:50%;transform:translate(-50%,-50%);z-index:-2} #services_area::after{content:"";width:1100px;height:1100px;display:block;background-image:url(/images/39/img-ad-01.png);background-size:auto;background-repeat:no-repeat;background-position:100% 100%;overflow:hidden;position:absolute;bottom:-480px;right:-490px;z-index:-2} #services_area::before{content:"";width:1522px;height:1788px;display:block;background-image:url(/images/39/img-ad-02.png);background-size:auto;background-repeat:no-repeat;background-position:100% 100%;overflow:hidden;position:absolute;top:-90px;left:-800px;z-index:-1} #services_area .title_box{margin-bottom:60px;position:relative} #services_area .title_box::after{content:"";width:148px;height:99px;display:block;background-image:url(/images/39/img-ad-03.png);background-size:auto;background-repeat:no-repeat;background-position:100% 100%;overflow:hidden;position:absolute;top:0;left:60px;z-index:-1;animation-name:people;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:2s} #services_area .title_box::before{content:"";width:102px;height:114px;display:block;background-image:url(/images/39/img-ad-04.png);background-size:auto;background-repeat:no-repeat;background-position:100% 100%;overflow:hidden;position:absolute;top:0;right:270px;z-index:-1;animation-name:people;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:2s} @keyframes people{0%{transform-origin:right bottom;transform:rotate(-3deg)} 100%{transform-origin:right bottom;transform:rotate(3deg)} } #services_area .title_box .page_title{display:flex;justify-content:center} #services_area .title_box .subtitle{word-spacing:normal;text-align:center} #services_area .title_box .page_title{text-align:center} #services_area .services{margin:30px 0 0} #services_area .servicesList{padding:20px 10px 0;height:480px} #services_area .servicesList li *{-webkit-transition:all 1s;transition:all 1s} #services_area .servicesList li{margin:10px 10px;padding:20px 0px} #services_area .servicesList li:nth-of-type(2n) .item{padding-top:0px} #services_area .servicesList li.odd:nth-of-type(2n + 1) .item{padding-top:0px} #services_area .servicesList li:nth-of-type(2n) .item{padding-top:112px} #services_area .servicesList li.odd:nth-of-type(2n) .item{padding-top:112px} #services_area .servicesList li .item{padding-top:112px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center} #services_area .servicesList li .item .Img{border-radius:999px;border:3px solid var(--triadic1);padding:10px;position:relative} #services_area .servicesList li .item .Img a{display:-webkit-box;display:-ms-flexbox;display:flex} #services_area .servicesList li .item .Img .circle{position:absolute;width:340px;left:50%;top:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);pointer-events:none;justify-content:center;align-items:center} #services_area .servicesList li .item .Img .circle img{width:240px;height:240px} #services_area .servicesList li .item .Img .circle img{-webkit-transform-origin:center;transform-origin:center;-webkit-animation:r1 7s linear infinite;animation:r1 7s linear infinite} @-webkit-keyframes r1{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)} to{-webkit-transform:rotate(360deg);transform:rotate(360deg)} } @keyframes r1{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)} to{-webkit-transform:rotate(360deg);transform:rotate(360deg)} } #services_area .servicesList li .item .Img img{border-radius:99999px;width:200px;height:200px;aspect-ratio:1 / 1} #services_area .servicesList li .item .Img::after{content:"";width:calc(100% - 20px);height:calc(100% - 20px);background-color:rgba(0,0,0,0.4);position:absolute;left:10px;top:10px;border-radius:999px;opacity:0;pointer-events:none} #services_area .servicesList li .item .Img p{opacity:0;position:absolute;z-index:3;left:50%;top:0%;width:100%;padding:0 16px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:18px;color:#fff;letter-spacing:1px;text-align:center} #services_area .servicesList .item .textBox{margin-top:26px} #services_area .servicesList .item .textBox{font-size:1.2rem;color:#343434;letter-spacing:1px;font-weight:500} /* productArea */ .productArea .productBox *{transition:unset;-webkit-transition:unset} .productArea .workframe{width:60%} .productArea{padding:100px 0 80px;position:relative;z-index:1} .productArea .titleBox{text-align:center;margin-bottom:40px} .productArea .titleBox .title{color:#001e2d} .productArea .titleBox .separate{margin:50px auto 0} .productArea .productBox .productItem{border-radius:60px 10px 60px 10px} .productArea .productBox .productItem .toptitle{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;gap:0} .productArea .productBox .productItem .toptitle span{color:rgba(0,0,0,0);background:linear-gradient(to right,#0a667a,#078ba8);-webkit-background-clip:text;background-clip:text;font-family:"Outfit",sans-serif;font-size:9.5rem;font-weight:500;line-height:120%} .productArea .productBox .productItem.swiper-slide-active>.item{opacity:1} .productArea .productBox .productItem.swiper-slide-next>.item,.productArea .productBox .productItem.swiper-slide-prev>.item{opacity:0} .productArea .productBox .productItem.swiper-slide-next .toptitle b,.productArea .productBox .productItem.swiper-slide-prev .toptitle b{opacity:0} .productArea .productBox .productItem.swiper-slide-next .toptitle span,.productArea .productBox .productItem.swiper-slide-prev .toptitle span{opacity:.5;background:linear-gradient(to right,#cad5de,#cad5de);color:rgba(0,0,0,0);-webkit-background-clip:text;background-clip:text} .productArea .productBox .productItem.swiper-slide-active .toptitle span{opacity: 1;} .productArea .productBox .productItem .toptitle b{font-size:1.4rem} .productArea .productBox .productItem>.item{width:100%;max-width:50vw;height:370px;background:#fff;border-radius:80px 40px;box-shadow:0 3px 32px rgba(43,111,154,.2);padding:60px 100px 30px 100px;opacity:0;margin:0 auto;transition:all .5s;transition-delay:0s;transition-timing-function:ease-in-out} .productArea .productBox .productItem>.item .topBox{margin-bottom:40px;display:flex;justify-content:flex-start;align-items:center;flex-direction:row;flex-wrap:nowrap} .productArea .productBox .productItem>.item .topBox .Img{width:150px;border-radius:50%;flex-shrink:0;overflow:hidden;border-style:solid;border-color:#ffffff;border-width:5px;box-shadow:0 2px 32px rgba(43,111,154,.2)} .productArea .productBox .productItem>.item .topBox .Img img{width:100%;height:100%;aspect-ratio:1 /1;display:block;backface-visibility:hidden} .productArea .productBox .productItem>.item .topBox .Txt{width:100%;margin-left:60px} .productArea .productBox .productItem>.item .topBox .Txt .decoTitle{margin-bottom:20px;font-size:1.8rem;font-weight:500;line-height:calc(20/20);letter-spacing:calc(20*60/1000*1px)} .productArea .productBox .productItem>.item .topBox .Txt .textBox{padding-left:20px;border-left:solid 5px #3fb5c4;display:flex;justify-content:space-between;align-items:center;flex-direction:row;flex-wrap:nowrap} .productArea .productBox .productItem>.item .topBox .Txt .textBox .adapt{} .productArea .productBox .productItem>.item .topBox .Txt .textBox .adapt p{color:#2b5077;font-size:17px;font-weight:400;line-height:calc(17/17);letter-spacing:calc(17*5/1000*1px);font-family:Arial,"Noto Sans TC","Microsoft JhengHei",sans-serif} .productArea .productBox .productItem>.item .topBox .Txt .textBox .btnBox{width:100%;max-width:200px} .productArea .productBox .swiper-pagination{bottom:-50px;} .productArea .productBox .swiper-pagination .swiper-pagination-bullet{background:#c5c5c5;opacity:1;margin:0 16px;position:relative;z-index:1;transition:all .5s;transition-delay:0s;transition-timing-function:ease-in-out} .productArea .productBox .swiper-pagination .swiper-pagination-bullet::before{content:"";position:absolute;width:100%;height:100%;border-radius:50%;opacity:0;border-style:solid;border-color:var(--primary);border-width:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;transition:all .5s;transition-delay:0s;transition-timing-function:ease-in-out} .productArea .productBox .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:rgba(0,0,0,0)} .productArea .productBox .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before{opacity:1} .productArea .productBox .swiper-button-prev, .productArea .productBox .swiper-button-next, #services_area .swiper-button-prev, #services_area .swiper-button-next{width: 50px;height: 50px;border-radius:50%;border-style:solid;border-color:#deecf3;border-width:8px;display:flex;justify-content:center;align-items:center;flex-direction:row;flex-wrap:nowrap;background:var(--white)} .productArea .productBox .swiper-button-prev:hover,.productArea .productBox .swiper-button-next:hover{background:var(--primary)} .productArea .productBox .swiper-button-prev:hover::before,.productArea .productBox .swiper-button-next:hover::before{border-color:#fff #fff rgba(0,0,0,0) rgba(0,0,0,0)} .productArea .productBox .swiper-button-prev::before, .productArea .productBox .swiper-button-next::before , #services_area .swiper-button-prev::before, #services_area .swiper-button-next::before{content:"";position:absolute;margin-left:-5px;width:12px;height:12px;border-style:solid;border-width:2px;border-color:#00758e #007790 rgba(0,0,0,0) rgba(0,0,0,0);transform:rotate(45deg)} .productArea .productBox .swiper-button-prev::after, .productArea .productBox .swiper-button-next::after , #services_area .swiper-button-prev::after, #services_area .swiper-button-next::after{content:""} .productArea .productBox .swiper-button-prev{left:36px;top:110px} .productArea .productBox .swiper-button-prev::before, #services_area .swiper-button-prev::before{margin:0 0 0 5px;transform:rotate(-45deg) scaleX(-1)} .productArea .productBox .swiper-button-next{right:36px;top:110px} .productArea .productBox .swiper-button-next span{position:absolute;top:50%;left:unset;right:-50px;transform:translate(0,-50%);z-index:1} .productArea .bg{background:url("/images/39/img-p-bg.png") no-repeat top center;background-position:50% 93%;background-size:contain;overflow:hidden;width:100%;height:100%;position:absolute;top:0;left:0;z-index:-999;pointer-events:none} .productArea .more_btn{margin:auto;width:120px;margin-top:90px} .productImg_1,.productImg_2{position:absolute} .productImg_1{top:520px;right:-50px} .productImg_2{left:-30px;top:200px} .parallax{will-change:transform} /* about_area */ #wrap{position:relative} #about_area{padding:6vw 0 9vw 0;position:relative} #about_area::after{content:"";display:block;position:absolute;background-image:url(/images/39/img-ab-bg.png);background-repeat:no-repeat;background-size:cover;background-position:center;height:100%;width:100%;bottom:0;right:0;z-index:-1} #about_area .title_box .subtitle:before{background:var(--white)} #about_area .areaTitle .title_box .pageh1{margin-top: 20px;line-height: 150%;width: min(90% , 340px);} #about_area .areaTitle .title_box p{font-size:16px;line-height:210%;position:relative;padding: 0 0 20px 0;margin:20px 0;width: min(90%,310px);text-align: justify;} #about_area .aboutArea .about_icon{display:grid;position:relative;grid-template-columns:repeat(2,1fr);gap:20px 0px;padding-bottom:40px;width:min(500px,100%)} #about_area .aboutArea .about_icon >div{display:flex;flex-direction:column;align-items:center} #about_area .aboutArea .about_icon >div img{aspect-ratio:1 / 1;object-fit:contain;width:70px} #about_area .aboutArea .about_icon >div p{text-align:center;line-height:130%;font-size:16px;color:var(--primary);font-weight:600;padding:0;margin:20px 0 10px} #about_area .aboutArea{align-items:center;display:flex;flex-direction:row;justify-content:center;position:relative;width:100%} #about_area .areaTxt{position:absolute;left:0;z-index:10;width:min(80%,400px)} #about_area .aboutArea .right{position:relative} #about_area .aboutArea .goalsItem{display:grid;grid-template-columns:repeat(7,1fr);width:min(400px,80%);margin:50px 0 0 auto} #about_area .aboutArea .goalsItem .imgBox img{aspect-ratio:1 /1} #about_area .img_item{width:100%} #about_area .solutionsItem{width:100%} #about_area .solutionsItem .imgBox{padding:4%;position:relative;height: 500px;width: 500px;margin:auto} #about_area .solutionsItem .imgBox::before{content:"";display:block;width:100%;height:100%;border-radius:50%;position:absolute;top:0;right:0;z-index:1;background-size:cover;background-image:url(/images/39/img-ab-bg-02.png);-webkit-transform:rotate(180deg);transform:rotate(180deg);animation-name:circle;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:50s} @keyframes circle{0%{transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0)} 100%{transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg)} } #about_area .solutionsItem .imgBox::after{content:"";display:block;width:120%;height:120%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;background-image:url(/images/39/img-ab-bg-03.png);background-size:contain;background-position:center;background-repeat:no-repeat} #about_area .solutionsItem .imgBox .Img{overflow:hidden;border-radius:50%;position:relative;z-index:1;height:100%;width:100%} #about_area .solutionsItem .imgBox .Img img{aspect-ratio:1 /1} #about_area .deck02{position:absolute;bottom:-34%;left:50%;transform:translate(-50%,-50%);z-index:-3;width:80%} #about_area .Txtitem{position:absolute;top:24%;right:-3%;line-height:0;z-index:20} #about_area #fakeNumber{width:440px;display:grid;position:relative;grid-template-columns:repeat(2,1fr)} #about_area #fakeNumber .statisticsItem{height:140px;overflow:hidden;padding:35px 35px 45px 25px;-webkit-box-shadow:0px 6px 15px 0px rgba(0,0,0,0.1);box-shadow:0px 6px 15px 0px rgba(0,0,0,0.1);border-radius:40px} #about_area #fakeNumber .statisticsItem:first-child,#about_area #fakeNumber .statisticsItem:nth-child(2){background-color:rgb(255 255 255 / 90%);color:#3c3c3c} #about_area #fakeNumber .statisticsItem .numberBox .unit{display:inline-block;font-size:19px;line-height:1;margin-left:10px;background:var(--complement);background-clip:text;-webkit-background-clip:text;color:transparent} #about_area #fakeNumber .statisticsItem:nth-child(3){background-color:var(--complement)} #about_area #fakeNumber:before{content:'';width:50%;height:50%;display:block;opacity:0} #about_area #fakeNumber .statisticsItem:nth-child(3) *,#about_area #fakeNumber .statisticsItem:nth-child(3) .numberBox .number span,#about_area #fakeNumber .statisticsItem:nth-child(3) .numberBox .unit{color:var(--white)} .odometer.odometer-auto-theme,.odometer.odometer-auto-theme .odometer-digit,.odometer.odometer-theme-default,.odometer.odometer-theme-default .odometer-digit{font-family:"Helvetica Neue",sans-serif;line-height:1.1em;font-size:70px} .odometer.odometer-auto-theme *,.odometer.odometer-theme-default,#about_area #fakeNumber .statisticsItem .numberBox .number span{font-family:"Helvetica Neue",sans-serif;line-height:1.1em;font-size:70px;font-size:2.8rem;line-height:0.8;letter-spacing:3px;background:var(--complement);background-clip:text;-webkit-background-clip:text;color:transparent} .counter-wrapper,.odometer.odometer-inside span,#about_area #fakeNumber .statisticsItem .numberBox .number span{font-size:2.8rem;line-height:0.8;letter-spacing:3px;background:var(--complement);background-clip:text;-webkit-background-clip:text;color:transparent} .counter-wrapper{display:flex;align-items:baseline} #about_area #fakeNumber .statisticsItem .numberBox .number{font-weight:600;letter-spacing:2px;font-size:2.8rem;line-height:0.8;letter-spacing:3px;background:var(--complement);background-clip:text;-webkit-background-clip:text;color:transparent;font-family:"Outfit",sans-serif} #about_area #fakeNumber .statisticsItem .title{margin-top:20px;font-size:1rem;letter-spacing:1px} #about_area .aboutImgbg_1,#about_area .aboutImgbg_2,#about_area .aboutImgbg_3{position:absolute;top:200px;left:-140px;z-index:0} #about_area .aboutImgbg_2{left:auto;right:300px;top:0px} #about_area .aboutImgbg_3{left:329px;bottom:0px;top:auto} .rwdLinkBox.inner .classBoxRow{margin-top:0} /* book_list */ #book_area .title_box{ position: relative; } #book_area .bookbtn{ right: 0; transform: rotate(0deg); } @media screen and (max-width: 1660px) { #news_area{padding:4vw 0 8vw 0} #about_area .aboutArea .about_icon{grid-template-columns:repeat(2,1fr)} #about_area .deck02 img{width:60%} #about_area .solutionsList .imgBox{height: 520px;width: 520px;} } @media screen and (max-width:1560px){ section .title_box .subtitle{font-size: 3rem;} #about_area .rightBox .sidePeople{width:30%} } @media screen and (max-width:1440px){ #about_area .fixTxt{top:-230px} #about_area .rightBox .topGroup{margin:50px 30px} #about_area .solutionsList .imgBox{height: 430px;width: 430px;} } @media screen and (max-width:1380px){ #about_area{padding: 2vw 0 9vw 0;} #about_area .aboutArea .right{display:flex;align-items:center;gap:140px} #about_area .solutionsList .imgBox{height:430px;width:430px} #about_area .solutionsItem .imgBox{height:480px;width:480px} #about_area .aboutArea{gap:40px;display:flex;flex-direction:column;align-items:center} #about_area .aboutArea .about_icon{grid-template-columns:repeat(4,1fr);width:100%} #about_area .aboutArea .goalsItem{margin:50px auto 0;width:min(520px,100%)} .productArea .wrap{padding:0 120px} .productArea .productBox .productItem>.item{height:auto} .productArea .productBox .productItem>.item .topBox{flex-direction:column;margin-bottom:30px} .productArea .productBox .productItem>.item .topBox .Txt{margin:40px 0 10px 20px} .productArea .productBox .productItem>.item .topBox .Txt .textBox .btnBox{display:none} .productArea .workframe{width:90%} .productArea .productBox .productItem>.item{max-width:none;padding:60px 20px 50px;width:calc(100% - 40px)} .productArea .productBox .productItem .toptitle span{font-size:6.5rem} } @media screen and (min-width:1281px){ .more_btn.white a:hover font{color:#ffffff} .more_btn.white a:hover{width:150px} #services_area .swiper-button-next, #services_area .swiper-button-prev{ display: none!important; } } @media screen and (max-width:1280px){ #about_area .areaTitle .title_box h2{margin-bottom:0} section .title_box{margin-bottom:0px} #about_area .deck02,header .barBox #webmenu,header.scroll .barBox #webmenu{display:none} #about_area .solutionsList .imgBox::before{display:none} #about_area .workframe{width:86%} #about_area .aboutArea .img_item{padding:60px 30px;width:calc(100% - 60px )} #about_area .aboutArea .right{display:flex;align-items:center;gap:20px 80px} #about_area .solutionsItem .imgBox{height:440px;width:440px} #about_area .about_logo{margin:50px auto;width:200px} #news_area{padding:4vw 0 35vw 0} #news_area li .item .Txt{font-size:26px} #news_area .right .img_nav li{margin-bottom:10px} #news_area .left .img_box li .img_scale img{aspect-ratio:4 / 3.2} #services_area .title_box{margin-bottom:40px} #services_area .servicesList{height:100%;padding:0px 10px 0} #services_area .servicesList li .item,#services_area .servicesList li:nth-of-type(2n) .item{padding-top:0} #about_area .areaTitle .title_box p{width: min(90%, 250px);} } @media screen and (max-width: 1200px){ .more_btn a{padding:6px 30px 6px 20px} #imglist .img_nav{position:relative} #news_area::after{width:100%;height:45%} #about_area .Txtitem{position:relative;right:0;top:0;margin:40px 0 0} #about_area .aboutArea{display:flex;flex-direction:column;align-items:center} #about_area #fakeNumber{width:100%;align-items:center;justify-content:center;display:grid;grid-template-columns:repeat(3,1fr);gap:20px} #about_area #fakeNumber .statisticsItem .numberBox .number,.counter-wrapper,.odometer.odometer-inside span,#about_area #fakeNumber .statisticsItem .numberBox .number span{font-size:30px} #about_area #fakeNumber .statisticsItem{padding:25px 10px 30px 13px} #about_area .slogan{right:30px} #about_area .aboutArea .areaTxt{position:relative;width:100%} #about_area .aboutArea .img_item{padding:0;width:calc(100% - 0px)} #about_area .areaTitle .title_box p,#about_area .areaTitle .title_box .pageh1{width:100%} #about_area .solutionsItem .imgBox{padding:0%;height:70vw;width:70vw} #about_area .solutionsList .imgBox{padding:0;height:360px;width:360px} #about_area .aboutArea .about_icon{grid-template-columns:repeat(2,1fr)} #about_area #fakeNumber:before,#about_area .aboutImgbg_1,#about_area .aboutImgbg_2,#about_area .aboutImgbg_3,#about_area .leftBox .Img:before,#about_area .slogan,#about_area .fixTxt img,#services_area .title_box::after,#services_area .title_box::before,#services_area::before,#services_area::after,#news_area .newsImgbg_1,#news_area .newsImgbg_2,.productImgbg_1,.productImgbg_2{display:none} .productArea{padding:40px 0 80px} .productArea .wrap{padding:0 40px} .productArea .productBox .swiper-button-prev{left: -10px;top: 80px;} .productArea .productBox .swiper-button-next{right: -10px;top: 80px;} } @media screen and (max-width:1180px){ } @media screen and (max-width:1024px){ section .title_box .subtitle{font-size:2.6rem;} section .title_box .page_title,#about_area .areaTitle .title_box h2,#about_area .rightBox .topGroup article h3{font-size:1.3rem} section .title_box .page_title span{width:25px} .rwdLinkBox{display:block} #news_area .right{order:1;width: 90%;} #news_area .left{ display: none; } #news_area{padding:3vw 0 5vw 0} #news_area #imglist{display:flex;gap:0;justify-content: flex-start;align-items: center;} #news_area .right .img_nav{order:1;width:100%} #news_area .left .img_box li .item{width:calc(100% - 40px);padding:30px 20px} #news_area .left .img_box li .leftItem{grid-template-columns:1fr} #news_area .left .img_box li .img_scale img{aspect-ratio:4 / 2.7} #news_area .right .img_nav li .item .Txt{font-size:1.2rem} #news_prev svg,#news_next svg{width: 20px;height: 20px;padding: 12px;} } @media screen and (max-width: 960px){ section .titleBox .subtitle{font-size:31px} #news_area{padding: 6vw 0 0 0;} #about_area #fakeNumber{grid-template-columns: repeat(1,1fr);gap: 12px;} #about_area #fakeNumber .statisticsItem{height: auto;padding: 20px 30px;} #about_area #fakeNumber .statisticsItem .title{margin-top: 10px;} .productArea .productBox .productItem .toptitle span{font-size: 4rem;} .productArea .productBox .productItem>.item .topBox .Txt .decoTitle{font-size:1.4rem} .productArea .productBox .productItem.swiper-slide-next .toptitle span, .productArea .productBox .productItem.swiper-slide-prev .toptitle span, .productArea .productBox .productItem .toptitle span{opacity:0} .productArea .bg{background-size:inherit;background-position:50% 105%} } @media screen and (max-width:768px){ #cookie-consent{grid-template-columns:1fr;gap: 10px;} .productArea .productBox .productItem>.item{padding:40px 20px 60px} } @media screen and (min-width:721px){ #services_area .servicesList li .item:hover .Img .circle{width:320px} #services_area .servicesList li.item:hover .Img .circle img{-webkit-transform-origin:center;transform-origin:center;-webkit-animation:r1 6s linear infinite;animation:r1 6s linear infinite;width:300px;height:300px} @-webkit-keyframes r1{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)} to{-webkit-transform:rotate(360deg);transform:rotate(360deg)} }@keyframes r1{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)} to{-webkit-transform:rotate(360deg);transform:rotate(360deg)} } #services_area .servicesList li .item:hover .Img::after,#services_area .servicesList li .item:hover .Img p{opacity:1} #services_area .servicesList li .item:hover .Img p{top:50%} #services_area .servicesList li .item:hover h4{opacity:0} #services_area .servicesList li .item:hover .Img img{width:230px;height:230px} #services_area .servicesList li .item:hover .Img .circle img{width:290px;height:290px} #services_area .servicesList .item:hover .textBox{opacity:0;margin-top:0} } @media screen and (max-width:640px){ .productArea .productBox .productItem>.item .topBox .Txt{margin-left:0px} .productArea .productBox .productItem>.item .topBox .Txt .textBox .adapt p{font-size:14px} #about_area .aboutArea .right{display:flex;flex-direction:column} #about_area{padding: 3vw 0 10vw 0;} #news_area .left .img_box li .item .info_box .time{margin-bottom:0} #news_area li .item .Txt{font-size:17px} .productArea .productBox .swiper-button-prev, .productArea .productBox .swiper-button-next{width: 50px;height: 50px;} .productArea .productBox .swiper-button-prev{left: -10px;top: 60px;} .productArea .productBox .swiper-button-next{right: -10px;top: 60px;} #book_area{ padding: 8vw 0 13vw 0; } .productArea .productBox .productItem .toptitle span{ font-size: 3.4rem; } } @media screen and (max-width:480px){ #services_area .swiper-button-prev, #services_area .swiper-button-next{top: 39%;} #services_area .swiper-button-prev{left: -16px;} #services_area .swiper-button-next{right: -16px;} .newsbtn{right: -78px;} #news_prev svg,#news_next svg{width: 15px;height: 15px;padding: 11px;} .productArea{padding: 40px 0 30px;} .productArea .wrap{padding:0 20px} .productArea .productBox .productItem>.item .topBox .Img{width:140px;height:140px} .productArea .productBox .productItem>.item .topBox .Txt .decoTitle{font-size:18px} .productArea .productBox .productItem>.item .topBox .Txt .textBox .adapt p{font-size:12px} }