/* 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-tc{font-family: 'Noto Sans TC','Microsoft JhengHei', '微軟正黑體',sans-serif;} .txt-en{font-family: 'Noto Serif', sans-serif;} .f-400{font-weight: 400!important;} .vText { -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } .txt-red{color: #9e2b2f;} .txt-white{color: #fff!important; } .txt-gray{color:#5a5a5a; } .text-stroke{ -webkit-text-stroke: 1px #a3d6bf;} /** bg=================================*/ .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 } } .cms-wrapper-full { margin-right: auto; margin-left: auto; width: 100%; padding-right: 0px; padding-left: 0px; max-width: calc((100% - 40px)/12*12 + 40px)} @media (min-width:768px) { .cms-wrapper-full { padding-right: 10px; padding-left: 10px; } } @media (min-width:1002px) { .cms-wrapper-full { padding-right: 60px; padding-left:60px; } } @media (min-width:1600px) { .cms-wrapper-full { padding-right:100px; padding-left:100px; } } /*----------------------------------------/ banner area ----------------------------------------*/ .cms-main-banner { width:100%; height:auto; padding: 0px; margin:0px auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content:center; flex-direction: row; line-height: 2.5em; vertical-align: top;position: relative; z-index: 1;} .cms-main-banner-img{width: 100%; position: relative; z-index: 0;top: 0px; margin-top: 0px; padding:0px; pointer-events: none; } .cms-main-banner-img img{ width: 100%; max-width: 100%; height: auto; top:0px; -o-object-fit: cover; object-fit: cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 0.3s; pointer-events: none; } .cms-main-banner.ins {position: fixed; top: 60px; z-index: 0; width: 100%; height: 100%;} @media (max-width: 768px) { .cms-main-banner-img{ padding:0px; order:1; } .cms-main-banner-img img{ width: 100%; max-width: 100%; height: auto; -webkit-clip-path:none;clip-path: none;} } @media (max-width: 767.98px) { .cms-main-banner-img{ padding:0px;background-color:#0ea2b1; } .cms-main-banner-img img{opacity:.5;} } /* Banner 內文字 =====================================================================*/ .cms-main-banner-box { width:100%; height: 100%; padding:0px 0px 0px 80px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; z-index: 1; position: absolute; pointer-events: none; } .cms-main-banner-txt{ width: 100%; height: auto; margin: 0; padding:0px 0px 0px 40px; pointer-events: none;} #cms-main .cms-main-banner-txt h1{ display: block; width: auto; margin:5% 0px 20px 0px; padding: 0px; text-align: left; font-size:3.5rem; font-weight: 500; letter-spacing:1px; color:#fff; position: relative; } #cms-main .cms-main-banner-txt h1:after{ content: ""; width:200px; height:3px; display: block; position: absolute; z-index: 999; left:0px;bottom:-10px; background-image: linear-gradient(to left, #adc93b 0%, #107279 30%, #adc93b 100%); } #cms-main .cms-main-banner-txt .txt{ width:50%; min-width: 300px; height: auto; margin: 15px 0px; } #cms-main .cms-main-banner-txt .txt img{ display: block; width: 100%; height:62px; margin:0px; } #cms-main .cms-main-banner-txt .des{ width: 80%; margin:60px auto 15px 0; } #cms-main .cms-main-banner-txt p{ margin:0px 0px 15px 0px; font-size:1.188rem; font-weight:500; text-align: left; color:#fff; letter-spacing: 1px; } #cms-main .cms-main-banner-txt span { margin:0px; font-size:1rem; font-weight:700; text-align: left; color:#fff; letter-spacing: 1px; } .cms-main-banner #cssmenu{position: absolute; left:140px; bottom:30px; } @media (max-width: 1400px) { #cms-main .cms-main-banner-txt p { font-size:1rem; } #cms-main .cms-main-banner-txt .des{ width: 90%; margin:30px auto 15px 0; } } @media (max-width: 1200px) { #cms-main .cms-main-banner-txt h1{ font-size: 2.5rem; margin:2% 0px 20px 0px; } } @media (max-width: 1024px) { #cms-main .cms-main-banner-txt h1 { font-size: 1.75rem; margin-top: 0px; font-weight:700; } #cms-main .cms-main-banner-txt p { font-size:1rem;} } @media (max-width: 999px) { .cms-main-banner-box { padding:0px;height: auto; order: 1;} .cms-main-banner #cssmenu{ left:0px;top:auto;bottom:0px; margin-top: -52px; position: relative; order: 2; z-index: 999; } } @media (max-width: 768px) { #cms-main .cms-main-banner-txt .des{ width: 90%; margin:30px 0px; } } @media (max-width:767.98px) { #cms-main .cms-main-banner-txt h1 { font-size: 1.15rem; } .cms-main-banner #cssmenu{ left:0px;top:auto;bottom:0px; margin-top: 0px;z-index: 999; } } @media (min-width:1600px) { #cms-main .cms-main-banner-txt p { font-size:1.313rem; } } .cms-main-area{ width: 100%; padding: 0px; margin: 0px; flex: 1 1 100%; position: relative; z-index: 0;} /*----------------------------------------/ cms-main-content ----------------------------------------*/ .cms-main-content{position: relative; width: 100%; min-height: 50vh; margin:0 auto; padding:50px 0px 0px 0px; overflow-x: hidden;} .cms-main-content:before{ content:"";position: absolute; top: 0px; left:15px; width: 20%; height: 200px; background: url("../images/index/top-left.svg") no-repeat left top; background-size:auto 100%; -moz-transform:translate(-15px, 0); -webkit-transform:translate(-15px, 0); -o-transform:translate(-15px, 0); -ms-transform:translate(-15px, 0); transform:translate(-15px, 0); } .cms-main-content:after{ content:"";position: absolute; z-index:1; top:0px; right:0px; width: 20%; height: 110px; background: url("../images/index/top.svg") no-repeat left top; background-size:100% auto ;} @media (max-width: 999px) { .cms-main-content:before,.cms-main-content:after{ display: none;} } .cms-top .cms-main-content:before{ top:-50px;} .cms-top .cms-main-content:after{ top:-50px;} .cms-decorate-end {width: 100%; height: 100px; position: absolute; z-index: 13; left: 0px; } /*----------------------------------------/ 麵包屑 自訂顏色樣式 ----------------------------------------*/ .cms-main-breads{ width: 100%; max-width: calc((100% - 40px)/12*12 + 40px); height: 50px; margin:0px auto; padding:10px; color:#000; position: relative;} .cms-main-breads .breadcrumb{ width: auto; padding:0px 10px 0px 0px; margin: 0 auto; background:none; } #cms-main .cms-main-breads .breadcrumb li{ font-size:12px; max-width: 200px; overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } #cms-main .cms-main-breads .breadcrumb li a{ color:#fff;} #cms-main .cms-main-breads .breadcrumb li a:hover{color:#f6d60a} .breadcrumb-item:first-child::before {content: ""; color:#fff !important; position: absolute; left:0px;top:4px; width: 13px; height:13px; background: url("../images/icon/home-b.svg") no-repeat left top; } #cms-main .breadcrumb-item+.breadcrumb-item::before { content: " | "; margin-left: 5px;color:#fff;} #cms-main .cms-main-breads .breadcrumb li:first-child{ position: relative; padding-left: 20px;} #cms-main .cms-main-breads .breadcrumb li.active{ color:#f6d60a; } @media (min-width: 1600px) { .cms-main-breads .breadcrumb{padding:0px 20px} } @media (max-width: 768px) { .cms-main-breads{margin:0px auto; border-top: solid 1px rgba(255,255,255,.35);} .cms-main-breads .breadcrumb{ padding:2px; justify-content: flex-start; } } /* description ======================================================================= */ #cms-main .cms-description{ width:calc(100% - 100px); margin:0px 0px 25px 0px; padding: 0px 40px; } @media (max-width: 767.98px) { #cms-main .cms-description{ width:100%;} } .cms-title-block{ width: 100%; margin:0px auto; padding:0px 40px; display: flex; flex-wrap: wrap; position: relative; } .cms-title-block h1 {width:100%; margin:0px 0 15px 0; padding:20px 0px 0px 0px; font-size:2.5rem; color:#2a424c; font-weight:400; position: relative; } .cms-title-block h1:after{ content: ""; width:200px; height:3px; display: block; position: absolute; z-index: 999; left:0px;bottom:-10px; background-image: linear-gradient(to left, #adc93b 0%, #107279 30%, #adc93b 100%); } .cms-title-block h2 {width:100%; margin:0px 0 15px 0; padding:20px 0px 0px 0px; font-size:2.5rem; color:#2a424c; font-weight:400; position: relative;z-index:0; } .cms-title-block h2:after{ content: ""; width:200px; height:3px; display: block; position: absolute; z-index:1; left:0px;bottom:-10px; background-image: linear-gradient(to left, #adc93b 0%, #107279 30%, #adc93b 100%); } .cms-title-block h3 {width:100%; margin:0px 0 15px 0; padding:0px 0px 0px 0px; font-size:1.75rem; color:#0e7278; font-weight:400; position: relative; word-wrap: normal;} .cms-title-block p {width:100%; margin:0px 0 15px 0; padding:0px 0px 0px 0px; font-size:1.15rem; color:#2a424c; font-weight:400; position: relative; } @media (max-width: 1199.98px) { .cms-title-block h2{ font-size: 1.5rem; } } @media (max-width: 767.98px) { .cms-title-block { margin: 15px auto; } } /*cms-Title Styles 樣式 =================================*/ .cms-title { width: 100%; height: auto; margin:0px auto 30px auto;padding: 0px; display: flex; justify-content: center;align-items: flex-start; flex-wrap: wrap; flex-direction:column; text-shadow: 0px 1px 1px rgb(0,0,0,.1);} .cms-title .txt{ width:auto; min-width: 300px; height: 62px; margin: auto auto 15px auto; border: solid 1px #000;} .cms-title .txt img{ display: block; width: auto; min-height:62px; margin:0px auto; } .cms-title h1{ margin:15px auto; font-size:2.75rem; line-height: 2.5rem; color:#0fa2b1; font-weight:500; } .cms-title h2{ margin:15px 0; font-size:2.5rem; line-height: 2.5rem; letter-spacing:0;color:#0fa2b1; font-weight:500; } .cms-title span{ width: auto; margin:10px auto; font-size:1rem; letter-spacing:2px; font-weight:400; color: #333; } .cms-title p{ margin:0px;font-size: 0.9375rem; font-weight: 700; color:#8f929e;} @media (max-width:1680px) { .cms-title{ transform: scale(0.8)} } @media (max-width:1520px) { .cms-title{ transform: scale(0.75)} } @media (max-width:1366px) { .cms-title{ transform: scale(0.7)} } @media (max-width:1280px) { .cms-title{ transform: scale(0.6)} } .cms-title-2 { width:100%; margin:0px 0px 2% 0px; padding: 0px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; flex-direction:column; } .cms-title-2 .txt{ width:80%; min-width: 300px; height: 62px; margin: 15px 0px; border: solid 1px #000;} .cms-title-2 .txt img{ display: block; width: 100%; height:62px; margin:0px; } .cms-title-2 a.cms-btn,.cms-title-2 .cms-btn{ margin:15px 0px 15px -35%!important;} .cms-title-2 .txt-1{ width: 30%; min-width: 300px; height: 62px; margin: 15px 0px; } .cms-title-2 .txt-1 img{ display: block; width: 100%; height:62px; margin:0px; } .cms-title-2 h2{ margin:5px 0px; font-size:2.15rem; line-height: 3rem; color:#0fa2b1; font-weight:500; } .cms-title-2 h2 span{ font-size:1.188rem; font-weight:400; color:#2a424c; } .cms-title-2 p{ width:100%; margin:0px auto; font-size:0.75rem; font-weight:400; text-align: center; color:#6c7280; } @media (max-width: 1180px) { .cms-title-2 h2{ font-size:1.75rem; line-height:2rem; } } @media (max-width: 767.98px) { .cms-title-2 h2{ font-size:1.35rem; } .cms-title-2 p{ width: 90%; } .cms-title-2 .txt-1{ width: 90%; height: 43px; margin: 15px 0px; } .cms-title-2 .txt-1 img{ display: block; width: 100%; height:43px; margin:0px; } .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-3 { width:auto; height: auto; margin:0px 0px 30px 30px;padding: 0px; display: flex; justify-content: flex-start;align-items: flex-start; flex-wrap: wrap; flex-direction:column; } .cms-title-3 h3{ display: block;margin:5px 0px; font-size:1.73rem; line-height:1.35rem; font-weight:700; color:#c98f25; letter-spacing: 1px; position: relative; } .cms-title-3 h3:before{ content: ""; position: absolute;z-index:99!important; left: -50px; top:10px; width:19px; height:5px; background: url("../images/index/t-l.svg") no-repeat left top; background-size: 19px 5px; } .cms-title-3 h3:after{ content: ""; position: absolute;z-index:99!important; right:-50px; top: 10px;width:19px; height:5px; background: url("../images/index/t-r.svg") no-repeat right top;background-size: 19px 5px; } .cms-title-3 h4{ width: auto; margin:0px; font-size: 2rem; font-weight: 700;color: #c98f25; text-shadow: 0px 0px rgba(255,255,255,1); letter-spacing: 2px;} .cms-title-3 span{ width: auto; margin:10px auto; font-size:1rem; letter-spacing:2px; font-weight:400; color: #333; } .cms-title-3 p{ width:100%; margin:0px; font-size:0.875rem; font-weight:700; color:#c98f25; } .cms-title-4 { width: 100%; display: flex; flex-wrap: wrap; position: relative; justify-content: center; flex-direction: column; } #cms-main .cms-title-4 h2{ margin:15px 15px 0 15px; text-align: center; font-weight: 700;color: #333; } #cms-main .cms-title-4 h3{ margin:15px 15px 5px 15px; color: #c09547; font-weight: 700; } .cms-title-4 span {margin: 0px; font-size: .875rem; text-align: left; display: flex;font-weight: 400; } .cms-title-4 { width:100%; margin: 30px auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content:center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; flex-wrap: wrap;position: relative; } .cms-title-4::before { display: block; content: ''; width: 2px; height:80px; top:-68px; background:#c09547; position: absolute; z-index:2; } @media (max-width: 1199.98px) { .cms-title-4 h2,.cms-title-4 h1{ font-size: 1.5rem; } } @media (max-width: 767.98px) { .cms-title-4 { margin: 15px auto; } .cms-title-4::before { top:-30px; height:30px } #cms-main .cms-title-4 h2{ margin:55px 15px 0 15px; } } .cms-txt-stork { -webkit-text-stroke: 1px #333; -webkit-text-fill-color: transparent;} /*----------------------------------------/ 分頁 自訂顏色樣式 ----------------------------------------*/ #cms-main-pages .cms-pagination{ margin:10px auto; display: flex; justify-content: center; } .cms-pagination .page-link {width: 40px; height: 40px; margin: auto; text-align: center; color:#31315e; border-radius:99rem; background-color:#ebebeb; border-color:transparent;} .cms-pagination .page-link:hover { color: #fff; background-color:#b7cc19; border-color:#b7cc19;} .cms-pagination .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);} .cms-pagination .page-item{ margin:0px 10px; } .cms-pagination .page-item:first-child .page-link { } .cms-pagination .page-item:last-child .page-link { } .cms-pagination .page-item.active .page-link { color: #fff!important; background-color:#b7cc19; border-color:#b7cc19;} .cms-pagination .page-item.disabled .page-link { color: #6c757d; background-color: #fff; border-color:transparent; } /*----------------------------------------/ btn 自訂顏色樣式 ----------------------------------------*/ #cms-main .btn { width: 100%;margin: 0px 5px; padding: 10px 0.75rem ; font-size: .95rem; line-height: 1.5; border-radius:0px; } #cms-main .btn-secondary{ font-size: .95rem;color:#fff;line-height: 1.5; } @media (max-width: 767.98px) { #cms-main .btn { padding: 0.375rem 0.7rem; font-size: .875rem; } #cms-main .btn-secondary{ font-size: .875rem; } } .btn.cms-btn-pill { border-radius: 6.1875rem; } .btn.cms-btn-outline-primary{text-align: center; color: #333; font-weight:400; border-color:none; } .btn.cms-btn-outline-primary:hover { color:#71869d; background-color:#e2e2e2; border-color:#e2e2e2;} #cms-main .btn.cms-btn-secondary { color:#fff; font-weight: 400; border-color:#c09547; background: #c09547; } #cms-main .btn.cms-btn-secondary i{font-size: 1.1rem; width: 24px; height:24px; display: inline-block; } .icon-shop{display: block; margin: auto;background:url(../images/icon/shop-1.svg) no-repeat left top; } #cms-main .btn.cms-btn-secondary:hover { color: #fff; background-color: #000;; border-color:#000;; } #cms-main .btn.cms-btn-buynow { color:#bf9548; font-weight: 400; background-color:#fff; border-color:#bf9548; } #cms-main .btn.cms-btn-buynow:hover { color: #000; background-color: #fff;; border-color:#000;; } .cms-btn-prev {color:#6c7280; font-weight: 500; text-align: center; background: url(../images/icon/arrow-left.svg) no-repeat left 8px; border: solid 1px #6c7280; } .cms-btn-next {color:#6c7280; font-weight: 500; text-align: center; background: url(../images/icon/arrow-right.svg) no-repeat right 8px; border: solid 1px #6c7280; } .cms-btn-prev:hover,.cms-btn-next:hover { color: #776b62; border: solid 1px #6c7280; } a.cms-btn-prev:hover,a.cms-btn-next:hover { color: #776b62!important; border: solid 1px #776b62!important; } @media (max-width: 991.98px) { .cms-btn-prev,.cms-btn-next { background-size:16px; } } .transition-3d-hover { transition: all .2s ease-in-out} .transition-3d-hover:focus, .transition-3d-hover:hover {-webkit-transform: translateY(-3px);transform: translateY(-3px)} /*---------------*/ /***** btn *****/ /*---------------*/ .icon-next{background: url("../images/icon/icon-arrow-r-w.svg") no-repeat left 0px; background-size:auto;} .cms-btn { width: 100%; max-width: 200px; height: 42px; margin: 15px 0px; padding: 0px 20px; text-decoration: none; display: flex;align-items: center;align-self: center; align-content: center; justify-content: center; cursor: pointer; border-radius:30px; overflow: hidden;position: relative; } a.cms-btn { max-width: 220px; color: #fff;font-size: 1rem; font-weight:500; letter-spacing: 1px; background-color:transparent; text-shadow: 0px 1px 1px rgb(0,0,0,.3); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1); } .cms-btn:hover {border-color: rgba(255, 255, 255,.5); } 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 { width:26px; height:26px; margin:5px 15px 0px 15px ; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s} .cms-btn i.icon-next { width:20px; height:20px; margin:0px 0px 0px 50px ; } .cms-btn:hover i{ -webkit-transform: translateX(10px); transform: translateX(10px)} .cms-btn span { -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s} .cms-btn:hover span{ -webkit-transform: translateX(-5px); transform: translateX(-5px)} a.cms-btn-1 { background-image: linear-gradient(-75deg, #0fa2b1 0%, #b7cc19 100%); ; text-shadow: 0px 1px 1px rgb(0,0,0,.3); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.1); } .cms-btn-1 { color: #fff; background-image: linear-gradient(-75deg, #0fa2b1 0%, #b7cc19 100%); ; text-shadow: 0px 1px 1px rgb(0,0,0,.3); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.1); border-color:transparent;} a.cms-btn-2 { background-image: linear-gradient( 45deg, #c98f25 10%, #ffd66b 60%, #c98f25 80%); text-shadow: 0px 1px 1px rgb(0,0,0,.3); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1); } @media (max-width: 768px) { .cms-btn i { width:18px; height: 18px; } .cms-btn {padding: 15px;} } /*cms-btn Styles 4====*/ .cms-btn-btnbox {position: relative;z-index:99; display: flex; justify-content: center; width: 10%; height: auto; margin: 0px auto 60px auto; transition: all 1s;} .scroll-downs { position: absolute; top: 45%; left: 22px; bottom: auto; margin: auto; width:20px; height: 44px; z-index: 999;} .mousey { width: 2px; padding: 5px 6px; height:16px; border: 1px solid #fff; border-radius: 25px; opacity: 0.75; box-sizing: content-box; position: relative;} .mousey:after{content:"";position: absolute;top:-46px; left:6px;width: 1px; height:40px; background: #fff;} .mousey:before{content: attr(data-title); position: absolute;top:-120px; left:0px; width: 30px; height:150px;font-size: 0.75rem; color: #fff; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } .scroller { width: 2px; height: 8px; border-radius: 25%; background-color: #fff; 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: 920px) { .scroll-downs { display: none;} } /* Sweep To Right */ .hvr-sweep-to-right { cursor: pointer; display: inline-block; position: relative; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} .hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #000!important; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;} .hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: #fff!important;} .hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);} a.cms-btn-back { width:auto; color:#000!important; padding: 10px; font-weight: 700;border: solid 1px #6c7280; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content:center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .cms-btn-back:before,.cms-btn-back::after{ content: ''; width: 30px; height:1px; background:#797371;-moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; } .cms-btn-back:before { margin-right: 20px; margin-left: 5px;} .cms-btn-back:after { margin-left: 20px; margin-right: 5px;} a.cms-btn-back:hover { color:#776b62!important; border: solid 1px #776b62;} .cms-btn-back:hover:before{ background:#776b62; -moz-transform: translateX(20%); -ms-transform: translateX(20%); -webkit-transform: translateX(20%); transform: translateX(20%); } .cms-btn-back:hover:after{ background:#776b62;-moz-transform: translateX(-20%); -ms-transform: translateX(-20%); -webkit-transform: translateX(-20%); transform: translateX(-20%); } @media (max-width: 767.98px) { .cms-btn-back { font-size:.875rem; padding:5px 10px;} .cms-btn-back:before,.cms-btn-back::after{ display: none; } } a.text-button {color: #333;} .text-button { padding-left: 2.1875rem; margin:20px 0px 40px 0px; font-size:1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.125rem; cursor: pointer; display: inline-block; color: currentColor;position: relative; transition: padding 0.3s ease} .text-button::before { content: ''; display: inline-block; position: absolute; left: 0; top: 50%; width: 1.5625rem; height: 0.0625rem; background: currentColor; vertical-align: middle; margin-right: 0.625rem; transition: padding 0.3s ease} @media (hover: hover) { .text-button:hover { color: currentColor; padding-left: 2.8125rem } .text-button:hover:before { width: 2.1875rem; color: currentColor } } a.txt-button-border{ border: solid 1px #c19546} .cms-btn-m{ width: 100%; max-width:180px; } /*----------------------------------------/ ul style 自訂樣式 ----------------------------------------*/ .cms-dot{ width: 100%; display: block; margin:0px;padding: 0px; } .cms-dot li{ width: 100%; display: block; padding: 2px 0px 2px 15px; margin: 0px 0px 10px 0px; font-size:1.063rem; line-height:1.5rem; font-weight:400; color: #333; background: url(../images/icon/dot.svg) no-repeat left 12px; background-size:4px;} .cms-arrow{ width: 100%; display: block; margin: 1.5% auto; } .cms-arrow li{ width: 100%; display: block; padding:1px 0 10px 15px; font-size:15px; line-height:1.4em; font-weight:400; background: url(../images/icon/arrow-right.svg) no-repeat left 8px; background-size:8px;} .cms-decimal { list-style-position: outside; list-style-type: decimal; padding-left: 15px;} .cms-decimal li{margin-bottom: 10px; font-size:15px; line-height:1.5em; font-weight:400; } .cms-tag{ padding: 5px 10px; display: inline-block; width: auto; max-width: 100px; margin: 5px;font-size:15px; line-height:1.5em; font-weight:400; text-align: center; border: solid 1px #eee; background: #eee;} /*----------------------------------------/ aside cssmenu樣式 ----------------------------------------*/ #menu-line{ display: none; position:relative;bottom:0px; left:0px;top:50px; right: 0px; margin-left: 5px; width: auto;height:3px;background:#c09547;-webkit-transition:all 0.25s ease-out;-moz-transition:all 0.25s ease-out;-ms-transition:all 0.25s ease-out;-o-transition:all 0.25s ease-out;transition:all 0.25s ease-out;} #cssmenu{margin:0px;padding:0;border:0;list-style:none; display:block;position:relative; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:99;} #cssmenu{width:100%; height: auto; background-color: rgba(255,255,255,0); } #cssmenu #menu-button{margin:0px;padding:0;border:0;list-style:none; display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:9999;background-color:#fff; } #cssmenu #menu-button{display:none;} #cssmenu ul,#cssmenu ul li,#cssmenu ul li a{margin:0;padding:0;border:0;list-style:none; display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} #cssmenu:after, #cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;} #cssmenu > ul > li{float:left; width: auto; position: relative;z-index: 1; margin:0px 30px 0px 0px; border-radius:0px; background-color:transparent; -webkit-transition: all 0.3s; transition: all 0.3s; } #cssmenu > ul > li::after{content: ""; width:100%; height:4px; display: block; position: absolute; left: 0px; bottom:-10px; background:#fff; } #cssmenu > ul > li.active::after{border-color:#f6d60a; } #cssmenu.align-center > ul{font-size:0;text-align:center; } #cssmenu.align-center > ul > li{display:inline-block;float:none;} #cssmenu.align-center ul ul{text-align:left;} #cssmenu.align-right > ul > li{float:right;} #cssmenu.align-right ul ul{text-align:right;} #cssmenu > ul > li > a{text-decoration:none;text-transform:uppercase;color:#fff;-webkit-transition:color .2s ease;-moz-transition:color .2s ease;-ms-transition:color .2s ease;-o-transition:color .2s ease;transition:color .2s ease;} #cssmenu > ul > li:hover,#cssmenu > ul > li:hover > a,#cssmenu > ul > li.active{ border-color:#f6f2f0;} #cssmenu > ul > li.active > a{color:#f6d60a; } #cssmenu > ul > li:hover > a {color:#f6d60a;} #cssmenu > ul > li.active:hover > a {color:#fff;} #cssmenu > ul > li > a{ padding:5px 30px 5px 0px; font-size:1.5rem; font-weight:500; letter-spacing: 2px; display: flex; flex-wrap: wrap; align-items: flex-start;justify-content: flex-start; flex-direction: column;} #cssmenu > ul > li > a span{ margin: auto; width: 100%; } #cssmenu > ul > li.has-sub:hover > a::after{ border-color:#f6d60a;} #cssmenu ul ul{position:absolute;left:-9999px;padding-bottom: 10px; background:#fcfbf9; -webkit-transition:all 0.25s ease-out;-moz-transition:all 0.25s ease-out;-ms-transition:all 0.25s ease-out;-o-transition:all 0.25s ease-out;transition:all 0.25s ease-out;} #cssmenu li:hover > ul{left:auto;} #cssmenu.align-right li:hover > ul{right:0;} #cssmenu.align-right ul ul ul{margin-left:0;margin-right:100%;} #cssmenu ul ul li{ -webkit-transition:height .2s ease;-moz-transition:height .2s ease;-ms-transition:height .2s ease;-o-transition:height .2s ease;transition:height .2s ease;} #cssmenu ul ul ul{margin-left:100%;top:0; background:#fff8f9!important; -webkit-transition:all 0.25s ease-out;-moz-transition:all 0.25s ease-out;-ms-transition:all 0.25s ease-out;-o-transition:all 0.25s ease-out;transition:all 0.25s ease-out;} #cssmenu ul li:hover > ul > li{ } #cssmenu ul ul li a{ padding:12px 20px; width:200px; font-size:1rem; line-height:2rem;text-align:left;text-decoration:none;color:#000; -webkit-transition:color .2s ease;-moz-transition:color .2s ease;-ms-transition:color .2s ease;-o-transition:color .2s ease;transition:color .2s ease;} #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#776b62;} #cssmenu ul ul li.has-sub > a::after{position:absolute;top:25px;right:10px;width:4px;height:4px;border-bottom:1px solid #000;border-right:1px solid #000;content:"";-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:border-color 0.2s ease;-moz-transition:border-color 0.2s ease;-ms-transition:border-color 0.2s ease;-o-transition:border-color 0.2s ease;transition:border-color 0.2s ease;} #cssmenu ul ul li.has-sub:hover > a::after{border-color:#776b62;} @media (max-width:999px) { #cssmenu{width:100%;position: relative; border-bottom: solid 1px rgba(15,162,177,.1);} #cssmenu ul{width:100%; margin: auto; display:none; background:#0ea2b1;position: absolute; z-index: 999;} #cssmenu ul ul{background:#fff8f9!important;} #cssmenu ul ul ul{ background:#e7eaeb!important; } #cssmenu.align-center > ul,#cssmenu.align-right ul ul{text-align:left;} #cssmenu ul li,#cssmenu ul ul li,#cssmenu ul li:hover > ul > li{width:100%;height:auto;margin: 0px; border-top:1px solid rgba(120, 120, 120, 0.15);} #cssmenu > ul > li{border: none; border-bottom: solid 1px #ddd; box-shadow: none;} #cssmenu ul li a,#cssmenu ul ul li a{width:100%; font-size: 1rem; padding: 10px 25px; justify-content: center;} #cssmenu > ul > li,#cssmenu.align-center > ul > li,#cssmenu.align-right > ul > li{float:none;display:block;} #cssmenu ul ul li a{padding:10px 15px;font-size:12px;color:#000000;background:none;text-align:center;} #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#000000;} #cssmenu ul ul ul li a{padding-left:40px;} #cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;right:auto;width:100%;margin:0; padding-bottom: 0px;} #cssmenu > ul > li::after,#cssmenu ul ul li.has-sub > a::after{display:none;} #cssmenu > ul > li > a{ flex-direction: row;} #cssmenu > ul > li > a span{ margin: auto 0; } #menu-line{display:none;} #cssmenu #menu-button{display:block; padding:5px 20px; color:#0ba1b0;cursor:pointer;font-size:1rem;font-weight: 700;text-align: center; text-transform:uppercase; border:solid 1px transparent; background-color:rgba(255,255,255,.7);-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;} #cssmenu #menu-button.menu-opened{ background-color:#005b64; } #cssmenu #menu-button::after { display: block; content: ""; position: absolute; left:3%; top: 12px;width: 24px; height: 24px; background: url("../images/icon/nav.svg") no-repeat left top; } #cssmenu .submenu-button{position:absolute;z-index:10;right:0;top:0;display:block;border-left:1px solid rgba(120, 120, 120, 0.15);height:52px;width:52px;cursor:pointer;} #cssmenu .submenu-button::after{content:'';position:absolute;top:21px;left:26px;display:block;width:1px;height:11px;background:#000000;z-index:99;} #cssmenu .submenu-button::before{content:'';position:absolute;left:21px;top:26px;display:block;width:11px;height:1px;background:#000000;z-index:99;} #cssmenu .submenu-button.submenu-opened:after{display:none;} } /*--------form style------------*/ *:focus { outline: none; } /* placeholder ---*/ input::placeholder { font-size:0.875rem; } input:focus, textarea:focus { outline: none; } input:focus:placeholder { color: transparent; } input:focus::-webkit-input-placeholder { color: transparent; } input:focus:-moz-placeholder { color: transparent; } input:focus::-moz-placeholder { color: transparent; } input:focus:-ms-input-placeholder { color: transparent; } select{min-height:36px; line-height:2rem; padding-left:15px; font-size:0.875rem; color: #333;background-color:#fff;border: 1px solid #f7f7f7;border-radius:0px; } /*IE --*/ select::-ms-expand {display: none; } select:focus{ box-shadow: 0 0 5px 2px #467BF4; } input, button, select, textarea { outline: none; } /*--service --*/ .cms-box-wrap{width: 100%; display: flex; flex-wrap: wrap;position: relative;z-index: 1; } .service{width:100%;padding:100px 0px 0px 0px;position: relative;z-index: 1; } .service .cms-title-2 {margin-left: 100px;} .service-box{width: 50%; padding: 0px; } .service-box .item{ width:100%; height: 100%; height: 600px; margin:0px; padding:0px; display: flex; flex-wrap: wrap; justify-content: center;align-items:center; position: relative;} .service-box .item-icon{ width:40%; height:auto; margin: auto;} .service-box .item-icon img { width:100%; height:auto; } .service-box .item-box{ width:50%; margin: 0px auto; padding:50px 10px 10px 10px; z-index: 9; } .service-box .item-box h3{ font-size: 1.875rem; font-weight: 700; margin: 15px 0px;color: #2a424c; text-align: center; } .service-box .item-box p{ font-size: 1.125rem; line-height: 1.75rem; font-weight: 400; margin: 15px 0px;color: #2a424c; } .item-bg-1 { width: 100%; max-width: 100%; height: auto; margin: auto; position: relative; z-index:2; background: url("../images/index/end-1.jpg") no-repeat left bottom #eee; background-size:auto 100% ;} .item-bg-2 { width: 100%; max-width: 100%; height: auto; margin: auto; position: relative; z-index:2; background-image: url("../images/index/end-2.png"), url("../images/index/end-2.jpg"); background-position: -25px bottom,right top; background-color: #eeeeee; background-size:20% auto,auto 100%; background-repeat: no-repeat; } .service-box .item-box a.cms-btn{ width: 100%; max-width: 220px; margin-top: 40px;} @media (max-width: 1520px) { .item-bg-2 { background-size:25% auto,auto 100%; } } @media (max-width: 1180px) { .item-bg-2 { background-size:25% auto,100% auto ; } } @media (max-width: 10240px) { .service-box .item-box{ width:70%; margin: 0px auto; } } @media (max-width: 820px) { .service-box{width: 100%; padding: 0px; } } @media (max-width: 768px) { .service-box .item-box a.cms-btn{ margin:40px auto auto auto;} } @media (max-width: 767.980px) { .service{ padding:20px 0px 0px 0px; } .service .cms-title-2 {margin-left: 20px;} .service-box .item{ width:100%; height: 480px; } .service-box .item-box{ width:80%; } .service-box .item-box p{ font-size:0.9rem; } }