@font-face {
	font-family: 'GmarketSansB';
	font-weight: 700;
	font-style: normal;
	src:  url(/assets/okems_3/layout/home/css/GmarketSansBold.eot);
	src:  url(/assets/okems_3/layout/home/css/GmarketSansBold.eot?#iefix) format('embedded-opentype'),
        url(/assets/okems_3/layout/home/css/GmarketSansBold.woff2) format('woff2'),
        url(/assets/okems_3/layout/home/css/GmarketSansBold.woff) format('woff'),
        url(/assets/okems_3/layout/home/css/GmarketSansBold.ttf) format("truetype");
	font-display: swap;
} 
GmarketSansBold.woff2
.ft {
    margin-bottom: 100px;
}

/* fixed된 띠 배너로 인해 가려진 요소 보이기 */
html {
  margin-bottom: 73px;
}

.container-wrap{
    width: 100%;
    background: #f5fafe;
}

.container-in {
    padding-bottom: 200px;
}



/* 00 - 하단 배너 */

.btm-banner-wrap {
    width:100%;
    position: fixed;
    bottom: 0px;
    z-index: 99999999 !important;
    cursor: pointer;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}
.btm-banner-wrap  .banner {
    display: flex;
    height: 101px;
    color: #fff;
    font-family: 'GmarketSansB';
	font-weight: 700;
    font-size: 36px;
    line-height: 100px;
}
.btm-banner-wrap .left-wrap {
    width:45%;
    background: #000;
    text-align: right;
    padding-right: 150px;
    position: relative;
}
.btm-banner-wrap .left-wrap:hover {
    background: #5096ff;
    transition: 0.3s;
}
.btm-banner-wrap .right-wrap:hover {
    transition: 0.3s;
    background:url(/assets/okems_3/smartdoc/img/back-img3.png) #5096ff 0 0  no-repeat;
}
.btm-banner-wrap .right-wrap {
    width:55%;
    position: relative;
    text-align: left;
    padding-left: 170px;
    background:url(/assets/okems_3/smartdoc/img/back-img3.png) #072e71 0 0  no-repeat;
}
.btm-banner-wrap .txt-btn {
    position: relative;
    top:5px;
}



.banner-img-wrap {
    position: absolute;
    z-index: 100;
    width:100%;
}
.banner-img-wrap .img-inner {
    height: 0;
    display: flex;
}
.inner01 {
    width:45%;
    /* padding-right: 150px; */
    position: relative;
}
.inner02 {
    width:55%;
   /*  padding-left: 170px; */
    position: relative;
}

img.banner-img2 {
    position: absolute;
    top:-29px;
    right: 100px;
}

img.banner-img {
    position: absolute;
    top:-29px;
    left: 170px;
}




/* 01 - 메인 */

.contents-wrap-01 {
    width: 100%;
    background: url(/assets/okems_3/smartdoc/img/back-img.png) top center no-repeat;
    background-size: cover;
    height: 755px;
}

.contents-wrap-01 .inner {
    position: relative;
    margin: 0 auto;
    width: 1240px;
    padding-top: 30px;
}

.contents-wrap-01 .title {
    position: relative;
    top:50px;
    left:100px;
    opacity:0;
    transition:0.5s;
}

.contents-wrap-01 .title.on {
    top: 10px;
    opacity: 1;
}

.contents-wrap-01 .title-txt {
    position: relative;
    top:20px;
    left:230px;
    opacity:0;
    transition:1s;
}
.contents-wrap-01 .title-txt.on {
    top: -40px;
    opacity: 1;
}

 /* 02 - 본문 */

.contents-wrap-02 {
    position: relative;
    top:-100px;
    background: #fff;
    border-radius: 10px;
    width:1240px;
    margin: 0 auto;
    padding: 100px 0;
    z-index: 1;
} 

.smart-bg {
    display: flex;
    justify-content: space-between;
    padding:100px;
    height: 550px;
}

.smart-txt {
    position: relative;
    opacity: 0;
    top:100px;
    transition:0.3s;
}

.smart-txt.on {
    opacity: 1;
    top:0
}


.txt-sub {
    font-family: "Noto Sans KR", sans-serif;
    display: block;
    font-size: 24px;
    letter-spacing: -0.5px;
    margin-top: 30px;
}
.txt-sub.text-r {
    text-align: right;
}



.smart-img {
    position: relative;
    transition:0.8s;
    opacity: 0;
    top:100px;
}
.smart-img.on {
    opacity: 1;
    top:0;
}

.smart-img2 {
    position: relative;
    transition:0.8s;
    opacity: 0;
    top:100px;
}
.smart-img2.on {
    opacity: 1;
    top:0;
}

.smart-img3 {
    position: relative;
    transition:0.8s;
    top:200px;
    left:-50px;
    opacity: 0;
}
.smart-img3.on {
    opacity: 1;
    top:100px;
}


.smart-img4 {
    position: relative;
    top:20px;
}
.smart-img4 .inner-r img {
    position: absolute;
}





.img-01-01 {
    position: relative;
    left: 0;
}
.img-01-02 {
    position: relative;
    top:-318px;
}

.img-02-01 {
    position: relative;
    left: 0;
}
.img-02-02 {
    position: relative;
    top:-352px;
    left: 245px;
}

.img-03-01 {
    position: relative;
    left: 0;
    top:0;
}
.img-03-02 {
    position: relative;
    left: 0;
    top:-241px;
    z-index: 1;
}
.img-03-03 {
    position: relative;
    left: 30px;
    top:-585px;
}


.img-04-01 {
    position: relative;
    top:0;
    opacity: 0;
    transition:0.1s;
}

.img-04-02 {
    position: relative;
    top:0;
    opacity: 0;
    transition:0.3s;
}

.img-04-03 {
    position: relative;
    top:0;
    opacity: 0;
    transition:0.5s;
}

.img-04-04 {
    position: relative;
    top:0;
    opacity: 0;
    transition:0.8s;
}

.img-04-05 {
    position: relative;
    top:0;
    opacity: 0;
    transition:1s;
}



.img-04-01.on {
    opacity: 1;
    top:100px;
}
.img-04-02.on {
    opacity: 1;
    top:100px;
}
.img-04-03.on {
    opacity: 1;
    top:100px;
}
.img-04-04.on {
    opacity: 1;
    top:100px;
}
.img-04-05.on {
    opacity: 1;
    top:100px;
}




 /* 03 - 추천 */

.contents-wrap-03 {
    position: relative;
    top:-130px;
    width: 100%;
    background: url(/assets/okems_3/smartdoc/img/back-img2.png) #f5fafe no-repeat;
    background-size: cover;
    height: 618px;
}

.contents-02 {
    width:1240px;
    margin: 0 auto;
}
.contents-02 .title-wrap {
    position: relative;
    top:320px;
    text-align: center;
    opacity: 0;
    transition: 0.8s;
}
.contents-02 .title-wrap.on {
    top:120px;
    opacity: 1;
}
.contents-02 .con-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 160px;
    opacity: 0;
    top:-100px;
    transition: 0.8s;
}
.contents-02 .con-wrap.on {
    opacity: 1;
    top:0;
}
.con-wrap-box {
    width:575px;

}
.con-wrap-box .img {
    background: #fff;
    border-radius: 10px 10px 0 0;
    height: 350px;
    overflow: hidden;
}

.con-wrap-box .img img {
    position: relative;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.con-wrap-box .text {
    background: #000;
    border-radius: 0 0 10px 10px;
    color:#fff;
    font-family: "Noto Sans KR", sans-serif;
    display: block;
    font-size: 26px;
    letter-spacing: -0.5px;
    text-align: center;
    padding: 30px 0;
    line-height: 33px;
}
.logo-img {
text-align: center;
margin-top: 120px;
}

/* 260811 첫결제 이벤트 우측 배너 추가 */

/* .right-banner{position: fixed; left:calc(50% + 720px);transform:translateX(-50%);top:230px} */
.right-banner{position: fixed; right:45px;top:230px;z-index:9999}
.right-banner .first_payment{
  background: url(/assets/okems_3/main/img/secret_event_bg.png)no-repeat;
  text-align: center;
  width:125px;
  height:215px;
  color:#982751;
  font-size:14px;
  line-height:17px;
  padding-top:22px;
  cursor: pointer;
}

.right-banner .first_payment .font-weight-600{
  font-weight:600
}

.right-banner .first_payment .img{
  position: absolute;
  top:80px;left:0px;
  animation: motion 0.5s linear 0s infinite alternate; 

  }


  @keyframes motion {
    0% {margin-top: -26px;}
    100% {margin-top: -20px;}
  }
  
  .right-banner .first_payment .move-btn{
    position: absolute;
    bottom:0;
    height:30px;
    width:125px;
    color:#fff;
    padding-top:6px;
    box-sizing: border-box;
  }

  .right-banner .first_payment:hover .move-btn{
    color:#fee539;
  }

  .right-banner .first_payment:hover .move-btn img{
    filter: brightness(0) saturate(100%)
    invert(89%)
    sepia(53%)
    saturate(1693%)
    hue-rotate(344deg)
    brightness(105%)
    contrast(99%);
  }
  .right-banner .first_payment .move-btn img{
    display: inline-block;
    vertical-align: -1px;
    margin-left:3px
  }

/* 260811 첫결제 이벤트_ 우측 배너 추가 끝*/