@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 .title_box .sub_text{font-size: 28px;line-height: 1.5;font-weight: 500;color: var(--gray-color-1000);letter-spacing: -1px;margin-top:36px;}
.container .title_box .sub_text span{color: var(--burgundy-color-500);}

.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 .sub_title{font-size: 28px; line-height: 1.3; font-weight: 700; color: var(--primary-color);}

.container .content_box{margin-top: 80px;}
.container .section01 .content_box{ display: flex;justify-content: center;align-items: center;flex-direction: column;}
.container .section01 .content_box .venn-container {position: relative;width: 100%;height: 560px;max-height: 600px;}
.container .section01 .content_box .venn-container p{margin-bottom:20px; font-size: 42px; font-weight: 600; line-height: 1.2;}
.container .section01 .content_box .intersection p{font-size: 48px;}
.container .section01 .content_box .venn-container .text-small{font-size: 28px;  font-weight: 400; line-height: 1;letter-spacing: -1px;}
.container .section01 .content_box .venn-container .text-small strong{font-size: 40px;}
.container .section01 .content_box .circle {position: absolute;width: 560px;height: 560px;border-radius: 50%;display: flex;justify-content: center;flex-direction: column;color: white;font-weight: bold;text-align: center; padding: 0 70px; box-sizing:border-box;}
.container .section01 .content_box .circle.left {background-color: rgba(103, 187, 255, 0.70);border: 2px solid #FFF;left: 50%;top: 0;transform: translate(-80%,0);text-align:left;z-index: 1}
.container .section01 .content_box .circle.right {background-color: #A985FF;border: 2px solid rgba(255, 255, 255, 0.00);backdrop-filter: blur(14px);right: 50%;top: 0;transform:translate(80%,0);text-align:right;z-index: 0}
/* PC (1024px 이상) */
@media screen and (min-width: 1024px) {
    /*.container .section01 .content_box .circle.left {transform:translate(-70%,0);}*/
    /*.container .section01 .content_box .circle.right {transform:translate(70%,0);}*/
}
.container .section01 .content_box .intersection{position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%);color:#fff;text-align:center;z-index: 2}

.container .banner02{ width: 100%; position: relative; background-image: url(../images/img_banner_02.jpg);  background-repeat: no-repeat;
    background-position: center center; background-size: cover; /*background-attachment: fixed;*/ }
.container .banner02 .inner {height: 400px;padding: 40px 0; box-sizing: border-box; display : flex; flex-direction: column; justify-content: flex-end; align-items: center;gap: 52px; }
.container .banner02 .text_box{text-align: center; color: #fff;}
.container .banner02 .text_box p{font-family: 'El Messiri', serif; font-size: 28px; line-height: 1.3; font-weight: 400;}
.container .banner02 .img_box{width: 80px;}
.container .banner02 .img_box img{width:100%;}

.container .section02 .content_box ul li{display: flex; justify-content: center; align-items: center; gap:100px;margin-bottom: 80px;}
.container .section02 .content_box ul li > div{width: 50%;}
.container .section02 .content_box ul li:last-of-type{ margin-bottom: 0;}
.container .section02 .content_box ul li:nth-of-type(2n){flex-direction: row-reverse; }
.container .section02 .content_box ul li .img_box img{border-radius: 24px;}
.container .section02 .content_box .text_box{line-height: 1.5;letter-spacing: -1px;}
.container .section02 .content_box .main_text{font-size: 40px; font-weight: 700; margin-bottom:28px; }
.container .section02 .content_box .sub_text{font-size: 26px; font-weight: 400; color: var(--gray-color-800);}

.container .section03{background: #FAFAFB;}
.container .section03 .content_box ul{display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
.container .section03 .content_box li{width: 100%; padding-top: calc(580/446*100%); position: relative;border-radius: 30px; background-repeat: no-repeat; background-position: center; background-size: cover;}
.container .section03 .content_box ul li:nth-child(1) {background-image: url(../images/img_section03_01.jpg); }
.container .section03 .content_box ul li:nth-child(2) {background-image: url(../images/img_section03_02.jpg);}
.container .section03 .content_box ul li:nth-child(3) {background-image: url(../images/img_section03_03.jpg);}
.container .section03 .content_box ul li .text_box{width: 100%;padding: 8% 6%; box-sizing: border-box; position: absolute; bottom: 0; left: 0;}
.container .section03 .content_box ul li p{font-size: 34px; font-weight: 500; line-height: 1.4; letter-spacing: -1px;color: var(--gray-color-1000);}

.section04 .content_box{display: flex;flex-direction: row;justify-content: space-between;align-items: stretch;margin-top:0;height:960px;}
.container .section04  .title_box{text-align: left}
.section04 .content_box > div{width: 50%; box-sizing: border-box;}
.section04 .content_box .content_left{padding:120px; display: flex; flex-direction:column; justify-content:space-between;}
.section04 .content_box .sidebar { display: flex;flex-direction: column;justify-content: center;}
.section04 .content_box .sidebar ul {list-style: none;padding: 0;}
.section04 .content_box .sidebar li {width:80%;font-size: 32px; font-weight: 500; line-height:1;cursor: pointer;color: var(--gray-color-1000);letter-spacing: -1px; border-top: 1px solid #E5E5E5;padding: 40px 0; position: relative;}
.section04 .content_box .sidebar li::after{content: '→';color: inherit;  position: absolute; top:50%; right: 0; transform: translate(0, -50%); }
.section04 .content_box .sidebar li:last-of-type{border-bottom: 1px solid #E5E5E5;}
.section04 .content_box .sidebar li:hover,.section04 .content_box .sidebar li.active{color: var(--burgundy-color-500);}
.section04 .content_box .slider {position: relative;height:100%;overflow: hidden;}
.section04 .content_box .slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity 0.8s ease-in-out;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.section04 .content_box .slide .img_box{width: 100%;height: 100%;overflow: hidden;}
.section04 .content_box .slide img {width: 100%;height: 100%;margin-bottom: 20px;object-fit: cover;}
.section04 .content_box .slide.active{opacity: 1}
.section04 .content_box .slide .text_box{position: absolute; left: 0; bottom:0; width: 100%; padding: 120px 12.5%; box-sizing: border-box;}
.section04 .content_box .slide p{font-size: 26px; line-height: 1.5; letter-spacing:-1px;color: var(--gray-color-800); }

/*.container .award{ width: 100%; position: relative; background-image: url(../images/img_banner_award.jpg);  background-repeat: no-repeat;*/
/*    background-position: center center; background-size: cover; !*background--attachment: fixed;*! }*/

/*.container .award .inner{height: 630px; box-sizing: border-box;display : flex; justify-content: center; align-items: center; text-align: center}*/
/*.container .award .text_box{color: #fff;}*/
/*.container .award .text_box p{font-size: 30px; font-weight: 300; line-height: 1.3; letter-spacing: -1px; margin-bottom: 30px;}*/
/*.container .award .text_box strong{font-size: 70px; font-weight: 900; line-height: 1; letter-spacing: -0.7px;}*/
/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    .container .section02 .content_box ul li{gap:60px;}
    .container .section02 .content_box .sub_text{font-size:22px;}
    .container .section03 .content_box ul li p {font-size:28px;}
    .section04 .content_box .sidebar li{width: 100%;}
    .section04 .content_box .sidebar li{font-size: 26px;}
    .section04 .content_box .slide p{font-size: 22px;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .container [class*="section"] .inner{padding: 160px 5%;}
    .section04 .content_box .content_left, .section04 .content_box .slide .text_box{padding: 120px 5%;}

}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .container .section02 .content_box ul li{gap:40px;margin-bottom: 60px;}
    .container .section02 .content_box .main_text{font-size:32px;}
    .container .section02 .content_box .sub_text{font-size:20px;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    .container [class*="section"] .inner {padding: 60px 5%;}
    .container .section01 .content_box .circle {width: 50vw;height: 50vw;}
    .container .section03 .content_box ul li p {font-size: 22px;}
    .section04 .content_box {height: 720px;}
    .section04 .content_box .content_left, .section04 .content_box .slide .text_box {padding: 60px 5%;}
    .container .section01 .content_box .venn-container{height: 50vw;}
    .container .section01 .content_box .venn-container p {font-size: 40px;font-weight: 600;line-height: 1.2;}
    .container .section01 .content_box .venn-container .text-small, .container .section01 .content_box .venn-container .text-small strong {font-size: 24px;}

}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }

    .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: 22px;}
    .container .section01 .content_box .circle{padding:0 20px;}
    .container .section01 .content_box .intersection {transform: translate(-50%, -50%);}
    .container .section01 .content_box .venn-container p,
    .container .section01 .content_box .venn-container .text-small,
    .container .section01 .content_box .venn-container .text-small strong{font-size:16px;}

    .container .banner02{background-image: url(../images/img_banner_02_mo.jpg);}
    .container .banner02 .inner {height: 275px; padding: 28px 0 ;}
    .container .banner02 .text_box p{font-size:22px;}

    .container .section02 .content_box ul li,.container .section02 .content_box ul li:nth-of-type(2n){flex-direction: column;}
    .container .section02 .content_box ul li > div{width: 100%;}
    .container .section02 .content_box ul li{margin-bottom: 40px;}
    .container .section02 .content_box .main_text{font-size:28px;font-weight: 500; margin-bottom: 24px;}
    .container .section02 .content_box .sub_text{font-size:16px;text-wrap: balance;word-break: keep-all;}

    .container .section03 .content_box ul{grid-template-columns: repeat(1, 1fr); gap:24px;}
    .container .section03 .content_box li{padding-top:208px;border-radius: 12px;}
    .container .section03 .content_box ul li:nth-child(1) {background-image: url(../images/img_section03_01_mo.jpg); }
    .container .section03 .content_box ul li:nth-child(2) {background-image: url(../images/img_section03_02_mo.jpg);}
    .container .section03 .content_box ul li:nth-child(3) {background-image: url(../images/img_section03_03_mo.jpg);}

    .section04 .content_box{flex-direction: column; height: 100%;}
    .section04 .content_box > div{width: 100%;}
    .container .section04  .title_box{text-align: center}
    .section04 .content_box .content_left{padding:20px 5% 0; gap:40px;}
    .section04 .content_box .sidebar li{font-size: 22px;}
    .section04 .content_box .sidebar li:last-of-type{border-bottom: none;}
    .section04 .content_box .slider{height: 420px;}
    .section04 .content_box .slide img{width: 100%; height: 100%;}
    .section04 .content_box .content_left{padding: 28px 5% 0;}
    .section04 .content_box .slide .text_box{padding: 28px 5% 16px;}
    .section04 .content_box .slide p{font-size: 16px;}

    /*.container .award{ background-image: url(../images/img_banner_award_mo.jpg);}*/
    /*.container .award .inner{height: 390px;}*/
    /*.container .award .text_box p{font-size:18px; margin-bottom: 16px;}*/
    /*.container .award .text_box strong{font-size: 38px;}*/
}