@charset "utf-8";

.m-popup {
  position:absolute;
  z-index:11111;
  background:white;
  display:none;
  cursor:move;
}
.m-popup img {
  width: auto;
  max-width: 700px;
  min-width:250px;
}
.m-popup .btn-group {
  margin-top:0;
  display: block;
  background:#333333;
}
.m-popup .btn-group .btn-container{
  padding:11.5px 15px;
  display:table;
  width:100%;
  box-sizing:border-box;
}
.m-popup .btn-group .btn-container label{
    display:inline-block;
    color:white;
    font-size:14px;
    line-height:15px;
    float:left;
}
.m-popup .btn-group .btn-container label input[type=checkbox]{
    display:none;
}
.m-popup .btn-group .btn-container label input[type=checkbox] + span{
    width:11px;
    height:11px;
    display:inline-block;
    position:relative;
    margin-right:5px;
    cursor:pointer;
    vertical-align:middle;
    background:url('/images/client/img/layer-pop-chk-box.png') center no-repeat;
}
.m-popup .btn-group .btn-container label input[type=checkbox]:checked + span:after{
    content:'';
    width:11px;
    height:12px;
    position:absolute;
    left:0;
    top:0;
    display:inline-block;
    background:url('/images/client/img/top-banner-chk-active.png') center no-repeat;
}

.m-popup .btn-close-pop {
  width:12px;
  height:12px;
  text-indent:-99999px;
  background:url('/images/client/img/layer-pop-close.png') center no-repeat;
  cursor:pointer;
  display:inline-block;
  float:right;
  vertical-align:top;
}
.swiper-container{width:100%;height:100%;margin-left:auto;margin-right:auto}
.swiper-slide{text-align:center;font-size:1em;}

section{box-sizing:border-box}

#verticalNav{position:fixed;top:50%;right:2vw;z-index:100;margin-top:-74px}
#verticalNav ul li{line-height:1.5}
#verticalNav ul li a{position:relative;padding-right:30px;display:block;color:#999;font-size:14px;text-align:right}
#verticalNav ul li a span{display:inline-block;position:relative;right:-50%;opacity:0;transition:all .2s;-webkit-transition:all .2s;-ms-transition:all .2s}
#verticalNav ul li a:hover{color:#050051}
#verticalNav ul li a:hover span{right:0;opacity:1;transition:all .2s;-webkit-transition:all .2s;-ms-transition:all .2s}
#verticalNav ul li a.on span{right:0;opacity:1!important}
#verticalNav ul li a:before,
#verticalNav ul li a:after{content:"";position:absolute;top:50%;display:block;border-radius:50%;box-sizing:border-box}
#verticalNav ul li a:before{right:0;width:17px;height:17px;margin-top:-8.5px;border:1px solid #999}
#verticalNav ul li a:after{width:5px;height:5px;right:6px;margin-top:-2.5px;background:#999;}
#verticalNav ul li a:hover:before{border-color:#050051}
#verticalNav ul li a:hover:after{background:#050051}

.color-white #verticalNav ul li a:after{background:#fff}
.color-white #verticalNav ul li a{color:#fff}
.color-white #verticalNav ul li a:hover:before{border-color:#fff}

#section1{display:table;position:relative;width:100%;min-height:100vh;text-align:center}
#section2:after{position:absolute;bottom:0;content:"";display:block;width:100%;height:14em;background:#f7f7f9;z-index:-1}
#section2{padding-bottom:6em}

#section2,#section3{position:relative;}
#section4{position:relative;padding-bottom:4em}
#section4 .bg-section{position:absolute;top:207px;z-index:1;content:"";display:block;width:100%;height:1220px;background:#f4f4f4}
#section4.on .bg-section{height:1540px}

#bgVideo{position:absolute;right:0;bottom:0;z-index:5;min-width:100%;min-height:100%}
.visual-contents{position:relative;z-index:10;display:table-cell;vertical-align:middle;padding:0 2em;box-sizing:border-box}
.visual-contents .visual-mainTxt{color:#fff;font-size:3.750em;font-weight:900;line-height: 1.3}

@-webkit-keyframes ani-mouse{0%{opacity:1;top:29%}15%{opacity:1;top:50%}50%{opacity:0;top:50%}100%{opacity:0;top:29%}}
@-moz-keyframes ani-mouse{0%{opacity:1;top:29%}15%{opacity:1;top:50%}50%{opacity:0;top:50%}100%{opacity:0;top:29%}}
@keyframes ani-mouse{0%{opacity:1;top:29%}15%{opacity:1;top:50%}50%{opacity:0;top:50%}100%{opacity:0;top:29%}}

.btn-scroll{display:block;position:absolute;left:0;right:0;bottom:3vw;z-index:10;text-align:center}
.btn-scroll > * {display:inline-block;line-height:18px;font-size:13px;font-weight:normal;color:#7f8c8d;color:#fff;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;letter-spacing:2px}
.btn-scroll > *:hover,
.btn-scroll > *:focus,
.btn-scroll > *.active{color:#fff}
.btn-scroll p{margin-left:-55px}

.btn-scroll .mouse{position:relative;display:block;width:35px;height:55px;margin:0 auto 20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:3px solid white;border-radius:23px}
.btn-scroll .mouse > * {position:absolute;display:block;top:29%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;background:white;border-radius:50%;-webkit-animation:ani-mouse 2.5s linear infinite;-moz-animation:ani-mouse 2.5s linear infinite;animation:ani-mouse 2.5s linear infinite}

h2.tle{display:block;padding:3em 0 1em;color:#333;font-size:1.250em;font-weight:600;text-align:center}
.h2-sub{padding:0 1em;font-size:3.125em;font-weight:800;color:#333;line-height:1.1;box-sizing:border-box;word-break:keep-all;text-align:center}
.h2-sub span{display:block}

.aboutUs{position:relative;height:auto;margin:0 auto}
.aboutUs-arrow{position:absolute;top:0;top:50%;transform:translateY(-50%);display:block;width:11px;height:15px;background-image:url('/images/client/icon/ico-arrowSm.png');background-repeat:no-repeat;background-position-y:2px}
.aboutUs-arrow.prev{left:0;background-position-x:3px}
.aboutUs-arrow.next{right:0;background-position-x:-16px}
.aboutUs-pagination{left:50%;bottom:0;max-width:8.438em;padding:0 1em;transform:translateX(-650px);box-sizing:border-box}
.aboutUs-pagination > span{font-size:0.875em;font-weight:600}
.aboutUs-pagination .loading{position:relative;display:inline-block;width:5em;height:2px;background:#e1e2df;vertical-align:.4em}
.aboutUs-pagination .loading .bar{position:absolute;width:0;left:0;height:2px;background:#050051}
.aboutUs-pagination .loading.full .bar{width:100%;transition:width 5s;-webkit-transition:width 5s;-webkit-transition-timing-function:linear;transition-timing-function:linear}
.aboutUs-pagination .swiper-pagination-current{float:left;color:#050051}
.aboutUs-pagination .swiper-pagination-total{float:right;color:#000}

#section2 .tab-sliderWrap{margin:2em 0 3em}
#section2 h2.tle{padding-top:3.6em}

#section3{box-sizing:border-box}
#section3{overflow:hidden;position:relative;background:#050051}
#section3 .swiper-container{padding-bottom:2em}
#section3 .txt-decoTit{position:absolute;top:0;right:0;z-index:1;font-size:16vw;font-weight:600;color:rgba(255,255,255,.04);-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
#section3 .project .swiper-wrapper{transition-duration:.6s!important;padding:5vh 0}
#section3 .project .swiper-wrapper .swiper-slide{position:relative;-z-index:5}
#section3 .project .swiper-wrapper .swiper-slide-active{opacity:1;transition:opacity 1s;-webkit-transition:opacity 1s}
#section3 .project .swiper-wrapper .swiper-slide .work-img{text-align:center;transition:all 1s;-webkit-transition:all 1s;}
#section3 .project .swiper-wrapper .swiper-slide-active .work-img{text-align:right;transition:all 1s;-webkit-transition:all 1s;}
#section3 .project .swiper-wrapper .swiper-slide-prev,
#section3 .project .swiper-wrapper .swiper-slide-next{opacity:.3;transition:opacity 1s;-webkit-transition:opacity 1s}
#section3 .work-con{display:table;/*max-width:1300px;*/width:100%;/*height:80vh*/;margin:0 auto}
#section3 .work-con .work-img{position:relative}
#section3 .work-con .work-img img{position:relative;max-width:650px;width:100%}
#section3 .work-con .work-img,
#section3 .work-con .work-subs{display:table-cell;width:47%;vertical-align:middle}
#section3 .work-con .work-subs{width:53%}
#section3 .work-con .work-subs *{color:#fff}
#section3 .work-con .work-subs{padding:0 .5vw 0 4vw;text-align:left;box-sizing:border-box}
#section3 .work-con .work-subs .work-label{display:block;margin-bottom:2vw;/*font-size:1.63vw*/font-size:1.9em}
#section3 .work-con .work-subs strong{display:block;min-height:2em;/*font-size:2.625vw;*/font-size:2.8em;font-weight:600;margin-bottom:1vw;line-height:1.2;word-break:keep-all;}
#section3 .work-con .work-subs strong > span{display:block}
#section3 .work-con .work-subs p{position:relative;overflow:hidden;height:7.2em;padding-right:12%;word-break:keep-all;font-size:0.938em;line-height:1.8}
#section3 .work-con .work-subs p:after{content:'';position:absolute;right:12%;width:1.2em;height:5.8em;margin-top:0.2em;background-color:#050051}
#section3 .work-con .work-subs p:before{content:"...";position:absolute;right:12%;bottom:-.1em;font-size:1.2em}
#section3 .work-con .work-subs .bottom-info-wrap{overflow:hidden;word-break:keep-all;}
#section3 .work-con .work-subs .pjt-info{margin-top:3vh}
#section3 .work-con .work-subs .pjt-info:first-child{margin-top:2vw}
#section3 .work-con .work-subs .pjt-info > div{font-size:1em;line-height:1}
#section3 .work-con .work-subs .pjt-info .pjt-infoData{margin-top:1vw;color:rgba(255,255,255,.9)}
#section3 .project-pagination-h > span{color:rgba(255,255,255,.5)}
#section3 .btn-radius{display:inline-block;margin-top:2em;padding:0 3em;border:1px solid #fff;border-radius:50px;font-size:0.938em;color:#fff;line-height:3.5em;transition:all .2s;-webkit-transition:all .2s;-ms-transition:all .2s}
#section3 .btn-radius:hover,
#section3 .btn-radius:focus{border-color:#6ee9ff;color:#6ee9ff;transition:all .2s;-webkit-transition:all .2s;-ms-transition:all .2s}
#section3 .project-pagination-h{bottom:5.5em;left:inherit;right:38vh;text-align:right;}
#section3 .project-pagination-h .swiper-pagination-current{position:relative;top:-23px;left:-6px;font-size:1.563em;font-weight:600;color:#fff}
#section3 .project-pagination-h .slash{display:inline-block;width:1px;height:38px;margin:0 6px -1px 0px;background:#fff;transform:rotate(45deg);}
#section3 .btn-morePjt{position:absolute;top:3em;right:20vh;z-index:10;display:inline-block;color:#fff;font-size:1.250em;font-weight:500;transition:all .2s;-webkit-transition:all .2s;-ms-transition:all .2s}
#section3 .btn-morePjt:hover,
#section3 .btn-morePjt:focus{border-color:#6ee9ff;color:#6ee9ff;transition:all .2s;-webkit-transition:all .2s;-ms-transition:all .2s}
#section3 .btn-morePjt:hover .ico-plus,
#section3 .btn-morePjt:focus .ico-plus{background-position:-113px 3px}
#section3 .txt-info{position:absolute;bottom:7em;right:30vh;display:inline-block;color:#fff;font-size:15px}
#section3 .txt-info.swiper-button-next{top:inherit!important;width:auto!important;height:auto!important;margin-top:0!important;background-image:none!important;}
#section3 .swiper-container-horizontal>.swiper-scrollbar{bottom:3em}
#section3 .swiper-scrollbar{background:rgba(255,255,255,.1)}
#section3 .swiper-scrollbar .swiper-scrollbar-drag{background:#fff}
#section3 .swiper-container-horizontal>.swiper-scrollbar{left:50%;width:94%;margin-left:-47%;}

.btn-morePjt .ico-plus{margin-left:5px}
.txt-info .ico-arrowR{display:inline-block;width:18px;height:12px;margin-left:5px;background:url('/images/client/icon/ico-common.png') no-repeat -26px -1px}

.ico-plus{display:inline-block;width:15px;height:15px;background:url('/images/client/icon/ico-common.png') no-repeat 2px 3px;vertical-align:middle}


.slide {
  z-index: -1;
  padding: 0;
  width: 100%;
  -webkit-transition: z-index 1s ease;
  transition: z-index 1s ease;
}
.swiper-slide-active .slide {
  z-index: 19;
  -webkit-transition: z-index 1s ease;
  transition: z-index 1s ease;
}

.slide__content {
  position: relative;
  margin: 0 auto 3vw;
  height: 95%;
  width:100%;
  max-width:1300px;
  top: 2.5%;
}

.slide__header {
  z-index: 9;
  position: absolute;
  left:0;
  top:0;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  overflow-y: hidden;

}

.slide__title {
  font-size: 1em;
  font-weight: 700;
  color: #111;
  overflow-y: hidden;
}

.slide__title .title-line {
  display: block;
  overflow-y: hidden;
  text-align:left;
}
.slide__title .title-line{
  display:block;
  -webkit-transform: translate3d(0, 140%, 0);
          transform: translate3d(0, 140%, 0);
  opacity: 0;
  -webkit-transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
  transition: transform 0.4s ease, opacity 0.8s ease;
  transition: transform 0.4s ease, opacity 0.8s ease, -webkit-transform 0.4s ease;
}

.slide__title .title-line:nth-child(1) {
	color:#050051;font-size:2.5em;line-height:1.6;
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.slide__title .title-line:nth-child(2) {
	display:block;
	max-width:15em;color:#333;font-size:15px;font-weight:500;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.slide__title .title-line:nth-child(3){
font-size:15px;font-weight:400;color:#888;
}

.slide__title .title-line:nth-child(2),
.slide__title .title-line:nth-child(3){word-break:keep-all;margin-top:2em;line-height:1.7}

.slide__title .title-line:nth-child(3) > span{display:block}

.is-active .slide__title .title-line{
  -webkit-transform: translate3d(0, 0%, 0);
          transform: translate3d(0, 0%, 0);
  opacity: 1;
  -webkit-transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.is-active .slide__title .title-line:nth-child(2){
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.is-active .slide__title .title-line:nth-child(3){
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.slide__figure {
  z-index: 7;
  height: 100%;
  width: 100%;
  text-align:right;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
#section2 .slide__figure .slide__img{max-width:1078px;width:100%}

.is-sliding .slide__figure {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.slide__img {
  position: relative;
  display: inline-block;

  -webkit-backface-visibility: hidden;
  height: 0%;
  width: 100%;
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
  -webkit-transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 0.4s 0.1s ease;
  transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 0.4s 0.1s ease;
  transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease;
  transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease, -webkit-filter 0.4s 0.1s ease;
}
.is-active .slide .slide__img {
  opacity: 1;
  -webkit-transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-filter 0.4s 0.1s ease;
  transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-filter 0.4s 0.1s ease;
  transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease;
  transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease, -webkit-filter 0.4s 0.1s ease;
}
.is-sliding .slide__img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}


@media screen and (min-width:0\0) {
    #section3 .work-con .work-subs strong{letter-spacing:-3px}
}