@charset "utf-8";
.section {
	clear: both;
	position: relative;
	padding-top: var(--section-padding-tb);
	padding-bottom: var(--section-padding-tb);
	width: 1280px;
	margin-right: auto;
	margin-left: auto;
}
.subbg{background-color:var(--sub-color);}
@media screen  and (max-width: 1280px) {
.section {
	width: 90%;
	clear: both;
	float: left;
	padding-right: 5%;
	padding-left: 5%;
}
}

#ad{
	width:100%;
	float:left;
	clear:both;
	overflow:hidden;
	position:relative}
	
.box-mask-btm{
	float:left;
	clear:both;
	width: 100%;
	margin-bottom:-30px;
}
.box-mask-top{
	float:left;
	clear:both;
	margin-top:-30px;
	width: 100%;
	z-index:2}	
.img100 img{
	width:100%}
	
.slogan{
	width: 500px;
	position: absolute;
	left: 20%;
	z-index: 2;
	bottom: 23%;
	}

.slogannumarea{
	width: auto;
	position: absolute;
	left: 33%;
	z-index: 2;
	color: var(--sub-color);
	top: -10px;
	}
.slogannumarea:after{
	content: "%";
	position: absolute;
	top: 10px;
	right: -20px;
}
@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.slogannum {
 /* animation: counter 2s forwards alternate ease-in-out;*/
  counter-reset: num var(--num);
  font: 800 2.5em system-ui;
}
.slogannum::after {
  content: counter(0);
}

/*@keyframes counter {
  from {
    --num: 0;
  }
  to {
    --num: 100;
  }
}*/

@media screen  and (max-width: 1600px) {
.slogan{
	width: 35%;
	left: 20%;
	bottom: 10%;
	}

.slogannumarea{
	width: auto;
	left: 33%;
	top: -10px;
	}
.slogannum {
  font: 800 2em system-ui;
}
}
@media screen  and (max-width: 900px) {
.slogannum {
  font: 800 1.5em system-ui;
}
}
@media screen  and (max-width: 600px) {
.slogan{
	width: 40%;
	left: 30%;
	bottom: 10%;
	}

.slogannumarea{
	width: auto;
	left: 33%;
	top: -10px;
	}
}
/*wrapper-news========================*/
.wrapper-news{
	clear: both;
	float: left;
	width: 100%;
	background-color: #f6f3ed;
	padding:var(--blcok-padding-tb) 0px;
}
.wrapper-news-in{
	float: left;
	clear: both;
	width: calc(60% - 2px);
	padding:0px 10%;
	margin: 0px 10%;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: var(--light-gray);
	border-left-color: var(--light-gray);
}
.col-news-t{flex: 0 0 120px;}
.col-news-list{
	margin-left:100px;
	flex: 1 1 auto;}
.listnews{
	width:100%;
	float:left;
	clear:both;
	margin:30px 0px}
.listnews li{
	width: 100%;
	float: left;
	clear: both;
	margin-bottom: 20px;
	font-size: 1.2em;
	font-weight: bold;
	padding-bottom: 20px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: var(--light-gray);	
	
}
.listnews a{color:var( --link-color)}
.listnews a:hover {color:#000000}

.col-date{flex: 0 0 80px;color:var(--light-gray);
font-size:0.8em}
.col-title{flex: 1 1 auto;color:var(--drak-gray)}
.col-cata{
	flex: 0 0 80px;
	margin-right: 10px;
	background-color: var(--main-color);
	color: #ffffff;
	font-size: 0.8em;
	text-align: center;
}
.col-date,.col-title,.col-cata{padding:5px}

.listnews li:hover{
	color:var(--main-color)}

@media screen  and (max-width: 1280px) {
	.wrapper-news-in{
		float: left;
		clear: both;
		width: calc(90% - 2px);
		padding:0px 5%;
		margin: 0px 0%;
		border-right-width: 1px;
		border-left-width: 1px;
		border-right-style: solid;
		border-left-style: solid;
		border-right-color: var(--light-gray);
		border-left-color: var(--light-gray);
	}
}
@media screen  and (max-width: 1000px) {
	.wrapper-news-in{
		width: calc(90% - 0px);
		border-right-width: 0px;
		border-left-width: 0px;
	}
	.col-news-list {
    margin-left: 50px;
    flex: 1 1 auto;
}
}

@media screen  and (max-width: 800px) {
.wrapper-news-in {flex-wrap:wrap;}
.col-news-t{ flex: 0 1 100%;}
.col-news-list {margin-left: 0px;flex: 0 1 100%;}
}
@media screen  and (max-width: 500px) {
.listnews li{
	flex-wrap:wrap}
.col-title{flex: 0 0 100%;}
}
/*WRAPPER-service=====================================*/
.wrapper-service{
	float:left;
	width:100%;
	clear:both;
	padding:var(--section-padding-tb) 0px
	}
.box-ser1{
	float: left;
	clear: both;
	width: 95%;
	padding-top: 0px;
	padding-right: 5%;
	padding-bottom: 0px;
	padding-left: 0%;
	}
.col-ser1-1{ flex: 0 1 55%;
margin-right:5%}
.col-ser1-2{ flex: 0 0 40%;
overflow:hidden}
.box-ser-in1{
	float:left;
	width:100%;
	clear:both;
	background: rgb(0,0,0); 
	background: -moz-linear-gradient(45deg,  rgba(0,0,0,1) 0%, rgba(166,147,106,1) 100%);
	background: -webkit-linear-gradient(45deg,  rgba(0,0,0,1) 0%,rgba(166,147,106,1) 100%); 
	background: linear-gradient(45deg,  rgba(0,0,0,1) 0%,rgba(166,147,106,1) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#a6936a',GradientType=1 );
	
}
.box-ser-w1{
	color: var(--main-color);
	float: left;
	clear: both;
	width: 50%;
	padding-right: 40%;
	background-color: #ffffff;
	font-size: 1.2em;
	padding-top: var(--blcok-padding-tb);
	padding-bottom: var(--blcok-padding-tb);
	padding-left: 10%;
	font-weight:bold
	}
.box-ser-w2{
	float: left;
	clear: both;
	width: 85%;
	padding-top: var(--blcok-padding-tb);
	padding-right: 5%;
	padding-bottom:var(--blcok-padding-tb);
	padding-left: 15%;
}
.ol-ser{
	width:100%;	
	float:left;
	clear:both;
	  counter-reset: ser-counter;
	}
.ol-ser li{
	color: #d9d2ca;
	width: 100%;
	float: left;
	clear: both;
	margin-bottom: 20px;
	counter-increment: ser-counter;
	position: relative;
	padding-left: 15px;
	 font-size: 1.1em;
}
.ol-ser li::before {
  content: counter(ser-counter);
  color:#d9d2ca;
  font-size: 1.1em;
  position: absolute;
  --size: 20px;
  left: -20px;
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  background: black;
  text-align: center;
}
.sernote{
	font-size:1em;
	color:#9d926d;
	float:left;
	clear:both;
	width:100%;
	margin:30px 0px;
	}
.ser50{
	float:left;
	width:50%;
	position:relative}
.serline{
	width:auto;
	float:left;
	clear:both;
	color:#ffffff;}
.serline a{color:#ffffff;}
.ser-pic{
	position: absolute;
	margin-top: -200px;
	width: 70%;
	margin-left: 10%;
}
.box-ser2{
	float:left;
	clear:both;
	width:90%;
	margin:0px 5%;
	/*padding-bottom:var( --section-padding-tb);*/
	padding-top:var( --section-padding-tb);}
.ser2-item{
	flex: 0 0 16%;
	margin:30px 2%;
	color:var(--main-color)
	}
.ser-svg img{
	width:50%}
@media screen  and (max-width: 1280px) {
.col-ser1-1{ flex: 0 1 65%;	margin-right:5%}
.col-ser1-2{ flex: 0 0 30%;}
.ser-pic {
    margin-top: -150px;
    width: 70%;
    margin-left: 15%;
}
.box-ser-w2 {
    width: 90%;
    padding-right: 0%;
    padding-left: 10%;
}
}
@media screen  and (max-width: 950px) {
.box-ser-w1 {
    width: 90%;
    padding-right: 5%;
    font-size: 1.3em;
    padding-left: 5%;
}
.ser-pic {
    margin-top: 30px;
    width: 70%;
    margin-left: 15%;
}
.circle-line-in h1{
	font-size:1.1em
}
.ser2-item{
	flex: 0 0 18%;
	margin:30px 1%;
	}
}
@media screen  and (max-width: 800px) {
.box-ser1{width: 100%;padding-right: 0%;flex-wrap:wrap}
	.col-ser1-1 {
    flex: 0 0 100%;
	 margin-right: 0%;
}
	.col-ser1-2 {
    flex: 0 0 90%;
	padding:50px 5%
}
.box-ser2{flex-wrap:wrap}
.ser2-item{
	flex: 0 0 150px;
	margin:10px 2%;
	}	
}
@media screen  and (max-width: 500px) {
.ser-pic {
    display:none
}
.ser50 {
    width: 90%;
}
}
/*wrapper-progress================*/
.wrapper-progress{
	float:left;
	clear:both;
	width:70%;
	padding:var(--section-padding-tb) 15%;
	background-color: #f6f3ed;
	flex-wrap:wrap
}
.col-pro-t{ flex: 0 0 100%;
margin-bottom:30px}
.col-pro-w{ flex: 0 0 100%;margin-left:0%}
.prolist,.prolist li{
	float:left;
	clear:both;
	width:100%;}
.prolist li{
	padding-bottom: var(--blcok-padding-tb);
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: var(--light-gray);
}
.lipt{padding-top: var(--blcok-padding-tb);}
.col-prolist-step{ flex: 0 0 18%;
text-align:center}

.col-prolist-stepw{ flex: 0 0 78%;
margin-left:5%}
.prostep span{
	color: var(--main-color);
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: solid 1px var(--main-color);
	text-transform: uppercase;
	font-weight: bold;
	}

.prostepnum,.col-prolist-step h1{
	float:left;
	clear:both;
	width:100%;
	margin-top:30px;
	font-family: 'Noto Serif TC', serif;
	color: var(--main-color);
	font-size:2.5em}
.col-prolist-step h1{
	font-size:1.8em}
.box-choice{
	float: left;
	clear: both;
	width: 100%;
	background-image: url(../img/index/bg-progress.svg);
	background-repeat: no-repeat;
	background-position: center bottom;
	padding-bottom:20px;
	text-align:center;
	font-family: 'Noto Serif TC', serif;
	font-size:2.3em
}
.box-choice span{
	margin-right: 0.3em;
	margin-left: 0.3em;
}
.box-place{
	float:left;
	clear:both;
	width:100%;
	margin-top:var(--blcok-padding-tb)}
.box-place li{
	flex: 1 1 30%;
	text-align:center;
	border:0px}
.box-place li:nth-child(2n){
	margin:0px 30px}
.box-place h1,.col-paper-w h1{
	color: #000000;
	float: left;
	clear: both;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 30px;
	}
.box-place p,.col-paper-w p{
	color: var(--gray);
	line-height: 1.8em;
}
.box-paper{
	float:left;
	clear:both;
	width:100%}
.col-paper-p{ flex: 0 0 100px;}
.col-paper-w{ flex: 1 1 auto;margin-left:3%}
@media screen  and (max-width: 1280px) {
.wrapper-progress {
    flex-wrap:wrap
}
.col-pro-t {
    flex: 0 0 100%;
	margin-bottom:50px
}
.col-pro-w {
    flex: 0 0 100%;
    margin-left: 0%;
}
}
@media screen  and (max-width: 900px) {
.col-prolist-step {
	font-size:0.8em
}
}
@media screen  and (max-width: 800px) {

.box-place li:nth-child(2n) {
    margin: 0px;
}
.plce-svg{flex: 0 0 100px;}
.plce-w{flex: 1 1 auto;margin-left: 3%;}
.prolist li{flex-wrap:wrap}
.col-prolist-step{
	flex: 0 0 250px;
	font-size: 1em;
	margin-right: auto;
	margin-left: auto;
}
.col-prolist-stepw{
	flex: 0 0 100%;
	margin-right: 0px;
	margin-left: 0px;
}
.box-place{
		flex-wrap:wrap}
.box-place li {
    flex: 0 0 100%;
    text-align: left;
    border: 0px;
	display:flex;
	flex-wrap: nowrap;
}

.col-prolist-step .circle-line {
	width: 50%;
	padding-bottom: 50%;
	border-radius: 100%;
	margin-right: auto;
	margin-left: auto;
}
.col-prolist-step h1 {
	margin-top: 10px;
	margin-bottom: 30px;
}
}
@media screen  and (max-width: 400px) {
.col-paper-p,.plce-svg  {
    flex: 0 0 60px;
}
}
/*wrapper-buy------------------------------*/
.wrapper-buy{
	float: left;
	clear: both;
	width: 100%;
	padding: var(--section-padding-tb) 0px;
/*	background-image: url(../img/index/bg-buy.jpg);*/
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover
	}
.wrapper-buyin{
	float:right;
	clear:both;
	width:400px;
	margin:200px 10%;
	color:#ffffff}
@media screen  and (max-width: 710px) {
.wrapper-buyin{
	float:left;
	clear:both;
	width:80%;
	margin:150px 10%;
	}
	
}
/*wrapper-buyinfo*/
.wrapper-buyinfo{
	float:left;
	clear:both;
	width:70%;
	padding:var(--section-padding-tb) 15%}
.item-buyinfo-pic{flex: 0 0 30%;}
.item-buyinfo-w{  flex: 0 0 60%; margin-left:10%}
.w-info1{
	float: left;
	clear: both;
	width: 100%;
	font-size: 1.1em;
	line-height: 1.8em;
	margin-bottom:var(--blcok-padding-tb);
	font-weight:bold
	}
.w-info2{
	float: left;
	clear: both;
	width: 100%;
	font-size: 1em;
	color:var(--main-color);
	font-weight:bold;
	margin-bottom:15px}
.col-winfo2-mark{
	background-color:var(--main-color);
	color:#ffffff;
	padding:10px;
	flex: 0 0 130px;
	text-align:center}
.col-winfo2-w{
	margin-left:10px; flex: 1 1 auto;}
@media screen  and (max-width:1200px) {
.wrapper-buyinfo{
	width:90%;
	padding:var(--section-padding-tb) 5%}
.item-buyinfo-pic{flex: 0 0 35%;}
.item-buyinfo-w{  flex: 0 0 60%; margin-left:5%}
}
@media screen  and (max-width:800px) {
.wrapper-buyinfo{flex-wrap:wrap}
.item-buyinfo-pic{flex: 0 0 100%; text-align:center;margin-bottom:30px}
.item-buyinfo-w{  flex: 0 0 100%; margin-left:0%}
}
/*wrapper-buyinfoEND*/
/*wrapper-benefit*/
.wrapper-benefit{
	float:left;
	clear: both;
	width: 60%;
	padding-right: 20%;
	padding-left: 20%;
	padding-bottom: var(--section-padding-tb)
}
.w-benefit-1{
	float: left;
	clear: both;
	width: 90%;
	background-color: var(--main-color);
	padding-top: 20px;
	padding-right: 5%;
	padding-bottom: 30px;
	padding-left: 5%;
	text-align:center;
	font-family: 'Noto Serif TC', serif;
}
.w-benefit-1 h1,.w-benefit-1 h2{
	color:#ffffff}
.w-benefit-2{
	float:left;
	clear:both;
	width:100%}
.w-benefit-2 li{
	color: #000000;
	font-size: var(--txt-stitle);
	font-weight: bold;
	flex: 0 0 30px;
	text-align: center;
	align-self: flex-start;
	background-image: url(../img/index/dot-benefit.svg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 25px auto;
	margin-top: -10px;
	margin-right: 30px;
	margin-bottom: 0px;
	margin-left: 30px;
	padding-top: 30px;
}

@media screen  and (max-width: 700px) {
.wrapper-benefit{
	width: 90%;
	padding-right: 5%;
	padding-left: 5%;
	
}
.w-benefit-1{
	font-size:0.8em
}
}
/*wrapper-benefitEND*/
/*wrapper-pics*/
.wrapper-pics{
	float:left;
	clear: both;
	width: 80%;
	padding-right: 10%;
	padding-left: 10%;
	padding-bottom: var(--section-padding-tb)
	}
.listpics {
	display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.listpics-p1,.listpics-p2,.listpics-p3{
	background-repeat: no-repeat;
	background-position: center center;
	background-size:110% auto;
	position:relative
	}
.listpics-p1:hover,.listpics-p2:hover,.listpics-p3:hover{
	background-size:130% auto;
	-webkit-filter: grayscale(50%);
 -moz-filter: grayscale(50%); 
 -ms-filter: grayscale(50%); 
 -o-filter: grayscale(50%); 
 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
 _filter: none; 
	}
.piclink{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;	
}
.listpics-p1 {
	grid-area: 1 / 1 / 3 / 2;
	padding:300px 0px;
	transition: all 1s cubic-bezier(.19, 1, .22, 1);
-moz-transition: all 1s cubic-bezier(.19, 1, .22, 1);
-webkit-transition: all 1s cubic-bezier(.19, 1, .22, 1);
-ms-transition: all 1s cubic-bezier(.19, 1, .22, 1);
-o-webkit-transition: all 1s cubic-bezier(.19, 1, .22, 1);
}
.listpics-p2 {
	grid-area: 1 / 2 / 2 / 3;
	transition: all 1s cubic-bezier(.19, 1, .22, 1);
-moz-transition: all 1s cubic-bezier(.19, 1, .22, 1);
-webkit-transition: all 1s cubic-bezier(.19, 1, .22, 1);
-ms-transition: all 1s cubic-bezier(.19, 1, .22, 1);
-o-webkit-transition: all 1s cubic-bezier(.19, 1, .22, 1);
}
.listpics-p3 {
	grid-area: 2 / 2 / 3 / 3;
	transition: all 1s cubic-bezier(.19, 1, .22, 1);
-moz-transition: all 1s cubic-bezier(.19, 1, .22, 1);
-webkit-transition: all 1s cubic-bezier(.19, 1, .22, 1);
-ms-transition: all 1s cubic-bezier(.19, 1, .22, 1);
-o-webkit-transition: all 1s cubic-bezier(.19, 1, .22, 1);
}

@media screen  and (max-width: 1360px) {
.listpics {
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.listpics-p1 {
	padding:250px 0px;
}
.listpics-p1,.listpics-p2,.listpics-p3{
	background-size:auto 100%;
	}
.listpics-p1:hover,.listpics-p2:hover,.listpics-p3:hover{
	background-size:auto 130%;
	}
}
@media screen  and (max-width: 1024px) {
.listpics {
grid-column-gap: 2px;
grid-row-gap: 1px;
}

.listpics-p1 {
	padding:200px 0px;
}
.listpics-p1,.listpics-p2,.listpics-p3{
	background-size:auto 100%;
	}
.listpics-p1:hover,.listpics-p2:hover,.listpics-p3:hover{
	background-size:auto 130%;
	}
}
@media screen  and (max-width: 600px) {
.listpics  {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 2px;
grid-row-gap: 2px;
}
.listpics-p1 {
	padding:100px 0px;
}
.listpics-p1 { grid-area: 1 / 1 / 2 / 3; }
.listpics-p2{ grid-area: 2 / 1 / 3 / 2; }
.listpics-p3 { grid-area: 2 / 2 / 3 / 3; }

.listpics-p1{
	background-size:100% auto;
	}
.listpics-p2,.listpics-p3{
	background-size:auto 100% ;
	}
.listpics-p1:hover{
	background-size:130% auto;
	}
.listpics-p2:hover,.listpics-p3:hover{
	background-size:auto 130% ;
	}
}

/*wrapper-drink============================*/
.box-buy-note{
	float:left;
	clear:both;
	width:100%;
	font-size:1em;
	color:#132d51}
.wrapper-drink{
	float:left;
	clear:both;
	width:100%;
	background: rgb(45,40,29);
	background: -moz-linear-gradient(45deg,  rgba(45,40,29,1) 0%, rgba(166,147,106,1) 100%);
	background: -webkit-linear-gradient(45deg,  rgba(45,40,29,1) 0%,rgba(166,147,106,1) 100%);
	background: linear-gradient(45deg,  rgba(45,40,29,1) 0%,rgba(166,147,106,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d281d', endColorstr='#a6936a',GradientType=1 );
}
.wrapper-drink-in{
	float: left;
	clear: both;
	width: 100%;
	background-image: url(../img/index/bg-drink.svg);
	background-repeat: no-repeat;
	background-position: center center;
	padding:var(--section-padding-tb) 0px}
.col-drink-w{
	float:left;
	width:30%;
	margin-left:35%;
	margin-right:3%;
	color:#ffffff}
.col-drink-p{float:left;
	width:28%;
	position:relative}
.box-drink-p{
	position:absolute}
@media screen  and (max-width: 1280px) {
.col-drink-w{
	width:35%;
	margin-left:30%;
	margin-right:3%;
	}
.col-drink-p{
	width:28%;
	}

}
@media screen  and (max-width: 1024px) {
.col-drink-w{
	width:40%;
	margin-left:20%;
	margin-right:0%;
	}
.col-drink-p{
	width:40%;
	}

}
@media screen  and (max-width: 800px) {
.col-drink-w{
	width:50%;
	margin-left:10%;
	margin-right:0%;
	}
.col-drink-p{
	width:40%;
	}

}
@media screen  and (max-width: 650px) {
.wrapper-drink-in {
	display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: start;
  align-items: stretch;
  align-content: start
  }
.col-drink-w{
	margin-left:5%;
	margin-right:5%;
	 flex: 0 0 90%;
	 order:2
	}
.col-drink-p{
	 flex: 0 0 40%;
	 order:1;
	 margin-left:auto
	}
.box-drink-p{
	margin-top:-90px}
}
/*wrapper-drinkEND=========================*/
/*wrapper-olds============================*/
.wrapper-olds{
	float: left;
    clear: both;
    width: 100%;
    padding: var(--section-padding-tb) 0px;
 /*   background-image: url(../img/index/bg-olds.jpg);*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	}
.wrapper-olds-in{
	width:50%;
	float:left;
	clear:both;
	color:#ffffff;
	margin: 200px 10%;}
@media screen  and (max-width: 650px) {
.wrapper-olds-in{
	width:90%;
	margin: 200px 10%;}
}
/*wrapper-oldsEND============================*/
/*wrapper-money============================*/
.wrapper-money{
	float: left;
    clear: both;
    width: 100%;
    padding: var(--section-padding-tb) 0px;
 /*   background-image: url(../img/index/bg-olds.jpg);*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	}
.wrapper-money-in{
	width:50%;
	float:left;
	clear:both;
	color:#ffffff;
	margin: 200px 10%;}
@media screen  and (max-width: 650px) {
.wrapper-money-in{
	width:90%;
	margin: 200px 10%;}
}
/*wrapper-oldsEND============================*/
/*wrapper-collect-------------------------------*/
.wrapper-collect{
	float: left;
	clear: both;
	width: 100%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom:  var(--section-padding-tb);
	padding-left: 0px;
}
.box-collect-t{
	float: left;
	clear: both;
	width: 80%;
	padding-right: 10%;
	padding-left: 10%;
}
.col-collect-t1{ flex: 0 1 auto;}
.col-collect-t2{ flex: 1 1 auto;margin-left:20px}
.col-collect-t2 h1{font-family: 'Noto Serif TC', serif;
font-size:1.3em;
margin-top:10px}
.box-collect-pics{
	width:100%;
	float:left;
	clear:both;
	margin-top:80px}
.product-name{
	position: absolute;
	z-index: 1;
	right: 10px;
	bottom: 10px;
	}
.product-pic{
	float: left;
	clear: both;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	}
.product-name span{
	color: #ffffff;
	padding-top: 10px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: rgba(255,255,255,.5);
	text-shadow:0px 0px 1px #000000;
}
@media screen  and (max-width: 950px) {
.box-collect-t{
	width: 90%;
	padding-right: 5%;
	padding-left: 5%;
}
}
@media screen  and (max-width: 750px) {
.box-collect-t{
	flex-wrap:wrap
}
.col-collect-t1{ flex: 0 0 100%;}
.col-collect-t2{ flex: 0 0 100%;margin-left:20px}
.box-collect-pics{
	margin-top:30px}
}
/*--wrapper-collectEND-------------------------------*/
/*wrapper-about=====================================*/
.wrapper-about{
	float: left;
	clear: both;
	width: 80%;
	background-color: var(--sub-color);
	padding:var(--section-padding-tb) 10%;
}
.col-about-w{flex: 0 0 150px;
position:relative}
.col-about-p{
	flex: 1 1 auto;
	/*background-image: url(../img/index/ab-about.jpg)*/;
	background-repeat: no-repeat;
	background-position: center top;
	background-size:cover
}
.box-about-w{
	float:left;
	clear:both;
	width:100%;
	margin-top: 100px;
	margin-bottom: 500px;
	padding-top: 100px;
	padding-bottom: 100px;
}
.w-about{
	width: 400px;
	background-color: #ffffff;
	margin-right: -100px;
	margin-left: 0px;
	padding-top: 100px;
	padding-right: 50px;
	padding-bottom: 100px;
	padding-left: 50px;
	position: absolute;
	line-height: 1.8em;
	font-weight: bold;
}
@media screen  and (max-width: 950px) {
.wrapper-about{
	width: 90%;
	padding:var(--section-padding-tb) 5%;
}
}
@media screen  and (max-width: 800px) {
.wrapper-about{flex-wrap:wrap}
.col-about-w{flex: 0 0 100%;}
.col-about-p{flex: 0 0 100%;
padding:200px 0px}
.box-about-w{
	margin-top: 30px;
	margin-bottom: 30px;
	padding-top: 0px;
	padding-bottom: 30px;}
.w-about{
	width: 100%;
	background-color:transparent;
	margin-right: 0px;
	margin-left: 0px;
	padding-top:0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	position:relative;

}
}
/*locationinfo--------------------*/
.wrapper-location{
	float: left;
	clear: both;
	max-width: 320px;
	padding: 10px;
	color: #ffffff;
	position:absolute;
	right: 80px;
	bottom: 0px;
	z-index: 10;
	font-size:0.9em
	}
/*locationinfoEND--------------------*/