/* -------- 제품정보 / 제품정보 / info1 -------- */

.info1-wrap1 {
    display:grid;
    grid-template-columns: 2fr 9fr;
    gap:100px;
    height:fit-content;
}

.info1-btn {
    border:1px solid #ddd;
    height:fit-content;
    white-space:nowrap;
    position: sticky;
    top:100px;
}

.info1-btn li {
    padding:15px 50px;
    font-size:22px;
    cursor: pointer;
    border-bottom:1px solid #ddd;
    text-align: center;
    transition:0.1s;
}

.info1-btn li:hover {
    color:var(--primary-color2);
    transition:0.1s;
}

.info1-btn li.on {
    background:var(--primary-color2);
    color:#fff;
}

.info1-btn>li:last-child {
    border-bottom:unset;
}

.info1-car figure {
    width:70%;
    margin:0 auto 50px;
}

.info1-car {
    position: relative;
}

.info-mark span {
    display:none;
    width:25px;
    height:25px;
    border-radius: 50px;
    background:#294b72;
    border:3px solid #fff;
    opacity:0.5;
    position:absolute;
    animation: car-point 1.2s infinite;
}

.info-mark span.on {
    display:block;
}

.info-mark1 {
    top:55%;
    left:40%;
}

.info-mark2 {
    top:57%;
    left:44%;
}

.info-mark3 {
    top:50%;
    left:52%;
}

.info-mark4 {
    top:44%;
    left:55%;
}
.info-mark5 {
    top:41%;
    left:61%;
}

.info-mark6.on, .info-mark7.on {
    display:none !important;
}


@keyframes car-point {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.3);
    }
}

.info1-con > div {
    display: none;
}

.info1-con > div.active {
    display: grid;
}

.info1-con>div { 
    grid-template-columns: 1fr 1fr;
    gap:30px;
}

.info1-con figure {
    border:1px solid #ddd;
    border-radius:20px;
    overflow: hidden;
    transition:0.1s;
}

.info1-con figure img {
    margin: 0 auto;
}

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


.info1-wrap2 {
    display:grid;
    grid-template-columns: 2fr 9fr;
    gap:100px;
    height:fit-content;
    margin-top:130px;
}

/* .info1-wrap2 .wrap-title {
    height:fit-content;
    white-space:nowrap;
    position: sticky;
    top:100px;
} */

.info1-contact {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:30px;
}

.info1-contact-con {
    border-radius: 20px;
    border: 2px solid var(--primary-color);
    padding: 40px; 
    transition: 0.1s;
    display:flex;
    flex-direction: column;
    gap:10px;
}

.info1-contact-con:hover {
    border: 2px solid var(--primary-color2);
    transition: 0.1s;
}

.info1-contact-con h4 {
    font-size: 22px;
    font-weight: 700;
}

.info1-contact-con p {
    font-size: 20px; 
    line-height: 1.3;
    display:flex;
    gap:10px;
    align-items: center;
}

.info1-contact-con img {
    width:30px;
    background:var(--primary-color2);
    padding:4px;
    border-radius:6px;
}








/* -------- 제품정보 / 제품정보 / info1 -------- */


/* -------- 제품정보 / 생산공정 / info2 -------- */


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

.info2-con-wrap {
    display:grid;
    grid-template-columns: 4fr 9fr;
    gap:100px;
}

.info2-chart-bg {
    background:#e5ebf5;
}

.info2 .sub-subtitle {
    height: fit-content;
}

.info2-wrap figure {
    width:100%;
    height:auto;
    border:1px solid #ddd;
    border-radius:20px;
    overflow:hidden;
    box-shadow: 0 0px 20px rgba(26,92,164,0.08);
}

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




/* -------- 제품정보 / 생산공정 / info2 -------- */



/* -------- 제품정보 / 생산범위 / info3 -------- */


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

.info3-con-wrap {
    display:flex;
    gap:120px;
}

.info3-chart-bg {
    background:#e5ebf5;
}

.info3 .sub-subtitle {
    height: fit-content;
}


/* -------- 제품정보 / 생산범위 / info3 -------- */

/* -------- 제품정보 / 기계적성질, 화학성분 / info4,5 -------- */

.info4-con-wrap, .info5-con-wrap {
    display:flex;
    flex-direction: column;
    gap:30px;
}

.table-wrap { 
    width:100%;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 15px;
    border: 1px solid #ccc;
}

th {
    text-align: left;
}

thead {
    background: var(--primary-color2);
}

th {
    color:#fff;
    border:1px solid #ffffffa9;
    font-weight:500;
    font-size: 20px;
}

td, th {
    padding: 15px 10px;
    vertical-align: middle;
    text-align: center;
    word-break: keep-all;
    line-height:1.4;
}

td {
    border: 1px solid rgba(0,0,0,.1);
    background: #fff;
    font-weight:400;
    font-size:18px;
}


tr>td:first-child {background:#f3f3f3;}


/* -------- 제품정보 / 기계적성질, 화학성분 / info4,5 -------- */










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

    


}




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

    td, th {
        font-size:18px; 
    }

    .info1-btn li {
        font-size:20px;
    }







}


/* -------- 1280px --------*/
@media screen and (max-width: 1280px) {
    
    
    td, th {
        font-size:16px; 
    } 

    .table-wrap {
        overflow-x: scroll;
    }

    .table-wrap::-webkit-scrollbar {
        display: none; 
    }

}



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

    .info3-con-wrap {
        flex-direction: column;
        gap:50px;
    }

    .info3-table1 td, th{
        padding:10px;
    }

    .info3-table2 td, th{
        padding:15px 25px;
    }

    .info1-wrap1 {
        grid-template-columns: 1fr;
        width:100%;
    }

    .info1-btn {
        position:static;
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .info1-btn li {
        border-right:1px solid #ddd;
        font-size:18px;
    }

    .info1-btn li:nth-child(3n) {
        border-right:0px;
    }

    .info1-wrap1 {
        gap:50px;
    }

    .info1-wrap2 {
        grid-template-columns: 1fr;
        gap:50px;
        margin-top:80px;
    }
    
    .info1-contact {
        width:100%;
        grid-template-columns: 1fr 1fr;
    }

    .info1-contact-con p {
        font-size:18px;
    } 

    .info2-con-wrap {
        grid-template-columns: 1fr;
        gap:30px;
    }


    .info2-wrap {
        gap:80px;
    }



}





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

    .info1-btn {
        grid-template-columns: 1fr 1fr;
    }
    
    .info1-btn li {
        border-right:1px solid #ddd;
        font-size:16px;
    }

    
    .info1-con>div {
        gap:10px;
    }

    .info1-btn li:nth-child(3n) {
        border-right:1px solid #ddd;
    }

    .info1-btn li:nth-child(2n) {
        border-right:0px;
    }
    
    .info1-contact-con p {
        font-size:16px;
    }

    .info1-contact-con {
        padding:25px;
        gap:5px;
    }

    .info1-contact {
        gap:10px;
        grid-template-columns: 1fr;
    }

    .info1-contact-con h4 {
        font-size:18px;
    }

    .info1-contact-con img {
        width:20px;
    }

    .info-mark span {
    width:20px;
    height:20px;
}


    .info-mark1 {
        top:55%;
        left:40%;
    }

    .info-mark2 {
        top:55%;
        left:44%;
    }

    .info-mark3 {
        top:48%;
        left:52%;
    }

    .info-mark4 {
        top:43%;
        left:55%;
    }
    .info-mark5 {
        top:40%;
        left:61%;
    }


    

}



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

    .info1-btn {
        grid-template-columns: 1fr;
    }

    
    .info1-btn li:nth-child(3n) {
        border-right:unset;
    }


    .info1-btn li {
        border-right:0px;
    }




    

}

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

    

}