@import url('/css/animate.css');.wow{animation:fadeIn 1.5s both;-webkit-animation:fadeIn 1.5s both;animation-duration:1s;-webkit-animation-duration:1s;animation-name:fadeInUp;-webkit-animation-name:fadeInUp} .wrapper::before{content:'';width:1px;height:200%;background:rgb(179 179 179 / 30%);position:absolute;top:0;right:calc(100% - 130px);z-index:4} /* section */ section{padding:2vw 0 5vw} section >*{z-index:6} section .title_box{margin-bottom:60px} section .title_box p{font-size:24px;line-height:140%;color:var(--primary);letter-spacing:2.5px} section .title_box h2{font-weight:500;font-size:46px;line-height:140%;color:var(--primary);position:relative;text-transform:uppercase} #about_area .title_box h2::after,#book_area .title_box h2::after{content:"";display:block;width:70px;height:1px;background:#a3a3a3;margin:30px 0 auto 0} #book_area .title_box h2::after{margin:70px 0 auto 0} section.bg_box{background:no-repeat 50% / cover;padding:8vw 0 0vw} section.bg_box:after{background:-webkit-linear-gradient(bottom,rgba(var(--secondary-rgb),1) 0%,rgba(var(--secondary-rgb),.7) 100%);background:linear-gradient(to top,rgba(var(--secondary-rgb),1) 0%,rgba(var(--secondary-rgb),.7) 100%);opacity:1} .more_btn{margin-top:0px} .more_btn a{position:relative;width:170px;padding:0 15px;display:inline-block;color:#4f3c30;border-bottom:1px solid #4f3c30} .more_btn font{text-align:left;font-weight:500;letter-spacing:3px;color:#ffffff} .more_btn.white a{display:flex;align-items:center;background-color:#4a4a4a} .more_btn.white a,.more_btn.white font{letter-spacing:2px;font-size:12px;position:relative;-webkit-writing-mode:inherit;-ms-writing-mode:inherit;writing-mode:inherit} .more_btn.white a:before{content:"";width:0;height:100%;background:#222222;display:block;position:absolute;bottom:3px;left:0;-webkit-transform:translate(0,5px);-ms-transform:translate(0,5px);transform:translate(0,5px);-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s} .more_btn.white span{right:30px;position:absolute;width:80px;height:1px;background:#000;display:block;right:0;top:calc((100% - 1px) / 2);z-index:3;-webkit-transition-duration:.2s;transition-duration:.2s} .more_btn.white:after{width:252px} .more_btn.white span{position:absolute;width:40px;height:1px;background:#4f3c30;display:block;right:20px;top:calc((100% - 1px) / 2);z-index:3;-webkit-transition-duration:.2s;transition-duration:.2s} .more_btn.white span:before{position:absolute;width:0;height:0;border-style:solid;border-width:0 16px 7px 0;border-color:transparent transparent #4f3c30 transparent;right:-1px;bottom:50%;content:""} .more_btn.white a i{display:block;border-bottom:1px solid #fff;width:40px;height:1px;margin:20px;position:relative} .more_btn.white a i::after{content:"";width:6px;height:6px;display:block;border-top:1px solid #fff;border-right:1px solid #fff;position:absolute;top:50%;right:0;-webkit-transform:translate(0,-0.5px) rotate(45deg);transform:translate(0,-0.5px) rotate(45deg);-webkit-transform-origin:right center;transform-origin:right center} section .track{position:absolute;bottom:-100px;right:210px;z-index:1} section .track p{font-weight:400;font-size:1050px;margin:0;letter-spacing:2px;line-height:1;will-change:transform;color:rgb(255 255 255 / 70%)} #about_area{overflow:hidden;position:relative;padding:10vw 0 8vw;background-image:url(/images/39/img-ab-bg.jpg)} #about_area .title_box{position:relative;margin-bottom:40px} #about_area .title_box h2{} #about_area .title_box p{position:absolute;right:-60px;top:20px} #about_area .info_item .decoText p{font-size:24px;line-height:140%;color:var(--primary);letter-spacing:2.5px} #about_area .list_box{width:calc(100% - 400px);transform:translateX(9%)} #about_area .currentBox{display:flex;align-items:flex-start;flex-direction:row;padding:0px 0 0px;margin:0 0 0 auto;position:relative} #about_area .currentBox li a{z-index:10} #about_area .currentBox li:nth-child(1){margin:-90px 0 50px} #about_area .currentBox li:nth-child(2){margin:140px -30px 50px 70px} #about_area .currentBox li:nth-child(3){margin:-60px 0 50px;-webkit-transform:scale(0.85);transform:scale(0.85)} #about_area .currentBox li:nth-child(3) .info_box{height:40px} #about_area .currentBox li:nth-child(3) .info_box{transform:translateY(10%)} #about_area .currentBox .currentLink .row{position:relative;overflow:hidden;border-radius:50%;-webkit-border-radius:50%} #about_area .currentBox .currentLink .row:before{content:"";width:calc(110% - 0px);height:100%;position:absolute;bottom:-24px;left:-20px;right:0;display:block;z-index:1;opacity:0.4;background-image:-webkit-linear-gradient(270deg,rgba(11,22,31,0.00) 0%,rgba(11,22,31,1.00) 100%);background-image:linear-gradient(180deg,rgba(11,22,31,0.00) 0%,rgb(0 0 0) 100%)} #about_area .currentBox .img_box img{-webkit-transition-duration:1s;transition-duration:1s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0)} #about_area .currentBox li:hover .img_box img{-webkit-transform:scale(1.05);transform:scale(1.05)} #about_area .currentBox .img_box::after{content:"";position:absolute;left:0;top:0;width:100%;height:0;transition:0.5s;background:rgb(0 0 0 / 18%)} #about_area .currentBox li:hover .img_box::after{height:100%} #about_area .currentBox li .info_box{transition:all 0.7s ease;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:flex-end;padding:0px 0px 0px;z-index:2;width:80%;height:60px;margin:auto;position:absolute;left:0;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)} #about_area .currentBox li .info_box h3,#about_area .currentBox li .info_box .line{text-align:center;color:#fff;font-size:22px;letter-spacing:1.5px} #about_area .currentBox li .info_box .line{font-size:16px;text-transform:uppercase;opacity:0.8;margin-top:10px;letter-spacing:0;font-weight:300} #about_area .img_item{width:100%} #about_area .img_item img{width:100%} #about_area .titleBox1{width:65%;position:relative} #about_area .titleBox1:before{content:'';position:absolute;height:0;width:170%;top:40px;left:-100px;background:#ffffff;z-index:-4;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out} #about_area.tooolong .titleBox1:before{height:620px} #about_area .titleBox2{padding-right:0px;width:420px} #about_area .titleBox2:before{content:'';position:absolute;width:0;height:1px;top:15px;left:-480px;z-index:0;background-color:rgb(179 179 179 / 40%);transform:rotate(135deg) translateX(20px);transition:all 1.1s ease-in-out;-webkit-transition:all 1.1s ease-in-out} #about_area.tooolong .titleBox2:before{width:790px} #about_area .titleBox2 .info_item{width:440px} #about_area .titleBox2 article{} #about_area .titleBox2 article .info h3{padding:0 0 10px 0;font-size:26px;color:#0c0c0c;font-weight:600;letter-spacing:0.5px;line-height:160%} #about_area .titleBox2 article .info p{width:100%;margin-bottom:40px;letter-spacing:1px;font-weight:400;font-size:15px;color:#343434;line-height:1.9} #about_area .titleBox2 article .textEditor h2{font-size:20px;padding-bottom:20px} #about_area .titleBox2 article .textEditor p{line-height:180%;font-weight:400} #about_area.tooolong:after{height:430px} #about_area.tooolong .aboutAreaBG{width:1160px} #about_area:before{content:'';position:absolute;height:110px;width:0;bottom:0;right:0;background:#ffffff;z-index:2;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out} #about_area:after{content:'';position:absolute;background:url(/images/39/img-about-img02.png);width:100%;background-repeat:no-repeat;bottom:80px;left:130px;opacity:0.1} #about_area.tooolong:before{width:calc(100% - 130px)} #about_area .nowrap_box:before{content:'';position:absolute;width:0;height:1px;top:-50px;left:-20px;z-index:0;background-color:rgb(179 179 179 / 30%);transform-origin:top left;transition:all 1.1s ease-in-out;-webkit-transition:all 1.1s ease-in-out} #about_area.tooolong .nowrap_box:before{width:100%} @keyframes bgWhirligig-2{0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }@keyframes bgWhirligig-2{0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }#fakeNumber{width:420px;position:absolute;left:400px;bottom:60px} #fakeNumber .webframe{max-width:1200px;margin:0 auto} #fakeNumber .index-project-tl{position:relative;text-align:center;background:#4b34a0;padding:12px 0;color:#fff;border-radius:7px} #fakeNumber .index-project-tl h2{color:#fff;font-size:34px;text-align:center;margin:32px 0} #fakeNumber .index-project-tl em{display:block;background:url(/images/20/new/home_210.svg) no-repeat;width:81px;height:38px;position:absolute;left:50%;margin-left:-40.5px;bottom:-35px} #fakeNumber .index-tl-line{display:inline-block;background:#fff;width:55px;height:5px} #fakeNumber ul{padding:0px 0px;text-align:center;color:#666;font-size:16px;display:flex;align-items:flex-end;justify-content:space-around} #fakeNumber ul li{display:inline-flex;width:calc((100% / 2) - 0px);color:#fff;text-align:center;position:relative;flex-direction:column} #fakeNumber ul li:nth-child(1){margin-bottom:50px;margin-right:30px} #fakeNumber ul li .eva{padding:0px 0px 10px 0px;display:flex;align-items:center} #fakeNumber ul li .eva p{font-size:18px;color:var(--secondary);text-align:center;display:flex} #fakeNumber ul li .eva p b{font-size:40px;color:var(--primary);position:relative;line-height:120%;font-weight:500;margin-right:8px;vertical-align:super;font-style:italic} #fakeNumber ul li .text font{position:relative;letter-spacing:0.5px} #fakeNumber ul li .text font:before{content:"";background-color:#bebebe;display:block;width:80px;height:1px;position:absolute;right:-90px;top:50%} #fakeNumber ul li:nth-child(1) .eva p b{font-size:90px} #fakeNumber ul li .eva h2{font-size:22px;color:var(--primary);text-align:center;font-weight:500;display:flex;flex-direction:column;align-items:flex-start;margin-top:1px;font-style:italic;position:relative} #fakeNumber ul li .eva h2 font{font-size:14px;color:var(--info)} .list_box .info_box h3{height:30px;font-weight:400;font-size:18px;margin:0px 0 0} #product_area{margin:0;position:relative;padding:8vw 0 7vw 0;background-image:url(/images/39/img-p-bg.png);background-repeat:no-repeat;background-position:top} #product_area .Txts{position:absolute;right: calc(100% - 970px);} #product_area .Txts h3 img{height:120px;width:100%;object-fit:contain;margin-bottom:30px} #product_area .Txts p{letter-spacing:2.5px;font-size:18px} #product_area .ServiceBG{position:absolute;height:0;width:750px;top:0px;left:0px;z-index:0;background-image:url(/images/39/img-p-01.png);background-repeat:no-repeat;background-position:top;background-size:cover;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out} #product_area.tooolong .ServiceBG{height:100%} #product_area .title_box p{position:relative;display:inline-block} #product_area .title_box p::after{content:"";display:block;width:70px;height:1px;background:#a3a3a3;margin:20px 0 auto 0;position:absolute;top:-4px;right:-80px} #product_area .slick-slider{position:relative;width:100%} #product_area .nowrap_box .slick-slider:before{content:'';position:absolute;height: 15%;width:15%;top: -10px;left:0;background:#ffffff;opacity: 1;z-index: 0;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out} #product_area .nowrap_box .slick-slide{margin:10px 20px} #product_area ul li .img_box img{object-fit:contain;height: 160px;object-fit: cover;} #product_area ul li:nth-child(1) .img_box img{height: 380px;} #book_area{background-position:bottom;padding:8vw 0 4vw} #book_area:before{content:'';position:absolute;height:623px;width:578px;top:0;left:0;background-image:url(/images/39/img-b-t01.png);z-index:2} #book_area .title_box{display:inline-flex;flex-direction:column;width:auto;position:absolute;top:40px;left:0} #book_area .title_box p,#book_area .title_box h2{display:inline-block} #book_area .list_box .info_box h3{text-align:inherit;margin: 20px 0 20px;font-size:22px;-webkit-line-clamp: 2;height: 80px;} #book_area .list_box .info_box{margin: 0px 0 0px;width:360px} #book_area .list_box .info_box p{color:#646464;text-align:inherit} #book_area .list_box ul li{position:relative} #book_area .list_box ul li:first-child::after{content:normal} #book_area .list_box ul li .row{margin:0 20px;display:inline-flex;justify-content:space-between;width:100%;align-items:flex-end} #book_area .list_box ul li .over_hid{position:relative;padding:0px 60px 40px 0px;width: calc(100% - 500px);} #book_area .list_box ul li .over_hid::after{content:"";position:absolute;bottom:-40px;right:-40px;z-index:-1;display:block;background-color:#dadada;width:100%;height:100%} #book_area .list_box ul li .over_hid img{ height: 540px; } #book_area .slick-prev{} #book_area .slick-prev:before,#book_area .slick-prev:after{position:absolute;width:15px;height:1px;background: #111111;display:block;top:50%;left:calc((100% - 13px) / 2);-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:left;transform-origin:left;content:""} #book_area .slick-prev:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)} #book_area .slick-next:before,#book_area .slick-next:after{position:absolute;width:15px;height:1px;background: #111111;display:block;top:50%;left: calc((100% - -20px) / 2);-webkit-transform: rotate(135deg);transform: rotate(135deg);-webkit-transform-origin:left;transform-origin:left;content:""} #book_area .slick-next:after{-webkit-transform: rotate(225deg);transform: rotate(225deg);} @media screen and (max-width:1680px){ #product_area .slick-next{right:290px} #product_area .slick-prev{left:300px} #product_area .Txts{position:absolute;right:calc(100% - 980px)} } @media screen and (max-width:1560px){ .wrapper::before{right:calc(100% - 80px)} #about_area.tooolong:before{width:calc(100% - 80px)} #product_area .Txts{position:absolute;right: calc(100% - 830px);} } @media screen and (max-width:1440px){ #about_area.tooolong .aboutAreaBG{width:960px} #about_area .img_item img{width:95%} #about_area .nowrap_box .deck02 img,#about_area .nowrap_box .deck03 img{width:85%} #product_area .Txts{right: calc(100% - 760px);} #product_area ul li .img_box img{height: 130px;} #product_area ul li:nth-child(1) .img_box img{height: 290px;} } @media screen and (max-width:1366px){ #product_area .Txts{right: calc(100% - 750px);} } @media screen and (min-width:1281px){ .more_btn.white a:hover{color:#fff} .more_btn.white a:hover:before{width:100%} #about_area .d_flex{align-items:center} header #linelink >a:before { filter: contrast(0) brightness(200%); } header.scroll #linelink >a:before{filter: contrast(0) brightness(0%);} header #linelink:hover >a p{ color: #ffffff; } header.scroll #linelink:hover >a p{ color: #4a4a4a; } } @media screen and (max-width:1280px){ #product_area .Txts{right:calc(100% - 690px)} #product_area .Txts h3 img{height:100px;object-fit:contain;width:auto} .wrapper::before{display:none} section .title_box font{font-size:20px} #fakeNumber ul li:nth-child(1) .eva p b{font-size:58px} #fakeNumber ul li .eva p b{font-size:30px} #fakeNumber{width:350px;left:390px;bottom:-90px} #about_area .img_item:before,#about_area .img_item img{width:100%} #about_area .img_item img{height:100%} #about_area.tooolong:before{width:calc(100% - 0px);height:70px} section .track p{font-size:770px} #about_area{padding:6vw 0 18vw} #about_area .currentBox li:nth-child(1){margin:-30px 0 50px} #about_area .currentBox li:nth-child(2){margin:130px 0px 0px 10px} #about_area .currentBox li:nth-child(3){margin:-20px 0 0px;-webkit-transform:scale(0.85);transform:scale(0.85)} #about_area .currentBox li:nth-child(3) .info_box{height:40px} #about_area .currentBox li:nth-child(3) .info_box{transform:translateY(10%)} section .title_box h2{font-size:35px} section .title_box p{font-size:20px} section .title_box h3{font-size:18px;padding:10px 0 0} } @media screen and (min-width:1140px){ #product_area ul{display:flex;align-items: flex-end;transform:translateX(0%)} #product_area ul li{width: 40%;float:left} #product_area ul li .row{margin:0 10px} #product_area ul li:nth-child(1){width: 100%;float:right;margin-bottom: -10px;} #product_area ul li:nth-child(1) .row{margin:0 70px 0 10px} #product_area ul li .img_box{position:relative} #product_area ul li .img_box::after{content:"";position:absolute;bottom:-10px;right:-10px;z-index:-1;display:block;border:1px solid #ffffff;width:100%;height:100%} #product_area ul li .info_box{margin-top:20px} #product_area ul li .info_box article{color:#172a88;font-family:'Poppins',sans-serif;font-weight:500;font-size:18px;display:none} #product_area ul li .info_box h3{font-family: "Noto Sans TC", sans-serif;text-transform:uppercase;font-size: 16px;line-height: 150%;font-weight: 500;padding:5px 0 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 2;height: 50px;} #product_area ul li .info_box .line{position:relative;margin-top: 20px;} #product_area ul li .info_box .line:before{content:"";width:30px;height:1px;background:#acacac;display:block;position:absolute;bottom:0;left:0} #product_area .slick-dots li button:hover,#product_area .slick-dots li button:focus{font-size:0;line-height:0;display:block;width:40px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:none;background:transparent} #product_area .slick-prev,#product_area .slick-next{border-color:transparent;width:45px;height:45px;line-height:55px;border:1px solid #989898;border-radius:50%;display:flex;opacity:.65;flex-direction:column;align-items:center;justify-content:center;z-index:10;top:40%} #product_area .slick-next{right:380px} #product_area .slick-prev{left:395px} #product_area .slick-prev:before,#product_area .slick-next:before{position:absolute;width:30%;height:30%;border:solid var(--primary);border-width:1px 0 0 1px;display:block;top:calc((100% - 14px) / 2);left:17px;content:"";transform:rotate(315deg);-webkit-transform:rotate(315deg)} #product_area .slick-next:before{transform:rotate(135deg);-webkit-transform:rotate(135deg);top:calc((100% - 12px) / 2);left:26%} } @media screen and (max-width:1140px){ #product_area .Txts{right:calc(100% - 0px);position:revert;margin:0px 15px 145px} #about_area .currentBox li:nth-child(1),#about_area .currentBox li:nth-child(2),#about_area .currentBox li:nth-child(3){margin:0} #about_area .currentBox li,#about_area .currentBox li:nth-child(3){-webkit-transform:scale(1);transform:scale(1)} #about_area .currentBox li:nth-child(3) .info_box{height:60px} #about_area .currentBox li:nth-child(3) .info_box{transform:translateY(-50%)} #about_area .titleBox1,#about_area .titleBox2{width:100%;padding-left:0} #about_area .nowrap_box{display:flex;flex-direction:column;align-items:flex-start;margin:auto;padding:0px 0 0;align-content:flex-start} #about_area::after{display:none} #about_area .nowrap_box .info_item,#about_area .img_item{margin:0;width:100%;position:relative;left:0} #about_area .img_item{margin-bottom:40px} #about_area .info_item article{width:100%;padding:0;margin-bottom:20px} #about_area .more_btn{position:relative;left:0} #about_area .nowrap_box:before,#about_area .title_box p,#about_area .nowrap_box .deck02,#about_area .nowrap_box .deck03,section .track,#about_area.tooolong .aboutAreaBG,#secabout .SecaboutBG,#productBox .info .title_box::after{display:none} #about_area .titleBox2 article{margin-bottom:20px} #fakeNumber{position:relative;width:calc((100% / 1) - 30px);left:0;bottom:0;margin:40px 0px} #fakeNumber ul li:nth-child(1){margin-bottom:0;margin-right:50px} #about_area .list_box{width:calc(100% - 0px);transform:translateX(0%)} #product_area .ServiceBG{display:none} #product_area{padding:8vw 0 7vw 0;background-position:100% 100%;background-size:auto;background-color:#e8e8e8} #product_area .slick-next{right:20px} #product_area .slick-prev{left:30px} #product_area ul li .info_box article{font-size:15px;display: none;} #product_area ul li .info_box h3{font-size:17px;padding:0;height: auto;} #product_area .nowrap_box .slick-slide{margin:10px 10px} #product_area ul li .info_box{margin-top:30px} #about_area{padding:6vw 0 4vw} #book_area .title_box{position:relative} #book_area .title_box h2::after{margin:30px 0 auto 0} #book_area .list_box ul li .row{display:inline-flex;align-items:flex-start;flex-direction:column} #book_area .list_box ul li .over_hid{padding:0px 40px 20px 0px} #product_area ul li:nth-child(1) .img_box img,#product_area ul li .img_box img{ height: 240px; } } @media screen and (max-width:1024px){ #about_area{padding:4vw 0 4vw} #about_area .img_item{width:100%;margin:0 0 30px auto;order:inherit} #about_area .img_item:before{border:0;top:0;right:0;z-index:2} #about_area .info_item{margin-top:0px;z-index:4} #about_area::after{top:-283px;width:950px;height:870px} #newsBox .info{padding:50px 40px;display:flex;flex-direction:column;align-items:center} #product_area .Txts{ margin: 0px 15px 55px; } #product_area ul li:nth-child(1) .img_box img,#product_area ul li .img_box img{ height: 340px; } } @media screen and (max-width:960px){ .list_box .info_box h3{margin:0} } @media screen and (max-width:768px){ #newsBox .info .titleBox .title{word-spacing:initial} #newsBox .info{display:flex;flex-direction:column;align-items:flex-start;padding:20px 20px} #newsBox .info .titleBox{width:100%;margin-right:0;margin-bottom:30px} #newsBox .info .row{width:calc(100% - 30px);display:block} #product_area ul li:nth-child(1) .img_box img,#product_area ul li .img_box img{ height: 240px; } } @media screen and (max-width:640px){ #about_area{padding:14vw 0 10vw} #about_area .img_item{width:100%} #about_area .img_item:before{background:rgba(var(--secondary-rgb),0)} #about_area .info_item{margin-top:40px} #about_area .info_item article .info h3{font-size:22px;padding:5px 0 0px 0} #about_area .img_item img{height:270px;width:100%} #newsBox{margin-top:0} #about_area.tooolong:before{display:none} #fakeNumber ul{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center} #fakeNumber ul li:nth-child(1) .eva p b{font-size:45px} #fakeNumber ul li{width:calc((100% / 2) - 30px)} #fakeNumber ul li .eva{height:60px} #product_area .Txts{margin: 10px 15px 30px;} } @media screen and (max-width:500px){ #newsBox .info .tit.row{padding:0px 0px 10px} #newsBox .info .tit a{font-size:29px} section .title_box h2{font-size:32px} section .title_box p,#about_area .nowrap_box .info_item p{font-size:20px} #product_area{background-position: 90% 0%;} } @media screen and (max-width:380px){ #product_area{} }