@charset "utf-8";
/* #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); }
.container .title_box .sub_title{font-size: 28px; line-height: 1.3; font-weight: 600; color: var(--burgundy-color-500); 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 .feature-list{ display: flex;justify-content: space-between;align-items: center;}
.container .section01 .feature-list .feature-item{flex:1; padding: 0 20px; border-right: 1px dashed #F4D2E2; display: flex;justify-content: center;align-items: center; flex-direction: column;  letter-spacing: -1px; text-align: center;  box-sizing: border-box;}
.container .section01 .feature-list .feature-item:last-of-type{border-right: none;}
.container .section01 .feature-list .feature-title{font-size: 32px; font-weight: 600; line-height: 1;color:var(--gray-color-1000); margin: 20px 0 16px;}
.container .section01 .feature-list .feature-text{font-size: 23px; font-weight: 400; line-height: 1.5;  color:var(--gray-color-900);}

.container .section02{width: 100%; background-image: url(../images/img_section02_bg.webp);  background-repeat: no-repeat;  background-position: 0 0 ; background-size: cover; }
.container .section02 .inner{padding: 160px 0;}
.container .section02 .title_box h4, .container .section02 .title_box .sub_title, .container .section02 .title_box .sub_text{color: #fff;}
.container .section02 .title_box .sub_text{margin-top:10px;}
.container .section02 .content_box .reason01{margin-bottom: 140px;}
.container .section02 .content_box .text_box{margin-bottom: 85px;}
.container .section02 .reason01 .img_box img{box-shadow: 10px 20px 30px 0px rgba(0, 0, 0, 0.10);}
.container .section02 .content_box h5{font-size: 40px; font-weight: 600; line-height:1.4; text-align: center; color: #4B47CD;letter-spacing: -1px;}
.container .section02 .content_box h5 span{font-size: 16px; font-weight: 700; display: block; padding-bottom:20px; }
.container .section02 .product{display: flex;  justify-content: center; align-items: center; gap: 52px;}
.container .section02 .product .img_box{max-width: 483px;}
.container .section02 .product .diagram_box .diagram{display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; position: relative; padding: 0 40px;}
.container .section02 .product .diagram_box .diagram::before{content:''; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 578px; height: 190px;background:url(../images/img_section02_line.svg) no-repeat; display: block;z-index: 0;}
.container .section02 .product .diagram_box .diagram li{width: 160px; height: 160px; display : flex; flex-wrap: wrap; justify-content: center; align-items: center; border:1px dashed #4F49FF; background: #EBEBFA; border-radius: 100%;
    font-size: 22px; font-weight:700; line-height:1.4; color:#4B47CD; text-align: center; letter-spacing: -1px;z-index: 1; }
.container .section02 .product .diagram_box .diagram li span {font-size: 14px;}
.container .section02 .product .diagram_box .diagram li p {font-size:18px;}
.container .section03{background: #FAFAFB;}
.container .section03 .content_box ul {display :grid;  grid-template-columns: repeat(3, 1fr);gap: 68px 40px;}
.container .section03 .content_box li{width:100%; height:300px; border-radius: 30px; background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; justify-content: center; align-items: center;}
.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:nth-child(4) {background-image: url(../images/img_section03_04.jpg);}
.container .section03 .content_box ul li:nth-child(5) {background-image: url(../images/img_section03_05.jpg);}
.container .section03 .content_box ul li:nth-child(6) {background-image: url(../images/img_section03_06.jpg);}
.container .section03 .content_box ul li p{font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -1px;color: #fff;}


/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    .container .section01 .inner{padding: 160px 5% }
    .container .section01 .feature-list .feature-item{padding: 0 10px;}
    .container .section01 .feature-list .feature-text{font-size: 20px;}

    .container .section02 .content_box .sub_text{font-size:22px;}

    .container .title_box .sub_text{font-size: 22px}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .container [class*="section"] .inner{padding: 160px 5%;}
    .container .section02 .inner{padding: 160px 0;}
    .section04 .content_box .content_left, .section04 .content_box .slide .text_box{padding: 120px 5%;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .container [class*="section"] .inner{padding: 60px 5%;}
    .container .section02 .inner{padding:  60px 0;}
    .container .title_box .sub_text{font-size: 20px}
    /* content */
    .container .section02 .content_box ul li{gap:40px;}
    .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 .section01 .feature-list .feature-text{font-size: 16px;}
    .container .section01 .feature-list{flex-wrap: wrap;justify-content: center;gap: 28px 0;}
    .container .section01 .feature-list .feature-item{width: 40%;flex: auto;padding: 0 24px;}
    .container .section01 .feature-list .feature-item:nth-of-type(2n){border-right: none;}
}

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

    .container .section01 .feature-list .feature-item .img_box{width: 88px; height: 88px;}
    .container .section01 .feature-list .feature-title{font-size: 24px;; margin: 12px 0 8px;}
    .container .section01 .feature-list .feature-text{font-size: 16px;text-wrap:balance;word-break:keep-all;}

    .container .section02 .content_box h5 span{font-size: 14px;padding-bottom: 8px;}
    .container .section02 .content_box h5{font-size: 28px;}
    .container .section02 .content_box .reason01{margin-bottom: 52px;}
    .container .section02 .content_box .text_box{margin-bottom: 32px;}
    .container .section02 .product {flex-direction: column; gap: 32px;}
    .container .section02 .product .img_box{width: 70%;}
    .container .section02 .product .diagram_box .diagram{gap: 8px}
    .container .section02 .product .diagram_box .diagram li{width: 100px; height: 100px; font-size: 16px}
    .container .section02 .product .diagram_box .diagram li span {font-size: 10px;}
    .container .section02 .product .diagram_box .diagram li p {font-size:11px;}
    .container .section02 .product .diagram_box .diagram::before{width: 327px;height: 120px;background-size: 100% auto;}
    .container .section03 .content_box ul{grid-template-columns: repeat(1, 1fr); gap:40px;}
    .container .section03 .content_box ul li p{font-size: 22px;}
    .container .section03 .content_box li{height: 220px;border-radius: 12px;}

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

}