@import url("https://pro.fontawesome.com/releases/v5.10.0/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300|Scope+One|Trirong:200');


/*********************************************************************************/
/* basic                                                                         */
/*********************************************************************************/
body {
	-webkit-user-select:none;
	-webkit-touch-callout:none;
	-moz-user-select: none;margin:0;
    -webkit-text-size-adjust: none;
    background: #ffffff;
    color: #727272;
    letter-spacing: 0.05em;
    font-family: Arial, 微軟正黑體, "Microsoft JhengHei", sans-serif;  
}

a:hover *,
a:hover,
a *,
a,
a:active *,
a:active,
a:focus *,
a:focus {
  text-decoration: none!important;
  color: #666;
  outline: none!important;
  background: unset;
  box-shadow: none!important;
}

.form-control:focus {
    border-color: unset;
    outline: 0;
    -webkit-box-shadow: unset!important;
    box-shadow: unset!important;
}

:focus {    outline:unset!important;}

ul {    padding-inline-start: 0!important;}

.clear{clear: both;}

h2 {
  font-size: 82px;
  font-weight: 900;
}
h3 {
  font-size: 72px;
  font-weight: 900;
}
h4 {
  font-size: 36px;
}
h5 {
  font-size: 26px;
  font-family: 微軟正黑體, serif;
}
p {
  font-size: 16px;
  font-family: 微軟正黑體, serif;
}
p a:hover {  text-decoration: underline;}
ul, li{list-style-type: none;}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 1000px rgb(0 0 0 / 0%) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.br, .br767, .br375{display: none;}

.br1300{display: block;}

.brDesk, .brPad{display: black;}

.pAll0 {padding: 0!important;}

.p_0{padding-right: 0;padding-left: 0;}

.m-auto{margin:0 auto;}

@media (max-width: 1300px) {
	.br1300{display: none;}
}

@media (min-width: 1025px) {
	.container {
	    position: relative;
	    margin: 0 auto;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	    padding: 0 0px!important;
	    max-width: 1440px!important;
	    width: 100%!important;
	}
}

@media (max-width: 990px) {
 .wrapper{padding-top: 51px;}
}

@media (max-width: 768px) {
  .brPad{display: none;}  
}

@media (max-width: 767px) {
  .br767{display: block;}  
}

@media (max-width: 414px) {
  .p_0{padding-right:15px;padding-left: 15px;}
  .brDesk{display: none;}
  .br{display: block;}
}

@media screen and (max-width: 375px) {
  .br375{display: block;}
}

/*********************************************************************************/
/* animate                                                                         */
/*********************************************************************************/

@-webkit-keyframes fadeInUp02 {
  from {
    opacity: 0;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp02 {
  from {
    opacity: 0;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp02 {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}


/*********************************************************************************/
/* breadcrumb                                                                    */
/*********************************************************************************/
.breadcrumb {
    padding: 5px 15px 5px!important;
    margin: 3px 0 0!important;
    list-style: none!important;
    border-radius: 0px!important;
    font-size: 13px!important;
}

@media (max-width: 768px){
  .bread_box.container {
      width: 100%!important;
      padding: 0 0px!important;
      margin: 0 auto!important;
  }
}


/*********************************************************************************/
/* toTop                                                                         */
/*********************************************************************************/

.toTop span {
    position: fixed;
    bottom: 110px;
    right: 10px;
    font-size: 35px;
    color: #fff!important;
    height: 50px;
    width: 50px;
    text-align: center;
    background: #b9c3aa;
    border-radius: 50%;
    line-height: 50px;
    z-index: 999;
    opacity: 0.9;
}

.toTop span > .fa, .fas {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    color: #fff;
}

/*********************************************************************************/
/* Stuck-menu                                                                    */
/*********************************************************************************/
#stuck_container {
  background: #fff;
  z-index: 1000;
  width:100%;  
  border-top: 6px solid transparent;
  padding-top: 6px;
  border-image: url(../images/topline.jpg) 6 round;
  /*border-top: #275875 solid 5px;
  box-shadow: 0px 1px 5px rgba(28, 22, 19, 0.45);*/
  /*height: 80px;*/
}
#stuck_container:before,
#stuck_container:after {
  content: " ";
  display: table;
}
#stuck_container:after {  clear: both;}
#stuck_container .navTop {
    display: inline-block;
    width: 100%;
    height: 120px;
    position: relative;
    margin-top: 15px;
}
#stuck_container .logo-s{display: none;}

#stuck_container .navTop > div:nth-child(1){
	position: absolute;
	top:0;
	left:0;
}
	#stuck_container .navTop > div:nth-child(1) > ul{		padding: 0;	}
	#stuck_container .navTop > div:nth-child(1) > ul li {
	    display: inline-block;
	    vertical-align: top;
	    box-sizing: border-box;
	    list-style-type: none;
	    padding: 2px 0;
	}

	#stuck_container .navTop > div:nth-child(1) > ul li a {
		color: #727272;
	    font-size: 14px;
	    letter-spacing: 0.5px;
	    line-height: 27px;
	    padding: 1px 10px;
	    border: solid 1px #a0a0a0;
	    display: inline-block;
	    vertical-align: middle;
	    /* -webkit-transform: perspective(0px) translateZ(0);
	    transform: perspective(0px) translateZ(0);
	    box-shadow: 0 0 1px rgb(0 0 0 / 0%); */
	    position: relative;
	    -webkit-transition-duration: 0.3s;
	    transition-duration: 0.3s;
	    -webkit-transition-property: transform;
	    transition-property: transform;
	}

	#stuck_container .navTop > div:nth-child(1) > ul li a:hover{
		  border: solid 1px #d0d3c8;
	    -webkit-transform: translateY(-4px);
	    transform: translateY(-4px);
	    background: #e6e9e2;	    
	}

	#stuck_container .navTop > div:nth-child(1) > ul li img{margin-right: 3px;}

  #stuck_container .navTop > div:nth-child(1) > ul li i{margin-right: 3px;color: #9a9e90;}

	/*#stuck_container .navTop > div:nth-child(1) > ul li a {
	    color: #4e4e4e;
	    font-size: 14px;
	    line-height: 27px;
	    padding: 0 8px 0 4px;
	    position: relative;
	    transition: all .3s ease-in-out;
	    box-sizing: border-box;
	    padding: 5px 10px;
	    transition: all .3s ease;
	    border: solid 1px #969696;
	}
	#stuck_container .navTop > div:nth-child(1) > ul li a:before {
	    content: '';
	    display: block;
	    width: 0;
	    height: 100%;
	    background: #687891;
	    position: absolute;
	    right: 0;
	    top: 0;
	    transition: all .4s cubic-bezier(.5,.6,.5,.75);	    
	}
	#stuck_container .navTop > div:nth-child(1) > ul li a:hover{
	    border: solid 1px #687891;
	    color: #fff;
	    z-index: 1;
	}
	#stuck_container .navTop > div:nth-child(1) > ul li a:hover:before {
	    width: 100%;
	    right: inherit;
	    left: 0;
	    z-index: -1;
}*/



#stuck_container .navTop > div:nth-child(3){
	position: absolute;
	top:0;
	right: 0;
}
	#stuck_container .navTop > div:nth-child(3) > ul {
	    text-align: right;
	    padding: 0
	}
	#stuck_container .navTop > div:nth-child(3) > ul li {
	    display: inline-block;
	    vertical-align: top;
	    box-sizing: border-box;
	    list-style-type: none;
	}

#stuck_container.isStuck {
    background: hsl(0deg 0% 100%);
   /* border-radius: 0 0 100px 100px;*/
    /*border-top: none;*/
}

#stuck_container.isStuck .navTop{ display: none; }

#stuck_container.isStuck nav ul ul {  background: rgb(230 233 226);}
#stuck_container.isStuck .brand_logo {
  margin-bottom: 13.5px;
  margin-top: 20px;
}

#stuck_container.isStuck .brand_logo img {  width: 90%;}

#stuck_container.isStuck nav.navbar.navbar-default.navbar-static-top.tm_navbar {
    margin-top: 0;
    padding-bottom: 5px;
    text-align: left;
}

#stuck_container.isStuck nav.navbar.navbar-default.navbar-static-top.tm_navbar .logo-s{
	display: inline-block;
    width: 10%;
    min-width: 100px;
    height: auto;
    margin: 3px 5px 0;
    vertical-align: text-bottom;
}

	#stuck_container.isStuck nav.navbar.navbar-default.navbar-static-top.tm_navbar .logo-s img{
		width: 100%;
	    max-width: 110px;
	}

#stuck_container.isStuck nav.navbar.navbar-default.navbar-static-top.tm_navbar .memberCart{
	display: inline-block;
    width: 10%;
    min-width: 120px;
    height: auto;
    margin: 0 20px;
    vertical-align: text-bottom;
}


/*********************************************************************************/
/*Brand                                                                          */
/*********************************************************************************/
.brand {  text-align: center;margin-bottom: 30px;}
.brand .brand_logo {
  margin-bottom: 13.5px;
  margin-top: 20px;
  font-size: 35px;
}

.brand .brand_logo a{color: #fff;text-shadow: 1px 1px 20px #fff;}
.brand .brand_logo a:hover{opacity: 0.85;}


/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/
/*===================       ======================*/
.mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after {
    margin-left: 0px!important;
}
.mm-menu.mm-light em.mm-counter {    display: none!important;}
.mm-menu {    width: 70%!important;}
nav.navbar.navbar-default.navbar-static-top.tm_navbar {
  text-align: center;
  position: relative;
  border-bottom: 0px;
  background: none;
  font-family: 微軟正黑體, sans-serif;
  margin-bottom: 0 !important;
  /*float: right;*/
  margin: 55px 0px 0px;
}
ul.sf-menu {
  text-align: center;
  position: relative;
  display: inline-block;
}
ul.sf-menu:before,
ul.sf-menu:after {
  content: " ";
  display: table;
}
ul.sf-menu:after {  clear: both;}
ul.sf-menu a {
  display: block;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  height: 30px;
}

.sf-menu {
  padding: 0;
  position: relative;
  margin-bottom: 0;
}

.sf-menu ul {
    background: rgb(230 233 226);
	display: none;
	position: absolute;
	text-align: left;
	top: 50px;
	width: 120px;
	left: -18px;
	border-radius: 0 0 3px 3px;
	margin-top: 0px;
	padding: 0;
	z-index: 2;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: #fff solid 1px;
	box-shadow: 0 3px 3px rgb(0 0 0 / 18%);  
}

li.menuBox { 	position: relative; }

li.menuBox > ul:before {
    content: '';
    border-style: solid;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    position: absolute;
    left: calc(50% - 10px);
    top: -7px;
    border-width: 0 7px 7px 7px;
    border-color: transparent transparent #e6e9e2 transparent; 
}

.sf-menu ul > li {
  text-align: center;
  list-style: none;
  padding: 0px 0px 0px;
  line-height: 30px;
}
.sf-menu ul > li + li{	border-top:#fff solid 1px;}
.sf-menu ul > li > a {
    text-decoration: none;
    font-size: 16px;
    color: #626262;
    font-weight: 500;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.sf-menu ul > li.sfHover > a,
.sf-menu ul > li > a:hover {
  color: #626262;
  background: #fff;
  border-top:rgb(230 233 226) solid 1px;
  border-bottom:rgb(230 233 226) solid 1px;
}
.sf-menu ul ul {
  background: rgba(0, 0, 0, 0.15);
  display: none;
  position: absolute;
  text-align: left;
  top: 0px;
  width: 140px;
  top: -10px;
  left: 102%;
  padding: 22px 0px 20px;
  z-index: 2;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.sf-menu ul ul > li {
  text-align: center;
  list-style: none;
  padding: 0px 0px 0px;
  line-height: 30px;
  width: 140px;
}

.sf-menu ul ul > li + li {  width: 140px;}

.sf-menu ul ul > li > a {
  text-decoration: none;
  font-size: 12px;
  color: #ffffff;
  font-weight: 600;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.sf-menu ul ul > li.sfHover > a,
.sf-menu ul ul > li > a:hover {  color: #EF891A;}

.sf-menu > li > .sf-with-ul {  position: relative;}

.sf-menu > li > .sf-with-ul:before {
  position: absolute;
  left: 50%;
  top: 62%;
  margin-left: -6px;
}

.sf-menu > li {
    position: relative;
    list-style: none;
    float: left;
    line-height: 1.4;
    /*padding: 15px 6px 0;*/
}
.sf-menu > li > a {
  font-size: 16px;
  color: #626262;
  text-decoration: none;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.sf-menu > li.sfHover > a,
.sf-menu > li > a:hover {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  color: #626262;
}
.sf-menu > li.active > a {  color: #EF891A;}
.sf-menu > li + li {        margin-left: 32px;}
select.sf-menu {  display: none !important;}

.hvr-underline-from-center:before {     height: 2px!important;background: #daddd6!important;}

@media (max-width: 1024px) {
  .sf-menu > li {    line-height: 2.5;}
}

/*********************************************************************************/
/* index-search                                                                  */
/*********************************************************************************/
.searchBox {
    width: 140px;
    height: 30px;
    display: inline-block;
    position: relative;
    margin-right: 15px;
    vertical-align: top;
}

.searchBox:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 5px;
    border-color: transparent transparent transparent #bbbcae;
    position: absolute;
    left: 0px;
    bottom: 12px;
    transition: all .3s ease-in-out;
}

.searchBox .form-control:focus~.searchBox:before{    opacity: 0;}
.searchBox .form-control:focus {    border-color: #daddd6;}

.searchBox .form-control {
    border: none;
    background: transparent;
    height: 26px;
    line-height: 1.4;
    margin: 0;
    padding: 3px 30px 2px 12px;
    box-sizing: border-box;
    box-shadow: unset;
    -webkit-box-shadow: unset;
    color: #545152;
    border-bottom: solid 1px #e3e3e3;
    font-size: 13px;
    border-radius: 0;
}

.searchBox .search-icon {
    position: absolute;
    right: 6px;
    top: 4px;
    width: 16px;
    height: 16px;
    z-index: 2;
    background: url(../images/search_icon.png) no-repeat 0 0%;
    transition: all ease-in-out;
    border: 0;
    opacity: 0.6;
}

.searchBox:hover .search-icon {    
	-webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    opacity: 1;
}

.searchBox a {
    position: absolute;
    right: 6px;
    top: 7px;
    font-size: 13px;
    line-height: 15px;
    font-weight: bold;
    width: 15px;
    height: 15px;
}

.searchBox:hover a {    color: #79796A;}
.searchBox ::-webkit-input-placeholder { color: #dcdcdc!important;font-size: 10px!important; }/*webkit瀏覽器專用*/
.searchBox input::-moz-placeholder { color: #dcdcdc!important;font-size: 10px!important; }/*Firefox 4-18瀏覽器專用*/
.searchBox input::-moz-placeholder{color:#dcdcdc!important;font-size: 10px!important;}/*Firefox 19+瀏覽器專用*/
.searchBox:-ms-input-placeholder{color: #dcdcdc!important;font-size: 10px!important;}/*IE10瀏覽器專用*/


/*********************************************************************************/
/* index-cart                                                                    */
/*********************************************************************************/

.searchCart .cartBox {
    display: inline-block;
    width: auto;
    height: auto;
    margin-top: -5px;
    position: relative;
}

.searchCart .cartBox>a {
    font-size: 17px;
    color: #58473c;
    margin-top: 7px;
    border: none;
    border-radius: 0;
}

.searchCart .cartBox img{
	width: 25px;
    height: auto;
}

.searchCart .cartBox .cartQty {
    min-width: 33px;
    height: 33px;
    color: #fff;
    background: #bbbcaf;
    border: solid 1px #bbbcaf;
    transition: all .2s ease;
    display: inline-block;
    text-align: center;
    font-size: 17px;
    border-radius: 100%;
    line-height: 34px;
    margin: 0px 0 0 5px;
}

.searchCart .cartBox > a:hover .cartQty {
    color: #fff;
    background: #84866c;
    border: solid 1px #84866c;
}

#stuck_container .sf-btn {    display: none;}

#stuck_container.isStuck nav.navbar.navbar-default.navbar-static-top.tm_navbar .sf-btn {
    display: inline-block;
    width: 20%;
    height: auto;
    position: absolute;
    top: 5px;
    right: 0;
    text-align: right;
}

#stuck_container.isStuck nav.navbar.navbar-default.navbar-static-top.tm_navbar .sf-btn .btn {padding: 0 0 12px 0;}

#stuck_container.isStuck nav.navbar.navbar-default.navbar-static-top.tm_navbar .sf-btn .btn a{
	color: #727272;
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 27px;
    padding: 1px 10px;
    border: solid 1px #a0a0a0;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(0px) translateZ(0);
    transform: perspective(0px) translateZ(0);
    box-shadow: 0 0 1px rgb(0 0 0 / 0%);
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

#stuck_container.isStuck nav.navbar.navbar-default.navbar-static-top.tm_navbar .sf-btn .btn a:hover{
	border: solid 1px #d0d3c8;
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    background: #e6e9e2;
    letter-spacing: 0.5px;
}

#stuck_container.isStuck nav.navbar.navbar-default.navbar-static-top.tm_navbar .sf-btn .btn a img {    margin-right: 3px;}

#stuck_container.isStuck nav.navbar.navbar-default.navbar-static-top.tm_navbar .sf-btn .searchCart {    display: inline-block; }

#stuck_container.isStuck nav.navbar.navbar-default.navbar-static-top.tm_navbar .sf-btn .searchCart .cartBox {    margin-top: 0;margin-left:10px;}

.sf{	display:none;}

@media (max-width: 1300px) {
.sf-menu > li + li {    margin-left: 20px;}
}

@media (max-width: 1199px) {
  ul.sf-menu {    padding-left: 0!important;  }
  .sf-menu > li > a {    font-size: 15px;}
}


@media (max-width: 1100px) {
	/*#stuck_container.isStuck nav.navbar.navbar-default.navbar-static-top.tm_navbar .logo-s {    margin: 0 10px;	}*/
	.sf-menu > li + li {  margin-left: 15px;}
	/*.sf-menu > li > a {    font-size: 15px;}*/
}

@media (max-width: 1024px) {
  #stuck_container.isStuck {    border-radius: 0 0 0px 0px;  padding-top: 0;}  
}

@media (max-width: 990px) {

	nav {    width: 100%;  }	
  	nav.navbar.navbar-default.navbar-static-top.tm_navbar{  	width:100%  }
	nav.navbar.navbar-default.navbar-static-top.tm_navbar {
	    position: relative!important;
	    top: 0px!important;
	    margin-bottom: 0!important;
	    padding: 0 !important;
		display:none;
	}
	#stuck_container {
	    border-top: unset;
	    padding-top: 0;
	    background: #e8eae4;
	    position: fixed;
	    top: 0;
	    left: 0;
	    height: 50px;
	}
  	#stuck_container.isStuck {    display: none;  }
  	#stuck_container .navTop {    display: none;}
  	.brand .brand_logo{	margin:-4px 0 0;  }
  	.brand .brand_logo img{	height:45px; margin-bottom: 5px;   }
  	.group li{    width: 100%; margin-bottom: 5px;   }
	.brand{
	  	float:none;
	  	width:300px;
	  	margin:0 auto;  	
	}
  	ul.sf-menu {    display: none!important;  }
  	select.sf-menu {
	    display: block !important;
	    width: 100%;
	    border: 0px;
	    padding: 15px;
	    color: #333333;
	    text-transform: capitalize;
	}

	.sf{	display:block;position: relative;}

	.sf .mo.topNav {
	    width: 87%;
	    height: 50px;
	    display: inline-block;
	    position: fixed;
	    top: 0;
	    right: 0;
	    z-index: 9999;
	}

	.sf .mo.topNav ul{
		width: 100%;
	    height: 50px;
	    display: inline-block;
	    margin-bottom: 0;
	    padding: 0;
	}

	.sf .mo.topNav ul li {
	    width: auto;
	    height: 35px;
	    display: inline-block;
	    font-size: 20px;
	    color: #9A9E90;
	    text-align: center;
	}

		.sf .mo.topNav ul li i{
			color: #ffffff;
    		text-shadow: 2px 1px 4px #dbdfd5;
		}

	.sf .mo.topNav ul li:nth-child(1) {
	    position: fixed;
	    top: 12px;
	    left: 60px;
	}		

	.sf .mo.topNav ul li:nth-child(2){
	    position: fixed;
	    top: 7px;
	    left: calc((100% - 135px)/2);
	}

	.sf .mo.topNav ul li:nth-child(3) {
	    position: fixed;
	    top: 12px;
	    right: 60px;
	}

	.sf .mo.topNav ul li:nth-child(4) {
	    position: fixed;
	    top: 12px;
	    right: 15px;
	}
		.sf .mo.topNav ul li:nth-child(4) i{ position: relative; }
		.sf .mo.topNav ul li:nth-child(4) span {
			width: 20px;
		    height: 20px;
		    color: #fff;
		    background: rgb(98 98 98 / 50%);
		    font-size: 12px;
		    border-radius: 50%;
		    position: absolute;
		    top: -5px;
		    right: -8px;
		    line-height: 1.85;
		}


	.sf .mo.topNav ul li.logo{width: 95px;}
		.sf .mo.topNav ul li.logo img{
			width: auto;
			height: 39px;
		}
 
}


/*================ Sub-menu lvl2 ===============*/
.sf-menu .simple_menu .simple_menu {
    left: 100%;
    top: 0;
    margin-top: 0;
}
.sf-menu .simple_menu .simple_menu:before {    display: none;}

.sf-menu .sf-mega {
    position: absolute;
    text-align: left;
    top: 45px;
    right: 0;
    z-index: 109;
    background-color: #daddd6;
    background-repeat: no-repeat;
    width: 230px;
    color: #666;
    padding: 5px;
    border-radius: 3px;
    border:1px solid #fff;
    border-top: 3px double #ffffff;
}

.sf-menu a.pay {
    color: #fff;
    padding: 3px 16px;
    font-size: 18px;
    letter-spacing: 1px;
    border-radius: 4px;
    height: auto;
    line-height: 1.8;
}
  .sf-menu a.pay i {margin-left: 10px;color: #fff;}
  .sf-menu a:hover.pay, .sf-menu a.pay:hover i {  
    color: #8a8c85;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;    
  }
  
.sf-mega p {    margin-bottom: 0;}

.cpro {
    height: auto;
    overflow: hidden;
    margin-top: 3px;
    padding-top: 3px;
}

.waveGroup{
  position: absolute;
  top: -50px;
  right: 210px;
  z-index: -1;
}

.wavebox {
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}
   .wavebox:hover .wave {
      margin-top: 65px;
      transition: all 300ms ease;
  }
  .wavebox:after {
      content: '';
      display: block;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
      z-index: 11;
      transform: translate3d(0, 0, 0);
  }

.wave {
    opacity: 0.2;
    position: absolute;
    top: 3%;
    left: 50%;
    background: rgb(255 255 255);
    width: 195px;
    height: 195px;
    margin-left: -95px;
    margin-top: 85px;
    transform-origin: 50% 48%;
    border-radius: 33%;
    animation: drift 8000ms infinite linear;
    transition: all 500ms ease;
}
  .wave.layer03 {   
      animation: drift 15000ms infinite linear;
      background: rgb(230 236 222);
      top: 10%;
      opacity: 0.3;
  }

  .wave.layer02 {
      animation: drift 12000ms infinite linear;
      opacity: .15;
      background: rgb(255 255 255);
  }

@keyframes drift {
    from {   transform: rotate(0deg);    }
    from {   transform: rotate(360deg);    }
}

@media (min-width: 1200px) {
   .wavebox:hover .wave {    
    margin-top: 80px;  
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;  
  }
    .wave {
        width: 160px;
        height: 160px;
        margin-left: -80px;
        margin-top: 85px;
        opacity: 0.4;
    }      
    .wave.layer03 {   opacity: 0.5;    }
    .wave.layer02 {   opacity: .35;    }  
}

@media (min-width: 991px) {
    .wave {
      width: 330px;
      height: 330px;
      margin-left: -62px;
      margin-top: 100px;
  }
}





/*********************************************************************************/
/* index-banner slick                                                            */
/*********************************************************************************/

section.bannerBox{
	width: 100%;
    height: auto;
    padding: 0 10%;
}
   
.bx-wrapper {
	border: unset!important;
    box-shadow: unset!important;
    position: relative;
    margin-bottom: 0px!important;
    margin: 0 auto;
    max-width: 1440px!important;
    width: 100%;
    padding: 0 0px!important;
}

.bx-wrapper .bx-pager {
    padding-top: 15px!important;
    text-align: right!important;
    font-size: .0!important;
    font-family: Arial!important;
    font-weight: bold!important;
    color: #666!important;
    margin: 0 auto!important;
    width: 90%!important;
    position: absolute!important;
    bottom: 20px!important;
    left: 0!important;
    right: 0!important;
}

.bx-wrapper .bx-pager {    text-align: right!important;}

.bx-wrapper .bx-controls-direction a {
	top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 56px!important;
    height: 56px!important;
    z-index: 999!important;    
}

.bx-wrapper .bx-prev {    left: -8%!important;background: url(../images/Bhover.png)!important;}
.bx-wrapper .bx-prev:focus, .bx-wrapper .bx-prev:hover{    
	background-position: -58px 0px!important;
	-webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.bx-wrapper .bx-next {    
	right: -8%!important;
	background: url(../images/Bhover.png) 0 -58px!important;
}

.bx-wrapper .bx-next:focus, .bx-wrapper .bx-next:hover {    
	background-position: -58px -58px!important;
	-webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.bx-wrapper .bx-controls-auto, .bx-wrapper .bx-pager {
    bottom: 10px!important;
    right: 7%!important;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    display: block;
    margin: 0 5px;
    outline: 0;
    text-indent: -9999px;
    background: #e6e9e2!important;
    border-radius: 50%;
    border: solid 1px #e6e9e2!important;
    width: 9px!important;
	height: 9px!important;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {    
	background: #bbbcaf!important;
    border: solid 1px #bbbcaf!important;
}

@media (max-width: 990px){
	section.bannerBox{    padding: 0;}
	.banner {    padding: 30px 0;}
	.bx-wrapper {    padding: 0!important;}
	.bx-wrapper .bx-controls-direction a{display: none;}
	.bx-wrapper .bx-controls-auto, .bx-wrapper .bx-pager {    right: 2%!important;}
}

@media (max-width: 420px) {
	.bx-wrapper .bx-pager {
	    bottom: 5px!important;
	    right: 0!important;
	    width: 95%!important;	
	}
	.bx-wrapper .bx-pager.bx-default-pager a {
	    width: 6px!important;
	    height: 6px!important;
	    background: #c5c2c2!important;
	    border: solid 1px #c5c2c2!important;
	}
	.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {    
		background: #222!important; border: solid 1px #222!important;
	}	
	.bannerP{
		display:block;
		width: 100%;
		/*height: 400px;*/
		margin:0 auto;
		background-size: cover!important;
		background-position: center top!important;
	}

	/*.bannerP img{display: none!important;}*/
	/*.bx-viewport {	    height: 400px!important;	}*/
}


/*********************************************************************************/
/* banner                                                                        */
/*********************************************************************************/
.inBanner{
  width: 100%;
  max-width: 1440px;
  height: auto;
  display: block;
  margin: 0 auto;
}

  .inBanner img{ width: 100%; }

@media (max-width: 768px){
  .inBanner > .container {
      width: 100%!important;
      padding: 0 0px!important;
      margin: 0 auto!important;
  }
}

/*********************************************************************************/
/* index-products                                                                */
/*********************************************************************************/
.IndexPro {
   /* padding: 0 50px;*/
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}

.products-box {
    width: 100%;
    padding: 70px 50px 0;
   /* padding-top: 70px;*/
  /*padding-bottom: 80px;*/   
}

.products-box .title{
	width: 100%;
    height: auto;   
    padding-top: 5px;
    position: relative;
}

.proTit{
	width: 300px;
    height: auto;
    background: url(../images/tit_bg.png) 52px 0px no-repeat;
    margin: 0 auto 40px;
    padding-top: 5px;
    text-align: center;
}

  .proTit img.logo_ice{ 
    width: 160px;
    height: auto;
    margin: 15px 0 0;
  }

.title .proTit h2 {
    text-align: center;
    line-height: 1.2;
    font-size: 30px;
    letter-spacing: 2px;
    margin: 10px auto 0px;
    font-weight: bold;
    color: #585250;
    width: 300px;
    font-family: 'Philosopher';
    text-transform: uppercase;    
}

.title .proTit h3 {
    text-align: center;
    line-height: 1.2;
    font-size: 23px;
    margin: 10px auto 0px;
    color: #585250;
    width: 300px;
    font-family: 'Noto Serif TC', serif;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.hot-arrow, .hot-arrow2 {
    position: absolute;
    bottom: 30px;
    right: 35px;
    width: 40px;
    height: 36px;
}

.hot-arrow .slick-arrow {
    width: 36px;
    height: 36px;
    display: inline-block;
    z-index: 100;
    color: transparent;
    border: 0;
    position: absolute;
    cursor: pointer;
    left: -20px;
    transition: all .3s ease;
    background: none;
    min-width: 36px!important;
}
.hot-arrow .slick-prev{           background: url(../images/arrow_l.png);}
.hot-arrow .slick-prev:hover{     background: url(../images/arrow_l_hover.png); }
.hot-arrow .slick-prev:before{    content: '';background: url(../images/arrow_l_hover.png);   }

.hot-arrow .slick-next,
.hot-arrow2 .slick-next {
    right: -20px;
    left: auto;
    background: url(../images/arrow_r.png);
}
.hot-arrow .slick-next:hover{     background: url(../images/arrow_r_hover.png);   }
.hot-arrow .slick-next:before{    content: '';background: url(../images/arrow_r_hover.png);  }
.hot-arrow .slick-arrow:hover {   -webkit-transform: translateY(-8px);transform: translateY(-8px);}

.product-list{    margin: 0 -11px;}

.product-list li {    padding: 0 20px;position: relative;}

.product-list .pic{
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    z-index: 1;
    margin-bottom: 20px;
    overflow: hidden;
}

.product-list .pic img{
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
    width: 100%;
    max-width: unset;
}

.product-list .pic:hover img{
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);  
    -webkit-filter: brightness(105%); /* Safari */
    filter: brightness(105%);
}

/*.product-list .slickbox.new:before {
    content: 'Hot';
    width: 40px;
    line-height: 25px;
    border-radius: 60px;
    font-weight: 500;
    box-shadow: 5px 5px 20px rgba(170,172,173,0.75);
    text-align: center;
    color: #DF2C46;
    font-size: 14px;
    display: block;
    position: absolute;
    background: #fff;
    top: 10px;
    left: 10px;
    z-index: 5;
    font-family: 'Poppins', sans-serif;
}*/

.product-list .name{
	height: 25px;
    text-align: center;
    line-height: 1.2;    
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0px;   
}

.product-list .name a{    color: #999;}

.product-list li > .slickbox:hover .name a{
	color: #444;	
	/*font-size: 17px;*/
	/*font-weight: bold;*/
	border-bottom: 1px solid #888;
	padding-bottom: 4px;
	transition: all .7s ease;
}

.product-list .slickbox.new p{
	font-size: 16px;
	text-align: center;
}

.product-list .slickbox.new p a{	color: #888;}

.product-list .slickbox.new p a:hover{	
	color: #333;
	text-decoration: underline;
	-moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

@media screen and (max-width:1024px) {
	.indexPro {    padding: 0 0;}
	.products-box {   padding: 30px 50px 0;}
}

@media screen and (max-width:990px) {
    .products-box .title{        font-size: 18px;padding-bottom: 5px;    }
    .product-list .name{         height: 25px;margin-bottom: 20px;    } 
}

@media screen and (max-width: 768px) {  
	.products-box {
	    padding-bottom: 0;
	    padding: 20px 0 0;
	}
 }

@media screen and (max-width: 600px) {
	.proTit {    margin: 0 auto 35px;}
    .hot-arrow {
        right: 25px;
        bottom: 20px;
        left: auto;
    }
    .hot-arrow .slick-arrow{        margin:0;}
    .product-list{                  z-index: 50;position: relative;    }
    .IndexPro {    padding: 0 0px;}
    .title .proTit h2 {    font-size: 28px;}
}

@media screen and (max-width: 320px) {
  .title .proTit h2 {    font-size: 25px;}
}


/*********************************************************************************/
/* index-hot news                                                                */
/*********************************************************************************/
.IndexNews {
    /*padding: 0 50px;*/
    position: relative;
    width: 100%;
    display: inline-block;
}

.IndexNews .newsBox.{padding: 0 50px;width: 100%;}

.IndexNews .newsBox ul {    width: 100%;}

.IndexNews .newsBox li {
    list-style-type: none;
    width: 25%;
    float: left;
    padding: 1%;
}

.newshover {    position: relative;}
  .newshover date {
    display: block;
    width: 60px;
    height: 60px;
    color: #fff;
    background: rgb(71 75 21 / 80%);
    font-family: 'Philosopher';
    font-size: 25px;
    font-weight: bolder;
    text-align: center;
    line-height: 1.8;
    border: 1px solid #fff;
    border-radius: 50%;
    position: absolute;
    bottom: 24px;
    left: 25px;
    z-index: 1;
  }
    .newshover date span{
      font-size: 13px;
      letter-spacing: 1px;
      color: #fff;
      position: absolute;
      left: 14px;
      bottom: 4px;
    }
      .newshover:hover date {
        color: #111111;
        background: #dce4d4;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
      }
        .newshover:hover date span{
          color: #6f6e6e;
        }



.cover {
    font-size: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
}

.newshover .newspic {
  position: relative;
  overflow: hidden;
  margin: 0 0 40px 0;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.newshover .newspic:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 80%;
    background: rgb(255 255 255 / 80%);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    z-index: 2;
}

.newshover:hover .newspic:before {
    /*opacity: 1;*/
    width: 100%;
    height: 35%;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.newshover .newspic:after {
    content: 'READ MORE';
    color: #878c7a;
    border: solid 1px #878c7a;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    width: 90%;
    height: 36px;
    padding: 8px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    z-index: 3;
    opacity: 0;
    text-align: center;
    -webkit-transform: translate(0px, 50px);
    transform: translate(0px, 50px);
}

.newshover:hover .newspic:after {
    opacity: 1;
    -webkit-transform: translate(0px, 0);
    transform: translate(0px, 0);
}

.newshover .newspic img {
    position: relative;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    width: 100%;
    height: auto;
}

.newshover:hover .newspic img {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.newshover:hover .newspic:before {    opacity: 1;}

.newsBox .name{
	height: 45px;
    text-align: center;
    line-height: 1.5;    
    font-size: 16px;
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    margin-bottom: 0px;   
}

.newsBox .name a{    color: #999;}

.newsBox li > .new:hover .name a{
	color: #444;
	font-weight: 600;
	transition: all .7s ease;
}

.newsBox .new p{
	font-size: 16px;
	text-align: center;
}

.newsBox .new p a{	color: #888;}

.newsBox .new p a:hover{	
	color: #333;	
	-moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

@media screen and (max-width: 1024px) {
  .newshover date {
    width: 50px;
    height: 50px;
    font-size: 22px;
    line-height: 1.7;
    letter-spacing: 1px;
    left: 20px;
    bottom: 17px;
  }
    .newshover date span{
      font-size: 11px;
      left: 10px;
      bottom: 3px;
    }
}

@media screen and (max-width: 768px) {
  .IndexNews {    padding: 0 0px;}
  .IndexNews .newsBox{padding: 0;}
	.IndexNews .newsBox li {    width: 50%; padding: 2% 2% 30px;}
}
  

/*********************************************************************************/
/* index-ad                                                                      */
/*********************************************************************************/
.IndexAd {
    padding: 50px 0 100px;
    width: 100%;
    height: auto;
}
	.IndexAd img{width: 100%;}

@media screen and (max-width: 1024px) {
	.IndexAd {    padding: 40px 0 70px;}
}
@media screen and (max-width: 768px) {
	.IndexAd {    padding: 10px 0 40px;}
}
/*********************************************************************************/
/* index-about                                                                   */
/*********************************************************************************/
.Indexabout {
    display: block;
    width: 100%;
    height: auto;
    padding: 70px 0 0;
    margin: 0 auto;
    background: url(../images/about_bg.jpg) 0% 183px repeat-x;
}
	.Indexabout .row{margin-right: 0!important;margin-left: 0!important;}

	.Indexabout .aboutBox,
	.Indexabout .featuresBox{
		display: flex;
	    flex-flow: row wrap;
	    justify-content: center;
	    align-items: flex-start;
	    width: 100%;
	    max-width: 1440px;
	    height: auto;
	    margin: 0 auto 100px;
	}
		.Indexabout .aboutBox > div:nth-child(1){
			flex: 0 1 auto;
		    order: 1;
		    padding-right: 6%;
		    padding-left: 20px;
		}
			.Indexabout .aboutBox h1{
				font-size: 19px;
			    font-family: 'Noto Serif TC', serif;
			    font-weight: 700;
			    letter-spacing: 1.5px;
			    color: #434242;
			}

			.Indexabout .aboutBox h2{
				font-size: 100px;
			    font-weight: 600;
			    font-family: 'Philosopher';
			    letter-spacing: 5px;
			    text-transform: uppercase;
			    text-shadow: -6px 7px 7px rgb(0 0 0 / 25%);
			    margin-top: 10px;
			    margin-bottom: 30px;
			    color: #434242;
			}			

			.Indexabout .aboutBox h4{
				font-size: 28px;
			    font-weight: 600;
			    margin-bottom: 0;
			    margin-left: -12px;
			    color: #555;
			    padding: 0 0 0 30px;
			}
			.Indexabout .aboutBox h5{
			    font-size: 22px;
			    font-weight: 600;
			    color: #555;
			    padding: 0 0 0 30px;
			    margin: 5px 0 25px;
			}

			.Indexabout .aboutBox p{
				font-size: 18.5px;
			    font-weight: 600;
			    padding: 0 0 0 30px;
			    line-height: 2;
			    letter-spacing: 1px;
			    color: #555;
			}				

		.Indexabout .aboutBox > div:nth-child(2){
			flex: 0 1 auto;
    		order: 2;
		}
			.Indexabout .aboutBox > div:nth-child(2) .Imgshadow{
				width: 100%;
			    height: auto;
			    padding-left: 20px;
			}
				.Indexabout .aboutBox > div:nth-child(2) .Imgshadow img{
					width:100%;
					box-shadow: -10px 20px 30px rgb(0 0 0 / 30%);
				}



	.Indexabout .featuresBox{	    max-width: unset;margin: 0 auto 0;}
		.Indexabout .featuresBox > div:nth-child(1){
			flex: 0 1 auto;
		    order: 1;
		    padding: 0;
		}
			.Indexabout .featuresBox > div:nth-child(1) .Imgshadow{
				width: 100%;
			    height: auto;			    
			}
				.Indexabout .featuresBox > div:nth-child(1) .Imgshadow img{
					width:100%;
					box-shadow: -20px 20px 30px rgb(0 0 0 / 30%);
				}

		.Indexabout .featuresBox > div:nth-child(2){
			flex: 0 1 auto;
		    order: 2;
		    padding-left: 4%;
		    padding-right: 5%;
		}
			.Indexabout .featuresBox h2{
				font-size: 22px;
			    font-family: 'Philosopher';
			    font-weight: 700;
			    letter-spacing: 1px;
			    color: #434242;
			    margin-top: 30px;
			}

			.Indexabout .featuresBox h1{
				font-size: 54px;
			    font-weight: 700;
			    font-family: 'Noto Serif TC', serif;
			    letter-spacing: 3px;
			    text-transform: uppercase;
			    margin-top: 10px;
			    margin-bottom: 60px;
			    color: #434242;
			    position: relative;
			}

				.Indexabout .featuresBox h1:after{
					content: '';
				    display: block;
				    position: absolute;
				    left: 0px;
				    top: 80px;
				    background-color: #434242;
				    width: 55px;
				    height: 1px;
				}	

			.Indexabout .featuresBox p{
				font-size: 18px;
			    font-weight: 600;
			    padding: 0 0 0 5px;
			    line-height: 2;
			    letter-spacing: 0.5px;
			    color: #666;
			}			


@media screen and (max-width: 1500px) {
	.Indexabout .aboutBox{ margin: 0 auto 60px;}
	.Indexabout .featuresBox { margin: 0 auto 0px;}
		.Indexabout .featuresBox h2 {margin-top: 15px;}
		.Indexabout .featuresBox h1 {margin-bottom: 50px;}
}

@media screen and (max-width: 1400px) {
	.Indexabout .aboutBox > div:nth-child(2) .Imgshadow img { margin-top: 60px;}
}

@media screen and (max-width: 1300px) {
	.Indexabout {
	    padding: 70px 0 0;
	    margin: 70px auto 0;
	    background: url(../images/about_bg.jpg) 0% 183px repeat;
	}
	    .Indexabout .aboutBox, 
	    .Indexabout .featuresBox { margin: 0 auto 40px;}	    
			.Indexabout .aboutBox > div:nth-child(1) {padding-right: 1%;} 
				.Indexabout .aboutBox h2 {
				    font-size: 70px;
				    margin-bottom: 10px;
				}
				.Indexabout .aboutBox h4 {
					padding: 0 0 0 10px;
				    font-size: 25px;
				}			
				.Indexabout .aboutBox h5 {
					margin: 5px 0 10px;
				    padding: 0 0 0 10px;
				    font-size: 20px;
				}
				.Indexabout .aboutBox p {
					font-size: 18px;
				    line-height: 1.8;
				    padding: 0 0 0 10px;
				}
					.Indexabout .aboutBox > div:nth-child(2) .Imgshadow img { margin-top: 0px;}

			.Indexabout .featuresBox > div:nth-child(2) {
			    padding-left: 3%;
			    padding-right: 2%;
			}
				.Indexabout .featuresBox h2 {margin-top: 5px;}
				.Indexabout .featuresBox h1 {
					margin-bottom: 25px;
				    font-size: 45px;
				}
				.Indexabout .featuresBox h1:after {  top: 60px;	}
				.Indexabout .featuresBox p {
				    font-size: 18px;
				    padding: 0 0 0 5px;
				    line-height: 1.8;
				}
}

@media screen and (max-width: 1024px) {
	.Indexabout {	    margin: 50px auto 0;	}
	.Indexabout .featuresBox {    margin: 0 auto 10px;}
}

@media screen and (max-width: 990px) {
	.Indexabout {   padding: 30px 10% 0;margin: 40px auto 0;}
		.Indexabout .aboutBox h2 {
		    font-size: 80px;
		    margin-bottom: 25px;
		}
		.Indexabout .aboutBox h5 {    margin: 8px 0 20px;}
			.Indexabout .aboutBox > div:nth-child(2) .Imgshadow img {    
				margin-top: 40px;
				margin-bottom: 30px;
			}

		.Indexabout .featuresBox > div:nth-child(1) {    order: 2;padding: 10px 0 40px;}
		.Indexabout .featuresBox > div:nth-child(2) {    order: 1;}
}

@media screen and (max-width: 767px) {
	.Indexabout .aboutBox:nth-child(1) .Imgshadow{
		width: 100%;
	    height: auto;
	    padding-left: 50px;
	}
		.Indexabout .aboutBox:nth-child(1) .Imgshadow img{
			width:100%;
			box-shadow: -10px 20px 30px rgb(0 0 0 / 30%);
		}
}

@media screen and (max-width: 567px) {
	.Indexabout {    padding: 30px 7% 0;}
		.Indexabout .aboutBox > div:nth-child(1) {
		    padding-right: 0;
		    padding-left: 0;
		}
			.Indexabout .aboutBox h2 {    font-size: 65px;}
			.Indexabout .aboutBox > div:nth-child(2) .Imgshadow {    padding-left: 0;}

		.Indexabout .aboutBox > div:nth-child(2) {    padding: 0;}
}

@media screen and (max-width: 320px){
	.Indexabout .aboutBox h2 {
	    font-size: 53px;
	    letter-spacing: 2px;
	}
}

/*********************************************************************************/
/* News                                                                       */
/*********************************************************************************/
.News .products-box {    padding-top: 30px;}

  .news_icon{display: inline-block;vertical-align: middle;}
    .news_icon li {
      float: left;
      width:32px;
      height:32px;
      border-radius: 50%;
      background-color: #fab81a;
      color: #fff;
      font-size: 16px;
      line-height: 2;
      margin:0 3px;
    }
    .news_icon a:hover li{
        background-color: #AAA9A9;
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease; 
    }

  .News .content{
      width: calc(100% - 285px);
      float: right;
      background: none;
      min-height: 300px;
      box-sizing: border-box;
      padding: 0;
      margin-bottom: 5%;
  }
    .News .content h1 {
        width: 100%;
        height: auto;
        font-size: 25px;
        font-weight: 500;
        letter-spacing: 0.5px;
        line-height: 1.4;
        color: #444;
        padding-bottom: 10px;
        float: left;
        border-bottom: 1px solid #999;
        margin-top: 10px;
    }
      .News .content h1 span {
          float: right;
          width: auto;
          margin-top: 3px;
      }

    .News .content .date .news_item {
        position: relative;
        padding: 0 0 0 15px;
        margin: 0 10px;
        font-size: 16px;
    }
      .News .content .date {   margin-bottom: 30px;display: inline-block;  }
      .News .content .date .news_item:before {
          content: '';
          display: block;
          width: 2px;
          height: 14px;
          position: absolute;
          left: 0;
          top: 50%;
          margin: -7px 0 0;
          background: #F2B018;
      }

    .News .content .news02 {
        width: 100%;
        padding: 0 5% 5%;
    }
      .News .content .news02 img {
          width: 100%;
          margin-bottom: 5%;
          max-width: 800px;
      }
      .News .content .news02_text {
          font-size: 16px;
          color: #444;
          letter-spacing: 0.5px;
          line-height: 1.7;
      }

.backBtn{
  display: block;
  width: 100%;
  height: 50px;
  text-align: center;
  margin:50px auto 20px;
}

.btn.back {
    padding: 5px 15px 5px 20px;
    color: #444;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    border-radius: 0px;
    background-color: #ddd;
}
  .btn.back:hover {  color: #fff;background: #fab81a;  }
  .back i {    
    margin-right: 15px;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
  }
    .back:hover i {    color: #fff;}


@media screen and (max-width: 990px) {
  .News .content{ width:100%;}
  .News .content .news02_text {    text-align: left;}
}  

@media screen and (max-width: 567px) {  
  .News .content .date .news_item {
      padding: 0 0 0 15px;
      margin: 0 5px;
      font-size: 14px;
  }
  .news_icon {    margin: 10px 0 0;}
    .news_icon li {
        width: 37px;
        height: 37px;
        font-size: 19px;
        line-height: 2;
        margin: 3px 5px 7px;
    }
}

@media (max-width: 320px){
  .News .content .date .news_item {
      padding: 0 0 0 8px;
      margin: 0 0px;
  }
}


/*********************************************************************************/
/* about                                                                         */
/*********************************************************************************/
.IndexNews.About{
  width:100%;
  height: auto;
  display: inline-block;
  padding: 50px 50px 10px;
}
  .AboutBox {
    width: 100%;
    height: auto;
    padding: 0 5%;
    background: url(../images/about02.png) 97% 230px no-repeat;
    background-size: 20%;
  }
    .AboutBox .title{border-bottom: 1px solid #eee;}
    .about_text{
      width: 100%;
      height: auto;
      min-height: 1000px;
      background: url(../images/about.jpg) 0% -160px no-repeat;
      background-size: 53%;
      padding-top: 50px;
    }
      .about_text > div:nth-child(2){
        box-shadow: 15px 15px 20px rgb(0 0 0 / 15%);
        padding: 40px 60px 90px;
        background: url(../images/name.png) rgb(255 255 255 / 0.75) no-repeat 97% 96%;
        background-size: 180px;
        width: 70%;
        float: right;
      }
      .about_text p{
          font-size: 16px;
          color: #444;
          letter-spacing: 0.5px;
          line-height: 2;
          margin: 0 0 15px;      
      }
        .about_text p span{
          font-size: 18px;
          font-weight: 600;
          color: #333;
          margin: 50px 0 15px;
        }
    .about_tit {margin: 10px 0 30px 30%;width: 70%;}
      .about_tit h1 {
          font-size: 35px;
          font-family: 'Noto Serif TC', serif;
          font-weight: 700;
          color: #585250;
          letter-spacing: 2px;
          margin-bottom: 20px;
      }
      .about_tit h2{
        font-size: 25px;
          font-weight: 500;
          color: #000;
          letter-spacing: 2px;
          margin-bottom: 20px;
      }
     
      .about_tit h4{
        font-size: 35px;
          font-weight: 300;
          letter-spacing: 1px;
          color: #c7c4c4;
          margin: 3px 0 0 0;
          font-family: 'Trirong', serif;
      }
     

hr.hr_s{width: 70px;
    margin: 30px auto 0;
    border-top: 1px solid #e4d6d6;
}

@media screen and (max-width: 1300px) {
   .about_text > div:nth-child(2){   width: 85%;}
}   

@media screen and (max-width: 1024px) {
  .IndexNews.About {
      /*display: flex;*/
      padding: 50px 0 0;
  }
  .AboutBox {    
    padding: 0 0%;
    background: url(../images/about02.png) 97% 285px no-repeat;
    background-size: 20%;
  }
  .about_text {    
    background: url(../images/about.jpg) 0% -130px no-repeat;
    background-size: 53%;
    min-height: 900px;
  }
  .about_text > div:nth-child(2){   width: 95%;}
}

@media screen and (max-width: 990px) {
  .AboutBox {
    background: url(../images/about02.png) 100% 310px no-repeat;
    background-size: 20%;
  }
  .about_text {    
    min-height: 1000px;
    background: url(../images/about.jpg) 0% -100px no-repeat;
    background-size: 50%;
  }
  .about_text > div:nth-child(2) {    padding: 40px 60px 130px;}
}

@media screen and (max-width: 568px) {
  .IndexNews.About {    margin-bottom: 50px;padding: 30px 0 0;}
    .AboutBox {
        background: url(../images/about02.png) 15% 220px no-repeat;
        background-size: 55%;
    }
      .about_text {    
        display: inline-block;
        background: url(../images/about.jpg) 0% bottom no-repeat;
        background-size: 100%;
        padding-bottom: 340px;
        padding-top: 10px;
      }
        .about_text > div:nth-child(2) {    padding: 25px 10px 130px;}

  .about_tit {
      margin: 10px 0 30px 5%;
      width: 90%;
  }
    .about_tit h1 {
        font-size: 28px;
        letter-spacing: 1.5px;
        margin-bottom: 10px;
    }
    .about_tit h4 {    font-size: 28px;padding-top: 10px;}

}

@media screen and (max-width: 320px) {
  .AboutBox {        background: url(../images/about02.png) 15% 240px no-repeat;background-size: 55%;}
    .about_text {    padding-bottom: 260px;}
      .about_tit h1 {    font-size: 25px;    }
      .about_tit h4 {    font-size: 25px;}
}


/*********************************************************************************/
/* contant                                                                       */
/*********************************************************************************/
.login form{  margin-bottom: 30px;}
.login iframe{border:1px solid #e9e2e1;margin-bottom: 20px;}
.login .contactTit h4{
    color: #fff;
    padding-bottom: 20px;
    margin: 0 auto 10px;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Noto Serif TC', serif;
    background: url(../images/titBg05.jpg) no-repeat;
    background-size: cover;
    line-height: 2.4;
    letter-spacing: 1px;
    height: 45px;
    text-align: center;
}

.login .contactTit p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 1.5px;
    width: 100%;
    padding: 0 3% 12px;
}

ul.contact-address li {
    padding: 0 0 12px;
    margin: 0;
    font-size: 16px;
    letter-spacing: 1px;
}
  ul.contact-address li a{color: #333;}
    ul.contact-address li a:hover{opacity: 0.7;}
  
  ul.contact-address li i {
      margin: 0 15px 0;
      color: #626262;
      font-size: 17px;
  }

@media screen and (max-width: 1024px) {
  .IndexNews.Contant {    padding: 0 0;}
}

@media screen and (max-width: 320px) {
  .login .contactTit{padding: 0!important;}
  ul.contact-address li {    letter-spacing: 0px;}
}


/*********************************************************************************/
/* products                                                                      */
/*********************************************************************************/
.listBox .products-box { padding: 70px 00px 0;}

.listBox .proBox{
    margin: 0;
    width: calc(100% - 285px);
    float: right;
}

.listBox .proBox .listTit {
    width: 97%;
    height: 100px;
    background: url(../images/proTit.png) 50px 20px repeat-x;
    margin: 0 2% 0 1%;
    text-align: left;
    position: relative;
}
  .listBox .proBox .listTit h1{
      width: 30%;
      height: auto;
      min-height: 40px;
      font-size: 19px;
      font-family: 'Noto Serif TC', serif;
      font-weight: 600;
      letter-spacing: 1.5px;
      line-height: 2;
      margin: 10px auto 20px;
      padding: 0 0 10px 70px;
      background: url(../images/apple-ic.png) 0px 0px no-repeat;
      background-position: 10px 0px;
      position: absolute;
      top: 0px;
      left: 0px;
  }
    .listBox .proBox .listTit p {
        font-size: 13px;
        position: absolute;
        top: 30px;
        right: 0px;
        text-align: right;
    }

.listBox .product-list li {
    padding: 10px 2% 60px;
    width: 32.5%;
    height: auto;
    display: inline-block;
    margin: 0 auto;
}
  .listBox .product-list .slickbox.new p {    color: #777;}
    .listBox .product-list .slickbox.new p.proEn{
        font-size: 13px;
        font-family: 'Philosopher';
        color: #dcb194;
        width: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;        
    }
      .listBox .product-list .slickbox.new p.proEn span{position: relative;color: #caa63a;}
        .listBox .product-list .slickbox.new p.proEn span:before,
        .listBox .product-list .slickbox.new p.proEn span:after{
            content: '//';
            width: 3px;
            height: 13px;
            font-size: 13px;
            font-family: 'Philosopher';
            color: #e4b195;
            position: absolute;
            top: 0;
            left: -16px;
        }
        .listBox .product-list .slickbox.new p.proEn span:after{  
            content: '//';
            width: 3px;
            height: 13px;
            font-size: 13px;
            font-family: 'Philosopher';
            color: #e4b195;
            position: absolute;
            top: 0;
            right: -8px;
            left: unset;   
        }

@media screen and (max-width: 1024px) {
  .listBox .products-box {    padding: 30px 0px 0;}
    .listBox .proBox {    width: calc(100% - 265px);}
}

@media screen and (max-width: 990px) {
  .listBox .proBox {
      width: 100%;
      float: unset;
  }
}

@media screen and (max-width: 767px) {
  .listBox .products-box {    padding: 30px 5% 0;}
  .listBox .product-list li {  width: 49.5%;}
}

@media screen and (max-width: 568px) {
  .listBox .proBox .listTit h1 {    width: 100%;}
  .listBox .proBox .listTit p {
      top: 73px;
      right: 0px;
      left: 15px;
      text-align: left;
  }
}

@media screen and (max-width: 567px) {
  .listBox .products-box {    padding: 30px 5% 0;}
  .listBox .proBox .listTit {
    width: 100%;
    height: 105px;
    margin: 0 auto;
  }
  .listBox .product-list li {  width: 99.5%;}
}

@media screen and (max-width: 320px) {
  .listBox .products-box {    padding: 30px 0% 0;}
}  

/*********************************************************************************/
/* product-detail                                                                */
/*********************************************************************************/

:focus {      outline-width: 0px!important;   }
a:hover, a:focus {    text-decoration: none;}

@media (max-width: 420px) {
  .MpAll0 {padding: 0;}
} 

.clearfix {    display: block;/*overflow: hidden;*/}


.gallery {
    width: 100%;
    margin: 0 auto;
    padding: 0 10% 0 5%;
}
.gallery .stage {max-width: 550px;margin: 0 auto;  }
.gallery .stage .pic {      text-align: center;   }
.gallery .stage .pic img {
    max-width: 550px;
    max-height: 100%;
    height: auto !important;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    width: 100%;
}
.gallery .thumbnails {  max-width: 550px;margin: 20px auto 0; }
.gallery .slick-prev, .gallery .slick-next {
    width: 24px;
    height: 46px;
    background: url(../images/slick_arrows.png) no-repeat!important; 
    border: none;
    position: absolute;
    background-position: left top;
    left: -25px;
    top: 35%;
    text-indent: -9999px; 
}
.gallery .slick-next {
    background-position: right top!important;
    left: inherit;
    right: -25px;
}

  .slick-slide img {
    display: block;
    width: 100%;
    max-width: 110px;
    margin: 0 auto;
}

.DetailBox{
    height: auto;
    margin: 10px auto 5%;
    width: calc(100% - 285px);
    float: right;
    background: none;
    min-height: 300px;
    box-sizing: border-box;
    padding: 0;
}

.DetailBox li { 
  padding: 0 0 8px;
  letter-spacing: 1.5px;
  color: #1f1f1f;
  font-size: 15px;
}

.DetailBox .col-md-6 {    padding: 0 10px 0 10px;}

.DetailBox .gallery ul {
    padding: 15px 0 5px;
    list-style-type: none;
    clear: both;
    border-top: 1px solid #e1e1e1;
}
  .DetailBox .gallery li {   padding: 0 7% 8px;}

.DetailBox img.pro_img{width: 70%;height: auto;}

.top__Title h2 {
    position: relative;
    display: flex;
    font-weight: 500;
    margin-bottom: 40px;
    margin-top: 10px;
}

.top__Title h2 span {
  font-size: 26px;
  color: #000;
  letter-spacing: 1px;
  font-family: 'Noto Serif TC', serif;
}

.top__Title .border {
    width: 15px;
    height: 4px;
    background: rgb(249 95 49 / 85%);
    display: block;
    position: absolute;
    bottom: -25px;
    left: 2px;
}

@keyframes rollIn {
  0% {
      opacity: 0;
      -webkit-transform: translateX(-100%) rotate(-120deg);
      -ms-transform: translateX(-100%) rotate(-120deg);
      transform: translateX(-100%) rotate(-120deg);
    }

  100% {
      opacity: 1;
      -webkit-transform: translateX(0px) rotate(0deg);
      -ms-transform: translateX(0px) rotate(0deg);
      transform: translateX(0px) rotate(0deg);
    }
}

.rollIn {     animation-name: rollIn;   }

.sp{
  font-size: 15px;
  letter-spacing: 1px;
  margin-top: -5px;
  color: #626351;
}

.price {
    display: flex;
    flex-flow: row;
    justify-content: right;
    align-items: center;
    margin-bottom: 15px;
}

.price p {
    color: #f95f31;
    font: 18px/30px '微軟正黑體', 'sans-serif','Roboto';
    margin: 0px 0 0;
    font-weight: 600;
}

.price p span {    font-size: 3rem;}

.price small {
    position: relative;
    /* width: 110px; */
    padding: 5px 3px 2px 0px;
    margin-left: 30px;
    margin-right: 10px;
    color: #555;
    text-decoration-line: line-through;
    font-size: 15px;
}

/*.price small:before{
  background: #555 none repeat scroll 0 0;
    content: "";
    height: 1px;
    left: -2%;
    position: absolute;
    right: 0%;
    top: 50%;
    transform: rotate(-7deg) translate(0, -50%);
    -moz-transform: rotate(-7deg) translate(0, -50%);
    -webkit-transform: rotate(-7deg) translate(0, -50%);
}*/

.countBox {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    align-items: center;
    margin-top: 20px;
}

.count {
    display: flex;
    width: 35%;
    margin: 0px 2% 15px 0;
    order: 1;
}
  .count form {    width: 100%;}

.countBox span:nth-child(2) {
    display: flex;
    order: 3;
    width: 35%;
    justify-content: center;
}
.countBox span:nth-child(3) {
    display: flex;
    order: 4;
    width: 35%;
    justify-content: center;
}
.countBox span:nth-child(4) {
    display: flex;
    order: 2;
    margin-right: 20%;
}
.countBox span:nth-child(5){  
  display: flex;
  order: 2;
  margin-right: 20%;
}

.model{
  display: inline-block;
  clear: both;
  width: 93%;
  height: auto;
  margin: 0 auto 0; 
}

.model h5{font-size: 18px;color: #000;}

.model p {
    line-height: 1.6;
    margin-bottom: 25px;
}

.model ul {    margin: 10px 0 0 5px;border-top: none;}

.model li span{padding-bottom: 0;color: #fa7750;letter-spacing: 0;}

.model li{color: #555;margin-bottom: 2px;letter-spacing: 1px;}

.itembox{
  width: auto;
  height: auto;
  padding-right: 0px;
  padding-left: 0px;
}

.c_red{color: #df0404;}


/*text effect*/

.detailTit {     
  background-color: var(--bg-color);
  font-family: 'Maitree', serif;
  color: #000;
  text-align: left;  
}

.detailTit h1 {
    font-size: 3em;
    font-weight: normal;
    margin-bottom: 3rem;
    border-bottom: 1px solid #d8d8d6;
    height: 33px;
}

.detail-title span{
    position: relative;
    overflow: hidden;
    display: block;
    line-height: 1.2;
}

.detail-title span.en{
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Philosopher';
    display: block;
    color: #9a9e90;
    padding: 5px 0 0 5px;    
}

.detail-title span.cn{
    color: #616250;
    font-family: 'Noto Serif TC', serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;    
    margin-bottom: 1rem;
    float: left;
}

.detail-title span::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    animation: a-ltr-after 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(-101%);
}

.detail-title span::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    animation: a-ltr-before 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(0);
}

.detail-title span:nth-of-type(1)::before,
.detail-title span:nth-of-type(1)::after{
    animation-delay: 1.5s;
}

.detail-title span:nth-of-type(2)::before,
.detail-title span:nth-of-type(2)::after{
    animation-delay: 2s;
}

@keyframes a-ltr-after{
    0% {transform: translateX(-100%)}
    100% {transform: translateX(101%)}
}

@keyframes a-ltr-before{
    0% {transform: translateX(0)}
    100% {transform: translateX(200%)}
}

/*/text effect*/

.DetailPic{  text-align: center;}

.DetailPic img{
  position: relative;
  width: 100%!important;
  max-width: 1000px;
  height: auto!important;
}

  .DetailPic img.half {
    width: 48%!important;
    height: auto!important;
  }

.lineDetail {
  font-weight: bold;
  font-family: '微軟正黑體';
  font-size: 19px;
  color: #eb5e34;
  letter-spacing: 1px;
  line-height: 1.7;
  text-align: left;
  margin: 30px 9% 20px;
}

.DetailPic p{
  font-weight: bolder;
  font-size: 16px;
  letter-spacing: 0.5px;
  line-height: 1.8;
  padding: 0;
  color: #3a3a3a;
  margin: 15px 9% 10px;
  text-align: left;
}

.btn.btn-4 {
  background: #fff;
  border: 3px double rgb(249 95 49 / 85%);
  border-radius: 0;
  font-size: 14px;
  padding: 3px 15px 3px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  width: 75px;
  margin-right: 8px;
}

.btn.btn-4:hover {
  color: #fff;
  border: 3px double #fff;
  /* background: transparent; */
  background: rgb(249 95 49 / 85%);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  /*font-weight: 700;*/
}

.more{
  color: #000!important;
  margin: 5px 2% 20px 0;
  padding: 0 20px 0;
  line-height: 47px;
  text-align: center;
  display: block;
  float: left;
  border-radius: 5px;
  font-size: 18px;
  position: relative;
  top: 0px;
  overflow: hidden;
  transition: all .5s ease;
  /*background: rgba(255,191,55,1);
  background: -moz-linear-gradient(left, rgba(255,191,55,1) 0%, rgba(238,216,45,1) 100%);
  background: -webkit-linear-gradient(left, rgba(255,191,55,1) 0%,rgba(238,216,45,1) 100%);
  background: linear-gradient(to right, rgba(255,191,55,1) 0%,rgba(238,216,45,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbf37', endColorstr='#eed82d',GradientType=1 );*/
  background: #bfc0b9;
}

.more a{ position: relative;color: #fff; }

.more:before{    
  content: '';
  display: block;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  position: absolute;
  height: 0;
  transition: all .5s ease;
  /*background: #e3e3e3; */  
  background: rgb(250 163 113);
  background: -moz-linear-gradient(left, rgb(250 163 113) 0%, rgb(255 104 79) 100%);
  background: -webkit-linear-gradient(left, rgb(250 163 113) 0%,rgb(255 104 79) 100%);
  background: linear-gradient(to right, rgb(250 163 113) 0%,rgb(255 104 79) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faa371', endColorstr='#ff684f',GradientType=1 )
}

.more:hover a{    
  color: #fff;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

.more:hover:before{    height: 100%;}

.more.more02{
  /*background: rgb(255 120 55);
    background: -moz-linear-gradient(left, rgb(255 120 55) 0%, rgb(238 72 45) 100%);
    background: -webkit-linear-gradient(left, rgb(255 120 55) 0%,rgb(238 72 45) 100%);
    background: linear-gradient(to right, rgb(255 120 55) 0%,rgb(238 72 45) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7837', endColorstr='#ee482d',GradientType=1 );*/
    background: #bfc0b9;
}

.more.more03 {    
    padding: 0 15px 0;
    background: rgb(245 245 245);
    color: #000;
}
  .more.more03 a:hover i{ color: #fff;   }

.more04 {
    color: #F44336;
    margin: 15px 2% 20px 0;
    padding: 0 14px 0;
    line-height: 47px;
    text-align: center;
    display: block;
    float: left;
    border-radius: 5px;
    font-size: 17px;
    position: relative;
    top: 0px;
    border: 1px solid #F44336;
}
  .more04 i{    color: #F44336;font-size: 18px;}


@media (max-width: 1024px) {
  .gallery .slick-next {    right: -20px;}
  .gallery .slick-prev, .gallery .slick-next {     top: 28%;  }
  .DetailPic p {    margin: 0px 0 10px;}
  .lineDetail {    margin: 30px 0 20px;  }
  .more {    padding: 0 15px 0;font-size: 16px;}
  .count {
      width: 47%;
      margin: 0px 3% 15px 0;
  }
  .countBox span:nth-child(2) {
      display: flex;
      order: 3;
      width: 47%;
      justify-content: center;
      margin: 0 3% 15px 0;
  }
  .countBox span:nth-child(3) {
      display: flex;
      order: 4;
      justify-content: center;
      width: 47%;
      margin: 0 3% 15px 0;
  }
  .countBox span:nth-child(4){  display: flex;order: 2;}
  .countBox span:nth-child(5){  display: flex;order: 2;}
}

@media (max-width: 1023px) {
  .more {    padding: 0 10px 0;}  
  .model ul{ margin: 5px 0 0 0; }
}

@media (max-width: 990px) {
  .DetailBox {    width: 100%;}
  .gallery {    padding: 0;}
  .gallery .stage {max-width: 650px; }
  .gallery .stage .pic img {     max-width: 650px;  }
  .gallery .thumbnails {  max-width: 650px; }
  .slick-slide img {    max-width: 140px;}
  .DetailPic {    text-align: left;}
  .more {    padding: 0 5% 0;}
  .count,
  .countBox span:nth-child(2),
  .countBox span:nth-child(3) {    width: 25%;  }
  .countBox span:nth-child(4) {    order: 4;margin-right: 3%;}
}

@media (max-width: 420px) {    
  .price small {      margin-left: 10px;margin-right: 0px;padding: 8px 3px 0px 0px;}
  .price p {          font: 17px/30px '微軟正黑體', 'sans-serif','Roboto';}
  .model li {    margin-bottom: 35px;}
  .count,
  .countBox span:nth-child(2),
  .countBox span:nth-child(3) {    width: 45%;  }
  .countBox span:nth-child(4) {    order: 2;}
  .DetailPic img.half {    width: 100%!important;  }
}


/*********************************************************************************/
/* shopping-cart                                                                 */
/*********************************************************************************/
/*--- shopping-step ---*/
.cart{width: 100%;height: auto;padding: 0 5%;}

.cart_step{
  margin: 10px 15% 50px;
  font-size: 1.6rem;
  padding-top: 5px;
  width: 70%;
}

.step_box{
  float:left;
  width: 17.5%;
}

.c_arrow {
  float:left;
  margin: 20px 0 0;
  text-align: center;
  width: 10%;
}

.step_box span{
  margin:7px 5px 10px 0;
  padding: 4px 17% 7px;
    border-bottom: 1px dashed #5e3939;
}

.step_box p{
  line-height: 2.7;
  letter-spacing: 1px;
    margin:0;
    color: #000;
}

.cart_step .active{
  color: #ffc107;
  font-weight: bolder;
}

.cart_step i{
  font-size: 30px;
  color: #000;
}

@media (max-width: 767px){
  .cart_step {      margin: 10px 5% 30px;width: auto;  }
}

@media (max-width: 420px){       
  .step_box {  width: 13%;}
    .step_box p {
        line-height: 1.3;
        margin-top: 10px;
    }
  .c_arrow {    width: 16%;padding-left: 4%; }
  .cart_step i {    font-size: 25px;}
}



/*--- shopping-message ---*/
.meg {
    background-color: #f0f1eb;
    color: #666;
    font: 500 18px/24px "微軟正黑體";
    border-radius: 5px;
    padding: 5%;
    margin: 0px auto 30px;
    text-align: center;
    /*width: 80%;*/
}

.meg p{margin-bottom: 0;}

@media (max-width: 420px){
  .meg {    width: 100%;padding: 10% 5%;}
}

.memo {
    text-align: left;
    font-size: 16px;
    padding: 30px 15px 0px;
    border-radius: 5px;
    width: 100%;
    display: inline-block
}

.memo2 {
    text-align: left;
    font-size: 11pt;
    background: #f0f1eb;
    padding: 10px 3% 25px;
    margin: 15px 15px;
    line-height: 35px;
    color: #333;
    font: 500 16px/30px "微軟正黑體";
    width: calc(100% - 30px);
    border-radius: 0 60px 0 0;
}
  .memo2 h4{ margin-top: 15px;margin-bottom: 5px; }
  .memo2 b{ padding-top: 7px;display: block; text-decoration-line: underline;}
  .memo2 p{ margin-bottom: 0px; }

.btn2 {
    background: #fff;
    color: #666;
    border: solid #ffc107 1px;
    margin: 15px 5px;
    display: inline-block;
    padding: 10px 20px 8px;
    font-size: 16px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn2.active, .btn2:hover {
    background: #ffc107;
    color: #fff!important;
}

/*--- shopping-list ---*/


/*-- table --*/
.table>thead>tr>th {    border-bottom: 1px solid #ddd!important;}
.table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    word-break: break-all;
}

.cartTable td {
    padding: 6px!important;
    line-height: 1.4;
    min-width: 76px;
    color: #666;
    border-top: unset!important;
    vertical-align: unset!important;
    text-align: center;
}
  /*.cartTable td:nth-last-child(1):not([name="Tcenter"]){text-align: right;padding-right: 20px!important;}*/
  .cartTable td.text-left {text-align: left;}

.cartTable .btn-del {    min-width: 30px;}
  .cartTable .btn-del i{color: #666;font-size: 16px;}
  .cartTable .btn-del a:hover i {   
    opacity: 0.7;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    border-radius: 5px;
    transition: all 0.3s ease;
  }

.cartTable thead th {
    color: #777;
    background: #eee;
    padding: 12px;
    text-align: center;
}

.cartTable tbody tr {    border-bottom: 1px dotted #bbb;}

.cartTable a {
    display: inline-block;
    vertical-align: middle;
    color: #666;
}
  .cartTable a:hover { opacity: 0.7;color: #666; }

.cartTable .cartImg {    width: 80px;}
  .cartTable .cartImg img{    width: 70px;}

.cartTable .cartQty{position: relative;min-width: 105px;}
  .cartTable .cartQty form {
      width: 105px;
      margin: 0;
      position: absolute;
      top: calc((83px - 30px) /2);
      left: calc((100% - 105px) /2);
  }
    .cartTable .cartQty [data-quantity] {    width: 105px;margin: 0 auto;}
      .cartTable .cartQty [data-quantity] button {    height: 25px!important;}
      .cartTable .cartQty [data-quantity] input {     font-size: 14px!important;height: 27px!important;}


@media (max-width: 990px){
  .cartTable {                border-top: 1px dotted #bbb;    }
    .cartTable thead {        display: none;    }

    .cartTable tr,
    .cartTable td {           display: block;text-align: left;    }

    .cartTable td+td {        width: calc(100% - 30px); border-left: 0;  }

    .cartTable tr {           padding: 10px 0;position: relative;    }

    .cartTable td {           padding: 5px 3px!important;line-height: 2;    }
      .cartTable td a {         display: inline-block;line-height: 1.5;    }  
        .cartTable td[data-title]:before {
            content: attr(data-title);
            display: inline-block;
            color: #aaa;
            font-size: 13px;
        }

    .cartTable tbody tr {        padding-left: 94px;    }

    .cartTable .cartImg {
        position: absolute;
        left: 0;
        top: 10px;
    }

    .cartTable .btn-del{
      width: 30px;
      position: absolute;
      right: -10px;
      top: 12px;
      text-align: center;
    }

    .cartTable .cartQty form {   top: 0;left: 45px;}
}

/*-- / table --*/

.tab1b li, .tab1f li {
    list-style-type: none;
    background: #fff;
    float: left;
    border-bottom: 1px solid #ADA7A9;
    font-size: 11pt;
    font: 500 16px/3 "微軟正黑體";
    color: #666;
}

.tab1f li:nth-child(2n-1) {    
    width: calc(100% - 130px);
    text-align: right;
  }
.tab1f li:nth-child(2n) {
    width: 120px;
    text-align: right;
    padding-right: 10px;
}
.tab1f li {
    height: 50px;
    line-height: 50px;
    padding: 0 5px;
}
  .tab1f li input.coupon {  
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    text-indent: 5px;
    letter-spacing: 1px;
    height: 35px;
    margin-bottom: 0;
    width: 196px; 
  }
  .tab1f input, .tab1f select{    line-height: 1.6;width: 250px;}

.btn-use, .btn-cart {
  color: #fff!important;
  background-color: #ef8d66;
  padding: 3px 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 32px;
  margin: -6px 10px 0 5px;
  display: inline-block;
  position: relative;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

select, button {
    border-radius: 3px;
    border: 1px solid #555;
    padding-left: 3px;
}
select {
    background: #fff;
    margin-right: 5px;
    padding: 5px 3px;
    color: #666!important;
    border: 1px solid #c0c0c0!important;
}

@media (max-width: 420px){
  .tab1f li:nth-child(2n-1) {  width: calc(100% - 90px);text-align: left;  }
  .tab1f li:nth-child(2n) {    width: 90px;}
    .tab1f li input.coupon{width: calc(100% - 55px);} 
    .tab1f input, .tab1f select:not([name="coupon_id"]) {  width: calc(100% - 5px);}
    .tab1f select[name="coupon_id"] {    width: calc(100% - 75px);}  

}

/*-- DataBox --*/
.DataBox{
  display: inline-block;
  width: 100%;
  height: auto;  
  text-align: left;
  margin-top: 20px; 
}
  .DataBox > div p{margin-bottom: 0;}
  .DataBox .radio input[type="radio"]:checked + label, 
  .DataBox .radio input[type="radio"] + label:hover, 
  label.active {
      border: solid 1px #757575;
      background-color: #757575;
      color: #ffffff;
      text-shadow: 1px 1px 1px rgb(0 0 0 / 15%);
  }
  .DataBox input{  margin-top: 10px;margin-bottom: 10px;  }

.invoiceBox{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row wrap;
  padding: 0 15px;
}
  .invoiceBox div:nth-child(1),
  .invoiceBox div:nth-child(2),
  .invoiceBox div:nth-child(3)
  {
    width: 300px;
    padding: 0 0 5px;
    flex: 0 1 auto;
    align-self: center;
  }

.cR {
    color: #f44336;
    padding: 5px;
    letter-spacing: 1px;
}

@media screen and (max-width: 1024px) {
    .invoiceBox div:nth-child(1),
    .invoiceBox div:nth-child(2),
    .invoiceBox div:nth-child(3)    {      width: 33%;    }
}

@media screen and (max-width: 812px) {  
    .invoiceBox div:nth-child(1){      width: 100%;    }
    .invoiceBox div:nth-child(2),
    .invoiceBox div:nth-child(3)   {      width: 45%;margin-right: 5%;    }      
      .invoiceBox  input {    width: 70%;  }
    .DataBox .pay_money{margin-bottom: 10px;}
}

@media screen and (max-width: 420px) {
  .invoiceBox{    padding: 0 10px;  }
    .invoiceBox div:nth-child(2),
    .invoiceBox div:nth-child(3)   {      width: 100%;margin-right: 0;    }
}

/*********************************************************************************/
/* privacy                                                                       */
/*********************************************************************************/
.privacy .products-box,
.rule .products-box,
.terms .products-box,
.disclaimer .products-box {    padding: 70px 00px 0;}

.ruleBox{ 
      width: calc(100% - 285px);
      float: right;
      background: none;
      min-height: 300px;
      box-sizing: border-box;
      padding: 0;
      margin-bottom: 5%;
}

.ruleBox *{
  line-height: 2;
  font-size: 16px;
}

.ruleBox h4{ margin-top: 30px;}

.ruleBox h4 strong {
    color: #fff;
    font-weight: bold;
    background: #f4bd22;
    padding: 4px 9px;
    margin-right: 5px;
    margin-top: 20px;
}

.ruleBox h4 b {
    color: #eab419;
    font-weight: bold;
    padding: 4px 9px;
    margin-right: 5px;
    border: 1px solid #f4bd22;
}

.ruleBox u {
    display: inline-block;
    color: #eab419;
    font-weight: bold;
}

.ruleBox hr{
  margin-top: 35px;
  margin-bottom: 35px;
}

.ruleBox ul{   
  display: inline-block;
  text-align: left;
  margin-left: 32px;
}
  .ruleBox li{   list-style-type: disc;}
    .ruleBox p small{   
      font-size: 85%;
      font-weight: 600;
      color: #eb4343;
    }


@media screen and (max-width: 990px) {
  .ruleBox{ width:100%;}
}


/*********************************************************************************/
/* member-login                                                                  */
/*********************************************************************************/
.Notice .login_box {
    border-top: 1px solid #eee;
    padding-top: 30px!important;
    margin-bottom: 50px!important;
}

/*---資料確認 cart_data---*/
.login .confirm {   
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 20px auto;
}
  .login .confirm .tit01.tit02 {   
    width: 50%;
      float: left;
      padding: 0 15px;
  }
    .login .confirm .taiwan_address {
        width: 100%;
        align-items: center;
        padding-top: 6px;
    }
  .login .confirm input[type=checkbox]{
    -webkit-appearance: checkbox;
    margin: -1px 5px 0 0;
    width: 18px;
  }

.confirm > div > div{padding: 0 10px;}
  .confirm form {
      width: 98%;
      margin: 20px auto;
      display: inline-block;
  }
  .confirm div p {    color: #555;font:16px/26px '微軟正黑體';}
    .confirm p > span {    margin-right: 5px;}
    .confirm input {
        border: 1px solid #c0c0c0;
        width: 84%;
        text-indent: 5px;
        letter-spacing: 1px;
        height: 35px;
    }
    .confirm ul {
        list-style-position: inside;
        margin-bottom: -5px;
        width: 100%;
        height: auto;
        display: inline-block;
    }
      .confirm ul li {
          list-style-type: disclosure-closed;
          width: 50%;
          padding-left: 20px;
          float: left;
          margin-bottom: 3px;
      }
        .confirm ul li p {
            margin-bottom: 2px;
            font-weight: 600;
            display: inline-block;
        }

input.checkBox{width: 17px;height: 17px;}
.memberData{width: 100%;height: auto;margin-bottom: 15px;}


.p_pb_10{ padding:12px 15px;}
.blank2 {    padding: 15px 0;clear: both;}
.Check{width:25px;float:left;}

.memberData label {
    line-height: 24px;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    letter-spacing: 0.5px;
}
  .memberData span{
    font-size: 14px;
    line-height: 10px;
    color:#FF0000;
    margin-left:10px;
    margin-top: -5px;
    font-weight: 500;
  }

.login h4, .confirm h4{
    color: #fff;
    padding-bottom: 20px;
    margin-bottom: 30px;
    font-size: 17px;
    /* font-weight: 600; */
    background: url(../images/titBg05.jpg) no-repeat;
    background-size: cover;
    line-height: 2.7;
    letter-spacing: 1px;
    height: 45px;
}
  .login h4.titLong{
    background: url(../images/titBg05-long.jpg) no-repeat;
  } 

.taiwan_address input[name="accept_zip"] {
    width: 86px;
    margin-right: 4px;
}

textarea.form-control {
    border: unset;
    border-left: 1px solid #c0c0c0;
    border-radius: 0;
    box-shadow: unset;
    letter-spacing: 1px;
    font-size: 16px;
    padding: 5px;
    text-indent: 5px;
}

select.form-control{
  border: 1px solid #c0c0c0;
  border-radius: 3px;
  color: #555;
  letter-spacing: 1px;
  font-size: 16px;
}

label.birthDay{width: 100%;}
  label.birthDay select{float:left;}

.radio, .checkbox {    display: inline-block!important;margin: 0;}
.radio input[type="radio"] {    display: none;}
  .radio input[type="radio"]:checked + label, .radio input[type="radio"] + label:hover, label.active {
      border: solid 1px rgb(217 81 49 / 90%);
      background-color: rgb(217 81 49 / 90%);
      color: #fff;
  }
.radio input[type="radio"] + label {
    display: inline-block;
    /*background-color: #d1d1d1;*/
    border: solid 1px #c0c0c0;
    cursor: pointer;
    padding: 5px 15px;
    font-size: 11pt;
    margin: 0 1px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.radio label, .checkbox label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

.memo3 {
    text-align: left;
    background: #fff;
    padding: 15px 15px;
    margin: 15px 0;
    clear: both;
    color: #555;
    font:500 16px/35px '微軟正黑體';
    border-top: 1px solid #ADA7A9;
    border-bottom: 1px solid #ADA7A9;
}
  .memo3 img {
      height: 40px;
      width: auto;
      margin-right:5px;
  }
    .memo3 span{  margin-right:10px;}

.btn6 {
    background: #a6a1a1;
    color: #fff!important;
    margin: 0px 5px;
    display: inline-block;
    padding: 7px 5px;
    font-size: 10pt;
    line-height: 1.6;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.meg.cart-deal {
    text-align: left;
    display: flex;
    justify-content: center;
}
  .meg.cart-deal p{margin-bottom: 15px;}

@media (max-width: 1350px){
  .confirm ul li {width: 100%;}
}

@media (max-width: 1024px){
  .login .confirm .taiwan_address {      padding-top: 0px;  }
}

@media (max-width: 990px){
  .login h4.titLong{
    height: 80px;
    line-height: 1.6;
    padding: 10px 10px 5px;
  } 

  .login .confirm .tit01.tit02 {
      width: inherit;
      float: none;
      padding: 0;
  }

  .confirm > div > div{padding: 0;}
}


@media (max-width: 769px){
    .taiwan_address input {      width: 44.5%;  }
    input {    width: 75%;  }
 
    form .col-md-6 {
        padding-left: 0px!important;
        padding-right: 0px!important;
        width: 50%!important;
        float: left;
    }

    form .col-md-12 {
        padding-left: 0px!important;
        padding-right: 0px!important;
        width: 100%!important;
        float: left;
    }
    .p_pb_10 {    padding: 0px 15px 10px;} 
}

@media (max-width: 650px){
  form .col-md-12 {
    padding-left: 10px!important;
    padding-right: 10px!important;
  }
  input {  width: 78%;}

  .taiwan_address, .pay_memo, .pay_money, .send, .time{    padding: 0px!important;  }
  .taiwan_address input {      margin:0 auto 5%!important;width: 98%;    }
  .taiwan_address input[name="accept_zip"] {      width: 21%;margin-right: 4px;    }
  .taiwan_address select[name="city"] {      width: 28%!important;margin-bottom: 8px;    }
  .taiwan_address input[name="address"] {    width: 99%!important;  }

  .radio label[name="web_ATM"] {    display: none!important;  }
  .radio img {
      margin:3% auto;
      width: 70%!important;
      height: 70%!important;
    }

  .time label [name="time_c"],
  .send label [name="send_c"]{
      width: 45%;
      margin:2%!important;
      padding:5px!important;
    }

  .memo3 {      margin:30px 3%;padding:10px 5px;    }
  .memo3 span {     display: block;   }  
}

@media (max-width: 567px){ 

  .login h4.titLong{
        height: 100px;
        line-height: 1.6;
        padding: 10px 10px 5px;
  } 
}

@media (max-width: 414px){
  /*.confirm{padding-right: 0px;padding-left: 0px;}*/
  form .col-md-6 {width: 100%!important; }
  .confirm .col-md-6{padding-left: 0px;padding-right: 0px;}
}

@media (max-width: 360px){
  input {  width: 76%;}
 }

@media (max-width: 320px){
  input {  width: 73%;}
  .taiwan_address input[name="address"] { width: 77%!important;   }
  .radio input[type="radio"] + label {      padding: 5px 13px;  }
}

/*--- 會員登入 ---*/
.login {
    margin: 10px auto 30px;
    display: inline-block;
    width: 100%;
    height: auto;
}

.history{
  width: 100%;
  height: auto;
  margin: 10px auto;
  display: inline-block;
}

.login .tit01 {    display: table;width: 100%;}
  .login .tit01 dt {
      display: table-cell;
      color: #4e583d;
      font-weight: bold;
      padding: 10px 0 10px 10px;
      border-bottom: 1px solid #4e583d;
      text-align: left;
      vertical-align: middle;
      width: 110px;
      letter-spacing: 1px;
      font-size: 16px;
  }
  .login .tit01 dd {
      display: table-cell;
      border-bottom: 1px dotted #4e583d;
      padding: 5px 5px 5px 10px;
      line-height: 1.4;
      font-size: 16px;
  }
    .login .tit01 dd span:not(.rand_img):not(.zipcode){ 
      position: relative;
        padding: 0 0 0 13px;
    }
    .login .tit01 dd span:not(.rand_img):not(.zipcode)::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 1px;
        border-color: transparent transparent transparent #4e583d;
        border-style: solid solid solid solid;
        border-width: 4px 4px 4px 4px;
        height: 0px;
        width: 0px;
    }

.cartlist{margin-bottom: 70px;}

@media screen and (max-width: 768px){
  .aboutBox h2 {    font-size: 22px;}
  .login .tit01 {
      display: block;
      width: 100%;
      border-bottom: 1px dotted #4e583d;
      padding: 5px 0;
      margin-bottom: 5px;
  }
  .login .tit01 dt {
      display: block;
      color: #4e583d;
      font-weight: bold;
      padding: 0;
      border-bottom: none;
      text-align: left;
      width: 100%;
  }
  .login .tit01 dd {      display: block;border-bottom: none;  }
}

.login input {
    width: 84%;
    text-indent: 5px;
    border: unset;
    border-left: 1px solid #ADA7A9;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: #222;
    font-size: 16px;
    padding: 5px;
    font-weight: 500!important;
    line-height: 1;
    height: 26px;
    letter-spacing: 1px;
}

.login .col-md-10{  margin:0 auto;float: none}

.login_form p{margin-top: 15px;}
  .login p.forget a {
      font-size: 15px;
      line-height: 1.8;
      margin-bottom: 30px;
      letter-spacing: 0.8px;
      color: #6c685c;
  }
    .login p.forget a:hover {    opacity: 0.8;  }
.login_form p span{
  display: block;
  letter-spacing: 1px;
  font-size: 16px;
  padding-bottom: 3px;
}
.login_form input{  width: 100%;margin-bottom: 3px;}
.login_form i{  font-size: 10px;}

.login .rand_img{  position: relative;display: block;}
.rand_img img{
  cursor: pointer;
  margin: 0 0;
  position: absolute;
  top: 1px;
  right: 5px;
  border-radius: 4px;
  width: auto;
}
a.loginbtn {
  margin: 0 auto;
  display: inline-block;
  padding: 0 10px;
  color: #fff!important;
  height: 35px;
  line-height: 35px;
  margin-top: 8px;
  font-size: 12pt;
}
.loginbtn i{
  margin-right: 10px;
  color: #fff;
}
.loginbtn.fb{
  background: #3a5898;
}
.loginbtn.google{
  background: #D95131
}
.loginbtn.yahoo{
  background: #6230a0;
}

textarea.shareText{
  width: 100%;
  height: auto;
  max-height: 500px;
  overflow-y: visible;
  font-size: 16px;
  line-height: 1.6;
  border: unset;
  border-left: 1px solid #c0c0c0;
  border-radius: 0;
  box-shadow: unset;
  letter-spacing: 1px;
  padding: 5px;
  text-indent: 5px;
}

input[type=file] {
    display: block;
    font-size: 14px;
    line-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    width: 100%;
    height: 25px;
}

p.pic{
  color: #c20808;
    font-size: 14px;
    margin:0 0 0 7px;
}

@media (max-width: 767px){
  .visible-xs {    display: block!important;}
}


/*會員資料-下拉地址*/
.taiwan_address{    width: 100%;align-items: center;}
.taiwan_address span{  min-width: 64px;}
.taiwan_address .zipcode{  min-width: 270px;}
.taiwan_address input[name="accept_zip"] {  width: 80px;margin-right: 4px;}

.login form .taiwan_address select, .login form .taiwan_address input[name="zip"], .login form .taiwan_address input[name="accept_zip"] {
    width: 95px;
    margin-right: 4px;
    height: 40px;
}

@media (max-width: 1024px){

    .login form .taiwan_address input[name="zip"], .zipcode input {
    width: 60px;
    border-radius: 0;
    margin: 0 0 10px;
    height: 40px; 
    }
}

@media (max-width: 769px){
  .taiwan_address{
  clear: both;
  float: none;
  display: block;
  }
}
@media (max-width: 650px){
    input {  width: 100%;}
    .taiwan_address, .pay_memo, .pay_money, .send, .time{ padding: 0px!important;  }  
    .taiwan_address input {
    margin:0 auto 5%!important;
    width: 98%;
  }

  .login form .taiwan_address select, 
  .login form .taiwan_address input[name="zip"], 
  .login form .taiwan_address input[name="accept_zip"] {
      width: 32%;
  }
    .taiwan_address select[name="city"] { width: 32%!important;  }
    .taiwan_address input[name="address"] { width: 99%!important;  }
}

@media (max-width: 320px){
  .login form .taiwan_address select, 
  .login form .taiwan_address input[name="zip"], 
  .login form .taiwan_address input[name="accept_zip"] {      width: 31%;  }
}

/*/會員資料-下拉地址*/

/*********************************************************************************/
/* member                                                                        */
/*********************************************************************************/
.memberBox .products-box,
.discountBox .products-box {    
  padding: 70px 0px 0;
}

.memberBox .login, 
.discountBox .login{
  width: calc(100% - 285px);
  float: right;
  background: none;
  min-height: 300px;
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 5%;
}
  .memberBox .login h4 { margin-top: 0px;}

    .memberBox .login .cartTable td {    padding: 15px 6px!important;}
    /*.memberBox .login .cartTable td:nth-last-child(1) {    text-align: center;}*/
    .memberBox .login .tit01 dd span:not(.rand_img):not(.zipcode)::before{
        content: '';
        position: absolute;
        top: 0px;
        left: 1px;
        border-color: #ada7a9;
        border-style: solid solid solid solid;
        border-width: 25px 0px 0px 1px;
        height: 0px;
        width: 0px;
    }
      .memberBox .login .tit01 dd span.cO{color: #FFA600;font-size: 16px;}



.side-nav > li{position: relative;}

.side-nav > li span {
    width: 22px;
    height: 22px;
    color: #fff;
    background: rgb(221 98 69);
    font-size: 12px;
    border-radius: 50%;
    position: absolute;
    top: 13px;
    right: 30px;
    line-height: 2;
    text-align: center;
}

.discountBox .memo2 {
    text-align: left;
    line-height: 1.6;
    background: #eeeeee;
    padding: 10px 3% 25px;
    color: #333;
    width: 100%;
    border-radius: 0 0 60px 0;
    border-top: 3px double #b7bfaa;
    padding: 15px 3% 30px;
    margin: 50px 0px;
}
  .discountBox .memo2 p{ margin-bottom: 7px;font-size: 15px; }
  .discountBox .memo2 p.tit{ margin-bottom: 10px;margin-top: 10px }

@media screen and (max-width: 1024px){
  .memberBox .products-box {    padding: 30px 0px 0;}
  .memberBox .login {    width: calc(100% - 265px);}
    .memberBox .login .cartTable .tit01 dt {    width: 80px;}
}

@media screen and (max-width: 990px){
  .memberBox .proTit {    margin: 0 auto 20px;}
  
  .memberBox .login, 
  .discountBox .login {    width: 100%;float: unset;}
    .memberBox .login .cartTable {    border-top: 2px solid #ddd;}
    .memberBox .login .cartTable tbody tr,
    .discountBox .login .cartTable tbody tr{
      width: 46%;
      float: left;
      margin: 10px 2%;
      padding-left: 5px;
      border-bottom: 1px dotted #bbb;
    }
    .memberBox .login .cartTable td {    padding: 6px!important;}
    .memberBox .login .cartTable td[data-title]:before { padding-right: 10px;}
    .discountBox .login .cartTable td[data-title]:before {    
      padding-right: 10px;
      min-width: 65px;
    }
      .discountBox .login .cartTable td:nth-last-child(1) {
          text-align: unset;
          padding-right: 0px!important;
      }
    
}

@media screen and (max-width: 568px){
  .memberBox .login .cartTable tbody tr,
  .discountBox .login .cartTable tbody tr {
      width: 100%;
      float: unset;
      margin:10px auto;
    }
}


/*********************************************************************************/
/* favorite                                                                      */
/*********************************************************************************/
.favoriteBox .products-box {    padding: 70px 0px 0;}
.favoriteBox .cart_box{
  width: calc(100% - 285px);
  float: right;
  background: none;
  min-height: 300px;
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 5%;
  margin-top: 10px;
}
  .favoriteBox .cartTable td a {    margin-top: 3px;}
  .favoriteBox .cartTable td a i.fa-shopping-cart{   color: #fff;}
    .favoriteBox .cartTable td a:hover i.fa-shopping-cart{   color: #727272;}

.btn-use, .btn-cart {
    color: #fff!important;
    background-color: #ef8d66;
    /*border: solid #ef8d66 1px;*/
    padding: 3px 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 32px;
    margin: -6px 10px 0 5px;
    display: inline-block;
    position: relative;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.btn-cart {padding: 2px 9px 2px 8px;;margin: -6px 5px 0;}
  .btn-use:hover, .btn-cart:hover {
    border: solid #ef8d66 1px;
      color: #ef8d66!important;
      background: #fff;
  }
    .btn-cart i {color: #fff!important;}
    .btn-cart:hover i {color: #ef8d66!important;}


@media screen and (max-width: 1024px){
  .favoriteBox .products-box {    padding: 30px 0px 0;}
  .favoriteBox .cartTable td:nth-last-child(1) {    min-width: 50px;}
}

@media screen and (max-width: 990px){  
  .favoriteBox .cart_box {    width: 100%;float: unset;}
}


/*********************************************************************************/
/* patent                                                                        */
/*********************************************************************************/
.patent { margin-bottom: 70px; }
.patent .product-list .pic img{  border: 3px double rgb(192 201 178 / 60%);}
.patent .product-list {    margin: 15px auto -11px;}


/*********************************************************************************/
/* features                                                                      */
/*********************************************************************************/
.featureBox{
  width: 100%;
  height: auto;
  max-width: 1150px;
  margin: 0 auto;
}
  .featureBox .featureImg{width: 100%;height: auto;text-align: center;}
    .featureBox .featureImg img{width: 100%;height: auto;max-width: 1155px;margin-bottom: 0;}

  .featureBox h6{
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 2.1;
    letter-spacing: 0.5px;
    margin-bottom: 35px;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    padding: 15px 0 10px;
  }

  .featureBox p{
    font-size: 16px;
    line-height: 2.1;
    letter-spacing: 0.5px;
    margin-bottom: 35px;
  }

  .featureBox img{
    width: 100%;
    height: auto;
    margin-bottom: 35px;
  }

  .featureBox img.SImg{
    width: 100%;
    height: auto;
    max-width: 400px;
    margin-bottom: 35px;
  }

@media screen and (max-width: 767px){
  .featureBox img.SImg { max-width: unset;   }
}


/*********************************************************************************/
/* join                                                                          */
/*********************************************************************************/
.joinBox {width: 100%;height: auto;margin-bottom: 70px;display: inline-block;}
.joinBox div{  padding-right: 0!important;padding-left: 0!important;  }
.joinBox .telBox{
  width: 100%;
  height: auto;
  background: rgb(192 201 178);
  margin: 10px 0 40px;
  padding-top: 60px;
  padding-bottom: 10px;
  /*border: 8px solid #d2d4c7;*/
  flex: 0 1 auto;
  order: 1;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}  
  .joinBox .telBox:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 180px;
    width: 499px;
    height: 10px;
    background: url(../images/joinLine.png) repeat;
    z-index: 1;
  }
  .joinBox .telBox p{
    font-size: 16px;
    line-height: 2;
    padding: 0 20px 10px 10px;
    letter-spacing: 0.5px;
  }
    .joinBox .telBox p b{
      line-height: 1.8;
      font-size: 23px;
      text-shadow: 1px 1px 3px #909e76;
      position: relative;
    }
    .joinBox .telBox p b:before {
    content: "";
    position: absolute;    
    top: -40px;
    left: -40px;
    width: 220px;
    height: 150px;
    color: #ffffff;
    border-top: 7px solid #ffffff;
    border-left: 7px solid #fdfe89;
    box-shadow: 3px 3px 5px #b3bca2 inset;
  }

.joinBox .telBox > div:nth-child(1) {
    width: calc(65% - 70px );
    height: auto;
    flex: 0 1 auto;
    order: 2;
    margin: 25px 0 15px 70px;
}

.joinBox .telBox > div:nth-child(2){
  width: 35%;
  height: auto;
  flex: 0 1 auto;
  order: 3;
  justify-content: center;
}
  .joinBox .telBox > div:nth-child(2) img{
    width: 500px;
    margin: -110px -40px 12px 0;
    border-left: 4px solid rgb(255 255 255 / 80%);
    border-bottom: 4px solid rgb(255 255 255 / 80%);
  }
  .joinBox .telBox > div:nth-child(2) h4{
    font-size: 23px;
    font-family: 'Noto Serif TC', serif;
    font-weight: 700;
    float: left;
    color: #fff176;
    text-shadow: 1px 1px 3px #80915f;
  }
  .joinBox .telBox > div:nth-child(2) h5{
    font-size: 23px;
    font-family: 'Noto Serif TC', serif;
    font-weight: 700;
    float: left;
    margin-left: 10px;
    color: #fff176;
    text-shadow: 1px 1px 3px #909e76;
  }
    .joinBox .telBox > div:nth-child(2) > div{      display: flex;justify-content: center;    }   

.joinBox .joinImg{
    width: 35%;
    height: 550px;
    margin-top: -40px;
    float: left;
}
  .joinBox .joinImg img{
      width: 100%;
      height: auto;
      max-width: 446px;
  }

.joinBox .joinText{
  width: 65%;
  height: auto;
  float: right;
}  
  .joinBox .joinText > div{
    margin: 10px 10px 30px 8%;
    border-bottom: 1px solid #b7bfaa;
    width: 75%;
    position: relative;
  }
    .joinBox .joinText > div:after{
      content: "01";
      position: absolute;
      bottom: 0px;
      right: -70px;
      width: 45px;
      height: 45px;
      color: #707163;
      background: #fcec64;
      /* border-radius: 50%; */
      box-shadow: 2px 2px 8px #c8c4ab;
      font-size: 23px;
      font-family: 'Philosopher';
      text-align: center;
      line-height: 2;
      letter-spacing: 1px;
    }
      .joinBox .joinText > div:nth-child(2):after{    content: "02";}
      .joinBox .joinText > div:nth-child(3):after{    content: "03";}
      .joinBox .joinText > div:nth-child(4):after{    content: "04";}
      .joinBox .joinText > div:nth-child(5):after{    content: "05";}

    .joinBox .joinText > div i{      color: #707163; font-size: 16px;   }
    .joinBox .joinText > div h6{
      font-size: 18px;
      font-weight: bold;
      letter-spacing: 1px;
      line-height: 1.4;
    }

.cW{    color: #fff;      }

@media screen and (max-width: 1350px){
  .joinBox .joinImg{    width: 40%;}
  .joinBox .joinText{   width: 60%;} 
}

@media screen and (max-width: 1200px){ 
  .joinBox .telBox {    margin: 10px 0 20px; }
    .joinBox .joinText > div {    margin: 10px 10px 20px 5%;width: 85%;}
}

@media screen and (max-width: 1100px){ 
  .joinBox .telBox {    margin: 10px 0 30px; } 
    .joinBox .telBox > div:nth-child(1) {        width: calc(97% - 70px );margin: 35px 0 15px 70px;    }
    .joinBox .telBox > div:nth-child(2){ 
      width: 35%;
      height: auto;
      align-self: flex-end;
      position: absolute;
      top: -30px;
      right: 0;
    }
    .joinBox .telBox > div:nth-child(2) > div {
        width: 300px;
        background: rgb(255 255 255 / 30%);
        color: #fdfe89;
        letter-spacing: 0.5px;
        border-bottom: 3px double rgb(229 229 164);
        float: right;
    }
    .joinBox .telBox > div:nth-child(2) img {       width: 350px;margin: -110px -40px 5px 0;    }
    .joinBox .telBox > div:nth-child(2) h4,
     .joinBox .telBox > div:nth-child(2) h5{        font-size: 17px;margin-top: 10px;    }
  .joinBox .joinText > div {    margin: 10px 10px 30px 5%;}
  .joinBox .joinImg {
      margin-top: -30px;
      background: url(../images/join02.jpg) no-repeat 90% top;
      background-size: auto;
  }
    .joinBox .joinImg img{display: none;}

}

@media screen and (max-width: 1024px){
  .join .products-box {    padding: 30px 0px 0;}
  .joinBox .telBox {       margin: 10px 0 30px;padding-top: 15px;}
    .joinBox .telBox:after {    left: 100px;}
    .joinBox .telBox > div:nth-child(2) img {
        width: 300px;
        margin: -110px 0px 5px 0;
        float: right;
    }
    .joinBox .telBox p{ padding: 0 0px 0 20px;}
    .joinBox .telBox p b {    line-height: 2;} 
    .joinBox .telBox p b:before {    top: -30px;   }

  .joinBox .joinText > div {      margin: 10px 10px 15px 4%;width: 85%;  }
  .joinBox .joinImg {    height: 500px;}
}

@media screen and (max-width: 990px){
  .joinBox .telBox > div:nth-child(2) {    width: 42%;}
  .joinBox .telBox > div:nth-child(2) img {width: 250px;  }
  .joinBox .telBox > div:nth-child(2) h4, 
  .joinBox .telBox > div:nth-child(2) h5 { margin-top: 7px;}
  .joinBox .telBox {     margin: 10px 0 20px;}
  .joinBox .joinImg {    height: 550px;}
  .joinBox .joinText > div:after {    right: -60px;}
}

@media screen and (max-width: 768px){
  .joinBox .joinText > div {    width: 80%;}
  .joinBox .telBox:after {      left: 50px;}
  .joinBox .telBox > div:nth-child(2) > div {    width: 270px;}
}

@media screen and (max-width: 568px){
  .joinBox .telBox {    padding-top: 0px;}
    .joinBox .telBox:after {                  width: 55.4%;left: 43%;    }
    .joinBox .telBox > div:nth-child(1) {     width: calc(97% - 40px );margin: 50px 0 15px 40px;    }
    .joinBox .telBox > div:nth-child(2) {  
      width: 100%;
      position: unset;
      order: 1;
    }
      .joinBox .telBox > div:nth-child(2) > div {          width: 100%;float: unset;      } 
      .joinBox .telBox > div:nth-child(2) img {
          width: 100%;
          border: unset;
          float: unset;
          margin: 0 auto;
      }
        .joinBox .telBox > div:nth-child(2) h4, 
        .joinBox .telBox > div:nth-child(2) h5 {    margin-top: 10px;font-size: 20px;}
        .joinBox .telBox p b:before {
          top: -30px;
          left: -35px;
          width: 90px;
          height: 110px;
        }

    .joinBox .joinImg{    
      width: 100%;
      height: auto;
      background: none;
      background-size: unset;
    }
      .joinBox .joinImg img{display: block;max-width: unset;}

    .joinBox .joinText{   width: 100%;} 
      .joinBox .joinText > div {    width: 80%;margin: 20px 10px 15px 5px;}
}

@media screen and (max-width: 320px){  
  .joinBox .telBox > div:nth-child(1) {      width: calc(97% - 20px );margin: 50px 0 15px 20px;  }
    .joinBox .telBox p b:before {    left: -25px;}
  .joinBox .telBox > div:nth-child(2) h5 {    font-size: 18px;}
  .joinBox .joinText > div {    width: 75%;}
}




/*********************************************************************************/
/* coupon                                                                        */
/*********************************************************************************/
.coupon{margin-bottom: 70px;}

hr {    border-top: dashed 1px #7a7575!important;margin-bottom: 40px!important;}

.btn-type1{
    padding: 8px 30px;
    display: inline-block;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    text-align: center;
    background: #616250;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    border: 3px double #ffffff;
}
  .btn-type1:hover{  color: #727272;border: 3px double #a0a0a0;}

.coupon_get{
    clear: both;
    padding: 8px 0;
    text-align: center!important;
    width: 100%;
    border-top: 1px dashed #404040;
}
  .coupon_get a p:hover{ 
    color: #404040;
    background-color: #fff; 
    font-weight: 600;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }
  .coupon_get p {
    width: 110px;
    text-align: center;
    background: url(../images/more_bg02.png) no-repeat,rgb(255 255 255 / 20%);
    margin: 0 auto;
    border-radius: 3px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
 }

.coupon_price{
  width: 30%;
    /* height: 90px; */
    float: left;
    line-height: 1.8;
    margin: 15px auto 10px;
    padding-left:3px;
    border-right: 1px dashed #404040;
    font-size: 28pt;
    text-shadow: 1px 1px 3px #666;
}

.coupon_p{     
  width: 70%;
    /*height: 90px;*/
    float: left;
    text-align: left;
    padding: 15px 5px 10px 8px; 
    font-size: 16px;
}
  .coupon_p h5 {
      font-size: 10pt;
      letter-spacing: 0;
      margin: 0 0 5px;
  }
    .coupon_p h5 strong{ 
      font-size: 20px; 
      height: 25px;
      overflow: hidden;
      width: 100%;
    }

@media (min-width: 992px) and (max-width: 1200px) {
  .coupon_price{  width: 100%;border-bottom: 1px dashed #404040;border-right:none;margin: 0 auto;}
  .coupon_p{      width: 100%;padding: 15px 15px 10px;}
}

@media (max-width: 375px){
  .coupon_p h5 strong{  font-size: 18px; }
}

@media (max-width: 320px) {
  .coupon_price{  width: 100%;border-bottom: 1px dashed #404040;border-right:none;margin: 0 auto;}
  .coupon_p{      width: 100%;padding: 15px 15px 10px;}
}


/*coupon*/
.voucher {
  color: #fff;
  -webkit-clip-path: polygon(0 0,100% 0,99% 5%,100% 10%,99% 15%,100% 20%,99% 25%,100% 30%,99% 35%,100% 40%,99% 45%,100% 50%,99% 55%,100% 60%,99% 65%,100% 70%,99% 75%,100% 80%,99% 85%,100% 90%,99% 95%,100% 100%,0 100%,1% 95%,0 90%,1% 85%,0 80%,1% 75%,0 70%,1% 65%,0 60%,1% 55%,0 50%,1% 45%,0 40%,1% 35%,0 30%,1% 25%,0 20%,1% 15%,0 10%,1% 5%,0 0);
  clip-path: polygon(0 0,100% 0,99% 5%,100% 10%,99% 15%,100% 20%,99% 25%,100% 30%,99% 35%,100% 40%,99% 45%,100% 50%,99% 55%,100% 60%,99% 65%,100% 70%,99% 75%,100% 80%,99% 85%,100% 90%,99% 95%,100% 100%,0 100%,1% 95%,0 90%,1% 85%,0 80%,1% 75%,0 70%,1% 65%,0 60%,1% 55%,0 50%,1% 45%,0 40%,1% 35%,0 30%,1% 25%,0 20%,1% 15%,0 10%,1% 5%,0 0);
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px
}
  .voucher .row {  margin: 0;}
    .voucher .row .col-xs-9,
    .voucher .row .col-xs-3 {  padding: 3px 3px;}
    .voucher .col-xs-3 {
      background: rgba(255,255,255,0.5);
      color: #666;
      font-size: 10pt;
    }
      .voucher .col-xs-3:hover {  background: rgba(255,255,255,0.4);}
      .voucher .col-xs-3.active {  background: rgba(255,255,255,0.7);}
        .voucher .col-xs-3.active:hover,
        .voucher .active a:hover {  color: #aaa;}

      .voucher span {
        font-size: 10pt;
        display: block;
        width: auto;
        overflow: hidden;
        /*line-height: 30px;*/
        height: 21px;
        letter-spacing: 0;
      }
      .voucher p {  margin-bottom: 0;line-height: 30px;}
        .voucher p a {  display: block;}        
          .voucher a:hover {  color: #fff;}                      
              .voucher .active a {  cursor: default; color: #aaa;}

.payData a.btn-sm{
  background: #757575;
  color: #fff;
  margin-left: 5px;
  padding: 7px 10px;
  margin-top: -4px;
  line-height: 1.6;
}
  .payData a:hover.btn-sm{    
    background: #bbbcaf;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;  
  }                

/*********************************************************************************/
/* footer                                                                        */
/*********************************************************************************/
footer .footerNav {
    background: #f0f1eb;
    padding: 20px 0 20px;
    border-top: 16px solid transparent;
    padding-top: 16px;
    border-image: url(../images/footer_line.jpg) 16 round;
}
	footer .footerNav .row{
	  padding-bottom: 30px;
	  padding-top: 20px;
	}
		footer .footerNav .footerbox {
		    height: auto;
		    padding: 0 2% 0 45px;
		    display: inline-block;
		}
			footer .footerNav .footerbox li{
				width: auto;
			    float: left;
			    padding: 6px 13px;
			}
				footer .footerNav .footerbox li a{
					font-size: 15px;
				    color: #636364;
				}
				footer .footerNav .footerbox li a:hover{    
					color: #bbbcaf;
					-moz-transition: all .3s ease;
				    -o-transition: all .3s ease;
				    -webkit-transition: all .3s ease;
				    transition: all .3s ease;
				}

		footer .footerNav .footerbox p, 
		footer .footerNav .footerinfo p{ 
			font-size: 14px;
		    font-weight: 600;
		    color: #626262;
		    margin: 0 0 15px;
		    letter-spacing: 1px; 
		}	

		footer .footerNav .footerinfo h3{
			font-size: 28px;
		    margin: 5px 0 15px 13px;
		    letter-spacing: 1.5px;
		}			
			footer .footerNav .footerinfo h3 i{ 
				margin-right: 8px;
			    color: #626262;
			    font-size: 26px;	
			}

		footer .footerNav .footerinfo h6{
			font-size: 15px;
		    margin: 5px 0 15px 13px;
		    letter-spacing: 1px;
		}
			footer .footerNav .footerinfo h6 i{ 
				margin-right: 15px;
			    color: #626262;
			    font-size: 15px;	
			}
			footer .footerNav .footerinfo h6 i.fa-map-marker-alt{    font-size: 17px;	}

		footer .copy{background: #f0f1eb;}
			footer .copy h6 {
			    text-align: right;
			    font-size: 10px;
			    font-family: 'Open Sans', sans-serif;
			    color: #90908c;
			    border-top: 2px solid #e2e5de;
			    padding: 15px 0 30px;
			    margin: 0;
		    }

		footer .footerNav .qr {
		    display: flex;
		    flex-flow: row;
		    justify-content: center;
		    padding-right: 5%;
		    padding-top: 27px;
		}
			footer .footerNav .qr > div{
				width: 110px;
			    height: auto;
			    margin: 0 5px
			}	

			footer .footerNav .qr a:hover{	opacity: 0.8;	}

@media screen and (max-width: 1024px) {
	footer .footerNav .footerbox {    padding: 0;}
	footer .footerNav .qr {    padding-right: 0;}
}

@media screen and (max-width: 990px) {
	footer .footerNav .footerbox {    padding: 0 2% 30px 2%;}
	footer .copy h6 {   text-align: center;line-height: 1.8;}	
}

@media screen and (max-width: 767px) {
	footer .footerNav .footerinfo h3, 
	footer .footerNav .footerinfo h6 {
	    width: 45%;
	    float: left;
	    height: 30px;
	    margin: 5px 0 15px 15px;
	}
		footer .footerNav .footerinfo h6 i {    margin-right: 7px;   }
}

@media screen and (max-width: 567px) {	
	footer .footerNav .footerinfo h3, 
	footer .footerNav .footerinfo h6 {    margin: 5px 0 10px 15px;width: 100%;	}
	footer .footerNav .footerinfo h6 {    margin: 5px 0 5px 15px;height: 20px;}
}

/*********************************************************************************/
/* left-side                                                                     */
/*********************************************************************************/
.side {    width: 235px;float: left;display: block;}

.side-title {
   padding: 10px 20px 9px;
    color: #444;
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 1;
    font-weight: bold;
    background: #616250;
    color: #fff;
    margin: 11px 0;
}

.side-nav, .side-nav-top {
    position: relative;
    /*background: url(../../images/common/side_shadow.png) 50% 100% no-repeat;*/
    padding-bottom: 20px;
    font-size: 15px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.side-nav > li {    padding: 5px 0;}

.side-nav > li > a:hover, 
.side-nav > li.active > a {  background-color: #f5f5f5; }
.side-nav > li > a {
    color: #444;
    background-color: #f5f5f5;
}
.side-nav li a, .side-nav-top li a {
    position: relative;
    display: block;
    line-height: 1.3;
    padding: 8px 16px;    
    margin-bottom: 5px;
    background: url(../images/more_bg.png) no-repeat;
}

.sideTit p{
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #4c513e;
  position: relative;
}

.sideTit p::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 0px;
    border-color: transparent #4c513e transparent transparent;
    border-style: solid solid solid solid;
    border-width: 8px 8px 0px 0px;
    height: 0px;
    width: 0px;
}

.sideText{
    display: none;
    padding: 5px;
    /*text-align: justify;*/
    line-height: 1.4;    
    margin: 5px 0 0;
    width: 100%;
}

.sideText li a {
  background: unset;
  border-bottom: 1px solid #ecebeb;
  color: #666;
  margin: 0;
  font-size: 15px;
}

  .sideText li a:hover {    border-bottom: 3px double #bbbcaf;  }

@media screen and (max-width: 990px) {
  .side {    display: none;}
} 


/*********************************************************************************/
/* right_menu                                                                    */
/*********************************************************************************/
/*line*/
.rightBox{
  position: fixed; 
  right: 0; 
  top: 45%; 
  z-index: 999;
}
  .rightBox li{
    position: relative;
    list-style-type:none;
    width:40px;
    height:40px;
    background:#a6ca5c;
    text-align:center;
  }
    .rightBox li a.rightline{z-index: 0;} 
      .rightBox li a.rightline:hover{background-color: transparent;z-index: 50;}
        .rightBox li a.rightline:hover > span{
              visibility: visible;
              top: -115px;
              right: 50px;
              left: auto;
            }  
        .rightBox li a.rightline > span {
            position: absolute;
            background-color: #ffffff;
            padding: 24px 2px;
            border: 6px solid #e6ecde;
            visibility: hidden;
            color: black;
            width: 185px;
            height: 185px;
            border-radius: 50%;
        }
          .rightBox li a.rightline  > span img{
            border-width: 0;
            padding: 2px;
            width: 100%;
          }
        
        .rightBox li a.rightline i{
            color:#fff;
            font-size:30px;
            line-height:40px;
        }    
  
  .rightBox li.lineC{background:#00c300;}
    .rightBox li.lineC img{
      width: 30px;
      vertical-align: text-top;
      padding-top: 3px;
    }
      .rightBox li.lineC a.rightline > span img{width: auto;  }

  

/*********************************************************************************/
/* pagination                                                                    */
/*********************************************************************************/
.pagination_box {
 margin: 2em 0 .5em;
 text-align: center;
 color: #686867;
}
.pagination {
 padding: 0;
 margin: 0;
 text-align: center;
 letter-spacing: 0;
}
.pagination li {
 display: inline-block;
 vertical-align: top;
}
.pagination li a {
 display: block;
 min-width: 30px;
 height: 30px;
 line-height: 30px;
 color: #666666!important;
 font-size: 16px;
 padding: 0 5px;
 margin: 0 2px;
 border-radius: 4px;
 box-sizing: border-box;
 text-decoration: none;
 border: unset!important;
}
.pagination li a:hover,
.pagination li.active a {
 color: #fff!important;
 border: 1px solid #bb0611;
 background: #ffc107!important;
}
.pagination li a.controls {
 padding: 0;
 margin-top: 3px;
 font-size: 16px;
 color: #666666!important;
 line-height: 26px;
 text-decoration: none;
}
.pagination li a.controls:hover {
 color: #bb0611!important;
 background: unset!important;
}
.page-info {
 display: none;
}
.page-info .form-control {
 height: 30px;
 line-height: 20px;
 border-radius: 10px;
 border: 1px solid #c2c2c2;
 margin: 0;
 font-size: 15px;
 padding: 5px 10px;
 width: 100%;
}
.page-info .form-control:focus {
 border-color: #ddd;
}


/*********************************************************************************/
/* btn                                                                           */
/*********************************************************************************/

.Btn-m{
  background: url(../images/more_bg.png) no-repeat;
    width: 180px;
    color: #626262;
    font-weight: bold;
    padding: 0px 20px 0 40px;
    height: 40px;
    border-radius: 0;
    line-height: 40px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 1px;
    transition: all .5s ease-in-out;
    position: relative;
    display: block;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
    margin: 45px auto 0;
}
.Btn-m:hover,
.Btn-m:focus{
    color: #626262;
    padding-right: 65px;
    background: url(../images/more_bg.png) no-repeat;
}

.Btn-m:before{
    content: '';
    display: block;
    width: 100%;
    height: 0%;
    position: absolute;
    transition: all .5s ease-in-out;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transition-delay: .3s;
}

.Btn-m:hover:before,
.Btn-m:focus:before{
  bottom: inherit;
  top: 0;
  height: 100%;
}

.Btn-m:after{
    content: '';
    display: block;
    width: 50px;
    height: 1px;
    background: #777;
    position: absolute;
    transition: all .5s ease-in-out;
    right: 0px;
    top: -1px;
    bottom: 0;
    margin: auto;
    z-index: 3;
}

.Btn-m:hover:after,
.Btn-m:focus:after{    width: 70px;right: 5px;}

	.Btn-m span:before{
	    content: '・';
	    display: block;
	    position: absolute;
	    transition: all .5s ease-in-out;
	    left: 55px;
	    bottom: -1px;
	    color: #626262;    
	    font-size: 22px;
	}

	.Btn-m:hover span:before{	left: 32px;	}

	.Btn-m span:after {
	    content: '';
	    display: block;
	    position: absolute;    
	    right: 0px;
	    bottom: 20px;
	    background-color: #777;
	    width: 10px;
	    height: 1px;
	    transition: all .5s ease-in-out; 
	    -ms-transform: rotate(0);
	    transform: rotate(0);
	    -ms-transform-origin: right top;
	    transform-origin: right top;
	}

	.Btn-m:hover span:after{
		right: 5px;
	    -ms-transform: rotate(30deg);
	    transform: rotate(30deg);
	}

.Btn-m.bG {
    background: #bbbcae;
    color: #fff;
    height: 50px;
    width: 200px;
    line-height: 52px;
    float: right;
    margin: 25px auto 0;
}
  .Btn-m.bG:after { background: #fff;}
  	.Btn-m.bG span:before {
  	    color: #fff;
  	    bottom: -3px;
  	    left: 65px;
  	}
  	.Btn-m.bG:hover span:before{ left: 42px;}
  	.Btn-m.bG span:after {    
  		background-color: #fff;
  		bottom: 25px;
  	}

.btnLine{
  width: 100%;
  height: auto;
  position: relative;
}
  .btnLine:before {
    content: '';
    display: block;
    width: 100%;
    height: 0%;
    margin: auto;
    position: absolute;
    left: 2px;
    right: 0;
    bottom:19px;
    transition-delay: .3s;
    transition: all .5s ease-in-out;
    border-bottom: 1px dashed rgb(105 116 91 / 50%);
    /*border-block-start: 1px dashed #69745B;*/
    opacity: 1;
  } 
    .btnLine:hover:before {
      width: 15px;
      /*z-index: 1;
      border-block-start: 1px solid #69745B;
      left: -182px;*/
      opacity: 0;
    }
    
    button.Btn-m.bG02{border:none;}
      .Btn-m.bG02 {
          background: #e6ecde;
          color: #69745b;
          height: 40px;
          width: 180px;
          line-height: 40px;
          margin: 25px auto 0;
          border-radius: 20px 20px;
          padding-left: 37px;
      }
      .Btn-m.bG02:hover {    padding-right: 60px;     }
        .Btn-m.bG02:after { 
          background: unset;
          width: 37px;
          top: 1px;
          border-top: 1px dashed rgb(105 116 91 / 50%);
        }
        .Btn-m.bG02:hover:after{    
          width: 40px;
          right: 5px;
          border-top: 1px solid #69745b;
        }
          .Btn-m.bG02 span:before {
            content: '';
            display: block;
            width: 0;
            height: 1px;
            background-color: #69745B;
            margin: auto;
            position: absolute;
            left: 0;
            bottom: 19px;
            transition-delay: .3s;
            transition: all .5s ease-in-out;
          }
            .Btn-m.bG02:hover span:before{ 
              width: 13px;
              z-index: 1;
              left: 5px;
            }

          .Btn-m.bG02 span:after {    
            background-color: #69745b;
            right: 5px;
            bottom: 19px;
            opacity: 0;
          }
            .Btn-m.bG02:hover span:after{ opacity: 1;  }

.btnBox{
	width: 80%;
    height: auto;
    float: right;
}
	.btnBox .Btn-m.style02{ float: right;}


.btn02 button.btn {
    position: relative;
    overflow: hidden;
}
  .btn02 button, .btn02 button:hover {
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      height: 40px;
      width: 125px;
      padding: 2px 0px;
      /* float: left; */
      line-height: 1.8;
       background: #6c685c; 
      border: 3px double #fff;
      border-radius: 0;
      margin: 30px 0 40px;
      text-align: center;     
      outline: none!important;
  }



@media screen and (max-width: 1300px) {
	.Btn-m.bG { margin: 10px auto 0;}
	.btnBox {
	    width: 80%;
	    height: auto;
	    float: right;
	}
	   .btnBox .Btn-m.style02 {margin: 10px auto 30px;}
}
@media screen and (max-width: 990px) {
	.Btn-m{    margin: 15px auto 0;}
}


/*********************************************************************************/
/* share btn                                                                     */
/*********************************************************************************/
.fa-stack {    width: 2.1em!important;}

#rndShareBtn a {
  display: inline-block;
  text-decoration: none;
  transition: all .2s;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
}
  #rndShareBtn a:hover {
    -ms-transform: translateY(-4px);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

#rndShareBtn .fa-stack-1x {color: #fff;}
.rs_fb .fa-stack-2x {color: #3B5998;}/* FB */
.rs_line .fa-stack-2x {color: #00c300;}/* line */
.rs_email .fa-stack-2x {color: #939598;}/* email */
.rs_twitter .fa-stack-2x {color: #2ba9e1;}/* twitter */
.rs_gplus .fa-stack-2x {color: #d73d32;}/* G+ */


@media screen and (max-width: 567px) {
  .fa-stack {    width: 2.5em!important;line-height: 2.4em!important;}
  .fa-stack-1x {    font-size: 18px!important;}
  .fa-stack-2x {    font-size: 2.4em!important;}

}