/* top banner */
.banner-user-section {
  margin-top: 0 !important;
}
.banner-user-wrap {
  position: relative; width: 100%; margin-top: 20px;
  .banner-area {
    position: relative; float: left; width: calc(100% - 390px);
    .top-banner {
      position: relative; white-space: nowrap; width: 100%; height: 0; padding-bottom: 32%; overflow: hidden;
      .dot {
        position: absolute; bottom: 7%; left:50%; transform: translateX(-50%);
        span { 
          width: 6px; height: 6px; border-radius: 10px; margin: 0 2px; background:#585858; display: inline-block; opacity: .4; cursor: pointer;
          &.on, &:hover { opacity: 1; }
        }
      }
      .bn-item {
        display: inline-block; width: 100.5%; transition: transform .5s; margin-right: -2px; cursor: pointer;
        > img { width: 100%; height: auto; }
      }
      &.banner-1-on {
        .bn-item { transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); } 
      }
      &.banner-2-on {
        .bn-item { transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); }
      }
      &.banner-3-on {
        .bn-item { transform: translateX(-200%); -ms-transform: translateX(-200%); -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -o-transform: translateX(-200%); }
      }
      &.banner-4-on {
        .bn-item { transform: translateX(-300%); -ms-transform: translateX(-300%); -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); -o-transform: translateX(-300%); }
      }
      &.banner-5-on {
        .bn-item { transform: translateX(-400%); -ms-transform: translateX(-400%); -webkit-transform: translateX(-400%); -moz-transform: translateX(-400%); -o-transform: translateX(-400%); }
      }
    }
    .text-banner {
      position: relative; overflow: hidden; background-color: #f2f5f6; border: 1px solid var(--line-color); margin-top: 20px; height: 40px;
      .bn-item {
        transition: transform .5s; padding: 12px 35px 12px 0;
        .left-txt { 
          float: left; width: 170px; text-align: center; @include ellipsis;
          a { font-weight: 600; font-size: 1.4rem; color: #333;  }
        }
        .right-txt {
          float: left; width: calc(100% - 170px);  @include ellipsis;
          a { font-weight: 400; font-size: 1.4rem; color: #333; 
            &:hover { text-decoration: underline; }
          }
        }
      }
      &.banner-1-on {
        .bn-item { transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); } 
      }
      &.banner-2-on {
        .bn-item { transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); }  
      }
      &.banner-3-on {
        .bn-item { transform: translateY(-200%); -ms-transform: translateY(-200%); -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -o-transform: translateY(-200%); } 
      }
      &.banner-4-on {
        .bn-item { transform: translateY(-300%); -ms-transform: translateY(-300%); -webkit-transform: translateY(-300%); -moz-transform: translateY(-300%); -o-transform: translateY(-300%); } 
      }
      &.banner-5-on {
        .bn-item { transform: translateY(-400%); -ms-transform: translateY(-400%); -webkit-transform: translateY(-400%); -moz-transform: translateY(-400%); -o-transform: translateY(-400%); } 
      }
      .bn-arrow {
        position: absolute; top: 10px; right: 15px;
        .arr { 
          width: 8px; height: 5px; cursor: pointer; opacity: .5;
          > img {width:100%; height: 100%; }
          &.down { transform: rotate(180deg); margin-top: 6px; }
          &:hover { opacity: 1; }
        }
      }
    }
  }
  .user-area {
    position: relative; float: right; width: 370px; height: 320px; background-color: #f2f5f6; border:1px solid var(--line-color); 
    .user-login, .user-uncertified {
      position:relative; height: 100%; display: none;
      .info-wrap {
        position: relative; width: 100%; padding:15px 90px 15px 15px; background:#f2f5f6; border-bottom:1px solid var(--line-color);
        .user-img {
          position: relative; float: left; width: 40px; height: 40px;  background:#fff;border-radius: 60px; border: 1px solid var(--line-color);
          > img { @include alignCenter; max-width: 100%; max-height: 100%;}
        }
        .user-name {
          float: left; width: calc(100% - 40px); padding-left: 15px;
          .name {  color:#000; font-size: 1.4rem; font-weight: 600; }
          .company { 
            position: relative; font-size: 1.2rem;color: #989797; font-weight: 500; text-overflow: ellipsis;
            overflow: hidden; white-space: nowrap; padding-top:8px;
            
          }
        }
        .logout-btn {
          position: absolute; top:20px; right:15px;
          button { height: 27px; background:#c6c6c6; color: #fff; font-size: 1.1rem; padding:0 15px; font-weight: 500; border-radius: 30px; letter-spacing: 0; }
        }
      }
      .tab-wrap {
        position: relative; width: 100%; background-color: #fff; 
        ul.my-tab {
          white-space: nowrap; overflow: hidden; position: relative; padding: 12px 0 12px 12px; border-bottom: 1px solid var(--line-color);
          li {
            position: relative; display: inline-block; font-size: 1.2rem; padding-right: 20px;
            a { color: #606060; font-weight: 600;}
            &.on, &:hover {
              a { color: var(--main-color); font-weight: 600;}
            }
            &:before { content: ''; position: absolute; top:1px; right:10px; width: 1px; height: 10px; background: var(--line-color);}
          }
        }
        .tab-arr {
          position: absolute; top:7px; background:#fff; border-radius: 50%; border: 1px solid var(--line-color); width:25px; height: 25px; overflow: hidden; box-shadow: 2px 2px 3px rgba(0,0,0,.2);
          img {width: 16px; height: 16px; opacity: .6;}
          &.prev { 
            left:-12px; 
            img { transform: rotate(180deg); }
          }
          &.next { right: -12px;}
          &.disabled { display: none; }
          &:hover {
            img { opacity: 1; }
          }
        }
      }
      .cont-list {
        position: relative; height: calc(100% - 145px); padding: 5px 5px 0 0; background-color: #fff; 
        ul {
          overflow-y: auto; padding: 0 15px 15px 30px; height: 100%; @include scrollbar;
          li {
            position: relative; 
            &:before { content: ''; position: absolute; top:5px; left: -15px; width: 1px; height: 100%; background:var(--line-color);}
            .head { 
              position: relative; font-size: 1.2rem; font-weight: 600; padding-bottom: 13px;
              &:before {content: ''; position: absolute; top:4px; left:-18px; width: 7px; height: 7px; border-radius: 10px; background:var(--main-color);}
              &.cec { color: var(--blue-color); }
              &.amic { color: var(--green-color); }
              &.intern { color: var(--sky-color); }
              &.kpubic { color: var(--purple-color); }
            }
            .item {
              position: relative; padding-bottom: 15px; cursor: pointer;
              &:hover {
                .tit { text-decoration: underline; }
              }
              &:before {content: ''; position: absolute; top:4px; left:-18px; width: 7px; height: 7px; border-radius: 10px; background:var(--line-color);}
              .tit { font-size: 1.2rem; font-weight: 500; color: #333; }
              .txt {
                font-weight: 500; font-size: 1.1rem; color: #333; padding-top: 10px;
                span { color: #8e8e8e; padding-left: 5px;}
              }
            }
          }
        }
        &.no-list {
          height: calc(100% - 110px); padding: 0;
          ul {
            padding:0; height: auto; width: auto; @include alignCenter; top: 45%;
            li {
              text-align: center;
              &:before { display: none;}
              img { width: 40px; height: auto; }
              p { font-size: 1.2rem; color: #b8c2d3; padding-top: 15px; font-weight: 600; }
            }
          }
        }
      }
      .list-all-btn {
        background:#fff; padding: 12px 10px 10px; position: relative;
        p { 
          font-size: 1.1rem; font-weight: 500; cursor: pointer; color: #676767;
          &:hover { text-decoration: underline; }
          img { width: 12px; height: auto; margin-right: 2px; }
        }
      }
    }
    .user-uncertified {
      background:#fff;
      .tab-wrap {
        opacity:0.2;         
      }
      .uncertified-txt {
        width: 100%; height: 248px;
        .txt-wrap {
          text-align: center; padding-top:40px;
          p {
            font-weight:700; font-size:1.55rem; padding-top:15px;
          }
          span {
            font-weight:400; color:#606060; padding-top:20px; display: block; line-height:20px; font-size:1.4rem;
          }
          .confirm-btn {
            margin-top:20px;
            button {
              display: inline-block; color: #fff;height: 45px; background-color: var(--main-color); padding: 0 90px; font-weight: 600; font-size: 1.4rem; transition: background-color .25s;
              &:hover {
                background-color: var(--main-hover-color);
              }
            }
          }
        }
      }
    }
    .user-logout {
      @include alignCenter; width: 100%; display: block; text-align: center;
      .tit { font-size: 1.6rem; font-weight: 600; }
      .txt { font-size: 1.4rem; color: #606060; padding-top: 15px; line-height: 1.6; }
      .login-btn {
        text-align: center; margin-top: 20px;
        button { 
          display: inline-block; color: #fff; height: 45px; background-color: var(--main-color); padding: 0 90px; font-weight: 600; font-size: 1.4rem; transition: background-color .25s;
          &:hover {background-color: var(--main-hover-color); }
        }
      }
    }
    .user-uncertified {
      display: none;
    }
    &.on {
      .user-login { display: block; }
      .user-logout { display: none; }
     
    }
    &.uncertified {
      .user-uncertified {display: block;}
      .user-login { display: none; }
      .user-logout { display: none; }
    }
  }
}

@media (max-width: 1200px) {
  .banner-user-wrap {
    margin-top: 15px;
    .banner-area { 
      width: 100%; 
      .text-banner { margin-top:15px;}
    }
    .user-area { display: none; }
  }
}
@media (max-width: 768px) {
  .banner-user-wrap {
    .banner-area { 
      .text-banner { 
        height: 36px; 
        .bn-item {
          padding: 10px 35px 10px 0;
          .left-txt { 
            width: 150px;
            a { font-size: 1.3rem; }
          }
          .right-txt { 
            width: calc(100% - 150px); 
            a { font-size: 1.3rem; }
          }
        }
      }
    }
  }
}
@media (max-width: 550px) {
  .banner-user-wrap {
    .banner-area { 
      .text-banner { 
        .bn-item {
          padding: 10px 10px 10px 0;
          .left-txt { 
            width: 120px;
            a { font-size: 1.2rem; }
          }
          .right-txt { 
            width: calc(100% - 120px); 
            a { font-size: 1.2rem; }
          }
        }
        .bn-arrow { display: none; }
      }
    }
  }
}