@charset "utf-8";

/* s_txt */
.s_txt{margin-bottom: 30px;}
.s_txt h3{font-size: 32px; color:#000; position: relative; display: inline-block; z-index: 2; font-family: 'SUIT', sans-serif; word-break: keep-all;}
.s_txt h3::after{content:''; width: 13px; height: 13px; border-radius: 50%; background-color: var(--color1); position: absolute; top: 3px; left: -3px; display: block; z-index: -1;}
.s_txt p{font-size: 18px; font-weight: 500; color:#666666; line-height: 1.6em; margin-top: 25px; word-break: keep-all;}

@media  all and (max-width:1280px) {
    .s_txt h3{font-size: 30px;}
    .s_txt h3::after{width: 11px; height: 11px; top: 2px; left: -2px;}
    .s_txt p{font-size: 17px; margin-top: 22px;}
}
@media  all and (max-width:1024px) {
    .s_txt h3{font-size: 28px;}
    .s_txt h3::after{width: 10px; height: 10px; top: 2px; left: -2px;}
}
@media  all and (max-width:768px) {
    .s_txt h3{font-size: 25px;}
    .s_txt h3::after{width: 9px; height: 9px; top: 2px; left: -2px;}
    .s_txt p{font-size: 16px; margin-top: 18px;}
    .s_txt p br{display: none;}
}
@media  all and (max-width:500px) {
    .s_txt h3{font-size: 23px;}
    .s_txt h3::after{width: 8px; height: 8px; top: 2px; left: -2px;}
}

/* s_cont  */
.s_cont{display: flex; align-items: flex-start;}
.s_cont .l_cont{width: 320px;}
.s_cont .r_cont{width: calc(100% - 320px);}

@media  all and (max-width:1400px) {
    .s_cont .l_cont{width: 250px;}
    .s_cont .r_cont{width: calc(100% - 250px);}
}

@media all and (max-width:1024px){
    .s_cont{flex-direction: column;}
    .s_cont .l_cont{width: 100%;}
    .s_cont .r_cont{width: 100%;}
}


 /* company1  */
.company1{}
.company1 .greeting{}
.company1 .greeting .top{width: 100%; height: 380px; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; background: url(/images/sub/comapny1_top1.webp) no-repeat center center / cover;}
.company1 .greeting .top h3{font-size: 40px; color:#fff; padding: 0 120px; line-height: 1.3em;}
.company1 .greeting .txt{margin: 80px 0px 50px; display: flex; gap:20px; border-bottom: 1px solid #e5e5e5; padding:0 80px 80px;}
.company1 .greeting .txt > div{width: 100%;}
.company1 .greeting .txt > div > p{font-size: 17px; font-weight: 500; line-height: 1.8em;}
.company1 .greeting .txt > div > p + p{margin-top: 40px;}
.company1 .greeting .name{font-size: 20px; color:#000; text-align: right; font-weight: 600;}
.company1 .bg{background-color: #f7f7f7; padding: 120px 0; margin: 120px 0;}
.company1 .bg .s-inner{}
.company1 .bg .s-inner .s_txt{}
.company1 .bg .s-inner .list{margin-top: 50px; display: flex; align-items: center; gap:30px;}
.company1 .bg .s-inner .list li{background-color: #fff; width: 100%; aspect-ratio:1/1; border-radius: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
.company1 .bg .s-inner .list li .icon{}
.company1 .bg .s-inner .list li .icon img{}
.company1 .bg .s-inner .list li h4{font-size: 20px; font-weight: 600; color:#000000; text-align: center; margin-top: 25px;}
.company1 .bg .s-inner .s_cont{}
.company1 .bg .s-inner .s_cont .l_cont{}
.company1 .bg .s-inner .s_cont .l_cont .s_txt{}
.company1 .bg .s-inner .r_cont{}




/* company1 responsive */
@media all and (max-width:1400px) {
    .company1 .greeting .top{height: 340px;}
    .company1 .greeting .top h3{font-size: 34px; padding: 0 80px;}
    .company1 .greeting .txt{margin: 60px 0 40px; padding: 0 60px 60px;}
    .company1 .bg{padding: 100px 0; margin: 100px 0;}
}
@media all and (max-width:1024px) {
    .company1 .greeting .top{height: 300px;}
    .company1 .greeting .top h3{font-size: 28px; padding: 0 50px;}
    .company1 .greeting .txt{margin: 50px 0 30px; padding: 0 40px 50px; flex-direction: column;}
    .company1 .greeting .txt > div > p + p{margin-top: 30px;}
    .company1 .bg{padding: 80px 0; margin: 80px 0;}
    .company1 .bg .s-inner .list{gap: 20px;}
}
@media all and (max-width:768px) {
    .company1 .greeting .top{height: 240px; border-radius: 15px;}
    .company1 .greeting .top h3{font-size: 24px; padding: 0 30px;}
    .company1 .greeting .txt{margin: 40px 0 25px; padding: 0 20px 40px;}
    .company1 .greeting .txt > div > p{font-size: 16px;}
    .company1 .greeting .txt > div > p + p{margin-top: 25px;}
    .company1 .greeting .name{font-size: 18px;}
    .company1 .bg{padding: 60px 0; margin: 60px 0;}
    .company1 .bg .s-inner .list{flex-wrap: wrap; margin-top: 40px; gap: 15px;}
    .company1 .bg .s-inner .list li{width: calc(50% - 8px); border-radius: 15px;}
    .company1 .bg .s-inner .list li h4{font-size: 17px; margin-top: 15px;}
}
@media all and (max-width:500px) {
    .company1 .greeting .top{height: 200px; border-radius: 10px;}
    .company1 .greeting .top h3{font-size: 20px; padding: 0 20px;}
    /* .company1 .bg .s-inner .list li{width: 100%;} */
}



 #organization { width: 100%; max-width: 1600px; overflow: hidden; text-align: center; position: relative; font-size:0; display: inline-block; }
#organization::before { content:''; width:1px; height: 100%; background: #cdd2e3; position: absolute; top: 0; left: 50%; margin-left: -0.5px; z-index: -1; }
#organization > li > div { display: inline-block; vertical-align: top; color:#fff; }
#organization > li > div > p,
#organization > li > div ol li { font-size: 16px; line-height: 60px; width: 196px; margin: 40px 10px; max-width: calc(90vw / 5 - 20px);  }
#organization .depth3 .depth3_3 li { font-size: 16px; line-height: 60px; width: 196px; margin: 20px 10px; max-width: calc(90vw / 5 - 20px);  }
#organization .depth1 { width: 100%; }
#organization .depth1 div p { position: relative; margin-top:0; max-width: calc(90vw / 5 - 20px); }
#organization .depth1 p { background: var(--color1);   }
#organization .depth2 p { position: absolute; left:0; bottom:0; background: #00397d; margin-bottom:0; z-index:10; }
#organization .depth3 { position: relative;  }
#organization .depth3 .depth3_1 { width: 100%;}
#organization .depth3 .depth3_1 p {visibility: hidden;background: #4047b7;display: inline-block;max-width: calc(90vw / 5 - 20px);}
#organization .depth3 .depth3_1 ol {position: relative;background: #fff;}
#organization .depth3 .depth3_1 ol li { position: relative;  text-align: center; background: var(--color2); display: inline-block; margin-bottom:0;   }
#organization .depth3 .depth3_3 { width: 100%;}
#organization .depth3 .depth3_3 p {visibility: hidden;background: #4047b7;display: inline-block;max-width: calc(90vw / 4 - 20px);}
#organization .depth3 .depth3_3 ol {position: relative;background: #fff;}
#organization .depth3 .depth3_3 ol li { position: relative;  text-align: center; background: #eee; display: inline-block; margin-bottom:0; color: #666;}
#organization .depth3 .depth3_2 p { background: #dfe3ee; color:#7e8597; position: absolute; top:0; right:200px; }

#organization .depth2::before {/* content:''; */width: calc(50% - 120px);height: 1px;background: #cdd2e3;position: absolute;right: 50%;top: 100px;  z-index:-1;}
#organization .depth2::after {/* content:''; */width: 1px;height: calc(100% - 100px);background: #cdd2e3;position: absolute;left: 120px;top: 100px;margin-left: -0.5px; z-index:-1;}
#organization .depth3 .depth3_2::before { content:''; width: 25%; height: 1px; background: #cdd2e3; position: absolute; left:50%; top: 69.5px; z-index:-1;  }
#organization .depth3 .depth3_1 ol::before {content: '';width: calc(100% - 218px);height: 1px;background: #cdd2e3;position: absolute; left:50%;top: 0;transform: translateX(-50%);}
#organization .depth3 .depth3_1 ol li::before { content: ''; width: 1px; height: 40px; background: #cdd2e3; position: absolute; left: 50%; top: -40px; margin-left: -0.5px; }
#organization .depth3 .depth3_3 ol li::before { content: ''; width: 1px; height: 20px; background: #cdd2e3; position: absolute; left: 50%; top: -20px; margin-left: -0.5px; }
#organization .depth3 .depth3_3 ol li.none::before {width: 0; height: 0;}

.ogrWrap table { max-width: 800px; float: right; margin-top: 5%; margin-right: 5%;  }

@media all and (max-width:1400px) {
	#organization .depth2::before { width: calc(50% - (90vw / 6 / 2)); }
	#organization .depth2::after { left: calc((90vw / 6 - 20px) / 2 + 10px); }
	#organization .depth3 .depth3_1 ol::before { width: 77%; max-width: 720px;}

	.ogrWrap table { margin-right: 0;  }
    #organization > li > div > p, #organization > li > div ol li{max-width: 17%; font-size: 1.4vw;}
    #organization .depth3 .depth3_3 li{max-width: 17%; font-size: 1.4vw;}
}

@media all and (max-width:1024px) {
	#organization .depth3 .depth3_2 p { right: 0; width: 50%; max-width: 40%;}
}

@media all and (max-width:768px) {
	#organization > li > div > p,
	#organization > li > div ol li  { margin: 30px 5px; line-height: 50px; max-width: calc(90vw / 5 - 10px); font-size: 2vw;}

	#organization .depth2::before { top: 80px; }
	#organization .depth2::after  { top: 80px; height: calc(100% - 80px);  }
	#organization .depth3 .depth3_2::before {  top: 54.5px; }
	#organization .depth3 .depth3_1 ol::before {  }
	#organization .depth3 .depth3_1 ol li::before { height: 30px; top: -30px; }
	#organization .depth3 .depth3_3 ol li::before { height: 15px; top: -15px; }
	#organization .depth3 .depth3_3 li {margin:15px 5px; max-width: calc(90vw / 5 - 10px); font-size: 2vw;}
}


/* company2 */
.company2{}
.company2 .partner{display: grid; grid-template-columns: repeat(5, 1fr); gap:50px 20px;}
.company2 .partner li{}
.company2 .partner li .img{aspect-ratio: 16/10; padding: 30px; border: 1px solid #eee; border-radius: 20px; background-color: #fafafa; transition: .4s; display: flex; align-items: center; justify-content: center;}
.company2 .partner li:hover .img{background-color: #fff;}
.company2 .partner li .img img{width: 100%; height: 100%; object-fit: contain; max-width: 176px; mix-blend-mode: multiply;}
.company2 .partner li p{text-align: center; font-size: 18px; font-weight: 500; color:#000000; margin-top: 15px;}

@media  all and (max-width:1280px) {
    .company2 .partner{grid-template-columns: repeat(4, 1fr); gap:45px 20px;}
    .company2 .partner li .img{padding: 25px; border-radius: 15px;}
    .company2 .partner li p{font-size: 17px; margin-top: 12px;}
}
@media  all and (max-width:1024px) {
    .company2 .partner{grid-template-columns: repeat(3, 1fr); gap:40px 20px;}
}
@media  all and (max-width:768px) {
    .company2 .partner{grid-template-columns: repeat(2, 1fr); gap:40px 20px;}
    .company2 .partner li .img{padding: 20px;  border-radius: 10px;}
    .company2 .partner li p{font-size: 16px; margin-top: 10px;}
}
@media  all and (max-width:500px) {
    .company2 .partner{grid-template-columns: repeat(2, 1fr); gap:40px 15px;}
}


/* company3 */
.company3{}
.company3 .root_daum_roughmap .cont .section.lst,
.company3 .root_daum_roughmap .wrap_controllers{display: none;}
.company3 .map_info{display: flex; gap:50px; margin-top: 60px;}
.company3 .map_info li{width: 100%;}
.company3 .map_info li .top{}
.company3 .map_info li .top h4{color:#666666; font-size: 20px;}
.company3 .map_info li .top h3{color:#000; font-size: 24px; font-family: 'SUIT', sans-serif; font-weight: 700; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #e5e5e5; word-break: keep-all;}
.company3 .map_info li .top h3.tel{font-size: 36px; font-weight: 800; margin-bottom: 30px; padding-bottom: 12px;}
.company3 .map_info li .bot{}
.company3 .map_info li .bot.flex{display: flex;}
.company3 .map_info li .bot .btn_box{display: flex; align-items: center; gap:10px;}
.company3 .map_info li .bot .btn_box a.btn{display: inline-flex; align-items: center; line-height: 56px; font-size: 16px; font-weight: 600; color:#000000; border-radius: 40px; padding: 0 22px 0 18px;}
.company3 .map_info li .bot .btn_box a.btn.btn1{background-color: #fff; border: 1px solid #eee;}
.company3 .map_info li .bot .btn_box a.btn.btn2{background-color: #fae100;}
.company3 .map_info li .bot .btn_box a.btn img{margin-right: 9px;}
.company3 .map_info li .bot p{font-size: 18px; color:#686868;}
.company3 .map_info li .bot .l_cont{width: 50%;}
.company3 .map_info li .bot > div h4{font-size: 18px; font-weight: 600; color:#121212; margin-bottom: 12px;}
.company3 .map_info li .bot .l_cont dl{display: flex;}
.company3 .map_info li .bot .l_cont dl + dl{margin-top: 10px;}
.company3 .map_info li .bot .l_cont dl dt{background-color: #53a135; font-size: 14px; color:#fff; padding: 4px 10px; border-radius: 2px; margin-right: 5px;}
.company3 .map_info li .bot .l_cont dl dd{font-size: 18px; color:#686868; font-weight: 400;}
.company3 .map_info li .bot .r_cont{width: 50%;}
.company3 .map_info li .bot .r_cont h4{}
.company3 .map_info li .bot .r_cont p{font-size: 18px; color:#686868; font-weight: 400;}
.company3 .map_info li .bot .r_cont p + p{margin-top: 13px;}

@media  all and (max-width:1400px) {
    .company3 .root_daum_roughmap .wrap_map{height: 460px !important;}
    .company3 .map_info{margin-top: 50px; gap:40px;}
    .company3 .map_info li .top h4{font-size: 19px;}
    .company3 .map_info li .top h3{font-size: 22px; margin-bottom: 25px; padding-bottom: 25px;}
    .company3 .map_info li .top h3.tel{font-size: 34px;margin-bottom: 25px; padding-bottom: 8px;}
    .company3 .map_info li .bot .btn_box{flex-direction: column; align-items: flex-start;}
    .company3 .map_info li .bot .btn_box a.btn{font-size: 15px; line-height: 52px; padding: 0 20px 0 16px;}
    .company3 .map_info li .bot > div h4{font-size: 17px;}
    .company3 .map_info li .bot .l_cont dl dt{font-size: 13px; padding: 3px 8px;}
    .company3 .map_info li .bot .l_cont dl dd{font-size: 17px;}
    .company3 .map_info li .bot .r_cont p{font-size: 17px;}
    .company3 .map_info li .bot .r_cont p + p{margin-top: 11px;}
}
@media  all and (max-width:1024px) {
    .company3 .root_daum_roughmap .wrap_map{height: 420px !important;}
    .company3 .map_info{margin-top: 40px; gap:35px; flex-direction: column; gap:80px;}
    .company3 .map_info li .top h4{font-size: 18px;}
    .company3 .map_info li .top h3{font-size: 21px; margin-bottom: 20px; padding-bottom: 20px;}
    .company3 .map_info li .top h3.tel{font-size: 32px; margin-bottom: 20px;}
    .company3 .map_info li .bot .btn_box{flex-direction: row;}
    .company3 .map_info li .bot .btn_box a.btn{line-height: 48px; padding: 0 18px 0 15px;}
}
@media  all and (max-width:768px) {
    .company3 .root_daum_roughmap .wrap_map{height: 360px !important;}
    .company3 .map_info{gap:65px;}
    .company3 .map_info li .top h4{font-size: 17px; margin-bottom: 5px;}
    .company3 .map_info li .top h3{font-size: 20px; margin-bottom: 16px; padding-bottom: 16px;}
    .company3 .map_info li .top h3.tel{font-size: 28px; margin-bottom: 16px; padding-bottom: 8px;}
    .company3 .map_info li .bot > div h4{font-size: 16px;}
    .company3 .map_info li .bot .l_cont dl dt{font-size: 12px; padding: 2px 6px;}
    .company3 .map_info li .bot .l_cont dl dd{font-size: 16px;}
    .company3 .map_info li .bot .r_cont p{font-size: 16px;}
    .company3 .map_info li .bot .r_cont p + p{margin-top: 9px;}
}
@media  all and (max-width:500px) {
    .company3 .root_daum_roughmap .wrap_map{height: 300px !important;}
    .company3 .map_info{gap:50px;}
    .company3 .map_info li .top h4{font-size: 16px; margin-bottom: 5px;}
    .company3 .map_info li .top h3{font-size: 19px;}
    .company3 .map_info li .top h3.tel{font-size: 26px;}
}


/* intro2 */
.intro2 .s-inner .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 70px;
    row-gap: 60px;
    margin-top: 60px;
    position: relative;
}

.intro2 .s-inner .list li {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 45px 28px 40px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

/* .intro2 .s-inner .list li:hover {
    border-color: var(--color1);
    box-shadow: 0 10px 36px rgba(0,0,0,0.12);
    transform: translateY(-6px);
} */

.intro2 .s-inner .list li:nth-child(4) { order: 6; }
.intro2 .s-inner .list li:nth-child(5) { order: 5; }
.intro2 .s-inner .list li:nth-child(6) { order: 4; }

.intro2 .s-inner .list li .icon { margin-bottom: 18px; }
.intro2 .s-inner .list li .icon img { width: 89px; height: 78px; object-fit: contain; }

.intro2 .s-inner .list li .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--color2);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    border-radius: 50%;
    margin: 0 auto 14px;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}

.intro2 .s-inner .list li .txt_box { width: 100%; display: flex; flex-direction: column; align-items: center; }
.intro2 .s-inner .list li .txt h3 { font-size: 24px; font-weight: 700; color: #111; margin-bottom: 10px; font-family: 'SUIT',sans-serif;}
.intro2 .s-inner .list li .txt p { font-size: 17px; color: #666; line-height: 1.75em; word-break: keep-all; }

.intro2 .s-inner .list li::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    z-index: 2;
}

.intro2 .s-inner .list li:nth-child(1)::after,
.intro2 .s-inner .list li:nth-child(2)::after {
    right: -43px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 16px solid #666;
    opacity: 0.45;
}

.intro2 .s-inner .list li:nth-child(3)::after {
    bottom: -38px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 16px solid #666;
    opacity: 0.45;
}

.intro2 .s-inner .list li:nth-child(4)::after,
.intro2 .s-inner .list li:nth-child(5)::after {
    left: -43px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-right: 16px solid #666;
    opacity: 0.45;
}

.intro2 .s-inner .list li:nth-child(6)::after { display: none; }

@media all and (max-width: 1280px) {
    /* 2컬럼 snake: [01][02] / [04][03] / [05][06] */
    .intro2 .s-inner .list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 70px;
        row-gap: 60px;
    }
    /* 2컬럼 순서: 3→4번째 swap, 5·6은 그대로 */
    .intro2 .s-inner .list li:nth-child(3) { order: 4; }
    .intro2 .s-inner .list li:nth-child(4) { order: 3; }
    .intro2 .s-inner .list li:nth-child(5) { order: 5; }
    .intro2 .s-inner .list li:nth-child(6) { order: 6; }

    /* 01→02: 오른쪽 화살표 */
    .intro2 .s-inner .list li:nth-child(1)::after {
        right: -43px; left: auto;
        top: 50%; bottom: auto;
        transform: translateY(-50%);
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-left: 16px solid #666;
        border-right: 0;
        opacity: 0.45;
    }
    /* 02→03: 아래 화살표 (03은 row2 오른쪽) */
    .intro2 .s-inner .list li:nth-child(2)::after {
        right: auto; left: 50%;
        top: auto; bottom: -38px;
        transform: translateX(-50%);
        border-top: 16px solid #666;
        border-bottom: 0;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        opacity: 0.45;
    }
    /* 03→04: 왼쪽 화살표 (03 오른쪽→04 왼쪽) */
    .intro2 .s-inner .list li:nth-child(3)::after {
        left: -43px; right: auto;
        top: 50%; bottom: auto;
        transform: translateY(-50%);
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-right: 16px solid #666;
        border-left: 0;
        opacity: 0.45;
    }
    /* 04→05: 아래 화살표 (04는 row2 왼쪽) */
    .intro2 .s-inner .list li:nth-child(4)::after {
        right: auto; left: 50%;
        top: auto; bottom: -38px;
        transform: translateX(-50%);
        border-top: 16px solid #666;
        border-bottom: 0;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        opacity: 0.45;
    }
    /* 05→06: 오른쪽 화살표 */
    .intro2 .s-inner .list li:nth-child(5)::after {
        right: -43px; left: auto;
        top: 50%; bottom: auto;
        transform: translateY(-50%);
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-left: 16px solid #666;
        border-right: 0;
        opacity: 0.45;
    }
    .intro2 .s-inner .list li:nth-child(6)::after { display: none; }
}

@media all and (max-width: 768px) {
    .intro2 .s-inner .list {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 50px;
    }
    .intro2 .s-inner .list li:nth-child(3),
    .intro2 .s-inner .list li:nth-child(4),
    .intro2 .s-inner .list li:nth-child(5),
    .intro2 .s-inner .list li:nth-child(6) { order: unset; }

    .intro2 .s-inner .list li:nth-child(1)::after,
    .intro2 .s-inner .list li:nth-child(2)::after,
    .intro2 .s-inner .list li:nth-child(3)::after,
    .intro2 .s-inner .list li:nth-child(4)::after,
    .intro2 .s-inner .list li:nth-child(5)::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -32px;
        transform: translateX(-50%);
        border-top: 16px solid #666;
        border-bottom: 0;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        opacity: 0.45;
    }
    .intro2 .s-inner .list li:nth-child(6)::after { display: none; }
    .intro2 .s-inner .list li .icon img{height: 70px; object-fit: contain;}
    .intro2 .s-inner .list li .num{width: 39px; height: 39px; font-size: 15px;}
    .intro2 .s-inner .list li .txt h3{font-size: 22px;}
    .intro2 .s-inner .list li .txt p{font-size: 16px;}
}


/* intro3 */
.intro3 .s-inner { display: flex; flex-direction: column; gap: 60px; }

.i3-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 40px 50px;
}
.i3-notice__txt .main { font-size: 20px; color: #111; font-weight: 500; line-height: 1.6em; word-break: keep-all; }
.i3-notice__txt .main strong { color: var(--color1); font-weight: 700; }
.i3-notice__txt .sub { font-size: 16px; color: #888; margin-top: 10px; }
.i3-notice__fax { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.i3-notice__fax .label { font-size: 16px; color: #888;white-space: nowrap; }
.i3-notice__fax .num { font-size: 32px; font-weight: 800; color: #000; letter-spacing: -1px; white-space: nowrap; font-family: 'SUIT', sans-serif;}

.intro3 .s_txt { margin-bottom: 25px; }

.i3-download { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.i3-download--4col { grid-template-columns: repeat(4, 1fr); }
.i3-download__badge.file { background: #f0f4ff; color: var(--color1); }
.i3-download__badge.file svg { width: 36px; height: 36px; }
.i3-download__info em { font-style: normal; }
.i3-download li {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.i3-download__badge {
    width: 64px; height: 64px; border-radius: 16px;
    font-size: 15px; font-weight: 800; color: #fff;
    display: flex; align-items: center; justify-content: center; letter-spacing: 0.5px;
}
.i3-download__badge.hwp { background: linear-gradient(135deg, #1e6be6, #0d4fc2); }
.i3-download__badge.pdf { background: linear-gradient(135deg, #e63946, #c1121f); }
.i3-download__badge.doc { background: linear-gradient(135deg, #2b9348, #1a6b30); }
.i3-download__info { display: flex; flex-direction: column; gap: 5px; }
.i3-download__info strong { font-size: 18px; font-weight: 700; color: #111; }
.i3-download__info span { font-size: 14px; color: #999; }
.i3-download__btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: #212121; color: #fff;
    font-size: 14px; font-weight: 600;
    padding: 10px 22px; border-radius: 30px;
    text-decoration: none; transition: opacity 0.2s;
    margin-top: auto;
}
.i3-download__btn:hover { opacity: 0.85; }

@media all and (max-width: 1024px) {
    .i3-notice { flex-direction: column; align-items: flex-start; padding: 34px 36px;  gap:25px;}
    .i3-notice__fax { align-items: flex-start; }
    .i3-notice__fax .num { font-size: 32px; }
    .i3-download--4col { grid-template-columns: repeat(2, 1fr); }
    .i3-download { gap: 20px; }
    .i3-download li{padding: 30px 25px; border-radius: 15px;}
}
@media all and (max-width: 768px) {
    .intro3 .s-inner { gap: 44px; }
    .intro3 .s_txt { margin-bottom: 20px; }
    .i3-notice { padding: 28px 24px; }
    .i3-notice__txt .main { font-size: 17px; }
    .i3-notice__txt .sub{font-size: 15px;}
    .i3-notice__fax .num { font-size: 28px; }
    .i3-download--4col { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .i3-download { grid-template-columns: 1fr; }
    .i3-download li{padding: 25px 20px; border-radius: 10px; gap:15px;}
}
@media  all and (max-width:500px) {
    .i3-notice__fax .num{font-size: 26px;}
}


/* intro1 */
.intro1 .s-inner .list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 50px;
    margin-top: 60px;
    position: relative;
}

.intro1 .s-inner .list li {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 45px 28px 40px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.intro1 .s-inner .list li .icon { margin-bottom: 18px; color: var(--color1); }
.intro1 .s-inner .list li .icon svg { width: 80px; height: 80px; }

.intro1 .s-inner .list li .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--color2);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    border-radius: 50%;
    margin: 0 auto 14px;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}

.intro1 .s-inner .list li .txt_box { width: 100%; display: flex; flex-direction: column; align-items: center; }
.intro1 .s-inner .list li .txt h3 { font-size: 24px; font-weight: 700; color: #111; margin-bottom: 10px; font-family: 'SUIT',sans-serif; }
.intro1 .s-inner .list li .txt p { font-size: 17px; color: #666; line-height: 1.75em; word-break: keep-all; }

.intro1 .s-inner .list li::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    z-index: 2;
}

.intro1 .s-inner .list li:nth-child(1)::after,
.intro1 .s-inner .list li:nth-child(2)::after,
.intro1 .s-inner .list li:nth-child(3)::after {
    right: -33px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 16px solid #666;
    opacity: 0.45;
}

.intro1 .s-inner .list li:nth-child(4)::after { display: none; }

.i1-btns {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 60px;
}

.i1-btns__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 44px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s;
    font-family: 'SUIT', sans-serif;
    letter-spacing: -0.3px;
}

.i1-btns__btn--primary { background: var(--color2); color: #fff; }
.i1-btns__btn--secondary { background: #fff; color: var(--color2); border: 2px solid var(--color2); }
.i1-btns__btn:hover { opacity: 0.85; }

@media all and (max-width: 1280px) {
    .intro1 .s-inner .list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 50px;
        row-gap: 50px;
    }
    /* 2컬럼 snake: [01][02] / [04][03] */
    .intro1 .s-inner .list li:nth-child(3) { order: 4; }
    .intro1 .s-inner .list li:nth-child(4) { order: 3; }

    .intro1 .s-inner .list li:nth-child(1)::after {
        right: -33px; left: auto;
        top: 50%; bottom: auto;
        transform: translateY(-50%);
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-left: 16px solid #666;
        border-right: 0;
        opacity: 0.45;
    }
    .intro1 .s-inner .list li:nth-child(2)::after {
        right: auto; left: 50%;
        top: auto; bottom: -32px;
        transform: translateX(-50%);
        border-top: 16px solid #666;
        border-bottom: 0;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        opacity: 0.45;
    }
    .intro1 .s-inner .list li:nth-child(3)::after {
        left: -33px; right: auto;
        top: 50%; bottom: auto;
        transform: translateY(-50%);
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-right: 16px solid #666;
        border-left: 0;
        opacity: 0.45;
    }
    .intro1 .s-inner .list li:nth-child(4)::after { display: none; }
}

@media all and (max-width: 768px) {
    .intro1 .s-inner .list {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 50px;
    }
    .intro1 .s-inner .list li:nth-child(3),
    .intro1 .s-inner .list li:nth-child(4) { order: unset; }

    .intro1 .s-inner .list li:nth-child(1)::after,
    .intro1 .s-inner .list li:nth-child(2)::after,
    .intro1 .s-inner .list li:nth-child(3)::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -32px;
        transform: translateX(-50%);
        border-top: 16px solid #666;
        border-bottom: 0;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        opacity: 0.45;
    }
    .intro1 .s-inner .list li:nth-child(4)::after { display: none; }
    .intro1 .s-inner .list li .icon svg { width: 64px; height: 64px; }
    .intro1 .s-inner .list li .num { width: 39px; height: 39px; font-size: 15px; }
    .intro1 .s-inner .list li .txt h3 { font-size: 22px; }
    .intro1 .s-inner .list li .txt p { font-size: 16px; }

    .i1-btns { flex-direction: column; align-items: center; gap: 12px;  margin-top: 40px;}
    .i1-btns__btn { width: 100%; max-width: 320px; font-size: 17px; padding: 15px 30px; }
}


/* product */
.product{}
.product .pd_top{border-radius: 20px; overflow: hidden; position: relative;}
.product.product1-1 .pd_top{background: linear-gradient(to bottom, #1c7cd7, #1c96fe);}
.product.product1-2 .pd_top{background: linear-gradient(to bottom, #1c99d9, #1cb7fe);}
.product.product1-3 .pd_top{background: linear-gradient(to bottom, #1782b4, #179ed3);}
.product.product1-4 .pd_top{background: linear-gradient(to bottom, #1c7cd7, #1c96fe);}
.product.product1-5 .pd_top{background: linear-gradient(to bottom, #1c99d9, #1cb7fe);}
.product .pd_top .txt{padding: 80px 120px; color:#fff; position: relative; z-index: 3;}
.product .pd_top .txt h3{font-family: 'SUIT', sans-serif; font-size: 36px; font-weight: 800; margin-bottom: 20px;}
.product .pd_top .txt h4{font-family: 'SUIT', sans-serif; font-size: 24px; font-weight: 600; margin-bottom: 20px; width: 80%; margin-left: auto; margin-right: auto; word-break: keep-all;}
.product .pd_top .txt h4 span{color:#b0f52d; font-weight: 800;}
.product .pd_top .txt p{font-size: 18px; font-weight: 500; word-break: keep-all; line-height: 1.6em;}
.product .pd_top .txt p span{font-weight: 600; word-break: keep-all;}
.product .btn_box{margin-top: 35px; display: inline-flex; gap:10px;}
.product .btn_box a.btn{color:#fff; font-size: 15px; font-weight: 600; font-family: 'SUIT', sans-serif; line-height: 52px; padding: 0 35px; border-radius: 5px;}
.product .btn_box a.btn.btn1{background: var(--color2);}
.product .btn_box a.btn.btn2{border: 1px solid #fff;}
.product .pd_top .img{position: absolute; right: 0; bottom: 0;}
.product .pd_top .img img{}

@media all and (max-width:1400px){
    .product .pd_top .txt{padding: 70px 100px;}
    .product .pd_top .txt h3{font-size: 32px; margin-bottom: 17px;}
    .product .pd_top .txt p{font-size: 17px;}
    .product .btn_box{margin-top: 30px;}
    .product .btn_box a.btn{line-height: 48px; padding: 0 30px;}
    .product .pd_top .img img{max-width: 50vw;}
}
@media  all and (max-width:1024px) {
    .product .pd_top .txt{padding: 60px 80px;}
    .product .pd_top .txt h3{font-size: 28px; margin-bottom: 15px;}
}
@media  all and (max-width:768px) {
    .product .pd_top .txt{padding: 50px 60px;}
    .product .pd_top .txt h3{font-size: 26px;}
    .product .pd_top .txt p{font-size: 16px;}
    .product .pd_top .img{position: static; text-align: right;}
    .product .pd_top .img img{max-width: 65vw; margin-left: auto;}
    .product .btn_box{margin-top: 25px;}
    .product .btn_box a.btn{line-height: 44px; padding: 0 25px;}
}
@media  all and (max-width:500px) {
    .product .pd_top .txt{padding: 40px 40px 50px;}
    .product .pd_top .txt h3{font-size: 24px; margin-bottom: 12px;}
    .product .pd_top .img img{max-width: 75vw; margin-left: auto;}
}

.product .pd_sec{margin: 100px 0;}
.product .pd_bg{padding: 100px 0; margin: 100px 0; background-color: #f3f7fc;}
.product .pd_bg + .pd_bg{margin-top: 0;}
.product .pd_bg.bg2{background-color: #e8edf3;}

@media  all and (max-width:1400px) {
    .product .pd_sec{margin: 80px 0;}
    .product .pd_bg{margin:  80px 0; padding: 80px 0;}
}
@media  all and (max-width:1024px) {
    .product .pd_sec{margin: 70px 0;}
    .product .pd_bg{margin:  70px 0; padding: 70px 0;}
}
@media  all and (max-width:768px) {
    .product .pd_sec{margin: 65px 0;}
    .product .pd_bg{margin:  65px 0; padding: 65px 0;}
}
@media  all and (max-width:500px) {
    .product .pd_sec{margin: 60px 0;}
    .product .pd_bg{margin:  60px 0; padding: 60px 0;}
}

.product .pd_sec .images .pc{}
.product .pd_sec .images .mo{display: none;}

@media  all and (max-width:768px) {
    .product .pd_sec .images .pc{display: none;}
    .product .pd_sec .images .mo{display: block;}
}

.product .pd_reco{display: grid; grid-template-columns: repeat(2, 1fr); gap:20px;}
.product .pd_reco li{border: 1px solid #ddd; border-radius: 60px; padding: 20px 30px; font-size: 18px; font-weight: 500; color:#000000; word-break: keep-all;}
.product .pd_reco li::before{content: '·'; color:var(--color1); margin-right: 20px; position: relative;}

@media all and (max-width:1400px) {
    .product .pd_reco li{font-size: 17px; padding: 17px 28px;}
    .product .pd_reco li::before{margin-right: 15px;}
}
@media all and (max-width:1024px) {
    
}
@media all and (max-width:768px) {
    .product .pd_reco{grid-template-columns: repeat(1, 1fr); gap: 15px;}
    .product .pd_reco li{font-size: 16px; padding: 15px 25px; padding-left: 40px;}
    .product .pd_reco li::before{margin-right: 11px; position: absolute; left: 25px;}
}
@media all and (max-width:500px) {
    
}

.product .cha{display: flex; gap:20px;}
.product .cha li{background-color: #fff; border-radius: 20px; width: 100%; padding: 50px 40px 110px; position: relative;}
.product .cha.bg li{background-color: #f7f9fc;}
.product .cha li .top{}
.product .cha li .top h3{font-size: 24px; color:var(--color2); margin-bottom: 15px; font-family: 'SUIT', sans-serif; word-break: keep-all;}
.product .cha li .top p{font-size: 16px; font-weight: 500; color:#666666; line-height: 1.5em; word-break: keep-all;}
.product .cha li .bottom{}
.product .cha li .bottom .icon{position: absolute; right: 40px; bottom: 40px;}
.product .cha li .bottom .icon img{}

@media  all and (max-width:1400px) {
    .product .cha{flex-wrap: wrap;}
    .product .cha li{width: calc(100% / 3 - 20px / 3 *2); flex:auto; padding: 40px 35px 110px;}
    .product .cha li .top h3{font-size: 22px;}
    .product .cha li .bottom .icon img{max-width: 55px;}
}
@media  all and (max-width:1024px) {
    
}
@media  all and (max-width:768px) {
    .product .cha li{width: calc(100% / 2 - 20px / 2 * 1); flex:auto; padding: 35px 30px 110px;}
    .product .cha li .top h3{font-size: 20px;}
    .product .cha li .bottom .icon img{max-width: 52px;}
}
@media  all and (max-width:500px) {
    .product .cha li{width: 100%; padding-bottom: 110px;}
}

.product .system{display: flex; gap:30px; flex-wrap: wrap;}
.product .system li{background-color: #fff; border-radius: 20px; width: calc(100% / 2 - 30px / 2); flex:auto; padding: 40px; display: flex; flex-direction: column; justify-content: space-between;}
.product .system li .top{display: flex; align-items: center; gap:10px; margin-bottom: 20px;}
.product .system li .top .icon{width: 64px; aspect-ratio: 1 / 1; background-color: #f5f5f3; border-radius: 10px; display: flex; justify-content: center; align-items: center;}
.product .system li .top .icon i{color:var(--color2); font-size: 32px; display: flex; align-items: center;}
.product .system li .top h3{font-size: 24px; color:#000;}
.product .system li dl{}
.product .system li dl.w3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px 30px;}
.product .system li dl dd{position: relative; padding-left: 20px; font-size: 17px; color:#666;}
.product .system li dl.w3 dd + dd{margin-top: 0;}
.product .system li dl dd + dd{margin-top: 5px;}
.product .system li dl dd::before{content: '·'; position: absolute; left: 0; color:var(--color1);}
.product .system li p{margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; color:var(--color2);}

@media all and (max-width:1400px) {
    .product .system{gap:25px;}
    .product .system li{padding: 35px;}
    .product .system li .top .icon{width: 58px;}
    .product .system li .top .icon i{font-size: 30px;}
    .product .system li .top h3{font-size: 22px;}
    .product .system li dl.w3{gap:5px 25px;}
    .product .system li dl dd{font-size: 16px; word-break: keep-all;}
    .product .system li p{margin-top: 18px; padding-top: 18px;}
}
@media all and (max-width:1024px) {
    .product .system{gap:20px;}
    .product .system li dl.w3{grid-template-columns: repeat(2, 1fr);}
    .product .system li .top .icon{width: 53px;}
    .product .system li .top .icon i{font-size: 28px;}
    .product .system li .top h3{font-size: 20px;}
}
@media all and (max-width:768px) {
    .product .system li{width: 100%;}
    .product .system li dl{grid-template-columns: repeat(2, 1fr); display: grid; gap:5px 20px}
    .product .system li dl dd + dd{margin-top: 0px;}
    .product .system li p{margin-top: 15px; padding-top: 15px; font-size: 15px;}
}
@media all and (max-width:500px) {
    .product .system li{padding: 30px;}
    .product .system li .top .icon{width: 50px;}
    .product .system li .top .icon i{font-size: 25px;}
    .product .system li .top h3{font-size: 19px;}
    .product .system li dl{grid-template-columns: repeat(1, 1fr); display: grid; gap:5px 20px}
}

.product .pd_price{background-color:#1d69c3; border-radius: 20px; overflow: hidden; padding: 60px 120px 70px; display: flex; justify-content: space-between; align-items: flex-end;}
.product .pd_price .l_cont{}
.product .pd_price .l_cont .s_txt{}
.product .pd_price .l_cont .s_txt h3{color:#fff;}
.product .pd_price .l_cont .s_txt p{color:#eee; word-break: keep-all;}
.product .pd_price .l_cont .dl_box{}
.product .pd_price .l_cont .dl_box dl{display: flex; color:#fff;}
.product .pd_price .l_cont .dl_box dl + dl{margin-top: 10px;}
.product .pd_price .l_cont .dl_box dl dt{width: 120px; font-weight: 300; opacity: 0.6;}
.product .pd_price .l_cont .dl_box dl dd{font-weight: 600;}
.product .pd_price .r_cont{display: flex; flex-direction: column; align-items: flex-end;}
.product .pd_price .r_cont .btn_box{margin-bottom: 20px;}
.product .pd_price .r_cont .btn_box a.btn{font-size: 17px;}
.product .pd_price .r_cont .btn_box a.btn.btn1{background-color:var(--color1);}
.product .pd_price .r_cont .btn_box a.btn.btn2{}
.product .pd_price .r_cont p{font-weight: 300; color:#fff; opacity: 0.6; text-align: right; word-break: keep-all;}

@media  all and (max-width:1400px) {
    .product .pd_price{padding: 70px 80px; gap:40px;}
    .product .pd_price .r_cont .btn_box{margin-bottom: 15px;}
}
@media  all and (max-width:1024px) {
    .product .pd_price{padding: 50px 60px;}
    .product .pd_price .l_cont .dl_box dl dt{width: 100px;}
    .product .pd_price .r_cont .btn_box a.btn{font-size: 16px;}
}
@media  all and (max-width:768px) {
    .product .pd_price{padding: 40px 50px; flex-direction: column; align-items: center; gap:30px;}
    .product .pd_price .l_cont .s_txt{margin-bottom: 20px; text-align: center;}
    .product .pd_price .r_cont{align-items: center;}
    .product .pd_price .r_cont p{text-align: center; font-size: 15px;}
    .product .pd_price .l_cont .dl_box dl dt{text-align: center;}
    .product .pd_price .r_cont .btn_box{margin-top: 0;}
    .product .pd_price .r_cont .btn_box a.btn{font-size: 15px;}
}
@media  all and (max-width:500px) {
    .product .pd_price{padding: 40px 40px;}
}

/* .product .pd_partner{display: grid; grid-template-columns: repeat(5, 1fr); gap:20px; margin-top: 50px;}
.product .pd_partner li{}
.product .pd_partner li .img{aspect-ratio: 16/10; padding: 30px; border: 1px solid #eee; border-radius: 10px; background-color: #fafafa; transition: .4s; display: flex; justify-content: center; align-items: center;}
.product .pd_partner li .img img{width: 100%; max-width: 176px; height: 100%; object-fit: contain; mix-blend-mode: multiply;}
.product .pd_partner li p{text-align: center; font-size: 18px; font-weight: 500; color:#000000; margin-top: 15px;}

@media all and (max-width:1400px) {
    .product .pd_partner{grid-template-columns: repeat(3, 1fr); gap:30px 15px; margin-top: 40px;}
    .product .pd_partner li p{font-size: 17px; margin-top: 13px;}
}
@media all and (max-width:768px) {
    .product .pd_partner{grid-template-columns: repeat(2, 1fr); margin-top: 35px;}
    .product .pd_partner li .img{padding: 25px;}
    .product .pd_partner li p{font-size: 16px; margin-top: 10px;}
} */


.product .good {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 50px;}
.product .good li {background: #fff; padding: 30px 40px; border-radius: 20px; border: 1px solid #f0f0f0; box-shadow: 0 10px 30px rgba(0,0,0,0.03); font-size: 18px; font-weight: 500; color: #333; line-height: 1.6; position: relative; padding-left: 80px; display: flex; align-items: center; word-break: keep-all;}

.product .good li::before {content: ''; position: absolute; left: 30px; width: 34px; height: 34px; background: var(--color1); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 20px;}

/* product tab menu */
.product .tab_cont { margin-top: 60px; }
.product .tab {display: flex; justify-content: center; gap: 0; margin-bottom: 50px; border: 1px solid #e5e5e5; border-radius: 40px; width: fit-content; margin-inline: auto; overflow: hidden;}
.product .tab li {background-color: #fff; border-right: 1px solid #e5e5e5; padding: 14px 35px; font-size: 18px; font-weight: 600; color: #666; cursor: pointer; transition: all 0.3s; user-select: none;}
.product .tab li:last-child {border-right: 0;}
.product .tab li.on {background-color: var(--color2); border-color: var(--color2); color: #fff;}
.product .tab li:hover:not(.on) {background-color: #f9f9f9;}
.product .tabcontent { display: none; }
.product .tabcontent.on { display: block; animation: fadeInUp 0.6s ease both; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.product .tabcontent h4 {font-size: 26px; color: #111; line-height: 1.5; margin-bottom: 40px; font-weight: 700; word-break: keep-all; text-align: center; font-family: 'SUIT', sans-serif;}
.product .tabcontent .list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 50px; background: #fff; padding: 50px; border-radius: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.04);}
.product .tabcontent .list li {font-size: 18px; color: #555; position: relative; padding-left: 25px; line-height: 1.7; font-weight: 500;}
.product .tabcontent .list li::before {content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color1);}

@media all and (max-width: 1400px) {
    .product .tabcontent .list { padding: 40px; gap: 20px 30px; }
    .product .good{margin-top: 40px;}
}
@media all and (max-width: 1024px) {
    .product .good { grid-template-columns: 1fr; }
    .product .tabcontent .list { grid-template-columns: 1fr; padding: 35px; }
    .product .tabcontent h4 { font-size: 22px;  margin-bottom: 30px;}
    .product .tab li { padding: 12px 20px; font-size: 16px; }
}
@media all and (max-width: 768px) {
    .product .tab {display: grid; grid-template-columns: repeat(4,1fr); border-radius: 0px; gap:5px; border: 0px; margin: 0; margin-bottom: 30px; width: 100%;}
    .product .tab::-webkit-scrollbar {display: none;}
    .product .tab li { white-space: nowrap; padding: 10px 25px; font-size: 15px; border: 1px solid #e5e5e5 !important; text-align: center;}
    .product .tabcontent h4 { font-size: 20px; text-align: left; margin-bottom: 25px; }
    .product .tabcontent .list { padding: 25px; border-radius: 20px; gap:15px;}
    .product .tabcontent .list li { font-size: 16px; padding-left: 20px;}
    .product .tabcontent .list li::before{width: 4px; height: 4px;}
    .product .good{margin-top: 30px;}
    .product .good li { padding: 20px 30px 20px 55px; font-size: 16px; }
    .product .good li::before { left: 20px; width: 22px; height: 22px; background-size: 14px; }
}
@media  all and (max-width:500px) {
     .product .tab{grid-template-columns: repeat(3, 1fr);}
     .product .tabcontent h4{font-size: 18px;}
}

/* product1-3 tag box */
.product .tag_box {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 50px;}
.product .tag_box li {background: #fff; border-radius: 20px; padding: 40px; border: 1px solid #f0f0f0; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 15px rgba(0,0,0,0.02);}

.product .tag_box li .top h3 {font-size: 24px; color: #000; margin-bottom: 12px; font-family: 'SUIT', sans-serif;}
.product .tag_box li .top p {font-size: 17px; color: #666; word-break: keep-all; line-height: 1.5;}
.product .tag_box li .bottom {margin-top: 30px; display: flex; justify-content: space-between; align-items: flex-end;}
.product .tag_box li .bottom .tag {display: flex; gap: 8px; flex-wrap: wrap;}
.product .tag_box li .bottom .tag li {background: #f3f7fc; color: var(--color2); padding: 4px 12px; border-radius: 5px; font-size: 14px; border: 0 !important; box-shadow: none !important; padding-left: 12px !important; margin-top: 0 !important;}
.product .tag_box li .bottom .tag li::before {display: none;}
.product .tag_box li .bottom .btn a {background: var(--color2); color: #fff; padding: 10px 24px; border-radius: 5px; font-size: 15px; font-weight: 600; display: inline-block; transition: background 0.3s;}
.product .tag_box li .bottom .btn a:hover {background: #0b679c;}

/* product1-3 modal */
.product .modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1001; justify-content: center; align-items: center; padding: 20px;}
.product .modal.on {display: flex;}
.product .modal li {display: none; background: #fff; width: 100%; max-width: 540px; padding: 50px; border-radius: 25px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.2);}
.product .modal li.on {display: block; animation: fadeInUp 0.4s ease both;}
.product .modal li .top {display: flex; align-items: center; gap: 18px; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 20px;}
.product .modal li .top .icon {width: 60px; height: 60px; background: var(--color2); border-radius: 15px; display: flex; justify-content: center; align-items: center;}
.product .modal li .top .icon i {color: #fff; font-size: 32px; display: flex; align-items: center;}
.product .modal li .top h3 {font-size: 26px; color: #000; font-family: 'SUIT', sans-serif;}
.product .modal li .bottom p {font-size: 18px; color: #555; line-height: 1.7; word-break: keep-all;}
.product .modal li .close {position: absolute; top: 25px; right: 25px; cursor: pointer; width: 30px; height: 30px; opacity: 0.5; transition: opacity 0.2s;}
.product .modal li .close:hover {opacity: 1;}
.product .modal li .close::before, .product .modal li .close::after {content: ''; position: absolute; left: 14px; top: 0; width: 2px; height: 30px; background-color: #333;}
.product .modal li .close::before {transform: rotate(45deg);}
.product .modal li .close::after {transform: rotate(-45deg);}

@media all and (max-width: 1024px) {
    .product .tag_box {grid-template-columns: 1fr;}
    .product .modal li {padding: 40px 30px;}
}
@media all and (max-width: 768px) {
    .product .tag_box li {padding: 30px;}
    .product .tag_box li .top h3 {font-size: 21px;}
    .product .tag_box li .bottom {flex-direction: column; align-items: flex-start; gap: 20px;}
    .product .tag_box li .bottom .btn a {width: 100%; text-align: center;}
    .product .modal li .top h3 {font-size: 22px;}
    .product .modal li .bottom p {font-size: 17px;}
}

/* product1-4 why section */
.product .why {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px;}
.product .why li {background: #fff; border: 1px solid #f0f0f0; padding: 40px; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.02);}

.product .why li .top {margin-bottom: 25px;}
.product .why li .top .icon {width: 60px; height: 60px; background: #f3f7fc; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;}
.product .why li .top .icon i {font-size: 32px; color: var(--color2); display: flex; align-items: center;}
.product .why li .top h3 {font-size: 22px; color: #000; font-family: 'SUIT', sans-serif; font-weight: 700;}
.product .why li .bot p {font-size: 17px; color: #666; line-height: 1.8em; word-break: keep-all;}

@media all and (max-width: 1024px) {
    .product .why {grid-template-columns: 1fr; margin-top: 40px; gap:25px;}
    .product .why li{padding: 32px;}
    .product .why li .top{margin-bottom: 20px;}
    .product .why li .top .icon{width: 56px; height: 56px; margin-bottom: 17px;}
    .product .why li .top h3{font-size: 20px;}
    .product .why li .bot p{font-size: 16px;}
}
@media  all and (max-width:768px) {
    .product .why{margin-top: 30px;}
    .product .why li{padding: 30px 27px;}
    .product .why li .top{margin-bottom: 15px;}
    .product .why li .top .icon{width: 52px; height: 52px; margin-bottom: 15px;}
    .product .why li .top h3{font-size: 19px;}
}


/* product1-4 infra section */
.product .infra {display: flex; align-items: center; gap: 80px; margin-top: 50px;}
.product .infra .l_cont {flex: 1;}
.product .infra .l_cont img {width: 100%; border-radius: 30px; box-shadow: 20px 20px 60px rgba(0,0,0,0.1);}
.product .infra .r_cont {flex: 1.2;}
.product .infra .r_cont .list {display: grid; gap: 30px;}
.product .infra .r_cont .list li {position: relative; padding-left: 35px;}
.product .infra .r_cont .list li::before {content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; background: var(--color2); border-radius: 50%;}
.product .infra .r_cont .list li h3 {font-size: 20px; color: #000; margin-bottom: 8px; font-family: 'SUIT', sans-serif; font-weight: 700;}
.product .infra .r_cont .list li p {font-size: 17px; color: #666; line-height: 1.5; word-break: keep-all;}

@media all and (max-width: 1024px) {
    .product .infra {flex-direction: column; gap: 50px;}
    .product .infra .l_cont, .product .infra .r_cont {width: 100%;}
    .product .infra .r_cont .list{gap:25px;}
    .product .infra .r_cont .list li h3{font-size: 19px;}
    .product .infra .r_cont .list li p{font-size: 16px;}
}

/* product1-5 special redesign */
.product.product1-5 .step {display: flex; gap: 0; margin-top: 80px; background: #fff; border-radius: 20px;  border: 1px solid #eee; overflow: hidden;}
.product.product1-5 .step li {flex: 1; padding: 60px 40px; position: relative; border-right: 1px solid #eee; box-shadow: none; border-radius: 0;}
.product.product1-5 .step li:last-child {border-right: 0;}
.product.product1-5 .step li h4 {color: var(--color2); font-weight: 800; font-size: 15px; margin-bottom: 20px; display: block; text-align: center; font-family: 'SUIT', sans-serif;}
.product.product1-5 .step li h3 {font-size: 22px; text-align: center; margin-bottom: 20px; font-family: 'SUIT', sans-serif; color:#000;}
.product.product1-5 .step li p {text-align: center; font-size: 17px; color: #777; line-height: 1.6; word-break: keep-all;}

@media all and (max-width:1400px) {
    .product.product1-5 .step li h3{font-size: 20px;}
}
@media all and (max-width:768px) {
    .product.product1-5 .step li h4{margin-bottom: 15px;}
    .product.product1-5 .step li h3{font-size: 19px; margin-bottom: 15px;}
    .product.product1-5 .step li p{font-size: 16px;}
}

.product .diff {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 50px;}
.product .diff li {display: flex; align-items: center; gap: 40px; background: #fff; padding: 40px; border-radius: 20px; border: 1px solid #f0f0f0;}
.product .diff li .count {text-align: center; min-width: 120px;}
.product .diff li .count h3 {font-size: 36px; color: var(--color2); font-weight: 900; margin-bottom: 5px; font-family: 'SUIT', sans-serif;}
.product .diff li .count p {font-size: 14px; color: #999; font-weight: 600; white-space: nowrap;}
.product .diff li .txt h3 {font-size: 20px; color: #000; margin-bottom: 12px; font-family: 'SUIT', sans-serif; font-weight: 700;}
.product .diff li .txt p {font-size: 17px; color: #777; line-height: 1.6; word-break: keep-all;}

@media  all and (max-width:1400px) {
    .product .diff{margin-top: 40px;}
    .product .diff li{padding: 32px;}
    .product .diff li .count h3{font-size: 32px;}
}
@media  all and (max-width:768px) {
    .product .diff{margin-top: 30px;}
    .product .diff li{padding: 27px;}
    .product .diff li .count h3{font-size: 28px;}
    .product .diff li .txt h3{font-size: 19px;}
    .product .diff li .txt p{font-size: 16px;}
}

@media  all and (max-width:1400px) {
    .product.product1-5 .step{margin-top: 70px;}
}
@media all and (max-width: 1024px) {
    .product .why {grid-template-columns: 1fr;}
    .product .infra {flex-direction: column; gap: 50px;}
    .product .infra .l_cont, .product .infra .r_cont {width: 100%;}
    .product.product1-5 .step {flex-direction: column; margin-top: 65px;}
    .product.product1-5 .step li {border-right: 0; border-bottom: 1px solid #eee; padding: 40px 30px;}
    .product.product1-5 .step li:last-child {border-bottom: 0;}
    .product .diff {grid-template-columns: 1fr;}
}
@media all and (max-width: 768px) {
    .product.product1-5 .step{margin-top: 60px;}
    .product .diff li {flex-direction: column; text-align: center; gap: 20px;}
}
@media all and (max-width: 768px) {
    .product.product1-5 .step{margin-top: 50px;}
}

/* product2 (Premium Agency Layout) */
.product2 { }

/* 1. 비주얼 탑 영역 */
.product2 .pd2_visual { display: flex; align-items: center; justify-content: space-between; gap: 60px; background: #f3f7fc; border-radius: 20px; padding: 70px 80px; position: relative; overflow: hidden; margin-bottom: 80px; font-family: 'SUIT', sans-serif; }
.product2 .pd2_visual .s_txt { position: relative; z-index: 2; width: 50%; margin-bottom: 0;}
.product2 .pd2_visual .s_txt h3 { font-family: 'SUIT', sans-serif; display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; word-break: keep-all; font-weight: 800; font-size: 38px; color: #111; line-height: 1.35; }
.product2 .pd2_visual .s_txt h3::after{content: ''; display: none;}
.product2 .pd2_visual .s_txt h3 span { font-size: 18px; font-weight: 600; color: var(--color2); letter-spacing: 0; font-family: 'SUIT', sans-serif; }
.product2 .pd2_visual .s_txt p { font-size: 18px; color: #555; line-height: 1.7; word-break: keep-all; font-family: 'SUIT', sans-serif; }
.product2 .pd2_visual .img { position: relative; z-index: 2; width: 45%; max-width: 480px; overflow: hidden; }
.product2 .pd2_visual .img img { max-width: 100%; display: block; margin-left:   auto; margin-right: auto;}

/* 2. QnA 스타일 특징 영역 */
.product2 .pd2_qna { border-top: 2px solid #222; margin-bottom: 80px; font-family: 'SUIT', sans-serif; }
.product2 .pd2_qna article { display: flex; padding: 45px 30px; border-bottom: 1px solid #e5e5e5; transition: background-color 0.2s; }
.product2 .pd2_qna article:hover { background-color: #f9fbfc; }
.product2 .pd2_qna article .q_mark { width: 60px; font-size: 28px; font-weight: 800; color: var(--color1); font-family: 'SUIT', sans-serif; }
.product2 .pd2_qna article h4 { width: 30%; flex-shrink: 0; font-size: 24px; color: #222; font-weight: 700; font-family: 'SUIT', sans-serif; line-height: 1.4; word-break: keep-all; padding-right: 50px; }
.product2 .pd2_qna article h4 span.sub { display: block; font-size: 16px; font-weight: 500; font-family: 'SUIT', sans-serif; margin-top: 5px; color: #666; }
.product2 .pd2_qna article > p { flex: 1; font-size: 17px; color: #555; line-height: 1.8; word-break: keep-all; font-weight: 400; font-family: 'SUIT', sans-serif; }
.product2 .pd2_qna article > p.fw500 { font-weight: 500; color: #111; }
.product2 .pd2_qna article span.refer { font-size: 15px; color: #888; display: inline-block; margin-top: 5px; font-family: 'SUIT', sans-serif; }

/* 세부 목록 스타일 (.a_list) */
.product2 .pd2_qna article .a_list { flex: 1; font-family: 'SUIT', sans-serif; }
.product2 .pd2_qna article .a_list .title { font-weight: 700; color: #111; margin-bottom: 10px; font-size: 18px; font-family: 'SUIT', sans-serif; }
.product2 .pd2_qna article .a_list ul li { font-size: 17px; color: #555; line-height: 1.8; margin-bottom: 5px; font-family: 'SUIT', sans-serif; word-break: keep-all; }

/* 수직형 QnA 스타일 (질문이 긴 경우) */
.product2 .pd2_qna.vertical_q article { flex-direction: column; gap: 25px; padding: 60px 40px; }
.product2 .pd2_qna.vertical_q article .q_header { display: flex; align-items: flex-start; gap: 20px; width: 100%; border-bottom: 1px dashed #e5e5e5; padding-bottom: 25px; }
.product2 .pd2_qna.vertical_q article .q_header h4 { flex: 1; font-size: 26px; padding: 0; line-height: 1.4; color: #000; font-weight: 700; }
.product2 .pd2_qna.vertical_q article > p { padding-left: 80px; font-size: 17.5px; }

/* 기술 서비스 카드 그룹 (.pd2_tech_services) */
.product2 .pd2_tech_services { padding-top: 80px; border-top: 2px solid #222; text-align: center; font-family: 'SUIT', sans-serif; }
.product2 .pd2_tech_services > h4 { font-size: 32px; font-weight: 800; color: #111; margin-bottom: 50px; line-height: 1.4; word-break: keep-all; font-family: 'SUIT', sans-serif; }
.product2 .pd2_tech_services > h4 span { color: var(--color1);  word-break: keep-all;}
.product2 .pd2_tech_services .s_grid { display: flex; gap: 40px; text-align: left; }
.product2 .pd2_tech_services .s_grid .card { flex: 1; background: #fff; padding: 50px; border-radius: 30px;  border: 1px solid #f2f2f2; transition: transform 0.3s; }
/* .product2 .pd2_tech_services .s_grid .card:hover { transform: translateY(-10px); } */
.product2 .pd2_tech_services .s_grid .card .title { font-size: 22px; font-weight: 800; color: var(--color2); margin-bottom: 20px; display: block; font-family: 'SUIT', sans-serif; }

.product2 .pd2_tech_services .s_grid .card p{word-break: keep-all; line-height: 1.7em; font-size: 18px;}

/* 3. 브랜드 철학 배너 (.pd2_philosophy) */
.product2 .pd2_philosophy { 
    background: linear-gradient(135deg, #123871, #08214a);
    border-radius: 20px; 
    padding: 65px 50px; 
    text-align: center; 
    color: #fff; 
    margin-top: 80px; 
    margin-bottom: 30px;
    box-shadow: 0 12px 40px rgba(8, 33, 74, 0.18);
    font-family: 'SUIT', sans-serif;
}
.product2 .pd2_philosophy h4 { 
    font-size: 28px; 
    font-weight: 800; 
    line-height: 1.45em; 
    color: #fff; 
    margin-bottom: 25px; 
    font-family: 'SUIT', sans-serif; 
    word-break: keep-all; 
}
.product2 .pd2_philosophy h4 span { 
    color: #b0f52d; 
    font-weight: 800; 
}
.product2 .pd2_philosophy p { 
    font-size: 17px; 
    font-weight: 400; 
    color: rgba(255, 255, 255, 0.85); 
    line-height: 1.7em; 
    word-break: keep-all; 
}

@media all and (max-width: 768px) {
    .product2 .pd2_visual { 
        flex-direction: column-reverse; 
        padding: 40px 25px; 
        margin-bottom: 50px; 
        border-radius: 20px; 
        gap: 30px; 
        align-items: center;
        text-align: center;
    }
    .product2 .pd2_visual .s_txt { 
        width: 100%; 
        margin-bottom: 0; 
    }
    .product2 .pd2_visual .s_txt h3 { 
        font-size: 26px; 
        align-items: center; 
        text-align: center; 
        gap: 10px;
    }
    .product2 .pd2_visual .s_txt h3 span { 
        font-size: 16px; 
    }
    .product2 .pd2_visual .s_txt p { 
        font-size: 16px; 
        line-height: 1.6em;
    }
    .product2 .pd2_visual .img { 
        width: 100%; 
        max-width: 320px; 
    }
    
    .product2 .pd2_qna article { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 12px; 
        padding: 35px 20px; 
    }
    .product2 .pd2_qna article .q_mark { 
        width: auto; 
        font-size: 22px; 
        margin-bottom: 0; 
    }
    .product2 .pd2_qna article h4 { 
        width: 100%; 
        padding-right: 0; 
        font-size: 20px; 
        margin-bottom: 0; 
        line-height: 1.4;
    }
    .product2 .pd2_qna article > p { 
        font-size: 16px; 
        line-height: 1.7;
    }
    .product2 .pd2_qna article .a_list {
        width: 100%;
    }
    .product2 .pd2_qna article .a_list ul li {
        font-size: 16px;
    }
    .product2 .pd2_qna.vertical_q article{padding: 30px 20px; gap:20px;}
    .product2 .pd2_qna.vertical_q article .q_header{padding-bottom: 20px;}
    .product2 .pd2_qna.vertical_q article .q_header h4{font-size: 20px;}
    .product2 .pd2_qna.vertical_q article > p{font-size: 16px; padding-left: 0;}
    
    .product2 .pd2_philosophy { 
        padding: 45px 25px; 
        margin-top: 50px; 
    }
    .product2 .pd2_philosophy h4 { 
        font-size: 20px; 
        margin-bottom: 18px; 
    }
    .product2 .pd2_philosophy p { 
        font-size: 15px; 
        line-height: 1.6em; 
    }
    
    .product2 .pd2_tech_services { 
        padding-top: 50px; 
        margin-top: 50px; 
        border-top: 1px dashed #e5e5e5;
    }
    .product2 .pd2_tech_services > h4 { 
        font-size: 24px; 
        margin-bottom: 30px; 
    }
    .product2 .pd2_tech_services .s_grid { 
        flex-direction: column; 
        gap: 20px; 
    }
    .product2 .pd2_tech_services .s_grid .card { 
        padding: 35px 25px; 
        border-radius: 20px; 
    }
    .product2 .pd2_tech_services .s_grid .card .title { 
        font-size: 19px; 
        margin-bottom: 12px; 
    }
.product2 .pd2_tech_services .s_grid .card p{font-size: 16px;}
    .terms p { font-size: 15px; }
}

/* company5 */
.company5 .growth_wrap { display: flex; align-items:center; gap: 60px; margin-top: 50px; }
.company5 .growth_wrap .l_cont { flex: 1.2; position: relative; }
.company5 .growth_wrap .r_cont { flex: 1; }
.company5 .growth_wrap .l_cont img { width: 100%; height: auto; object-fit: contain; border-radius: 20px; overflow: hidden;}

.company5 .growth_list { display: flex; flex-direction: column; gap: 15px; }
.company5 .growth_list li { display: flex; align-items: center; gap: 25px; padding: 22px 35px; background: #fff; border: 1px solid #eee; border-radius: 15px; transition: .3s; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.company5 .growth_list li .year { font-size: 22px; font-weight: 800; color: var(--color2); min-width: 60px; font-family: "SUIT", sans-serif; letter-spacing: -0.5px; }
.company5 .growth_list li .txt { font-size: 17px; font-weight: 600; color: #333; line-height: 1.4; word-break: keep-all; }

.company5 .history_wrap { margin-top: 60px; position: relative;}
.company5 .history_wrap::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #e5e5e5; transform: translateX(-50%); }
.company5 .history_sec { display: flex; flex-direction: column; gap: 120px; position: relative; }
.company5 .history_item { display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.company5 .history_item:nth-child(even) { flex-direction: row-reverse; }

.company5 .history_item .year_group { width: 45%; }
.company5 .history_item:nth-child(odd) .year_group { text-align: right; }
.company5 .history_item:nth-child(even) .year_group { text-align: left; }

.company5 .history_item .year_group h4 { font-size: 34px; font-weight: 800; color: var(--color2); font-family: "SUIT", sans-serif; letter-spacing: -1px; line-height: 1; }
.company5 .history_item .year_group p { font-size: 16px; color: #999; margin-top: 5px; font-weight: 500; }

.company5 .history_item .contents { width: 45%; }
.company5 .history_item .contents ul { display: flex; flex-direction: column; gap: 15px; }
.company5 .history_item .contents ul li { position: relative; padding-left: 20px; font-size: 17px; color: #555; line-height: 1.6; word-break: keep-all; }
.company5 .history_item .contents ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--color1); border-radius: 50%; }
.company5 .history_item .contents ul li strong { color: #000; font-weight: 700; margin-right: 8px; font-family: "SUIT", sans-serif; }

.company5 .history_item .dot { position: absolute; left: 50%; top: 12px; width: 14px; height: 14px; background: #fff; border: 3px solid var(--color2); border-radius: 50%; transform: translateX(-50%); z-index: 2; }

@media all and (max-width: 1400px) {
    .company5 .growth_wrap { gap: 40px; }
    .company5 .history_item .year_group h4 { font-size: 30px; }
    .company5 .history_item .contents { padding: 30px; }
}

@media all and (max-width: 1024px) {
    .company5 .growth_wrap { flex-direction: column; align-items: stretch; gap:30px;}
    .company5 .growth_wrap .l_cont .graph_img { min-height: auto; }
    
    .company5 .history_sec{gap:80px;}
    .company5 .history_wrap::before { left: 20px; transform: none; }
    .company5 .history_item, .company5 .history_item:nth-child(even) { flex-direction: column; gap: 15px; padding-left: 50px; }
    .company5 .history_item .year_group, .company5 .history_item:nth-child(odd) .year_group, .company5 .history_item:nth-child(even) .year_group { width: 100%; text-align: left; }
    .company5 .history_item .year_group h4 { font-size: 24px; }
    .company5 .history_item .contents { width: 100%; padding: 25px; padding-left: 0; padding-top: 10px;}
    .company5 .history_item .dot { left: 20px; top: 5px; }
}

@media all and (max-width: 768px) {
    .company5 .growth_list li { padding: 18px 25px; }
    .company5 .growth_list li .year { font-size: 20px; }
    .company5 .growth_list li .txt { font-size: 16px; }
    .company5 .history_sec{gap:60px;}
}


.company5 .bg { background-color: #f7f9fc; padding: 120px 0; margin: 120px 0; }
.company5 .system{display: flex; gap:30px; flex-wrap: wrap;}
.company5 .system li{background-color: #f7f9fc; border-radius: 20px; width: calc(100% / 2 - 30px / 2); flex:auto; padding: 40px; display: flex; flex-direction: column; justify-content: space-between;}
.company5 .system li .top{display: flex; align-items: center; gap:10px; margin-bottom: 20px;}
.company5 .system li .top .icon{width: 64px; aspect-ratio: 1 / 1; background-color: #fff; border-radius: 10px; display: flex; justify-content: center; align-items: center;}
.company5 .system li .top .icon i{color:var(--color2); font-size: 32px; display: flex; align-items: center;}
.company5 .system li .top h3{font-size: 24px; color:#000; font-family:'SUIT', sans-serif;}
.company5 .system li dl{}
.company5 .system li dl.w3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px 30px;}
.company5 .system li dl dd{position: relative; padding-left: 20px; font-size: 17px; color:#666;}
.company5 .system li dl.w3 dd + dd{margin-top: 0;}
.company5 .system li dl dd + dd{margin-top: 5px;}
.company5 .system li dl dd::before{content: '·'; position: absolute; left: 0; color:var(--color1);}
.company5 .system li p{margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; color:var(--color2);}

@media all and (max-width:1400px) {
    .company5 .system{gap:25px;}
    .company5 .system li{padding: 35px;}
    .company5 .system li .top .icon{width: 58px;}
    .company5 .system li .top .icon i{font-size: 30px;}
    .company5 .system li .top h3{font-size: 22px;}
    .company5 .system li dl.w3{gap:5px 25px;}
    .company5 .system li dl dd{font-size: 16px; word-break: keep-all;}
    .company5 .system li p{margin-top: 18px; padding-top: 18px;}
}
@media all and (max-width:1024px) {
    .company5 .system{gap:20px;}
    .company5 .system li dl.w3{grid-template-columns: repeat(1, 1fr);}
    .company5 .system li .top .icon{width: 53px;}
    .company5 .system li .top .icon i{font-size: 28px;}
    .company5 .system li .top h3{font-size: 20px;}
}
@media all and (max-width:768px) {
    .company5 .system li{width: 100%;}
    .company5 .system li dl{grid-template-columns: repeat(1, 1fr); display: grid; gap:5px 20px}
    .company5 .system li dl dd + dd{margin-top: 0px;}
    .company5 .system li p{margin-top: 15px; padding-top: 15px; font-size: 15px;}
}
@media all and (max-width:500px) {
    .company5 .system li{padding: 30px;}
    .company5 .system li .top .icon{width: 50px;}
    .company5 .system li .top .icon i{font-size: 25px;}
    .company5 .system li .top h3{font-size: 19px;}
    .company5 .system li dl{grid-template-columns: repeat(1, 1fr); display: grid; gap:5px 20px}
}

/* Even item alignment for history timeline */
.company5 .history_item:nth-child(even) .contents ul li { text-align: right; padding-left: 0; padding-right: 20px; }
.company5 .history_item:nth-child(even) .contents ul li::before { left: auto; right: 0; }

@media all and (max-width: 1400px) {
    .company5 .bg { padding: 80px 0; margin: 80px 0; }
}

@media all and (max-width: 1024px) {
    .company5 .bg { padding: 70px 0; margin: 70px 0; }
    .company5 .history_item:nth-child(even) .contents ul li { text-align: left; padding-left: 20px; padding-right: 0; }
    .company5 .history_item:nth-child(even) .contents ul li::before { left: 0; right: auto; }
}

@media all and (max-width: 768px) {
    .company5 .bg { padding: 60px 0; margin: 60px 0; }
}

/* 주요 구축 분야 Styling */
.company5 .bg .s-inner { display: flex; gap: 60px; justify-content: space-between; align-items: stretch; }
.company5 .build_left { width: 35%; display: flex; flex-direction: column; gap: 30px; }
.company5 .build_left .s_txt { text-align: left; margin-bottom: 0; }
.company5 .build_left .s_txt h3::after { display: none; }

/* Expertise Focus Card */
.company5 .focus_card { background-color: #1a355e; border-radius: 10px; padding: 30px 30px; color: #fff; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 30px rgba(26, 53, 94, 0.25); text-align: left; }
.company5 .focus_card h4 { font-size: 22px; font-weight: 800; font-family: 'SUIT', sans-serif; color: #fff; margin-bottom: 0;}
.company5 .focus_card p { font-size: 16px; color: rgba(255, 255, 255, 0.85); line-height: 1.5em; word-break: keep-all; }

/* Right Grid */
.company5 .build_grid { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; list-style: none; }
.company5 .build_grid > li { background-color: #fff; border-radius: 10px; padding: 25px 30px; display: flex; align-items: center; gap: 18px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); transition: transform 0.3s, box-shadow 0.3s; text-align: left; }
.company5 .build_grid > li:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.company5 .build_grid li .chk_icon { display: flex; align-items: center; justify-content: center; }
.company5 .build_grid li .chk_icon i { font-size: 26px; color: var(--color1); } /* Blue checkmark */
.company5 .build_grid li .txt_box { display: flex; flex-direction: column; gap: 4px; text-align: left;}
.company5 .build_grid li .txt_box h4 { font-size: 18px; font-weight: 700; color: #111; font-family: 'SUIT', sans-serif; margin-bottom: 0; }
.company5 .build_grid li .txt_box p { font-size: 16px; color: #666; font-weight: 400; word-break: keep-all; margin: 0; }

/* Responsive Styling */
@media all and (max-width: 1200px) {
    .company5 .bg .s-inner { gap: 40px; }
    .company5 .build_left { width: 40%; }
    .company5 .build_grid { width: 55%; }
}

@media all and (max-width: 1024px) {
    .company5 .bg .s-inner { flex-direction: column; gap: 40px; align-items: stretch; }
    .company5 .build_left { width: 100%; gap: 25px; }
    .company5 .build_grid { width: 100%; }
    .company5 .focus_card { padding: 30px; }
}

@media all and (max-width: 768px) {
    .company5 .build_grid { grid-template-columns: 1fr; gap: 15px; }
    .company5 .build_grid > li { padding: 20px 25px; }
}


/* ── pd_partner 슬라이드 캐러셀 ───────────────────────────── */
.pd_partner_carousel {
    margin-top: 40px;
    overflow: hidden;
}

.pd_partner .slick-track {
    display: flex !important;
    align-items: center;
}

.pd_partner li {
    outline: none;
    padding: 0 15px;
}

.pd_partner li .img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    transition: filter 0.3s, opacity 0.3s;
}


.pd_partner li .img img {
    width: 100%;
    max-width: 100%;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

@media all and (max-width: 768px) {
    .pd_partner_carousel { margin-top: 30px; }
    .pd_partner li { padding: 0 10px; }
}

@media all and (max-width: 500px) {
    .pd_partner_carousel { margin-top: 24px; }
}