@charset "UTF-8"; :root { --main-color: #34404b; --sub-color: #ee751b; } .info-item .logo-img { position: absolute; z-index: 10; top: 20px; left: 50px; } @media (max-width: 991px) { .info-item .logo-img { left: 100px; } } @media (max-width: 767px) { .info-item .logo-img { top: 5%; right: 0; left: -65%; } } .info-item .logo-img img { width: 100%; -o-object-fit: contain; object-fit: contain; } .info-item .logo-img .img-designer { height: 50px; } @media (max-width: 767px) { .info-item .logo-img .img-designer { height: 40px; } } @media (max-width: 575px) { .info-item .logo-img .img-designer { height: 26px; } } .info-item .logo-img .img-renovation { height: 60px; } .info-item .logo-img .img-glory { height: 70px; } @media (max-width: 767px) { .info-item .logo-img .img-glory, .info-item .logo-img .img-renovation { height: 60px; } } @media (max-width: 575px) { .info-item .logo-img .img-glory, .info-item .logo-img .img-renovation { height: 34px; margin-left: -4vw; } } .info-item section { position: absolute; z-index: 10; bottom: 70px; left: 70px; color: #fff; text-shadow: 1px 1px 4px #333; } @media (max-width: 991px) { .info-item section { left: 14%; bottom: 10%; } } @media (max-width: 767px) { .info-item section { left: 6%; bottom: 6%; } } .info-item section h3 { margin-bottom: 1rem; font-size: 18px; } @media (max-width: 767px) { .info-item section h3 { display: none; } } .info-item section div { display: flex; border: 1px solid #fff; } @media (max-width: 767px) { .info-item section div { flex-direction: column; } } .info-item section div h2 { margin: auto; margin-left: 0; padding: 5px 30px; font-size: 26px; } @media (max-width: 575px) { .info-item section div h2 { font-size: 18px; margin: 0; text-align: center; } } .info-item section div h2:first-child { padding-bottom: 8px; background-color: rgba(237, 237, 237, 0.3); } .info-item section div h2:last-child { font-size: 24px; } @media (max-width: 575px) { .info-item section div h2:last-child { font-size: 18px; } } .info-item section div h2:last-child small { font-size: 16px; font-weight: 300; } @media (max-width: 575px) { .info-item section div h2:last-child small { font-size: 14px; } } .banner-content { max-width: 100%; margin-top: 0.875rem; } @media (max-width: 991px) { .banner-content { margin-top: 0; } } .banner-content img { width: 1300px; height: 535px; margin: 0 7px; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1200px) { .banner-content img { width: 100%; height: 400px; } } @media (max-width: 991px) { .banner-content img { height: 50vw; } } @media (max-width: 767px) { .banner-content img { height: 65vw; width: 93vw; } } .banner-content .slick-next:before, .banner-content .slick-prev:before { content: "" !important; } .banner-content .slick-next { right: 160px; margin-left: auto; } @media (max-width: 575px) { .banner-content .slick-next { right: 20px; } } .banner-content .slick-prev { left: -50px; margin-right: auto; } @media (max-width: 575px) { .banner-content .slick-prev { left: 20px; } } .banner-content .slick-next, .banner-content .slick-prev { top: 5vw; z-index: 1000; } .banner-content .slick-next i, .banner-content .slick-prev i { opacity: 0.6; font-size: 32px; transition: all 0.3s; } .banner-content .slick-next:hover i, .banner-content .slick-prev:hover i { opacity: 1; } @media (max-width: 1200px) { .banner-content .slick-next, .banner-content .slick-prev { top: 1vw; } } .banner-content .slick-next i, .banner-content .slick-prev i { padding: 200px 100px; } .banner-content .slick-dots { bottom: 10px; } .banner-content .slick-dots li { margin: 0; } .banner-content .slick-dots li button:before { width: 10px; height: 10px; content: ""; opacity: 1; border: 1px solid #fff; border-radius: 100px; } .banner-content .slick-dots .slick-active button:before { color: #fff; background-color: #fff; } .banner-content .banner-slider img { filter: brightness(50%); } .banner-content .slick-now img { filter: brightness(100%) !important; } .banner-content .slick-slide { position: relative; } @media (max-width: 991px) { .index-content { max-width: 100%; } } .index-content * { letter-spacing: 0.05em; font-family: "Helvetica"; } .index-content .fas { font-family: Font Awesome\ 5 Free !important; } .index-content h3 { color: #727272; font-weight: 500; line-height: 22px; } .index-content h5 { padding: 0 10px; margin-bottom: 20px; font-size: 22px; font-weight: 500; color: var(--main-color); } .index-content h5 span { color: var(--sub-color); } .index-content .describe { padding-top: 50px; margin: 25px 0; font-size: 32px; font-weight: 500; text-align: center; color: #34404b; line-height: 1.3em; border-top: 1px solid #989898; } .index-content .describe span { color: var(--sub-color); } @media (max-width: 991px) { .index-content .describe { padding-top: 1.3rem; } } @media (max-width: 767px) { .index-content .describe { font-size: 25px; } } .index-content .card-item { padding: 0 10px; margin-top: 1.3rem; } .index-content .card-item a { height: 90px; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 500; text-align: center; color: #727272; background-color: #ededed; border-radius: 5px; transition: all 0.3s; line-height: 1.2rem; } @media (max-width: 767px) { .index-content .card-item a { height: 60px; margin-bottom: 16px; } } .index-content .top-card a, .index-content .center-card a { position: relative; overflow: hidden; } .index-content .top-card a span, .index-content .center-card a span { position: absolute; display: block; width: 0px; height: 0px; border-radius: 100%; transition: width 0.4s ease-in-out, height 0.4s ease-in-out; transform: translate(-50%, -50%); z-index: -1; } .index-content .top-card a:hover, .index-content .center-card a:hover { color: #fff; background-color: transparent !important; } .index-content .top-card a:hover span, .index-content .center-card a:hover span { width: 225%; height: 500%; } .index-content .topic-content .img-box { border-radius: 5px; overflow: hidden; } .index-content .topic-content .slick-track { margin: 0; display: flex; justify-content: space-around; } @media (max-width: 575px) { .index-content .topic-content .slick-track { justify-content: start; } } .index-content .designer-content h3 { margin: 10px auto 5px; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-break: after-white-space; } @media (max-width: 575px) { .index-content .designer-content h3 { width: 160px; } } .index-content .designer-content .name { margin-top: 5px; display: block; font-size: 16px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-break: after-white-space; } .index-content .designer-content .name small { font-size: 12px; } .index-content .designer-content .slide-item { -o-object-position: top; object-position: top; -o-object-fit: contain; object-fit: contain; } .index-content .designer-content .slick-slide { margin: 0 15px; } .index-content .designer-content section { position: relative; } .index-content .designer-content section .slide-img { display: block; margin: 0 auto 15px; height: 130px; width: 130px; border-radius: 100px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); transition: 0.3s all ease-in; overflow: unset; } .index-content .designer-content section .slide-img a { display: block; position: relative; } .index-content .designer-content section .slide-img img { height: 130px; width: 130px; -o-object-fit: cover; object-fit: cover; border-radius: 100px; transform: scale(1) !important; } .index-content .designer-content section .slide-img img:hover { transform: scale(1) !important; } .index-content .designer-content section .slide-img:hover .img-border { opacity: 1 !important; } .index-content .designer-content section .slide-img .img-border { opacity: 0; display: block; border: 2px solid var(--sub-color); width: 140px; height: 140px; position: absolute; top: -5px; left: -5px; border-radius: 100px; z-index: 100; transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.74, 1) 0s, transform 0.35s cubic-bezier(0.26, 1, 0.48, 1) 0s; } .index-content .designer-content .slick-track { padding-top: 20px; } .index-content .topic-slider section, .index-content .featured-slider section, .index-content .popular-slider section { padding: 0 10px; } @media (max-width: 767px) { .index-content .topic-slider section, .index-content .featured-slider section, .index-content .popular-slider section { width: 100%; } } @media (max-width: 575px) { .index-content .topic-slider section, .index-content .featured-slider section, .index-content .popular-slider section { width: 45vw; } } @media (max-width: 414px) { .index-content .topic-slider section, .index-content .featured-slider section, .index-content .popular-slider section { width: 75vw; } } .index-content .topic-slider img, .index-content .featured-slider img, .index-content .popular-slider img { height: 185px; width: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1400px) { .index-content .topic-slider img, .index-content .featured-slider img, .index-content .popular-slider img { height: 11vw; } } @media (max-width: 991px) { .index-content .topic-slider img, .index-content .featured-slider img, .index-content .popular-slider img { height: 200px; } } @media (max-width: 767px) { .index-content .topic-slider img, .index-content .featured-slider img, .index-content .popular-slider img { height: 145px; } } @media (max-width: 575px) { .index-content .topic-slider img, .index-content .featured-slider img, .index-content .popular-slider img { height: 25vw; } } @media (max-width: 414px) { .index-content .topic-slider img, .index-content .featured-slider img, .index-content .popular-slider img { height: 42vw; } } .index-content .topic-slider .title, .index-content .featured-slider .title, .index-content .popular-slider .title { display: flex; align-items: flex-start; margin-top: 10px; } .index-content .topic-slider .tab-block, .index-content .featured-slider .tab-block, .index-content .popular-slider .tab-block { display: flex; flex-wrap: wrap; height: 30px; overflow: hidden; margin-top: 10px; } .index-content .topic-slider .tab-block a, .index-content .featured-slider .tab-block a, .index-content .popular-slider .tab-block a { display: inline-block; margin-right: 6px; } .index-content .topic-slider .tab-block a:hover h4, .index-content .featured-slider .tab-block a:hover h4, .index-content .popular-slider .tab-block a:hover h4 { color: var(--sub-color); border: 1px solid var(--sub-color); } .index-content .topic-slider .tab-block a h4, .index-content .featured-slider .tab-block a h4, .index-content .popular-slider .tab-block a h4 { margin-bottom: 10px; padding: 3px 10px 5px; color: #ADADAD; border: 1px solid #ADADAD; border-radius: 5px; font-size: 14px; font-weight: 400; } .index-content .popular-slider .slide-img { overflow: auto; } .index-content .popular-slider .slide-img a:first-child { display: block; overflow: hidden; border-radius: 5px; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1607843137); } .index-content .popular-slider .slide-img a:first-child img { border-radius: 5px; } .index-content .popular-slider .designer-item { display: flex; align-items: center; margin: -20px 0 10px 10px; } .index-content .popular-slider .designer-item img { width: 80px; height: 80px; -o-object-position: top; object-position: top; -o-object-fit: cover; object-fit: cover; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); transform: scale(1) !important; } .index-content .popular-slider .designer-item h2 { width: 12vw; font-size: 16px; margin: 10px 0 0 10px; color: #707070; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-break: after-white-space; transition: all 0.2s; } @media (max-width: 1200px) { .index-content .popular-slider .designer-item h2 { width: 9vw; } } @media (max-width: 991px) { .index-content .popular-slider .designer-item h2 { width: 22vw; } } .index-content .featured-content .slide-img, .index-content .topic-content .slide-img, .index-content .video-content .slide-img { box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1607843137); } .index-content .video-content .slide-img a { display: block; position: relative; } .index-content .video-content .slide-img a:hover .play-btn img { transform: scale(1.1); } .index-content .video-content .slide-img .play-btn { position: absolute; z-index: 999; bottom: 0; right: 3px; } .index-content .video-content .slide-img .play-btn img { width: 60px; height: 60px; } .index-content .video-slider section { margin: auto 10px; max-width: 300px; } @media (max-width: 575px) { .index-content .video-slider section { width: 43vw; } } @media (max-width: 414px) { .index-content .video-slider section { width: 70vw; } } .index-content .video-slider .slide-img { border-radius: 5px; } .index-content .video-slider .slide-img .slide-item { height: 170px; -o-object-fit: cover; object-fit: cover; width: 100%; } @media (max-width: 767px) { .index-content .video-slider .slide-img .slide-item { height: 135px; } } @media (max-width: 414px) { .index-content .video-slider .slide-img .slide-item { height: 39.5vw; } } .index-content .slide-img { display: block; overflow: hidden; } .index-content .slide-img img { transition: all 0.5s; } .index-content .slide-img:hover img { transform: scale(1.1); } .index-content #youtubeModal .modal-content { background-color: transparent; border: none; } .index-content #youtubeModal .modal-content .modal-header { border-bottom: none; } .index-content #youtubeModal .modal-content .modal-title { padding: 0; font-size: 30px; font-weight: bold; color: #fff; } .index-content #youtubeModal .modal-body { padding: 10px 0; } .index-content #youtubeModal .modal-body section { display: flex; justify-content: center; } .index-content #youtubeModal .modal-body section h2 { color: #fff; font-size: 20px; margin-top: 15px; border-bottom: 1px solid #fff; text-align: center; padding-bottom: 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-break: after-white-space; transition: all 0.2s; } .index-content #youtubeModal .video-box { display: flex; margin: auto; position: relative; width: 80%; height: 0; padding-bottom: 45%; } @media (max-width: 991px) { .index-content #youtubeModal .video-box { width: 100%; padding-bottom: 55%; } } .index-content #youtubeModal .video-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .index-content .featured-slider .slide-img { border-radius: 5px; } .top-card a:hover { text-shadow: 1px 2px 4px rgb(188, 84, 6); } .top-card a span { background-color: var(--sub-color); } .top-card .bag-btn { color: var(--sub-color) !important; } .top-card .bag-btn:hover { color: #fff !important; } .top-card .bag-btn:hover section img { transition: all 0.5s; } .top-card .bag-btn:hover section img:last-child { opacity: 1; } .top-card .bag-btn section { width: 20px; position: relative; } .top-card .bag-btn section img { width: 15px; top: -10px; left: -2px; position: absolute; } .top-card .bag-btn section img:first-child { filter: invert(46%) sepia(79%) saturate(779%) hue-rotate(350deg) brightness(98%) contrast(91%); } .top-card .bag-btn section img:last-child { opacity: 0; filter: invert(100%) sepia(2%) saturate(0%) hue-rotate(21deg) brightness(107%) contrast(101%); } .center-card a:hover { color: #fff; } .center-card div:nth-child(1) a span, .center-card div:nth-child(2) a span { background-color: #EA068C; } .center-card div:nth-child(3) a span { background-color: #0F506D; } .more-link { color: var(--sub-color); transition: all 0.2s; } .more-link:hover { color: var(--sub-color); opacity: 0.7; } .more-link img { width: 15px; transform: rotate(90deg); filter: invert(50%) sepia(97%) saturate(1293%) hue-rotate(348deg) brightness(95%) contrast(96%); } .options-content h3 { font-size: 16px; } .options-content .space-slider .slick-list, .options-content .options-slider .slick-list { padding-bottom: 5px; } .options-content .space-slider .slick-slide section, .options-content .options-slider .slick-slide section { margin: 0 10px; border-radius: 0 0 5px 5px; } .options-content .space-slider .slick-slide section .slide-img, .options-content .options-slider .slick-slide section .slide-img { height: 170px; display: block; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1607843137); border-radius: 5px; overflow: hidden; } @media (max-width: 767px) { .options-content .space-slider .slick-slide section .slide-img, .options-content .options-slider .slick-slide section .slide-img { width: 155px; height: 140px; } } .options-content .space-slider .slick-slide section .slide-img img, .options-content .options-slider .slick-slide section .slide-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 5px 5px 0 0; transition: all 0.5s; } .options-content .space-slider .slick-slide section a, .options-content .options-slider .slick-slide section a { position: relative; display: flex; height: 100%; } .options-content .space-slider .slick-slide section a:hover h3, .options-content .options-slider .slick-slide section a:hover h3 { color: var(--sub-color); background-color: rgba(237, 237, 237, 0.9); } .options-content .space-slider .slick-slide section a:hover img, .options-content .options-slider .slick-slide section a:hover img { transform: scale(1.1); } .options-content .space-slider .slick-slide section a h3, .options-content .options-slider .slick-slide section a h3 { padding: 10px; text-align: center; color: var(--main-color); background-color: rgba(237, 237, 237, 0.8); position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 5px 5px; } .options-content .space-slider .slick-slide section a h3 strong, .options-content .options-slider .slick-slide section a h3 strong { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-break: after-white-space; transition: all 0.2s; font-weight: 500; } @media (max-width: 767px) { .options-content .space-slider .slick-slide section span { width: 100%; } } @media (max-width: 575px) { .options-content .space-slider .slick-slide section span { width: 41vw; } } .options-content .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .options-content .slick-prev, .main-content .slick-prev { left: -10px !important; } .options-content .slick-next, .main-content .slick-next { right: -12px !important; } .options-content .slick-prev, .options-content .slick-next, .main-content .slick-prev, .main-content .slick-next { width: 35px; height: 35px; z-index: 100; box-shadow: 2px 2px 7px #979797; background: rgba(255, 255, 255, 0.3); border-radius: 100px; transition: all 0.3s; } .options-content .slick-prev:hover, .options-content .slick-next:hover, .main-content .slick-prev:hover, .main-content .slick-next:hover { background: rgba(255, 255, 255, 0.8); } .options-content .slick-prev .fa-chevron-right, .options-content .slick-prev .fa-chevron-left, .options-content .slick-next .fa-chevron-right, .options-content .slick-next .fa-chevron-left, .main-content .slick-prev .fa-chevron-right, .main-content .slick-prev .fa-chevron-left, .main-content .slick-next .fa-chevron-right, .main-content .slick-next .fa-chevron-left { padding-top: 20px; color: #989898 !important; font-size: 15px !important; } .options-content .slick-prev .fa-chevron-right, .options-content .slick-next .fa-chevron-right, .main-content .slick-prev .fa-chevron-right, .main-content .slick-next .fa-chevron-right { padding-left: 4px; } .options-content .slick-prev:before, .options-content .slick-next:before, .main-content .slick-prev:before, .main-content .slick-next:before { content: "" !important; } .main-content { margin-bottom: 100px; } .main-content h3 { font-size: 18px; line-height: 1.4em; letter-spacing: 0.05em; } .slider-close-btn { position: absolute; top: 0; right: 20px; width: 50px; height: 30px; background-color: hsla(0, 0%, 100%, 0.66); border-radius: 0 0 50px 50px; color: #888; border: none; outline: none; font-size: 11px; box-shadow: 0 0 10px rgba(32, 32, 32, 0.25); line-height: 12px; z-index: 3; } /* 手機版進度條 */ .progress { display: none; width: 50%; height: 3px; margin: 10px auto 0; border-radius: 10px; overflow: hidden; background-color: #f5f5f5; background-image: linear-gradient(to right, var(--sub-color), var(--sub-color)); background-repeat: no-repeat; background-size: 0 100%; transition: background-size 0.4s ease-in-out; } @media (max-width: 575px) { .progress { display: block; } } .loading-item { background: #fff; position: fixed; height: 100vh; width: 100vw; z-index: 1000; top: 0; display: flex; justify-content: center; align-items: center; } .loading-item.loading-hide { animation-name: fadeOut; animation-duration: 1s; opacity: 0; z-index: -1000; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .sub-banner-content .sub-banner-slider img { width: 650px; margin: auto; padding: 0 10px; } .sub-banner-content .sub-banner-slider .slick-prev:before, .sub-banner-content .sub-banner-slider .slick-next:before { content: "" !important; } .sub-banner-content .sub-banner-slider .slick-prev i, .sub-banner-content .sub-banner-slider .slick-next i { display: none; opacity: 0.3; transition: all 0.3s; } .sub-banner-content .sub-banner-slider .slick-prev i:hover, .sub-banner-content .sub-banner-slider .slick-next i:hover { opacity: 0.8; } .ellipsis-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-break: after-white-space; transition: all 0.2s; } .ellipsis-title:hover { color: var(--sub-color) !important; }/*# sourceMappingURL=index.css.map */