:root { --primaryColor: #f51928; --lightRed: #d93067; --btnColor: #cc000e; --btnHover: #b20012; --gradient: rgba(0,0,0, 0.2); --purple: #a9114c; --swiper-theme-color: var(--primaryColor); } @font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: normal; font-display: fallback; src: url("../font/robotocondensed-regular.ttf") format("truetype"); } @font-face { font-family: "Roboto Condensed Bold"; font-style: normal; font-weight: bold; font-display: fallback; src: url("../font/robotocondensed-bold.ttf") format("truetype"); } @font-face { font-family: "tradegothicltprobold"; font-style: normal; font-weight: normal; font-display: fallback; src: url("../font/tradegothicltpro-bold.ttf") format("truetype"); } @font-face { font-family: "TT-Norms-Light"; src: url("../font/TT Norms Pro Light.otf") format("opentype"); } @font-face { font-family: "TT-Norms-Thin"; src: url("../font/TT Norms Pro Thin.otf") format("opentype"); } @font-face { font-family: "TT-Norms-Regular"; src: url("../font/TT Norms Pro Regular.otf") format("opentype"); } @font-face { font-family: "TT-Norms-Medium"; src: url("../font/TT Norms Pro Medium.otf") format("opentype"); } @font-face { font-family: "TT-Norms-Bold"; src: url("../font/TT Norms Pro Bold.otf") format("opentype"); } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } body { background-color: #eee; font-family: "Roboto Condensed", sans-serif; } .SEO_text { height: 0; overflow: hidden; } *:focus:focus-visible { outline: #f70023 solid 3px !important; } .video_lightbox, .twitch_lightbox { top: 0; left: 0; position: fixed; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); padding: 0 5px; box-sizing: border-box; display: none; align-items: center; justify-content: center; z-index: 99999; } .video_lightbox .lightbox_inner, .twitch_lightbox .lightbox_inner { width: 150vh; max-width: 1280px; transform: scale(0); transition: transform 0.3s; position: relative; } .video_lightbox .lightbox_inner .player_box, .twitch_lightbox .lightbox_inner .player_box { width: 100%; padding-top: 56.25%; position: relative; } .video_lightbox .lightbox_inner iframe, .twitch_lightbox .lightbox_inner iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .video_lightbox .lightbox_inner.active, .twitch_lightbox .lightbox_inner.active { transform: scale(1); } .video_lightbox .close_btn, .twitch_lightbox .close_btn { display: block; position: absolute; top: -25px; right: 0; width: 22px; height: 22px; background-size: cover; cursor: pointer; background-image: url("../image/close_x.png"); } .video_lightbox.active, .twitch_lightbox.active { display: flex; } .qr-code-lightbox.pc { font-family: "TT-Norms-Regular"; display: grid; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: black; width: 83.33vw; height: 46.354vw; border-radius: 15px; font-size: 1.64vw; color: #edebe9; opacity: 0; grid-template-columns: 20% 20% 14% 21% 21%; grid-template-rows: 26% 15% 15% 15% 25%; grid-gap: 1%; transition: opacity 0.3s; pointer-events: none; } .qr-code-lightbox.pc.lightbox-show { opacity: 1; transition: opacity 0.3s; pointer-events: auto; position: fixed; z-index: 11; } .qr-code-lightbox.pc .grid1 { grid-column: 1 / 5; grid-row: 1; } .qr-code-lightbox.pc .grid2 { grid-column: 4 / 6; grid-row: 2 / 6; } .qr-code-lightbox.pc .grid3 { grid-column: 1 / 4; grid-row: 2; } .qr-code-lightbox.pc .grid4 { grid-column: 1 / 4; grid-row: 3; } .qr-code-lightbox.pc .grid5 { grid-column: 1 / 4; grid-row: 4; } .qr-code-lightbox.pc .grid6 { grid-column: 1 / 4; grid-row: 5; } .qr-code-lightbox.pc .grid7 { grid-column: 5 / 6; grid-row: 1; } .qr-code-lightbox.pc .lightbox-title { font-size: 232%; font-weight: 500; margin: 5% auto auto 9.55%; } .qr-code-lightbox.pc .qr-code-bg { width: 71%; height: 75%; background: rgba(0, 0, 0, 0.7); border-radius: 10px; margin: 9.5% auto auto 12.4%; } .qr-code-lightbox.pc .qr-code-bg .qr-code { width: 100%; height: 100%; margin: auto; background-image: url(../image/PC/qrcode.jpg); background-position: center; background-repeat: no-repeat; background-size: contain; } .qr-code-lightbox.pc .lightbox-text { width: 80%; margin: 6% auto auto 13.85%; font-size: 1.5vw; } .qr-code-lightbox.pc .lightbox-text.grid4 { margin-top: 9%; } .qr-code-lightbox.pc .lightbox-text .lightbox-step { font-size: 100%; font-weight: 600; } .qr-code-lightbox.pc .lightbox-text .lightbox-step.text { font-size: 80%; font-weight: 200; } .qr-code-lightbox.pc .lightbox-text.grid5 { margin-top: 5.4%; } .qr-code-lightbox.pc .lightbox-note { margin: 6% auto auto 13.85%; font-size: 70%; color: #7f7d80; } .qr-code-lightbox.pc .lightbox-note ul { margin-left: 4.5%; } .qr-code-lightbox.pc .close-box { width: 18.8%; height: 6.9%; position: absolute; top: -1px; right: -1px; border-top-right-radius: 0.7vw; border-bottom-left-radius: 0.7vw; background-color: #87fdd9; } .qr-code-lightbox.pc .close-box:hover { cursor: pointer; } .qr-code-lightbox.pc .close-box .icon-close { width: 50%; height: 50%; background-image: url(../image/PC/close_icon.png); background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: 25%; margin-left: 25%; } .qr-code-lightbox.mobile { display: none; } @media screen and (min-width: 961px) { .kv { /* height: 720px; */ position: relative; left: 50%; transform: translate(-50%); font-family: "TT-Norms-Medium"; } .kv .swiper.mySwiper1 { width: 100%; position: relative; } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide { width: 100%; height: auto; } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg { display: block; width: 100%; height: 720px; background-size: contain; background-position: center; background-repeat: no-repeat; } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-1 { background-image: url("../image/PC/ASUS-BF.webp"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-2 { background-image: url("../image/PC/ASUS-VDay-Ben.webp"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-3 { background-image: url("../image/PC/00_KV_03.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-4 { background-image: url("../image/PC/00_KV_04.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-5 { background-image: url("../image/PC/00_KV_05.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-6 { background-image: url("../image/PC/00_KV_06.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-7 { background-image: url("../image/PC/00_KV_07.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-8 { background-image: url("../image/PC/00_KV_08.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-9 { background-image: url("../image/PC/00_KV_09.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-10 { background-image: url("../image/PC/00_KV_10.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-11 { background-image: url("../image/PC/00_KV_11.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-12 { background-image: url("../image/PC/00_KV_12.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-13 { background-image: url("../image/PC/00_KV_13.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-14 { background-image: url("../image/PC/00_KV_14.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-15 { background-image: url("../image/PC/00_KV_15.jpg"); } .kv .swiper-pagination-box { position: absolute; bottom: 40px; left: 50%; transform: translate(-50%, 0); text-align: center; z-index: 11; white-space: nowrap; } .kv .swiper-pagination-box .swiper-pagination { display: inline-block; position: relative; bottom: auto; height: 23px; vertical-align: middle; text-align: center; white-space: nowrap; } .kv .swiper-pagination-box .swiper-pagination .swiper-pagination-bullet { width: 60px; height: 6px; border-radius: 3px; background-color: rgba(85, 85, 85, 0.8); position: relative; overflow: hidden; margin: auto 3px; opacity: 1; } .kv .swiper-pagination-box .swiper-pagination .swiper-pagination-bullet::after { content: ""; display: block; width: 0; height: 100%; position: absolute; background-color: #ffffff; } .kv .swiper-pagination-box .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { content: ""; width: 100%; transition: width 5s linear; } .kv .play-btn-box { display: inline-block; width: 26px; height: 26px; vertical-align: middle; } .kv .play-btn-box:hover { cursor: pointer; } .kv .play-btn-box .play-btn, .kv .play-btn-box .pause-btn { display: block; width: 26px; height: 26px; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: cover; } .kv .play-btn-box .play-btn { display: none; background-image: url("../image/PC/btn_play.png"); } .kv .play-btn-box .play-btn.active { display: block; } .kv .play-btn-box .pause-btn { display: none; background-image: url("../image/PC/btn_pause.png"); } .kv .play-btn-box .pause-btn.active { display: block; } .launch-event { position: relative; font-family: "TT-Norms-Medium"; font-weight: 500; background: linear-gradient(180deg, #6fa1c4 0%, #98bfd2 100%); color: #ffffff; } .launch-event .launch-event-title-box .launch-event-title { width: 750px; padding-top: 74px; padding-bottom: 54px; font-size: 48px; margin-left: auto; margin-right: auto; } .launch-event .swiper-box2 { position: relative; } .launch-event .swiper-box2 .swiper.mySwiper2 { width: 1200px; } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image { display: inline-block; background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; padding-bottom: 42.5%; position: relative; } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image1 { background-image: url("../image/PC/01_vdo_01.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image2 { background-image: url("../image/PC/01_vdo_02.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image3 { background-image: url("../image/PC/01_vdo_03.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image4 { background-image: url("../image/PC/01_vdo_04.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image5 { background-image: url("../image/PC/01_vdo_05.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image6 { background-image: url("../image/PC/01_vdo_06.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image7 { background-image: url("../image/PC/01_vdo_07.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image8 { background-image: url("../image/PC/01_vdo_08.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image9 { background-image: url("../image/PC/01_vdo_09.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image .play-btn { width: 60px; height: 60px; background-image: url("../image/PC/01_btn_play.png"); background-size: cover; background-position: center; background-repeat: no-repeat; left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image .play-btn:hover { cursor: pointer; } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .text { font-size: 24px; text-align: center; padding-top: 2.5%; font-family: "TT-Norms-Regular"; } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-pagination { position: static; margin-top: 32px; } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-pagination .swiper-pagination-bullet { width: 40px; height: 5px; border-radius: 3px; background-color: rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; margin: auto 3px; opacity: 1; } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #ffffff; } .launch-event .swiper-box2 .swiper-button-next { right: 50%; margin-right: -695px; width: 20px; height: 40px; background-image: url("../image/PC/arrow_right.png"); background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: 0; top: 60px; } .launch-event .swiper-box2 .swiper-button-next::after { display: none; } .launch-event .swiper-box2 .swiper-button-prev { left: 50%; margin-left: -695px; width: 20px; height: 40px; background-image: url("../image/PC/arrow_left.png"); background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: 0; top: 60px; } .launch-event .swiper-box2 .swiper-button-prev::after { display: none; } .launch-event .menu-bar { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); width: 1200px; border-radius: 20px; background: rgba(29, 75, 73, 0.4); backdrop-filter: blur(5px); padding: 10px 0; text-align: center; z-index: 11; } .launch-event .menu-bar .menu-btn { display: inline-block; vertical-align: middle; margin-right: 6px; } .launch-event .menu-bar .menu-btn .menu { width: 24px; height: 3px; background: #88fdd9; border-radius: 1.5px; } .launch-event .menu-bar .menu-btn .menu.menu2 { margin-top: 6px; } .launch-event .menu-bar .menu-btn .menu.menu3 { margin-top: 6px; } .launch-event .menu-bar .menu-text { display: inline-block; vertical-align: middle; font-style: normal; font-weight: 500; font-size: 18px; color: #ffffff; text-decoration: none; text-align: center; border: #c9dce8 1px solid; border-radius: 17px; padding: 10px 15px; margin: 0 4px; font-family: "TT-Norms-Regular"; transform: scale(1); transition: transform 0.3s; } .launch-event .menu-bar .menu-text:hover { transform: scale(1.05); } .launch-event .menu-bar .menu-text .icon-ar.mobile { display: none; } .launch-event .menu-bar .icon-ar { display: inline-block; width: 24px; height: 40px; vertical-align: middle; background-image: url("../image/PC/icon_ar.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; margin-left: 14px; transform: scale(1); transition: transform 0.3s; } .launch-event .menu-bar .icon-ar:hover { transform: scale(1.05); } .launch-event .pc-innovation-box { width: 1200px; box-sizing: border-box; background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%); border: 2px solid #ffffff; border-radius: 12px; margin: 45px auto 0; } .launch-event .pc-innovation-box .pc-innovation-title { font-style: normal; font-weight: 500; font-size: 48px; padding-top: 33px; text-align: center; color: rgba(0, 0, 0, 0.7); } .launch-event .pc-innovation-box .main-text-box { font-size: 0; text-align: center; padding: 6px 0 35px; } .launch-event .pc-innovation-box .main-text-box .text-box { display: inline-block; width: 250px; font-size: 10px; vertical-align: top; margin: 0 18px; text-decoration: none; transform: scale(1); transition: transform 0.3s; } .launch-event .pc-innovation-box .main-text-box .text-box:hover { transform: scale(1.05); } .launch-event .pc-innovation-box .main-text-box .text-box:hover .innovation-learn-more-box .learn-more { background-color: #233c3c; } .launch-event .pc-innovation-box .main-text-box .text-box .img { width: 166px; height: 148px; background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0 auto 2px; } .launch-event .pc-innovation-box .main-text-box .text-box .img.img1 { background-image: url("../image/PC/02_invt_01.png"); } .launch-event .pc-innovation-box .main-text-box .text-box .img.img2 { background-image: url("../image/PC/02_invt_02.png"); } .launch-event .pc-innovation-box .main-text-box .text-box .img.img3 { background-image: url("../image/PC/02_invt_03.png"); } .launch-event .pc-innovation-box .main-text-box .text-box .img.img4 { background-image: url("../image/PC/02_invt_04.png"); } .launch-event .pc-innovation-box .main-text-box .text-box .title { font-weight: 500; font-size: 28px; color: rgba(0, 0, 0, 0.7); height: 68px; margin-bottom: 15px; } .launch-event .pc-innovation-box .main-text-box .text-box .text { font-size: 16px; color: rgba(0, 0, 0, 0.7); padding-bottom: 25px; height: 58px; } .launch-event .pc-innovation-box .main-text-box .text-box .innovation-learn-more-box { text-align: center; } .launch-event .pc-innovation-box .main-text-box .text-box .innovation-learn-more-box .learn-more { display: inline-block; font-weight: 500; font-size: 22px; color: #88fdd9; padding-top: 5px; padding-right: 48px; padding-bottom: 9px; padding-left: 28px; background: rgba(0, 0, 0, 0.7); border-radius: 25px; position: relative; transition: background-color 0.3s; } .launch-event .pc-innovation-box .main-text-box .text-box .innovation-learn-more-box .learn-more::after { content: ""; position: absolute; top: 50%; right: 24px; transform: translateY(-50%); width: 12px; height: 12px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../image/PC/more.png"); } .section-products { background-color: #f5f5f5; padding-top: 30px; padding-bottom: 80px; font-family: "Roboto Condensed"; } .section-products a { text-decoration: none; } .section-products .series-icon-box { position: relative; max-width: 1400px; margin: 0 auto 20px; overflow: hidden; background: #fff; /* background: linear-gradient(180deg, #f8f8f8 20%, var(--primaryColor) 100%); */ padding-bottom: 10px; border-radius: 10px; } .section-products .series-icon-box .swiper-products-icon { width: calc(100% - 50px); overflow: visible; } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide { width: 150px; } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon { display: block; width: 100%; padding-bottom: 7px; transform: scale(1); transition: transform 0.3s; } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon:hover { transform: scale(1.05); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon { padding-bottom: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon1 { background-image: url("../image/PC/03_bar_01.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon2 { background-image: url("../image/PC/03_bar_02.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon3 { background-image: url("../image/PC/03_bar_03.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon4 { background-image: url("../image/PC/03_bar_04.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon5 { background-image: url("../image/PC/03_bar_05.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon6 { background-image: url("../image/PC/03_bar_06.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon7 { background-image: url("../image/PC/03_bar_07.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon8 { background-image: url("../image/PC/03_bar_08.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon9 { background-image: url("../image/PC/03_bar_09.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon10 { background-image: url("../image/PC/03_bar_010.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon11 { background-image: url("../image/PC/03_bar_011.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon12 { background-image: url("../image/PC/03_bar_012.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon13 { background-image: url("../image/PC/03_bar_013.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon14 { background-image: url("../image/PC/03_bar_014.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon15 { background-image: url("../image/PC/03_bar_015.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon16 { background-image: url("../image/PC/03_bar_016.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon17 { background-image: url("../image/PC/03_bar_017.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon18 { background-image: url("../image/PC/03_bar_018.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon19 { background-image: url("../image/PC/03_bar_019.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon20 { background-image: url("../image/PC/03_bar_020.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .text { font-weight: 500; font-size: 15px; text-align: center; color: #333; padding: 6px 0; background-color: transparent; border-radius: 15px; } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide.swiper-slide-active .products-icon .text { color: #fff; text-shadow: 0 0 3px var(--btnHover); background-color: var(--btnColor); /* background-image: linear-gradient(160deg, var(--btnColor) 30%, var(--btnHover) 80%); */ } .section-products .series-icon-box .swiper-button-next, .section-products .series-icon-box .swiper-button-prev { width: 100px; height: 100%; top: 0; margin-top: 0; } .section-products .series-icon-box .swiper-button-next:after, .section-products .series-icon-box .swiper-button-prev:after { content: ""; width: 20px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .section-products .series-icon-box .swiper-button-next { right: 0; background: linear-gradient(270deg, #f8f8f8 50%, rgba(255, 255, 255, 0) 100%); } .section-products .series-icon-box .swiper-button-next:after { /* background-image: url("../image/PC/arrow_right.png"); */ } .section-products .series-icon-box .swiper-button-prev { left: 0; background: linear-gradient(90deg, #f8f8f8 50%, rgba(255, 255, 255, 0) 100%); } .section-products .series-icon-box .swiper-button-prev:after { /* background-image: url("../image/PC/arrow_left.png"); */ } .section-products .tags-box { font-size: 0; white-space: nowrap; margin-bottom: 36px; text-align: center; } .section-products .tags-box .tag-box { display: inline-block; width: auto; padding: 0 14px; } .section-products .tags-box .tag-box .tag { display: inline-block; padding: 6px 24px; font-weight: 500; font-size: 18px; color: #333; background-color: #fff; border: 1px solid #333; border-radius: 20px; transform: scale(1); transition: transform 0.3s; } .section-products .tags-box .tag-box .tag:hover { /* transform: scale(1.05); */ } .section-products .tags-box .tag-box .tag.active { color: #fff; text-shadow: 0 0 3px var(--btnHover); background-color: var(--btnColor); /* background-image: linear-gradient(160deg, var(--btnColor) 30%, var(--btnHover) 80%); */ border: 1px solid var(--btnHover); } .section-products .card-box { max-width: 1400px; margin: 0 auto; padding: 0 14px 30px; opacity: 1; transition: opacity 0.2s; } .section-products .card-box.invisible { opacity: 0; } .section-products .card-box .card-list { display: flex; flex-wrap: wrap; column-gap: 34px; row-gap: 36px; } .section-products .card-box .card-list .card { position: relative; width: calc(33.3333% - 80px); background-color: #fff; background: linear-gradient(180deg, #ffffff 70%, var(--gradient) 100%); /* border: 1px solid transparent; */ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15); border-radius: 10px; padding: 25px 25px 70px 25px; transform: scale(1); transition: transform 0.3s; } .section-products .card-box .card-list .card:hover { /* border: 1px solid #aaa; */ outline: 1px solid #ccc; box-shadow: none; /* transform: scale(1.02); */ } .section-products .card-box .card-list .card:hover .more-box .more { background-color: #233c3c; } .section-products .card-box .card-list .card .no { font-size: 18px; color: #bcbcbc; } .section-products .card-box .card-list .card .name { text-align: left; height: 80px; font-size: 20px; /* color: rgba(0, 0, 0, 0.7); */ color: #000; font-family: "Roboto Condensed Bold"; } .section-products .card-box .card-list .card .slogan { display: none; font-size: 14px; color: #666; margin-bottom: 5px; } .section-products .card-box .card-list .card .img { padding-bottom: 54.8%; background-position: center; background-repeat: no-repeat; background-size: contain; } .section-products .card-box .card-list .card .price { font-size: 14px; color: #4d4d4d; margin-top: 10px;} .section-products .card-box .card-list .card .price b { display: block; font-size: 1.375rem; font-weight: normal; color: #c74200; font-family: "Roboto Condensed Bold"; } .section-products .card-box .card-list .card .price .discount { color: #c74200; } .section-products .card-box .card-list .card .price .discount span { text-decoration: line-through; color: #4d4d4d; } .section-products .card-box .card-list .card .icons { height: 0; } .section-products .card-box .card-list .card .icons .icon { background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; top: 80px; right: 25px; } .section-products .card-box .card-list .card .icons .icon:last-child { margin-right: 0; } .section-products .card-box .card-list .card .icons .icon.icon-CES { width: 37px; height: 52px; background-image: url("../image/PC/a_CES.png"); } .section-products .card-box .card-list .card .icons .icon.icon-GD { margin-top: 8px; width: 71px; height: 36px; background-image: url("../image/PC/a_GD.png"); } .section-products .card-box .card-list .card .icons .icon.icon-if { margin-top: 8px; width: 71px; height: 36px; background-image: url("../image/PC/a_if.png"); } .section-products .card-box .card-list .card .icons .icon.icon-RD { margin-top: 8px; width: 62px; height: 36px; background-image: url("../image/PC/a_RD.png"); } .section-products .card-box .card-list .card .note-box { margin-bottom: 25px; margin-top: 25px; font-family: "Roboto Condensed"; } .section-products .card-box .card-list .card .note-box .note { font-weight: 100; font-size: 14px; color: #666; line-height: 18px; padding-left: 17px; padding-bottom: 5px; position: relative; } .section-products .card-box .card-list .card .note-box .note::before { content: ""; display: inline-block; width: 3px; height: 3px; background-color: #000000; border-radius: 50%; position: relative; top: 8px; position: absolute; left: 2px; } .section-products .card-box .card-list .card .more-box { text-align: center; } .section-products .card-box .card-list .card .more-box .more { display: inline-block; font-weight: 500; font-size: 22px; color: #88fdd9; padding-top: 5px; padding-right: 48px; padding-bottom: 9px; padding-left: 28px; background: rgba(0, 0, 0, 0.7); border-radius: 25px; position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); width: 115px; transition: background-color 0.3s; } .section-products .card-box .card-list .card .more-box .more::after { content: ""; position: absolute; top: 50%; right: 24px; transform: translateY(-50%); width: 12px; height: 12px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../image/PC/more.png"); } .section-products .card-box .card-list .card.card-no-link:hover { cursor: default; transform: scale(1); } .section-products .card-box .card-list .card.card-big { width: 70%; position: relative; left: 50%; transform: translateX(-50%); padding-bottom: 90px; } .section-products .card-box .card-list .card.card-big .name { height: 30px; } .section-products .card-box .card-list .card.card-big .img { width: 50%; padding-bottom: 27.4%; } .section-products .card-box .card-list .card.card-big .note-box { position: absolute; left: 50%; top: 80px; margin-left: 20px; } .section-products .card-box .card-list .card.card-big .note-box .note { margin-bottom: 10px; } .section-article { /* background: linear-gradient(0deg, #fff 0%, #f8f8f8 100%); */ /* background-color: #181818; */ } .section-article .discover-the-products-more-box { width: 1400px; position: relative; left: 50%; transform: translate(-50%); font-family: "Roboto Condensed"; /* font-weight: 500; */ color: #fff; box-sizing: border-box; /* background-color: #004a53; */ /* border: 3px solid #e0a116; */ border-radius: 10px; margin-bottom: 80px; } .section-article .discover-the-products-more-box .discover-main-title { width: 810px; font-size: 46px; /* text-transform: uppercase; */ margin: 0 auto; padding: 40px 0 37px; text-align: center; font-family: "tradegothicltprobold"; font-weight: normal; } .section-article .discover-the-products-more-box .card-list { font-size: 0; } .section-article .discover-the-products-more-box .card-list .card-first { width: 540px; position: absolute; left: 18px; top: 128px; margin-bottom: 25px; display: inline-block; text-decoration: none; transform: scale(1); /* transition: transform 0.3s; */ } .section-article .discover-the-products-more-box .card-list .card-first:hover { /* transform: scale(1.02); */ } .section-article .discover-the-products-more-box .card-list .card-first .image1 { width: 540px; height: 304px; background-image: url("../image/PC/04_article_01.png"); background-position: center; background-repeat: no-repeat; background-size: cover; margin-bottom: 18px; } .section-article .discover-the-products-more-box .card-list .card-first .date { color: rgba(0, 0, 0, 0.4); font-weight: 400; font-size: 14px; margin-bottom: 6px; } .section-article .discover-the-products-more-box .card-list .card-first .title { font-weight: 500; font-size: 36px; color: rgba(0, 0, 0, 0.7); margin-bottom: 6px; } .section-article .discover-the-products-more-box .card-list .card-first .name { font-weight: 400; font-size: 24px; color: rgba(0, 0, 0, 0.7); margin-bottom: 24px; } .section-article .discover-the-products-more-box .card-list .card-first .card-btn-more { display: inline-block; /* background: rgba(0, 0, 0, 0.7); */ background-color: var(--btnColor); border-radius: 20px; width: auto; padding: 8px 20px; color: #fff; font-weight: 500; font-size: 16px; text-decoration: none; transition: background-color 0.3s; } .section-article .discover-the-products-more-box .card-list .card { display: inline-block; position: relative; height: 160px; left: 589px; font-size: 10px; margin-bottom: 25px; text-decoration: none; transform: scale(1); transition: transform 0.3s; } .section-article .discover-the-products-more-box .card-list .card:hover { /* transform: scale(1.05); */ } .section-article .discover-the-products-more-box .card-list .card:hover .card-btn-more { background-color: var(--btnHover); } .section-article .discover-the-products-more-box .card-list .card.card5, .section-article .discover-the-products-more-box .card-list .card.card6, .section-article .discover-the-products-more-box .card-list .card.card7 { position: static; display: inline-block; vertical-align: middle; } .section-article .discover-the-products-more-box .card-list .card.card5, .section-article .discover-the-products-more-box .card-list .card.card7 { margin-left: 18px; } .section-article .discover-the-products-more-box .card-list .card.card5 .date, .section-article .discover-the-products-more-box .card-list .card.card5 .title, .section-article .discover-the-products-more-box .card-list .card.card5 .name, .section-article .discover-the-products-more-box .card-list .card.card7 .date, .section-article .discover-the-products-more-box .card-list .card.card7 .title, .section-article .discover-the-products-more-box .card-list .card.card7 .name { width: 280px; } .section-article .discover-the-products-more-box .card-list .card.card5 .name, .section-article .discover-the-products-more-box .card-list .card.card7 .name { text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; } .section-article .discover-the-products-more-box .card-list .card.card6 .title { height: 57.59px; } .section-article .discover-the-products-more-box .card-list .card .image { position: absolute; width: 277px; height: 190px; background-position: center; background-repeat: no-repeat; background-size: cover; margin-right: 12px; } .section-article .discover-the-products-more-box .card-list .card .image.image2 { background-image: url("../image/PC/04_article_v1.webp"); } .section-article .discover-the-products-more-box .card-list .card .image.image3 { background-image: url("../image/PC/04_article_v2.webp"); } .section-article .discover-the-products-more-box .card-list .card .image.image4 { background-image: url("../image/PC/04_article_v3.webp"); } .section-article .discover-the-products-more-box .card-list .card .image.image5 { background-image: url("../image/PC/04_article_05.png"); } .section-article .discover-the-products-more-box .card-list .card .image.image6 { background-image: url("../image/PC/04_article_06.png"); } .section-article .discover-the-products-more-box .card-list .card .image.image7 { background-image: url("../image/PC/04_article_07.png"); } .section-article .discover-the-products-more-box .card-list .card .image.image8 { background-image: url("../image/PC/04_article_08.png"); } .section-article .discover-the-products-more-box .card-list .card .image.image9 { background-image: url("../image/PC/04_article_09.png"); } .section-article .discover-the-products-more-box .card-list .card .date, .section-article .discover-the-products-more-box .card-list .card .title, .section-article .discover-the-products-more-box .card-list .card .name, .section-article .discover-the-products-more-box .card-list .card .card-btn-more { display: block; width: 290px; margin-left: 289px; text-decoration: none; } .section-article .discover-the-products-more-box .card-list .card .date { font-weight: 400; font-size: 14px; color: rgba(0, 0, 0, 0.4); margin-bottom: 1px; } .section-article .discover-the-products-more-box .card-list .card .title { font-weight: 500; font-size: 20px; color: #fff; margin-bottom: 10px; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; } .section-article .discover-the-products-more-box .card-list .card .name { font-weight: 400; font-size: 20px; color: rgba(0, 0, 0, 0.7); margin-bottom: 13px; } .section-article .discover-the-products-more-box .card-list .card .card-btn-more { position: absolute; text-shadow: 0 0 3px var(--btnHover); background-color: var(--btnColor); /* background-image: linear-gradient(160deg, var(--btnColor) 30%, var(--btnHover) 80%); */ border-radius: 20px; width: auto; padding: 8px 20px; color: #fff; font-weight: 500; font-size: 16px; transition: background-color 0.3s; } .section-article .discover-the-products-more-box .card-list .card .card-btn-more:hover { background-color: var(--btnHover); /* background-image: linear-gradient(160deg, var(--btnHover) 30%, var(--btnHover) 80%); */ } .section-event-video { height: 800px; position: relative; left: 50%; transform: translate(-50%); background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../image/PC/05_bg.jpg"); } .section-event-video .event-video-title-box { width: 432px; padding: 205px 0 38px; position: relative; left: 50%; transform: translate(-50%); margin-left: 318px; font-family: "TT-Norms-Medium"; font-weight: 500; color: #ffffff; } .section-event-video .event-video-title-box .event-video-title { width: 227px; font-size: 60px; } .section-event-video .event-video-title-box .event-video-slogan { width: 432px; font-family: "TT-Norms-Regular"; font-size: 56px; padding-bottom: 6px; } .section-event-video .event-video-title-box .event-video-subtitle { width: 435px; font-family: "TT-Norms-Regular"; font-size: 27px; font-weight: 400; padding-bottom: 38px; } .section-event-video .event-video-title-box .event-video-btn { display: block; width: 360px; padding: 12px 0 9px; text-align: center; background: rgba(255, 255, 255, 0.3); border: 2px solid #ffffff; backdrop-filter: blur(5px); border-radius: 26px; box-sizing: border-box; font-weight: 400; font-size: 27px; text-decoration: none; color: #ffffff; font-family: "TT-Norms-Regular"; margin-bottom: 16px; } .section-event-video .event-video-title-box .event-video-btn:hover { cursor: pointer; } .section-event-video .event-video-title-box .ar-fun-btn { display: block; width: 360px; padding: 12px 0 9px; text-align: center; background: rgba(0, 0, 0, 0.3); border: 2px solid #88fdd9; backdrop-filter: blur(5px); border-radius: 26px; box-sizing: border-box; font-weight: 400; font-size: 27px; color: #88fdd9; text-decoration: none; font-family: "TT-Norms-Regular"; } .section-event-video .event-video-title-box .ar-fun-btn:hover { cursor: pointer; } .go-top { display: block; position: fixed; right: 8px; bottom: 12px; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); border-radius: 12px; padding: 12px 18px 8px; z-index: 10; font-family: "TT-Norms-Regular"; opacity: 0; transition: opacity 0.3s; text-decoration: none; } .go-top.active { opacity: 1; } .go-top::before { content: ""; display: block; width: 24px; height: 22px; background-image: url("../image/PC/go_top.png"); background-position: center; background-repeat: no-repeat; background-size: contain; margin: 0 auto 4px; } .go-top::after { content: "TOP"; display: block; font-size: 12px; color: #88fdd9; text-align: center; } } @media screen and (min-width: 961px) and (max-width: 1439px) { .launch-event .swiper-box2 .swiper.mySwiper2 { width: 90vw; } .launch-event .swiper-box2 .swiper-button-next { margin-right: -48%; } .launch-event .swiper-box2 .swiper-button-prev { margin-left: -48%; } } @media screen and (min-width: 961px) and (max-width: 1335px) { .launch-event .menu-bar { width: 880px; border-radius: 15px; padding: 10px 0; } .launch-event .menu-bar .menu-text { font-size: 12.5px; border-radius: 10px; padding: 8px 8px; margin: 0 2px; } .launch-event .pc-innovation-box { width: 960px; border-radius: 10px; } .launch-event .pc-innovation-box .pc-innovation-title { font-size: 40px; } .launch-event .pc-innovation-box .main-text-box { padding: 4px 0 45px; } .launch-event .pc-innovation-box .main-text-box .text-box { width: 190px; } .launch-event .pc-innovation-box .main-text-box .text-box .title { font-size: 20px; height: 48px; margin-bottom: 10px; } .launch-event .pc-innovation-box .main-text-box .text-box .text { font-size: 14px; } .section-article .discover-the-products-more-box { width: 960px; /* border-radius: 10px; */ } .section-article .discover-the-products-more-box .discover-main-title { width: 648px; font-size: 38.4px; margin: 0 auto; padding: 26.4px 0 29.6px; font-family: "tradegothicltprobold"; font-weight: normal;} .section-article .discover-the-products-more-box .card-list .card-first { position: absolute; width: 432px; height: 635.2px; left: 14.4px; top: 102.4px; } .section-article .discover-the-products-more-box .card-list .card-first .image1 { width: 432px; height: 243.2px; margin-bottom: 14.4px; } .section-article .discover-the-products-more-box .card-list .card-first .date { font-size: 11.2px; margin-bottom: 4.8px; } .section-article .discover-the-products-more-box .card-list .card-first .title { font-size: 28.8px; margin-bottom: 4.8px; } .section-article .discover-the-products-more-box .card-list .card-first .name { font-size: 19.2px; margin-bottom: 19.2px; } .section-article .discover-the-products-more-box .card-list .card-first .card-btn-more { width: auto; border-radius: 16px; padding: 4.8px 16px; font-size: 12.8px; } .section-article .discover-the-products-more-box .card-list .card { width: 442px; height: 128px; left: 456px; font-size: 8px; margin-bottom: 20px; } .section-article .discover-the-products-more-box .card-list .card.card5, .section-article .discover-the-products-more-box .card-list .card.card6 { position: static; display: inline-block; vertical-align: middle; } .section-article .discover-the-products-more-box .card-list .card.card5, .section-article .discover-the-products-more-box .card-list .card.card7 { margin-left: 14.4px; } .section-article .discover-the-products-more-box .card-list .card.card5 .date, .section-article .discover-the-products-more-box .card-list .card.card5 .title, .section-article .discover-the-products-more-box .card-list .card.card5 .name, .section-article .discover-the-products-more-box .card-list .card.card7 .date, .section-article .discover-the-products-more-box .card-list .card.card7 .title, .section-article .discover-the-products-more-box .card-list .card.card7 .name { width: 224px; } .section-article .discover-the-products-more-box .card-list .card.card6 .title { height: 46.072px; } .section-article .discover-the-products-more-box .card-list .card .image { width: 221.6px; height: 148px; margin-right: 9.6px; } .section-article .discover-the-products-more-box .card-list .card .date, .section-article .discover-the-products-more-box .card-list .card .title, .section-article .discover-the-products-more-box .card-list .card .name, .section-article .discover-the-products-more-box .card-list .card .card-btn-more { width: 259.2px; margin-left: 231.2px; } .section-article .discover-the-products-more-box .card-list .card .date { font-size: 11.2px; margin-bottom: 0.8px; } .section-article .discover-the-products-more-box .card-list .card .title { font-size: 19.2px; margin-bottom: 8px; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; } .section-article .discover-the-products-more-box .card-list .card .name { font-size: 16px; margin-bottom: 10.4px; } .section-article .discover-the-products-more-box .card-list .card .card-btn-more { width: auto; border-radius: 16px; padding: 4.8px 16px; font-size: 12.8px; } .section-event-video { height: 640px; } .section-event-video .event-video-title-box { width: 345.6px; padding: 164px 0 30.4px; margin-left: 254.4px; } .section-event-video .event-video-title-box .event-video-title { width: 181.6px; font-size: 48px; } .section-event-video .event-video-title-box .event-video-slogan { width: 345.6px; font-family: "TT-Norms-Regular"; font-size: 44.8px; padding-bottom: 4.8px; } .section-event-video .event-video-title-box .event-video-subtitle { width: 348px; font-family: "TT-Norms-Regular"; font-size: 21.6px; font-weight: 400; padding-bottom: 30.4px; } .section-event-video .event-video-title-box .event-video-btn { display: block; width: 288px; padding: 9.6px 0 7.2px; text-align: center; background: rgba(255, 255, 255, 0.3); border: 2px solid #ffffff; backdrop-filter: blur(5px); border-radius: 20.8px; box-sizing: border-box; font-weight: 400; font-size: 21.6px; font-family: "TT-Norms-Regular"; margin-bottom: 12.8px; } .section-event-video .event-video-title-box .event-video-btn:hover { cursor: pointer; } .section-event-video .event-video-title-box .ar-fun-btn { display: block; width: 288px; padding: 9.6px 0 7.2px; text-align: center; background: rgba(0, 0, 0, 0.3); border: 2px solid #88fdd9; backdrop-filter: blur(5px); border-radius: 20.8px; box-sizing: border-box; font-weight: 400; font-size: 21.6px; color: #88fdd9; font-family: "TT-Norms-Regular"; } .section-event-video .event-video-title-box .ar-fun-btn:hover { cursor: pointer; } } @media screen and (min-width:1200px) { .section-products .card-box .card-list .card { width: calc(25% - 76px); } } @media screen and (max-width: 960px) { .kv { width: 100vw; height: 111.875vw; position: relative; left: 50%; transform: translate(-50%); } .kv .swiper.mySwiper1 { width: 100%; } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide { width: 100%; height: 111.875vw; } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg { display: block; width: 100%; height: 111.875vw; background-size: cover; background-position: center; background-repeat: no-repeat; } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-1 { background-image: url("../image/mobile/ASUS-BF@mobile.webp"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-2 { background-image: url("../image/mobile/ASUS-VDay-Ben@mobile.webp"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-3 { background-image: url("../image/mobile/00_KV_03.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-4 { background-image: url("../image/mobile/00_KV_04.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-5 { background-image: url("../image/mobile/00_KV_05.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-6 { background-image: url("../image/mobile/00_KV_06.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-7 { background-image: url("../image/mobile/00_KV_07.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-8 { background-image: url("../image/mobile/00_KV_08.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-9 { background-image: url("../image/mobile/00_KV_09.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-10 { background-image: url("../image/mobile/00_KV_10.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-11 { background-image: url("../image/mobile/00_KV_11.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-12 { background-image: url("../image/mobile/00_KV_12.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-13 { background-image: url("../image/mobile/00_KV_13.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-14 { background-image: url("../image/mobile/00_KV_14.jpg"); } .kv .swiper.mySwiper1 .swiper-wrapper .swiper-slide .bg.bg-15 { background-image: url("../image/mobile/00_KV_15.jpg"); } .kv .swiper-pagination-box { display: block; width: 100vw; height: 15.625vw; position: absolute; bottom: 6%; text-align: center; z-index: 11; } .kv .swiper-pagination-box .swiper-pagination { display: inline-block; position: relative; bottom: auto; width: 60vw; text-align: center; } .kv .swiper-pagination-box .swiper-pagination .swiper-pagination-bullet { width: 6.25vw; height: 1.67vw; border-radius: 9px; background-color: rgba(85, 85, 85, 0.8); position: relative; overflow: hidden; margin: 1vw 0.84vw; opacity: 1; } .kv .swiper-pagination-box .swiper-pagination .swiper-pagination-bullet::after { content: ""; display: block; width: 0; height: 100%; position: absolute; background-color: #ffffff; } .kv .swiper-pagination-box .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { content: ""; width: 100%; transition: width 5s linear; } .kv .play-btn-box { text-align: center; width: 8.125vw; height: 8.125vw; margin: 0 auto; } .kv .play-btn-box:hover { cursor: pointer; } .kv .play-btn-box .play-btn, .kv .play-btn-box .pause-btn { display: block; width: 8.125vw; height: 8.125vw; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: cover; } .kv .play-btn-box .play-btn { display: none; background-image: url("../image/mobile/btn_play.png"); } .kv .play-btn-box .play-btn.active { display: block; } .kv .play-btn-box .pause-btn { display: none; background-image: url("../image/mobile/btn_pause.png"); } .kv .play-btn-box .pause-btn.active { display: block; } .launch-event { position: relative; font-family: "TT-Norms-Medium"; font-weight: 500; background: linear-gradient(180deg, #6fa1c4 0%, #98bfd2 100%); color: #ffffff; } .launch-event .launch-event-title-box .launch-event-title { padding-top: 9.89583vw; padding-bottom: 6.45833vw; font-size: 9.375vw; text-align: center; } .launch-event .swiper-box2 { position: relative; } .launch-event .swiper-box2 .swiper.mySwiper2 { width: 100%; height: 119vw; } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide { height: 58vw; } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image { display: block; background-size: cover; background-position: center; background-repeat: no-repeat; width: 78.33%; padding-bottom: 33.33333vw; position: relative; left: 50%; transform: translate(-50%); border-radius: 24px; border: 6px solid #ffffff; } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image1 { background-image: url("../image/mobile/01_vdo_01.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image2 { background-image: url("../image/mobile/01_vdo_02.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image3 { background-image: url("../image/mobile/01_vdo_03.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image4 { background-image: url("../image/mobile/01_vdo_04.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image5 { background-image: url("../image/mobile/01_vdo_05.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image6 { background-image: url("../image/mobile/01_vdo_06.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image7 { background-image: url("../image/mobile/01_vdo_07.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image8 { background-image: url("../image/mobile/01_vdo_08.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image.image9 { background-image: url("../image/mobile/01_vdo_09.png"); } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image .play-btn { width: 11.45833vw; height: 11.45833vw; background-image: url("../image/PC/01_btn_play.png"); background-size: cover; background-position: center; background-repeat: no-repeat; left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .image .play-btn:hover { cursor: pointer; } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-wrapper .swiper-slide .text { width: 59.58%; font-size: 6.25vw; font-weight: 500; text-align: center; padding-top: 2.1%; margin: auto; font-family: "TT-Norms-Regular"; } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-pagination .swiper-pagination-bullet { width: 40px; height: 5px; border-radius: 3px; background-color: rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; margin: auto 3px; opacity: 1; } .launch-event .swiper-box2 .swiper.mySwiper2 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #ffffff; } .launch-event .swiper-box2 .swiper-button-next { width: 4.16667vw; height: 8.22917vw; background-image: url("../image/PC/arrow_right.png"); background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: 0; top: 45.83333vw; } .launch-event .swiper-box2 .swiper-button-next::after { display: none; } .launch-event .swiper-box2 .swiper-button-prev { width: 4.16667vw; height: 8.22917vw; background-image: url("../image/PC/arrow_left.png"); background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: 0; top: 45.83333vw; } .launch-event .swiper-box2 .swiper-button-prev::after { display: none; } .launch-event .menu-bar { position: fixed; display: none; left: 50%; top: 50%; z-index: 11; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(15px); border-radius: 2.08333vw; width: 81.25vw; max-height: 70vh; padding: 11.14583vw 6.77083vw 4.89583vw 6.77083vw; overflow: auto; } .launch-event .menu-bar.menu-btn-open { display: block; } .launch-event .menu-bar .menu-btn .menu { display: none; } .launch-event .menu-bar .menu-text { display: block; font-style: normal; font-weight: 500; font-size: 6.25vw; color: #ffffff; text-align: center; margin-bottom: 4.79167vw; text-decoration: none; font-family: "TT-Norms-Regular"; } .launch-event .menu-bar .menu-text span { display: inline-block; vertical-align: middle; } .launch-event .menu-bar .menu-text.box6 { width: 79.66667vw; border: 0.3125vw solid rgba(255, 255, 255, 0.5); border-radius: 8.33333vw; padding: 2.5vw 0; } .launch-event .menu-bar .menu-text .icon-ar.mobile { display: inline-block; width: 4.6875vw; height: 7.1875vw; background-image: url("../image/mobile/icon_ar.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; margin-left: 2.08333vw; } .launch-event .menu-bar .icon-ar { display: none; } .launch-event .menu-bar .box1, .launch-event .menu-bar .box2, .launch-event .menu-bar .box3, .launch-event .menu-bar .box4, .launch-event .menu-bar .box5 { border: 0.3125vw solid rgba(255, 255, 255, 0.5); border-radius: 8.33333vw; padding: 2.5vw 0; } .launch-event .menu-bar .close-btn { display: block; width: 15vw; height: 15vw; background: #88fdd9; backdrop-filter: blur(5px); border-radius: 2.08333vw; } .launch-event .menu-bar .close-btn.close-btn-open { display: block; position: relative; left: 50%; transform: translateX(-50%); bottom: -4.16667vw; } .launch-event .menu-bar .close-btn::after { content: ""; display: block; width: 5vw; height: 5vw; background-image: url("../image/PC/close_icon.png"); background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } .launch-event .fixed-menu-btn { position: fixed; right: 3.33333vw; bottom: 23.125vw; width: 15vw; height: 15vw; display: block; z-index: 12; } .launch-event .fixed-menu-btn:hover { cursor: pointer; } .launch-event .fixed-menu-btn .menu-btn { border: transparent 1px solid; background: rgba(0, 0, 0, 0.6); border-radius: 2.08333vw; height: 15vw; width: 15vw; display: none; } .launch-event .fixed-menu-btn .menu-btn.menu-btn-open { display: block; } .launch-event .fixed-menu-btn .menu-btn .menu { width: 6.25vw; height: 0.76042vw; border-style: none; margin-left: auto; margin-right: auto; background: #88fdd9; border-radius: 0.45312vw; } .launch-event .fixed-menu-btn .menu-btn .menu.menu1 { margin-top: 4.79167vw; } .launch-event .fixed-menu-btn .menu-btn .menu.menu2 { margin-top: 1.58333vw; } .launch-event .fixed-menu-btn .menu-btn .menu.menu3 { margin-top: 1.58333vw; } .launch-event .pc-innovation-box { width: 87.5vw; box-sizing: border-box; background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%); border: 0.20833vw solid #ffffff; border-radius: 4.375vw; margin: 20vw auto 0; } .launch-event .pc-innovation-box .pc-innovation-title { font-style: normal; font-weight: 500; font-size: 9.375vw; padding-top: 6.97917vw; text-align: center; color: rgba(0, 0, 0, 0.7); } .launch-event .pc-innovation-box .main-text-box { font-size: 0; text-align: center; padding: 2.91667vw 0 0; } .launch-event .pc-innovation-box .main-text-box .text-box { text-decoration: none; display: inline-block; width: 40.3125vw; font-size: 5vw; vertical-align: top; margin: 0 1.5625vw; } .launch-event .pc-innovation-box .main-text-box .text-box .img { width: 31.25vw; height: 30.10417vw; background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0 auto 0.20833vw; } .launch-event .pc-innovation-box .main-text-box .text-box .img.img1 { background-image: url("../image/PC/02_invt_01.png"); } .launch-event .pc-innovation-box .main-text-box .text-box .img.img2 { background-image: url("../image/PC/02_invt_02.png"); } .launch-event .pc-innovation-box .main-text-box .text-box .img.img3 { background-image: url("../image/PC/02_invt_03.png"); } .launch-event .pc-innovation-box .main-text-box .text-box .img.img4 { background-image: url("../image/PC/02_invt_04.png"); } .launch-event .pc-innovation-box .main-text-box .text-box .img:hover { cursor: pointer; transform: scale(1.05); } .launch-event .pc-innovation-box .main-text-box .text-box .title { font-weight: 500; font-size: 5vw; color: rgba(0, 0, 0, 0.7); height: 12.08333vw; padding-bottom: 7.29167vw; } .launch-event .pc-innovation-box .main-text-box .text-box .text { display: none; } .launch-event .pc-innovation-box .main-text-box .innovation-learn-more-box { text-align: center; margin-bottom: 3.125vw; } .launch-event .pc-innovation-box .main-text-box .innovation-learn-more-box .learn-more { display: inline-block; font-weight: 500; font-size: 4.16667vw; color: #88fdd9; padding-top: 0.52083vw; padding-right: 5vw; padding-bottom: 0.9375vw; padding-left: 2.91667vw; background: rgba(0, 0, 0, 0.7); border-radius: 3.125vw; position: relative; } .launch-event .pc-innovation-box .main-text-box .innovation-learn-more-box .learn-more::after { content: ""; position: absolute; top: 50%; right: 2.5vw; transform: translateY(-50%); width: 1.25vw; height: 1.25vw; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../image/PC/more.png"); } .section-products { background-color: #f5f5f5; padding-top: 5.77083vw; padding-bottom: 1px; font-family: "Roboto Condensed"; } .section-products a { text-decoration: none; } .section-products .series-icon-box { position: relative; overflow: hidden; margin-bottom: 10.9375vw; } .section-products .series-icon-box .swiper-products-icon { width: calc(100% - 37.5vw); overflow: visible; } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide { width: 30vw; } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon { display: block; width: 100%; } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon { padding-bottom: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon1 { background-image: url("../image/mobile/03_bar_01.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon2 { background-image: url("../image/mobile/03_bar_02.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon3 { background-image: url("../image/mobile/03_bar_03.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon4 { background-image: url("../image/mobile/03_bar_04.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon5 { background-image: url("../image/mobile/03_bar_05.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon6 { background-image: url("../image/mobile/03_bar_06.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon7 { background-image: url("../image/mobile/03_bar_07.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon8 { background-image: url("../image/mobile/03_bar_08.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon9 { background-image: url("../image/mobile/03_bar_09.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon10 { background-image: url("../image/mobile/03_bar_010.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon11 { background-image: url("../image/mobile/03_bar_011.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon12 { background-image: url("../image/mobile/03_bar_012.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon13 { background-image: url("../image/mobile/03_bar_013.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon14 { background-image: url("../image/mobile/03_bar_014.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon15 { background-image: url("../image/mobile/03_bar_015.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon16 { background-image: url("../image/mobile/03_bar_016.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon17 { background-image: url("../image/mobile/03_bar_017.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon18 { background-image: url("../image/mobile/03_bar_018.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon19 { background-image: url("../image/mobile/03_bar_019.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .icon.icon20 { background-image: url("../image/mobile/03_bar_020.png"); } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide .products-icon .text { font-weight: 500; font-size: clamp(14px, 4vw, 18px); text-align: center; color: #333; padding: 1.875vw 0; background-color: transparent; border-radius: 4.6875vw; } .section-products .series-icon-box .swiper-products-icon .swiper-wrapper .swiper-slide.swiper-slide-active .products-icon .text { color: #fff; text-shadow: 0 0 3px var(--btnHover); background-color: var(--btnColor); /* background-image: linear-gradient(160deg, var(--btnColor) 30%, var(--btnHover) 80%); */ } .section-products .series-icon-box .swiper-button-next, .section-products .series-icon-box .swiper-button-prev { width: 18.75vw; height: 100%; top: 0; margin-top: 0; } .section-products .series-icon-box .swiper-button-next:after, .section-products .series-icon-box .swiper-button-prev:after { content: ""; width: 4.16667vw; height: 8.33333vw; background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; top: 15.10417vw; } .section-products .series-icon-box .swiper-button-next { right: 0; background: linear-gradient(270deg, #f8f8f8 0%, rgba(255, 255, 255, 0) 100%); } .section-products .series-icon-box .swiper-button-next:after { right: 3.64583vw; /* background-image: url("../image/PC/arrow_right.png"); */ } .section-products .series-icon-box .swiper-button-prev { left: 0; background: linear-gradient(90deg, #f8f8f8 0%, rgba(255, 255, 255, 0) 100%); } .section-products .series-icon-box .swiper-button-prev:after { left: 3.64583vw; /* background-image: url("../image/PC/arrow_left.png"); */ } .section-products .tags-box { font-size: 0; white-space: nowrap; overflow: auto; margin-bottom: 10.9375vw; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .section-products .tags-box::-webkit-scrollbar { display: none; } .section-products .tags-box .tag-box { display: inline-block; width: auto; padding: 0 1.875vw; } .section-products .tags-box .tag-box:first-child { padding-left: 6.25vw; } .section-products .tags-box .tag-box:last-child { padding-right: 6.25vw; } .section-products .tags-box .tag-box .tag { display: inline-block; padding: 0.625vw 3.75vw; font-weight: 500; font-size: 4.5vw; color: #333; background-color: #fff; border: 1px solid #333; border-radius: 20px; } .section-products .tags-box .tag-box .tag.active { color: #fff; text-shadow: 0 0 3px var(--btnHover); background-color: var(--btnColor); /* background-image: linear-gradient(160deg, var(--btnColor) 30%, var(--btnHover) 80%); */ border: 1px solid var(--btnColor); } .section-products .card-box { font-size: 0; white-space: nowrap; overflow: auto; padding-bottom: 6.25vw; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .section-products .card-box::-webkit-scrollbar { display: none; } .section-products .card-box .card-list { display: inline-flex; flex-direction: column; flex-wrap: wrap; column-gap: 3.75vw; row-gap: 4.47917vw; max-height: 177.5vw; padding: 0 6.25vw; } .section-products .card-box .card-list.less { max-height: 93.75vw; } .section-products .card-box .card-list::after { content: ""; display: inline-block; width: 2.5vw; /* height: 55.625vw; */ } .section-products .card-box .card-list .card { position: relative; width: 35.41667vw; height: 66.625vw; background-color: #fff; background: linear-gradient(180deg, #ffffff 70%, var(--gradient) 100%); border: 1px solid #ccc; /* box-shadow: 0px 0px 1px #ddd; */ border-radius: 10px; padding: 2.08333vw 2.60417vw; } .section-products .card-box .card-list .card .no { font-size: 3.75vw; color: #bcbcbc; margin-bottom: 1.875vw; white-space: normal; } .section-products .card-box .card-list .card .name { text-align: center; font-size: 4.0625vw; color: rgba(0, 0, 0, 0.7); margin-bottom: 0.9375vw; height: 6.875vw; width: 102%; white-space: normal; font-family: "Roboto Condensed Bold"; } .section-products .card-box .card-list .card .slogan { display: none; height: 9.375vw; font-size: 3.75vw; color: #000000; margin-bottom: 3.125vw; white-space: normal; } .section-products .card-box .card-list .card .img { /* position: absolute; width: 35.41667vw; bottom: 14.58333vw; padding-bottom: 54.8%; */ position: relative; width: 100%; height: 30vw; top: 0; margin-top: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; } .section-products .card-box .card-list .card .price { font-size: clamp(14px, 3.5vw, 4.5vw); color: #333; } .section-products .card-box .card-list .card .price b { display: block; font-size: clamp(1.275rem, 4.5vw, 5vw); color: #c74200; } .section-products .card-box .card-list .card .icons { display: none; align-items: center; width: 28.22917vw; height: 0; margin: 0 auto; margin-bottom: 2.29167vw; } .section-products .card-box .card-list .card .icons .icon { background-position: center; background-repeat: no-repeat; background-size: contain; margin-right: 1.04167vw; position: absolute; right: 2.60417vw; top: 18.75vw; } .section-products .card-box .card-list .card .icons .icon:last-child { margin-right: 0; } .section-products .card-box .card-list .card .icons .icon.icon-CES { width: 3.85417vw; height: 5.41667vw; background-image: url("../image/mobile/a_CES.png"); } .section-products .card-box .card-list .card .icons .icon.icon-GD { margin-top: 0.83333vw; width: 7.39583vw; height: 3.75vw; background-image: url("../image/mobile/a_GD.png"); } .section-products .card-box .card-list .card .icons .icon.icon-if { margin-top: 0.83333vw; width: 7.39583vw; height: 3.75vw; background-image: url("../image/mobile/a_if.png"); } .section-products .card-box .card-list .card .icons .icon.icon-RD { margin-top: 0.83333vw; width: 6.45833vw; height: 3.75vw; background-image: url("../image/mobile/a_RD.png"); } .section-products .card-box .card-list .card .note-box { display: none; } .section-products .card-box .card-list .card .more-box { position: absolute; bottom: 5.20833vw; left: 50%; transform: translateX(-50%); text-align: center; } .section-products .card-box .card-list .card .more-box .more { display: inline-block; font-weight: 500; font-size: 3.75vw; color: #88fdd9; padding-top: 0.41667vw; padding-right: 5.625vw; padding-bottom: 0.72917vw; padding-left: 2.70833vw; background: rgba(0, 0, 0, 0.7); border-radius: 30px; position: relative; } .section-products .card-box .card-list .card .more-box .more::after { content: ""; position: absolute; top: 50%; right: 2.08333vw; transform: translateY(-50%); width: 2.5vw; height: 2.5vw; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../image/mobile/more.png"); } .section-article { /* background: linear-gradient(0deg, #6fa1c4 0%, #9ac0d3 100%); */ /* background-color: rgba(0,116,217,0.25); */ } .section-article .discover-the-products-more-bo { width: 87.5vw; position: relative; left: 50%; transform: translate(-50%); font-family: "Roboto Condensed"; /* font-weight: 500; */ /* color: rgba(0, 0, 0, 0.7); */ border-style: none; } .section-article .discover-the-products-more-box .discover-main-title { width: 87.5vw; font-size: 8.33333vw; /* text-transform: uppercase; */ margin: 0 auto; padding: 10.41667vw 0 7.29167vw; color: #ffffff; /*text-shadow: 0px 0px 10px #538eaf; */ font-family: "tradegothicltprobold"; text-align: center; } .section-article .discover-the-products-more-box .card-list { font-size: 0; } .section-article .discover-the-products-more-box .card-list .card-first { display: block; width: 87.5vw; position: relative; left: 50%; transform: translate(-50%); top: 0; background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%); border: 1px solid #ffffff; border-radius: 3.75vw 3.75vw 4.375vw 4.375vw; margin-bottom: 3.75vw; text-decoration: none; } .section-article .discover-the-products-more-box .card-list .card-first .image1 { width: 87.5vw; height: 49.27083vw; background-image: url("../image/mobile/04_article_01.png"); background-position: center; background-repeat: no-repeat; background-size: cover; margin-bottom: 2.5vw; border-radius: 3.75vw; } .section-article .discover-the-products-more-box .card-list .card-first .date { color: rgba(0, 0, 0, 0.4); font-weight: 400; font-size: 4.375vw; margin-bottom: 6px; margin-left: 3.75vw; } .section-article .discover-the-products-more-box .card-list .card-first .title { font-weight: 500; font-size: 6.25vw; color: rgba(0, 0, 0, 0.7); margin-bottom: 0; margin-left: 3.75vw; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; } .section-article .discover-the-products-more-box .card-list .card-first .name { font-weight: 400; font-size: 5vw; color: rgba(0, 0, 0, 0.7); margin-bottom: 0; padding-bottom: 3.4375vw; margin-left: 3.75vw; } .section-article .discover-the-products-more-box .card-list .card-first .card-btn-more { display: none; } .section-article .discover-the-products-more-box .card-list .card { display: block; position: relative; width: 87.5vw; height: 25vw; font-size: 5vw; /* background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%); */ /* border: 1px solid #ffffff; */ /* border-radius: 4.375vw; */ margin-bottom: 3.75vw; } .section-article .discover-the-products-more-box .card-list .card.card7 { margin-bottom: 0; } .section-article .discover-the-products-more-box .card-list .card .image { position: absolute; width: 25vw; height: auto; background-position: center; background-repeat: no-repeat; background-size: cover; margin-right: 6.25vw; margin-left: 6.25vw; margin: 0; /* border-radius: 4.375vw; */ } .section-article .discover-the-products-more-box .card-list .card .image.image2 { background-image: url("../image/PC/04_article_v1.webp"); } .section-article .discover-the-products-more-box .card-list .card .image.image3 { background-image: url("../image/PC/04_article_v2.webp"); } .section-article .discover-the-products-more-box .card-list .card .image.image4 { background-image: url("../image/PC/04_article_v3.webp"); } .section-article .discover-the-products-more-box .card-list .card .image.image5 { background-image: url("../image/mobile/04_article_05.png"); } .section-article .discover-the-products-more-box .card-list .card .image.image6 { background-image: url("../image/mobile/04_article_06.png"); } .section-article .discover-the-products-more-box .card-list .card .image.image7 { background-image: url("../image/mobile/04_article_07.png"); } .section-article .discover-the-products-more-box .card-list .card .image.image8 { background-image: url("../image/mobile/04_article_08.png"); } .section-article .discover-the-products-more-box .card-list .card .image.image9 { background-image: url("../image/mobile/04_article_09.png"); } .section-article .discover-the-products-more-box .card-list .card .date, .section-article .discover-the-products-more-box .card-list .card .title, .section-article .discover-the-products-more-box .card-list .card .name, .section-article .discover-the-products-more-box .card-list .card .card-btn-more { display: inline-block; vertical-align: top; width: 55.3125vw; margin-left: 28.85417vw; } .section-article .discover-the-products-more-box .card-list .card .date { font-weight: 400; font-size: 3.75vw; color: rgba(0, 0, 0, 0.4); padding: 3.02083vw 0 0.41667vw; } .section-article .discover-the-products-more-box .card-list .card .title { font-weight: 500; font-size: 5vw; /* color: rgba(0, 0, 0, 0.7); */ color:#fff; height: 5.52083vw; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 0.41667vw 0 1.30208vw; } .section-article .discover-the-products-more-box .card-list .card .name { font-weight: 400; font-size: 4.375vw; color: rgba(0, 0, 0, 0.7); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 1.30208vw 0 2.60417vw; } .section-article .discover-the-products-more-box .card-list .card .card-btn-more { /* display: none; */ display: inline-block; width: auto; margin-left: 289px; text-decoration: none; background-color: var(--btnColor); width: auto; padding: 8px 20px; color: #fff; font-weight: 500; font-size: 16px; transition: background-color 0.3s; } .section-event-video { height: 192.70833vw; position: relative; left: 50%; transform: translate(-50%); background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../image/mobile/05_bg.jpg"); } .section-event-video .event-video-title-box { width: 86.77083vw; padding: 13.4375vw 0 0; position: relative; left: 50%; transform: translate(-50%); margin-left: 0; font-family: "TT-Norms-Medium"; font-weight: 500; color: #ffffff; text-align: left; } .section-event-video .event-video-title-box .event-video-title { width: 47.29167vw; font-size: 12.5vw; } .section-event-video .event-video-title-box .event-video-slogan { width: 92.70833vw; font-family: "TT-Norms-Regular"; font-size: 11.25vw; padding-top: 0.625vw; } .section-event-video .event-video-title-box .event-video-subtitle { width: 85.52083vw; font-family: "TT-Norms-Regular"; font-size: 5.3125vw; font-weight: 400; padding-bottom: 7.29167vw; } .section-event-video .event-video-title-box .event-video-btn { display: block; width: 80.20833vw; padding: 2.29167vw 0; text-align: center; background: rgba(255, 255, 255, 0.3); border: 2px solid #ffffff; backdrop-filter: blur(5px); border-radius: 5.9375vw; box-sizing: border-box; font-weight: 400; font-size: 6.25vw; font-family: "TT-Norms-Regular"; margin-bottom: 5.3125vw; text-decoration: none; color: #ffffff; } .section-event-video .event-video-title-box .event-video-btn:hover { cursor: pointer; } .section-event-video .event-video-title-box .ar-fun-btn { display: block; width: 80.20833vw; padding: 2.29167vw 0; text-align: center; background: rgba(0, 0, 0, 0.3); border: 2px solid #88fdd9; backdrop-filter: blur(5px); border-radius: 5.9375vw; box-sizing: border-box; font-weight: 400; font-size: 6.25vw; color: #88fdd9; text-decoration: none; font-family: "TT-Norms-Regular"; } .section-event-video .event-video-title-box .ar-fun-btn:hover { cursor: pointer; } .go-top { display: block; position: fixed; right: 3.33333vw; bottom: 5vw; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); border-radius: 2.08333vw; padding: 5vw 4.6875vw; z-index: 10; opacity: 0; transition: opacity 0.3s; text-decoration: none; } .go-top.active { opacity: 1; } .go-top::before { content: ""; display: block; width: 5.625vw; height: 5vw; background-image: url("../image/mobile/go_top.png"); background-position: center; background-repeat: no-repeat; background-size: contain; margin: 0 auto; } .qr-code-lightbox.pc { display: none; } .qr-code-lightbox.mobile { display: none; position: fixed; z-index: 10101; top: 50%; left: 50%; transform: translate(-50%, -50%); background: black; width: 100vw; max-height: 90%; border-radius: 15px; font-size: 1.33vw; color: #edebe9; transition: opacity 0.3s, display 1.2s; pointer-events: none; overflow: auto; font-family: "TT-Norms-Regular"; } .qr-code-lightbox.mobile.lightbox-show { display: grid; opacity: 1; transition: opacity 0.3s; pointer-events: auto; } .qr-code-lightbox.mobile .lightbox-textbox .lightbox-title { letter-spacing: 1px; font-weight: bold; text-align: center; width: 80%; padding-top: 13%; margin-left: 10%; font-size: 555%; } .qr-code-lightbox.mobile .lightbox-textbox .qr-code-bg .qr-code { background-image: url("../image/mobile/mobile_ar.png"); background-position: center; background-repeat: no-repeat; background-size: contain; border-style: none; padding-top: 28%; padding-bottom: 28%; margin-top: 2%; margin-left: 7%; } .qr-code-lightbox.mobile .lightbox-textbox .lightbox-text { width: 93.71%; line-height: 1.35; font-size: 380%; margin-left: 6.5%; } .qr-code-lightbox.mobile .lightbox-textbox .lightbox-text.grid3 { padding-top: 4%; } .qr-code-lightbox.mobile .lightbox-textbox .lightbox-text.grid4 { padding-top: 5.5%; } .qr-code-lightbox.mobile .lightbox-textbox .lightbox-text.grid5 { height: 0; } .qr-code-lightbox.mobile .lightbox-textbox .lightbox-text .lightbox-step { font-weight: 600; } .qr-code-lightbox.mobile .lightbox-textbox .lightbox-text .lightbox-step.text { font-weight: 200; } .qr-code-lightbox.mobile .lightbox-textbox .lightbox-note { color: #7f7d80; width: 90%; font-size: 300%; padding-top: 3%; padding-bottom: 11%; } .qr-code-lightbox.mobile .lightbox-textbox .lightbox-note .note { margin-left: 7%; } .qr-code-lightbox.mobile .close-box { overflow: hidden; width: 11%; padding-top: 3%; padding-bottom: 3%; position: fixed; top: 0; right: 0; border-top-right-radius: 15px; border-bottom-left-radius: 15px; background: #87fdda; } .qr-code-lightbox.mobile .close-box .icon-close { background-image: url("../image/mobile/close_icon.png"); background-position: center; background-repeat: no-repeat; background-size: contain; padding-top: 21%; padding-bottom: 21%; } } /*# sourceMappingURL=style.css.map */