@-webkit-viewport { width: device-width; }
@-moz-viewport      { width: device-width; }
 @-ms-viewport       { width: device-width; }
 @-o-viewport        { width: device-width; }
 @viewport           { width: device-width; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; }
/* CSS Document */
body { font-family: 'Noto Sans TC', 'Microsoft Jhenghei', '微軟正黑體', 'Plus Jakarta Sans', sans-serif; overflow-x:hidden; margin:0; padding:0; height: 100%; position: relative; color: #333;}
h1 {  font-size: 1.2em; font-weight: 700; color: #000;     }
h2 { font-size: 2rem; font-weight: 700;  margin: 5% auto; }
h3, h4 { font-size: 1.15em; font-weight: 400; }
h5, h6 { font-size: 1.125em; font-weight: 400 }
h1, h2, h3, h4, h5, h6 { display: block; margin: 0 auto 0.5rem auto }
h1, h2, h3, h4, h5, h6 { line-height: 1.25em }
p { font-size: 1rem; color:#4f4c4c; line-height: 1.95rem;  font-weight: 400; }
a { text-decoration: none;  -moz-transition: color 0.25s ease, opacity 0.25s ease; -o-transition: color 0.25s ease, opacity 0.25s ease; -webkit-transition: color 0.25s ease, opacity 0.25s ease; transition: color 0.25s ease, opacity 0.25s ease}
a:hover{ color:#900d1c;}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a img { border: none; }
article a { word-wrap: break-word; word-break: keep-all; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.color-white { color: #fff!important; }
.color-orange { color: #C71E50!important; }
.color-pink { color:#c74261!important; }
.color-blue { color:#01a396; margin: 5px 0; }
.color-bk { color:#000; }
.small{font-size: 11px!important; }
.eng{font-family:'Plus Jakarta Sans', sans-serif;}
/*main=============================================*/
main { background-color: rgba(243,232,237,.1);  }
.container { width: 100%;max-width: 1440px;margin:0px auto; display: flex; flex-wrap: wrap; align-items: flex-start;  z-index:1; overflow: hidden;}
aside.nav-side-menu{  margin: 0 auto; flex: 0 0 100%; display: flex; justify-content: flex-start; align-items: flex-start;  flex-direction: column;  }
.content { margin: 0 auto; flex: 0 0 100%; padding:0px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;  }
.wrapper{width: 98%; margin: 0 auto; }
/*購物車的寬度*/
.cart-content{width:96%; max-width: 1000px; display: block; margin:auto auto auto; }
/*Grid-full 100%*/
.Grid-full { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: stretch;  align-items: stretch; box-sizing: border-box; width: 100%; height: 100%;  }
.Grid-full div.box-item-1 { margin: 10px 0; flex:0 50%;}
.Grid-full div.box-item-2 img{ width:100%;  }
.Grid-full div.box-item-full { margin: 10px 0; flex:0 100%;  }
.Grid-padding{ padding:20px; }

@media (min-width: 980px) {
aside.nav-side-menu{ flex: 1 1 20%; }
.content { flex: 1 1 80%;  border-left: solid 1px #e4e4e4;   }
.content.full{ flex: 1 1 100%; padding: 15px;   border-left:none;  }
	
}
/***banner area=============================================*/
.banner { width: 100%; height: auto; padding: 0; position: relative; z-index: 0; line-height: 2.5em; vertical-align: top; }
.banner-img { width: 100%; height: auto; overflow: hidden;  position: relative; z-index: 3; }
.banner-img img { width: 100%; height: auto; overflow: hidden; }
/*=========breadcrumbs=============================================*/
.heading-inner{ width: 100%;  margin: auto; background: rgba(255,255,255,.5);display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; position: absolute; z-index: 9;}
.breadcrumbs-box { width: 100%; max-width: 1440px;  margin:0 auto; padding:10px 20px; display: flex;  align-items: center; justify-content: flex-start;}
.breadcrumbs-box h1 { font-size: 1.325rem; font-weight: 400; color: #2a2a2a; line-height: 1.2rem; margin: 0; }
.breadcrumbs{  display: flex;  align-items: center;}
.breadcrumbs li:first-of-type{ padding:0 0 2px 20px; background: url(../images/icon/icon-add.svg) no-repeat left 0;background-size:12px auto;     }
.breadcrumbs li{ font-size: 0.8rem; font-weight: 400; color:#614e4e;  display: flex;  align-items: center;}
.breadcrumbs li:after { content: '';  width: 1px; height: 10px; margin: 0 16px; background-color:#614e4e; display: block;}
.breadcrumbs li:last-child:after {display: none;}
.breadcrumbs li a {  max-width: 95px; color:#614e4e; overflow: hidden; text-overflow: ellipsis; white-space: pre;}

@media (max-width:768px) {
.heading-inner{ display: none;}
.breadcrumbs-box{ display: none;}
.breadcrumbs{  display: none;}
.block-category{width: 100%; }
}
/* page =======================================================================*/
.page { width: 100%; max-width: 1160px; margin:30px auto;  display:block; text-align: center; }
.page ol li { width: 34px; height: 34px; display: inline-block; border: 1px solid #ddd; position: relative;  text-align: center; list-style-type: none;   background-color:#fff; }
.page ol li:hover {  border: 1px solid #ddd;}
.page ol li.current a { background: #000; color: #fff;}
.page ol li a { border: none; color: #000; display: block; padding: 0; line-height: 32px;  width: 34px; height: 34px;  text-decoration: none;}
.page ol li.prev, .page ol li.next{ padding-top: 10px;}
.page ol li a:hover, .page ol li a:focus { background: #aa2d2b; color: #fff; }
.page ol li.prev, .page ol li.next,.page ol li.prev:hover,.page ol li.next:hover{  background: none; border: none; }
.page ol li.prev:before, .page li.next:before { content: '';   display: block;  position: absolute; top: 15px;  }
.page ol li.prev:before { content:url(../images/icon/arrow-left.svg);    }
.page ol li.next:before { content:url(../images/icon/arrow-right.svg);  }

/**title style*/
.title-wrap{ width: 96%;  max-width: 900px;   margin:1% auto 0px auto; }
.title-wrap h1 {width:100%; margin:5% 0 4% 0;padding:0px 0px 20px 0px;  display: block;  position: relative; font-size:1.25rem;  color: rgba(97,78,78,1); text-align:center; font-weight:400; letter-spacing: 1px; border-bottom: solid 1px rgba(97,78,78,1);}
.title-wrap h1::after{position: absolute; content: ''; left:30%; bottom: -2px;  width: 200px; height: 3px; background:rgba(97,78,78,1);} 
.title-wrap p{margin-top:15px;  font-size:0.875rem; color:#614e4e; }
.title { width: auto; margin:0px auto; padding-bottom: 20px; font-size: 1.5rem; color:rgba(97,78,78,1); text-align:center; font-weight: 400;}

.title-1 { width: auto; margin:0px auto; padding-bottom: 10px; font-size: 1.5rem; color:rgba(97,78,78,1); text-align:center; font-weight: 400; background: url(../images/logo-dot-w.svg)  no-repeat center bottom; background-size:auto 10px;  }
.title-1 span{display: block;  color: #a99e73; font-size:.5rem; } 
.title-2 { width:60%;  display: inline-block; padding-left: 10%;  margin:0px auto; font-size: 1.5rem; color:#614e4e;font-weight: 400;}
.title-2 span{  color: #4c2f44; font-size: .75rem; } 
.title-3{ position: relative; width:100%; margin-bottom: 4%; display:inline-block;  padding-left:45px;font-size:1.5rem;  }
.title-3:after { content: '';  width: 35px;  height: 3px; background: #a48f4e; position: absolute;  top:10px;  left: 0;} 
.title-4 {width:100%; margin:0 0 4% 0;padding:0px;  display: block;  position: relative; font-size:1.75rem;  color:rgba(97,78,78,1); text-align:left; font-weight: 700; letter-spacing: 1px; border-bottom: solid 1px #ccc;}
.title-4::after{position: absolute; content: ''; left: 0; bottom: -2px; width: 200px; height: 3px; background:rgba(97,78,78,1);} 
.title-5{ position: relative; width:100%; display:inline-block;  padding-top: 25px; }
.title-5:after { content: '';  width: 35px;  height: 3px; background: rgba(97,78,78,1); position: absolute;  bottom: 0;  left: 0;} 

@media (min-width:768px) {
.title-wrap h1 { font-size:1.75rem;  margin:0 0 4% 0;}
.title-wrap h1::after{  left:40%;} 
	
}


.half{width:100%; max-width:1360px;  display: block; margin: 0 auto; padding:20px 0;}
.txt-right{ text-align: right; font-weight: 300;} 
/* button --- */
.animate, .btn, .btn-border:before, .btn-border:after { -webkit-transition: all 0.3s; transition: all 0.3s; }
.animate, .btn, .btn-border:before, .btn-border:after { -webkit-transition: all 0.3s; transition: all 0.3s; }
.btn { display: block; width:130px; line-height:1.25rem; margin: 8px auto; padding:10px 15px; font-size: 15px; position: relative; opacity: .999; border-radius: 3px; text-transform: capitalize;  }

.btn-cart { width: auto; margin:5px 2px;   padding:10px; font-size:0; font-weight:500; color: #e9dfd1; text-align: left;   border: solid 1px #614e4e;  background: url(../images/icon/icon-shopping-w.svg) no-repeat  center top #614e4e; background-size:36px;  -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;  }
.btn-cart:hover { color: #fff;  background-color:#f74c26;  border: solid 1px #f74c26; background-position: center 6px;}
.btn-cart:active { color: #fff; background: #614e4e; }

.btn-love{ width: auto; margin:5px 2px; padding:10px; font-size:0; font-weight:500; color: #e9dfd1;  text-align: left;border: solid 1px #614e4e;  background: url(../images/icon/love-w.svg) no-repeat center top  #614e4e; background-size:36px;  -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.btn-love:hover { color: #e9dfd1;  background-color:#f74c26;  border: solid 1px #f74c26; background-position: center 6px; }
.btn-love:active { color: #e9dfd1; background: #614e4e; }


.btn-add { text-align: center; color: #e9dfd1; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-weight:400; background: url(../images/icon/icon-shopping-w.svg) no-repeat 15px 5px rgba(97,78,78,1); background-size: 28px auto;   }
.btn-add:hover { color:#e9dfd1; background-color:#f74c26; box-shadow: 0px 5px 5px rgba(0,0,0,.3 );}
.btn-add:active { color: #e9dfd1; background:rgba(97,78,78,1); }
.btn-orange {color: #e9dfd1; background: rgba(97,78,78,1);-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-weight:400; border: solid 1px #a99e73;}
.btn-orange:hover { color:#e9dfd1; background: #f74c26; }
.btn-orange:active { color: #e9dfd1; background:rgba(97,78,78,1);  }

.btn-bk { color: #000;  background: #fff; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-weight:500; border: solid 1px #000;}
.btn-bk:hover { color: #fff; background: #000; }
.btn-bk:active { color: #000; background: #fff; }

.btn-back {  color: #601435;  margin-bottom: 15px; padding: 5px 20px; font-size: 14px; line-height: 28px;  text-align: center; background: url(../images/icon/arrow-left.svg) no-repeat left 8px ;}
.btn-back:hover { color: #c9163a;  }


.btn-more { color: #fff;  background: #454b4f; text-align: center; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-weight:500; border: solid 1px #454b4f;}
.btn-more:hover { color:#454b4f; background: #fff; }
.btn-more:active { color: #fff; background: #00a596; }

.btn-readmore { max-width: 200px; color: #333;}
a.btn-readmore { margin-top: 16px; padding: 10px 25px;  font-weight: 200;  color: #333;  background-color: #fff; border:solid 1px #adadad;}
a.btn-readmore:hover{ background: #333; color: #fff; }
.btn-submit{padding:10px 20px;  font-weight: 400; color:#e9dfd1; background: rgba(97,78,78,1);   border: solid 1px rgba(97,78,78,1);  vertical-align: text-bottom; }
.btn-submit:hover { color: #fff;  background:#f74c26;   box-shadow: 0px 3px 10px rgba(255,102,102,.5); }
.btn-rest{padding:10px 20px;  font-weight: 400; background:#888!important;  color: #fff; }
.btn-rest:hover { color: #fff;  background: #444;   box-shadow: 0px 3px 10px rgba(255,102,102,.5); }

.btn-login{font-size: 15px; width:160px; color:#fff;   background:#000; border: solid 1px #000; }



.btnbox {  width: 100%; margin: 0 auto; display: flex;  justify-content: center;}

/*--------form style------------*/
select, input, option, textarea, input[type="radio"]{ width: auto; min-height: 1.25rem;  font-size:0.875rem;  color: #000;background-color:transparent; border: 1px solid #afbabf;border-radius:0px;  }

input[type="radio"], input[type="checkbox"] { display: none;  }
input[type="radio"]+label, input[type="checkbox"]+label { width:auto; font-size:.75rem;  box-sizing: border-box; padding: 5px 5px 0px 5px; display: inline-block; border: 1px solid transparent; cursor: pointer; vertical-align: bottom; border-radius: 4px;background-color:transparent; color: #666; -moz-transition: color 0.2s ease, background-color 0.2s ease; -o-transition: color 0.2s ease, background-color 0.2s ease; -webkit-transition: color 0.2s ease, background-color 0.2s ease; transition: color 0.2s ease, background-color 0.2s ease; }
input[type="radio"]+label:before, input[type="checkbox"]+label:before { height: 18px; width: 18px; margin:0px 4px 0 0; content: ""; display: inline-block; vertical-align: middle; border: 1px solid #afbabf; background-color: #fff; border-radius: 50%; -moz-transition: border-color 0.2s ease, background-color 0.2s ease; -o-transition: border-color 0.2s ease, background-color 0.2s ease; -webkit-transition: border-color 0.2s ease, background-color 0.2s ease; transition: border-color 0.2s ease, background-color 0.2s ease; }
input[type="radio"]:nth-of-type(2n+1)+label, input[type="checkbox"]:nth-of-type(2n+1)+label {  color: #000 }
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label { border: 1px solid transparent; color:#c74060; background-color:transparent; font-weight: 700; }
input[type="checkbox"]:checked+label:before { background: #fff url("../images/icon/icon.svg") no-repeat; background-position: -244px -56px }
input[type="radio"]:checked+label:before { background: #fff url("../images/icon/icon.svg") no-repeat; background-position: -106px -62px }
/* 去除input藍色框框 */
input, button, select, textarea { outline: none; }
*:focus { outline: none; }
/* placeholder 點一下後快速消失 */
input:focus, textarea:focus { outline: none; }
input:focus:placeholder { color: transparent; }
input:focus::-webkit-input-placeholder { color: transparent; }
input:focus:-moz-placeholder { color: transparent; }
input:focus::-moz-placeholder { color: transparent; }
input:focus:-ms-input-placeholder { color: transparent; }
select{ appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url("../images/icon/icon-arrow.svg") no-repeat right center; background-size: 18px auto;  width:100%;  font-size:0.875rem;  padding-left:5px;padding-right:40px; background-color:#fff; border: 1px solid #afbabf;}
/*IE隱藏箭頭樣式*/
select::-ms-expand {display: none; }
select:focus{ box-shadow: 0 0 5px 2px #467BF4;    }



@media (max-width:1199.98px) {
 input[type="button"]{padding:15px!important;  border-radius: 0px!important;}

		
}




ul.submit-btn { width:98%;  margin: 2% auto; align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; list-style: none;}
ul.submit-btn li{ width:45%!important;  max-width:300px;margin: 2% auto; padding: 10px 0px; border: none; font-size: 1em; font-weight: bold; }
ul.submit-btn li input, .form-medium select, .length-l, .lab-gender{ width: 100%; font-size:0.938rem;    } 

/* width size*/
.txtcols {  -webkit-column-count: 1;   -moz-column-count: 1;  column-count: 1; column-gap: 80px;}
/*-------cart step  elements----*/
aside.tab-bar {position: relative;  width: 100%; margin: auto; color: #e9dfd1; background: rgba(97,78,78,1);   z-index:1;   }
aside.tab-bar .btn{ color: #fff; width: 100%;  text-align: center;margin: 0px auto; }
div.tab-bar {position: relative;  width: 100%; margin: auto; background:rgba(97,78,78,1); ; z-index:1;   }
div.tab-bar .btn{ color: #fff; width: 100%;  text-align: center;margin: 0px auto; }
ul.tab { position: absolute;left: 0; right: 0; margin: 0; padding: 0; background:#614a58; display: none;  list-style: none; z-index:0; }
ul.tab li {width: 100%; padding: 10px 15px;   border-bottom: 1px solid #fff; }
ul.tab li:first-child { border-top: 1px solid #fff; }
ul.tab li:last-child { border-bottom: none; }
ul.tab a {padding: 10px 5px; text-decoration: none; color: #fff; }
ul.tab a:hover { color: #62142D; }
@media (min-width:768px) {
aside.tab-bar .btn{ display: none!important;  }
aside.tab-bar {  margin:6% auto; transition: background-color 220ms ease-in, box-shadow 80ms ease-in; background: transparent; box-shadow: none; border: none;z-index:1;  }
ul.tab { width: 100%;display: flex;  flex-wrap: wrap; align-items: center; justify-content: center;  position: relative;  padding-top:0; z-index:0; border-bottom: solid 2px #636363;   background:#fff;}
ul.tab a {color: #e9dfd1;  }
ul.tab li {  width: auto; background:#f3f1f1; border: 1px solid #636363; border-bottom: none;}
ul.tab li:first-child { border-top:1px solid #636363; border-radius:10px 0px 0px 0px;}
ul.tab li:last-child {  border-radius:0px 10px 0px 0px; }
ul.tab li.current{background:#62142D;}	
ul.tab li.current a{color: #e9dfd1; }			
}
.process-bar { width: 100%; margin: 1% auto; padding: 10px 0; display: block; text-align: center; border-bottom: none; }
.process-bar li { display: inline-block; width: 66px; line-height: 38px; padding: 0; font-weight: 400; background: url(../images/icon/arrow-right.svg) no-repeat right 8px }
.process-bar li:last-child { background: none; }
.process-bar li span { display: inline-block; line-height: 38px; }
.process-bar li span:first-child { height: 36px; width: 36px; border: 1px solid #dfdfdf; border-radius: 18px; background-color: #dfdfdf; text-align: center; color: #585858; line-height: 36px; }
.process-bar li span:first-child + span { display: none; }
.process-bar li.current span:first-child { height: 36px; width: 36px; border: 1px solid #000; border-radius: 18px; text-align: center; color: #FFF; line-height: 36px; background-color: #000; font-size: 22px; }
.process-bar li.current span:first-child + span { color: #494848; font-size: 19px; font-weight: 400; }

/*ul style======================================================================*/
.dot{ width: auto;  display: block; margin: 5px auto; }
.dot li{ width: 100%; display: block; padding:1px 0 3px 15px; font-size:.9rem; line-height:1.4em; font-weight:400; color: #6a6a6a;  background: url( ../images/icon/dot.svg)  no-repeat left 4px; background-size:6px;}
ul.arrow{ width: 100%; display: block; margin: 1.5% auto; }
ul.arrow li{ width: 100%; display: block; padding:1px 0 10px 15px; font-size:15px; line-height:1.4em; font-weight:300; background: url(../images/arrow-right.png) no-repeat left 8px; background-size:8px;}
.decimal { list-style-position: outside; list-style-type: decimal; padding-left: 15px;}
.decimal li{margin-bottom: 10px; font-size:15px; line-height:1.5em; font-weight:300;  }
 @media (min-width:980px) {
.banner { margin: 0; padding: 0;  }
.banner h1 { font-size: 3em; }
/*--------form style------------*/
input[type="radio"]+label, input[type="checkbox"]+label { font-size:.85rem;  background-color: rgba(126,144,174,0); }
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label { color:#c74060; background-color: transparent; }
input[type="radio"]:hover+label, input[type="checkbox"]:hover+label { color: #000 }
input[type="radio"]:checked+label:before, input[type="checkbox"]:checked+label:before { border-color:#c74060; }
.txtcols {  -webkit-column-count: 2;  -moz-column-count: 2;  column-count: 2;  column-gap: 80px; column-rule: 1px solid #e4e8e7; padding: 10px;	}
 /*-------cart step  elements----*/
.process-bar li span:first-child + span { display: inline-block; }
.process-bar { margin:0px auto 1% auto; padding: 5vh 0 10px 0; }
.process-bar li { padding: 0 40px 0 30px; width: auto; height: 38px; }
.process-bar li span:first-child + span { color: #585858; margin: 0 0 0 10px; line-height: 36px; }
}


input.spec-submit { padding: 15px!important; border-radius:0px!important; }