@charset "utf-8";

@import url(reset.css);
@import url(animate.min.css);
@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)}
.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}

/* 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:0%}
.video-wrp>*{position:absolute;top:0;left:0;width:100%;height:100%;max-width:100%}
.btn-wrp{display: flex; justify-content: space-between; position:relative; padding-bottom: 4%; text-align: right; margin-top:16px;}
.btn-wrp p{font-size: 0.8571rem; letter-spacing: -0.02em;}
.btn-wrp b, .desc b{color:#ea4a5e;}
.btn-video{display: inline-block; width: 200px;padding: 16px 0; border: 2px solid #000; border-radius: 36px; text-align: center; font-size: 18px; color: #000 !important;}
.desc{width:50%; margin:9.0625% auto 0; padding-bottom: 6.8125%; text-align: center; font-size: 0.8571rem; margin-top:0;}
.display-small.txt {font-size:13px;font-weight:400;text-align:left;line-height:24px}
.display-small.text-danger{color:#e83d52 !important;}
.img-video{position:relative; z-index: 1;}
.thumb{position: relative;}

.btn-video-link{display: block; padding: 15px; border: 1px solid #999; border-radius: 20px; background: transparent; text-align: center; font-weight: 400;}
.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;}

/* 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;}
    
    .visible-m{display: none !important}
    .hl{line-height: 1.2}
    .hl>i{top: 50%;bottom: 0}
    .img-fluid{max-width: 100%;display: inline}
    .display-1{font-size: 52px}
    .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;}
    .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 !important}
    .con-tit-wrap .title h2 span{display: inline-block; margin-top:18px;}
    [class^=cont-] .txt{position:relative;margin-top: 56px;line-height:1.6;z-index:1}
    .img-wrp.invisible-m .txt{text-align: center; padding: 90px 20px;margin-top:0}
    .flex-content{display: flex;flex-wrap: wrap;margin: 0 -10px;align-items: center}
    .align-end{align-items: flex-end}
    .align-end .txt-area{margin-bottom: 6.25%}
    .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}
    .w-100{width: 100%}
    .model-name{font-size: 20px;color:#969696;margin: 10px 0 60px;display: block}
    .img-area img{position:relative}
    .tblock{display: inline-block;vertical-align: top;text-align: left;line-height:1.6}
    .prdt-banner{background: #f5f2ed;padding: 35px 20px; margin-top: 100px;}
    .prdt-banner .container{position: relative;text-align: center}
    .prdt-banner .link{position: absolute;z-index: 10;top: -125px;left: -28px}
    .prdt-banner .img-area{padding-left: 18%}
    .prdt-banner .txt-area{text-align: center;font-size: 26px;font-weight: 700;white-space: nowrap; flex-basis: 35%;max-width: 35%;}
    .prdt-banner .img-fluid{vertical-align: top}
    .prdt-banner .display-1{line-height: 1.5}
    .btn-blog-link{display: inline-block;vertical-align: top;font-size: 16px;border: 2px solid;font-weight: 700;border-radius: 2rem;width: 195px;margin-top: 35px}
    .text-bull{padding-left: .5em;font-size: 14px;line-height: 1.6}
    .text-bull>span{float: left;margin-left: -.5em}
    .bg-beige {background: none !important;}
    .bg-ct{position:relative; max-width:1320px; margin:5.625% auto 0;}
    .bg-ct:before{content: ''; position: absolute; width: 65.625%; height: 100%; top:-0.4962%; left: 17.1875%; right: 17.1875%; background: #f5f2ed;}

    .cont-1, .cont-5-5, .cont-6, .cont-13{margin-bottom: 8.85%;}
    .cont-2, .cont-3-5{margin-bottom: 9.375%; /* 180*/}
    .cont-2 .txt-area .invisible-m{max-width:562px;}
    .cont-3{width: 83.269%; padding-left: 31.25%; margin-bottom: 7.34375%;  /* 141*/}
    .cont-3 .txt-area{margin-top:56px;}
    .cont-4{margin-bottom: 8.787%; text-align:center;}
	.cont-4 img{width: 100%}
    .cont-5 img{margin-bottom: 6.25%;}
    .cont-5 img:last-child{padding-left: 33.75%;}
    .cont-5-5 .txt{width: 100%; max-width: 430px;}
    .cont-6 .point{display: inline-block;}
    .cont-7{text-align: center;}
    .cont-7 .flex-content {flex-wrap: nowrap;}
    .cont-7 .flex-content img:first-child{padding-right:0;}
    .cont-7 .flex-content img:last-child{padding-left:0;}
    .cont-7 .txt, .cont-8 .txt, .cont-9 .txt{margin-top:36px !important;}
    .cont-8{margin:3% auto 7%;}
    .cont-8 .sect2 img{margin-top:105%;}
    .cont-13 .txt{ width: 100%; max-width: 530px;}
    .cont-14{margin-bottom: 4%}
    .cont-14 .img-area{text-align: right;}
    .btm-txt{margin-top: 150px}
    .desc, .btn-wrp p{font-size: 14px; line-height: 24px;}
    .display-small.txt {font-size:14px;font-weight:400;text-align:left;line-height:24px; margin: 14% 0px 0px;}
}

@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}
    .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}
    .bg-ct:before{content: ''; position: absolute; width: 100%; height: 100%; top:-0.4962%; left: 0%; right: 0%; background: #f5f2ed;}
    .align-end .txt-area{margin-bottom: 0}
}


/* 모바일 */
@media (max-width:767.98px){
	.btm-txt{font-size: 0.85rem !important;font-weight: 400 !important;padding: 0 5% !important;margin-top: 10%}
    .invisible-m{display:none !important}
    .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}
    .con-tit-wrap .txt{margin-bottom:18%}
    .lnb_box img{width:100%}
    [class*=cont-]{overflow: hidden;padding-bottom: 19%}
    [class^=cont-]:last-of-type{padding-bottom:9%}
    .cont-1 .hl+.font-weight-400{display:block;margin-top:10px}
    .cont-2, .cont-3, .cont-7, .cont-12{background: #f5f2ed;}
    .cont-2 .img-area::before{display: none;}
    .con-tit-wrap .img-wrp{margin:0 -5.7%}
    [class^=cont-] .txt{position:relative;margin-top:13%;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%}
    .btn-blog-link{padding:15px 0 18px;margin:10% 4.88% 12%;border-radius:12px;}
    iframe {width:560px;height:315px}
    .hl.display-1>i{top:15px;bottom:-8px}
    .cont-14 .text-bull{font-weight: 400;margin-top: 1.5em}
    .cont-5{padding-bottom: 5%;}
    .cont-14{padding-bottom:9%}
}

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