@charset "utf-8";
/* award, secret, newAging, labs, recommend, procedure ->  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  .explain_box{position: relative;}
/*.container .section01  .explain_box::before{content:''; display: inline-block; width: 100%;height: 500px; position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%);background:url(../images/img_section01_bg.svg)no-repeat 50% 50%; }*/
.container .section01  .explain_box ul {display: flex; justify-content: flex-end;  width: 50%; margin: 0 auto;padding: 100px; border: 1px dashed #20534f; border-radius: 999px;}
.container .section01  .explain_box ul li {width: 30%; position: relative;}
.container .section01  .explain_box ul li::after {content: ''; display: block; width: 100%; padding-top: 100%;}
.container .section01 .explain_box ul li p {
    width: 140%;
    height: 140%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(32, 83, 79, 0.05);
    border: 1px dashed #20534F;
}
.container .section01  .explain_box ul li p > strong{color: #20534F;display: block;font-size: 32px;line-height: 40px;letter-spacing: -1px;margin-bottom: 7.5px;}
.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(3, 1fr); gap:40px; }
.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%;}
.container .section05 .title_box h4{color: #fff;}





/* 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{width: 60%; padding: 60px;}
    .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%;}

    .container .recommend .content_box ul{width: 100%;}


}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .container .section06::after{content:none;}
}
/* 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;}
}

/* 모바일 가로, 모바일 세로 (해상도 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: 16px;text-wrap:balance; word-break:keep-all;}


    .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);}
    .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;}



}

/* 스마트폰 전용 ( 480px 이하) */
@media screen and (max-width: 480px) {
    .container .section01 .explain_box ul{padding: 80px 0;}

    .container .section01 .content_box{gap: 40px;}
    .container .section01  .explain_box ul {flex-direction:column;width: 80%;/* margin: 0 auto; */}
    .container .section01  .explain_box ul li {width: 50%;margin: 0 auto;}
}