@charset "UTF-8";
body {
  background-position: center top;
}

.sTop {
  background-repeat: no-repeat;
  background-position: -250px bottom;
  background-size: auto 70%;
  background-image: url("./../images/top-bg@2x.png");
}

.sTop .sWheel {
  position: absolute;
  top: -6rem;
  right: -2rem;
  width: 16rem;
  height: 16rem;
  background-image: url("./../images/top-wheel.png");
  background-size: cover;
  -webkit-animation: rotateStyle 20s linear infinite;
          animation: rotateStyle 20s linear infinite;
}

.sTop .btn-docuDown {
  width: 26rem;
  margin-left: 1.6rem;
}

    .sTop .sText, .SrookText {
        line-height: 1.3;
        font-size: 4.8rem;
        margin-left: 1.6rem;
    }

.sTopH {
  height: 100vh;
  min-height: 667px;
}

.sTopImg {
  width: 100%;
}

.sSrookPay .text-brand {
  color: #ed3b65;
}

.sSrookPay .sMockupWrap {
  background-color: #ef3d4a;
  background-image: url("./../images/srookPay-bg@2x.png"), -webkit-gradient(linear, left top, right top, from(#fc9342), color-stop(#ef3d4a), to(#ef3d4a));
  background-image: url("./../images/srookPay-bg@2x.png"), linear-gradient(to right, #fc9342, #ef3d4a, #ef3d4a);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.sSrookPay .line::after {
  background-color: #ffebf3;
}

.sSrookPay .sLogo img {
  margin-top: 3rem;
}

.sLinkon .text-brand {
  color: #b51bfd;
}

.sLinkon .sMockupWrap {
  background-color: #8e0fe2;
  background-image: url("./../images/linkon-bg@2x.png"), -webkit-gradient(linear, left top, right top, from(#d455e5), color-stop(#d455e5), to(#8e0fe2));
  background-image: url("./../images/linkon-bg@2x.png"), linear-gradient(to right, #d455e5, #d455e5, #8e0fe2);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.sLinkon .line::after {
  background-color: #f5e4ff;
}

.sLinkon .sLogo img {
  margin-top: 3rem;
}

.sLogo img {
  margin-left: 1.6rem;
  height: 2rem;
}

.sCelebmanage .text-brand {
  color: #00bbdd;
}

.sCelebmanage .sMockupWrap {
  background-color: #0e1174;
  background-image: url("./../images/celebmanage-bg@2x.png"), -webkit-gradient(linear, right top, left top, from(#0e1174), color-stop(#0e1174), to(#00449a));
  background-image: url("./../images/celebmanage-bg@2x.png"), linear-gradient(to left, #0e1174, #0e1174, #00449a);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.sCelebmanage .line::after {
  background-color: #e3fbff;
}

.sCelebmanage .sLogo img {
  margin-top: 3rem;
}
.sCeleblink .sMockupWrap {
    background-color: #0f44e3;
    background-image: url("./../images/celeblink-bg@2x.png"), -webkit-gradient(linear, left top, right top, from(#1aa9d2), color-stop(#115edf), to(#0f43e4));
    background-image: url(./../images/celeblink-bg@2x.png), linear-gradient(to right, #1aa9d2, #115edf, #0f43e4);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.sCeleblink .line::after { background-color: #e3eaff;}
.sCeleblink .sLogo img { margin-top: 3rem;}
.sCeleblink .eLine{color:#3165ee}
.sCeleblink .text-brand{color:#3165ee;}
footer {
    margin-top: 20rem;
}

footer a {
  color: #898888;
  text-decoration: none;
}

footer a:hover {
  color: #BEBEBE !important;
}

footer a.active {
  color: #efefef;
}

footer .sSelect option {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  color: #36383b;
}

.sSectionH {
  height: auto;
  padding-top: 10rem;
}

.sMockup {
  padding-top: 16rem;
}

.sLinkon .sMockup {
  margin-top: -7rem;
  margin-left: -5rem;
}

.sMockupWrapL {
  border-top-right-radius: 18rem;
}

.sMockupWrapR {
  border-top-left-radius: 18rem;
}

.sMockupWrap {
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.sMockupWraper {
  height: 54.4rem;
  padding-top: 6.4rem;
}

.eLine {
  position: relative;
}

.eLine .line {
  position: absolute;
  width: 100%;
  height: 16px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
}

.eLine .line::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
}

.eText {
  -webkit-animation: text-move 32s linear infinite;
          animation: text-move 32s linear infinite;
}

.eText span {
  font-size: 21rem;
  margin-right: 48rem;
  color: #f7f7f7;
  font-weight: bolder;
  line-height: 1;
  letter-spacing: -8px;
}

.eMockup {
  -webkit-transition: all .8s;
  transition: all .8s;
}

@media (max-height: 415px) {
  .sTopImg {
    height: 100vh;
    width: auto !important;
  }
  .sSrookPay .sMockupWrap {
    background-position: -40rem top;
  }
}

@media (min-width: 576px) {
  .sMockup {
    width: 45rem !important;
  }
  .sCeleblink .sMockup{ width: 64rem !important; margin-left: 2rem;}
}

@media (max-width: 576px) {
  .sSrookPay .sMockupWrap {
    background-position: -45rem top;
  }
  .sLinkon .sMockupWrap {
    background-position: center left;
    background-size: 120%;
    background-color: #8e0fe2;
    background-image: url("./../images/srookPay-bg-m@2x.png"), -webkit-gradient(linear, left top, right top, from(#d455e5), color-stop(#8e0fe2), to(#8e0fe2));
    background-image: url("./../images/srookPay-bg-m@2x.png"), linear-gradient(to right, #d455e5, #8e0fe2, #8e0fe2);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  .sLinkon .sMockup {
   /* margin-top: 5rem;*/
  }
}
@media(max-width:780px) {
  .SrookText{display:none;}
  .sCeleblink .sMockupWrap{background-image:url(./../images/celebmanage-bg@2x.png), linear-gradient(to right, #1aa9d2, #115edf, #0f43e4);background-position:0 90%; background-size:140vw;}
  .sCeleblink .sMockupWrap .sMockup{padding-left: 0; padding-right: 0; width:120vw;}
  .sCeleblink .sLogo img{margin-top:8rem}
}
@media (max-width: 768px) {
  .sSrookPay .sMockupWrap {
    background-position: -40rem top;
  }
  .sLinkon.sSectionH {
    padding-top: 7rem;
  }
  .sBtn-top {
    display: none;
  }
  footer {
    margin-top: 10rem;
  }
}
@media(max-width:500px){
    .sCeleblink .sMockupWrap{background-position:0 50%;}
    .sMockup { padding-top:60%; }
}
@media (min-width: 768px) {
    .sTop .sText, .SrookText {
        line-height: 1.5;
        font-size: 8rem;
        margin-left: 1.6rem;
    }
  .sTop .btn-docuDown {
    margin-left: 1.6rem;
  }
  .sMockupWrapL {
    background-position: right top;
  }
  .sMockupWrapR {
    background-position: left top;
  }
  .sLinkon .sMockupWrap {
    background-position: center left;
    background-size: 100%;
  }
}
/* 웹 */
@media (min-width: 992px) {
  body {
    background-position: center top;
  }
  .container {
    max-width: 1200px !important;
  }
  .sMockupWraper {
    padding-top: 0rem;
  }
  .sSectionH {
    height: 1000px;
    padding-top: 18rem;
  }
  .sLine {
    background-color: black;
    position: relative;
    margin-left: 0.8rem;
  }
  .sLine::after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0%;
    top: 50%;
    height: 3px;
    width: 53px;
    background-color: black;
  }
  .srookLine {
    background-color: black;
    position: relative;
    margin-left: 0.8rem;
  }
  .SrookText::after {
      content: '';
    display: inline-block;
    position: absolute;
    left: -62%;
    top: 50%;
    height: 3px;
    width: 53px;
    background-color: black;
    padding: 0 0 0 53px;
  }
  .SrookText.WText::after{background-color:#fff;}
 .SrookText { position: absolute;top: 28rem; z-index: 9;}
 .WText{color:#fff!important;}
  .sTop {
    background-image: url("./../images/top-bg@2x.png");
    background-repeat: no-repeat;
    background-position: 124px bottom;
    background-size: auto 85%;
  }
  .sTop .sText,.SrookText {
    line-height: 1.5;
    font-size: 8rem;
    margin-left: 0rem;
  }
  .sTop .btn-docuDown {
    margin-left: 0rem;
  }
  .sTop .sWheel {
    width: 20rem;
    height: 20rem;
  }
  .sTopH {
    height: 1000px;
  }
.sSrookPay .sText, .SrookText {
    left: 0px;
}
  .sLinkon .sMockup {
    width: 56rem !important;
  }
  footer {
    margin-top: 20rem;
  }
  .sBtn-top {
    bottom: 450px;
    right: 64px;
    z-index: 99;
    opacity: 0;
    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
    cursor: pointer !important;
  }
    .sText.sBtn-top, .SrookText {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        font-size: 1.6rem;
        font-weight: bolder;
    }
  .sCustomer {
    margin-top: -6rem !important;
  }
  @-webkit-keyframes upNdown {
    0% {
      -webkit-transform: translateY(0rem);
              transform: translateY(0rem);
    }
    50% {
      -webkit-transform: translateY(-2rem);
              transform: translateY(-2rem);
    }
    100% {
      -webkit-transform: translateY(0rem);
              transform: translateY(0rem);
    }
  }
  @keyframes upNdown {
    0% {
      -webkit-transform: translateY(0rem);
              transform: translateY(0rem);
    }
    50% {
      -webkit-transform: translateY(-2rem);
              transform: translateY(-2rem);
    }
    100% {
      -webkit-transform: translateY(0rem);
              transform: translateY(0rem);
    }
  }
  .eScroll {
    -webkit-animation: upNdown 1.6s ease-in-out infinite;
            animation: upNdown 1.6s ease-in-out infinite;
  }
}