/* CSS Document */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; } /** font-family:=================================*/ .txt-ch{font-family:'Noto Serif TC',"sans-serif"; } .txt-ch-title { font-family: 'Noto Serif TC', serif; font-size: 2.4rem; line-height: 130%;} .txt-en{font-family: 'Noto Serif TC', sans-serif;} .txt-tc{font-family: 'Noto Sans TC','Microsoft JhengHei', '微軟正黑體',sans-serif;} .color-white{color: #fff!important; } .color-gray{color:#5a5a5a; } .f-400{font-weight: 400!important;} .vText { -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } .cms-wrapper { position: relative; display: block; margin:0px auto; width: 100%; padding:0px 20px; max-width: calc((100% - 40px)/12*12 + 40px)} @media (min-width:1025px) { .cms-wrapper { padding-right: 20px; padding-left: 20px; } } @media (min-width:1100px) { .cms-wrapper { padding-right:30px; padding-left: 30px; } } @media (min-width:1200px) { .cms-wrapper { padding-right: 40px; padding-left: 40px; max-width: 1280px} } @media (min-width:1920px) { .cms-wrapper { padding-right: 40px; padding-left: 40px; max-width: 1440px } } /**banner=================================*/ .cms-main-banner { width: 100%; height: auto; margin:20px auto; padding:0px; position: relative; z-index: 2; } .cms-main-banner .imgSliderBox { width: 100%; max-width: 100%; margin: 0px auto; padding:0px; display: flex; flex-wrap: wrap; justify-content: center; position: relative; z-index:0;; overflow: hidden;} .slider-item { display: block; width: 100%; max-width: 100%; margin: auto; position: relative; z-index:2; } .slider-item img { display: block; width:100%; max-width: 100%; margin: auto; height: auto; position: relative; } .cms-main-banner .slick-dots { bottom:20px!important; } .cms-main-banner .cms-sloga {max-width: 600px; height: auto; position: absolute; left:30%; top:20px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; z-index: 9;-webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } .cms-main-banner .cms-sloga h2 { width: auto; margin:0px 10px; font-size: 1.875rem; line-height:2.5rem; letter-spacing: 5px; font-weight:700;color:#fff; word-wrap:break-word;word-break:keep-all; font-family: 'Noto Serif TC', serif;} .cms-main-banner .cms-sloga p { width: auto; font-size:0.875rem; font-weight: 400; color: #fff; text-align: left; word-wrap:break-word;word-break:keep-all;font-family: 'Noto Serif TC', serif;} @media (min-width:1200px) { .cms-main-banner .cms-sloga { left:75%; top:10%; } } .type { -webkit-animation-name: type; animation-name: type; -webkit-animation-timing-function:cubic-bezier(0.250, 0.460, 0.450, 0.940) ; animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940) ;} .animated.type { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;} @media (max-width: 1199.98px) { .cms-main-banner .cms-sloga { top:10%;} .cms-main-banner .cms-sloga h2 { font-size:1.75rem; } .cms-main-banner .cms-sloga p { font-size:0.875rem; } } @media (max-width: 920px) { .cms-main-banner .cms-sloga { left:auto;right: 50px; top:20px;} } @media (max-width: 767.98px) { .cms-main-banner { width: 100%;} .cms-main-banner .imgSliderBox { width: 100%; height:534px; } .slider-item-img { width:30%; left:auto;right: 0px; top:0; } .cms-main-banner .cms-sloga { width:80%; max-width: 600px; position: absolute; left:20px; top:5%; } .cms-main-banner .cms-sloga h2 { margin-bottom: 5px; width: 100%;height: auto; font-size: 1.5rem;} .cms-main-banner .cms-sloga h3 {font-size:2.15rem; } .cms-main-banner .cms-sloga p { width: 100%; display: none; } .type { animation:none; } .animated.type { animation:none;} } @media (max-width: 350px) { .cms-main-banner .cms-sloga h2 {font-size: 1.3rem;} } @keyframes zoom { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 1; } } @-webkit-keyframes type { 0% { -webkit-transform: translateX(300px); transform: translateX(300px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes type { 0% {-webkit-transform: translateX(300px); transform: translateX(300px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .cms-main-wrap{ width: 100%; padding:0px 60px; margin:0px auto; height: auto; display: flex; flex-wrap: wrap;justify-content: center; } @media (max-width: 767.98px) { .cms-main-wrap{ padding:0px; } } /*bg-style*/ .bg-w1{ width:10%; height:400px; top:60%; right: 0px; background: url("../images/index/w-1.svg") no-repeat left top; background-size:auto 100% ; position: absolute; z-index: 1; } .bg-w2{ width:26%; height: 340px; top:40%; left:0; background: url("../images/index/w-2.svg") no-repeat left top; background-size: 100% auto; position: absolute; z-index: 3;} @media (min-width:1100px) { .bg-w1{ width:10%; height: 300px; top:10%; right:-60px; } .bg-w2{ width:26%; height: 380px; top:54%; left:-4%; } } @media (min-width:1200px) { .bg-w1{ width:10%; height: 400px; top:10%; right: -50px; } .bg-w2{ width:26%; height: 400px; top:74%; left:-4%; } } @media (min-width:1600px) { .bg-w1{ width:10%; height: 600px; top:10%; right: 0px; } .bg-w2{ width:20%; height: 360px; top:74%; left:4%;} } @media (min-width:1700px) { .bg-w1{ width:10%; height: 600px; top:10%; right: 0px; } .bg-w2{ width:16%; height: 340px; top:74%; left:4%;} } @media (max-width: 767.98px) { .bg-w1{ display: none; } .bg-w2{ display: none;} } .bg-w3{ background: url("../images/index/w-3.svg") no-repeat right top; background-size:50% auto; } .bg-w4{ background: url("../images/index/w-4.svg") no-repeat left top; background-size:50% auto; } .bg-about{ background-image: url("../images/index/bg-2.png"),url("../images/index/bg-1.jpg");background-repeat: no-repeat,no-repeat; background-position: left 46%, right top;background-size: 60% auto,50% auto; } .cms-main-about{position: relative; margin:0px auto; padding:120px 0px 40px 0px; width: 100%;display: flex; flex-wrap: wrap; z-index: 0; } .cms-block {width:100%; height: auto; padding:0px 10px; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; } .cms-block-title{width:auto; margin:0; padding: 0px; display: flex; flex-wrap: wrap; position: relative; z-index: 1;} .cms-block-txt{width:80%; margin:0; padding: 0px 40px; display: flex; flex-wrap: wrap;align-content: center; position: relative; z-index: 1;} #cms-main .cms-block-txt p { font-size:1.063rem; line-height: 1.875rem; margin-bottom:15px; } .cms-block-txt-1{width:60%; margin:7% auto auto auto; padding: 0px; } #cms-main .cms-block-txt-1 p{ font-size: 0.875rem; line-height: 1.35rem; margin-bottom: 5px; } .cms-block-txt-2{width:40%; margin:0; padding: 0px 0px; } #cms-main .cms-main-txt p { width: 100%; font-size:1rem; text-align: center; line-height: 180%; font-weight: 400; padding:5px; margin-bottom: 20px; color:#2c2c2c; } #cms-main .cms-main-txt p strong{ display: block; width: 100%; font-size: 1.313rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:400; padding:5px; margin-bottom: 10px; color: #000; } .cms-main-about-card { width:100%; margin:20px 0px; padding:0px; display: flex; flex-wrap: wrap; align-items: center;position: relative;pointer-events: none; } .cms-main-about-card .item-full{ width: 100%; max-width: 100%; margin:0px; padding: 0px 0px 40px 0px; height: auto;pointer-events: none;} .cms-main-about-card .item{ width: 50%; max-width: 100%; margin:0px; padding: 30px 0px 40px 0px; height: auto } .cms-main-about-card .item-2{ width: 50%; max-width: 100%; margin:0px; padding: 80px 0px 0px 0px; display: flex; flex-wrap: wrap; align-items: center;} .cms-main-about-card .item-2 img{ height: auto; margin: 0px; padding:10px; } .cms-main-about-card .item img{ margin: 0px; padding:10px; } @media (min-width: 1520px) { .cms-main-about-item { margin-top:20px; } .cms-main-about-item .cms-title{ margin-bottom: 30px; } } @media (max-width: 1024px) { .cms-main-about-item { margin: 0px; padding:0px 25px; } .cms-main-about-card { margin: 0px; padding: 0px; } } @media (max-width:920px) { .cms-block-title{width:30%; margin:0; padding: 0px; } .cms-block-txt{width:70%; margin:0; padding: 0px ; } } @media (max-width: 768px) { .cms-main-about{ margin:0;padding:0px; } .cms-main-about-item {width: 100%;-ms-flex: 1 1 100%; flex: 1 1 100%; margin: 0px; padding:0px 35px; } .cms-main-about-card { width: 80% ;-webkit-box-flex: 1; -ms-flex: 1 1 calc(100% - 30%); flex: 1 1 calc(100% - 30%); margin: 0px auto; padding: 0px; } .cms-main-about-item .cms-main-txt{ margin:0px auto 2% auto; } .cms-main-about-card .item{ width: 80% ; margin: 0px auto; padding: 0px; } .cms-main-about:before{ display: none;} .cms-main-about-item .color-white{ color: #000!important; } .cms-main-about-card .item-full{ margin-top:360px; } } @media (max-width: 767.98px) { .cms-main-about{ padding: 20px 0px 140px 0px; background-position: right bottom; background-size: auto 100% ; } .cms-main-about-item { padding:0px 15px; } .bg-about{ background-position: left 70vh, right top;background-size:100% auto,50% auto; } .cms-block-title{width:100%; } .cms-block-txt{width:100%; } } .cms-main-brand{width:100%; margin:0px auto; padding:0px 0px 100px 0px; position:relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center;clear: both; } .cms-main-brand .cms-block-title{ position:absolute; right: 5%; top:-10%;z-index: 9;} .cms-main-brand .cms-block-title:after{ content: "";display: block; width: 100%; height: 40px; right:0; top:17%; position:absolute;z-index:2; background: url("../images/index/w-bg.jpg") repeat left top; } .cms-main-brand .cms-block-title .cms-title-v h2 { margin-top:-100px;margin-left: 30px; font-size: 2.75rem;} .bg-brand{ margin:0px auto; padding:20px; background: url("../images/index/w-bg.jpg") repeat left top;position: relative; } /*------------產品總覽頁Product -----------------*/ .cms-product-cate{ width:100%; margin: auto;padding:120px 100px 20px 100px; display: flex; flex-wrap: wrap; justify-content: center;position: relative; z-index: 1;overflow: hidden; transition: all 0.3s linear 0s; border: solid 1px rgba(0,0,0,.5);} .cms-product-cate li{ width:calc(100%/4 - 10px); margin:0px auto; padding:10px 5px; display: flex; flex-wrap: wrap; justify-content: center; align-self: flex-start; position: relative; z-index: 1;overflow: hidden; transition: all 0.3s linear 0s; } .cms-product-cate li:nth-child(2),.cms-product-cate li:nth-child(4){margin-top: 10%;} .cms-product-cate li figure a{ width:130px; height:130px; padding:10px; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; border: solid 1px rgba(0,0,0,.3); border-radius:99rem; align-self: center; position: relative;} .cms-product-cate li figure a img{ margin: auto; width:80%; max-width: 100%; cursor: pointer;position: relative; z-index: 2; } .cms-product-cate li figure:after { content: ""; width:150px; height: 150px; border-radius:99rem; display: block; position: absolute; transform:translate(-10px,-140px); border: solid 1.75px rgba(0,0,0,.4);} .cms-product-cate .cms-product-inner{width: 100%; padding: 20px 0px; margin: 0px; display: flex; flex-wrap: wrap;align-content: flex-start; align-items:flex-start; background-color: rgba(203,161,89,0); transition: all 0.3s linear 0s; } #cms-main .cms-product-inner h3{flex: 0 0 100%; margin:5px auto; font-size:1.313rem; line-height:1.35rem; font-weight:700; color:#000; text-align: center;letter-spacing: 1px; font-family: 'Noto Serif TC', serif; overflow: hidden; word-break:keep-all; word-wrap:break-word;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #cms-main .cms-product-inner p{ flex: 0 0 100%; margin: 10px 0px; font-size: 1rem; text-align: center; line-height: 1.75rem; font-weight: 400; color: #555; font-family: 'Noto Sans TC','Microsoft JhengHei', '微軟正黑體',sans-serif;} #cms-main .cms-product-inner h3 a,#cms-main .cms-product-inner p a{color: #000; } @media (max-width: 920px) { .cms-product-cate{ width:100%; margin: auto;padding:50px 10px 20px 10px; } } @media (max-width: 767.98px) { .cms-product-cate li{ width:100%; margin:0px auto; padding:10px 5px; } } /*-------------------*/ /***** product *****/ /*------------------*/ .cms-main-product { width:100%; padding:0px 50px 80px 50px; margin:0 auto; position: relative; z-index: 0; background: url(../images/index/bg.png) no-repeat 5% top; background-size:20% auto; } @media (min-width: 992px) and (max-width: 1199.98px) { .cms-main-product { padding:100px 15px 50px 15px; } } @media (max-width: 1199.98px) { .cms-main-product { padding:100px 15px 50px 15px; } } @media (max-width: 920px) { .cms-main-brand .cms-block-title{position:relative; margin: auto; left: auto; right: auto;top:auto; } .cms-main-brand .cms-block-title:after{ display: none;} .cms-main-brand .cms-block-title .cms-title-v { width: 100%; margin: auto; justify-content: center; flex-direction: column;-webkit-writing-mode: horizontal-tb; writing-mode:horizontal-tb;} .cms-main-brand .cms-block-title .cms-title-v h2,.cms-main-brand .cms-block-title .cms-title-v h3 {width: 100%; margin:auto; font-size: 1.875rem;text-align: center;} .cms-main-brand .cms-block-title .cms-title-v h3{width: 100%; margin:15px auto auto auto; font-size: 1.5rem; line-height: 1.875rem; text-align: center;} .cms-main-brand .cms-block-title .cms-title-v p{ text-align: center;} } @media (max-width: 768px) { .cms-main-product { padding:15px; } } /*----------------------------------------/ 產品清單頁 cms-main-product-item ---------------------------------------*/ .cms-produt-wrap{width:100%; padding:0px; } .cms-main-product-item { width:100%; max-width: 1000px; margin:-10% 0 10% 10%; padding:0px 80px; position: relative; z-index: 0; } .cms-main-product-item li { width: 100%; margin:15px 0px; padding:50px 50px 50px 0px; position: relative; z-index: 0; list-style: none; display: flex; flex-wrap: wrap; transition: all 0.3s linear 0s; border: solid 1px #000} .cms-main-product-item li figure { width:50%; height:auto; margin: auto; transition: all 0.5s ease 0s; position: relative; z-index: 9;} .cms-main-product-item li figure img {width: 100%; max-width: 100%; transition: all 0.3s;} .cms-main-product-item li:hover figure img { transform: scale(2); } .cms-main-product-item li:hover figure{transform: translateX(-150px); z-index: 9;} .cms-main-product-item li:hover .cms-main-product-inner { transform: translateY(-90px); opacity: 1; } .cms-main-product-inner{width:70%;padding:0px; margin: 0px; position: absolute;z-index: 9; top:120px; right:0px; transition: all 0.3s linear 0s; opacity: 0; } #cms-main .cms-main-product-inner h3{flex: 0 0 100%; margin:5px 0px; font-size:1rem; line-height:1.35rem; font-weight:400; color:#000; overflow: hidden; word-break:keep-all; word-wrap:break-word;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } cms-main .cms-main-product-inner p{ flex: 0 0 100%; margin: 10px 0px; overflow: hidden; word-break: keep-all; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} .cms-main-product-item li .cms-type{ width: 100%; font-size: 0.875rem; line-height: 1.5rem; font-weight: 300; color: #555; } .cms-main-product-item li .cms-price{ width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; font-size:0.75rem; } .cms-main-product-item li .cms-product-price{ margin:0px 10px; color:#000; } .cms-main-product-item li .cms-product-price-origin{ margin:0px; color:#c6bdbb; text-decoration: line-through; } .item.slick-slide { width: 400px; height: 400px !important; margin: 0; transition: transform .4s; position: relative;} .item.slick-slide { transform: scale(1) translate(40px);} .slick-slide:after { content:''; position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; transition: transform .4s;} .slick-slide:after { content:''; position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; transition: transform .4s;} .slick-center:after { opacity: 0;} .cms-main-product-item .slick-slide.slick-current { position: relative; z-index: 9;} @media (max-width: 768px) { .cms-main-product-item li { width: calc(100% / 3 - 30px); } } @media (max-width: 767.98px) { .cms-main-product-item li { width: calc(100% / 2 - 10px); margin: 15px 5px; } .cms-main-product-item li figcaption{ width:100%;padding: 0px 10px; } .cms-main-product-item li .cms-buy{ display: none;} .cms-main-product-item li em{display: none;} } /*-------------------*/ /***** 圖文3方格 *****/ /*----------------- */ .cms-type{ font-size: 0.9rem; line-height: 1.35rem; font-weight:400; color: #555; } .cms-price{ width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; font-size:0.875rem; font-weight: 700; } .cms-product-price{ margin:0px; color:#a01f35; } .cms-product-price-origin{ margin:0px; color:#c6bdbb; text-decoration: line-through; } /*cms-Title Styles 樣式 =================================*/ .cms-title { width: auto; height: auto; margin:0px auto 30px auto;padding: 0px; display: flex; justify-content: center;align-items: flex-start; flex-wrap: wrap; flex-direction:column;font-family: 'Noto Serif TC', serif; } .cms-title h1{ display: block;margin: 0 auto; font-size: 2rem; text-align: center; color:#000;font-family: 'Noto Serif TC', serif; } .cms-title h2{ width: auto; margin:0px; font-size: 2rem; font-weight: 700; text-shadow: 0px 0px rgba(255,255,255,1); font-family: 'Noto Serif TC', serif; letter-spacing: 2px;} .cms-title span{ width: auto; margin:10px auto; font-size:1rem; letter-spacing:2px; font-weight:400; color: #333; } .cms-title p{ margin:0px auto; text-align: center; font-weight: 700; color:#615f5e;} .cms-title-2 { width:100%; height: auto; margin:0 auto 2% auto; padding-top: 0px; padding-bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction:column; background: none;} #cms-main .cms-title-2 p{ width: 63%; margin:10px auto; font-size:1rem; font-weight:400; text-align: center; color:#6c7280; } @media (max-width: 1024px) { .cms-title-style{ margin-bottom:10px;position: relative;width: auto; display: block; font-size: 2rem; color: #000; font-weight: 400; } .cms-title { justify-content: center; align-content: center; align-items: center; background: none;} } @media (max-width: 767.98px) { .cms-title-style{ font-size: 1.875rem;} #cms-main .cms-title-2 p{ width: 90%; } .cms-title { margin: 0 0px 20px 0px; justify-content: flex-start; align-content: flex-start; align-items: flex-start; } .cms-title span{ margin:10px 0; } } /*cms-Title Styles-v 樣式 =================================*/ .cms-title-v {max-width: 600px;height: 70%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; z-index: 9;-webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } .cms-title-v h2 { width: auto; height: 100%; margin:0px 5px; font-size: 1.875rem; line-height:1.3; letter-spacing: 5px; font-weight:700; word-wrap:break-word;word-break:keep-all;font-family: 'Noto Serif TC', serif; } .cms-title-v h3 { width: auto; height: 100%; margin:0px 5px; font-size: 1.5rem; line-height:2.5rem; letter-spacing: 5px; font-weight:700; word-wrap:break-word;word-break:keep-all;font-family: 'Noto Serif TC', serif; } .cms-title-v p { width: auto; font-size:0.875rem; font-weight: 400; text-align: left; word-wrap:break-word;word-break:keep-all;font-family: 'Noto Sans TC', serif;} @media (max-width: 767.98px) { .cms-title-v{ height:auto; -webkit-writing-mode: horizontal-tb; writing-mode: horizontal-tb; } } /*---------------*/ /***** btn *****/ /*---------------*/ .icon-next{background: url("../images/icon/arrow-right-2.svg") no-repeat left 0px; background-size:auto;} .cms-btn { width: auto; height: 35px;margin-top:20px; padding: 20px 40px; font-weight: 700; text-decoration: none; border: 1px solid #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; cursor: pointer; border-radius:0px; overflow: hidden;position: relative; } a.cms-btn { color: #000;font-weight: 400; } .cms-btn:hover { border-color: rgba(255, 255, 255,.5); box-shadow: 1px 1px 8px rgba(255, 255, 255, 0.4);} a.cms-btn:hover { color: #fff;} .cms-btn:before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.6), transparent); transition: all 650ms;} .cms-btn:hover:before {left: 100%;} .cms-btn i { margin-left: 10px; width:30px; height: 20px; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s} .cms-btn:hover i{ -webkit-transform: translateX(15px); transform: translateX(15px)} @media (max-width: 768px) { .cms-btn i { width:18px; height: 18px; } .cms-btn {padding: 15px;} } /*cms-btn-more =================================*/ .custom-btn-1{ width: auto; height: auto; padding:5px 40px; margin:40px auto;font-size: 0.9rem; font-weight: 700; text-transform:uppercase; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; cursor: pointer; background-color:transparent; border-radius:0px; border: solid 1px #000;background-size: 20px auto; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s;font-family: 'Noto Sans TC','Microsoft JhengHei', '微軟正黑體',sans-serif; } .custom-btn-1:hover{background:#a01f35; } /*cms-btn Styles 4====*/ .cms-btn-btnbox {position: relative;z-index:1; display: flex; justify-content: center; width: 100%; height: auto; margin:20px auto; transition: all 1s;} .scroll-downs { position: absolute; top: 0; right: 0; bottom: auto; left: 0; margin: auto; width :20px; height: 44px;} .mousey { width: 2px; padding: 5px 8px; height: 24px; border: 1px solid #333; border-radius: 25px; opacity: 0.75; box-sizing: content-box; position: relative;} .mousey:after{content: "";position: absolute;top:38px; left:8px;width: 1px; height:50px; background: #c1c1c1;} .scroller { width: 2px; height: 8px; border-radius: 25%; background-color: #333; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;} @keyframes scroll { 0% { opacity: 0; } 10% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(15px); opacity: 0;} } @media (max-width: 768px) { .scroll-downs { display: none;} } .product-title{text-align: center;margin: 0 auto 5px auto;} .product-title > div{font-size: 32px;font-family: 'Noto Serif TC', serif;color: #000;font-weight: 500;} .product-title > span{font-size: 14px;font-family: 'Noto Sans TC', serif;color: #000;font-weight: 400;} .product-list{display: flex;flex-wrap: wrap; width: 100%;position: relative;} .product-list .product-item{width: 22%;padding: 0 6%;position: relative;margin-bottom: 30px;} .product-list .product-item .product-img{position: relative;overflow: hidden;width: 100%;height: 0;padding-bottom: 100%;} .product-list .product-item .product-img .img-center{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;} .product-list .product-item .product-img .img-center img{max-height: 100%!important;transition: all 0.3s linear 0s;} .product-list .product-item .product-name{text-align: center;margin-bottom: 10px;font-size: 1.063rem;font-family: 'Noto Serif TC', serif;font-weight: bold; min-height: 51px;} .product-list .product-item .product-nt{text-align: center; color: #a01f35;} .product-list .product-item .product-link-float{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 10;} .product-list .product-item:hover .product-img .img-center img{transform: scale(0.9);} .product-list .slick-prev, .product-list .slick-next{background: transparent;border: 1px solid #4d4d4d;width: 40px;height: 40px;-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);z-index: 20;background: #fff;} .product-list .slick-prev::before{background: url(../images/icon/arrow-left-black.svg) no-repeat center top;width: 10px;height: 19px;} .product-list .slick-next:before{background: url(../images/icon/arrow-right-black.svg) no-repeat center top;width: 10px;height: 19px;} .product-list .slick-prev:hover::before, .product-list .slick-prev:focus::before{background: url(../images/icon/arrow-left-white.svg) no-repeat center top;} .product-list .slick-next:hover::before, .product-list .slick-next:focus::before{background: url(../images/icon/arrow-right-white.svg) no-repeat center top;} .product-list .slick-prev:hover, .product-list .slick-prev:focus, .product-list .slick-next:hover, .product-list .slick-next:focus{-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);} .product-list .slick-prev{left: -80px;} .product-list .slick-next{right: -80px;} .productArea .margin-change{margin: 10px auto 40px auto;} @media (max-width: 1200px) { .product-list .slick-prev{left: -45px;} .product-list .slick-next{right: -45px;} } @media (max-width: 430px) { .product-list .slick-prev{left: -25px;} .product-list .slick-next{right: -25px;} } @media (max-width: 350px) { .productArea .wrap{padding-top: 100px;} .product-list .slick-prev, .product-list .slick-next{width: 30px;height: 30px;} .product-list .slick-prev::before{width: 8px;height: 15px;} .product-list .slick-next:before{width: 8px;height: 15px;} }