@charset "utf-8";

@import url(animate.min.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

/* common */
.tx-example{display: block;margin:3em 0; font-size:14px}
/* Animate */
.ani-stop{visibility:hidden;-webkit-animation-name:none !important;animation-name:none !important}
.ani-delay01{-webkit-animation-delay:.1s !important;animation-delay:.1s !important}
.ani-delay015{-webkit-animation-delay:.15s !important;animation-delay:.15s !important}
.ani-delay025{-webkit-animation-delay:.25s !important;animation-delay:.25s !important}
.ani-delay02{-webkit-animation-delay:.2s !important;animation-delay:.2s !important}
.ani-delay03{-webkit-animation-delay:.3s !important;animation-delay:.3s !important}
.ani-delay04{-webkit-animation-delay:.4s !important;animation-delay:.4s !important}
.ani-delay05{-webkit-animation-delay:.5s !important;animation-delay:.5s !important}
.ani-delay06{-webkit-animation-delay:.6s !important;animation-delay:.6s !important}
.ani-delay07{-webkit-animation-delay:.7s !important;animation-delay:.7s !important}
.ani-delay075{-webkit-animation-delay:.75s !important;animation-delay:.75s !important}
.ani-delay08{-webkit-animation-delay:.8s !important;animation-delay:.8s !important}
.ani-delay09{-webkit-animation-delay:.9s !important;animation-delay:.9s !important}
.ani-delay10{-webkit-animation-delay:1s !important;animation-delay:1s !important}
.ani-delay11{-webkit-animation-delay:1.1s !important;animation-delay:1.1s !important}
.ani-delay12{-webkit-animation-delay:1.2s !important;animation-delay:1.2s !important}
.ani-delay125{-webkit-animation-delay:1.25s !important;animation-delay:1.25s !important}
.ani-delay13{-webkit-animation-delay:1.3s !important;animation-delay:1.3s !important}
.ani-delay14{-webkit-animation-delay:1.4s !important;animation-delay:1.4s !important}
.ani-delay15{-webkit-animation-delay:1.5s !important;animation-delay:1.5s !important}
.ani-delay16{-webkit-animation-delay:1.6s !important;animation-delay:1.6s !important}
.ani-delay17{-webkit-animation-delay:1.7s !important;animation-delay:1.7s !important}
.ani-delay18{-webkit-animation-delay:1.8s !important;animation-delay:1.8s !important}
.ani-delay19{-webkit-animation-delay:1.9s !important;animation-delay:1.9s !important}
.ani-delay20{-webkit-animation-delay:2s !important;animation-delay:2s !important}
.ani-delay25{-webkit-animation-delay:2.5s !important;animation-delay:2.5s !important}
.ani-delay30{-webkit-animation-delay:3s !important;animation-delay:3s !important}
.ani-delay40{-webkit-animation-delay:4s !important;animation-delay:4s !important}
.ani-delay41{-webkit-animation-delay:4.1s !important;animation-delay:4.1s !important}
.ani-delay50{-webkit-animation-delay:5s !important;animation-delay:5s !important}
.ani-duration05{-webkit-animation-duration:.5s !important;animation-duration:.5s !important}
.ani-duration{-webkit-animation-duration:1s !important;animation-duration:1s !important}
.ani-duration15{-webkit-animation-duration:1.5s !important;animation-duration:1.5s !important}
.ani-duration2{-webkit-animation-duration:2s !important;animation-duration:2s !important}
.ani-duration3{-webkit-animation-duration:3s !important;animation-duration:3s !important}
.ani-duration7{-webkit-animation-duration:7s !important;animation-duration:7s !important}


html{font-size: 4.44vw}
body{font-family: 'Noto Sans',sans-serif !important;}
video{max-width: 1280px;margin: 0 auto;width: 100%}
.vid-live{position:relative;max-width: 1280px;margin: 0 auto;width: 100%}
@media (min-width: 1380px) {
    html{font-size: 64px}
}
.container{position: relative;max-width: 1280px;margin:0 auto}
.text-muted{color: #999 !important}
.reload{padding-right: 45px;background:url(../images/reload.png) no-repeat right top 18px;background-size: 35px auto}
.text-primary{color: #877463 !important}
.text-bolder{font-weight: 700}
.img-block {display: block;width: 100%}
.text-center{text-align: center}
.clearfix:before, .clearfix:after{content: '';display: block;clear: both}
.lnb_box {width:100%; max-width:1440px; position:relative; margin:2% auto 0;}
.lnb {display:block; width:100%; position:relative;}
.myc_link_home {display:block; width: 8%; position: absolute; left: 1.5%; top: 7%;}
.myc_link_home:before {content:''; display:block; width:100%; padding-top:100%;}
.open_lnb {display:block; position:absolute; outline:none; width: 44%; left: 11.5%; top: 9.05%;}
.open_lnb:before {content:''; display:block; width:100%; padding-top:15%;}
.lnb_wrap {display:none; width:100%; position:absolute; left:0; top: 33%; z-index: 2;}
.con_lc_wrap {width:100%;max-width: 100%; position:relative; margin:0 auto;font-family:'Noto Sans KR', sans-serif; font-weight: 400;font-size: 1rem;color: #000;line-height: 1.344;overflow: hidden}
.animate__animated{display: block}
.animate__animated:not(.on){visibility:hidden;-webkit-animation-name:none !important;animation-name:none !important}
.hl{position: relative;padding: 0 4px;color: #fff;display: inline-block;line-height: 1.4rem}
.hl>*{position: relative;color:#000}
.hl>i{position: absolute;top: 11px;left: 0;right: 0;bottom: -4px;background:#d9e9ed;}
.cont-1 img{margin:0 auto}
table{text-align: left;}
table th{line-height: 2em;font-weight: 700;width:40%;vertical-align: baseline;}
table td{line-height: 1.6em;vertical-align: baseline;}
.vid-live{position:relative;}
.vid-refresh{position:absolute;width:100%;height:100%;background: rgba(0,0,0,0.8);left:0;top:0;z-index:10;}
.vid-refresh:not(.on){display: none;}
.vid-refresh .icon-refresh{position:absolute;left:50%;top:50%;display: inline-block;width:6.25%;height:11.11%;background:url(/kr/story/images/static/image/story/only-and-best/006/icon-refresh.png) no-repeat 50% 50% / 100% auto;transform:translate(-50%, -50%);cursor: pointer;}
.reah-voice{position:absolute;left:23%;bottom:10%;width:27%;height:10%;}
.reah-voice:not(.on){display: none;}
.insta-area{font-size:18px;font-weight: 700;position:relative;text-align: center;}
.insta-area img{vertical-align: middle;}
.insta-area span{margin:0 5px}
.insta-area a{position: relative;}
.insta-area a::before{content:"";position:absolute;bottom:-80%;left:0;width:100%;height:2px;background: #666;}
@media (min-width:768px){
	.d-m{display:none}
	.lnb_box{display:none}
	.d-flex{display:flex !important}
	.d-flex-reverse{display:flex !important;flex-direction:row-reverse !important;-ms-flex-direction:row-reverse !important}
	.txt{margin-left:130px}
	.d-flex-reverse .txt{margin-right:95px;margin-left:0}
	h2{margin:125px 0 90px;font-size:48px !important;font-weight:700;text-align:center}
	h2>span{font-size:28px !important;font-weight:500}
	[class^=cont-]{margin:0 auto 235px}
	[class^=cont-] h3{font-size:38px !important;font-weight:700;line-height:64px}
	.h3-sub{margin:20px 0 40px;font-size:18px;font-weight:700}
	.para{margin-top:20px;font-size:16px;letter-spacing:-0.05em;line-height:26px}
	.para>b{display:inline-block;margin-bottom:5px;font-size:18px;font-weight:700}
	.cont-1{margin-bottom:300px}
	/* .cont-2 .txt{padding-top:250px} */
  .cont-2 .img-area .d-pc{padding-top:10%}
  .cont-2 .d-pc.txt{flex:1;position:relative}
  .cont-2 .d-pc.txt::before{content:"";position:absolute;width:134%;height:51%;right:-50%;top:-5%;background:#eeefef;z-index:0;}
  .cont-2 h3, .cont-2 table{position: relative;z-index: 1;}
  table{font-size: 16px; vertical-align: top;}
  .cont-2 table{margin-top:3em}
	.cont-3 .txt{padding-top:540px}
	.hl{margin-top:-18px}
	.hl>i{position: absolute;top: 49px;left: 0;right: 0;bottom: 16px;background:#d9e9ed;}
	.product-wrp{width: 210px; margin: 0 auto; padding:30px; text-align: center;border-radius: 24px; box-shadow: 4px 4px 20px rgb(0 0 0 / 10%)}
	.product-wrp>img{margin-top:-140px}
	.product-wrp h3{margin:0;margin-top: 7px; font-size:16px !important;text-align:left;line-height:24px}
	.product-wrp p{margin:11px 0 18px; font-size:13px; color:#767676;text-align: left}
	.product-wrp a{display:flex;align-items:center;justify-content:space-between; padding: 12px 14px 12px 30px;border-radius:24px; background:#000; font-size:12px; color:#fff;}
  .insta-area {margin:7% 0}
}
@media (max-width:767.98px){
	.d-pc{display:none}
	.main-visual h2{display:none}
	
	.cont-1 img{width:100%}
	.cont-1 h2{margin:8% 0;margin-left:1.5rem;font-size:2.2rem;font-weight:700;letter-spacing:-0.05em}
	.cont-1 h2>span{font-size:1rem}
	p{line-height:1.7}
	.display-2{font-size:1.9rem;letter-spacing: -0.05em;font-weight:700}
	.display-3{font-size:1.3rem;letter-spacing: -0.05em;font-weight:700}
	.display-4{font-size:1.15rem;font-weight:700;letter-spacing: -0.05em}
	.display-5{font-size:0.9rem;letter-spacing: -0.05em}
	.cont-2{margin:17% 0 32%;text-align:center}
  .cont-2 .d-m{padding:0 50px}
	.cont-2 .display-2{margin-bottom:8%}
	.cont-2 img{margin:5% 0 10%;width:68.75%}
  .cont-2 table+table{margin-top:0}
	.cont-2 table+table tr:first-of-type>*{padding-top: 5rem}
  .cont-2 .d-m h3{font-size:1.5rem;font-weight:700;text-align: left;}
  .cont-2 .d-m .img-area::before{content:"";position:absolute;width:119%;height:36%;right:-50%;top:26%;background:#eeefef;z-index:0;}
  .cont-2 .d-m .txt table{position: relative;}
	.cont-3 .display-2{text-align:center;margin-bottom:13%}
	.cont-3{margin:0 2.7rem;padding-bottom:20%;}
	
	.txt{font-size: 0.77rem}
  .insta-area{margin:15% 0;text-align: center;font-size: 1rem;}
  .reah-voice{width:100%;height:10%;left:0;bottom:0}
  .vid-refresh .icon-refresh{width:15.25%;}
}

@keyframes move {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(60%);
    }
}

@keyframes flash {
    0%,50%,to {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,50px,0);
        transform: translate3d(0,50px,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,50px,0);
        transform: translate3d(0,50px,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(50px,0,0);
        transform: translate3d(50px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-50px,0,0);
        transform: translate3d(-50px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-50px,0,0);
        transform: translate3d(-50px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }

    to {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

.hearts {position: absolute;left: 3.887%;width: 6.935%;bottom: 0;margin-bottom: 22.3%}
.hearts .heart {position: absolute;width: 100%;padding-bottom: 85.714%;background: url(../images/heart.png) no-repeat 0 0/auto 100%;opacity: 0;margin: -10px 0 0 -5px;top: 0;left: 0}
.hearts.flying > .heart:nth-child(even) {-webkit-animation: 3.8s flyingEven linear infinite;animation: 2.8s flyingEven linear infinite;}
.hearts.flying > .heart:nth-child(odd) {-webkit-animation: 3.8s flyingOdd linear infinite;animation: 2.8s flyingOdd linear infinite;}
.hearts.flying > .heart:nth-child(1) {animation-delay: 0.2s;}
.hearts.flying > .heart:nth-child(2) {animation-delay: 0.6s;}
.hearts.flying > .heart:nth-child(3) {animation-delay: 0.8s;}
.hearts.flying > .heart:nth-child(4) {animation-delay: 1.5s;}
.hearts.flying > .heart:nth-child(5) {animation-delay: 2.2s;}
.hearts.flying > .heart:nth-child(6) {animation-delay: 2.9s;}
.hearts.flying > .heart:nth-child(7) {animation-delay: 3.2s;}
.hearts.flying > .heart:nth-child(8) {animation-delay: 3.5s;}
.hearts.flying > .heart:nth-child(9) {animation-delay: 3.8s;}
.hearts.flying > .heart:nth-child(10) {animation-delay: 4.1s;}

@-webkit-keyframes flyingEven {
  0% {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: translate(0px, -95vw) scale(1);
    opacity: 0;
    filter: blur(5px);
  }
}
@keyframes flyingEven {
  0% {
    transform: translate(5px, 10px) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: translate(0px, -90vw) scale(1.5);
    opacity: 0;
    filter: blur(5px);
  }
}
@-moz-keyframes flyingOdd {
  0% {
    transform: translate(5px, 15px) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: translate(10px, -90vw) scale(1.5);
    opacity: 0;
    filter: blur(5px);
  }
}
@-webkit-keyframes flyingOdd {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: translate(-2.22vw, -90vw) scale(1.5);
    opacity: 0;
    filter: blur(5px);
  }
}
@keyframes flyingOdd {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: translate(-4.44vw, -90vw) scale(1.5);
    opacity: 0;
    filter: blur(5px);
  }
}
.sns-share {position: relative;text-align: right;}
@media screen and (max-width: 768px) {
   .sns-share {padding: 20px 20px 4px 20px;}
   .sns-share .tooltip-wrap.share .tooltip-box {top: 48px;right: 10px;}
}
@media screen and (min-width: 769px) {
   .sns-share {max-width: 1284px;margin: 0 auto;padding: 24px 24px 0 24px;}
   .sns-share .tooltip-wrap.share .tooltip-box {top: 34px;}
}