@charset "utf-8";
/* award, secret, newAging, labs, recommend, procedures ->  sub_common.css */
/* #content */
.img_box img{width: 100%; }
.sub_visual {width: 100%; height:450px; position: relative;
    background-image: url(../images/img_visual_bg.webp);  background-repeat: no-repeat;  background-position: center bottom; background-size: cover;
    background-attachment: fixed;background-color: rgba(0, 0, 0, 0.2); background-blend-mode: darken;}
.sub_visual .text_box {text-align: center; color: #fff;}
.sub_visual .text_box .add_text{font-family: "El Messiri", sans-serif; font-size: 24px; font-weight: 400; line-height: 1.1; margin-bottom: 20px;}
.sub_visual .text_box h3{font-size: 40px; font-weight: 200; line-height: 1.3; }

.container [class*="section"] .inner{padding: 160px 12.6%;}
.container .title_box{text-align: center}
.container .title_box h4{font-size: 64px; line-height: 1.5; font-weight: 700; color: var(--gray-color-1000); margin-top:10px;}
.container .title_box h4 strong{color:#4B47CD; }
.container .title_box .sub_title{font-size: 28px; line-height: 1.3; font-weight: 600; color:#20534F;}
.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;}

.container .content_box{margin-top: 80px;}

.container .section01 .content_box{display: flex; flex-direction: column; gap:80px;}
.container .section01 .content_box ul{display: grid; grid-template-columns:repeat(4, 1fr); gap:40px;}
.container .section01 .content_box .text_box{padding: 20px 50px; border-radius: 20px; background: #FAFAFA; text-align: center;}
.container .section01 .content_box .text_box p{font-size: 24px;font-weight: 400;line-height: 1.6;letter-spacing: -1px;color: var(--gray-color-800);text-wrap: balance;word-break: keep-all;}
.container .section01 .content_box ul {display: flex;align-items: center;justify-content: space-between;gap: 60px;width: calc(900/ 1420 *100%);margin: 0 auto;padding: 50px;border: 1px dashed #20534F;border-radius: 999px;box-sizing: border-box;}
.container .section01 .inner ul li.explain-list_item{flex: 1;position: relative;}
.container .section01 .inner ul li.explain-list_item::before {content: ''; display: block; width: 100%; padding-top: 100%;}
.container .section01 .inner ul li.explain-list_item > div {width: 100%; height: 100%; border-radius: 50%; border: 1px dashed #20534F; background: rgba(32, 83, 79, 0.05); text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.container .section01 .inner ul li.explain-list_item > div  p{font-size: 34px; color:#20534F;font-weight:600; letter-spacing:-1px; line-height: 1.5;}
.icon_plus{display: block;position: relative;width: 40px;height: 4px;background-color: #20534F;border-radius:100px;}
.icon_plus::before {content: "";position: absolute;top: -18px;left: 18px;width: 4px;height: 40px;background-color: #20534F;border-radius:100px;}
.container .section01 .content_box .img_box{ width: 50%; margin: 0 auto;}

.container .section02{background: #FAFAFB;}
.container .section02 .content_box ul {display: grid;grid-template-columns:repeat(2, 1fr); gap:40px; width: calc(900/ 1420 *100%); margin:0 auto;}
.container .section02 .content_box .img_box img{border-radius: 30px;}
.container .section02 .content_box .main_text{font-size: 34px;font-weight: 600;  letter-spacing: -1px; color: #20534F; margin: 40px 0 30px;}
.container .section02 .content_box .main_text span {display: inline-block; margin-left: 12px;padding: 8px; border-radius: 8px;background: rgba(32, 83, 79, 0.10);
    font-size: 20px;font-weight: 500; vertical-align: middle; }
.container .section02 .content_box .sub_text{font-size: 26px;font-weight: 400;line-height: 1.5;letter-spacing: -1px;color: var(--gray-color-1000);}

.container .section03{width: 100%; background-image: url(../images/img_section03_bg.jpg);  background-repeat: no-repeat;  background-position: 0 0 ; background-size: cover;}
.container .section03 .inner{padding: 160px 12.6% 120px}
.container .section03 .img_box{width: 80%; margin: 0 auto;}


.container .section05{width: 100%; background-image: url(../images/img_section05_bg.webp);  background-repeat: no-repeat;  background-position: 0 0 ; background-size: cover; }
.container .section05 .inner{padding: 120px 12.6%;}




/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    .container [class*="section"] .inner{padding: 120px 12.6%;}
    .container .title_box .sub_title{font-size:24px;}
    .container .title_box h4{font-size: 54px; margin-top:8px;}

    /* content */
    .container .section01  .explain_box ul{padding: 80px;}
    .container .section01 .content_box .img_box{ width: 80%;}

    .container .section02 .content_box .main_text span {font-size: 16px;}
    .container .section02 .content_box .sub_text{font-size: 22px;}
    .section08 .content_box .content_left, .section08 .content_box .slide .text_box{padding: 120px 5%;}



}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .container .section06::after{content:none;}
    .container .section01 .content_box ul {width: 100%;}
    .container .section02 .content_box ul {width: 80%;}

}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .container .title_box .sub_text{font-size: 20px}
    /* content */
    .container .section02 .content_box .main_text{font-size:32px;}
    .container .section02 .content_box .desc_text{font-size: 24px;}
    .container .section02 .content_box .sub_text{font-size:20px;}
    .container .section01 .explain_box ul li p {width: 160%;height: 160%;}
    .container .section01 .explain_box ul li p strong {font-size: 24px;}

}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    .container [class*="section"] .inner {
        padding: 60px 5%;
    }

    /* content */
    .container .section02 .content_box .img_box img{border-radius: 20px;}
    /* content */

}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    #wrap { min-width: 375px; }
    .container [class*="section"] .inner{padding: 60px 24px;}

    .sub_visual {padding: 0 5%;height: 240px;background-image: url(../images/img_visual_bg_mo.jpg);background-position: center center;background-attachment:local ;;}
    .sub_visual .text_box{text-align: left;}
    .sub_visual .text_box h3{font-size: 20px; }
    .sub_visual .text_box .add_text{font-size:12px;}

    /* content */
    .container .title_box .sub_title{font-size:18px;}
    .container .title_box h4{font-size: 34px; margin-top:8px;}
    .container .content_box{margin-top: 40px;}
    .container .title_box .sub_text{font-size: 14px;text-wrap:balance;word-break:keep-all;margin-top: 20px;}

    .container .section01 .content_box ul{flex-direction: column;width: 80%;padding: 28px;gap: 28px;}
    .container .section01 .inner ul li.explain-list_item{width: 100%;}
    .container .section01 .inner ul li.explain-list_item > div  p{font-size: 24px; }
    .icon_plus{width: 25px;height: 3px;}
    .icon_plus::before {top: -11px;left: 11px;width: 3px;height: 25px;}
    .container .section01 .content_box .img_box{width: 100%;padding: 24px 16px; background: #fafafa;border-radius: 12px; box-sizing: border-box; }

    .container .section01 .content_box .text_box{border-radius:12px;padding: 16px 34px}
    .container .section01 .content_box .text_box p{font-size: 14px; text-wrap: balance; word-break: keep-all;}

    .container .section02 .content_box ul {grid-template-columns:repeat(1, 1fr);width: 100%;}
    .container .section02 .content_box .img_box img{border-radius: 12px;}
    .container .section02 .content_box .main_text {font-size:24px; margin: 24px 0 16px; }
    .container .section02 .content_box .main_text span{font-size:16px;padding: 4px 8px;}
    .container .section02 .content_box .sub_text{font-size:16px;}

    .container .section03 .img_box{width: 100%;}


    .container .section05{background-image: url(../images/img_section05_bg_mo.jpg);}




    .section08 .content_box ul li{padding: 24px;border-radius: 12px;}
    .section08 .content_box ul li .title_text{font-size: 18px;}
    .section08 .content_box ul li .desc_text{font-size: 16px;margin-top: 32px;}


}