@charset "utf-8"; /* 문자열설정 */
/* award, secret, newAging, labs, recommend, procedure ->  sub_common.css */
/* #content */
.img_box img{width: 100%; }
.sub_visual {width: 100%; height:800px; position: relative;
    background-image: url(../images/cheongdam/img_visual_bg.jpg);  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-size: 34px; font-weight: 400; line-height: 1.1; margin-bottom: 20px;}
.sub_visual .text_box h3{font-size: 75px;line-height: 1.3; margin-bottom: 50px; }
.sub_visual .text_box .desc_text{font-family: "El Messiri", sans-serif; font-size: 28px; font-weight: 400; line-height: 1.6;}

.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); }
.container .title_box .sub_title{font-size: 28px; line-height: 1.3; font-weight: 600; color: #C6826E; letter-spacing: -1px;margin-bottom:10px;}
.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 .inner{padding: 200px 12.6%;}
.container .section01{width: 100%; background-image: url(../images/cheongdam/img_section01_bg.jpg);  background-repeat: no-repeat;  background-position: 50% 0 ; background-size: cover; }
.container .section01 .content_box{display: flex; justify-content: flex-end; align-items: center; }
.container .section01 .text_box{color: #fff; }
.container .section01 .text_box{text-align: center; letter-spacing: -1px; }
.container .section01 .text_box .main_text{font-size:20px; font-weight: 500; line-height:1.4; margin-bottom: 20px;}
.container .section01 .text_box .desc_text{font-size:26px; font-weight: 250;line-height:1.6; margin-bottom: 20px;}
.container .section01 .text_box .desc_text:last-of-type{margin-bottom: 0;}

.container .section02 {background-color:#1E0E07;}
.container .section02 .sub_title{ color: #fff; margin-bottom:10px;}
.container .section02 .title{color: #fff;}
.container .section02 .img_box{width: calc(970 /1420 * 100%); margin: 80px auto;}
.container .section02 .img_box img{width: 100%;}
.container .section02 .text_box{display: flex; justify-content: center; align-items:center;}
.container .section02 .text_box .main_text{font-size: 34px; font-weight:500; line-height: 1.5; color: #C68D6E;text-align: center;}

.container .section03 .main_text{font-size: 26px; text-align: center;line-height: 1.5; color: var(--gray-color-800);}
.container .section03 .point-list{width: calc(1200/1420 * 100%);display :grid;  grid-template-columns: repeat(3, 1fr);gap: 0 60px;margin: 60px auto 0;}
.container .section03 .point-item{width:100%; padding: 70px 24px; box-sizing: border-box;border-radius: 20px; background-repeat: no-repeat; background-position: center center; background-size: cover;
    position: relative; display: flex; align-items: center; justify-content: stretch;flex-direction: column; gap : 30px ; color: #fff;}
.container .section03 .point-item:nth-of-type(1){background-image: url(../images/cheongdam/img_section03_01.jpg);}
.container .section03 .point-item:nth-of-type(2){background-image: url(../images/cheongdam/img_section03_02.jpg);}
.container .section03 .point-item:nth-of-type(3){background-image: url(../images/cheongdam/img_section03_03.jpg);}
.container .section03 .point-item:nth-of-type(1)::after{content:''; position: absolute; top: 50%; right:0 ; transform:translate(200%, -50%);
width: 20px; height: 36px; background: url(../images/cheongdam/ico_section03_arrow.svg)no-repeat center; background-size: contain;}
.container .section03 .point-item:nth-of-type(3)::after{content:''; position: absolute; top: 50%; left:0 ; transform:translate(-200%, -50%)  rotate(180deg);
width: 20px; height: 36px; background: url(../images/cheongdam/ico_section03_arrow.svg)no-repeat center; background-size: contain;}
.container .section03 .point-list .point-title{font-size: 30px; font-weight: 700; }
.container .section03 .point-list .point-text{font-size: 24px; line-height: 1.7; letter-spacing: -1px; }


.container .section04{background: #FFF7F1;}
.container .section04 .title_box .label{font-size: 26px; padding: 0 16px;font-weight: 700; line-height: 2;color: #6E4B41; border-top:1px solid #6E4B41; border-bottom:1px solid #6E4B41; display: inline-block; margin-bottom: 30px;}
.container .section04 .feature_box{width:calc(900/1420 * 100%);margin: 0 auto 80px;background: #fff;border:1px solid #C6826E;border-radius: 20px;padding: 20px 90px;box-sizing: border-box;display: flex;justify-content: center;align-items: center;}
.container .section04 .feature-list{width: 100%}
.container .section04 .feature-item{display: flex; justify-content: flex-start; align-items: center;padding: 20px 0; border-bottom: 1px dashed #C5C7C9; letter-spacing: -1px; line-height: 38px;}
.container .section04 .feature-item:last-of-type{border-bottom: none;}
.container .section04 .feature-item .title_text{font-size: 26px;font-weight: 500;color: #C6826E;width: 40%;}
.container .section04 .feature-item .desc_text{font-size: 24px; }
.container .section04 .step_box{width:calc(900/1420 * 100%);margin: 0 auto;}
.container .section04 .step_list{display: flex; flex-direction: column; gap: 24px; width: 100%;}
.container .section04 .step_item{display: flex; justify-content: stretch; align-items: stretch;}
.container .section04 .step_item > div{display: flex; justify-content: center; align-items: center; flex-direction: column;height: 130px;}
.container .section04 .step_item .left{color: #fff; background: #6E4B41; border-radius: 16px 0 0 16px; gap: 10px; width: 35%;}
.container .section04 .step_item .left span{ font-size:20px; font-weight: 500;}
.container .section04 .step_item .left h5{ font-size:28px; font-weight: 500;}
.container .section04 .step_item .right{background: #fff; border-radius: 0 16px 16px 0 ; width: 65%; }
.container .section04 .step_item .right .desc_text{font-size:24px;font-weight: 500;color: #474A4D;}

.container .section05{background: url(../images/cheongdam/img_section05_bg.jpg);  background-repeat: no-repeat;  background-position: 50% 0 ; background-size: cover; text-align: center;}
.container .section05 .title_box .label{font-size: 26px;padding: 0 16px;font-weight: 700;line-height: 2;color: #C6826E;border-top:1px solid #C6826E;border-bottom:1px solid #C6826E;display: inline-block;margin-bottom: 30px;}
.container .section05 .intro-quote{font-size: 30px;  color:#C6826E; font-weight:500;line-height: 1.5; letter-spacing: -1px; text-align: center;position: relative;}
.container .section05 .intro-quote::before, .container .section05 .intro-quote::after{content:'';width: 22px; height: 22px; position: absolute; left: 50%; background: url(../images/cheongdam/ico_quotation.svg)no-repeat center; background-size: contain;}
.container .section05 .intro-quote::before{transform: rotate(180deg) translate(50%, 150%);top:0;}
.container .section05 .intro-quote::after{bottom:0;transform: translate(-50%, 150%);}
.container .section05 .process_box{display: flex;flex-direction: column;justify-content: center;align-items: center;gap:32px;margin:60px auto;}
.container .section05 .process_box .step_list{width: 500px; margin:0 auto }
.container .section05 .process_box .step_list li{font-size: 24px; line-height: 1.2;padding: 20px 0; text-align: center;border-bottom: 1px dashed #C5C7C9; }
.container .section05 .process_box .step_list li:last-of-type{border-bottom: none;}
.container .section05 .process_box .step_list li .step_number{color: #C6826E;padding-right: 16px;}
.container .section05 .process_box .step_list li .step_desc{color: #2E3032;}
.container .section05 .process_box .step_list li .icon{width: 22px;height: 32px;display: inline-block;background: url(../images/cheongdam/ico_section05_arrow_01.svg)no-repeat center;background-size: contain;margin-left: 12px;vertical-align: middle;}
.container .section05 .process_box img{width: max-content;}
.container .section05 .process_box .final_result{font-size: 35px; font-weight: 500;line-height: 1.4; }
.container .section05 .process_box .final_result span{color: #C6826E}
.container .section05 .main_text{font-size: 40px; font-weight: 500; color:#C6826E; }

.container .section06{background: url(../images/cheongdam/img_section06_bg.jpg);  background-repeat: no-repeat;  background-position: 50% 0 ; background-size: cover; padding-top: calc(816 / 1920 * 100%);}

.container .section07{background: #FFF7F1;}
.container .section07 .title_box .sub_title{color: #161718}
.container .section07 figure{width: calc(1200 /1420 * 100%); margin: 0 auto; }
.container .section07 .caption{font-size: 24px; font-weight: 500; color:#777C81; text-align: center;margin-bottom: 72px; }
.container .section07 figure img{width: 100%;}

.container .section08 .title_box .label{font-size: 26px;padding: 0 16px;font-weight: 700;line-height: 2;color: #8D4E2A;border-top:1px solid #8D4E2A;border-bottom:1px solid #8D4E2A;display: inline-block;margin-bottom: 30px;}
.container .section08 .title_box .sub_title{color:#161718; }
.container .section08 .solution_list{display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.container .section08 .solution_item{text-align: center;}
.container .section08 .solution_item img{border-radius: 30px;}
.container .section08 .solution_item .text_box{font-size: 30px; line-height: 1.5;margin-top:40px;}
.container .section08 .solution_item .text_box p:first-of-type{margin-bottom: 10px;}
.container .section08 .solution_item .text_box strong{color: #C6826E; font-weight: 500;}
.container .section08 .philosophy-box{border-radius: 20px;border:1px solid #E5D6CA;padding: 80px 24px; margin: 80px 0 24px;}
.container .section08 .philosophy-box p{font-size: 26px;line-height: 1.5;color: #474A4D;text-align: center;letter-spacing: -1px;}
.container .section08 .philosophy-box span{color: #C6826E;}
.container .section08  .note{font-size: 23px; text-align: center; color: #474A4D;}

.container .section09{background: url(../images/cheongdam/img_section09_bg.jpg);background-repeat: no-repeat;background-position: 50% 0;background-size: cover;}
.container .section09 .inner{padding: 0 12.6% ;}
.container .section09 .content_box{display: flex;justify-content: flex-end;align-items: center; ;}
.container .section09 .content_box .text_box{color: #fff;width: max-content; padding:12.6% 0;}
.container .section09 .content_box .text_box .main_text{font-size: 26px; line-height: 1.5;margin-bottom: 10px;}
.container .section09 .content_box .text_box h5{font-size: 64px; line-height: 1.5;}
/* 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;}

    .container .section03 .point-list{width:100%}
    .container .section04 .feature_box{width: 100%;}
    .container .section04 .step_box{width: 100%;}
    .container .section07 figure{width:100%; }

    .container .section09 .inner{padding: 0 12.6%;}

}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {

    .container .section08 .solution_list{ gap: 24px; }
    .container .section09 .content_box .text_box .main_text{font-size: 20px; }
    .container .section09 .content_box .text_box h5{font-size: 48px; ;}
}
/* 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) {
    .container [class*="section"] .inner{padding: 60px 5%;}

    /* content */
    .container .section03 .point-list{width:100%;grid-template-columns: repeat(1, 1fr);gap:60px;}
    .container .section03 .point-item:nth-of-type(1)::after{top: auto;bottom: 0;right: 50%;transform: translate(-50%, 150%) rotate(90deg);width: 18px;height: 32px;}
    .container .section03 .point-item:nth-of-type(3)::after{top: 0;left: 45%;transform:translate(50%, -150%)  rotate(270deg);width: 18px;height:32px;}


    .container .section04 .feature_box{width:100%;}
    .container .section04 .step_box{width:100%}
    .container .section04 .step_item .left h5{font-size: 24px;}
    .container .section04 .step_item .right .desc_text{text-wrap: balance;word-break: keep-all;text-align: center;font-size: 22px;}
    .container .section04 .feature-item .title_text{font-size: 24px;}
    .container .section04 .feature-item .desc_text{font-size: 22px; }

    .container .section05 .process_box .step_list{width: 80%;}
        .container .section06{background-image: url(../images/cheongdam/img_section06_bg_mo.jpg); padding-top: calc(1400/ 375 * 100%);}
    
    .container .section07 figure{width: 100%;}

    .container .section08 .solution_list{grid-template-columns: repeat(1, 1fr); }

    .container .section09 .inner{padding: 0 5%}



}
/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    #wrap { min-width: 375px; }
    .container [class*="section"] .inner{padding: 60px 24px;}

    .sub_visual {height: 300px;background-image: url(../images/cheongdam/img_visual_bg_mo.jpg);background-position: center center;}
    .sub_visual .text_box h3{font-size: 35px;margin-bottom: 30px;}
    .sub_visual .text_box .add_text{font-size: 16px;margin-bottom: 14px;}
    .sub_visual .text_box .desc_text{ font-size: 15px;}

    /* content */
    .container .title_box .sub_title{font-size:18px;}
    .container .title_box h4{font-size: 34px;margin-top:8px;letter-spacing: -1px;}
    .container .content_box{margin-top: 40px;}
    .container .title_box .sub_text{font-size: 16px}

    .container .section01 .inner{padding: 48px 0 0;}
    .container .section01{width: 100%; background-image: none; }
    .container .section01 .content_box{flex-direction:column;margin-top: 0;}
    .container .section01 .text_box{padding: 0 24px; color: #1E0E07; }
    .container .section01 .text_box .main_text{font-size:13px; }
    .container .section01 .text_box .desc_text{font-size:18px; text-wrap: balance; word-break: keep-all;}

    .container .section02 .img_box{width: 100%;margin: 40px auto;}
    .container .section02 .text_box .main_text{font-size: 16px;}

    .container .section03 .main_text{font-size: 16px; text-wrap:balance; word-break: keep-all;}
    .container .section03 .point-list{width: 100%;display :grid;  grid-template-columns: repeat(1, 1fr);gap: 30px;margin: 60px auto 0;}
    .container .section03 .point-item{padding: 56px 24px;justify-content: center;gap : 12px;text-align: center;aspect-ratio: 295/266;}
    .container .section03 .point-item:nth-of-type(1)::after{top: auto;bottom: 0;right: 48%;transform: translate(-50%, 150%) rotate(90deg);width: 9px;height: 16px;}
    .container .section03 .point-item:nth-of-type(3)::after{top: 0;left: 48%;transform:translate(50%, -150%)  rotate(270deg);width: 9px;height: 16px;}
    .container .section03 .point-list .point-title{font-size: 18px;}
    .container .section03 .point-list .point-text{font-size: 16px; }

    .container .section04 .title_box .label{font-size: 23px; padding: 0;}
    .container .section04 .feature_box{width:100%;padding: 20px 24px;margin: 0 auto 30px;}
    .container .section04 .feature-item{flex-direction:column;justify-content: center;line-height: 1.2;gap: 8px;}
    .container .section04 .feature-item .title_text{font-size: 18px;width: auto;}
    .container .section04 .feature-item .desc_text{font-size: 16px; }
    .container .section04 .step_box{width:100%;}
    .container .section04 .step_list{display: flex;flex-direction: column;gap: 40px;width: 100%;}
    .container .section04 .step_item{display: flex; justify-content: stretch; align-items: stretch; flex-direction: column;position: relative}
    .container .section04 .step_item::after{  content: "";position: absolute;left: 50%;bottom: 0;transform: translate(-50% , 140%);width: 1px;height: 23px;
    background: repeating-linear-gradient( to bottom,  #6E4B41, #6E4B41 3px, transparent 2px,transparent 5px ); }
    .container .section04 .step_item:last-child::after{  content: none;}
    .container .section04 .step_item > div {width: 100%;}
    .container .section04 .step_item > div{flex-direction: row;height: max-content;}
    .container .section04 .step_item .left{ border-radius: 16px 16px 0 0; gap: 10px; width:100%;padding: 14px 0;}
    .container .section04 .step_item .left span{ font-size:18px;}
    .container .section04 .step_item .left h5{font-size: 18px;}
    .container .section04 .step_item .right{padding:24px 12px;  border-radius: 0 0 16px 16px ; width: 100%; box-sizing: border-box; }
    .container .section04 .step_item .right .desc_text{font-size: 16px;}


    .container .section05 .title_box .label{font-size: 23px; padding: 0;}
    .container .section05 .title_box h4{font-size: 25px;text-wrap: balance;word-break: keep-all;}
    .container .section05 .intro-quote{font-size: 16px;  color:#C6826E; font-weight:500;line-height: 1.5; letter-spacing: -1px; text-align: center;position: relative;}
    .container .section05 .intro-quote::before, .container .section05 .intro-quote::after{width: 15px; height: 12px;}
    .container .section05 .process_box{gap:12px;margin:30px auto;}
    .container .section05 .process_box .step_list{width:100%; margin:0 auto }
    .container .section05 .process_box .step_list li{font-size: 16px;;padding: 12px 0;}
    .container .section05 .process_box .step_list li .icon{width: 10px;height: 16px}
    .container .section05 .process_box img{width: 50%}
    .container .section05 .process_box .final_result{font-size: 20px;}
    .container .section05 .main_text{font-size: 22px;}


    .container .section07 figure{width: 100%;}
    .container .section07 .inner{padding: 60px 0;}
    .container .section07 .caption{font-size: 16px; margin-bottom: 30px; }
    .container .section07 figure img{width: 100%;}


    .container .section08 .title_box h4{font-size: 22px;}
    .container .section08 .title_box .label{font-size: 23px; padding: 0;}
    .container .section08 .solution_list{grid-template-columns: repeat(1, 1fr); }
    .container .section08 .solution_item img{border-radius: 12px;}
    .container .section08 .solution_item .text_box{font-size: 18px; line-height: 1.5;margin-top:12px;}
    .container .section08 .solution_item .text_box p:first-of-type{margin-bottom: 0;}
    .container .section08 .solution_item .text_box strong{font-size: 21px;}
    .container .section08 .philosophy-box{border-radius: 0;border:none;padding: 0; margin: 30px 0 16px;}
    .container .section08 .philosophy-box p{font-size: 16px;}
    .container .section08  .note{font-size: 13px; background:#F6F6F6; padding: 4px 12px; border-radius:3px; }

    .container .section09{background: url(../images/cheongdam/img_section09_bg_mo.jpg);background-repeat: no-repeat;background-position: 50% 0;background-size: cover;}
    .container .section09 .inner{padding: 0;}
    .container .section09 .content_box{justify-content: flex-start}
    .container .section09 .content_box .text_box{padding: 140px 24px 200px;}
    .container .section09 .content_box .text_box .main_text{font-size: 16px; }
    .container .section09 .content_box .text_box h5{font-size: 24px;}
}

@media screen and (max-width:430px) {
     .container .section09 .content_box .text_box{padding: 80px 24px 100px;}
}
