/* theme style */
:root {
--black: #000;
--white: #fff;
--text-color: #3c3c3c;
--border-color: #ebeef5;
--active-color: #3095fb;
--background-color: #f8f8f8;
--background-color-light: #f90df7; --theme-color: #D6000F;
--theme-color-dark: #C2121E;
--theme-color-light: #a3d0fd; --warning-color: #ffa179;
--warning-color-dark: #ff976a;
--warning-color-light: #fffbe8; --success-color: #20c770;
--success-color-dark: #07c160;
--success-color-light: #b5eccf; --error-color: #ff5757;
--error-color-dark: #f44;
--error-color-light: #ffc7c7; --font-size: 16px;
--line-height: 1.4;
--center-width: 1600px;
}::placeholder {
color: #bfbfbf;
}a {
color: #3c3c3c;
}a:hover {
color: var(--theme-color);
}body {
color: #3c3c3c;
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微軟雅黑",Arial,sans-serif;;
font-size: 16px;
line-height: 1.4;
background-attachment:scroll;}.Page {
background-attachment:scroll;}
/* 版心是否包含側邊欄 */
.both-sidebar .Page-body,
.left-sidebar .Page-body,
.right-sidebar .Page-body {
width: 1600px;
}
.Page-header--topbar {
background-attachment:scroll;background-color:rgba(245, 245, 245, 1);}.Page-header {
background-attachment:scroll;}.Page-header .Page-header--topbar .top-bar__in .top-bar__body .account a{
color:#3c3c3c;
}
.Page-header .Page-header--topbar .top-bar__in .top-bar__body .account a:hover{
color:var(--theme-color);
}
.Page-slot--template-header_in{
width: 220px;
}
.Page-header--main.default,
.Page-header--mobiles.default {
box-shadow: 0 1px 3px rgba(18,18,18,.1)}
.Page-header--main,
.Page-header--mobiles {
background-attachment:scroll;background-color:rgba(255, 255, 255, 1);}.Page-header--main:hover {
background-color: ;
}.Page-header--main.fixed,
.Page-header--mobiles.fixed {
}.Page-header--main.fixed {
background-attachment:scroll;}.Page-header--mobiles,
.show-mobiles-menu .Page-header::before {
background-attachment:scroll;}
.Page-header--mobiles .Page-header--icons li.menu {
color: #3c3c3c;
}
.Page .Page-header .Page-header--main .Page-header--icons li.menu{
color: #3c3c3c;
}.Page .Page-header .Page-header--main .Page-header--icons li.menu.icon-active,
.Page-header--mobiles .Page-header--icons li.menu.icon-active {
color: #3c3c3c;
}.Page .Page-header .Page-header--main .Page-header--icons li.menu-colse{
color: #000;
}.Page-header--subheader {
height: 250px;
background-attachment:scroll;}
.Page .Page-header .Page-header--icons .menu i{
font-size: initial ;
}.Page-header--main .cc-menu--nav .cc-menu--item .cc-menu--item__link{justify-content:center;text-align:center;}
.Page-header--mobiles .cc-menu--nav .cc-menu--item .cc-menu--item__link{justify-content:center;text-align:center;}
.Page-header--shade .cc-menu--nav .cc-menu--item .cc-menu--item__link{justify-content:center;text-align:center;}
.Page-header--user > a{
color:#3c3c3c;
}.Page-content {
background-attachment:scroll;}.Page-sidebar {
background-attachment:scroll;}.Page-footer>.footer {
background-attachment:scroll;}/** 常規版心 */
.container, .cc-row--width__default {
max-width: 1600px;
}.cc-row--width__row {
padding-left: calc((100% - 1600px) / 2) !important;
padding-right: calc((100% - 1600px) / 2) !important;
}
/** 頭部版心 */
.Page-header .container, .Page-header .cc-row--width__default {
max-width: 1920px;
}
.Page-header .cc-row--width__row {
padding-left: calc((100% - 1920px) / 2) !important;
padding-right: calc((100% - 1920px) / 2) !important;
}
.Page-header--main__in {
padding: 0px 0;
}
h1 {
font-size: 32px;
line-height: 1.4;
font-weight:bold;
color: #3c3c3c;
}h2 {
font-size: 24px;
line-height: 1.4;
font-weight:bold;
color: #3c3c3c;
}h3 {
font-size: 18px;
line-height: 1.4;
font-weight:bold;
color: #3c3c3c;
}h4 {
font-size: 16px;
line-height: 1.4;
font-weight:bold;
color: #3c3c3c;
}h5 {
font-size: 13px;
line-height: 1.4;
font-weight:bold;
color: #3c3c3c;
}h6 {
font-size: 12px;
line-height: 1.4;
font-weight:bold;
color: #3c3c3c;
}.theme-color-text {
color: #D6000F;
}.theme-color-bg {
background-color: #D6000F;
}
/* 框式布局 */
.layout-boxed .Page {
max-width: 1600px;
}
/* 文章詳情寬度 */
.Page .posts {
max-width: 1600px;
}
/* 文章相冊主圖與縮略圖間距 */
.Page .posts .posts-body .posts-photos .cc-gallery .cc-gallery--thumbs {
padding: 10px 0;
}
.Page-body .posts .posts-body .posts-content img{
display: block;
clear: both;
margin: auto;
}
.Page-body .posts .posts-body .posts-content p{
text-indent: 2em;
}
.Page-body .posts .posts-footer .next-prev-nav{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.side-toolbar.position-right-bottom{
bottom: 10%;
right: 0;
height: max-content;
}
.Page .Page-widgets .side-toolbar .toolbar-text.show{
transform: translateX(calc(-100% + 3px));
-webkit-transform: translateX(calc(-100% + 3px));
-ms-transform: translateX(calc(-100% + 3px));
}
.Page .Page-widgets .side-toolbar .toolbar-img.show{
right: calc( 100% + 3px );
display: block;
}
/* 側邊欄寬度 */
body.both-sidebar .Page-sidebar.sidebar-left,
body.left-sidebar .Page-sidebar.sidebar-left
{
width: 15%;
}
body.both-sidebar .Page-sidebar.sidebar-right,
body.right-sidebar .Page-sidebar.sidebar-right
{
width: 15%;
}
/* 內容寬度 */
body.both-sidebar .Page-content {
width: 70%;
}
body.left-sidebar .Page-content {
width: 85%;
}
body.right-sidebar .Page-content {
width: 85%;
}/* 底部 */
.Page-footer>.footer {
padding: 30px 0;
}/* 底部工具條 */
.Page-footer > .fixed-toolbar{
padding:0px 0;
}/* 懸浮廣告窗 */
.Page-widgets > .fixed-toolbar.page-move-fixed{
width:200px;
}.side-toolbar .toolbar-icon {
background-color: rgba(0, 0, 0, 0.46);
width: 50px;
height: 50px;
}
.side-toolbar > ul > li:hover .toolbar-icon,
.side-toolbar .toolbar-text {
background-color: var(--theme-color);
}
.side-toolbar > ul > li {
margin-bottom: 1px;
}
/** 頭部組件排序 */
.Page-header--main .Page-header--logo {
order: 0;
} .Page-header--main .Page-header--logo {
padding: 0 30px;
}
.Page-header--main .Page-header--menu {
order: 1;
}
.Page-header--main .Page-header--widgets {
order: 2;
}
.Page-header--main .Page-slot--template-header_in {
order: 3;
min-width: 220px}
.Page .Page-body .Page-content .join{
background-color:#fff;
}
.Page-header--logo img {
max-height: 130px;
width: auto;
} .header-type-fixed .Page-header .Page-header--main.fixed .Page-header--logo img.all-logo,
.header-type-immersion .Page-header .Page-header--main .Page-header--logo img.all-logo {
max-height: 130px;
width: auto;
}
.header-type-fixed .Page-header .Page-header--main.fixed .Page-header--main__in,
.header-type-immersion .Page-header .Page-header--main .Page-header--main__in{
padding:0px 0;
}
/** 覆蓋菜單菜單關閉按鈕顏色設置 */
.menu-colse{
color: #000}/** 產品按鈕 */
.product .checkout-goto {
background-color: var(--theme-color);
}
.product .checkout-goto:hover {
background-color: var(--theme-color-dark);
}
.product .shopping-push {
background-color: var(--error-color);
}
.product .shopping-push:hover {
background-color: var(--error-color-dark);
}/** 詢價按鈕 */
.cc-button-product-relation .slot-main,
.product .cc-button--event{
background-color: rgba(214, 0, 15, 1);
color: #fff;
font-size: 16px;
border-radius: 0px;
}
/** 詢價按鈕懸停樣式 */
.product .cc-button-product-relation .slot-main:hover,
.product .cc-button--event:hover{
background-color: rgba(180, 12, 24, 1);
color: var(--active-color);
}
/* 產品詳情 */
.Page .Page-body .Page-content .product > .cc-row{
padding: 0 0px;
}
.Page .product .cc-gallery .cc-gallery--top .swiper-zoom-container{
justify-content:center;
}
.Page .product .cc-row--width__default .cc-element--wrapper .cc-textblock .cc-textblock__body{
padding:20px}
.Page .product .cc-row--width__default .product-header{
margin-bottom:0px}
.product .cc-tabs.cc-tabs--line.cc-tabs--position__top .cc-tabs--nav:after{
bottom: 0;
}.product .product-header .cc-product--attrs .product-info .product-property{
margin: 0px 0;
}@media only screen and (max-width: 767px) {.Page-body .product .product-header .product-info .product-title{font-size:32px;}
}@media only screen and (min-width: 768px) {.Page-body .product .product-header .product-info .product-title{font-size:36px;}
}@media only screen and (min-width: 1600px) {.Page-body .product .product-header .product-info .product-title{font-size:42px;font-weight:bold;}
} .product .product-header{
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.product .cc-product--photos{
width: 100%;
// height: calc(500px + 180px)
}
.product .cc-gallery--top{
height: 500px
}
.product .cc-gallery--thumbs{
height: 140px
}
.product .cc-product--attrs{
width: 100%;
}
.user-page .field-card{
background-color:#fff;
}
.account .user-avatar::before{
border: 3px solid #fff;
}
.user-page.order .order-item--head{
background-color: #f0f0f0;
}
.user-page .cc-account-sidenav{
background-color:#fff;
}
.user-page .cc-account-sidenav--menu dd{
background-color:#fff;
}
.user-page .cc-account-sidenav--menu dd a{
color:rgba(96, 96, 96, 1);
}
.user-page .cc-account-sidenav--menu dd i{
color: rgba(96, 96, 96, 1);
}
.user-page .cc-account-sidenav--menu dd:hover{
background-color:rgba(214, 214, 214, 1);
}
.user-page .cc-account-sidenav--menu dd:hover i,
.user-page .cc-account-sidenav--menu dd:hover a{
color:rgba(0, 0, 0, 1);
}
.user-page .cc-account-sidenav--menu .current{
background-color:rgba(214, 214, 214, 1);
}
.user-page .cc-account-sidenav--menu .current i,
.user-page .cc-account-sidenav--menu .current a{
color:rgba(0, 0, 0, 1);
}
.Page-header .cc-menu .cc-menu--nav .cc-menu--item .cc-menu--item{border-bottom-width:1px;border-bottom-color:rgba(235, 235, 235, 1);border-style:solid;} .Page-header .cc-menu .cc-menu--nav .cc-menu--item .cc-menu--item{
box-sizing: border-box;
}
@media only screen and (min-width: 767px) {
.Page .Page-header .Page-header--widgets .Page-header--search,
.Page .Page-header .Page-header--main .Page-header--shade .Page-header--shade__menu .Page-header--shade__widgets .search-wrapper{
display: none;
}
}
.Page-header .Page-header--left__fixed .cc-menu .cc-menu--nav .cc-menu--item .cc-menu--item__link,
.Page-header .Page-header--right__fixed .cc-menu .cc-menu--nav .cc-menu--item .cc-menu--item__link,
.Page-header .Page-header--shade .cc-menu .cc-menu--nav .cc-menu--item .cc-menu--item__link,
.Page-header .Page-header--shade .cc-menu .cc-menu--nav .cc-menu--item .cc-menu--item__link{
height: 45px;
line-height:45px;
padding:0px 0;
}
.Page-header .Page-header--left__fixed .cc-menu > .cc-menu--nav > .cc-menu--item > .cc-menu--item__link,
.Page-header .Page-header--right__fixed .cc-menu > .cc-menu--nav > .cc-menu--item > .cc-menu--item__link,
.Page-header .Page-header--shade .cc-menu > .cc-menu--nav > .cc-menu--item > .cc-menu--item__link,
.Page-header .Page-header--shade .cc-menu > .cc-menu--nav > .cc-menu--item > .cc-menu--item__link{
font-size: 16px;
}
.Page-header .Page-header--left__fixed .cc-menu .cc-menu--nav .cc-menu--nav > .cc-menu--item > .cc-menu--item__link,
.Page-header .Page-header--right__fixed .cc-menu .cc-menu--nav .cc-menu--nav > .cc-menu--item > .cc-menu--item__link,
.Page-header .Page-header--shade .cc-menu .cc-menu--nav .cc-menu--nav > .cc-menu--item > .cc-menu--item__link,
.Page-header .Page-header--shade .cc-menu .cc-menu--nav .cc-menu--nav > .cc-menu--item > .cc-menu--item__link{
font-size: 16px;
}
.Page-header .Page-header--left-drawer+ .Page-header--shade,
.Page-header .Page-header--right-drawer+ .Page-header--shade{
background-color:#fff !important;
}
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav > .cc-menu--item > .cc-menu--item__link{
justify-content: center;
}
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav .cc-menu--nav .cc-menu--item > .cc-menu--item__link{
justify-content: center;
text-align: center;
}
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav > .cc-menu--item{
background-color: #fff;
}
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav > .cc-menu--item:hover,
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav > .cc-menu--item.block,
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav > .cc-menu--item.current{
background-color: #fff;
}
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav > .cc-menu--item > .cc-menu--item__link{
color: #3c3c3c;
}
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav > .cc-menu--item:hover > .cc-menu--item__link,
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav > .cc-menu--item.block > .cc-menu--item__link,
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav > .cc-menu--item.current > .cc-menu--item__link{
color: var(--theme-color);
}
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav .cc-menu--nav > .cc-menu--item{
background-color: rgba(248, 248, 248, 1);
}
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav .cc-menu--nav > .cc-menu--item:hover,
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav .cc-menu--nav > .cc-menu--item.block,
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav .cc-menu--nav > .cc-menu--item.current{
background-color: rgba(248, 248, 248, 1);
}
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav .cc-menu--nav .cc-menu--item > .cc-menu--item__link{
color: #333333;
}
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav .cc-menu--nav .cc-menu--item:hover > .cc-menu--item__link,
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav .cc-menu--nav .cc-menu--item.block > .cc-menu--item__link,
.Page-header .Page-header--shade .Page-header--shade__menu .cc-menu .cc-menu--nav .cc-menu--nav .cc-menu--item.current > .cc-menu--item__link{
color: #D6000F;
}
/* 小於版心時 */
@media only screen and (max-width: 1600px) {
.container, .cc-row--width__default {
max-width: 98%;
}
.container .container, .cc-row .cc-row--width__default {
max-width: 100%;
}
.layout-boxed .Page {
max-width: calc(100% - 60px);
}
}/* 自定義分辨率的導航欄 */
@media only screen and (max-width: 1180px) {
.Page-header .Page-header--topbar,
.Page-header .Page-header--main,
.Page-header .Page-header--topbar__placeholder,
.Page-header .Page-header--main__placeholder,
.Page-header--logo .all-logo {
display: none;
}
.Page-header--mobiles {
display: block;
}
.Page-header-fixed-left>.Page-header{
padding: unset;
float: none;
position: unset;
height: auto;
width: auto;
}
.Page-header--mobiles .Page-header--left-drawer~ .Page-header--shade{
width: 80%;
position: fixed;
left: -80%;
height: 100vh;
display: initial;
visibility: hidden;
z-index: 99;
}
.Page-header--mobiles .Page-header--right-drawer~ .Page-header--shade{
width: 80%;
position: fixed;
right: -80%;
height: 100vh;
display: initial;
visibility: hidden;
z-index: 99;
}
.Page-header--mobiles .Page-header--left-drawer~ .Page-header--shade .Page-header--shade__menu{
width: 100%;
position: static;
}
.Page-header--mobiles .Page-header--right-drawer~ .Page-header--shade .Page-header--shade__menu{
width: 100%;
position: static;
}
.Page-header-fixed-left>.Page-body{
float: none;
padding-left: unset;
height:auto
}
.Page-header-fixed-right>.Page-header{
padding: unset;
float: none;
position: unset;
height: auto;
width: auto;
}
.Page-header-fixed-right>.Page-body{
float: none;
padding-left: unset;
height:auto
}
.Page-header--logo .mobiles-logo {
display: block;
}
}@media only screen and (min-width: 1181px ){
.Page-header--mobiles {
display: none;
} }
@media only screen and (max-width: 1181px ){
.Page-header--mobiles .Page-header--left-drawer,
.Page-header--mobiles .Page-header--right-drawer{
flex-direction: row-reverse;
}
}
@media only screen and (max-width:1180px){
} @media only screen and (max-width: 1180px) {
.cc-textblock table,
.posts .richtext table,
.product .richtext table {
margin: 5px 0 20px 0;
display: block;
width: 100%;
overflow-x: auto;
overflow-y: auto;
min-height:100px;
}
.cc-textblock table tbody,
.posts .richtext table tbody,
.product .richtext table tbody {
display: inline-table;
width: 100%;
height: inherit;
border-width:inherit;
}
.cc-textblock table td,
.posts .richtext table td,
.product .richtext table td {
white-space:nowrap
}
}
@media only screen and (max-width: 1180px) {
.Page-header .Page-header--mobiles{
background-color: #fff;
}
}
.font-c88b1c6326635f8b81b5184aa2a9e161{font-size:12px !important;}
@media only screen and (max-width: 767px) {.font-c88b1c6326635f8b81b5184aa2a9e161{font-size:26px !important;}
}@media only screen and (min-width: 768px) {.font-c88b1c6326635f8b81b5184aa2a9e161{font-size:36px !important;}
}@media only screen and (min-width: 1600px) {.font-c88b1c6326635f8b81b5184aa2a9e161{font-size:42px !important;}
}.font-b1648d934b7ccee7f6ddc4468ee07f0b{font-size:12px !important;}
@media only screen and (max-width: 767px) {.font-b1648d934b7ccee7f6ddc4468ee07f0b{font-size:20px !important;}
}@media only screen and (min-width: 768px) {.font-b1648d934b7ccee7f6ddc4468ee07f0b{font-size:26px !important;}
}@media only screen and (min-width: 1600px) {.font-b1648d934b7ccee7f6ddc4468ee07f0b{font-size:30px !important;}
}.font-b098bb015b8fd87694d93e30baca01fb{font-size:12px !important;}
@media only screen and (max-width: 767px) {.font-b098bb015b8fd87694d93e30baca01fb{font-size:16px !important;}
}@media only screen and (min-width: 768px) {.font-b098bb015b8fd87694d93e30baca01fb{font-size:17px !important;}
}@media only screen and (min-width: 1600px) {.font-b098bb015b8fd87694d93e30baca01fb{font-size:18px !important;}
}.font-7c91c5506d8809b25db92db9b576d1d5{font-size:12px !important;}
@media only screen and (max-width: 767px) {.font-7c91c5506d8809b25db92db9b576d1d5{font-size:16px !important;}
}@media only screen and (min-width: 768px) {.font-7c91c5506d8809b25db92db9b576d1d5{font-size:21px !important;}
}@media only screen and (min-width: 1600px) {.font-7c91c5506d8809b25db92db9b576d1d5{font-size:24px !important;}
}.font-4670fbde1f9ee6a99f8d2b9a1aef04ad{font-size:12px !important;}
@media only screen and (max-width: 767px) {.font-4670fbde1f9ee6a99f8d2b9a1aef04ad{font-size:18px !important;}
}@media only screen and (min-width: 768px) {.font-4670fbde1f9ee6a99f8d2b9a1aef04ad{font-size:19px !important;}
}@media only screen and (min-width: 1600px) {.font-4670fbde1f9ee6a99f8d2b9a1aef04ad{font-size:20px !important;}
}.font-322202e5067a76a715adb40808ecd279{font-size:12px !important;}
@media only screen and (max-width: 767px) {.font-322202e5067a76a715adb40808ecd279{font-size:15px !important;}
}@media only screen and (min-width: 768px) {.font-322202e5067a76a715adb40808ecd279{font-size:16px !important;}
}@media only screen and (min-width: 1600px) {.font-322202e5067a76a715adb40808ecd279{font-size:16px !important;}
}.font-b390ce70fa3058e6cecdf316cdeedc1d{font-size:12px !important;}
@media only screen and (max-width: 767px) {.font-b390ce70fa3058e6cecdf316cdeedc1d{font-size:14px !important;}
}@media only screen and (min-width: 768px) {.font-b390ce70fa3058e6cecdf316cdeedc1d{font-size:15px !important;}
}.font-b4ab93c8f865e72f6fcc59f96315a1b8{font-size:12px !important;}
@media only screen and (max-width: 767px) {.font-b4ab93c8f865e72f6fcc59f96315a1b8{font-size:26px !important;}
}@media only screen and (min-width: 768px) {.font-b4ab93c8f865e72f6fcc59f96315a1b8{font-size:32px !important;}
}@media only screen and (min-width: 1600px) {.font-b4ab93c8f865e72f6fcc59f96315a1b8{font-size:36px !important;}
}.font-f862f05f160e2ebbd64ecde7cc66ebe7{font-size:12px !important;}
@media only screen and (max-width: 767px) {.font-f862f05f160e2ebbd64ecde7cc66ebe7{font-size:60px !important;}
}@media only screen and (min-width: 768px) {.font-f862f05f160e2ebbd64ecde7cc66ebe7{font-size:90px !important;}
}@media only screen and (min-width: 1600px) {.font-f862f05f160e2ebbd64ecde7cc66ebe7{font-size:100px !important;}
}.font-fe64f49047ec18eafb01d3869791ba8f{font-size:12px !important;color:#D6000F !important;font-weight:bold !important;}
@media only screen and (max-width: 767px) {.font-fe64f49047ec18eafb01d3869791ba8f{font-size:16px !important;font-weight:bold !important;}
}@media only screen and (min-width: 768px) {.font-fe64f49047ec18eafb01d3869791ba8f{font-size:18px !important;}
}@media only screen and (min-width: 1600px) {.font-fe64f49047ec18eafb01d3869791ba8f{font-size:20px !important;}
}