@media (max-width: 1180px) {
	.titleBox {
	  position: relative;
	  display: flex;
	  align-items: center;
	  justify-content: flex-start;
	  width: 100%;
	}
  }
  .titleBox::before, .titleBox::after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background-color: #dbd8d3;
	display: none;
	}
  .titleBox .ins {
	display: inline-flex;
  }
  @media (min-width: 1181px) {
	.titleBox .ins {
	  align-items: flex-start;
	  height: 100%;
	}
  }
  @media (max-width: 1180px) {
	.titleBox .ins {
	  flex-wrap: wrap;
	  justify-content: center;
	}
  }
  .titleBox .subtitle {
	position: relative;
	margin-top: 10px;
	font-size: 12px;
	font-family: "Times New Roman", "Noto Serif TC", serif;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: #fff;
	background-color: #ac8a5e;
  }
  @media (min-width: 1181px) {
	.titleBox .subtitle {
	  width: 27px;
	  writing-mode: vertical-rl;
	  padding-top: 10px;
	  padding-bottom: 10px;
	  padding-right: 6px;
	}
  }
  @media (max-width: 1180px) {
	.titleBox .subtitle {
	  padding-left: 5px;
	  padding-right: 5px;
	  height: 27px;
	  line-height: 27px;
	}
  }
  .titleBox .subtitle::before, .titleBox .subtitle::after {
	content: "";
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
  }
  @media (min-width: 1181px) {
	.titleBox .subtitle::before, .titleBox .subtitle::after {
	  left: 0;
	  width: 27px;
	  height: 10px;
	}
  }
  @media (max-width: 1180px) {
	.titleBox .subtitle::before, .titleBox .subtitle::after {
	  top: 0;
	  width: 10px;
	  height: 27px;
	}
  }
  @media (min-width: 1181px) {
	.titleBox .subtitle::before {
	  top: -10px;
	  background-image: url("../images/titleTopBg.png");
	}
  }
  @media (max-width: 1180px) {
	.titleBox .subtitle::before {
	  left: -10px;
	  background-image: url("../images/titleTopBg2.png");
	}
  }
  @media (min-width: 1181px) {
	.titleBox .subtitle::after {
	  bottom: -10px;
	  background-image: url("../images/titleBottomBg.png");
	}
  }
  @media (max-width: 1180px) {
	.titleBox .subtitle::after {
	  right: -10px;
	  background-image: url("../images/titleBottomBg2.png");
	}
  }
  .titleBox .title {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	margin-left: 8px;
	font-size: 29px;
	letter-spacing: 0;
	color: #ffffff;
	font-family: 'Cormorant', serif;
	}

	.titleBox .titleIns {
	  position: absolute;
	  left: -620px;
	  top: 0;
	}
	  .aboutArea02 .titleBox .titleIns {writing-mode: vertical-rl;position: absolute;right: -910px;top: auto;bottom: 0;}

  @media (max-width: 1180px) {
	.titleBox .title {
	  width: 100%;
	  height: auto;
	  margin-left: auto;
	  margin-right: 0;
	  margin-bottom: 5px;
	  order: -1;
	  display: flex;
	  align-items: flex-start;
	}
  }
  @media (max-width: 640px) {
	.titleBox .title {
	  font-size: 30px;
	}
  }
  .titleBox .title::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 100%;
	background-color: #dfddd8;
	display: none;
	}
  @media (max-width: 1180px) {
	.titleBox .title::after {
	  display: none;
	}
  }
  .titleBox .title span {
	color: #ac8a5e;
  }
  .titleBox .title span.icon {
	background-image: url("../images/logoicon.svg");
	background-repeat: no-repeat;
	background-size: 40px;
  }
  @media (min-width: 1181px) {
	.titleBox .title span.icon {
	  padding-top: 50px;
	  background-position: center top 3px;
	}
  }
  @media (max-width: 1180px) {
	.titleBox .title span.icon {
	  padding-left: 50px;
	  background-position-y: 8px;
	}
  }
  @media (max-width: 640px) {
	.titleBox .title span.icon {
	  background-size: 35px;
	}
  }
  .titleBox .titleIns, .textBox .titleIns_m {
	flex-shrink: 0;
	font-size: 20px;
	color: #8a877f;
	font-family: 'Noto Serif TC', serif;
	letter-spacing: 5.5px;
	line-height: 150%;
	}
.textBox .titleIns_m{
    display: none;
}
  @media (min-width: 1181px) {
  }
  
  .titleBox2 {
	position: relative;
	z-index: 1;
	text-align: center;
  }
  .titleBox2::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -0.5px;
	z-index: -1;
	width: 100%;
	height: 1px;
	background-color: #dbd8d3;
  }
  .titleBox2 .ins {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding-left: 20px;
	padding-right: 20px;
	background-image: url("../images/bg.jpg");
  }
  .titleBox2 .title {
	margin-bottom: 12px;
	font-size: 35px;
	letter-spacing: 0.05em;
	color: #303030;
  }
  .titleBox2 .title span {
	color: #ac8a5e;
  }
  .titleBox2 .subtitle {
	position: relative;
	padding-left: 5px;
	padding-right: 5px;
	height: 27px;
	line-height: 27px;
	font-family: "Times New Roman", "Noto Serif TC", serif;
	font-size: 12px;
	letter-spacing: 0.2em;
	color: #fff;
	background-color: #ac8a5e;
  }
  .titleBox2 .subtitle::before, .titleBox2 .subtitle::after {
	content: "";
	position: absolute;
	top: 0;
	width: 10px;
	height: 27px;
	background-size: contain;
	background-repeat: no-repeat;
  }
  .titleBox2 .subtitle::before {
	left: -10px;
	background-image: url("../images/titleTopBg2.png");
  }
  .titleBox2 .subtitle::after {
	right: -10px;
	background-image: url("../images/titleBottomBg2.png");
  }
  
.aboutArea {
	position: relative;
	padding-top: 20px;
	padding-bottom: 10px;
	width: 100%;
	max-width: 1700px;
	margin: 0 auto 0 0;
	display: flex;
	align-items: flex-start;
	}
 .aboutArea:before {
    position: absolute;
    width: 90%;
    height: 70%;
    background: #f5f5f5;
    display: block;
    bottom: -40px;
    left: 190px;
    z-index: -1;
    content: "";
}
.aboutArea02 {
	position: relative;
	padding-top: 115px;
	padding-bottom: 100px;
	width: 100%;
	max-width: 1660px;
	margin: 0 0 0 auto;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	}
 .aboutArea02:before {
    position: absolute;
    width: 100%;
    height: 50%;
    background: #f5f5f5;
    display: block;
    bottom: 50px;
    right: 50px;
    z-index: -1;
    content: "";
}
  @media (max-width: 1280px) {
	.aboutArea {
	  padding-top: 20px;
	  padding-bottom: 10px;
	  margin-bottom: 40px;

	}
	  	.aboutArea02 {
	  padding-top: 30px;
	  padding-bottom: 30px;
	}
  }
  .aboutArea .wrap {
	display: flex;
  }
  .aboutArea02 .wrap {
	display: flex;
  }
  @media (max-width: 1180px) {
	  .aboutArea,.aboutArea02 {
	  padding-top: 20px;
	  padding-bottom: 10px;
	  margin-bottom: 40px;
	  display: flex;
	  flex-direction: column;
	  align-content: center;
	}
	.aboutArea .wrap {
	  flex-direction: column;
	  align-items: center;
	}
	  	.aboutArea02 .wrap {
	  flex-direction: column;
	  align-items: center;
	}
	  
  }
  .aboutArea .leftBox {
	display: flex;
	width: 700px;
	padding-left: 0px;
	flex-direction: row-reverse;
	}
  .aboutArea02 .leftBox {
	display: flex;
	width: 600px;
	flex-direction: row;
	position: relative;
	}
  @media (max-width: 1180px) {
	.aboutArea .leftBox,.aboutArea02 .leftBox {
	  flex-direction: column;
	  align-items: flex-start;
	  width: calc(100% - 120px);
	  display: flex;
	  padding: 20px 60px;
	}
	  .aboutArea:before{
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 60%;
    display: none;
}
	  	.aboutArea02 .leftBox {
	  /* flex-direction: column; */
	  /* align-items: center; */
	  /* width: 100%; */
	}
  }
  .aboutArea .rightBox {
	position: relative;
	width: calc(100% - 700px);
	margin-top: 60px;
	}
  .aboutArea02 .rightBox {
	position: relative;
	margin-left: auto;
	}
  @media (max-width: 1180px) {
	.aboutArea .rightBox {
	  width: 100%;
	}
	  	.aboutArea02 .rightBox {
	  width: 100%;
	}
  }
  @media (max-width: 1180px) {
	.leftBox .titleBox {
	  margin: 10px 0;
	}
	  .leftBox .titleBoxx::before, .leftBox .titleBox::after,.aboutArea02:before{
    display: none;
}

  }

  .leftBox .textBox {
	padding-left: 70px;
	position: relative;
	padding-right: 70px;
	}
.aboutArea .leftBox .textBox{
    padding-left: 20px;
    position: relative;
    padding-right: 50px;
}
  .leftBox .textBox .subtitle{
    color: #bdad84;
    position: absolute;
    left: 360px;
    top: 8px;
    font-family: 'Cormorant', serif;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-block;
}
  @media (max-width: 1180px) {
	.leftBox .textBox {
	  width: 100%;
	  max-width: 100%;
	  padding-left: 0;
	  margin-bottom: 0;
		.leftBox .textBox .text{}
	;
	  padding-right: 0;
	}
.aboutArea .leftBox .textBox {
    padding-left: 0;
    position: relative;
    padding-right: 0;
    max-width: 100%;
}
	  .leftBox .textBox .title {
    margin-bottom: 72px;
}
	  .titleBox .titleIns, .textBox .titleIns_m{
    font-size: 19px;
    letter-spacing: 2.5px;
}
	   	  .titleBox .titleIns{
    display: none;
}
	 .textBox .titleIns_m{display: block;margin-bottom: 20px;}
	  	  .leftBox .textBox .subtitle{
    position: relative;
    right: 0;
    top: 0;
    display: inline-block;
    margin-bottom: 20px;
}
  }
  .leftBox .textBox .title {
	margin-bottom: 40px;
	}
.leftBox .textBox .title font{
    display: flex;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #bdad84;
    border-bottom: 1px solid #bdad84;
    font-size: 26px;
    line-height: 130%;
    display: inline-block;
    font-family: 'Noto Serif TC', serif;
    letter-spacing: 2.5px;
}
.leftBox .textBox .title font:first-child{
    margin-bottom: 10px;
}
  .leftBox .textBox .text {
	margin-bottom: 30px;
	font-size: 16px;
	letter-spacing: 0.05em;
	line-height: 180%;
	font-weight: 400;
	color: #97948d;
	margin-bottom: 10px;
	}
 .leftBox .textBox .text b{
    padding-bottom: 40px;
    display: inline-block;
    font-size: 18px;
    line-height: 180%;
    font-weight: 400;
    color: #8a877f;
    font-family: 'Noto Serif TC', serif;
}
.leftBox .textBox .text .compareArea{
    display: flex;

}
.leftBox .textBox .text .compareArea .row{
    width: calc((100% / 2) - 20px);
    margin: 0 10px;
}
 .leftBox .textBox .text .compareArea .titleBox{
    position: relative;
    padding-bottom: 30px;
    padding-top: 14px;
    display: flex;
    align-items: flex-start;
}
 .leftBox .textBox .text .compareArea .titleBox h2 {
    font-size: 20px;
    /* font-family: 'Cormorant', serif; */
    color: #bdad84;
    margin: 0;
    letter-spacing: 1px;
    position: absolute;
    left: 0;
    top: 10px;
    line-height: 160%;
}
 .leftBox .textBox .text .compareArea .titleBox h2::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background: rgb(189 173 132 / 41%);
    left: 13px;
    top: 37px;
}

.leftBox .textBox .text .compareArea .titleBox{}
 .leftBox .textBox .text .compareArea h5 {
    font-size: 17px;
    font-family: 'Noto Serif TC', serif !important;
    color: #8a877f;
    letter-spacing: 1px;
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    width: 130px;
}
 .leftBox .textBox .text .compareArea p.item_p {
    margin: 0px 0px 0px 10px;
    color: #bab7b0;
    font-size: 15px;
    text-align: right;
    letter-spacing: 1px;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    width: calc(100% - 150px);
}
 .leftBox .textBox .text .compareArea p.item_p span{
    color: #b0ada6;
}
  @media (max-width: 1560px) {
	.aboutArea02 .titleBox .titleIns{
    right: -870px;
}
}

  @media (max-width: 1440px) {
	.aboutArea02 .titleBox .titleIns{
    right: -800px;
}
}
  @media (max-width: 1280px) {
	.aboutArea02 .titleBox .titleIns{
    right: -680px;
}
	  .titleBox .titleIns{
    left: -500px;
}

}
  @media (max-width: 1180px) {
		  .leftBox .textBox .subtitle{
    position: relative;
    left: 0;
}
	  .aboutArea02 .titleBox .titleIns {
    right: auto;
    left: 0;
    position: relative;
    writing-mode: horizontal-tb;
    display: block;
}
	  .titleBox .titleIns{
    left: 0;
    position: relative;
}
	  .aboutArea .rightBox .imgBox img, .aboutArea02 .rightBox .imgBox img{
    width: 100%;
}
}
  @media (max-width: 640px) {
	.aboutArea .leftBox,.aboutArea02 .leftBox {
	  flex-direction: column;
	  align-items: flex-start;
	  width: calc(100% - 40px);
	  display: flex;
	  padding: 20px 20px;
	}
	  
	.leftBox .titleBox {
	  margin: 0px 0;
	}
.leftBox .textBox .title font{
    font-size: 21px;
}
.leftBox .textBox .text{
    margin-bottom: 0;
}
	  .aboutArea, .aboutArea02{
    margin-bottom: 10px;
}
	  .leftBox .textBox .text .compareArea{
    display: flex;
    flex-direction: column;
}
.leftBox .textBox .text .compareArea .row{
    width: calc((100% / 1) - 20px);
    margin: 0 10px;
}
	  	#aboutBox .info .title{margin-bottom: 22px;}

	  }