section .title_box .page_title{font-weight: 600;font-size: 2.4rem;letter-spacing: 2px;position: relative;line-height: 160%;margin-bottom: 30px;color: var(--info);} section .title_box .page_title:after{content:'';display: block;width: 80px;height: 1px;background: var(--secondary);margin: 30px 0 0;} section .title_box .subtitle{color: var(--secondary);font-family: "Russo One", sans-serif;font-size: 40px;font-weight: 600;line-height: 1.03;padding-bottom: 10px;text-transform: uppercase;letter-spacing: 2px;} section .title_box .ptitle{position:relative;padding-left:37px;color:var(--primary);font-size:18px;font-weight:600;letter-spacing:1px;margin-bottom:12px} section .title_box .ptitle:before{content:'';position:absolute;width:23px;height:2px;background:var(--primary);left:0;top:15px} section .title_box .subtitle .secondColor{color:var(--primary);vertical-align:top;padding:0;margin:0} section .title_box p{line-height:170%;letter-spacing:0.5px;font-weight:500;font-size:20px;color:var(--complement);position:relative} .more_btn{margin-top:0px;position: relative;background: var(--primary);background: linear-gradient(to right, var(--secondary), var(--primary));color: #fff;border-radius: 50px;padding: 10px 26px;min-width: 200px;} .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(--fourth);border-radius: 50px;padding: 10px 26px;opacity: 0;} .more_btn:hover:before{width:100%;opacity: 1;} .more_btn a{position:relative;overflow:hidden;width: 120px;padding: 12px 50px 12px 30px;display:inline-block;border-radius: 100px;} .more_btn font{position:relative;color:#fff;font-family: 'Oswald', sans-serif;text-transform: uppercase;text-align: center;font-size: 15px;font-weight: bold;letter-spacing: 0.08rem;} .more_btn b{width: 40px;aspect-ratio: 1/1;border-radius: 50px;display: flex;align-items: center;justify-content: center;margin-left: 30px;border: 1px solid #ffffff69;position: absolute;top: 4px;right: 12px;} .more_btn b:after{content:"";width: 6px;height: 6px;background-color: #fff;position:absolute;top: 42%;left:50%;border-radius: 50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)} .more_btn:hover b:after{animation: arrow-move-right-data-v-1d069175 1s .2s;} @Keyframes arrow-move-right-data-v-1d069175{0%{transform:translateX(0);-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);}50%{transform:translateX(20px);-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);}51%{transform:translateX(-20px);-webkit-clip-path:inset(0 0 0 100%);clip-path:inset(0 0 0 100%);}100%{transform:translateX(0);-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);}} /* application */ #application {padding: 130px 0;background: url(/images/01/img-s-bg.jpg) no-repeat;background-size: cover;} #application:after{content:'';position:absolute;background: rgb(255 255 255 / 50%);background-size:auto;background-position:bottom;background-repeat:no-repeat;width: 100%;height: 100%;z-index: 0;top: 0;right: 0;} #application::before { content: ""; position: absolute; top: 0; right: 0; z-index: 1; width: 300px; border-top: 40px solid var(--primary); border-right: 50px solid var(--primary); transform-origin: top left; transition: transform 1s ease-in-out,height 1s 0.5s ease-in-out,-webkit-transform 1s ease-in-out; pointer-events: none; -webkit-transform: scale(1); transform: scale(1); height: 300px; } #application .workframe { z-index: 10; } #application .title_box { display: grid; grid-template-columns: 350px 1fr 400px; margin-bottom: 70px; align-items: center; } #application .title_box .page_title,#application .title_box .subtitle { margin: 0; padding: 0; } #application .title_box .page_title:after { display: none; } #application .section-header { margin-bottom: 60px; display: flex; align-items: baseline; gap: 20px; } #application .section-title { font-size: 32px; font-weight: 700; } #application .section-en { font-size: 20px; color: var(--secondary); font-weight: 700; letter-spacing: 2px; } #application .serv_accordion { display: flex; gap: 15px; width: 100%; height: 500px; } #application .serv_item { position: relative; width: 135px; border-radius: 20px; overflow: hidden; cursor: pointer; transition: all 0.6s cubic-bezier(0.165,0.84,0.44,1); } #application .serv_item.active { width: calc(100% - 600px); } #application .serv_item .serv_img { width: 100%; height: 100%; position: relative; background-color: #062236; } #application .serv_item .serv-pic { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.5); transition: all 0.6s; opacity: .5; } #application .serv_item.active .serv-pic { filter: grayscale(0); transform: scale(1.05); opacity: 1; } #application .serv_item:before { content: ""; position: absolute; inset: 0; background: rgb(2 6 10/50%); z-index: 2; transition: opacity 0.4s; } #application .serv_item.active:before { opacity: 0; } #application .serv_item.active:after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom,transparent 60%,#022a57 90%,#022a57 100%); z-index: 2; opacity: 0.8; } #application .add-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3; transition: opacity 0.3s; } #application .add-icon p { writing-mode: vertical-rl; color: #fff; font-size: 24px; letter-spacing: 6px; font-weight: 500; display: flex; align-items: center; gap: 15px; } #application .add-icon p:before {content: "+";display: block;width: 30px;height: 30px;border: 1px solid #fff;border-radius: 50%;text-align: center;line-height: 28px;letter-spacing: -1px;font-size: 20px;writing-mode: horizontal-tb;} #application .serv_item.active .add-icon { opacity: 0; } #application .serv_content { position: absolute; bottom: 40px; left: 40px; right: 40px; z-index: 5; display: flex; justify-content: space-between; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.4s 0.3s; display: none; } #application .serv_item.active .serv_content { opacity: 1; pointer-events: auto; display: flex; } #application .serv_subject p {color: #fff;font-size: 2rem;font-weight: 500;letter-spacing: 1px;} #application .view-more { color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,0.3); padding: 8px 20px; border-radius: 30px; transition: background 0.3s; } #application .view-more:hover { background: var(--secondary); border-color: var(--secondary); } @media (max-width:1200px) { #application .serv_item.active { width: calc(100% - 400px); } #application .serv_item { width: 100px; } } @media (max-width:1024px) { #application .serv_accordion { height: 400px; } } @media (max-width:768px) { #application .serv_accordion { flex-direction: column; height: auto; gap: 15px; } #application .serv_item { width: 100% !important; height: 120px; } #application .serv_item.active { height: 300px; } #application .add-icon p { writing-mode: horizontal-tb; font-size: 18px; } #application .serv_content { bottom: 20px; left: 20px; right: 20px; } #application .serv_subject p { font-size: 24px; } } /* product_area */ #product_all:before{content:'';position:absolute;inset: 0;right:0;top: 0;z-index: 0;background-image: linear-gradient(#f0f0f0 1px, transparent 1px), linear-gradient(90deg, #f0f0f0 1px, transparent 1px);background-size: 40px 40px;opacity: .5;} #product_area{position:relative;padding:0;display: grid;grid-template-columns: 260px 79%;gap: 20px;justify-content: space-between;align-items: start;} #product_area .titleBox{display:flex;flex-direction:column;align-items:center} #product_area .workframe{width:min(90%,1250px)} #product_area .list_box{margin-top: 3vw;} #product_area .area_title{display:flex;justify-content:flex-end;align-items:baseline;gap:15px;writing-mode:vertical-lr;letter-spacing:7px;line-height:100%;color:#fff;font-size:42px;padding-bottom:2.8em;position:relative;margin-bottom:40px} #product_area .area_title:after{content:"";width:1px;height:60px;background-color:#fff;position:absolute;bottom:0;left:58%} #product_area .btn{padding:0;display:inline-flex;align-items:center;gap:12px;flex-direction: row;margin: 30px 0 30px;} #product_area .btn a{border: 1px solid #a4a4a4;width:48px;aspect-ratio:1/1;display:flex !important;align-items:center;justify-content:center;border-radius:50px} #product_area .btn a svg{fill:#a4a4a4;width:13px;height:16px} #product_area .btn a#product_prev svg{transform:rotate(180deg)} #product_list .slick-list{} #product_all{padding: 8vw 0 7vw 0;} #product_all:after{content:'';position:absolute;background: #f7f7f7;width: 68.7%;height: 130%;z-index: -1;top: -200px;right: 0;} #product_all .workframe{align-items:end;width: min(90%, 1660px);} /* about_area */ #about_area {position: relative;padding: 4vw 0 12vw 0;} #about_area .bg{position:relative} #about_area .bg:before{content:'';position:absolute;left:170px;top:-320px;background:url(/images/01/img-ab-bg-1.png) 0 0;background-size:auto;width:60%;height:125%;z-index:-6} #about_area:before{content:'';position:absolute;left: 170px;top: -320px;background: #f6f6f6;background-size: auto;width: 60%;height: 200%;z-index: -6;} #about_area:after{content:'';position:absolute;background: linear-gradient(to right, var(--secondary), var(--primary));background-size: auto;background-position: bottom;background-repeat:no-repeat;width: 320px;height: 15%;z-index: 0;bottom: 170px;right: 160px;-webkit-transform: skewX(-20deg);transform: skewX(-20deg);} #about_area .workframe {display: grid;justify-content: space-between;grid-template-columns: 39% 55%;align-items: end;width: min(90%, 1440px);margin-right: 170px;} #about_area .info_box {} #about_area .info_box .sub_title {position: absolute;display: flex;flex-direction: row-reverse;gap: 25px;top: -45px;right: 18%;align-items: flex-start;} #about_area .info_box .sub_title span{background:white;writing-mode: vertical-lr;font-family: "Russo One", sans-serif;color: #563d1c;font-size: 24px;text-transform: uppercase;display: inline-block;padding: 25px 10px;letter-spacing: 2px;} #about_area .info_box .about_title {position: absolute;top: 70px;writing-mode: vertical-lr;font-family: "Zen Maru Gothic", sans-serif;font-size: 30px;color: #563d1c;border-bottom: 4px solid var(--primary);line-height: 1;padding-bottom: 40px;font-weight: 600;letter-spacing: 6px;right: 28%;} #about_area .info_box .pageh1, #about_area .areaTitle{font-size: 24px;color: var(--primary);margin-bottom: 15px;font-weight: 500;letter-spacing: 1px;margin-top: 30px;} #about_area .img_box{position:relative} #about_area .img_box p{font-size:20px;margin-bottom:34px;letter-spacing:1px;font-weight:500} #about_area .workframe >.img_box:before{content:url(/images/01/img-circle.png);position: absolute;right: -110px;z-index: -1;top: -50px;} #about_area .workframe >.img_box:after{content:url(/images/01/img-suger.png);position: absolute;left: -110px;z-index: 0;bottom: -70px;animation-name: fish;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;{0%{transform-origin:right bottom;transform:rotate(-3deg);}100%{transform-origin:right bottom;transform:rotate(3deg);}}ease-in-out;animation-duration: 2s;} @keyframes fish{0%{transform-origin:right bottom;transform:rotate(-3deg);}100%{transform-origin:right bottom;transform:rotate(3deg);}} #about_area .img_box img {width: 100%;height: 100%;border-radius: 30px;} #about_area .info_box article p{line-height:2.2;width: 70%;font-weight: 500;color: #563d1c;} #about_area .projectBottomItem{display:grid;grid-template-columns:repeat(3,1fr);gap:61px;margin-top:40px} #about_area .projectBottomItem .item{position:relative;transition:all .2s linear} #about_area .projectBottomItem .item:not(:last-child):after{content:"";position:absolute;width:1px;height:60%;right:-30px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background-color:#cbcbcb;z-index:5} #about_area .projectBottomItem .item .Img{width:80px;margin:auto;margin-bottom: 30px;position: relative;} #about_area .projectBottomItem .item .Img::before,#about_area .projectBottomItem .item .Img::after{content:"";position:absolute;left: -10px;top: -20px;width: 100px;height: 100px;border-radius:50%;background: rgb(255 255 255);} #about_area .projectBottomItem .item .Img::after { animation-delay: 1.5s; } #about_area .projectBottomItem { display: flex; justify-content: center; gap: 60px; } #about_area .projectBottomItem .item { position: relative; text-align: center; } /* 科技圓形掃描框 */ #about_area .projectBottomItem .item .Img::before { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgb(0 145 209/23%); animation: radar 3s linear infinite; z-index: -3; } /* 掃描光 */ #about_area .projectBottomItem .item .Img::after { content: ""; position: absolute; border-radius: 50%; background: conic-gradient(rgba(0,255,255,0.0) 0deg,rgb(0 145 209/23%) 60deg,rgba(0,255,255,0.0) 120deg); animation: scan 4s linear infinite; mix-blend-mode: screen; z-index: 11; } /* 你原本的追蹤光點 */ #about_area .projectBottomItem .item .Img span { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgb(224 242 230); animation: dot 3s infinite; } /* 雷達擴散 */ @keyframes radar { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1); opacity: 0; } } /* 掃描旋轉 */ @keyframes scan { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 追蹤點 */ @keyframes dot { 0% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-6px); opacity: 1; } 100% { transform: translateY(0); opacity: 0.5; } } #about_area .projectBottomItem .item:hover .Img img{animation:ripple 3s ease-in-out infinite} #about_area .projectBottomItem .item .Txt .title{text-align:center;margin-top:15px;font-weight:500;letter-spacing:1px;font-size:18px} #about_area .aboutimg1{position:absolute;top:0;right: 310px;} #about_area .aboutimg1{top: 40px;z-index: -1;right: 70px;} #about_area .aboutimg1 img{animation: imgcircle 50s linear infinite;width: 410px;aspect-ratio: 1 /1;} @-webkit-keyframes imgcircle{0%,100%{-webkit-transform:translateY(0%) rotate(0)} 50%{-webkit-transform:translateY(0%) rotate(1turn)} }@keyframes imgcircle{0%,100%{transform:translateY(0%) rotate(0)} 50%{transform:translateY(0%) rotate(1turn)} } #about_area .aboutimg2{top:63%;right:13%} #about_area .aboutimg2 img{animation:swim4 12s ease-in-out infinite;transform-origin:center} @keyframes swim4 { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(10px, -5px) rotate(6deg); } 50% { transform: translate(-5px, 8px) rotate(-6deg); } 75% { transform: translate(8px, 3px) rotate(4deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .aboutimg3{position:absolute;bottom: 40px;left: 210px;z-index: -1;} .aboutimg3 .img { position: relative; font-family: "Russo One",sans-serif; text-transform: inherit; font-size: 140px; line-height: 100%; color: #ffffff; } .aboutimg3 img{animation:swim1 10s ease-in-out infinite;transform-origin:center} @keyframes swim1 { 0%, 100% { transform: translateX(0) rotate(0deg) scale(1); } 25% { transform: translateX(5px) rotate(2deg) scale(1.02); } 50% { transform: translateX(-5px) rotate(-2deg) scale(0.98); } 75% { transform: translateX(3px) rotate(1deg) scale(1.01); } } @media screen and (max-width: 1680px){ #about_area .workframe{width: 86%;margin-right: 60px;} #about_area .aboutimg1{top:80px;right:-20px} #about_area .aboutimg1 img{} #about_area .aboutimg2{top:76%} } @media screen and (max-width: 1440px){ #product_all{padding:7vw 0;margin-top:110px} #product_all:before{left:-140px;top:0} #about_area{padding-top:6vw} #about_area .info_box .about_title{right:32%} .aboutimg3{left:-140px;bottom:-10px} #about_area:before{height:140%;left: 60px;} #about_area:after { width: 280px; height: 10%; bottom: 150px; right: 70px; } section .title_box .subtitle,footer .billboard .billboard-item .Txt { font-size: 32px } section .title_box .page_title,#product_area .area_title { font-size: 1.8rem; margin-bottom: 20px } #about_area .workframe { grid-template-columns: 43% 50% } #about_area .aboutimg1 { right: -150px } #about_area .aboutimg2 { right: 14%; top: 68% } #product_area .list_box { margin-top: 40px; } } @media screen and (max-width: 1366px){ } @media screen and (max-width: 1280px){ #product_all:after{display:none} #about_area .workframe{width:88%;margin:auto} #about_area:before,#about_area:after,#product_all:before{display:none} #product_area .area_title{color:#161616} #product_area .area_title:after{background-color:#7c7c7c;height:60px} #product_area .btn a{border:1px solid #a3a3a3} #product_area .btn a svg{fill:#202020} } @media screen and (max-width: 1140px){ #about_area{padding: 8vw 0 130px 0;margin-bottom: 0;} } @media screen and (max-width: 1024px){ #about_area:after{zoom:60%;bottom: 7%;} #about_area .info_box .about_title{right: 40%;} #about_area .workframe >.img_box:before, #about_area .workframe >.img_box:after{display:none;} #about_area .info_box article p{width:100%} #about_area .workframe{grid-template-columns:1fr;gap:60px} #product_all{margin-top:0;padding: 13vw 0;} #product_all .workframe{display:block} #product_area{display:block;} #product_area .titleBox{display:flex;flex-direction:column;align-items:center;gap:20px;margin-bottom:30px} #product_area .btn{display:flex;flex-direction:row;align-items:center} #product_area .area_title{writing-mode:horizontal-tb;padding-bottom:0;margin-bottom:0} #product_area .area_title:after{display:none} #application { padding: 70px 0; } #application::before { border-top: 30px solid var(--primary); border-right: 30px solid var(--primary); width: 250px; height: 250px; } #application .title_box { grid-template-columns: 1fr; gap: 10px; } #application .serv_subject p { font-size: 1.4rem; } #about_area .aboutimg1 { display: none; } } @media screen and (max-width: 768px){ #about_area .info_box .pageh1,#about_area .areaTitle{font-size:20px} #about_area .projectBottomItem .item .Txt .title{font-size:16px} #about_area .info_box .pageh1{margin-top: 50px;} #about_area .info_box .about_title{right: 62%;} #about_area .info_box .sub_title{right: 33%;} #about_area .workframe{grid-template-columns:1fr} #product_list .slick-list{height: 690px;} #product_area:before{right: -35%;} #product_area .area_title:before{zoom: 50%;} #about_area .img_box { width: 100%; max-width: inherit; } } @media screen and (max-width:640px) { .section_area .more_btn { padding: 10px 1em 10px 2em; } .section_area { padding: 15vw 0; } .section_area .area_title { font-size: 26px; } #about_area .info_box .pageh1 { font-size: 20px; } #about_area .info_box .sub_title { top: -25px } #about_area .info_box .sub_title span { font-size: 19px; } #about_area .info_box .about_title { font-size: 26px; right: unset; left: 20%; } #about_area:before { zoom: 50% } #product_list .btn a { width: 65px; } #product_list .slick-list { height: auto; } #product_list .btn { display: flex; margin: 40px 0 0; align-items: center; justify-content: center; } #product_area .list_box { margin-top: 6vw; } #product_area:before { right: -95%; } #product_area .area_title:before { zoom: 20%; } #about_area .projectBottomItem .item .Img { width: 60px; } #about_area .projectBottomItem .item .Img::before,#about_area .projectBottomItem .item .Img::after { width: 90px; height: 90px; left: -15px; } }