@charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, ar, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, input, select, textarea, caption, tbody, tfoot, thead, tr, th, td, nav, section { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: top; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-tap-highlight-color: transparent; } body { position: relative; font-family: "Montserrat", "Microsoft JhengHei", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; color: #777; overflow-x: hidden; } img { max-width: 100%; vertical-align: middle; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } button, input, select, textarea { display: block; outline: none; } a { cursor: pointer; display: block; text-decoration: none; } a:hover, a:focus, a:active { text-decoration: none; } ul, ol { list-style: none; } *::-webkit-input-placeholder { color: #ccc; } *:-ms-input-placeholder { color: #ccc; } *::-ms-input-placeholder { color: #ccc; } *::placeholder { color: #ccc; } *:-ms-input-placeholder { color: #ccc; } *::-ms-input-placeholder { color: #ccc; } .main { width: 100%; background-color: #fff; } .container { position: relative; width: 100%; padding: 0 15px; margin: 0 auto; } @media (min-width: 1200px) { .container { width: 1170px; } } @media (max-width: 1199px) and (min-width: 992px) { .container { width: 990px; } } @media (max-width: 991px) and (min-width: 768px) { .container { width: 750px; } } @media (max-width: 767px) { .container { width: 100%; } } .full-container { position: relative; width: 100%; } .fixed__social { position: fixed; top: 50%; right: 30px; z-index: 999; } @media (min-width: 992px) { .fixed__social { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } @media (max-width: 991px) { .fixed__social { top: auto; bottom: 80px; right: 20px; } } .fixed__social-btn { width: 60px; height: 60px; border-radius: 50%; -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); overflow: hidden; -webkit-transition-property: -webkit-box-shadow; transition-property: -webkit-box-shadow; -o-transition-property: box-shadow; transition-property: box-shadow; transition-property: box-shadow, -webkit-box-shadow; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .fixed__social-btn { width: 36px; height: 36px; -webkit-box-shadow: none; box-shadow: none; } } .fixed__social-btn:hover { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0); } @media (max-width: 991px) { .fixed__social-btn:hover { -webkit-box-shadow: none; box-shadow: none; } } .fixed__social-btn:nth-child(n + 2) { margin-top: 15px; } @media (max-width: 991px) { .fixed__social-btn:nth-child(n + 2) { margin-top: 5px; } } .fixed__social-btn--fb { background-size: 150px 1000px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px 0px; } @media (max-width: 991px) { .fixed__social-btn--fb { background-size: 90px 600px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px 0px; } } .fixed__social-btn--line { background-size: 150px 1000px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px -61px; } @media (max-width: 991px) { .fixed__social-btn--line { background-size: 90px 600px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px -36.6px; } } .fixed__social-btn--twitter { background-size: 150px 1000px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px -122px; } @media (max-width: 991px) { .fixed__social-btn--twitter { background-size: 90px 600px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px -73.2px; } } .fixed__social-btn--mail { background-size: 150px 1000px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px -183px; } @media (max-width: 991px) { .fixed__social-btn--mail { background-size: 90px 600px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px -109.8px; } } .heading { position: relative; width: 100%; background-image: url("../images/heading_img.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .heading::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .heading__block { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 350px; padding-top: 80px; } @media (max-width: 991px) { .heading__block { height: 180px; padding: 0; } } .heading__box { width: 100%; } .heading__title { font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-size: 40px; font-weight: 400; line-height: 1; color: #fff; text-align: center; } @media (max-width: 991px) { .heading__title { font-size: 24px; } } .heading__bread { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; } .heading__bread a { margin-top: 10px; font-size: 16px; font-weight: 400; line-height: 1.6; color: #ddd; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .heading__bread a { margin-top: 6px; font-size: 14px; } } .heading__bread a::after { content: "/"; margin: 0 5px; color: #ddd !important; } .heading__bread a:last-child { color: #ddd; } .heading__bread a:last-child::after { content: none; } .heading__bread a:hover { color: #efaa15; } .common__title { position: relative; width: 100%; margin-bottom: 30px; } @media (max-width: 991px) { .common__title { margin-bottom: 25px; } } .common__title p:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-size: 40px; font-weight: 400; line-height: 1.4; color: #431f09; } @media (max-width: 991px) { .common__title p:nth-child(1) { font-size: 24px; font-weight: 400; } } .common__title p:nth-child(1)::after { content: ""; display: block; width: 100px; height: 2px; margin-left: 20px; background-color: #efaa15; } @media (max-width: 991px) { .common__title p:nth-child(1)::after { width: 60px; margin-left: 10px; } } .common__title p:nth-child(1) span { display: block; max-width: calc(100% - 120px); } @media (max-width: 991px) { .common__title p:nth-child(1) span { max-width: calc(100% - 70px); } } .common__title p:nth-child(2) { width: 100%; margin-top: 5px; font-size: 20px; font-weight: 400; line-height: 1.4; color: #efaa15; } @media (max-width: 991px) { .common__title p:nth-child(2) { font-size: 15px; } } .pagenation { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; margin-top: 60px; } @media (max-width: 991px) { .pagenation { margin-top: 30px; } } .pagenation__prev { width: 36px; height: 36px; border: 1px solid #ddd; border-radius: 2px; } @media (max-width: 991px) { .pagenation__prev { width: 30px; height: 30px; } } .pagenation__prev svg, .pagenation__prev img { width: 100%; height: 100%; vertical-align: top; } .pagenation__prev svg path, .pagenation__prev img path { -webkit-transition-property: fill; -o-transition-property: fill; transition-property: fill; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .pagenation__prev:hover svg path { fill: #efaa15; } .pagenation__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 36px; height: 36px; font-size: 13px; color: #555; text-align: center; border: 1px solid #ddd; border-radius: 2px; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .pagenation__btn { width: 30px; height: 30px; } } .pagenation__btn:hover { color: #efaa15; } .pagenation__btn:nth-child(n + 2) { margin-left: 10px; } @media (max-width: 991px) { .pagenation__btn:nth-child(n + 2) { margin-left: 5px; } } .pagenation__btn--active { color: #fff; background-color: #efaa15; border-color: #efaa15; } .pagenation__btn--active:hover { color: #fff; background-color: #efaa15; border-color: #efaa15; } .pagenation__next { width: 36px; height: 36px; margin-left: 10px; border: 1px solid #ddd; border-radius: 2px; } @media (max-width: 991px) { .pagenation__next { width: 30px; height: 30px; margin-right: 5px; } } .pagenation__next svg, .pagenation__next img { width: 100%; height: 100%; vertical-align: top; } .pagenation__next svg path, .pagenation__next img path { -webkit-transition-property: fill; -o-transition-property: fill; transition-property: fill; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .pagenation__next:hover svg path { fill: #efaa15; } .gototop { position: fixed; bottom: 30px; right: 30px; display: none; width: 60px; height: 60px; background-color: #222; background-image: url(../images/gototop.svg); background-size: 40px 40px; background-position: center; background-repeat: no-repeat; border: 2px solid #431f09; border-radius: 50%; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; z-index: 998; } @media (max-width: 991px) { .gototop { display: block; bottom: 20px; right: 20px; width: 36px; height: 36px; background-size: 22px 22px; border-width: 1px; } } .gototop:hover { opacity: .7; } .header { position: absolute; top: 0; left: 0; width: 100%; z-index: 999; } @media (max-width: 991px) { .header { position: fixed; padding: 0; } } @media (max-width: 991px) { .header ~ .main { padding-top: 70px; } } .header > h1 { display: none; } .header-menu { width: 100%; } @media (min-width: 992px) { .header-menu { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } } @media (max-width: 991px) { .header-menu { background-color: #fff; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } } @media (min-width: 992px) { .header-menu .container { width: 100%; padding: 0; } } .header-menu__block { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; } @media (max-width: 991px) { .header-menu__block { height: 70px; } } .header-menu__logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 340px; padding: 0 20px; } @media (min-width: 992px) { .header-menu__logo { height: 79px; border-right: 1px solid rgba(255, 255, 255, 0.3); } } @media (max-width: 991px) { .header-menu__logo { width: 240px; padding: 0; } } .header-menu__logo img { width: auto; } @media (max-width: 991px) { .header-menu__logo img:nth-child(1) { display: none; } } @media (min-width: 992px) { .header-menu__logo img:nth-child(2) { display: none; } } @media (min-width: 1200px) { .header-menu__nav { width: calc(100% - 340px - 160px - 80px); } } @media (max-width: 1199px) and (min-width: 992px) { .header-menu__nav { width: calc(100% - 340px - 160px); } } @media (max-width: 991px) { .header-menu__nav { position: fixed; top: 0; right: -320px; width: 260px; height: 100vh; background-color: #fff; -webkit-box-shadow: -1px 0 5px rgba(0, 0, 0, 0.15); box-shadow: -1px 0 5px rgba(0, 0, 0, 0.15); overflow: auto; z-index: 9999; -webkit-transition-property: right; -o-transition-property: right; transition-property: right; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .header-menu__nav--open { right: 0; } } .header-menu__navbox { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; width: 100%; } @media (min-width: 992px) { .header-menu__navbox { padding: 0 30px; } } @media (max-width: 991px) { .header-menu__navbox { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding: 20px 0px; } } .header-menu__btn { position: relative; } @media (min-width: 1200px) { .header-menu__btn:nth-child(n + 2) { margin-left: 30px; } } @media (max-width: 1199px) and (min-width: 992px) { .header-menu__btn:nth-child(n + 2) { margin-left: 25px; } .header-menu__btn:hover .header-menu__link { color: #efaa15; } .header-menu__btn:hover .header-menu__link::before { background-color: #efaa15; } } @media (max-width: 991px) { .header-menu__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-line-pack: center; align-content: center; width: 100%; } .header-menu__btn:nth-child(n + 2) { border-top: 1px solid #eee; } } @media (min-width: 992px) { .header-menu__btn--sub .header-menu__link::after { content: "▾"; display: block; margin-left: 3px; font-size: 20px; line-height: 1; } } @media (max-width: 991px) { .header-menu__btn--sub .header-menu__link { width: calc(100% - 36px); } } .header-menu__link { font-size: 18px; color: #fff; text-align: center; } @media (min-width: 992px) { .header-menu__link { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .header-menu__link::before { content: ""; display: block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background-color: #fff; -webkit-transition-property: background-color; -o-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } } @media (max-width: 991px) { .header-menu__link { width: 100%; padding: 15px; font-size: 16px; line-height: 1.5; color: #555; text-align: left; } } .header-menu__switch { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 36px; color: #555; } @media (min-width: 992px) { .header-menu__switch { display: none; } } .header-menu__switch::before { content: "▾"; display: block; font-size: 20px; line-height: 1; } .header-menu__switch::after { content: ""; position: absolute; top: 5px; left: 0; display: block; width: 1px; height: calc(100% - 10px); background-color: #eee; } .header-menu__switch--open { color: #efaa15; } .header-menu__switch--open::before { content: "▴"; } .header-menu__sub { position: absolute; top: 100%; left: 0; display: none; background-color: #f7f7f7; width: 120px; min-width: 120px; padding: 8px 0; } @media (max-width: 991px) { .header-menu__sub { position: static; top: auto; width: 100%; min-width: 100%; } } .header-menu__sub-btn { width: 100%; padding: 6px 10px; font-size: 16px; font-weight: 400; line-height: 1.4; color: #777; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .header-menu__sub-btn { padding: 5px 15px; font-size: 15px; } } .header-menu__sub-btn:hover { color: #efaa15; } @media (max-width: 991px) { .header-menu__sub--open { display: block !important; } } .header-menu__mlang { width: 100%; padding: 15px; border-top: 1px solid #eee; } @media (min-width: 992px) { .header-menu__mlang { display: none; } } .header-menu__mlang-title { font-size: 16px; color: #555; } .header-menu__mlang-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; margin-top: 10px; } .header-menu__mlang-btn { display: inline-block; font-size: 14px; font-weight: 400; line-height: 1.4; color: #888; } .header-menu__mlang-btn:nth-child(n + 2) { margin-top: 8px; } .header-menu__close { position: fixed; top: 0; right: -60px; width: 50px; height: 50px; background-color: #efaa15; z-index: 99999; -webkit-transition-property: right; -o-transition-property: right; transition-property: right; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .header-menu__close > div { position: absolute; top: 50%; left: 50%; width: 20px; height: 4px; background-color: #fff; border-radius: 1px; } .header-menu__close > div:first-child { -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .header-menu__close > div:last-child { -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } @media (min-width: 992px) { .header-menu__close { display: none; } } .header-menu__close--open { right: 260px; } .header-menu__burger { width: 22px; } .header-menu__burger > div { width: 100%; height: 3px; margin: 4px 0; border-radius: 1.5px; background-color: #efaa15; } @media (min-width: 992px) { .header-menu__burger { display: none; } } .header-menu__lang { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 160px; height: 79px; border-left: 1px solid rgba(255, 255, 255, 0.3); cursor: pointer; -webkit-transition-property: background-color; -o-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .header-menu__lang { display: none; } } .header-menu__lang:hover { background-color: #efaa15; } .header-menu__lang:hover .header-menu__lang-now { color: #333; } .header-menu__lang:hover .header-menu__lang-now svg path { fill: #431f09; } .header-menu__lang:hover .header-menu__lang-box { display: block; } .header-menu__lang-now { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; font-size: 15px; font-weight: 400; line-height: 79px; color: #fff; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .header-menu__lang-now svg, .header-menu__lang-now img { width: 15px; height: 15px; margin-right: 5px; vertical-align: top; } .header-menu__lang-now svg path, .header-menu__lang-now img path { -webkit-transition-property: fill; -o-transition-property: fill; transition-property: fill; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .header-menu__lang-box { position: absolute; top: 100%; right: 0; display: none; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .header-menu__lang-list { width: 159px; padding: 10px 0; background-color: #fff; } .header-menu__lang-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; padding: 5px 15px; font-size: 14px; font-weight: 400; line-height: 1.4; color: #888; text-align: center; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .header-menu__lang-btn:hover { color: #efaa15; } .header-menu__lang-btn img { width: 14px; height: 14px; margin-right: 5px; vertical-align: top; } .header-menu__social { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; } @media (max-width: 1199px) { .header-menu__social { display: none; } } .header-menu__social-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 80px; height: 79px; background-size: 16px 16px; background-position: center; background-repeat: no-repeat; border-left: 1px solid rgba(255, 255, 255, 0.3); -webkit-transition-property: background-color; -o-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .header-menu__social-btn:hover { background-color: #efaa15; } .header-menu__social-btn:hover svg path { fill: #431f09; } .header-menu__social-btn svg, .header-menu__social-btn img { width: 15px; height: 15px; } .header-menu__social-btn svg path, .header-menu__social-btn img path { -webkit-transition-property: fill; -o-transition-property: fill; transition-property: fill; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .footer { width: 100%; } .footer-main { width: 100%; padding: 70px 0; background-color: #1d0f04; } @media (max-width: 991px) { .footer-main { padding: 40px 0; } } .footer-main__block { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; width: 100%; } @media (min-width: 992px) { .footer-main__item:nth-child(1) { width: calc((99.999% - 120px) * .30); } .footer-main__item:nth-child(2) { width: calc((99.999% - 120px) * .22); } .footer-main__item:nth-child(3), .footer-main__item:nth-child(4) { width: calc((99.999% - 120px) * .24); } } @media (max-width: 991px) { .footer-main__item { width: 100%; } .footer-main__item:nth-child(1) { display: none; } .footer-main__item:nth-child(n + 3) { margin-top: 40px; } } .footer-main__logo { width: 100%; margin-bottom: 35px; } .footer-main__logo img { width: 100%; max-width: 260px; } .footer-main__title { position: relative; width: 100%; padding-top: 18px; margin-bottom: 33px; font-size: 24px; font-weight: 400; line-height: 1; color: #efaa15; } @media (max-width: 991px) { .footer-main__title { padding-top: 0; margin-bottom: 15px; font-size: 20px; text-align: center; } } .footer-main__text { width: 100%; font-size: 15px; font-weight: 400; color: #ccc; } .footer-main__social { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; margin-top: 20px; } .footer-main__social-btn { position: relative; width: 15px; height: 15px; } .footer-main__social-btn:nth-child(n + 2) { margin-left: 20px; } .footer-main__social-btn svg, .footer-main__social-btn img { width: 15px; height: 15px; vertical-align: top; } .footer-main__quick { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; width: 100%; } @media (min-width: 992px) { .footer-main__quick-list { width: 50%; } .footer-main__quick-list:nth-child(n + 3) { margin-top: 15px; } } @media (max-width: 991px) { .footer-main__quick-list { width: 100%; text-align: center; } .footer-main__quick-list:nth-child(n + 2) { margin-top: 5px; } } .footer-main__quick-btn { position: relative; display: inline-block; padding-left: 13px; font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-size: 15px; font-weight: 400; color: #ccc; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .footer-main__quick-btn::before { content: ""; position: absolute; top: 8px; left: 0; width: 8px; height: 10px; background-size: 150px 1000px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px -244px; } .footer-main__quick-btn:hover { color: #efaa15; } .footer-main__link { width: 100%; } .footer-main__link-list { width: 100%; } .footer-main__link-list:nth-child(n + 2) { margin-top: 15px; } @media (max-width: 991px) { .footer-main__link-list { text-align: center; } .footer-main__link-list:nth-child(n + 2) { margin-top: 5px; } } .footer-main__link-btn { position: relative; display: inline-block; padding-left: 20px; font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-size: 15px; font-weight: 400; color: #ccc; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .footer-main__link-btn::before { content: ""; position: absolute; top: 5px; left: 0; width: 15px; height: 15px; } .footer-main__link-btn--addr::before { background-size: 150px 1000px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px -255px; } .footer-main__link-btn--phone::before { background-size: 150px 1000px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: -16px -255px; } .footer-main__link-btn--fax::before { background-size: 150px 1000px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: -32px -255px; } .footer-main__link-btn[href]:hover { color: #efaa15; } .footer-copyright { width: 100%; background-color: #1d0f04; border-top: 1px solid rgba(255, 255, 255, 0.3); } .footer-copyright__text { width: 100%; padding: 25px 0; font-size: 12px; font-weight: 300; color: #999; text-align: center; } @media (max-width: 991px) { .footer-copyright__text { padding: 20px 0; } } .footer-copyright__text a { display: inline; color: #999; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .footer-copyright__text a:hover { color: #fe7e17; } .cke_editable h1, .cke_editable h2, .cke_editable h3, .cke_editable h4, .cke_editable h5, .cke_editable h6 { padding: 0; margin: 0; font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-weight: 500; line-height: 1.4; color: #333; } .cke_editable h1 { font-size: 48px; } .cke_editable h2 { font-size: 40px; } .cke_editable h3 { font-size: 32px; } .cke_editable h4 { font-size: 28px; } .cke_editable h5 { font-size: 24px; } .cke_editable h6 { font-size: 20px; } .cke_editable p { padding: 0; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.7; color: #777; } .cke_editable a { padding: 0; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.7; color: #efaa15; text-decoration: underline; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .cke_editable a:hover { opacity: .7; } .cke_editable ol { padding: 0 0 0 30px; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.7; color: #777; list-style-type: decimal; } .cke_editable ol li { list-style-type: decimal; } .cke_editable ul { padding: 0 0 0 30px; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.7; color: #777; list-style-type: disc; } .cke_editable ul li { list-style-type: disc; } .cke_editable img { padding: 0; margin: 0; max-width: 100%; height: auto !important; } .cke_editable table { max-width: 100%; padding: 0; margin: 0; font-size: 16px; font-weight: 400; border: 1px solid #ddd; border-collapse: collapse; } .cke_editable table td, .cke_editable table th { padding: 10px 5px; margin: 0; line-height: 1.7; border: 1px solid #ddd; white-space: normal !important; } .cke_editable blockquote { padding: 5px 20px; margin: 10px 0px; font-size: 16px; font-weight: 400; line-height: 1.7; color: #333; border-style: solid; border-color: #ccc; border-width: 0 0 0 5px; } .cke_editable strong { font-weight: bold; } .cke_editable .cke_editable__table--scroll { width: 100%; overflow: auto; } .cke_editable .cke_editable__table--scroll::-webkit-scrollbar-track { background-color: #F5F5F5; } .cke_editable .cke_editable__table--scroll::-webkit-scrollbar { width: 8px; height: 8px; background-color: #F5F5F5; } .cke_editable .cke_editable__table--scroll::-webkit-scrollbar-thumb { background-color: #555; } .home-slider { position: relative; width: 100%; z-index: 1; } .home-slider .full-container { position: relative; } .home-slider__slick { position: relative; width: 100%; z-index: 1; } .home-slider__slick > .home-slider__item:nth-child(n + 2) { display: none !important; } .home-slider__slick .slick-current .home-slider__title h2 { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .home-slider__slick .slick-current .home-slider__subtitle p { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .home-slider__slick .slick-current .home-slider__btn { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .home-slider__slick .slick-dots { position: absolute; bottom: 30px; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; } @media (max-width: 991px) { .home-slider__slick .slick-dots { bottom: 20px; } } .home-slider__slick .slick-dots li { margin: 0px 5px; overflow: hidden; } .home-slider__slick .slick-dots li.slick-active button { border-color: #fff; } .home-slider__slick .slick-dots li.slick-active button:hover { border-color: #fff; } .home-slider__slick .slick-dots li.slick-active button::before { width: 6px; height: 6px; background-color: #fff; } @media (max-width: 991px) { .home-slider__slick .slick-dots li.slick-active button::before { width: 4px; height: 4px; } } .home-slider__slick .slick-dots li button { position: relative; width: 18px; height: 18px; font-size: 0px; background-color: transparent; border: 2px solid transparent; border-radius: 9px; -webkit-transition-property: border-color; -o-transition-property: border-color; transition-property: border-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; cursor: pointer; } @media (max-width: 991px) { .home-slider__slick .slick-dots li button { font-size: 0; width: 14px; height: 14px; border-radius: 7px; } } .home-slider__slick .slick-dots li button:hover { border-color: #fff; } .home-slider__slick .slick-dots li button:hover::before { width: 6px; height: 6px; background-color: #fff; } @media (max-width: 991px) { .home-slider__slick .slick-dots li button:hover::before { width: 4px; height: 4px; } } .home-slider__slick .slick-dots li button::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition-property: width, height, background-color; -o-transition-property: width, height, background-color; transition-property: width, height, background-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .home-slider__slick .slick-dots li button::before { width: 10px; height: 10px; } } .home-slider__item { position: relative; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100vh; min-height: 700px; padding-top: 80px; background-size: cover; background-position: center; background-repeat: no-repeat; } @media (max-width: 991px) { .home-slider__item { height: 80vw; min-height: auto; padding-top: 0; padding-bottom: 20px; } } .home-slider__item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 1; } .home-slider__item .container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; z-index: 2; } .home-slider__box { width: 100%; } .home-slider__title { width: 100%; overflow: hidden; } .home-slider__title h2 { width: 100%; font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-size: 45px; font-weight: 700; line-height: 1.4; color: #fff; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } @media (max-width: 991px) { .home-slider__title h2 { font-size: 32px; font-weight: 500; } } @media (max-width: 575px) { .home-slider__title h2 { font-size: 22px; } } .home-slider__subtitle { width: 100%; margin-top: 5px; overflow: hidden; } @media (max-width: 575px) { .home-slider__subtitle { display: none; } } .home-slider__subtitle p { width: 100%; font-family: "Montserrat", "Microsoft JhengHei", sans-serif; font-size: 30px; font-weight: 500; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } @media (max-width: 991px) { .home-slider__subtitle p { font-size: 20px; } } .home-slider__btnbox { width: 100%; margin-top: 25px; overflow: hidden; } @media (max-width: 991px) { .home-slider__btnbox { margin-top: 15px; } } .home-slider__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } .home-slider__btn a:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 150px; height: 40px; font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.2; color: #431f09; text-align: center; background-color: #efaa15; -webkit-transition-property: color, background-color; -o-transition-property: color, background-color; transition-property: color, background-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .home-slider__btn a:nth-child(1):hover { color: #efaa15; background-color: #431f09; } @media (max-width: 991px) { .home-slider__btn a:nth-child(1) { width: 120px; height: 36px; font-size: 14px; } } .home-product { width: 100%; padding: 70px 0; background-color: #fff; } @media (max-width: 991px) { .home-product { padding: 40px 0; } } .home-product__block { width: 100%; } .home-product__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; margin-bottom: 30px; } @media (max-width: 991px) { .home-product__title { margin-bottom: 25px; } } .home-product__title .common__title { width: calc(100% - 90px); margin-bottom: 0; } @media (max-width: 991px) { .home-product__title .common__title { width: calc(100% - 80px); } } .home-product__more { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 90px; padding-bottom: 4px; font-size: 16px; font-weight: 400; line-height: 1; color: #efaa15; border-bottom: 1px solid #efaa15; -webkit-transition-property: color, border-color; -o-transition-property: color, border-color; transition-property: color, border-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .home-product__more { width: 80px; font-size: 15px; } } .home-product__more::after { content: ""; width: 0; height: 0; margin-left: 8px; border-style: solid; border-width: 5px 0 5px 6px; border-color: transparent transparent transparent #efaa15; -webkit-transition-property: border-color; -o-transition-property: border-color; transition-property: border-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .home-product__more:hover { color: #431f09; border-color: #431f09; } .home-product__more:hover::after { border-color: transparent transparent transparent #431f09; } .home-product__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; width: 100%; } @media (min-width: 992px) { .home-product__item { width: calc((100% - 90px) / 4); margin-right: 30px; } .home-product__item:nth-child(4n) { margin-right: 0; } .home-product__item:nth-child(n + 5) { margin-top: 45px; } } @media (max-width: 991px) and (min-width: 576px) { .home-product__item { width: calc((100% - 20px) / 2); margin-right: 20px; } .home-product__item:nth-child(2n) { margin-right: 0; } .home-product__item:nth-child(n + 3) { margin-top: 30px; } } @media (max-width: 575px) { .home-product__item { width: 100%; } .home-product__item:nth-child(n + 2) { margin-top: 30px; } } .home-product__item:hover .home-product__img { border-color: #efaa15; } .home-product__item:hover .home-product__name { color: #efaa15; } .home-product__item:hover .home-product__btn { color: #efaa15; background-color: #431f09; border-color: #431f09; } .home-product__item:hover .home-product__btn svg path { fill: #efaa15; } .home-product__img { width: 100%; padding-bottom: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid #ddd; -webkit-transition-property: border-color; -o-transition-property: border-color; transition-property: border-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .home-product__name { width: 100%; height: 1.4em; margin-top: 15px; font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-size: 18px; font-weight: 500; line-height: 1.4; color: #431f09; text-align: center; overflow: hidden; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .home-product__name { margin-top: 10px; } } .home-product__text { width: 100%; height: 3.4em; margin-top: 10px; font-size: 16px; font-weight: 400; color: #777; overflow: hidden; } @media (max-width: 991px) { .home-product__text { margin-top: 5px; font-size: 15px; } } .home-product__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 40px; margin-top: 15px; font-size: 16px; font-weight: 400; color: #a48b78; border: 1px solid #a48b78; -webkit-transition-property: color, background-color, border-color; -o-transition-property: color, background-color, border-color; transition-property: color, background-color, border-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .home-product__btn { height: 36px; margin-top: 10px; font-size: 15px; } } .home-product__btn svg, .home-product__btn img { width: 15px; height: 15px; margin-right: 5px; } .home-product__btn svg path, .home-product__btn img path { -webkit-transition-property: fill; -o-transition-property: fill; transition-property: fill; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .home-about { width: 100%; background-image: url("../images/index/home_about.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } @media (max-width: 991px) { .home-about { background-color: #f5f5f5; background-image: none; } } .home-about__block { width: 100%; padding: 70px 50% 70px 0; } @media (max-width: 991px) { .home-about__block { padding: 40px 0; } } .home-about__text { width: 100%; font-size: 16px; font-weight: 400; color: #777; } @media (max-width: 991px) { .home-about__text { font-size: 15px; } } .home-about__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 120px; height: 40px; margin-top: 50px; font-size: 16px; font-weight: 400; color: #a48b78; border: 1px solid #a48b78; -webkit-transition-property: color, background-color, border-color; -o-transition-property: color, background-color, border-color; transition-property: color, background-color, border-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .home-about__btn { width: 100px; height: 36px; margin-top: 25px; font-size: 14px; } } .home-about__btn:hover { color: #efaa15; background-color: #431f09; border-color: #431f09; } .home-about__img { width: 100%; padding-bottom: 70%; background-image: url("../images/index/home_about_mb.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } @media (min-width: 992px) { .home-about__img { display: none; } } .news-list { width: 100%; padding: 70px 0; background-color: #fff; } @media (max-width: 991px) { .news-list { padding: 40px 0; } } .news-list__box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; width: 100%; } .news-list__box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; } @media (min-width: 992px) { .news-list__item { width: calc((100% - 60px) / 3); margin-right: 30px; } .news-list__item:nth-child(3n) { margin-right: 0; } .news-list__item:nth-child(n + 4) { margin-top: 45px; } } @media (max-width: 991px) and (min-width: 576px) { .news-list__item { width: calc((100% - 20px) / 2); margin-right: 20px; } .news-list__item:nth-child(2n) { margin-right: 0; } .news-list__item:nth-child(n + 3) { margin-top: 30px; } } @media (max-width: 575px) { .news-list__item { width: 100%; } .news-list__item:nth-child(n + 2) { margin-top: 30px; } } .news-list__item:hover .news-list__img div { left: 50%; } .news-list__item:hover .news-list__title h3 { color: #efaa15; } .news-list__item:hover .news-list__more { color: #431f09; } .news-list__item:hover .news-list__more svg, .news-list__item:hover .news-list__more img { margin-left: 15px; } .news-list__item:hover .news-list__more svg path, .news-list__item:hover .news-list__more svg rect, .news-list__item:hover .news-list__more svg polygon, .news-list__item:hover .news-list__more img path, .news-list__item:hover .news-list__more img rect, .news-list__item:hover .news-list__more img polygon { fill: #431f09; } .news-list__img { position: relative; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } .news-list__img::before { content: ""; position: relative; display: block; width: 100%; padding-bottom: 65%; z-index: 1; } .news-list__img div { position: absolute; width: 200%; height: 100%; background-color: rgba(239, 170, 21, 0.3); -webkit-transform: skew(45deg) translateX(-50%); -ms-transform: skew(45deg) translateX(-50%); transform: skew(45deg) translateX(-50%); -webkit-transition: left .5s ease-in-out; -o-transition: left .5s ease-in-out; transition: left .5s ease-in-out; } .news-list__img div:first-child { top: 0; left: -150%; } .news-list__img div:last-child { top: 0; left: 250%; } .news-list__title { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; margin-top: 20px; } @media (max-width: 991px) { .news-list__title { margin-top: 15px; } } .news-list__title p { width: 85px; padding: 15px 0; font-size: 12px; font-weight: 400; line-height: 1; color: #fff; text-align: center; background-color: #efaa15; } @media (max-width: 991px) { .news-list__title p { padding: 10px 0; } } .news-list__title p span { display: block; margin-bottom: 5px; font-size: 18px; } @media (max-width: 991px) { .news-list__title p span { font-size: 16px; } } .news-list__title h3 { width: calc(100% - 105px); max-height: 2.8em; font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-size: 18px; font-weight: 500; line-height: 1.4; color: #333; overflow: hidden; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .news-list__title h3 { width: calc(100% - 100px); font-size: 16px; } } .news-list__text { width: 100%; max-height: 3.4em; margin-top: 20px; font-size: 16px; font-weight: 400; color: #777; overflow: hidden; } @media (max-width: 991px) { .news-list__text { margin-top: 15px; font-size: 15px; } } .news-list__more { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; margin-top: 15px; font-size: 16px; font-weight: 400; color: #efaa15; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .news-list__more { margin-top: 5px; font-size: 15px; } } .news-list__more svg, .news-list__more img { width: 14px; height: 8px; margin-left: 10px; -webkit-transition-property: margin-left; -o-transition-property: margin-left; transition-property: margin-left; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .news-list__more svg path, .news-list__more svg rect, .news-list__more svg polygon, .news-list__more img path, .news-list__more img rect, .news-list__more img polygon { -webkit-transition-property: fill; -o-transition-property: fill; transition-property: fill; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .news-detail { width: 100%; padding: 70px 0; background-color: #fff; } @media (max-width: 991px) { .news-detail { padding: 40px 0; } } .news-detail__title { width: 100%; font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-size: 30px; font-weight: 500; line-height: 1.4; color: #222; text-align: center; } @media (max-width: 991px) { .news-detail__title { font-size: 26px; } } .news-detail__date { width: 100%; margin-top: 10px; font-size: 14px; font-weight: 400; line-height: 1; color: #efaa15; text-align: center; } @media (max-width: 991px) { .news-detail__date { font-size: 14px; } } .news-detail__content { width: 100%; margin-top: 25px; } @media (max-width: 991px) { .news-detail__content { margin-top: 15px; } } .news-detail__function { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; padding: 15px 0; margin-top: 30px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } @media (max-width: 991px) { .news-detail__function { padding: 10px 0; margin-top: 20px; } } .news-detail__back { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; height: 40px; font-size: 14px; font-weight: 400; color: #aaa; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .news-detail__back { height: 40px; } } .news-detail__back:hover { color: #efaa15; } .news-detail__back:hover svg path { fill: #efaa15; } .news-detail__back svg, .news-detail__back img { width: 8px; height: 14px; margin-right: 10px; } .news-detail__back svg path, .news-detail__back img path { -webkit-transition-property: fill; -o-transition-property: fill; transition-property: fill; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .news-detail__social { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; } .news-detail__social-btn { width: 40px; height: 40px; background-color: #aaa; border-radius: 50%; -webkit-transition-property: background-color; -o-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .news-detail__social-btn { width: 30px; height: 30px; } } .news-detail__social-btn:nth-child(n + 2) { margin-left: 10px; } @media (max-width: 991px) { .news-detail__social-btn:nth-child(n + 2) { margin-left: 10px; } } .news-detail__social-btn:hover { background-color: #efaa15; } .news-detail__social-btn svg, .news-detail__social-btn img { width: 100%; height: 100%; vertical-align: top; } .product-list { width: 100%; padding: 70px 0; background-color: #fff; } @media (max-width: 991px) { .product-list { padding: 40px 0; } } .product-list__block { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-line-pack: start; align-content: flex-start; width: 100%; } .product-list__box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; } .product-list__item { position: relative; } @media (min-width: 992px) { .product-list__item { width: calc((99.99% - 60px) / 3); margin-right: 30px; } .product-list__item:nth-child(3n) { margin-right: 0; } .product-list__item:nth-child(n + 4) { margin-top: 45px; } } @media (max-width: 991px) and (min-width: 576px) { .product-list__item { width: calc((100% - 20px) / 2); margin-right: 20px; } .product-list__item:nth-child(2n) { margin-right: 0; } .product-list__item:nth-child(n + 3) { margin-top: 30px; } } @media (max-width: 575px) { .product-list__item { width: 100%; } .product-list__item:nth-child(n + 2) { margin-top: 30px; } } .product-list__item:hover .product-list__info { opacity: 1; } .product-list__item:hover .product-list__subtitle { opacity: 0; } .product-list__img { position: relative; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1; } .product-list__img::before { content: ""; display: block; width: 100%; padding-bottom: 85%; } .product-list__info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 30px 25px; background-color: rgba(29, 15, 4, 0.9); opacity: 0; z-index: 2; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .product-list__info { display: none; } } .product-list__info::before { content: ""; position: absolute; bottom: 0; left: 0; display: block; width: 60px; height: 60px; background-size: 150px 1000px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px -424px; } .product-list__info h3 { width: 100%; max-height: 2.8em; font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-size: 18px; font-weight: 500; line-height: 1.4; color: #fff; text-align: center; overflow: hidden; } .product-list__info p { width: 100%; max-height: 5.1em; margin-top: 10px; font-size: 16px; font-weight: 400; color: #fff; overflow: hidden; } .product-list__subtitle { position: absolute; bottom: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 50px; background-color: rgba(29, 15, 4, 0.9); z-index: 2; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .product-list__subtitle h3 { width: 100%; height: 1.7em; font-size: 18px; font-weight: 400; color: #fff; text-align: center; overflow: hidden; } .product-category { width: 100%; margin-bottom: 40px; } @media (max-width: 991px) { .product-category { margin-bottom: 30px; } } @media (max-width: 991px) { .product-category--open .product-category__btn:nth-child(n + 2) { border-top: 1px solid #ddd; } .product-category--open .product-category__btn:not(.product-category__btn--active) { display: block; } .product-category--open .product-category__controller::before { content: attr(data-close); } } .product-category__link { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: start; align-content: flex-start; width: 100%; } .product-category__btn { padding: 0 25px; margin: 0 0 10px; background-color: #f7f7f7; } @media (max-width: 991px) { .product-category__btn { display: none; width: 100%; margin: 0; } } .product-category__btn:hover p { color: #efaa15; } .product-category__btn p { padding: 12px 0 9px; font-size: 16px; font-weight: 400; line-height: 1.4; color: #555; text-align: center; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .product-category__btn p { padding: 12px 0; } } @media (min-width: 992px) { .product-category__btn--active p { color: #efaa15; border-bottom: 2px solid #efaa15; } .product-category__btn--active p:hover { color: #222; } } @media (max-width: 991px) { .product-category__btn--active { display: block; background-color: #efaa15; } .product-category__btn--active p { color: #fff; } .product-category__btn--active p:hover { color: #fff; } } .product-category__controller { width: 100%; font-size: 14px; font-weight: 400; line-height: 36px; text-align: center; background-color: #fff; border: 1px solid #222; } .product-category__controller::before { content: attr(data-open); } @media (min-width: 992px) { .product-category__controller { display: none; } } .product-detail { width: 100%; padding: 70px 0; background-color: #fff; } @media (max-width: 991px) { .product-detail { padding: 40px 0; } } .product-detail__block { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-line-pack: start; align-content: flex-start; width: 100%; } .product-detail__img { width: calc((100% - 40px) * .55); } @media (max-width: 991px) { .product-detail__img { width: 100%; } } .product-detail__img img { width: 100%; max-width: none; } .product-detail__info { width: calc((100% - 40px) * .45); } @media (max-width: 991px) { .product-detail__info { width: 100%; margin-top: 20px; } } .product-detail__name { position: relative; width: 100%; padding-bottom: 20px; font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-size: 30px; font-weight: 500; line-height: 1.4; color: #222; } @media (max-width: 991px) { .product-detail__name { font-size: 26px; } } .product-detail__name::before { content: ""; position: absolute; bottom: 8px; left: 0; width: 80px; height: 2px; background-color: #efaa15; } .product-detail__name::after { content: ""; position: absolute; bottom: 0px; left: 0; width: 40px; height: 2px; background-color: #efaa15; } .product-detail__model { position: relative; width: 100%; padding-left: 25px; margin-top: 25px; font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.2; color: #555; } @media (max-width: 991px) { .product-detail__model { margin-top: 20px; font-size: 15px; } } .product-detail__model::before { content: ""; position: absolute; top: 1px; left: 0; width: 18px; height: 16px; background-size: 150px 1000px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px -485px; } .product-detail__description { position: relative; width: 100%; margin-top: 20px; font-size: 16px; font-weight: 400; color: #777; } @media (max-width: 991px) { .product-detail__description { margin-top: 15px; font-size: 15px; } } .product-detail__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 150px; height: 50px; margin-top: 30px; font-size: 16px; font-weight: 400; color: #fff; text-align: center; background-color: #efaa15; -webkit-transition-property: color, background-color; -o-transition-property: color, background-color; transition-property: color, background-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .product-detail__btn { width: 100px; height: 36px; margin-top: 15px; font-size: 14px; } } .product-detail__btn:hover { color: #efaa15; background-color: #431f09; } .product-detail__content { width: 100%; padding-top: 30px; margin-top: 30px; border-top: 1px solid #eee; } @media (max-width: 991px) { .product-detail__content { padding-top: 20px; margin-top: 20px; } } .product-detail__function { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; padding: 15px 0; margin-top: 30px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } @media (max-width: 991px) { .product-detail__function { padding: 10px 0; margin-top: 20px; } } .product-detail__back { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; height: 40px; font-size: 14px; font-weight: 400; color: #aaa; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .product-detail__back { height: 40px; } } .product-detail__back:hover { color: #efaa15; } .product-detail__back:hover svg path { fill: #efaa15; } .product-detail__back svg, .product-detail__back img { width: 8px; height: 14px; margin-right: 10px; } .product-detail__back svg path, .product-detail__back img path { -webkit-transition-property: fill; -o-transition-property: fill; transition-property: fill; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .product-detail__social { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; } .product-detail__social-btn { width: 40px; height: 40px; background-color: #aaa; border-radius: 50%; -webkit-transition-property: background-color; -o-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .product-detail__social-btn { width: 30px; height: 30px; } } .product-detail__social-btn:nth-child(n + 2) { margin-left: 10px; } @media (max-width: 991px) { .product-detail__social-btn:nth-child(n + 2) { margin-left: 10px; } } .product-detail__social-btn:hover { background-color: #efaa15; } .product-detail__social-btn svg, .product-detail__social-btn img { width: 100%; height: 100%; vertical-align: top; } .contact { width: 100%; padding: 70px 0; background-color: #fff; } @media (max-width: 991px) { .contact { padding: 40px 0; } } .contact__block { width: 100%; } .contact__maintitle { width: 100%; margin-bottom: 50px; } @media (max-width: 991px) { .contact__maintitle { margin-bottom: 25px; } } .contact__maintitle p:nth-child(1) { width: 100%; font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-size: 40px; font-weight: 400; line-height: 1.4; color: #431f09; text-align: center; } @media (max-width: 991px) { .contact__maintitle p:nth-child(1) { font-size: 24px; font-weight: 400; } } .contact__maintitle p:nth-child(2) { width: 100%; margin-top: 10px; font-size: 16px; font-weight: 400; line-height: 1.4; color: #777; text-align: center; } @media (max-width: 991px) { .contact__maintitle p:nth-child(2) { margin-top: 5px; font-size: 15px; } } .contact__box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-line-pack: center; align-content: center; width: 100%; } @media (min-width: 992px) { .contact__box:nth-child(odd) .contact__map, .contact__box:nth-child(odd) .contact__form { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } } .contact__box:nth-child(n + 3) { padding-top: 30px; margin-top: 30px; border-top: 1px solid #ddd; } @media (max-width: 991px) { .contact__box:nth-child(n + 3) { padding-top: 20px; margin-top: 20px; } } .contact__info { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: calc((99.999% - 35px) * .3); } @media (max-width: 1199px) { .contact__info { width: calc((99.999% - 30px) * .35); } } @media (max-width: 991px) { .contact__info { width: 100%; margin-bottom: 15px; } } .contact__title { position: relative; width: 100%; font-size: 28px; font-weight: 400; line-height: 1.4; color: #431f09; text-align: center; } @media (max-width: 991px) { .contact__title { font-size: 20px; } } .contact__list { width: 100%; margin-top: 20px; } @media (max-width: 991px) { .contact__list { margin-top: 15px; } } .contact__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; padding: 15px 25px; border: 1px solid #efaa15; } @media (max-width: 991px) { .contact__item { padding: 15px; } } .contact__item:nth-child(n + 2) { margin-top: 15px; } @media (max-width: 991px) { .contact__item:nth-child(n + 2) { margin-top: 10px; } } .contact__item::before { content: ""; display: block; width: 65px; height: 65px; background-color: #efaa15; background-size: 25px 25px; background-position: center; background-repeat: no-repeat; } .contact__item--addr::before { background-image: url("../images/contact/contact_icon-01.svg"); } .contact__item--tel::before { background-image: url("../images/contact/contact_icon-03.svg"); } .contact__item p { width: calc(100% - 65px); padding-left: 15px; font-size: 16px; font-weight: 400; color: #777; } @media (max-width: 991px) { .contact__item p { font-size: 15px; } } .contact__item p a { display: inline; color: #777; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .contact__item p a:hover { color: #efaa15; } .contact__text { width: 100%; margin-top: 20px; font-size: 15px; font-weight: 400; color: #555; } @media (max-width: 991px) { .contact__text { margin-top: 15px; } } .contact__map { position: relative; width: calc((99.999% - 35px) * .7); border: 1px solid #eee; } @media (max-width: 1199px) { .contact__map { width: calc((99.999% - 30px) * .65); } } @media (max-width: 991px) { .contact__map { width: 100%; height: 300px; } } .contact__map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .contact__success { position: fixed; top: 50%; left: 50%; width: calc(100vw - 30px); max-width: 300px; padding: 10px; font-size: 14px; font-weight: 400; line-height: 1.7; color: #fff; text-align: center; background-color: #39b54a; -webkit-box-shadow: 0 0 10px rgba(57, 181, 74, 0.7); box-shadow: 0 0 10px rgba(57, 181, 74, 0.7); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 998; -webkit-animation: msgAniamtion .8s; animation: msgAniamtion .8s; } .contact__error { position: fixed; top: 50%; left: 50%; width: calc(100vw - 30px); max-width: 300px; padding: 10px; font-size: 14px; font-weight: 400; line-height: 1.7; color: #fff; text-align: center; background-color: #c30d23; -webkit-box-shadow: 0 0 10px rgba(195, 13, 35, 0.7); box-shadow: 0 0 10px rgba(195, 13, 35, 0.7); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 998; -webkit-animation: msgAniamtion .8s; animation: msgAniamtion .8s; } @-webkit-keyframes msgAniamtion { from { margin-top: 50px; opacity: 0; } to { margin-top: 0px; opacity: 1; } } @keyframes msgAniamtion { from { margin-top: 50px; opacity: 0; } to { margin-top: 0px; opacity: 1; } } .contact-form { width: 100%; padding: 70px 0; } @media (min-width: 992px) { .contact-form { background-image: url("../images/contact/contact_bg.jpg"); background-size: cover; background-position: top center; background-repeat: no-repeat; } .contact-form .contact__maintitle p { text-align: left !important; } } @media (max-width: 991px) { .contact-form { padding: 40px 0; background-color: #f9f9f9; } } .contact-form__block { width: 100%; padding-right: 45%; } @media (max-width: 1199px) { .contact-form__block { padding-right: 35%; } } @media (max-width: 991px) { .contact-form__block { padding: 0; } } .contact-form__table { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; width: 100%; } @media (min-width: 768px) { .contact-form__item { width: calc((100% - 20px) / 2); } .contact-form__item:nth-child(n + 3) { margin-top: 20px; } } @media (max-width: 767px) { .contact-form__item { width: 100%; } .contact-form__item:nth-child(n + 2) { margin-top: 15px; } } .contact-form__item--full { width: 100%; } .contact-form__label { display: block; width: 100%; } .contact-form__input { width: 100%; height: 40px; padding: 0 10px; font-size: 15px; font-weight: 400; color: #333; background-color: #f7f7f7; border: 1px solid #ddd; -webkit-transition-property: border-color; -o-transition-property: border-color; transition-property: border-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .contact-form__input:focus { border-color: #777; } .contact-form__textarea { width: 100%; max-width: 100%; min-width: 100%; height: 160px; padding: 12px 10px; font-size: 15px; font-weight: 400; color: #333; background-color: #f7f7f7; border: 1px solid #ddd; -webkit-transition-property: border-color; -o-transition-property: border-color; transition-property: border-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .contact-form__textarea:focus { border-color: #777; } .contact-form__btnbox { width: 100%; margin-top: 20px; } @media (max-width: 991px) { .contact-form__btnbox { margin-top: 15px; } } .contact-form__submit { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 150px; height: 50px; font-size: 16px; font-weight: 400; color: #431f09; text-align: center; background: #efaa15; -webkit-transition-property: color, background-color; -o-transition-property: color, background-color; transition-property: color, background-color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .contact-form__submit { width: 100%; height: 36px; font-size: 14px; } } .contact-form__submit:hover { color: #efaa15; background-color: #431f09; } .about-info { width: 100%; padding: 70px 0; background-color: #fff; } @media (max-width: 991px) { .about-info { padding: 40px 0; } } .about-info__block { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; } .about-info__text { width: 100%; font-size: 16px; font-weight: 400; color: #777777; } @media (max-width: 991px) { .about-info__text { font-size: 15px; } } .about-info__img { width: 100%; margin-top: 25px; } @media (max-width: 991px) { .about-info__img { margin-top: 15px; } } .about-info__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-line-pack: center; align-content: center; width: 100%; margin-top: 30px; } @media (max-width: 991px) { .about-info__list { margin-top: 20px; } } .about-info__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: calc((99.999% - 80px) / 3); padding: 15px 0; } @media (max-width: 991px) { .about-info__item { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; padding: 10px 0; } } @media (max-width: 575px) { .about-info__item { width: calc((99.999% - 40px) / 3); } } .about-info__item::before { content: ""; display: block; width: 50px; height: 50px; } .about-info__item::after { content: ""; position: absolute; top: 0; right: -19px; display: block; width: 1px; height: 100%; background-color: #ddd; } @media (max-width: 575px) { .about-info__item::after { right: -9px; } } .about-info__item:nth-child(1)::before { background-size: 150px 1000px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px -271px; } .about-info__item:nth-child(2)::before { background-size: 150px 1000px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px -322px; } .about-info__item:nth-child(3)::before { background-size: 150px 1000px; background-repeat: no-repeat; background-image: url("../images/icons-01.png?1209"); background-position: 0px -373px; } .about-info__item:nth-child(3)::after { content: none; } .about-info__item p { width: calc(100% - 50px); padding-left: 20px; font-family: "Montserrat", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Microsoft JhengHei", sans-serif; font-size: 18px; font-weight: 400; line-height: 1.4; color: #333; } @media (max-width: 991px) { .about-info__item p { width: 100%; padding: 0; margin-top: 5px; font-size: 16px; text-align: center; } } @media (max-width: 575px) { .about-info__item p { font-size: 15px; } }