/* section */
section { padding: 6vw 0; }
section >* { z-index: 5 }
section  .title_box .deco-title { position: absolute; top: -90px; left: 0; font-size: 86px; font-weight: 900; color: rgb(149 149 149/15%); letter-spacing: 0px; pointer-events: none; width: 100%; }
section .title_box .subtitle { font-weight: 700; font-size: 3.2rem; color: var(--secondary); position: relative; font-family: 'Sora',sans-serif; line-height: 110%; margin-bottom: 30px; letter-spacing: 1px; }
section .title_box .subtitle::first-letter { color: var(--primary) }
section .title_box .subtitle:before { content: ""; width: 60px; height: 2px; background: var(--secondary); display: block; position: absolute; bottom: -40px; left: 0 }
section .title_box .noteBox { line-height: 190%; letter-spacing: 0.5px; font-weight: 500; font-size: 20px; color: #181818; position: relative; margin-top: 35px; word-spacing: 100vw; }
section.bg_box { background: no-repeat 50%/cover; }
.more_btn { margin-top: 0px }
.more_btn a { position: relative; overflow: hidden; width: 110px; padding: 8px 80px 8px 10px; display: inline-block; text-align: center; background: #373737; }
.more_btn font { font-size: 12px; position: relative; writing-mode: inherit; color: #fff; text-align: left; font-weight: 400; letter-spacing: 1px; text-align: center; font-family: 'Sora',sans-serif; }
.more_btn span::before { content: ""; position: absolute; top: calc(50% - 5px); right: 23px; width: 10px; height: 10px; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; transform: rotate(45deg); opacity: .5; }
.more_btn span::after { content: ""; position: absolute; top: calc(50% - 5px); right: 15px; width: 10px; height: 10px; border-top: 1px solid #fff; border-right: 1px solid  #fff; transform: rotate(45deg) }
.more_btn a:before { content: ""; height: 100%; width: 56%; display: block; position: absolute; bottom: 0; right: -100px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: var(--primary); -webkit-transform: translateX(-50%) skewX(-40deg); transform: translateX(-50%) skewX(-40deg); border-left: 4px solid #fff; }
/* --- 變數定義 --- */
#product_area { padding: 3vw 0; background-color: #f7f7f7; overflow: hidden; }
#product_area::after { content: ""; width: 100%; height: 100%; position: absolute; bottom: 0; right: 0; background-image: url(/images/39/img-pd-bg.jpg); background-size: cover; background-position: top; background-repeat: no-repeat; display: block }
#product_area .workframe { margin-left: auto; margin-right: 0; width: min(1560px,80%); }
#product_area .productAreaBG { width: auto; height: 100%; position: absolute; pointer-events: none; top: 0; left: -180px; z-index: 1; }
#products.catalog-section { padding: 100px 0 0; color: #000; overflow: hidden; position: relative; user-select: none; }
#product_area .workframe:before {content: 'Hover over the blue area on the left to scroll down.';position: absolute;font-size: 15px;writing-mode: vertical-lr;left: -10px;top: 34.5%;color: #a5a5a5;}
#products .catalog-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; border-bottom: 1px solid #d5d5d5; padding-bottom: 30px; width: min(1366px,95%); }
#products .catalog-header .Txt { width: 100%; }
#products .title_box .subtitle:before { display: none; }
#products .title_box .subtitle { margin: 0; }
#products .view-more-btn { display: inline-flex; align-items: center; background: var(--primary); color: #fff; padding: 10px 24px; border-radius: 50px; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: 1px; transition: 0.3s ease; }
#products .view-more-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(67,97,238,0.3); }
#products .carousel-wrapper { display: flex; flex-direction: row; position: relative; align-items: flex-start; cursor: grab; }
#products .carousel-wrapper:active { cursor: grabbing; }
/* 垂直導航點 */
#products .vertical-dots { display: flex; flex-direction: column; gap: 20px; margin-right: 60px; margin-left: 20px; padding-top: 50px; flex-shrink: 0; z-index: 10; }
#products .dot { width: 8px; height: 8px; background: #bebebe; border-radius: 50%; transition: 0.4s var(--p-ease); position: relative; cursor: pointer; }
#products .dot.active { background: var(--primary); transform: scale(1.5); }
#products .dot.active::after { content: ""; position: absolute; top: -12px; left: 50%; width: 1px; height: 8px; background: var(--primary); transform: translateX(-50%); }
/* 產品滑塊容器 */
#products .slider-viewport { overflow: visible; flex-grow: 1; touch-action: pan-y; }
#products .products-slider { display: flex; gap: 60px; transition: transform 0.8s var(--p-ease); padding-bottom: 50px; }
#products .product-item { min-width: 450px; width: 450px; position: relative; flex-shrink: 0; }
/* 背景巨型數字 */
#products .ghost-number { position: absolute; top: -30px; right: 4%; font-size: clamp(100px,15vw,120px); font-weight: 900; color: rgba(0,0,0,0.03); line-height: 1; z-index: 10; user-select: none; pointer-events: none; font-family: 'Sora',sans-serif; }
#products .p-image-box { position: relative; z-index: 1; margin-bottom: 40px; display: flex; justify-content: center; height: 350px; align-items: center; pointer-events: none; /* 讓圖片不影響拖動抓取 */ }
#products .p-image-box img { max-width: 85%; max-height: 100%; object-fit: contain; transition: 0.6s var(--p-ease); }
#products .p-info { position: relative; z-index: 2; }
#products .p-title { font-size: clamp(20px,3vw,24px); font-weight: 700; color: var(--secondary); margin-bottom: 25px; text-decoration: none; display: block; }
#products .p-more { display: flex; align-items: center; gap: 15px; text-decoration: none; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #888; transition: 0.3s; }
#products .p-more .line { width: 40px; height: 1px; background: #ccc; transition: 0.4s var(--p-ease); }
#products .product-item:hover .p-more { color: var(--primary); }
#products .product-item:hover .p-more .line { width: 70px; background: var(--primary); }
#products .product-item:hover .p-image-box img { transform: translateY(-15px) scale(1.05); }
/* --- 響應式手機版適配 --- */
@media (max-width:1024px) {
  #products.catalog-section { padding: 60px 0 10px 0; }
  #products .catalog-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  #products .catalog-header { padding-bottom: 40px; margin-bottom: 30px; }
  #products .carousel-wrapper { flex-direction: column; }
  #products .vertical-dots { flex-direction: row; margin-right: 0; margin-top: 30px; margin-bottom: 60px; padding-top: 0; justify-content: center; width: 100%; margin-left: 0; }
  #products .dot.active::after { top: auto; bottom: -12px; height: 8px; }
  #products .products-slider { gap: 20px; }
  #products .product-item { min-width: calc(100vw - 12vw); width: calc(100vw - 12vw); }
  #products .p-image-box { /* height: 220px; */ }
  #products .ghost-number { right: 5%; top: -5px; }
}
/* news_area */
#news_area #imglist { display: grid; grid-template-columns: 600px 1fr; width: 100%; gap: 60px }
#news_area #imglist .left li { margin: 20px; }
#news_area .right { position: relative }
#news_area li .img_scale img { aspect-ratio: 4/3; width: 100% }
#news_area .img_box li .item { align-items: center; padding: 20px 0px; display: grid; grid-template-columns: 1fr 170px; gap: 0 30px }
#news_area li .item .Txt h3 { color: #132d65; font-size: 21px; letter-spacing: 1px; margin-bottom: 10px }
#news_area li .item .Txt article { color: #6e7c9a; font-size: 18px }
#news_area li .more_btn a { width: 90px; padding: 10px 50px 10px 30px }
#news_area li .more_btn.white font { font-size: 14px }
#news_area .img_nav li .item .Txt h3 { -webkit-line-clamp: 2; height: 70px; margin-bottom: 20px }
#news_area .img_nav li .row { padding: 0 15px }
#imglist .img_nav { width: 100%; position: absolute; bottom: 40px; right: 0 }
#imglist .img_nav .img_show { margin: 0 10px 0 }
#imglist .img_nav img { width: 140px; aspect-ratio: 4/3; object-fit: cover }
/* news_area */
#news_area { padding: 10vmax 0 8vmax; overflow: initial; position: relative; background-color: #f7f7f7; background: url(/images/39/img-ne-bg.jpg) center/cover no-repeat; background-repeat: no-repeat; background-size: auto; background-position: top; }
#news_area::after { content: ""; width: 100%; height: 100%; position: absolute; bottom: 0; right: 0; background-image: url(/images/39/img-n-bg-1.png); background-size: cover; background-position: bottom; background-repeat: no-repeat; display: block; }
#news_area .title_box { display: flex; flex-direction: column; align-items: flex-start; }
#news_area .title_box .subtitle { margin-bottom: 10px }
#news_area .title_box .subtitle:before { width: 45px; height: 73px; top: -30px; right: -80px; left: auto; background-image: url(/images/39/img-n-t-1.png); background-repeat: no-repeat; background-color: #ffffff00; }
#news_area .news_box { margin: 0 0  0 auto; position: relative; z-index: 1; width: min(1640px,90%); }
#news_area::after { content: ""; display: block; position: absolute; width: 50%; height: 79%; top: 110px; left: 0; right: 0; bottom: 0; background-color: #ffffff; z-index: 0; border-radius: 30px; overflow: hidden; }
#news_area .tabs_btn .newsList { display: flex; gap: 15px; position: relative; margin-bottom: 70px; justify-content: center; flex-direction: column; align-items: flex-start; }
#news_area .tabs_btn .newsList li { display: flex; gap: 13px; position: relative; }
#news_area .tabs_btn .newsList li:before { position: absolute; height: 6px; width: 6px; background: #dbdbdb; display: block; top: 45%; left: 0; content: ""; z-index: -1; }
#news_area .tabs_btn a { padding: 0px 0 0 20px; font-size: 17px; color: var(--primary); font-weight: 500; display: block; letter-spacing: 0px; }
#news_area .tabs_btn li:last-child a { border-right: 0px solid #515151 }
#news_area .tabs_btn .active a { color: var(--secondary) }
#news_area .tabs_btn .newsList li.active:before { background: var(--secondary); left: 0; opacity: 1; }
#news_Item { display: grid; grid-template-columns: 390px 70%; gap: 20px }
#news_Item .itemTitleBox { position: relative; }
#news_Item .deck01 { margin-bottom: 60px }
#news_Item .tabs_box { position: relative; width: 100%; padding: 70px 70px 90px; }
#news_Item .tabs_box::after { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #f8f8f8; z-index: -1; border-radius: 30px; overflow: hidden; }
#news_Item .tabs_body .tab_info .news_list { border-bottom: 1px solid #dddddd }
#news_Item .tabs_body .tab_info .news_list li { padding: 25px 10px; border-bottom: 1px solid #dddddd; }
#news_Item .tabs_body .tab_info .Txt { display: grid; grid-template-columns: 130px 1fr 60px; gap: 30px; align-items: end }
#news_Item .tabs_body .tab_info .Txt .category { color: var(--secondary) }
#news_Item .tabs_body .tab_info .Txt .btnBox { background-image: url(/images/39/img-n-arrow.png); width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50% }
#news_Item .tabs_body .tab_info .time { font-size: 14px; display: flex; flex-direction: row; align-items: flex-start; gap: 10px; border-right: 1px solid #dddddd }
#news_Item .tabs_body .tab_info .time font.m_txt { color: #2c7ac4; font-weight: 600; font-family: 'Sora',sans-serif; line-height: 70%; font-size: 29px; gap: 4px; display: flex; flex-direction: column }
#news_Item .tabs_body .tab_info .time font.m_txt .year_text { letter-spacing: 0.5px; font-family: 'Sora',sans-serif; font-size: 18px }
#news_Item .tabs_body .tab_info .time font.d_txt { width: 20px; grid-area: time_d; color: var(--dark) }
#news_Item .tabs_body .tab_info h3 { height: auto; font-weight: 500; font-size: 20px; line-height: 160%; -webkit-line-clamp: 1; }
#news_Item .btn { position: absolute; right: 10px; bottom: 30px; width: 35px; height: 35px; padding: 0px 0px; width: 35px; height: 35px; margin: 0; border-radius: 50%; display: flex; justify-content: center }
#news_Item .tabs_box .tabs_btn .moreBtn a { font-weight: 400; color: #fff; font-size: 14px; line-height: 50px; padding: 0 20px }
#news_Item .tabs_body .tab_info .time .classTitle { font-size: 16px; font-weight: 400; writing-mode: sideways-lr; letter-spacing: 2px; color: #787878; }
#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; }
#news_area .track { position: absolute; bottom: 170px; width: 35.5vw; max-width: 100%; overflow: hidden; z-index: 1; white-space: nowrap }
#news_area .track p { font-weight: 600; font-size: 130px; margin: 0; text-transform: uppercase; letter-spacing: 2px; line-height: 1; will-change: transform; animation: marquee 60s linear infinite; font-family: 'Sora',sans-serif; color: #f5f5f5; text-transform: uppercase; text-rendering: geometricPrecision }
@keyframes marquee {
  from { transform: translateX(0) }
  to { transform: translateX(-50%) }
}
/* arrow */
#news_Item .tabs_box .arrow { top: 35px; right: 0; z-index: 5; display: none; }
#news_Item .tabs_box .arrow a { display: flex; justify-content: center; align-items: center; }
#news_Item .tabs_box .arrow a span { background-color: #373737; width: 70px; height: 45px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center }
#news_Item .tabs_box .arrow a.next  span { background-color: #004f9f; }
#news_Item .tabs_box .arrow a span::before { content: ""; position: absolute; top: calc(50% - 5px); right: 50%; width: 10px; height: 10px; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; transform: rotate(45deg); opacity: .5; }
#news_Item .tabs_box .arrow a span::after { content: ""; position: absolute; top: calc(50% - 5px); right: 27px; width: 10px; height: 10px; border-top: 1px solid #fff; border-right: 1px solid  #fff; transform: rotate(45deg) }
#news_Item .tabs_box .arrow a.prev { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
/* about_area */
#wrap { position: relative }
#about_area { padding: 8vw 0 8vw; position: relative; overflow: hidden; }
#about_area .about-area { padding: 150px 8vw; overflow: hidden; }
#about_area .about-box { display: flex; gap: 80px; align-items: center; }
#about_area .left-box,#about_area .right-box { flex: 1; }
#about_area .title-box { position: relative; margin-bottom: 40px; }
#about_area .subtitle {   }
#about_area .about-text { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.4); max-width: 600px; margin-bottom: 40px; margin-top: 70px; }
#about_area .about-list { display: flex; gap: 30px; margin-bottom: 40px; }
#about_area .about-item { flex: 1; text-align: center; padding: 20px; border: 1px solid rgb(129 129 129/8%); transition: 0.3s; background: rgb(221 221 221/5%); }
#about_area .about-item:hover { border-color: var(--primary); background: rgb(16 58 121/5%); }
#about_area .about-item img { width: 57px; height: 57px; margin-bottom: 15px; opacity: 0.7; }
#about_area .item-title { font-size: 14px; font-weight: 700; line-height: 1.4; text-align: center; font-family: 'Sora',sans-serif; }
#about_area .right-box { position: relative; height: 620px; }
#about_area .img-big { position: absolute; width: 80%; height: 100%; right: 0; top: 0; border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
#about_area .img-small { position: absolute; width: 60%; height: 70%; left: -10%; bottom: -5%; border: 1px solid rgba(255,255,255,0.08); z-index: 2; box-shadow: 0 30px 60px rgba(0,0,0,0.5); overflow: hidden; }
#about_area .right-box img { width: 100%; height: 100%; object-fit: cover; transition: 1s cubic-bezier(0.19,1,0.22,1); }
#about_area .reveal { transition: 1.2s cubic-bezier(0.19,1,0.22,1); width: 85%; }
#about_area .reveal-left { transform: translateX(-50px); transition: 1.2s cubic-bezier(0.19,1,0.22,1); }
#about_area .reveal.active,#about_area .reveal-left.active { opacity: 1; transform: none; }
#about_area .pageh1 { font-size: 22px; font-weight: 600; letter-spacing: .5px; line-height: 170%; font-family: 'Sora',sans-serif; }
#about_area article { margin-top: 30px; }
#about_area article p { font-size: 17px; font-weight: 500; letter-spacing: .2px; color: #444444; line-height: 180%; }
/* 全域容器包裹 */
#contactItem { position: relative; width: 100%; background-image: url(/images/39/img-c-bg.jpg); background-position: 60% 50%; background-size: cover; padding: 4vw 0; }
/* Section Container */
#contactItem .workframe { position: relative; display: flex; align-items: center; overflow: hidden; }
#contactItem .wrap { max-width: 1300px; margin: 0 auto; display: flex; flex-direction: row; width: 90%; gap: 50px; }
@media (max-width:1024px) {
  #contactItem .wrap { flex-direction: column; align-items: center; }
}
/* Left Content Box */
#contactItem .leftBox { flex: 1; z-index: 10; }
#contactItem .decoTitle { font-size: 17px; letter-spacing: 0.2em; color: var(--triadic2); margin-bottom: 10px; text-transform: uppercase; font-family: 'Sora',sans-serif; }
#contactItem .title { font-size: clamp(32px,5vw,48px); font-weight: 700; margin-bottom: 25px; line-height: 1.2; color: var(--white); font-family: 'Sora',sans-serif; }
#contactItem .introduction P { font-size: 16px; line-height: 1.8; color: #d4d4d4; margin-bottom: 40px; max-width: 600px; }
/* Bottom Contact Section (原 ID 改為 class 以符合 ID 唯一性) */
#contactItem .contactBottom { margin-top: 50px; display: flex; align-items: center; gap: 30px; padding-top: 30px; border-top: 1px solid rgb(255 255 255/30%); }
#contactItem .contactBottom .contactBtn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 35px; background: transparent; border: 1px solid #00bcd4; color: #00bcd4; text-decoration: none; border-radius: 50px; font-weight: 500; letter-spacing: 0.1em; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; }
#contactItem .contactBottom .contactBtn:hover { background: #00bcd4; color: #050a10; box-shadow: 0 0 20px rgba(0,188,212,0.4); }
#contactItem .contactBottom .infoLabel { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 0.1em; }
#contactItem .contactBottom .infoText { font-size: 15px; color: #ffffff; font-weight: 400; }
/* Right Box - Earth Animation */
#contactItem .rightBox { flex: 1; position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 500px; width: 100%; }
#contactItem .rightBox .Img {position: relative;width: 610px;height: 610px;background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;}
@media (max-width:768px) {
  #contactItem .rightBox .Img { width: 350px; height: 350px; }
}
#contactItem .rightBox .Img div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#contactItem .rightBox img { width: 100%; height: auto; display: block; }
/* Animations */
#contactItem .earth { z-index: 5; animation: float 6s ease-in-out infinite; }
#contactItem .light { z-index: 4; opacity: 0.8; animation: pulse 4s ease-in-out infinite; }
#contactItem .orbit1 { z-index: 3; animation: rotate 40s linear infinite; display: none; }
#contactItem .orbit2 { z-index: 2; animation: rotate 60s linear infinite reverse; display: none; }
#contactItem .orbit3 { z-index: 1; animation: rotate 80s linear infinite; display: none; }
#contactItem .split1 { z-index: 6; animation: floatLayer 5s ease-in-out infinite; }
#contactItem .split2 { z-index: 6; animation: floatLayer 7s ease-in-out infinite alternate-reverse; }
#contactItem .split3 { z-index: 6; animation: floatLayer 6s ease-in-out infinite alternate; }
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.05); opacity: 0.9; }
}
@keyframes floatLayer {
  0%,100% { transform: translate(0,0); }
  33% { transform: translate(10px,-5px); }
  66% { transform: translate(-5px,10px); }
}
/* Scroll Animation States */
#contactItem .observer { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.2,0.8,0.2,1); }
#contactItem .observer.loaded { opacity: 1; transform: translateY(0); }
#contactItem .delay-1 { transition-delay: 0.1s; }
#contactItem .delay-2 { transition-delay: 0.2s; }
#contactItem .delay-3 { transition-delay: 0.3s; }
#contactItem .delay-4 { transition-delay: 0.4s; }
#contactItem .delay-5 { transition-delay: 0.5s; }
#contactItem .delay-6 { transition-delay: 0.6s; }
#contactItem .delay-7 { transition-delay: 0.7s; }
/* book_area */
#book_area { padding: 19vmin 0 0 0; position: relative; background-image: url(/images/39/img-ad-bg.png); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; overflow: hidden }
#book_area .workframe { margin: 0 120px 0 auto }
#book_area .title_box { position: relative; z-index: 10 }
#book_area .title_box .deck01 { position: absolute; right: 10%; top: 0 }
#book_area .title_box .noteBox { margin: 80px 0 50px 0; width: min(80%,400px) }
#book_area .title_box .more_btn { position: absolute; bottom: 0; right: 10%; z-index: 40 }
#book_area .list_box { transform: translateY(-130px) }
#book_area .list_box ul li { padding: 170px 0 0px; margin-right: 60px }
#book_area .list_box ul li .bookItem .img_scale img { width: 100%; aspect-ratio: 4/3.5; object-fit: cover }
#book_area .list_box ul li .bookItem .info_box { width: 100% }
#book_area .list_box ul li .bookItem .info_box .h3title { font-size: 20px; height: auto; margin: 20px 0 10px 0; border-bottom: 1px solid #b9b9b9; padding-bottom: 8px; font-weight: 600; line-height: 190% }
#book_area .list_box ul li .bookItem .info_box .text { -webkit-line-clamp: 2; height: auto }
@media screen and (max-width:1660px) {
  #book_area .workframe { margin: 0 40px 0 auto }
  #news_area::before { height: 260px }
}
@media screen and (max-width:1440px) {
  #book_area .workframe,#news_area .news_box { margin: 0 auto; }
  #news_Item .itemTitleBox { width: 100%; }
  #product_area .productAreaBG { left: -350px; }
  #news_Item .tabs_box { width: calc(100% - 140px); padding: 70px 70px 90px; }
  #product_area .workframe{width: 85%;}
}
@media screen and (max-width:1380px) {
  section .title_box .deco-title { font-size: 76px; top: -70px; }
  section .title_box .subtitle { font-size: 3.1rem }
  #news_Item { gap: 55px; display: flex; flex-direction: column; align-items: flex-start }
  #news_Item .deck01 { display: none }
  #news_Item .tabs_box .arrow { top: -50px; display: none }
  #news_area .track p { font-size: 90px }
}
@media screen and (min-width:1281px) {
  .more_btn.white a:hover font { color: #ffffff }
  #about_area::after { content: ""; position: absolute; background-image: url(/images/39/img-ad-r.png); background-size: auto; background-repeat: no-repeat; background-position: 100% 100%; top: -80px; left: -300px; width: 490px; height: 710px; animation-name: fish; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 10s; }
  #about_area::before {
    content:"";position:absolute;background-image:url(/images/39/img-ad-l.png);background-size:auto;background-repeat:no-repeat;background-position:100% 100%;top:-60px;right:-60px;width:766px;height:677px;
    @keyframes fish {
      0% { top: 0; }
      100% { top: 60px; }
    }
    ;animation-name:fish;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:10s;
  }
  @keyframes fish {
    0% { top: 0; }
    100% { top: 60px; }
  }
  #news_Item .itemTitleBox:after { position: absolute; width: 226px; height: 226px; background: url(/images/39/img-n-01.png) no-repeat 0 100%; background-size: auto; bottom: 0; right: 0; z-index: 11; content: ""; pointer-events: none; }
}
@media screen and (max-width:1280px) {
  section .title_box { margin-bottom: 0px }
  section .title_box .page_title { margin-bottom: 0; }
  #book_area .workframe { margin: 0 auto; grid-template-columns: 1fr; gap: 60px }
  #book_area .title_box .noteBox { width: 100%; margin: 0px 0 40px 0 }
  #news_area .track { width: 100vw; margin-top: 30px; display: none; }
  #about_area .about-box { display: inline-block; width: 100%; }
  #about_area .right-box { margin-top: 60px; text-align: center; display: flex; align-items: center; justify-content: center; }
  #about_area .reveal { width: 100%; }
  #about_area .reveal-left { display: none; }
  #news_area::after { width: 80%; height: 80%; top: 50px; }
  #contactItem:before { content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: linear-gradient(to right,rgb(11 23 29) 30%,rgba(0,0,0,0.1) 100%); background-size: cover; z-index: 0; }
}
@media (max-width:1200px) {
  #imglist .img_nav { position: relative }
}
@media screen and (max-width:1024px) {
    #product_area .workframe:before{display:none;}
  section .title_box .page_title { font-size: 1.5rem }
  section .title_box .noteBox { font-size: 18px; margin-top: 20px }
  #news_area .title_box {   }
  #news_area .tabs_btn .newsList { margin-bottom: 40px }
  #news_area .tabs_btn a { font-size: 15px }
  #about_area .right-box { height: 600px; margin-top: 50px; }
  #product_area .productAreaBG,#contactItem .rightBox { display: none; }
  #product_area .workframe { margin: auto; }
  #about_area { padding: 14vw 0 12vw; }
  #contactItem { padding: 10vw 0; }
}
@media (max-width:960px) {
  #news_area .track p { font-size: 36px }
  #book_area { padding: 6vmin 0 }
  #book_area .list_box { transform: translateY(0px) }
  section .title_box .deco-title { font-size: 42px; top: -50px; }
  #news_Item .tabs_box { width: calc(100% - 60px); padding: 30px 30px 49px; }
  #news_area .tabs_btn .newsList { display: flex; flex-direction: row; justify-content: flex-start; }
}
@media screen and (max-width:768px) {
  section .title_box .subtitle { font-size: 2.4rem; }
  #news_Item .tabs_body .tab_info .news_list li { padding: 15px 10px }
  #news_Item .tabs_body .tab_info .Txt { grid-template-columns: 1fr; gap: 0 }
  #news_Item .tabs_body .tab_info h3 { font-size: 17px }
  #news_Item .tabs_body .tab_info .time { border-right: 0px solid #dddddd }
  #news_Item .tabs_body .tab_info .time .classTitle { display: none }
  #news_Item .tabs_body .tab_info .time font.m_txt { display: flex; flex-direction: row; font-size: 20px; align-items: baseline }
  #book_area .list_box ul li { padding: 10px 0; margin: 10px }
  #book_area .title_box .more_btn { right: 0; position: relative }
  #book_area .title_box { margin-bottom: 30px }
  #about_area .right-box { height: 340px; }
}
@media screen and (max-width:640px) {
  .bottombtn .productbtn img { width: 16px; }
  #product_next::after { top: 6px; }
}