/* -------- 회사소개 / 회사개요 / about1 -------- */


.about1-wrap {
    display:flex;
    flex-direction: column;
    gap:150px;
}

.about1-con1 {
    display:flex; 
    gap:70px;
    align-items: center;
}

.about1-con1 figure {
    width:100%;
    aspect-ratio:7/5;
    overflow: hidden;
}


.about1-con1 figure img {
    object-fit: cover;
    width:100%;
    height:100%;
} 

.about1-con1 h3 {
    font-size:60px;
    font-weight:700;
    letter-spacing: 0.05em;
}

.about1-con1 h4 {
    margin:0px 0 30px;
    font-size:50px;
    color:var(--primary-color);
    font-weight:300;
    line-height:1;
}

.about1-con1 p {
    font-size:22px;
}

.about1-con2 {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:70px;
}

.about1-con2 div {
    display:grid;
    gap:30px;
    grid-template-columns: 1fr 5fr;
    padding-bottom:10px;
    border-bottom:1px solid #ddd;
    padding-left:10px;
}

.about1-con2 span {
    font-size:22px;
    font-weight:700;
}

.about1-con2 p {
    font-size:22px;
}




/* -------- 회사소개 / 회사개요 / about1 -------- */


/* -------- 회사소개 / CEO인사말 / about2 -------- */


.about2-wrap {
    display:grid;
    grid-template-columns: 4fr 9fr;
    gap:70px;
}

.about2-wrap h3 {
    font-size:40px; 
    font-weight:700;
    line-height:1.4;
    height: fit-content;
    position: sticky;
    top:100px;
}

.about2-wrap p {
    font-size:22px;
    line-height:1.7;
}

.about2-wrap em {
    font-size:36px;
    line-height:1.5;
}

.about2-wrap .ceo-info {
    margin-top:80px; 
    display:flex;
    gap:20px;
    align-items: center; 
    justify-content: flex-end;
}

.about2-wrap .ceo-info span {
    font-size:22px;
    text-align: right;
}






/* -------- 회사소개 / CEO인사말 / about2 -------- */


/* -------- 회사소개 / 비전 / about3 -------- */


.about3-sec1-con h3 {
    font-size:50px;
    font-weight:700;
    line-height:1.3;
    margin-bottom:20px;
}

.about3-sec1-con p {
    font-size:30px;
    line-height:1.5;
}



.about3-sec2 {
    height: 100vh; 
    overflow-x: hidden;
}

.vision-slide {
    position: sticky;
    top: 0px;
    height: 100vh;
    align-items: center;
    letter-spacing: 0.2em;
    color: white;
    background-size: cover;
    background-position: center; 
    overflow:hidden;
    display:grid;
    grid-template-columns: 1fr 1fr;
    background:#fff;
}

.vision-slide figure {
    height:100vh;
    overflow: hidden;
}

.vision-slide figure img {
    width:100%;
    height:100%;
    object-fit: cover;
}

.vision-slide div {
    margin: 0 80px 10% 100px; 
}

.vision-slide h3 {
    font-size:clamp(32px, 5vw, 66px);
    font-weight:800;
}

.vision-slide p {
    font-size:36px;
    letter-spacing: 0.03em;
}

.vision-slide::after {
    display:block;
    position:absolute;
    bottom:10%;
    left:50%;
    transform:translateX(-50%);
    font-size:clamp(50px, 10vw, 180px);
    font-weight:800;
    letter-spacing: 0.001em;
    color:#ccc;
    opacity:0.3;
}

.vision-slide1::after {
    content:"TECHNOLOGY";
}

.vision-slide2::after {
    content:"SYSTEM";
}

.vision-slide3::after {
    content:"MANAGEMENT";
}

.vision-slide4::after {
    content:"MANPOWER";
}

.vision-slide5::after {
    content:"FINANCE";
}



/* -------- 회사소개 / 비전 / about3 -------- */



/* -------- 회사소개 / ci / about4 -------- */

.about4-wrap {
    display:flex;
    flex-direction: column;
    gap:150px;
}


.horizontal-line {
    width:100%;
    border-top: 1px solid #ddd;
}

.about4 .wrap-title {
    height: fit-content;
    position: sticky;
    top:100px;
}

.wrap-title h3 {
    position: relative;
    font-size: 50px;
    font-weight: 700;
    padding-left:30px;
    line-height: 1.1;
}

.wrap-title h3::before {
    display: block;
    content: "";
    width: 10px;
    height: 95%;
    background: var(--primary-color);
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
}

.symbol-mark-wrap, .symbol-color-wrap {
    display:flex;
    flex-direction: column;
    gap:50px;
}

.symbol-mark-wrap figure {
    overflow: hidden;
    border:1px solid #ddd;
}

.symbol-mark-wrap span {
    font-size:42px;
    font-weight:800;
    line-height:1.3;
}

.symbol-mark-wrap p {
    font-size:22px;
}

.symbol-color {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:50px;
}

.symbol-color0 {
    width:100%;
    aspect-ratio: 3/1;
    position:relative;
}

.symbol-color1 {
    background:#f7941d;
}

.symbol-color2 {
    background:#6ad0f6;
}

.symbol-color0 div {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.symbol-color0 div span {
    display: inline-block;
    width: 100%; 
    text-align: center;
    color:#fff;
    font-size:30px;
    font-weight:700;
}

.symbol-color0 div p {
    text-align: center;
    color:#fff;
    font-size:18px;
}

.symbol-color-wrap p {
    font-size:22px;
}







/* -------- 회사소개 / ci / about4 -------- */




/* -------- 회사소개 / 연혁 / about5 -------- */



.about5-sec1 .history {
    display:flex;
    flex-direction: column;
    gap:150px;
}

.history-con {
    display:grid;
    grid-template-columns: 2fr 3fr;
    gap:50px;
    position:relative;
    height: auto;
}

.history-title {
    line-height:1;
    margin-top:30px;
    display:flex;
    flex-direction: column;
    gap:10px;
    position:relative;
    padding-left:30px;
}

.history-title::before {
    display:block;
    content:"";
    width:10px;
    height:100%;
    background:var(--primary-color);
    position:absolute;
    top:0;
    left:0px;
}

.history-title span {
    font-size:50px;
    font-weight:700;
}

.history-title p {
    font-size:30px;
}

.history-left {
    position:sticky;
    top:50px;
    left:0;
    height:fit-content
}

.history-img {
    width:100%;
    aspect-ratio: 2 / 1;
    border-radius: 10px;
    overflow: hidden;
}

.history-img img {
    width:100%;
    height:100%;
    object-fit: cover;
}

.history-right {
    display:flex;
    gap:30px;
    flex-direction: column;
    font-size:20px;
}

.history-right span {
    font-size:26px;
    font-weight:700; 
}

.history-right p {
    font-size:22px;
    line-height:1.3;
}

.history-right div {
    padding-bottom:30px;
    border-bottom:1px solid #ddd;
}

.history-right>div:last-child {
    border-bottom:unset;
}


/* -------- 회사소개 / 연혁 / about5 -------- */



/* -------- 회사소개 / R&D / about6 -------- */


.rnd {
    display: flex;
    flex-direction: column;
    gap:100px;
}

.gallery-wrap {
    display:flex;
    flex-direction: column;
    gap:30px;
}

.gallery-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    width: 100%;
}

.gallery-con {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0px 20px rgba(26,92,164,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s; 
    min-width: 0;
    border:1px solid #eee;
}

.gallery-con:hover {
    box-shadow: 0 0px 20px rgba(26,92,164,0.16);
    transform: translateY(-6px) scale(1.03);
}

.gallery-board-img {
    width: 100%;
    aspect-ratio: 1/1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom:1px solid #eee;
}

.gallery-board-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.gallery-board-text {
    margin:30px;
    display:flex;
    flex-direction: column;
    gap:10px;
}

.gallery-board-title {
    font-size: 22px;
    font-weight: 700; 
    word-break: keep-all;
    line-height:1.3;
}

.gallery-board-date {
    font-size: 20px;
    color: #888;
    font-weight: 400; 
    line-height:1;
}


/* -------- 회사소개 / R&D / about6 -------- */


/* -------- 회사소개 / 오시는길 / about7 -------- */

.map-btn-wrap {
    display:flex;
    width:fit-content;
}

.about7-wrap {
    display:flex;
    flex-direction: column;
    gap:30px;
}

.map-btn {
    background:#fff;
    border:1px solid #ccc;
    color:#666;
    padding:20px;
    width:300px;
    text-align: center;
    font-size:22px;
    cursor:pointer;
    transition: background 0.1s, color 0.1s;
}

.map-btn.active {
    background: var(--primary-color2);
    border:1px solid var(--primary-color2);
    color: #fff;
    font-weight: 500;
}

.about7-con1 {
    display:block;
} 

.about7-con2 {
    display:none;
}

.about7-con.active {
    display:block;
    opacity:1;
}

.map {
    width:100%;
    height:500px;
    background:#ededed;
}

.map-info {
    width:100%;
    padding:50px;
    background:var(--primary-color2);
    color:#fff;
    display:flex;
    flex-direction: column;
    gap:10px;
}

.map-info div {
    display:flex;
    gap:50px;
}

.map-info p {
    color:#fff;
    font-size:22px;
    display:flex;
    gap:10px;
    align-items: center;
}

.map-info i {
    color:var(--primary-color2);
    font-size:24px;
    background:#fff;
    padding: 3px 2px 3px 3px;
    border-radius: 5px;
}




/* -------- 회사소개 / 오시는길 / about7 -------- */






/* -------- 1600px --------*/
@media screen and (max-width: 1600px) {

    


}




/* -------- 1440px --------*/
@media screen and (max-width: 1440px) {

    /* 회사 개요 */

    .about1-con1 h3 {
        font-size:50px;
    }

    .about1-con1 h4 {
        font-size:40px;
    }

    .about1-con1 p {
        font-size:20px;
    }

    .about1-con2 span {
        font-size:20px;
    }

    .about1-con2 p {
        font-size:20px;
    }

    /* CEO 인사말 */

    .about2-wrap p {
        font-size:20px;
    }

    .about2-wrap .ceo-info span {
        font-size:20px;
    }


    /* vision */

    .about3-sec1-con h3 {
        font-size:46px;
    }

    .about3-sec1-con p {
        font-size:26px;
    }

    .vision-slide h3 {
        font-size:60px;
    }

    .vision-slide p {
        font-size:30px;
        letter-spacing: 0.02em;
    }

    .vision-slide div {
        margin: 0 60px 10% 80px; 
    }

    .vision-slide::after {
        font-size: 110px;
    }

    /* CI */

    .wrap-title h3 {
        font-size:46px;
    }

    .symbol-mark-wrap span {
        font-size:40px;
    }

    .symbol-mark-wrap p,.symbol-color-wrap p {
        font-size:20px;
    }

    /* 연혁 */

    .history-title span {
        font-size:46px;
    }

    .history-title p {
        font-size:26px;
    }

    .history-right span {
        font-size:24px;
    }

    .history-right p {
        font-size:20px;
    }


    /* R&D */

        /* 갤러리 게시판 */

    .gallery-board {
        grid-template-columns: repeat(3,1fr);
    }

    .gallery-board-text {
        margin:30px 40px;
    }


    /* 사업장안내 */

    .map-btn, .map-info p {
        font-size:20px;
    }










}


/* -------- 1280px --------*/
@media screen and (max-width: 1280px) {
    
    /* 회사 개요 */

    .about1-con1 {
        gap:50px;
    }

    .about1-con1 h3 {
        font-size:40px;
    }

    .about1-con1 h4 {
        font-size:30px;
    }


    /* CEO 인사말 */

    .about2-wrap h3 {
        font-size:36px;
    }


    /* vision */

    .about3-sec1-con h3 {
        font-size:44px;
    }

    .about3-sec1-con p {
        font-size:22px;
    }

    .vision-slide h3 {
        font-size:50px;
    }

    .vision-slide p {
        font-size:26px;
        letter-spacing: 0.02em;
    }

    .vision-slide div {
        margin: 0 50px 10% 70px; 
    }

    .vision-slide::after {
        font-size: 90px;
    }


    /* CI */

    .wrap-title h3 {
        font-size:40px;
    }

    .symbol-mark-wrap span {
        font-size:32px;
    }

    .symbol-mark-wrap p,.symbol-color-wrap p {
        font-size:20px;
    }

    .symbol-color0 div span {
        font-size:26px;
    }
    
    .symbol-color0 div p {
        line-height:1.3
    }

    .symbol-color0 {
    aspect-ratio: 5 / 2;
    }


    /* 연혁 */

    .history-title span {
        font-size:44px;
    }

    .history-title p {
        font-size:22px;
    }

    .history-right span {
        font-size:22px;
    }

    .history-right p {
        font-size:20px;
    }

    /* R&D */

        /* 갤러리 게시판 */
    .gallery-board-title {
        font-size:20px;
    }

    .gallery-board-date {
        font-size:18px;
    }









}


/* 반응형 메뉴 나오는 지점 */
/* -------- 1024px --------*/
@media screen and (max-width: 1024px) {

    /* 회사 개요 */

    .about1-wrap {
        gap:80px;
    }

    .about1-con1 {
        gap:50px;
        flex-direction: column;
    }

    .about1-con1 p {
        font-size:18px;
    }

    .about1-con2 span {
        font-size:18px;
    }

    .about1-con2 p {
        font-size:18px;
    }

    .about1-con1 figure {
        aspect-ratio: 2/1;
    }

    .about1-con2 {
        grid-template-columns: 1fr;
        gap:40px;
    }

    .about1-con2 div {
        padding-bottom:5px;
    }



    /* CEO 인사말 */

    .about2-wrap h3 {
        font-size:30px;
    }

    .about2-wrap {
        grid-template-columns:1fr;
        gap:50px;
    }

    .about2-wrap em {
        font-size:30px;
    }

    .about2-wrap p {
        font-size:18px;
    }

    .about2-wrap .ceo-info span {
        font-size:18px;
    }

    .about2-wrap .ceo-info {
        margin-top:50px;
        gap: 10px;
    }


    
    /* vision */


    .vision-slide {
        display:flex;
        flex-direction: column;
    }

    .vision-slide figure {
        width:100%;
        height:50vh;
    }

    .vision-slide div {
        width:100%;
        height:50vh;
        text-align: center;
        padding:15px;
    }


    .about3-sec1-con h3 {
        font-size:36px;
    }

    .about3-sec1-con p {
        font-size:20px;
    }

    .vision-slide h3 {
        font-size:46px;
    }

    .vision-slide p {
        font-size:24px;
        letter-spacing: 0.02em;
    }

    .vision-slide div {
        margin: 0 0 20vh; 
        display:flex;
        flex-direction: column;
        justify-content: center;
    }

    .vision-slide::after {
        bottom:15vh;
        font-size: 80px;
    }

    /* CI */

    .wrap-title h3 {
        font-size:36px;
    }

    .symbol-mark-wrap span {
        font-size:32px;
    }

    .symbol-mark-wrap p,.symbol-color-wrap p {
        font-size:18px;
    }

    .about4-wrap {
        gap:80px;
    }

    .symbol-color0 div span {
        font-size:24px;
    }
    
    .symbol-color0 div p {
        line-height:1.3
    }

    .about4 .wrap-title {
        position:static;
        top:0;
    }


    /* 연혁 */

    .about5-sec1 .history {
        gap:80px;
    }

    .history-con {
        gap:30px;
    }

    .history-title {
        padding-left:22px;
        gap:6px;
    }

    .history-title::before {
        width:8px;
    }

    .history-right div {
        padding-bottom:25px;
    }

    .history-right {
        gap:25px;
    }

    .history-title span {
        font-size:32px;
    }

    .history-title p {
        font-size:20px;
    }

    .history-right span {
        font-size:22px;
    }

    .history-right p {
        font-size:18px;
    }

    /* R&D */

        /* 갤러리 게시판 */
    .gallery-board-title {
        font-size:18px;
    }

    .gallery-board-date {
        font-size:16px;
    }
    
    .gallery-board-text {
        margin:25px 30px;
    }

    .rnd {
        gap:80px;
    }


    /* 사업장안내 */

    .map-btn, .map-info p {
        font-size:18px;
    }

    .map-info {
        padding:30px 40px;
    }

    .map-info i {
        padding:2px;
        font-size:22px;
    }









}





/* -------- 768px --------*/
@media screen and (max-width: 768px) {

    /* 회사 개요 */

    .about1-con1 h3 {
        font-size:30px;
    }

    .about1-con1 h4 {
        font-size:22px;
    }

    .about1-con1 p {
        font-size:16px;
    }

    .about1-con2 span {
        font-size:16px;
    }

    .about1-con2 p {
        font-size:16px;
    }



    /* CEO 인사말 */

    .about2-wrap h3 {
        font-size:28px;
    }

    .about2-wrap em {
        font-size:22px;
    }

    .about2-wrap p {
        font-size:16px;
    }

    .about1-con1 p {
        font-size:16px;
    }

    .about2-wrap .ceo-info span {
        font-size:16px;
    }


    /* vision */

    
    .about3-sec1-con h3 {
        font-size:30px;
    }

    .about3-sec1-con p {
        font-size:16px;
    }

    .vision-slide h3 {
        font-size:36px;
    }

    .vision-slide p {
        font-size:20px;
        letter-spacing: 0.02em;
    }

    .vision-slide div {
        margin: 0 0 20vh; 
        display:flex;
        flex-direction: column;
        justify-content: center;
    }

    .vision-slide::after {
        font-size: 50px;
    }

    
    /* CI */

    .wrap-title h3 {
        font-size:30px;
        padding-left:25px;
    }

    .wrap-title h3::before {
        width:8px;
    }

    .symbol-mark-wrap span {
        font-size:24px;
    }

    .symbol-mark-wrap p,.symbol-color-wrap p {
        font-size:16px;
    }

    .about4-wrap {
        gap:80px;
    }

    .symbol-color {
        gap:30px;
    }

    .symbol-color0 div span {
        font-size:22px;
    }
    
    .symbol-color0 div p {
        font-size:16px;
    }
    
    .symbol-color0 div {
        width:100%;
    }



    /* 연혁 */

    .history-left {
        position:static;
        top:unset;
    }

    .history-con {
        grid-template-columns: 1fr;
        gap:50px;
    }

    .history-title {
        padding-left:22px;
        gap:6px;
    }

    .history-title::before {
        width:8px;
    }

    .history-right div {
        padding-bottom:25px;
    }

    .history-right {
        gap:25px;
    }
    
    .history-title span {
        font-size:32px;
    }

    .history-title p {
        font-size:20px;
    }

    .history-right span {
        font-size:20px;
    }

    .history-right p {
        font-size:16px;
    }

    /* R&D */

    /* 갤러리 게시판 */

    .gallery-board {
        grid-template-columns: repeat(2,1fr);
        gap:10px;
    }

    .gallery-board-title {
        font-size:16px;
    }

    .gallery-board-date {
        font-size:14px;
    }
    
    .gallery-board-text {
        margin:20px 20px !important;
    }


    /* 사업장안내 */

    .map-btn, .map-info p {
        font-size:16px;
    }

    .map-btn-wrap {
        width:100%;
    }

    .map-btn {
        width:50%;
        padding:12px;
    }

    .map-info {
        padding:20px 25px;
    }

    .map-info i {
        padding:3px;
        font-size:20px;
    }

    .map-info div {
        flex-direction: column;
        gap:10px;
    }








}


/* -------- 600px --------*/
@media screen and (max-width: 600px) {

    .symbol-color {
        grid-template-columns: 1fr;
        gap:20px;
    }

    .symbol-color0 {
    aspect-ratio: 4/1
    }


    /* R&D */

    /* 갤러리 게시판 */

    .gallery-board {
        grid-template-columns: repeat(1,1fr);
    }

    .gallery-board-title {
        font-size:16px;
    }

    .gallery-board-date {
        font-size:14px;
    }
    
    .gallery-board-text {
        margin:25px 30px;
    }






}




/* -------- 480px --------*/
@media screen and (max-width: 480px) {

    
    .map-info p {
        align-items: flex-start;
    }


}

/* -------- 350px --------*/
@media screen and (max-width: 350px) {

    

}