/* more */ .btnBox{display:flex;-webkit-box-pack:center;margin-top:40px;width:235px;padding:14px 3px;border:1px solid #a72126;overflow:hidden;position:relative;align-items:center;justify-content:center;background-color:#a72126} .btnBox::before{content:"";display:block;width:100%;height:100%;background-color:#7f1418;position:absolute;top:0;left:-1px;z-index:1;-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out} .btnBox .btn1{position:absolute;width:100%;height:100%;top:0;left:0;z-index: 10;} .btnBox:hover::before{-webkit-transform:translateX(0);transform:translateX(0)} .btnBox:hover p{-webkit-transform:translateX(15px);transform:translateX(15px);color:#fff} .btnBox:hover .btnArrow.arrow1{-webkit-transform:translate(100px,-50%);transform:translate(100px,-50%)} .btnBox:hover .btnArrow.arrow2{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)} .btnBox p{color:#ffffff;-webkit-transform:translateX(-40px);transform:translateX(-40px);-webkit-transition:color 0.3s 0.2s linear,-webkit-transform 0.3s ease-in-out;transition:color 0.3s 0.2s linear,-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out,color 0.3s 0.2s linear;transition:transform 0.3s ease-in-out,color 0.3s 0.2s linear,-webkit-transform 0.3s ease-in-out;position:relative;z-index:2;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:400} .btnBox .btnArrow{position:absolute;top:50%;width:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:30px;z-index:2} .btnBox .btnArrow.arrow1{right:28px;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out} .btnBox .btnArrow.arrow1::before{background-color:#ffffff} .btnBox .btnArrow.arrow1::after{border-right:1px solid #ffffff;border-bottom:1px solid #ffffff} .btnBox .btnArrow.arrow2{left:20px;-webkit-transform:translate(-90px,-50%);transform:translate(-90px,-50%);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out} .btnBox .btnArrow.arrow2::before{background-color:#fff} .btnBox .btnArrow.arrow2::after{border-right:1px solid #fff;border-bottom:1px solid #fff} .btnBox .btnArrow:before,.btnBox .btnArrow:after{content:""} .btnBox .btnArrow::before{width:55px;height:1px;display:block} .btnBox .btnArrow::after{width:9px;height:9px;display:block;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%) rotate(-45deg);transform:translateY(-50%) rotate(-45deg);z-index:1} section{padding:3vw 0} section >*{z-index:3} section .title_box{animation-name:fadeInUp;-webkit-animation-name:fadeInUp} section .title_box font{font-weight:700;font-size:50px;color:var(--complement);position:relative;font-family:'Montserrat',sans-serif;text-transform:uppercase;line-height:130%} section .title_box font::first-letter{color:var(--primary)} section .title_box .page_title{letter-spacing:2.2px;font-size:22px;font-weight:500;line-height:1;color:var(--secondary);position:relative;line-height:130%} section.bg_box{background:no-repeat 50% / cover;background-attachment:fixed} #wrap{position:relative} section .text_stroke{line-height:1;font-weight:700;font-size:15vmin;letter-spacing:10.5px;opacity:.6;z-index:0;right:30%;bottom:-160px;-webkit-text-stroke:0px #000;color:#f3f5f7;-webkit-text-fill-color:#f1f1f1;font-family:'Montserrat',sans-serif} section .textEditor .page_title,#coordinators_area .textEditor .page_title{position:relative} section .textEditor .page_title span{position:absolute;left:-60px;top:-80px} section .textEditor{padding:30px 0 90px;z-index:10;animation-name:fadeInUp;-webkit-animation-name:fadeInUp} section .textEditor .text{font-weight:500;font-size:23px;letter-spacing:0.02em;margin-bottom:10px;line-height:160%;margin-top:8px} section .textEditor .titleA{width:80%;font-size:17px;font-weight:600;letter-spacing:0;color:#3f3f3f;line-height:1.8;margin:30px 0 0} /* serviceArea */ .serviceArea{width:100%;top:0px;z-index:10;margin:0px 0 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out} #headBan{position:relative} .cloudBox{position:absolute;z-index:1;opacity:0;pointer-events:none} /* list_box */ .list_box .info_box h3{font-weight:500;font-size:17px;color:#383838;-webkit-line-clamp:inherit;font-family:var(--font-family),sans-serif} /* information_area */ #information_area{padding:2vw 0 5vw;position:relative} #information_area:before{content:"";-webkit-animation:techBgAni 10s infinite ease-in-out;-moz-animation:techBgAni 10s infinite ease-in-out;animation:techBgAni 10s infinite ease-in-out;background-image:url(/images/39/img-information-bg.jpg);-moz-background-size:cover;background-size:auto;background-position:50% 50%;background-repeat:no-repeat;display:block;width:100%;height:160%;position:absolute;top:calc(50% - 290px);left:calc(50% - 50vw);bottom:auto;right:auto;z-index:-1} @media (max-width:840px){.techArea:before{width:840px;height:500px;left:-webkit-calc(50% - 420px);left:-moz-calc(50% - 420px);left:calc(50% - 420px);top:-webkit-calc(60% - 250px);top:-moz-calc(60% - 250px);top:calc(60% - 250px);opacity:0.8} }@-webkit-keyframes techBgAni{0%{-webkit-transform:scale(1);transform:scale(1)} 50%{-webkit-transform:scale(1.05);transform:scale(1.05)} to{-webkit-transform:scale(1);transform:scale(1)} }@-moz-keyframes techBgAni{0%{-moz-transform:scale(1);transform:scale(1)} 50%{-moz-transform:scale(1.05);transform:scale(1.05)} to{-moz-transform:scale(1);transform:scale(1)} }@keyframes techBgAni{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} 50%{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05)} to{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} }#information_area .workframe{display:flex;align-items:flex-end;margin-right:0;margin-left:auto;width:calc(100% - 250px)} #information_area .workframe .item{width:400px;padding-right:50px;padding-bottom:90px} #information_area .item .title{color:var(--primary);font-size:24px;margin-bottom:20px;padding-bottom:20px;position:relative} #information_area .item .title::after{position:absolute;content:"";width:40px;height:2px;background-color:#afafaf;bottom:0;left:0} #information_area .workframe .information_wrap{width:60%;padding-right:20px} .information_wrap .list_box ul{display:flex} #information_area .title_box{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:40px} #information_area .title_box::after{content:"";width:140px;height:75px;display:block;background-image:url(/images/39/img-information-t.png);background-repeat:no-repeat;position:absolute;top:20px;right:40px;z-index:0} #information_area .title_box p,#information_area .title_box h2,#information_area .title_box h3{text-align:center;position:relative;display:inline-block} #information_area .title_box h2{color:var(--primary);font-weight:600;letter-spacing:1.5px;font-size:22px} #information_area .title_box h3{font-weight:400;font-size:18px;margin-top:10px;margin-bottom:40px} #information_area .title_box p{position:absolute;left:50%;transform:translateX(-50%);top:-60px} #information_area .information_wrap ul li{margin:0 3px;width:calc((100% / 5) - 0px)} #information_area .information_wrap ul li .info_box{top:280px;right:0;z-index:10;width:100%;height:auto;margin:0 0 0 auto;display:flex} #information_area .row .img_box{margin-bottom:10px;display:flex;flex-direction:column;align-items:center} #information_area .row .img_box img{border-radius:50%;padding:20px;width:70%;box-shadow:1px 4px 5px 0px rgb(0 0 0 / 20%);background-color:#fff} #information_area .row .info_box >div{margin:auto;width:calc(100% - 0px)} #information_area .row .info_box h3{font-size:19px;display:inline-block;color:var(--complement);padding:8px 0;line-height:150%;width:100%;text-align:center;font-weight:500;height:auto} #information_area .row .info_box .line{margin:10px 0 20px;width:50px;height:4px;background:#333333;opacity:.7;display:none} #information_area .row .info_box article{height:58px;font-weight:400;font-size:16px;-webkit-line-clamp:2;color:#000;text-align:center} #information_area .row .info_box .price{margin-top:15px;min-height:30px} #information_area .row .info_box .price font{margin-left:20px;font-weight:300} #dataItem{width:55%;transform:translate(50px,10px)} #dataItem .imgitem{padding:10px} #dataItem .imgitem img{width:300px;height:210px} /* aboutArea */ #aboutArea{position:relative;padding:6vw 0 3vw 0} #aboutAreaBox{width:calc(100% - 140px);margin-left:0;margin-right:auto;display:flex;align-items:flex-end} #aboutAreaBox .btnBox{position:absolute;left:-243px;bottom:-20px} #aboutAreaBox .title_box .page_title{font-family:'Montserrat',sans-serif} #imglist img{margin-bottom:20px} #imglist .img_nav img{margin:0 10px 0 0;width:200px;height:200px;object-fit:contain} #aboutAreaBox #rightinfo{width:60%} #aboutAreaBox #rightinfo #imglist img{height:690px;width:100%;object-fit:cover} #aboutAreaBox #rightinfo .Img{width:100%;position:relative;overflow:hidden} #aboutAreaBox #rightinfo .Img video{width:100%;height:100%} #aboutAreaBox #leftinfo{width:36%;background-color:#fff;padding:70px 50px 70px 60px;position:relative} #aboutAreaBox #leftinfo .Txt .intro{color:var(--complement);font-size:26px} #aboutAreaBox #leftinfo .Txt .title{color:var(--secondary);font-size:25px;margin-bottom:40px} #aboutAreaBox #leftinfo .Txt h2{font-size:25px;margin-bottom:15px} #aboutAreaBox #leftinfo .Txt .text{color:#3f3f3f;font-size:16px;font-weight:500;line-height:220%;letter-spacing:0.5px;width:85%} #aboutAreaBox .moreBtn{position:absolute;left:-220px;bottom:-21px} /* news_area */ #news_area{padding:5vw 0 5vw 0} section .itemTitleBox{position:relative;padding-top:20px;padding-bottom:10px} #news_area .itemTitleBox::after{content:"";position:absolute;z-index:-1;width:130%;height:260px;background-image:url(/images/39/img-n-bg.png);background-repeat:no-repeat;background-size:cover;top:0;left:-100px} #news_area section{padding:2vmax 0 2vmax;position:relative} #news_area img.dight{position:absolute;left:150px;z-index:11;min-width:100%;margin-top:0;object-fit:cover;display:none} #news_area{padding:7vmin 0 8vmax;overflow:initial;position:relative;background-image:url(/images/39/img-news-bg.png)} #news_area .title_box{display:flex;flex-direction:column;align-items:flex-start} @-webkit-keyframes iconRotate{ 0%{-webkit-transform:rotate(0);transform:rotate(0)} 100%{-webkit-transform:rotate(15deg);transform:rotate(15deg)} }transform:rotate(5deg)} } #news_area #news_txt{top:2vmax;right:5vmax} #news_area .news_box{margin:0 auto 0;display:flex;flex-direction:column;align-items:flex-start;z-index:21} #news_area .itemTitleBox{display:flex;justify-content:space-between;width:100%} section .title_box,#news_area .tabs_box{animation-name:fadeInUp;-webkit-animation-name:fadeInUp} #news_area .tabs_box{margin-top:30px;display:flex;justify-content:flex-start;flex-direction:column;align-items:center;position:relative} #news_area .tabs_btn{width:100%;z-index:100} #news_area .tabs_box .tabs_btn .newsList{align-items:center;width:600px;position:relative;margin-bottom:20px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;position:absolute;top:50%;left:50%;transform:translate(-33%,100%)} #news_area .tabs_box .tabs_btn .active{border-bottom:1px solid var(--secondary)} #news_area .tabs_box .tabs_btn li:hover::after,#news_area .tabs_box .tabs_btn .active::after{opacity:1;-webkit-transform:translate(0px,-50%);transform:translate(0px,-50%)} #news_area .tabs_box .tabs_btn li:before{content:"";width:1px;height:20px;display:block;position:absolute;top:10px;bottom:0;right:0;background:#ddd} #news_area .tabs_box .tabs_btn li:last-child:before{display:none} #news_area .tabs_box .tabs_body{width:calc(100% - 0px);padding-bottom:20px} #news_area .tabs_box .tabs_body .news_list{display:flex;flex-wrap:wrap;align-items:baseline} section .title_box h2{background:linear-gradient(to right,var(--info) 100%,var(--info) 65%);-webkit-background-clip:text;background-clip:text} #news_area .tabs_btn a{padding:3px 10px;font-size:19px;letter-spacing:0;color:#2f2f2f;font-weight:500;display:block} #news_area .tabs_btn .active a{color:var(--secondary)} #news_area .tabs_btn .active a::after{content:'';position:absolute;bottom:-6px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:0;height:0;border-style:solid;border-width:6px 4.5px 0 4.5px;border-color:var(--primary) transparent transparent transparent;opacity:1;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s} #news_area .tabs_body .tab_info{width:100%;top:0;left:0;opacity:0;pointer-events:none} #news_area .tabs_body .tab_info.showBox{opacity:1;pointer-events:auto;padding:0px 0 10px} #news_area .tabs_body .tab_info li{width:calc((100% / 4) - 70px);margin:0 10px} #news_area .tabs_body .tab_info li:first-child{width:calc((100% / 3) - 30px);margin-right:50px} #news_area .tabs_body .tab_info .items{display:flex;align-items:flex-start;margin:10px 0 0;flex-direction:column} #news_area .tabs_body .tab_info .items .Img{padding-bottom:20px;display:none;width:100%} #news_area .tabs_body .tab_info .items .Img img{height:310px;width:100%;object-fit:cover} #news_area .tabs_body .tab_info .items .Txt{width:100%} #news_area .tabs_body .tab_info li:first-child .items .Img{display:inline-block} #news_area .tabs_body .tab_info li:first-child article,#news_area .tabs_body .tab_info li:first-child .items .Txt .more{display:none} #news_area .tabs_body .tab_info .items .Txt .more{width:auto;border:0px solid var(--info);padding:0} #news_area .tabs_body .tab_info .items .Txt .more b.arrow{background-color:#ababab;height:1px;width:calc(100% - 60px)} #news_area .tabs_body .tab_info .category{background:#ffffff;color:#626262;line-height:1;font-size:15px;font-weight:600;font-family:'Montserrat',sans-serif} #news_area .f_aitems_end{display:flex;align-items:center;width:calc(100% - 0px);justify-content:flex-start;margin-bottom:10px} #news_area .f_aitems_right{position:relative;width:calc(100% - 0px)} #news_area .tabs_body .tab_info .time{font-size:14px;display:flex;flex-direction:row;align-items:center;margin-right:30px;position:relative} #news_area .tabs_body .tab_info .time::after{content:"";position:absolute;top:8px;right:-15px;width:2px;height:12px;border-right:1px solid #202020;-webkit-transform:skewX(-35deg);-ms-transform:skewX(-35deg);transform:skewX(-35deg)} #news_area .tabs_body .tab_info .time font.y_txt{font-size:50px;font-weight:700;line-height:100%;background:linear-gradient(to right,var(--primary),var(--secondary));background-clip:text;-webkit-background-clip:text;color:transparent} #news_area .tabs_body .tab_info .time font.m_txt{color:var(--primary);font-weight:600;font-family:'Montserrat',sans-serif;font-size:15px} #news_area .tabs_body .tab_info .time font.m_txt:first-child{margin-right:0} #news_area .tabs_body .tab_info .time font.d_txt{width:20px;grid-area:time_d;color:var(--dark)} #news_area .tabs_body .tab_info h3{height:auto;font-weight:500;font-size:18px;line-height:140%;width:calc(100% - 0px);-webkit-line-clamp:2} #news_area .tabs_body .tab_info article{height:50px;font-weight:500;font-size:15px;color:#1e1e1e;-webkit-line-clamp:2;margin:30px 0} #news_area .btn{position:absolute;right:-20px;bottom:30px;z-index: 10;} #news_area .tabs_box .tabs_btn .moreBtn a{font-weight:400;color:#fff;font-size:14px;line-height:50px;padding:0 20px} .more{position:relative;display:inline-block;height:45px;padding:0 20px;border:1px solid var(--info);font-size:15px;font-weight:bold;color:#fff;line-height:41px;letter-spacing:0.2pt;text-transform:uppercase;cursor:pointer;display:flex;width:200px;justify-content:space-between} .more b{width:60px;font-weight:500;font-size:13px;color:#646464} .more .arrowWrap{width:85px;height:40px;position:relative} .more .arrowWrap .arrow{display:block;height:1px;background-color:#646464;position:absolute;top:11.5px;top:calc(50% - 1px);left:15px;width:51px} @keyframes moreArrow{0%{transform:translateX(0px)} 30%{transform:translateX(5px)} 100%{transform:translateX(0px)} }.more font svg,#news_area .btn svg{width:20px;height:15px;display:inline-block;fill:var(--lastly);vertical-align:middle;margin-bottom:4px} #news_area .btn svg{margin:0} /* casesBox */ #casesBox{position:relative;padding:50px 0 30px 0;background-color:#fff} #casesBox .info_item{width:768px;margin:auto;padding-bottom:50px;padding-top:60px} #casesBox .title_box h3,#casesBox .title_box h2{text-align:center} #casesBox:before{content:'';position:absolute;width:461px;height:461px;background-image:url(/images/39/img-cases.png);background-position:50% 50%;background-repeat:no-repeat;top:60px;right:60px;z-index:3;border-radius:50%;opacity:1;-webkit-animation:rotate 60s linear infinite;animation:rotate 60s linear infinite} @-webkit-keyframes rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)} }@keyframes rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)} }.deckTop{animation-name:fadeInDown;-webkit-animation-name:fadeInDown} .deckTop h3{position:relative;margin:0 0 40px;font-size:20px;font-weight:600;color:#242424;letter-spacing:1px;z-index:1} #casesBox .deckTop p{margin:0 0 0px;padding:0 0 140px 0;text-align:center;text-transform:uppercase;font-weight:bold;letter-spacing:1.5px;font-family:'Noto Serif TC',serif;color:#6e3a19;font-size:38px} #casesList ul{overflow:hidden;margin-bottom:20px;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;height:650px;width:100%} #casesList ul button{display:none} .slick-prev{width:auto} .slick-prev,.slick-next{position:absolute;margin-top:-10px;padding:0;color:transparent;border:none;outline:none;background:transparent;line-height:0;font-size:0;cursor:pointer;top:-110px;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)} #casesList ul li{position:relative;padding:20px 0px;-webkit-transition:all .9s ease;-o-transition:all .9s ease;transition:all .9s ease} #casesList ul li .casesStyle{margin:20px auto 0;position:relative;-webkit-transition-delay:0s;transition-delay:0s;display:flex;flex-direction:row;align-items:center} #casesList ul li .casesStyle a{position:absolute;width:100%;height:100%;top:0;left:0;z-index:10} #casesList ul li .info{padding-bottom:0;-webkit-transition:opacity 0.15s,-webkit-transform 0.15s;transition:opacity 0.15s,transform 0.15s;position:relative;opacity:0;width:0;transform:translate(0%,0%);display:none} #casesList ul li .info h3{overflow:hidden;padding:0;font-weight:400;text-overflow:ellipsis;white-space:nowrap;color:#616161} #casesList ul li .info h3{letter-spacing:4px;text-align:inherit;font-weight:400;font-size:20px;margin-bottom:40px;padding-bottom:20px;position:relative} #casesList ul li .info h3:before{content:'';position:absolute;width:50px;height:3px;background-color:#a72126;left:0;bottom:0;transform:translate(-51%,0%)} #casesList ul li .info h3 font{margin:5px 0;font-weight:600;letter-spacing:1.5px;line-height:160%;font-size:22px;display:inline-block} #casesList ul li .info h3 font::first-letter{color:var(--primary)} #casesList ul li .info h3 span{margin-right:4px;display:inline-block} #casesList ul li .info article{margin:0px 0 0;display:block;letter-spacing:0.3px;font-weight:400;font-size:15px;line-height:180%;-webkit-transition-delay:0s;transition-delay:0s} #casesList ul li .info .btnBox{background-color:#ffffff;border:0px solid #a72126;border-bottom:2px solid #252525;width:calc(100% - 40px);padding:14px 20px;display:flex;justify-content:space-between;margin-top:25px} #casesList ul li .info .btnBox p{color:#333333;-webkit-transform:translateX(0px);transform:translateX(0px);font-weight:700} #casesList ul li .info .btnBox .btnArrow.arrow1::before{background-color:#333333;height:2px} #casesList ul li .info .btnBox .btnArrow.arrow1::after{border-right:2px solid #333333;border-bottom:2px solid #333333} #casesList ul li.slick-center .info p{opacity:1;-webkit-transition-delay:.5s;transition-delay:.5s} #casesList ul li.slick-center .casesStyle{margin:0;-webkit-transition-delay:.5s;transition-delay:.5s} #casesList ul li.slick-center .casesStyle .info{opacity:1;display:inline-block;width:35%;height:100%;padding:40px 40px 0px 40px;background-color:#fff;border-top:8px solid #a72126;transform:translate(0%,-50%);position:absolute;right:0;top:50%} #casesList ul li.slick-center .casesStyle .info:after{content:'';background-image:url(/images/39/img-c-01.png);background-position:top;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;position:absolute;width:100%;height:20px} #casesList ul li .casesStyle .Photo{width:100%;position:relative} #casesList ul li .casesStyle .Photo img{width:100%;height:450px;object-fit:cover} #casesList ul li.slick-center .casesStyle .Photo{width:100%;padding-bottom:20px} #casesList ul li.slick-center .casesStyle .Photo img{width:100%;height:510px} #casesBox .btn{position:relative} #casesBox .casesArea{position:relative} #casesBox .nowrap_box.arrow_box{width:110%;display:flex;flex-direction:row;justify-content:space-around;position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,50%)} #casesBox .arrow_box a{position:relative;background-color:rgb(255 255 255 / 80%);box-sizing:border-box;width:60px;height:60px;display:flex} #casesBox .arrow_box a.next{-webkit-transform:scaleX(-1);transform:scaleX(-1)} #casesBox .arrow_box a:before,#casesBox .arrow_box a:after{position:absolute;width:15px;height:1px;background:#868686;display:block;top:50%;left:calc((100% - 13px) / 2);-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:left;transform-origin:left;content:""} #casesBox .arrow_box a:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)} #casesList ul li:before{position:absolute;width:100px;height:130px;background-image:url(/images/42/img_Cases_02.png);background-repeat:no-repeat;background-size:cover;display:block;top:5px;left:5px;z-index:0;opacity:0;content:"";-webkit-transition-delay:.5s;transition-delay:.5s;-webkit-transition:all .9s ease;-o-transition:all .9s ease;transition:all .9s ease} #performance_list ul{display:flex} #performance_list{margin-top:50px} #performance_list ul li{display:flex;flex-wrap:wrap;width:calc(100% / 17 )} #performance_list ul li .item{position:relative} #fakeNumber{margin-top:90px} #fakeNumber ul{padding:0px 0px;text-align:center;color:#666;font-size:16px;display:flex;align-items:flex-start;justify-content:center;flex-direction:row} #fakeNumber ul li{display:inline-flex;width:calc((100% / 5) - 20px);color:#fff;text-align:center;position:relative;justify-content:center} #fakeNumber ul li .eva{padding:20px 10px} #fakeNumber ul li .eva p{font-size:18px;color:#424242;line-height:100%;text-align:center;display:flex;align-items:center;margin-bottom:30px;flex-direction:row;justify-content:center;position:relative;padding-bottom:30px} #fakeNumber ul li .eva p:before{content:'';position:absolute;width:40px;height:1px;background-color:#aaaaaa;left:50%;bottom:0;transform:translate(-50%,-50%)} #fakeNumber ul li .eva p b{font-size:44px;color:#814790;line-height:100%;font-weight:600;margin-right:8px;font-family:'Montserrat',sans-serif} #fakeNumber ul li .eva h2{font-size:18px;margin-top:10px;line-height:120%;color:#1b1b1b;text-align:center;font-weight:500;display:flex;flex-direction:column;align-items:flex-start} #fakeNumber ul li .eva h2 font{font-size:14px;margin-top:10px;color:var(--info)} #fakeNumber ul li:before{position:absolute;width:1px;height:60%;display:block;top:50%;right:0%;z-index:0;-webkit-transition:all .9s ease;-o-transition:all .9s ease;transition:all .9s ease;content:"";transform:translate(-50%,-50%);background-color:#e0e0e0} #fakeNumber ul li:nth-child(2) .eva p,#fakeNumber ul li:nth-child(2) .eva p b{color:#0e91cb} #fakeNumber ul li:nth-child(3) .eva p,#fakeNumber ul li:nth-child(3) .eva p b{color:#00a8a0} #fakeNumber ul li:nth-child(4) .eva p,#fakeNumber ul li:nth-child(4) .eva p b{color:#38a24c} #fakeNumber ul li:nth-child(5) .eva p,#fakeNumber ul li:nth-child(5) .eva p b{color:#dd8f3b} #fakeNumber ul li:nth-child(5):before{display:none} @media (max-width: 1680px) { #coordinators_area .coordinatorsBox{width:85%} #coordinators_area .coordinatorsBox .textBox{width:320px} #information_area .workframe{width:calc(100% - 150px)} #dataItem .imgitem img{height:180px} #aboutAreaBox #leftinfo .Txt .text{width:95%;line-height:210%} } @media screen and (min-width: 1501px) { #news_area .bg_box{left:6rem} } @media (max-width: 1440px) { section .title_box .page_title{font-size:18px} section .title_box font{font-size:38px} section .itemTitleBox::before{width:210px;height:210px;left:-50px} section .itemTitleBox::after{left:200px;width:90px;height:90px} section .text_stroke{font-size:6vmin;top:-100px;right:-2%} #dataItem .imgitem img{height:150px} #information_area .workframe{width:95%} #information_area{padding:1vw 0 4vw;margin-top:0px} #aboutAreaBox #leftinfo .Txt article{width:90%;margin-bottom:20px;padding:20px 50px 20px 30px} #aboutAreaBox{width:calc(100% - 80px)} #aboutAreaBox .itemTitleBox{padding:30px 50px 0px 30px} #aboutAreaBox #leftinfo{padding:0px 50px 0px 0px} #casesList ul li .casesStyle .Photo img{height:290px} #casesList ul li.slick-center .casesStyle .Photo img{height:370px} #casesList ul li:before{display:none} #casesList ul{height:630px} } @media screen and (min-width: 1281px) { #casesList ul li:after{position:absolute;width:120px;height:120px;background-image:url(/images/39/img_Cases_01.png);background-repeat:no-repeat;background-size:contain;display:block;bottom:20px;right:20px;z-index:0;opacity:0;content:"";-webkit-transition-delay:.5s;transition-delay:.5s;-webkit-transition:all .9s ease;-o-transition:all .9s ease;transition:all .9s ease} #casesList ul li.slick-center:after{opacity:0.1;-webkit-transition-delay:1s;transition-delay:1s} @-webkit-keyframes apple_circle{0%,100%{transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0)} 50%{transform:rotate(1turn);-webkit-transform:rotate(1turn);-moz-transform:rotate(1turn);-ms-transform:rotate(1turn);-o-transform:rotate(1turn)} }#casesList ul li.slick-center:before{opacity:1;-webkit-transition-delay:1s;transition-delay:1s} header .contactBtn a svg{width:20px;height:20px;fill:#004e8a} header.scroll .contactBtn a svg{fill:#525252} #aboutAreaBox .title_box .page_title:after{content:'';position:absolute;width:800px;height:1px;background-color:#404040;right:0;top:50%;transform:translate(90%,-50%)} #aboutAreaBox .title_box .page_title:before{content:'';position:absolute;width:50px;height:2px;background-color:#a72126;left:0;top:50%;transform:translate(-150%,-50%)} #news_area .tabs_body .tab_info .items:hover .more .arrowWrap::before,.infoArea .leftBox:hover .arrowWrap::before,.infoArea .leftBox + .rightBox .infoList li:hover .arrowWrap:before{width:36px;height:36px;top:calc(50% - 18px);right:0px;background-color:rgb(223 223 223 / 70%);border:1px solid rgb(223 223 223 / 70%)} #news_area .tabs_body .tab_info .items:hover .more .arrowWrap .arrow,.infoArea .leftBox:hover .more .arrow,.infoArea .leftBox + .rightBox .infoList li:hover .more .arrow{animation:moreArrow 1s infinite} #news_area .bg_box{width:860px} #news_area .list_box .row:hover .info_box{bottom:30px} #information_area .row:hover .info_box .line{width:100%;background:var(--primary)} #aboutArea::after{content:"";width:510px;height:100%;position:absolute;top:0;right:0;background:#7f1418;display:block;z-index:-120} } @media screen and (max-width: 1280px) { #aboutAreaBox{width:calc(100% - 0px)} #aboutAreaBox #leftinfo .Txt article{width:100%;padding:0px 0px 0px 20px;margin-bottom:0px} #wrap{background-color:#fff} #casesBox .arrow_box a{top:calc(100% - 180px)} #casesList ul{height:600px} #casesList .deckTop p{padding:30px 0 40px 0} #information_area .row .img_box{opacity:1;margin-bottom:10px} #information_area .workframe{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin:auto} #information_area .workframe .item{width:100%;padding-right:0;padding-bottom:50px} #information_area .workframe .information_wrap{width:calc(100% - 200px);padding:0 100px} #information_area .title_box{width:calc(100% - 0px);margin-bottom:20px} #information_area .row .img_box img{width:70px;height:70px} #dataItem{width:100%;transform:translate(0px,0px);margin-top:50px} #dataItem .imgitem img{height:200px} section .text_stroke,#coordinators_area .text_stroke{display:none} section .title_box font{font-size:36px} section .title_box{margin:0 0px 10px;width:100%} .serviceArea{flex-direction:column;align-items:flex-start} .serviceArea .serviceBox{width:calc(100% + 0px)} .serviceArea{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0;margin:0;display:none} .serviceArea .serviceBox{width:100%;margin:0;top:0;padding:0 20px 0 0;display:initial;height:220px;background-size:cover} .webBox .slick-dots{margin-top:20px} #coordinators_area{padding:100px 0 100px 0} #news_area .news_box{padding:2rem 0vw;padding-bottom:calc(0rem + 60px)} #news_area .tabs_box .tabs_btn{width:100%} #news_area .title_box h2:before{left:50%} #news_area .title_box .more_btn{bottom:30px;left:50%;padding:10px 15px;font-size:13px} #news_area .title_box article{margin-top:1rem;margin-bottom:1.75rem} #news_area .title_box article br{display:none} #news_area .tabs_body .tab_info .items{margin:0;width:auto;padding:10px 10px 15px} #news_area:after{display:none} #news_area .tabs_body .tab_info .time font.y_txt{font-size:40px} #news_area .tabs_body .tab_info .time font.m_txt{font-size:13px} #news_area .f_aitems_end{margin:0} #news_area .tabs_body .tab_info .category{font-size:13px} #news_area .tabs_body .tab_info h3{margin-top:10px} #news_area .news_box{padding:0rem 0 4rem 0vw} #news_area .title_box{margin-bottom:0} .btnBox{width:200px} #aboutArea{padding:5vw 0 4vw 0} #news_area .tabs_body .tab_info article{margin:10px 0} #news_area .tabs_box .tabs_btn .newsList{transform:translate(-25%,100%)} } @media screen and (max-width: 1140px) { #performance_list ul{display:flex;flex-direction:row;flex-wrap:wrap} #performance_list ul li{width:calc(100% / 9 )} #casesList ul li .info h3 font{font-size:22px;letter-spacing:0.5px} #casesBox:before,#customBox .Book_box:before,#customBox .nowrap_box.arrow_box,#customBox .deck02,section .info_item .title_box h2:before{display:none} #casesBox .info_item{display:flex;align-items:center;width:100%;justify-content:center} #casesBox .info_item{padding-top:10px;padding-bottom:20px} #casesBox .info_item .title_box h2{display:inline-block;text-align:center;width:100%} #casesList ul li .casesStyle .Photo img{height:340px} #casesList ul li.slick-center .casesStyle .Photo img{height:420px} #casesBox .arrow_box a{width:40px;height:40px} #dataItem .imgitem img{height:150px;width:100%} #information_area img{width:50px;height:50px} section .textEditor .page_title span{top:-70px;left:-60px} section .textEditor .text{font-size:16px} section .textEditor .titleA{font-size:14px;width:100%} #coordinators_area .coordinatorsBox{width:90%;display:flex;flex-direction:column} #coordinators_area .coordinatorsBox .textBox{width:100%;padding:30px 0 40px;margin-right:0} #coordinators_area .coordinatorsBox .membersBox{width:calc(100% - 0px)} #coordinators_area .circle img,#coordinators_area .quadrilateral{display:none} #coordinators_area .textEditor .page_title strong{color:var(--info)} #coordinators_area .textEditor .page_title{display:flex;flex-direction:row} #coordinators_area .textEditor .page_title strong{padding:0 10px 0 0} #coordinators_area .membersBox .statisticsList{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center} #coordinators_area .membersBox .statisticsList .statisticsItem{width:calc(100% / 1);height:90px} #coordinators_area .membersBox .statisticsList .statisticsItem .numberBox .number{font-size:30px} #coordinators_area .membersBox .statisticsList .statisticsItem{padding:25px 15px 25px 15px} #coordinators_area .membersBox .statisticsList:before{display:none} #coordinators_area .textEditor .videoBtn{position:absolute;right:0;top:0} section .textEditor{padding:90px 0 50px} #news_area .itemTitleBox,#news_area .title_box{display:flex;flex-direction:column;align-items:center} #news_area .tabs_box{display:flex;flex-direction:column;align-items:flex-start;width:calc(100% - 20px);margin-top:20px;padding:0 10px 0} #news_area .tabs_box .tabs_btn .newsList{display:flex;flex-wrap:wrap;flex-direction:row;padding-bottom:20px;padding-top:20px;margin-bottom:10px;margin-right:0;padding-right:0;position:relative;top:0;left:50%;transform:translate(-50%,0%);width:auto} #news_area .tabs_box .tabs_btn li{width:calc(100% / 2)} #news_area .tabs_btn a{padding:7px 5px;font-size:16px;text-align:center} #news_area .tabs_box .tabs_body{width:calc(100% - 0px)} #news_area .tabs_body .tab_info li{width:calc((100% / 1) - 0px);margin:0} .moreBtn{text-align:center;margin:20px auto 10px 0px;width:130px;padding:15px 20px 15px 20px} section .title_box .page_title{margin:5px 0} section .title_box .page_title br{display:none} section .itemTitleBox::before{width:130px;height:130px;left:-20px} section .itemTitleBox::after{left:210px;width:60px;height:60px} #aboutAreaBox #rightinfo #imglist img{height:100%;width:100%} #aboutAreaBox #rightinfo{margin-right:0} #aboutAreaBox #leftinfo{width:50%} #news_area .news_box{padding:0} section .itemTitleBox{padding-top:20px;padding-bottom:0px} #news_area .itemTitleBox::after{left:-60px} #casesList ul li .casesStyle{display:flex;flex-direction:column;align-items:center} #casesList ul li .info h3{margin-bottom:20px;padding-bottom:10px} #casesList ul{height:750px} #casesList ul li.slick-center .casesStyle .info{position:relative;width:75%;transform:translate(0%,-30%);padding:20px 20px 50px 20px} #news_area .tabs_box .tabs_body .news_list{display:flex;flex-direction:row;flex-wrap:wrap} #news_area .tabs_body .tab_info li,#news_area .tabs_body .tab_info li:first-child{width:calc((100% / 2) - 0px);margin:0} #news_area .tabs_body .tab_info li:first-child .items .Img{display:none} #news_area .tabs_body .tab_info li:first-child article{display:block} #news_area .tabs_body .tab_info li:first-child .items .Txt .more{display:flex} } @media screen and (min-width: 1025px) { #casesList .slick-prev{left:auto;right:150px;top:-100px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:70px;height:70px;background:#3b5670;border-radius:50px} #casesList .slick-track{padding:40px 0 0} #casesList .slick-prev:before{color:#ffffff;font-size:40px;opacity:1;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-right:7px} #news_area .tabs_box ul{margin-bottom:0.55rem} #aboutAreaBox #leftinfo .Txt .title{margin-bottom:20px} } @media screen and (max-width: 1024px) { #casesList ul li.slick-center .casesStyle .Photo{padding-bottom:10px} #casesList ul{height:760px} #casesList ul li .info p{opacity:1;-webkit- transition-delay:.5s;transition-delay:.5s} } @media screen and (max-width: 980px) { #aboutAreaBox{display:flex;flex-direction:column} #aboutAreaBox #rightinfo{width:100%} #aboutAreaBox #leftinfo{width:auto;padding:40px} #aboutAreaBox .itemTitleBox{padding:0px 0px 0px 0px} #aboutAreaBox .Txt{margin:0} #aboutAreaBox #leftinfo .Txt article{padding:0} #aboutAreaBox #leftinfo .Txt .text{width:100%;line-height:190%} #aboutAreaBox .btnBox{position:relative;left:0;bottom:0} #information_area .workframe .information_wrap{width:calc(100% - 100px);padding:0 50px} #casesList ul{margin-bottom:10px;height:510px} #casesList ul li .casesStyle .Photo img{height:290px} #casesList ul li.slick-center .casesStyle .Photo img{height:370px} #fakeNumber{margin-top:40px} #fakeNumber ul{display:flex;flex-direction:row;flex-wrap:wrap} #fakeNumber ul li{width:calc((100% / 3) - 20px)} } @media screen and (max-width: 768px) { .list_box .info_box h3{font-size:16px} .information_wrap .list_box ul{display:flex;flex-direction:row;flex-wrap:wrap} #information_area .information_wrap ul li{width:calc((100% / 3) - 10px);margin:5px;padding:0} #information_area .row .img_box img{width:50px;height:50px;padding:17px} #coordinators_area{padding:60px 0 100px 0} #news_area{padding:0} #news_area img.dight{margin-top:-30px} #news_area .btn{top:20px;right:-50px} #news_area .tabs_body .tab_info h3{width:calc(100% - 0px);font-size:16px} #information_area .list_box{margin:auto;width:100%} #information_area::after{width:100%} #information_area .row .info_box article{height:50px;-webkit-line-clamp:2} #information_area .title_box::after{display:none} section .title_box h3{margin-top:0px} #casesList ul{height:750px} #casesBox .arrow_box a{top:calc(100% - 320px)} #casesBox .nowrap_box.arrow_box{display:none} #casesBox .arrow_box a#product_prev{left:90px} #casesBox .arrow_box a#product_next{right:90px} #casesList ul li .casesStyle .Photo img{height:350px} #casesList ul li.slick-center .casesStyle .Photo img{height:460px} #casesList ul li .casesStyle{margin:26px auto 0} #casesList ul li .casesStyle .Photo img,#casesList ul li.slick-center .casesStyle .Photo img,#casesList ul li .casesStyle .Photo:after{} #casesList ul li .casesStyle .Photo:after{top:5px;left:5px} #casesBox{padding:20px 0 10px 0} #casesList ul li .info article{font-size:13px} #performance_list ul li{width:calc(100% / 6 )} } @media screen and (max-width: 680px) { #fakeNumber ul li{width:calc((100% / 2) - 20px)} #fakeNumber ul li .eva p b{font-size:37px} #fakeNumber ul li .eva p{margin-bottom:24px;padding-bottom:25px} #fakeNumber ul li:before{display:none} #dataItem .imgitem img{height:100px;width:100%} #casesBox .arrow_box a{top:calc(100% - 230px)} #casesBox .arrow_box a#product_prev{left:60px} #casesBox .arrow_box a#product_next{border-width:1px 1px 0 0;transform:rotate(45deg);right:30px} #casesBox .arrow_box a#product_next{right:60px} #casesList ul{height:600px} #casesList ul li .casesStyle .Photo img{height:190px} #casesList ul li.slick-center .casesStyle .Photo img{height:250px} #casesList ul li .info h3 font{font-size:14px} #coordinators_area{padding:60px 0 30px 0} #information_area ul li{padding:10px 0px 10px} #information_area .row .info_box h3{font-size:17px} } @media screen and (max-width: 500px) { #information_area .list_box{width:100%} } @media screen and (max-width: 380px) { #casesList ul{height:410px} }