/******* 공통 *********/

.gray_box{background: #171717;border-radius: 10px;}

.f_lg {font-size: 32px;letter-spacing: -0.05em;}
.f_mid {font-size: 27px;letter-spacing: -0.05em;}
.f_sm {font-size: 19px;letter-spacing: -0.05em;}

.area_mb{margin-bottom:clamp(100px, 12vw, 180px);}
.area_pt{padding-top:clamp(60px, 12vw, 100px);}
.area_pb{padding-bottom:clamp(60px, 12vw, 100px);}

.tit_wrap h2{font-size:70px; letter-spacing: -0.05em; position: relative; word-break: auto-phrase;}
.tit_wrap h2::before{letter-spacing: 0; position: absolute;left:10px; top:0; transform: translate(-50%,-50%); border-radius:50px; color:rgba(255, 255, 255, 0.4); font-size: 18px;}
p{font-size:clamp(17px, 1.8vw, 20px); line-height: 1.9; }
.name_tag{font-size:1em; color: #5D5D5D;}



/******* 개별 *********/


/*** Technology Introduction ***/
#content_wrap .navbar{margin-top:2em; margin-bottom: 7em; font-size: clamp(14px, 2.8vw, 19px);}
#content_wrap .nav-pills .nav-link{padding-left: clamp(16px, 2.2vw, 36px);padding-right: clamp(16px, 2.2vw, 36px);padding-top: clamp(8px, 2vw, 15px);padding-bottom: clamp(8px, 2vw, 15px); color: #fff; border-radius:100px;background-color:#333;}
#content_wrap .nav-pills .nav-link.active, .nav-pills .show>.nav-link{background-color:#0F60F3; border-radius:100px;}
#content_wrap .nav-pills a:hover {background-color:#0F60F3;}

.cms .tit_wrap h2::before{content: "01";}
.cms .box_wrap{margin-top: 120px;}
.cms .gray_box{width: calc(25% - 0.7em); height: 550px; padding: 80px 0; padding-left: clamp(30px, 2.2vw, 40px);padding-right: clamp(30px, 2.2vw, 40px);}
.cms .gray_box:hover i{display: none;}
.cms .gray_box i img{width: clamp(50px, 10vw, 80px);}
.cms .gray_box .info{opacity:0;height: 0;}
.cms .gray_box:hover .info{flex-direction: column; gap: 1em; margin-top:70px; opacity:1; display: flex;  transition: all 0.3s ease-in-out;}
.cms .info li{font-size: clamp(17px, 1.2vw, 18px); position: relative;padding-left: 1em;list-style: none;}
.cms .info li::before{content: "";position: absolute;left: 0;top:50%; transform: translateY(-50%); width:6px;height:6px; border-radius:50px; background-color: #fff;}

.build, .letter {width: calc(50% - 0.5em);}
.build .tit_wrap h2::before{content: "02";}
.build{background: url(/resources/front/image/20250402/build_img.png) center center / cover no-repeat; height: clamp(790px, 57vw, 917px); border-radius:10px; padding:50px;}
.letter .tit_wrap{padding: 30px 10px 30px 10px;}
.letter .tit_wrap h2::before{content: "03";}

.system,.ems{position: relative;}
.system .keyword li,
.ems .keyword li{padding-left: clamp(16px, 2.2vw, 24px);padding-right: clamp(16px, 2.2vw, 24px);padding-top: clamp(8px, 2vw, 14px);padding-bottom: clamp(8px, 2vw, 14px); font-size: clamp(15px, 2vw, 20px); background-color:#333; color:#fff; border-radius:10px;}
.system .tit_wrap h2::before{content: '04';}
.system::after,.ems::after{position: absolute;content: ''; bottom: 0; background-color: #444; width: 100%; height: 1px;}
.ems .tit_wrap h2::before{content: "05";}
.ems .tit_wrap{margin-bottom:100px;}
.ems p{margin-bottom: 80px;}
.ems dt{padding-bottom: 30px;}
.ems strong{font-weight: 600;}
.ems .gray_box{padding:40px;}
.ems .box_wrap {margin-top: 80px;}
.ems .box_wrap dd.line{position: relative; max-height:100px;}
.ems .box_wrap dd.line::after{content: ''; width: 100%; height: 1px; bottom:0; left: 0; background-color: #333; position: absolute;}
.ems .arrow_wrap li:not(:last-child){padding-right: 40px; position: relative;}
.ems .arrow_wrap li:not(:last-child)::after{content: ''; display: block; position:absolute; width:20px; height:20px; top:55%; right:-5px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5.312' height='8.623'%3E%3Cpath fill='none' stroke='%230F60F3' stroke-linejoin='round' stroke-width='1' d='m.707 7.916 3.6-3.6L.707.707'/%3E%3C/svg%3E");background-repeat: no-repeat;background-size: contain;transform: translate(-50%,-50%);}
.ems .line_arrow_wrap li:not(:last-child){padding-right: 80px; position: relative;}
.ems .line_arrow_wrap{position: relative;}
.ems .line_arrow_wrap > li:first-child::after{content: ''; position: absolute; background: url(/resources/front/image/20250402/line_arrow.svg) center center / contain no-repeat; width:28px; height:28px;right: 8px;top: 50%;transform: translate(-50%,-50%);}
.ems .box_wrap .w_3{width:calc(30% - 0.7em);}
.ems .box_wrap .w_7{width:calc(70% - 0.7em); text-align: center;}
.ems .gray_box.w_5{width:calc(50% - 0.5em);}
.ems .diagram {position: relative;height: 150px;}
.ems .vertical_line {position: absolute;top: 0;left: 50%;width: 1px;height:90px;background-color: #333; /* 선 색상 (회색 계열) */}
.ems .label-box {position: absolute;top: 28px;left: 50%;transform: translateX(10px); /* 선 옆으로 살짝 오른쪽 */background-color: #061c3f; /* 네이비색 박스 */color: white;padding: 5px 10px;white-space: nowrap;}
.ems .horizontal-line {position: absolute;top: 90px;left: 10%;width: 80%;height: 1px;background-color: #333;}
.ems .vertical_line.short:first-child{left: 0;z-index: -2;}
.ems .vertical_line.short:last-child{left: 100%;z-index: -2;}
.ems .dot_wrap li{font-size: clamp(17px, 1.2vw, 18px); position: relative;padding-left: 1em;list-style: none;}
.ems .dot_wrap li::before{content: "";position: absolute;left: 0;top:50%; transform: translateY(-50%); width:6px;height:6px; border-radius:50px; background-color: #0F60F3;}

.consulting .tit_wrap h2::before{content: "06";}
.consulting strong{font-weight: 500;}
.consulting .gray_box{padding: 40px 30px;}
.consulting .mid_wrap {padding: 40px 0 1rem;}
.consulting .mid_wrap dt{padding-bottom:45px;}
.consulting .mid_wrap dd{font-size: 18px; font-weight: 300; letter-spacing: -0.05em;}
.consulting .mid_wrap li {width: calc(50% - 0.5rem);}
.consulting .mid_wrap .w_42{width: calc(42% - 0.5rem); background-color: #797979; border-radius: 10px;}
.consulting .mid_wrap .w_58{width: calc(58% - 0.5rem);;}
/* 이미지 영역 */
.consulting .mid_wrap [class*="img_0"]{opacity: 0; height: 0; object-fit: cover; border-radius: 10px;}
.consulting .mid_wrap .img_01{height: 100%; opacity: 1;background: url(/resources/front/image/20250402/consulting_img01.png) center / cover no-repeat;}
.consulting:has(.li_01:hover) [class*="img_0"]{opacity: 0; height: 0;}
.consulting:has(.li_01:hover) .img_01{opacity: 1; height: 100%; background: url(/resources/front/image/20250402/consulting_img01.png) center / cover no-repeat; transition: opacity 0.4s ease-in-out;}
.consulting:has(.li_02:hover) [class*="img_0"]{opacity: 0; height: 0;}
.consulting:has(.li_02:hover) .img_02{opacity: 1; height: 100%; background: url(/resources/front/image/20250402/consulting_img02.png) center / cover no-repeat; transition: opacity 0.4s ease-in-out;}
.consulting:has(.li_03:hover) [class*="img_0"]{opacity: 0; height: 0;}
.consulting:has(.li_03:hover) .img_03{opacity: 1; height: 100%; background: url(/resources/front/image/20250402/consulting_img03.png) center / cover no-repeat; transition: opacity 0.4s ease-in-out;}
.consulting:has(.li_04:hover) [class*="img_0"]{opacity: 0; height: 0;}
.consulting:has(.li_04:hover) .img_04{opacity: 1; height: 100%; background: url(/resources/front/image/20250402/consulting_img04.png) center / cover no-repeat; transition: opacity 0.4s ease-in-out;}
/* 아이콘 영역 */
.consulting .ic_wrap li {height: 330px;flex: 1 1 0; align-items: center;transition: flex-grow 0.5s ease-in-out;overflow: hidden;position: relative;justify-content: center; min-width: 0;  flex-shrink: 1;}
.consulting .ic_wrap:has(.ic_wrap li:hover) .ic_wrap li {max-width: 361px;}
.consulting .ic_wrap li:hover {justify-content: start;flex: 1.95;align-items: start; min-width: 0;}
.consulting .ic_wrap li .d-flex.align-items-center {transition: opacity 0.5s ease-in-out;opacity: 1;visibility: visible;}
.consulting .ic_wrap li .i_wrap {opacity: 0;visibility: visible;transition: opacity 0.8s ease-in-out;}
.consulting .ic_wrap li .i_wrap:hover {opacity: 1;}
.consulting .ic_wrap li p {opacity: 0; font-weight:300; height: 0; min-width: 0;}
.consulting .ic_wrap li:hover p{opacity: 1; transition: opacity 0.3s ease-in-out; padding-top: 50px; }
.consulting .ic_wrap i {width: 50px;}




@media(max-width:1400px){
    .consulting .mid_wrap .img{height: 25vh;}
    .consulting .mid_wrap .w_42 {width:100%;}
    .consulting .mid_wrap .w_58 {width:100%;}
}

@media(max-width:1300px){

    .cms .gray_box i{display: none;}
    .cms .gray_box .info{opacity: 1; transition: none;}
    .cms .gray_box .info{transition: none; flex-direction: column;gap: 1em;margin-top: 35px;opacity: 1;display: flex;}
    .cms .gray_box:hover .info{margin-top: 35px;}
    .cms .gray_box{width: calc(50% - 0.5em); height: 390px; padding: 60px 0; padding-left: clamp(30px, 2.2vw, 40px); padding-right: clamp(30px, 2.2vw, 40px);}
    .cms .info li{font-size: clamp(17px, 1.8vw, 18px);}
    .cms .gray_box.active .info{margin-top: 45px;}
    .consulting .ic_wrap li {flex: 1 1 calc(50% - 0.5rem); max-width: calc(50% - 0.5rem);}
    .build{padding:40px; height:738px;}

    .consulting .mid_wrap .img_01{height: 22vh;}.consulting:has(.li_01:hover) .img_01,.consulting:has(.li_02:hover) .img_02,.consulting:has(.li_03:hover) .img_03,.consulting:has(.li_04:hover) .img_04{height:22vh;}


    .consulting .ic_wrap li {justify-content: start;align-items: start;}
    .consulting .ic_wrap li p{display: block; opacity: 1;}
}
@media(max-width:1200px){
    .ems .box_wrap .w_3, .ems .box_wrap .w_7{width:100%;}
    .ems .box_wrap dd.line{min-height: fit-content;}
    .ems .gray_box{padding:30px;}
    .consulting .ic_wrap li p{padding-top:40px;}

}
@media(max-width:991px){
    .tit_wrap h2{font-size:60px;}
    .f_lg{font-size: 28px;}
    .f_mid{font-size: 25px;}
    .f_sm{font-size: 18px;}

    .cms .gray_box{width: calc(50% - 0.25em); padding: 40px 0; padding-left: clamp(10px, 4vw, 30px); padding-right: clamp(10px, 4vw, 30px);}
    
    .build, .letter {width:100%}
    .build{padding:40px; height:450px;}
    .letter img {width:100%; max-width: 520px;}
    .consulting .mid_wrap dt {padding-bottom: 30px;}
    .consulting .ic_wrap li p{padding-top:20px;}
}
@media(max-width:767px){
    .tit_wrap h2{font-size:50px;}
    .f_lg{font-size: 24px;}
    .f_mid{font-size: 21px;}
    .f_sm{font-size: 17px;}
    
    .cms .gray_box{padding: 40px 0; padding-left: clamp(20px, 2.2vw, 30px);padding-right: clamp(20px, 2.2vw, 30px);}

    .ems .gray_box.w_5{width: 100%;}

    .consulting .gray_box{padding: 20px;}
    .consulting .ic_wrap li{height:auto; flex: 1 1 100%; max-width:100%; justify-content: center; align-items: start; }
    .consulting .ic_wrap li p,.consulting .ic_wrap li:hover p {display: block; padding-top:20px; height: auto}

    
}

@media(max-width:575px){
    .tit_wrap p {font-size: 16px;}
    
    .cms .gray_box{width: 100%; height: 100%;}
    .cms .gray_box .info {height:auto;}
    .cms .gray_box.active .info{margin-top:30px;}
    .ems .gray_box {padding: 30px 15px;}

    .label-box {left: 50%;transform: translateX(-50%); /* 선 옆으로 살짝 오른쪽 */}

    .build{padding:40px 20px;}
    .consulting .mid_wrap li {width: 100%;}
    .consulting .mid_wrap dt {padding-bottom:10px;}
}