@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/subsets/Paperlogy-dynamic-subset.css");
.paperlogy{  font-family: "Paperlogy", -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;}
/* #content */
.img_box img{width: 100%; }
.sub_visual {width: 100%; height:48.5vw; position: relative; background-image: url(../images/img_visual_bg.jpg);
    background-repeat: no-repeat;  background-position: center bottom; background-size: cover;/*background-attachment: fixed;*/ }
.sub_visual .inner{padding: 0 19.06% }
.sub_visual .text_box {text-align: left; }
.sub_visual .text_box h3{font-size: 64px; font-weight: 700; margin-bottom: 24px;line-height: 1.2;}
.sub_visual .text_box .add_text{font-size: 22px; font-weight: 300;line-height: 1.4; }

[class*="section"] .inner{padding: 160px 14.7%;}
.container .title_box{text-align: center}
.container .title_box h4{font-size: 64px; line-height: 1.5; color: var(--gray-color-1000); margin-top:10px;}
.container .title_box .sub_title{font-size: 22px; line-height: 1.3; margin-top:40px;}
.container .title_box .sub_text{font-size: 26px; line-height: 1.5; font-weight: 400; color: var(--gray-color-800); letter-spacing: -1px;margin-top:36px;}

.swiper-container{position:relative;padding-bottom: 80px;}
.swiper-pagination .swiper-pagination-bullet{background: var(--man-color-06) !important; opacity: 1; width:10px;height: 10px;}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background: var(--man-color-03) !important;width: 20px; border-radius: 30px;}

.container .content_box{margin-top: 80px;}
.marker{color: #fff;background:var(--man-color-02);padding: 0 4px;}

.cause_list{width: calc(1168/1368 * 100%); max-width: 1200px; margin:0 auto; display : grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
.cause_item{border-radius: 170px;color: #fff;display: flex;justify-content: center;align-items: center;padding: 120px 0;}
.cause_item .text_box{text-align:center;letter-spacing: -0.02em;}
.cause_item .text_box h5{font-size: 26px;line-height: 1.3;margin-bottom: 12px;}
.cause_item .text_box p{font-size: 20px;line-height: 1.5;}

.process_box{display: flex; justify-content: center; align-items: stretch; gap: 54px;}
.process_step{display: flex; justify-content: center; align-items: stretch; position: relative;}
.process_step::after{content:'';position:absolute; top: 50%; right:0; width: 58px; height: 65px;
   background-repeat:no-repeat ;background-position: center center; background-size: contain; transform: translate(80%, -50%);}
.process_step:last-of-type::after{content:none;}
.process_step > div { flex: 1;}
.process_step img{object-fit:cover; height: 100%;}
.process_step .text_box{display: flex; justify-content: center; align-items: center; gap: 8px; flex-direction: column;letter-spacing: -0.02em; text-align: center;}
.process_step .text_box h5{font-size:26px}
.process_step .text_box p{font-size:20px; line-height: 1.4;}

.recommend_wrap{background-color:var(--man-color-02) }
.recommend_wrap .title_box h4{color: #fff;font-weight: 400;}
.recommend{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 24px;width: calc(1136/1368 * 100%);margin: 0 auto;}
.recommend li{width: calc(50% - 12px);color: #fff;display:flex;gap: 24px;letter-spacing: -0.02em;line-height: 1.2;align-items: stretch;}
.recommend li .num{font-size: 54px;font-weight: 700;min-width: 68px;width: 68px;}
.recommend li .desc_text{font-size: 24px;font-weight: 500;padding-left: 24px;border-left: 1px solid rgba(255, 255, 255, 0.30);display: flex;align-items: center;text-wrap: balance;word-break: keep-all;line-height: 1.4;}
.recommend li:nth-child(1) { order: 1; }
.recommend li:nth-child(2) { order: 3; }
.recommend li:nth-child(3) { order: 5; }
.recommend li:nth-child(4) { order: 2; }
.recommend li:nth-child(5) { order: 4; }



.section01 .venn-container{display: flex;justify-content: center;width: 700px;margin: 0 auto 120px;position: relative;}
.section01 .venn-container::before{content:'';width: 90%;height: 130%;border-radius:300px;position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border:1px solid rgba(43, 77, 190, 0.50);}
.section01 .venn-container::after{content:'+';font-size:50px; font-weight:700;color: var(--man-color-02);display: block;position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);}
.section01 .circle{width: 38%; border-radius:50%; position: relative;}
.section01 .circle .text_box{width: 120%;height: 120%;object-fit: cover;text-align: center;border-radius: 50%;letter-spacing: -0.02em;gap: 12px;
    display: flex;flex-direction: column;align-items: center;justify-content: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background:rgba(221, 226, 234, 0.60);}
.section01 .circle::after {content: ''; display: block; padding-bottom: 100%;}
.section01 .circle .text_box strong{font-size: 32px;line-height: 1.5;}
.section01 .text_box .desc_text{font-size: 22px;text-align:center;line-height: 1.6;letter-spacing: -0.02em;}

.section02{background: var(--man-color-main);}
.section02 .title_box h4{ color: #fff;}
.section02 img{border-radius: 16px;}


#program ul.swiper-wrapper{height: 600px;}
#program ul.swiper-wrapper li{flex-shrink:0; display: flex;}
.program_box{width: 100%;background: #fff;border-radius: 16px;display: flex;justify-content: center;align-items: center;flex-direction: column;padding: 80px 48px 120px;}
.program_box .img_box{margin: 72px auto 0; }
.program_box .label{font-size: 16px;background: var(--man-color-02);color: #fff;padding: 8px 16px;border-radius: 16px;margin-bottom: 24px;}
.program_box h5{font-size: 44px; line-height: 1.2; letter-spacing: -0.02em;}

.section03 .tab-pagination{max-width: 1340px; margin: 0 auto;}
.section03 .tab-pagination > div{display: flex ;  justify-content: space-between; align-items: center; gap: 8px;}
.section03 .tab-pagination > .tab_ver{display: none !important;}
.section03 .tab-pagination .top{margin-bottom: 8px;}
.section03 .tab-pagination .tab{font-size: 24px;font-weight: 600;color: #BBBDC8;background: var(--man-color-05);border-radius: 8px;padding: 8px;flex-grow: 1;}
.section03 .tab-pagination .tab.active,.section03 .tab-pagination .tab:hover{color: #fff; background: var(--man-color-02);}
.section03 .swiper-container{margin: 120px 0;}
.section03 .ingredient{border-top:1px solid #B9BAC1;width: 100%;margin-top: 32px;padding-top: 32px;font-size: 22px;line-height: 1.6;letter-spacing: -0.02em;font-weight: 500;}
.section03 .product_box{display: flex; justify-content: space-between; align-items: center;gap: 80px;}
.section03 .product_box .text_box{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; letter-spacing: -0.02em;}
.section03 .product_box > div{flex:1;}
.section03 .product_box .text_box .sub_text{font-size: 36px;line-height: 1.2;}
.section03 .product_box .text_box h5{font-size: 54px; line-height: 1.2;margin-bottom: 40px;}
.section03 .product_box .text_box .desc_text{font-size: 22px;line-height: 1.5;text-wrap: balance;word-break: keep-all;color:  #3c3c3c;}
.section03 .product_box .comparison-table{display: flex;border: 2px solid #BECDE4;position: relative;margin-top: 40px;}
.section03 .comparison-column{padding: 0 32px 24px;display:  flex;justify-content: flex-start;align-items:center;flex-direction: column;flex-grow: 1;}
.section03 .comparison-column +.comparison-column{border-left: 2px solid #BECDE4; }
.section03 .product_box .comparison-table .feature-list{font-size: 20px;line-height: 1.5;letter-spacing: -0.02em;}
.section03 .product_box .comparison-table .column-header{background-color: var(--man-color-main);color:#fff;border-radius: 0 0 22px 22px;font-size: 26px;font-weight: 500;margin:-2px 0 24px;width: 80%;text-align: center;padding: 4px 0;}
.section03 .divider-icon{position: absolute;width: 36px;top: 50%;left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 12px 0;}




.section06{ width: 100%; position: relative; background-image:  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/img_section06_bg.jpg);  background-repeat: no-repeat;
    background-position: center center; background-size: cover; /*background-attachment: fixed; */}
.section06 .text_box{letter-spacing: -0.02em; color: #fff;display:flex;flex-direction: column; justify-content: center; align-items: center; gap:40px;text-wrap:balance; word-break:keep-all; text-align:center;}
.section06 h4{font-size: 64px;line-height: 1.2;}
.section06 p{font-size: 24px;line-height: 1.4;}


/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1800px) {
    .section06 .recommend{width:100%;}
}

/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    .container .title_box .sub_title{font-size: 20px;margin-top: 32px;}
    .container .title_box h4{font-size: 54px; margin-top:8px;}

    /* content */
    .cause_list{width: 100%;}
    .section03 .product_box{gap: 40px;}
    .section06 .content_box{width: 100%;}
    .section07 .content_box{width: 100%;}

}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .container .section05::after{content:none;}


}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .container .title_box .sub_text{font-size: 20px}
    /* content */
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width: 1024px) {
    .sub_visual {padding: 0 5%;height: calc(144vw - 94px);background-image: url(../images/img_visual_bg_tb.jpg);background-position: center bottom;}
    .sub_visual .inner{padding: 0;}
    .sub_visual .text_box h3{font-size: 44px; }
    .sub_visual .text_box .add_text{font-size:22px;}
    [class*="section"] .inner{padding: 120px 5%;}

    /* content */
    .container .title_box h4{font-size: 44px; margin-top:8px;}
    .container .content_box{margin-top:48px;}
    
    #program ul.swiper-wrapper{height: 500px;}
    .program_box{width: 100%;background: #fff;border-radius: 16px;display: flex;justify-content: flex-start;align-items: center;flex-direction: column;padding: 60px 48px 0;}
    .program_box .img_box{margin: 48px auto 0; }
    .program_box h5{font-size: 38px;}

    .section03 .swiper-container{margin: 40px 0;padding-bottom: 44px;}
    .section03 .product_box{flex-direction:column;gap: 40px;}
    .section03 .product_box .img_box{width: 50%;}
    .section03 .tab-pagination > div{flex-wrap: wrap;}
    .section03 .tab-pagination .tab{font-size: 16px;}
    .section03 .product_box .text_box{text-align: center;align-items:  center;}
    .section03 .product_box .text_box .sub_text{font-size: 32px;}
    .section03 .product_box .text_box h5{font-size: 42px;}
    .section03 .product_box .text_box .desc_text{font-size: 18px;}
    .section03 .product_box .comparison-table .column-header{font-size:18px; border-radius: 0 0 14px 14px;}
    .section03 .product_box .comparison-table .feature-list{font-size: 16px;text-align: left;}
    .section03 .divider-icon{width: 24px;padding: 8px 0;}
    .section03 .ingredient{font-size: 18px}
    

    .cause_list{grid-template-columns:repeat(2, 1fr);}
    .cause_item{padding:40px 0}

    .recommend li .num{font-size: 34px;min-width: 44px;width: 44px;}
    .recommend li .desc_text{font-size: 16px;padding-left: 17px;}

    .process_box{flex-direction:column;gap: 48px;width: 50%;margin: 0 auto;}
    .process_step::after{top:auto;bottom:0;right:50%;width: 50px;height: 55px;transform: rotate(90deg) translate(90%, -50%);z-index:1;}
    .section07 .service_list{gap: 12px;}
    .section07 .method_list{gap: 12px;}

    .section06{background-image:  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/img_section06_bg_mo.jpg);background-position: bottom left;background-attachment: initial;}
    .section06 h4{font-size: 48px; }
    .section06 p{font-size: 20px; }
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:767px) {
    .wrap { min-width: 375px; }
    .sub_visual {padding: 0 8%;height: calc(180vw - 64px);background-image: url(../images/img_visual_bg_mo.jpg);}
    .sub_visual .text_box h3{font-size: 34px;margin-bottom: 16px; }
    .sub_visual .text_box .add_text{font-size:18px;}
    [class*="section"] .inner{padding: 60px 24px;}


    /* content */
    .container .title_box .sub_title{font-size:18px;margin-top: 24px;}
    .container .title_box h4{font-size: 34px; margin-top:8px;}
    .container .content_box{margin-top: 40px;}
    .container .title_box .sub_text{font-size: 16px}

    .section01 .desc_text{font-size: 16px; }

    #program ul.swiper-wrapper{height: 100%;}
    .program_box  {padding: 40px 60px;}
    .program_box .label{font-size: 12px;}
    .program_box h5{font-size: 30px; }
    .program_box .img_box{margin: 24px auto 0; }
    
    .recommend li .num{font-size: 34px;min-width: 44px;width: 44px;}
    .recommend li .desc_text{font-size: 16px;padding-left: 17px;}

    .cause_list{grid-template-columns: repeat(1, 1fr);}
    .cause_item{padding: 16px 0;}
    .cause_item .text_box h5{font-size: 20px;}
    .cause_item .text_box p{font-size: 16px;}

    .process_box{gap: 8px;width: 100%;}
    .process_step::after{width:44px;transform: rotate(90deg) translate(80%, -160%);}
    .process_step .text_box{flex: 2;}
    .process_step .text_box h5{font-size:20px}
    .process_step .text_box p{font-size:16px;}

    .recommend_wrap .title_box h4{font-size:32px;}
    .recommend{flex-direction:column;justify-content: center;width: max-content;}
    .recommend li{width: 100%; gap: 17px;}
    .recommend li:nth-child(1) { order: 1; }
    .recommend li:nth-child(2) { order: 2; }
    .recommend li:nth-child(3) { order: 3; }
    .recommend li:nth-child(4) { order: 4; }



    .section01 .circle{width: 42%;}
    .section01 .circle .text_box strong{font-size: 18px;}
    .section01 .venn-container{width: 100%;margin: 40px auto 60px;}
    .section01 .venn-container::after{font-size: 30px;}
    .section01 .venn-container::before{width: 100%;}
    .section01 .text_box p{font-size: 18px;}

    .section03 .inner{padding: 0;}
    .section03 .content_box{margin-top: 0}
    .section03 .product_header{background:var(--man-color-04); border-bottom:1px solid var(--man-color-06) ;padding:16px 24px;position:relative; cursor: pointer;}
    .section03 .product_header::after{content: '';position: absolute;top: 50%;right: 24px;display: block;width: 8px;height: 8px;border: 2px solid var( --black-color-950);border-top: 0;border-left: 0; 
         transition: transform 0.3s ease; -ms-transform: rotate(-45deg) ;-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg) ;transform: rotate(45deg);margin-top:-2px;}
    .section03 li.active .product_header::after{ transform: rotate(-135deg);} 
    .section03 .product_header h5{font-size: 20px; letter-spacing: -0.02em;}
    .section03 .product_box{display: none;padding: 60px 0 80px;}
    .section03 .product_box .text_box{text-align: center; align-items: center;}
    .section03 .product_box .text_box .sub_text{font-size: 24px;line-height: 1.2;}
    .section03 .product_box .text_box h5{font-size: 32px;margin-bottom: 0;}
    .section03 .product_box .text_box .desc_text{font-size: 16px;padding: 0 24px;} 
    .section03 .product_box .img_box{width: 100%;margin: 40px 0;}
    .section03 .product_box .small-image{padding:0 24px;}
    .section03 .ingredient{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 8px;padding: 32px 8px 0; text-align:left;}
    .section03 .ingredient li{width: calc(50% - 4px);display:flex;gap: 24px;letter-spacing: -0.02em;line-height: 1.2;align-items: stretch; font-size: 14px;}
    .section03 .product_box .comparison-table .column-header{font-size:18px; border-radius: 0 0 14px 14px;}
    .section03 .product_box .comparison-table .feature-list{font-size: 16px;text-align: left;}
    .section03 .comparison-column{padding: 0 16px 24px;}
    .section03 .divider-icon{width: 24px;padding: 8px 0;}

    .recommend_wrap .title_box h4{font-size:32px;}
    .recommend{flex-direction:column;justify-content: center;width: max-content;}
    .recommend li{width: 100%; gap: 17px;}
    .recommend li:nth-child(1) { order: 1; }
    .recommend li:nth-child(2) { order: 2; }
    .recommend li:nth-child(3) { order: 3; }
    .recommend li:nth-child(4) { order: 4; }
    .recommend li:nth-child(5) { order: 5; }

    .section06 h4{font-size: 36px; }
    .section06 p{font-size: 18px; }
}