/* CSS Document */
.insIntroBox .albumBox .albumList .albumListNav .albumItem img, .insIntroBox .albumBox .albumList .albumItem img {
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.classNote {
  color: #8B8B8B;
  padding-bottom: 10px;
  text-align: center;
}

.facList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -15px;
  /*
      .item {
          padding: 20px;
          position: relative;
          overflow: hidden;

          @include media($breakpointMedium) {
              max-width: 580px;
              margin: 0 auto;
          }

          @include media(-1180) {
              @include hover {
                  .Img {
                      &::before {
                          top: 0;
                          opacity: 1;
                      }
                  }

                  .Txt {
                      top: auto;
                      bottom: 0;
                      opacity: 1;

                      &::before,
                      &::after {
                          width: 100%;
                          max-width: 470px;
                          transition-delay: 0.45s;
                      }
                  }
              }
          }
      }
      .Img {
          background-color: #000;
          width: 100%;
          max-width: 965px;
          margin: 0 auto;
          position: relative;

          @include pseudoBefore{
              background-image: linear-gradient(to top, rgba(#000, 0.7), transparent 35%);
              display: block;
              width: 100%;
              height: 100%;
              opacity: 0;
              left: 0;
              top: 20px;
              pointer-events: none;
              @extend %ts;
          }

          a {
              display: block;
              width: 100%;
              height: 100%;
          }

          img {
              display: block;
              opacity: 1;
              width: 100%;
              @extend %ts;
          }
      }

      .Txt {
          color: #fff;
          width: 100%;
          max-width: 340px;
          text-align: center;
          padding: 30px 10px 45px;
          opacity: 0;
          pointer-events: none;
          position: absolute;
          left: 50%;
          bottom: -10%;
          transform: translateX(-50%);
          @extend %ts;

          @include pseudoBefore{
              display: block;
              width: 0;
              height: 1px;
              background-color: rgba(#fff, 0.2);
              top: calc(50% - 0.5px);
              right: 100%;
              @extend %ts;
          }

          @include pseudoAfter{
              display: block;
              width: 0;
              height: 1px;
              background-color: rgba(#fff, 0.2);
              top: calc(50% - 0.5px);
              left: 100%;
              @extend %ts;
          }

          .title {
              a {
                  display: block;
                  color: #fff;
                  font-size: 20px;
                  letter-spacing: 2px;
                  line-height: 1.5;
              }
          }

          .titleEn {
              font-size: 16px;
              letter-spacing: 1.6px;
              line-height: 1.5;
          }

          .text {
              font-size: 15px;
              letter-spacing: 1.6px;
              line-height: 1.4;
              padding-top: 10px;

              &.ellipsis {
                  max-height: 73px;
              }
          }

          @include media($breakpointMedium) {
              background-color: $secondColor;
              width: 100%;
              max-width: 100%;
              opacity: 1;
              padding: 20px;
              pointer-events: auto;
              position: relative;
              left: 0;
              bottom: 0;
              transform: translateX(0);
          }
      }
  */
}
.facList .facItem {
  width: 33.3333333333%;
  padding: 0 15px 30px;
}
@media (max-width: 1180px) {
  .facList .facItem {
    width: 50%;
  }
}
@media (max-width: 768px) {
  .facList .facItem {
    width: 100%;
  }
}
.facList .item {
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.facList .Img {
  position: relative;
}
.facList .Img:hover:before {
  opacity: 1;
}
.facList .Img:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.35);
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
  background-image: linear-gradient(to bottom, #fff 0%, #fff 100%), linear-gradient(to bottom, #fff 0%, #fff 100%);
  background-size: 1px 23px, 23px 1px;
  background-position: center center;
  pointer-events: none;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
  opacity: 0;
}
.facList .Img img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.facList .Txt {
  padding: 15px;
  text-align: center;
  background-color: #fff;
}
.facList .Txt .title a {
  font-size: 20px;
  font-weight: 400;
  color: #333;
}
.facList .Txt .title a:hover {
  color: #152c50;
}
.facList .Txt .text {
  height: 60px;
  padding-top: 10px;
  font-size: 16px;
  line-height: 1.8;
  color: #152c50;
}

.insIntroBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 960px) {
  .insIntroBox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.insIntroBox .albumBox {
  width: 50%;
  margin: 0 -5px;
}
@media (max-width: 960px) {
  .insIntroBox .albumBox {
    width: 100%;
    margin: 0;
    padding-bottom: 30px;
  }
}
.insIntroBox .albumBox .albumList {
  position: relative;
}
.insIntroBox .albumBox .albumList .albumItem {
  cursor: pointer;
  padding: 0 5px;
}
.insIntroBox .albumBox .albumList .albumItem img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
@media (min-width: 1181px) {
  .insIntroBox .albumBox .albumList .albumItem:hover img {
    opacity: 0.8;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
.insIntroBox .albumBox .albumList .albumListNav {
  margin: 15px auto 0;
  width: 100%;
  max-width: 440px;
}
@media (max-width: 960px) {
  .insIntroBox .albumBox .albumList .albumListNav {
    max-width: 400px;
  }
}
.insIntroBox .albumBox .albumList .albumListNav .albumItem {
  padding: 0 5px;
  overflow: hidden;
}
.insIntroBox .albumBox .albumList .albumListNav .albumItem img {
  display: block;
  height: 100px;
  width: 100px;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto;
}
@media (max-width: 350px) {
  .insIntroBox .albumBox .albumList .albumListNav .albumItem img {
    height: 80px;
  }
}
@media (min-width: 1181px) {
  .insIntroBox .albumBox .albumList .albumListNav .albumItem img:hover {
    opacity: 0.8;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
.insIntroBox .introBox {
  width: 50%;
  padding-left: 20px;
}
@media (max-width: 960px) {
  .insIntroBox .introBox {
    width: 100%;
    padding-left: 0px;
  }
}
.insIntroBox .articleTitle {
  width: 100%;
  margin-bottom: 15px;
  padding: 0 0 15px 0;
}