@charset "utf-8";

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

/* 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}

/* helperClass */
html{font-size: 3.888vw}
.video-full{overflow: hidden; position: absolute;top:4.44vw;left:4.44vw;bottom:4.44vw;right:4.44vw; border-radius:.571rem;box-shadow: 0px 0px 4.44vw 0px rgb(4 0 0 / 20%)}
.video-full video{display: block;width: auto;height:100%;transform: translate(-25%,0)}
.bg-beige{background:#f5f2ed !important}
.display-1{font-size:1.8rem}
.text-muted{color: #999 !important}
.text-primary{color: #887a68 !important}
.text-danger{color: #e83d52 !important}
.font-weight-400{font-weight: 400 !important}
.font-weight-500{font-weight: 500 !important}
.font-weight-700{font-weight: 700 !important;}
.img-block {display: block;width: 100%}
.position-relative{position: relative !important}
.position-absolute{position: absolute !important}
.overflow-hidden{overflow: hidden !important}
.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;font-weight:700}
.hl>i{position: absolute;top: 13px;left: 0;right: 0;bottom: -1px;background:#ece3d4}
.hl.display-1>i{top:16px}

/* Content */
.btn-blog-link{display:block;padding:15px;border:1px solid #999;border-radius:20px;background:transparent;text-align:center;font-weight:400}
.text-review{font-size: 14px; text-align:left;margin:10% 0;font-weight:400 !important;line-height:24px}
.text-review>span{color:#e83d52}
.display-small.txt{font-size: 13px; font-weight: 400; text-align: left; line-height: 24px; margin-bottom: 12%;}

.btn-video-link{display: block; padding: 15px; border: 1px solid #999; border-radius: 20px; background: transparent; text-align: center; font-weight: 400;}
.mov-wrp img{width:100% !important;}
.mov-wrp .d-flex-space {display: flex;padding: 0 5%;margin-top: 4%;justify-content: space-between;-ms-justify-content: space-between;align-items: center;-ms-align-items: center;}
.mov-wrp .d-flex-space p {font-size: 0.85rem; font-weight: 400;}
.mov-wrp .d-flex-space a {margin: 0;padding: 7px 9px;border-radius: 5px;border-color: #ccc;font-size: 0.85rem;}
.cont-36-5{padding-bottom:0% !important;}

/* PC */
@media (min-width:768px){
	.mt25 {margin-top: 25px; margin-bottom: 35px;}
	.mov-wrp .d-flex-space{align-items: start; padding:0; margin-top: 25px; margin-bottom: 35px;}
	.mov-wrp .d-flex-space p {font-size:16px; font-weight: 500;}
	.mov-wrp .d-flex-space a {width: 200px; padding: 14px; border: 2px solid #222; border-radius: 30px; font-weight: 700; margin: 0; font-size:16px;}
  
	.img-block{display: inline-block;width: auto}
	.d-m{display: none}
	.d-flex{display: flex !important;align-items: flex-start}
	.align-center{align-items: center !important}
	.d-flex-space{display: flex;justify-content: space-between}
	.d-flex-reverse{display: flex;flex-direction: row-reverse}
	.d-flex-space p{font-weight: 500}
	.btn-blog-link{width: 200px;padding: 14px;border: 2px solid #222;border-radius: 30px;font-weight: 700;margin: 0}
	.mt-auto{margin-top: auto;align-self: flex-end;}
	.mt-auto-lg{margin-top: auto;margin-bottom: 145px;align-self: flex-end;}
	.mt-auto-md{margin-top: auto;margin-bottom: 35px;align-self: flex-end;}
	.mt25{margin-top: 25px;margin-bottom: 35px}
	.text-center{text-align: center}
	.text-left{text-align: left}
	.txt-wrp-rt{margin-left: 130px}
	.txt-wrp{margin-right: 130px}
	.txt {position: relative; line-height: 1.6; z-index: 9;}
	.txt.lg{font-size: 22px;font-weight: 700}
	.txt-lg{display: inline-block;margin-top: 35px;font-size: 22px;font-weight: 700}
	.img-wrap>*+*{margin-top: 30px}
	.img-wrap>img{width: 100%}
	.display-1{margin-bottom: 0 !important;font-size: 32px}
	.display-1 .hl{line-height: 1.5}
	.display-1 .hl>i{top: 26px;bottom: -2px}
	.hl{line-height: 1.6}
	.hl>i{top: 13px;bottom: -2px !important;line-height: 1.6}
	.w520{width: 520px !important}
	.w630{width: 630px !important}
	.w740{width: 740px !important}
	
	.con_lc_wrap{font-family:'Noto Sans KR', sans-serif;font-weight: 400;font-size: 16px;left: -0.5em;overflow: hidden}
	.container{max-width: 1320px;padding: 0 20px;margin: 0 auto}
	.con_lc_wrap{max-width:100%}
	.con-tit-wrap{padding: 128px 0;text-align: center}
	.con-tit-wrap>p{font-size: 28px;margin-bottom: 10px;font-weight:500;}
	.con-tit-wrap h2{font-weight: 700;font-size: 48px;margin-bottom: 85px;line-height: 1.35}
	.con-tit-wrap .d-flex{justify-content: flex-end}
	.con-tit-wrap .d-flex .d-pc{font-size: 22px;font-weight: 700;text-align: left}
	.con-tit-wrap .d-flex img{width: 630px;margin-left: 50px}
	.con-tit-wrap .display-1.txt{margin: 140px 100px 0 0}
	.cont-2{margin: 140px 0 100px}
	.cont-3{margin-right: 220px;background: #fff !important}
	.cont-3 .img-wrap{margin-left: auto}
	.cont-4{margin: 100px 0 115px 110px;background: #fff !important}
	.cont-5{margin-right: 110px;background: #fff !important}
	.cont-5 .txt{margin-right: 50px}
	.cont-6{position: relative;background: #fff !important}
	.cont-6:before,.cont-7:before,.cont-8:before,.cont-9:before{content: '';position: absolute;left: -50vw;right: 59%;bottom: 0;top: 30%;background: #f5f2ed}
	.cont-7{position: relative;padding: 105px 0 70px;background: #fff !important}
	.cont-7:before,.cont-8:before,.cont-9:before{top: 0}
	.cont-7 .d-flex-reverse,.cont-9 .d-flex-reverse{justify-content: flex-end}
	.cont-7 .txt,.cont-9 .txt{margin-right: 110px}
	.cont-8,.cont-9{position: relative;background: #fff !important}
	.cont-9{padding: 120px 0}
	.cont-9:before{bottom: -22%}
	.cont-11{margin: 115px 0 105px}
	.cont-11 .img-wrap{margin-left: auto;margin-right: 110px}
	.cont-13{margin-left: 220px;margin-top: 90px}
	.cont-14{margin: 160px 0 95px}
	.cont-14 .txt{margin-top: 140px;margin-right: 40px}
	.cont-15{margin-left: 110px}
	.cont-16{margin: 190px 0 190px 110px}
	.cont-17 img{width: 950px}
	.cont-17 .txt-sm{font-size: 14px}
	.txt-sm{font-size: 14px !important}
	.cont-18{margin: 125px 0 135px}
	.cont-20{margin: 140px 0 100px 220px}
	.cont-20 .d-flex-reverse{justify-content: flex-end;-ms-justify-content: flex-end}
	.cont-20 .txt{margin-right: 25px}
	.cont-21 .txt{margin-top: 280px}
	.cont-22{margin: -240px 0 140px auto}
	.cont-23,.cont-24,.cont-25,.cont-26,.cont-27,.cont-28{position: relative;background: #fff !important}
	.cont-23:before{content: '';position: absolute;top: 30%;bottom: 0;left: 42%;right: 0;background: #f5f2ed}
	.cont-24:before,.cont-25:before,.cont-26:before,.cont-27:before,.cont-28:before{content: '';position: absolute;top: 0;bottom: 0;left: 42%;right: 0;background: #f5f2ed}
	.cont-23 .txt-sm{position: relative;margin-top: 27.8%;margin-left: 20px;z-index: 1;letter-spacing: -0.05em;font-size: 14px;line-height: 1.5}
	.cont-24{padding: 60px 0 110px}
	.cont-24 .img-wrap{margin-left: auto}
	.cont-26{padding: 125px 0 160px;padding-left: 140px}
	.cont-26 .d-flex-reverse{justify-content: flex-end;-ms-justify-content: flex-end}
	.cont-26 .txt{margin-right: 70px}
	.cont-28{padding: 90px 0 75px}
	.cont-28:before{bottom: 58%}
	.cont-28 .img-wrap{width: 780px;margin-left: auto;margin-right: -150px}
	.cont-30{margin: -330px 0 50px}
	.cont-30 .img-wrap{margin-left: auto}
	.cont-31,.cont-32,.cont-33,.cont-34{margin-left: 110px}
	.cont-32{margin: -175px 0 45px}
	.cont-32 .img-wrap{margin-left: auto}
	.cont-33{margin-top: 70px;margin-bottom: 140px}
	.cont-34 img{width: 840px}
	.cont-35{margin: 355px 0 170px}
	.cont-36 .mov-wrp{margin-bottom: 100px}
	.btm-txt{margin-top: 100px}
	
	.cont-btm{position: relative;padding-top: 160px;margin-top: 215px;height: 520px;background:#f5f2ed url(/kr/story/images/static/image/story/hands-on-reviews/015/btm.png) no-repeat center bottom;text-align: center}
	.cont-btm .go-btn{position: absolute;top: -25%;left: 15%}
	.btm-tit{margin-bottom: 10px;font-size: 50px;font-weight: 700}
	.btm-subtit{font-size: 26px;font-weight: 700}
	.blog-intro{float: right;}
	.blog-intro a{margin: 35px auto 0}
	.cont-btm img{width: auto}
	.display-small{font-size: 14px; margin-top: 10%;}
}
/* 모바일 */
@media (max-width:767.98px){
	.d-pc{display: none}
	.btm-txt{font-size: 0.85rem !important;font-weight: 400 !important;padding: 0 5% !important;margin-top: 5%}
	.con_lc_wrap {width:100%;max-width: 1440px; position:relative; margin:0 auto;font-family:'Noto Sans KR', sans-serif; font-weight: 700;font-size: 1rem;letter-spacing: -.05em;color: #000}
	.con-tit-wrap{width: 90%;margin: 9% auto}
	.con-tit-wrap h2{margin:2% 0 10%;font-size:2.24rem;line-height:1.294}
	.lnb_box img{width:100%}
	[class*=cont-]{overflow: hidden;padding-bottom: 18%}
	[class^=cont-]:last-of-type{padding-bottom:9%}
	.cont-1 .hl+.font-weight-400{display:block;margin-top:10px}
	.con-tit-wrap .img-wrp{margin:0 -5.7%}
	[class^=cont-] .txt{position:relative;margin-top:10%;padding:0 8.88%;font-size:1rem;line-height:1.6;z-index:1}
	.h1{margin-left: 8.88%;font-size: 3.214rem}
	.h1+p{font-size: 1.286rem;font-weight: 400;line-height: 1.3;margin: 1em 0 1.389em 8.88%;letter-spacing: -.05em}
	.h1 small{font-size: 1.429rem;margin-bottom: 1%}
	.h2{font-size: 1.786rem;}
	.h1-v2{font-size:2.214rem;text-align:center}
	.h1-v2+p{margin:7% 0 6%;font-size:1.071rem;text-align:center;font-weight:400;line-height:1.5}
	.h2-v2{font-size:1.5rem}
	/* .next{background: #f4f0eb;text-align: left;padding: 16.31% 8.88% 5.2%;margin-top: -19%} */
	.next .h2{margin-top: 5px}
	.cont-2 .swiper-slide{padding: 0}
	img.animate__animated+img.animate__animated{margin-top:5%}
	.video-wrp{position:relative;padding-top:56%;margin-bottom:5%}
	.video-wrp>*{position:absolute;top:0;left:0;width:100%;height:100%;max-width:100%}
	.btn-blog-link{padding:15px 0 18px;margin:13% 4.88% 12%;border-radius:12px;}
	.cont-23 .txt-sm{padding: 0 9%}
    .text-review{font-size:13px;font-weight:400;text-align:left;line-height:24px;padding:0 8.88%}
	.cont-23 .txt-sm span{line-height: 1.6 !important}
	.cont-1.d-m{padding-bottom: 11% !important}
	.cont-1 .txt >span{margin-bottom: 19px !important}
	.cont-1 .txt >span i{top: 14px !important;bottom: -6px !important}
}

/* ani 키프레임 */
@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);
    }
}
@-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;}
   }