/*RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {	content: '';	content: none;}
table {	border-collapse: collapse;	border-spacing: 0;}


/*font size setting*/
h1,.h1{ font-size: 34px; line-height: 40px;}
h2,.h2{ font-size: 28px; line-height: 36px;}
h3,.h3{ font-size: 24px; line-height: 32px;}
h4,.h4{ font-size: 22px; line-height: 30px;}
h5,.h5{ font-size: 18px; line-height: 22px;}
body,p,.p{ font-size: 17px; line-height: 26px; }
.bold{ font-weight: bold;}
/*color setting*/
:root {
    --dark-red: #812c18;
}

:root {
  --animate-delay: 0.5s;
}


body,span,h2,h3{ font-family: Microsoft JhengHei, Microsoft YaHei, Arial,sans-serif !important; color: #3b281c}
a{ text-decoration: none; }
section{ width: 100%; display: block; position: relative}
.col-left{ float: left;}
.col-right{ float: right;}
.row{ width: 100%; display: inline-block}
.col-1{ width: 8.3%; float: left;}
.col-2{ width: 16.6%; float: left;}
.col-3{ width: 25%; float: left;}
.col-4{ width: 33.3%; float: left;}
.col-5{ width: 41.6%; float: left;}
.col-6{ width: 50%;float: left;}
.col-7{ width: 58.3%; float: left;}
.col-8{ width: 58%; float: left;}
.col-9{ width: 66.6%; float: left;}
.col-10{ width: 83.3%; float: left;}
.col-11{ width: 91.6%; float: left;}
.col-12{ width:100%; float: left;}
.clear{ clear: both}
.text-center{text-align: center}
.text-right{text-align: right}
.text-left{ text-align: left}
.container{ width: 1200px; margin: 0 auto; position: relative}


.head{ width: 100%; padding: 0 10%; padding-top: 10px; transition: all 0.5s; display: inline-block;z-index: 99; box-sizing: border-box; background: #fff;}
.logo{ display: inline-block; margin-top: 60px; margin-left: 20px;}
.head.fadein{ padding-bottom: 0px; position: fixed; top: 0; background: #fff;transition: all 0.5s;}
.head.fadein .logo img{ width: 140px;}
.head.fadein nav{margin-top: 3px;}

/*****************Pages************************/
.banner{ width: 100%; min-height: 300px; background: url(../images/bn.jpg) center; }
.title{ text-align: center; font-weight: bold; padding-top: 40px; padding-bottom: 0; color: var(--dark-red)}
.divid{ text-align: center; margin: 20px 0}
.topr{ position: absolute; right: 0; top: 10px;}
.topr a{ color: #fff; margin-left: 10px; font-weight: bold}
.ix{ background: url(../images/bg2.png) #f9f6ed; background-size:contain;min-height: 500px; padding-bottom: 100px;}
.secnav{ width: 100%; text-align: center; padding: 10px 0; }
.secnav ul {padding: 10px 0; display: inline-block}
.secnav li { display: inline-block; margin-bottom:10px}
.secnav li a{ display: inline-block; padding: 10px 20px; background: var(--dark-red); color: #fff; border-radius: 30px; font-weight: bold; font-size: 18px;}
.secnav li a:hover{ opacity: 0.8}
.ix-info{ width: 1200px; margin: 0 auto; }
.ix-info h2{ text-align: center; }
.ix-info .text{ margin-bottom: 20px;}
.ix-info .text h2{ text-align: center; margin: 10px 0; font-weight: bold;}

.secbx{ width: 575px; margin: 0 10px; margin-bottom: 20px; background: #f2eee4; display: inline-block; vertical-align: top}
.secbx h3{ margin-bottom: 10px; padding-bottom: 10px; font-weight: bold; border-bottom: 1px solid var(--dark-red)}
.secbx .col-6{padding: 20px; box-sizing: border-box; }
.secbx .price{ color: var(--dark-red); font-size: 26px; margin: 10px 0 ; font-family: arial}
.secbx .btns{ padding: 10px 0;}
.secbx .btns a{ padding: 10px 20px; background: var(--dark-red); color: #fff; font-weight: bold; border-radius: 5px; margin-right:15px;}
.secbx .btns .tkmore{ background: #999}
.secbx .more{ padding: 20px; box-sizing: content-box; display: none;}
.secbx .text{ height: 200px; overflow-y: scroll}
.moreinfo{ }
.moreinfo h3{border-bottom: 2px solid var(--dark-red); padding: 10px 0; margin: 10px 0; font-weight: bold }


.cart{background: url(../images/bg2.png) #f9f6ed; background-size:contain; min-height: 500px; padding: 50px 0}
.cart .container{ width: 800px;}
.cart .h2{ font-weight: bold; color: var(--dark-red); border-bottom: 2px solid var(--dark-red); padding-bottom: 10px;}
.cart .title{ margin-bottom: 30px;}
.cart .addp{ margin-bottom: 10px; text-align: center}
.cart .addp a{color: #fff; background: var(--dark-red); font-weight: bold; padding: 10px 20px; border-radius: 5px; display: inline-block; position: absolute; top: 150px; right: 0}
.cart .total{ border-top: 2px solid var(--dark-red); padding-top: 10px;}
.cart .total .pric{ color: var(--dark-red); font-weight: bold; margin-top: 10px; display: inline-block}
.cart .total label{ margin-bottom: 10px;}
.cart .note label{ margin-bottom: 10px;}

.forms{}
.forms .row{ margin-bottom: 20px;}
.forms label{ font-size: 20px; font-weight: bold; min-width: 70px; display: inline-block; margin-bottom: 10px;}
.forms select{padding: 15px 10px;  border: 1px solid #bea366; border-radius: 5px; margin-right: 10px; box-sizing: border-box}
.forms input[type="text"],.forms input[type="number"],.forms input[type="email"],.forms input[type="password"]{ width: 100%; padding: 15px 10px; border: 1px solid #bea366; border-radius: 5px; box-sizing: border-box}
.forms textarea{ width: 100%; padding: 15px 10px; border: 1px solid #bea366; border-radius: 5px; box-sizing: border-box}
.forms input.xsmall{ width: 100px;}
.forms input.small{ width: 200px}
.forms input.medi{ width: 300px}
.forms input.large{ width: 600px;}
.forms select.xsmall{ width: 100px;}
.forms select.small{ width: 200px;}
.forms select.medi{ width: 300px}
.forms select.large{ width: 620px}
.forms .btn-red{ padding: 15px 40px; font-size: 17px; background: var(--dark-red); color: #fff; border-radius: 5px; font-weight: bold; border: 0; cursor: pointer}
.forms button.btn-red{ }
.forms .btn-red:hover{ background: #5b3219}
.forms .orderinfo{ margin-bottom: 15px;}
.forms .orderinfo.template_tmp{ border-bottom: 2px solid var(--dark-red); position: relative}
.forms .orderinfo.template_tmp:last-child{ border: 0}
.forms .deldata button{ position: absolute; right: 10px; top: 10px; padding: 10px 20px; background: var(--dark-red); color: #fff; font-size: 15px; border: 0 ; cursor: pointer;}
.forms .deldata button:hover{ opacity: 0.8}

.tb{ width: 100%; text-align: center}
.tb th{ background: var(--dark-red); color: #fff; font-weight: bold;}
.tb th,.tb td{ border-bottom: 1px solid #ddd; padding: 10px;}
.tb .wt{}


.checko{background: url(../images/bg2.png) #f9f6ed; min-height: 650px; padding: 50px 0}
.checko .container{ width: 800px;}
.checko .title{ margin-bottom: 30px;}
.checko .totalp{ text-align: right; font-size: 20px; font-weight: bold; font-family: arial; color: var(--dark-red)}
.checko .paymeth{ border-top: 2px solid var(--dark-red); padding-top: 10px;}
.checko .paymeth label{ margin-bottom: 10px;}
.checko .del{ width: 24px; height: 24px; background: url(../images/del.png) no-repeat; background-size: contain; display: inline-block; cursor: pointer}
.checko .del:hover{ opacity: 0.8}
.ctinfo { padding: 15px 0; margin-bottom: 20px;}
.ctinfo .h3{ color: var(--dark-red); font-weight: bold; border-bottom: 2px solid var(--dark-red); padding-bottom: 10px;}

.thanks{background: url(../images/bg2.png) #f9f6ed; min-height: 650px; padding: 50px 0}
.thanks p{ font-size: 24px; line-height: 36px; margin-bottom: 20px; margin-top: 30px;}

.member{ background: url(../images/bg2.png) #f9f6ed; min-height: 650px; padding: 50px 0}
.member .title{ margin-bottom: 30px;}
.member .container{ width: 1000px; }
.member .info{ padding-left: 30px; box-sizing: border-box}
.member label{min-width: 100px; margin-bottom: 10px;}
.member .mbnav{}
.member .mbnav .mb-ti{ background:#5b3219; color: #fff; padding: 10px; font-size: 20px; font-weight: bold; text-align: center;border-bottom: 1px solid #856551;}
.member .mbnav li{ background:#5b3219;}
.member .mbnav li a{ display: inline-block; text-align: center;width: 100%; padding: 10px 15px;border-bottom: 1px solid #856551; color: #fff; box-sizing: border-box; position: relative}
.member .mbnav li a:before{ content:""; background: url(../images/arrow-w.svg) no-repeat; width: 12px; height: 12px; background-size: contain; display: inline-block; position: absolute; left: 33px; top: 17px}

.member .dalist{ padding:0 0px 0 30px; box-sizing: border-box}
.member .hidedt{ display: none;}
.member a{ color: var(--dark-red)}



.tb2{}
.tb2 th{ background: #666; padding: 0}



.register{ background: url(../images/bg2.png) #f9f6ed; min-height: 650px; padding: 50px 0}
.register .container{ width: 550px;}
.register .datainfo{  padding: 15px; margin-bottom: 0px; display: inline-block}
.register label{ min-width: 100%; margin-bottom: 10px;}
.register .gologin{ border-top: 1px solid #ddd;  text-align: center; padding-top: 10px;}
.register .gologin a{ color:var(--dark-red); padding: 5px}
.socialreg{ border-bottom:1px solid var(--dark-red); display:inline-block; padding-bottom:5px;}
.socialreg h3{ font-weight:bold;color:var(--dark-red); text-align:center; margin-bottom:8px;}

.forget{ background: url(../images/bg2.png) #f9f6ed; min-height: 650px; padding: 50px 0}
.forget .container{ width: 550px;}
.forget .info{  width: 100%; padding: 15px; margin-bottom: 35px; display: inline-block; box-sizing: border-box}
.forget .info label{ margin-bottom: 10px;}
.forget .info input{ margin-bottom: 10px;}

.login{ background: url(../images/bg2.png) #f9f6ed; min-height: 650px; padding: 50px 0}
.login .container{ width: 550px;}
.login .info{ padding: 15px; margin-bottom: 20px; display: inline-block; border-bottom:1px solid var(--dark-red);}
.login label{ min-width: 100%;margin-bottom: 10px;}

.fancybox-content h4{ font-weight:bold; margin-bottom:10px;}


footer{ width: 100%; padding: 30px 0; color: #fff; background: #5b3219; text-align: center; display: inline-block;}

.pagination{ width: 100%; text-align: center; padding: 20px 0}
.pagination a{ padding: 2px 5px; color: var(--gold); font-family: arial; }
.pagination a.active{color: var(--green-dark)}
.pagination a.prev,.pagination a.next{ color: white;padding: 2px 5px; font-size: 15px; }
.pagination a img{ width: 20px; position: relative; top: 4px;}
.pagination a.active{font-size: 14pt; font-weight: 700}

/*PAGES*/





.pc{ display: block}
.mb{ display: none;}
.box{ display: none}

@media only screen and (max-width: 1200px) {
    .container,.ix-info{ width: 100%;}
   
}

@media only screen and (max-width: 1000px) {
    .mb img{ display: inline-block;}
    .pc{ display: none !important}
    .mb{ display: block;}
    .wrap{ width: 100% !important}
    .box{ display: block}
    .container,.member .container{ width: 100%;}
    
   
    
}
/*tablet*/
@media only screen and (max-width:900px) {
   
    .banner{ min-height: 200px;}
    .topr{ right: 20px;}
    .logo{margin-left: 20px; margin-top: 20px;}
    .logo img{ width: 350px;}
    .ix-info{ text-align: center;}
    .secbx{ width: 94%; padding: 0 20px; margin: 0 auto; margin-bottom: 30px; box-sizing: border-box}
    .secbx .col-6{ text-align: left}
    .member .container{ width: 94%;}
    .member .mbnav li a:before{ left: 15px;}
    .checko .container{ width: 94%;}
    
}

@media only screen and (max-width: 500px) {
    .sweet-alert{ width: 90% !important; box-sizing: border-box}
    .sweet-alert .btn{ border: 0; border-radius: 5px;}
    .mbhide{ display: none}
    /*font size setting*/
    h1,.h1{ font-size: 28px; line-height: 36px;}
    h2,.h2{ font-size: 24px; line-height: 30px;}
    h3,.h3{ font-size: 22px; line-height: 30px;}
    h4,.h4{ font-size: 18px; line-height: 24px;}
    h5,.h5{ font-size:18px; line-height: 22px;}
    body, p, .p{ font-size: 16px; line-height: 30px; }
    .col-6{ width: 100%;}
    .title{ padding-top: 20px;}
    .logo{ margin-left: 13px; margin-top: 50px;}
    .secnav li a{ font-size: 14px; padding: 5px 15px;}
    .ix .h1{ font-size: 26px; padding: 40px 60px 0 60px;}
    .divid{ margin: 10px 0}
    .topr a{ font-size: 14px; margin-left: 7px;}
    .secbx{ padding-bottom: 20px;}
    .secbx .col-6{padding: 0; padding-top: 20px;}
    .secbx .col-6:first-child{ padding-bottom: 0;}
    .secbx .text{ height: 100px;}
    .forget{ min-height: 460px;}
    .register .container,.forget .container,.login .container{ width: 100%;}
    .register .datainfo,.forget .info,.login .info{ padding: 0 30px;}
    .member .mbnav{ width: 90%; float: inherit; margin: 0 auto; margin-bottom: 20px;}
    .member .mbnav li a{ padding: 3px 0}
    .member .mbnav li a:before{ top: 9px; left: 10px;}
    .member .info,.member .dalist{ width: 90%;box-sizing: border-box; padding-left: 0; margin: 0 auto; float: inherit}
    .member select{ margin-bottom:10px;}
    .tb th, .tb td{ padding: 5px 5px; font-size: 13px;}
    .forms input.small{ width: 100%; margin-bottom: 20px;}
    .forms input.xsmall,.forms select.xsmall{ width: 85px;}
    .forms select{appearance:none; background:#fff;}
    .forms input.medi{ width: 100%;}
    .forms label{ width: 100%;}
    .checko.forms .row{ margin-bottom: 10px;}
    .checko.forms select{ margin-bottom: 20px;}
    .checko .paymeth label,.cart .total label{ width: auto;}
    .forms .btn-red{ padding: 10px 20px;}
    .checko .del{ width: 20px; height: 17px;}
    .tbwrap{ width: 100%; overflow-x: scroll}
    .tbwrap .tb{ width:490px}
    .cart,.checko{ padding: 30px 0}
    .cart .container{ width: 94%;}
    .cart .addp a{ top: 110px;padding: 5px 20px;}
    .cart .turn_lunar{ margin-top: 10px;}
    .fancybox-content{ padding:15px !important;}
    .fancybox-content h4{ font-weight:bold; margin-bottom:10px;}
    .fancybox-content img{max-width:100%;}
    
}




/* 
NAV
*/

.box {
  position: absolute;
  top: 15px;
  right:15px;
/*  transform: translate(-50%, -50%);*/
  width:50px;
  height:45px;
  background: var(--blue);
/*  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);*/
}

.btn {
  position: absolute;
  top: 24px;
  right: -9px;
  transform: translate(-50%, -50%);
  width: 34px;
  cursor: pointer;
}
.btn.active{ top: 30px; right: -10px;}

.box span {
  display: block;
  width: 100%;
/*  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3);*/
/*  border-radius: 3px;*/
  height: 3px;
  background: #fff;
  transition: all .3s;
  position: relative;
}

.box span + span {
  margin-top: 7px;
}
.box .active span + span{
    margin-top: 13px;
}

.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);
  }
}

@keyframes barjump {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: -10px;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: 150px;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: 250px;
  }
}

/*updown*/
@-webkit-keyframes updown {
	0% {
		-webkit-transform: translateY(-20%);
		-moz-transform: translateY(-20%);
		-ms-transform: translateY(-20%);
		-o-transform: translateY(-20%);
		transform: translateY(-20%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

@-moz-keyframes updown {
	0% {
		-webkit-transform: translateY(-20%);
		-moz-transform: translateY(-20%);
		-ms-transform: translateY(-20%);
		-o-transform: translateY(-20%);
		transform: translateY(-20%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

@-ms-keyframes updown {
	0% {
		-webkit-transform: translateY(-20%);
		-moz-transform: translateY(-20%);
		-ms-transform: translateY(-20%);
		-o-transform: translateY(-20%);
		transform: translateY(-20%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

@-o-keyframes updown {
	0% {
		-webkit-transform: translateY(-20%);
		-moz-transform: translateY(-20%);
		-ms-transform: translateY(-20%);
		-o-transform: translateY(-20%);
		transform: translateY(-20%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

@keyframes updown {
	0% {
		-webkit-transform: translateY(-20%);
		-moz-transform: translateY(-20%);
		-ms-transform: translateY(-20%);
		-o-transform: translateY(-20%);
		transform: translateY(-20%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

.updown{
	-webkit-animation: updown 700ms forwards ease-in-out infinite alternate;
	-moz-animation: updown 700ms forwards ease-in-out infinite alternate;
	-ms-animation: updown 700ms forwards ease-in-out infinite alternate;
	-o-animation: updown 700ms forwards ease-in-out infinite alternate;
	animation: updown 700ms forwards ease-in-out infinite alternate;
}