@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}
br{font-family: arial}
iframe{border: 0}
.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)}
.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.6}
.hl>*{position: relative;color:#000;font-weight:700}
.hl>i{position: absolute;top: 65%;left: 0;right: 0;bottom: 5px;background:#ece3d4}
.w-100{width: 100%}

/* Content */
.btn-blog-link{display:block;padding:15px;border:1px solid #999;border-radius:20px;background:transparent;text-align:center;font-weight:400}
.con_lc_wrap{overflow: hidden;max-width:100%;font-family:'Noto Sans KR', sans-serif;font-weight:400;color: #000}
.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%}
img {max-width: 100%;}

/* PC */
@media (min-width: 768px){
    .visible-m{display: none !important}
    .only-t { display: none;}
    .img-fluid{max-width: 100%;display: inline}
    .display-1{font-size: 32px}
    .text-right{text-align: right}
    .text-center{text-align: center}
    .container{margin: 0 auto;max-width: 1280px}
    .con_lc_wrap{font-size: 16px}
    [class^=cont-]{max-width:1320px;margin:0 auto;padding-left:20px;padding-right:20px;}
    [class^=cont-].wide{max-width: none}
    [class^=cont-] *, .txt *{word-break: keep-all}
    .display-2{font-weight: 700; font-size: 18px;}
    .hl>i{top: 56%;}
    .text-md-center { text-align: center;}

    .txt{position:relative;margin-top: 20px;line-height:1.6;z-index:1}
    .img-wrp.invisible-m .txt{text-align: center; padding: 90px 20px;margin-top:0}
    .d-flex { display: flex;}
    .flex-content{display: flex;margin: 0 -10px;align-items: center}
    .align-end{align-items: flex-end}
    .align-start{align-items: flex-start}
    .align-end .text-area{margin-bottom: 5%}
    .align-start{align-items: flex-start}
    .justify-content-between{justify-content: space-between}
    .justify-content-end{justify-content: flex-end}
    .row-reverse{flex-direction: row-reverse}
    .flex-content>*{padding-left: 10px;padding-right: 10px}
    .flex-content .img-area{flex: 1}
    .flex-content .txt-area{flex-basis: 50%;max-width: 50%;}
    .col-10{max-width: 83.333333% !important;flex-basis: 83.333333% !important}
    .col-7{max-width: 58.333333% !important;flex-basis: 58.333333% !important}
    .col-5{max-width: 41.666667% !important;flex-basis: 41.666667% !important}
    .col-6{max-width: 50% !important;flex-basis: 50% !important}
    .col-4{max-width: 33.333333% !important;flex-basis: 33.333333% !important}
    .txt-area>.txt:first-child{margin-bottom: 23%;}
    .img-area img{position:relative}
    .mt25{margin-top: 25px;margin-bottom: 35px}

    .con-tit-wrap .img-area { max-width: 1320px; margin:0 auto; padding:0 20px}
    .con-tit-wrap .title{padding: 6.25% 20px 90px;text-align: center;}
    .con-tit-wrap .title p{font-size: 28px;font-weight: 500;margin-bottom:.8em}
    .con-tit-wrap .title h2{font-size: 48px;font-weight: 700}
    .con-tit-wrap img, .cont-18 img { width: 47%;}
    .cont-1 { padding:35px 20px 45px}
    .cont-2 img { width: 40%; margin-right: 10%;}
    .cont-3 { padding-bottom:7.88%; position: relative;}
    .cont-3::before { content:""; width:26.8%; height: 100%; position: absolute; bottom:-54%; left:-17%; background-color: #f5f2ed;}
    .cont-3>.txt { padding: 65px 0 100px;} 
    .cont-4, .cont-6 { padding-bottom:10%; position: relative;}
    .cont-4::before { content:""; width:26.8%; height: 72%; position: absolute; top:-7%; right:-19%; background-color: #f5f2ed;}
    .cont-4 img { width:49.2%;}
    .cont-4 .txt { width: 42.7%; margin-bottom: 5%;}
    .vid-wrap .txt { text-align: center; padding:5% 0 10%;}
    .cont-6 { position: relative;}
    .cont-6::before{ content:""; width:36%; height:320%; position: absolute; top:34%; left:32%; background-color: #f5f2ed;}
    .cont-7 { padding-bottom:6.2%;}
    .cont-7 .img-area { width: 48.1%; margin-left:43.1%;}
    .cont-8 .col-5 { margin-left:8.5%; margin-right: 11.7%;} 
    .cont-8 .invisible-m { margin-bottom: 15%;}
    .cont-8-1 {padding-right:8.88%;margin-top:5%}
    .cont-10 { padding-top:10%; position: relative;}
    .cont-12 .txt:first-child { margin-bottom: 20%;}
    .cont-13 { padding:12% 20px;}
    .cont-13 img:last-child { margin-top:5%;}
    .cont-16 { position: relative;}
    .cont-16::before { content:""; width:72.7%; height: 636%; position: absolute; top:34%; right:0; background-color: #f5f2ed;}
    .cont-16 img { width: 57.7%; margin-right: 8.5%; margin-left: -5%;}
    .cont-16 .txt { margin-top:12%}
    .cont-17 { margin-top: -4%; margin-bottom:7.5%;}
    .cont-17 .col-4{ margin-right: 8.5%; margin-left: 6.9%;}
    .cont-18 img{ margin-left:8.5%; margin-right: 10%;}
    .cont-26 .col-7 { margin-left:8.5%; margin-right: 8%;}
    .cont-18 .txt { margin-bottom:14%}
    .cont-19 { padding:9% 20px}
    .cont-19 .col-6 { margin-right: 8.5%; }
    .cont-21 { padding:10% 8.5% 8%}
    .cont-22, .cont-24 { padding:0 8.5%}
    .cont-22 .col-5 { margin-right: 10%;}
    .cont-23 { padding:7% 0 7% 8.5% }
    .cont-25, .cont-30, .cont-32, .cont-34 { padding:7% 20px 9%;}
    .cont-25 .col-5 { margin-right: 16.9%;} 
    .cont-27 { padding:10% 9.33%}
    .cont-27 .d-flex img { width: 50%;}
    .cont-29 { margin-top:-9%}
    .cont-29 .txt { margin-bottom:8%}
    .cont-33 .col-6 { margin-left:8%; margin-right: 6%;}    
    .cont-34 .col-5 { padding-left:9%}
    .text-review{font-size:14px;font-weight:400;text-align:left;line-height:24px;margin-top:8%;}

    .prdt-banner{background: #f5f2ed;padding: 35px 20px 0; margin-top:18%}
    .prdt-banner .container{position: relative;text-align: center;padding: 55px 0 20px}
    .prdt-banner .link{position: absolute;z-index: 10;top: -125px;left: -28px}
    .prdt-banner .img-area{max-width: 58.333333%;flex-basis: 58.333333%;padding-left: 15%}
    .prdt-banner .txt-area{max-width: 41.666667%;flex-basis: 41.666667%;text-align: center;font-size: 26px;font-weight: 700;white-space: nowrap}
    .prdt-banner .img-fluid{vertical-align: top}
    .prdt-banner .display-1{line-height: 1.5; font-size: 52px;}
    /* .text-bull{padding-left: .5em;font-size: 14px;line-height: 1.6}
    .text-bull>span{float: left;margin-left: -.5em}
    .video-wrp{margin-bottom: 0}
    .video-bottom{display: flex;justify-content: space-between;margin: 20px 0 115px}
    .video-bottom .btn-blog-link{margin: 0} */

    .prdt-banner a{margin:35px auto 0}
    .btn-blog-link{width: 200px;padding: 14px;border: 2px solid #222;border-radius: 30px;font-weight: 700;font-size:16px;margin: 0}
    
    .mov-wrp p { font-weight: 500;}
  


}

@media (min-width:768px) and (max-width: 1319px){
  
  .only-t{display: block;}
}

@media (min-width:768px) and (max-width: 1199.98px){
    /* .txt-area br{display: none}
    .txt-area .txt .display-2, .txt-area .txt>.font-weight-700{display: block;margin-bottom: 1em}
    .txt-area .txt .display-2:not(:first-child), .txt-area .txt>.font-weight-700:not(:last-child){margin-top: 1em}
    .txt-area .txt .hl{display: inline-block}
    .txt-area .txt .hl+br{display: block}
    .prdt-banner .img-area{flex: 1 !important;max-width: 100% !important}
    .prdt-banner .txt-area{flex: 0 0 auto !important;max-width: 100% !important}
    .flex-content>*[class*=col-]{flex-basis: 50% !important;max-width: 50% !important}
    .cont-7 .align-end .col-6{margin: 0}
    .cont-11 .col-10{flex-basis: 100% !important;max-width: 100% !important} */
}


/* 모바일 */
@media (max-width:767.98px){
  .invisible-m{display:none !important}
  .only-t { display: none;}
	.con_lc_wrap{max-width: 1440px; position:relative; margin:0 auto;font-weight: 700;font-size: 1rem;letter-spacing: -.05em}
	.con-tit-wrap{width: 90%;margin: 9% auto}
	.con-tit-wrap h2{margin:2% 0 10%;font-size:2.24rem;line-height:1.294;font-weight: 400;}
	[class*=cont-]{overflow: hidden;padding-bottom: 18%}
	[class^=cont-]:last-of-type{padding-bottom:9%}
  img.animate__animated+img.animate__animated{margin-top:5%}
	.cont-1 .hl+.font-weight-400{display:block;margin-top:10px}
	.con-tit-wrap .img-wrp{margin:0 -5.7%}
  .bg-beige{background:#f5f2ed !important}
	[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}
  .cont-3>.txt { margin-bottom: 10%;}
  .cont-36 { padding-bottom: 0;}
	.text-review{font-size:13px;font-weight:400;text-align:left;line-height:24px}

  .btn-blog-link{padding:15px 0 18px;margin:12% 4.88% 12%;border-radius:12px;}
  .mov-wrp .d-flex.justify-content-between{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.justify-content-between p{font-size: 0.85rem;font-weight: 400}
	.mov-wrp .d-flex.justify-content-between a{margin: 0;padding: 7px 9px;border-radius: 5px;border-color: #ccc;font-size: 0.85rem}

	.prdt-banner .container{padding-bottom: 0}

}

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