/* CSS Document */

.mainArea{background:#fff;padding:40px 0 0 0;}
.obox{background:#F2EADD; padding:20px; border-radius:10px; margin:30px 0}
.box1{background:#EAE5E5; padding:20px;}
.obox .title{float:left;}
.obox h3{writing-mode: vertical-lr; letter-spacing:0.05em; font-weight:normal; font-size:22px; }

/*--品牌大事紀--*/
.aboutMilestonesParallax {
  position: relative;
  height: 460px;
  margin-bottom: 60px;
}

.aboutMilestones {
  margin: 75px 0 0px;
}

.aboutMilestones ul {
  padding-left: 0;
}

.aboutMilestones ul li {
  list-style-type: none;
}

.aboutMilestones ul li:nth-of-type(even) {
  background: rgba(158, 139, 107, 0.1);
}

.aboutMilestones ul li:last-child .item {
  padding-bottom: 200px;
}

.aboutMilestones .item {
  position: relative;
  width: 1160px;
  margin: 0 auto;
  padding: 0 60px;
  box-sizing: border-box;
}

.aboutMilestones .item:before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 263.5px;
  top: 44px;
  width: 13px;
  height: 13px;
  background: #f1e9de;
  border-radius: 50%;
  box-shadow: 0 0 0px 4px rgba(149, 118, 70, 0.5);
}

.aboutMilestones .item:after {
  /*--line--*/
  content: '';
  position: absolute;
  z-index: 1;
  left: 270px;
  top: 0;
  width: 1px;
  height: 100%;
  background: #cabdab;
}

.aboutMilestones .date {
  position: relative;
  /*display: inline-block;
  margin-right: -2px;
  vertical-align: top;*/
  float: left;
  width: 190px;
  padding-right: 30px;
 color: #330000;
  letter-spacing: .025em;
}

.aboutMilestones .date .year {
  font-size: 50px;
}

.aboutMilestones .date .month {
  font-size: 30px;
}

.aboutMilestones .date .month:before {
  content: '/';
  font-size: 20px;
  margin: 0 8px 0 5px;
}

.aboutMilestones .right {
  /*display: inline-block;
  margin-right: -2px;
  vertical-align: top;*/
  display: block;
  overflow: hidden;
  padding-left: 50px;
  box-sizing: border-box;
}

.aboutMilestones h4 {
  display: block;
  color: #330000;
  font-weight: normal;
  font-size: 18px;
  letter-spacing: .025em;
  padding: 30px 0;
}

.aboutMilestones .TxtBox {
  margin-bottom: 50px;
}


/*步驟*/
ul.step{
	text-align:center;}

ul.step li{
	padding:10px 20px;
	display:inline-block;
	color:#330000;
	position:relative;}

ul.step li.current{
	color:#330000;}

ul.step li i{
	display:inline-block;
	vertical-align:middle;
	font-size:60px;
	margin-right:15px;}
	
ul.step li .Txt{
	display:inline-block;
	vertical-align:middle;
	text-align:left;}


ul.step li .Txt p{
	line-height:1.5;
	vertical-align:middle;
	font-size:16px;}
	
	
.itemList {
padding-bottom:50px;
}

.itemList li {
  opacity: 1;
}

.itemList li.show {
  -webkit-animation: fsUp 1s ease-out both;
          animation: fsUp 1s ease-out both;
}

.itemList li:first-child .Img {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.itemList li:nth-child(even) .item::after {
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
}

.itemList li:nth-child(even) .Img {
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}

.itemList li:nth-child(even) .Txt {
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

.itemList .item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.itemList .item::after {
  content: '';
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  position: relative;
  -webkit-order: 3;
      -ms-flex-order: 3;
          order: 3;
  display: block;
  width: calc((100% - 1200px) / 2);
  background-color: #f9fafb;
  z-index: -1;
}

.itemList .item:hover {
  z-index: 1;
}

.itemList .item:hover .Img::before {
  opacity: 1;
}

.itemList .item:hover .Img img {
 
}

.itemList .item .Img .Txt {
  position: absolute;
  z-index: 10;
  bottom: 0;
  width: 100%;
  background: rgba(36, 43, 46, 0.7);
  padding: 10px;
  box-sizing: border-box;
}

.itemList .item .Img h3 {
  position: relative;
  padding-top: 10px;
  margin-bottom: 10px;
  color:#fff;
}



.itemList .Img {
  position: relative;
  line-height: 0;
  z-index: 1;
}

.itemList .Img img {
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.itemList .Txt {
  position: relative;
  -webkit-flex: 0 0 580px;
      -ms-flex: 0 0 580px;
          flex: 0 0 580px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #F3EEE8;
  cursor: pointer;
   box-sizing: border-box;
}


.itemList .Txt p {
padding:50px 40px;	
  height: 85px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: #333300;
  font-size:16px;
  vertical-align:middle;
}


	
	
@media (max-width: 1220px) {

  .itemList .item::after {
    display: none;
  }
  .itemList li:not(:first-child) .Img {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
  }
  .itemList .Img, .itemList .Txt {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
  }
}	
	

@media (max-width: 1180px) {
  .aboutMilestonesParallax img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
    .aboutMilestones .item {
    width: 100%;
    padding: 0 30px;
  }
  
  .itemList .Txt p {
padding:30px 40px;	
  line-height: 1.5;
}
  
  }
  
  
  @media (max-width: 960px) {
  .itemList li:nth-child(even) .Img {
    -webkit-order: 0;
        -ms-flex-order: 0;
            order: 0;
  }
  .itemList .item {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  .itemList .Img, .itemList .Txt {
    -webkit-flex-basis: 100% !important;
        -ms-flex-preferred-size: 100% !important;
            flex-basis: 100% !important;
  }
  .itemList .Img img {
    height: auto;
  }
  .itemList .Txt {
    padding-bottom: 50px;
  }
  }
  @media (max-width: 768px) {
  .aboutMilestonesParallax {
    margin-bottom: 30px;
  }
  
    .aboutMilestones {
    margin: 45px 0 0px;
  }
  .aboutMilestones ul li:last-child .item {
    padding-bottom: 50px;
  }
  .aboutMilestones .item:before {
    left: 23.5px;
  }
  .aboutMilestones .item:after {
    left: 30px;
  }
  .aboutMilestones .date {
    padding-right: 0;
    padding-left: 30px;
    width: 100%;
  }
  .aboutMilestones .right {
    padding-left: 30px;
    width: 100%;
  }
  .aboutMilestones h4 {
    padding-top: 0;
  }
  
   .itemList .Txt {
    padding-left: 0px;
    padding-right: 0px;
  }
  
  
  .itemList .Txt p {
    height: auto;
	line-height: 1.8;
  }
  .itemList .Txt p br {
    display: none;
  }
  }
  
  @media screen and (max-width: 640px){
	.obox .title{float:none}
    .obox h3{writing-mode: horizontal-tb; text-align:center}
	
	ul.step{
	text-align:left;}
	
	ul.step li{
	padding:10px 0px;
	display:block;
	position:relative;}
	
	ul.step li i{
		margin-right:5px;}
	
	ul.step li .Txt p{
		font-size:16px;}
	
	
}
/*640end*/
  
  @media(max-width:480px){
	  .aboutMilestones .date .year{
		font-size: 30px;
	}
	.aboutMilestones .date .month{
		font-size: 20px;
	}
	.aboutMilestones h4{
		font-size: 18px;
	}
	  }
	  
@media(max-width:320px){
	 ul.step li i{
		 display:none;
		margin-right:5px;}
	 
	  }  
	  
  
  @media(min-width: 1181px) {
	.aboutTeaArea{
		overflow: hidden;
		opacity: 0;
		-webkit-transform: translateY(30px);
		transform: translateY(30px);
		transition: all 1s;
	}

	.aboutTeaArea.show{
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	.aboutTeaArea .left{
		opacity: 0;
		-webkit-transform: translateX(20px);
		transform: translateX(20px);
		transition: all 1.5s 1s;
	}

	.aboutTeaArea.show .left{
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	.aboutTeaArea .right{
		opacity: 0;
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
		transition: all .8s .6s;
	}

	.aboutTeaArea.show .right{
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}


	/*--茶湯事紀--*/
	.aboutMilestones .item:before {
		opacity: 0;
		transition: all .8s .15s;
	}
	.aboutMilestones .item:after {
		height: 0;
		transition: all 1s;
	}
	.aboutMilestones .date {
		opacity: 0;
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
		transition: all .8s;
	}
	.aboutMilestones .right {
		opacity: 0;
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
		transition: all .8s;
	}

	.aboutMilestones ul li.show .right {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	.aboutMilestones ul li.show .date {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	.aboutMilestones ul li.show .item:before {
		opacity: 1;
	}
	.aboutMilestones ul li.show .item:after {
		height: 100%;
	}

}
/*--1181--*/