/* Minification failed. Returning unminified contents.
(207,52): run-time error CSS1054: JavaScript error in expression property: Variable has not been declared: documentElement
(207,198): run-time error CSS1054: JavaScript error in expression property: Variable has not been declared: documentElement
(212,106): run-time error CSS1062: Expected semicolon or closing curly-brace, found '#font'
 */
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700i|Cormorant+Infant);
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Pacifico);
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(../font-awesome/css/font-awesome.min.css);
@import url(../css/flexslider.css);
.container::after, .inner::after, .wrapper::after, nav::after, .about::after, footer::after, .bg-herb2::after, .member-wrap .login-info::after, .member-wrap .login-shopping::after, .member-wrap .login-forgot::after { clear: both; content: ''; display: block; visibility: hidden; height: 0; }

.mobile-menu-items .mobile-menu-item:before, .pro-item .price:before, .products-info .price:before, .left-wrap .custom-item:before, .itemList ul li h2:before { font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: #ff7180; font-size: 16px; }

/* animate */
@-moz-keyframes fadeIn { 0% { opacity: 0; -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
  100% { opacity: 1; -moz-transform: none; transform: none; } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeIn { 0% { opacity: 0; -moz-transform: translate3d(0, -100%, 0); -ms-transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
  100% { opacity: 1; -moz-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; } }
@-moz-keyframes zoomIn { 50% { -moz-transform: scale(1.05); transform: scale(1.05); } }
@-webkit-keyframes zoomIn { 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } }
@keyframes zoomIn { 50% { -moz-transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); } }
/* layout */
body { background: #fff; font-family: "微軟正黑體", sans-serif; font-size: 14px; color: #666; }
body p { line-height: 1.4; }
body a:link, body a:visited { color: #444; outline: 0; text-decoration: none; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
body a:hover, body a:active { color: #ff7180; outline: 0; text-decoration: none; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
body .ework { font-size: 10px; }

.container { width: 100%; }

.inner { position: relative; }

button { border: none; outline: none; }

textarea, select { border: none; outline: none; font-family: "微軟正黑體", sans-serif; }

select { padding: 0; cursor: pointer; }

input[type="password"], input[type="email"], input[type="text"] { border: 0; border-radius: 0; outline: none; padding: 0; box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0); box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0); font-family: "微軟正黑體", sans-serif; }

button[type="submit"], textarea, input[type="password"], input[type="email"], input[type="button"], input[type="submit"], input[type="reset"] { -moz-appearance: none; -webkit-appearance: none; }

.paginator { float: left; width: 100%; margin: 30px auto; text-align: center; }
.paginator a:link, .paginator a:visited, .paginator a:hover, .paginator a:active { color: #999; }
.paginator a, .paginator span { position: relative; display: inline-block; padding: 1px 8px; margin: 0 3px; color: #999; font-size: 16px; line-height: 1.5; font-weight: bold; text-align: center; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.paginator a:after, .paginator span:after { position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; content: ""; opacity: 0; background: #333; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.paginator a.disabled, .paginator span.disabled { opacity: 0; }
.paginator a:hover, .paginator a.current, .paginator span:hover, .paginator span.current { color: #333; }
.paginator a:hover:after, .paginator a.current:after, .paginator span:hover:after, .paginator span.current:after { opacity: 1; background: #e31837; }
.paginator a.nav-prev, .paginator span.nav-prev { padding: 0; }
.paginator a.nav-prev:after, .paginator span.nav-prev:after { opacity: 0; }
.paginator a.nav-prev:hover, .paginator span.nav-prev:hover { -moz-transform: translateX(-4px); -ms-transform: translateX(-4px); -webkit-transform: translateX(-4px); transform: translateX(-4px); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.paginator a.nav-next, .paginator span.nav-next { padding: 0; }
.paginator a.nav-next:after, .paginator span.nav-next:after { opacity: 0; }
.paginator a.nav-next:hover, .paginator span.nav-next:hover { -moz-transform: translateX(4px); -ms-transform: translateX(4px); -webkit-transform: translateX(4px); transform: translateX(4px); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.pagetop { position: fixed; right: 5px; bottom: 65px; width: 42px; height: 42px; cursor: pointer; z-index: 9000; border-radius: 40px; background: #ffc5bd; color: #fff; text-indent: -9998em; }
.pagetop:before { content: ""; width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; margin-top: -5px; margin-left: -10px; border-top: solid 2px #fff; border-left: solid 2px #fff; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.pagetop:hover { background: #ff7180; color: #fff; }

.pagetop { opacity: 0; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.pagetop-show { opacity: 1; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.mobile-menu-btn { display: none; cursor: pointer; position: absolute; top: 0; right: 0; width: 50px; height: 50px; opacity: 1; z-index: 3000; background: #ffc5bd; cursor: pointer; }
.mobile-menu-btn span { -moz-transition: margin 0s, -moz-transform 0.2s, background-color 0.1s; -o-transition: margin 0s, -o-transform 0.2s, background-color 0.1s; -webkit-transition: margin 0s, -webkit-transform 0.2s, background-color 0.1s; transition: margin 0s, transform 0.2s, background-color 0.1s; -moz-transform-origin: 50% 50% 50%; -ms-transform-origin: 50% 50% 50%; -webkit-transform-origin: 50% 50% 50%; transform-origin: 50% 50% 50%; display: block; position: absolute; right: 12px; top: 14px; width: 26px; height: 4px; background: #fff; }
.mobile-menu-btn span:nth-child(2) { top: 23px; }
.mobile-menu-btn span:nth-child(3) { top: 32px; }

.mobile-menu-btn-opened { position: absolute; position: fixed; }
.mobile-menu-btn-opened span:first-child { background-color: #fff; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: 9px; }
.mobile-menu-btn-opened span:nth-child(2) { -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); }
.mobile-menu-btn-opened span:nth-child(3) { background-color: #fff; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -9px; }

.wrapper { position: relative; width: 100%; height: 100%; z-index: 2; -moz-transition: -moz-transform 0.5s ease-in-out; -o-transition: -o-transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; }

.move-to-left { -moz-transform: translateX(-200px); -ms-transform: translateX(-200px); -webkit-transform: translateX(-200px); transform: translateX(-200px); }

.move-y-hidden { display: none; }

.mobile-menu { width: 200px; height: 100%; position: fixed; overflow-y: auto; top: 0; z-index: 999; right: -200px; background-color: #dfdfdf; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

.mobile-menu-inner { width: 100%; padding-bottom: 50px; }

.mobile-menu-items { position: relative; }
.mobile-menu-items .mobile-menu-item { position: relative; padding: 10px 10px; padding-left: 20px; font-size: 18px; border-bottom: 1px solid #fff; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.mobile-menu-items .mobile-menu-item a:link, .mobile-menu-items .mobile-menu-item a:visited { color: #666; }
.mobile-menu-items .mobile-menu-item a:hover, .mobile-menu-items .mobile-menu-item a:active { color: #ff7180; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.mobile-menu-items .mobile-menu-item:before { content: '\f138'; color: #666; padding-right: 10px; }

.mobile-login { height: 50px; border-bottom: 1px solid #fff; font-size: 18px; line-height: 50px; }
.mobile-login li { float: left; width: calc(100% - 50px); text-align: center; }

.mobile-link { width: calc(40px * 3); height: 30px; margin: 20px auto 0; vertical-align: bottom; }
.mobile-link li { display: inline-block; float: left; margin-left: 10px; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.mobile-link li:hover { opacity: .6; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.search-box { display: none; background: #eee; width: 100%; z-index: 1900; padding: 10px 10px 10px 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.search-box .searchArea { width: calc(100% - 40px); height: 30px; margin-right: 5px; padding: 0 10px; font-size: 16px; font-weight: bold; color: #757575; border: 1px solid #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.search-box .searchArea::-webkit-input-placeholder { color: #666; font-family: "微軟正黑體"; border: 0; -moz-box-shadow: inside 0 0 0 #000; -webkit-box-shadow: inside 0 0 0 #000; box-shadow: inside 0 0 0 #000; font-size: 16px; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.search-box .searchArea:-moz-placeholder { color: #666; font-size: 16px; }
.search-box .searchArea::-moz-placeholder { color: #666; font-size: 16px; }
.search-box .searchArea:-ms-input-placeholder { color: #666; font-size: 16px; }
.search-box .searchArea:hover { color: #ff7180; box-sizing: border-box; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.search-box .searchArea:hover::-webkit-input-placeholder { color: #ff7180; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.search-box .searchArea:hover:-moz-placeholder { color: #ff7180; }
.search-box .searchArea:hover::-moz-placeholder { color: #ff7180; }
.search-box .searchArea:hover:-ms-input-placeholder { color: #ff7180; }
.search-box .searchArea:hover:focus::-webkit-input-placeholder { -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); color: rgba(102, 102, 102, 0.5); }
.search-box .searchArea:hover:focus:-moz-placeholder { color: rgba(102, 102, 102, 0.5); }
.search-box .searchArea:hover:focus::-moz-placeholder { color: rgba(102, 102, 102, 0.5); }
.search-box .searchArea:hover:focus:-ms-input-placeholder { color: rgba(102, 102, 102, 0.5); }
.search-box .searchBtn { outline: none; vertical-align: bottom; }

.mobile-footer { display: none; position: fixed; bottom: 0; left: 0; z-index: 6000; height: 50px; width: 100%; color: #fff; background: #ffc5bd; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.mobile-footer ul li { width: calc(100% / 4); display: inline-block; float: left; color: #555; text-align: center; }
.mobile-footer ul li a { height: 50px; background: url("../images/icon-footer.png") center 5px no-repeat; font-size: 14px; line-height: 85px; display: block; cursor: pointer; overflow: hidden; }
.mobile-footer ul li a:hover { background: url("../images/icon-footer-over.png") center 5px no-repeat; }
.mobile-footer ul li a:link, .mobile-footer ul li a:visited { color: #555; }
.mobile-footer ul li a:hover, .mobile-footer ul li a:active { color: #ff7180; }
.mobile-footer .index a, .mobile-footer .index a:hover { background-position: 50% 5px; }
.mobile-footer .search a, .mobile-footer .search a:hover { background-position: 50% -45px; }
.mobile-footer .cart { position: relative; }
.mobile-footer .cart a, .mobile-footer .cart a:hover { background-position: 50% -95px; }
.mobile-footer .cart .shop-num { position: absolute; top: -2px; right: calc(50% - 25px); width: 20px; height: 20px; background: #ff7180; padding-top: 4px; box-sizing: border-box; font-size: 14px; line-height: 1; font-family: "Roboto", "微軟正黑體", sans-serif; color: #fff; font-weight: bold; text-align: center; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; }
.mobile-footer .member a, .mobile-footer .member a:hover { background-position: 50% -145px; }

.search-opened { background: #ff8083; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

header { position: relative; height: 80px; z-index: 1700; background: #fff; }

.logo { width: 220px; height: 70px; margin-top: 10px; float: left; }

h1 { width: calc(100% - 220px - 550px); max-height: 60px; float: left; color: #c7c7c7; font-size: 14px; line-height: 20px; vertical-align: text-bottom; position: absolute; bottom: 10px; left: 230px; }

.navBar { float: right; width: 550px; height: 30px; margin-top: 10px; text-align: right; }

.user-menu { display: inline-block; height: 30px; margin-right: 10px; vertical-align: bottom; }
.user-menu li { display: inline-block; height: 30px; font-size: 16px; line-height: 30px; color: #ff7180; font-weight: bold; padding-left: 40px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.user-menu li a:link, .user-menu li a:visited { color: #ff7180; }
.user-menu li a:hover, .user-menu li a:active { color: #444; }
.user-menu .logout { padding-left: 10px; }
.user-menu .member { background: url("../images/icon-member.png") 5px top no-repeat; }
.user-menu .cart { background: url("../images/icon-cart.png") 5px top no-repeat; }
.user-menu .shopping-intro { background: url("../images/icon-intro.png") 5px top no-repeat; }
.user-menu .disabled { display: none; }

.top-link { display: inline-block; height: 30px; margin-right: 10px; vertical-align: bottom; }
.top-link li { display: inline-block; margin-left: 5px; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.top-link li:hover { opacity: .6; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.searchBar { float: right; width: 550px; margin-top: 10px; height: 30px; line-height: 30px; padding-right: 10px; text-align: right; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.searchBar li { display: inline-block; font-size: 16px; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: bottom; }
.searchBar li.loginBtn, .searchBar li.registerBtn { position: relative; padding: 0 10px; }
.searchBar li.loginBtn:after, .searchBar li.registerBtn:after { content: ''; height: 16px; position: absolute; right: 0; top: 7px; border-right: 1px solid #c7c7c7; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.searchBar li.membername { color: #ff7180; position: relative; padding: 0 5px; }
.searchBar li.icon-about, .searchBar li.icon-contact { position: relative; padding-left: 25px; box-sizing: border-box; margin-right: 5px; }
.searchBar li.icon-about:after, .searchBar li.icon-contact:after { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 30px; background: url("../images/icon-aboutus.svg") no-repeat; background-position: center center; }
.searchBar li.icon-contact:after { background: url("../images/icon-contact.svg") no-repeat; background-position: center center; }

.shbox { border: 0; width: 165px; height: 30px; padding: 5px; font-size: 16px; font-weight: bold; text-align: right; color: #ff7180; border: 1px solid #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: bottom; outline: none; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.shbox::-webkit-input-placeholder { color: #666; font-family: "微軟正黑體"; border: 0; -moz-box-shadow: inside 0 0 0 #000; -webkit-box-shadow: inside 0 0 0 #000; box-shadow: inside 0 0 0 #000; font-size: 16px; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.shbox:-moz-placeholder { color: #666; font-size: 16px; }
.shbox::-moz-placeholder { color: #666; font-size: 16px; }
.shbox:-ms-input-placeholder { color: #666; font-size: 16px; }
.shbox:hover { color: #ff7180; box-sizing: border-box; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.shbox:hover::-webkit-input-placeholder { color: #ff7180; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.shbox:hover:-moz-placeholder { color: #ff7180; }
.shbox:hover::-moz-placeholder { color: #ff7180; }
.shbox:hover:-ms-input-placeholder { color: #ff7180; }
.shbox:hover:focus::-webkit-input-placeholder { -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); color: rgba(102, 102, 102, 0.5); }
.shbox:hover:focus:-moz-placeholder { color: rgba(102, 102, 102, 0.5); }
.shbox:hover:focus::-moz-placeholder { color: rgba(102, 102, 102, 0.5); }
.shbox:hover:focus:-ms-input-placeholder { color: rgba(102, 102, 102, 0.5); }
.shbox[type=text]:focus { border-bottom: 1px solid #c7c7c7; color: #ff7180; }

.shicon { padding-left: 5px; outline: none; vertical-align: bottom; }

nav { margin-top: 10px; height: 40px; border-top: 1px solid #eee; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iNyUiIHN0b3AtY29sb3I9IiNlZWVlZWUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNGY0ZjQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(7%, #eeeeee), color-stop(100%, #f4f4f4)); background: -moz-linear-gradient(top, #ffffff, #eeeeee 7%, #f4f4f4); background: -webkit-linear-gradient(top, #ffffff, #eeeeee 7%, #f4f4f4); background: linear-gradient(to bottom, #ffffff, #eeeeee 7%, #f4f4f4); }

.menu li { position: relative; float: left; display: inline-block; width: calc((100% - 50px) / 8); text-align: center; font-size: 18px; height: 40px; padding: 12px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.menu li:first-child { width: 50px; }
.menu li:first-child:before { content: ''; height: 18px; position: absolute; left: 0; top: 11px; border-right: 1px solid #c7c7c7; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.menu li a:hover { -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.menu li:after { content: ''; height: 18px; position: absolute; right: 0; top: 11px; border-right: 1px solid #c7c7c7; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.menu li.curr { color: #ff7180; border-bottom: 4px solid #ff7180; }
.menu li.curr a:link, .menu li.curr a:visited { color: #ff7180; }
.menu li.curr a:hover, .menu li.curr a:active { color: #444; }

.socialIcon { position: relative; width: 100%; padding: 0 10px; box-sizing: border-box; }
.socialIcon .fb-like-button { display: inline-block; padding-top: 4px; box-sizing: border-box; }
.socialIcon .googlePlus { display: inline-block; margin-left: 5px; }

/** 瀏覽記錄展開按鈕 **/
.history-btn { display: none; height: 50px; vertical-align: bottom; position: absolute; right: 50px; top: 0; }
.history-btn li { float: left; display: inline-block; color: #ff7180; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.history-btn li.history { height: 50px; font-size: 16px; line-height: 80px; font-weight: bold; display: block; cursor: pointer; overflow: hidden; color: #ff7180; background: url("../images/icon-history.svg") 50% 0 no-repeat; background-size: 30px 30px; }
.history-btn li:hover { color: #444; background: url("../images/icon-history-2.svg") 50% 0 no-repeat; background-size: 30px 30px; }

/** 上方瀏覽記錄展開列表 **/
.history-opened { display: block !important; top: 100px !important; right: 0; width: 100%; height: 102px !important; overflow: hidden; border: 0px solid #ccc; margin: 0px; z-index: 1000 !important; -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

/** 右側瀏覽記錄區塊設定 **/
.bnav { left: expression(documentElement.scrollleft); margin-left: 985px; _margin-left: 0px; _left: 985px; _position: absolute; /* for IE7,IE6 */ _top: expression(documentElement.scrollTop+150+"px"); /* for IE7,IE6 */ overflow: visible; }

/** 右側瀏覽記錄區塊設定 **/
.shoppingCar { position: fixed; right: 50%; top: 175px; width: 72px; border: 0px solid #ccc; margin-right: -690px; z-index: 19999; }
.shoppingCar .historyArea { position: relative; width: 100%; height: 100%; }
.shoppingCar .historyArea .history-title { height: 19px; background: #A0A0A0; font: 12px/20px Helvetica; #font: 12px/21px Helvetica; color: #fff; text-align: center; cursor: default; display: block; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px; border-radius: 5px 5px 0 0; }
.shoppingCar .historyArea .slides { background: #fff; }
.shoppingCar .historyArea .slides li { display: block; border: 1px solid #ddd; border-top: 0px; box-sizing: border-box; }
.shoppingCar .historyArea .slides li a img { display: block; width: 70px; height: 70px; }
.shoppingCar .historyArea .flex-direction-nav { display: none; }
.shoppingCar .historyArea .flex-control-nav { display: none; }

#flexslider1 { position: relative; }
#flexslider1 .flex-control-nav { z-index: 9999; bottom: 20px; }
#flexslider1 .flex-control-paging li a { width: 14px; height: 14px; background: #ccc; }
#flexslider1 .flex-control-paging li a:hover { background: #fff; }
#flexslider1 .flex-control-paging li a.flex-active { background: #ff7180; }
#flexslider1 .flex-direction-nav a { width: 20px; height: 20px; margin: -10px 0 0; color: white; cursor: pointer; background: rgba(51, 51, 51, 0.8); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-box-shadow: 1px 1px 1px transparent; -webkit-box-shadow: 1px 1px 1px transparent; box-shadow: 1px 1px 1px transparent; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
#flexslider1 .flex-direction-nav a:before { font-size: 20px; padding: 0 6px; }
#flexslider1 .flex-direction-nav .flex-prev { opacity: 0.5; left: 0; }
#flexslider1 .flex-direction-nav .flex-next { opacity: 0.5; right: 0; }
#flexslider1:hover .flex-direction-nav .flex-prev { opacity: 1; left: 0; }
#flexslider1:hover .flex-direction-nav .flex-next { opacity: 1; right: 0; }
#flexslider1:hover .flex-direction-nav .flex-prev:hover, #flexslider1:hover .flex-direction-nav .flex-next:hover { opacity: 1; background: #ff7180; -moz-box-shadow: 0px 0px 3px transparent; -webkit-box-shadow: 0px 0px 3px transparent; box-shadow: 0px 0px 3px transparent; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
#flexslider1:hover .flex-direction-nav .flex-prev:hover:before, #flexslider1:hover .flex-direction-nav .flex-next:hover:before { color: #fff; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.item-box { width: 100% !important; }

@media (max-width: 1400px) { .shoppingCar { top: 175px; right: 0; margin: 0; } }
@media (max-width: 1022px) { .shoppingCar { top: 100px; right: 0; width: 100%; height: 0; overflow: hidden; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
  .shoppingCar .historyArea { background: #fff; }
  .shoppingCar .historyArea .history-title { display: none !important; }
  .shoppingCar .historyArea .slides { margin-top: 0; height: 105px; border-top: 0; box-sizing: border-box; }
  .shoppingCar .historyArea .slides li { width: 100px !important; float: left; display: inline-block; margin: 0; border: 1px solid #ddd; border-right: 0; }
  .shoppingCar .historyArea .slides li a { display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -ms-flex-pack: center; justify-content: center; }
  .shoppingCar .historyArea .slides li a img { width: 100px; height: 100px; }
  .shoppingCar .historyArea .slides li:last-child { border-right: 1px solid #ddd !important; width: 102px !important; }
  .shoppingCar .historyArea .flex-direction-nav { display: block; } }
.bg-fabric { max-height: 600px; overflow: hidden; background: url("../images/bg-fabric.jpg"); }

.slide-box { position: relative; width: 1188px; margin: 0 auto; }
.slide-box img { width: 100%; height: 600px; }

.slide_btn .prev, .slide_btn .next { position: absolute; top: calc(50% - 20px); z-index: 199; width: 40px; height: 40px; color: white; cursor: pointer; background: rgba(203, 203, 198, 0.3); -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.slide_btn .prev:hover, .slide_btn .next:hover { color: #ff7180; background: white; -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.slide_btn .prev:before, .slide_btn .next:before { font-family: FontAwesome; font-size: 13px; position: absolute; top: 15px; }
.slide_btn .prev { left: -20px; }
.slide_btn .prev:before { left: 15px; content: '\f053'; }
.slide_btn .next { right: -20px; }
.slide_btn .next:before { right: 15px; content: '\f054'; }

.cycle-pager { position: absolute; z-index: 1500; width: 100%; height: 30px; line-height: 30px; bottom: 10px; text-align: center; overflow: hidden; }
.cycle-pager span { font-family: arial; font-size: 50px; color: #ccc; width: 25px; height: 25px; display: inline-block; cursor: pointer; }
.cycle-pager span.cycle-pager-active { color: #ff7180; }
.cycle-pager > * { cursor: pointer; }

.slideshow { position: relative; width: 1188px; margin: 0 auto; }

#flexslider2 { position: relative; }
#flexslider2 .flex-control-nav { z-index: 9999; bottom: 20px; }
#flexslider2 .flex-control-paging li a { width: 14px; height: 14px; background: #ccc; }
#flexslider2 .flex-control-paging li a:hover { background: #fff; }
#flexslider2 .flex-control-paging li a.flex-active { background: #ff7180; }
#flexslider2 .flex-direction-nav a { width: 40px; height: 40px; color: white; cursor: pointer; background: rgba(203, 203, 198, 0.3); -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
#flexslider2 .flex-direction-nav a:before { font-size: 36px; padding: 2px 12px; }
#flexslider2 .flex-direction-nav .flex-prev { opacity: 0.7; left: -20px; }
#flexslider2 .flex-direction-nav .flex-next { opacity: 0.7; right: -20px; }
#flexslider2:hover .flex-direction-nav .flex-prev { opacity: 1; left: -20px; }
#flexslider2:hover .flex-direction-nav .flex-next { opacity: 1; right: -20px; }
#flexslider2:hover .flex-direction-nav .flex-prev:hover, #flexslider2:hover .flex-direction-nav .flex-next:hover { opacity: 1; background: white; -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
#flexslider2:hover .flex-direction-nav .flex-prev:hover:before, #flexslider2:hover .flex-direction-nav .flex-next:hover:before { color: #ff7180; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

#flexslider3, #flexslider4 { position: relative; }
#flexslider3 .title, #flexslider4 .title { display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-item-align: center; align-items: center; -webkit-flex-flow: column nowrap; flex-flow: column nowrap; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; font-size: 20px; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); }
#flexslider3 .title h3, #flexslider4 .title h3 { font-size: 200%; display: block; background: rgba(0, 0, 0, 0.5); padding: 0 25px; }
#flexslider3 .title p, #flexslider4 .title p { display: none; }

@media (max-width: 1200px) { .slideshow { width: 100%; }
  #flexslider2 .flex-direction-nav .flex-prev { opacity: 0.7; left: 10px; }
  #flexslider2 .flex-direction-nav .flex-next { opacity: 0.7; right: 10px; }
  #flexslider2:hover .flex-direction-nav .flex-prev { opacity: 1; left: 10px; }
  #flexslider2:hover .flex-direction-nav .flex-next { opacity: 1; right: 10px; } }
@media (max-width: 640px) { #flexslider2 .flex-direction-nav .flex-prev { opacity: 0; left: 10px; }
  #flexslider2 .flex-direction-nav .flex-next { opacity: 0; right: 10px; }
  #flexslider2:hover .flex-direction-nav .flex-prev { opacity: 1; left: 10px; }
  #flexslider2:hover .flex-direction-nav .flex-next { opacity: 1; right: 10px; }
  #flexslider3 .title, #flexslider4 .title { font-size: 16px; line-height: 1.5; }
  #flexslider3 .title h3, #flexslider4 .title h3 { font-size: 150%; } }
@media (max-width: 480px) { #flexslider3 .title, #flexslider4 .title { font-size: 14px; line-height: 1.2; }
  #flexslider3 .title h3, #flexslider4 .title h3 { font-size: 120%; } }
@media (max-width: 360px) { #flexslider2 .flex-control-nav { display: block; bottom: 5px; } }
/* 首頁產品 */
.proSale { width: 100%; float: left; }

.bg-slash { background: url("../images/slash.png") 0 bottom repeat-x; }

.bg-herb { background: url("../images/bg-herb.jpg"); background-size: 100% auto; }

.keyTitle { width: 100%; float: left; font-size: 16px; line-height: 30px; padding: 20px 0; letter-spacing: 15px; font-weight: bold; color: #000; text-align: center; background: url("../images/slash.png") 0 bottom repeat-x; }

.proHead { width: 100%; float: left; font-size: 48px; line-height: 48px; padding: 35px 0; color: #ff7180; text-align: center; }
.proHead img { vertical-align: -12%; padding-left: 10px; }
.proHead strong { font-weight: bold; }
.proHead a:link, .proHead a:visited { color: #ff7180; }
.proHead a:hover, .proHead a:active { color: #666; }

.proList { width: 100%; float: left; }

.pro-item { width: 22.91667%; float: left; margin-left: 1.04167%; margin-right: 1.04167%; margin-bottom: 40px; padding: 10px; background: #fafafa; border: #fff 1px solid; -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.pro-item .photo { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: 250px; overflow: hidden; }
.pro-item .photo img { float: left; width: 100%; height: auto; -moz-transition: all 1s cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 1s cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 1s cubic-bezier(0.42, 0, 0.58, 1); transition: all 1s cubic-bezier(0.42, 0, 0.58, 1); }
.pro-item .photo img:hover { -moz-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); -moz-transition: all 3s cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 3s cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 3s cubic-bezier(0.42, 0, 0.58, 1); transition: all 3s cubic-bezier(0.42, 0, 0.58, 1); }
.pro-item .title { width: 100%; float: left; margin-top: 5px; min-height: 48px; height: 48px; overflow: hidden; font-size: 18px; line-height: 24px; font-weight: bold; color: #555; }
.pro-item .title a:link, .pro-item .title a:visited { color: #555; }
.pro-item .title a:hover, .pro-item .title a:active { color: #ff7180; }
.pro-item .text { width: 100%; float: left; margin-top: 5px; height: 58px; min-height: 58px; overflow: hidden; line-height: 1.4; }
.pro-item .show-price { width: 100%; float: left; margin-top: 5px; min-height: 48px; }
.pro-item .price { display: block; margin-top: 5px; font-family: 'Century Gothic'; font-size: 24px; color: #ff7180; }
.pro-item .price:before { content: '\f155'; }
.pro-item .originalPrice { font-size: 14px; color: #999; text-decoration: line-through; }
.pro-item .originalPrice:before { content: '原價$'; font-family: "微軟正黑體", sans-serif; font-size: 12px; color: #999; }
.pro-item .discount { margin-top: 0; font-size: 28px; font-weight: bold; }
.pro-item .discount:before { content: '優惠價$'; font-family: "微軟正黑體", sans-serif; font-size: 14px; font-weight: bold; color: #ff7180; }

.category { float: left; margin-top: 10px; font-size: 15px; font-weight: bold; color: #fff; padding: 5px 10px; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.category:link, .category:visited { color: #fff; }
.category:hover, .category:active { background: #999; }

.color1 { background: #6984ff; }

.color2 { background: #78a96a; }

.color3 { background: #ff8083; }

.color4 { background: #ff9a27; }

.color5 { background: #aeb521; }

.add-cart { width: 100%; float: left; margin-top: 10px; }
.add-cart .qty { float: left; width: 80px; height: 40px; padding: 5px 5px; border: 0; box-sizing: border-box; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; font-size: 18px; outline: none; text-align: center; color: #000; font-weight: bold; }
.add-cart .qty .cl { text-indent: 15px; }
.add-cart input[type=button] { float: left; width: calc(100% - 80px); height: 40px; border: 0; outline: none; cursor: pointer; font-family: "微軟正黑體", sans-serif; font-size: 20px; font-weight: bold; color: #e55759; background: #f9ede5; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.add-cart input[type=button]:hover { color: #fff; background: #ff9a27; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.banner { position: relative; max-height: 500px; overflow: hidden; background: #efefef; }
.banner:before { content: ''; width: 30px; height: 30px; position: absolute; left: calc(50% - 20px); top: -17px; z-index: 999; transform: rotate(45deg); background: #fff; -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); }

.banner-box { width: 100%; float: left; }
.banner-box ul li .info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; text-align: center; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.banner-box ul li h2 { font-size: 36px; line-height: 1.6; }
.banner-box ul li h3 { font-size: 24px; line-height: 1.6; font-weight: bold; }
.banner-box ul li p { font-weight: bold; }
.banner-box ul li img { width: 100%; }

.products-wrap { margin-top: 20px; }

.video-bg { background: url("../images/bg-paper.jpg"); }

.videoHead { width: 100%; float: left; font-size: 48px; line-height: 48px; padding: 35px 0; color: #808080; text-align: center; background: url("../images/slash.png") 0 bottom repeat-x; }
.videoHead img { vertical-align: -12%; padding-left: 10px; }
.videoHead strong { font-weight: bold; }
.videoHead a:link, .videoHead a:visited { color: #666; }
.videoHead a:hover, .videoHead a:active { color: #ff7180; }

.video { width: 100%; float: left; margin: 40px 0 20px; }

.video-item { float: left; width: calc(100% / 3 - 15px); margin-right: 20px; margin-bottom: 20px; padding: 10px; background: #fff; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.video-item:nth-child(3n) { margin-right: 0; }
.video-item .title { font-size: 18px; line-height: 24px; height: 48px; overflow: hidden; margin: 10px 0 0; font-weight: bold; }
.video-item .title a:link, .video-item .title a:visited { color: #ff7180; }
.video-item .title a:hover, .video-item .title a:active { color: #444; }

.youtube { position: relative; }

.video-show { position: relative; width: 100%; }
.video-show:after { width: 100%; height: 100%; margin: auto; position: absolute; top: 0; left: 0; z-index: 2; content: ''; background: rgba(0, 0, 0, 0.4); background-image: url("../images/icon-youtu.png"); background-position: center center; background-repeat: no-repeat; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.video-show:hover:after { background: transparent; background-image: url("../images/icon-youtu2.png"); background-position: center center; background-repeat: no-repeat; }
.video-show img { width: 100%; }

.video-iframe { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }

.video-iframe iframe, .video-iframe object, .video-iframe embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.about { position: relative; height: 460px; padding-bottom: 30px; }

.about-img { float: left; width: 42.9%; height: 340px; overflow: hidden; position: absolute; top: 90px; left: 0; z-index: 10; }
.about-img img { width: auto; height: 100%; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }

.about-info { position: absolute; top: 10px; right: 0; z-index: 9; width: 62%; }

.aboutHead { width: 100%; float: left; font-size: 48px; line-height: 48px; padding: 35px 0; padding-left: 90px; color: #808080; letter-spacing: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url("../images/slash.png") 0 bottom repeat-x; }
.aboutHead img { vertical-align: -12%; padding-left: 10px; }
.aboutHead strong { font-weight: bold; }
.aboutHead a:link, .aboutHead a:visited { color: #666; }
.aboutHead a:hover, .aboutHead a:active { color: #ff7180; }

.aboutText { width: 100%; float: left; position: relative; height: 340px; overflow: hidden; background: #efefef url("../images/bg-fabric2.jpg"); padding: 15px 40px 50px 90px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.aboutText h3 { font-size: 26px; color: #ff7180; margin-top: 20px; }
.aboutText .text { margin-top: 20px; font-size: 20px; line-height: 1.6; }
.aboutText .more { position: absolute; bottom: -40px; left: calc(50% - 40px); width: 80px; height: 80px; background: #fff; text-align: center; padding-top: 20px; font-size: 18px; font-weight: bold; font-family: "Roboto", "微軟正黑體", sans-serif; font-style: italic; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 80px; -webkit-border-radius: 80px; border-radius: 80px; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.aboutText .more:link, .aboutText .more:visited { color: #666; }
.aboutText .more:hover { bottom: -44px; left: calc(50% - 44px); width: 88px; height: 88px; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.seo-container { padding-top: 15px; border-top: solid 1px #eee; }

.seoWord { font-size: 11px; line-height: 1.6; color: rgba(55, 61, 72, 0.5); }

footer { width: 100%; float: left; margin-top: 10px; min-height: 260px; border-top: 1px solid #ddd; padding-top: 20px; padding-bottom: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmZWZlZiIvPjxzdG9wIG9mZnNldD0iMSUiIHN0b3AtY29sb3I9IiNlMWUxZTEiLz48c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2VmZWZlZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(1%, #e1e1e1), color-stop(20%, #efefef)); background: -moz-linear-gradient(top, #efefef, #e1e1e1 1%, #efefef 20%); background: -webkit-linear-gradient(top, #efefef, #e1e1e1 1%, #efefef 20%); background: linear-gradient(to bottom, #efefef, #e1e1e1 1%, #efefef 20%); }

.nav-footer { float: left; width: calc(100% - 300px); }

.copyright-footer { display: none; width: 100%; float: left; background: #555; }
.copyright-footer .copyright-inner { padding: 6px 0; margin: 0 auto; text-align: center; }

.facebook-footer { float: left; width: 300px; margin-top: 10px; }

.category-footer { width: 100%; float: left; padding-left: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.category-footer li { padding-right: 20px; display: inline-block; }

.link-footer { width: 100%; float: left; margin-top: 15px; }
.link-footer li { margin: 0 15px 10px; display: inline-block; font-size: 17px; }

.copyright-box { float: left; width: 300px; margin-top: 10px; }
.copyright-box .logo-footer { float: left; width: calc(100% - 90px); margin: 5px 20px 0 0; }
.copyright-box .logo-footer img { width: 210px; }
.copyright-box .line-footer { float: left; width: 70px; }
.copyright-box .line-footer img { width: 100%; }

.copyright { float: left; width: 100%; font-size: 9px; margin-top: 5px; text-align: right; font-family: "Roboto", "微軟正黑體", sans-serif; color: #a1a1a1; }

.ework { float: left; width: 100%; margin-top: 5px; text-align: right; font-family: "Roboto", "微軟正黑體", sans-serif; color: #a1a1a1; }
.ework a:link, .ework a:visited { color: #a1a1a1; }
.ework a:hover, .ework a:active { color: #ff7180; }

.address-box { float: left; width: calc(100% - 300px); margin-top: 10px; padding: 0 20px; padding-right: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.address-box .service-info { font-family: "Roboto", "微軟正黑體", sans-serif; font-size: 14px; }
.address-box .service-info .tel { display: inline-block; font-size: 24px; font-weight: bold; color: #ff7180; }
.address-box .service-info .tel a:link, .address-box .service-info .tel a:visited { color: #ff7180; }
.address-box .service-info .tel a:hover, .address-box .service-info .tel a:active { color: #444; }
.address-box .service-info li { margin-bottom: 10px; }
.address-box .service-info li:nth-child(2) { line-height: 1.5; }
.address-box .company-info { font-size: 14px; border-top: 1px dashed #ff7180; padding-top: 8px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.address-box .company-info li { display: inline-block; margin-bottom: 10px; line-height: 22px; margin-right: 10px; }
.address-box .company-info li:last-child { margin-right: 0; }
.address-box .company-info li i { width: 22px; height: 22px; text-align: center; background: #d3d3d3; color: #ff7180; padding-top: 2px; font-size: 17px; margin-right: 5px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.address-box .company-info li a:link, .address-box .company-info li a:visited { color: #ff7180; }
.address-box .company-info li a:hover, .address-box .company-info li a:active { color: #444; }

/* media */
@media (min-width: 1188px) { .inner { width: 1188px; margin-left: auto; margin-right: auto; }
  .inner:after { content: " "; display: block; clear: both; } }
@media (max-width: 1200px) { .inner { width: calc(100% - 40px); margin: 0 20px; }
  .slide-box { width: 100%; margin: 0 auto; }
  .slide-box img { height: auto; }
  .slide_btn .prev { left: 5px; }
  .slide_btn .next { right: 5px; }
  footer { padding-bottom: 0; }
  .copyright, .ework { display: none; }
  .open { float: none; width: auto; display: inline-block; text-align: center; margin: 0 auto; }
  .address-box { position: relative; width: calc(100% - 20px); margin-right: 20px; padding: 0; }
  .address-box .service-info { position: absolute; left: 320px; top: -90px; }
  .address-box .service-info li:nth-child(2) .service-time { display: block; width: 100%; padding-left: 77px; box-sizing: border-box; }
  .address-box .company-info { margin-top: 20px; }
  .copyright-footer { display: block; } }
@media (max-width: 1024px) { h1 { max-width: 200px; }
  main { background: inherit; }
  .pro-item .photo { height: 199.59px; }
  .video-item .title { font-size: 16px; line-height: 20px; height: 40px; } }
@media (min-width: 1023px) { .search-box { display: none; } }
@media (max-width: 1022px) { header { height: 50px; }
  .logo { width: auto; height: 50px; margin-top: 0; }
  .logo img { width: 160px; }
  h1 { left: 180px; bottom: 0; width: auto; }
  .navBar, .searchBar, nav { display: none; }
  .mobile-menu-btn, .mobile-menu-opened { display: block; }
  .history-btn { display: block; }
  .search-box { display: block; }
  .mobile-footer { display: block; }
  .copyright-footer .copyright-inner { margin: 0 auto 50px; } }
@media (max-width: 1000px) { .nav-footer, .facebook-footer { width: 100%; }
  .address-box { width: 100%; margin-right: 0; }
  .address-box .service-info { margin-left: 20px; }
  .address-box .company-info { margin-left: 10px; }
  .copyright-box { margin-left: 10px; }
  .facebook-footer { width: 100%; margin: 0 auto; text-align: center; }
  .aboutText { padding: 25px 25px 50px 65px; }
  .aboutText h3 { margin-top: 10px; }
  .aboutText .text { font-size: 18px; } }
@media (max-width: 768px) { h1 { display: none; }
  .inner { width: calc(100% - 20px); margin: 0 10px; }
  .pro-item { width: 47.91667%; float: left; margin-left: 1.04167%; margin-right: 1.04167%; }
  .pro-item .photo { height: 328.27px; }
  .video { margin: 20px 0 0; }
  .about-info { width: 60%; }
  .aboutHead { letter-spacing: 3px; padding-left: 40px; }
  .aboutText { height: auto; padding: 20px 20px 40px 40px; }
  .aboutText .text { font-size: 16px; } }
@media (max-width: 680px) { .address-box .service-info { margin-left: 10px; position: relative; left: inherit; top: inherit; }
  .address-box .service-info li:nth-child(2) .service-time { display: block; width: 100%; padding-left: 77px; box-sizing: border-box; } }
@media (max-width: 640px) { .logo { margin-left: 10px; }
  .inner { width: calc(100% - 20px); margin: 0 10px; }
  .pro-item .photo { height: 266.94px; }
  .video { margin: 20px 0 0; }
  .video-item { width: 97.91667%; float: left; margin-left: 1.04167%; margin-right: 1.04167%; }
  .about { height: auto; }
  .about-info { width: 97.91667%; float: left; margin-left: 1.04167%; margin-right: 1.04167%; position: relative; }
  .about-img { display: none; }
  .aboutHead { padding: 20px 0; text-align: center; } }
@media (max-width: 480px) { .keyTitle { letter-spacing: 6px; }
  .pro-item { width: 97.91667%; float: left; margin-left: 1.04167%; margin-right: 1.04167%; padding: 20px; background: #f2f2f2; border: 1px solid #fff; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); }
  .pro-item .photo { height: auto; }
  .pro-item .show-price { min-height: inherit; }
  .facebook-footer { margin-top: 20px; } }
@media (max-width: 385px) { .proHead { font-size: 36px; padding: 20px 0 10px; }
  .pro-item .photo img { height: auto; }
  .pro-item .title, .pro-item .text { height: auto; min-height: inherit; }
  .homeTitle { letter-spacing: 5px; }
  .aboutHead { letter-spacing: 0; }
  .aboutText { padding: 20px 20px 50px; }
  .aboutText h3 { font-size: 24px; }
  footer { padding-top: 10px; } }
@media (max-width: 320px) { .copyright-box .logo-footer { width: auto; }
  .copyright-box .logo-footer img { width: 180px; } }
.pink { color: #fb7598; }

.pinkBold { color: #fb7598; font-weight: bold; }

.red { color: red; font-weight: bold; }
.red a:link, .red a:visited { color: red; }
.red a:hover, .red a:active { color: #ff7180; }

.textcenter { font-size: 22px !important; display: block !important; text-align: center; margin-bottom: 20px; }

.wheat-color { background: #fcfbf7; }

/* breadcrumb */
.breadcrumb-wrap { width: 100%; padding: 5px; box-sizing: border-box; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.breadcrumb-wrap ul.breadcrumb li { position: relative; display: inline-block; font-size: 12px; line-height: 18px; line-height: 20px; }
.breadcrumb-wrap ul.breadcrumb li:first-child { width: 15px; text-indent: -9999px; text-transform: uppercase; }
.breadcrumb-wrap ul.breadcrumb .home:before { content: ""; position: absolute; top: 1px; left: 0; width: 17px; height: 17px; background: #666; background: url("../images/icon-home.svg") no-repeat 50% 50%; }
.breadcrumb-wrap ul.breadcrumb .home:hover:before { background: url("../images/icon-home-a.svg") no-repeat 50% 50%; }
.breadcrumb-wrap ul.breadcrumb li.icon { color: #999; }
.breadcrumb-wrap ul.breadcrumb li.icon a:link, .breadcrumb-wrap ul.breadcrumb li.icon a:visited { color: #666; }
.breadcrumb-wrap ul.breadcrumb li.icon a:hover, .breadcrumb-wrap ul.breadcrumb li.icon a:active { color: #ff7180; }
.breadcrumb-wrap ul.breadcrumb li.icon:before { content: "/"; color: #ccc; font-size: 12px; padding: 0 5px; }

/* about */
.top-banner { position: relative; height: 150px; overflow: hidden; background-position: 50% 0; }
.top-banner h2 { position: absolute; top: calc(50% - 60px / 2); left: 0; width: 100%; font-family: "Cormorant Infant", serif; text-align: center; font-size: 60px; line-height: 1.2; text-transform: uppercase; color: #fff; }

.bg-herb2 { background: url("../images/bg-herb2.jpg"); }

@media (min-height: 950px) { .bg-herb2 { min-height: 620px; } }
.about-wrap .title { width: 100%; margin: 15px auto 30px; text-align: center; }

.edit-about .section { float: left; background: #efefef url(../images/bg-fabric2.jpg); margin-bottom: 40px; width: 100%; min-height: 340px; }
.edit-about .section .intro { float: left; width: calc(100% - 510px); }
.edit-about .section .intro .info { padding: 20px 5%; box-sizing: border-box; font-size: 18px; line-height: 2; }
.edit-about .section .photo { position: relative; float: left; width: 510px; height: 100%; }
.edit-about .section .photo img { float: left; width: 100%; height: 100%; min-height: 340px; }
.edit-about .section .photo .text { position: absolute; bottom: 0; right: 10px; font-family: "Cormorant Infant", serif; font-size: 36px; line-height: 0.65; color: #fff; text-transform: uppercase; }
.edit-about .section .right { float: right; }
.edit-about h3 { padding: 25px 5% 20px; box-sizing: border-box; color: #ff7180; font-size: 26px; line-height: 1.5; font-weight: bold; background: url(../images/slash.png) 0 bottom repeat-x; }
.edit-about .patent { float: left; width: calc(100% - 37% - 40px); margin-bottom: 40px; background: #efefef url(../images/bg-fabric2.jpg); }
.edit-about .patent ul { float: left; padding: 25px 5% 30px; box-sizing: border-box; }
.edit-about .patent ul li { float: left; display: inline-block; width: calc(100% / 3 - 10px); margin-left: 15px; }
.edit-about .patent ul li:first-child { margin-left: 0; }
.edit-about .patent ul li img { float: left; width: 100%; }
.edit-about .report { float: left; width: 37%; margin-left: 40px; margin-bottom: 40px; background: #efefef url(../images/bg-fabric2.jpg); }
.edit-about .report ul { float: left; padding: 25px 5% 20px; box-sizing: border-box; }
.edit-about .report ul li { float: left; display: inline-block; width: calc(100% / 2 - 10px); margin-left: 15px; }
.edit-about .report ul li:first-child { margin-left: 0; }
.edit-about .report ul li img { float: left; width: 100%; }
.edit-about .report .text { float: left; width: 100%; font-size: 14px; text-align: center; margin-bottom: 20px; }

@media (max-width: 1060px) { .edit-about .section { height: auto; min-height: inherit; }
  .edit-about .section .intro { width: 50%; }
  .edit-about .section .intro .info { line-height: 1.8; }
  .edit-about .section .photo { width: 50%; height: auto; }
  .edit-about .section .photo img { min-height: inherit; } }
@media (max-width: 1024px) { .edit-about .section .intro { width: 60%; height: inherit; }
  .edit-about .section .photo { width: 40%; padding: 5% 10px; box-sizing: border-box; }
  .edit-about .section .photo .text { bottom: calc(10% + 25px); right: inherit; width: calc(100% - 20px); padding: 10px 0; box-sizing: border-box; text-align: center; font-size: 24px; background: rgba(0, 0, 0, 0.3); } }
@media (max-width: 960px) { .edit-about .patent { width: 100%; }
  .edit-about .report { width: 100%; margin-left: 0; } }
@media (max-width: 768px) { .edit-about .section { padding-bottom: 30px; }
  .edit-about .section .intro { width: 100%; }
  .edit-about .section .photo { width: 100%; padding: 0 5%; }
  .edit-about .section .photo .text { width: calc(100% - 10%); bottom: 10px; } }
@media (max-width: 640px) { .edit-about .patent ul li { width: calc(100% / 2 - 10px); margin-bottom: 20px; }
  .edit-about .patent ul li:nth-child(2n) { margin-left: 20px; }
  .edit-about .patent ul li:last-child { margin-left: 0; margin-bottom: 0; } }
@media (max-width: 480px) { .edit-about .section .photo .text { right: inherit; left: 5%; font-size: 24px; }
  .edit-about h3 { text-align: center; padding: 25px 0 20px; } }
@media (max-width: 369px) { .edit-about .patent ul li { width: 100%; }
  .edit-about .patent ul li:nth-child(2n) { margin-left: 0; }
  .edit-about .report ul li { width: 100%; margin-left: 0; margin-bottom: 20px; }
  .edit-about .report ul li:last-child { margin-bottom: 0; } }
.products-wrap { margin-top: 20px; }

/* Elastislide Style */
.rg-image-wrapper { position: relative; min-height: 20px; padding: 0; -moz-box-shadow: 0 0 2px rgba(102, 102, 102, 0.5); -webkit-box-shadow: 0 0 2px rgba(102, 102, 102, 0.5); box-shadow: 0 0 2px rgba(102, 102, 102, 0.5); }

.rg-image { position: relative; text-align: center; line-height: 0px; min-height: 75px; }
.rg-image img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }

.rg-image-nav a { position: absolute; top: 0; left: 0; z-index: 99; overflow: hidden; text-indent: -9000px; cursor: pointer; opacity: 0.2; outline: none; width: 40px; height: 100%; background: #bbb; background: url("../images/nav_thumbs.svg") no-repeat; background-position: 10px 50%; background-size: 20px auto; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.rg-image-nav a.rg-image-nav-next { right: 0; left: auto; -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.rg-image-nav a:hover { opacity: 0.7; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.rg-caption { text-align: center; margin-top: 15px; position: relative; }
.rg-caption p { font-size: 11px; letter-spacing: 2px; font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif; line-height: 16px; padding: 0 15px; text-transform: uppercase; }

.rg-loading { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0px 0px -23px; z-index: 100; background: #aaa url(../images/gallery-images/ajax-loader.gif) no-repeat; background-position: center center; background-size: 32px 32px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; opacity: 0.7; }

/* Elastislide Carousel */
.es-carousel-wrapper { position: relative; background: #fff; padding: 10px 25px; margin-bottom: 20px; margin-top: 10px; }

.es-carousel { overflow: hidden; background: #fff; }
.es-carousel ul { display: none; }
.es-carousel ul li { height: 100%; float: left; display: block; }
.es-carousel ul li a { display: block; -moz-box-shadow: 0 0 2px rgba(102, 102, 102, 0.25); -webkit-box-shadow: 0 0 2px rgba(102, 102, 102, 0.25); box-shadow: 0 0 2px rgba(102, 102, 102, 0.25); border: 1px solid #eee; opacity: 0.6; -webkit-touch-callout: none; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.es-carousel ul li a:hover { opacity: 1.0; border: 1px solid #bbb; }
.es-carousel ul li a img { display: block; border: none; max-height: 100%; max-width: 100%; }
.es-carousel ul li.selected a { opacity: 1.0; border: 1px solid #bbb; }

.es-nav span { position: absolute; top: 50%; left: 0; margin-top: -10px; overflow: hidden; text-indent: -9000px; cursor: pointer; opacity: 0.6; width: 20px; height: 20px; background: url("../images/nav_thumbs.svg") no-repeat 4px center; background-size: 10px auto; }
.es-nav span.es-nav-next { right: 0; left: auto; -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.es-nav span:hover { opacity: 1.0; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; -moz-box-shadow: 0 0 2px rgba(102, 102, 102, 0.5); -webkit-box-shadow: 0 0 2px rgba(102, 102, 102, 0.5); box-shadow: 0 0 2px rgba(102, 102, 102, 0.5); }

@media (max-width: 1024px) { .rg-image-nav a { opacity: 0; } }
.gallery { float: left; width: 38.75%; margin-right: 30px; }

.products-info { float: left; width: calc(100% - 38.75% - 30px); margin-bottom: 30px; background: #efefef url("../images/bg-fabric2.jpg"); -moz-box-shadow: 0 0 3px rgba(102, 102, 102, 0.25); -webkit-box-shadow: 0 0 3px rgba(102, 102, 102, 0.25); box-shadow: 0 0 3px rgba(102, 102, 102, 0.25); }
.products-info .title { padding: 30px 50px 20px; box-sizing: border-box; font-size: 24px; line-height: 1.5; color: #333; font-weight: bold; background: url("../images/slash.png") 0 bottom repeat-x; }
.products-info .products-text { padding: 20px 50px; box-sizing: border-box; }
.products-info .show-price { width: 100%; float: left; padding: 20px 50px; border-top: 1px solid rgba(153, 153, 153, 0.5); box-sizing: border-box; }
.products-info .share { width: 100%; float: left; padding: 0 10px 10px; box-sizing: border-box; text-align: right; display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-align-self: center; -moz-align-self: center; -ms-align-self: center; align-self: center; }
.products-info .share span { line-height: 30px; margin-right: 5px; }
.products-info .share a { margin-right: 5px; }
.products-info .share a img { border: 0; }
.products-info .price { display: block; margin-top: 5px; font-family: 'Century Gothic'; font-size: 24px; color: #ff7180; }
.products-info .price:before { content: '\f155'; }
.products-info .originalPrice { font-size: 16px; color: #999; text-decoration: line-through; }
.products-info .originalPrice:before { content: '原價$'; font-family: "微軟正黑體", sans-serif; font-size: 14px; color: #999; }
.products-info .discount { margin-top: 0; font-size: 36px; font-weight: bold; }
.products-info .discount:before { content: '優惠價$'; font-family: "微軟正黑體", sans-serif; font-size: 14px; font-weight: bold; color: #ff7180; }
.products-info .show-btn { width: 100%; float: left; margin-top: 20px; display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; justify-content: space-between; }
.products-info .add-cart { width: calc(55% - 40px); margin-top: 0; }
.products-info .add-cart select { padding: 4px 5px; border: 0; box-sizing: border-box; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; outline: none; text-align: center; }
.products-info .add-cart input[type=button] { background: #f4dcdc; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
.products-info .add-cart input[type=button]:hover { background: #ff9a27; }
.products-info .checkout { position: relative; width: calc(45% - 40px); height: 40px; padding: 0 20px; padding-right: 30px; box-sizing: border-box; font-family: "微軟正黑體", sans-serif; font-size: 20px; color: #fff; background: #ff7180; font-weight: bold; text-align: center; cursor: pointer; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.products-info .checkout:hover { background: #ff9a27; }
.products-info .checkout:before { content: ""; position: absolute; bottom: 0; right: 5%; width: 30px; height: 32px; background: #fff; background: url("../images/icon-checkout.svg") no-repeat 50% 50%; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.edit-products { font-size: 16px; line-height: 2; }
.edit-products p { font-size: 16px; line-height: 2; color: #404040; }

.edit-products-01, .edit-products-02, .edit-products-03, .edit-products-04 { font-size: 14px; line-height: 1.5; }
.edit-products-01 h3, .edit-products-02 h3, .edit-products-03 h3, .edit-products-04 h3 { font-size: 20px; line-height: 1.5; margin-bottom: 10px; }
.edit-products-01 p, .edit-products-02 p, .edit-products-03 p, .edit-products-04 p { font-size: 16px; line-height: 2; color: #404040; }
.edit-products-01 .picture, .edit-products-02 .picture, .edit-products-03 .picture, .edit-products-04 .picture { text-align: center; }
.edit-products-01 img, .edit-products-02 img, .edit-products-03 img, .edit-products-04 img { max-width: 100%; height: auto; }

@media (max-width: 768px) { .edit-products { font-size: 14px; line-height: 1.5; }
  .edit-products p { font-size: 14px; line-height: 1.5; } }
@media (max-width: 1024px) { .gallery { width: 35%; margin-right: 30px; }
  .products-info { width: calc(100% - 35% - 30px); }
  .products-info .title { padding: 30px 30px 25px; }
  .products-info .products-text { padding: 20px 30px; }
  .products-info .show-price { padding: 20px 30px 30px; }
  .products-info .add-cart { width: 50%; } }
@media (max-width: 768px) { .gallery { width: 35%; margin-right: 15px; }
  .products-info { width: calc(100% - 35% - 15px); }
  .products-info .title { padding: 15px 20px 20px; }
  .products-info .products-text { padding: 15px 20px; }
  .products-info .show-price { padding: 15px 20px 20px; }
  .products-info .add-cart { width: 50%; }
  .products-info .checkout { width: calc(50% - 15px); } }
@media (max-width: 640px) { .products-info .show-btn { display: block; }
  .products-info .add-cart { width: 100%; }
  .products-info .checkout { width: 100%; margin-top: 20px; } }
@media (max-width: 480px) { .gallery { width: 100%; margin-right: 0; }
  .products-info { width: 100%; }
  .edit-products-01 p.pro-video, .edit-products-02 p.pro-video, .edit-products-03 p.pro-video, .edit-products-04 p.pro-video { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
  .edit-products-01 p.pro-video iframe, .edit-products-01 p.pro-video object, .edit-products-01 p.pro-video embed, .edit-products-02 p.pro-video iframe, .edit-products-02 p.pro-video object, .edit-products-02 p.pro-video embed, .edit-products-03 p.pro-video iframe, .edit-products-03 p.pro-video object, .edit-products-03 p.pro-video embed, .edit-products-04 p.pro-video iframe, .edit-products-04 p.pro-video object, .edit-products-04 p.pro-video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } }
.detail-wrap { float: left; width: 100%; margin-bottom: 30px; }
.detail-wrap #products-tabs { float: left; width: 100%; border-bottom: 1px solid rgba(197, 176, 151, 0.25); }
.detail-wrap #products-tabs li { position: relative; float: left; display: inline-block; padding: 15px 20px; padding-left: 50px; border: 1px solid rgba(197, 176, 151, 0.25); border-left: 0; border-bottom: none; font-size: 20px; line-height: 20px; color: #978475; background: #f6f5ee; cursor: pointer; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.detail-wrap #products-tabs li:first-child { border-left: 1px solid rgba(197, 176, 151, 0.25); }
.detail-wrap #products-tabs li.active { padding-bottom: 16px; margin-bottom: -1px; color: #ff7180; background: #fff; }
.detail-wrap #products-tabs li:before { content: ""; position: absolute; top: 15px; left: 20px; width: 25px; height: 20px; background: #c5b097; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.detail-wrap #products-tabs li:nth-child(1):before { background: url("../images/icon-tabs-1.svg") no-repeat 50% 50%; }
.detail-wrap #products-tabs li:nth-child(1):hover { color: #7f6959; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.detail-wrap #products-tabs li:nth-child(1):hover:before { background: url("../images/icon-tabs-1a.svg") no-repeat 50% 50%; }
.detail-wrap #products-tabs li:nth-child(1).active:before { background: url("../images/icon-tabs-1b.svg") no-repeat 50% 50%; }
.detail-wrap #products-tabs li:nth-child(1).active:hover { color: #ff7180; }
.detail-wrap #products-tabs li:nth-child(2):before { background: url("../images/icon-tabs-2.svg") no-repeat 50% 50%; }
.detail-wrap #products-tabs li:nth-child(2):hover { color: #7f6959; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.detail-wrap #products-tabs li:nth-child(2):hover:before { background: url("../images/icon-tabs-2a.svg") no-repeat 50% 50%; }
.detail-wrap #products-tabs li:nth-child(2).active:before { background: url("../images/icon-tabs-2b.svg") no-repeat 50% 50%; }
.detail-wrap #products-tabs li:nth-child(2).active:hover { color: #ff7180; }
.detail-wrap #products-tabs li:nth-child(3):before { background: url("../images/icon-tabs-3.svg") no-repeat 50% 50%; }
.detail-wrap #products-tabs li:nth-child(3):hover { color: #7f6959; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.detail-wrap #products-tabs li:nth-child(3):hover:before { background: url("../images/icon-tabs-3a.svg") no-repeat 50% 50%; }
.detail-wrap #products-tabs li:nth-child(3).active:before { background: url("../images/icon-tabs-3b.svg") no-repeat 50% 50%; }
.detail-wrap #products-tabs li:nth-child(3).active:hover { color: #ff7180; }
.detail-wrap #products-tabs li:nth-child(4):before { background: url("../images/icon-tabs-4.svg") no-repeat 50% 50%; }
.detail-wrap #products-tabs li:nth-child(4):hover { color: #7f6959; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.detail-wrap #products-tabs li:nth-child(4):hover:before { background: url("../images/icon-tabs-4a.svg") no-repeat 50% 50%; }
.detail-wrap #products-tabs li:nth-child(4).active:before { background: url("../images/icon-tabs-4b.svg") no-repeat 50% 50%; }
.detail-wrap #products-tabs li:nth-child(4).active:hover { color: #ff7180; }
.detail-wrap .item-details { float: left; width: 100%; padding: 20px 40px; border: 1px solid rgba(197, 176, 151, 0.25); border-top: 0; box-sizing: border-box; }
.detail-wrap .item-details .faq-list { padding: 10px; }
.detail-wrap .item-details .faq-list:nth-child(even) { background: #fcfbf7; border: 0 solid rgba(197, 176, 151, 0.25); border-width: 1px 0; }
.detail-wrap .item-details .faq-list .faq-item { border-bottom: 0; margin-top: 0; font-size: 16px; font-weight: bold; }
.detail-wrap .item-details .faq-list .faq-answer { margin-top: 0; font-size: 14px; }

@media (max-width: 640px) { .detail-wrap #products-tabs li { padding: 15px 10px; padding-left: 35px; }
  .detail-wrap #products-tabs li:before { left: 5px; }
  .detail-wrap .products-detail .item-details { padding: 10px; }
  .detail-wrap .products-detail .item-details .faq-list { padding: 15px 0; } }
@media (max-width: 480px) { .detail-wrap #products-tabs li { width: 50%; padding-left: 40px; box-sizing: border-box; }
  .detail-wrap #products-tabs li:before { left: 10px; }
  .detail-wrap #products-tabs li:nth-child(3) { border-left: 1px solid rgba(197, 176, 151, 0.25); } }
/* video */
#video-switch { float: left; width: 100%; margin-bottom: 30px; padding: 0px; display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -ms-flex-pack: center; justify-content: center; }
#video-switch li { display: inline-block; border: 1px solid rgba(249, 167, 183, 0.5); color: #f9a7b7; cursor: pointer; padding: 8px 12px; margin: 0 10px; margin-top: 10px; font-size: 18px; background-color: #f8f8f8; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
#video-switch li.active { border: 1px solid rgba(120, 169, 106, 0.5); background: #78a96a; color: #fff; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
#video-switch li.active:hover { background: #78a96a; }
#video-switch li:hover { border: 1px solid rgba(120, 169, 106, 0.5); background: #78a96a; color: #fff; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.video-intro { float: left; width: 100%; }
.video-intro .video-box { position: relative; display: inline-block; width: calc(100% / 3 - 25px); margin-left: calc(20px * 3 / 2); margin-bottom: 40px; padding: 10px; vertical-align: top; background: #fff; box-sizing: border-box; -moz-box-shadow: 0 0 3px rgba(102, 102, 102, 0.5); -webkit-box-shadow: 0 0 3px rgba(102, 102, 102, 0.5); box-shadow: 0 0 3px rgba(102, 102, 102, 0.5); }
.video-intro .video-box:nth-child(3n+1) { margin-left: 0; }
.video-intro .video-box h2 { position: relative; margin: 10px 0 0; max-height: 72px; overflow: hidden; padding-left: 16px; box-sizing: border-box; font-size: 16px; line-height: 1.5; color: #666; }
.video-intro .video-box h2 i { position: absolute; top: 3px; left: 0; }

.btn-box, .btn-wrap .btn-back, .btn-wrap .btn-reset, .btn-wrap .btn-submit, .btn-wrap .btn-login, .btn-wrap .btn-fb, .btn-wrap .btn-buy, .btn-wrap .btn-fill, .btn-wrap .btn-payment, .btn-wrap .btn-finish { position: relative; padding: 8px; border-radius: 5px; font-size: 18px; font-family: "微軟正黑體", sans-serif; cursor: pointer; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.btn-box:before, .btn-wrap .btn-back:before, .btn-wrap .btn-reset:before, .btn-wrap .btn-submit:before, .btn-wrap .btn-login:before, .btn-wrap .btn-fb:before, .btn-wrap .btn-buy:before, .btn-wrap .btn-fill:before, .btn-wrap .btn-payment:before, .btn-wrap .btn-finish:before { content: ""; width: 26px; height: 26px; position: absolute; left: 10px; top: calc(50% - 13px); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.btn-color-pink, .btn-wrap .btn-submit, .btn-wrap .btn-login, .btn-wrap .btn-fill, .btn-wrap .btn-finish { color: #fff; background: #f9a7b7; }
.btn-color-pink:hover, .btn-wrap .btn-submit:hover, .btn-wrap .btn-login:hover, .btn-wrap .btn-fill:hover, .btn-wrap .btn-finish:hover { background: #fb7598; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

.btn-before-pink:hover:before, .btn-wrap .btn-submit:hover:before, .btn-wrap .btn-fill:hover:before, .btn-wrap .btn-finish:hover:before { background: #fff; }
.btn-before-pink:before, .btn-wrap .btn-submit:before, .btn-wrap .btn-fill:before, .btn-wrap .btn-finish:before { background: #fff; }

.btn-color-brown, .btn-wrap .btn-back, .btn-wrap .btn-reset, .btn-wrap .btn-buy, .btn-wrap .btn-payment { color: #4d4d4d; background: #efede1; }
.btn-color-brown:hover, .btn-wrap .btn-back:hover, .btn-wrap .btn-reset:hover, .btn-wrap .btn-buy:hover, .btn-wrap .btn-payment:hover { background: #eae4d3; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.btn-color-brown:hover:before, .btn-wrap .btn-back:hover:before, .btn-wrap .btn-reset:hover:before, .btn-wrap .btn-buy:hover:before, .btn-wrap .btn-payment:hover:before { background: rgba(188, 184, 175, 0.95); }
.btn-color-brown:before, .btn-wrap .btn-back:before, .btn-wrap .btn-reset:before, .btn-wrap .btn-buy:before, .btn-wrap .btn-payment:before { background: #bcb8af; }

.icon-checkout, .btn-wrap .btn-login { padding-left: 8px; }
.icon-checkout:before, .btn-wrap .btn-login:before { top: inherit; left: auto; bottom: 0; right: 5%; width: 30px; height: 32px; background: url("../images/icon-checkout.svg") no-repeat 50% 50%; }

.btn-wrap { float: left; width: 100%; padding: 30px 0; text-align: center; display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -ms-flex-pack: center; justify-content: center; }
.btn-wrap .btn-back { min-width: 200px; padding-left: calc(26px + 8px); }
.btn-wrap .btn-back:before { background: url("../images/icon-back-link.svg") no-repeat 50% 50%; }
.btn-wrap .btn-back:hover:before { background: url("../images/icon-back-a.svg") no-repeat 50% 50%; }
.btn-wrap .btn-reset { min-width: 130px; padding-left: calc(26px + 8px); }
.btn-wrap .btn-reset:before { background: url("../images/icon-clear-link.svg") no-repeat 50% 50%; }
.btn-wrap .btn-reset:hover:before { background: url("../images/icon-clear-a.svg") no-repeat 50% 50%; }
.btn-wrap .btn-submit { min-width: 130px; padding-left: calc(26px + 8px); margin-left: 20px; font-weight: bold; }
.btn-wrap .btn-submit:before { background: url("../images/icon-submit.svg") no-repeat 50% 50%; }
.btn-wrap .btn-submit:hover:before { background: url("../images/icon-submit.svg") no-repeat 50% 50%; }
.btn-wrap.login-wap { -webkit-flex-flow: row wrap; flex-flow: row wrap; }
.btn-wrap .btn-login { min-width: 200px; font-weight: bold; }
.btn-wrap .btn-login:hover:before { width: 35px; height: 35px; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.btn-wrap .btn-forgot { width: 100%; padding-top: 10px; background: transparent; font-size: 12px; font-family: Verdana,Arial,Helvetica,sans-serif; }
.btn-wrap .btn-fb { min-width: 200px; padding-left: 44px; background: #3b5998; color: #fff; }
.btn-wrap .btn-fb:hover { background: #364270; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.btn-wrap .btn-fb:before { width: 40px; height: 40px; top: 0; left: 0; border-right: 1px solid rgba(0, 0, 0, 0.2); background: url("../images/icon-fb2.svg") no-repeat 2px 50%; -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }
.btn-wrap .btn-buy { min-width: 200px; padding-left: calc(26px + 8px); }
.btn-wrap .btn-buy:before { background: url("../images/icon-buy.svg") no-repeat 50% 50%; }
.btn-wrap .btn-buy:hover:before { background: url("../images/icon-buy-a.svg") no-repeat 50% 50%; }
.btn-wrap .btn-fill { min-width: 200px; padding-left: calc(26px + 8px); margin-left: 20px; font-weight: bold; }
.btn-wrap .btn-fill:before { background: url("../images/icon-fill-a.svg") no-repeat 50% 50%; }
.btn-wrap .btn-fill:hover:before { background: url("../images/icon-fill-a.svg") no-repeat 50% 50%; }
.btn-wrap .btn-payment { min-width: 200px; padding-left: calc(26px + 8px); }
.btn-wrap .btn-payment:before { background: url("../images/icon-payment-link.svg") no-repeat 50% 50%; }
.btn-wrap .btn-payment:hover:before { background: url("../images/icon-payment.svg") no-repeat 50% 50%; }
.btn-wrap .btn-finish { min-width: 200px; padding-left: calc(26px + 8px); margin-left: 20px; font-weight: bold; }
.btn-wrap .btn-finish:before { background: url("../images/icon-finish-link.svg") no-repeat 50% 50%; }
.btn-wrap .btn-finish:hover:before { background: url("../images/icon-finish-link.svg") no-repeat 50% 50%; }

/* member */
.top-line { border-top: 1px dashed #ccc; }

.pink-border, .member-wrap, .benefits-wrap .benefits-info, .returned-purchase { border: 3px solid #f9a7b7; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }

.member-wrap { display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; margin: 20px auto; max-width: 950px; padding: 20px; box-sizing: border-box; }
.member-wrap h3.title { margin-bottom: 5px; position: relative; font-size: 24px; line-height: 35px; text-align: center; color: #4d4d4d; }
.member-wrap h3.title img { vertical-align: bottom; padding-right: 5px; }
.member-wrap h3.title.shopp { color: #ff7180; }
.member-wrap .login-info, .member-wrap .login-shopping, .member-wrap .login-forgot { width: 420px; }
.member-wrap .login-info .form-container, .member-wrap .login-shopping .form-container, .member-wrap .login-forgot .form-container { margin-bottom: 0; }
.member-wrap .login-info .btn-wrap, .member-wrap .login-shopping .btn-wrap, .member-wrap .login-forgot .btn-wrap { padding: 15px 0; }
.member-wrap .login-shopping { margin-left: 40px; border-left: 1px solid #ccc; }
.member-wrap .login-shopping .info { padding-top: 40px; text-align: center; font-size: 18px; line-height: 2; font-weight: bold; }
.member-wrap .login-shopping .btn-wrap { padding-top: 40px; }
.member-wrap .login-forgot .form-container .field-label { width: 75px; padding-left: 0; }
.member-wrap .login-forgot .form-container .field-desc { width: calc(100% - 75px); }
.member-wrap .login-forgot .btn-wrap { padding-top: 30px; }
.member-wrap .login-forgot .btn-wrap .btn-reset, .member-wrap .login-forgot .btn-wrap .btn-submit { width: calc(50% - 10px); }

.benefits-wrap { float: left; width: 100%; margin: 20px auto; }
.benefits-wrap h3.title { position: relative; width: 100%; margin-bottom: 20px; font-size: 24px; line-height: 35px; text-align: center; color: #4d4d4d; }
.benefits-wrap h3.title img { vertical-align: bottom; padding-right: 5px; }
.benefits-wrap .benefits-info { float: left; width: 100%; padding: 20px 40px; box-sizing: border-box; font-size: 18px; line-height: 2; }

.member-container { float: left; width: 100%; max-width: 540px; padding: 20px; box-sizing: border-box; font-size: 18px; line-height: 2; }
.member-container .member-title { position: relative; padding-left: 35px; box-sizing: border-box; font-size: 18px; line-height: 30px; color: #ff7180; }
.member-container .member-title:before { content: ''; position: absolute; top: 0; left: 0; width: 30px; height: 30px; background: url("../images/icon-login.svg") no-repeat 50% 50%; }
.member-container .field-desc { max-width: 380px; }

@media (max-width: 768px) { .member-wrap { flex-direction: column-reverse; }
  .member-wrap .login-info, .member-wrap .login-shopping, .member-wrap .login-forgot { width: 100%; }
  .member-wrap .login-shopping { margin-left: 0; border-left: 0; padding-bottom: 10px; margin-bottom: 30px; border-bottom: 1px dashed #ccc; }
  .member-wrap .login-shopping .info { padding: 0; margin-top: 20px; margin-bottom: 15px; }
  .benefits-wrap .benefits-info { padding: 20px; } }
@media (max-width: 480px) { .member-wrap { padding: 15px; }
  .member-wrap .login-info .form-container .field-label, .member-wrap .login-forgot .form-container .field-label { width: 100%; padding-left: 0; }
  .member-wrap .login-info .form-container .field-desc, .member-wrap .login-forgot .form-container .field-desc { width: 100%; }
  .member-wrap .login-shopping .info { font-size: 16px; }
  .benefits-wrap .benefits-info { padding: 15px; font-size: 16px; }
  .member-container { padding: 20px 5px; }
  .member-container .member-title { padding-left: 30px; font-size: 16px; line-height: 25px; }
  .member-container .member-title:before { width: 25px; height: 25px; }
  .member-container .form-container .form-field { padding-top: 10px; padding-bottom: 20px; background: white; }
  .member-container .form-container .form-field:last-of-type, .member-container .form-container .form-field:nth-last-of-type(2) { padding-bottom: 0; border-bottom: 0; }
  .member-container .form-container .form-field .field-label, .member-container .form-container .form-field .field-desc { font-size: 16px; } }
.order-table { display: table; border-collapse: collapse; float: left; width: calc(100% - 20px * 2); margin: 30px 20px; }
.order-table tr { display: table-row; }
.order-table th { display: table-cell; width: calc(100% / 7); height: 40px; background: #efede1; padding: 15px 5px; border: 1px solid #f8f7f0; box-sizing: border-box; font-size: 16px; line-height: 30px; color: #333; font-weight: bold; text-align: center; }
.order-table td { display: table-cell; height: 45px; padding: 15px 5px; border: 1px solid #efede1; box-sizing: border-box; font-size: 16px; line-height: 1.5; color: #4d4d4d; text-align: center; }
.order-table thead { display: table-header-group; }
.order-table tbody { display: table-row-group; }
.order-table tbody tr:nth-child(even) { background: rgba(248, 247, 240, 0.7); }
.order-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.5); }
.order-table a:link, .order-table a:visited { color: #ff7180; }
.order-table a:hover, .order-table a:active { color: #444; }

.order-container { float: left; width: 100%; margin-bottom: 30px; }
.order-container section { float: left; width: 100%; padding-top: 30px; }
.order-container h3 { float: left; width: 100%; padding-bottom: 20px; font-size: 24px; text-align: center; }
.order-container .order-box { float: left; width: 100%; padding: 10px 20px; border: 1px solid #ddd; box-sizing: border-box; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.order-container .order-box.pink-border, .order-container .order-box.member-wrap, .order-container .benefits-wrap .order-box.benefits-info, .benefits-wrap .order-container .order-box.benefits-info, .order-container .order-box.returned-purchase { border: 3px solid #f9a7b7; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.order-container .order-list li { position: relative; line-height: 40px; padding: 0; padding-left: 40px; box-sizing: border-box; font-size: 18px; }
.order-container .order-list li:last-child { padding-bottom: 0; }
.order-container .order-list .form-field { padding-bottom: 12px; }
.order-container .order-list .read { padding: 0; }
.order-container .order-list .read a:link, .order-container .order-list .read a:visited { color: #ff7180; }
.order-container .order-list .read a:hover, .order-container .order-list .read a:active { color: #444; }
.order-container .order-list .bold { font-weight: bold; }
.order-container .order-list .information:before { content: ''; position: absolute; top: 5px; left: 0; width: 30px; height: 30px; background: url("../images/icon-info.svg") no-repeat 50% 50%; }
.order-container .order-list .paymentPink:before { content: ''; position: absolute; top: 5px; left: 0; width: 30px; height: 30px; background: url("../images/icon-payment-a.svg") no-repeat 50% 50%; }
.order-container .order-list .payment:before { content: ''; position: absolute; top: 5px; left: 0; width: 30px; height: 30px; background: url("../images/icon-payment.svg") no-repeat 50% 50%; }
.order-container .order-list .delivery:before { content: ''; position: absolute; top: 5px; left: 0; width: 30px; height: 30px; background: url("../images/icon-delivery.svg") no-repeat 50% 50%; }
.order-container .order-list .person:before { content: ''; position: absolute; top: 5px; left: 0; width: 30px; height: 30px; background: url("../images/icon-person.svg") no-repeat 50% 50%; }
.order-container .order-list .invoice:before { content: ''; position: absolute; top: 5px; left: 0; width: 30px; height: 30px; background: url("../images/icon-invoice.svg") no-repeat 50% 50%; }

.shop-table { display: table; border-collapse: collapse; float: left; width: 100%; }
.shop-table tr { display: table-row; border-bottom: 1px solid #efede1; }
.shop-table th { display: table-cell; height: 40px; padding: 10px 5px; border-bottom: 8px solid #efede1; box-sizing: border-box; font-size: 16px; line-height: 30px; color: #333; font-weight: bold; text-align: center; }
.shop-table th:last-of-type { text-align: right; padding-right: 20px; }
.shop-table td { display: table-cell; height: 45px; padding: 10px 5px; box-sizing: border-box; font-size: 16px; line-height: 20px; color: #4d4d4d; text-align: center; }
.shop-table td:last-of-type { text-align: right; padding-right: 20px; }
.shop-table thead { display: table-header-group; }
.shop-table thead tr th { width: 12%; }
.shop-table thead tr th:nth-child(1) { width: 18%; }
.shop-table thead tr th:nth-child(2) { width: calc(100% - 12% * 3 - 18%); text-align: left; }
.shop-table tbody { display: table-row-group; }
.shop-table tbody tr:nth-child(odd) { background: #fff; }
.shop-table tbody tr:nth-child(even) { background: #fcfbf7; }
.shop-table tbody tr td:nth-child(2) { text-align: left; }
.shop-table tbody tr td:nth-child(1) img { width: 65px; }
.shop-table tbody tr td:nth-child(1) .checkbox { float: left; height: 65px; line-height: 65px; }

.money-table { display: table; border-collapse: collapse; float: left; width: 100%; }
.money-table tr { display: table-row; }
.money-table td { display: table-cell; height: 45px; padding: 10px 5px; box-sizing: border-box; font-size: 16px; line-height: 20px; color: #4d4d4d; text-align: right; }
.money-table thead { display: table-header-group; }
.money-table tbody { display: table-row-group; }
.money-table tbody tr td:nth-child(1) { width: calc(100% - 15% - 18%); }
.money-table tbody tr td:nth-child(2) { width: 15%; text-align: left; }
.money-table tbody tr td:nth-child(3) { width: 18%; padding-right: 20px; }
.money-table tbody tr:last-child td { font-size: 20px; color: #ff7180; font-weight: bold; }

.returned-purchase { float: left; width: calc(100%); max-width: 950px; padding: 8px 10px; background: #fcfbf7; box-sizing: border-box; font-size: 18px; color: #666; outline: none; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.returned-purchase::-webkit-input-placeholder { color: #999; font-family: "微軟正黑體"; border: 0; -moz-box-shadow: inside 0 0 0 #000; -webkit-box-shadow: inside 0 0 0 #000; box-shadow: inside 0 0 0 #000; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.returned-purchase:-moz-placeholder { color: #999; }
.returned-purchase::-moz-placeholder { color: #999; }
.returned-purchase:-ms-input-placeholder { color: #999; }
.returned-purchase:hover { color: #ff7180; box-sizing: border-box; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.returned-purchase:hover::-webkit-input-placeholder { color: #ff7180; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.returned-purchase:hover:-moz-placeholder { color: #ff7180; }
.returned-purchase:hover::-moz-placeholder { color: #ff7180; }
.returned-purchase:hover:-ms-input-placeholder { color: #ff7180; }
.returned-purchase:hover:focus::-webkit-input-placeholder { -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); color: rgba(153, 153, 153, 0.5); }
.returned-purchase:hover:focus:-moz-placeholder { color: rgba(153, 153, 153, 0.5); }
.returned-purchase:hover:focus::-moz-placeholder { color: rgba(153, 153, 153, 0.5); }
.returned-purchase:hover:focus:-ms-input-placeholder { color: rgba(153, 153, 153, 0.5); }

.shopping-process { display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding: 10px 10px 0; box-sizing: border-box; }
.shopping-process li { position: relative; width: 100px; margin-right: 60px; padding-top: 60px; text-align: center; font-size: 16px; font-weight: bold; box-sizing: border-box; }
.shopping-process li .step { font-size: 14px; line-height: 24px; color: #f9a7b7; }
.shopping-process li:before { width: 100%; height: 60px; content: ''; position: absolute; top: 0; left: 0; background: url("../images/icon-login-a.svg") no-repeat 50% 50%; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.shopping-process li:after { width: 16px; height: 30px; content: ''; position: absolute; top: 25px; right: -40px; background: url("../images/icon-next-a.svg") no-repeat 50% 50%; }
.shopping-process li:last-of-type { margin-right: 0; }
.shopping-process li:last-of-type:after { display: none; }
.shopping-process li.active { color: #333; }
.shopping-process li.active:before { background: url("../images/icon-login.svg") no-repeat 50% 50%; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.shopping-process li:nth-of-type(2):before { background: url("../images/icon-payment-o.svg") no-repeat 50% 50%; }
.shopping-process li:nth-of-type(2).active:before { background: url("../images/icon-payment-a.svg") no-repeat 50% 50%; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.shopping-process li:nth-of-type(3):before { background: url("../images/icon-write.svg") no-repeat 50% 50%; }
.shopping-process li:nth-of-type(3).active:before { background: url("../images/icon-write-a.svg") no-repeat 50% 50%; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.shopping-process li:nth-of-type(4):before { background: url("../images/icon-finish.svg") no-repeat 50% 50%; }
.shopping-process li:nth-of-type(4).active:before { background: url("../images/icon-finish-a.svg") no-repeat 50% 50%; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }

/* cart */
.cart-wrap { display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; margin: 20px auto; max-width: 950px; }

.shop-return thead tr th:nth-child(1) { width: 18%; }
.shop-return thead tr th:nth-child(2) { width: calc(100% - 12% * 3 - 18% - 60px); }
.shop-return thead tr th:last-child { width: 60px; }
.shop-return .number { padding: 5px 10px; border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-size: 16px; outline: none; text-align: center; }

.coupon-container { float: left; width: 100%; text-align: left; }
.coupon-container .item { float: left; display: inline-block; box-sizing: border-box; font-size: 16px; line-height: 40px; }
.coupon-container .item:first-child { padding-right: 10px; color: #ff7180; font-weight: bold; }
.coupon-container .item:nth-child(2) { padding-right: 5px; }
.coupon-container .item:nth-child(3) { width: 250px; }
.coupon-container .item .field-coupon { float: left; width: 180px; padding: 8px 0 8px 5px; box-sizing: border-box; background: #fff; border: 1px solid #f9a7b7; font-size: 16px; color: #666; -moz-border-radius: 5px 0px 0px 5px; -webkit-border-radius: 5px; border-radius: 5px 0px 0px 5px; outline: none; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.coupon-container .item .field-coupon::-webkit-input-placeholder { color: #999; font-family: "微軟正黑體"; border: 0; -moz-box-shadow: inside 0 0 0 #000; -webkit-box-shadow: inside 0 0 0 #000; box-shadow: inside 0 0 0 #000; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.coupon-container .item .field-coupon:-moz-placeholder { color: #999; }
.coupon-container .item .field-coupon::-moz-placeholder { color: #999; }
.coupon-container .item .field-coupon:-ms-input-placeholder { color: #999; }
.coupon-container .item .field-coupon:hover { color: #ff7180; box-sizing: border-box; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.coupon-container .item .field-coupon:hover::-webkit-input-placeholder { color: #ff7180; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.coupon-container .item .field-coupon:hover:-moz-placeholder { color: #ff7180; }
.coupon-container .item .field-coupon:hover::-moz-placeholder { color: #ff7180; }
.coupon-container .item .field-coupon:hover:-ms-input-placeholder { color: #ff7180; }
.coupon-container .item .field-coupon:hover:focus::-webkit-input-placeholder { -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); color: rgba(153, 153, 153, 0.5); }
.coupon-container .item .field-coupon:hover:focus:-moz-placeholder { color: rgba(153, 153, 153, 0.5); }
.coupon-container .item .field-coupon:hover:focus::-moz-placeholder { color: rgba(153, 153, 153, 0.5); }
.coupon-container .item .field-coupon:hover:focus:-ms-input-placeholder { color: rgba(153, 153, 153, 0.5); }
.coupon-container .item .btn-check { float: left; padding: 8px 10px; box-sizing: border-box; background: #f9a7b7; border: 1px solid #f9a7b7; font-size: 16px; color: #fff; font-weight: bold; font-family: "微軟正黑體", sans-serif; -moz-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px; border-radius: 0px 5px 5px 0px; }

.transport { float: left; width: 100%; margin-bottom: 10px; }
.transport .delivery_text { position: relative; font-size: 18px; font-weight: bold; color: #ff7180; padding: 5px 10px; padding-left: 40px; box-sizing: border-box; }
.transport .delivery_text:before { content: ''; position: absolute; top: 2px; left: 0; width: 30px; height: 30px; background: url('data:image/svg+xml;utf8,<svg id="delivery" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35"><defs><style>.cls-1{fill:#ff7180;}.cls-2{fill:#fff;}</style></defs><title>icon-delivery</title><circle class="cls-1" cx="17.5" cy="17.5" r="17.5"/><path class="cls-2" d="M8.91,18.88a2.19,2.19,0,1,0,2.19,2.19,2.19,2.19,0,0,0-2.19-2.19h0Zm0,2.92a0.73,0.73,0,1,1,.73-0.73,0.73,0.73,0,0,1-.73.73h0Zm0,0" transform="translate(2.5 2.66)"/><path class="cls-2" d="M21.23,18.88a2.19,2.19,0,1,0,2.19,2.19,2.19,2.19,0,0,0-2.19-2.19h0Zm0,2.92A0.73,0.73,0,1,1,22,21.08a0.73,0.73,0,0,1-.73.73h0Zm0,0" transform="translate(2.5 2.66)"/><path class="cls-2" d="M25.7,19H26V13.17a2,2,0,0,0-.5-0.81L22.9,9.22A1.19,1.19,0,0,0,22.06,9H18V6.85A1,1,0,0,0,17.56,6H6.33C5.33,6,5,7.21,5,8.2V19H4.29C4,19,4,18.81,4,19.06v1.57C4,20.88,4.05,21,4.3,21H5.84a2.9,2.9,0,0,1,3.07-3.07A2.9,2.9,0,0,1,12,21h6.17a2.9,2.9,0,0,1,3.07-3.07A2.9,2.9,0,0,1,24.3,21h1.39c0.25,0,.31-0.12.31-0.37V19.06c0-.24-0.06-0.06-0.3-0.06h0ZM19,13V10h2a1.24,1.24,0,0,1,.68.53L23.39,13H19Zm0.16,0.06" transform="translate(2.5 2.66)"/></svg>'); }
.transport .delivery_area { padding: 5px 10px; border: 1px solid #ccc; box-sizing: border-box; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-size: 16px; outline: none; text-align: center; }

.payment-table { display: table; border-collapse: collapse; float: left; width: 100%; }
.payment-table tr { display: table-row; height: 40px; border-bottom: 1px solid #efede1; text-align: left; }
.payment-table tr:last-child { border: 0; }
.payment-table th { display: table-cell; width: 200px; padding: 10px; box-sizing: border-box; font-size: 18px; line-height: 30px; color: #333; font-weight: bold; }
.payment-table td { display: table-cell; width: calc(100% - 200px); padding: 10px; box-sizing: border-box; font-size: 16px; line-height: 20px; color: #4d4d4d; }
.payment-table td span { line-height: 36px; }
.payment-table tbody { display: table-row-group; }
.payment-table tbody tr:nth-child(odd) { background: #fff; }
.payment-table tbody tr:nth-child(even) { background: #fcfbf7; }
.payment-table select { padding: 5px 10px; border: 1px solid #ccc; box-sizing: border-box; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-size: 16px; outline: none; text-align: center; }
.payment-table .delivery { padding: 5px 10px; border: 1px solid #ccc; box-sizing: border-box; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-size: 16px; outline: none; text-align: center; }

.payment-list li { list-style-type: disc; margin: 5px 0; margin-left: 20px; padding-left: -16px; box-sizing: border-box; font-size: 16px; line-height: 30px; }

@media (max-width: 730px) { .money-table tbody tr td:nth-child(1) { width: calc(100% - 30% - 14%); }
  .money-table tbody tr td:nth-child(2) { width: 30%; text-align: center; }
  .money-table tbody tr td:nth-child(3) { width: 14%; text-align: center; } }
@media (max-width: 480px) { .order-container .order-box { padding: 5px; }
  .order-container .order-list li { padding-left: 25px; font-size: 16px; line-height: 30px; }
  .order-container .order-list li:before { top: 0 !important; width: 22px !important; }
  .order-table { margin: 30px 0 0; width: 100% !important; }
  .order-table thead, .order-table tbody, .order-table th, .order-table td, .order-table tr { display: block; }
  .order-table thead tr { display: none; }
  .order-table tbody tr { float: left; margin-bottom: 30px; border: 3px solid rgba(249, 167, 183, 0.5) !important; box-sizing: border-box; }
  .order-table tbody tr:last-of-type { margin-bottom: 0; }
  .order-table tbody tr td { float: left; position: relative; width: 100% !important; padding: 10px; padding-left: 100px; border: none !important; border-bottom: 1px solid rgba(249, 167, 183, 0.25) !important; box-sizing: border-box; font-size: 16px; text-align: left; }
  .order-table tbody tr td:before { float: left; width: 80px; content: attr(data-title); position: absolute; top: 0; left: 10px; font-size: 16px; font-weight: bold; color: #444; padding: 10px 0; border-right: 1px solid rgba(249, 167, 183, 0.25) !important; box-sizing: border-box; }
  .order-table tbody tr td:last-of-type { border-bottom: 0 !important; }
  .order-table tbody tr td:nth-child(1) { background: rgba(249, 167, 183, 0.25); }
  .order-table tbody tr td:nth-child(5) { font-weight: bold; color: #ff7180; }
  .shop-table { display: block; width: calc(100% - 10px); margin: 10px 5px 0; }
  .shop-table thead, .shop-table tbody, .shop-table th, .shop-table td, .shop-table tr { display: block; }
  .shop-table thead tr { display: none; }
  .shop-table tbody tr { float: left; margin-bottom: 20px; border: none !important; border: 1px solid rgba(249, 167, 183, 0.5) !important; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
  .shop-table tbody tr:last-of-type { margin-bottom: 0; }
  .shop-table tbody tr td { float: left; position: relative; width: 100% !important; height: 100%; padding: 10px; padding-left: 40px; border: none !important; border-bottom: 1px solid rgba(249, 167, 183, 0.25) !important; box-sizing: border-box; font-size: 14px; text-align: center; }
  .shop-table tbody tr td:before { float: left; width: 65px; height: 100%; content: attr(data-title) ":"; position: absolute; top: 0; left: 10px; padding: 10px 0; border-right: 1px solid rgba(249, 167, 183, 0.25) !important; box-sizing: border-box; font-size: 14px; font-weight: bold; color: #444; text-align: center; }
  .shop-table tbody tr td:last-of-type { font-size: 16px; border-bottom: 0 !important; text-align: center; }
  .shop-table tbody tr td:nth-child(1) img { width: 160px; }
  .shop-table tbody tr td:nth-child(1), .shop-table tbody tr td:nth-child(2) { padding-left: 0; text-align: center; }
  .shop-table tbody tr td:nth-child(1):before, .shop-table tbody tr td:nth-child(2):before { display: none; }
  .shop-table tbody tr td:nth-child(1) { border-bottom: 0 !important; }
  .shop-table tbody tr td:nth-child(1) .checkbox { height: 40px; line-height: 40px; width: 100%; }
  .shop-table tbody tr td:nth-child(1) .checkbox:after { content: "取消 / 退貨"; font-size: 18px; font-weight: bold; }
  .shop-table tbody tr td:nth-child(2) { font-size: 16px; font-weight: bold; }
  .shop-table tbody tr td:nth-child(5) { font-weight: bold; color: #ff7180; text-align: center; }
  .money-table tbody, .money-table th, .money-table td, .money-table tr { display: block; }
  .money-table tbody { padding: 10px; box-sizing: border-box; }
  .money-table tbody tr { float: left; width: 100%; border-bottom: 1px solid rgba(249, 167, 183, 0.25); }
  .money-table tbody tr:last-of-type { border-bottom: 0; }
  .money-table tbody tr:last-of-type td { padding: 15px 0; text-align: center; }
  .money-table tbody tr td { float: left; width: 50% !important; height: auto; padding: 10px 0; }
  .money-table tbody tr:nth-child(1) td:nth-child(1), .money-table tbody tr:nth-child(2) td:nth-child(1), .money-table tbody tr:nth-child(4) td:nth-child(1), .money-table tbody tr:nth-child(5) td:nth-child(1), .money-table tbody tr:nth-child(6) td:nth-child(1) { display: none; }
  .money-table tbody tr:nth-child(3) td:nth-child(1) { width: 100% !important; }
  .coupon-container { float: none; width: 250px !important; margin: 0 auto; text-align: center; }
  .payment-table tbody, .payment-table th, .payment-table td, .payment-table tr { display: block; height: auto; }
  .payment-table tbody tr { float: left; }
  .payment-table tbody th, .payment-table tbody td { width: 100% !important; }
  .btn-wrap .btn-buy, .btn-wrap .btn-fill, .btn-wrap .btn-finish { min-width: 145px; }
  .btn-wrap .btn-payment { min-width: 155px; } }
/* shopping-intro */
.shopping-info { width: 100%; max-width: 895px; margin: 0 auto; margin-top: 30px; }
.shopping-info li { position: relative; float: left; margin-bottom: 20px; padding-left: 35px; padding-bottom: 20px; border-bottom: 1px solid #ddd; box-sizing: border-box; font-size: 16px; }
.shopping-info li h3 { position: relative; padding-bottom: 10px; font-size: 24px; line-height: 30px; font-weight: bold; color: #ff7180; }
.shopping-info li h3:before { width: 30px; height: 30px; content: '1'; position: absolute; top: 0; left: -35px; font-size: 24px; color: #fff; font-weight: bold; text-align: center; background: #ff7180; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
.shopping-info li p { margin-bottom: 10px; }
.shopping-info li img { width: 100%; }
.shopping-info li:nth-of-type(1) h3:before { content: "1"; }
.shopping-info li:nth-of-type(2) h3:before { content: "2"; }
.shopping-info li:nth-of-type(3) h3:before { content: "3"; }
.shopping-info li:nth-of-type(4) h3:before { content: "4"; }
.shopping-info li:nth-of-type(5) h3:before { content: "5"; }
.shopping-info li:nth-of-type(6) h3:before { content: "6"; }
.shopping-info li:nth-of-type(7) h3:before { content: "7"; }

@media (max-width: 480px) { .shopping-process li { margin-right: 30px; }
  .shopping-process li:after { width: 10px; height: 30px; top: 16px; right: -20px; } }
/* faq */
.left-wrap { float: left; width: 250px; margin-top: 20px; padding-right: 30px; box-sizing: border-box; }
.left-wrap .widget-title { float: left; width: 100%; padding: 6px 20px; border-left: 8px solid #888; box-sizing: border-box; background: #f8f7f0; font-size: 18px; line-height: 1.5; color: #555; font-weight: bold; }
.left-wrap .custom-categories { float: left; position: relative; margin-top: 20px; padding-left: 12px; box-sizing: border-box; }
.left-wrap .custom-item { position: relative; padding: 10px 0; padding-left: 22px; box-sizing: border-box; font-size: 18px; color: #666; }
.left-wrap .custom-item:before { content: "\f105"; color: #ff7180; font-size: 18px; line-height: 16px; font-weight: 500; position: absolute; top: calc(50% - 16px / 2); left: 0; width: 16px; height: 16px; background: #e6e6e6; padding-left: 6px; box-sizing: border-box; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }

.right-wrap { position: relative; float: left; width: calc(100% - 250px); margin-top: 20px; }
.right-wrap .widget-title { float: left; width: 100%; padding: 6px 20px; border-left: 8px solid #f9a7b7; box-sizing: border-box; background: #f8f7f0; font-size: 18px; line-height: 1.5; font-weight: bold; }

.faq-list { float: left; width: 100%; position: relative; padding-left: 20px; box-sizing: border-box; }
.faq-list .faq-item { position: relative; margin-top: 20px; padding: 10px 0; padding-left: 40px; border-bottom: 1px solid rgba(197, 176, 151, 0.25); box-sizing: border-box; font-size: 18px; line-height: 1.5; color: #666; }
.faq-list .faq-item:before { content: ""; position: absolute; top: 6px; left: 0; width: 30px; height: 30px; background: url("../images/icon-faq.svg") no-repeat 50% 50%; }
.faq-list .faq-answer { position: relative; margin-top: 8px; padding: 10px 0; padding-left: 40px; box-sizing: border-box; font-size: 18px; line-height: 1.5; color: #666; }
.faq-list .faq-answer:before { content: ""; position: absolute; top: 6px; left: 0; width: 30px; height: 30px; background: url("../images/icon-answer.svg") no-repeat 50% 50%; }

/* news */
.news-list { float: left; width: 100%; }
.news-list .news-item { float: left; width: 100%; background: rgba(245, 243, 234, 0.5); padding: 20px; border-bottom: 1px dashed #ccc; box-sizing: border-box; margin-top: 20px; }
.news-list .news-item .photo { position: relative; width: 33.33333%; float: left; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); }
.news-list .news-item .photo img { float: left; width: 100%; }
.news-list .news-item .rollover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 113, 128, 0.5); opacity: 0; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.news-list .news-item .rollover:hover { opacity: 1; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.news-list .news-item .rollover:hover:before { content: ""; position: absolute; top: calc(50% - 25px); right: calc(50% - 25px); width: 50px; height: 50px; background: url("../images/search-plus.svg"); }
.news-list .news-item .info { width: 66.66667%; float: left; padding-left: 20px; box-sizing: border-box; }
.news-list .news-item .info .title { position: relative; width: 100%; padding-bottom: 10px; box-sizing: border-box; font-size: 20px; line-height: 1.5; font-weight: bold; }
.news-list .news-item .info .title a:link, .news-list .news-item .info .title a:visited { color: #444; }
.news-list .news-item .info .title a:hover, .news-list .news-item .info .title a:active { color: #fbb03b; }
.news-list .news-item .info p { font-size: 16px; line-height: 1.5; color: #555; font-weight: 500; margin-top: 10px; }

.news-date { position: relative; margin-bottom: 15px; padding-left: 20px; box-sizing: border-box; font-size: 13px; line-height: 1; color: #999; }
.news-date:before { position: absolute; top: 0; left: 0; content: ""; width: 14px; height: 14px; background: url("../images/clock.svg") no-repeat 50% 50%; }

.news-wrap { float: left; width: 100%; padding: 30px 0; box-sizing: border-box; }
.news-wrap .title { padding: 6px 20px; border-left: 8px solid #666; box-sizing: border-box; background: #f8f7f0; font-size: 18px; line-height: 1.5; font-weight: bold; margin-bottom: 10px; }
.news-wrap .news-date { margin-left: 30px; padding: 0 20px; }

.post-navigation { float: left; width: 100%; margin-top: 30px; }
.post-navigation:last-child { margin-bottom: 0; }
.post-navigation .nav-links { display: flex; padding: 10px 0; border-top: 1px dashed #ccc; }
.post-navigation .nav-links .fa { color: rgba(38, 43, 46, 0.12); }
.post-navigation .nav-links .fa:hover { color: rgba(38, 43, 46, 0.23); }
.post-navigation .nav-links .back-to-list { width: 30px; }
.post-navigation .nav-links .back-to-list .fa { font-size: 28px; }
.post-navigation .nav-links .meta-nav { margin-bottom: 5px; text-transform: uppercase; font-size: 15px; line-height: 1.5; color: #999; }
.post-navigation .nav-links .screen-reader-text { height: 1px; overflow: hidden; position: absolute !important; width: 1px; }
.post-navigation .back-to-list, .post-navigation .nav-next, .post-navigation .nav-previous { position: relative; display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-flex-flow: column wrap; flex-flow: column wrap; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -ms-flex-pack: center; justify-content: center; text-decoration: none; }
.post-navigation .back-to-list .post-title, .post-navigation .nav-next .post-title, .post-navigation .nav-previous .post-title { font-size: 16px; line-height: 1.5; color: #666; font-weight: bold; }
.post-navigation .back-to-list .post-title:link, .post-navigation .back-to-list .post-title:visited, .post-navigation .nav-next .post-title:link, .post-navigation .nav-next .post-title:visited, .post-navigation .nav-previous .post-title:link, .post-navigation .nav-previous .post-title:visited { color: #444; }
.post-navigation .back-to-list .post-title:hover, .post-navigation .back-to-list .post-title:active, .post-navigation .nav-next .post-title:hover, .post-navigation .nav-next .post-title:active, .post-navigation .nav-previous .post-title:hover, .post-navigation .nav-previous .post-title:active { color: #ff7180; }
.post-navigation .nav-previous { width: 45%; padding-left: 35px; margin-right: 30px; }
.post-navigation .nav-previous i { position: absolute; left: 0; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 42px; }
.post-navigation .nav-previous .post-title { -webkit-align-content: flex-start; -moz-align-content: flex-start; -ms-align-content: flex-start; -ms-flex-align: flex-start; align-content: flex-start; }
.post-navigation .nav-next { width: 45%; padding-right: 35px; margin-left: 30px; text-align: right; }
.post-navigation .nav-next i { position: absolute; right: 0; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 42px; }
.post-navigation .nav-next .post-title { -webkit-align-content: flex-end; -moz-align-content: flex-end; -ms-align-content: flex-end; -ms-flex-align: flex-end; align-content: flex-end; }

.edit-news { float: left; width: 100%; padding: 10px 30px; box-sizing: border-box; }
.edit-news p { font-size: 16px; line-height: 1.5; color: #666; font-weight: 500; margin-top: 10px; }
.edit-news img { max-width: 100%; height: auto; }

/* contact */
.contact-wrap { float: left; width: 100%; padding: 0 5%; box-sizing: border-box; }
.contact-wrap .contact-form { float: left; width: 520px; margin-top: 10px; }
.contact-wrap .contact-form .remark { margin-left: -8px; padding: 0 10px; box-sizing: border-box; font-size: 16px; font-weight: bold; color: #fb7598; }
.contact-wrap .contact-info { float: left; width: calc(100% - 520px); padding: 0 20px; box-sizing: border-box; display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -ms-flex-pack: center; justify-content: center; }
.contact-wrap .contact-info .info-container { display: block; width: 360px; }
.contact-wrap .contact-info .info-container .img-logo { margin-top: 10px; margin-bottom: 30px; }
.contact-wrap .contact-info .info-container .img-logo img { max-width: 130px; }
.contact-wrap .contact-info .info-container li { display: block; height: 30px; margin-bottom: 10px; font-size: 16px; line-height: 20px; font-weight: bold; display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-item-align: center; align-items: center; }
.contact-wrap .contact-info .info-container li:last-child { height: auto; }
.contact-wrap .contact-info .info-container li i { width: 22px; height: 22px; text-align: center; background: #eee; color: #ff7180; padding-top: 2px; font-size: 17px; margin-right: 5px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.contact-wrap .contact-info .info-container li a:link, .contact-wrap .contact-info .info-container li a:visited { color: #ff7180; }
.contact-wrap .contact-info .info-container li a:hover, .contact-wrap .contact-info .info-container li a:active { color: #444; }
.contact-wrap .contact-info .info-container li:nth-last-of-type(1) span:first-child, .contact-wrap .contact-info .info-container li:nth-last-of-type(2) span:first-child, .contact-wrap .contact-info .info-container li:nth-last-of-type(3) span:first-child, .contact-wrap .contact-info .info-container li:nth-last-of-type(4) span:first-child { width: 80px; }
.contact-wrap .contact-info .info-container .office-hours { width: calc(100% - 80px); }
.contact-wrap .contact-info .info-container .tel { font-size: 24px; line-height: 30px; }
.contact-wrap .contact-info .qrcode-container { display: block; width: 360px; padding: 20px 0; box-sizing: border-box; }
.contact-wrap .contact-info .qrcode { float: left; width: calc(50% - 10px); text-align: center; font-size: 13px; margin-bottom: 20px; }
.contact-wrap .contact-info .qrcode:first-child { margin-right: 20px; }
.contact-wrap .contact-info .qrcode img { display: block; width: 100%; max-width: 160px; border: 1px solid rgba(153, 153, 153, 0.5); box-sizing: border-box; margin: 0 0 10px; }
.contact-wrap .contact-info .qrcode a { white-space: pre; }
.contact-wrap .contact-map { float: left; width: 100%; margin: 20px 0; }

.form-container { float: left; margin-bottom: 20px; }
.form-container .form-field { float: left; width: 100%; padding-top: 15px; display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-item-align: center; align-items: center; }
.form-container .form-field.message { display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-align-items: baseline; -moz-align-items: baseline; -ms-align-items: baseline; -ms-flex-item-align: baseline; align-items: baseline; }
.form-container .form-field .label-text { font-size: 18px; color: #555; padding-left: 10px; box-sizing: border-box; }
.form-container .form-field .field-label { position: relative; float: left; width: 110px; padding: 8px 10px; box-sizing: border-box; font-size: 18px; line-height: 1; color: #555; font-weight: bold; text-align: left; }
.form-container .form-field .field-label.required:before { position: absolute; top: 0; left: 0; content: "*"; width: 14px; height: 14px; font-size: 18px; font-weight: bold; color: #fb7598; }
.form-container .form-field .field-desc { float: left; width: calc(100% - 110px); padding: 8px 10px; box-sizing: border-box; font-size: 18px; color: #666; background: #f8f7f0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; outline: none; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.form-container .form-field .field-desc::-webkit-input-placeholder { color: #999; font-family: "微軟正黑體"; border: 0; -moz-box-shadow: inside 0 0 0 #000; -webkit-box-shadow: inside 0 0 0 #000; box-shadow: inside 0 0 0 #000; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.form-container .form-field .field-desc:-moz-placeholder { color: #999; }
.form-container .form-field .field-desc::-moz-placeholder { color: #999; }
.form-container .form-field .field-desc:-ms-input-placeholder { color: #999; }
.form-container .form-field .field-desc:hover { color: #ff7180; box-sizing: border-box; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.form-container .form-field .field-desc:hover::-webkit-input-placeholder { color: #ff7180; -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); }
.form-container .form-field .field-desc:hover:-moz-placeholder { color: #ff7180; }
.form-container .form-field .field-desc:hover::-moz-placeholder { color: #ff7180; }
.form-container .form-field .field-desc:hover:-ms-input-placeholder { color: #ff7180; }
.form-container .form-field .field-desc:hover:focus::-webkit-input-placeholder { -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); color: rgba(153, 153, 153, 0.5); }
.form-container .form-field .field-desc:hover:focus:-moz-placeholder { color: rgba(153, 153, 153, 0.5); }
.form-container .form-field .field-desc:hover:focus::-moz-placeholder { color: rgba(153, 153, 153, 0.5); }
.form-container .form-field .field-desc:hover:focus:-ms-input-placeholder { color: rgba(153, 153, 153, 0.5); }
.form-container .form-field .field-desc.name { width: 180px; margin-right: 15px; }
.form-container .form-field .field-desc.select { padding: 5px 6px; border: 1px solid #ccc; }
.form-container .form-field .field-desc.textarea { width: calc(100% - 95px); max-width: 425px; }
.form-container .form-field .field-desc.ucode { width: 145px; }
.form-container .form-field .field-desc.birthDate { width: 90px; margin-right: 10px; }
.form-container .form-field .field-desc.birthDate:last-of-type { width: 65px; margin-right: 0; }
.form-container .form-field .field-desc.city { width: 95px; margin-right: 10px; }
.form-container .form-field .field-desc.area { width: 125px; margin-right: 10px; }
.form-container .form-field .field-desc.postal { width: 90px; }
.form-container .form-field .field-desc.address { margin-left: 110px; }
.form-container .form-field .field-radio { float: left; font-size: 18px; }
.form-container .form-field .field-radio .radio { margin-right: 10px; }
.form-container .form-field .field-radio .radio:last-child { margin-right: 0; }
.form-container .form-field .getcode { float: left; margin: 5px; height: 30px; }
.form-container .form-field .reset { float: left; height: 30px; margin: 5px 0; }

.itemList { max-width: 780px; margin: 0 auto; padding: 20px; box-sizing: border-box; display: -webkit-flex; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -ms-flex-pack: center; justify-content: center; }
.itemList ul li { display: -webkit-inline-flex; display: -moz-inline-flex; display: -webkit-inline-flex; display: inline-flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; justify-content: space-between; -webkit-flex-flow: column wrap; flex-flow: column wrap; width: 160px; margin: 10px; font-size: 16px; line-height: 2; color: #666; }
.itemList ul li a:link, .itemList ul li a:visited { color: #666; }
.itemList ul li a:hover, .itemList ul li a:active { color: #ff7180; }
.itemList ul li h2 { position: relative; margin-bottom: 10px; padding-left: 30px; padding-bottom: 10px; border-bottom: 1px dashed #ccc; box-sizing: border-box; font-size: 20px; line-height: 1.5; font-weight: bold; color: #444; }
.itemList ul li h2 a:link, .itemList ul li h2 a:visited { color: #444; }
.itemList ul li h2 a:hover, .itemList ul li h2 a:active { color: #ff7180; }
.itemList ul li h2:before { content: '\f105'; position: absolute; top: 5.5px; left: 5px; width: 20px; height: 20px; padding-left: 7.5px; box-sizing: border-box; font-size: 18px; line-height: 20px; color: #fff; background: #ff7180; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
.itemList ul li ul { display: block; }
.itemList ul li ul li { position: relative; display: block; width: 100%; margin: 0; padding-left: 30px; box-sizing: border-box; }

/* media */
@media (max-width: 1024px) { .top-banner h2 { top: calc(50% - 50px / 2); font-size: 50px; }
  .video-intro .video-box { width: calc(100% / 2 - 20px); margin-left: 30px; margin-bottom: 30px; }
  .video-intro .video-box:nth-child(3n+1) { margin-left: inherit; }
  .video-intro .video-box:nth-child(2n+1) { margin-left: 0; }
  /* contact */
  .contact-wrap { padding: 0; } }
@media (max-width: 960px) { #video-switch li { width: 100%; text-align: center; }
  /* faq */
  .left-wrap { width: 100%; padding-right: 0; }
  .left-wrap .custom-item { display: inline-block; margin-right: 10px; }
  .left-wrap .custom-item:last-child { margin-right: 0; }
  .right-wrap { width: 100%; }
  /* contact */
  .contact-wrap { padding: 0; }
  .contact-wrap .contact-form, .contact-wrap .contact-info { width: 50%; } }
@media (max-width: 768px) { #video-switch { display: block; width: auto; }
  #video-switch li { display: block; float: left; width: inherit; }
  /* contact */
  .contact-wrap { padding: 0; }
  .contact-wrap .contact-form { border-bottom: 1px solid #ccc; margin-bottom: 40px; }
  .contact-wrap .contact-form .btn-wrap { margin-bottom: 20px; }
  .contact-wrap .contact-form .btn-wrap .btn-reset, .contact-wrap .contact-form .btn-wrap .btn-submit { width: 50%; }
  .contact-wrap .contact-form, .contact-wrap .contact-info { width: 100%; padding: 0; }
  .contact-wrap .contact-info .qrcode-container { width: 120px; margin-left: 20px; }
  .contact-wrap .contact-info .qrcode { width: 100%; }
  .contact-wrap .contact-form h3 { padding-left: 0; width: 100%; text-align: center; }
  .form-container .form-field .field-desc.textarea { max-width: 636px; } }
@media (max-width: 640px) { /* news */
  .news-list .news-item .photo { width: 100%; }
  .news-list .news-item .info { width: 100%; padding-left: 0; padding-top: 20px; } }
@media (max-width: 480px) { .top-banner { height: 80px; background-size: auto 100%; background-repeat: no-repeat; }
  .top-banner h2 { top: calc(50% - 40px / 2); font-size: 40px; }
  .video-intro { padding: 0 10px; box-sizing: border-box; }
  .video-intro .video-box { width: 100%; margin-left: 0; }
  .post-navigation .nav-next .post-title, .post-navigation .nav-previous .post-title { display: none; }
  /* faq */
  .left-wrap .custom-item { width: 130px; }
  /* contact */
  .contact-wrap .contact-info .info-container li { height: auto; }
  .contact-wrap .contact-info .qrcode-container { width: 360px; margin-left: 0; }
  .contact-wrap .contact-info .qrcode { width: calc(50% - 10px); margin-bottom: 0; }
  .form-container .form-field { display: block; }
  .form-container .form-field .field-radio { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; padding-left: 10px; }
  .form-container .form-field .field-radio .radio { width: 50%; }
  .form-container .form-field .field-label { width: 100%; }
  .form-container .form-field .field-desc { width: 100%; }
  .form-container .form-field .field-desc.textarea { width: 100%; max-width: 316px; }
  .form-container .form-field .field-desc.name { width: 100%; margin-right: 0; }
  .form-container .form-field .field-desc.area { margin-right: 10px; margin-bottom: 10px; }
  .form-container .form-field .field-desc.postal { display: block; }
  .form-container .form-field .field-desc.address { margin-left: 0; }
  .form-container .form-field .field-desc.birthDate:nth-of-type(2) { width: 85px; }
  .form-container .form-field.message { display: block; } }

/*# sourceMappingURL=style.css.map */