@charset "UTF-8";
/* 메인에서 공틍으로 사용 */
.companyArea {
  position: relative;
  padding-left: 50%;
  margin-top: -240px; }
  .companyArea .nav {
    position: fixed;
    left: 5%;
    top: 240px; }
    .companyArea .nav li {
      position: relative;
      margin-bottom: 30px;
      padding-left: 150px;
      -webkit-transition: margin 0.5s cubic-bezier(1, 0, 0, 0.7);
      -moz-transition: margin 0.5s cubic-bezier(1, 0, 0, 0.7);
      -o-transition: margin 0.5s cubic-bezier(1, 0, 0, 0.7);
      transition: margin 0.5s cubic-bezier(1, 0, 0, 0.7); }
      .companyArea .nav li a {
        font-size: 16px;
        font-weight: 700;
        line-height: 1em;
        color: #050505;
        opacity: .5;
        -webkit-transition: opacity 0.3s cubic-bezier(1, 0, 0, 0.7);
        -moz-transition: opacity 0.3s cubic-bezier(1, 0, 0, 0.7);
        -o-transition: opacity 0.3s cubic-bezier(1, 0, 0, 0.7);
        transition: opacity 0.3s cubic-bezier(1, 0, 0, 0.7); }
        .companyArea .nav li a:hover {
          opacity: 1; }
      .companyArea .nav li:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 0;
        height: 2px;
        margin-top: -1px;
        background: #000;
        -webkit-transition: width 0.3s cubic-bezier(1, 0, 0, 0.7);
        -moz-transition: width 0.3s cubic-bezier(1, 0, 0, 0.7);
        -o-transition: width 0.3s cubic-bezier(1, 0, 0, 0.7);
        transition: width 0.3s cubic-bezier(1, 0, 0, 0.7); }
      .companyArea .nav li:hover:before {
        width: 125px; }
      .companyArea .nav li.on {
        margin-bottom: 300px; }
        .companyArea .nav li.on a {
          opacity: 1; }
        .companyArea .nav li.on:before {
          width: 125px; }
      .companyArea .nav li.on:last-child {
        margin-bottom: 0; }
  .companyArea .thumb.emblem {
    opacity: 0;
    position: absolute;
    left: -40%;
    bottom: 20px;
    width: 212px;
    height: 350px;
    /*  @include mix-transform(translateX(-50px)); @include mix-transition(all, .3s, cubic-bezier(0.165, 0.84, 0.44, 1)); */ }
    .companyArea .thumb.emblem .box1 span, .companyArea .thumb.emblem .box2 span {
      position: absolute;
      background: #000;
      -webkit-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      -moz-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      -o-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      transition: all 0.3s cubic-bezier(0, 0, 1, 1); }
    .companyArea .thumb.emblem .box1 span:nth-child(1) {
      left: 0;
      bottom: 0;
      width: 3px;
      height: 0; }
    .companyArea .thumb.emblem .box1 span:nth-child(2) {
      left: 0;
      top: 0;
      width: 0;
      height: 3px; }
    .companyArea .thumb.emblem .box1 span:nth-child(3) {
      right: 0;
      top: 0;
      width: 3px;
      height: 0; }
    .companyArea .thumb.emblem .box2 span:nth-child(1) {
      left: 72px;
      bottom: 0;
      width: 3px;
      height: 0; }
    .companyArea .thumb.emblem .box2 span:nth-child(2) {
      left: 72px;
      top: 303px;
      width: 0;
      height: 3px; }
    .companyArea .thumb.emblem .box2 span:nth-child(3) {
      right: 71px;
      top: 303px;
      width: 3px;
      height: 0; }
    .companyArea .thumb.emblem .box3, .companyArea .thumb.emblem .box4 {
      position: absolute;
      top: 21px;
      width: 0;
      height: 0;
      -webkit-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      -moz-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      -o-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      transition: all 0.3s cubic-bezier(0, 0, 1, 1); }
    .companyArea .thumb.emblem .box3 {
      right: 38px;
      background: #000; }
    .companyArea .thumb.emblem .box4 {
      right: 20px;
      background: #fd1322;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-transform-origin: 50%;
      -moz-transform-origin: 50%;
      -o-transform-origin: 50%;
      transform-origin: 50%; }
    .companyArea .thumb.emblem .box1 span, .companyArea .thumb.emblem .box2 span, .companyArea .thumb.emblem .box3, .companyArea .thumb.emblem .box4 {
      -webkit-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      -moz-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      -o-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      transition: all 0.3s cubic-bezier(0, 0, 1, 1); }
    .companyArea .thumb.emblem.fix {
      position: fixed;
      left: 30%; }
  .companyArea .thumb.logo {
    position: fixed;
    left: 35%;
    bottom: 100px; }
    .companyArea .thumb.logo .logo1, .companyArea .thumb.logo .logo2 {
      opacity: 0;
      position: absolute;
      left: 0;
      bottom: 0;
      -webkit-transform: translateX(-50px);
      -moz-transform: translateX(-50px);
      -o-transform: translateX(-50px);
      transform: translateX(-50px);
      -webkit-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
      -moz-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
      -o-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
      transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995); }
  .companyArea .content {
    position: relative;
    padding: 0 120px; }
    .companyArea .content .head {
      /* opacity:0; position:fixed; left:30%; top:240px; @include mix-transform(translateY(-100px)); @include mix-transition(all, .3s, cubic-bezier(0.475, 0.425, 0, 0.995)); */
      position: absolute;
      left: -40%;
      top: 240px; }
      .companyArea .content .head h2 {
        font-size: 56px;
        line-height: 41px;
        font-weight: 700; }
      .companyArea .content .head .srmy {
        margin-top: 25px;
        font: 18px/28px 'NanumSquare'; }
      .companyArea .content .head .btnArea {
        margin-top: 90px;
        opacity: 0;
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -o-transform: translateY(50px);
        transform: translateY(50px);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
        .companyArea .content .head .btnArea .btn {
          position: relative;
          display: inline-block;
          width: 190px;
          height: 52px;
          padding: 0 20px;
          border: 1px solid #000;
          text-align: left;
          color: #fff;
          font-size: 14px;
          font-weight: 700;
          line-height: 50px;
          background: #000;
          -webkit-transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out; }
        .companyArea .content .head .btnArea .btn:before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          overflow: hidden;
          width: 0;
          height: 100%;
          background: #fff;
          -webkit-transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out; }
        .companyArea .content .head .btnArea .btn:after {
          content: "";
          position: absolute;
          right: 20px;
          top: 50%;
          width: 8px;
          height: 8px;
          border: 2px solid #fff;
          border-left: 0;
          border-bottom: 0;
          -webkit-transform: translateY(-50%) rotate(45deg);
          -moz-transform: translateY(-50%) rotate(45deg);
          -o-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
          -webkit-transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out; }
        .companyArea .content .head .btnArea .btn:hover {
          color: #000;
          z-index: 5; }
        .companyArea .content .head .btnArea .btn:hover:before {
          width: 100%;
          opacity: 1;
          z-index: -1; }
        .companyArea .content .head .btnArea .btn:hover:after {
          border-color: #000; }
      .companyArea .content .head.fix {
        position: fixed;
        left: 30%; }
    .companyArea .content .companyCont {
      padding-top: 40px;
      padding-bottom: 20px; }
      .companyArea .content .companyCont h3 {
        opacity: 0;
        position: relative;
        display: inline-block;
        margin-bottom: 70px;
        font-size: 18px;
        font-weight: 700;
        line-height: 1em;
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -o-transform: translateY(50px);
        transform: translateY(50px);
        -webkit-transition: opacity 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
        -moz-transition: opacity 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
        -o-transition: opacity 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
        transition: opacity 0.3s cubic-bezier(0.475, 0.425, 0, 0.995); }
        .companyArea .content .companyCont h3 .blend, .companyArea .content .companyCont h3 .blend2 {
          position: absolute;
          right: 100%;
          top: 189px;
          z-index: -1;
          background: #fff;
          border-radius: 50%; }
        .companyArea .content .companyCont h3 .blend2 {
          z-index: 100; }
        .companyArea .content .companyCont h3.show {
          opacity: 1;
          -webkit-transform: translateY(0);
          -moz-transform: translateY(0);
          -o-transform: translateY(0);
          transform: translateY(0); }
      .companyArea .content .companyCont .vision {
        margin-top: 200px; }
        .companyArea .content .companyCont .vision .slogan {
          margin-right: -120px; }
          .companyArea .content .companyCont .vision .slogan p {
            overflow: hidden;
            margin-top: -20px;
            font: 100px 'crimson';
            color: #000;
            -webkit-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            -moz-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            -o-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995); }
          .companyArea .content .companyCont .vision .slogan span {
            position: relative;
            overflow: hidden;
            display: inline-block;
            line-height: 1.2em;
            vertical-align: top;
            opacity: 0;
            white-space: nowrap;
            -webkit-transform: translateY(50px);
            -moz-transform: translateY(50px);
            -o-transform: translateY(50px);
            transform: translateY(50px);
            -webkit-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            -moz-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            -o-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995); }
          .companyArea .content .companyCont .vision .slogan span:before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 22px;
            z-index: -1;
            width: 0;
            height: 8px;
            background: #fd1322;
            -webkit-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            -moz-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            -o-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            -webkit-transition-delay: 0.3s;
            -moz-transition-delay: 0.3s;
            -o-transition-delay: 0.3s;
            transition-delay: 0.3s; }
          .companyArea .content .companyCont .vision .slogan.show span {
            opacity: 1;
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0); }
          .companyArea .content .companyCont .vision .slogan.show span:before {
            width: 100%; }
        .companyArea .content .companyCont .vision .cont {
          margin-top: 120px;
          opacity: 0;
          -webkit-transform: translateY(50px);
          -moz-transform: translateY(50px);
          -o-transform: translateY(50px);
          transform: translateY(50px);
          -webkit-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
          -moz-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
          -o-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
          transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
          -webkit-transition-delay: 0.6s;
          -moz-transition-delay: 0.6s;
          -o-transition-delay: 0.6s;
          transition-delay: 0.6s; }
          .companyArea .content .companyCont .vision .cont strong {
            display: block;
            font-size: 22px;
            color: #000; }
          .companyArea .content .companyCont .vision .cont .langKo {
            margin-top: 20px;
            color: #444;
            font-size: 16px;
            line-height: 28px; }
          .companyArea .content .companyCont .vision .cont.show {
            opacity: 1;
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0); }
      .companyArea .content .companyCont .mission {
        margin-top: 200px; }
        .companyArea .content .companyCont .mission .cont {
          position: relative; }
          .companyArea .content .companyCont .mission .cont li {
            position: relative;
            z-index: 1;
            padding-left: 180px;
            margin: 110px 0 0; }
            .companyArea .content .companyCont .mission .cont li strong {
              position: absolute;
              left: 0;
              top: 50%;
              font: 40px 'crimson';
              font-weight: 600;
              line-height: 28px;
              color: #000;
              opacity: 0;
              -webkit-transform: translateY(-50%);
              -moz-transform: translateY(-50%);
              -o-transform: translateY(-50%);
              transform: translateY(-50%);
              -webkit-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
              -moz-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
              -o-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
              transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995); }
            .companyArea .content .companyCont .mission .cont li strong:before {
              content: "";
              position: absolute;
              left: 0;
              bottom: 4px;
              z-index: -1;
              width: 0;
              height: 4px;
              background: #fd1322;
              -webkit-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
              -moz-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
              -o-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
              transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995); }
            .companyArea .content .companyCont .mission .cont li .langKo {
              color: #444;
              font-size: 16px;
              line-height: 28px;
              word-break: keep-all;
              opacity: 0;
              -webkit-transform: translateY(50px);
              -moz-transform: translateY(50px);
              -o-transform: translateY(50px);
              transform: translateY(50px);
              -webkit-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
              -moz-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
              -o-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
              transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995); }
            .companyArea .content .companyCont .mission .cont li:nth-child(1) .langKo {
              -webkit-transition-delay: 0.2s;
              -moz-transition-delay: 0.2s;
              -o-transition-delay: 0.2s;
              transition-delay: 0.2s; }
            .companyArea .content .companyCont .mission .cont li:nth-child(2) .langKo {
              -webkit-transition-delay: 0.4s;
              -moz-transition-delay: 0.4s;
              -o-transition-delay: 0.4s;
              transition-delay: 0.4s; }
            .companyArea .content .companyCont .mission .cont li:nth-child(3) .langKo {
              -webkit-transition-delay: 0.6s;
              -moz-transition-delay: 0.6s;
              -o-transition-delay: 0.6s;
              transition-delay: 0.6s; }
            .companyArea .content .companyCont .mission .cont li:nth-child(4) .langKo {
              -webkit-transition-delay: 0.8s;
              -moz-transition-delay: 0.8s;
              -o-transition-delay: 0.8s;
              transition-delay: 0.8s; }
            .companyArea .content .companyCont .mission .cont li:nth-child(5) .langKo {
              -webkit-transition-delay: 1s;
              -moz-transition-delay: 1s;
              -o-transition-delay: 1s;
              transition-delay: 1s; }
            .companyArea .content .companyCont .mission .cont li:nth-child(6) .langKo {
              -webkit-transition-delay: 1.2s;
              -moz-transition-delay: 1.2s;
              -o-transition-delay: 1.2s;
              transition-delay: 1.2s; }
            .companyArea .content .companyCont .mission .cont li:nth-child(7) .langKo {
              -webkit-transition-delay: 1.4s;
              -moz-transition-delay: 1.4s;
              -o-transition-delay: 1.4s;
              transition-delay: 1.4s; }
            .companyArea .content .companyCont .mission .cont li:nth-child(8) .langKo {
              -webkit-transition-delay: 1.6s;
              -moz-transition-delay: 1.6s;
              -o-transition-delay: 1.6s;
              transition-delay: 1.6s; }
            .companyArea .content .companyCont .mission .cont li:nth-child(9) .langKo {
              -webkit-transition-delay: 1.8s;
              -moz-transition-delay: 1.8s;
              -o-transition-delay: 1.8s;
              transition-delay: 1.8s; }
            .companyArea .content .companyCont .mission .cont li:nth-child(10) .langKo {
              -webkit-transition-delay: 2s;
              -moz-transition-delay: 2s;
              -o-transition-delay: 2s;
              transition-delay: 2s; }
            .companyArea .content .companyCont .mission .cont li:first-child {
              margin-top: 0; }
          .companyArea .content .companyCont .mission .cont:before {
            content: "OUR MISSION";
            position: absolute;
            left: 0;
            top: 50%;
            overflow: hidden;
            opacity: 0;
            margin-top: 50px;
            color: #f4f4f4;
            font-size: 110px;
            line-height: 1em;
            font-weight: 700;
            white-space: nowrap;
            -webkit-transform: translate(-45px, -50%);
            -moz-transform: translate(-45px, -50%);
            -o-transform: translate(-45px, -50%);
            transform: translate(-45px, -50%);
            -webkit-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            -moz-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            -o-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995); }
          .companyArea .content .companyCont .mission .cont.show li strong {
            opacity: 1; }
          .companyArea .content .companyCont .mission .cont.show li strong:before {
            width: 100%; }
          .companyArea .content .companyCont .mission .cont.show li .langKo {
            opacity: 1;
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0); }
          .companyArea .content .companyCont .mission .cont.show:before {
            opacity: 1;
            margin-top: 0; }
      .companyArea .content .companyCont .concept {
        margin-top: 200px; }
        .companyArea .content .companyCont .concept .biArea {
          height: 100px; }
          .companyArea .content .companyCont .concept .biArea img, .companyArea .content .companyCont .concept .biArea span {
            display: inline-block;
            vertical-align: middle; }
          .companyArea .content .companyCont .concept .biArea span {
            opacity: 0;
            -webkit-transform: translateX(-50px);
            -moz-transform: translateX(-50px);
            -o-transform: translateX(-50px);
            transform: translateX(-50px);
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out; }
            .companyArea .content .companyCont .concept .biArea span:nth-child(1) {
              -webkit-transition-delay: 0.1s;
              -moz-transition-delay: 0.1s;
              -o-transition-delay: 0.1s;
              transition-delay: 0.1s; }
            .companyArea .content .companyCont .concept .biArea span:nth-child(2) {
              -webkit-transition-delay: 0.2s;
              -moz-transition-delay: 0.2s;
              -o-transition-delay: 0.2s;
              transition-delay: 0.2s; }
            .companyArea .content .companyCont .concept .biArea span:nth-child(3) {
              -webkit-transition-delay: 0.3s;
              -moz-transition-delay: 0.3s;
              -o-transition-delay: 0.3s;
              transition-delay: 0.3s; }
            .companyArea .content .companyCont .concept .biArea span:nth-child(4) {
              -webkit-transition-delay: 0.4s;
              -moz-transition-delay: 0.4s;
              -o-transition-delay: 0.4s;
              transition-delay: 0.4s; }
            .companyArea .content .companyCont .concept .biArea span:nth-child(5) {
              -webkit-transition-delay: 0.5s;
              -moz-transition-delay: 0.5s;
              -o-transition-delay: 0.5s;
              transition-delay: 0.5s; }
            .companyArea .content .companyCont .concept .biArea span:nth-child(6) {
              -webkit-transition-delay: 0.6s;
              -moz-transition-delay: 0.6s;
              -o-transition-delay: 0.6s;
              transition-delay: 0.6s; }
            .companyArea .content .companyCont .concept .biArea span:nth-child(7) {
              -webkit-transition-delay: 0.7s;
              -moz-transition-delay: 0.7s;
              -o-transition-delay: 0.7s;
              transition-delay: 0.7s; }
            .companyArea .content .companyCont .concept .biArea span:nth-child(8) {
              -webkit-transition-delay: 0.8s;
              -moz-transition-delay: 0.8s;
              -o-transition-delay: 0.8s;
              transition-delay: 0.8s; }
            .companyArea .content .companyCont .concept .biArea span:nth-child(9) {
              -webkit-transition-delay: 0.9s;
              -moz-transition-delay: 0.9s;
              -o-transition-delay: 0.9s;
              transition-delay: 0.9s; }
            .companyArea .content .companyCont .concept .biArea span:nth-child(10) {
              -webkit-transition-delay: 1s;
              -moz-transition-delay: 1s;
              -o-transition-delay: 1s;
              transition-delay: 1s; }
          .companyArea .content .companyCont .concept .biArea .txt1, .companyArea .content .companyCont .concept .biArea .txt2 {
            width: 100px;
            height: 100px;
            text-align: center;
            font: 16px "Poppins";
            line-height: 20px;
            font-weight: 500; }
          .companyArea .content .companyCont .concept .biArea .txt1:before, .companyArea .content .companyCont .concept .biArea .txt2:before {
            content: "";
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto 20px; }
          .companyArea .content .companyCont .concept .biArea .txt1 {
            color: #000; }
          .companyArea .content .companyCont .concept .biArea .txt1:before {
            background: #000; }
          .companyArea .content .companyCont .concept .biArea .txt2 {
            color: #fd1322; }
          .companyArea .content .companyCont .concept .biArea .txt2:before {
            width: 80px;
            height: 80px;
            margin: 10px auto 30px;
            background: #fd1322;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg); }
          .companyArea .content .companyCont .concept .biArea .sign1, .companyArea .content .companyCont .concept .biArea .sign2 {
            position: relative;
            width: 100px;
            height: 60px;
            text-indent: -3000em; }
          .companyArea .content .companyCont .concept .biArea .sign1:before, .companyArea .content .companyCont .concept .biArea .sign1:after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            display: block;
            background: #d9d9d9;
            font-size: 0;
            line-height: 0;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
          .companyArea .content .companyCont .concept .biArea .sign1:before {
            width: 20px;
            height: 3px; }
          .companyArea .content .companyCont .concept .biArea .sign1:after {
            width: 3px;
            height: 20px; }
          .companyArea .content .companyCont .concept .biArea .sign2:before, .companyArea .content .companyCont .concept .biArea .sign2:after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            display: block;
            width: 20px;
            height: 3px;
            background: #d9d9d9;
            font-size: 0;
            line-height: 0; }
          .companyArea .content .companyCont .concept .biArea .sign2:before {
            -webkit-transform: translate(-50%, -150%);
            -moz-transform: translate(-50%, -150%);
            -o-transform: translate(-50%, -150%);
            transform: translate(-50%, -150%); }
          .companyArea .content .companyCont .concept .biArea .sign2:after {
            -webkit-transform: translate(-50%, 50%);
            -moz-transform: translate(-50%, 50%);
            -o-transform: translate(-50%, 50%);
            transform: translate(-50%, 50%); }
          .companyArea .content .companyCont .concept .biArea.show span {
            opacity: 1;
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0); }
        .companyArea .content .companyCont .concept .cont {
          margin-top: 120px;
          opacity: 0;
          -webkit-transform: translateY(50px);
          -moz-transform: translateY(50px);
          -o-transform: translateY(50px);
          transform: translateY(50px);
          -webkit-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
          -moz-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
          -o-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
          transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995); }
          .companyArea .content .companyCont .concept .cont strong {
            display: inline-block;
            font-size: 22px;
            color: #000; }
          .companyArea .content .companyCont .concept .cont p.langKo {
            margin-top: 20px;
            color: #444;
            font-size: 16px;
            line-height: 28px; }
          .companyArea .content .companyCont .concept .cont.show {
            opacity: 1;
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0); }
      .companyArea .content .companyCont .business {
        margin-top: 200px; }
        .companyArea .content .companyCont .business .cont {
          padding: 50px 120px;
          margin: -50px -120px 0;
          background: #f4f4f4; }
          .companyArea .content .companyCont .business .cont strong {
            display: inline-block;
            font-size: 22px;
            line-height: 1.5em;
            color: #000;
            opacity: 0;
            -webkit-transform: translateY(50px);
            -moz-transform: translateY(50px);
            -o-transform: translateY(50px);
            transform: translateY(50px);
            -webkit-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            -moz-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            -o-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
            transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995); }
          .companyArea .content .companyCont .business .cont ul {
            margin-top: 20px; }
            .companyArea .content .companyCont .business .cont ul li {
              color: #444;
              font-size: 16px;
              line-height: 28px;
              opacity: 0;
              -webkit-transform: translateY(100%);
              -moz-transform: translateY(100%);
              -o-transform: translateY(100%);
              transform: translateY(100%);
              -webkit-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
              -moz-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
              -o-transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
              transition: all 0.3s cubic-bezier(0.475, 0.425, 0, 0.995); }
              .companyArea .content .companyCont .business .cont ul li:before {
                content: "";
                display: inline-block;
                width: 4px;
                height: 4px;
                margin-right: 8px;
                vertical-align: middle;
                background: #fd1322; }
          .companyArea .content .companyCont .business .cont.show strong, .companyArea .content .companyCont .business .cont.show ul li {
            opacity: 1;
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0); }
    .companyArea .content .awardsList .list {
      padding-top: 180px;
      padding-bottom: 100px; }
      .companyArea .content .awardsList .list > li {
        display: inline-block;
        width: 50%;
        padding-right: 10px;
        margin-top: 80px;
        margin-right: -4px;
        vertical-align: top;
        opacity: 0;
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -o-transform: translateY(50px);
        transform: translateY(50px);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
        .companyArea .content .awardsList .list > li h3 span {
          position: relative;
          display: inline-block;
          font: 700 40px/25px 'crimson';
          vertical-align: top; }
          .companyArea .content .awardsList .list > li h3 span:before {
            content: "";
            position: absolute;
            left: -2px;
            bottom: 3px;
            right: -2px;
            z-index: -1;
            height: 4px;
            background: #fd1322; }
        .companyArea .content .awardsList .list > li h4 {
          margin: 40px 0 15px;
          font-size: 14px;
          line-height: 1em;
          font-weight: 700; }
        .companyArea .content .awardsList .list > li li {
          font-size: 14px;
          line-height: 24px;
          word-break: keep-all; }
        .companyArea .content .awardsList .list > li:nth-child(2n+1) {
          padding-right: 30px; }
        .companyArea .content .awardsList .list > li.cb {
          width: 100%; }
        .companyArea .content .awardsList .list > li.show {
          opacity: 1;
          -webkit-transform: translateY(0);
          -moz-transform: translateY(0);
          -o-transform: translateY(0);
          transform: translateY(0); }
    .companyArea .content .clientList {
      padding-top: 210px;
      padding-bottom: 220px;
      opacity: 0;
      -webkit-transform: translateY(50px);
      -moz-transform: translateY(50px);
      -o-transform: translateY(50px);
      transform: translateY(50px);
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
      .companyArea .content .clientList ul {
        overflow: hidden; }
        .companyArea .content .clientList ul li {
          float: left;
          width: calc(25% - 15px);
          padding: 0 10px;
          height: 110px;
          margin-left: 20px;
          text-align: center;
          line-height: 110px;
          background: #f5f5f5; }
          .companyArea .content .clientList ul li img {
            max-width: 100%;
            vertical-align: middle; }
          .companyArea .content .clientList ul li:nth-child(4n+1) {
            margin-left: 0; }
          .companyArea .content .clientList ul li:nth-child(4) ~ li {
            margin-top: 20px; }
      .companyArea .content .clientList.show {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }
    .companyArea .content.show .head {
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); }
    .companyArea .content.show .emblem, .companyArea .content.show .logo .logo1, .companyArea .content.show .logo.step2 .logo2 {
      opacity: 1;
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0); }
    .companyArea .content.show .logo.step2 .logo1 {
      opacity: 0;
      -webkit-transform: translateX(-50px);
      -moz-transform: translateX(-50px);
      -o-transform: translateX(-50px);
      transform: translateX(-50px); }
    .companyArea .content.show .recruitList .txt {
      opacity: 1;
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0); }
    .companyArea .content .recruitList {
      position: relative;
      padding-top: 130px; }
      .companyArea .content .recruitList .txt {
        position: fixed;
        right: 80px;
        top: 140px;
        z-index: -1;
        font-size: 32px;
        font-weight: 700;
        line-height: 100px;
        letter-spacing: 40px;
        color: #f4f4f4;
        opacity: 0;
        -webkit-transform: translateX(50px);
        -moz-transform: translateX(50px);
        -o-transform: translateX(50px);
        transform: translateX(50px);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
      .companyArea .content .recruitList h3 {
        margin-top: 120px;
        opacity: 0;
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -o-transform: translateY(50px);
        transform: translateY(50px);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
        .companyArea .content .recruitList h3 span {
          position: relative;
          display: inline-block;
          font-weight: 700;
          font-size: 32px;
          line-height: 24px;
          vertical-align: top; }
          .companyArea .content .recruitList h3 span:before {
            content: "";
            position: absolute;
            left: -2px;
            bottom: -1px;
            right: -2px;
            z-index: -1;
            height: 3px;
            background: #fd1322; }
      .companyArea .content .recruitList ul {
        overflow: hidden;
        margin-top: 40px;
        opacity: 0;
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -o-transform: translateY(50px);
        transform: translateY(50px);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
        .companyArea .content .recruitList ul li {
          float: left;
          padding-left: 13px;
          font-size: 14px;
          line-height: 24px; }
          .companyArea .content .recruitList ul li:nth-child(1) {
            width: 25%; }
          .companyArea .content .recruitList ul li:nth-child(2) {
            width: 40%; }
          .companyArea .content .recruitList ul li:nth-child(3) {
            width: 35%; }
          .companyArea .content .recruitList ul li .tit {
            position: relative;
            margin-bottom: 20px;
            font-weight: 700;
            font-size: 1em;
            line-height: 24px; }
            .companyArea .content .recruitList ul li .tit:before {
              content: "";
              position: absolute;
              left: -13px;
              top: 50%;
              width: 4px;
              height: 4px;
              margin-top: -2px;
              background: #222; }
      .companyArea .content .recruitList .show {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }
  .companyArea .emblem.step0 .box1 span:nth-child(1) {
    height: 350px; }
  .companyArea .emblem.step0 .box1 span:nth-child(2) {
    width: 212px;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s; }
  .companyArea .emblem.step0 .box1 span:nth-child(3) {
    height: 350px;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s; }
  .companyArea .emblem.step1 .box2 span:nth-child(1) {
    height: 46px; }
  .companyArea .emblem.step1 .box2 span:nth-child(2) {
    width: 69px;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s; }
  .companyArea .emblem.step1 .box2 span:nth-child(3) {
    height: 46px;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s; }
  .companyArea .emblem.step2 .box3 {
    width: 10px;
    height: 10px; }
  .companyArea .emblem.step2 .box4 {
    width: 10px;
    height: 10px;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s; }
  .companyArea .emblem.step3 .box1 span, .companyArea .emblem.step3 .box2 span, .companyArea .emblem.step3 .box3, .companyArea .emblem.step3 .box4 {
    box-shadow: -3px 5px 8px #8f8f8f; }
  .companyArea .emblem.step3 .box4 {
    box-shadow: 0 6px 8px #8f8f8f; }

.companyVideo {
  margin: 200px 0 -100px; }
  .companyVideo video {
    width: 100%;
    height: 100%;
    object-fit: cover; }

/* project */
#subNav {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto 170px; }
  #subNav > ul > li {
    position: relative;
    float: left;
    margin-right: 30px; }
    #subNav > ul > li p {
      position: relative;
      padding-right: 60px;
      font: 48px 'crimson';
      line-height: 40px; }
      #subNav > ul > li p a {
        color: #000;
        opacity: .5;
        -webkit-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
        -moz-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
        -o-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
        transition: all 0.3s cubic-bezier(0, 0, 1, 1); }
        #subNav > ul > li p a:hover {
          opacity: 1; }
      #subNav > ul > li p:before {
        content: "";
        position: absolute;
        left: -10px;
        top: -10px;
        width: 0;
        height: 0;
        background: #fd1322; }
      #subNav > ul > li p:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        z-index: -1;
        width: 0;
        height: 4px;
        background: #fd1322; }
    #subNav > ul > li ul {
      display: none;
      position: absolute;
      left: 0;
      top: 70px;
      right: -100%; }
      #subNav > ul > li ul li {
        float: left;
        margin-right: 13px; }
        #subNav > ul > li ul li + li:before {
          content: "/";
          margin-right: 9px;
          font-size: 11px;
          vertical-align: middle; }
        #subNav > ul > li ul li a {
          opacity: .9; }
        #subNav > ul > li ul li.on a {
          color: #fd1322; }
    #subNav > ul > li.on ul {
      display: block; }
    #subNav > ul > li.on p {
      font-size: 62px; }
      #subNav > ul > li.on p a {
        opacity: 1; }
      #subNav > ul > li.on p:before {
        -webkit-animation: subNavOnEffect 0.3s linear 0s 1 normal both;
        -moz-animation: subNavOnEffect 0.3s linear 0s 1 normal both;
        -o-animation: subNavOnEffect 0.3s linear 0s 1 normal both;
        animation: subNavOnEffect 0.3s linear 0s 1 normal both;
        -webkit-animation-delay: 0.6s;
        -moz-animation-delay: 0.6s;
        -o-animation-delay: 0.6s;
        animation-delay: 0.6s; }
      #subNav > ul > li.on p:after {
        -webkit-animation: widthFull 0.3s linear 0s 1 normal both;
        -moz-animation: widthFull 0.3s linear 0s 1 normal both;
        -o-animation: widthFull 0.3s linear 0s 1 normal both;
        animation: widthFull 0.3s linear 0s 1 normal both;
        -webkit-animation-delay: 0.3s;
        -moz-animation-delay: 0.3s;
        -o-animation-delay: 0.3s;
        animation-delay: 0.3s; }
    #subNav > ul > li:nth-child(2) {
      margin-right: 0; }
    #subNav > ul > li.history {
      float: right;
      padding-top: 20px;
      margin-right: 0;
      font: 700 24px/1em 'crimson'; }
      #subNav > ul > li.history a {
        position: relative;
        display: block;
        padding: 0 30px 2px 0;
        margin: 0 -30px -2px 0;
        color: #000; }
        #subNav > ul > li.history a:before {
          opacity: 0;
          content: "";
          position: absolute;
          left: 50%;
          bottom: 0;
          width: 0;
          height: 0;
          background: #000;
          -webkit-transition: left 0.1s cubic-bezier(0, 0, 1, 1);
          -moz-transition: left 0.1s cubic-bezier(0, 0, 1, 1);
          -o-transition: left 0.1s cubic-bezier(0, 0, 1, 1);
          transition: left 0.1s cubic-bezier(0, 0, 1, 1); }
        #subNav > ul > li.history a:after {
          opacity: 0;
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 50%;
          height: 1px;
          background: #000;
          -webkit-transition: all 0.1s cubic-bezier(0, 0, 1, 1);
          -moz-transition: all 0.1s cubic-bezier(0, 0, 1, 1);
          -o-transition: all 0.1s cubic-bezier(0, 0, 1, 1);
          transition: all 0.1s cubic-bezier(0, 0, 1, 1); }
        #subNav > ul > li.history a:hover:before {
          opacity: 1;
          left: 100%;
          width: 5px;
          height: 5px; }
        #subNav > ul > li.history a:hover:after {
          opacity: 1;
          width: 100%; }
  #subNav > ul:after {
    content: "";
    display: block;
    clear: both; }

.projectTit {
  position: fixed;
  right: -13%;
  top: 34.2%;
  z-index: 1;
  font-size: 260px;
  font-weight: 700;
  line-height: 210px;
  white-space: nowrap;
  -webkit-text-stroke: 2px #fff;
  -webkit-transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
  .projectTit > span {
    overflow: hidden;
    display: inline-block; }
    .projectTit > span > span {
      display: inline-block;
      -webkit-transform: translateX(230px);
      -moz-transform: translateX(230px);
      -o-transform: translateX(230px);
      transform: translateX(230px);
      -webkit-transition: all 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);
      -webkit-transition-delay: 0.3s;
      -moz-transition-delay: 0.3s;
      -o-transition-delay: 0.3s;
      transition-delay: 0.3s; }
  .projectTit.show > span > span {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
  .projectTit.cover {
    display: none;
    z-index: 10;
    color: transparent;
    -webkit-text-stroke: 2px #fff;
    opacity: .5; }
  .projectTit.typeB {
    right: -35%;
    opacity: 1;
    -webkit-transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
  .projectTit.typeC {
    left: -20%;
    top: -webkit-calc(100% - 220px);
    top: -moz-calc(100% - 220px);
    top: calc(100% - 220px);
    right: initial;
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
  .projectTit.typeC > span > span {
    -webkit-transform: translateX(-230px);
    -moz-transform: translateX(-230px);
    -o-transform: translateX(-230px);
    transform: translateX(-230px);
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s; }
  .projectTit.typeC.show > span > span {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }

.projectList ul {
  position: relative;
  max-width: 1200px;
  min-height: 500px;
  margin: 0 auto; }
  .projectList ul li {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    float: left;
    width: 25%;
    -webkit-transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
    .projectList ul li a {
      display: block; }
      .projectList ul li a:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background: #000;
        opacity: 0; }
    .projectList ul li img {
      width: 100%;
      -webkit-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      -moz-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      -o-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      transition: all 0.3s cubic-bezier(0, 0, 1, 1); }
    .projectList ul li .detail {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 2;
      width: 100%;
      text-align: center;
      opacity: 0;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      -webkit-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      -moz-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      -o-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      transition: all 0.3s cubic-bezier(0, 0, 1, 1); }
      .projectList ul li .detail .tit {
        color: #fff;
        font: 13px 'NanumSquare';
        font-weight: 300;
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -o-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
        -moz-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
        -o-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
        transition: all 0.3s cubic-bezier(0, 0, 1, 1); }
        .projectList ul li .detail .tit strong {
          display: inline-block;
          margin-top: 10px;
          border-bottom: 3px solid #fd1322;
          font-size: 20px;
          line-height: 1em;
          whtie-space: nowrap; }
      .projectList ul li .detail .link {
        margin-top: 50px;
        font-size: 11px;
        color: #fff;
        opacity: .7;
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -o-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
        -moz-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
        -o-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
        transition: all 0.3s cubic-bezier(0, 0, 1, 1); }
    .projectList ul li:hover {
      z-index: 1;
      box-shadow: 8px 5px 3px rgba(0, 0, 0, 0.3);
      -webkit-transform: scale(1.06);
      -moz-transform: scale(1.06);
      -o-transform: scale(1.06);
      transform: scale(1.06); }
      .projectList ul li:hover a:after {
        opacity: .65; }
      .projectList ul li:hover .detail {
        opacity: 1; }
        .projectList ul li:hover .detail .tit, .projectList ul li:hover .detail .link {
          -webkit-transform: translateY(0);
          -moz-transform: translateY(0);
          -o-transform: translateY(0);
          transform: translateY(0); }
  .projectList ul:after {
    content: "";
    display: block;
    clear: both; }

.maintenanceList {
  max-width: 1200px;
  margin: 0 auto; }
  .maintenanceList ul {
    position: relative;
    min-height: 500px;
    margin-right: -20px; }
    .maintenanceList ul li {
      position: absolute;
      left: 0;
      top: 0;
      float: left;
      width: 25%;
      padding-right: 20px; }
      .maintenanceList ul li a {
        position: relative;
        overflow: hidden;
        display: block;
        padding-top: 70.17%;
        margin-bottom: 20px; }
        .maintenanceList ul li a img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%; }
        .maintenanceList ul li a span.on {
          opacity: 0;
          position: absolute;
          left: 50%;
          right: 50%;
          top: 50%;
          bottom: 50%;
          width: 0;
          height: 0;
          -webkit-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
          -moz-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
          -o-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .maintenanceList ul li a:hover span.on, .maintenanceList ul li a:focus span.on {
          opacity: 1;
          left: 0;
          right: 0;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%; }
    .maintenanceList ul:after {
      content: "";
      display: block;
      clear: both; }

.productVisual {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%; }

.projectDetail {
  overflow-x: hidden;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-attachment: fixed;
  -webkit-transition: all 1s cubic-bezier(0, 0.83, 0.44, 1);
  -moz-transition: all 1s cubic-bezier(0, 0.83, 0.44, 1);
  -o-transition: all 1s cubic-bezier(0, 0.83, 0.44, 1);
  transition: all 1s cubic-bezier(0, 0.83, 0.44, 1); }

.projectDetail #container {
  padding: 0;
  margin-bottom: 0;
  background: none; }

.projectHead {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  height: 978px;
  margin: 0 auto; }
  .projectHead .close {
    opacity: 0;
    position: absolute;
    right: 50px;
    top: 50px;
    z-index: 1;
    -webkit-animation: btnClose 0.3s linear 1s 1 normal both;
    -moz-animation: btnClose 0.3s linear 1s 1 normal both;
    -o-animation: btnClose 0.3s linear 1s 1 normal both;
    animation: btnClose 0.3s linear 1s 1 normal both; }
    .projectHead .close a {
      display: block;
      overflow: hidden;
      width: 38px;
      height: 38px;
      text-indent: 100%;
      white-space: nowrap; }
      .projectHead .close a:before, .projectHead .close a:after {
        content: "";
        position: absolute;
        left: -8px;
        top: 50%;
        width: 54px;
        height: 1px;
        background: #fff;
        -webkit-transform-origin: 50%;
        -moz-transform-origin: 50%;
        -o-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .projectHead .close a:before {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg); }
      .projectHead .close a:after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg); }
      .projectHead .close a:hover:before {
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg); }
      .projectHead .close a:hover:after {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg); }
  .projectHead h2 {
    padding-top: 90px;
    text-align: center;
    font: 48px 'NanumSquare';
    font-weight: 300;
    line-height: 64px;
    color: #fff;
    -webkit-animation: focusShow 0.2s linear 0.8s 1 normal both;
    -moz-animation: focusShow 0.2s linear 0.8s 1 normal both;
    -o-animation: focusShow 0.2s linear 0.8s 1 normal both;
    animation: focusShow 0.2s linear 0.8s 1 normal both; }
  .projectHead .nav {
    margin-top: 25px;
    text-align: center;
    -webkit-animation: focusShow 0.2s linear 1s 1 normal both;
    -moz-animation: focusShow 0.2s linear 1s 1 normal both;
    -o-animation: focusShow 0.2s linear 1s 1 normal both;
    animation: focusShow 0.2s linear 1s 1 normal both; }
    .projectHead .nav li {
      display: inline-block;
      margin: 0 23px;
      font-size: 9px;
      opacity: .6; }
      .projectHead .nav li a {
        position: relative;
        display: inline-block;
        padding: 18px 0 0 4px;
        color: #fff;
        letter-spacing: 4px; }
        .projectHead .nav li a:before {
          content: "";
          position: absolute;
          left: 50%;
          right: 50%;
          top: 0;
          height: 12px;
          border: 2px solid #fff;
          border-bottom: 0;
          -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          -webkit-transition-delay: 1.2s;
          -moz-transition-delay: 1.2s;
          -o-transition-delay: 1.2s;
          transition-delay: 1.2s; }
      .projectHead .nav li.on, .projectHead .nav li:hover {
        opacity: 1; }
    .projectHead .nav:after {
      content: "";
      display: block;
      clear: both; }
    .projectHead .nav.show li.pc a:before {
      left: 10px;
      right: 10px; }
    .projectHead .nav.show li.mobile a:before {
      left: 23px;
      right: 23px; }
    .projectHead .nav.show li.tablet a:before {
      left: 17px;
      right: 17px; }
    .projectHead .nav.show li.tv a:before {
      left: -10px;
      right: -10px; }
  .projectHead .visual {
    position: relative;
    height: 700px;
    /* ul {position:relative; overflow:hidden; width:930px; height:530px;
    	li {position:absolute; left:100%; top:0; z-index:1; cursor:url(/2019/images/project/icon_drag.png),pointer;
    		&.active {left:0; z-index:5;}
    		&.left {left:-100%; z-index:1;}
    		&.right {left:100%; z-index:1;}
    	}
    } */ }
    .projectHead .visual p {
      position: absolute;
      left: 50%;
      bottom: -10px;
      opacity: 0;
      -webkit-transform: translateX(-40%);
      -moz-transform: translateX(-40%);
      -o-transform: translateX(-40%);
      transform: translateX(-40%);
      -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
      -webkit-transition-delay: 0.8s;
      -moz-transition-delay: 0.8s;
      -o-transition-delay: 0.8s;
      transition-delay: 0.8s; }
      .projectHead .visual p.pc {
        width: 943px;
        height: 645px;
        padding: 6px 0 0 6px;
        background: url(/2019/images/project/frame_pc.png) no-repeat 50% 0; }
      .projectHead .visual p.mobile {
        width: 318px;
        height: 551px;
        padding: 47px 0 0 39px;
        background: url(/2019/images/project/frame_mobile.png) no-repeat 50% 0; }
      .projectHead .visual p.tablet {
        width: 886px;
        height: 516px;
        padding: 22px 0 0 52px;
        background: url(/2019/images/project/frame_tablet.png) no-repeat 50% 0; }
      .projectHead .visual p.on {
        opacity: 1;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); }
      .projectHead .visual p.fast {
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s; }
    .projectHead .visual.horizon .mobile {
      width: 586px;
      height: 279px;
      padding: 9px 0 0 77px;
      background-image: url(/2019/images/project/frame_mobile4.png); }
  .projectHead .site {
    position: relative;
    height: 78px;
    margin-top: -78px;
    -webkit-animation: focusShow 0.2s linear 1s 1 normal both;
    -moz-animation: focusShow 0.2s linear 1s 1 normal both;
    -o-animation: focusShow 0.2s linear 1s 1 normal both;
    animation: focusShow 0.2s linear 1s 1 normal both; }
    .projectHead .site .btn {
      position: absolute;
      right: 0;
      bottom: 0; }
      .projectHead .site .btn a {
        position: relative;
        display: block;
        height: 100%;
        padding-right: 80px;
        margin-right: -70px;
        font-size: 10px;
        color: #777;
        -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .projectHead .site .btn a strong {
          display: inline-block;
          padding-top: 30px;
          font-size: 20px;
          line-height: 15px;
          font-weight: 700;
          color: #000;
          opacity: .5;
          -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
          -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
          -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
          .projectHead .site .btn a strong span {
            display: inline-block;
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0);
            -webkit-transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
            -moz-transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
            -o-transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
            transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
            .projectHead .site .btn a strong span:nth-child(1) {
              -webkit-transition-delay: 0.03s;
              -moz-transition-delay: 0.03s;
              -o-transition-delay: 0.03s;
              transition-delay: 0.03s; }
            .projectHead .site .btn a strong span:nth-child(2) {
              -webkit-transition-delay: 0.06s;
              -moz-transition-delay: 0.06s;
              -o-transition-delay: 0.06s;
              transition-delay: 0.06s; }
            .projectHead .site .btn a strong span:nth-child(3) {
              -webkit-transition-delay: 0.09s;
              -moz-transition-delay: 0.09s;
              -o-transition-delay: 0.09s;
              transition-delay: 0.09s; }
            .projectHead .site .btn a strong span:nth-child(4) {
              -webkit-transition-delay: 0.12s;
              -moz-transition-delay: 0.12s;
              -o-transition-delay: 0.12s;
              transition-delay: 0.12s; }
            .projectHead .site .btn a strong span:nth-child(5) {
              -webkit-transition-delay: 0.15s;
              -moz-transition-delay: 0.15s;
              -o-transition-delay: 0.15s;
              transition-delay: 0.15s; }
            .projectHead .site .btn a strong span:nth-child(6) {
              -webkit-transition-delay: 0.18s;
              -moz-transition-delay: 0.18s;
              -o-transition-delay: 0.18s;
              transition-delay: 0.18s; }
            .projectHead .site .btn a strong span:nth-child(7) {
              -webkit-transition-delay: 0.21s;
              -moz-transition-delay: 0.21s;
              -o-transition-delay: 0.21s;
              transition-delay: 0.21s; }
            .projectHead .site .btn a strong span:nth-child(8) {
              -webkit-transition-delay: 0.24s;
              -moz-transition-delay: 0.24s;
              -o-transition-delay: 0.24s;
              transition-delay: 0.24s; }
            .projectHead .site .btn a strong span:nth-child(9) {
              -webkit-transition-delay: 0.27s;
              -moz-transition-delay: 0.27s;
              -o-transition-delay: 0.27s;
              transition-delay: 0.27s; }
            .projectHead .site .btn a strong span:nth-child(10) {
              -webkit-transition-delay: 0.3s;
              -moz-transition-delay: 0.3s;
              -o-transition-delay: 0.3s;
              transition-delay: 0.3s; }
          .projectHead .site .btn a strong:before {
            content: "";
            position: absolute;
            left: 20%;
            bottom: 10px;
            width: 0;
            height: 2px;
            background: #fd1322; }
        .projectHead .site .btn a:before {
          content: "";
          position: absolute;
          right: 0;
          bottom: 10px;
          width: 65px;
          height: 2px;
          background: #fd1322;
          -webkit-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
          -moz-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
          -o-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
          transition: all 0.3s cubic-bezier(0, 0, 1, 1); }
        .projectHead .site .btn a:after {
          content: "";
          position: absolute;
          right: 0;
          bottom: 10px;
          width: 0;
          height: 2px;
          background: #fd1322;
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          -webkit-transform-origin: 100%;
          -moz-transform-origin: 100%;
          -o-transform-origin: 100%;
          transform-origin: 100%;
          -webkit-transition: all 0.2s cubic-bezier(0, 0, 1, 1);
          -moz-transition: all 0.2s cubic-bezier(0, 0, 1, 1);
          -o-transition: all 0.2s cubic-bezier(0, 0, 1, 1);
          transition: all 0.2s cubic-bezier(0, 0, 1, 1); }
        .projectHead .site .btn a:hover strong {
          opacity: 1; }
          .projectHead .site .btn a:hover strong span {
            -webkit-transform: translateY(-20px);
            -moz-transform: translateY(-20px);
            -o-transform: translateY(-20px);
            transform: translateY(-20px); }
          .projectHead .site .btn a:hover strong:before {
            width: 80%;
            -webkit-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
            -moz-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
            -o-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
            transition: all 0.3s cubic-bezier(0, 0, 1, 1); }
        .projectHead .site .btn a:hover:before {
          width: 0; }
        .projectHead .site .btn a:hover:after {
          width: 20px;
          -webkit-transition-delay: 0.3s;
          -moz-transition-delay: 0.3s;
          -o-transition-delay: 0.3s;
          transition-delay: 0.3s; }

#wrapper.juniorplus .projectHead .visual p.mobile, #wrapper.inthesoop .projectHead .visual p.mobile {
  width: 358px;
  padding: 20px 0 0 53px;
  background-image: url(/2019/images/project/frame_mobile_ver2.png); }

h3.typeA {
  margin: 80px auto 35px; }
  h3.typeA > span {
    position: relative;
    display: inline-block;
    overflow: hidden;
    font-size: 24px;
    line-height: 45px;
    letter-spacing: 7px;
    font-weight: 700; }
    h3.typeA > span span {
      display: inline-block;
      opacity: 0;
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
    h3.typeA > span:before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 3px;
      background: #000;
      -webkit-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      -moz-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      -o-transition: all 0.3s cubic-bezier(0, 0, 1, 1);
      transition: all 0.3s cubic-bezier(0, 0, 1, 1); }
    h3.typeA > span.show span {
      opacity: 1; }
    h3.typeA > span.show:before {
      width: 100%;
      right: 7px; }

.feature {
  padding-top: 245px;
  margin-top: -130px;
  background: #fff url(/2019/images/project/bg_pattern.png) repeat-y 50% 0; }
  .feature .wrap {
    max-width: 1200px;
    margin: 0 auto; }
    .feature .wrap h3.typeB {
      float: left;
      width: 34%;
      padding-left: 100px;
      font-size: 36px;
      line-height: 42px;
      font-weight: 700;
      opacity: 0;
      -webkit-transform: translateX(-50px);
      -moz-transform: translateX(-50px);
      -o-transform: translateX(-50px);
      transform: translateX(-50px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .feature .wrap h3.typeB.show {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0); }
    .feature .wrap dl {
      float: left;
      width: 66%;
      margin-bottom: 80px;
      opacity: 0;
      -webkit-transform: translateX(50px);
      -moz-transform: translateX(50px);
      -o-transform: translateX(50px);
      transform: translateX(50px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .feature .wrap dl.show {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0); }
      .feature .wrap dl > div {
        float: left;
        width: 50%;
        padding-left: 25px; }
        .feature .wrap dl > div dt {
          font-size: 14px;
          line-height: 26px;
          font-weight: bold; }
        .feature .wrap dl > div dd {
          padding-right: 120px;
          font-size: 14px;
          line-height: 26px;
          color: #777;
          word-break: keep-all; }
        .feature .wrap dl > div dd + dt {
          margin-top: 30px; }
    .feature .wrap .overview {
      clear: both; }
    .feature .wrap h3.typeA {
      padding-left: 100px; }
    .feature .wrap .txt {
      position: relative;
      padding: 0 50px 0 100px;
      font: 14px 'nanumSquare';
      line-height: 2em;
      word-break: keep-all;
      opacity: 0;
      -webkit-transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .feature .wrap .txt.show {
        opacity: 1; }
      .feature .wrap .txt:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: -30px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #fff 30px, #fff 0);
        -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .feature .wrap .txt.show:after {
        top: 100%; }
    .feature .wrap .concept {
      clear: both;
      position: relative;
      min-height: 460px;
      padding: 0 0 130px 600px;
      margin-top: 80px; }
      .feature .wrap .concept .img {
        position: absolute;
        left: 100px;
        top: 0;
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .feature .wrap .concept .img.show {
          opacity: 1;
          -webkit-transform: translateX(0);
          -moz-transform: translateX(0);
          -o-transform: translateX(0);
          transform: translateX(0); }
      .feature .wrap .concept h3.typeA {
        padding-left: 0;
        margin-top: 0; }
      .feature .wrap .concept .txt {
        padding-left: 0; }
  .feature + .layout {
    padding-top: 130px;
    margin-top: 0; }

#wrapper.france .concept .img {
  left: 53px; }

#wrapper.easytomorrow .concept .img {
  left: 47px; }

#wrapper.hausysusa .concept .img {
  left: 51px;
  top: -38px; }

.mvArea {
  background: #fff url(/2019/images/project/bg_pattern.png) repeat-y 50% 0; }
  .mvArea .video {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    opacity: 0;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
    .mvArea .video video {
      width: 100%;
      height: 100%;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
      background: #fff; }
    .mvArea .video .play, .mvArea .video .pause {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 11;
      opacity: 0;
      background: rgba(0, 0, 0, 0.5);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .mvArea .video .play a, .mvArea .video .pause a {
        display: block;
        width: 100%;
        height: 100%; }
      .mvArea .video .play span, .mvArea .video .pause span {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 100px;
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        line-height: 100px;
        text-align: center;
        -webkit-transform: translate(-50px, -50px);
        -moz-transform: translate(-50px, -50px);
        -o-transform: translate(-50px, -50px);
        transform: translate(-50px, -50px);
        background: rgba(255, 255, 255, 0.3); }
      .mvArea .video .play img, .mvArea .video .pause img {
        vertical-align: middle; }
    .mvArea .video .pause {
      display: none; }
    .mvArea .video.show {
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); }
    .mvArea .video:hover .play, .mvArea .video:hover .pause {
      opacity: 1; }
  .mvArea + .flow {
    padding-top: 330px;
    margin-top: -200px; }

.flow {
  padding: 130px 0;
  background: url(/2019/images/project/bg_pattern2.png) repeat-y 50% 0; }
  .flow .wrap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    background: url(/2019/images/project/bg_pattern4.png) no-repeat 50% -330px; }
    .flow .wrap h3.typeA {
      position: absolute;
      left: 100px;
      top: 290px;
      margin-top: 0;
      color: #fff; }
      .flow .wrap h3.typeA > span:before {
        background: #fff; }
    .flow .wrap > .detail {
      position: relative;
      float: right;
      padding-right: 27px;
      margin-right: -40px;
      opacity: 0;
      -webkit-transform: translateX(50px);
      -moz-transform: translateX(50px);
      -o-transform: translateX(50px);
      transform: translateX(50px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .flow .wrap > .detail h4 {
        position: absolute;
        right: 0;
        top: 20px;
        font-size: 11px;
        color: #fff;
        font-weight: 700;
        letter-spacing: 4px;
        -webkit-transform: translateX(90%) rotate(90deg);
        -moz-transform: translateX(90%) rotate(90deg);
        -o-transform: translateX(90%) rotate(90deg);
        transform: translateX(90%) rotate(90deg);
        -webkit-transform-origin: 0%;
        -moz-transform-origin: 0%;
        -o-transform-origin: 0%;
        transform-origin: 0%; }
      .flow .wrap > .detail p {
        width: 818px;
        height: 483px;
        padding: 6px 18px 28px 16px;
        background: url(/2019/images/project/frame_flow.png) no-repeat 0 0; }
        .flow .wrap > .detail p span {
          display: block;
          overflow-x: hidden;
          overflow-y: auto;
          width: 784px;
          height: 449px; }
          .flow .wrap > .detail p span::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            background: #F5F5F5; }
          .flow .wrap > .detail p span::-webkit-scrollbar {
            width: 10px;
            background-color: #F5F5F5; }
          .flow .wrap > .detail p span::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            background-color: #888; }
      .flow .wrap > .detail:before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 42px;
        width: 11px;
        height: 11px;
        border: 1px solid #fff;
        opacity: .5; }
      .flow .wrap > .detail:after {
        content: "";
        position: absolute;
        right: 5px;
        top: 105px;
        bottom: 95px;
        border-left: 1px solid #fff;
        opacity: .5; }
      .flow .wrap > .detail.show {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0); }
    .flow .wrap .grid {
      clear: right;
      padding-top: 80px; }
      .flow .wrap .grid .caution {
        text-align: right;
        font-size: 14px;
        color: #fff;
        line-height: 1.5em;
        opacity: 0;
        -webkit-transform: translateY(-50px);
        -moz-transform: translateY(-50px);
        -o-transform: translateY(-50px);
        transform: translateY(-50px);
        -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .flow .wrap .grid .caution.show {
          opacity: 1;
          -webkit-transform: translateY(0);
          -moz-transform: translateY(0);
          -o-transform: translateY(0);
          transform: translateY(0); }
        .flow .wrap .grid .caution strong {
          font-size: 40px;
          font-weight: 400; }
      .flow .wrap .grid ul {
        overflow: hidden;
        margin-top: 40px; }
        .flow .wrap .grid ul li {
          float: left;
          width: 50%;
          text-align: right;
          opacity: 0;
          -webkit-transform: translateY(50px);
          -moz-transform: translateY(50px);
          -o-transform: translateY(50px);
          transform: translateY(50px);
          -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
          .flow .wrap .grid ul li:nth-child(1) {
            -webkit-transition-delay: 0.2s;
            -moz-transition-delay: 0.2s;
            -o-transition-delay: 0.2s;
            transition-delay: 0.2s; }
          .flow .wrap .grid ul li:nth-child(2) {
            -webkit-transition-delay: 0.4s;
            -moz-transition-delay: 0.4s;
            -o-transition-delay: 0.4s;
            transition-delay: 0.4s; }
          .flow .wrap .grid ul li.cb {
            width: 100%;
            padding-top: 100px;
            text-align: center; }
            .flow .wrap .grid ul li.cb img {
              margin-bottom: 40px; }
          .flow .wrap .grid ul li.show {
            opacity: 1;
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0); }
    .flow .wrap .mobileType {
      position: relative;
      padding-right: 50px; }
      .flow .wrap .mobileType .detail {
        position: relative;
        width: 400px;
        margin: 100px auto 0;
        opacity: 0;
        -webkit-transform: translateX(-50px);
        -moz-transform: translateX(-50px);
        -o-transform: translateX(-50px);
        transform: translateX(-50px);
        -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .flow .wrap .mobileType .detail h4 {
          position: absolute;
          right: 0;
          top: 20px;
          font-size: 11px;
          color: #fff;
          font-weight: 700;
          letter-spacing: 4px;
          -webkit-transform: translateX(90%) rotate(90deg);
          -moz-transform: translateX(90%) rotate(90deg);
          -o-transform: translateX(90%) rotate(90deg);
          transform: translateX(90%) rotate(90deg);
          -webkit-transform-origin: 0%;
          -moz-transform-origin: 0%;
          -o-transform-origin: 0%;
          transform-origin: 0%; }
        .flow .wrap .mobileType .detail .view {
          width: 370px;
          height: 701px;
          padding: 61px 30px 0;
          margin: 0 auto;
          text-align: left;
          background: url(/2019/images/project/frame_mobile3.png) no-repeat 0 0; }
        .flow .wrap .mobileType .detail:before {
          content: "";
          position: absolute;
          right: 0;
          bottom: 252px;
          width: 11px;
          height: 11px;
          border: 1px solid #fff;
          opacity: .5; }
        .flow .wrap .mobileType .detail:after {
          content: "";
          position: absolute;
          right: 5px;
          top: 105px;
          bottom: 287px;
          border-left: 1px solid #fff;
          opacity: .5; }
        .flow .wrap .mobileType .detail.show {
          opacity: 1;
          -webkit-transform: translateX(0);
          -moz-transform: translateX(0);
          -o-transform: translateX(0);
          transform: translateX(0); }
      .flow .wrap .mobileType .caution {
        position: absolute;
        right: 0;
        top: 180px;
        text-align: right;
        font-size: 14px;
        color: #fff;
        line-height: 1.5em;
        opacity: 0;
        -webkit-transform: translateY(-50px);
        -moz-transform: translateY(-50px);
        -o-transform: translateY(-50px);
        transform: translateY(-50px);
        -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .flow .wrap .mobileType .caution.show {
          opacity: 1;
          -webkit-transform: translateY(0);
          -moz-transform: translateY(0);
          -o-transform: translateY(0);
          transform: translateY(0); }
        .flow .wrap .mobileType .caution strong {
          font-size: 40px;
          line-height: 1em;
          font-weight: 400; }
    .flow .wrap .studio {
      position: relative;
      margin-top: 170px; }
      .flow .wrap .studio h3.typeA {
        top: 115px; }
      .flow .wrap .studio ul {
        text-align: right; }
        .flow .wrap .studio ul li {
          overflow: hidden; }
          .flow .wrap .studio ul li:first-child {
            margin-bottom: 70px; }
          .flow .wrap .studio ul li p {
            float: left;
            width: 33.3%; }
          .flow .wrap .studio ul li p + p {
            padding-left: 25px; }

#wrapper.eyelevel .flow .wrap {
  background-image: url(/2019/images/project/eyelevel/bg_pattern.png); }

.layout {
  padding: 330px 0 130px;
  margin-top: -200px;
  background: url(/2019/images/project/bg_pattern3.png) repeat-y 50% 0; }
  .layout .wrap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto; }
    .layout .wrap .head {
      position: absolute;
      left: 100px;
      top: 290px;
      width: 290px; }
      .layout .wrap .head h3.typeA {
        margin-top: 0;
        color: #fff; }
        .layout .wrap .head h3.typeA > span:before {
          background: #fff; }
        .layout .wrap .head h3.typeA ~ .txt {
          font: 14px 'nanumSquare';
          color: #fff;
          line-height: 2em;
          opacity: 0;
          word-break: keep-all;
          -webkit-transform: translateY(50px);
          -moz-transform: translateY(50px);
          -o-transform: translateY(50px);
          transform: translateY(50px);
          -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
          .layout .wrap .head h3.typeA ~ .txt.show {
            opacity: 1;
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0); }
    .layout .wrap .detail {
      position: relative;
      text-align: center;
      opacity: 0;
      -webkit-transform: translateX(50px);
      -moz-transform: translateX(50px);
      -o-transform: translateX(50px);
      transform: translateX(50px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .layout .wrap .detail .view {
        width: 370px;
        height: 701px;
        padding: 61px 0 0 30px;
        margin: 0 auto;
        text-align: left;
        background: url(/2019/images/project/frame_mobile3.png) no-repeat 0 0; }
      .layout .wrap .detail .nav1, .layout .wrap .detail .nav2, .layout .wrap .detail .nav3 {
        position: absolute;
        left: 50%;
        margin-left: 200px;
        font: 14px 'Montserrat';
        line-height: 1em;
        color: #fff;
        opacity: .6; }
      .layout .wrap .detail .nav1 {
        top: 75px; }
      .layout .wrap .detail .nav2 {
        top: 290px; }
      .layout .wrap .detail .nav3 {
        top: 584px; }
      .layout .wrap .detail.show {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0); }
    .layout .wrap .caution {
      margin-top: -90px;
      text-align: right;
      font-size: 14px;
      color: #fff;
      line-height: 1.5em;
      opacity: 0;
      -webkit-transform: translateY(-50px);
      -moz-transform: translateY(-50px);
      -o-transform: translateY(-50px);
      transform: translateY(-50px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .layout .wrap .caution.show {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }
      .layout .wrap .caution strong {
        font-size: 40px;
        line-height: 1em;
        font-weight: 400; }

#wrapper.hyundai .layout .detail .view span {
  height: 464px; }
#wrapper.aquaplanet .layout .detail .view span {
  height: 430px; }

.template {
  padding-bottom: 130px;
  background: #2d2d2d url(/2019/images/project/bg_pattern2.png) repeat-y 50% 0; }
  .template .wrap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 100px; }
    .template .wrap h3.typeA {
      padding: 200px 0 130px;
      margin: 0;
      color: #fff; }
      .template .wrap h3.typeA > span:before {
        background: #fff; }
    .template .wrap .oh p {
      width: 50%;
      opacity: 0;
      -webkit-transform: translateY(50px);
      -moz-transform: translateY(50px);
      -o-transform: translateY(50px);
      transform: translateY(50px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .template .wrap .oh p:nth-child(1) {
        -webkit-transition-delay: 0.2s;
        -moz-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        transition-delay: 0.2s; }
      .template .wrap .oh p:nth-child(2) {
        -webkit-transition-delay: 0.4s;
        -moz-transition-delay: 0.4s;
        -o-transition-delay: 0.4s;
        transition-delay: 0.4s; }
      .template .wrap .oh p.fr {
        text-align: right; }
      .template .wrap .oh p.show {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }

.discover {
  background: #fff; }
  .discover .wrap {
    position: relative;
    max-width: 1200px;
    min-height: 890px;
    margin: 0 auto; }
    .discover .wrap h3.typeA {
      position: absolute;
      right: 20px;
      top: 120px;
      margin-top: 0; }
    .discover .wrap .deviceArea {
      position: absolute;
      left: -280px;
      top: -50px;
      z-index: 1; }
      .discover .wrap .deviceArea > p {
        position: absolute;
        opacity: 0;
        -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .discover .wrap .deviceArea > p.device1 {
          left: 0;
          top: 0;
          -webkit-transform: translateY(-50px);
          -moz-transform: translateY(-50px);
          -o-transform: translateY(-50px);
          transform: translateY(-50px); }
        .discover .wrap .deviceArea > p.device2 {
          left: 30px;
          top: 558px;
          -webkit-transform: translate(-50px, -50px);
          -moz-transform: translate(-50px, -50px);
          -o-transform: translate(-50px, -50px);
          transform: translate(-50px, -50px); }
        .discover .wrap .deviceArea > p.device3 {
          left: 0;
          top: 685px;
          -webkit-transform: translate(-50px, 50px);
          -moz-transform: translate(-50px, 50px);
          -o-transform: translate(-50px, 50px);
          transform: translate(-50px, 50px); }
        .discover .wrap .deviceArea > p.device4 {
          left: 125px;
          top: 675px;
          -webkit-transform: translate(-100px, 100px);
          -moz-transform: translate(-100px, 100px);
          -o-transform: translate(-100px, 100px);
          transform: translate(-100px, 100px); }
        .discover .wrap .deviceArea > p.show {
          opacity: 1;
          -webkit-transform: translate(0, 0);
          -moz-transform: translate(0, 0);
          -o-transform: translate(0, 0);
          transform: translate(0, 0); }
    .discover .wrap .txtArea {
      position: absolute;
      right: 0;
      bottom: -28px;
      text-align: right;
      font: 200px 'Montserrat';
      font-weight: 100;
      color: #cecece;
      line-height: 190px;
      white-space: nowrap;
      opacity: .5; }
      .discover .wrap .txtArea > span {
        display: inline-block;
        opacity: 0;
        vertical-align: top;
        border-bottom: 0 solid #5f5f5f; }
      .discover .wrap .txtArea.show > span {
        opacity: 1;
        -webkit-animation: textAni 0.15s linear 0s 1 normal both;
        -moz-animation: textAni 0.15s linear 0s 1 normal both;
        -o-animation: textAni 0.15s linear 0s 1 normal both;
        animation: textAni 0.15s linear 0s 1 normal both; }
        .discover .wrap .txtArea.show > span:nth-child(1) {
          -webkit-transition-delay: 0.1s;
          -moz-transition-delay: 0.1s;
          -o-transition-delay: 0.1s;
          transition-delay: 0.1s;
          -webkit-animation-delay: 0.1s;
          -moz-animation-delay: 0.1s;
          -o-animation-delay: 0.1s;
          animation-delay: 0.1s; }
        .discover .wrap .txtArea.show > span:nth-child(2) {
          -webkit-transition-delay: 0.2s;
          -moz-transition-delay: 0.2s;
          -o-transition-delay: 0.2s;
          transition-delay: 0.2s;
          -webkit-animation-delay: 0.2s;
          -moz-animation-delay: 0.2s;
          -o-animation-delay: 0.2s;
          animation-delay: 0.2s; }
        .discover .wrap .txtArea.show > span:nth-child(3) {
          -webkit-transition-delay: 0.3s;
          -moz-transition-delay: 0.3s;
          -o-transition-delay: 0.3s;
          transition-delay: 0.3s;
          -webkit-animation-delay: 0.3s;
          -moz-animation-delay: 0.3s;
          -o-animation-delay: 0.3s;
          animation-delay: 0.3s; }
        .discover .wrap .txtArea.show > span:nth-child(4) {
          -webkit-transition-delay: 0.4s;
          -moz-transition-delay: 0.4s;
          -o-transition-delay: 0.4s;
          transition-delay: 0.4s;
          -webkit-animation-delay: 0.4s;
          -moz-animation-delay: 0.4s;
          -o-animation-delay: 0.4s;
          animation-delay: 0.4s; }
        .discover .wrap .txtArea.show > span:nth-child(5) {
          -webkit-transition-delay: 0.5s;
          -moz-transition-delay: 0.5s;
          -o-transition-delay: 0.5s;
          transition-delay: 0.5s;
          -webkit-animation-delay: 0.5s;
          -moz-animation-delay: 0.5s;
          -o-animation-delay: 0.5s;
          animation-delay: 0.5s; }
        .discover .wrap .txtArea.show > span:nth-child(6) {
          -webkit-transition-delay: 0.6s;
          -moz-transition-delay: 0.6s;
          -o-transition-delay: 0.6s;
          transition-delay: 0.6s;
          -webkit-animation-delay: 0.6s;
          -moz-animation-delay: 0.6s;
          -o-animation-delay: 0.6s;
          animation-delay: 0.6s; }
        .discover .wrap .txtArea.show > span:nth-child(7) {
          -webkit-transition-delay: 0.7s;
          -moz-transition-delay: 0.7s;
          -o-transition-delay: 0.7s;
          transition-delay: 0.7s;
          -webkit-animation-delay: 0.7s;
          -moz-animation-delay: 0.7s;
          -o-animation-delay: 0.7s;
          animation-delay: 0.7s; }
        .discover .wrap .txtArea.show > span:nth-child(8) {
          -webkit-transition-delay: 0.8s;
          -moz-transition-delay: 0.8s;
          -o-transition-delay: 0.8s;
          transition-delay: 0.8s;
          -webkit-animation-delay: 0.8s;
          -moz-animation-delay: 0.8s;
          -o-animation-delay: 0.8s;
          animation-delay: 0.8s; }
        .discover .wrap .txtArea.show > span:nth-child(9) {
          -webkit-transition-delay: 0.9s;
          -moz-transition-delay: 0.9s;
          -o-transition-delay: 0.9s;
          transition-delay: 0.9s;
          -webkit-animation-delay: 0.9s;
          -moz-animation-delay: 0.9s;
          -o-animation-delay: 0.9s;
          animation-delay: 0.9s; }
        .discover .wrap .txtArea.show > span:nth-child(10) {
          -webkit-transition-delay: 1s;
          -moz-transition-delay: 1s;
          -o-transition-delay: 1s;
          transition-delay: 1s;
          -webkit-animation-delay: 1s;
          -moz-animation-delay: 1s;
          -o-animation-delay: 1s;
          animation-delay: 1s; }
        .discover .wrap .txtArea.show > span:nth-child(11) {
          -webkit-transition-delay: 1.1s;
          -moz-transition-delay: 1.1s;
          -o-transition-delay: 1.1s;
          transition-delay: 1.1s;
          -webkit-animation-delay: 1.1s;
          -moz-animation-delay: 1.1s;
          -o-animation-delay: 1.1s;
          animation-delay: 1.1s; }
        .discover .wrap .txtArea.show > span:nth-child(12) {
          -webkit-transition-delay: 1.2s;
          -moz-transition-delay: 1.2s;
          -o-transition-delay: 1.2s;
          transition-delay: 1.2s;
          -webkit-animation-delay: 1.2s;
          -moz-animation-delay: 1.2s;
          -o-animation-delay: 1.2s;
          animation-delay: 1.2s; }
        .discover .wrap .txtArea.show > span:nth-child(13) {
          -webkit-transition-delay: 1.3s;
          -moz-transition-delay: 1.3s;
          -o-transition-delay: 1.3s;
          transition-delay: 1.3s;
          -webkit-animation-delay: 1.3s;
          -moz-animation-delay: 1.3s;
          -o-animation-delay: 1.3s;
          animation-delay: 1.3s; }
        .discover .wrap .txtArea.show > span:nth-child(14) {
          -webkit-transition-delay: 1.4s;
          -moz-transition-delay: 1.4s;
          -o-transition-delay: 1.4s;
          transition-delay: 1.4s;
          -webkit-animation-delay: 1.4s;
          -moz-animation-delay: 1.4s;
          -o-animation-delay: 1.4s;
          animation-delay: 1.4s; }
        .discover .wrap .txtArea.show > span:nth-child(15) {
          -webkit-transition-delay: 1.5s;
          -moz-transition-delay: 1.5s;
          -o-transition-delay: 1.5s;
          transition-delay: 1.5s;
          -webkit-animation-delay: 1.5s;
          -moz-animation-delay: 1.5s;
          -o-animation-delay: 1.5s;
          animation-delay: 1.5s; }
        .discover .wrap .txtArea.show > span:nth-child(16) {
          -webkit-transition-delay: 1.6s;
          -moz-transition-delay: 1.6s;
          -o-transition-delay: 1.6s;
          transition-delay: 1.6s;
          -webkit-animation-delay: 1.6s;
          -moz-animation-delay: 1.6s;
          -o-animation-delay: 1.6s;
          animation-delay: 1.6s; }
        .discover .wrap .txtArea.show > span:nth-child(17) {
          -webkit-transition-delay: 1.7s;
          -moz-transition-delay: 1.7s;
          -o-transition-delay: 1.7s;
          transition-delay: 1.7s;
          -webkit-animation-delay: 1.7s;
          -moz-animation-delay: 1.7s;
          -o-animation-delay: 1.7s;
          animation-delay: 1.7s; }
        .discover .wrap .txtArea.show > span:nth-child(18) {
          -webkit-transition-delay: 1.8s;
          -moz-transition-delay: 1.8s;
          -o-transition-delay: 1.8s;
          transition-delay: 1.8s;
          -webkit-animation-delay: 1.8s;
          -moz-animation-delay: 1.8s;
          -o-animation-delay: 1.8s;
          animation-delay: 1.8s; }
        .discover .wrap .txtArea.show > span:nth-child(19) {
          -webkit-transition-delay: 1.9s;
          -moz-transition-delay: 1.9s;
          -o-transition-delay: 1.9s;
          transition-delay: 1.9s;
          -webkit-animation-delay: 1.9s;
          -moz-animation-delay: 1.9s;
          -o-animation-delay: 1.9s;
          animation-delay: 1.9s; }
        .discover .wrap .txtArea.show > span:nth-child(20) {
          -webkit-transition-delay: 2s;
          -moz-transition-delay: 2s;
          -o-transition-delay: 2s;
          transition-delay: 2s;
          -webkit-animation-delay: 2s;
          -moz-animation-delay: 2s;
          -o-animation-delay: 2s;
          animation-delay: 2s; }
        .discover .wrap .txtArea.show > span:nth-child(21) {
          -webkit-transition-delay: 2.1s;
          -moz-transition-delay: 2.1s;
          -o-transition-delay: 2.1s;
          transition-delay: 2.1s;
          -webkit-animation-delay: 2.1s;
          -moz-animation-delay: 2.1s;
          -o-animation-delay: 2.1s;
          animation-delay: 2.1s; }
        .discover .wrap .txtArea.show > span:nth-child(22) {
          -webkit-transition-delay: 2.2s;
          -moz-transition-delay: 2.2s;
          -o-transition-delay: 2.2s;
          transition-delay: 2.2s;
          -webkit-animation-delay: 2.2s;
          -moz-animation-delay: 2.2s;
          -o-animation-delay: 2.2s;
          animation-delay: 2.2s; }
        .discover .wrap .txtArea.show > span:nth-child(23) {
          -webkit-transition-delay: 2.3s;
          -moz-transition-delay: 2.3s;
          -o-transition-delay: 2.3s;
          transition-delay: 2.3s;
          -webkit-animation-delay: 2.3s;
          -moz-animation-delay: 2.3s;
          -o-animation-delay: 2.3s;
          animation-delay: 2.3s; }
        .discover .wrap .txtArea.show > span:nth-child(24) {
          -webkit-transition-delay: 2.4s;
          -moz-transition-delay: 2.4s;
          -o-transition-delay: 2.4s;
          transition-delay: 2.4s;
          -webkit-animation-delay: 2.4s;
          -moz-animation-delay: 2.4s;
          -o-animation-delay: 2.4s;
          animation-delay: 2.4s; }
        .discover .wrap .txtArea.show > span:nth-child(25) {
          -webkit-transition-delay: 2.5s;
          -moz-transition-delay: 2.5s;
          -o-transition-delay: 2.5s;
          transition-delay: 2.5s;
          -webkit-animation-delay: 2.5s;
          -moz-animation-delay: 2.5s;
          -o-animation-delay: 2.5s;
          animation-delay: 2.5s; }
        .discover .wrap .txtArea.show > span:nth-child(26) {
          -webkit-transition-delay: 2.6s;
          -moz-transition-delay: 2.6s;
          -o-transition-delay: 2.6s;
          transition-delay: 2.6s;
          -webkit-animation-delay: 2.6s;
          -moz-animation-delay: 2.6s;
          -o-animation-delay: 2.6s;
          animation-delay: 2.6s; }
        .discover .wrap .txtArea.show > span:nth-child(27) {
          -webkit-transition-delay: 2.7s;
          -moz-transition-delay: 2.7s;
          -o-transition-delay: 2.7s;
          transition-delay: 2.7s;
          -webkit-animation-delay: 2.7s;
          -moz-animation-delay: 2.7s;
          -o-animation-delay: 2.7s;
          animation-delay: 2.7s; }
        .discover .wrap .txtArea.show > span:nth-child(28) {
          -webkit-transition-delay: 2.8s;
          -moz-transition-delay: 2.8s;
          -o-transition-delay: 2.8s;
          transition-delay: 2.8s;
          -webkit-animation-delay: 2.8s;
          -moz-animation-delay: 2.8s;
          -o-animation-delay: 2.8s;
          animation-delay: 2.8s; }
        .discover .wrap .txtArea.show > span:nth-child(29) {
          -webkit-transition-delay: 2.9s;
          -moz-transition-delay: 2.9s;
          -o-transition-delay: 2.9s;
          transition-delay: 2.9s;
          -webkit-animation-delay: 2.9s;
          -moz-animation-delay: 2.9s;
          -o-animation-delay: 2.9s;
          animation-delay: 2.9s; }
        .discover .wrap .txtArea.show > span:nth-child(30) {
          -webkit-transition-delay: 3s;
          -moz-transition-delay: 3s;
          -o-transition-delay: 3s;
          transition-delay: 3s;
          -webkit-animation-delay: 3s;
          -moz-animation-delay: 3s;
          -o-animation-delay: 3s;
          animation-delay: 3s; }
      .discover .wrap .txtArea.typeB {
        font-size: 240px;
        line-height: 200px; }
  .discover.mobile .wrap .deviceArea {
    left: 0;
    top: 0; }
    .discover.mobile .wrap .deviceArea .device1 {
      left: -20px;
      top: 140px;
      -webkit-transform: translate(-50px, -50px);
      -moz-transform: translate(-50px, -50px);
      -o-transform: translate(-50px, -50px);
      transform: translate(-50px, -50px); }
    .discover.mobile .wrap .deviceArea .device2 {
      left: -225px;
      top: 322px;
      -webkit-transform: translate(-50px, -50px);
      -moz-transform: translate(-50px, -50px);
      -o-transform: translate(-50px, -50px);
      transform: translate(-50px, -50px); }
    .discover.mobile .wrap .deviceArea .device3 {
      left: -465px;
      top: 468px;
      -webkit-transform: translate(-50px, -50px);
      -moz-transform: translate(-50px, -50px);
      -o-transform: translate(-50px, -50px);
      transform: translate(-50px, -50px); }
    .discover.mobile .wrap .deviceArea .device4 {
      left: 265px;
      top: 440px;
      -webkit-transform: translate(50px, -50px);
      -moz-transform: translate(50px, -50px);
      -o-transform: translate(50px, -50px);
      transform: translate(50px, -50px); }
    .discover.mobile .wrap .deviceArea .show {
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      -o-transform: translate(0, 0);
      transform: translate(0, 0); }
  .discover + .custom, .discover + .pageNav {
    position: relative; }

#wrapper.pc .deviceArea {
  left: -385px; }
  #wrapper.pc .deviceArea > p:not(.device1) {
    display: none; }

.making {
  background: #2d2d2d; }
  .making .wrap {
    max-width: 1200px;
    padding: 200px 0;
    margin: 0 auto;
    background: url(/2019/images/project/bg_pattern.png) repeat-y 50% 0; }
    .making .wrap h3.typeA {
      margin: 0 0 180px;
      color: #fff; }
      .making .wrap h3.typeA > span:before {
        background: #fff; }
    .making .wrap h4 {
      position: absolute;
      left: 100px;
      top: 435px;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px; }
      .making .wrap h4:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 160px;
        height: 1px;
        background: #fff; }
    .making .wrap .area1 {
      position: relative;
      text-align: right; }
    .making .wrap .area2 {
      position: relative;
      text-align: right;
      margin-top: 90px; }
      .making .wrap .area2 h4 {
        top: 60px; }

.flowMobile {
  position: relative;
  padding: 130px 0;
  background: #e8e8e8 url(/2019/images/project/bg_pattern.png) repeat-y 50% 0; }
  .flowMobile .wrap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto; }
    .flowMobile .wrap h3.typeA {
      position: absolute;
      left: 0;
      top: 280px; }
    .flowMobile .wrap .detail {
      position: relative;
      width: 420px;
      padding-left: 45px;
      margin: 0 auto;
      opacity: 0;
      -webkit-transform: translateX(50px);
      -moz-transform: translateX(50px);
      -o-transform: translateX(50px);
      transform: translateX(50px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .flowMobile .wrap .detail h4 {
        position: absolute;
        right: 0;
        top: 150px;
        font-size: 11px;
        color: #828282;
        font-weight: 700;
        letter-spacing: 4px;
        -webkit-transform: translateX(90%) rotate(90deg);
        -moz-transform: translateX(90%) rotate(90deg);
        -o-transform: translateX(90%) rotate(90deg);
        transform: translateX(90%) rotate(90deg);
        -webkit-transform-origin: 0%;
        -moz-transform-origin: 0%;
        -o-transform-origin: 0%;
        transform-origin: 0%; }
      .flowMobile .wrap .detail p {
        width: 360px;
        height: 688px;
        padding: 59px 0 0 20px;
        background: url(/2019/images/project/frame_mobile2.png) no-repeat 0 0; }
      .flowMobile .wrap .detail:before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 120px;
        width: 11px;
        height: 11px;
        border: 1px solid #b5b5b5; }
      .flowMobile .wrap .detail:after {
        content: "";
        position: absolute;
        right: 5px;
        top: 235px;
        bottom: 170px;
        border-left: 1px solid #b5b5b5; }
      .flowMobile .wrap .detail.show {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0); }
    .flowMobile .wrap ul {
      overflow: hidden;
      margin-top: 70px; }
      .flowMobile .wrap ul li {
        float: left;
        width: 50%;
        opacity: 0;
        text-align: right;
        -webkit-transform: translateY(100px);
        -moz-transform: translateY(100px);
        -o-transform: translateY(100px);
        transform: translateY(100px);
        -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .flowMobile .wrap ul li:nth-child(1) {
          -webkit-transition-delay: 0.2s;
          -moz-transition-delay: 0.2s;
          -o-transition-delay: 0.2s;
          transition-delay: 0.2s; }
        .flowMobile .wrap ul li:nth-child(2) {
          -webkit-transition-delay: 0.4s;
          -moz-transition-delay: 0.4s;
          -o-transition-delay: 0.4s;
          transition-delay: 0.4s; }
        .flowMobile .wrap ul li:nth-child(2n+1) {
          margin-top: 40px;
          text-align: left; }
        .flowMobile .wrap ul li.show {
          opacity: 1;
          -webkit-transform: translateY(0);
          -moz-transform: translateY(0);
          -o-transform: translateY(0);
          transform: translateY(0); }
  .flowMobile.horizon h3.typeA {
    position: static;
    margin-top: 0; }
  .flowMobile.horizon .detail {
    width: 766px;
    padding-left: 25px; }
    .flowMobile.horizon .detail h4 {
      top: 50px; }
    .flowMobile.horizon .detail p {
      width: 676px;
      height: 348px;
      padding: 8px 0 0 79px;
      background-image: url(/2019/images/project/frame_mobile5.png); }
    .flowMobile.horizon .detail:before {
      bottom: 75px; }
    .flowMobile.horizon .detail:after {
      top: 135px;
      bottom: 95px; }
  .flowMobile.horizon ul li {
    width: 33.3%;
    margin-top: 0;
    text-align: left; }
    .flowMobile.horizon ul li:nth-child(2) {
      margin-top: 120px;
      text-align: center; }
    .flowMobile.horizon ul li:nth-child(3) {
      margi-top: 40px;
      text-align: right; }

.flowTablet {
  position: relative;
  padding: 130px 0;
  background: #e8e8e8 url(/2019/images/project/bg_pattern.png) repeat-y 50% 0; }
  .flowTablet .wrap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto; }
    .flowTablet .wrap h3.typeA {
      position: absolute;
      left: 0;
      top: 140px; }
    .flowTablet .wrap .detail {
      position: relative;
      width: 570px;
      padding-left: 35px;
      margin: 0 auto;
      opacity: 0;
      -webkit-transform: translateX(50px);
      -moz-transform: translateX(50px);
      -o-transform: translateX(50px);
      transform: translateX(50px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .flowTablet .wrap .detail h4 {
        position: absolute;
        right: 0;
        top: 28px;
        font-size: 11px;
        color: #828282;
        font-weight: 700;
        letter-spacing: 4px;
        -webkit-transform: translateX(90%) rotate(90deg);
        -moz-transform: translateX(90%) rotate(90deg);
        -o-transform: translateX(90%) rotate(90deg);
        transform: translateX(90%) rotate(90deg);
        -webkit-transform-origin: 0%;
        -moz-transform-origin: 0%;
        -o-transform-origin: 0%;
        transform-origin: 0%; }
      .flowTablet .wrap .detail p {
        width: 500px;
        height: 643px;
        padding: 26px 0 0 26px;
        background: url(/2019/images/project/frame_tablet2.png) no-repeat 0 0; }
      .flowTablet .wrap .detail:before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 234px;
        width: 11px;
        height: 11px;
        border: 1px solid #b5b5b5; }
      .flowTablet .wrap .detail:after {
        content: "";
        position: absolute;
        right: 5px;
        top: 100px;
        bottom: 266px;
        border-left: 1px solid #b5b5b5; }
      .flowTablet .wrap .detail.show {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0); }
    .flowTablet .wrap ul {
      overflow: hidden;
      margin-top: 100px; }
      .flowTablet .wrap ul li {
        float: left;
        width: 50%;
        opacity: 0;
        text-align: right;
        -webkit-transform: translateY(100px);
        -moz-transform: translateY(100px);
        -o-transform: translateY(100px);
        transform: translateY(100px);
        -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .flowTablet .wrap ul li:nth-child(1) {
          -webkit-transition-delay: 0.2s;
          -moz-transition-delay: 0.2s;
          -o-transition-delay: 0.2s;
          transition-delay: 0.2s; }
        .flowTablet .wrap ul li:nth-child(2) {
          -webkit-transition-delay: 0.4s;
          -moz-transition-delay: 0.4s;
          -o-transition-delay: 0.4s;
          transition-delay: 0.4s; }
        .flowTablet .wrap ul li:nth-child(2n+1) {
          text-align: left; }
        .flowTablet .wrap ul li.show {
          opacity: 1;
          -webkit-transform: translateY(0);
          -moz-transform: translateY(0);
          -o-transform: translateY(0);
          transform: translateY(0); }

.custom {
  padding: 50px 0 130px;
  background: #242424; }
  .custom .wrap {
    overflow: hidden;
    max-width: 1200px;
    padding-left: 100px;
    margin: 0 auto; }
    .custom .wrap h3.typeA {
      color: #fff; }
      .custom .wrap h3.typeA > span:before {
        background: #fff; }
    .custom .wrap .icon {
      margin-top: 80px;
      opacity: 0;
      -webkit-transform: translateY(50px);
      -moz-transform: translateY(50px);
      -o-transform: translateY(50px);
      transform: translateY(50px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .custom .wrap .icon.show {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }
    .custom .wrap .colorchip {
      overflow: hidden;
      float: right;
      margin-top: 40px;
      opacity: 0;
      -webkit-transform: translateY(50px);
      -moz-transform: translateY(50px);
      -o-transform: translateY(50px);
      transform: translateY(50px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .custom .wrap .colorchip.show {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }
      .custom .wrap .colorchip li {
        float: left;
        width: 200px;
        margin-left: 1px;
        font-size: 10px;
        color: #fff;
        line-height: 18px;
        letter-spacing: 2px; }
        .custom .wrap .colorchip li .color {
          display: block;
          height: 39px;
          margin-bottom: 15px; }

#wrapper.kbs .custom {
  background: #fff; }
  #wrapper.kbs .custom .wrap {
    padding-left: 0; }
    #wrapper.kbs .custom .wrap h3.typeA {
      color: #000; }
      #wrapper.kbs .custom .wrap h3.typeA > span:before {
        background: #000; }
  #wrapper.kbs .custom:not(.custom2) .wrap {
    width: 1000px;
    margin: 0 auto; }
    #wrapper.kbs .custom:not(.custom2) .wrap h3.typeA {
      float: right; }
    #wrapper.kbs .custom:not(.custom2) .wrap .icon {
      clear: both;
      padding-top: 45px;
      margin-top: 0; }

#wrapper.kbs .custom2 {
  background: #e9eaed url(/2019/images/project/bg_pattern.png) repeat-y 50% 0; }

.award {
  padding: 130px 0;
  background: #191717; }
  .award .wrap {
    position: relative;
    max-width: 1200px;
    padding-left: 450px;
    margin: 0 auto; }
    .award .wrap h3.typeA {
      position: absolute;
      left: 100px;
      top: 0;
      margin-top: 0;
      color: #fff; }
      .award .wrap h3.typeA > span:before {
        background: #fff; }
    .award .wrap .content {
      position: relative;
      padding-left: 160px;
      opacity: 0;
      -webkit-transform: translateY(50px);
      -moz-transform: translateY(50px);
      -o-transform: translateY(50px);
      transform: translateY(50px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .award .wrap .content.show {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }
      .award .wrap .content .logo {
        position: absolute;
        left: 0;
        top: 0; }
      .award .wrap .content h4 {
        font: 14px 'nanumSquare';
        color: #fff;
        line-height: 1em; }
        .award .wrap .content h4 .tit {
          display: block;
          margin-bottom: 15px;
          font-size: 20px;
          font-weight: 300;
          color: #fff; }
          .award .wrap .content h4 .tit em {
            font-weight: 700; }
      .award .wrap .content .txt {
        margin-top: 25px;
        font: 14px 'nanumSquare';
        color: #fff;
        line-height: 2em;
        opacity: .5;
        word-break: keep-all; }

.pageNav {
  overflow: hidden;
  padding: 40px 0;
  background: #000; }
  .pageNav li {
    position: relative;
    float: left;
    padding-left: 220px; }
    .pageNav li a {
      font: 20px 'nanumSquare';
      line-height: 30px;
      color: #4d4d4d;
      -webkit-transition: all 0.5s cubic-bezier(0, 0, 1, 1);
      -moz-transition: all 0.5s cubic-bezier(0, 0, 1, 1);
      -o-transition: all 0.5s cubic-bezier(0, 0, 1, 1);
      transition: all 0.5s cubic-bezier(0, 0, 1, 1); }
    .pageNav li:before {
      content: "";
      position: absolute;
      top: 50%;
      width: 180px;
      height: 3px;
      margin-top: -2px;
      background: #1a1a1a;
      -webkit-transition: all 0.5s cubic-bezier(0, 0, 1, 1);
      -moz-transition: all 0.5s cubic-bezier(0, 0, 1, 1);
      -o-transition: all 0.5s cubic-bezier(0, 0, 1, 1);
      transition: all 0.5s cubic-bezier(0, 0, 1, 1); }
    .pageNav li.first:before {
      left: 0; }
    .pageNav li.second:before {
      right: 0; }
    .pageNav li.second {
      float: right;
      padding-left: 0;
      padding-right: 220px;
      text-align: right; }
    .pageNav li:hover a {
      color: #fff; }
    .pageNav li:hover:before {
      background: #fd1322; }

#wrapper.lstory .arMakeup {
  position: relative;
  background: #e8e8e8 url(/2019/images/project/bg_pattern.png) repeat-y 50% 0; }
  #wrapper.lstory .arMakeup:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 53%;
    background: #121212 url(/2019/images/project/bg_pattern2.png) repeat-y 50% 0; }
  #wrapper.lstory .arMakeup .wrap {
    position: relative;
    max-width: 1200px;
    padding: 130px 0 100px;
    margin: 0 auto; }
    #wrapper.lstory .arMakeup .wrap h2 {
      margin-bottom: 70px;
      color: #fff;
      font: 190px/140px 'Montserrat';
      font-weight: 100;
      opacity: 0;
      -webkit-transform: translateX(50px);
      -moz-transform: translateX(50px);
      -o-transform: translateX(50px);
      transform: translateX(50px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      #wrapper.lstory .arMakeup .wrap h2.show {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0); }
    #wrapper.lstory .arMakeup .wrap p {
      text-align: center;
      opacity: 0;
      -webkit-transform: translateY(100px);
      -moz-transform: translateY(100px);
      -o-transform: translateY(100px);
      transform: translateY(100px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      #wrapper.lstory .arMakeup .wrap p.show {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }
    #wrapper.lstory .arMakeup .wrap h3.typeA {
      position: absolute;
      left: 790px;
      top: 1260px;
      margin: 0;
      color: #fff; }
      #wrapper.lstory .arMakeup .wrap h3.typeA > span:before {
        background: #fff; }

#wrapper.lstory .app {
  background: #ed008c url(/2019/images/project/bg_pattern2.png) repeat-y 50% 0; }
  #wrapper.lstory .app .wrap {
    max-width: 1200px;
    padding-top: 130px;
    margin: 0 auto; }
  #wrapper.lstory .app p {
    text-align: center;
    opacity: 0;
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -o-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
    #wrapper.lstory .app p.show {
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); }

.othersArea {
  position: relative;
  margin-top: -240px; }
  .othersArea .back {
    position: fixed;
    right: 100px;
    top: 240px; }
    .othersArea .back a {
      position: relative;
      padding-left: 70px;
      font: 700 20px/1em 'crimson';
      color: #000; }
      .othersArea .back a:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 60px;
        height: 2px;
        margin-top: -1px;
        background: #000; }
      .othersArea .back a:after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 10px;
        height: 2px;
        margin-top: -1px;
        background: #000;
        -webkit-transform: rotate(-40deg);
        -moz-transform: rotate(-40deg);
        -o-transform: rotate(-40deg);
        transform: rotate(-40deg);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0; }
  .othersArea .nav {
    position: fixed;
    left: 5%;
    top: 240px;
    z-index: 1; }
    .othersArea .nav li {
      position: relative;
      margin-bottom: 30px;
      padding-left: 150px;
      font-size: 20px;
      font-weight: 700;
      line-height: 1em;
      color: #050505;
      -webkit-transition: margin 0.5s cubic-bezier(1, 0, 0, 0.7);
      -moz-transition: margin 0.5s cubic-bezier(1, 0, 0, 0.7);
      -o-transition: margin 0.5s cubic-bezier(1, 0, 0, 0.7);
      transition: margin 0.5s cubic-bezier(1, 0, 0, 0.7); }
      .othersArea .nav li a {
        color: #050505;
        -webkit-transition: opacity 0.3s cubic-bezier(1, 0, 0, 0.7);
        -moz-transition: opacity 0.3s cubic-bezier(1, 0, 0, 0.7);
        -o-transition: opacity 0.3s cubic-bezier(1, 0, 0, 0.7);
        transition: opacity 0.3s cubic-bezier(1, 0, 0, 0.7); }
        .othersArea .nav li a:hover {
          opacity: 1; }
      .othersArea .nav li:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 0;
        height: 2px;
        margin-top: -1px;
        background: #000;
        -webkit-transition: width 0.3s cubic-bezier(1, 0, 0, 0.7);
        -moz-transition: width 0.3s cubic-bezier(1, 0, 0, 0.7);
        -o-transition: width 0.3s cubic-bezier(1, 0, 0, 0.7);
        transition: width 0.3s cubic-bezier(1, 0, 0, 0.7); }
      .othersArea .nav li:hover:before {
        width: 125px; }
      .othersArea .nav li.on {
        margin-bottom: 250px; }
        .othersArea .nav li.on a {
          color: #fd1322; }
        .othersArea .nav li.on:before {
          width: 125px; }
  .othersArea .content {
    position: relative;
    max-width: 1200px;
    padding-top: 240px;
    margin-left: 25%;
    margin-bottom: 240px; }
    .othersArea .content h2 {
      position: fixed;
      left: 0;
      right: 0;
      top: 50%;
      bottom: 0;
      opacity: 0;
      z-index: 0;
      font: 410px crimson;
      line-height: 300px;
      letter-spacing: 30px;
      -webkit-transform: translateX(-100px);
      -moz-transform: translateX(-100px);
      -o-transform: translateX(-100px);
      transform: translateX(-100px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .othersArea .content h2 span {
        position: absolute;
        white-space: nowrap; }
        .othersArea .content h2 span:nth-child(1) {
          right: calc(50% - 30px); }
        .othersArea .content h2 span:nth-child(2) {
          right: 0;
          bottom: 20px; }
    .othersArea .content h3 {
      position: relative;
      float: left;
      width: 50%;
      padding-left: 15%;
      font-size: 32px;
      line-height: 1em;
      font-weight: 500;
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .othersArea .content h3:after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 100px;
        height: 2px;
        background: #000; }
    .othersArea .content .list {
      float: left;
      width: 50%;
      padding: 5px 0 0 50px;
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .othersArea .content .list li {
        position: relative;
        padding-left: 13px;
        margin-bottom: 10px;
        font: 15px 'nanumSquare';
        font-weight: 700;
        line-height: 26px;
        color: #000; }
        .othersArea .content .list li:before {
          content: "";
          position: absolute;
          left: 0;
          top: 10px;
          width: 4px;
          height: 4px;
          background: #000; }
    .othersArea .content:after {
      content: "";
      display: block;
      clear: both; }
    .othersArea .content.on h2 {
      opacity: 1;
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0); }

#wrapper.teuni .projectHead .nav {
  display: none; }
#wrapper.teuni .projectHead .visual p:not(.mobile) {
  display: none; }
#wrapper.teuni .projectHead .visual p.mobile {
  bottom: -50px;
  width: auto;
  height: auto;
  padding: 0;
  background: none; }
#wrapper.teuni .projectHead .site {
  margin-top: 0; }
#wrapper.teuni .flow {
  display: none; }
#wrapper.teuni .flowMobile {
  background-image: none; }
  #wrapper.teuni .flowMobile h3 {
    color: #fff; }
    #wrapper.teuni .flowMobile h3 span:before {
      background: #fff; }
  #wrapper.teuni .flowMobile .detail h4 {
    opacity: .55;
    color: #fff; }
  #wrapper.teuni .flowMobile .detail:before, #wrapper.teuni .flowMobile .detail:after {
    opacity: .55;
    border-color: #fff; }
#wrapper.teuni .continuous {
  position: relative;
  padding: 130px 0;
  background: #e8e8e8 url(/2019/images/project/bg_pattern.png) repeat-y 50% 0; }
  #wrapper.teuni .continuous .wrap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto; }
    #wrapper.teuni .continuous .wrap h3.typeA {
      position: absolute;
      left: 0;
      top: 280px;
      color: #fff; }
      #wrapper.teuni .continuous .wrap h3.typeA span:before {
        background: #fff; }
    #wrapper.teuni .continuous .wrap .detail {
      position: relative;
      text-align: right;
      opacity: 0;
      -webkit-transform: translateX(50px);
      -moz-transform: translateX(50px);
      -o-transform: translateX(50px);
      transform: translateX(50px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      #wrapper.teuni .continuous .wrap .detail h4 {
        position: absolute;
        right: -41px;
        top: 13px;
        font-size: 11px;
        color: #fff;
        font-weight: 700;
        letter-spacing: 4px;
        -webkit-transform: translateX(90%) rotate(90deg);
        -moz-transform: translateX(90%) rotate(90deg);
        -o-transform: translateX(90%) rotate(90deg);
        transform: translateX(90%) rotate(90deg);
        -webkit-transform-origin: 0%;
        -moz-transform-origin: 0%;
        -o-transform-origin: 0%;
        transform-origin: 0%; }
      #wrapper.teuni .continuous .wrap .detail p {
        margin: -14px -13px 0 0; }
      #wrapper.teuni .continuous .wrap .detail:before {
        opacity: .55;
        content: "";
        position: absolute;
        right: -42px;
        top: 388px;
        width: 11px;
        height: 11px;
        border: 1px solid #fff; }
      #wrapper.teuni .continuous .wrap .detail:after {
        opacity: .55;
        content: "";
        position: absolute;
        right: -36px;
        top: 87px;
        height: 280px;
        border-left: 1px solid #fff; }
      #wrapper.teuni .continuous .wrap .detail.show {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0); }
#wrapper.teuni .custom {
  background: #a9cc0d; }
  #wrapper.teuni .custom .wrap {
    position: relative; }
    #wrapper.teuni .custom .wrap h3 {
      position: absolute; }
    #wrapper.teuni .custom .wrap .icon {
      text-align: right; }

.culture {
  position: relative;
  padding: 0 80px 0 20%; }
  .culture .listArea {
    position: fixed;
    left: 80px;
    top: 250px;
    z-index: 1; }
    .culture .listArea .btn {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      font-size: 20px;
      line-height: 1em;
      font-weight: 700;
      -webkit-transform: translateX(-50px);
      -moz-transform: translateX(-50px);
      -o-transform: translateX(-50px);
      transform: translateX(-50px);
      -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      /* a:after {opacity:0; content:""; position:absolute; left:50%; top:50%; width:20px; height:20px; border-radius:50%; @include mix-transform(translate(-50%, -50%)); border:4px solid rgba(0,0,0,.1); box-shadow:0 0 6px rgba(0,0,0,0.1);} */
      /* a:hover:after {@include mix-animation(hoverCircle, .5s, linear, 0s, 1, normal, both);} */
      /* a:before {content:""; position:absolute; left:0; top:50%; width:8px; height:2px; margin-top:-1px; background:#000; @include mix-transform(rotate(-45deg)); @include mix-transform-origin(0);}
      a:after {content:""; position:absolute; left:0; top:50%; width:8px; height:2px; margin-top:-1px; background:#000; @include mix-transform(rotate(45deg)); @include mix-transform-origin(0);}
      a:hover:before, a:hover:after {@include mix-animation(hoverBlt, .5s, linear, 0s, 2, normal, both);} */ }
      .culture .listArea .btn a {
        padding-left: 15px;
        color: #000;
        letter-spacing: 3px; }
      .culture .listArea .btn a:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 7px;
        height: 7px;
        margin-top: -1px;
        border-left: 2px solid #000;
        border-top: 2px solid #000;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0;
        -moz-transform-origin: 0;
        -o-transform-origin: 0;
        transform-origin: 0; }
      .culture .listArea .btn a:hover:before {
        -webkit-animation: hoverBlt 0.5s linear 0s 2 normal both;
        -moz-animation: hoverBlt 0.5s linear 0s 2 normal both;
        -o-animation: hoverBlt 0.5s linear 0s 2 normal both;
        animation: hoverBlt 0.5s linear 0s 2 normal both; }
    .culture .listArea ul {
      -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .culture .listArea ul li {
        height: 25px;
        margin-bottom: 30px;
        font-size: 16px;
        line-height: 25px;
        -webkit-transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .culture .listArea ul li a {
          color: #adadad; }
        .culture .listArea ul li.on {
          font-size: 22px;
          font-weight: 500; }
          .culture .listArea ul li.on a {
            color: #000; }
  .culture .thumb {
    position: relative;
    overflow: hidden;
    height: 646px;
    text-align: right;
    -webkit-transition: all 1s cubic-bezier(0.04, 1, 0.32, 1);
    -moz-transition: all 1s cubic-bezier(0.04, 1, 0.32, 1);
    -o-transition: all 1s cubic-bezier(0.04, 1, 0.32, 1);
    transition: all 1s cubic-bezier(0.04, 1, 0.32, 1); }
    .culture .thumb span {
      overflow: hidden;
      display: block;
      height: 646px;
      -webkit-transition: all 0.8s cubic-bezier(0.04, 1, 0.32, 1);
      -moz-transition: all 0.8s cubic-bezier(0.04, 1, 0.32, 1);
      -o-transition: all 0.8s cubic-bezier(0.04, 1, 0.32, 1);
      transition: all 0.8s cubic-bezier(0.04, 1, 0.32, 1); }
    .culture .thumb img {
      position: absolute;
      right: 0;
      top: 0;
      -webkit-transition: all 0.8s cubic-bezier(0.04, 1, 0.32, 1);
      -moz-transition: all 0.8s cubic-bezier(0.04, 1, 0.32, 1);
      -o-transition: all 0.8s cubic-bezier(0.04, 1, 0.32, 1);
      transition: all 0.8s cubic-bezier(0.04, 1, 0.32, 1); }
    .culture .thumb img.show {
      -webkit-transform: translateX(100%);
      -moz-transform: translateX(100%);
      -o-transform: translateX(100%);
      transform: translateX(100%); }
  .culture .head {
    opacity: 0;
    position: relative;
    z-index: 2;
    padding-bottom: 15px; }
    .culture .head h2 {
      position: relative;
      width: 530px;
      font-size: 72px;
      font-weight: 700;
      color: #000;
      line-height: 100px; }
      .culture .head h2:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 3px;
        background: #000; }
      .culture .head h2 a {
        color: #000; }
    .culture .head .sub {
      width: 300px;
      margin-top: 25px; }
      .culture .head .sub li {
        display: inline-block;
        margin-right: 20px;
        font: 22px/32px 'nanumSquare'; }
        .culture .head .sub li a {
          color: #adadad; }
        .culture .head .sub li.on a {
          color: #000; }
    .culture .head .date {
      margin-top: 30px;
      font-size: 14px;
      font-weight: 500;
      color: #000; }
    .culture .head .txt {
      width: 300px;
      margin-top: 30px;
      font: 14px/2em 'nanumSquare';
      word-break: keep-all;
      color: #000; }
    .culture .head .more {
      margin-top: 50px;
      font-size: 14px;
      font-weight: 700; }
      .culture .head .more a {
        color: #000; }
    .culture .head.on {
      opacity: 1;
      -webkit-animation: titleShow 0.3s linear 0s 1 normal both;
      -moz-animation: titleShow 0.3s linear 0s 1 normal both;
      -o-animation: titleShow 0.3s linear 0s 1 normal both;
      animation: titleShow 0.3s linear 0s 1 normal both;
      -webkit-animation-delay: 0.2s;
      -moz-animation-delay: 0.2s;
      -o-animation-delay: 0.2s;
      animation-delay: 0.2s; }
      .culture .head.on h2:before {
        -webkit-animation: widthFull 0.2s linear 0s 1 normal both;
        -moz-animation: widthFull 0.2s linear 0s 1 normal both;
        -o-animation: widthFull 0.2s linear 0s 1 normal both;
        animation: widthFull 0.2s linear 0s 1 normal both;
        -webkit-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        -o-animation-delay: 0.4s;
        animation-delay: 0.4s; }
  .culture .gallery {
    overflow: hidden;
    max-height: 0;
    margin-top: 140px;
    text-align: center; }
    .culture .gallery img.focus {
      opacity: 0;
      -webkit-transform: translateY(50px);
      -moz-transform: translateY(50px);
      -o-transform: translateY(50px);
      transform: translateY(50px); }
      .culture .gallery img.focus.show {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }
  .culture.view .listArea .btn {
    opacity: 1;
    z-index: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s; }
  .culture.view .listArea ul {
    opacity: 0;
    z-index: -1;
    -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -o-transform: translateX(-50px);
    transform: translateX(-50px);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s; }
  .culture.view .thumb {
    -webkit-transform: translateX(-70px);
    -moz-transform: translateX(-70px);
    -o-transform: translateX(-70px);
    transform: translateX(-70px);
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s; }
    .culture.view .thumb span {
      height: 580px;
      -webkit-transform: translateY(33px);
      -moz-transform: translateY(33px);
      -o-transform: translateY(33px);
      transform: translateY(33px); }
    .culture.view .thumb img {
      top: -33px; }
  .culture.view .head {
    margin-top: 60px !important;
    -webkit-transition: all 0.5s cubic-bezier(0.04, 1, 0.32, 1);
    -moz-transition: all 0.5s cubic-bezier(0.04, 1, 0.32, 1);
    -o-transition: all 0.5s cubic-bezier(0.04, 1, 0.32, 1);
    transition: all 0.5s cubic-bezier(0.04, 1, 0.32, 1);
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
    /*.sub, .more {display:none; @include mix-transition-delay(.5s);}*/ }
  .culture.view .gallery {
    max-height: 20000px;
    -webkit-transition: all 0.5s cubic-bezier(0.04, 1, 0.32, 1);
    -moz-transition: all 0.5s cubic-bezier(0.04, 1, 0.32, 1);
    -o-transition: all 0.5s cubic-bezier(0.04, 1, 0.32, 1);
    transition: all 0.5s cubic-bezier(0.04, 1, 0.32, 1);
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s; }

.willHead {
  max-width: 1280px;
  margin: 0 auto; }
  .willHead h2 {
    font: 62px/58px 'nanumSquare'; }
  .willHead .srmy {
    margin-top: 20px;
    font: 700 22px/1em 'nanumSquare'; }
  .willHead .writer {
    position: relative;
    height: 50px;
    padding: 8px 0 0 67px;
    margin-top: 35px; }
    .willHead .writer .profile {
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
      width: 50px;
      height: 50px;
      border-radius: 50%; }
      .willHead .writer .profile img {
        width: 50px;
        height: 50px; }
    .willHead .writer strong {
      display: block;
      margin-bottom: 0;
      font: 900 16px/1em 'Roboto'; }
    .willHead .writer span {
      position: relative;
      font: 700 14px/1em 'nanumSquare';
      opacity: .5; }
    .willHead .writer span + span {
      padding-left: 10px;
      margin-left: 8px; }
    .willHead .writer span + span:before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 2px;
      height: 2px;
      background: rgba(0, 0, 0, 0.5); }
  .willHead .tab {
    float: right;
    height: 80px;
    margin-top: -50px; }
    .willHead .tab li {
      float: left;
      margin-left: 35px;
      font: 900 18px/1em 'nanumSquare';
      opacity: .5; }
      .willHead .tab li a {
        position: relative;
        color: #000; }
      .willHead .tab li.on {
        opacity: 1; }
        .willHead .tab li.on a:before {
          content: "";
          position: absolute;
          left: 0;
          top: 21px;
          right: 0;
          height: 2px;
          background: #000; }

.willList {
  position: relative;
  clear: both;
  max-width: 1280px;
  margin: 0 auto; }
  .willList .loading {
    position: absolute;
    top: 300px;
    z-index: 1;
    margin-top: 0; }
  .willList ul {
    position: relative;
    overflow: hidden;
    min-height: 500px;
    opacity: 0;
    padding-bottom: 1px;
    box-sizing: content-box; }
    .willList ul:before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1px;
      background: #e5e5e5; }
    .willList ul li {
      position: absolute;
      width: 50%;
      left: 0;
      top: 0;
      padding: 20px 25px;
      border: 1px solid #e8e8e8;
      margin-bottom: 90px;
      /* box-shadow:1px 1px 2px rgba(0,0,0,.05); */
      background: #fff; }
      .willList ul li .head {
        position: relative;
        height: 56px;
        padding: 10px 0 0 70px;
        margin-bottom: 20px; }
        .willList ul li .head .date {
          position: absolute;
          left: 0;
          top: 0;
          width: 56px;
          height: 56px;
          padding-top: 12px;
          border-radius: 50%;
          text-align: center;
          color: #fff;
          font: 11px/1em 'nanumSquare';
          background: #000; }
          .willList ul li .head .date strong {
            display: block;
            margin-top: 3px;
            text-align: center;
            font: 900 22px/1em 'nanumSquare'; }
          .willList ul li .head .date.end {
            padding-top: 0;
            color: rgba(0, 0, 0, 0.4);
            font-size: 16px;
            font-weight: 900;
            line-height: 56px;
            background: #e2e4eb; }
          .willList ul li .head .date.now {
            padding-top: 0;
            font-size: 16px;
            font-weight: 900;
            line-height: 56px; }
        .willList ul li .head .d-day {
          margin-bottom: 5px;
          font: 900 14px/1em 'nanumSquare'; }
        .willList ul li .head .name {
          font: 14px/1em 'Roboto';
          color: #464646; }
      .willList ul li .content .feedCont .tit {
        margin-top: 30px;
        font: 700 34px/1.5em 'nanumSquare'; }
      .willList ul li .content .feedCont .text {
        margin-top: 30px;
        font: 16px/1.6em 'nanumSquare'; }
      .willList ul li .content img {
        width: 100%; }
      .willList ul li .content .mediaArea {
        position: relative;
        overflow: hidden;
        border-radius: 5px; }
        .willList ul li .content .mediaArea .num {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 42px;
          height: 32px;
          color: #fff;
          font-size: 15px;
          text-align: center;
          line-height: 32px;
          background: rgba(0, 0, 0, 0.4); }
      .willList ul li .content .shareBox {
        overflow: hidden;
        border-radius: 5px; }
        .willList ul li .content .shareBox .tit {
          padding: 10px 20px;
          font: 300 14px/18px 'nanumSquare';
          color: #141823;
          background: linear-gradient(135deg, #e9eef9 0%, #f5f3f7 100%); }
          .willList ul li .content .shareBox .tit strong {
            overflow: hidden;
            display: block;
            padding: 3px 0;
            font: 700 16px/1em 'nanumSquare';
            white-space: nowrap;
            text-overflow: ellipsis; }
          .willList ul li .content .shareBox .tit span {
            overflow: hidden;
            display: -webkit-box;
            margin-bottom: 5px;
            line-height: 18px;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            word-break: normal; }
        .willList ul li .content .shareBox .cont {
          padding: 12px 15px;
          background: linear-gradient(135deg, #e9eef9 0%, #f5f3f7 100%); }
          .willList ul li .content .shareBox .cont strong {
            overflow: hidden;
            display: block;
            padding-bottom: 3px;
            font: 700 15px/18px 'nanumSquare';
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: keep-all; }
          .willList ul li .content .shareBox .cont span {
            overflow: hidden;
            display: block;
            font: 13px/16px 'nanumSquare';
            text-overflow: ellipsis;
            white-space: nowrap; }
        .willList ul li .content .shareBox .video {
          position: relative;
          padding-top: 56.2%; }
          .willList ul li .content .shareBox .video .videoFrame {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%; }
          .willList ul li .content .shareBox .video iframe {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%; }
      .willList ul li.left {
        left: 0;
        border-right: 0; }
      .willList ul li.right {
        left: 50%; }
      .willList ul li:nth-child(1) {
        left: 0;
        top: 90px; }
      .willList ul li:nth-child(2) {
        left: 50%;
        top: 0; }

.viewLayer {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 20px;
  z-index: 500;
  background: rgba(0, 0, 0, 0.8); }
  .viewLayer .content {
    overflow: hidden;
    max-width: 1000px;
    height: 100%;
    margin: 0 auto;
    border-radius: 8px;
    background: #fff; }
    .viewLayer .content iframe {
      width: 100%;
      height: 100%; }
  .viewLayer .btn {
    position: absolute;
    right: 20px;
    top: 20px; }
    .viewLayer .btn a {
      overflow: hidden;
      display: block;
      width: 30px;
      height: 30px;
      text-indent: 2000%;
      white-space: nowrap; }
      .viewLayer .btn a:before, .viewLayer .btn a:after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 30px;
        height: 4px;
        margin-top: -2px;
        border-radius: 1px;
        background: #ccc;
        -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .viewLayer .btn a:before {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg); }
      .viewLayer .btn a:after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg); }
      .viewLayer .btn a:hover:before, .viewLayer .btn a:hover:after {
        background: #fff; }

#viewWrap.fix .header {
  opacity: 1; }
#viewWrap .header {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  padding: 5px 0;
  min-height: 54px;
  border-bottom: 1px solid #d5d5d5;
  text-align: center;
  background: #fff;
  -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
  #viewWrap .header strong {
    font: 700 16px/1.5em 'nanumSquare'; }
  #viewWrap .header span {
    display: block;
    margin-top: 5px;
    text-align: center;
    font: 13px/1em 'nanumSquare';
    color: #2e78ff; }
#viewWrap .contatiner .head {
  overflow: hidden;
  position: relative;
  min-height: 500px;
  max-height: 750px;
  border-bottom: 1px solid #d5d5d5;
  background: #f2f2f7; }
  #viewWrap .contatiner .head .wrap {
    position: relative;
    width: 600px;
    min-height: 500px;
    max-height: 750px;
    padding-top: 50px;
    margin: 0 auto; }
    #viewWrap .contatiner .head .wrap h2 {
      font: 700 40px/1.5em 'nanumSquare'; }
    #viewWrap .contatiner .head .wrap .schedule {
      position: relative;
      height: 68px;
      padding: 26px 0 0 80px;
      margin-top: 15px; }
      #viewWrap .contatiner .head .wrap .schedule .timeCheck {
        position: absolute;
        left: 0;
        top: 0; }
        #viewWrap .contatiner .head .wrap .schedule .timeCheck li {
          width: 68px;
          height: 68px;
          padding-top: 13px;
          border-radius: 50%;
          text-align: center;
          font: 11px/1em 'nanumSquare';
          color: #fff;
          background: #000; }
          #viewWrap .contatiner .head .wrap .schedule .timeCheck li strong {
            display: block;
            margin-top: 8px;
            text-align: center;
            font: 900 22px/1em 'nanumSquare'; }
          #viewWrap .contatiner .head .wrap .schedule .timeCheck li.now {
            padding-top: 0;
            font-size: 16px;
            font-weight: 900;
            line-height: 68px; }
          #viewWrap .contatiner .head .wrap .schedule .timeCheck li.end {
            padding-top: 0;
            color: rgba(0, 0, 0, 0.4);
            font-size: 16px;
            font-weight: 900;
            line-height: 68px;
            background: #e2e4eb; }
      #viewWrap .contatiner .head .wrap .schedule .duration {
        font: 14px/1em 'Roboto'; }
      #viewWrap .contatiner .head .wrap .schedule.d-day {
        padding-left: 0; }
        #viewWrap .contatiner .head .wrap .schedule.d-day .timeCheck {
          position: static;
          overflow: hidden;
          margin-top: 10px; }
          #viewWrap .contatiner .head .wrap .schedule.d-day .timeCheck li {
            float: left;
            padding-top: 12px;
            margin-right: 10px;
            border: 1px solid #fff;
            background: none; }
    #viewWrap .contatiner .head .wrap .writer {
      position: absolute;
      left: 0;
      bottom: 40px;
      height: 50px;
      padding: 8px 0 0 67px; }
      #viewWrap .contatiner .head .wrap .writer .profile {
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%; }
        #viewWrap .contatiner .head .wrap .writer .profile img {
          width: 50px;
          height: 50px; }
      #viewWrap .contatiner .head .wrap .writer strong {
        display: block;
        margin-bottom: 0;
        font: 900 16px/1em 'Roboto'; }
      #viewWrap .contatiner .head .wrap .writer span {
        position: relative;
        font: 14px/1em 'nanumSquare'; }
      #viewWrap .contatiner .head .wrap .writer span + span {
        padding-left: 10px;
        margin-left: 8px; }
      #viewWrap .contatiner .head .wrap .writer span + span:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 2px;
        height: 2px;
        background: rgba(255, 255, 255, 0.5); }
  #viewWrap .contatiner .head.hasBg .bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    min-height: 500px;
    max-height: 750px;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 100%; }
    #viewWrap .contatiner .head.hasBg .bg:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4); }
  #viewWrap .contatiner .head.hasBg .wrap h2 {
    color: #fff; }
  #viewWrap .contatiner .head.hasBg .wrap .duration {
    color: #fff; }
  #viewWrap .contatiner .head.hasBg .writer strong {
    color: #fff; }
  #viewWrap .contatiner .head.hasBg .writer span {
    color: #fff; }
#viewWrap .contatiner .content {
  width: 600px;
  padding: 10px 0;
  margin: 0 auto;
  font-family: 'nanumSquare'; }
  #viewWrap .contatiner .content .text {
    margin: 40px 0; }
  #viewWrap .contatiner .content .imgBox {
    margin: 40px 0;
    text-align: center; }
  #viewWrap .contatiner .content .imgSource {
    margin: 0 0 30px;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    color: #666;
    word-break: keep-all; }
  #viewWrap .contatiner .content .imgBox + .imgSource {
    margin-top: -30px; }
  #viewWrap .contatiner .content img {
    max-width: 100%; }

.boxTypeA {
  margin: 40px 0;
  background: transparent url(../images/common/img_loading_will.gif) no-repeat center center/32px 32px;
  border-bottom: none;
  text-align: left;
  overflow: hidden; }

.boxTypeA a {
  display: block; }

.boxTypeA .gm-style-mtc div * {
  font-size: 14px !important; }

.boxTypeA .tit {
  font-size: 14px;
  font-weight: 300;
  color: #141823;
  line-height: 18px;
  padding: 15px 20px !important;
  background: linear-gradient(135deg, #e9eef9 0%, #f5f3f7 100%); }

.boxTypeA .tit strong {
  display: block;
  padding: 3px 0;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000; }

.boxTypeA .tit p {
  display: -webkit-inline-box;
  max-width: 100%;
  max-height: 35px;
  font-size: 14px;
  line-height: 18px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: normal; }

.boxTypeA .imgWrap {
  display: block;
  width: 100%;
  max-height: 450px;
  min-height: 50px;
  overflow: hidden; }

.boxTypeA .imgWrap img {
  width: 100%;
  background: #fff; }

.boxTypeA .cont {
  padding: 12px 20px;
  background: linear-gradient(135deg, #e9eef9 0%, #f5f3f7 100%); }

.boxTypeA .cont strong {
  display: block;
  font-size: 15px !important;
  line-height: 18px;
  color: #000;
  font-weight: 700; }

.boxTypeA .cont span {
  display: block;
  padding-top: 3px;
  font-size: 13px !important;
  line-height: 16px; }

.boxTypeA .link {
  padding: 12px 20px;
  background: linear-gradient(135deg, #e9eef9 0%, #f5f3f7 100%); }

.boxTypeA .link strong {
  display: block;
  font-size: 15px !important;
  line-height: 18px;
  color: #000;
  font-weight: 700; }

.boxTypeA .link span {
  display: block;
  max-height: 36px;
  font-size: 13px;
  line-height: 16px;
  padding-top: 3px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; }

.boxTypeA .writerInfo {
  position: relative;
  display: inline-block;
  margin: 0 0 8px 10px;
  padding: 15px 0 5px 40px;
  z-index: 30; }

.boxTypeA iframe {
  display: block;
  width: 601px;
  height: 338px; }

.boxTypeA .writerInfo {
  position: relative;
  display: block;
  margin: 0;
  padding: 12px 50px;
  border-top: 1px solid #fff;
  background: #f5f5fb;
  z-index: 10; }

.boxTypeA .writerInfo .thum {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden; }

.boxTypeA .writerInfo .thum img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; }

.boxTypeA .writerInfo strong {
  display: block;
  color: #000;
  font-size: 14px;
  line-height: 16px; }

.boxTypeA .writerInfo ul {
  line-height: 12px; }

.boxTypeA .writerInfo ul li {
  display: inline-block;
  font-size: 10px !important;
  line-height: 16px;
  color: #888;
  line-height: 12px; }

.boxTypeA .writerInfo ul li:first-child:before {
  content: "";
  display: none; }

.boxTypeA .writerInfo ul li:before {
  content: "·";
  margin-right: 4px;
  color: #888;
  font-size: 12px;
  line-height: 16px; }

.boxTypeA .writerInfo ul li span {
  font-size: 10px !important; }

.boxTypeA .moreTxt {
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  color: #999; }

.boxTypeB {
  display: block;
  position: relative;
  height: 125px;
  margin: 30px 0;
  text-align: left;
  background: linear-gradient(135deg, #e9eef9 0%, #f5f3f7 100%);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
  overflow: hidden; }

.boxTypeB a {
  display: block;
  position: relative;
  line-height: 125px; }

.boxTypeB .linkthumbs {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 125px;
  height: 125px;
  line-height: 125px;
  background: #e1e4ea no-repeat top center / cover;
  overflow: hidden; }

.boxTypeB .linkthumbs img {
  vertical-align: middle; }

.boxTypeB .link {
  display: table-cell;
  width: 600px;
  height: 125px;
  border: none;
  padding: 10px 20px 10px 145px;
  vertical-align: middle;
  overflow: hidden; }

.boxTypeB .link strong {
  display: block;
  padding-bottom: 5px;
  font-size: 15px !important;
  line-height: 18px;
  color: #000;
  word-break: keep-all; }

.boxTypeB .link span {
  display: block;
  font-size: 13px !important;
  line-height: 15px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; }

.bgArea > span {
  position: fixed;
  -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
.bgArea .bg1 {
  left: 0;
  top: 80px;
  width: 0;
  height: 1px;
  border-top: 1px solid #e5e5e5; }
.bgArea .bg2 {
  left: 0;
  width: 0;
  height: 1px;
  border-top: 1px solid #e5e5e5;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s; }
.bgArea .bg3 {
  left: 0;
  width: 0;
  height: 1px;
  border-top: 1px solid #e5e5e5;
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s; }
.bgArea .bg4 {
  left: 50%;
  top: 0;
  width: 1px;
  height: 0;
  border-left: 1px solid #e5e5e5;
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s; }
.bgArea .box {
  background: none;
  -webkit-transform: translate(50%, -50%) rotate(45deg);
  -moz-transform: translate(50%, -50%) rotate(45deg);
  -o-transform: translate(50%, -50%) rotate(45deg);
  transform: translate(50%, -50%) rotate(45deg); }
  .bgArea .box span {
    position: absolute;
    background: #e5e5e5;
    -webkit-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); }
    .bgArea .box span:nth-child(1) {
      -webkit-transition-delay: 0.6s;
      -moz-transition-delay: 0.6s;
      -o-transition-delay: 0.6s;
      transition-delay: 0.6s; }
    .bgArea .box span:nth-child(2) {
      -webkit-transition-delay: 0.8s;
      -moz-transition-delay: 0.8s;
      -o-transition-delay: 0.8s;
      transition-delay: 0.8s; }
    .bgArea .box span:nth-child(3) {
      -webkit-transition-delay: 1s;
      -moz-transition-delay: 1s;
      -o-transition-delay: 1s;
      transition-delay: 1s; }
    .bgArea .box span:nth-child(4) {
      -webkit-transition-delay: 1.2s;
      -moz-transition-delay: 1.2s;
      -o-transition-delay: 1.2s;
      transition-delay: 1.2s; }
  .bgArea .box .bg5 {
    left: 0;
    top: 0;
    width: 0;
    height: 1px; }
  .bgArea .box .bg6 {
    right: 0;
    top: 0;
    width: 1px;
    height: 0; }
  .bgArea .box .bg7 {
    right: 0;
    bottom: 0;
    width: 0;
    height: 1px; }
  .bgArea .box .bg8 {
    left: 0;
    bottom: 0;
    width: 1px;
    height: 0; }
.bgArea.active .bg1 {
  width: 100%; }
.bgArea.active .bg2 {
  width: 100%; }
.bgArea.active .bg3 {
  width: 100%; }
.bgArea.active .bg4 {
  height: 100%; }
.bgArea.active .bg5, .bgArea.active .bg7 {
  width: 100%; }
.bgArea.active .bg6, .bgArea.active .bg8 {
  height: 100%; }
.bgArea.hide {
  opacity: 0;
  -webkit-transition: all 0.2s cubic-bezier(0, 0, 1, 1);
  -moz-transition: all 0.2s cubic-bezier(0, 0, 1, 1);
  -o-transition: all 0.2s cubic-bezier(0, 0, 1, 1);
  transition: all 0.2s cubic-bezier(0, 0, 1, 1); }

/******************** custom ********************/
#wrapper.ccbk .projectHead .visual p.mobile, #wrapper.htb .projectHead .visual p.mobile {
  width: 587px;
  height: auto;
  padding: 0;
  background-image: none; }
#wrapper.ccbk .flow .wrap .mobileType .detail .view, #wrapper.htb .flow .wrap .mobileType .detail .view {
  width: 393px;
  height: auto;
  padding: 0;
  background: none; }
  #wrapper.ccbk .flow .wrap .mobileType .detail .view .layout .wrap .detail .nav1, #wrapper.htb .flow .wrap .mobileType .detail .view .layout .wrap .detail .nav1 {
    top: 105px; }
  #wrapper.ccbk .flow .wrap .mobileType .detail .view .layout .wrap .detail .nav2, #wrapper.htb .flow .wrap .mobileType .detail .view .layout .wrap .detail .nav2 {
    top: 350px; }
  #wrapper.ccbk .flow .wrap .mobileType .detail .view .layout .wrap .detail .nav3, #wrapper.htb .flow .wrap .mobileType .detail .view .layout .wrap .detail .nav3 {
    top: 604px; }
#wrapper.ccbk .layout .detail .view, #wrapper.htb .layout .detail .view {
  width: 398px;
  height: auto;
  padding: 0;
  background: none; }
#wrapper.ccbk .discover.mobile .wrap .deviceArea .device2, #wrapper.htb .discover.mobile .wrap .deviceArea .device2 {
  left: -239px;
  top: 300px; }
#wrapper.ccbk .discover.mobile .wrap .deviceArea .device3, #wrapper.htb .discover.mobile .wrap .deviceArea .device3 {
  top: 429px; }
#wrapper.ccbk .flowMobile .wrap .detail, #wrapper.htb .flowMobile .wrap .detail {
  padding-left: 0; }
  #wrapper.ccbk .flowMobile .wrap .detail p, #wrapper.htb .flowMobile .wrap .detail p {
    width: 393px;
    height: auto;
    padding: 0;
    background: none; }

#wrapper.htb .layout .wrap .detail .nav3 {
  display: none; }
#wrapper.htb .discover .wrap .txtArea {
  color: #ff822f;
  opacity: .2; }
#wrapper.htb .flowMobile {
  background-color: #ffe9d2;
  background-image: url(/2019/images/project/htb/bg_pattern.png); }
#wrapper.htb .flowMobile .wrap .detail h4 {
  color: #ff822f;
  opacity: .6; }
#wrapper.htb .flowMobile .wrap .detail:before, #wrapper.htb .flowMobile .wrap .detail:after {
  border-color: #ffcaa1; }

#wrapper.visang .projectHead .visual p.mobile {
  width: 587px;
  height: auto;
  padding: 0;
  background-image: none; }
#wrapper.visang .flowMobile .wrap ul li {
  float: none;
  width: 100%;
  text-align: center; }

.contactWrap {
  background: #eee; }
  .contactWrap #header.fix {
    background: rgba(238, 238, 238, 0.6); }
  .contactWrap #container {
    position: relative; }
  .contactWrap .projectTit {
    top: 150px;
    right: calc(50% - 1200px);
    line-height: 300px;
    color: #fff; }
  .contactWrap h1 {
    position: fixed;
    right: calc(50% + 190px);
    top: 250px;
    z-index: 2;
    font-size: 56px;
    line-height: 41px;
    font-weight: 700; }
  .contactWrap .content {
    position: relative;
    z-index: 2;
    margin-left: calc(50% + 160px); }
    .contactWrap .content .text {
      font-size: 40px;
      line-height: 55px;
      font-weight: 700; }
    .contactWrap .content dl {
      margin-top: 110px; }
      .contactWrap .content dl dt {
        margin-top: 50px;
        font-size: 14px;
        line-height: 1em;
        font-weight: 700;
        letter-spacing: 1px; }
      .contactWrap .content dl dd {
        margin-top: 16px;
        font-size: 17px; }
        .contactWrap .content dl dd.btns a {
          display: inline-block;
          width: 136px;
          height: 36px;
          margin-right: 3px;
          padding-left: 15px;
          line-height: 36px;
          font-size: 13px;
          font-weight: 700;
          color: #fff;
          background: #000; }
        .contactWrap .content dl dd p {
          display: inline-block;
          width: 260px; }
        .contactWrap .content dl dd a {
          color: #050505; }
    .contactWrap .content .recruitList {
      position: relative;
      margin: 120px 0 140px; }
      .contactWrap .content .recruitList h3 {
        margin-top: 70px;
        opacity: 0;
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -o-transform: translateY(50px);
        transform: translateY(50px);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        font-weight: 700;
        font-size: 30px; }
      .contactWrap .content .recruitList ul {
        overflow: hidden;
        margin-top: 30px;
        opacity: 0;
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -o-transform: translateY(50px);
        transform: translateY(50px);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
        .contactWrap .content .recruitList ul li {
          float: left;
          width: 50%;
          font-size: 18px;
          line-height: 32px; }
          .contactWrap .content .recruitList ul li .tit {
            position: relative;
            margin-bottom: 10px;
            font-weight: 700;
            font-size: 18px;
            line-height: 32px; }
      .contactWrap .content .recruitList .show {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }
    .contactWrap .content .formArea {
      max-width: 665px;
      margin-top: 60px; }
      .contactWrap .content .formArea fieldset p {
        position: relative; }
        .contactWrap .content .formArea fieldset p input {
          width: 100%;
          height: 50px;
          padding: 0 17px;
          border: 1px solid #fff;
          font-size: 16px;
          line-height: 48px;
          background: #fff; }
        .contactWrap .content .formArea fieldset p textarea {
          width: 100%;
          height: 200px;
          padding: 10px 17px;
          border: 1px solid #fff;
          font-size: 16px; }
        .contactWrap .content .formArea fieldset p + p {
          margin-top: 10px; }
        .contactWrap .content .formArea fieldset p input:focus, .contactWrap .content .formArea fieldset p textarea:focus {
          border: 1px solid #fd1322; }
        .contactWrap .content .formArea fieldset p.fileField {
          position: relative;
          overflow: hidden;
          background: #fff; }
          .contactWrap .content .formArea fieldset p.fileField input[type=file] {
            position: relative;
            z-index: 1;
            opacity: 0;
            cursor: pointer;
            background: none; }
          .contactWrap .content .formArea fieldset p.fileField input[type=text] {
            position: absolute;
            left: 0;
            top: 0;
            right: 40px;
            height: 50px;
            border: 0; }
          .contactWrap .content .formArea fieldset p.fileField .btn {
            position: absolute;
            right: 15px;
            top: 16px; }
      .contactWrap .content .formArea fieldset .partSelect {
        position: relative;
        margin-bottom: 10px; }
        .contactWrap .content .formArea fieldset .partSelect a {
          position: relative;
          display: block;
          height: 50px;
          padding: 0 17px;
          border: 1px solid #fff;
          font-size: 16px;
          line-height: 48px;
          background: #fff; }
          .contactWrap .content .formArea fieldset .partSelect a:before {
            content: "";
            position: absolute;
            right: calc(0% + 20px);
            top: 20px;
            width: 16px;
            height: 12px;
            background: url(/2019/images/common/btn_arrow.png) no-repeat 0 0;
            transition: all .2s; }
        .contactWrap .content .formArea fieldset .partSelect ul {
          display: none;
          padding: 20px 0;
          border-top: 1px solid #d7d7d7;
          background: #fff; }
          .contactWrap .content .formArea fieldset .partSelect ul li label {
            display: block;
            padding: 0 17px;
            font-size: 16px;
            line-height: 36px;
            cursor: pointer; }
          .contactWrap .content .formArea fieldset .partSelect ul li label:hover {
            background: #f8f8f8; }
        .contactWrap .content .formArea fieldset .partSelect a.on:before {
          transform: rotate(180deg);
          top: 17px; }
      .contactWrap .content .formArea .fieldArea h2 {
        margin: 40px 0 18px;
        font-size: 18px;
        font-weight: 600;
        line-height: 1em; }
      .contactWrap .content .formArea .goForm {
        position: relative;
        height: 130px;
        text-align: right; }
        .contactWrap .content .formArea .goForm a, .contactWrap .content .formArea .goForm button {
          display: inline-block;
          width: 130px;
          height: 130px;
          border-radius: 50%;
          line-height: 130px;
          font-size: 16px;
          color: #fff;
          letter-spacing: 1px;
          text-align: center;
          background: #000; }
        .contactWrap .content .formArea .goForm a:hover {
          background: #fd1322;
          transition: .1s all; }
        .contactWrap .content .formArea .goForm button {
          position: absolute;
          right: 0;
          bottom: 75px;
          display: none;
          background: #fd1322;
          border: 0;
          cursor: pointer; }
    .contactWrap .content .focus {
      opacity: 0;
      -webkit-transform: translateY(50px);
      -moz-transform: translateY(50px);
      -o-transform: translateY(50px);
      transform: translateY(50px);
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
      .contactWrap .content .focus.show {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }

.delay2 {
  transition-delay: .2s !important; }

.delay3 {
  transition-delay: .3s !important; }

.delay4 {
  transition-delay: .4s !important; }

.delay5 {
  transition-delay: .5s !important; }

.delay6 {
  transition-delay: .6s !important; }

.delay7 {
  transition-delay: .7s !important; }

.delay8 {
  transition-delay: .8s !important; }

.delay9 {
  transition-delay: .9s !important; }

.delay10 {
  transition-delay: 1s !important; }

@-webkit-keyframes opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-o-keyframes opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes opacityTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@-moz-keyframes opacityTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@-o-keyframes opacityTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@keyframes opacityTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@-webkit-keyframes btnHover {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px); }
  99.9% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@-moz-keyframes btnHover {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px); }
  99.9% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@-o-keyframes btnHover {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px); }
  99.9% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@keyframes btnHover {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px); }
  99.9% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@-webkit-keyframes btnHover2 {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  49% {
    opacity: 0; }
  50% {
    opacity: 1;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@-moz-keyframes btnHover2 {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  49% {
    opacity: 0; }
  50% {
    opacity: 1;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@-o-keyframes btnHover2 {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  49% {
    opacity: 0; }
  50% {
    opacity: 1;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@keyframes btnHover2 {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  49% {
    opacity: 0; }
  50% {
    opacity: 1;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@-webkit-keyframes itemBox {
  5% {
    border-radius: 50% 50% 0 0; }
  25% {
    border-radius: 50% 50% 0 0; }
  30% {
    border-radius: 0; }
  50% {
    border-radius: 0; }
  55% {
    border-radius: 50%; }
  75% {
    border-radius: 50%; }
  80% {
    border-radius: 0; } }
@-moz-keyframes itemBox {
  5% {
    border-radius: 50% 50% 0 0; }
  25% {
    border-radius: 50% 50% 0 0; }
  30% {
    border-radius: 0; }
  50% {
    border-radius: 0; }
  55% {
    border-radius: 50%; }
  75% {
    border-radius: 50%; }
  80% {
    border-radius: 0; } }
@-o-keyframes itemBox {
  5% {
    border-radius: 50% 50% 0 0; }
  25% {
    border-radius: 50% 50% 0 0; }
  30% {
    border-radius: 0; }
  50% {
    border-radius: 0; }
  55% {
    border-radius: 50%; }
  75% {
    border-radius: 50%; }
  80% {
    border-radius: 0; } }
@keyframes itemBox {
  5% {
    border-radius: 50% 50% 0 0; }
  25% {
    border-radius: 50% 50% 0 0; }
  30% {
    border-radius: 0; }
  50% {
    border-radius: 0; }
  55% {
    border-radius: 50%; }
  75% {
    border-radius: 50%; }
  80% {
    border-radius: 0; } }
@-webkit-keyframes itemBox2 {
  5% {
    border-radius: 0 0 50% 50%; }
  25% {
    border-radius: 0 0 50% 50%; }
  30% {
    border-radius: 0; }
  50% {
    border-radius: 0; }
  55% {
    border-radius: 50%; }
  75% {
    border-radius: 50%; }
  80% {
    border-radius: 0; } }
@-moz-keyframes itemBox2 {
  5% {
    border-radius: 0 0 50% 50%; }
  25% {
    border-radius: 0 0 50% 50%; }
  30% {
    border-radius: 0; }
  50% {
    border-radius: 0; }
  55% {
    border-radius: 50%; }
  75% {
    border-radius: 50%; }
  80% {
    border-radius: 0; } }
@-o-keyframes itemBox2 {
  5% {
    border-radius: 0 0 50% 50%; }
  25% {
    border-radius: 0 0 50% 50%; }
  30% {
    border-radius: 0; }
  50% {
    border-radius: 0; }
  55% {
    border-radius: 50%; }
  75% {
    border-radius: 50%; }
  80% {
    border-radius: 0; } }
@keyframes itemBox2 {
  5% {
    border-radius: 0 0 50% 50%; }
  25% {
    border-radius: 0 0 50% 50%; }
  30% {
    border-radius: 0; }
  50% {
    border-radius: 0; }
  55% {
    border-radius: 50%; }
  75% {
    border-radius: 50%; }
  80% {
    border-radius: 0; } }
@-webkit-keyframes btnZoom {
  0% {
    transform: scale(0%); }
  16% {
    transform: scale(-132.27%); }
  28% {
    transform: scale(-86.88%); }
  44% {
    transform: scale(-104.63%); }
  59% {
    transform: scale(-98.36%); }
  73% {
    transform: scale(-100.58%); }
  88% {
    transform: scale(-99.8%); }
  100% {
    transform: scale(-100%); } }
@-moz-keyframes btnZoom {
  0% {
    transform: scale(0%); }
  16% {
    transform: scale(-132.27%); }
  28% {
    transform: scale(-86.88%); }
  44% {
    transform: scale(-104.63%); }
  59% {
    transform: scale(-98.36%); }
  73% {
    transform: scale(-100.58%); }
  88% {
    transform: scale(-99.8%); }
  100% {
    transform: scale(-100%); } }
@-o-keyframes btnZoom {
  0% {
    transform: scale(0%); }
  16% {
    transform: scale(-132.27%); }
  28% {
    transform: scale(-86.88%); }
  44% {
    transform: scale(-104.63%); }
  59% {
    transform: scale(-98.36%); }
  73% {
    transform: scale(-100.58%); }
  88% {
    transform: scale(-99.8%); }
  100% {
    transform: scale(-100%); } }
@keyframes btnZoom {
  0% {
    transform: scale(0%); }
  16% {
    transform: scale(-132.27%); }
  28% {
    transform: scale(-86.88%); }
  44% {
    transform: scale(-104.63%); }
  59% {
    transform: scale(-98.36%); }
  73% {
    transform: scale(-100.58%); }
  88% {
    transform: scale(-99.8%); }
  100% {
    transform: scale(-100%); } }
.focus {
  /*transition:all .8s cubic-bezier(0.04, 1, 0.32, 1);*/
  transition: all 0.8s cubic-bezier(0.16, 0.87, 0.32, 1); }
  .focus.delay {
    transition-delay: .25s; }

/* efu-culture */
.efu-culture {
  transition: all 1s cubic-bezier(0, 0, 1, 1); }
  .efu-culture:before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: 0;
    background: #eee;
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); }
  .efu-culture .listMode {
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); }
  .efu-culture #container {
    max-width: 1920px;
    padding-top: 280px;
    margin: 0 auto; }
  .efu-culture .head {
    position: relative; }
    .efu-culture .head .copy {
      overflow: hidden;
      height: 240px; }
      .efu-culture .head .copy p {
        position: relative;
        height: 120px; }
        .efu-culture .head .copy p span {
          display: inline-block;
          position: relative;
          z-index: 10;
          font: 124px 'Poppins';
          font-weight: 300;
          line-height: 120px;
          background: #fff; }
          .efu-culture .head .copy p span:nth-child(2) {
            z-index: 9;
            transform: translateX(-69px); }
          .efu-culture .head .copy p span:nth-child(3) {
            z-index: 8;
            transform: translateX(-138px); }
          .efu-culture .head .copy p span:nth-child(4) {
            z-index: 7;
            transform: translateX(-212px); }
          .efu-culture .head .copy p span:nth-child(5) {
            z-index: 6;
            transform: translateX(-285px); }
          .efu-culture .head .copy p span:nth-child(6) {
            z-index: 5;
            transform: translateX(-374px); }
          .efu-culture .head .copy p span:nth-child(7) {
            z-index: 4;
            transform: translateX(-478px); }
          .efu-culture .head .copy p span:nth-child(8) {
            z-index: 3;
            transform: translateX(-547px); }
        .efu-culture .head .copy p:nth-child(2) {
          opacity: 0;
          margin-left: 260px; }
      .efu-culture .head .copy.show p span {
        transform: translateX(0);
        transition: all 0.2s cubic-bezier(0, 1, 0.03, 0.98); }
        .efu-culture .head .copy.show p span:nth-child(1) {
          -webkit-transition-delay: 0.35s;
          -moz-transition-delay: 0.35s;
          -o-transition-delay: 0.35s;
          transition-delay: 0.35s; }
        .efu-culture .head .copy.show p span:nth-child(2) {
          -webkit-transition-delay: 0.4s;
          -moz-transition-delay: 0.4s;
          -o-transition-delay: 0.4s;
          transition-delay: 0.4s; }
        .efu-culture .head .copy.show p span:nth-child(3) {
          -webkit-transition-delay: 0.45s;
          -moz-transition-delay: 0.45s;
          -o-transition-delay: 0.45s;
          transition-delay: 0.45s; }
        .efu-culture .head .copy.show p span:nth-child(4) {
          -webkit-transition-delay: 0.5s;
          -moz-transition-delay: 0.5s;
          -o-transition-delay: 0.5s;
          transition-delay: 0.5s; }
        .efu-culture .head .copy.show p span:nth-child(5) {
          -webkit-transition-delay: 0.55s;
          -moz-transition-delay: 0.55s;
          -o-transition-delay: 0.55s;
          transition-delay: 0.55s; }
        .efu-culture .head .copy.show p span:nth-child(6) {
          -webkit-transition-delay: 0.6s;
          -moz-transition-delay: 0.6s;
          -o-transition-delay: 0.6s;
          transition-delay: 0.6s; }
        .efu-culture .head .copy.show p span:nth-child(7) {
          -webkit-transition-delay: 0.65s;
          -moz-transition-delay: 0.65s;
          -o-transition-delay: 0.65s;
          transition-delay: 0.65s; }
        .efu-culture .head .copy.show p span:nth-child(8) {
          -webkit-transition-delay: 0.7s;
          -moz-transition-delay: 0.7s;
          -o-transition-delay: 0.7s;
          transition-delay: 0.7s; }
        .efu-culture .head .copy.show p span:nth-child(9) {
          -webkit-transition-delay: 0.75s;
          -moz-transition-delay: 0.75s;
          -o-transition-delay: 0.75s;
          transition-delay: 0.75s; }
        .efu-culture .head .copy.show p span:nth-child(10) {
          -webkit-transition-delay: 0.8s;
          -moz-transition-delay: 0.8s;
          -o-transition-delay: 0.8s;
          transition-delay: 0.8s; }
        .efu-culture .head .copy.show p span:nth-child(11) {
          -webkit-transition-delay: 0.85s;
          -moz-transition-delay: 0.85s;
          -o-transition-delay: 0.85s;
          transition-delay: 0.85s; }
        .efu-culture .head .copy.show p span:nth-child(12) {
          -webkit-transition-delay: 0.9s;
          -moz-transition-delay: 0.9s;
          -o-transition-delay: 0.9s;
          transition-delay: 0.9s; }
        .efu-culture .head .copy.show p span:nth-child(13) {
          -webkit-transition-delay: 0.95s;
          -moz-transition-delay: 0.95s;
          -o-transition-delay: 0.95s;
          transition-delay: 0.95s; }
        .efu-culture .head .copy.show p span:nth-child(14) {
          -webkit-transition-delay: 1s;
          -moz-transition-delay: 1s;
          -o-transition-delay: 1s;
          transition-delay: 1s; }
        .efu-culture .head .copy.show p span:nth-child(15) {
          -webkit-transition-delay: 1.05s;
          -moz-transition-delay: 1.05s;
          -o-transition-delay: 1.05s;
          transition-delay: 1.05s; }
      .efu-culture .head .copy.show p:nth-child(2) {
        opacity: 1;
        transition-delay: 0.8s; }
        .efu-culture .head .copy.show p:nth-child(2) span:nth-child(2) {
          transition-delay: 0.85s; }
    .efu-culture .head #cali {
      position: relative;
      z-index: 10;
      max-width: 1090px;
      height: 370px;
      margin: -250px auto 0; }
    .efu-culture .head .copy2 {
      opacity: 0;
      transform: translateY(50px);
      position: absolute;
      left: 25%;
      top: 360px;
      color: #8c8b8b;
      font-size: 16px;
      font-weight: 500;
      -webkit-transition: all 0.2s cubic-bezier(0, 0, 1, 1);
      -moz-transition: all 0.2s cubic-bezier(0, 0, 1, 1);
      -o-transition: all 0.2s cubic-bezier(0, 0, 1, 1);
      transition: all 0.2s cubic-bezier(0, 0, 1, 1); }
      .efu-culture .head .copy2.show {
        opacity: 1;
        transform: translateY(0); }
      .efu-culture .head .copy2.show.load {
        transition-delay: 1.5s; }
    .efu-culture .head .list {
      position: relative;
      margin-left: 65%; }
      .efu-culture .head .list .text {
        opacity: 0;
        transform: translateY(50px);
        font-size: 18px; }
        .efu-culture .head .list .text.show {
          opacity: 1;
          transform: translateY(0); }
      .efu-culture .head .list .btn {
        opacity: 0;
        transform: translateY(50px);
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-top: 30px;
        line-height: 100px;
        text-align: center;
        font-size: 18px;
        color: #fff;
        background: #000; }
        .efu-culture .head .list .btn.show {
          opacity: 1;
          transform: translateY(0); }
      .efu-culture .head .list .text.show.load {
        transition-delay: 1.5s; }
      .efu-culture .head .list .btn.show.load {
        transition-delay: 1.7s; }
    .efu-culture .head.on .copy2 {
      opacity: 1;
      transform: translateY(0);
      transition-delay: .3s; }
    .efu-culture .head.on .list .text {
      opacity: 0 !important;
      transform: translateX(100px) !important;
      transition-delay: 0s !important; }
    .efu-culture .head.on .list .btn {
      opacity: 0 !important;
      transform: translateX(100px) !important;
      transition-delay: .1s !important; }
    .efu-culture .head.on .list ul {
      opacity: 1;
      z-index: 1;
      visibility: visible;
      transform: translateX(0);
      transition-delay: .2s; }
      .efu-culture .head.on .list ul li {
        opacity: 1;
        transform: translateX(0); }
      .efu-culture .head.on .list ul:after {
        transform: translateX(0);
        transition-delay: .8s; }
  .efu-culture .listArea {
    position: relative;
    margin: 130px 40px 0; }
    .efu-culture .listArea .list {
      font-size: 0; }
      .efu-culture .listArea .list .item {
        opacity: 0;
        transform: translateY(80px);
        transition-duration: 1.2s;
        position: relative;
        display: inline-block;
        margin: 0 80px 80px 0; }
        .efu-culture .listArea .list .item > a {
          position: relative;
          display: block;
          overflow: hidden;
          -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
          -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
          -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
          .efu-culture .listArea .list .item > a:before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 0;
            height: 0;
            border-radius: 200px;
            background: rgba(0, 0, 0, 0.7);
            -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .efu-culture .listArea .list .item span {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          opacity: 0;
          font-size: 24px;
          line-height: 400px;
          text-align: center;
          color: #fff;
          -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
          -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
          -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition-delay: .1s; }
          .efu-culture .listArea .list .item span a {
            display: block;
            color: #fff; }
        .efu-culture .listArea .list .item:hover > a:before {
          left: 0;
          top: 0;
          width: 400px;
          height: 400px;
          border-radius: 0; }
        .efu-culture .listArea .list .item:hover span {
          opacity: 1; }
        .efu-culture .listArea .list .item:nth-child(5) {
          transform: translate(440px, 60px); }
          .efu-culture .listArea .list .item:nth-child(5).show {
            transform: translate(440px, -40px); }
          .efu-culture .listArea .list .item:nth-child(5) > a {
            transform: rotate(45deg); }
          .efu-culture .listArea .list .item:nth-child(5) span {
            line-height: 340px !important; }
          .efu-culture .listArea .list .item:nth-child(5):hover > a:before {
            left: 0;
            top: 0;
            width: 340px;
            height: 340px; }
        .efu-culture .listArea .list .item.item2 > a {
          border-radius: 50%; }
        .efu-culture .listArea .list .item.item3 > a {
          border-radius: 50% 50% 0 0; }
        .efu-culture .listArea .list .item.show {
          opacity: 1;
          transform: translateY(0); }
          .efu-culture .listArea .list .item.show > a {
            -webkit-animation: itemBox 15s cubic-bezier(0.77, 0, 0.175, 1) 4s 100 normal both;
            -moz-animation: itemBox 15s cubic-bezier(0.77, 0, 0.175, 1) 4s 100 normal both;
            -o-animation: itemBox 15s cubic-bezier(0.77, 0, 0.175, 1) 4s 100 normal both;
            animation: itemBox 15s cubic-bezier(0.77, 0, 0.175, 1) 4s 100 normal both; }
          .efu-culture .listArea .list .item.show:nth-child(2) > a {
            -webkit-animation: itemBox2 15s cubic-bezier(0.77, 0, 0.175, 1) 7s 100 normal both;
            -moz-animation: itemBox2 15s cubic-bezier(0.77, 0, 0.175, 1) 7s 100 normal both;
            -o-animation: itemBox2 15s cubic-bezier(0.77, 0, 0.175, 1) 7s 100 normal both;
            animation: itemBox2 15s cubic-bezier(0.77, 0, 0.175, 1) 7s 100 normal both; }
          .efu-culture .listArea .list .item.show:nth-child(4) > a {
            -webkit-animation-delay: 10s;
            -moz-animation-delay: 10s;
            -o-animation-delay: 10s;
            animation-delay: 10s; }
          .efu-culture .listArea .list .item.show:nth-child(5) > a {
            -webkit-animation-delay: 8s;
            -moz-animation-delay: 8s;
            -o-animation-delay: 8s;
            animation-delay: 8s; }
      .efu-culture .listArea .list + .list .item.show:nth-child(3) > a {
        -webkit-animation: itemBox2 15s cubic-bezier(0.77, 0, 0.175, 1) 5s 100 normal both;
        -moz-animation: itemBox2 15s cubic-bezier(0.77, 0, 0.175, 1) 5s 100 normal both;
        -o-animation: itemBox2 15s cubic-bezier(0.77, 0, 0.175, 1) 5s 100 normal both;
        animation: itemBox2 15s cubic-bezier(0.77, 0, 0.175, 1) 5s 100 normal both; }
      .efu-culture .listArea .list + .list .item.show:nth-child(4) > a {
        -webkit-animation-delay: 8s;
        -moz-animation-delay: 8s;
        -o-animation-delay: 8s;
        animation-delay: 8s; }
    .efu-culture .listArea .text {
      opacity: 0;
      transform: translateX(-100px);
      transition-delay: .1s;
      position: absolute;
      left: 75px;
      top: 56.5%; }
      .efu-culture .listArea .text p {
        position: relative;
        font-size: 60px;
        line-height: 76px;
        font-weight: 300; }
        .efu-culture .listArea .text p span {
          color: #eb0110; }
        .efu-culture .listArea .text p:before, .efu-culture .listArea .text p:after {
          content: "\"";
          position: absolute;
          left: -55px;
          top: 5px;
          font-family: 'Roboto';
          font-size: 70px;
          font-weight: 400; }
        .efu-culture .listArea .text p:after {
          left: initial;
          top: initial;
          right: -30px;
          bottom: -10px; }
      .efu-culture .listArea .text .name {
        position: absolute;
        left: 240px;
        top: 180px;
        font-size: 14px;
        line-height: 1em; }
      .efu-culture .listArea .text.show {
        opacity: 1;
        transform: translateX(0); }
    .efu-culture .listArea:after {
      content: "";
      display: block;
      clear: both; }
  .efu-culture.hideList:before {
    height: 100%; }
  .efu-culture.hideList .head .copy p span {
    background: none;
    transition-duration: 0 !important;
    transition-delay: 0s !important; }
  .efu-culture.hideList .listMode {
    opacity: 0;
    transform: translateY(100px);
    transition-delay: .4s; }
  .efu-culture.hideList #header.fix {
    background: none; }
  .efu-culture.hideList .bgArea {
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); }

.efu-culture.view {
  background: #eee; }
  .efu-culture.view #header.fix {
    background: rgba(238, 238, 238, 0.6); }
  .efu-culture.view .bgArea {
    display: none; }
  .efu-culture.view .head {
    position: relative;
    z-index: 1;
    margin: 0 80px; }
    .efu-culture.view .head h2 {
      position: relative; }
      .efu-culture.view .head h2 .tit {
        font-size: 150px;
        line-height: 120px;
        font-weight: 700; }
        .efu-culture.view .head h2 .tit > span {
          display: block;
          overflow: hidden;
          height: 120px; }
          .efu-culture.view .head h2 .tit > span span {
            display: block;
            opacity: 0;
            transform: translateY(120px);
            transition: all 0.6s cubic-bezier(0.77, 0, 0.48, 1.32); }
          .efu-culture.view .head h2 .tit > span.txt2 span {
            transition-delay: .15s; }
          .efu-culture.view .head h2 .tit > span.txt3 span {
            transition-delay: .3s; }
        .efu-culture.view .head h2 .tit.show > span span {
          opacity: 1;
          transform: translateY(0); }
      .efu-culture.view .head h2 .tag {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 160px;
        z-index: 10;
        width: 620px;
        font-size: 18px;
        line-height: 22px;
        transition: all 0.4s cubic-bezier(0.77, 0, 0.48, 1.32);
        transition-delay: .45s; }
        .efu-culture.view .head h2 .tag.show {
          opacity: 1;
          transform: translateY(0); }
      .efu-culture.view .head h2 .flea .txt1 {
        margin-left: 170px; }
      .efu-culture.view .head h2 .flea .txt3 {
        margin-left: 70px; }
      .efu-culture.view .head h2 .flea .tag {
        left: 400px; }
      .efu-culture.view .head h2 .exciting .txt1 {
        margin-left: 150px; }
      .efu-culture.view .head h2 .exciting .txt3 {
        margin-left: 80px; }
      .efu-culture.view .head h2 .exciting .tag {
        left: 360px; }
      .efu-culture.view .head h2 .friday .txt1 {
        margin-left: 480px; }
      .efu-culture.view .head h2 .friday .txt3 {
        margin-left: 210px; }
      .efu-culture.view .head h2 .friday .tag {
        left: 660px; }
      .efu-culture.view .head h2 .party .txt1 {
        margin-left: 160px; }
      .efu-culture.view .head h2 .party .txt3 {
        margin-left: 70px; }
      .efu-culture.view .head h2 .party .tag {
        left: 500px; }
      .efu-culture.view .head h2 .travel .txt1 {
        margin-left: 170px; }
      .efu-culture.view .head h2 .travel .txt3 {
        margin-left: 80px; }
      .efu-culture.view .head h2 .travel .tag {
        left: 410px; }
      .efu-culture.view .head h2 .club .txt1 {
        margin-left: 140px; }
      .efu-culture.view .head h2 .club .txt3 {
        margin-left: 75px; }
      .efu-culture.view .head h2 .club .tag {
        left: 280px; }
      .efu-culture.view .head h2 .daily .txt1 {
        margin-left: 270px; }
      .efu-culture.view .head h2 .daily .txt3 {
        margin-left: 170px; }
      .efu-culture.view .head h2 .daily .tag {
        left: 450px; }
    .efu-culture.view .head .motion {
      opacity: 0;
      transform: translateY(30px);
      position: absolute;
      right: -100px;
      top: -200px;
      width: 1000px;
      height: 1000px;
      transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
      transition-delay: .2s; }
      .efu-culture.view .head .motion.show {
        opacity: 1;
        transform: translateY(0); }
      .efu-culture.view .head .motion.dailiy, .efu-culture.view .head .motion.travel, .efu-culture.view .head .motion.daily {
        top: -100px; }
      .efu-culture.view .head .motion.friday {
        top: -50px; }
      .efu-culture.view .head .motion.exciting {
        top: -300px; }
    .efu-culture.view .head .btn {
      opacity: 0;
      margin-top: 70px;
      transition-delay: .4s; }
      .efu-culture.view .head .btn a {
        position: relative;
        display: block;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 18px;
        color: #fff; }
        .efu-culture.view .head .btn a:before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background: #000;
          -webkit-transition: all 0.1s cubic-bezier(0.77, 0, 0.175, 1);
          -moz-transition: all 0.1s cubic-bezier(0.77, 0, 0.175, 1);
          -o-transition: all 0.1s cubic-bezier(0.77, 0, 0.175, 1);
          transition: all 0.1s cubic-bezier(0.77, 0, 0.175, 1); }
        .efu-culture.view .head .btn a span {
          position: relative;
          z-index: 1;
          display: inline-block; }
        .efu-culture.view .head .btn a:after {
          opacity: 0;
          content: "GO";
          position: absolute;
          left: 0;
          top: 0;
          width: 100px;
          height: 100px;
          line-height: 100px;
          text-align: center;
          font-size: 18px;
          color: #fff; }
        .efu-culture.view .head .btn a:hover:before {
          transform: scale(1.1); }
        .efu-culture.view .head .btn a:hover span {
          opacity: 0; }
        .efu-culture.view .head .btn a:hover:after {
          -webkit-animation: btnHover2 0.1s ease 0s 1 normal both;
          -moz-animation: btnHover2 0.1s ease 0s 1 normal both;
          -o-animation: btnHover2 0.1s ease 0s 1 normal both;
          animation: btnHover2 0.1s ease 0s 1 normal both; }
      .efu-culture.view .head .btn.show {
        opacity: 1;
        transform: translateY(0); }
        .efu-culture.view .head .btn.show a:before {
          -webkit-animation: btnZoom 1.2s ease 0.6s 1 normal both;
          -moz-animation: btnZoom 1.2s ease 0.6s 1 normal both;
          -o-animation: btnZoom 1.2s ease 0.6s 1 normal both;
          animation: btnZoom 1.2s ease 0.6s 1 normal both;
          transition: initial; }
  .efu-culture.view .content {
    margin: 0 50px;
    padding-top: 300px;
    font-size: 0; }
    .efu-culture.view .content div, .efu-culture.view .content p {
      font-size: 0; }
    .efu-culture.view .content img {
      max-width: 100%; }
    .efu-culture.view .content > div {
      position: relative;
      z-index: 1;
      overflow: hidden; }
    .efu-culture.view .content .focus {
      opacity: 0;
      -webkit-transform: translateY(100px);
      -moz-transform: translateY(100px);
      -o-transform: translateY(100px);
      transform: translateY(100px); }
      .efu-culture.view .content .focus.show {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        transition-duration: 1s; }
    .efu-culture.view .content .txt {
      clear: both;
      padding: 130px 0;
      text-align: center;
      font: 30px 'Nanum Myeongjo';
      line-height: 60px; }
    .efu-culture.view .content .nav {
      opacity: 0;
      position: fixed;
      left: 0;
      right: 0;
      top: calc(50% - 350px);
      overflow: hidden;
      height: 700px;
      padding-top: 150px;
      text-align: center; }
      .efu-culture.view .content .nav ul li {
        padding: 20px 0;
        font-weight: 700;
        font-size: 500px;
        line-height: 360px;
        color: #fff; }
      .efu-culture.view .content .nav:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 200px;
        background: linear-gradient(180deg, #eeeeee 0%, rgba(238, 238, 238, 0) 100%); }
      .efu-culture.view .content .nav:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 200px;
        background: linear-gradient(180deg, rgba(238, 238, 238, 0) 0%, #eeeeee 100%); }
      .efu-culture.view .content .nav.show {
        opacity: 1;
        transition: all 0.4s cubic-bezier(0.04, 1, 0.32, 1); }
    .efu-culture.view .content.flea p:nth-child(2) {
      float: left;
      margin: 50px 0 0 180px; }
    .efu-culture.view .content.flea p:nth-child(3) {
      float: right;
      margin-top: 270px; }
    .efu-culture.view .content.flea p:nth-child(4) {
      clear: both;
      padding-top: 140px;
      text-align: right; }
    .efu-culture.view .content.flea p:nth-child(5) {
      margin-top: 220px; }
    .efu-culture.view .content.flea p:nth-child(6) {
      float: right;
      margin-top: -410px; }
    .efu-culture.view .content.flea p:nth-child(7) {
      clear: both;
      padding: 70px 0 0 380px; }
    .efu-culture.view .content.flea p:nth-child(9) {
      float: right; }
    .efu-culture.view .content.flea p:nth-child(10) {
      float: left;
      margin-top: 320px; }
    .efu-culture.view .content.flea p:nth-child(11) {
      clear: both;
      padding-top: 260px;
      text-align: right; }
    .efu-culture.view .content.party {
      padding-top: 0; }
      .efu-culture.view .content.party > div {
        padding-top: 600px; }
      .efu-culture.view .content.party .party2017 {
        padding-top: 300px; }
        .efu-culture.view .content.party .party2017 p:nth-child(2) {
          margin-top: 80px; }
        .efu-culture.view .content.party .party2017 p:nth-child(4) {
          float: right; }
        .efu-culture.view .content.party .party2017 p:nth-child(5) {
          clear: both;
          padding-top: 330px; }
        .efu-culture.view .content.party .party2017 p:nth-child(6) {
          float: right;
          margin-top: 240px; }
        .efu-culture.view .content.party .party2017 p:nth-child(7) {
          clear: both;
          padding-top: 380px; }
        .efu-culture.view .content.party .party2017 p:nth-child(8) {
          float: right;
          margin-top: -90px; }
      .efu-culture.view .content.party .party2016 p:nth-child(2) {
        float: right;
        margin-top: 170px; }
      .efu-culture.view .content.party .party2016 p:nth-child(3) {
        float: left;
        margin: 480px 0 0 430px; }
      .efu-culture.view .content.party .party2016 p:nth-child(5) {
        float: left; }
      .efu-culture.view .content.party .party2016 p:nth-child(6) {
        float: right;
        margin-top: 160px; }
      .efu-culture.view .content.party .party2016 p:nth-child(7) {
        clear: both;
        padding: 80px 0 0 910px; }
      .efu-culture.view .content.party .party2015 p:nth-child(2) {
        float: right;
        margin-top: 160px; }
      .efu-culture.view .content.party .party2015 p:nth-child(3) {
        float: left;
        margin: 360px 0 0 125px; }
      .efu-culture.view .content.party .party2015 p:nth-child(5) {
        float: right; }
      .efu-culture.view .content.party .party2015 p:nth-child(6) {
        float: left;
        margin: -140px 0 0 125px; }
      .efu-culture.view .content.party .party2014 p:nth-child(2) {
        float: right;
        margin-top: 160px; }
      .efu-culture.view .content.party .party2014 p:nth-child(3) {
        float: right;
        margin: 360px 130px 0 0; }
      .efu-culture.view .content.party .party2014 p:nth-child(5) {
        float: left; }
      .efu-culture.view .content.party .party2014 p:nth-child(6) {
        float: right;
        margin-top: 310px; }
      .efu-culture.view .content.party .party2014 p:nth-child(7) {
        clear: both;
        padding: 150px 0 0 1030px; }
      .efu-culture.view .content.party .party2013 p:nth-child(2) {
        margin-top: 70px; }
      .efu-culture.view .content.party .party2013 p:nth-child(4) {
        float: left; }
      .efu-culture.view .content.party .party2013 p:nth-child(5) {
        float: right;
        margin-top: 300px; }
      .efu-culture.view .content.party .party2013 p:nth-child(6) {
        float: left;
        margin: 260px 0 0 430px; }
      .efu-culture.view .content.party .party2012 p:nth-child(2) {
        float: right;
        margin-top: 110px; }
      .efu-culture.view .content.party .party2012 p:nth-child(4) {
        float: left; }
      .efu-culture.view .content.party .party2012 p:nth-child(5) {
        float: left;
        margin: 180px 0 0 330px; }
      .efu-culture.view .content.party .party2012 p:nth-child(6) {
        float: right;
        margin-top: 280px; }
      .efu-culture.view .content.party .party2012 p:nth-child(7) {
        clear: both;
        padding-top: 560px; }
    .efu-culture.view .content.exciting {
      padding-top: 0; }
      .efu-culture.view .content.exciting > div {
        padding-top: 300px; }
      .efu-culture.view .content.exciting .exciting6 p:nth-child(2) {
        float: right;
        margin: 120px 210px 0 0; }
      .efu-culture.view .content.exciting .exciting6 p:nth-child(3) {
        clear: both;
        padding-top: 300px; }
      .efu-culture.view .content.exciting .exciting6 p:nth-child(5) {
        float: right; }
      .efu-culture.view .content.exciting .exciting6 p:nth-child(6) {
        clear: both;
        padding: 110px 0 0 200px; }
      .efu-culture.view .content.exciting .exciting6 p:nth-child(7) {
        float: left;
        margin: -140px 0 0 930px; }
      .efu-culture.view .content.exciting .exciting5 p:nth-child(2) {
        float: right;
        margin: 310px 250px 0 0; }
      .efu-culture.view .content.exciting .exciting5 p:nth-child(5) {
        float: right;
        margin: 70px 105px 0 0; }
      .efu-culture.view .content.exciting .exciting4 p:nth-child(2) {
        float: left;
        width: 50%;
        padding: 390px 0 0; }
      .efu-culture.view .content.exciting .exciting4 p:nth-child(3) {
        float: right;
        margin-top: 200px; }
      .efu-culture.view .content.exciting .exciting4 p:nth-child(4) {
        clear: both;
        padding: 210px 0 0 130px; }
      .efu-culture.view .content.exciting .exciting4 p:nth-child(5) {
        float: right;
        margin-top: 320px; }
      .efu-culture.view .content.exciting .exciting4 p:nth-child(6) {
        float: left;
        margin-top: 1040px; }
      .efu-culture.view .content.exciting .exciting4 p:nth-child(7) {
        clear: both;
        padding-top: 160px;
        text-align: center; }
      .efu-culture.view .content.exciting .exciting3 p:nth-child(3) {
        float: right; }
      .efu-culture.view .content.exciting .exciting3 p:nth-child(4) {
        float: left;
        margin-top: 530px; }
      .efu-culture.view .content.exciting .exciting3 p:nth-child(5) {
        clear: both;
        padding-top: 170px;
        text-align: right; }
      .efu-culture.view .content.exciting .exciting2 p:nth-child(2) {
        margin-top: 100px; }
      .efu-culture.view .content.exciting .exciting2 p:nth-child(3) {
        float: right;
        margin-top: 220px; }
        .efu-culture.view .content.exciting .exciting2 p:nth-child(3) img {
          margin-left: 50px; }
      .efu-culture.view .content.exciting .exciting2 p:nth-child(5) {
        text-align: center; }
      .efu-culture.view .content.exciting .exciting1 p:nth-child(2) {
        margin: 100px 280px 0 0;
        text-align: right; }
      .efu-culture.view .content.exciting .exciting1 p:nth-child(4) {
        float: left;
        margin: -120px 0 0 180px; }
      .efu-culture.view .content.exciting .exciting1 p:nth-child(5) {
        float: left;
        margin: 180px 0 0 110px; }
      .efu-culture.view .content.exciting .exciting1 p:nth-child(6) {
        float: right; }
    .efu-culture.view .content.friday p:nth-child(2) {
      margin-top: 260px;
      text-align: right; }
    .efu-culture.view .content.friday p:nth-child(3) {
      float: left;
      margin-top: 130px; }
    .efu-culture.view .content.friday p:nth-child(4) {
      float: right;
      margin: 360px 150px 0 0; }
    .efu-culture.view .content.friday p:nth-child(5) {
      float: right;
      margin: 110px 140px 0 0; }
    .efu-culture.view .content.friday p:nth-child(8) {
      float: right;
      margin-top: -250px; }
    .efu-culture.view .content.friday p:nth-child(9) {
      float: left;
      margin: 250px 0 0 180px; }
    .efu-culture.view .content.friday p:nth-child(10) {
      clear: both;
      padding-top: 180px;
      text-align: right; }
    .efu-culture.view .content.friday p:nth-child(11) {
      margin: -160px 0 0 430px; }
    .efu-culture.view .content.travel p:nth-child(2) {
      margin-top: -85px;
      text-align: right; }
    .efu-culture.view .content.travel p:nth-child(3) {
      margin: 180px 0 0 130px; }
    .efu-culture.view .content.travel p:nth-child(4) {
      margin: -130px 160px 0 0;
      text-align: right; }
    .efu-culture.view .content.travel p:nth-child(5) {
      margin: -70px 0 0 330px; }
    .efu-culture.view .content.travel p:nth-child(8) {
      margin-top: -110px;
      text-align: right; }
    .efu-culture.view .content.travel p:nth-child(9) {
      margin-top: 330px;
      text-align: center; }
    .efu-culture.view .content.travel p:nth-child(10) {
      margin-top: 360px;
      text-align: center; }
    .efu-culture.view .content.club p:nth-child(2) {
      margin-top: 45px; }
    .efu-culture.view .content.club p:nth-child(3) {
      margin-top: -30px;
      text-align: right; }
    .efu-culture.view .content.club p:nth-child(5) {
      float: right;
      width: 1050px;
      text-align: right; }
      .efu-culture.view .content.club p:nth-child(5) img:nth-child(1) {
        margin: 165px 130px 0 0; }
      .efu-culture.view .content.club p:nth-child(5) img:nth-child(3) {
        margin: -170px 167px 0 0; }
    .efu-culture.view .content.club p:nth-child(8) {
      margin-top: -160px;
      text-align: right; }
    .efu-culture.view .content.club p:nth-child(9) {
      margin: -80px 0 0 580px; }
    .efu-culture.view .content.club p:nth-child(10) {
      margin-top: 220px; }
    .efu-culture.view .content.club p:nth-child(11) {
      margin-top: 180px;
      text-align: right; }
      .efu-culture.view .content.club p:nth-child(11) img:nth-child(2) {
        margin-left: 35px; }
    .efu-culture.view .content.club p:nth-child(13) {
      margin-left: 330px; }
    .efu-culture.view .content.club p:nth-child(14) {
      margin-top: 240px; }
    .efu-culture.view .content.club p:nth-child(16) {
      text-align: right; }
    .efu-culture.view .content.club p:nth-child(17) {
      margin: 110px 0 0 280px; }
    .efu-culture.view .content.club p:nth-child(18) {
      margin-top: 200px; }
    .efu-culture.view .content.club p:nth-child(20) {
      text-align: right; }
      .efu-culture.view .content.club p:nth-child(20) img:nth-child(2) {
        margin: 345px 0 0 120px; }
      .efu-culture.view .content.club p:nth-child(20) img:nth-child(3) {
        margin: 85px 0 0 65px; }
    .efu-culture.view .content.daily p:nth-child(2) {
      margin-top: -55px;
      text-align: right; }
    .efu-culture.view .content.daily p:nth-child(3) {
      margin: -140px 0 0 430px; }
    .efu-culture.view .content.daily p:nth-child(5) {
      margin-left: 180px; }
    .efu-culture.view .content.daily p:nth-child(6) {
      margin-top: -220px;
      text-align: right; }
    .efu-culture.view .content.daily p:nth-child(8) {
      float: left; }
    .efu-culture.view .content.daily p:nth-child(9) {
      float: left;
      margin: 370px 0 0 150px; }
    .efu-culture.view .content.daily p:nth-child(10) {
      float: right;
      margin-top: 110px; }
    .efu-culture.view .content.daily p:nth-child(13) {
      margin-top: 70px;
      text-align: right; }

.party.nav {
  opacity: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: calc(50% - 350px);
  overflow: hidden;
  height: 700px;
  padding-top: 150px;
  text-align: center;
  -webkit-transform: translateY(200px);
  -moz-transform: translateY(200px);
  -o-transform: translateY(200px);
  transform: translateY(200px);
  transition: all 0.2s cubic-bezier(0.04, 1, 0.32, 1); }
  .party.nav ul li {
    padding: 20px 0;
    font-weight: 700;
    font-size: 500px;
    line-height: 360px;
    color: #fff; }
  .party.nav:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 200px;
    background: linear-gradient(180deg, #eeeeee 0%, rgba(238, 238, 238, 0) 100%); }
  .party.nav:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    background: linear-gradient(180deg, rgba(238, 238, 238, 0) 0%, #eeeeee 100%); }
  .party.nav.show {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }

@media all and (max-width: 1919px) {
  .efu-culture .head #cali {
    width: 60%;
    margin-left: 406px; } }
@media all and (max-width: 1700px) {
  .efu-culture.view .head .motion {
    right: -300px; } }
@media all and (max-width: 1430px) {
  .efu-culture .listArea .list .item:nth-child(5) {
    transform: translate(300px, 60px); }
  .efu-culture .listArea .list .item:nth-child(5).show {
    transform: translate(300px, -40px); }

  .efu-culture.view .head h2 .tit {
    font-size: 130px;
    line-height: 110px; }
    .efu-culture.view .head h2 .tit span {
      height: 110px; }
  .efu-culture.view .head h2 .tag {
    top: 140px;
    margin-left: -30px; }

  .party.nav {
    top: calc(50% - 300px);
    height: 600px; }
    .party.nav ul li {
      font-size: 350px;
      line-height: 260px; } }
@media all and (max-width: 1200px) {
  .efu-culture .head .copy p {
    height: 100px; }
    .efu-culture .head .copy p span {
      font-size: 100px; }
  .efu-culture .head #cali {
    margin: -270px 0 0 370px; }

  .efu-culture .listArea .list .item {
    width: 300px;
    height: 300px; }
    .efu-culture .listArea .list .item a:before {
      border-radius: 150px; }
    .efu-culture .listArea .list .item img {
      width: 100%; }
    .efu-culture .listArea .list .item span {
      line-height: 300px; }
    .efu-culture .listArea .list .item:nth-child(5) {
      width: 260px;
      height: 260px;
      transform: translate(200px, 60px); }
      .efu-culture .listArea .list .item:nth-child(5).show {
        transform: translate(200px, -20px); }
      .efu-culture .listArea .list .item:nth-child(5) span {
        line-height: 260px !important; }
  .efu-culture .listArea .text {
    top: 53%; }
    .efu-culture .listArea .text p {
      font-size: 40px;
      line-height: 50px; }
    .efu-culture .listArea .text .name {
      left: 170px;
      top: 122px; }

  .efu-culture.view .head h2 .tit {
    font-size: 110px;
    line-height: 100px; }
    .efu-culture.view .head h2 .tit span {
      height: 100px; }
  .efu-culture.view .head h2 .tag {
    top: 130px;
    margin-left: -90px; }
  .efu-culture.view .head h2 .friday .txt1 {
    margin-left: 280px; }
  .efu-culture.view .head .motion {
    top: -50px;
    right: -350px; }
    .efu-culture.view .head .motion.travel, .efu-culture.view .head .motion.daily {
      top: 0; }
    .efu-culture.view .head .motion.friday {
      top: 100px; }
    .efu-culture.view .head .motion.exciting {
      top: -200px; } }
/******************************************************************************************** max1200 ********************************************************************************************/
@media all and (max-width: 1200px) {
  .companyArea .nav li {
    padding-left: 100px; }
    .companyArea .nav li:hover:before {
      width: 75px; }
    .companyArea .nav li.on {
      margin-bottom: 200px; }
      .companyArea .nav li.on:before {
        width: 75px; }
  .companyArea .emblem {
    bottom: 0; }
  .companyArea .content {
    padding: 0 30px 0 60px; }
    .companyArea .content h2 {
      padding-top: 150px; }
      .companyArea .content h2 .blend, .companyArea .content h2 .blend2 {
        top: 139px; }
    .companyArea .content .vision h2 {
      padding-top: 200px; }
      .companyArea .content .vision h2 .blend, .companyArea .content .vision h2 .blend2 {
        top: 189px; }
    .companyArea .content .vision .slogan {
      margin-right: -30px; }
      .companyArea .content .vision .slogan p {
        font-size: 85px; }
      .companyArea .content .vision .slogan span:before {
        bottom: 16px;
        height: 6px; }
    .companyArea .content .vision .cont {
      margin-top: 80px; }
    .companyArea .content .mission .cont li {
      padding-left: 130px;
      margin-top: 50px; }
    .companyArea .content .mission .cont:before {
      font-size: 90px; }
    .companyArea .content .concept .biArea {
      height: 80px; }
      .companyArea .content .concept .biArea .txt1, .companyArea .content .concept .biArea .txt2 {
        width: 80px;
        height: 80px; }
      .companyArea .content .concept .biArea .txt1:before {
        width: 80px;
        height: 80px; }
      .companyArea .content .concept .biArea .txt2:before {
        width: 65px;
        height: 65px; }
      .companyArea .content .concept .biArea .sign1, .companyArea .content .concept .biArea .sign2 {
        width: 80px; }
    .companyArea .content .business .cont {
      padding-left: 60px;
      padding-right: 30px;
      margin-left: -60px;
      margin-right: -30px; }

  #subNav {
    padding: 0 20px; }

  .projectTit {
    top: 50%;
    font-size: 200px;
    line-height: 160px; }
    .projectTit.typeC {
      top: -webkit-calc(100% - 160px);
      top: -moz-calc(100% - 160px);
      top: calc(100% - 160px); }

  /****************************************************************************************************************************************************************** ok */
  .projectHead .site .btn {
    right: 90px; }

  .feature {
    background-size: 100% auto; }

  .flow {
    background-size: 100% auto; }
    .flow .wrap {
      background-size: 100% auto; }
      .flow .wrap h3.typeA {
        left: 20px; }
      .flow .wrap .detail {
        margin-right: 20px; }
      .flow .wrap .grid {
        padding-left: 20px;
        padding-right: 20px; }
        .flow .wrap .grid ul li:nth-child(1) {
          padding-right: 10px; }
        .flow .wrap .grid ul li:nth-child(2) {
          padding-left: 10px; }
        .flow .wrap .grid ul li img {
          width: 100%; }
      .flow .wrap .mobileType .caution {
        right: 20px; }

  .layout {
    background-size: 100% auto; }
    .layout .wrap .head {
      left: 20px; }
    .layout .wrap .caution {
      margin-right: 20px; }

  .mvArea {
    background-size: 100% auto; }

  .discover .wrap .deviceArea {
    left: 0; }
  .discover .wrap .txtArea {
    font-size: 160px;
    line-height: 150px; }
  .discover .wrap .txtArea.typeB {
    font-size: 200px;
    line-height: 190px; }
  .discover.mobile .wrap .deviceArea {
    left: 280px; }

  #wrapper.pc .deviceArea {
    left: 0; }

  .flowMobile {
    padding-left: 20px;
    padding-right: 20px;
    background-size: 100% auto; }
    .flowMobile .wrap ul li {
      padding-right: 10px; }
      .flowMobile .wrap ul li img {
        width: 100%; }
      .flowMobile .wrap ul li:nth-child(2) {
        padding-left: 10px;
        padding-right: 0; }

  .flowTablet {
    padding-left: 20px;
    padding-right: 20px;
    background-size: 100% auto; }

  .custom .wrap {
    padding-left: 20px;
    padding-right: 20px; }
    .custom .wrap .icon img {
      width: 100%; }

  .award .wrap {
    padding-left: 200px; }
    .award .wrap h3.typeA {
      left: 20px; }
    .award .wrap .content {
      padding-left: 100px; }

  .othersArea .nav li {
    padding-left: 100px; }
    .othersArea .nav li:hover:before {
      width: 75px; }
    .othersArea .nav li.on {
      margin-bottom: 200px; }
      .othersArea .nav li.on:before {
        width: 75px; }
  .othersArea .content h2 {
    font-size: 310px;
    line-height: 200px; }
    .othersArea .content h2 span:nth-child(1) {
      left: 35%;
      bottom: 140px; }

  .culture .head {
    left: 40px; }
  .culture .list {
    right: 40px; }
  .culture .thumb {
    padding-left: 80px;
    padding-right: 80px; }
  .culture.view .thumb {
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .culture.view .gallery {
    padding-top: 0;
    margin-top: -50px; }
  .culture.view .btn {
    right: 40px;
    top: 50%;
    margin-top: -40px; }
  .culture.view .head {
    left: 40px;
    top: 50%;
    margin-top: -40px; } }
/******************************************************************************************** max1024 ********************************************************************************************/
@media all and (max-width: 1024px) {
  .companyArea .nav li {
    padding-left: 60px; }
    .companyArea .nav li:hover:before {
      width: 35px; }
    .companyArea .nav li.on:before {
      width: 35px; }
  .companyArea .emblem {
    width: 162px;
    height: 267px; }
    .companyArea .emblem .box2 span:nth-child(1) {
      left: 55px; }
    .companyArea .emblem .box2 span:nth-child(2) {
      left: 55px;
      top: 231px; }
    .companyArea .emblem .box2 span:nth-child(3) {
      right: 55px;
      top: 231px; }
    .companyArea .emblem .box3, .companyArea .emblem .box4 {
      top: 16px; }
    .companyArea .emblem .box3 {
      right: 29px; }
    .companyArea .emblem .box4 {
      right: 14px; }
  .companyArea .content h2 {
    padding-top: 100px;
    margin-bottom: 70px; }
    .companyArea .content h2 .blend, .companyArea .content h2 .blend2 {
      top: 89px; }
  .companyArea .content .vision h2 {
    padding-top: 200px; }
    .companyArea .content .vision h2 .blend, .companyArea .content .vision h2 .blend2 {
      top: 189px; }
  .companyArea .content .vision .slogan p {
    font-size: 70px; }
  .companyArea .content .vision .slogan span:before {
    bottom: 14px;
    height: 4px; }
  .companyArea .content .vision .cont {
    margin-top: 60px; }
  .companyArea .content .mission .cont li {
    padding-left: 100px; }
    .companyArea .content .mission .cont li strong {
      font-size: 30px; }
    .companyArea .content .mission .cont li strong:before {
      bottom: 4px; }
  .companyArea .content .mission .cont:before {
    font-size: 80px; }
  .companyArea .content .concept .biArea {
    height: 70px; }
    .companyArea .content .concept .biArea .txt1, .companyArea .content .concept .biArea .txt2 {
      width: 70px;
      height: 70px; }
    .companyArea .content .concept .biArea .txt1:before, .companyArea .content .concept .biArea .txt2:before {
      width: 60px;
      height: 60px;
      margin-bottom: 10px; }
    .companyArea .content .concept .biArea .txt2:before {
      width: 45px;
      height: 45px; }
    .companyArea .content .concept .biArea .sign1, .companyArea .content .concept .biArea .sign2 {
      width: 40px; }
    .companyArea .content .concept .biArea .logo img {
      width: 120px; }
  .companyArea .content .concept .cont {
    margin-top: 70px; }
  .companyArea .emblem.step0 .box1 span:nth-child(1) {
    height: 267px; }
  .companyArea .emblem.step0 .box1 span:nth-child(2) {
    width: 162px; }
  .companyArea .emblem.step0 .box1 span:nth-child(3) {
    height: 267px; }
  .companyArea .emblem.step1 .box2 span:nth-child(1) {
    height: 36px; }
  .companyArea .emblem.step1 .box2 span:nth-child(2) {
    width: 52px; }
  .companyArea .emblem.step1 .box2 span:nth-child(3) {
    height: 36px; }

  #subNav {
    margin-bottom: 120px; }
    #subNav > ul > li p {
      font-size: 40px; }
    #subNav > ul > li.on p {
      font-size: 50px; }
    #subNav > ul > li ul {
      top: 55px; }

  .projectDetail {
    background-size: auto 698px; }

  .projectHead {
    height: 906px; }
    .projectHead .visual {
      height: 550px; }
      .projectHead .visual p.pc {
        width: 769px;
        height: 527px;
        padding: 5px 5px 0;
        background-size: 100% auto; }
      .projectHead .visual p.mobile {
        width: 259px;
        height: 449px;
        padding: 38px 29px 0 31px;
        background-size: 100% auto; }
      .projectHead .visual p.tablet {
        width: 832px;
        height: 485px;
        padding: 20px 49px 0 49px;
        background-size: 100% auto; }
      .projectHead .visual p img {
        width: 100%; }
      .projectHead .visual.horizon .mobile {
        bottom: 10px;
        width: 486px;
        height: 231px;
        padding: 7px 64px 0;
        background-size: 100% auto; }
    .projectHead .site {
      margin-top: 0; }

  #wrapper.juniorplus .projectHead .visual p.mobile, #wrapper.inthesoop .projectHead .visual p.mobile {
    width: 291px;
    padding: 20px 46px 0 44px;
    background-size: 100% auto; }

  .feature {
    margin-top: -208px; }
    .feature .wrap h3.typeB, .feature .wrap h3.typeA {
      padding-left: 20px; }
    .feature .wrap .txt {
      padding-left: 20px; }
    .feature .wrap .concept {
      margin-left: 20px;
      padding-left: 320px; }
      .feature .wrap .concept .img {
        left: 0;
        width: 300px; }
        .feature .wrap .concept .img img {
          width: 100%; }

  .flow .wrap h3.typeA {
    position: static;
    margin-left: 20px; }
    .flow .wrap h3.typeA span.br {
      display: inline-block !important; }
      .flow .wrap h3.typeA span.br:after {
        display: inline-block;
        content: "";
        width: 12px; }
  .flow .wrap > .detail p {
    width: 702px;
    height: 415px;
    padding: 5px 16px 25px 14px;
    margin-left: 20px;
    background-size: 100% auto; }
    .flow .wrap > .detail p span {
      width: 672px;
      height: 385px; }
    .flow .wrap > .detail p img {
      width: 100%; }
  .flow .wrap .mobileType {
    padding-right: 0; }
    .flow .wrap .mobileType .detail {
      width: 360px; }
      .flow .wrap .mobileType .detail .view {
        width: 300px;
        height: 568px;
        padding: 49px 24px 0;
        background-size: 100% auto; }
        .flow .wrap .mobileType .detail .view img {
          width: 100%; }
    .flow .wrap .mobileType .caution {
      position: static;
      height: 60px;
      padding-right: 20px;
      margin-top: -54px;
      text-align: right; }
  .flow .wrap .studio {
    margin-top: 80px;
    padding: 0 20px; }
    .flow .wrap .studio h3.typeA {
      margin-left: 0; }
    .flow .wrap .studio ul {
      margin-left: -20px; }
      .flow .wrap .studio ul li img {
        max-width: 100%; }
      .flow .wrap .studio ul li:first-child {
        padding-left: 20px; }
      .flow .wrap .studio ul li p {
        padding-left: 20px; }
        .flow .wrap .studio ul li p img {
          width: 100%; }

  .layout .wrap {
    padding: 0 20px; }
    .layout .wrap .head {
      position: static;
      width: 100%; }
    .layout .wrap .detail {
      margin-top: 50px; }
      .layout .wrap .detail .view {
        width: 300px;
        height: 568px;
        padding: 49px 24px 0;
        background-size: 100% auto; }
        .layout .wrap .detail .view img {
          width: 100%; }
      .layout .wrap .detail .nav1, .layout .wrap .detail .nav2, .layout .wrap .detail .nav3 {
        margin-left: 150px; }
      .layout .wrap .detail .nav1 {
        top: 65px; }
      .layout .wrap .detail .nav2 {
        top: 240px; }
      .layout .wrap .detail .nav3 {
        top: 464px; }
    .layout .wrap .caution {
      height: 60px;
      margin: -54px 0 0; }

  .discover .wrap {
    min-height: 1px;
    padding-bottom: 100px; }
    .discover .wrap h3.typeA {
      float: right;
      position: static;
      padding: 100px 20px 0 0;
      margin: 0; }
    .discover .wrap .deviceArea {
      clear: both;
      position: relative;
      left: 0;
      top: -100px; }
      .discover .wrap .deviceArea > p.device1 {
        position: static;
        width: 684px;
        margin-left: 30px; }
      .discover .wrap .deviceArea > p.device2 {
        left: 30px;
        top: 488px; }
      .discover .wrap .deviceArea > p.device3 {
        left: 0;
        top: 615px; }
      .discover .wrap .deviceArea > p.device4 {
        left: 125px;
        top: 605px; }
      .discover .wrap .deviceArea > p img {
        width: 100%; }
    .discover .wrap .txtArea {
      font-size: 150px;
      line-height: 140px; }
      .discover .wrap .txtArea.typeB {
        font-size: 140px;
        line-height: 130px; }
  .discover.mobile .wrap {
    padding-bottom: 400px; }
    .discover.mobile .wrap .deviceArea {
      left: 130px; }
      .discover.mobile .wrap .deviceArea .device1 {
        width: 443px; }
      .discover.mobile .wrap .deviceArea .device2 {
        left: -125px;
        top: 112px;
        width: 400px; }
      .discover.mobile .wrap .deviceArea .device3 {
        left: -285px;
        top: 205px;
        width: 399px; }
      .discover.mobile .wrap .deviceArea .device4 {
        left: 215px;
        top: 195px;
        width: 441px; }

  .flowMobile .wrap h3.typeA {
    position: static;
    margin-top: 0; }
  .flowMobile .wrap .detail {
    width: 360px; }
    .flowMobile .wrap .detail h4 {
      top: 130px; }
    .flowMobile .wrap .detail p {
      width: 300px;
      height: 573px;
      padding: 49px 30px 0 17px;
      background-size: 100% auto; }
      .flowMobile .wrap .detail p img {
        width: 100%; }
  .flowMobile .wrap ul li {
    margin-top: 20px; }
    .flowMobile .wrap ul li:first-child {
      margin-top: 0; }

  .flowTablet .wrap h3.typeA {
    position: static;
    margin-top: 0; }
  .flowTablet .wrap ul li {
    padding-right: 10px; }
    .flowTablet .wrap ul li:nth-child(2) {
      padding-left: 10px;
      padding-right: 0; }
    .flowTablet .wrap ul li img {
      max-width: 100%; }

  .custom .wrap .colorchip {
    display: table;
    table-layout: fixed;
    width: 100%; }
    .custom .wrap .colorchip li {
      float: none;
      display: table-cell;
      width: auto; }

  .pageNav li {
    padding-left: 100px; }
    .pageNav li:before {
      width: 60px; }
    .pageNav li.second {
      padding-right: 100px; }

  .othersArea .nav li {
    padding-left: 60px; }
    .othersArea .nav li:hover:before {
      width: 35px; }
    .othersArea .nav li.on:before {
      width: 35px; }
  .othersArea .content h2 {
    font-size: 210px;
    line-height: 200px;
    letter-spacing: 20px; }
    .othersArea .content h2 span:nth-child(1) {
      bottom: 80px; }
    .othersArea .content h2 span:nth-child(2) {
      bottom: 0; }
  .othersArea .content h3 {
    width: 40%;
    padding-left: 5%; }
    .othersArea .content h3:after {
      width: 60px; }
  .othersArea .content .list {
    width: 60%; }

  #wrapper.teuni .projectHead .visual p.mobile {
    bottom: -30px;
    width: 100%;
    max-width: 700px; }
  #wrapper.teuni .continuous .wrap h3.typeA {
    position: static; }
  #wrapper.teuni .continuous .wrap .detail p {
    margin: 0; }
    #wrapper.teuni .continuous .wrap .detail p img {
      width: 100%;
      max-width: 100%; }
  #wrapper.teuni .custom .wrap h3 {
    position: static; }

  .culture .list {
    right: 20px; }
    .culture .list li {
      height: 40px;
      line-height: 40px; }
      .culture .list li.on {
        font-size: 26px; }
  .culture .head {
    left: 20px; }
    .culture .head h2 {
      width: 330px;
      font-size: 50px;
      line-height: 80px; }
  .culture .thumb {
    padding-left: 40px;
    padding-right: 40px; }
  .culture.view .head {
    left: 20px; }
  .culture.view .btn {
    right: 20px; }
  .culture.view .gallery {
    padding-left: 40px;
    padding-right: 40px; }

  #wrapper.ccbk .projectHead .visual p.mobile, #wrapper.htb .projectHead .visual p.mobile {
    width: 400px; }
  #wrapper.ccbk .flow .wrap .mobileType .detail .view, #wrapper.htb .flow .wrap .mobileType .detail .view {
    width: 393px; }
  #wrapper.ccbk .layout .detail .view, #wrapper.htb .layout .detail .view {
    width: 300px; }
  #wrapper.ccbk .discover.mobile .wrap .deviceArea .device2, #wrapper.htb .discover.mobile .wrap .deviceArea .device2 {
    left: -125px;
    top: 112px; }
  #wrapper.ccbk .discover.mobile .wrap .deviceArea .device3, #wrapper.htb .discover.mobile .wrap .deviceArea .device3 {
    top: 205px; }
  #wrapper.ccbk .flowMobile .wrap .detail p, #wrapper.htb .flowMobile .wrap .detail p {
    width: 300px; }

  #wrapper.visang .projectHead .visual p.mobile {
    width: 400px; }
  #wrapper.visang .flowMobile .wrap .detail p {
    width: 300px; } }

/*# sourceMappingURL=content.css.map */