/* 공통 */
.scpd {
    box-sizing: border-box;
    padding: 10rem 0 0 0;
}
.scpd-2 {
    box-sizing: border-box;
    padding: 10rem 0 15rem 0;
}
.tap-name-box-1 > li {
    width: 33.3333%;
}
.con .tap-name-box-2 > li{
    width: 50%;
}
.tap-name-box-1 > li > a {
    width: 100%;
    box-sizing: border-box;
    padding: 2.8rem 0;
    text-align: center;
    color: #999999;
    font-size: 2rem;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #555;
    background: #f5f5f5;
}
.tap-name-box-1 > li:last-child > a {
    border-right: none;
}
.tap-name-box-1 > li > a.active {
    color: #307ab9;
    font-family: "NotoSansKR-Bold";
    border: 1px solid #555;
    border-bottom: none;
    background: #fff;
}
.tap-menu-box-1 {
    width: 100%;
    margin-top: 10rem;
}

/* ------------------------------------------------------------------------------- */

/* 서브 비주얼 영역 공통 */
.sub-visual-area {
    height: 60rem;
}
.sub-visual-area .text-box {
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    padding: 0 20px;
}
.sub-visual-area .text-box .text-1 {
    font-size: 2rem;
}
.sub-visual-area .text-box .text-2 {
    font-size: 4.5rem;
    margin-top: 1.6rem;
}
.sub-visual-area .paging-box {
    height: 7rem;
    bottom: 0;
    left: 0;
    background: rgba(100,153,198,0.95);
    z-index: 4;
}
.sub-visual-area .paging-box .list-box {
    box-sizing: border-box;
    border-left: 1px solid rgba(265,265,265,0.3);
}
.sub-visual-area .paging-box .list-box:last-child {
    border-right: 1px solid rgba(265,265,265,0.3);
}
.sub-visual-area .paging-box .home-box {
    box-sizing: border-box;
    padding: 0 2.4rem;
}
.sub-visual-area .paging-box .depth-box {
    width: 22rem;
    height: 100%;
}
.sub-visual-area .paging-box .depth-box .select-menu {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 2rem;
}
.sub-visual-area .paging-box .depth-box .select-menu .text {
    font-size: 1.8rem;
    color: #fff;
}
.sub-visual-area .paging-box .depth-box .select-menu .arrow-ico {
    width: 1.5rem;
}
.sub-visual-area .paging-box .depth-box .depth-sub-box {
    left: 0;
    top: 7rem;
    width: 100%;
    background: #fff;
    display: none;
    box-sizing: border-box;
    border: 1px solid #6499c6;
    border-top: none;
}
.sub-visual-area .paging-box .depth-box:hover .depth-sub-box {
    display: block;
}
.sub-visual-area .paging-box .depth-box .depth-sub-box > li:not(:last-child) {
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
}
.sub-visual-area .paging-box .depth-box .depth-sub-box > li > a {
    font-size: 1.8rem;
    color: #777;
    box-sizing: border-box;
    padding: 0 2.8rem;
    height: 7rem;
    line-height: 7rem;
}
.sub-visual-area .paging-box .depth-box .depth-sub-box > li > a.active {
    color: #6499c6;
    font-family: "NotoSansKR-Bold";
}

/* ------------------------------------------------------------------------------- */

/* 서브 컨텐츠 영역 공통 */
.sub-content-area .title-box {
    box-sizing: border-box;
    padding-left: calc(2.4rem + 6px);
}
.sub-content-area .title-box::after {
    content: "";
    display: block;
    width: 6px;
    height: 85%;
    background: #6499c6;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.sub-content-area .title-box .text-1 {
    color: #222222;
    font-size: 3.6rem;
}
.sub-content-area .title-box .text-2 {
    color: #555555;
    font-size: 2rem;
    margin-top: 1.6rem;
}
.sub-content-area .sub-content-box {
    margin-top: 8rem;
}
.sub-img-wrap > img {
    width: 100%;
}
.txt20{
    font-size: 20px;
}

/* ------------------------------------------------------------------------------- */

.home-area-1 {
    background: url(../img/home_visual_img_1.jpg) no-repeat center center/cover;
}
.home-area-2 {
    background: url(../img/home_visual_img_2.jpg) no-repeat center center/cover;
}
.about-area-1 {
    background: url(../img/about_visual_img_1.jpg) no-repeat center center/cover;
}
.about-area-2 {
    background: url(../img/about_visual_img_2.jpg) no-repeat center center/cover;
}
.about-area-3 {
    background: url(../img/about_visual_img_3.jpg) no-repeat center center/cover;
}
.product-area-1 {
    background: url(../img/product_visual_img_1.jpg) no-repeat center center/cover;
}
.cscenter-area-1 {
    background: url(../img/cscenter_visual_img_1.jpg) no-repeat center center/cover;
}


/* ------------------------------------------------------------------------------- */

/* sub tap 개별  */
.tabs1-wrap{
    display: flex;
}

/* ------------------------------------------------------------------------------- */

/* 테이블/페이징  */
.table-box {
    width: 100%;
    overflow-x: auto;
    font-size: 16px;
    margin-top: 8rem;
}
.table-box table {
    border-collapse: collapse;
    width: 100%;

}
.table-box th {
    box-sizing: border-box;
    border-top: 2px solid #999999;
    border-bottom: 1px solid #dddddd;
    background: #f2f2f2;
    padding: 2rem 4rem;
    color: #555;
}
.table-box td {
    box-sizing: border-box;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    background: #fff;
    padding: 2rem 4rem;
    color: #333333;
    text-align: center;
}
.table-box td.tal {
    text-align: left;
}
.table-box td .ico-box {
    width: 1.3rem;
}
.table-box td .down-btn {
    width: 1.8rem;
}
.page-box .arrow-btn-1 {
    width: 6px;
}
.page-box .arrow-btn-2 {
    width: 10px;
}
.page-box .number {
    color: #777;
    font-size: 16px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
}
.page-box .number.active {
    color: #fff;
    background: #6499c6;
}
.page-box .add-btn {
    box-sizing: border-box;
    padding: 1.2rem 2.4rem;
    border-radius: 30px;
    color: #fff;
    background: #244d70;
    right: 0;
    font-size: 1.6rem;
}


/* ------------------------------------------------------------------------------- */

.sub_news,.sub_news th,.sub_news td{border:0; font-size:16px;}
.sub_news a{color:#383838;text-decoration:none}
.sub_news{width:100%;color:#666;font-size:12px;table-layout:fixed}
.sub_news caption{display:none}
.sub_news th{padding:15px 0;border-top:solid 2px #999;border-bottom:solid 1px #b2b2b2;background-color:#f1f1f4;color:#555;font-weight:bold;line-height:20px;vertical-align:top;font-weight: bold;}
.sub_news td{padding:15px 0;border-bottom:solid 1px #dcdcdc;text-align:center;line-height:18px;}

.sub_news .title{border-right:1px solid #dcdcdc; text-align:center;  font-size:16px;}
.sub_news .title .pic,.sub_news .title .new{margin:0 0 2px;vertical-align:middle}
.sub_news .title a.comment{padding:0;background:none;color:#f00;font-size:12px;font-weight:bold}
.sub_news tr.reply .title a{padding-left:16px;background:url(첨부파일/ic_reply.png) 0 1px no-repeat}
.sub_news .date,
.sub_news .hit{font-size: 12px;}
.sub_news .date,
.sub_news .num{    border-right: 1px solid #dcdcdc;}
.none-border .sub_news .title{border-right: none;}
.none-border .sub_news .date, .sub_news .num{border-right: none;}

/* ------------------------------------------------------------------------------- */

/* 개별 */
.sub-visual-area .paging-box .text-width-full {
 width: 66em;
}
.file-download img{
    width: 20px;
}
.sub_news .file-download{
    border-left: 1px solid #dcdcdc;
}
.page-number-wrap{
    position: relative;
}
.write{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #214465;
    color:#fff;
    padding: 0.8rem 2rem;
    border-radius: 30px;
    font-size: 1.6rem;
}

.gray-area {
    background: #f6f7f9;
}
.gray-area-2 {
    background: #FCFDFD;
}

.product-industrial .video-area {
    padding-left: 5%;
    box-sizing: border-box;
}
.product-industrial .video-area .list-box .text {
    font-size: 1.8rem;
    color: #888;
    margin-top: 0.8rem;
}
.product-industrial .video-area .list-box-1 {
    width: 25%;
    margin-right: 2rem;
}
.product-industrial .video-area .list-box-1 .img-box {
    box-sizing: border-box;
    border: 1px solid #cdcdcd;
}
.product-industrial .video-area .list-box-2 {
    width: 25%;
}
.product-industrial .video-area .list-box-2 .video-box {
    box-sizing: border-box;
    border: 1px solid #cdcdcd;
    width: 100%;
}
.product-industrial .video-area .list-box-2 .video-box video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.home-way-to-road .tap-menu-box-1 #tab1 .img-area .img-box {
    width: calc(50% - 1rem);
}
.home-way-to-road .tap-menu-box-1 #tab1 .text-img {
    width: 45%;
}
.home-way-to-road .tap-menu-box-1 #tab2 .text-img {
    width: 30%;
}

@media (max-width:1240px) {
    .sub-visual-area .paging-box .con {
        padding: 0;
    }
    .product-industrial .video-area .list-box .text {
        font-size: 10px;
    }
}

@media (max-width:768px) {
    .sub-content-area .title-box::after {
        width: 4px;
    }
    .sub-content-area .title-box {
        box-sizing: border-box;
        padding-left: 20px;
    }
    .sub-content-area .title-box .text-1 {
        font-size: 20px;
    }
    .scpd {
        padding: 40px 0 0 0;
    }
    .scpd-2 {
        padding: 40px 0 60px 0;
    }
    .sub-visual-area {
        height: 360px;
    }
    .sub-visual-area .text-box .text-2 {
        font-size: 28px;
        margin-top: 1.6rem;
    }
    .sub-content-area .sub-content-box {
        margin-top: 28px;
    }
    .tap-name-box-1 > li > a {
        padding: 12px 0;
        font-size: 12px;
    }
    .tap-menu-box-1 {
        margin-top: 28px;
    }
    .product-system {
        padding: 40px 0 0 0;
    }
    .product-system > .con {
        padding-bottom: 40px;
    }
    .table-wrap{
        margin-top:40px;
    }
    .table-box {
        font-size: 14px;
    }

    .table-box th {padding: 1rem;}
    .table-box td {padding: 1.5rem 0.6rem; min-width: 50px;}

    .page-box {
        box-sizing: border-box;
        padding-bottom: 48px;
    }
    .page-box .number {
        font-size: 12px;
        width: 20px;
        height: 20px;
        line-height: 20px;
    }
    .page-box .add-btn {
        transform: inherit;
        top: auto;
        bottom: 0;
    }
    .sub-visual-area .paging-box .depth-box .select-menu .text {
        font-size: 12px;
    }
    .sub-visual-area .paging-box .depth-box .depth-sub-box > li > a {
        font-size: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sub-visual-area .paging-box .home-box {
        display: none;
    }
}