@charset "utf-8";
/*default*/
*{box-sizing: border-box;;}
body, h1, h2, h3, h4, h5, h6, p, address, .h1, .h2, .h3, .h4, .h5, .h6, figure{margin:0; padding:0;}
ul, li, dl, dt, dd, ol{margin:0; padding:0; list-style: none;}
html,
body {
  overflow-x: hidden;
}

img{border:0; display:block;}
a{text-decoration:none;display:block; color:#212121; }
body{font-family: 'pretendard', sans-serif; font-size:16px; letter-spacing: -1px; line-height: 1.2; }

.full_inner,
.inner{width:100%; margin-left:auto; margin-right:auto; padding-left:15px; padding-right:15px; display:block;}
.full_inner{max-width:1730px;}
.inner{max-width:1430px;}


.blind{ position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);}
table{table-layout: fixed; width:100%; margin-bottom: 0;}
table thead tr th.slash{background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="gray" stroke-opacity="0.2" /></svg>'); text-align: left!important;}
table thead tr th.slash span{text-align: right!important; display: block;;}
.img_box{display:block; }
.img_box > img{width:100%; height:100%; object-fit: cover;}
textarea{resize: none;}


.ellip_2{overflow: hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical;}
.word_keep{word-break: keep-all;}

/*header*/
header{position: fixed; top:30px; left:50%; transform: translateX(-50%); z-index: 10; width: 100%; transition: all 0.5s ease; padding:0; }
.header_wrap{display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; width: calc(100% - 30px); padding-left:15px; padding-right: 15px; max-width: 1730px ; margin: 0 auto;transition: all 0.5s ease;}
.header_wrap .logo{width: 100%; max-width: 560px; transition: all 0.5s ease;}
.header_wrap .logo a img{width: 100%; height: 100%; object-fit: contain;}
.m_gnb{display: none;}
.header_wrap .gnb_wrap{display: flex; flex-direction: row; align-items: center; gap: 0 26px; }
.header_wrap .gnb_wrap li{}
.header_wrap .gnb_wrap li a{font-weight: 400; transition: all 0.3s ease;}
.header_wrap .gnb_wrap li a:hover{font-weight: 600; text-decoration:underline;}

/* 스크롤 후 */
header.is-scroll{background: linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(255,255,255,0)); backdrop-filter: blur(1px); top:0; padding: 30px 0 15px 0;;}
header.is-scroll .logo{max-width:150px;}

header.is-dark{background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0));}
header.is-dark .gnb_wrap li a{ color:#fff;}
header.is-dark .logo img{filter:brightness(0) invert(1);}


/*main 시작*/
main{}
.main_info{background:#F6F6F5 url(../image/bg_main.jpg) no-repeat; background-position: center left;padding-top: 260px; min-height: 700px; height:1200px; background-size:cover;position: relative; }
.scroll-read-text{text-align: start; line-height: 1.3; font-family: 'paperlogy'; padding-top: 130px;}
.scroll-read-text .line1,
.scroll-read-text .line2{display: inline; font-weight: 700;}
.scroll-read-text .line1{font-size: 32px; }
.scroll-read-text .line2{font-size: 38px; }
.scroll-read-text .line1 > span,
.scroll-read-text .line2 > span{display:inline-block;color:#B1B1B1;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.scroll-read-text .line1 > span,
.scroll-read-text .line2 > span{background-image:linear-gradient(to right, #000 0%,#000 var(--p, 0%), #B1B1B1 var(--p, 0%), #B1B1B1 100%);}
.scroll-sub{font-family: 'paperlogy'; font-size: 22px; font-weight: 500; margin-top: 30px; }
.main_info .img_wrap{position: absolute; bottom: 100px; right:calc((100vw - 1730px) / 2); display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap:50px; }
.main_info .img_wrap .img_box{width: 210px; height: 460px; border-radius: 20px; overflow: hidden; }
.main_info .img_wrap .img_box:first-child{margin-bottom: -200px}
.main_info .img_wrap .img_box:last-child{margin-bottom: 200px; }

/*공통*/
.mC_sec{padding: 140px 0; }
.mC_sec .titl_wrap{display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px 30px; align-items: flex-end; margin-bottom: 100px;;}
.mC_sec .titl_wrap .titl{width: 40%; }
.mC_sec .titl_wrap .titl span{color:#4DDD38; font-size: 15px; }
.mC_sec .titl_wrap .titl h3{color: #0b0b0b; font-family:'paperlogy'; font-size: 36px; font-weight: 700}
.mC_sec .titl_wrap .subs{width: calc(65% - 30px); color:#3c3c3c; font-size: 18px; line-height: 1.3;}

/*beauty*/
.beauty_sec{background: #F4F4F4; }
.beauty_owl{}
.beauty_owl .item{}
.beauty_owl .item .img_box{max-height: 500px}

/*marketing*/
.mkting_sec{background:#191919;}
.mkting_sec .titl_wrap .titl span{color:#3BFF1F}
.mkting_sec .titl_wrap .titl h3,
.mkting_sec .titl_wrap .subs{color:#fff; }
.mkting_sec .list{width: calc(60% - 30px); margin-left: auto; }
.mkting_sec .list .item{padding:18px 26px 18px 78px; border-radius: 25rem; background: rgba(75,75,75,0.12); }
.mkting_sec .list .item:not(:last-child){margin-bottom: 20px; }
.mkting_sec .list .item dl{position: relative; display: flex; flex-direction:row; align-items:baseline; gap:4px 20px; color:#fff; }
.mkting_sec .list .item dl:before{content:''; display: block; width: 32px; height: 20px; border-radius: 25rem; background-image: url(../image/mkt_sprit.png); background-repeat: no-repeat; background-size: auto;background-position-y: center;position: absolute; top:0; left: -48px;}
.mkting_sec .list .item dt{font-size: 20px; font-weight: 700; position:relative; }
.mkting_sec .list .item dt:after{content:''; display: block; width: 1px; height: 12px; background: #fff; position: absolute; top:50%; right: -10px; transform:translateY(-50%)}
.mkting_sec .list .item dd{font-size: 18px; }
.mkting_sec .list .item01 dl:before{background-color: #4F46E5; background-position-x: 0;}
.mkting_sec .list .item02 dl:before{background-color: #06B6D4; background-position-x: -32px;}
.mkting_sec .list .item03 dl:before{background-color: #10B981; background-position-x: -64px;}
.mkting_sec .list .item04 dl:before{background-color: #F59E0B; background-position-x: -96px;}
.mkting_sec .list .item05 dl:before{background-color: #EF4444; background-position-x: -128px;}
.mkting_sec .list .item06 dl:before{background-color: #8B5CF6; background-position-x: -160px;}
.mkting_sec .qanda{ display:flex; flex-direction: row; align-items: center; gap: 25px; counter-reset: qna-num;}
.mkting_sec .qanda .item{color:#fff;background: #2c2c2c; border-radius: 20px; padding: 74px 50px; width: calc(33.3% - 10px);position:relative;}
.mkting_sec .qanda .item h4{font-family: 'paperlogy';font-size: clamp(20px,1.6vw,28px); font-weight: 600; position: relative;padding-left: 30px; word-break: keep-all;line-height: 1.5;margin-bottom: 30px; }
.mkting_sec .qanda .item h4:before{counter-increment: qna-num; content:counter(qna-num)"."; position: absolute; top:0; left:0; }
.mkting_sec .qanda .item h4:after{content:''; display: block ; width: 60px; height: 42px; background: url(../image/mark_quo.png) no-repeat; background-size:contain; background-position: center center; position:absolute; top:-30px; right:-20px;}
.mkting_sec .qanda .item p{font-size: 18px; line-height: 1.8; word-break: keep-all;;}
.mkting_sec .qanda .item:after{content:''; display: block; border-left: 45px solid #2c2c2c; border-bottom:45px solid transparent ; border-top:0;position: absolute; bottom: -45px;}
.mkting_sec .qanda .item01{border-bottom-right-radius: 0;;}
.mkting_sec .qanda .item01:after{right:0; transform: rotateY(180deg);}
.mkting_sec .qanda .item02{margin-top: 100px; border-bottom-left-radius: 0;}
.mkting_sec .qanda .item02:after{left:0;}
.mkting_sec .qanda .item03{margin-top: 200px;border-bottom-right-radius: 0;}
.mkting_sec .qanda .item03:after{right:0 ; transform: rotateY(180deg);}

/*cs*/
.cs_sec{}
.cs_sec .titl_wrap{text-align: center;flex-direction: column; align-items: center; }
.cs_sec .box_wrap{display: flex; flex-direction: row; height:420px;}
.cs_sec .box_wrap .box{transition: all 0.5s ease; width: 13%; height: 100%; position:relative; }
.cs_sec .box_wrap .box .img_box:after{content:''; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.7); position: absolute; top:0;left: 0; z-index:1; opacity: 0; transition: all 0.3s ease;;}
.cs_sec .box_wrap .box .img_box{width: 100%; height: 100%; }
.cs_sec .box_wrap .box .txt_box{position: absolute; top:0;left:0; z-index: 2;color:#fff;  width: 100%; height: 100%; box-sizing: border-box; padding:50px 65px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; transition-delay: 0;}
.cs_sec .box_wrap .box .titl{color:#4DDD38;font-family: 'paperlogy'; font-size: 36px; margin-bottom: 12px;}
.cs_sec .box_wrap .box .list{display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin-top:auto; gap: 4px;}
.cs_sec .box_wrap .box .list li{font-size: 15px; border-radius: 25rem; background: rgba(0,0,0,0.3); border: 1px solid rgba(77,221,56,0.3); padding:8px 18px;   }

.cs_sec .box_wrap .box.on{width: 61% }
.cs_sec .box_wrap .box.on .img_box:after{opacity: 1;}
.cs_sec .box_wrap .box.on .txt_box{opacity: 1; visibility: visible; transition-delay: 0.5s;}

/*code*/
.code_sec{background: url(../image/bg_it.png) no-repeat; background-size: cover; background-position: center;}
.code_sec .titl_wrap{width: 100%; flex-direction: column;align-items: flex-start;}
.code_sec .titl_wrap .titl span{color:#3BFF1F}
.code_sec .titl_wrap .titl h3,
.code_sec .titl_wrap .subs{color:#fff; }

/*footer*/
footer{font-size: 16px; background: #191919; padding: 60px 0 30px 0;}
.footer_wrap{display: grid; grid-template-columns: repeat(2, 1fr);}
.footer_wrap .info{grid-column: 1;}
.footer_wrap .info_items{display: flex; flex-direction: row; align-items: baseline;margin-bottom: 4px;gap: 4px 18px}
.footer_wrap .info_items dl{display: flex; flex-direction: row; gap: 2px 6px;color:#fff; position: relative;}
.footer_wrap .info_items dl:not(:last-child)::before{content:''; display:block; width: 1px; height: 12px; background: rgba(255,255,255,0.8); position: absolute; top:3px; right: -8px;}
.footer_wrap .info_items dt{font-weight: 500; }
.footer_wrap .info_items dd{opacity: .55;}
.footer_wrap .slogon{text-align: end; font-size: 34px; font-family: 'paperlogy'; color:rgba(255,255,255,0.45); font-weight: 700;grid-column: 2; grid-row: 1;}
footer .copy{color:rgba(255,255,255,0.55);display: block; grid-column: 1/ span 2;;}


@media screen and (max-width: 1730px) {
    .main_info .img_wrap{right: 15px; }
}

@media screen and (max-width : 1440px){
    .main_info .img_wrap{position :unset; gap: 20px}
    .main_info .img_wrap .img_box{height: auto;width: calc(33.3%) ;aspect-ratio: 2/3;;}
    .main_info .img_wrap .img_box:first-child{margin-bottom: -100px}
    .main_info .img_wrap .img_box:last-child{margin-bottom: 100px; }
}

@media screen and (max-width : 1200px){
    .header_wrap .logo{max-width: 400px;}
    .scroll-read-text{padding-top: 40px;}

    .mC_sec .titl_wrap{flex-direction: column; ;}
    .mC_sec .titl_wrap .titl,
    .mC_sec .titl_wrap .subs{width: 100%; }
    .mC_sec .titl_wrap .titl h3{font-size: 34px; }

    .main_info{height: auto; padding-bottom: 80px;}

    .mkting_sec .list{width: 100%; }
    .mkting_sec .qanda .item{padding: 56px 34px;}
    

}

@media screen and (max-width: 991px){
    .m_gnb{display: block;width: 40px; height: 40px; border: 0; background:transparent; border-radius: 2px;;position: relative; }
    .m_gnb em{display: block; width: 30px; height: 2px; background:#000; position: absolute; top:50%; left: 50%; transform:translate(-50%, -50%)}
    .m_gnb em:before,
    .m_gnb em:after{content:''; display: block; width: 30px; height:2px; background: #000; position: absolute;  left: 50%; transform: translate(-50%, -50%);}
    .m_gnb em:before{top:calc(50% - 8px);}
    .m_gnb em:after{top:calc(50% + 8px);}
    header.is-dark .m_gnb em,
    header.is-dark .m_gnb em:before,
    header.is-dark .m_gnb em:after{background:#fff;}
    .header_wrap .gnb_wrap{flex-direction: column; align-items: flex-end; background:#000; padding:14px 20px; border-radius: 10px;  position: absolute; top:155px; right:30px; display: none;}
    .header_wrap .gnb_wrap.on{display:flex; }
    .header_wrap .gnb_wrap li{width: 100%; }
    .header_wrap .gnb_wrap li a{color:#7fe968;}
    .header_wrap .gnb_wrap li:not(:last-child){padding-bottom: 4px; margin-bottom: 4px; border-bottom:1px solid rgba(255,255,255,0.1);}
    header.is-scroll .header_wrap .gnb_wrap{top: 95px;}

    .scroll-sub{font-size: 20px; }

    .mkting_sec .qanda{flex-direction: column; align-items:stretch;margin-top: 40px;}
    .mkting_sec .qanda .item{width: 65%;margin-left: auto; margin-right: 60px;}
    .mkting_sec .qanda .item02{margin-top: 0; margin-left: 60px; margin-right: auto;}
    .mkting_sec .qanda .item03{margin-top: 0; margin-left: auto; margin-right: 60px;}
    .mkting_sec .qanda .item[data-aos] {transition-delay: 0s !important; transition-duration: 0.6s !important;}
    .mkting_sec .qanda .item[data-aos][data-aos-delay] {transition-delay: 0s !important;}
    
    
    .cs_sec .box_wrap .box .txt_box{padding: 40px 35px;}

    .footer_wrap{grid-template-columns:1fr 300px}
    .footer_wrap .slogon{font-size: 24px; }
    .footer_wrap .info_items{flex-wrap: wrap;}



    
}

@media screen and (max-width: 768px){  
    .header_wrap{wdith: 100%; }
    .header_wrap .logo{width: 60%}
    header.is-scroll .logo{width: 140px; }
    .main_info{padding-top: clamp(100px,27vw,200px)}
    .mC_sec{padding: 80px 0;}
    .scroll-sub{font-size: 17px; line-height: 1.5;}
    .cs_sec .box_wrap{flex-wrap: wrap;height: unset; }
    .cs_sec .box_wrap .box{width: 100%; height: 160px;}
    .cs_sec .box_wrap .box.on{width: 100%; height: 300px}

    .mkting_sec .list .item dl{flex-direction: column; }

    footer{padding-top:30px;}
    .footer_wrap{display: flex; flex-direction: column; ;}
    .footer_wrap .slogon{display: none;}
    .footer_wrap .info{font-size: 15px; margin-bottom: 10px}
    footer .copy{font-size: 15px; }
}   

@media screen and (max-width: 575px){
    .mC_sec .titl_wrap .titl h3,
    .cs_sec .box_wrap .box .titl{font-size: 28px;}
    .scroll-sub,
    .mC_sec .titl_wrap .subs,
    .mkting_sec .list .item dd,
    .mkting_sec .qanda .item p,
    .cs_sec .box_wrap .box .subs{font-size: 13px;}
    .mkting_sec .list .item dt{font-size: 18px; }
    .mkting_sec .qanda .item{width: 100%; margin-left: auto!important; margin-right: auto!important;border-radius: 20px!important;}
    .mkting_sec .qanda .item:after{border-top: 20px solid #2c2c2c; border-left: 18px solid transparent; border-right: 18px solid transparent;left:50%; border-bottom: unset; right: unset; transform: translateX(-50%); bottom: -16px;}
    .mC_sec .titl_wrap{margin-bottom: 50px;}

    
}

@media screen and (max-width: 425px){
    
}