@charset "utf-8";
/* css setting start */

#product{}
/* table */


/* width 조정 / 합이 100% */
.table .col01{width:12%;}
.table .col02{width:10%;}
.table .col03{width:12%;}
.table .col04{width:14%;}
.table .col05{width:10%;}
.table .col06{width:15%;}
.table .col07{width: 8%;}
.table .col08{width:10%;}
.table .col09{width:9%;}


.table .col01{}
.table .col05{}
.table .col08{}
.table .col08 h6{}
.table .col09{}



/*===== product.php =====*/

.sub_services .sec01{padding-bottom: 10rem; margin-bottom: 0;}
.sub_services .sec01 .cont-wr{}
.sub_services .sec01 .cont-wr ul{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:3rem;}
.sub_services .sec01 li{background:#fcfcfc;border: 1px solid #fff;}
.sub_services .sec01 a{display:block; color:#666666; font-size:1.6rem; padding:2rem; font-weight:600;}
.sub_services .sec01 a::before{right: calc(2rem + 3px);height: 1px;top: calc(50% - 1px);}
.sub_services .sec01 a::after{right:2rem; color:#666666;font-weight: 400;}
.sub_services .sec01 li:hover{
    border-radius: 0 8px 0 8px;
    border: 1px solid #0f3fa0;
    box-sizing: border-box;
    box-shadow: 3.709px 5.936px 17.64px 0.36px rgba(13, 14, 16, 0.08);
}
.sub_services .sec01 li:hover a{color:#0f3fa0;}
.sub_services .sec01 li:hover a::before{opacity:1;background-color:#0f3fa0;}
.sub_services .sec01 li:hover a::after{color:#0f3fa0;}


/* css setting end */

/* media size setting start */
@media all and (max-width:1320px) {


    .table .tbody dd{width: 100%;}

    .table .col01{order: 5;}
    .table .col02{order: 2;}
    .table .col03{order: 6;}
    .table .col04{order: 7;}
    .table .col05{order: 1;}
    .table .col06{order: 8;}
    .table .col07{order: 4;}
    .table .col08{order: 9;}
    .table .col09{order: 3;}

    .table .tbody .col01::before{content:'분야 :';}
    .table .tbody .col03::before{content:'카테고리 :'; }
    .table .tbody .col04::before{content:'대표 제품명 :'; }
    .table .tbody .col06::before{content:'기술 :'; }
    .table .tbody .col07::before{content:'위치 :'; }

    .table .tbody{}
    .table .tbody dl{padding-left: 128px;}

    .table .tbody .col01{width:50%;}
    .table .tbody .col02{width: calc(100%); font-size: 2rem; font-weight: 700; color: #000;}
    .table .tbody .col03{width:50%;}
    .table .tbody .col04{width:50%;}
    .table .tbody .col05{position: absolute; left: 0rem; width: auto; top: 2rem;}
    .table .tbody .col06{width:50%;}
    .table .tbody .col07{}
    .table .tbody .col08{}
    .table .tbody .col09{width: 120px;  padding: 0;}


}
@media all and (max-width:1240px) {

}
@media all and (max-width:1024px) {

}
@media all and (max-width:767px) {

}
@media all and (max-width:640px) {

    .table .tbody .col01{width:100%;}
    .table .tbody .col03{width:100%;}
    .table .tbody .col04{width:100%;}
    .table .tbody .col05{top: 5rem;}
    .table .tbody .col06{width:100%;}

}
@media all and (max-width:480px) {

    .table .tbody dl{padding-left:0rem; padding-top:11rem;}
    .table .tbody .col05{top:2rem}


}
/* media size setting end */