/* CSS Document */

/*產品列表*/
.productArea{ background:#F3F3F3; padding:50px 0;}

.productArea ul{
	padding:20px 0 0 0;
	margin:0 -10px;}

.productArea ul li{
	padding:10px;
	}

.productArea ul li .Img{
	overflow:hidden;
	border:1px solid #dcdcdc;
	}

.productArea ul li .Img img{
	display:block;
	width:100%;}

.productArea ul li .Txt{
    margin-top: 15px;
	text-align:center;
   }

.productArea ul li .Txt h3{
	font-size:16px;
	color:#1e1917;}

.productArea ul li .Txt h3 strong{
	font-weight:normal;}

.productArea ul li .Txt h3 a{
	color:#1e1917;}

.productArea ul li .Txt h3 a:hover{
	color: #8f3421;
    text-decoration: underline;}


/*--parallax--*/
.parallax-container {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.parallax {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.parallax img {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

.parallax-window {
  background: transparent;
  padding: 130px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/*--parallax end--*/
.mainArea {
  padding: 0;
}

.swiper-pagination {
  width: 100%;
  margin-top: 20px;
}

.swiper-pagination .dots {
  display: inline-block;
  margin: 0 8px;
  width: 25px;
  height: 3px;
  background-color: #888;
  cursor: pointer;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.swiper-pagination .dots:hover, .swiper-pagination .dots.dotsActive {
  background-color: #ac1a47;
}

.swiper-pagination.disabled {
  opacity: 0;
}

.listPage li {
  position: relative;
  width: 100%;
  padding: 10px;
}

.listPage li.show h3, .listPage li.show p, .listPage li.show .btn02 {
  -webkit-filter: blur(0);
          filter: blur(0);
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.listPage li.show h3 {
  -webkit-transition-delay: .7s;
       -o-transition-delay: .7s;
          transition-delay: .7s;
}

.listPage li.show p {
  -webkit-transition-delay: 1s;
       -o-transition-delay: 1s;
          transition-delay: 1s;
}

.listPage li.show .btn02 {
  -webkit-transition-delay: 1.3s;
       -o-transition-delay: 1.3s;
          transition-delay: 1.3s;
}

.listPage li.show .name {
  -webkit-filter: blur(0);
          filter: blur(0);
  -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
          transform: translateY(100px);
  opacity: 1;
  -webkit-transition-delay: 1.3s;
       -o-transition-delay: 1.3s;
          transition-delay: 1.3s;
}

.listPage .item {
  width: 100%;
  height: 100%;
}

.listPage .Img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.listPage .Img img {
  opacity: 0;
}

.listPage .TxtBox {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1200px;
  height: 100%;
}

.listPage .align0 {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.listPage .align1 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.listPage .align2 {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.listPage .txtTop {
  margin-bottom: 40px;
  font-family: "source-han-serif-tc", "微軟正黑體", serif;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.listPage h3 {
  font-weight: 300;
  font-size: 60px;
  letter-spacing: .1em;
  color: #fff;
}

.listPage p {
  margin-top: 110px;
  font-size: 22px;
  letter-spacing: .3em;
  color: #fff;
}

.listPage h3, .listPage p, .listPage .btn02 {
  -webkit-filter: blur(7px);
          filter: blur(7px);
  -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.listPage em {
  display: inline-block;
  margin: 10px 0;
  font-style: normal;
  letter-spacing: 0;
  font-size: 34px;
  font-weight: 300;
  font-family: "Halant", "微軟正黑體", serif;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.listPage .last .txtTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-bottom: 50px;
}

.listPage .last h3 {
  font-size: 46px;
}

.listPage .last p {
  margin-top: 85px;
}

.listPage .last .Img {
  height: 580px;
}

.listPage .name {
  margin-top: auto;
  margin-right: 20px;
  -webkit-filter: blur(7px);
          filter: blur(7px);
  -webkit-transform: translateY(120px);
      -ms-transform: translateY(120px);
          transform: translateY(120px);
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.topBanner {
  position: relative;
  z-index: 1;
  width: 100%;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.topBanner img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  min-height: 380px;
}

.topBanner .Txt {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 1200px;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.topBanner .align0 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.topBanner .align1 {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.topBanner .align2 {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.topBanner h1 {
  font-weight: 030;
  font-size: 60px;
  font-family: "source-han-serif-tc", "微軟正黑體", serif;
  color: #fff;
  letter-spacing: .1em;
}

.topBanner p {
  margin-top: 110px;
  font-size: 22px;
  color: #fff;
  letter-spacing: .3em;
}

.topBanner h1, .topBanner p {
  -webkit-transform: translateY(-15px);
      -ms-transform: translateY(-15px);
          transform: translateY(-15px);
  opacity: 0;
  white-space: nowrap;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.topBanner em {
  display: inline-block;
  margin: 10px 0;
  font-style: normal;
  letter-spacing: 0;
  font-size: 34px;
  font-weight: 300;
  font-family: "Halant", "微軟正黑體", serif;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.topBanner.show {
  padding: 10px;
}

.topBanner.show h1, .topBanner.show p {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.topBanner.show h1 {
  -webkit-transition-delay: .4s;
       -o-transition-delay: .4s;
          transition-delay: .4s;
}

.topBanner.show p {
  -webkit-transition-delay: .7s;
       -o-transition-delay: .7s;
          transition-delay: .7s;
}

.contentBox {
  padding-bottom: 0;
}

.arrowBox .arrow {
  display: inline-block;
}

.arrowBox .arrowPrev {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.arrowBox .icon-arrow {
  display: block;
  width: 22px;
  height: 40px;
  fill: #c4c4c4;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.arrowBox .icon-arrow:hover {
  fill: #ac1a47;
}

.aboutBottomLink .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.aboutBottomLink li {
  position: relative;
  width: calc((100% - 160px)/4);
  height: 160px;
}

.aboutBottomLink li:hover .Img img {
  opacity: .7;
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}

.aboutBottomLink .Img {
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
}

.aboutBottomLink .Img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}

.aboutBottomLink .Txt {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-weight: 300;
  color: #fff;
  text-align: center;
  letter-spacing: .15em;
  pointer-events: none;
}

.aboutBottomLink h4 {
  font-family: "source-han-serif-tc", "微軟正黑體", serif;
  font-weight: 300;
  font-size: 28px;
}

.aboutBottomLink p {
  font-size: 13px;
}

.aboutBottomLink .backBox {
  width: 160px;
  font-size: 13px;
  color: #666;
  letter-spacing: .15em;
  background-color: #fff;
}

.aboutBottomLink .backBox a {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  color: #666;
}

.aboutBottomLink .backBox a:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 0;
  height: 100%;
  background-color: #ac1a47;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

.aboutBottomLink .backBox a:hover {
  color: #fff;
}

.aboutBottomLink .backBox a:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}

.aboutBottomLink .backBox a:hover .icon-arrow02 {
  fill: #fff;
}

.aboutBottomLink .backBox .icon-arrow02 {
  display: inline-block;
  width: 74px;
  height: 5px;
  margin: 15px 0;
  fill: #818181;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

/*--茶道之說 start--*/
.aboutBox01-1 {
  position: relative;
  margin-bottom: 110px;
}

.aboutBox01-1:before {
  content: '';
  position: absolute;
  right: 0;
  top: -45px;
  z-index: -1;
  width: 815px;
  height: 1000px;
  background: url("https://www.yenten-farm.com/images/bg02.png") no-repeat;
}

.aboutBox01-1 .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.aboutBox01-1 .left {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: -130px;
}

.aboutBox01-1 .right {
  width: 50%;
  margin-left: auto;
}

.aboutBox01-2 {
  margin-bottom: 170px;
}

.aboutBox01-2 .innerBox {
  width: 50%;
}

.aboutBox01-2 .sideImg {
  position: absolute;
  right: 0;
  top: -200px;
  z-index: -1;
  width: 1040px;
}

.aboutBox01-3 {
  position: relative;
  z-index: 2;
  margin-bottom: 130px;
}

.aboutBox01-3:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 755px;
  height: 710px;
  background: url("https://www.yenten-farm.com/images/bg03.png") no-repeat;
  pointer-events: none;
}

.aboutBox01-3 .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.aboutBox01-3 .innerBox {
  width: 50%;
}

.aboutBox01-3 .sideImg {
  position: absolute;
  left: 0;
  top: -320px;
  z-index: -1;
  width: 477px;
}

.aboutBox01-4 {
  position: relative;
}

.aboutBox01-4 .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.aboutBox01-4 ul {
  list-style-type: none;
  padding-left: 0;
}

.aboutBox01-4 .left {
  position: relative;
  z-index: 1;
  width: 50%;
  -webkit-transform: translateY(-50px);
      -ms-transform: translateY(-50px);
          transform: translateY(-50px);
  pointer-events: none;
}

.aboutBox01-4 .left img {
  display: block;
  max-width: 100%;
}

.aboutBox01-4 .right {
  width: 600px;
  margin-left: auto;
}

.aboutBox01-4 .historyListBox {
  position: relative;
}

.aboutBox01-4 .historyListBox:before {
  content: '';
  position: absolute;
  left: 0;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 14px;
  width: 100vw;
  height: 1px;
  background-color: #e5e5e5;
}

.aboutBox01-4 .historyList {
  padding-top: 10px;
  overflow: hidden;
}

.aboutBox01-4 .historyList ul {
  width: 100%;
  margin-left: -210px;
}

.aboutBox01-4 .historyList .dot {
  position: relative;
  width: 10px;
  height: 10px;
  margin-left: 15px;
  margin-bottom: 30px;
  background-color: #bbb;
  border-radius: 50%;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.aboutBox01-4 .historyList .dot:before {
  content: '';
  position: absolute;
  left: -4px;
  top: -4px;
  width: 18px;
  height: 18px;
  border: 1px solid #b5b5b5;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  opacity: 0;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.aboutBox01-4 .historyList .year {
  padding-top: 15px;
  font-size: 24px;
  font-family: "Halant", "微軟正黑體", serif;
  color: #aaa;
  letter-spacing: .02em;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.aboutBox01-4 .historyList .title {
  font-weight: 300;
  font-size: 20px;
  font-family: "source-han-serif-tc", "微軟正黑體", serif;
  color: #222;
  letter-spacing: .15em;
  opacity: 0;
  -webkit-transform: translateY(30px);
      -ms-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.aboutBox01-4 .historyList .swiper-slide {
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.aboutBox01-4 .historyList .swiper-slide-active {
  margin-right: 80px !important;
}

.aboutBox01-4 .historyList .swiper-slide-active .dot {
  margin-left: 30px;
  background-color: #646464;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.aboutBox01-4 .historyList .swiper-slide-active .dot:before {
  opacity: 1;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.aboutBox01-4 .historyList .swiper-slide-active .year {
  -webkit-transform: translate(50px, -15px) scale(1.7);
      -ms-transform: translate(50px, -15px) scale(1.7);
          transform: translate(50px, -15px) scale(1.7);
  color: #222;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.aboutBox01-4 .historyList .swiper-slide-active .title {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1s .3s;
  -o-transition: all 1s .3s;
  transition: all 1s .3s;
}

.aboutBox01-4 .arrowBox {
  position: absolute;
  top: -5px;
  width: 100%;
}

.aboutBox01-4 .arrowBox .arrow {
  position: absolute;
}

.aboutBox01-4 .arrowBox .arrowNext {
  right: -85px;
}

.aboutBox01-4 .arrowBox .arrowPrev {
  left: -85px;
}

/*--茶道之說 end--*/
/*--精深工序 start--*/
.aboutBox02-1 {
  margin-bottom: 110px;
}

.aboutBox02-1 .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.aboutBox02-1 .numberList {
  position: relative;
  padding-left: 0;
  list-style-type: none;
  text-align: center;
  color: #c6ae6c;
}

.aboutBox02-1 .numberList li {
  padding: 40px 35px;
}

.aboutBox02-1 .numberList li:not(:last-child) {
  border-bottom: 1px solid #d2d2d2;
}

.aboutBox02-1 .numberList .tt1, .aboutBox02-1 .numberList .tt2 {
  font-weight: 300;
  font-family: "source-han-serif-tc", "微軟正黑體", serif;
  color: #c6ae6c;
  letter-spacing: .15em;
  line-height: 1;
}

.aboutBox02-1 .numberList .tt1 {
  margin-bottom: 8px;
  font-size: 18px;
  text-align: center;
}

.aboutBox02-1 .numberList .tt2 {
  font-size: 24px;
}

.aboutBox02-1 .numberList .num {
  font-family: "Halant", "微軟正黑體", serif;
  font-weight: 300;
  font-size: 110px;
  letter-spacing: .02em;
  line-height: 1;
  overflow: hidden;
}

.aboutBox02-1 .center {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 620px;
  height: 620px;
  margin-left: 90px;
}

.aboutBox02-1 .center:before {
  content: '';
  position: absolute;
  left: -90px;
  bottom: -30px;
  z-index: 1;
  width: 424px;
  height: 300px;
  background: url("https://www.yenten-farm.com/images/teaLeaf02.png") no-repeat;
}

.aboutBox02-1 .center .videoBox {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.aboutBox02-1 .center video {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 101%;
}

.aboutBox02-1 .playerBox {
  width: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.aboutBox02-1 .mb_YTPBar {
  display: none !important;
}

.aboutBox02-1 .right {
  position: relative;
  z-index: 0;
  padding-top: 100px;
  font-weight: 300;
  font-family: "source-han-serif-tc", "微軟正黑體", serif;
  color: #222;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  letter-spacing: .2em;
}

.aboutBox02-1 .right:before {
  content: '';
  position: absolute;
  right: 0;
  top: -200px;
  z-index: -1;
  width: 815px;
  height: 1000px;
  background: url("https://www.yenten-farm.com/images/bg02.png") no-repeat;
  pointer-events: none;
}

.aboutBox02-1 .right .tt1 {
  position: relative;
  padding-left: 50px;
  margin-left: 50px;
  font-size: 50px;
}

.aboutBox02-1 .right .tt1:after {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 2px;
  height: 60px;
  background-color: #000;
}

.aboutBox02-1 .right p {
  font-size: 25px;
}

.aboutBox02-2 .wrap {
  width: 100%;
  padding: 0;
}

.aboutBox02-2 .hashTagList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style-type: none;
}

.aboutBox02-2 .hashTagList li {
  position: relative;
  width: 33.333%;
  background-color: #000;
  cursor: pointer;
}

.aboutBox02-2 .Img {
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.aboutBox02-2 .Img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  max-height: 230px;
}

.aboutBox02-2 .Txt {
  position: absolute;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
}

.aboutBox02-2 .more {
  position: relative;
  z-index: 0;
  width: 280px;
  height: 62px;
  color: #fff;
  -webkit-box-shadow: inset -1px 0 0 #fff, inset 1px 0 0 #fff;
          box-shadow: inset -1px 0 0 #fff, inset 1px 0 0 #fff;
  border-top: none;
  border-bottom: none;
  background-image: -webkit-gradient(linear, left top, right top, from(#ac1a47), to(#ac1a47)), -webkit-gradient(linear, left top, left bottom, from(#ac1a47), to(#ac1a47)), -webkit-gradient(linear, right top, left top, from(#ac1a47), to(#ac1a47)), -webkit-gradient(linear, left bottom, left top, from(#ac1a47), to(#ac1a47));
  background-image: -webkit-linear-gradient(left, #ac1a47 0%, #ac1a47 100%), -webkit-linear-gradient(top, #ac1a47 0%, #ac1a47 100%), -webkit-linear-gradient(right, #ac1a47 0%, #ac1a47 100%), -webkit-linear-gradient(bottom, #ac1a47 0%, #ac1a47 100%);
  background-image: -o-linear-gradient(left, #ac1a47 0%, #ac1a47 100%), -o-linear-gradient(top, #ac1a47 0%, #ac1a47 100%), -o-linear-gradient(right, #ac1a47 0%, #ac1a47 100%), -o-linear-gradient(bottom, #ac1a47 0%, #ac1a47 100%);
  background-image: linear-gradient(to right, #ac1a47 0%, #ac1a47 100%), linear-gradient(to bottom, #ac1a47 0%, #ac1a47 100%), linear-gradient(to left, #ac1a47 0%, #ac1a47 100%), linear-gradient(to top, #ac1a47 0%, #ac1a47 100%);
  background-size: 0 1px, 1px 0, 0 1px, 1px 0;
  background-position: 0 0, right top, right bottom, left bottom;
  background-repeat: no-repeat;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.aboutBox02-2 .more:before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  width: 0;
  height: 100%;
  background-color: #ac1a47;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
}

.aboutBox02-2 .more:after {
  content: '';
  position: absolute;
  right: 75px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 74px;
  height: 5px;
  background: url("https://www.yenten-farm.com/images/arrow03.png") no-repeat;
  opacity: 0;
  -webkit-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;
}

.aboutBox02-2 .more h3 {
  position: absolute;
  left: 50%;
  top: 5px;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  font-family: "source-han-serif-tc", "微軟正黑體", serif;
  font-weight: 300;
  font-size: 30px;
  letter-spacing: .15em;
  line-height: 1.4;
  -webkit-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;
}

.aboutBox02-2 .more p {
  position: absolute;
  left: 50%;
  bottom: -5px;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 13px;
  letter-spacing: .15em;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

@media (min-width: 1231px) {
  .aboutBox02-2 .hashTagList li:hover .Img {
    opacity: .5;
  }
  .aboutBox02-2 .hashTagList li:hover .more {
    -webkit-box-shadow: none;
            box-shadow: none;
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    -webkit-transition: background .4s .3s, -webkit-box-shadow .4s;
    transition: background .4s .3s, -webkit-box-shadow .4s;
    -o-transition: box-shadow .4s, background .4s .3s;
    transition: box-shadow .4s, background .4s .3s;
    transition: box-shadow .4s, background .4s .3s, -webkit-box-shadow .4s;
  }
  .aboutBox02-2 .hashTagList li:hover .more:before {
    right: auto;
    left: 0;
    width: 100%;
    -webkit-transition-delay: .7s;
         -o-transition-delay: .7s;
            transition-delay: .7s;
  }
  .aboutBox02-2 .hashTagList li:hover .more:after {
    right: 35px;
    opacity: 1;
    -webkit-transition-delay: .8s;
         -o-transition-delay: .8s;
            transition-delay: .8s;
  }
  .aboutBox02-2 .hashTagList li:hover .more h3 {
    left: 70px;
    -webkit-transition-delay: .8s;
         -o-transition-delay: .8s;
            transition-delay: .8s;
  }
  .aboutBox02-2 .hashTagList li:hover .more p {
    opacity: 0;
    bottom: -10px;
  }
}


.aboutBox02-4 .textBox {
  background-image: url("../image/probg1.jpg");
}

.aboutBox02-3 .textBox {
  background-image: url("../image/probg2.jpg");
}


.aboutBox02 .wrap {
  width: 100%;
  padding: 0;
}

.aboutBox02 .topTxt {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  padding: 80px 0 160px;
}

.aboutBox02 .topTxt:before {
  content: attr(data-no);
  position: absolute;
  bottom: -80px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 200px;
  font-family: "Halant", "微軟正黑體", serif;
  color: #fff;
  line-height: 1;
  letter-spacing: .1em;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.aboutBox02 .topTxt .tt {
  position: relative;
  font-family: "source-han-serif-tc", "微軟正黑體", serif;
  font-size: 34px;
  letter-spacing: .15em;
  color: #222;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.aboutBox02 .topTxt .tt:not(:first-child) {
  margin-left: 65px;
}

.aboutBox02 .topTxt .tt:not(:first-child):before {
  content: '';
  position: absolute;
  left: -30px;
  top: 5px;
  width: 2px;
  height: 60px;
  background-color: #000;
}

.aboutBox02 .textBox {
  position: relative;
  padding: 160px 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.aboutBox02 .txtItem {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 480px;
  margin: 0 auto;
}

.aboutBox02 .txtItem:after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  padding-bottom: 100%;
  background-color: rgba(255, 255, 255, 0.88);
  border-radius: 50%;
}

.aboutBox02 .txtItem .tt {
  padding: 0 25px;
  margin-bottom: 45px;
  font-family: "source-han-serif-tc", "微軟正黑體", serif;
  font-size: 30px;
  line-height: 1.3;
  color: #222;
  letter-spacing: .15em;
  border: 1px solid #000;
  border-top: none;
  border-bottom: none;
}

.aboutBox02 .Txt {
  width: 275px;
  text-align: justify;
  font-size: 17px;
  color: #333;
}



.processBox {
background:url(../image/bg.jpg);
  position: relative;
  z-index: 10;
 padding-top: 100px;
  padding-bottom: 120px;
}

.processBox .wrap {
  width: calc(100% - 130px);
  margin-left: 65px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.processBox .processList {
  -webkit-transform: translateX(-230px);
      -ms-transform: translateX(-230px);
          transform: translateX(-230px);
}

.processBox ul {
  height: 560px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 0;
  list-style-type: none;
}

.processBox li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 155px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.processBox li:hover:not(.swiper-slide-active) .item {
  -webkit-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
          transform: translateY(-20px);
}

.processBox li:hover:not(.swiper-slide-active) .Img {
  -webkit-box-shadow: 0 0 27px rgba(0, 0, 0, 0.12);
          box-shadow: 0 0 27px rgba(0, 0, 0, 0.12);
}

.processBox li:hover:not(.swiper-slide-active) .title {
  color: #c29725;
}

.processBox .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.processBox .Img {
  position: relative;
  z-index: 1;
  width: 155px;
  height: 155px;
  border: 8px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 0 0 27px rgba(0, 0, 0, 0.04);
          box-shadow: 0 0 27px rgba(0, 0, 0, 0.04);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.processBox .Img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.processBox .title {
  margin-top: 25px;
  font-weight: 300;
  font-size: 20px;
  font-family:"微軟正黑體", serif;
  color: #222;
  text-align: center;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.processBox .title p {
  margin-top: 10px;
  font-weight: 300;
  font-size: 15px;
  font-family:"微軟正黑體", serif;
  color: #222;
  line-height:1.4;
  text-align: center;
}

.processBox .swiper-slide-active {
  width: 620px;
}

.processBox .swiper-slide-active .Img {
  width: 480px;
  height: 480px;
  border-width: 20px;
}

.processBox .processText {
  margin-bottom: 30px;
  text-align: center;
  font-weight: 300;
  font-size: 24px;
  font-family:"微軟正黑體", serif;
  color: #222;
  letter-spacing: .15em;
}

.processBox .processText em {
  display: inline-block;
  margin-right: 3px;
  -webkit-transform: translateY(2px);
      -ms-transform: translateY(2px);
          transform: translateY(2px);
  font-size: 33px;
  line-height: 1;
  font-family:  "微軟正黑體", serif;
  letter-spacing: .02em;
}

/*--精深工序 end--*/
/*--嚴選品質 start--*/
.aboutBox03-1 {
  padding-top: 155px;
  margin-top: -70px;
  overflow: hidden;
}

.aboutBox03-1 .wrap {
  width: calc(100% - 130px);
  margin: 0 auto;
}

.aboutBox03-1 .itemBox {
  position: relative;
  height: 760px;
  background: url("https://www.yenten-farm.com/about/images/03/aboutImg01_.jpg") no-repeat right bottom;
}

.aboutBox03-1 .imgBg {
  display: none;
  width: 100%;
}

.aboutBox03-1 .imgBg img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.aboutBox03-1 .subTitle {
  position: absolute;
  left: 120px;
  top: -85px;
  z-index: 5;
  font-family: "source-han-serif-tc", "微軟正黑體", serif;
  font-size: 22px;
  letter-spacing: .15em;
  color: #f5f5f5;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.aboutBox03-1 .subTitle .tt {
  position: relative;
  z-index: 0;
  margin-right: 15px;
  padding: 20px 6px;
}

.aboutBox03-1 .subTitle .tt:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #ac1a47;
}

.aboutBox03-1 .subTitle .tt:nth-child(2) {
  top: 50px;
}

.aboutBox03-1 .people {
  position: absolute;
  right: 295px;
  bottom: -60px;
  z-index: 2;
  pointer-events: none;
}

.aboutBox03-1 .textBox {
  position: relative;
  z-index: 0;
  width: 70%;
  height: 100%;
  padding: 105px 320px 0 280px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}

.aboutBox03-1 .textBox:after {
  content: '';
  position: absolute;
  left: -180px;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: rgba(6, 38, 44, 0.9);
  -webkit-transform: skewX(-25deg);
      -ms-transform: skewX(-25deg);
          transform: skewX(-25deg);
}

.aboutBox03-1 .titleS01 .title {
  color: #efb81d;
}

.aboutBox03-1 .TxtBoxS01 {
  color: #f5f5f5;
}

.aboutBox03-2 {
  position: relative;
  z-index: 2;
  padding: 75px 0 210px;
  background-color: #131313;
}

.aboutBox03-2 .sideImg {
  position: absolute;
  left: 0;
  bottom: 70px;
  z-index: -1;
  pointer-events: none;
  -webkit-transform: translate(-80px, 120px);
      -ms-transform: translate(-80px, 120px);
          transform: translate(-80px, 120px);
}

.aboutBox03-2 .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.aboutBox03-2 .left {
  width: 20%;
  margin-top: -20px;
  color: #cfcece;
}

.aboutBox03-2 .left .no {
  font-size: 190px;
  font-family: "Halant", "微軟正黑體", serif;
  line-height: 1;
}

.aboutBox03-2 .left .Txt {
  font-size: 40px;
  font-family: "source-han-serif-tc", "微軟正黑體", serif;
  letter-spacing: .15em;
  line-height: 1.5;
}

.aboutBox03-2 .right {
  position: relative;
  width: 80%;
  margin-top: -145px;
}

.aboutBox03-2 .stepList ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  margin: 0 -20px;
  list-style-type: none;
}

.aboutBox03-2 .stepList li {
  width: 33.333%;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.aboutBox03-2 .stepList .item {
  position: relative;
}

.aboutBox03-2 .stepList .Img img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.aboutBox03-2 .stepList .Txt {
  position: absolute;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  padding-top: 50px;
  font-family: "source-han-serif-tc", "微軟正黑體", serif;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  cursor: pointer;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.aboutBox03-2 .stepList .Txt:before {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border: 1px solid #2d6255;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.aboutBox03-2 .stepList .Txt:after {
  content: '';
  position: absolute;
  left: 15px;
  top: 15px;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  background-image: -webkit-gradient(linear, left top, right top, from(#2d6255), to(#2d6255)), -webkit-gradient(linear, left top, left bottom, from(#2d6255), to(#2d6255)), -webkit-gradient(linear, right top, left top, from(#2d6255), to(#2d6255)), -webkit-gradient(linear, left bottom, left top, from(#2d6255), to(#2d6255));
  background-image: -webkit-linear-gradient(left, #2d6255 0%, #2d6255 100%), -webkit-linear-gradient(top, #2d6255 0%, #2d6255 100%), -webkit-linear-gradient(right, #2d6255 0%, #2d6255 100%), -webkit-linear-gradient(bottom, #2d6255 0%, #2d6255 100%);
  background-image: -o-linear-gradient(left, #2d6255 0%, #2d6255 100%), -o-linear-gradient(top, #2d6255 0%, #2d6255 100%), -o-linear-gradient(right, #2d6255 0%, #2d6255 100%), -o-linear-gradient(bottom, #2d6255 0%, #2d6255 100%);
  background-image: linear-gradient(to right, #2d6255 0%, #2d6255 100%), linear-gradient(to bottom, #2d6255 0%, #2d6255 100%), linear-gradient(to left, #2d6255 0%, #2d6255 100%), linear-gradient(to top, #2d6255 0%, #2d6255 100%);
  background-size: 0 1px, 1px 0, 0 1px, 1px 0;
  background-position: 0 0, right top, right bottom, left bottom;
  background-repeat: no-repeat;
  -webkit-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}

.aboutBox03-2 .stepList .Txt:hover:after {
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
}

.aboutBox03-2 .stepList .title {
  margin-left: 15px;
  font-size: 28px;
  color: #f6f6f6;
  letter-spacing: .15em;
}

.aboutBox03-2 .stepList .subTitle {
  font-size: 16px;
  color: #efb81d;
  letter-spacing: .22em;
}

.aboutBox03-3 .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 0;
}

.aboutBox03-3 .left {
  width: 46%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.aboutBox03-3 .left img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.aboutBox03-3 .right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 54%;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 80px;
  padding-right: calc((100% - 1200px)/2);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/*--嚴選品質 end--*/
/*--創新設計 start--*/
.aboutBox04-1 .wrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.aboutBox04-1 .Img {
  position: absolute;
  left: -155px;
  bottom: 0;
  width: 756px;
  height: 607px;
  pointer-events: none;
}

.aboutBox04-1 .Img img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.aboutBox04-1 .left {
  position: relative;
  width: 50%;
  padding: 50px 0 650px;
}

.aboutBox04-1 .right {
  width: 50%;
}

.aboutBox04-1 .right img {
  margin-left: 60px;
}

.aboutBox04-2 {
  margin-top: -170px;
  margin-bottom: 20px;
}

.aboutBox04-2 .wrap {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 380px;
}

.aboutBox04-2 .Img {
  position: absolute;
  right: 0;
  z-index: -1;
  pointer-events: none;
  width: 514px;
  height: 376px;
}

.aboutBox04-2 .Img img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.aboutBox04-2 .center {
  width: 50%;
}

.aboutBox04-2 .TxtBoxS02 {
  width: 50%;
  padding-right: 20px;
  text-align: justify;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.aboutBox04-3 .wrap {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 95px;
}

.aboutBox04-3 .Img {
  position: absolute;
  left: -70px;
  bottom: -120px;
  z-index: -1;
  width: 255px;
  pointer-events: none;
}

.aboutBox04-3 .Img img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.aboutBox04-3 .center {
  width: 50%;
}

.aboutBox04-4 {
  position: relative;
  min-height: 690px;
}

.aboutBox04-4:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url("https://www.yenten-farm.com/about/images/04/aboutImg05.jpg") no-repeat center bottom;
}

.aboutBox04-4 .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.aboutBox04-4 .right {
  width: 50%;
  margin-left: auto;
  margin-top: 110px;
}

/*--創新設計 end--*/
/*--願景藍圖 start--*/
.aboutBox05.alignRight .Img {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  -webkit-transform: translateX(80px);
      -ms-transform: translateX(80px);
          transform: translateX(80px);
}

.aboutBox05 .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.aboutBox05 .Img {
  position: relative;
  width: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transform: translateX(-80px);
      -ms-transform: translateX(-80px);
          transform: translateX(-80px);
  border-radius: 50%;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.aboutBox05 .Img img {
  display: block;
  width: 100%;
}

.aboutBox05 .text {
  width: 50%;
  padding-top: 70px;
}

.aboutBox05-1 {
  margin-bottom: 75px;
}

.aboutBox05-2 {
  position: relative;
  z-index: 1;
}

.aboutBox05-3 {
  margin-top: -90px;
  height: 640px;
}

.aboutBox05-4 {
  position: relative;
  z-index: 1;
  margin: -100px 0 170px;
}

.aboutBox05-4 .text {
  padding-top: 200px;
}

/*--願景藍圖 end--*/
@-webkit-keyframes anirotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes anirotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/*--Rwd--*/
@media (max-width: 1800px) {
  .aboutBox01-2 .sideImg {
    width: 1000px;
  }
  .aboutBox01-3 .sideImg {
    top: -290px;
    width: 430px;
  }
  .aboutBox03-1 .textBox {
    padding: 180px 380px 0 30px;
  }
}

@media (max-width: 1520px) {
  .aboutBox01-1 .left {
    -ms-flex-negative: inherit;
        flex-shrink: inherit;
    width: 50%;
    margin-left: 0;
  }
  .aboutBox01-1 .right {
    padding-left: 50px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .aboutBox01-2 .sideImg {
    width: 900px;
  }
  .aboutBox01-3 .sideImg {
    top: -245px;
    width: 370px;
  }
  .aboutBox03-1 .itemBox {
    background-position: -180px 0;
  }
  .aboutBox03-1 .textBox {
    padding: 180px 290px 0 30px;
  }
  .aboutBox03-1 .people {
    display: none;
  }
  .processBox .wrap {
    overflow: visible;
  }
}

@media (max-width: 1440px) {
  .topBanner .Txt {
    width: calc(100% - 260px);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .aboutBox01-4 .left {
    width: 30%;
  }
  .aboutBox01-4 .historyList .title {
    font-size: 18px;
  }
  .aboutBox01-4 .historyListBox:before {
    -webkit-transform: translateX(-40%);
        -ms-transform: translateX(-40%);
            transform: translateX(-40%);
  }
  .aboutBox01-4 .historyList .swiper-slide-active .year {
    -webkit-transform: translate(60px, -15px) scale(1.7);
        -ms-transform: translate(60px, -15px) scale(1.7);
            transform: translate(60px, -15px) scale(1.7);
  }
  .aboutBox04-1 .right {
    padding-left: 60px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .aboutBox04-1 .right img {
    margin-left: 0;
  }
  .aboutBox05 .Img {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
  .aboutBox05 .text {
    padding-left: 50px;
  }
  .aboutBox05.alignRight .Img {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
  .aboutBox05.alignRight .text {
    padding-left: 0;
    padding-right: 50px;
  }
}

@media (max-width: 1366px) {
  .topBanner h1 {
    font-size: 46px;
  }
  .topBanner p {
    font-size: 18px;
  }
  .topBanner em {
    margin: 5px 0;
    font-size: 30px;
  }
  .listPage .TxtBox {
    width: calc(100% - 160px);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .aboutBox01-2 .sideImg {
    width: 800px;
  }
  .aboutBox01-3 .sideImg {
    top: -160px;
    width: 300px;
  }
  .aboutBox01-4 .arrowBox .arrowNext {
    display: none;
  }
  .aboutBottomLink h4 {
    font-size: 22px;
  }
  .aboutBox02-1 .wrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .aboutBox02-1 .right {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
    width: 100%;
    padding-top: 0;
    margin-bottom: 50px;
    -webkit-writing-mode: inherit;
        -ms-writing-mode: inherit;
            writing-mode: inherit;
    text-align: center;
  }
  .aboutBox02-1 .right .tt1 {
    padding-left: 0;
    padding-bottom: 5px;
    margin-left: 0;
    margin-bottom: 10px;
  }
  .aboutBox02-1 .right .tt1:after {
    top: auto;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
            transform: translateX(-30px);
    width: 60px;
    height: 2px;
  }
  .aboutBox02-1 .left {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    position: absolute;
    left: 30px;
    bottom: 90px;
  }
  .aboutBox02-1 .center {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-left: 0;
  }
  .aboutBox02-1 .center:before {
    left: -90px;
  }
  .aboutBox03-1 .wrap {
    width: 100%;
    padding: 0;
  }
  .aboutBox03-2 {
    padding: 70px 0;
  }
  .aboutBox03-2 .sideImg {
    display: none;
  }
  .aboutBox03-2 .wrap {
    width: 100%;
    padding: 0 60px;
  }
  .aboutBox04-3 .Img {
    left: -20px;
    bottom: -80px;
  }
}

@media (max-width: 1230px) {
  .parallax {
    display: none;
  }
  .aboutBox01-2 .sideImg {
    top: -250px;
    width: 680px;
  }
  .aboutBox01-3 .sideImg {
    top: -65px;
    width: 250px;
  }
  .aboutBox01-3 .wrap {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .aboutBox01-3 .innerBox {
    width: calc(100% - 300px);
  }
  .aboutBox03-3 .right {
    padding: 20px 40px;
  }
  .aboutBox05-2 {
    margin-bottom: 50px;
  }
  .aboutBox05-3 {
    margin-top: 0;
    height: 350px;
  }
  .aboutBox05-3 .parallax {
    display: block;
  }
  .aboutBox05-3 .parallax img {
    -o-object-fit: cover;
       object-fit: cover;
  }
}

@media (max-width: 1180px) {
 
 .productArea ul{
		margin:0;}
 
  .aboutBox02-1 {
    margin-bottom: 80px;
  }
  .aboutBox02-1 .left {
    position: static;
    width: 100%;
    margin-bottom: 20px;
  }
  .aboutBox02-1 .center {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .aboutBox02-1 .numberList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .aboutBox02-1 .numberList li {
    position: relative;
    width: 150px;
  }
  .aboutBox02-1 .numberList li:not(:last-child) {
    border-bottom: none;
  }
  .aboutBox02-1 .numberList li:not(:last-child):after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -30px;
    width: 1px;
    height: 60px;
    background-color: #d2d2d2;
  }
  .aboutBox02-1 .numberList .tt1 {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    font-size: 24px;
  }
  .aboutBox03-1 .itemBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 200px 0 150px;
    height: auto;
  }
  .aboutBox03-1 .textBox {
    width: 70%;
    height: auto;
    padding: 40px;
    background-color: rgba(6, 38, 44, 0.9);
  }
  .aboutBox03-1 .textBox:after {
    display: none;
  }
  .aboutBox03-2 {
    padding: 30px 0 50px;
  }
  .aboutBox03-2 .wrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 0 20px;
  }
  .aboutBox03-2 .left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    margin-top: 0;
  }
  .aboutBox03-2 .left .Txt {
    margin-left: 20px;
  }
  .aboutBox03-2 .right {
    width: 100%;
    margin-top: 0;
  }
  .aboutBox03-2 .stepList ul {
    margin: 0;
  }
}

@media (max-width: 1023px) {
  .listPage .last .Img {
    background-position: calc(50% - 80px) 50%;
  }
  .aboutBox01-2 .sideImg {
    top: -115px;
    width: 520px;
  }
  .aboutBox01-2 .innerBox {
    width: 58%;
  }
  .aboutBox01-4 {
    margin-bottom: 30px;
  }
  .aboutBox01-4 .left {
    display: none;
  }
  .aboutBox01-4 .right {
    width: 100%;
    padding: 0 40px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .aboutBox01-4 .historyListBox:before {
    -webkit-transform: translateX(-60px);
        -ms-transform: translateX(-60px);
            transform: translateX(-60px);
  }
  .aboutBox01-4 .arrowBox .arrowNext {
    display: block;
    right: -35px;
  }
  .aboutBox01-4 .arrowBox .arrowPrev {
    left: -35px;
  }
  .aboutBox01-4 .historyList .swiper-slide-active {
    margin-right: 0 !important;
  }
  .aboutBox01-4 .historyList .swiper-slide-active .year {
    -webkit-transform: translate(0, 0) scale(1);
        -ms-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
    font-size: 30px;
  }
  .aboutBottomLink .list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .aboutBottomLink li {
    width: 50%;
  }
  .aboutBottomLink .backBox {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
    width: 100%;
    height: 120px;
  }
  .aboutBox03-3 .wrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .aboutBox03-3 .left {
    width: 100%;
  }
  .aboutBox03-3 .right {
    width: 100%;
    padding: 40px;
  }
  .aboutBox05 .wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .aboutBox05 .Img {
    width: 100%;
    max-width: 500px;
  }
  .aboutBox05 .text {
    width: 100%;
    padding: 30px 0 0 0;
  }
  .aboutBox05.alignRight .Img {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }
  .aboutBox05.alignRight .text {
    padding-right: 0;
  }
  .aboutBox05-4 {
    margin: -100px 0 80px;
  }
}

@media (max-width: 960px) {
  .listPage li:nth-child(4) .Img {
    background-position: calc(50% + 115px) 50%;
  }
  .aboutBox01-1 .wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .aboutBox01-1 .right {
    width: 100%;
    padding-left: 0;
    margin-left: 0;
  }
  .aboutBox01-2 .sideImg {
    top: -115px;
    width: 450px;
  }
  .aboutBox02-2 .hashTagList {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .aboutBox02-2 .hashTagList li {
    width: 50%;
  }
  .aboutBox02-2 .hashTagList li:first-child {
    width: 100%;
  }
  .aboutBox02 .topTxt {
    padding: 70px 0 100px;
  }
  .aboutBox03-1 .itemBox {
    background-position: left bottom;
  }
  .aboutBox03-1 .textBox {
    width: 90%;
  }
  .aboutBox04-1 {
    margin-bottom: 30px;
  }
  .aboutBox04-1 .wrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .aboutBox04-1 .Img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
  }
  .aboutBox04-1 .left {
    padding: 0;
  }
  .aboutBox04-2 {
    margin-top: 0;
  }
  .aboutBox04-2 .center {
    width: 75%;
  }
}

@media (max-width: 900px) {
  .aboutBox04-3 .wrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .aboutBox04-3 .center {
    width: 100%;
  }
  .aboutBox04-3 .Img {
    position: static;
    margin-top: 50px;
  }
  
  .productArea ul{
		margin:0;}
	
	.productArea ul li{
		padding:0 0 25px 0;}
}

@media (max-width: 767px) {
  .listPage .align0 {
    text-align: left;
  }
  .listPage .align1 {
    text-align: center;
  }
  .listPage .align2 {
    text-align: right;
  }
  .listPage .TxtBox {
    width: calc(100% - 100px);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .listPage .txtTop {
    -webkit-writing-mode: inherit;
        -ms-writing-mode: inherit;
            writing-mode: inherit;
  }
  .listPage h3 {
    font-size: 46px;
  }
  .listPage p {
    margin-top: 0;
    font-size: 20px;
    line-height: 1.6;
  }
  .listPage em {
    vertical-align: middle;
    margin: 0;
    -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
            transform: rotate(0);
  }
  .listPage .last .Img {
    height: 450px;
  }
  .listPage .last h3 {
    font-size: 40px;
  }
  .listPage .name {
    -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
            transform: translateY(20px);
  }
  .listPage li.show .name {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    margin-top: 20px;
    margin-right: 0;
  }
  .listPage li.show.last h3 {
    -webkit-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
  }
  .listPage li.show.last p {
    -webkit-transition-delay: .7s;
         -o-transition-delay: .7s;
            transition-delay: .7s;
  }
  .aboutBox01-1 {
    margin-bottom: 60px;
  }
  .aboutBox01-2 {
    margin-bottom: 60px;
  }
  .aboutBox01-2 .innerBox {
    width: 100%;
  }
  .aboutBox01-2 .sideImg {
    top: -175px;
    opacity: .15;
  }
  .aboutBox01-3 {
    margin-bottom: 60px;
  }
  .aboutBox01-3 .innerBox {
    width: 100%;
  }
  .aboutBox01-3 .sideImg {
    opacity: .03;
  }
  .aboutBox01-4 .titleS01 .title {
    text-align: center;
  }
  .aboutBox01-4 .historyList ul {
    margin-left: 0;
  }
  .aboutBox01-4 .historyList .swiper-slide-active .dot {
    margin-left: 0;
  }
  .aboutBox01-4 .historyList .dot {
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    margin-left: 0;
  }
  .aboutBox01-4 .historyList .item {
    text-align: center;
  }
  .aboutBox02-1 .center {
    width: 100%;
    height: auto;
    padding-bottom: 100%;
  }
  .aboutBox02-1 .center:before {
    display: none;
  }
  .aboutBox02 .txtItem {
    width: calc(100% - 80px);
  }
  .aboutBox02 .txtItem:after {
    height: 100%;
    border-radius: 0;
    padding: 40px 0;
  }
  .aboutBox02 .Txt {
    width: 100%;
    padding: 0 30px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .aboutBox03-2 {
    padding: 30px 0 70px;
  }
  .aboutBox03-2 .swiper-pagination .dots {
    background-color: #ddd;
  }
  .aboutBox03-2 .swiper-pagination .dots:hover, .aboutBox03-2 .swiper-pagination .dots.dotsActive {
    background-color: #ac1a47;
  }
  .aboutBox04-1 {
    margin-bottom: 30px;
  }
  .aboutBox04-1 .Img {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .aboutBox04-1 .left {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: 100%;
    padding: 0;
  }
  .aboutBox04-1 .right {
    width: 100%;
    padding-left: 0;
    text-align: center;
  }
  .aboutBox04-1 .right img {
    display: inline-block;
    width: 65%;
    height: auto;
  }
  .aboutBox04-1 .titleS01 .title {
    text-align: center;
  }
  .aboutBox04-2 .wrap {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    background-position: top center;
  }
  .aboutBox04-2 .center {
    width: 60%;
  }
  .aboutBox04-2 .TxtBoxS02 {
    width: 100%;
  }
  .aboutBox04-2 .Img {
    position: static;
    width: 100%;
    max-width: 514px;
    height: auto;
  }
  .aboutBox04-2 .wrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-height: auto;
  }
  .aboutBox04-2 .center {
    width: 100%;
  }
  .aboutBox04-3 .wrap {
    padding-bottom: 40px;
  }
  .aboutBox04-3 .center {
    width: 100%;
  }
  .aboutBox04-4 {
    min-height: auto;
    margin-bottom: 40px;
  }
  .aboutBox04-4:after {
    display: none;
  }
  .aboutBox04-4 .right {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
  }
  .aboutBox04-4 .titleS01 .title {
    text-align: center;
  }
  .processBox {
    padding-bottom: 50px;
  }
  .processBox ul {
    height: 540px;
  }
  .processBox .processList {
    -webkit-transform: translateX(-135px);
        -ms-transform: translateX(-135px);
            transform: translateX(-135px);
  }
  .processBox .swiper-slide-active {
    width: 420px;
  }
  .processBox .swiper-slide-active .Img {
    width: 420px;
    height: 420px;
    border-width: 10px;
  }
  .processBox .Img {
    border-width: 5px;
  }
  
 
}

@media (max-width: 640px) {
  .listPage li:nth-child(3) .Img {
    background-position: calc(50% + 100px) 50%;
  }
  .listPage h3 {
    font-size: 36px;
  }
  .listPage p {
    font-size: 16px;
  }
  .listPage .last h3 {
    font-size: 26px;
  }
  .listPage .last .Img {
    height: 255px;
    background-position: calc(50% + 20px) 50%;
  }
  .listPage .last p {
    margin-top: 45px;
  }
  .listPage .name img {
    width: 90px;
  }
  .topBanner .Txt {
    width: 100%;
    padding: 0 50px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .topBanner h1 {
    font-size: 40px;
  }
  .topBanner p {
    font-size: 16px;
    line-height: 1.4;
  }
  .topBanner h1, .topBanner p {
    white-space: inherit;
  }
  .topBanner em {
    font-size: 24px;
  }
  .aboutBox02 .topTxt {
    padding: 50px 0 80px;
  }
  .aboutBox02 .topTxt:before {
    font-size: 180px;
  }
  .aboutBox02 .topTxt .tt {
    font-size: 30px;
  }
  .aboutBox02 .textBox {
    padding: 120px 0;
  }
  .aboutBox02-2 .hashTagList li {
    width: 100%;
  }
  .aboutBox02-2 .Img img {
    height: 150px;
  }
  .aboutBox02-2 .more {
    background-image: none;
  }
  .aboutBox02-2 .more:before, .aboutBox02-2 .more:after {
    display: none;
  }
  .aboutBox03-1 {
    padding-top: 50px;
  }
  .aboutBox03-1 .subTitle {
    display: none;
  }
  .aboutBox03-1 .itemBox {
    padding: 80px 0;
  }
}

@media (max-width: 580px) {
  .processBox {
    margin-top: 0;
    padding: 35px 0;
  }
  .processBox ul {
    height: auto;
  }
  .processBox .processList {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
  .processBox .swiper-slide-active {
    width: 420px;
    width: auto;
  }
  .processBox .swiper-slide-active .Img, .processBox .Img {
    width: 100%;
    height: auto;
    padding-bottom: calc(100% - 10px);
    border-width: 5px;
  }
  .processBox li {
    margin: 0;
  }
  .processBox .Img {
    position: relative;
  }
  .processBox .Img img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

@media (max-width: 480px) {
  .listPage li:nth-child(3) .Img {
    background-position: calc(50% + 100px) 50%;
  }
  .listPage li:nth-child(4) .Img {
    background-position: calc(50% + 115px) 50%;
  }
  .listPage h3 {
    font-size: 36px;
  }
  .listPage p {
    font-size: 16px;
  }
  .listPage .last h3 {
    font-size: 26px;
  }
  .listPage .last .Img {
    height: 255px;
  }
  .listPage .last .Img img {
    min-height: 255px;
  }
  .listPage .last p {
    margin-top: 45px;
  }
  .listPage .name img {
    width: 90px;
  }
  .aboutBox01-1 .left {
    width: 80%;
  }
  .aboutBottomLink li {
    width: 100%;
  }
  .aboutBox02-1 .right .tt1 {
    font-size: 40px;
  }
  .aboutBox02-1 .right p {
    font-size: 20px;
  }
  .aboutBox02-1 .numberList li {
    padding: 30px 15px;
  }
  .aboutBox02-1 .numberList .num {
    font-size: 75px;
  }
  .aboutBox02-1 .numberList .tt1, .aboutBox02-1 .numberList .tt2 {
    font-size: 20px;
  }
  .aboutBox02 .topTxt {
    padding: 60px 0 80px;
  }
  .aboutBox02 .topTxt:before {
    font-size: 160px;
  }
  .aboutBox02 .topTxt .tt {
    font-size: 26px;
  }
  .aboutBox02 .textBox {
    padding: 120px 0 100px;
  }
  .aboutBox03-1 .TxtBoxS01 {
    -webkit-column-count: 1;
            column-count: 1;
  }
  .aboutBox03-3 .right {
    padding: 20px;
  }
  .aboutBox03-3 .TxtBoxS01 {
    -webkit-column-count: 1;
            column-count: 1;
  }
}

@media (max-width: 420px) {
  .listPage .last .Img {
    background-position: calc(50% - 30px) 50%;
  }
}

@media (max-width: 375px) {
  .listPage .align0, .listPage .align2 {
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .listPage h3 {
    font-size: 36px;
  }
  .listPage p {
    font-size: 16px;
  }
  .listPage .last h3 {
    font-size: 24px;
  }
  .listPage .last p {
    font-size: 14px;
  }
  .listPage .last .TxtBox {
    width: calc(100% - 60px);
  }
  .listPage .last .align0, .listPage .last .align2 {
    text-align: left;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .aboutBox02-1 .right .tt1 {
    font-size: 30px;
  }
  .aboutBox02-1 .right p {
    font-size: 18px;
  }
  .aboutBox02-1 .numberList .num {
    font-size: 65px;
  }
  .aboutBox02-2 .more {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .aboutBox02 .txtItem {
    width: 100%;
    padding: 70px 0 40px;
  }
  .aboutBox02 .textBox {
    padding: 0;
  }
  .aboutBox03-2 .left .no {
    font-size: 100px;
  }
  .aboutBox03-2 .left .Txt {
    margin-left: 10px;
    font-size: 28px;
  }
}

@media (max-width: 320px) {
  .btn02 a {
    padding: 9px 32px;
  }
  .btn02 .icon-arrow02 {
    display: none;
  }
}