.fc-5 {
    color: #ffffff !important;
}
/* .e-motion {
    position: relative;
     opacity: 0; 
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: transform, opacity;
    transition-property: transform, opacity, -webkit-transform;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    will-change: transform;
    transform: translateZ(0) perspective(1000px);
    -webkit-transform: translateZ(0) perspective(1000px);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}
.e-bottom {
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
}

.e-active {
    opacity: 1;
}
.e-delay2 {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.e-delay4 {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.e-delay6 {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
.e-left.e-active, .e-right.e-active, .e-top.e-active, .e-bottom.e-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
 */

.mt-60 {margin-top:60px;}

#contents {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 60px 18px 100px;
	transition: padding 0.2s;
}

.brandstory-wells .e-motion {
  position: relative;
  opacity: 0;
  will-change: transform;
  -webkit-transform: translateZ(0) perspective(1000px);
          transform: translateZ(0) perspective(1000px);
}

.e-left {
  -webkit-transform: translate3d(-50px, 0, 0);
  transform: translate3d(-50px, 0, 0);
}

.e-right {
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
}

.e-top {
  -webkit-transform: translate3d(0, -50px, 0);
  transform: translate3d(0, -50px, 0);
}

.e-bottom {
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
}

.e-spin {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.brandstory-wells {
  margin: 0 -18px;
}

.brandstory-wells .visual-movie {
  position: relative;
}

.brandstory-wells .visual-movie .video-area {
  position: relative;
  padding: 0 0 100%;
}

.brandstory-wells .visual-movie .video-area .video-visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  height: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.brandstory-wells .visual-movie .tit-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.brandstory-wells .visual-movie .tit-wrap .txt {
  font-size: 19px;
  font-weight: 38;
  text-align: center;
  color: #ffffff;
  margin: 20px 0 0;
  font-family: "CentraleSans";
  line-height: 1;
}

.brandstory-wells .visual-sub {
  padding: 75px 0 80px;
  background: #ffffff;
}

.brandstory-wells .visual-sub .txt-wrap {
  position: relative;
}

.brandstory-wells .visual-sub .txt-wrap .tit {
  font-size: 25px;
  font-weight: 500;
  text-align: center;
  color: #101010;
  font-family: "KoreanDREAM";
}

.brandstory-wells .visual-sub .txt-wrap .bar {
  display: block;
  content: '';
  position: absolute;
  top: 61px;
  left: 50%;
  width: 40px;
  height: 2px;
  margin: 0 0 0 -20px;
  background: #969696;
}

.brandstory-wells .visual-sub .txt-wrap .summ {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  color: #101010;
  margin: 52.5px 0 0;
}

.brandstory-wells .visual-sub .txt-wrap .desc {
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  color: #888888;
  margin: 17.5px 0 0;
}

.brandstory-wells .hgroup1 .tit {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  color: #101010;
}

.brandstory-wells .hgroup1 .tit.ff-c {
  line-height: 1;
}

.brandstory-wells .hgroup1 .tit .ff-c {
  display: inline-block;
  line-height: 1;
}

.brandstory-wells .hgroup1 .logo {
  width: 208.5px;
  margin: 32px auto 0;
}

.brandstory-wells .hgroup1 .desc {
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  color: #606060;
  margin: 16px 0 0;
}

.brandstory-wells .section {
  position: relative;
}

.brandstory-wells .section.identity {
  padding: 80px 0 118.5px;
  background: #f8f8f8;
}

.brandstory-wells .section.solution {
  padding: 60px 0 80px;
}

.brandstory-wells .section .bg-wave {
  position: absolute;
  right: 0;
  bottom: -30px;
  left: 0;
  width: 100%;
  height: 74px;
  background: url(../images/bg-wave.svg) right 0 bottom/auto 74px no-repeat;
  opacity: 1;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.brandstory-wells .section .bg-wave1 {
  position: absolute;
  right: 0;
  top: -30px;
  left: 0;
  width: 100%;
  height: 74px;
  background: url(../images/bg-wave.svg) right -200px bottom/auto 74px no-repeat;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  opacity: 1;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.brandstory-wells .section .bg-wave2 {
  position: absolute;
  right: 0;
  bottom: -30px;
  left: 0;
  width: 100%;
  height: 74px;
  background: url(../images/bg-wave.svg) right -200px bottom/auto 74px no-repeat;
  opacity: 1;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.brandstory-wells .section .bg-wave.e-active {
  background-position: right -200px bottom;
}

.brandstory-wells .section .bg-wave1.e-active,
.brandstory-wells .section .bg-wave2.e-active {
  background-position: right 0 bottom;
}

.brandstory-wells .section .btn-wrap {
  margin: 27px 0 0;
}

.brandstory-wells .section .btn-wrap .btn-rnd-80 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 135px;
  height: 40px;
  border: 1px solid #969696;
  border-radius: 20px;
  padding: 0 40px;
  background: none;
  line-height: 36px;
  text-align: center;
  vertical-align: top;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 125px;
  min-width: auto;
  padding: 0;
  font-size: 14px;
  color: #969696;
}

.brandstory-wells .section-visual {
  position: relative;
}

.brandstory-wells .section-visual::after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #101010;
  opacity: .3;
}

.brandstory-wells .section-visual img {
  width: 100%;
}

.brandstory-wells .section-visual .hgroup2 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.brandstory-wells .section-visual .hgroup2 .tit {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  font-family: "CentraleSans";
  line-height: 1;
}

.brandstory-wells .section-visual .hgroup2 .desc {
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  font-family: "KoreanDREAM";
  margin: 12.5px 0 0;
}

.brandstory-wells .section-txt {
  padding: 60px 0 60px;
  background: #ffffff;
}

.brandstory-wells .section-txt .txt {
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  color: #606060;
  display: block;
}

.brandstory-wells .solution-swiper {
  margin: 47px 0 0;
  padding: 0 0 42px;
}

.brandstory-wells .solution-swiper .swiper-slide {
  width: 221px;
}

.brandstory-wells .solution-swiper .swiper-slide .img {
  position: relative;
  overflow: hidden;
  width: 221px;
  height: 221px;
  margin: 0 auto;
  border-radius: 50%;
}

.brandstory-wells .solution-swiper .swiper-slide .img img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  -webkit-transition: all .8s;
  transition: all .8s;
}

.brandstory-wells .solution-swiper .swiper-slide .img img.on {
  opacity: 0;
}

.brandstory-wells .solution-swiper .swiper-slide .txt-area {
  margin: 29px 0 0;
  opacity: 0;
  -webkit-transition: all .8s;
  transition: all .8s;
}

.brandstory-wells .solution-swiper .swiper-slide .txt-area .tit {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  color: #101010;
  font-family: "CentraleSans";
}

.brandstory-wells .solution-swiper .swiper-slide .txt-area .desc {
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  color: #606060;
  margin: 11px 0 0;
}

.brandstory-wells .solution-swiper .swiper-slide .txt-area .btn-wrap {
  margin: 27px 0 0;
}

.brandstory-wells .solution-swiper .swiper-slide .txt-area .btn-wrap .btn-rnd-80 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 135px;
  height: 40px;
  border: 1px solid #969696;
  border-radius: 20px;
  padding: 0 40px;
  background: #ffffff;
  line-height: 36px;
  text-align: center;
  vertical-align: top;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  font-size: 14px;
  color: #969696;
}

.brandstory-wells .solution-swiper .swiper-slide.swiper-slide-active .img img.off {
  opacity: 0;
}

.brandstory-wells .solution-swiper .swiper-slide.swiper-slide-active .img img.on {
  opacity: 1;
}

.brandstory-wells .solution-swiper .swiper-slide.swiper-slide-active .txt-area {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  visibility: visible;
}

.brandstory-wells .solution-swiper .swiper-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  right: 47.5px;
  bottom: 0;
  left: 47.5px;
  width: auto;
}

.brandstory-wells .solution-swiper .swiper-pagination .swiper-pagination-bullet {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 2px;
  margin: 0;
  border-radius: 0;
  background: #dddddd;
  opacity: 1;
}

.brandstory-wells .solution-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #101010;
}

.brandstory-wells .design-story {
  padding: 0 0 354px;
  background: #0c0e16 url(../images/bg-design.jpg) left 0 bottom 37px/contain no-repeat;
}

.brandstory-wells .design-story img {
  width: 100%;
}

.brandstory-wells .design-story .story-head {
  padding: 15.5px 0 77px;
}

.brandstory-wells .design-story .detail-list {
  margin: 0 18px;
}

.brandstory-wells .design-story .detail-list li {
  margin: 57px 0 0;
}

.brandstory-wells .design-story .detail-list li:first-child {
  margin: 0;
}

.brandstory-wells .design-story .detail-list li .img img {
  width: 100%;
}

.brandstory-wells .design-story .detail-list li .txt-area {
  margin: 24px 0 0;
}

.brandstory-wells .design-story .detail-list li .txt-area .tit {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
}

.brandstory-wells .design-story .detail-list li .txt-area .desc {
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  margin: 10px 0 0;
}

.brandstory-wells .design-story .bg-wave2 {
  bottom: -2px;
}

.brandstory-wells .design-style {
  padding: 12px 0 80px;
}

.brandstory-wells .design-style .awards-swiper {
  margin: 53px 0 0;
  padding: 0 18px 42px;
}

.brandstory-wells .design-style .awards-swiper .swiper-slide {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 221px;
  height: 195px;
  margin: 0 15px 0 0;
  border: 1px solid #ffffff;
  border-radius: 5px;
  padding: 16px 0 0;
  -webkit-transition: all .8s;
  transition: all .8s;
}

.brandstory-wells .design-style .awards-swiper .swiper-slide .img {
  position: relative;
  overflow: hidden;
  width: 170px;
  height: 105px;
  margin: 0 auto;
}

.brandstory-wells .design-style .awards-swiper .swiper-slide .img img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  -webkit-transition: all .8s;
  transition: all .8s;
}

.brandstory-wells .design-style .awards-swiper .swiper-slide .img img.on {
  opacity: 0;
}

.brandstory-wells .design-style .awards-swiper .swiper-slide .txt {
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: #101010;
  margin: 30px 0 0;
  -webkit-transition: all .8s;
  transition: all .8s;
}

.brandstory-wells .design-style .awards-swiper .swiper-slide.swiper-slide-active {
  border-color: #004e73;
}

.brandstory-wells .design-style .awards-swiper .swiper-slide.swiper-slide-active .img img.off {
  opacity: 0;
}

.brandstory-wells .design-style .awards-swiper .swiper-slide.swiper-slide-active .img img.on {
  opacity: 1;
}

.brandstory-wells .design-style .awards-swiper .swiper-slide.swiper-slide-active .txt {
  color: #004e73;
}

.brandstory-wells .design-style .awards-swiper .swiper-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  right: 47.5px;
  bottom: 0;
  left: 47.5px;
  width: auto;
}

.brandstory-wells .design-style .awards-swiper .swiper-pagination .swiper-pagination-bullet {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 2px;
  margin: 0;
  border-radius: 0;
  background: #dddddd;
  opacity: 1;
}

.brandstory-wells .design-style .awards-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #101010;
}

.brandstory-wells .qt-list {
  position: relative;
  margin: 6px 0 0;
  padding: 0 0 103px;
  background: #f8f8f8;
}

.brandstory-wells .qt-list .bg-wave1 {
  top: 0;
  padding: 30px 0 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, white)), url(../images/bg-wave.svg) right 0 bottom 30px/auto 74px no-repeat;
  background: linear-gradient(rgba(255, 255, 255, 0) 50%, white 50%), url(../images/bg-wave.svg) right 0 bottom 30px/auto 74px no-repeat;
}

.brandstory-wells .qt-list ul {
  padding: 0 18px;
}

.brandstory-wells .qt-list ul li {
  position: relative;
  z-index: 1;
  margin: 50px 0 0;
}

.brandstory-wells .qt-list ul li:first-child {
  margin: 0;
}

.brandstory-wells .qt-list ul li .img img {
  width: 100%;
}

.brandstory-wells .qt-list ul li .txt-area {
  margin: 24px 0 0;
}

.brandstory-wells .qt-list ul li .txt-area .tit {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  color: #101010;
}

.brandstory-wells .qt-list ul li .txt-area .desc {
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  color: #606060;
  margin: 10.5px 0 0;
}

.brandstory-wells .qt-verified {
  padding: 43.5px 0 80px;
}

.brandstory-wells .qt-verified .verified-swiper {
  margin: 47px 0 0;
  padding: 0 18px 42px;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-slide {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 221px;
  height: 242.5px;
  margin: 0 15px 0 0;
  border: 1px solid #ffffff;
  border-radius: 5px;
  padding: 16px 25px 23px 25px;
  -webkit-transition: all .8s;
  transition: all .8s;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-slide .img {
  position: relative;
  overflow: hidden;
  width: 170px;
  height: 105px;
  margin: 0 auto;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-slide .img img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  -webkit-transition: all .8s;
  transition: all .8s;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-slide .img img.on {
  opacity: 0;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-slide .txt-area {
  margin: 9px 0 0;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-slide .txt-area .sort {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #606060;
  -webkit-transition: all .8s;
  transition: all .8s;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-slide .txt-area .tit {
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: #606060;
  min-height: 42px;
  margin: 5px 0 0;
  -webkit-transition: all .8s;
  transition: all .8s;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-slide .txt-area .ins {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #888888;
  margin: 3px 0 0;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-slide.swiper-slide-active {
  border-color: #004e73;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-slide.swiper-slide-active .img img.off {
  opacity: 0;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-slide.swiper-slide-active .img img.on {
  opacity: 1;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-slide.swiper-slide-active .txt-area .sort {
  color: #101010;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-slide.swiper-slide-active .txt-area .tit {
  color: #004e73;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  right: 47.5px;
  bottom: 0;
  left: 47.5px;
  width: auto;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-pagination .swiper-pagination-bullet {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 2px;
  margin: 0;
  border-radius: 0;
  background: #dddddd;
  opacity: 1;
}

.brandstory-wells .qt-verified .verified-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #101010;
}

.brandstory-wells .service-care {
  position: relative;
  padding: 90px 0 103px;
  background: #f8f8f8;
}

.brandstory-wells .service-care .service-list {
  margin: 60px 0 0;
  padding: 0 18px;
}

.brandstory-wells .service-care .service-list li {
  overflow: hidden;
  margin: 30px 0 0;
  border-radius: 10px;
}

.brandstory-wells .service-care .service-list li:first-child {
  margin: 0;
}

.brandstory-wells .service-care .service-list li .img img {
  width: 100%;
}

.brandstory-wells .service-care .service-list li .txt-area {
  padding: 20px 15px 30.5px 15px;
  background: #ffffff;
}

.brandstory-wells .service-care .service-list li .txt-area .tit {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  color: #101010;
}

.brandstory-wells .service-care .service-list li .txt-area .desc {
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  color: #606060;
  margin: 8.5px 0 0;
}

.brandstory-wells .service-care .service-list.map li .txt-area .tit:before{content:'●';font-size:17px;padding-right:5px}
.brandstory-wells .service-care .service-list.map li .txt-area .mark1:before{color:#62c3ca}
.brandstory-wells .service-care .service-list.map li .txt-area .mark2:before{color:#004e73}
.brandstory-wells .service-care .service-list.map li .txt-area .mark3:before{color:#ffd200}
.brandstory-wells .service-care .service-list.map li .txt-area .mark4:before{color:#27d765}

.brandstory-wells .service-map {
  padding: 50px 0 0;
  text-align:center;
}

.brandstory-wells .service-map img {
  width:85%;
  margin:0 auto
}

.brandstory-wells .location {
  padding: 60px 18px 0px 18px;
}

.brandstory-wells .location .location-list {
  margin: 21.5px 0 0;
  border-top: 1px solid #101010;
}

.brandstory-wells .location .location-list dl {
  border-bottom: 1px solid #dddddd;
  padding: 19px 15px;
}

.brandstory-wells .location .location-list dl dt {
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  color: #101010;
}

.brandstory-wells .location .location-list dl dd {
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  color: #606060;
  margin: 1px 0 0;
}