* { /* outline: 1px solid red !important; */ } /* 聯絡我們--------------------------------------------------end */ .white { color: #fff !important; } .gray-1 { color: #646464; } .bold { font-weight: bold; } /* 使用img標籤做成遮罩 */ .img-fit { overflow: hidden; } .img-fit video, .img-fit img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* 使等列項目可以同高 */ .swiper-slide { height: auto; } /* 切到下一個可以破出安全範圍的swiper */ .swiper.has-margin-left { overflow: visible; } /* hover後圖片放大 */ .hover-img-zoom img { transition: all 0.8s ease; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; } .hover-img-zoom:hover img { transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); } /* more-btn */ .more-btn-block { padding-top: 40px; text-align: center; margin: auto; } .has-more-block:not(.more-unclicked) .more-btn-block { /* 表示已點擊過 */ display: none !important; } .more-btn { color: #414141; position: relative; font-weight: bold; width: 200px; text-align: center; /* 以下為特殊處理，將btn作用範圍擴大 */ padding: 10px; margin: -10px auto; cursor: pointer; display: flex; justify-content: center; align-items: center; } .more-btn::after { position: relative; background-image: url(../images/common/auo-more-icon.svg); display: inline-block; background-size: 13px; background-position: center; background-repeat: no-repeat; width: 20px; height: 25px; margin-left: 5px; content: ""; } .more-btn.white::after { background-image: url(../images/common/auo-more-icon-white.svg); } @media screen and (max-width: 767px) { .has-more-block.more-unclicked .mb-show-1>:nth-child(n+2) { display: none !important; } } /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* swiper start */ .swiper-btn-block { display: flex; position: relative; } .swiper-btn-block::before, .swiper-btn-block.dark::before, .swiper-btn-block::after, .swiper-btn-block.dark::after { /* 用以事先載入圖片，避免disabled時才載入 */ position: absolute; content: ''; display: block; width: 0; height: 0; } .swiper-btn-block::before { background-image: url(../images/common/auo-swiper-btn-pre-disable.svg); } .swiper-btn-block.dark::before { background-image: url(../images/common/auo-swiper-btn-dark-pre-disable.svg); } .swiper-btn-block::after { background-image: url(../images/common/auo-swiper-btn-next-disable.svg); } .swiper-btn-block.dark::after { background-image: url(../images/common/auo-swiper-btn-dark-next-disable.svg); } /* 原本的 */ .swiper-btn-block .swiper-btn { position: relative; width: 44px; height: 44px; cursor: pointer; outline: 0 !important; } /* 原本的 */ .swiper-btn-block .swiper-btn+.swiper-btn { margin-left: 24px; } .swiper-btn-block .swiper-btn::before, .swiper-btn-block .swiper-btn::after { position: absolute; content: ''; display: block; width: calc(100% + 20px); height: calc(100% + 20px); background-repeat: no-repeat; background-position: center; background-size: 44px; margin: -10px; z-index: 1; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; } .swiper-btn-block .swiper-btn.swiper-button-disabled { pointer-events: none; } .swiper-btn-block .swiper-btn:hover::before { opacity: 0; } .swiper-btn-block .swiper-btn::after { opacity: 0; } .swiper-btn-block .swiper-btn:hover:after { opacity: 1; } /* 背景淺色 */ .swiper-btn-block .pre-btn::before { background-image: url(../images/common/auo-swiper-btn-pre.svg); } .swiper-btn-block .pre-btn::after { background-image: url(../images/common/auo-swiper-btn-pre-hover.svg); } .swiper-btn-block .pre-btn.swiper-button-disabled::before { background-image: url(../images/common/auo-swiper-btn-pre-disable.svg); } .swiper-btn-block .next-btn::before { background-image: url(../images/common/auo-swiper-btn-next.svg); } .swiper-btn-block .next-btn::after { background-image: url(../images/common/auo-swiper-btn-next-hover.svg); } .swiper-btn-block .next-btn.swiper-button-disabled::before { background-image: url(../images/common/auo-swiper-btn-next-disable.svg); } /* 背景暗色 */ .swiper-btn-block.dark .pre-btn::before { background-image: url(../images/common/auo-swiper-btn-dark-pre.svg); } .swiper-btn-block.dark .pre-btn::after { background-image: url(../images/common/auo-swiper-btn-dark-pre-hover.svg); } .swiper-btn-block.dark .pre-btn.swiper-button-disabled::before { background-image: url(../images/common/auo-swiper-btn-dark-pre-disable.svg); } .swiper-btn-block.dark .next-btn::before { background-image: url(../images/common/auo-swiper-btn-dark-next.svg); } .swiper-btn-block.dark .next-btn::after { background-image: url(../images/common/auo-swiper-btn-dark-next-hover.svg); } .swiper-btn-block.dark .next-btn.swiper-button-disabled::before { background-image: url(../images/common/auo-swiper-btn-dark-next-disable.svg); } @media screen and (max-width: 1199px) { .swiper-btn-block .swiper-btn { width: 36px; height: 36px; } .swiper-btn-block .swiper-btn+.swiper-btn { margin-left: 20px; } .swiper-btn-block .swiper-btn { width: 36px; height: 36px; } .swiper-btn-block .swiper-btn+.swiper-btn { margin-left: 20px; } .swiper-btn-block .swiper-btn::before, .swiper-btn-block .swiper-btn::after { background-size: 36px; } } /* swiper end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* fixed-pattern start */ .fixed-pattern-wrap { overflow-x: hidden; } .fixed-pattern { position: relative; max-width: 1200px; width: 100%; top: 0; left: 50%; transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); } .fixed-pattern::before { content: ''; display: block; background-size: contain; background-position: center; position: absolute; background-repeat: no-repeat; } @media screen and (max-width: 1199px) { .fixed-pattern { max-width: 768px; } } @media screen and (max-width: 767px) { .fixed-pattern { max-width: 360px; } } /* fixed-pattern end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* main-overview start */ .main-overview { background-color: #ffffff; position: relative; overflow: hidden; } .main-overview .fixed-pattern1::before { width: 80px; height: 80px; background-image: url(../images/common/auo-main-overview-pattern1.svg); top: 252px; left: -182px; } .main-overview .fixed-pattern2::before { width: 424px; height: 152px; /* 20220224 DT:三裝置用同一張，不另外出圖 */ background-image: url(../images/common/auo-main-overview-pattern2.png); bottom: 0px; right: -280px; background-position: center bottom; } @media screen and (max-width: 1199px) { .main-overview .fixed-pattern2::before { width: 232px; height: 120px; right: 20px; } .main-overview .fixed-pattern1::before{ width: 56px; height: 56px; } } @media screen and (max-width: 767px) { .main-overview .fixed-pattern2::before { right: 10px; } } /* main-overview end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ .brand-block { padding: 0; } .brand-block ul { display: flex; flex-wrap: wrap; margin: 0 -25px; } .brand-block .click-item { width: 16.66666667%; overflow: hidden; cursor: pointer; padding: 0 25px 50px; } @media screen and (max-width: 1199px) { .brand-block .click-item { width: 25%; } } @media screen and (max-width: 767px) { .brand-block .click-item { width: 33.33%; } } .brand-block h2 { font-size: 18px; color: rgb(0 80 135/var(--tw-text-opacity)); text-align: center; font-weight: 600; text-transform: uppercase; } .brand-block h3 { font-size: 16px; color: #666666; text-align: center; font-weight: 500; text-transform: uppercase; } /* click-insert-block start */ .click-insert-block { padding: 0; } .click-insert-block ul { display: flex; flex-wrap: wrap; margin: 0 -25px; } .click-insert-block .click-item { width: 33.33%; overflow: hidden; cursor: pointer; padding: 0 25px; } .click-insert-block .click-item.blank .content{ position: relative; } .click-insert-block .content { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .click-insert-block.has-selected .content:not(.selected):not(:hover) { opacity: .5; } .click-insert-block .img { } .click-insert-block .content .title { color: #333333; font-weight: 600; text-align: center; padding: 15px 0 50px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .click-insert-block .content.selected .title, .click-insert-block .click-item:hover .content .title { color: var(--auo-blue); } .click-insert-block .clone-item .txt { padding-top: 24px; } .click-insert-block .clone-item .btn-block { /* padding-top: 32px; */ } .click-insert-block .clone-item .btn-grow { width: 247.5px; padding: 14px 16px; height: auto; } .en .click-insert-block .clone-item .btn-grow .btn-title{ line-height: 28px; } .click-insert-block .clone-item .btn-grow .btn-title{ line-height: 26px; } .click-insert-block .insert-item { background-color: var(--gray-5); padding: 60px 0; width: 100%; margin-top: 60px; } @media screen and (max-width: 1199px) { .click-insert-block { padding: 80px 0 120px; } .click-insert-block .click-item { max-width: 320px; } /* 重置 */ .click-insert-block .click-item:nth-of-type(n) { margin: 0; } .click-insert-block .click-item:nth-of-type(2n+1) { margin-left: calc((100% - 688px) / 2); margin-right: 48px; } .click-insert-block .click-item:nth-of-type(n+3), .click-insert-block.has-selected .insert-item~.click-item:nth-of-type(n+3) { margin-top: 48px; } .click-insert-block .img { height: 240px; } .click-insert-block .content .title { font-size: 20px; line-height: 28px; padding-top: 16px; } .click-insert-block .clone-item { max-width: 768px; margin: auto; } .click-insert-block .clone-item .txt { padding-top: 20px; } .click-insert-block .clone-item .btn-block { /* padding-top: 40px; */ } .click-insert-block .clone-item .btn-grow { width: 320px; padding: 13px 16px; height: auto; } .en .click-insert-block .clone-item .btn-grow .btn-title{ line-height: 22px; } .click-insert-block .clone-item .btn-grow .btn-title{ line-height: 22px; } .click-insert-block .insert-item { padding: 40px 0; margin-top: 48px; } } @media screen and (max-width: 767px) { .click-insert-block { padding: 0; } .click-insert-block ul { display: block; } .click-insert-block .click-item { max-width: 100%; } .click-insert-block .click-item { width: 100%; } .click-insert-block .img { height: auto; } .click-insert-block .content .title { color: #333333; font-weight: 600; text-align: center; padding: 15px 0; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } /* 重置 */ .click-insert-block .click-item:nth-of-type(n) { margin: 0 auto; } .click-insert-block .click-item:nth-of-type(n+2), .click-insert-block.has-selected .insert-item~.click-item:nth-of-type(n+2) { margin-top: 40px; } .click-insert-block .insert-item { padding: 40px 0; margin-top: 40px; } .click-insert-block .clone-item { max-width: 100%; } .click-insert-block .clone-item .btn-grow { width: 320px; padding: 13px 16px; height: auto; } .click-insert-block .clone-item .btn-grow .btn-title{ line-height: 22px; } .click-insert-block .clone-item .btn-grow:nth-child(n) { margin: 0 auto; } .click-insert-block .clone-item .btn-block{ display: block; } } /* 低版本safari不兼容gap */ @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { } } /* ---------------text------------------- */ .click-insert-block .btn-block-group{ display: flex; flex-wrap: wrap; padding-top: 32px; } .click-insert-block .btn-block-group .btn-block{ margin-right: 30px; padding-top: 0; } .click-insert-block .btn-block-group .btn-block:nth-child(4n){ margin-right: 0; } .click-insert-block .btn-block-group .btn-block:nth-child(n+5){ margin-top: 24px; } @media screen and (max-width: 1199px) { .click-insert-block .btn-block-group{ padding-top: 40px; } .click-insert-block .btn-block-group .btn-block{ margin-right: 24px; } .click-insert-block .btn-block-group .btn-block:nth-child(2n){ margin-right: 0; } .click-insert-block .btn-block-group .btn-block:nth-child(n+5){ margin-top: 0px; } .click-insert-block .btn-block-group .btn-block:nth-child(n+3){ margin-top: 20px; } } @media screen and (max-width: 767px) { .click-insert-block .btn-block-group{ display: block; } .click-insert-block .btn-block-group .btn-block{ margin-right:0px; } .click-insert-block .btn-block-group .btn-block:nth-child(n+1){ margin-top: 20px; } } /* click-insert-block end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* main-intro-block start */ .main-intro-block { padding: 0 0 60px; position: relative; z-index: 1; } .main-intro-block .title { font-weight: bold; text-align: left; padding-bottom: 30px; line-height: 40px; } .main-intro-block .intro-block { display: flex; flex-wrap: wrap; position: relative; } .main-intro-block .img { width: 540px; } .main-intro-block .img img { width: 100%; margin-bottom: 30px; } .main-intro-block .txt1 { width: 480px; margin-left: 200px; } .main-intro-block .txt2 { width: 100%; padding-top: 60px; } .main-intro-block ul { } .main-intro-block li { list-style:none; font-size: 18px; color: #333333; line-height: 2; margin:0px !important; position: relative; } .main-intro-block li::before { position: absolute; content: "▪"; left: -20px; } @media screen and (max-width: 1199px) { .main-intro-block { padding: 0 0 40px; } .banner-select-block~.main-content .main-intro-block { padding: 60px 0 80px; } .main-intro-block .title { padding-bottom: 20px; font-size: 26px; line-height: 36px; } .main-intro-block .img { width: 320px; } .main-intro-block .txt1 { width: auto; margin-left: 48px; } .main-intro-block .txt2 { padding-top: 40px; } } @media screen and (min-width: 768px) { .main-intro-block .more-btn-block { display: none !important; } } @media screen and (max-width: 767px) { .main-intro-block .intro-block { display: block; } .main-intro-block .img { margin: auto; width:100%; padding: 0 0 20px; } .main-intro-block .more-content { margin: 40px 0 0; } .main-intro-block .more-unclicked .more-content { max-height: 132px; overflow: hidden; margin: 40px 0 0; } .main-intro-block .txt1 { margin: 0; width: 100%; } .main-intro-block .txt2 { width: 100%; padding-top: 22px; } .main-intro-block .more-btn-block { padding-top: 40px; text-align: center; margin: auto; } .main-intro-block .has-more-block:not(.more-unclicked) .more-btn-block { /* 表示已點擊過 */ display: none !important; } .main-intro-block .more-btn { color: #414141; position: relative; font-weight: bold; width: 200px; text-align: center; /* 以下為特殊處理，將btn作用範圍擴大 */ padding: 10px; margin: -10px auto; cursor: pointer; } } /* main-intro-block end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* main-tab-swiper-block start */ .main-tab-swiper-block { position: relative; overflow: hidden; } .main-tab-swiper-block::before { position: absolute; content: ''; display: block; background-color: var(--gray-4); width: 100%; height: 10px; bottom: 0; } .main-tab-swiper .swiper-wrapper { align-items: flex-end; } .main-tab-swiper .swiper-slide { flex: 1; height: 100%; } .main-tab-swiper .swiper-slide+.swiper-slide { margin-left: 24px; } .main-tab-swiper a { display: flex; /* position: relative; */ font-weight: bold; text-align: center; color: var(--gray-2); justify-content: center; flex-wrap: wrap; } .main-tab-swiper .active a { color: var(--auo-blue); } .main-tab-swiper a .txt { width: 100%; } .main-tab-swiper a::after { position: relative; content: ''; display: block; width: 100%; height: 16px; margin-top: 16px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .main-tab-swiper .active a::after { background-color: #64DCF0; } .main-tab-swiper .tab-indicator { position: absolute; height: 16px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; background-color: #64DCF0; width: 0px; bottom: 0; pointer-events: none; } @media screen and (min-width: 1200px) { /* 1200以上才需要hover效果 */ .main-tab-swiper a:hover { color: var(--auo-blue); } .main-tab-swiper .hover-active .tab-indicator { width: 100%; opacity: 1; } } @media screen and (max-width: 1199px) { .main-tab-swiper-block::before { height: 8px; } .main-tab-swiper .swiper-slide { flex: unset; width: 200px !important; min-width: 200px; } .main-tab-swiper .swiper-slide+.swiper-slide { margin-left: 12px; } .main-tab-swiper a { font-size: 18px; line-height: 26px; } .main-tab-swiper a::after { height: 12px; margin-top: 8px; } } /* main-tab-swiper-block end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* main-video-block start */ .main-video-block { padding: 120px 0; position: relative; overflow: hidden; background-color: var(--gray-5); } .main-video-block .title { padding-bottom: 40px; text-align: center; } .main-video-block *+.video-list { padding-top: 60px; } .main-video-block .video-list li { display: flex; align-items: center; } .main-video-block .video-list li+li { padding-top: 80px; } .main-video-block .video-list .img { width: 540px; height: 405px; position: relative; } .main-video-block .video-list .img::after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.2); background-image: url(../images/common/auo-video-bg-gray.svg); background-size: auto 100%; background-position: right; background-repeat: no-repeat; } .main-video-block .video-list .img a { display: block; height: 100%; position: relative; overflow: hidden !important; clip-path: content-box; } .main-video-block .video-list .img a::after, .main-video-block .video-list .img a::before { top: 0; left: 0; position: absolute; content: ''; display: block; width: 100%; height: 100%; border-radius: 0 50% 50% 0 !important; } .main-video-block .video-list .img a::after { background-image: url(../images/common/auo-icon-video-play.svg); background-position: center; background-repeat: no-repeat; background-size: 88px; z-index: 2; } .main-video-block .video-list .txt { width: 480px; margin-left: 60px; } .main-video-block .video-list .title { padding-bottom: 20px; text-align: left; } .main-video-block .video-list .brief { padding-bottom: 20px; } @media screen and (max-width: 1199px) { .main-video-block { padding: 80px 0; } .main-video-block .title { font-size: 26px; line-height: 36px; padding-bottom: 20px; } .main-video-block *+.video-list { padding-top: 80px; } .main-video-block .video-list .img { width: 320px; height: 240px; } .main-video-block .video-list .img a::after { background-size: 60px; } .main-video-block .video-list .txt { width: 320px; margin-left: 48px; } .main-video-block .video-list .title { font-size: 22px; line-height: 28px; } } @media screen and (max-width: 767px) { .main-video-block .video-list li { flex-wrap: wrap; } .main-video-block .video-list .img { order: 1; margin: 40px auto 0; } .main-video-block .video-list .txt { width: 100%; margin-left: 0; } } @media screen and (max-width: 359px) { .main-video-block .video-list .img { width: 280px; height: 210px; } } /* main-video-block end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* main-full-img-block start */ .main-full-img-block { position: relative; min-height: 640px; } .main-full-img-block .img-fit { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .main-full-img-block .img-fit::after { position: absolute; content: ''; display: block; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: 0.4; } .main-full-img-block .txt { max-width: 880px; padding: 160px 0; margin: auto; text-align: center; position: relative; z-index: 1; } .main-full-img-block .title { padding-bottom: 20px; } .main-full-img-block p { padding-bottom: 40px; } @media screen and (max-width: 1199px) { .main-full-img-block { min-height: 420px; } .main-full-img-block .txt { max-width: 600px; padding: 80px 0; } .main-full-img-block p { padding-bottom: 20px; } } @media screen and (max-width: 767px) { .main-full-img-block .txt { max-width: 100%; } } /* main-full-img-block end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* main-application-block start */ .main-application-block { background-color: var(--auo-blue); padding: 80px 0 120px; overflow: hidden; } .main-application-block .title { padding-bottom: 24px; } .main-application-block .title a { display: inline-block; margin-left: 40px; } .main-application-block .application-swiper { transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; margin-left: calc((100% - 1080px)/2); width: calc(100% - (100% - 1080px)/2); } .main-application-block .swiper-btn-block { padding-bottom: 40px; } /* 寫margin-left在swiper切換時會無法與上方標題切齊 */ /* 最後一則須留間隔拿掉:not(:last-child) */ .main-application-block .swiper-slide { margin-right: 24px; } .main-application-block .swiper-slide { width: 488px; } .main-application-block .img-fit { height: 376px; } .main-application-block .swiper-slide .title { padding: 20px 0 8px; } @media screen and (max-width: 1199px) { .main-application-block { padding: 80px 0; } .main-application-block .swiper-btn-block { padding-bottom: 24px; } .main-application-block .application-swiper { width: calc(100% - (100% - 688px)/2); margin-left: calc((100% - 688px)/2); } .main-application-block .swiper-slide { width: 280px; } .main-application-block .swiper-slide .title { padding: 16px 0 6px; } .main-application-block .img-fit { height: 216px; } /* 寫margin-left在swiper切換時會無法與上方標題切齊 */ .main-application-block .swiper-slide{ margin-right: 20px; } } @media screen and (max-width: 767px) { .main-application-block .application-swiper { width: calc(100% - 20px); margin-left: 20px; } .main-application-block .swiper-slide .title { padding: 16px 0 8px; } .main-application-block .btn-block { padding-top: 36px; } } /* main-application-block end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* main-sticky-block start */ .main-sticky-block { background-color: var(--auo-blue); padding: 0 0 132px; position: relative; } .main-sticky-block .container { position: relative; display: flex; } .main-sticky-block .left-block, .main-sticky-block .right-block { padding-top: 120px; } .main-application-block+.main-sticky-block .left-block, .main-application-block+.main-sticky-block .right-block { margin-top: -120px; } .main-sticky-block .left-block { position: sticky; top: 0; width: 258px; height: 100vh; } .main-sticky-block .pattern-block { position: absolute; top: 0; left: 0; width: calc(100vw - 10px); left: calc((-100vw + 1080px)/2); height: 775px; overflow: hidden; } .main-sticky-block .pattern-wrap { width: 100vw; } /* pattern若非定位在left-block上，會跟著捲動 */ .main-sticky-block .pattern-wrap::before { position: absolute; z-index: -1; content: ''; display: block; background-repeat: no-repeat; background-size: contain; background-position: center; width: 332px; height: 540px; /* 須貼著瀏覽器 */ left: calc((-100vw + 1080px)/2); left: 0; top: 187px; background-image: url(../images/solution/auo-solution-pattern3.png); } .main-sticky-block .pattern-wrap::after { position: absolute; z-index: -1; content: ''; display: block; background-repeat: no-repeat; background-size: contain; background-position: center; width: 40px; height: 40px; left: calc((100vw - 1080px)/2 + 1329px); top: 252px; background-image: url(../images/solution/auo-solution-pattern4.png); } .main-sticky-block .right-block { margin-left: 122px; width: 700px; } .main-sticky-block li { display: flex; } .main-sticky-block li+li { padding-top: 72px; } .main-sticky-block .img { width: 120px; height: 120px; } .main-sticky-block .img img { object-fit: contain; } .main-sticky-block .txt { width: 520px; margin-left: 60px; } .main-sticky-block .brief { padding-top: 10px; } .main-sticky-block a { display: inline-block; padding: 10px; margin: 0 -10px -10px; } @media screen and (max-width: 1199px) { .main-sticky-block { padding: 0 0 80px; position: relative; } .main-sticky-block .left-block, .main-sticky-block .right-block { padding-top: 80px; } .main-application-block+.main-sticky-block .left-block, .main-application-block+.main-sticky-block .right-block { margin-top: -80px; } .main-sticky-block .left-block { width: 248px; } .main-sticky-block .pattern-block { width: calc(100vw - 10px); left: calc((-100vw + 768px)/2 - 100px); height: 775px; } .main-sticky-block .pattern-wrap { width: 100vw; } /* pattern若非定位在left-block上，會跟著捲動 */ .main-sticky-block .pattern-wrap::before { width: 280px; height: 320px; top: 57px; } .main-sticky-block .pattern-wrap::after { /* 因sticky無法同時設定overflow-hidden，平板與手機會超出裝置寬 */ display: none; } .main-sticky-block .right-block { margin-left: 40px; width: 408px; } .main-sticky-block li+li { padding-top: 40px; } .main-sticky-block .img { width: 80px; height: 80px; } .main-sticky-block .txt { width: 312px; margin-left: 16px; } .main-sticky-block .brief, .main-sticky-block a { padding-top: 8px; } } @media screen and (max-width: 767px) { .main-sticky-block .container { display: block; } .main-sticky-block .left-block { width: 100%; height: auto; position: relative; } .main-sticky-block .right-block { margin: 0px !important; width: 100%; padding-top: 40px; } .main-sticky-block .txt { width: auto; flex: 1; } } /* main-sticky-block end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* main-related-info-block start */ .main-related-info-block { background-color: var(--energetic-yellow); padding: 120px 0; overflow: hidden; } .main-related-info-block .title { padding-bottom: 24px; } .main-related-info-block .swiper-btn-block { padding-bottom: 40px; } .main-related-info-block .related-swiper { width: calc(100% - (100% - 1080px)/2); margin-left: calc((100% - 1080px)/2); } .main-related-info-block .swiper-slide { width: 344px; } /* 寫margin-left在swiper切換時會無法與上方標題切齊 */ /* 拿掉:not(:last-child) */ .main-related-info-block .swiper-slide { margin-right: 24px; } .main-related-info-block .img { height: 344px; } .main-related-info-block .tag { padding-top: 12px; } .main-related-info-block .related-swiper .title { padding: 8px 0 0; } @media screen and (max-width:1199px) { .main-related-info-block { padding: 80px 0 127px; } .main-related-info-block .swiper-btn-block { padding-bottom: 24px; } .main-related-info-block .related-swiper { width: calc(100% - (100% - 688px)/2); margin-left: calc((100% - 688px)/2); } .main-related-info-block .swiper-slide { width: 240px; } .main-related-info-block .img { height: 240px; } } @media screen and (max-width: 767px) { .main-related-info-block .related-swiper { width: calc(100% - 20px); margin-left: 20px; } .main-related-info-block .tag { padding-top: 16px; } } /* main-related-info-block end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* main-contact-block start */ /*.main-contact-block { position: relative; padding-top: 90px; padding-bottom: 90px; width: 100%; min-height: 400px; display: flex; justify-content: center; align-items: flex-start; background-image: url('../images/auocrystal_contactbg_pc.png'); background-size: cover; background-position: center top; background-repeat: no-repeat; }*/ .main-contact-block { background-color: var(--smart-blue); background-clip: content-box; overflow: hidden; padding-top: 45px; margin-top: -45px; } .main-contact-block .list { display: flex; align-items: center; position: relative; } .main-contact-block li { display: flex; flex-wrap: wrap; color: #ffffff; } .main-contact-block li+li { margin-left: 80px; padding-left: 80px; } /* 有兩塊才需要白線，白線高度要依整個區塊高度 */ .main-contact-block li+li::before { position: absolute; content: ''; display: block; width: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.4); height: calc(100% - 160px); } .main-contact-block .txt { width: 460px; padding-bottom: 40px; } .main-contact-block .btn-block { width: 100%; } .main-contact-block .fixed-pattern1::before { width: 40px; height: 40px; background-image: url(../images/common/auo-contact-block-pattern1.png); top: 187px; left: -143px; } .main-contact-block .fixed-pattern2::before { width: 360px; height: 324px; background-image: url(../images/common/auo-contact-block-pattern2.png); top: -45px; right: -200px; } @media screen and (max-width:1199px) { .main-contact-block { padding-top: 32px; margin-top: -32px; min-height: auto; padding-bottom: 0; } .main-contact-block .list { padding: 80px 0; min-height: 308px; align-items: flex-start; } .main-contact-block li+li { margin-left: 24px; padding-left: 24px; } .main-contact-block li+li::before { height: calc(100% - 120px); } .main-contact-block .txt { width: 320px; } .main-contact-block .fixed-pattern2::before { width: 200px; height: 155px; top: -32px; right: auto; left: 580px; background-size: auto 100%; background-position: left center; } .main-contact-block .fixed-pattern1::before { width: 28px; height: 28px; } } @media screen and (max-width: 767px) { .main-contact-block { } .main-contact-block .list { padding: 80px 0; min-height: auto; display: block; } .main-contact-block li+li { margin: 60px 0px 0; padding: 60px 0px 0; position: relative; } /* 有兩塊才需要白線，白線高度要依整個區塊高度 */ .main-contact-block li+li::before { width: 100%; height: 2px; top: 0; left: 0; transform: translate(0%, 0%); -moz-transform: translate(0%, 0%); -webkit-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); } .main-contact-block .txt { width: 100%; } .main-contact-block .fixed-pattern2::before { right: -70px; left: auto; width: 185px; background-position: 0 0; background-size: auto 100%; } } /* main-contact-block end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* 影片popup start */ .mfp-bg { background-color: #003C65; } .mfp-iframe-holder { padding: 100px 0; } .mfp-iframe-holder .mfp-content { max-width: 768px; } .mfp-iframe-holder .mfp-content::after { position: absolute; content: ''; display: block; width: 100%; height: 100%; background-color: black; top: 0; left: 0; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; pointer-events: none; } .mfp-iframe-holder .mfp-content.load::after { opacity: 0; } .mfp-iframe-holder .mfp-close { padding: 0; right: 0; height: 76px; line-height: normal; top: auto; bottom: 100%; opacity: 1; /* background-position: right top; background-repeat: no-repeat; background-size: auto 48px; background-image: url(../images/common/auo-popup-close-btn.svg); */ transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; /* position: relative; */ } .mfp-iframe-holder .mfp-close::before, .mfp-iframe-holder .mfp-close::after{ content: ''; display: block; position: absolute; width: 48px; height: 48px; padding: 0; right: 0; height: 76px; line-height: normal; top: 0; bottom: 100%; background-position: right top; background-repeat: no-repeat; background-size: auto 48px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .mfp-iframe-holder .mfp-close::before{ background-image: url(../images/common/auo-popup-close-btn.svg); opacity: 1; } .mfp-iframe-holder .mfp-close::after{ background-image: url(../images/common/auo-popup-close-hover.svg); opacity: 0; } .mfp-iframe-holder .mfp-close:hover::after{ opacity: 1; } .mfp-iframe-holder .mfp-close:hover::before{ opacity: 0; } /* .mfp-iframe-holder .mfp-close:hover { background-image: url(../images/common/auo-popup-close-hover.svg); } */ .mfp-iframe-holder iframe { background-color: black; } .mfp-iframe-holder iframe video { width: 100%; height: 100%; } @media screen and (max-width: 1199px) { .mfp-iframe-holder { padding: 100px 40px; } } @media screen and (max-width: 767px) { .mfp-iframe-holder { padding: 80px 20px; } } /* 影片popup end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* 原地播放影片(mp4) start */ .video-wrap { position: relative; cursor: pointer; } /* 20220505 service單元youtube外連影片 */ .video-wrap.youtube-wrap{ padding-bottom: 56.25%; } .video-wrap::after { position: absolute; content: ''; display: block; width: 100%; height: 100%; background-image: url(../images/common/auo-icon-video-play.svg); background-repeat: no-repeat; background-position: center; background-size: 108px; background-color: rgba(0, 0, 0, .2); left: 0; top: 0; pointer-events: none; } .video-wrap.youtube-wrap::after{ background-color: transparent; background-image: none; } .video-wrap.youtube-wrap iframe{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .video-wrap.play::after { display: none; } .video { max-width: 100%; cursor: pointer; display: block; } .video::-webkit-media-controls { opacity: 0; pointer-events: none; } .play .video::-webkit-media-controls { opacity: 1; pointer-events: all; } @media screen and (max-width: 1199px) { .video-wrap::after { background-size: 60px; } } /* 原地播放影片 end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* .main-feature-block start */ .main-feature-block { padding: 0 0 160px; /* background-color: var(--gray-5); */ } .main-feature-block li { display: flex; padding: 40px 0; } .main-feature-block li.img-down { flex-wrap: wrap; } .main-feature-block li+li { /* padding-top: 80px;*/ } .main-feature-block .title { padding-bottom: 40px; } .main-feature-block li:not(.img-down) .txt { padding-top: 28px; } .main-feature-block .txt { width: 50%; } .main-feature-block .img-down .txt { width: 100%; } .main-feature-block .img-left .txt { margin-left: 60px; order: 1; } .main-feature-block .img-left ol { display: block; list-style-type: decimal; color:var(--gray-1); } .main-feature-block .img-left ol li { display: list-item; padding: 5px 0; } .main-feature-block .txt .title { padding-bottom: 20px; } .main-feature-block .img-down .title { text-align: center; padding-bottom: 40px; } .main-feature-block .img { width: 50%; margin-left: 60px; } .main-feature-block .img-down .img { padding-top: 40px; width: 100%; margin-left: 0px; } .main-feature-block .img-left .img { margin-left: 0px; } .main-feature-block .img img { width: 100%; } @media screen and (max-width: 1199px) { .main-feature-block { padding: 80px 0; } .main-feature-block .title { padding-bottom: 20px; } .main-feature-block .txt { width: 320px; } .main-feature-block li:not(.img-down) .txt { padding-top: 20px; } .main-feature-block .img-left .txt { margin-left: 48px; } .main-feature-block .img { width: 320px; margin-left: 48px; } } @media screen and (max-width: 767px) { .main-feature-block { padding: 40px 0; } .main-feature-block li { flex-wrap: wrap; } .main-feature-block .txt { width: 100%; } .main-feature-block .img-down .title { text-align: left; padding-bottom: 20px; } .main-feature-block li:not(.img-down) .txt { padding-top: 0px; } .main-feature-block .txt:nth-child(n) { margin: 0; order: 0; } .main-feature-block .img { margin: 0; padding: 40px 0 0; width: 100%; } } .main-feature-block2 { padding: 120px 0 160px; } /* .main-feature-block end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* .error-404 start */ .error-404 { background-image: url(../images/common/auo-404.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; min-height: calc(100vh - 120px); padding: 280px 0; } .error-404 .content-block { max-width: 680px; } .error-404 .title { padding-bottom: 28px; } .error-404 .txt { padding-bottom: 40px; } @media screen and (max-width: 1199px) { .error-404 { min-height: calc(100vh - 547px); padding: 120px 0; } .error-404 .content-block { max-width: 320px; } .error-404 .title { padding-bottom: 20px; } .error-404 .txt { padding-bottom: 20px; } } @media screen and (max-width: 767px) { .error-404 { background-image: url(../images/common/auo-404-mb.jpg); min-height: calc(100vh - 513px); padding: 120px 0 160px; } .error-404 .content-block { max-width: 100%; } } /* .error-404 end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* sitemap start */ .txt-banner { background-color: var(--gray-5); min-height: 218px; } .txt-banner .title { padding: 60px 0; } .sitemap { padding: 80px 0 120px; } .sitemap .fixed-pattern1::before { position: absolute; content: ''; display: block; width: 106px; height: 114px; background-image: url(../images/common/auo-sitemap-pattern.png); top: -110px; right: -159px; } .sitemap .list { display: flex; flex-wrap: wrap; } .sitemap .list>li { width: 320px; margin-right: 60px; } .sitemap .list>li:nth-child(3n) { margin-right: 0; } .sitemap .list>li:nth-child(n+4) { padding-top: 80px; } .sitemap .list .title { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--gray-5); } .sitemap .sub-list li+li { padding-top: 10px; } .sitemap .sub-list a { color: var(--gray-1); display: inline-block; padding: 0px 10px; margin: 0px -10px; line-height: 24px; } .sitemap .sub-list li+li { padding-top: 10px; } .sitemap .sub-list a:hover { color: var(--smart-blue); } @media screen and (max-width: 1199px) { .sitemap { padding: 80px 0; } .sitemap .list>li:nth-child(n) { width: calc((100% - 60px)/2); margin-right: 60px; } .sitemap .list>li:nth-child(2n) { margin-right: 0; } .sitemap .list>li:nth-child(n+3) { padding-top: 80px; } } @media screen and (max-width: 767px) { .sitemap { padding: 60px 0; } .sitemap .list>li:nth-child(n) { width: 100%; margin-right: 0px; } .sitemap .list>li:nth-child(n+2) { padding-top: 60px; } } /* sitemap end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* open-close-list start */ .open-close-item>.title { position: relative; transition: all .5s; cursor: pointer; } .open-close-item .content { display: none; } .open-close-item .arrow { position: absolute; left: 24px; /* top: 35px; */ top: 50%; } .open-close-item .arrow:before, .open-close-item .arrow:after { content: ""; display: block; background-color: var(--smart-blue); position: absolute; top: 50%; left: 0px; -webkit-transition: .35s; transition: .35s; width: 24px; height: 4px; } .open-close-item .arrow:before { -webkit-transform: translatey(-50%); transform: translatey(-50%); } .open-close-item .arrow:after { -webkit-transform: translatey(-50%) rotate(90deg); transform: translatey(-50%) rotate(90deg); } .open-close-item.open .arrow:after { -webkit-transform: translatey(-50%) rotate(0); transform: translatey(-50%) rotate(0); } @media screen and (max-width: 1199px) { .open-close-item .arrow { left: 16px; top: 30px; } .open-close-item .arrow:before, .open-close-item .arrow:after { width: 20px; } } /* right-block open close */ .right-block .right-open-close-wrapper li.open-close-item{ /* width: 600px; */ width: 100%; border-bottom: 1px solid var(--gray-5); } .right-block .right-open-close-wrapper .open-close-list li:first-child{ border-top: 1px solid var(--gray-5); } .right-block .right-open-close-wrapper li .title{ padding: 20px 24px 20px 72px; } .right-block .right-open-close-wrapper .open-close-item .content .html-edit li{ border-top: none; border-bottom: none; } .right-block .right-open-close-wrapper .open-close-item .content{ padding: 8px 24px 20px 72px; } /* full page open close */ .full-open-close-wrapper .open-close-item .title { padding: 20px 23px 20px 72px; } .full-open-close-wrapper .open-close-item .content{ padding: 8px 23px 20px 72px; } .full-open-close-wrapper .open-close-list .open-close-item{ border-bottom: 1px solid var(--gray-5); } .full-open-close-wrapper .open-close-list .open-close-item:first-child{ border-top: 1px solid var(--gray-5); } .full-open-close-wrapper .open-close-item .btn-block{ padding-top: 20px; } @media screen and (max-width: 1199px) { } @media screen and (max-width: 1199px) { .right-block .right-open-close-wrapper li .title{ padding: 16px 16px 16px 52px; } .right-block .right-open-close-wrapper .open-close-item .content{ padding: 0 16px 20px 16px; } .full-open-close-wrapper .open-close-item .title{ padding: 16px 23px 16px 52px; } .full-open-close-wrapper .open-close-item .content{ padding: 0px 16px 20px; } } @media screen and (max-width: 767px) { } /* open-close-list end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* Elin start */ /* =====================================search-page start=============================*/ /* =====================================search-page start=============================*/ /* =====================================search-page start=============================*/ .search-page.container{ padding-top: 80px; padding-bottom: 80px; } /* .search-page .search-input + .btn-block{ padding-top: 0; } */ .search-form.search-page{ display: flex; justify-content: center; padding-top: 0; } @media screen and (max-width: 767px) { .search-form.search-page{ flex-wrap: wrap; justify-content: flex-start; } } /* =====================================search-page end=============================*/ /* =====================================search-page end=============================*/ /* =====================================search-page end=============================*/ /* ========================== Banner ======================= */ /* ========================== Banner ======================= */ /* ========================== Banner ======================= */ /* ========================== Banner ======================= */ /* .banner-select-block > .container, .banner-block > .container{ padding: 0 40px; } */ .bg-cover{ background-position: center; background-repeat: no-repeat; background-size: cover; } .banner-block { position: relative; overflow: hidden; height: 420px; } .banner-line { background-color: #fff; height: 1px; width: 100%; margin: 18px 0; } .banner-info { width: 100%; } .breadcrumb { background-color: transparent; padding: 32px 0; z-index: 50; margin: 0 auto; max-width: 1440px; } .breadcrumb-type-b *, .breadcrumb * { color: var(--auo-blue); } .breadcrumb-type-b span, .breadcrumb span { padding: 0 5px; } .banner-block:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; display: block; z-index: -1; } .breadcrumb + .banner-title{ top: 160px; transform: translate(0%, 0%); -moz-transform: translate(0%, 0%); -webkit-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); } .banner-title { position: absolute; top: 50%; transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); } /* type-b */ .banner-type-B .pattern-block{ position: absolute; top: 0; left: 0; width: 57.3%; height: 100%; z-index: -1; background-size: cover; background-position: left; } .banner-type-B .pattern-block.products{ background-image: url('../images/banner/auo-banner-pattern-product.jpg'); } .banner-type-B .pattern-block.solution{ background-image: url('../images/banner/auo-banner-pattern-solution.jpg'); } .banner-type-B .pattern-block.services{ background-image: url('../images/banner/auo-banner-pattern-services.jpg'); } .banner-type-B .pattern-block.technologies{ background-image: url('../images/banner/auo-banner-pattern-technologies.jpg'); } .banner-type-B .image-block{ position: absolute; top: 0; right: 0; width: 42.7%; height: 100%; z-index: -1; } .banner-type-B .banner-title{ width: calc(100% * 0.573 - (100% - 1080px) / 2); padding-right: 40px; } .banner-select-block{ width: 100%; height: 80px; background-color: var(--gray-6); padding: 13px 0; } .select-block{ position: relative; width: auto; display: inline-block; } .banner-select{ min-width: 400px; height: 54px; border: 0; background-color: var(--gray-6); color: var(--auo-blue); /* background: url("../images/common/auo-select-arrow.svg") no-repeat right 17px center transparent; */ /* position: relative; */ z-index: 2; cursor: pointer; padding-right: 48px; } .select-block::after{ content: ''; display: block; position: absolute; right: 13px; top: 50%; transform: translate(0,-50%); width: 30px; height: 30px; background-image: url("../images/common/auo-select-arrow.svg"); background-repeat: no-repeat; background-size: cover; /* background-position:; */ z-index: 1; pointer-events: none; background-position: center; } @media (max-width: 1199px) { .breadcrumb{ padding-top: 24px; } .banner-block { /*0609 Elin 32:7的圖伸縮於1200後高度為 262.5 ，在舊型平板中難以渲染出0.5px而出現白邊，故所有tb banner都減少1px，由263->262 */ height: 262px; background-position: center; } .banner-type-A.banner-block{ background-size: 1200px; } .banner-block .container { padding-top: 0; } .breadcrumb + .banner-title, .banner-title{ top: 90px; transform: translate(0%, 0%); -moz-transform: translate(0%, 0%); -webkit-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); } .banner-type-B .pattern-block{ width: 59.88%; } .banner-type-B .image-block{ width: 40.12%; } .banner-type-B .banner-title{ width: calc(100% * 0.598758 - 80px); padding-right: 0px; } /* select */ .banner-select-block{ height: 64px; } .banner-select{ min-width: 320px; height: 38px; } .select-block::after{ width: 20px; height: 20px; right: 0; } } @media (max-width: 767px) { .banner-block{ height: 200px; background-image: none!important; } .banner-mb{ height: 200px; } .breadcrumb + .banner-title, .banner-title{ top: 80px; max-width: calc(100% - 40px); } .banner-type-B.banner-block{ height: auto; } .banner-type-B .pattern-block{ position: static; width: 100%; height: 160px; background-position: center; } .banner-type-B .pattern-block.product{ background-image: url('../images/banner/auo-banner-pattern-product-m.jpg'); } .banner-type-B .pattern-block.solution{ background-image: url('../images/banner/auo-banner-pattern-solution-m.jpg'); } .banner-type-B .pattern-block.services{ background-image: url('../images/banner/auo-banner-pattern-services-m.jpg'); } .banner-type-B .pattern-block.technologies{ background-image: url('../images/banner/auo-banner-pattern-technologies-m.jpg'); } .banner-type-B .image-block-m{ width: 100%; height: 280px; } .banner-type-B .breadcrumb + .banner-title, .banner-type-B .banner-title{ top: 48px; width: auto; } .select-block{ width: 100%; } .banner-select{ width:100%; height: 38px; margin-left: 0; padding-left: 0; } .select-block::after{ width: 20px; height: 20px; right: 0; } } @media (max-width: 559px) { .banner-type-B .image-block-m{ height: auto; aspect-ratio: 2 / 1; } } /* html edit page banner */ .video-banner .title, .html-banner .title, .html-banner .tag{ padding: 140px 0 0; } .html-banner .tag{ font-size: 20px; /* tbc */ line-height: 24px; } .html-banner .tag + .title{ padding-top: 20px; } .html-banner .container{ position: relative; z-index: 1; } .video-banner .brief, .html-banner .brief{ padding-top: 20px; } .video-banner .brief{ padding-bottom: 80px; } .share-published-wrapper { display: flex; justify-content: space-between; padding-top: 0; padding-bottom: 40px; } .share-published-wrapper p{ align-self: flex-end; } /* 0602 */ .addthis-wrapper .at-share-btn-elements a{ /* background-color: transparent!important; */ /* padding: 0; */ /* margin: 0 0 0 16px; */ } .addthis-wrapper .img{ width: 176px; height: 48px; } .video-banner .fixed-pattern1, .html-banner .fixed-pattern1{ max-width: none; z-index: 0; } .newsarchieve-pattern::before{ width: 380px; height: 315px; /* 1200container */ /* top: -244px; right: -556px; */ top: -244px; right: -96px; background-image: url('../images/media/auo-media-newsarchive-pattern.png'); } .media-event-pattern::before{ background-image: url('../images/media/auo-media-event-pattern.png'); top: -266px; right: 0; width: 292px; height: 324px; } .gallery-video-pattern::before{ width: 134px; height: 390px; top: -120px; right: 0; background-image: url('../images/media/auo-media-gallery-video-1.png'); } .blog-pattern::before{ width: 308px; height: 408px; top: -288px; right: 0; background-image: url('../images/media/auo-media-blog-pattern.png'); } .case-pattern::before{ width: 323px; height: 368px; right: 0; top: -308px; background-image: url('../images/media/auo-media-casestudy-banner-pattern.png'); } @media screen and (max-width: 1199px) { .video-banner .title, .html-banner .title{ padding: 40px 0 0; } .html-banner .tag + .title{ padding-top: 16px; } .video-banner .brief, .html-banner .brief { padding-top: 8px; } .video-banner .brief{ padding-bottom: 60px; } .share-published-wrapper{ display: block; padding: 40px 0; } .addthis-wrapper{ padding-top: 20px; } .addthis-wrapper .at-share-btn-elements a:first-child{ margin-left: 0; } /* 0602 */ .addthis-wrapper .img{ width: 128px; height: 32px; } .addthis-wrapper .at-icon-wrapper, .addthis-wrapper .at-icon-wrapper > svg{ /* width: 32px!important; */ /* height: 32px!important; */ /* line-height: 32px!important; */ } .addthis-wrapper .at-resp-share-element.at-mobile .at-share-btn{ /* margin-right: 0; */ } .newsarchieve-pattern::before{ width: 206px; height: 171px; top: -126px; right: -68px; } .media-event-pattern::before{ background-image: url('../images/media/auo-media-event-pattern-tb.png'); top: -110px; right: 0; width: 154px; height: 171px; } .gallery-video-pattern::before{ width: 67px; height: 195px; top: -52px; right: 0; background-image: url('../images/media/auo-media-gallery-video-1.png'); } .case-pattern::before{ width: 150px; height: 171px; right: 0; top: -126px; background-image: url('../images/media/auo-media-casestudy-banner-pattern.png'); } .blog-pattern::before{ width: 129px; height: 171px; top: -110px; right: 0; background-image: url('../images/media/auo-media-blog-pattern-tb.png'); } } @media screen and (max-width: 767px) { .video-banner .title, .html-banner .title{ padding-top: 60px; } .newsarchieve-pattern::before{ width: 206px; height: 171px; top: -110px; right: -88px; } .case-pattern::before{ top: -130px; } .html-banner .tag + .title{ padding-top: 8px; } } /* html edit page banner */ /* ========================== Banner END ======================= */ /* ========================== Banner END ======================= */ /* ========================== Banner END ======================= */ /* ========================== Banner END ======================= */ /* ========================== Banner END ======================= */ /*----------------------popup 登入跳窗start---------------------------------------------------------------- */ .lightbox { position: fixed; width: 100%; height: 101%; background-color: var(--mask-color); z-index: 1000; display: none; top: 0; left: 0; overflow: auto; } .lightbox.display { display: block; } .lightbox .lightbox-container { background-color: #fff; width: 680px; margin: auto; margin-top: 240px; text-align: center; padding: 80px 70px 60px; position: relative; border-radius: 32px; margin-bottom: 80px; } .lightbox .lightbox-container .lightbox-close { width: 48px; height: 48px; position: absolute; right: 24px; top: 24px; cursor: pointer; font-size: 0; line-height: 0; } .lightbox .lightbox-container .lightbox-close::before, .lightbox .lightbox-container .lightbox-close::after{ content: ''; display: block; top: 0; left: 0; width: 100%; height: 100%; position: absolute; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; } .lightbox .lightbox-container .lightbox-close::before{ background-image: url('../images/common/auo-close.svg'); opacity: 1; } .lightbox .lightbox-container .lightbox-close::after{ background-image: url('../images/common/auo-close-hover.svg'); opacity: 0; } .lightbox .lightbox-container .lightbox-close:hover::before{ opacity: 0; } .lightbox .lightbox-container .lightbox-close:hover::after{ opacity: 1; } .lightbox-container > .inner-content{ padding-top: 40px; } .lightbox-container > .btn-block{ padding-top: 40px; justify-content: center; } @media screen and (max-width: 1199px){ .lightbox .lightbox-container { padding: 80px 40px 60px; } } @media screen and (max-width: 767px) { .lightbox{ padding: 0 20px; } .lightbox .lightbox-container { width: 100%; margin-top: 120px; } } /*---------------------------- popup登入跳窗end-------------------------------------------------------------------------------------------------------------------------------- */ /* ============================unsubscribe start====================================== */ /* ============================unsubscribe start====================================== */ /* ============================unsubscribe start====================================== */ .unsubcribe{ background-color: var(--sustainable-green); min-height: calc(100vh - 120px); padding: 160px 0 280px; } .unsubcribe .content-block{ max-width: 628px; margin: 0 auto; position: relative; z-index: 0; } .unsubcribe .info{ padding-top: 20px; } .unsubcribe .unsubcribe-content{ margin-top: 140px; padding: 60px 40px; background-color: #fff; } .unsubcribe-input-block{ padding-top: 10px; display: flex; flex-wrap: wrap; display: -webkit-flex; /* Safari */ -webkit-flex-wrap: wrap; /* Safari 6.1+ */ } .unsubcribe-input-block .btn-block:before, .unsubcribe-input-block .btn-block::after, .unsubcribe-input-block input[type="text"].search-input:before, .unsubcribe-input-block input[type="text"].search-input:after, .unsubcribe-input-block:before, .unsubcribe-input-block:after { display: none; /* IE doesn't support `initial` */ } .unsubcribe-input-block input[type="text"].search-input{ width: 400px; background-color: var(--gray-5); } @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { .unsubcribe-input-block input[type="text"].search-input{ width: 392px; } } } .unsubcribe-input-block .btn-block{ max-width: 140px; } @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { .unsubcribe-input-block .btn-block{ max-width: 148px; } } } .unsubcribe .fixed-pattern1::before{ background-image: url('../images/index/auo-index-pattern-2.png'); top: -188px; left: 57px; width: 378px; height: 387px; transform: scaleX(-1); } .unsubcribe-input-block p.error{ display: none; } .unsubcribe-input-block.not-filled p.error{ display: block; order: 1; } @media screen and (max-width: 1199px){ .unsubcribe{ min-height: calc(100vh - 547px); padding: 120px 0; } .unsubcribe .unsubcribe-content{ margin-top: 28px; padding: 40px; } .unsubcribe-input-block .btn-block{ max-width: 130px; } .unsubcribe .content-block, .unsubcribe .unsubcribe-content{ max-width: 560px; } .unsubcribe-input-block input[type="text"].search-input{ width: 342px; margin-right: 8px; } .unsubcribe .fixed-pattern1::before{ width: 218px; height: 224px; top: -89px; left: -89px; } .unsubcribe-input-block{ padding-top: 16px; } } @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { @media (max-width: 1199px){ .unsubcribe-input-block .btn-block { max-width: 138px; } .unsubcribe-input-block input[type="text"].search-input{ width: 336px; margin-right: 8px; } } } } @media screen and (max-width: 767px){ .unsubcribe{ min-height: calc(100vh - 513px); padding: 80px 0; } .unsubcribe-input-block .btn-block{ padding-top: 20px; order: 1; max-width: none; } .unsubcribe .content-block, .unsubcribe .unsubcribe-content { max-width: none; } .unsubcribe .unsubcribe-content{ background-color: transparent; margin-top: 110px; padding: 0; } .unsubcribe-input-block input[type="text"].search-input{ width: 100%; margin-right: 0; background-color: #fff; } .unsubcribe-input-block{ flex-wrap: wrap; } .unsubcribe .fixed-pattern1{ max-width: none; } .unsubcribe-input-block.not-filled p.error{ width: 100%; } .unsubcribe-input-block.not-filled p.error + .btn-block{ padding-top: 12px; } } /* ============================unsubscribe end====================================== */ /* ============================unsubscribe end====================================== */ /* ============================unsubscribe end====================================== */ /* =====================next section ======================= */ .next-section{ display: block; padding: 72px 0; background-color: var(--innovative-purple); position: relative; z-index: 3; } .next-container{ padding-left: 330px; } .next-info{ margin-top: 8px; display: flex; } .next-info span{ position: relative; } .next-info span::after{ content: ""; display: block; width: 56px; height: 100%; background-image: url("../images/common/auo-btn-line-blue.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; transition: all 0.4s ease; position: absolute; top: 0; right: 0; transform: translateX(100%); } .next-fixed-pattern1::before{ width: 80px; height: 80px; top: -92px; left: 140px; background-image: url('../images/index/auo-index-pattern-7.png'); } @media screen and (max-width: 1199px) { .next-section{ padding: 40px 0; } .next-container{ padding-left: 200px; } .next-info span::after{ width: 36px; } .next-fixed-pattern1::before{ width: 56px; height: 56px; top: -53px; left: auto; right: 40px; } } @media screen and (max-width: 767px){ .next-container{ padding-left: 20px; } .next-info span{ display: block; position: relative; width: 100%; padding-right: 56px; } .next-info span::after{ transform: translateX(0) } } /* ===================common-swiper-type1====================================== */ .swiper.common-swiper-type1{ width: calc(100% - (100% - 1080px)/2); margin-left: calc((100% - 1080px)/2); padding-top: 40px; } .common-swiper-type1 .swiper-slide{ margin-right: 24px; } .common-swiper-type1 .swiper-slide { width: 440px; } .common-swiper-type1 .swiper-slide .img{ height: 340px; } .common-swiper-type1 .swiper-slide .title{ padding-top: 20px; } .common-swiper-type1 .swiper-slide p{ padding-top: 8px; } @media screen and (max-width: 1199px) { .common-swiper-type1 .swiper-slide .img{ height: 216px; } .swiper.common-swiper-type1 { width: 100%; margin-left: 0; padding: 24px 40px 0; } .common-swiper-type1 .swiper-slide{ width: 280px; } .common-swiper-type1 .swiper-slide{ margin-right: 20px; } .common-swiper-type1 .swiper-slide:last-child{ margin-right: 0; } .common-swiper-type1 .swiper-slide .title{ padding-top: 16px; } } @media screen and (max-width: 767px){ .swiper.common-swiper-type1 { padding: 24px 20px 0; } } /* =================common select ===================== */ /* =================common select ===================== */ /* =================common select ===================== */ .common-select select{ width: 100%; padding: 16px 60px 16px 24px; border-radius: 28px; background-color: var(--gray-6); border: none; color: var(--auo-blue); } .common-select.mt-40-28{ margin-top: 40px; } @media screen and (max-width: 1199px) { .common-select select{ padding: 13px 46px 13px 16px; } .common-select::after{ right: 16px; } .common-select.mt-40-28{ margin-top: 28px; } } /*======================== tab-swiper-type-1 ============*/ /*======================== tab-swiper-type-1 ============*/ /*======================== tab-swiper-type-1 ============*/ /*======================== tab-swiper-type-1 ============*/ .tab-swiper-type-1{ background-color: var(--auo-blue); padding: 120px 0; } .tab-swiper-thumb-block{ margin-top: 40px; } .tab-swiper-thumb .swiper-slide{ width: 240px; cursor: pointer; } .tab-swiper-thumb .swiper-wrapper{ align-items: center; } .tab-swiper-thumb .swiper-slide + .swiper-slide{ margin-left: 40px; } .tab-swiper-thumb .swiper-slide h2{ color: rgba(255, 255, 255, 0.7); max-height: 60px; position: relative; } /* 0627 擴大點及範圍 */ .tab-swiper-thumb .swiper-slide h2::after{ content: ''; position: absolute; top: 0; left: 0; width:calc(100% + 20px); height: calc(100% + 20px); margin: -10px; } .tab-swiper-thumb .swiper-slide:hover h2{ font-weight: bold; } .tab-swiper-thumb .swiper-slide-thumb-active h2{ color: var(--energetic-yellow); font-weight: bold; } .main-content-swiper-block{ padding-top: 80px; } .main-content-swiper .swiper-slide{ display: flex; } .main-content-swiper .left-img{ width: 500px; margin-right: 60px; } .main-content-swiper .right-content{ width: calc(100% - 560px); } .main-content-swiper .right-content h1{ padding-top: 20px; } .main-content-swiper .right-content p, .main-content-swiper .right-content .btn-block{ padding-top: 20px; } .main-content-swiper .right-content .btn-block ~ .btn-block{ padding-top: 10px; } @media screen and (max-width: 1199px) { .tab-swiper-type-1{ padding: 80px 0; } .tab-swiper-thumb .swiper-slide h2{ /* line-height: 36px; */ max-height: 52px; } .tab-swiper-thumb-block{ margin: 0 auto; margin-top: 40px; max-width: 224px; position: relative; } .tab-swiper-thumb-block .swiper-slide{ width: 224px; } .tab-swiper-thumb .swiper-slide + .swiper-slide{ margin-left: 0; } .tab-swiper-thumb-block .swiper-btn-block{ justify-content: space-between; position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); } .tab-swiper-thumb-block .pre-btn{ margin-left: -48px; } .tab-swiper-thumb-block .next-btn{ margin-right: -48px; } .tab-swiper-thumb-block .swiper-btn-block .swiper-btn+.swiper-btn{ margin-left: 0; } .main-content-swiper .left-img{ width: 320px; margin-right: 48px; } .main-content-swiper .right-content{ width: calc(100% - 368px); } .main-content-swiper .right-content h1{ padding-top: 0; } .main-content-swiper-block{ padding-top: 44px; } } @media screen and (max-width: 767px){ .main-content-swiper .swiper-slide{ display: block; } .main-content-swiper-block{ padding-top: 28px; } .main-content-swiper .left-img{ width: 100%; margin-right: 0; } .main-content-swiper .right-content{ width: 100%; padding-top: 24px; } .main-content-swiper .right-content .btn-block{ padding-top: 24px; } } /* left-right-open-close */ /* aside left nav */ .left-bar-type .left-block{ width: 300px; margin-right: 80px; } .left-bar-type .right-block{ width: calc(100% - 380px); } .left-bar-type ul.left-bar > li > a { display: block; margin-left: -40px; padding: 20px 0 16px 40px; font-size: 22px; line-height: 30px; font-weight: bold; color: var(--gray-2); } .left-bar-type .left-block ul > li:first-child > a{ margin-top: -20px; } .left-bar-type ul.left-bar > li.active > a{ color: var(--auo-blue); } .left-bar-type ul.left-bar > li:hover > a{ color: var(--auo-blue); } .left-bar-type ul.left-bar > li.has-item > ul > li:first-child > a{ padding-top: 4px; } .left-bar-type ul.left-bar > li.has-item > ul { padding-bottom: 20px; } .left-bar-type ul.left-bar > li.has-item > ul > li > a{ display: flex; margin-left: 0; padding: 8px 0 8px 20px; color: var(--gray-1); font-weight: normal; align-items: center; } .left-bar-type ul.left-bar > li.has-item > ul > li:hover a{ color: var(--smart-blue); } .left-bar-type ul.left-bar > li.has-item > ul > li:first-child > a{ margin-top: 0; } .left-bar-type ul.left-bar > li.has-item > ul > li.active > a{ color: var(--smart-blue); } .left-bar-type ul.left-bar > li.has-item > ul > li.active > a::after{ content: ''; display:block; width: 24px; height: 24px; background-image: url('../images/common/auo-leftbar-arrow.svg'); margin-left: 48px; } .left-bar-type ul.left-bar > li.has-item > ul{ display: none; } @media screen and (max-width: 1199px) { .left-bar-type .right-block{ width: 100%; } } @media screen and (max-width: 767px) { } /* click-insert-card-block */ .clone-close-wrapper{ margin-top: 40px; } .click-insert-card-block{ width: 100%; } .click-insert-card-block>ul{ display: flex; flex-wrap: wrap; /* gap: 28px; */ } .click-insert-card-block .click-card { padding: 24px 28px 20px; width: 336px; /* margin-right: 28px; */ background-color: rgba(0,80,135,0.4); cursor: pointer; transition: all .4s; } .click-insert-card-block .click-card:nth-of-type(odd){ margin-right: 28px; } .click-card:nth-of-type(n+3){ margin-top: 28px; } .click-card:hover .jop-title{ transition: all .4s; } .click-card .name{ padding: 16px 0; transition: all .4s; } .click-card .arrow{ width: 28px; height: 28px; margin-top: auto; position: relative; } .click-card .arrow::before, .click-card .arrow::after{ content: ''; display: block; width: 100%; height: 100%; position: absolute; background-position: center; background-repeat: no-repeat; background-size: cover; transition: opacity .4s; } .click-card .arrow::before{ background-image: url('../images/common/auo-click-card-arrow-down.svg'); opacity: 1; } .click-card .arrow::after{ background-image: url('../images/common/auo-click-card-arrow-up.svg'); opacity: 0; } .click-card:hover, .click-insert-card-block .click-card.selected{ background-color: var(--auo-blue); } .click-card:hover .jop-title, .click-card:hover .name, .click-card.selected .jop-title, .click-card.selected .name{ color: var(--energetic-yellow); } .click-card.selected .arrow::before{ opacity: 0; } .click-card.selected .arrow::after{ opacity: 1; } .click-insert-card-block .insert-item{ padding:40px 0 12px 0; width: 100%; } .click-insert-card-block .clone-card{ padding: 40px; background-color: var(--gray-5); } .en .click-insert-card-block .content{ min-height: 118px; } .click-insert-card-block .content{ min-height: 116px; height: 100%; display: flex; flex-direction: column; } .click-insert-card-block>ul .insert-item:last-child{ padding-bottom: 0; } @media screen and (max-width: 1199px) { .abjust-tb-mr{ margin-left: calc((100% - 688px) / 2); } .container.tb-fluid{ max-width: none; width: 100%; padding: 0; } .click-insert-card-block>ul{ /* gap: 20px 48px; */ } .click-insert-card-block .click-card:nth-of-type(odd){ margin-right: 48px; } .click-card:nth-of-type(n+3){ margin-top: 20px; } .click-insert-card-block .content { min-height: 108px; } .en .click-insert-card-block .content { min-height: 108px; } .click-insert-card-block .click-card:nth-of-type(2n+1){ margin-left: calc((100% - 688px) / 2); } .click-insert-card-block .click-card{ width: 320px; } .click-insert-card-block .insert-item{ padding: 40px 0 20px 0; } .clone-card-html-wrapper{ max-width: 688px; margin: 0 auto; } } @media screen and (max-width: 767px) { .abjust-tb-mr{ margin-right: 0; margin-left: 0; padding: 0 20px; } .abjust-tb-mr.common-select::after{ right: 36px; } .click-insert-card-block>ul{ display: block; } .click-insert-card-block .click-card{ margin-right: 0; } .click-insert-card-block .click-card:nth-of-type(n){ margin: 0 auto; margin-top: 20px; } .click-insert-card-block .clone-card{ padding: 40px 20px; } .click-insert-card-block .insert-item{ padding: 40px 0 20px; } } /* ================== popup card for leader and auoers====================================== */ /* ================== popup card for leader and auoers====================================== */ /* ================== popup card for leader and auoers====================================== */ .js-pop-card-noscroll-html{ overflow: hidden!important; } .js-pop-card-noscroll-body{ overflow: hidden!important; scrollbar-gutter: stable; } .leader-card-popup-wrapper{ padding: 80px 0 0 360px; height: 100%; width: 100%; display: none; position: fixed; z-index: 999; top: 0; left: 0; background-color: #003c6599; overflow-y: auto; overflow-x: hidden; /* display: flex; align-items: flex-start; */ } .js-control-popup{ display: none; position: relative; right: -100%; } .leader-card-popup{ padding: 80px 0 0 160px; background-color: white; width: 100%; max-width: 1560px; min-width: 1140px; min-height: 807px; border-radius: 50px 0 0 50px; margin-left: auto; display: flex; position: relative; flex-shrink: 0; overflow-x: hidden; /* right: -100%; */ } .leader-card-popup .left-card{ width: 300px; margin-right: 60px; flex-shrink: 0; } .leader-card-popup .left-card .img{ height: 363px; } .leader-card-popup .right-info{ width: 620px; flex-shrink: 0; } .leader-card-popup .name{ padding-top: 16px; } .leader-card-popup .info{ padding-top: 8px; } .leader-card-popup .close-btn{ cursor: pointer; width: 48px; height: 48px; position: absolute; left: 60px; top: 40px; } .leader-card-popup .close-btn::before{ content: ''; display: block; position: absolute; background-image: url('../images/common/auo-close.svg'); width: 48px; height: 48px; background-position: center; background-repeat: no-repeat; background-size: cover; transition: .4s; opacity: 1; } .leader-card-popup .close-btn::after{ content: ''; display: block; position: absolute; background-image: url('../images/common/auo-close-hover.svg'); width: 48px; height: 48px; background-position: center; background-repeat: no-repeat; background-size: cover; transition: .4s; opacity: 0; } .leader-card-popup .close-btn:hover::before{ opacity: 0; } .leader-card-popup .close-btn:hover::after{ opacity: 1; } .leader-card-popup .card-fixed-pattern{ flex-shrink: 0; } .leader-card-popup .card-fixed-pattern{ position: absolute; background-image: url('../images/about/auo-about-leader-ship-card-pattern1.png'); width: 371px; height: 270px; bottom: 0; left: 1140px; background-position: center; background-repeat: no-repeat; background-size: cover; } @media screen and (max-width: 1639px) { .leader-card-popup-wrapper{ padding: 40px 0 0 40px; } .leader-card-popup{ padding: 88px 40px 182px 28px; width: 100%; min-height: calc(100vh - 40px); display: block; max-width: 728px; min-width: 728px; } .leader-card-popup .close-btn{ width: 36px; height: 36px; top: 28px; left: 28px; } .leader-card-popup .close-btn::before, .leader-card-popup .close-btn::after{ width: 36px; height: 36px; } .leader-card-popup .right-info, .leader-card-popup .left-card{ width: auto; } .leader-card-popup .right-info{ padding-top: 28px; } .leader-card-popup .left-card{ margin-right: 0; } .leader-card-popup .left-card .img{ width: 160px; height: 200px; } .leader-card-popup .card-fixed-pattern{ width: 250px; height: 182px; left: auto; right: 40px; } .leader-card-popup .name{ padding-top: 8px; } .leader-card-popup .info{ padding-top: 0px; } } @media screen and (max-width: 1199px) { .leader-card-popup-wrapper{ padding: 40px 0 0 40px; } .leader-card-popup .info{ font-size: 16px; line-height: 24px; } .leader-card-popup{ /* padding: 88px 40px 182px 28px; width: 100%; min-height: calc(100vh - 40px); */ /* display: block; */ /* max-width: none; min-width: 100%; */ } /* .leader-card-popup .close-btn{ width: 36px; height: 36px; top: 28px; left: 28px; } .leader-card-popup .close-btn::before, .leader-card-popup .close-btn::after{ width: 36px; height: 36px; } .leader-card-popup .right-info, .leader-card-popup .left-card{ width: auto; } .leader-card-popup .right-info{ padding-top: 28px; } .leader-card-popup .left-card{ margin-right: 0; } .leader-card-popup .left-card .img{ width: 160px; } .leader-card-popup .card-fixed-pattern{ width: 250px; height: 182px; left: auto; right: 40px; } */ } @media screen and (max-width: 767px) { .leader-card-popup{ padding: 88px 20px 40px 28px; max-width: none; min-width: 100%; } } /*==================== pagenation 開始=======================*/ /*==================== pagenation 開始=======================*/ /*==================== pagenation 開始=======================*/ /*==================== pagenation 開始=======================*/ .new-pagenation-wrapper{ margin-top: 40px; display: flex; justify-content: center; align-items: center; /* gap: 0 16px; */ } .page-btn{ display: block; position: relative; width: 36px; height: 36px; } .page-btn::before, .page-btn::after{ position: absolute; content: ''; display: block; width: calc(100% + 20px); height: calc(100% + 20px); background-repeat: no-repeat; background-position: center; background-size: 36px; margin: -10px; /* z-index: 1; */ transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; } .page-pre-btn::before{ background-image: url(../images/common/auo-swiper-btn-pre.svg); } .page-pre-btn::after { background-image: url(../images/common/auo-swiper-btn-pre-hover.svg); } .page-pre-btn.disabled::before { background-image: url(../images/common/auo-swiper-btn-pre-disable.svg); } .page-next-btn::before { background-image: url(../images/common/auo-swiper-btn-next.svg); } .page-next-btn::after { background-image: url(../images/common/auo-swiper-btn-next-hover.svg); } .page-next-btn.disabled::before { background-image: url(../images/common/auo-swiper-btn-next-disable.svg); } .page-btn.disabled { pointer-events: none; } .page-btn:hover::before { opacity: 0; } .page-btn::after { opacity: 0; } .page-btn:hover:after { opacity: 1; } .page-block{ display: flex; /* gap: 20px; */ margin-left: 16px; margin-right: 16px; } .page{ display: block; text-align: center; font-weight: bold; min-width: 32px; height: 32px; position: relative; color: rgba(0, 80, 135, 0.5); transition: .4s ease; } .page + .page{ margin-left: 20px; } .page.active, .page:hover{ color: var(--auo-blue); } .page::after{ content: ''; position: absolute; display: block; width: calc(100% + 20px); height: calc(100% + 20px); margin: -10px; top: 0px; left: 0px; z-index:1; } @media screen and (max-width: 1199px) { .new-pagenation-wrapper{ margin-top: 60px; /* gap: 0 12px; */ } .page{ height: 28px; } .page-block{ /* gap: 16px; */ margin-left: 12px; margin-right: 12px; } .page + .page{ margin-left: 16px; } .page::after{ width: calc(100% + 12px); margin: -10px -6px; } .page-btn{ width: 36px; height: 36px; } .page-btn::before, .page-btn::after { background-size: 36px; width: calc(100% + 12px); margin: -10px -6px; } } /*================================ html inner page =======================*/ .media-inner{ padding: 60px 0; } .media-inner .btn-block{ margin-top: 80px; justify-content: center; } @media screen and (max-width: 1199px) { .media-inner{ padding: 40px 0; } .media-inner .btn-block{ margin-top: 60px; } } @media screen and (max-width: 767px) { } /*================================ html inner page END =======================*/ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* .application-block start */ .application-block { padding: 120px 0; } .application-block .list { padding-top: 80px; display: flex; flex-wrap: wrap; } .application-block li { width: 520px; border-bottom: 1px solid var(--gray-5); } .application-block li:nth-child(-n+2) { border-top: 1px solid var(--gray-5); } .application-block li:nth-child(2n) { margin-left: 40px; } .application-block li .title { padding: 20px 72px; } .application-block .content { padding: 20px 40px 20px 72px; } .application-block img { max-width: 240px; width: 100%; } @media screen and (max-width: 1199px) { .application-block { padding: 80px 0 120px; } .application-block .list { padding-top: 40px; } .application-block li { width: calc((100% - 48px)/2); } .application-block li:nth-child(2n) { margin-left: 48px; } .application-block .content { padding: 0 16px 20px; } .application-block li .title { padding: 16px; padding-left: 52px; } .application-block img { max-width: 288px; } } @media screen and (max-width: 767px) { .application-block li { width: 100%; } .application-block li:nth-child(2n) { margin-left: 0px; } .application-block li:nth-child(n+2) { border-top: none; } } /* .application-block end */ /* ===================================================================================================== ===================================================================================================== ===================================================================================================== */ /* ===================award marquee start================================= */ /* ===================award marquee start================================= */ /* ===================award marquee start================================= */ .award-marquee-wrapper{ max-width: 1870px; margin: 0 auto; } .award-marquee{ padding: 120px 0; } .award-marquee-wrapper{ padding-top: 40px; margin: 0 auto; max-width: 1920px; overflow: hidden; } .award-marquee-content{ width: 1870px; display: flex; flex-wrap: nowrap; animation: scrolling var(--award-marquee-animation-duration) linear infinite; } .award-marquee-content:hover{ animation-play-state: paused; } @keyframes scrolling { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-1 * 370px * var(--award-marquee-elements))); } } .award-marquee-item, .award-marquee-item .img{ width: 340px; height: 280px; } .award-marquee-content .award-marquee-item{ margin-right: 30px; } .award-marquee-item > a{ display: block; } @media screen and (max-width: 1199px) { .award-marquee{ padding: 80px 0; } .award-marquee-wrapper { padding-top: 20px; } .award-marquee-content{ width: 714px; } @keyframes scrolling { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-1 * 182px * var(--award-marquee-elements))); } } .award-marquee-item, .award-marquee-item .img { width: 168px; height: 138px; } .award-marquee-content .award-marquee-item{ margin-right: 14px; } } @media screen and (max-width: 767px) { } /* time line sticky */ .bottom-timeline-block{ padding-bottom: 120px; } .bottom-timeline-block .timeline{ padding-top: 80px; width: 140px; } /* 0627 Elin 若JS未計算到高度時 由CSS給予預設最小值 */ .bottom-timeline-block .left-block { height:768px; } .time-slide a { margin: 0; display: block; padding: 20px 0 20px 36px; color: #B3CBDB; position: relative; } .time-slide a::before{ content: ''; position: absolute; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background-color: var(--auo-blue); border: 2px solid #B3CBDB; top: 50%; left: 4px; transform: translateY(-50%); } .time-slide.active > a{ color: #fff; font-size: 40px; line-height: 56px; } .time-slide.active > a::before{ width: 24px; height: 24px; border: none; background-color: var(--smart-blue); left: 0px; } .time-slide:first-child{ margin-top: -20px; } .time-swiper-wrapper{ position: relative; } .time-swiper-wrapper::before{ position: absolute; content: ''; display: block; width: 0; height:calc(100% - 68px); border-right: 2px solid #B3CBDB; left: 11px; top: 28px; } .time-slide:hover a{ color: #fff; } .year-content-item{ display: flex; } .year-content-item .right-img{ width: 306px; margin-right: 60px; height: auto; } .year-content-item .left-text{ width: calc(100% - 366px); } .year-content-item .left-text p{ padding-top: 8px; } .year-content-item + .year-content-item{ margin-top: 60px; } .bottom-timeline-block .right-block{ padding-top: 80px; margin-left: 100px; width: calc(100% - 240px); } .swiper.timeline-swiper{ height: 100%; } .timeline-swiper .swiper-slide{ color: #B3CBDB; padding: 20px 0 20px 36px; cursor: pointer; transition: .4s; } .timeline-swiper .swiper-slide-thumb-active{ color: #fff; font-size: 40px; line-height: 56px; transition: .4s; } /* .timeline-swiper .swiper-slide.swiper-slide-thumb-active::after{ height: 102px; } */ .timeline-swiper .swiper-slide:first-child{ margin-top: -20px; } /* .timeline-swiper .swiper-slide:first-child::after{ height: 36px; top: auto; bottom: 0; } */ .timeline-swiper .swiper-slide:last-child::after{ height: 36px; } .timeline-swiper .swiper-slide:hover{ color: #fff; } .timeline-swiper .swiper-slide::before{ content: ''; position: absolute; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background-color: var(--auo-blue); border: 2px solid #B3CBDB; top: 50%; left: 4px; transform: translateY(-50%); z-index: 1; } .timeline-swiper .swiper-slide.swiper-slide-thumb-active::before{ background-color: var(--smart-blue); border: none; left: 0; width: 24px; height: 24px; } .timeline-swiper .swiper-wrapper{ height: auto; } .timeline-swiper .swiper-wrapper::before{ content: ''; position: absolute; position: absolute; width: 2px; background-color: #B3CBDB; left: 12px; top: 18px; height: calc(100% - 60px); } @media screen and (max-width: 1199px) { .bottom-timeline-block .timeline{ position: static; padding-top: 0; width: calc(100% + 80px); margin: 0 -40px; height: auto; overflow:hidden; } .bottom-timeline-block{ padding: 60px 0 80px; } .bottom-timeline-block .container{ display: block; } .bottom-timeline-block .tab-list{ display: flex; margin-left: 60px; } .swiper.timeline-swiper{ overflow: visible; width: calc(100% - (100% - 648px)/2); margin-left: calc((100% - 648px)/2) } .timeline-swiper .swiper-wrapper{ display: flex; /* padding-left: 60px; */ } .timeline-swiper .swiper-wrapper::before{ display: none; } .bottom-timeline-block .timeline{ position: relative; } .bottom-timeline-block .timeline::before{ content: ''; display: block; position: absolute; width: 100%; height: 2px; background-color: #B3CBDB; bottom: 8px; left: 0; } .timeline-swiper .swiper-slide:first-child{ margin-top: 0; } .timeline-swiper .swiper-slide{ width: 64px; padding: 0 0 24px 0; line-height: 36px; text-align: center; margin-right: 8px; } .timeline-swiper .swiper-slide::after{ border: none; } .timeline-swiper .swiper-slide-thumb-active{ font-size: 26px; line-height: 36px; } .timeline-swiper .swiper-slide::before{ width: 12px; height: 12px; top: auto; bottom: 2px; left: 50%; transform: translateX(-50%) translateY(0%); } .timeline-swiper .swiper-slide.swiper-slide-thumb-active::before{ top: auto; bottom: 0; width: 16px; height: 16px; left: 50%; } .timeline-swiper li{ display: flex; align-items: center; /* padding-bottom: 24px; */ } .timeline-swiper li:first-child{ margin-top: 0; } .timeline-swiper li > a{ min-width: 64px; padding: 0; margin-right: 8px; text-align: center; vertical-align: middle; padding-bottom: 24px; } .timeline-swiper li > a::before{ top: auto; bottom: -1px; left: 50%; transform: translate(-50%,0); width: 12px; height: 12px; } .timeline-swiper li.active > a{ font-size: 26px; line-height: 32px; } .timeline-swiper ul::before{ width: calc(100% + 60px); height: 2px; top: auto; bottom: 9px; left: -60px; border: none; background-color: #B3CBDB; } .timeline-swiper li.active > a::before{ width: 16px; height: 16px; left: 50%; transform: translate(-50%, 0); bottom: 2px; } .year-content-item .right-img{ width: 200px; margin-right: 40px; height: 150px; } .year-content-item .left-text{ width: calc(100% - 240px); } .bottom-timeline-block .right-block{ padding-top: 60px; margin: 0 auto; width: 608px; } } @media screen and (max-width: 767px) { .bottom-timeline-block .timeline{ width: calc(100% + 40px); margin: 0 -20px; } .bottom-timeline-block .right-block{ width: 100%; } .year-content-item{ display: block; } .year-content-item .right-img{ margin: 0 auto; } .year-content-item .left-text{ width: 100%; padding-top: 16px; } .year-content-item + .year-content-item{ margin-top: 40px; } .swiper.timeline-swiper{ width: calc(100% - 20px); margin-left: 20px; /* margin-right: 20px; */ } } .anchor-position{ position:relative; top: -185px; } @media screen and (max-width: 1199px) { .anchor-position{ top: -120px; } } .p-brand { position: relative; left: -30px; top: 0; } @media screen and (max-width: 1199px) { .p-brand{ left: -30px; } } .p-brand img{ width: 200px !important; } @media screen and (max-width: 1199px) { .p-brand img{ width: 150px !important; } } @media screen and (max-width: 767px) { .p-brand img{ width: 130px !important; } } .titleBox { position: relative; margin-bottom: 3rem !important; } .titleBox .title{ position: relative; font-size: 36px; } .titleBox .title::before { top: calc(100% + 20px); left: 50%; transform: translateX(-50%); width: 100px; height: 4px; background-color: #1469B9; content: ""; position: absolute; } .form-block { padding: 50px 30px 0; margin: 60px auto 0; position: relative; border-top: 5px solid #F0F0F0; max-width: 1100px; width: 100%; } .form-block fieldset { margin:0 auto!important; max-width:950px!important; width:100% } .form-block fieldset>div { width:100% } .form-block .hs-form-field { margin-bottom:10px } .form-block .hs-fieldtype-textarea label { margin-bottom:10px } .form-block .hs-fieldtype-textarea .input { border:none } .form-block .hs_recaptcha { display:none } .form-block .hs-submit { position:absolute; top:0; left:0; opacity:0; pointer-events:none } .form-block .form-columns-1, .form-block .form-columns-2 { display:-webkit-box; display:-ms-flexbox; display:flex; gap:0 30px } .form-block label { padding:0 10px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:reverse; -ms-flex-direction:row-reverse; flex-direction:row-reverse; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end } .form-block label span { font-weight:700; font-size:1rem; line-height:1.6 } .form-block label .hs-form-required { margin-right:10px; color:#E2233D } .form-block .input { margin:0!important } .form-block .input input, .form-block .input select { padding:10px; width:100%!important; background:none; border:none; border-bottom:1px solid rgba(79,95,107,0.2); border-radius:0; outline:none; font-family:"Lato","Noto Sans TC","Noto Sans SC","微軟正黑體修正","Microsoft JhengHei","微軟正黑體",sans-serif; font-size:1rem; font-weight:700; line-height:1.5; -webkit-appearance:none; margin: 0 0 1rem; } .form-block .input input::-webkit-input-placeholder { color:rgba(39,34,35,0.6); font-size:1rem; font-weight:400; opacity:1 } .form-block .input input::-moz-placeholder { color:rgba(39,34,35,0.6); font-size:1rem; font-weight:400; opacity:1 } .form-block .input input:-ms-input-placeholder { color:rgba(39,34,35,0.6); font-size:1rem; font-weight:400; opacity:1 } .form-block .input input::-ms-input-placeholder { color:rgba(39,34,35,0.6); font-size:1rem; font-weight:400; opacity:1 } .form-block .input input::placeholder { color:rgba(39,34,35,0.6); font-size:1rem; font-weight:400; opacity:1 } .form-block .input input:-ms-input-placeholder { color:rgba(39,34,35,0.6); font-size:1rem; font-weight:400 } .form-block .input input::-ms-input-placeholder { color:rgba(39,34,35,0.6); font-size:1rem; font-weight:400 } .form-block .input input.invalid { border-bottom:1px solid rgba(226,35,61,0.8); color:#E2233D } .form-block .input input.invalid::-webkit-input-placeholder { color:rgba(226,35,61,0.6) } .form-block .input input.invalid::-moz-placeholder { color:rgba(226,35,61,0.6) } .form-block .input input.invalid:-ms-input-placeholder { color:rgba(226,35,61,0.6) } .form-block .input input.invalid::-ms-input-placeholder { color:rgba(226,35,61,0.6) } .form-block .input input.invalid::placeholder { color:rgba(226,35,61,0.6) } .form-block .input input.invalid:-ms-input-placeholder { color:rgba(226,35,61,0.6) } .form-block .input input.invalid::-ms-input-placeholder { color:rgba(226,35,61,0.6) } .form-block .input select { position:relative; background-image:url('data:image/svg+xml;charset=US-ASCII,'); background-repeat:no-repeat; background-position:right 10px top 50%; background-size:14px auto } .form-block .input select.is-placeholder { font-weight:400; color:rgba(39,34,35,0.6) } .form-block .input select.invalid { border-bottom:1px solid rgba(226,35,61,0.8); color:#E2233D } .form-block .input textarea { padding:10px 20px; border:1px solid rgba(79,95,107,0.2); border-radius:0; outline:none; width:100%!important; height:300px; font-size:1rem; font-weight:700; line-height:1.5; resize:none } .form-block .input textarea::-webkit-input-placeholder { color:rgba(39,34,35,0.6); font-size:1rem; font-weight:300; opacity:1 } .form-block .input textarea::-moz-placeholder { color:rgba(39,34,35,0.6); font-size:1rem; font-weight:300; opacity:1 } .form-block .input textarea:-ms-input-placeholder { color:rgba(39,34,35,0.6); font-size:1rem; font-weight:300; opacity:1 } .form-block .input textarea::-ms-input-placeholder { color:rgba(39,34,35,0.6); font-size:1rem; font-weight:300; opacity:1 } .form-block .input textarea::placeholder { color:rgba(39,34,35,0.6); font-size:1rem; font-weight:300; opacity:1 } .form-block .input textarea:-ms-input-placeholder { color:rgba(39,34,35,0.6); font-size:1rem; font-weight:300 } .form-block .input textarea::-ms-input-placeholder { color:rgba(39,34,35,0.6); font-size:1rem; font-weight:300 } .form-block ul.hs-error-msgs { display:none!important } .form-block .legal-consent-container { line-height:1.5; text-align:center } .form-block .legal-consent-container a { color:#E2233D; text-decoration:underline } @media only screen and (max-width:767px) { .form-block { padding:35px 10px; margin:30px auto 0 } .form-block .form-columns-2 { -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column } } .form-tools { padding: 50px 30px; margin: 60px auto 0; border-top: 5px solid #F0F0F0; max-width: 1100px; width: 100%; } .form-tools .tools { margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0 20px; max-width: 390px; width: 100%; } .form-tools .tools .border { border: 2px solid rgba(79,95,107,0.5); } .rect-button.border { color: #272223; border: 2px solid rgba(39,34,35,0.5); } .rect-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 500px; width: 185px; height: 60px; color: #fff; font-size: 18px; font-weight: 800; text-align: center; cursor: pointer; } .rect-button.border { color: #272223; border: 2px solid rgba(39,34,35,0.5); } .form-tools .tools .border { border: 2px solid rgba(79,95,107,0.5); } .rect-button.blue { background-color: #1469B9; } /* ------------------------------------------- 版型設定 ---------------------------------------------*/ /* ---01左圖右文----*/ .template-01 { display: flex; flex-wrap: wrap; align-items: center; margin:60px -15px; width: 100%; position: relative; } @media (max-width: 767px) {.template-01{margin:30px -15px;}} .template-01 h3 { font-size: 24px; font-weight: 600; position: relative; margin-bottom: 10px; padding-left: 15px; } .template-01 h3::before { top: 5px; width: 7px; height: 30px; background-color: #007297; content: ""; position: absolute; left: 2px; } .template-01 p { font-size: 18px; line-height: 1.7; color: #333333; width: 100%; } .template-01 ul { list-style: disc !important; } .template-01 ul li { padding-left: 0.8em; margin-bottom: 0.3em; position: relative; font-size: 18px; color: #333333; } .template-01 ul li::before{ content: ""; background-color: #0092D8; height: 6px; width: 6px; border-radius: 50%; position: absolute; left: 0; top: 10px; } /* ---02 右圖左文----*/ .template-02 { display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; align-items: center; flex-wrap: wrap; margin:60px -15px; width: 100%; position: relative; } @media (max-width: 767px) {.template-02{margin:30px -15px;}} .template-02 h3 { font-size: 24px; font-weight: 600; position: relative; margin-bottom: 10px; padding-left: 15px; } .template-02 h3::before { top: 5px; width: 7px; height: 30px; background-color: #007297; content: ""; position: absolute; left: 2px; } .template-02 p { font-size: 18px; line-height: 1.7; color: #333333; } .template-02 ul { list-style: disc !important; } .template-02 ul li { padding-left: 0.8em; margin-bottom: 0.3em; position: relative; font-size: 18px; color: #333333; } .template-02 ul li::before{ content: ""; background-color: #0092D8; height: 6px; width: 6px; border-radius: 50%; position: absolute; left: 0; top: 10px; } /* ---03 單個編輯器----*/ .template-03 { margin:60px 0; width: 100%; position: relative; } @media (max-width: 767px) {.template-04{margin:30px 0;}} /* ---04 一列5個圖文----*/ .template-04 { display: flex; -webkit-box-orient: horizontal; margin:60px -15px; flex-wrap: wrap; width: 100%; position: relative; } .template-04 .item{ flex: 0 1 calc(20%); padding:15px; } @media (max-width: 991px) {.template-04 .item{flex: 0 1 calc(25%);}} @media (max-width: 767px) {.template-04 .item{flex: 0 1 calc(33.33%);}} @media (max-width: 480px) {.template-04 .item{flex: 0 1 calc(50%);}} .template-04 .item img{ width:100%; } .template-04 .item .title { font-size: 18px; padding: 15px; text-align: center; } /* ---05 一列4個圖文----*/ .template-05 { display: flex; -webkit-box-orient: horizontal; margin:60px -15px; flex-wrap: wrap; width: 100%; position: relative; } @media (max-width: 767px) {.template-05{margin:30px -15px;}} .template-05 .item{ flex: 0 1 calc(25%); padding:15px; } @media (max-width: 767px) {.template-05 .item{flex: 0 1 calc(33.33%);}} @media (max-width: 480px) {.template-05 .item{flex: 0 1 calc(50%);}} .template-05 .item img{ width:100%; } .template-05 .item .title { font-size: 18px; padding: 15px; text-align: center; } /* ---06 一列3個圖文----*/ .template-06 { display: flex; -webkit-box-orient: horizontal; margin:60px -15px; flex-wrap: wrap; width: 100%; position: relative; } @media (max-width: 767px) {.template-06{margin:30px -15px;}} .template-06 .item{ flex: 0 1 calc(33.33%); padding:15px; } @media (max-width: 480px) {.template-06 .item{flex: 0 1 calc(50%);}} .template-06 .item img{ width:100%; } .template-06 .item .title { font-size: 18px; padding: 15px; text-align: center; }