@charset "utf-8"; .clear{clear:both;} input,textarea{outline:none} /* load db RWDmenu_plus02 */ /*END*/ /* load file model/lib/RWDmenu_plus02/model.css */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; } body { line-height: 1; } .RWDmenu_plus02 ol, .RWDmenu_plus02 ul { list-style: none; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } .RWDmenu_plus02 table { border-collapse: collapse; border-spacing: 0; } /* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { box-sizing: border-box; } html { font-size: 100%; } body { font-size: 16px; font-family: sans-serif; color: #2e3233; background-color: #ffffff; font-family: 微軟正黑體,Microsoft JhengHei,MingLiU,arial,verdana,helvetica,tahoma,Sans-serif; } @media only screen and (max-width: 1169px) { body.nav-on-left.overflow-hidden { overflow: hidden; } } .RWDmenu_plus02 a { color: #69aa6f; text-decoration: none; } .RWDmenu_plus02 img { /* make images responsive */ max-width: 100%; } .RWDmenu_plus02 input { font-family: sans-serif; font-size: 1.6rem; } .RWDmenu_plus02 input[type="search"]::-ms-clear { /* removes close icon - IE */ display: none; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } header{position:relative!important;border-bottom: none !important} /* -------------------------------- Main components -------------------------------- */ .cd-main-content, .cd-main-header { /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); will-change: transform; } .cd-main-content, .cd-main-header { position: relative; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } @media only screen and (max-width: 1169px) { .cd-main-content.nav-is-visible, .cd-main-header.nav-is-visible { -webkit-transform: translateX(-260px); -moz-transform: translateX(-260px); -ms-transform: translateX(-260px); -o-transform: translateX(-260px); transform: translateX(-260px); } .nav-on-left .cd-main-content.nav-is-visible, .nav-on-left .cd-main-header.nav-is-visible { -webkit-transform: translateX(260px); -moz-transform: translateX(260px); -ms-transform: translateX(260px); -o-transform: translateX(260px); transform: translateX(260px); } } .cd-main-content { background: #e2e3df; z-index: 10; } .cd-main-header { height: 50px; background: #ffffff; z-index: 11; left: 0; } .nav-is-fixed .cd-main-header { /* add .nav-is-fixed class to body if you want a fixed navigation on > 1170px */ position: fixed; top: 0; left: 0; width: 100%; } @media only screen and (min-width: 1170px) { .cd-main-header { height: 80px; } .cd-main-header::after { clear: both; content: ""; display: table; } } .cd-logo { position: absolute; top: 12px; left: 5%; } .cd-logo img { display: block; } @media only screen and (max-width: 1169px) { .nav-on-left .cd-logo { left: auto; right: 5%; } } @media only screen and (min-width: 1170px) { .cd-logo { top: 26px; left: 4em; } } .cd-header-buttons { position: absolute; display: inline-block; top: 3px; right: 5%; padding-left:0; } .cd-header-buttons li { display: inline-block; } @media only screen and (max-width: 1169px) { .nav-on-left .cd-header-buttons { right: auto; left: 5%; } .nav-on-left .cd-header-buttons li { float: right; } } @media only screen and (min-width: 1170px) { .cd-header-buttons { top: 18px; right: 4em; } } .cd-search-trigger, .cd-nav-trigger { position: relative; display: block; width: 44px; height: 44px; overflow: hidden; white-space: nowrap; /* hide text */ color: transparent; z-index: 3; } .cd-search-trigger::before, .cd-search-trigger::after { /* search icon */ content: ''; position: absolute; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-search-trigger::before { /* lens */ top: 11px; left: 11px; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #2e3233; } .cd-search-trigger::after { /* handle */ height: 3px; width: 8px; background: #2e3233; bottom: 14px; right: 11px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cd-search-trigger span { /* container for the X icon */ position: absolute; height: 100%; width: 100%; top: 0; left: 0; } .cd-search-trigger span::before, .cd-search-trigger span::after { /* close icon */ content: ''; position: absolute; display: inline-block; height: 3px; width: 22px; top: 50%; margin-top: -2px; left: 50%; margin-left: -11px; background: #2e3233; opacity: 0; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; } .cd-search-trigger span::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cd-search-trigger span::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .cd-search-trigger.search-is-visible::before, .cd-search-trigger.search-is-visible::after { /* hide search icon */ opacity: 0; } .cd-search-trigger.search-is-visible span::before, .cd-search-trigger.search-is-visible span::after { /* show close icon */ opacity: 1; } .cd-search-trigger.search-is-visible span::before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .cd-search-trigger.search-is-visible span::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cd-nav-trigger span, .cd-nav-trigger span::before, .cd-nav-trigger span::after { /* hamburger icon in CSS */ position: absolute; display: inline-block; height: 3px; width: 24px; background: #2e3233; } .cd-nav-trigger span { /* line in the center */ position: absolute; top: 50%; right: 10px; margin-top: -2px; -webkit-transition: background 0.3s 0.3s; -moz-transition: background 0.3s 0.3s; transition: background 0.3s 0.3s; } .cd-nav-trigger span::before, .cd-nav-trigger span::after { /* other 2 lines */ content: ''; right: 0; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform 0.3s 0.3s; -moz-transition: -moz-transform 0.3s 0.3s; transition: transform 0.3s 0.3s; } .cd-nav-trigger span::before { /* menu icon top line */ top: -6px; } .cd-nav-trigger span::after { /* menu icon bottom line */ top: 6px; } .cd-nav-trigger.nav-is-visible span { /* hide line in the center */ background: rgba(46, 50, 51, 0); } .cd-nav-trigger.nav-is-visible span::before, .cd-nav-trigger.nav-is-visible span::after { /* keep visible other 2 lines */ background: #2e3233; } .cd-nav-trigger.nav-is-visible span::before { -webkit-transform: translateX(4px) translateY(-3px) rotate(45deg); -moz-transform: translateX(4px) translateY(-3px) rotate(45deg); -ms-transform: translateX(4px) translateY(-3px) rotate(45deg); -o-transform: translateX(4px) translateY(-3px) rotate(45deg); transform: translateX(4px) translateY(-3px) rotate(45deg); } .cd-nav-trigger.nav-is-visible span::after { -webkit-transform: translateX(4px) translateY(2px) rotate(-45deg); -moz-transform: translateX(4px) translateY(2px) rotate(-45deg); -ms-transform: translateX(4px) translateY(2px) rotate(-45deg); -o-transform: translateX(4px) translateY(2px) rotate(-45deg); transform: translateX(4px) translateY(2px) rotate(-45deg); } @media only screen and (min-width: 1170px) { .cd-nav-trigger { display: none; } } .cd-primary-nav, .cd-primary-nav ul { position: fixed; top: 0; right: 0; /*height: 100%;*/ width: 260px; background: #2e3233; overflow: auto; -webkit-overflow-scrolling: touch; z-index: 9; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; } .cd-primary-nav a, .cd-primary-nav ul a { display: block; /* height: 50px; line-height: 50px;*/ padding: 0 20px; color: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid #3a3f40; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); will-change: transform, opacity; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } .cd-primary-nav .cd-secondary-nav{ display: none; } .cd-primary-nav .cd-secondary-nav ul li.active > a{ background-color: #9c9c9c; color: #fff; } .cd-primary-nav.nav-is-visible .cd-secondary-nav a{ height: 60px; line-height: 60px; } .cd-primary-nav.is-hidden, .cd-primary-nav ul.is-hidden { /* secondary navigations hidden by default */ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .cd-primary-nav.moves-out > li > a, .cd-primary-nav ul.moves-out > li > a { /* push the navigation items to the left - and lower down opacity - when secondary nav slides in */ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } @media only screen and (max-width: 1169px) { .cd-primary-nav, .cd-primary-nav ul { height: 100%; } .nav-on-left .cd-primary-nav, .nav-on-left .cd-primary-nav ul { right: auto; left: 0; } } .cd-primary-nav .see-all a { /* different style for the See all button on mobile and tablet */ color: #69aa6f; } .cd-primary-nav .cd-nav-gallery .cd-nav-item, .cd-primary-nav .cd-nav-icons .cd-nav-item { /* items with picture (or icon) and title */ height: 80px; line-height: 80px; } .cd-primary-nav .cd-nav-gallery .cd-nav-item h3, .cd-primary-nav .cd-nav-icons .cd-nav-item h3 { overflow: hidden; text-overflow: ellipsis; } .cd-primary-nav .cd-nav-gallery .cd-nav-item { padding-left: 90px; } .cd-primary-nav .cd-nav-gallery .cd-nav-item img { position: absolute; display: block; height: 40px; width: auto; left: 20px; top: 50%; margin-top: -20px; } .cd-primary-nav .cd-nav-icons .cd-nav-item { padding-left: 75px; } .cd-primary-nav .cd-nav-icons .cd-nav-item p { color: #2e3233; font-size: 1.3rem; /* hide description on small devices */ display: none; } .cd-primary-nav .cd-nav-icons .cd-nav-item::before { /* item icon */ content: ''; display: block; position: absolute; left: 20px; top: 50%; margin-top: -20px; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center center; background-size: 40px 40px; } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-1::before { background-image: url("/Other/www/public/template/RWDPAGE_BASE_PAT01/img/line-icon-1.svg"); } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-2::before { background-image: url("/Other/www/public/template/RWDPAGE_BASE_PAT01/img/line-icon-2.svg"); } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-3::before { background-image: url("/Other/www/public/template/RWDPAGE_BASE_PAT01/img/line-icon-3.svg"); } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-4::before { background-image: url("/Other/www/public/template/RWDPAGE_BASE_PAT01/img/line-icon-4.svg"); } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-5::before { background-image: url("/Other/www/public/template/RWDPAGE_BASE_PAT01/img/line-icon-5.svg"); } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-6::before { background-image: url("/Other/www/public/template/RWDPAGE_BASE_PAT01/img/line-icon-6.svg"); } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-7::before { background-image: url("/Other/www/public/template/RWDPAGE_BASE_PAT01/img/line-icon-7.svg"); } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-8::before { background-image: url("/Other/www/public/template/RWDPAGE_BASE_PAT01/img/line-icon-8.svg"); } @media only screen and (max-width: 1169px) { .cd-primary-nav { /* by default .cd-primary-nav is hidden - trick for iOS devices where you can see the navigation if you pull down */ visibility: hidden; -webkit-transition: visibility 0s 0.3s; -moz-transition: visibility 0s 0.3s; transition: visibility 0s 0.3s; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); transition: all 0.5s; } .cd-primary-nav.nav-is-visible { visibility: visible; -webkit-transition: visibility 0s 0s; -moz-transition: visibility 0s 0s; transition: visibility 0s 0s; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @media only screen and (min-width: 1170px) { .cd-primary-nav { position: static; padding: 0 150px 0 0; margin-bottom: 0; height: auto; width: auto; float: right; overflow: visible; background: transparent; } .cd-primary-nav::after { clear: both; content: ""; display: table; } .cd-primary-nav.moves-out > li > a { /* reset mobile style */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .cd-primary-nav ul { position: static; /* height: auto;*/ width: auto; background: transparent; overflow: visible; z-index: 3; } .cd-primary-nav ul.is-hidden { /* reset mobile style */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .cd-primary-nav ul.moves-out > li > a { /* reset mobile style */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .cd-primary-nav > li { float: left; margin-left: 3em; } .cd-primary-nav > li > a { /* main navigation buttons style */ position: relative; display: inline-block; height: 80px; line-height: 80px; padding: 0 10px; color: #2e3233; overflow: visible; border-bottom: none; -webkit-transition: color 0.3s, box-shadow 0.3s; -moz-transition: color 0.3s, box-shadow 0.3s; transition: color 0.3s, box-shadow 0.3s; padding-left: 0; } .cd-primary-nav > li > a:hover { color: #9c9c9c; } .cd-primary-nav > li > a.selected{ color: #9c9c9c; box-shadow: inset 0 -2px 0 #69aa6f; } .cd-primary-nav .go-back, .cd-primary-nav .see-all { display: none; } .cd-primary-nav .cd-secondary-nav, .cd-primary-nav .cd-nav-gallery, .cd-primary-nav .cd-nav-icons { /* dropdown menu style */ position: absolute; top: 80px; width: 100vw; background: #ffffff; padding: 48px 64px 130px; box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); /* -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s;*/ } .cd-primary-nav .cd-secondary-nav::after, .cd-primary-nav .cd-nav-gallery::after, .cd-primary-nav .cd-nav-icons::after { clear: both; content: ""; display: table; } /* .cd-primary-nav .cd-secondary-nav.is-hidden, .cd-primary-nav .cd-nav-gallery.is-hidden, .cd-primary-nav .cd-nav-icons.is-hidden { opacity: 0; visibility: hidden; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; }*/ .cd-primary-nav .cd-secondary-nav > .see-all, .cd-primary-nav .cd-nav-gallery > .see-all, .cd-primary-nav .cd-nav-icons > .see-all { /* this is the BIG See all button at the bottom of the dropdown menu */ display: block; position: absolute; left: 0; bottom: 0; height: 80px; width: 100%; overflow: hidden; /* reset some inherited style */ margin: 0; padding: 0; } .cd-primary-nav .cd-secondary-nav > .see-all a, .cd-primary-nav .cd-nav-gallery > .see-all a, .cd-primary-nav .cd-nav-icons > .see-all a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; font-size: 2.2rem; font-weight: bold; text-align: center; line-height: 80px; border-top: 1px solid #e2e3df; /* reset some inherited style */ border-bottom: none; margin: 0; padding: 0; /* -webkit-transition: color 0.2s, background 0.2s, border 0.2s; -moz-transition: color 0.2s, background 0.2s, border 0.2s; transition: color 0.2s, background 0.2s, border 0.2s;*/ } .cd-primary-nav .cd-secondary-nav > .see-all a:hover, .cd-primary-nav .cd-nav-gallery > .see-all a:hover, .cd-primary-nav .cd-nav-icons > .see-all a:hover { background: #2e3233; border-color: #2e3233; color: #ffffff; } .cd-primary-nav .cd-secondary-nav > li { /* change the height according to your needs - you can even set height: auto */ /*height: auto;*/ /* here you set the number of columns - use width percentage */ width: 23%; float:none; margin-right: 2.66%; /*border-right: 1px solid #e2e3df;*/ overflow: hidden; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .cd-primary-nav .cd-secondary-nav > li:nth-child(4n+2) { /* +2 because we have 2 list items with display:none */ margin-right: 0; border-right: none; } .cd-primary-nav .cd-secondary-nav > li > a { /* secondary nav title */ color: #69aa6f; font-weight: bold; font-size: 1.6rem; margin-bottom: .6em; } .cd-primary-nav .cd-secondary-nav a { /*height: 30px;*/ /*line-height: 30px;*/ padding: 0 18% 0 0; color: #2e3233; border-bottom: none; font-size: 1.4rem; } .cd-primary-nav .cd-secondary-nav a:hover { color: #9c9c9c; } .cd-primary-nav .cd-secondary-nav ul { /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .cd-primary-nav .cd-secondary-nav ul ul { /* tertiary navigation */ position: absolute; top: 0; left: 100%; /*height: 100%;*/ width: 100%; /*overflow: auto;*/ background: #fff; box-shadow: 0px 2px 10px rgba(43, 43, 43, 0.36); display: none; } /* .cd-primary-nav .cd-secondary-nav ul ul.is-hidden { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); }*/ .cd-primary-nav .cd-secondary-nav ul ul .go-back { display: none; } .cd-primary-nav .cd-secondary-nav ul ul .go-back a { color: transparent; } .cd-primary-nav .cd-secondary-nav ul ul .see-all { display: block; } .cd-primary-nav .cd-secondary-nav .moves-out > li > a { /* push the navigation items to the left - and lower down opacity - when tertiary nav slides in */ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .cd-primary-nav .cd-nav-gallery li { /* set here number of columns - use width percentage */ width: 22%; float: left; margin: 0 4% 40px 0; } .cd-primary-nav .cd-nav-gallery li:nth-child(4n+2) { /* +2 because we have two additional list items with display:none */ margin-right: 0; } .cd-primary-nav .cd-nav-gallery .cd-nav-item { border-bottom: none; padding: 0; height: auto; line-height: 1.2; } .cd-primary-nav .cd-nav-gallery .cd-nav-item img { position: static; margin-top: 0; height: auto; width: 100%; margin-bottom: .6em; } .cd-primary-nav .cd-nav-gallery .cd-nav-item h3 { color: #69aa6f; font-weight: bold; padding: 0 .4em; } .cd-primary-nav .cd-nav-icons li { /* set here number of columns - use width percentage */ width: 32%; float: left; margin: 0 2% 20px 0; } .cd-primary-nav .cd-nav-icons li:nth-child(3n+2) { /* +2 because we have two additional list items with display:none */ margin-right: 0; } .cd-primary-nav .cd-nav-icons .cd-nav-item { border-bottom: none; height: 80px; line-height: 1.2; padding: 24px 0 0 85px; position: relative; } .cd-primary-nav .cd-nav-icons .cd-nav-item:hover { background: #f6f6f5; } .cd-primary-nav .cd-nav-icons .cd-nav-item h3 { color: #69aa6f; font-weight: bold; } .cd-primary-nav .cd-nav-icons .cd-nav-item p { display: block; } .cd-primary-nav .cd-nav-icons .cd-nav-item::before { left: 25px; } } .cd-primary-nav .has-children{ position: relative; } .has-children > a, .go-back a { position: relative; } .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after { /* arrow icon in CSS - for element with nested unordered lists */ content: ''; position: absolute; top: 50%; margin-top: -1px; display: inline-block; height: 2px; width: 7px; background: #464c4e; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .has-children > a::before, .go-back a::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .has-children > a::after, .go-back a::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } @media only screen and (min-width: 1170px) { .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after { background: #c9cbc4; } .has-children > a:hover::before, .has-children > a:hover::after, .go-back a:hover::before, .go-back a:hover::after { background: #69aa6f; } } .has-children > a { padding-right: 40px; } .has-children > a::before, .has-children > a::after { /* arrow goes on the right side - children navigation */ right: 20px; -webkit-transform-origin: 7px 50%; -moz-transform-origin: 7px 50%; -ms-transform-origin: 7px 50%; -o-transform-origin: 7px 50%; transform-origin:7px 50%; } .cd-primary-nav .go-back a { padding-left: 40px; } .cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after { /* arrow goes on the left side - go back button */ left: 20px; -webkit-transform-origin: 1px 50%; -moz-transform-origin: 1px 50%; -ms-transform-origin: 1px 50%; -o-transform-origin: 1px 50%; transform-origin: 1px 50%; } @media only screen and (min-width: 1170px) { .has-children > a::before, .has-children > a::after { right: 8%; } .cd-primary-nav > .has-children > a { /* main navigation arrows on larger devices */ padding-right: 30px !important; } .cd-primary-nav > .has-children > a::before, .cd-primary-nav > .has-children > a::after { width: 7px; margin-top: 1px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; background: #c9cbc4; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: width 0.3s, -webkit-transform 0.3s; -moz-transition: width 0.3s, -moz-transform 0.3s; transition: width 0.3s, transform 0.3s; } .cd-primary-nav > .has-children > a::before { right: 10px; } .cd-primary-nav > .has-children > a::after { right: 5px; } .cd-primary-nav > .has-children > a.selected::before, .cd-primary-nav > .has-children > a.selected::after { width: 12px; background-color: #fff; } .cd-primary-nav > .has-children > a.selected::before { -webkit-transform: translateX(5px) rotate(-45deg); -moz-transform: translateX(5px) rotate(-45deg); -ms-transform: translateX(5px) rotate(-45deg); -o-transform: translateX(5px) rotate(-45deg); transform: translateX(5px) rotate(-45deg); } .cd-primary-nav > .has-children > a.selected::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cd-secondary-nav > .has-children > a::before, .cd-secondary-nav > .has-children > a::after { /* remove arrows on secondary nav titles */ display: none; } .cd-primary-nav .go-back a { padding-left: 20px; } .cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after { left: 1px; } } .cd-search { position: absolute; height: 50px; width: 100%; top: 50px; left: 0; z-index: 3; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-search form { height: 100%; width: 100%; } .cd-search input { border-radius: 0; border: none; background: #ffffff; height: 100%; width: 100%; padding: 0 5%; box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05); -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .cd-search input::-webkit-input-placeholder { color: #c9cbc4; } .cd-search input::-moz-placeholder { color: #c9cbc4; } .cd-search input:-moz-placeholder { color: #c9cbc4; } .cd-search input:-ms-input-placeholder { color: #c9cbc4; } .cd-search input:focus { outline: none; } .cd-search.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .nav-is-fixed .cd-search { position: fixed; } @media only screen and (min-width: 1170px) { .cd-search { height: 120px; top: 80px; } .cd-search input { padding: 0 2em; font-size: 3.2rem; font-weight: 300; } } .cd-overlay { /* shadow layer visible when navigation is active */ position: fixed; z-index: 2; height: 100%; width: 100%; top: 0; left: 0; cursor: pointer; background-color: rgba(105, 170, 111, 0.8); visibility: hidden; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s; transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s; } .cd-overlay.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s; transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s; } @media only screen and (max-width: 1169px) { .cd-overlay.is-visible { -webkit-transform: translateX(-260px); -moz-transform: translateX(-260px); -ms-transform: translateX(-260px); -o-transform: translateX(-260px); transform: translateX(-260px); } .nav-on-left .cd-overlay.is-visible { -webkit-transform: translateX(260px); -moz-transform: translateX(260px); -ms-transform: translateX(260px); -o-transform: translateX(260px); transform: translateX(260px); } .cd-overlay.is-visible.search-is-visible, .nav-on-left .cd-overlay.is-visible.search-is-visible { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } /* -------------------------------- support for no js -------------------------------- */ .no-js .cd-primary-nav { position: relative; height: auto; width: 100%; overflow: visible; visibility: visible; z-index: 2; } .no-js .cd-search { position: relative; top: 0; opacity: 1; visibility: visible; } @media only screen and (min-width: 1170px) { .no-js .cd-primary-nav { position: absolute; z-index: 3; display: inline-block; width: auto; top: 0; right: 150px; padding: 0; } .no-js .nav-is-fixed .cd-primary-nav { position: fixed; } } /* RWDmenu_plus02 css*/ body.is-visible{ overflow: hidden; } input:focus{ outline: none; } @media (min-width: 1200px){ .RWDmenu_plus02 .inside{ font-family: 微軟正黑體,Microsoft JhengHei,MingLiU,arial,verdana,helvetica,tahoma,Sans-serif; position: fixed; width: 100%; top: 0; z-index: 99999; background: #fff; } .RWDmenu_plus02 .inside.is-up{ box-shadow:1px 1px 15px rgba(43, 43, 43, 0.12); } } .RWDmenu_plus02 .inside{ transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .RWDmenu_plus02 .inside.is-push{ transform:translateX(-360px); -o-transform:translateX(-360px); -webkit-transform:translateX(-360px); -moz-transform:translateX(-360px); } @media (max-width: 1199px){ .RWDmenu_plus02 .inside{ position:static; width: auto; top: auto; background: transparent; } } .RWDmenu_plus02 a{text-decoration: none;color:#fff;} @media (max-width: 600px){ .RWDmenu_plus02 a{ /*margin-top: 1px;*/ } } .RWDmenu_plus02 .container{ width: 1170px; margin:0 auto; position: relative; } @media (max-width: 1199px){ .RWDmenu_plus02 .container{ width: 100%; padding: 0; } } .clearfix{ display: block; clear: both; } .cd-main-content.is-push{ transform: translateX(-300px); -o-transform: translateX(-300px); -webkit-transform: translateX(-300px); -moz-transform: translateX(-300px); } @media (max-width: 1199px){ .cd-main-content.nav-is-visible, .cd-main-header.nav-is-visible{ -webkit-transform: translateX(-360px); -moz-transform: translateX(-360px); -ms-transform: translateX(-360px); -o-transform: translateX(-360px); transform: translateX(-360px); } } @media (max-width: 600px){ .cd-main-content.nav-is-visible, .cd-main-header.nav-is-visible{ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } } .cd-logo { width: 160px; float:left; position: relative; top:auto; left:auto; margin-top: 20px; margin-left:10px; } .cd-logo img{ width: 100%; } @media (max-width: 1199px){ .cd-logo { width: 130px; margin-top: 8px; } } @media (min-width: 1200px){ .cd-primary-nav{position: relative;} } .cd-primary-nav > .has-children > a::before, .cd-primary-nav > .has-children > a::after{ } @media (max-width: 1199px){ .cd-primary-nav > .has-children > a::before, .cd-primary-nav > .has-children > a::after{ display: block; } } .cd-primary-nav > li{ margin-left:0px; position: relative; letter-spacing: 1px; list-style: none; } .cd-primary-nav > li > a{ padding: 0 20px; line-height: 83px; letter-spacing: 1px; font-size: 14px; } .cd-primary-nav > li > a:hover{ color:#9c9c9c; transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; } @media (min-width: 1200px){ .cd-primary-nav > li > a:hover:before,.cd-primary-nav > li > a:hover:after{ background-color: #bfbfbf; } } @media (max-width: 1199px){ .cd-primary-nav > li > a{ font-size: 16px; } .cd-primary-nav > li > a:hover{ background-color: transparent; } } @media (min-width: 1200px){ .cd-primary-nav > li:after{ position: absolute; display: block; bottom: 15px; left: 33%; right: 33%; height: 1px; content: ""; background: transparent; z-index: -1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .cd-primary-nav > li:hover:after{ left: 0; right: 0; background: #9c9c9c; z-index: 9999; } .cd-primary-nav > li > a.selected{ color: #7d7d7d; box-shadow: inset 0 -2px 0 transparent; background-color: #9c9c9c; color:#fff; } } @media (max-width: 1199px){ .cd-primary-nav > li{ margin: 0 30px; } .cd-primary-nav > li > a{ line-height: 60px; padding: 0; height: 60px; padding-left: 0; } } @media only screen and (min-width: 1170px){ .cd-primary-nav > .has-children > a{ padding-right:20px !important; } nav.cd-nav{ float: right; margin-left: 70px; font-size: 14px; } .cd-primary-nav{ float:none; padding: 0; } .cd-primary-nav .cd-secondary-nav{ width: 200px; padding: 0; left: 0; } .cd-primary-nav .cd-secondary-nav > li{ width: 100%; margin-right: 0; border-bottom: 1px solid #efefef; } .cd-primary-nav .cd-secondary-nav > li:last-child{ border:none; } .cd-primary-nav .cd-secondary-nav > li > a{ font-size: 14px; padding:8px 15px; margin-bottom: 0; /* line-height: normal; height: auto;*/ color:#2b2b2b; font-weight: normal; transition: all ease 0.3s; -o-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; } .cd-primary-nav .cd-secondary-nav > li > a:hover, .cd-primary-nav .cd-secondary-nav > li.active > a{ background-color: #797979; color:#fff; } .cd-primary-nav .cd-secondary-nav a{ padding: 8px 15px; /* height: auto;*/ font-size: 14px; /* line-height: normal;*/ color:#737373; transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; padding-left: 30px; } .cd-primary-nav .cd-secondary-nav a:hover{ color:#9c9c9c; } } .cd-search button{ position: absolute; right: 10px; top: 30px; font-size: 18px; letter-spacing: 2px; border:none; box-shadow: none; background-image: none; background-color: transparent; color:#333; transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .cd-search button:hover{ color:#b3a479; } @media (max-width: 1199px){ .cd-search button{ top:17px; font-size: 16px; } } @media (min-width: 1200px){ .cd-search{ height: 80px; top:130px; } .cd-search input{ font-size: 20px; letter-spacing: 1px; font-family: 微軟正黑體, "Microsoft JhengHei", MingLiU, arial, verdana, helvetica, tahoma, sans-serif; } } @media (max-width: 1199px){ .cd-search input{ font-size: 16px; letter-spacing: 1px; font-family: 微軟正黑體, "Microsoft JhengHei", MingLiU, arial, verdana, helvetica, tahoma, sans-serif; } } @media (max-width: 1199px){ .cd-search{ position: fixed; top:50px; } } .cd-header-buttons{ position: relative; display: block; float: right; right: 0; font-size: 13px; } .RWDmenu_plus02 .sub-nav{ height:50px; transition:all 0.5s; -o-transition:all 0.5s; -webkit-transition:all 0.5s; } .RWDmenu_plus02 .sub-nav.sub-up{ margin-top: -50px; } .RWDmenu_plus02 .language-block{ width: auto; height: 30px; float: right; margin-top: 15px; background-color: transparent; border-radius: 0; position: relative; padding: 7px; font-size: 13px; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; letter-spacing: 1px; text-align: right; float: right; } .RWDmenu_plus02 .language-block a{ color:#333; padding-right: 8px; transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } .RWDmenu_plus02 .language-block a:hover{ color:#b3a479; } .fa-angle-down:before{ display: none; } .RWDmenu_plus02 .language-block:after{ position: absolute; right:10px; transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .RWDmenu_plus02 #lan-02{ margin-top:12px; margin-left: 15px; } .RWDmenu_plus02 #lan-02 a{ color:#333; transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; cursor: pointer; } .RWDmenu_plus02 #lan-02 a:hover{ color:#9c9c9c; } .fa-angle-down:after{ content: "\f107"; } .RWDmenu_plus02 .editor{ float: right; margin-right: 20px; margin-top:21px; } .RWDmenu_plus02 .member-block,.RWDmenu_plus02 .cart-block{ float: right; margin-top: 13px; margin-left: 15px; display: block; letter-spacing: 1px; font-size: 13px; position: relative; } .RWDmenu_plus02 .cart-block{ font-size: 14px; } .RWDmenu_plus02 .cart-block:hover i{ color:#9c9c9c; } .RWDmenu_plus02 .member-block span,.RWDmenu_plus02 .cart-block span{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .RWDmenu_plus02 .cart-block span i{ color:#b3a479; } .RWDmenu_plus02 .cart-block i.qty{ color: #6f6f6f; font-style: normal; background: #fff; border-radius: 99em; box-shadow: 1px 1px 3px #ccc; padding: 0 7px; font-size: 12px; position: absolute; top: -9px; right: -15px; } @media (max-width: 1199px){ .RWDmenu_plus02 .cart-block i.qty{ font-size: 13px; } } .RWDmenu_plus02 .member-block:hover span,.RWDmenu_plus02 .cart-block:hover span{ color:#9c9c9c; } .RWDmenu_plus02 .member-block:after,.RWDmenu_plus02 .cart-block:after{ position: absolute; display: block; bottom: -10px; left: 33%; right: 33%; height: 1px; content: ""; background: transparent; z-index: -1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .RWDmenu_plus02 .member-block:hover:after,.RWDmenu_plus02 .cart-block:hover:after{ left: 0; right: 0; background: #9c9c9c; z-index: 9999; } @media (max-width: 1199px){ .RWDmenu_plus02 .cart-block{ margin-top: 13px; margin-right: 20px; margin-left: 12px; font-size: 14px; } } @media screen and (max-width: 600px){ .RWDmenu_plus02 .cart-block{ font-size: 18px; margin-top: 11px; } } .RWDmenu_plus02 .member-block a,.RWDmenu_plus02 .cart-block a{ color:#545454; cursor: pointer; } .RWDmenu_plus02 .member-block.logn-out{ cursor: pointer; margin-left: 5px; margin-top: 13px; } .RWDmenu_plus02 .member-block.my-account{ cursor: pointer; } .RWDmenu_plus02 .member-block.my-account{ transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; } .RWDmenu_plus02 .member-block.my-account:hover i{ color:#b3a479; } .RWDmenu_plus02 .phone-menu{ float: right; } /* Underline From Center */ .hvr-underline-from-center { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; overflow: hidden; } .hvr-underline-from-center:before { content: ""; position: absolute; z-index: -1; left: 50%; right: 50%; bottom: 0; background: #2098D1; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before { left: 0; right: 0; } .cd-search-trigger::before{ top: 11px; left: 11px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #2e3233; } .cd-search-trigger::after{ height: 2px; width: 7px; background: #2e3233; bottom: 18px; right: 17px; } .cd-nav-trigger span, .cd-nav-trigger span::before, .cd-nav-trigger span::after{ height:2px; } .cd-search-trigger span::before, .cd-search-trigger span::after{ height:2px; width: 18px; } .cd-nav-trigger.nav-is-visible span::before, .cd-nav-trigger.nav-is-visible span::after{ background: #b3a479; } .cd-overlay{ background-color:rgba(19, 19, 19, 0.87); z-index: 99; transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transform: translateX(0px); -o-transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); opacity: 0; height: 100vh; } .cd-overlay.is-push{ opacity: 1; visibility: visible; z-index: 99999; transform: translateX(-360px); -o-transform: translateX(-360px); -webkit-transform: translateX(-360px); -moz-transform: translateX(-360px); } @media (max-width: 600px){ .cd-overlay.is-push{ transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); } } @media (max-width: 1199px){ .cd-overlay{ top:0px; } .cd-overlay.is-visible{ -webkit-transform: translateX(-360px); -moz-transform: translateX(-360px); -ms-transform: translateX(-360px); -o-transform: translateX(-360px); transform: translateX(-360px); -webkit-transition: opacity 0.5s 0s, visibility 0s 0s, -webkit-transform 0.5s 0s; -moz-transition: opacity 0.5s 0s, visibility 0s 0s, -moz-transform 0.5s 0s; transition: opacity 0.5s 0s, visibility 0s 0s, transform 0.5s 0s; top:0; } } @media (max-width: 600px){ .cd-overlay.is-visible{ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); top:0; } } .cd-search{ z-index: 999; } @media (max-width: 1024px){ .cd-primary-nav, .cd-primary-nav ul{ background: #f7f7f7; width: 360px; padding-top: 30px; font-size: 14px; padding-left: 0; list-style: none; } .cd-primary-nav ul{ padding:0 30px; padding-top: 30px; } #cd-primary-nav > li > ul > li.go-back{ position: relative; top:-20px; border:none; } #cd-primary-nav > li > ul > li.go-back a{ border:none; } #cd-primary-nav > li > ul > li> ul > li.go-back{ position: relative; top:-20px; } #cd-primary-nav > li > ul > li> ul > li.go-back a{ border:none; } #cd-primary-nav > li > ul > li > ul > li> ul > li.go-back{ position: relative; top:-20px; } #cd-primary-nav > li > ul > li > ul > li> ul > li.go-back a{ border:none; } } @media (max-width: 600px){ #cd-primary-nav > li > ul > li.go-back{ position: relative; top:-60px; } #cd-primary-nav > li > ul > li> ul > li.go-back{ position: relative; /*top:-57px; */ top:-60px; } #cd-primary-nav > li > ul > li > ul > li> ul > li.go-back{ position: relative; /*top:-57px;*/ top:-60px; } #cd-primary-nav > li > ul > li:nth-child(2){ /*margin-top: -30px;*/ margin-top: -37px; } #cd-primary-nav > li> ul > li > ul > li:nth-child(2){ /*margin-top: -30px;*/ margin-top: -37px; } #cd-primary-nav > li> ul > li> ul > li> ul > li:nth-child(2){ /*margin-top: -30px;*/ margin-top: -37px; } } @media (max-width: 600px){ .cd-primary-nav, .cd-primary-nav ul{ width: 100%; } } .cd-primary-nav a, .cd-primary-nav ul a{ color: #2d2d2d; border-bottom: 1px solid #ececec; } @media (max-width: 1199px){ .cd-primary-nav a, .cd-primary-nav ul a{ padding:0; /*line-height: 60px;*/ /*height: 60px;*/ font-size: 16px; } } .RWDmenu_plus02 .cart-menu{ position: fixed; width: 360px; height: 100vh; background-color:#fbfbfb; z-index: 99999; top: 0; right: 0; transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transform:translateX(360px); -o-transform:translateX(360px); -webkit-transform:translateX(360px); -moz-transform:translateX(360px); } @media (max-width: 600px){ .RWDmenu_plus02 .cart-menu{ width: 100%; transform:translateX(100%); -o-transform:translateX(100%); -webkit-transform:translateX(100%); -moz-transform:translateX(100%); } } .RWDmenu_plus02 .cart-menu.is-visible{ transform:translateX(0); -o-transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); } .RWDmenu_plus02 .cart-menu .cart-cancel-btn{ position: absolute; top: 40px; left: 30px; cursor: pointer; transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .RWDmenu_plus02 .cart-menu .cart-cancel-btn:hover{ color:#b3a479; } .RWDmenu_plus02 .cart-menu .title{ text-align: center; width: 85%; padding: 40px 10px; border-bottom: 2px solid #797979; letter-spacing: 2px; font-size: 18px; margin:0 auto; margin-bottom: 20px; } .RWDmenu_plus02 .cart-menu .title span{ color: #fff; background: #6f6f6f; box-shadow: 1px 1px 5px #dedede; border-radius: 99em; padding: 4px 7px; padding-left: 8px; font-size: 12px; } .RWDmenu_plus02 .cart-menu ul.content li { padding:20px 30px; padding-bottom: 15px; border-bottom: 1px solid #ececec; transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .RWDmenu_plus02 .cart-menu ul.content li:last-child{ border-bottom: none; } .RWDmenu_plus02 .cart-menu ul.content li:hover{ box-shadow: 1px 1px 20px #efefef; } .RWDmenu_plus02 .cart-menu ul.content li .pic{ width: 90px; height: 90px; background-color: #ececec; float: left; opacity: 1; transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; position: relative; text-align: center } @media (max-width: 400px){ .RWDmenu_plus02 .cart-menu ul.content li .pic{ width: 70px; height: 70px; } } .RWDmenu_plus02 .cart-menu ul.content li .pic:hover{ opacity: 0.8; } .RWDmenu_plus02 .cart-menu ul.content li .pic img{ max-width: 100%; position: absolute; margin:auto; top: 0; bottom: 0; right: 0; left:0; } .RWDmenu_plus02 .cart-menu ul.content li .text-box{ width: 160px; float: left; font-size: 13px; margin-left: 25px; letter-spacing: 1px; } @media (max-width: 400px){ .RWDmenu_plus02 .cart-menu ul.content li .text-box{ width:130px; margin-left: 15px; } } .RWDmenu_plus02 .cart-menu ul.content li .text-box .name{ margin-bottom: 10px; font-size: 15px; letter-spacing: 1px; line-height: 22px; } .RWDmenu_plus02 .cart-menu ul.content li .text-box .name a{ color:#333; transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; } .RWDmenu_plus02 .cart-menu ul.content li .text-box .name a:hover{ color:#b3a479; } .RWDmenu_plus02 .cart-menu ul.content li .text-box .spec{ margin-bottom: 10px; font-size: 14px; line-height: 22px; } /* 數量 + - */ .RWDmenu_plus02 .cart-menu ul.content li .text-box .myform { text-align: center; margin-bottom: 10px; } .RWDmenu_plus02 .cart-menu ul.content li .text-box .qty { width: 40px; height: 30px; text-align: center; float: left; background-color: transparent; box-shadow: none; border: 1px solid #ccc; border-radius: 0; font-size: 14px; } .RWDmenu_plus02 .cart-menu ul.content li .text-box input.qtyplus { width:30px; height:30px; float:left; background-color: transparent; box-shadow: none; border: 1px solid #ccc; border-radius: 0; font-size: 14px; border-left: none; font-weight: 900; text-align: center; padding: 0; margin: 0; } .RWDmenu_plus02 .cart-menu ul.content li .text-box input.qtyminus { width:30px; height:30px; float: left; background-color: transparent; box-shadow: none; border: 1px solid #ccc; border-radius: 0; font-size: 14px; border-right: none; font-weight: 900; text-align: center; padding: 0; margin:0; } .RWDmenu_plus02 .cart-menu ul.content li .text-box .dre-text{ color:#b3a479; letter-spacing: 1px; margin-bottom: 10px; font-size: 13px; } .RWDmenu_plus02 .cart-menu ul.content li .text-box .price{ margin-bottom: 10px; font-size: 16px; font-weight: 900; color:#b3a479; } .RWDmenu_plus02 .cart-menu ul.content li .cancel-btn{ font-size: 14px; float: right; cursor: pointer; transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; } .RWDmenu_plus02 .cart-menu ul.content li .cancel-btn:hover{ color:#b3a479; } .RWDmenu_plus02 .cart-menu .buy-btn a{ width: 100%; background-color:#4a4a4a; color:#fff; /*position: absolute;*/ display: block; /*bottom: 0;*/ text-align: center; padding: 20px 15px; letter-spacing: 3px; font-size: 16px; margin-top: 0px; cursor: pointer; font-weight: 600; box-shadow: 0px -3px 3px rgba(152, 152, 152, 0.25); transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; font-family: 微軟正黑體, "Microsoft JhengHei", MingLiU, arial, verdana, helvetica, tahoma, sans-serif; } .RWDmenu_plus02 .cart-menu .buy-btn:hover a{ color:#fff; } @media (max-width: 600px){ .RWDmenu_plus02 .cart-menu .buy-btn a{ margin-top: 0px; } } .RWDmenu_plus02 .cart-menu .buy-btn:hover{ background-color: #928662; } .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after{ height:1px; } @media (max-width: 600px){ .has-children > a::before, .has-children > a::after{ right:0px; } } .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after{ transition: all 0.2s; -o-transition: all 0.2s; -webkit-transition: all 0.2s; } .has-children > a:hover::before, .has-children > a:hover::after, .go-back a:hover::before, .go-back a:hover::after{ /*right:5%;*/ background-color: #b3a479; } nav.cd-nav ul .close-btn{ margin:0 30px; margin-bottom: 50px; transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); } nav.cd-nav ul .close-btn.is-push{ transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); } nav.cd-nav .bottom-copyright{ text-align: center; width: 100%; font-size: 13px; letter-spacing: 1px; margin-top: 40px; margin-bottom: 40px; } nav.cd-nav .bottom-copyright span{ color:#333; } @media (min-width: 1200px){ .cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after{ left:12px; } } @media (max-width: 1199px){ .cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after{ left:0; } } @media (max-width: 600px){ .cd-primary-nav .go-back a{ margin-top: 46px; font-weight: 600; border-bottom: none; } .cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after{ left:0px; } } nav.cd-nav .phone-member,nav.cd-nav .phone-language{ margin-top: 60px; border-bottom: 1px solid #ececec; transition: all 0.6s; -o-transition: all 0.6s; -webkit-transition: all 0.46s; -moz-transition: all 0.4s; transform:translateX(0); -o-transform:translateX(0); -webkit-transform:translateX(0); -o-transform:translateX(0); -moz-transform:translateX(0); } nav.cd-nav .phone-language{ position: relative; width: 85%; margin:0 30px; } nav.cd-nav .phone-language:after{ position: absolute; right: 0px; top: 21px; font-size: 20px; } nav.cd-nav .phone-language select{ height: 60px; border:none; border-radius: 0; box-shadow: none; font-size: 16px; letter-spacing: 1px; background-color: transparent; padding-left: 0; color:#333; } nav.cd-nav .phone-language select::-ms-expand { display: none; } nav.cd-nav .phone-member{ position: relative; } nav.cd-nav .phone-member span{ position: absolute; right:0; } #cd-primary-nav > li.phone-member.hidden-lg > a:nth-child(1) > span{ left:50px; } nav.cd-nav .phone-member a{ display: inline; border:none; transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; } nav.cd-nav .phone-member a:hover{ color:#b3a479; } nav.cd-nav .phone-language{ margin-top: 0px; } nav.cd-nav .phone-language span{display:none;} nav.cd-nav .phone-member.is-push,nav.cd-nav .phone-language.is-push{ transform:translateX(-130%); -o-transform:translateX(-130%); -webkit-transform:translateX(-130%); -o-transform:translateX(-130%); -moz-transform:translateX(-130%); } nav.cd-nav .phone-group{ margin:0 30px; margin-top: 30px; text-align: left; transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transform:translateX(0); -o-transform:translateX(0); -webkit-transform:translateX(0); -o-transform:translateX(0); -moz-transform:translateX(0); } nav.cd-nav .phone-group a{ display: inline; border:none; } nav.cd-nav .phone-group.is-push{ transform:translateX(-100%); -o-transform:translateX(-100%); -webkit-transform:translateX(-100%); -o-transform:translateX(-100%); -moz-transform:translateX(-100%); } nav.cd-nav .phone-group i{ font-size: 20px; margin-right:15px; transition:all 0.3s; -o-transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; } nav.cd-nav .phone-group i:hover{ color: #b3a479; } .cd-main-content, .cd-main-header{ transition: all 0.5s; } @media (min-width: 1200px){ .cd-main-header{ height: auto; } } @media (max-width: 1199px){ .cd-main-header{ width: 100%; position: fixed; } } @media (min-width: 1200px){ #cd-search.is-up{ top:80px; } } @media (min-width: 1200px){ .cd-primary-nav ul.moves-out > li > a{ font-weight: 900; } } @media (max-width: 1199px){ .cd-overlay.is-visible.search-is-visible{ top:50px; } } @media (max-width: 1199px){ .cd-primary-nav.nav-is-visible{ overflow-x: hidden; } } /* 捲軸 css*/ #scrollbox3 { overflow: auto; height: 78vh; width: auto !important; } @media (max-width: 1199px){ #scrollbox3 { height: 82vh; } } @media (max-width: 600px){ #scrollbox3 { height: 80vh; } } @media (max-width: 400px){ #scrollbox3 { height: 75vh; } } .track3 { width: 10px; background: rgba(0, 0, 0, 0); margin-right: 2px; border-radius: 10px; -webkit-transition: background 250ms linear; transition: background 250ms linear; } .track3:hover, .track3.dragging { background: #d9d9d9; /* Browsers without rgba support */ background: rgba(0, 0, 0, 0.15); } .handle3 { width: 7px; right: 0; background: #999; background: rgba(0, 0, 0, 0.4); border-radius: 7px; -webkit-transition: width 250ms; transition: width 250ms; padding:0!important; } .track3:hover .handle3, .track3.dragging .handle3 { width: 10px; } .cd-header-buttons li{ float: right; } @media (max-width: 1199px){ .cd-header-buttons li{ float: none; } } .cd-header-buttons li.search-btn{ margin-top: 3px; margin-left: 20px; } @media (max-width: 1199px){ .cd-header-buttons li.search-btn{ margin-top: 2px; } } .carempty{ margin:30px; color:#333; text-align: center; } @media (min-width: 1199px){ .cd-primary-nav .has-children.first-click{ position: relative; } .cd-primary-nav .has-children.first-click:after{ position: absolute; top: 18px; right: 10px; content: ''; display: block; width: 7px; height: 1px; z-index: 9; background: #868686; -webkit-transform: rotate(45deg); /* for Chrome || Safari */ -moz-transform: rotate(45deg); /* for Firefox */ -ms-transform: rotate(45deg); /* for IE */ -o-transform: rotate(45deg); /* for Opera */ -webkit-transform:all 0.3s ease; -o--webkit-transform:all 0.3s ease; -moz--webkit-transform:all 0.3s ease; } .cd-primary-nav .has-children.first-click:before{ position: absolute; top: 23px; right: 10px; content: ''; display: block; width: 7px; height: 1px; background: #868686; z-index: 9; -webkit-transform: rotate(135deg); /* for Chrome || Safari */ -moz-transform: rotate(135deg); /* for Firefox */ -ms-transform: rotate(135deg); /* for IE */ -o-transform: rotate(135deg); /* for Opera */ -webkit-transform:all 0.3s ease; -o--webkit-transform:all 0.3s ease; -moz--webkit-transform:all 0.3s ease; } .cd-primary-nav .has-children.first-click:hover:before{ background: #fff; } .cd-primary-nav .has-children.first-click:hover:after{ background: #fff; } .cd-primary-nav .has-children.first-click.open:before{ background: #fff; } .cd-primary-nav .has-children.first-click.open:after{ background: #fff; } .cd-primary-nav .has-children.first-click{ position: relative; } .cd-primary-nav .has-children.first-click:hover:after{ color:#fff; } .cd-primary-nav ul.moves-out > li > a.selected{ background-color: #797979; color: #fff; } } @media (min-width: 1200px){ .cd-primary-nav .cd-secondary-nav ul{ /* transition: all 0.5s ease; min-height: auto;*/ } .cd-primary-nav .cd-secondary-nav ul.moves-out{ min-height: 200px; transition: all 0.5s ease; } .cd-primary-nav .cd-secondary-nav ul ul .go-back a{ padding-left: 30px; font-weight: 600; color:#333; } } .RWDmenu_plus02 .share-group{ text-align: left; transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transform:translateX(0); -o-transform:translateX(0); -webkit-transform:translateX(0); -o-transform:translateX(0); -moz-transform:translateX(0); } .RWDmenu_plus02 .share-group a{ display: inline; border:none; color: #2d2d2d; } .RWDmenu_plus02 .share-group.main_share{ margin-top:3px; margin-left: 5px; } @media (max-width: 1199px){ ul.cd-header-buttons .share-group{ display: none; } } .RWDmenu_plus02 .share-group.sub_share{ float: right; margin-top: 21px; } .RWDmenu_plus02 .share-group i{ font-size: 16px; margin-right:10px; transition:all 0.3s; -o-transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; line-height: 40px; } .RWDmenu_plus02 .share-group i:hover{ color: #b3a479; } .RWDmenu_plus02 .sub-nav .share-group.sub_share{ margin-top: 12px; } @media (min-width: 1200px){ /* .cd-primary-nav .cd-secondary-nav{overflow:inherit !important}*/ .cd-primary-nav .has-children.first-click{overflow: inherit;} .cd-primary-nav .cd-secondary-nav ul.first-block{ /*overflow: hidden;*/ position:absolute; width:200px; z-index:99; left:200px; background-color:#fff; box-shadow:0px 2px 10px rgba(43, 43, 43, 0.36) } .cd-primary-nav ul.moves-out > li > a{font-weight:300} } @media (min-width: 1200px){ .RWDmenu_plus02 .sub-nav .member-block { font-size: 13px; margin-top: 22px; } } @media (max-width: 1199px){ .RWDmenu_plus02 .inside.is-up .cd-main-header{ box-shadow: -3px 2px 8px 1px rgba(47, 47, 47, 0.12) } /* 基礎RWD 內頁板型通用*/ .collapsing_header header{ position: fixed !important; padding: 0 15px; } .collapsing_header .cd-main-header .cd-logo{ margin-top: 12px; } /* RWDfullscreen01 版型*/ #RWDfullscreen01 .cd-main-header{ z-index: 11; position: fixed !important; } #RWDfullscreen01 .cd-main-header .cd-logo{ margin-top:12px; } /* RWDfullscreen02 版型*/ #RWDfullscreen02 .cd-main-header{ z-index: 11; position: fixed !important; } #RWDfullscreen02 .cd-main-header .cd-logo{ margin-top:12px; } } @media (max-width: 480px){ header{position: fixed !important;} } /*右側購物車CSS*/ .shoppingcar001 { position: fixed; right: 0; z-index: 99; top: 23%; width: 39px; overflow: hidden; } .shoppingcar001 .car_block { float: left; position: relative; width: 40px; color: #333333; font-size: 12px; cursor: pointer; background-color: #FFFFFF; text-align: center; } .shoppingcar001 .val-shopnum{ color:#ff1b1b; } .shoppingcar001 .car_icon{ width:60%; margin:20% auto ; } .shoppingcar001 .line{ width:60%; margin:20% auto ; height: 1px; background-color: #cbcbcb; } .shoppingcar001 .money{ color:#ff1b1b; } .shoppingcar001 .scrolltop{ width:100%; height:38px; margin-top:20%; background-color: #111111; background-image: url("/public/model/sample/baseimg/shoppingcar001/scrolltop.png"); background-position: center center; background-size: 100% auto; background-repeat: no-repeat; } .shoppingcar001 .car_icon img{width:100%;} .shoppingcar001 .car_list { float: left; width: 300px; position: relative; background-color: #efefef; } .shoppingcar001 .list_block { position: relative; margin:0 25px; } .shoppingcar001 .car_outer{ position: relative; width:1000px; } .shoppingcar001 .car_list .subject{ color:#111111; font-size: 16px; margin:34px 0px 17px 0px; } .shoppingcar001 .checkout_it{ text-align: center; width:100%; display: block; background-color: #FFFFFF; color: #111111; line-height: 40px; font-size: 14px; margin:12px 0px; -o-transition: all .30s linear; -webkit-transition: all .30s linear; -moz-transition: all .30s linear; transition: all .30s linear; text-decoration: none; } .shoppingcar001 .checkout_it:hover{ background-color: #f3ebeb; color: #111111; } .cart-block img,.member-block img{ max-width: 20px; } /* @media (min-width: 769px){ .cd-primary-nav > li:hover{ background-color: #888 } } @media (max-width: 768px){ .cd-primary-nav > li:hover{ background-color: transparent } } */ nav.cd-nav{ } /*END*/ /* load db marquee001 */ .Marquee_bg{ width: 86%; height: auto; position: absolute; z-index: 1; margin-top: -70px; } .Marquee_inner{ width: 76%; height: 50px; margin: 0px auto; } .Marquee_in_bg{ width: 850px; height: 36px; margin: 0px auto; z-index: 1; } .Marquee_in{ width: 850px; height: 36px; margin: 0px auto; margin-top: -36px; position: relative; } .Marquee_title{ width: 100px; height: 36px; float: left; background: #000 url('/public/model/sample/baseimg/marquee001/Marquee_news.png') no-repeat; position: absolute; z-index: 1000; } .marquee_text{ width: 750px; height: 36px; float: left; font-family: 微軟正黑體,Microsoft JhengHei,MingLiU,arial,verdana,helvetica,tahoma,Sans-serif; font-size: 14px; color: #000; z-index: 999; position: absolute; left: 100px; padding-top: 7px; } .Marquee_text_bg{ width: 750px; height: 36px; float: right; z-index: 1; opacity: 0.6; background: #b9b6b2; } /*END*/ /* load db RWDedictor */ .RWDedictor h3 { border-bottom: 0 solid #ccc; color: #ccc; font-size: 20px; font-weight: 800; line-height: 20px; margin: 10px 0; padding: 0 0 12px; text-transform: uppercase; } /*END*/ /* load db RWDedictor */ .RWDedictor h3 { border-bottom: 0 solid #ccc; color: #ccc; font-size: 20px; font-weight: 800; line-height: 20px; margin: 10px 0; padding: 0 0 12px; text-transform: uppercase; } /*END*/ /* load db RWDbanner001 */ .RWDbanner001 .slides li{ width:100%; height:100%; background-repeat: no-repeat; background-attachment:scroll; background-size: cover; background-position: center center; } /*END*/ /* load db RWDedictor */ .RWDedictor h3 { border-bottom: 0 solid #ccc; color: #ccc; font-size: 20px; font-weight: 800; line-height: 20px; margin: 10px 0; padding: 0 0 12px; text-transform: uppercase; } /*END*/ /* load db RWDcopyright */ /*END*/