/* CSS Document */
.mainArea {
  overflow: hidden;
}

.sectionBox {
  position: relative;
  padding-top: 35px;
  padding-bottom: 100px;
}

.sectionBox:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -0.5px;
  bottom: 0;
  width: 1px;
  height: 60px;
  background-color: #e5e5e5;
}

.aboutBox1 {
  position: relative;
  z-index: 5;
}

.aboutBox1 .textNoteBox {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.aboutBox1 .bottomText {
  width: 100%;
  text-align: center;
  letter-spacing: .02em;
  font-size: 14px;
}

.aboutBox1 .scrollBox {
  margin-bottom: 20px;
}

@media (min-width: 961px) {
  .aboutBox1 .scrollBox {
    display: none;
  }
}

.aboutBox2 {
  position: relative;
}

.aboutBox2 .partBox {
  text-align: left;
}

.aboutBox2 .boxItem {
  position: relative;
}

.aboutBox2 .boxItem::before {
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
}

.aboutBox2 .wrap {
  max-width: 815px;
}

@media (max-width: 960px) {
  .aboutBox2 .wrap {
    max-width: 100%;
  }
}

.aboutBox2 .textNoteBox {
  max-width: 600px;
  margin-bottom: 80px;
}

@media (max-width: 960px) {
  .aboutBox2 .textNoteBox {
    max-width: 100%;
    margin-bottom: 40px;
  }
}

.aboutBox2 .box1::before {
  right: 0;
  top: -350px;
  width: 721px;
  height: 931px;
  background-image: url("../images/aboutBox2Img1.png");
}

@media (max-width: 1680px) {
  .aboutBox2 .box1::before {
    right: -150px;
  }
}

@media (max-width: 1366px) {
  .aboutBox2 .box1::before {
    opacity: 0.08;
  }
}

@media (max-width: 960px) {
  .aboutBox2 .box1::before {
    display: none;
  }
}

.aboutBox2 .box2::before {
  left: 0;
  top: -200px;
  width: 699px;
  height: 657px;
  background-image: url("../images/aboutBox2Img2.png");
}

@media (max-width: 1680px) {
  .aboutBox2 .box2::before {
    left: -120px;
  }
}

@media (max-width: 1366px) {
  .aboutBox2 .box2::before {
    opacity: 0.1;
    top: auto;
    bottom: -350px;
  }
}

@media (max-width: 960px) {
  .aboutBox2 .box2::before {
    bottom: -500px;
  }
}

.aboutBox2 .box2 .textNoteBox {
  margin-left: auto;
}

.aboutStoryBox {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.aboutStoryBox .arrowStyle {
  position: absolute;
  top: 50%;
  margin-top: -21px;
}

@media (max-width: 960px) {
  .aboutStoryBox .arrowStyle {
    display: none !important;
  }
}

.aboutStoryBox .prevArrow {
  left: 70px;
}

@media (max-width: 1180px) {
  .aboutStoryBox .prevArrow {
    left: 0;
  }
}

.aboutStoryBox .nextArrow {
  right: 70px;
}

@media (max-width: 1180px) {
  .aboutStoryBox .nextArrow {
    right: 0;
  }
}

.aboutStoryList {
  width: 100%;
  max-width: 880px;
  margin-left: -10px;
  margin-right: -10px;
  margin-top: 55px;
}

@media (max-width: 1180px) {
  .aboutStoryList {
    max-width: calc(100% - 80px);
    margin-top: 0;
  }
}

@media (max-width: 960px) {
  .aboutStoryList {
    max-width: 100%;
  }
}

.aboutStoryList .slick-list {
  padding-top: 70px;
  padding-bottom: 50px;
}

@media (min-width: 961px) {
  .aboutStoryList .slick-list {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.aboutStoryList .slick-slide {
  opacity: 0;
}

.aboutStoryList .slick-active {
  opacity: 1;
}

.aboutStoryList .listData {
  padding-left: 10px;
  padding-right: 10px;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

@media (min-width: 768px) {
  .aboutStoryList .listData .mt25 {
    margin-top: -25px;
  }
  .aboutStoryList .listData .mt35 {
    margin-top: -35px;
  }
  .aboutStoryList .listData .mt55 {
    margin-top: -55px;
  }
}

.aboutStoryList .itemBox {
  position: relative;
  cursor: pointer;
  -webkit-box-shadow: 0px 1px 19.74px 1.26px rgba(205, 205, 205, 0.45);
  box-shadow: 0px 1px 19.74px 1.26px rgba(205, 205, 205, 0.45);
}

.aboutStoryList .itemBox:hover .Img img {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  opacity: 0.78;
}

.aboutStoryList .itemBox:hover .Txt::after {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}

.aboutStoryList .itemBox:hover .front {
  opacity: 0;
}

.aboutStoryList .itemBox:hover .back {
  opacity: 1;
}

.aboutStoryList .itemBox:hover .title,
.aboutStoryList .itemBox:hover .en {
  color: #fff;
}

@media (max-width: 960px) {
  .aboutStoryList .itemBox .Img img {
    opacity: 0.7;
  }
  .aboutStoryList .itemBox .Txt::after {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  .aboutStoryList .itemBox .front {
    opacity: 0;
  }
  .aboutStoryList .itemBox .back {
    opacity: 1;
  }
  .aboutStoryList .itemBox .title,
  .aboutStoryList .itemBox .en {
    color: #fff;
  }
}

.aboutStoryList .Img {
  overflow: hidden;
  background-color: #262626;
}

.aboutStoryList .Img img {
  display: block;
  width: 100%;
  -webkit-transition: all 1.2s ease-in-out;
  -o-transition: all 1.2s ease-in-out;
  transition: all 1.2s ease-in-out;
}

.aboutStoryList .Txt {
  position: absolute;
  left: 0;
  top: 0;
  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%;
  overflow: hidden;
}

.aboutStoryList .Txt::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-transition: all 0.8s cubic-bezier(0.9, 0, 0.1, 1);
  -o-transition: all 0.8s cubic-bezier(0.9, 0, 0.1, 1);
  transition: all 0.8s cubic-bezier(0.9, 0, 0.1, 1);
}

.aboutStoryList .icon {
  position: relative;
  width: 100px;
  margin-bottom: 12px;
}

@media (max-width: 480px) {
  .aboutStoryList .icon {
    width: 70px;
  }
}

.aboutStoryList .icon img {
  display: block;
  width: 100%;
}

.aboutStoryList .title,
.aboutStoryList .en,
.aboutStoryList .front,
.aboutStoryList .back {
  -webkit-transition: all .8s;
  -o-transition: all .8s;
  transition: all .8s;
}

.aboutStoryList .back {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.aboutStoryList .title {
  display: block;
  text-align: center;
  font-size: 16px;
  color: #916f2d;
  font-weight: 400;
}

.aboutStoryList .en {
  font-size: 12px;
  color: #9d9d9d;
}

.side_album {
  display: none;
}

.aboutMysteryBox {
  position: relative;
}

.aboutMysteryBox .arrowStyle {
  position: absolute;
  top: 50%;
  margin-top: -21px;
}

@media (max-width: 1480px) {
  .aboutMysteryBox .arrowStyle {
    display: none !important;
  }
}

.aboutMysteryBox .prevArrow {
  left: -100px;
}

.aboutMysteryBox .nextArrow {
  right: -100px;
}

.aboutBox3 .textNoteBox {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.aboutMysteryList {
  margin-left: -10px;
  margin-right: -10px;
}

.aboutMysteryList li {
  padding-left: 10px;
  padding-right: 10px;
}

.aboutMysteryList .slick-list {
  padding-top: 20px;
  padding-bottom: 20px;
}

.aboutMysteryList .itemBox {
  -webkit-box-shadow: 0 0 24px rgba(205, 205, 205, 0.45);
  box-shadow: 0 0 24px rgba(205, 205, 205, 0.45);
}

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

.aboutMysteryList .title {
  padding: 15px;
  text-align: center;
  font-size: 14px;
  letter-spacing: .02em;
  font-weight: 400;
  color: #3e3e3e;
  line-height: 1.7;
  background-color: #fff;
}

.scrollBox {
  width: 100%;
  height: 2px;
  margin-top: 30px;
  background-color: #ccc;
}

.scrollBox .box {
  height: 2px;
  background-color: #916f2d;
  -webkit-transition: all .6s;
  -o-transition: all .6s;
  transition: all .6s;
}

.scrollBox.mystery {
  width: calc(100% - 270px);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1180px) {
  .scrollBox.mystery {
    width: 100%;
  }
}

.aboutBox4 {
  position: relative;
  z-index: 0;
}

@media (max-width: 1023px) {
  .aboutBox4 {
    padding-bottom: 30px;
  }
}

.aboutBox4::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url("../images/aboutBox4Bg.png");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
}

@media (max-width: 1023px) {
  .aboutBox4::after {
    opacity: 0.5;
  }
}

@media (max-width: 480px) {
  .aboutBox4::after {
    display: none;
  }
}

@media (min-width: 1024px) {
  .aboutBox4 {
    min-height: 1096px;
  }
}

.aboutBox4 .textNoteBox {
  margin-bottom: 40px;
}

.aboutBox4 .wrap {
  position: relative;
  max-width: 980px;
}

.featureImgBox {
  width: 100%;
  max-width: 725px;
}

@media (max-width: 1023px) {
  .featureImgBox {
    display: none;
  }
}

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

.aboutFeatureBox {
  z-index: 2;
  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: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 40px 60px;
  width: 100%;
  max-width: 420px;
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(208, 208, 208, 0.75);
  box-shadow: 0px 0px 30px 0px rgba(208, 208, 208, 0.75);
}

@media (min-width: 1024px) {
  .aboutFeatureBox {
    position: absolute;
    right: 0;
    top: 210px;
    height: 430px;
  }
}

@media (max-width: 1023px) {
  .aboutFeatureBox {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 480px) {
  .aboutFeatureBox {
    padding: 25px;
  }
}

.aboutFeatureBox .bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  width: 100%;
  padding-top: 20px;
}

.aboutFeatureBox .btnBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 90px;
  margin-left: 60px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.aboutFeatureList {
  width: 100%;
  max-width: 100%;
}

.aboutFeatureList .Img {
  display: none;
}

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

.aboutFeatureList .title {
  margin-bottom: 10px;
  color: #916f2d;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .02em;
}

.aboutFeatureList .text {
  font-size: 14px;
  color: #747474;
  font-weight: 300;
  line-height: 1.7;
  max-height: 253px;
}