body,span,h2,h3{ font-family: Microsoft JhengHei, Microsoft YaHei, Arial,sans-serif ; color: #000}
a{ text-decoration: none}
section{ width: 100%; display: block; position: relative}
.abs{ position: absolute}
.fll{ float: left;}
.flr{ float: right;}
.col-left{ float: left;}
.col-right{ float: right;}
.clear{ clear: both}
.bold{ font-weight: bold;}
.block{ display: block}
.in-blk{ display: inline-block}
.disb{ display: block}
.no-show{ display: none}
.w50{ width: 50%;}
.w33p{ width: 31%; display: inline-block}
.w100p{ width: 100%;}

.mgb-10{ margin-bottom: 10px}
.mgb-20{ margin-bottom: 20px}
.mgb-30{ margin-bottom: 30px}
.mgb-50{ margin-bottom: 50px}
.mgt-10{ margin-top: 10px}
.mgt-20{ margin-top: 20px}
.mgt-30{ margin-top: 30px}
.mgt-40{ margin-top: 40px}
.mgt-50{ margin-top: 50px}
.mgt-50{ margin-top: 50px}
.pgb-30{ padding-bottom: 30px;}
.pgt-20{ padding-top: 20px;}
.pgt-30{ padding-top: 30px;}
.pgt-40{ padding-top: 40px;}
.pgt-50{ padding-top: 50px;}
/*.row{ margin-left: 0; margin-right: 0;}*/

h1{ font-size: 40px; line-height:50px; font-weight: 700; margin-bottom: 30px; display: inline-block;position: relative;}
h2{ font-size: 30px; line-height:40px; font-weight: 700; margin-bottom: 30px; display: inline-block;position: relative;}
h3{ font-size: 26px; line-height: 36px; font-weight: 700; margin-bottom: 30px; display: inline-block }
p{ font-size: 18px;}
a,a:hover{ text-decoration: none; color: #333}
hr{ width: 100%; height: 1px; background: #ddd;}

.btn-0{ background: #fff; display: inline-block; border: 1px solid #ddd;  font-weight: bold; padding: 7px 15px;transition: all 0.5s}
.btn-1,.btn-1:focus{ background: #EDBEB6; display: inline-block; border: 0; color: #fff; font-weight: bold; padding: 7px 15px; text-decoration: none;transition: all 0.5s}
.btn-2{ background: #C6B1C1; display: inline-block; border: 0; color: #fff; font-weight: bold; padding: 7px 15px;transition: all 0.5s}
.btn-3{background: #6b73b3; display: inline-block;color: #dffd; font-weight: bold; padding: 7px 15px;transition: all 0.5s}
.btn-red{ background: red; display: inline-block; border: 0; color: #fff; font-weight: bold; padding: 7px 15px;transition: all 0.5s}
.btn-gray{ background: #999; display: inline-block; border: 0; color: #fff; font-weight: bold; padding: 7px 15px;transition: all 0.5s}

.btn-0:hover,.btn-1:hover,.btn-2:hover,.btn-3:hover,.btn-red:hover,.btn-gray:hover{ opacity: 0.8; transition: all 0.5s}

.color-w{ color: #fff}
.color-bk{ color: #000}

:root {
  --animate-delay: 0.5s;
}
.text-center{text-align: center}
.text-left{ text-align: left}
.slick-dots{ display: none}

body{ font-size: 15px; line-height: 27px;}

.head{ width: 100%; opacity: 1; transition: all 0.2s; display: block; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 6%) }
.head.fadein{ background: #fff; position: fixed; top: 0;z-index: 999}
.logo{ width: 100%; display: inline-block;  margin-top: 10px; text-align: center}
nav{ width: 100%; text-align: center;}
nav span{ display: block; font-size: 14px; color:#231815;  margin-top: 5px; }
nav>div{display: inline-block; position: relative}
nav a{display: inline-block; font-size: 17px;font-weight: 700; border: 0; text-align: center; padding: 0 10px; color: #000 ; transition: all 0.5s;position: relative; padding: 20px 20px;font-family: 'Noto Sans TC', sans-serif; text-decoration: none; line-height: 25px;}
nav a:hover{ transition: all 0.5s; text-decoration: none; color: #d4b5ac}
nav .sub{ position: absolute;z-index: 9; background: #fff; min-width: 170px; text-align:left; display: none;box-shadow: 0 2px 6px 0 rgb(0 0 0 / 6%)}
/*nav >div:hover .sub{ display: block}*/
nav ul >li { width: 170px; display: inline-block; position: relative;}
nav ul li > a{ width: 100%; display: inline-block; padding: 10px 20px; text-align: left; font-size: 15px;}
nav ul li > a:focus{ color: #d4b5ac; text-decoration: none}
nav ul li ol{position: absolute;right: -150px; width: 150px; background: #f6f6f6; display: none; top:0}
nav ul li ol li> a{ width: 100%; display: inline-block; color: #999; font-weight: normal}
nav ul li:hover ol{display: block}
.head.fadein .logo img{ width: 70px;}
.head.fadein nav a{padding: 5px 20px 10px 20px;}

.topnav{ position: absolute; right: 20px; top: 15px}
.topnav >div{display: inline-block}
/*.topnav >div:last-child{display: none;}*/
.topnav img{ width: 25px;}
.topcart{ position: absolute; top: 30px; right: 20px;z-index: 9; background: #fff; width: 300px; display: none;}
.topnav .topcart img{ width: 80px; margin-right: 10px;float: left;}
.topnav .topcart .pdwp{ width: 100%; padding: 10px; display: inline-block; margin-bottom: 5px;}
.topnav .topcart span{float: left;}
.topnav .topcart .btn-1{ width: 100%; text-align: center;}
.srchbox{background: #000; position: absolute; top: 30px; right: 0px; background: #fff; width: 200px; text-align: right;display: none;}
.srchbox input{ width: 130px; padding: 0px 10px;}
.srchbox .btn-1{ padding: 2px 8px;}
.ft-bkepaper{ margin-top: 10px; display: none;}
.ft-bkepaper input{ border: 0; padding: 5px 20px; margin-right: 10px; color: #333}
.ft-bkepaper button{ border: 0; padding: 5px 20px; }
.infotips{}
.showcart{ position: relative}
.showcart i{ position: absolute; top: -17px; right:-8px;width: 20px; height: 20px; line-height: 20px; border-radius: 99em; text-align: center; background: #EDBEB6; color: #fff; }
.fixtop{ width: 100%; background: #EDBEB6; color: #fff; text-align: center; padding: 5px 10px}

.ix-slider{ margin-bottom: 30px;}
.pdlist{}
.pdlist .item { margin-bottom: 20px;}
.pdlist .item .imgs{ position: relative}
.pdlist .pd01{ width: 100%; display: inline-block;}
.pdlist .pd02{ width: 100%; display: none; }
.pdlist .item:hover .pd02{display: inline-block;}
.pdlist .item:hover .pd01{display: none;}
.pdlist .item .addcart{ display: none; background: #EDBEB6;width: 100%; position: absolute; bottom: 0px; color: #fff; text-align: center}
/*.pdlist .item:hover .addcart{ display: block; }*/
.pdlist .item .title{ margin-top: 10px; font-size: 18px; text-align: center; display: block}
.pdlist .item .price{ font-size: 15px; text-align: center; display: block; color: #EDBEB6; font-weight: bold;}
.pdlist .item .orgi-price{ font-size: 15px; text-align: center; display: block; color: #999; font-weight: bold; text-decoration: line-through}

.pagination { width: 100%; text-align: center}
.pagination a{ display: inline-block; padding: 3px 10px; font-size: 15px; color: #000; text-decoration: none}
.pagination a.active,.pagination a:hover{ background: #EDBEB6; color: #fff;}

.breadcrumbs{ background: #f1f1f1;font-size: 12px; padding: 5px 10px; color: #666; font-weight: bold;margin-bottom: 30px;}
.breadcrumbs a{ color: #EDBEB6; }

/*產品lsit*/
.pdnav{ padding: 0px 10px 0 10px}
.pdnav li{ padding: 7px 0; width: 100%;display: inline-block}
.pdnav a{font-size: 16px; font-weight: 500; font-family: 'Noto Sans TC', sans-serif; }
.pdnav a:hover,.pdnav a:focus{ color: #EDBEB6}
.pdnav >li a{}
.pdnav ol { margin-left: 20px;}
.pdnav ol li {}
.pdnav ol li a{ color: #999}

/*產品內頁*/
.pdview{}
.pdslidernav{ width: 100px; float: left; margin-right: 15px; padding: 0}
.pdslidernav .slick-list{ padding: 0 !important}
.pdslidernav .slick-slide{ margin: 5px 0; cursor: pointer}
.pdslidernav .slick-current{border: 2px solid #EDBEB6 !important}
.pdslidernav .slick-prev{top: -10px; left: 0; width: 100%; background: #ddd;}
.pdslidernav .slick-prev:before{ content: '▲';font-size: 12px; color: #333}
.pdslidernav .slick-next{top: inherit;bottom: -28px; left: 0; right: 0;width: 100%; background: #ddd}
.pdslidernav .slick-next:before{content: '▼';font-size: 12px;color: #333; }
.pdslidernav .slick-slide{ width: 100px !important;}

.pdslider{ width: 500px; float: left;}
.pdview .pdinfo{ border-bottom: 1px solid #ddd; padding-bottom: 20px;}
.pdview .pirce{ font-weight: bold; font-size: 20px; margin: 20px 0}
.pdview .note{ background: #888; color: #fff; padding: 5px 10px; border-radius: 5px; font-weight: bold; margin-bottom: 20px;}
.pdview .select{margin-bottom: 20px;}
.pdview .select select{ width: 100%; background: #eee; color: #000; font-weight: bold; border: 0; padding: 10px }
.pdview .quantity{ text-align: center; margin-bottom: 20px;}
.pdview .quantity input{ width: 30px; text-align: center; border: 0}
.pdview .quantity span{ font-weight: bold; font-size: 22px; cursor: pointer}
.pdview .btns{}
.pdview .btns a{ width: 48%; display: inline-block; padding: 15px 0; text-align: center; font-weight: bold; color: #fff;}
.pdview .btns a:hover{ opacity: 0.8}
.pdview .btns a.add{ background: #EDBEB6}
.pdview .btns a.buy{ background: #C6B1C1}
.pdview .buynow{ width: 100%; text-align: center; padding: 15px 0}


.pdtab{ width: 100%; border-bottom: 1px solid #ddd; margin-top: 30px;}
.tabtn{ padding-bottom:10px; width: 33%; text-align: center; display: inline-block; position: relative; cursor: pointer; font-weight: bold; color: #666}
.tabtn.active{ border-bottom: 4px solid #EDBEB6; position: relative; bottom: -2px; color: #000}
.tb-cont{ padding: 30px 0; min-height: 300px;}
.tbc02,.tbc03{ display: none}
.relatedpd{ background: #f8f8f8; padding: 30px 30px}

/*登入*/
.login{ width: 600px; margin: 100px auto; border: 1px solid #ddd;}
.login .tabtn{ width: 49%; display: inline-block} 
.login .tb-cont{ padding: 30px; box-sizing: border-box}
.login .tb-cont input{ width: 100%; border: 1px solid #eee; padding: 10px; margin-bottom: 10px}
.login .btn-1{ width: 100%; margin-bottom: 10px;}
.login .smallnote{ font-size: 12px;}
.login .tb-cont input[type=checkbox]{ width: auto; margin-right: 5px; margin-bottom: 10px;}



.memberct{ min-height: 830px;}
.memberct .tabtn{ width: 49%; display: inline-block} 
.memberct .norder-tip{ text-align: center}
.memberct .norder-tip a{ margin-top: 30px;}
.memberct .tbc01{ width: 650px; margin: 0 auto}
.memberct label{ min-width: 100px; display: inline-block}
.memberct button{ margin-right: 5px;}
.memberct button.btn-red{ border-radius: 99em; padding: 0 9px; font-size: 12px;}
.memberct .tb-cont input[type=radio]{ width: auto; margin-right: 5px; display: inline-block}
.memberct .tbc01 form > div{ margin-bottom: 15px;}
.memberct .tbc01 .form > div{ margin-bottom: 15px;}
.memberct .tbc01 input{width:calc(100% - 120px); border: 1px solid #ddd; padding:5px 15px;}
.memberct .tbc01 input[type=checkbox]{ width: auto; margin-right: 5px; margin-bottom: 10px;}
.memberct .tbc01 select{width:calc(100% - 120px); background: #eee; color: #000; font-weight: bold; border: 0; padding: 10px ; }
.memberct .tbc01 .birth select{ width: 100px; background: #eee}
.memberct .newaddress{ display: none;}
.memberct .newaddress >div{ margin-bottom: 15px;}
.memberct .smallnote{ margin-left: 100px;}

.memberct .ordertb{ width: 90%; margin: 0 auto;}
.memberct .ordertb .head { width: 100%; display: inline-block}
.memberct .ordertb .head >div{ width: 25%; padding: 10px 15px; background: #eee; margin: 0;float: left;}
.memberct .ordertb .ctent{ width: 100%; display: inline-block}
.memberct .ordertb .ctent >div{ width: 25%; padding: 10px 15px; border-bottom: 1px solid #ddd; margin: 0;float: left;}
.memberct .cartdtl table{ width: 400px;float: right;}
.memberct .cartdtl table tr:last-child{border: 0}
.memberct .shopping-cart{ margin-top: 30px; display: none;}
.memberct .cartdtl .atm{ margin-bottom: 10px;}
.memberct .cartdtl .atm span:first-child{font-weight: bold}
.memberct .cartdtl .store span:first-child{font-weight: bold}

.memberct .opdt{font-weight: bold; color: #EDBEB6}



/*結帳*/
.checkout{width: 90%; margin: 50px auto}
.checkout .ti{ background: #F6F6F6; font-weight: bold; font-size: 18px; padding: 8px 15px}
.checkout table thead td{border-bottom: 1px solid #ddd; font-weight: bold;}
.checkout table td{padding: 5px 10px; vertical-align: top}
.checkout table td .pdimg{float: left; margin-right: 5px;}
.checkout table td .note{ background: #888; color: #fff; padding: 5px 10px; border-radius: 5px; font-weight: bold; margin-bottom: 20px; font-size: 12px; display: inline-block; margin-top: 10px;}

.checkout-nav{ text-align: center; margin-bottom: 30px;}
.checkout-nav .step{ width: 240px; display: inline-block}
.checkout-nav .step em{width:40px; height:40px; padding-top: 6px; display: inline-block;border-radius: 99em; background: #ddd;  color: #000; font-weight: bold; font-size: 17px; font-family: arial}
.checkout-nav .step span{display: block; font-size: 14px; margin-top: 5px;}
.checkout-nav .step.active em{ background:#EDBEB6; color: #fff; }

.shopping-cart{ border: 1px solid #ddd; margin-bottom: 30px; display: inline-block; width: 100%;}
.shopping-cart .quantity span{font-weight: bold; font-size: 22px; cursor: pointer}
.shopping-cart .quantity input{ width: 65px; max-width: 100%;}
.shopping-cart table{ width: 100%;}
.shopping-cart table thead{ background: #efefef}
.shopping-cart table thead td{border-bottom: 1px solid #ddd; font-weight: bold;}
.shopping-cart table tr{ border-bottom: 1px solid #ddd;}
.shopping-cart table td{padding: 5px 10px; vertical-align: top}
.shopping-cart table td .pdimg{float: left; margin-right: 5px;}
.shopping-cart table td .pdname{ font-weight: bold;}
.shopping-cart table td .flt{ color: #666}
.shopping-cart table td .note{ background: #888; color: #fff; padding: 2px 5px; border-radius: 5px; font-weight: bold; margin-bottom: 10px;font-size: 12px; display: inline-block; margin-top: 0px;}
.shopping-cart table .btn-red{ border-radius: 99em; padding: 0 9px; font-size: 12px;}

.addmorepd{ margin-bottom: 20px; margin-top: 20px;}
.addmorepd .morepds{margin-bottom: 30px; margin-top: 20px}
.addmorepd .morepds .list{ padding: 10px; width: 200px; display: inline-block}
.addmorepd .imgs img{ width: 100%}

.slick-prev:before, .slick-next:before{ color: #999}
.pd-cont{ width: 800px;}
.pd-cont .title{ font-size: 22px; font-weight: bold; width: 100%; display: block; margin-bottom: 10px;}
.pd-cont .des{ margin-bottom: 10px; display: block}
.pd-cont .price{display: block; font-size: 18px; color: #b23723; font-weight: bold;}
.pd-cont .titt{ background:#F6F6F6; font-weight: bold; margin-bottom: 20px; padding: 10px}
.pd-cont .morecont{}



.order-form{border: 1px solid #ddd; }
.order-form .item{padding: 20px }
.order-form .item select{ width: 100%; background: #eee; color: #000; font-weight: bold; border: 0; padding: 10px }
.order-form .item .note{ font-size: 13px; margin-top: 10px;}

.order-summary{border: 1px solid #ddd; }
.order-summary table{width: 100%; }
.order-summary .order-coupon input{ padding: 5px 10px; margin-right: 10px;}
.order-summary .order-coupon button{}
.order-summary .btn-1{ width: 100%; margin-bottom: 10px;}

.checkout .cartdtl{display: none}
.checkout .cartdtl table{ width: 400px;float: right;}
.checkout .cartdtl table tr:last-child{border: 0}
.checkout .summary-header-total-price{ text-align: center; font-weight: bold; padding: 10px 0}


.customer-form{border: 1px solid #ddd; margin-bottom: 30px;}
.customer-form .item{ padding: 10px }
.customer-form label{ width: 100%; display: inline-block}
.customer-form input{ width: 100%; display: inline-block; border: 1px solid #ddd; padding: 5px 10px;}

.remark-form{border: 1px solid #ddd;}
.remark-form textarea{ padding: 10px;border: 1px solid #ddd; margin: 10px; width: 96%;}

.delivery-form{border: 1px solid #ddd; margin-bottom: 30px; padding-bottom: 20px;}
.delivery-form .item{ padding-left: 10px;}
.delivery-form .newaddress{ display: none}
.delivery-form .newaddress span{ width: 100%; display: inline-block}
.delivery-form .newaddress > div{ margin-bottom: 15px;}
.delivery-form .newaddress label{ min-width: 100px; display: inline-block}
.delivery-form .newaddress input{width:calc(100% - 120px); border: 1px solid #ddd; padding:5px 15px;}
.delivery-form .newaddress input[type=checkbox]{ width: auto; margin-right: 5px; margin-bottom: 10px;}
.delivery-form .newaddress select{width:calc(100% - 120px); background: #eee; color: #000; font-weight: bold; border: 0; padding: 10px ; }
.delivery-form .convience .list{ margin-bottom: 10px;}
.delivery-form .convience .note{ color: #666}
.delivery-form .convience input{}
.delivery-form .convience .ctimg{ position: relative; top: 10px; margin-right: 5px;}
.delivery-form .convience td{ padding-left: 0;}
.delivery-form .atm td{ padding-left: 0; border-bottom: 1px solid #ddd}

.payment-form{border: 1px solid #ddd; padding: 10px;}
.payment-form span{ margin-left: 10px; margin-top: 10px; display: inline-block}
.submitorder { text-align: right; margin-top: 20px;}
.submitorder a{ width: 100%; text-align: center}

.finish{ width: 600px; margin: 0 auto;border: 1px solid #ddd; padding: 30px;}


/*FAQ*/
.faq{ margin: 50px auto}
.faq .item{ width: 800px; margin: 0 auto;}
.faq .item .ti{ width: 100%; padding: 10px 20px; background: #EDBEB6; color: #fff; border-radius: 20px; font-weight: bold; margin-bottom: 20px; cursor: pointer}
.faq .item .ti:hover{ color: #bc5f50}
.faq .item .ans{ display: none; padding: 10px 20px; padding-top: 0; margin-bottom: 30px;}
.faq .item.active .ans{ display: block}


.about{ min-height: 830px; margin: 50px auto}

/*contact*/
.contact {margin: 50px auto}
.contact .form {width: 600px; border: 1px solid #ddd; padding: 30px; box-sizing: border-box}
.contact textarea { width: 100%; border: 1px solid #eee; padding: 10px;}
.contact .form input{ width: 100%; border: 1px solid #eee; padding: 10px; margin-bottom: 10px}
.contact .form .btn-1{ width: 100%; margin-bottom: 10px;}
.contact .form label{ margin-right: 10px; font-weight: bold;}
.contact .form >div{ margin-bottom: 15px;}
.contact .form input[type=radio]{ width: auto; margin-right: 5px; margin-bottom: 10px;}
.contact .form img{ width: auto;}


/*blog*/
.blog{margin: 50px auto; min-height: 830px;}
.blog .cont{ display: inline-block; margin-bottom: 30px;}
.blog .cont .tit{ font-weight: bold; font-size: 17px;}
.blog .cont .des{}
.blog .blognav{}
.blog .blognav .ti{ font-weight: bold; font-size: 17px; margin-bottom: 10px;}
.blog .blognav a{  width: 100%; display: inline-block; font-size: 16px; font-family: 'Noto Sans TC', sans-serif; padding: 10px 0;}
.blog .title{width: 100%; display: inline-block;font-size: 22px; font-family: 'Noto Sans TC', sans-serif; }
.blog .date{font-size: 15px; color: #999;margin-bottom: 30px;}

/*customize*/
.cust{margin: 100px auto;min-height: 720px;}
.cust .ti{ text-align: center}
.cust .intro{ text-align: center; margin-bottom: 50px; font-size: 15px;}
.cust .tpimg{ width: 100%; height: 52px; background: url(../images/customize/tophr.png) center no-repeat}
.cust .btmimg{width: 100%; height: 40px; background: url(../images/customize/btmhr.png) center no-repeat}
.cust .btn-go{ margin: 45px 0; display: inline-block;}
.cust .btn-go:hover{ opacity: 0.7;}
.cust .stepimg{ margin-bottom: 30px; margin-top: 30px; text-align: center}
.cust .ti02{ margin-bottom: 50px; margin-top: 30px; text-align: center}
.cust .price{font-size: 18px;margin-top: 45px;}
.cust .price:before{content: url(../images/customize/cart.png); width: 44px; height: 42px; display: inline-block;position: relative; top: 5px;}
.cust .price span{font-size: 36px; font-weight:bold; }
.cust .choosed{ cursor: pointer; }
.cust .pattern{ }
.cust .pattern .item{ width: 125px; display: inline-block; margin: 10px; text-align: center; cursor: pointer;transition: 0.5s; vertical-align: top}
.cust .pattern .item:hover{ opacity: 0.7; transition: 0.5s}
.cust .pattern .item img{ border-radius: 25px;}
.cust .pattern .item.acitve img{ border: 5px solid #8e689f; border-radius: 25px;}
.cust .showpattern p{ margin-bottom: 30px;}
.cust .boxs{width: 380px; height: 380px;border-radius: 50px;margin-bottom: 10px;}
.cust .style01{ background:url(../images/customize/style01-bg.jpg) center no-repeat #d2caad;}
.cust .style02{ background:url(../images/customize/style02-bg.jpg) center no-repeat #bfc8d3; }
.cust .style03{ background:url(../images/customize/style03-bg.jpg) center no-repeat #708693; }
.cust .style04{ background:url(../images/customize/style04-bg.jpg) center no-repeat #c5c1cf;}
.cust .chosepag .col-md-6 > div{ width: 100%; border: 1px solid #ddd ; border-radius: 50px; padding:30px; margin-bottom: 50px;}
.cust .chosepag strong{ font-weight: bold; font-size: 20px;}


.cust.st01 .arr:after{content:url(../images/customize/right-arrow2.png); width: 19px; height: 36px; position: relative; top: -20px; left: 20px}
.cust.st01 .row{ width: 900px; margin: 0 auto; text-align: center}
.cust.st02 .row{ width: 800px; margin: 0 auto; text-align: center}
.cust.st02 .choosed img{ border-radius: 50px;border: 1px solid #ddd; }
.cust.st02 .col-md-3{min-height: 250px; }

.cust.st03 .row{ width: 800px; margin: 0 auto; text-align: center}
.cust.st04 .row{ width: 1000px; margin: 0 auto; text-align: center}
.cust.st04 .boxs{width: 220px; height: 220px;border-radius: 50px;margin-bottom: 10px; background-size: 90%; text-align: center}
.cust.st04 .boxs img{ width: 86%}
.cust.st04 .showpattern strong{font-weight: bold;}
.cust.st04 .multiply__overlay__pattern{ left: 7%}
.cust .choosed.active img{ border:5px solid #8e699f; border-radius: 50px;}
.cust .choosed img{display: inherit}
.cust .choosed.border-danger{border-radius: 55px;}



/*customize PD*/
.custpd{margin: 80px auto;min-height: 720px;}
.custpd h2{ font-family: 'Noto Serif TC', sans-serif; width: 100%; text-align: center }
.custpd h3{font-family: 'Noto Sans TC', sans-serif; }
.custpd .intro{ width: 100%; text-align: center; font-size: 18px;}
.custpd .btn-black{ width: 226px; height: 63px; background: url(../images/customize/btn-black-l.png) no-repeat; display: inline-block; font-size: 22px; text-align: center;font-weight: bold; color: #fff; padding-top: 17px;}
.custpd .btn-pink{ width: 226px; height: 63px; background: url(../images/customize/btn-pink.png) no-repeat; display: inline-block; font-size: 22px; text-align: center;font-weight: bold; color: #fff; padding-top: 17px;}
.custpd .btn-yellow{width: 190px; height: 62px; background: url(../images/customize/btn-yellow.png) no-repeat; display: inline-block; font-size: 22px; text-align: center;font-weight: bold; color: #523f32; padding-top: 15px;}
.custpd .stepimg{ text-align: center; margin-bottom: 20px;}
.custpd .pditem{ text-align: center; cursor: pointer}
.custpd .pditem.active img{ border: 5px solid #EDBEB6 }
.custpd .pditem:hover{opacity: 0.8}
.custpd .pditem .ti{ font-size: 18px; margin-top: 10px;}
.custpd .pditem span{ font-size: 15px; color: #EDBEB6}
.custpd .size{ text-align: center; margin-bottom: 30px;}
.custpd .size select{width: 200px; height: 50px; margin: 10px auto;}
.custpd .pattern{ width: 1050px; margin: 0 auto; text-align: center}
.custpd .pattern .item{ width: 125px; display: inline-block; margin: 10px; text-align: center; cursor: pointer;transition: 0.5s}
.custpd .pattern .item:hover{ opacity: 0.7; transition: 0.5s}
.custpd .pattern .item.active img{ border: 5px solid #8e689f; border-radius: 25px;}
.custpd .showpattern .boxs{ width: 800px; height: 800px; margin: 0 auto; border-radius: 50px;margin-bottom: 20px; background: #f2e7e3 }
.custpd .showpattern p{ width: 100%; text-align: center; margin-bottom: 10px;}
.custpd .price{font-size: 18px;}
.custpd .price:before{content: url(../images/customize/cart.png); width: 44px; height: 42px; display: inline-block;position: relative; top: 5px;}
.custpd .price span{font-size: 36px; font-weight:bold; }
.custpd .ftfunc{ width: 100%; margin-top:50px;}


.custpd.st0 .row{ width: 900px;margin: 0 auto; margin-bottom: 30px; text-align: center}
.custpd.st0  .arr:after{content:url(../images/customize/right-arrow2.png); width: 19px; height: 36px; position: relative; top: -20px; left: 20px}
.custpd.st0 .intro{ margin-bottom: 50px;}
.custpd.st1 .intro{ margin-bottom: 50px;}
.custpd.st1 h2{ width: 100%; text-align: center}
.custpd.st1 h3{ width: 100%; text-align: center; margin: 20px 0}
.custpd.st2 .intro{ margin-bottom: 50px; }
.custpd.st2 .btn-yellow{ margin: 20px auto}
.custpd.st3 .btn-yellow{ margin: 20px auto}
.custpd.st3 .intro{ margin-bottom: 50px;}





#footer{width: 100%; background: #EDBEB6; color: #fff; padding: 30px 0; text-align: center}
#footer a{ color: #fff}
#footer .copyright{ color: #fff; text-align: center}

/*****************RWD************************/
.mb{ display: none;}
.box{ display: none;}



@media only screen and (max-width: 1000px) {
    .container{ width: 100%;}
    .head .container{ width: 100%;}
    nav{ display: none; width: 100%; left: 0; z-index: 999; position: fixed; background: #fff;}
    nav>div{ width: 100%;}
    nav a{ width: 100%; color: #333; padding: 15px 0; border-bottom: 1px solid #e1e1e1; border-right: 0}
    nav a:hover span{ border: 0; padding: 0}
    .topnav{ right: 50px; top: 30px;}
    nav >div:hover{display: inherit !important}
    
    .mb{ display: block;}
    .mb img{ display: inline-block;}
    .pc{ display: none !important}
    .wrap{ width: 100% !important}
    .box{ display: block}
    .head {  padding-top: 0; background: none;}
    .head.fadein{ padding-bottom: 0;}
    .pdnav,.blognav{ display: none;}
    .faq .item{ width: 100%;}
    nav{ height: 90vh; overflow-y: scroll}
    nav .subnav{ position: relative}
    nav .subnav i{width: 25px; height: 25px; position:absolute; right: 15px; top: 10px;z-index: 99; display: inline-block; background: url(../images/arrow-down.png); background-size: contain}
    nav .subnav i.active{width: 25px; height: 25px;background: url(../images/arrow-up.png);background-size: contain}
    nav .sub{ width: 100%; display: none}
    nav .sub.active{ position: inherit; display: block}
    nav .sub.active ul >li{width: 100%;}
    nav .sub.active ul li > a{ text-align: center; width: 100%; box-shadow: none; font-size: 15px; color: #999}
    nav .sub.active ul li ol{ position: inherit; top: inherit; right: inherit; width: 100%; display: block}
    
     /*member*/
    .login{ width: 90%;}
    .tb-cont{ min-height: 200px;}
    .memberct .tbc01{ width: 90%;}
    .memberct .tbc01 .birth select{ width: 65px;}
    .memberct .ordertb{ width: 90%;}
    .memberct .ordertb .head >div{ padding: 10px; font-size: 13px;}
    .memberct .ordertb .ctent div{ font-size: 13px;}
    .memberct .shopping-cart{ width: 100%; overflow-x: scroll}
    
    .pdview #app{ display: inline-block; margin-top: 30px;}
    
    /*Custimized*/
    .cust.st01 .row,.cust.st02 .row,.cust.st03 .row,.cust.st04 .row{ width: 100%;}
    .cust.st01 .arr:after{ display: none;}
    .cust .stepimg{ width: 100%; max-width: 926px}
    .cust .stepimg img{ width: 100%; }
    .cust .btn-go{ margin: 15px 0}
    .cust.st02 .choosed img{ border-radius: 20px;}
    
    .cust .pattern .item.active img{ border-radius: 10px;}
    .cust .boxs{ margin: 0 auto}
    .cust .showpattern p{ margin-top: 10px;}
    
    /*Custimized PD*/
    .custpd.st0 .row{ width: 100%;}
    .custpd.st0 .arr:after{ display: none;}
    .custpd .stepimg img{ width: 100%; max-width: 668px}
    .custpd .pattern{ width: 100%;}
    .custpd .showpattern { width: 100%}
    
    
    
}
/*tablet*/
@media only screen and (max-width: 768px) {
   
    
}
   
@media only screen and (max-width: 480px) {
    h2{ font-size: 32px;}
    h3{ font-size: 26px;}
    .logo{ text-align: left}
    .logo img{ width: 70px;}
    .topnav{ right: 45px; top: 22px;}
    nav{ background: #fff;}
    nav a{ padding: 10px 0; color: #666; font-size: 16px; font-weight: normal;border-bottom: 1px solid #ddd}
    /*Product*/
    .pdlist .item{ width: 49%; display: inline-block; vertical-align: top}
    .pdnav{display: none;}
    .pdlist .item .title{ font-size: 16px;}
    .pdview .tb-cont img{max-width: 100%; height: auto !important}
    .pdslidernav{ display: none !important;}
    .pdslider{ width: 100%; margin-bottom: 30px;}
    .pdslider img{width: 100%}
    .slick-slide{}
    .tabtn{ width: 32%; font-size: 14px;}
    
    /*checkout*/
    .checkout-nav .step{ width: 32%;}
    .shopping-cart thead{ display: none;}
    .shopping-cart table tr{ position: relative}
    .shopping-cart table td{ width: 100%; float: left;}
    .shopping-cart table td:nth-child(2){display: none;}
    .shopping-cart table td .note{ margin-top: 10px;}
    .shopping-cart table td .pdimg{ margin-right: 10px;}
    .shopping-cart button.btn-red{ position: relative; right:0px; top: 0px; background: #ddd; color: #666}
    .order-summary{ margin-top: 20px;}
    .finish{ width: 100% ;}
    
    
   
    /*blog*/
    .blognav{ display: none;}
    .blog article img{max-width: 100%}
    
    /*contact*/
    .contact .form{ width: 100%; margin-top: 30px;}

    /*faq*/
    .faq .pdlist .item{ width: 100%;}
    
    /*Custimized*/
    .cust .pattern .item{ width: 65px;}
    .cust .boxs{ width: 300px; height: 300px;}
    .cust .style01,.cust .style02,.cust .style03,.cust .style04{ background-size:90%}
    .cust .style01 img,.cust .style02 img,.cust .style03 img,.cust .style04 img{ width: 90%;}
    .cust.st04 .boxs{ width: 300px; height: 300px; }
    
    .cust.st04 .chosepag img{ width:80%}
    .cust .choosed.active img{ border-radius: 20px}
    .cust .choosed.border-danger{ border-radius: 20px}
    .cust .pattern .item img{ border-radius: 15px;}
    .cust .pattern .item.acitve img{ border-radius: 15px;}
    .multiply__overlay__pattern{ left: 20px !important;}
    .multiply img{max-width: 87% !important;}
    .cust.st02 .col-md-3{ min-height: 150px;}
    
    
    
    /*Custimized PD*/
    .custpd .pditem .ti{ font-size: 14px;}
    .custpd .pditem span{ font-size: 13px;}
    .custpd .pattern .item{ width: 65px;}
    .custpd .pattern .item.active img{ border-radius: 20px;}
    .custpd .showpattern .boxs{ width: 300px; height: 300px; margin: 0 auto}
    .custpd .ftfunc{ text-align: center}
    .custpd .ftfunc a{ margin: 10px 0}
    
    
}


.box {
  position: absolute;
  top: 0px;
  right:0px;
  width:50px;
  height: 30px;
  background: #fff;
}
.btnnav {
  position: absolute;
  top: 35px;
  right: -13px;
  transform: translate(-50%, -50%);
  width: 30px;
  cursor: pointer;
}
.btnnav.active{ top: 45px; right: -12px;}

.btnnav span {
  display: block;
  width: 100%;
  height: 5px;
  background: #ddd;
  transition: all .3s;
  position: relative;
}
.box span + span { margin-top: 5px;}
.box .active span + span {
  margin-top: 10px;
}

.box .active span:nth-child(1) {
  animation: ease .7s top forwards;
}

.box .not-active span:nth-child(1) {
  animation: ease .7s top-2 forwards;
}

.box .active span:nth-child(2) {
  animation: ease .7s scaled forwards;
}

.box .not-active span:nth-child(2) {
  animation: ease .7s scaled-2 forwards;
}

.box .active span:nth-child(3) {
  animation: ease .7s bottom forwards;
}

.box .not-active span:nth-child(3) {
  animation: ease .7s bottom-2 forwards;
}


@keyframes top {
  0% {
    top: 0;
    transform: rotate(0);
  }
  50% {
    top: 22px;
    transform: rotate(0);
  }
  100% {
    top: 10px;
    transform: rotate(45deg);
  }
}

@keyframes top-2 {
  0% {
    top: 22px;
    transform: rotate(45deg);
  }
  50% {
    top: 22px;
    transform: rotate(0deg);
  }
  100% {
    top: 0;
    transform: rotate(0deg);
  }
}

@keyframes bottom {
  0% {
    bottom: 0;
    transform: rotate(0);
  }
  50% {
    bottom: 22px;
    transform: rotate(0);
  }
  100% {
    bottom: 22px;
    transform: rotate(135deg);
  }
}

@keyframes bottom-2 {
  0% {
    bottom: 22px;
    transform: rotate(135deg);
  }
  50% {
    bottom: 22px;
    transform: rotate(0);
  }
  100% {
    bottom: 0;
    transform: rotate(0);
  }
}

@keyframes scaled {
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes scaled-2 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}