@charset "utf-8";

/* ==========================================================================
    COMMON
    ========================================================================== */


/*라이트박스*/
#lightbox {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    -webkit-filter: none !important;
    z-index:1000000; cursor: pointer;
}
#lightbox img {display: block; position: absolute;}
#lightbox .lightbox-caption {position:absolute; width:100%; bottom:16%; left:0;}
#lightbox .lightbox-caption p {color:#fff; text-align:center;}
.lightbox-button {
    position: absolute;
    z-index: 9999; background: no-repeat center center;
    opacity: 0.7;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
.lightbox-button:hover, .lightbox-button:focus {
    opacity: 1;
}
.lightbox-close {
    width: 40px; height: 40px;
    top: 20px; right: 20px;
    background: url("../img/common/close.png") no-repeat; background-size:100%;
}
.lightbox-next {
    width: 42px; height: 84px;
    top: 50%; right: 20px;
    background-image: url('../img/main/visualslide_next_white.png'); background-size:100%;
}
.lightbox-previous {
    width: 42px; height: 84px;
    top: 50%; left: 20px;
    background-image: url('../img/main/visualslide_prev_white.png'); background-size:100%;
}

@media screen and (max-width:768px){
	.lightbox-close {width: 32px; height: 32px; }
	.lightbox-next {width: 36px; height: 72px; right: 10px;}
	.lightbox-previous {width: 36px; height: 72px; left: 10px;}
}
@media screen and (max-width:480px){
	.lightbox-next {display:none;}
	.lightbox-previous {display:none;}
}














/* ==========================================================================
    회사소개
    ========================================================================== */

/*공통 타이틀*/
.main-title {font-size: 46px; font-weight: 700; line-height: 1.25em; color: #999; margin-bottom: 60px;}
.main-title span {color: #fff;}

@media (width <= 1280px) {
    .main-title {font-size: 30px; margin-bottom: 40px;}
}
@media (width <= 1024px) {

}
@media (width <= 860px) {

}
@media (width <= 640px) {
    .main-title {font-size: 22px; margin-bottom: 30px;}
}




/*회사소개*/
.pg-about {}
.pg-about .intro {display: flex; gap: 60px;}
.pg-about .intro .left {width: 40%; display: flex; flex-direction: column; gap: 40px;}
.pg-about .intro .left .title {font-size: 28px; font-weight: 700; line-height: 1.3em;}
.pg-about .intro .left .title span {color: var(--point-color01);}
.pg-about .intro .left .desc {}
.pg-about .intro .left .name {font-weight: 700;}
.pg-about .intro .left .name span {font-size: 28px; display: inline-block; margin-left: 12px;}
.pg-about .intro .right {width: 60%; display: flex; gap: 20px; align-items: flex-start;}
.pg-about .intro .right .image {background: #ccc; border-radius: var(--radius03); overflow: hidden;}
.pg-about .intro .right .intro-image-01 {width: 75%; aspect-ratio: 670 / 540; background: url('/assets/site/img/contents/intro-image-01.webp') no-repeat center / 1130px auto;}
.pg-about .intro .right .intro-image-02 {width: 25%; aspect-ratio: 220 / 540; margin-top: 60px; background: url('/assets/site/img/contents/intro-image-02.webp') no-repeat center / 1130px auto;}

.pg-about .list {margin-top: 120px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;}
.pg-about .list .item {width: calc((100% - 40px) / 3 ); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; padding: 64px 48px; background: #212121; border-radius: var(--radius03);}
.pg-about .list .item .ico {}
.pg-about .list .item .ico img {width: 100px;}
.pg-about .list .item .info {}
.pg-about .list .item .info .tit {font-size: 24px; font-weight: 700;}
.pg-about .list .item .info .desc {color: #999;}

@media (width <= 1420px) {
    .pg-about .intro {gap: 40px;}
    .pg-about .intro .left {width: 50%;}
    .pg-about .intro .right {width: 50%;}
    .pg-about .intro .right .intro-image-01 {aspect-ratio: 670 / 750;}
    .pg-about .intro .right .intro-image-02 {aspect-ratio: 220 / 750; margin-top: 40px;}
}
@media (width <= 1280px) {
    .pg-about .intro {flex-direction: column;}
    .pg-about .intro .left {order: 2; width: 100%; gap: 20px;}
    .pg-about .intro .left .title {font-size: 24px;}
    .pg-about .intro .left .title br {display: none;}
    .pg-about .intro .left .desc {color: #999;}
    .pg-about .intro .left .name span {font-size: 20px;}
    .pg-about .intro .right {order: 1; width: 100%;}
    .pg-about .intro .right .intro-image-01 {width: 100%; aspect-ratio: 670 / 350; background: url('/assets/site/img/contents/intro-image-01.webp') no-repeat center / cover;}
    .pg-about .intro .right .intro-image-02 {display: none;}
    .pg-about .list {margin-top: 60px; justify-content: flex-start;}
    .pg-about .list .item {padding: 60px 32px; gap: 16px; width:calc((100% - 40px) / 3 );}
    .pg-about .list .item .ico img {width: 80px;}
    .pg-about .list .item .info .tit {font-size: 18px;}
}
@media (width <= 1024px) {
    .pg-about .intro {gap: 30px;}
    .pg-about .intro .left .title {font-size: 18px;}
    .pg-about .intro .left .name span {font-size: 18px;}

}
@media (width <= 860px) {
    /*2개*/
    .pg-about .list .item {width:calc((100% - 20px) / 2 ); padding: 56px;}

}
@media (width <= 640px) {
    /*1개*/
    .pg-about .list .item {width: 100%; padding: 30px 20px;}

}







/*연혁*/

/* history */
.history{
    --gap-in-history: 16px;
    position: relative;
    & > .wrap{}
    & > .progress{
        position: absolute; left: 50%; top: 0px; bottom: 93px; width: 2px; height: 100%; background: #999;
        & .line{position: absolute; left: -2px; top: 0; height: 0%; width: 5px; background: var(--point-color01); border-radius: 0 0 5px 5px;}
    }
    & .year{
        display: flex; flex-wrap: wrap; padding-bottom: 162px;
        & .slogan{
            width: 50%; padding: 0 30px 0 0;
            font-size: 42px; font-weight: 600; line-height: 1.45; color: rgba(255,255,255,0.5);
            & strong{font-weight: 700; color: #fff;}
        }
        & .con{
            width: 50%; padding-left: 9.453%; position: relative;
            & > .title{
                position: relative; z-index: 1; font-size: 48px; font-weight: 700; line-height: 1.1;
                &:before{content: ""; position: absolute; top: 29px; left: -24.5%; width: 19px; height: auto; aspect-ratio: 1;  border-radius: 50%; border: 5px solid var(--point-color01); background: #fff;}
                & span[data-text]{position: relative;}
                & span[data-text]:after{content: attr(data-text); position: absolute; left: 0; width: 0; white-space: nowrap; overflow: hidden; transition: width 1.0s 0.2s;}
                & span[data-color="white"]:after{color: #fff;}
                & span[data-color="blue"]:after{color: var(--point-color01);}
                &.on{
                    & span[data-text]:after{width: 100%;}
                }
            }
            & > .text{
                display: flex; flex-direction: column; gap: var(--gap-in-history); padding: 30px 0 0;
                & .month{
                    display: flex; flex-wrap: wrap; font-weight: 400; align-items: center; gap: 24px;
                    & > dt{flex: 0 0 auto; width: 5px; height: 5px; background: #fff; border-radius: 50%;}
                    & > dd{
                        flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-in-history);
                        & .item{
                            display: flex; flex-direction: column; gap: var(--gap-in-history);
                            & p{}
                            & .sublist{
                                display: flex; flex-direction: column; gap: var(--gap-in-history); word-break: break-all; overflow-wrap: break-word;

                                & > li{position: relative; padding: 0 0 0 14px; font-weight: var(--fwr); color: rgba(255,255,255,0.6);}
                                & > li:before{content: ""; position: absolute; top: 9px; left: 0; width: 4px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #a6b1bf;}
                            }
                        }
                    }
                }
            }
        }
    }
    & .year:last-child{padding-bottom: 0;}

    @media (width <= 1280px){
        & > .progress{
            top: -81px; bottom: 84px;
            & .line{

            }
        }
        & .year{
            & .slogan{
                font-size: 38px; line-height: 1.3; padding: 10px 30px 0 0;
            }
            & .con{
                padding-left: 40px;
                & > .title{
                    font-size: 40px; line-height: 1;
                    &:before{left: -49px; top: 10px;}
                }
                & > .text{
                    & .month{
                        & > dt{

                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px){

    }
    @media (width <= 640px){
        --gap-in-history: 8px;
        & > .progress{
            left: 20px; top: 20px; top: -65px; bottom: 63px;
            & .line{
                width: 3px; left: -1px;
            }
        }
        & .year{
            padding-bottom: 80px;
            & .slogan{display: none;}
            & .con{
                width: 100%; padding-left: 30px;
                & > .title{ font-size: 30px;
                    &:before{width: 12px; border-width: 3px; top: 14px; left: -30px;}
                }
                & > .text{
                    padding: 20px 0 0;
                    & .month{
                        font-size: 14px; gap: 12px;
                        & > dt{

                        }
                    }
                }
            }
        }
    }
}









/*경영방침*/
.pg-manage {}
.pg-manage .list {display: flex; flex-wrap: wrap; gap: 20px;}
.pg-manage .list .item {width: calc((100% - 20px) / 2); background: rgba(255,255,255,.1); border-radius: var(--radius03); padding: 56px 48px;}
.pg-manage .list .item {display: flex; flex-direction: row; align-items: flex-end; gap: 10px;}
.pg-manage .list .item .ico {width: 100px;}
.pg-manage .list .item .info {flex: 1;}
.pg-manage .list .item .info .tit {font-size: 26px; font-weight: 700; margin-bottom: 8px;}
.pg-manage .list .item .info .desc {color: #999;}
.pg-manage .org {margin-top: 180px; text-align: center;}
.pg-manage .org img.pc {display: block; width: 100%; max-width: 1300px;}
.pg-manage .org img.m {display: none;}
@media (width <= 1280px) {
    .pg-manage .list .item {padding: 36px 30px; gap: 20px; align-items: flex-start;}
    .pg-manage .list .item .ico {width: 80px;}
    .pg-manage .list .item .info .tit {font-size: 20px;}
    .pg-manage .list .item .info .desc br {display: none;}
    .pg-manage .org {margin-top: 40px;}
}
@media (width <= 1024px) {
    .pg-manage .list .item {width: 100%;}
    .pg-manage .list .item .ico {width: 65px;}
    .pg-manage .list .item .info .tit {font-size: 18px;}
}
@media (width <= 860px) {
    .pg-manage .list .item {flex-direction: column; padding: 32px 20px;}
    .pg-manage .list .item .ico {order: 1;}
    .pg-manage .list .item .info {order: 2;}
    .pg-manage .list .item .ico {width: 60px;}
    .pg-manage .org img.pc{display: none;}
    .pg-manage .org img.m {display: block;}
}
@media (width <= 640px) {
    .pg-manage .org {margin-top: 30px;}
}





/*주요고객사*/
.pg-clients {}
.pg-clients .list {display: flex; flex-wrap: wrap; border-top: 1px solid rgba(153,153,153,.6); border-left: 1px solid rgba(153,153,153,.6);}
.pg-clients .list .item {width: 25%;}
.pg-clients .list .item {display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(153,153,153,.6); border-bottom: 1px solid rgba(153,153,153,.6); box-sizing: border-box;}
/* .pg-clients .list .item img {width: 90%; max-width: 250px;} */

@media (width <= 1280px) {

}
@media (width <= 1024px) {
    .pg-clients .list .item {width: 33.3%;}
}
@media (width <= 860px) {

}
@media (width <= 640px) {
    .pg-clients .list .item {width: 50%;}
}



























/* ==========================================================================
    제품소개
    ========================================================================== */
.pg-product .list ul {display: flex; flex-wrap: wrap; gap: 20px;}
.pg-product .list ul li {width: calc((100% - 40px) / 3);  border-radius: var(--radius03); }
.pg-product .list ul li a {padding: 56px 48px; background: #212121; display: flex; justify-content: center; flex-direction: column; transition: 0.35s all; gap: 20px;border-radius: var(--radius03); border: 1px solid #212121; box-sizing: border-box;}
.pg-product .list ul li a:hover {border: 1px solid var(--point-color01); background: #353535;}
.pg-product .list ul li .thumb {text-align: center;}
.pg-product .list ul li .thumb img {width: 244px;}
.pg-product .list ul li .info .tit {font-size: 24px; font-weight: 600; margin-bottom: 24px;}
.pg-product .list ul li .info p.dot {color: #999; padding: 0 0 0 15px; position: relative;}
.pg-product .list ul li .info p.dot::before {content: ''; display: block; width: 3px; height: 3px; background: #999; position: absolute; top: 8px; left: 0;}
.pg-product .list ul li .info p.dot:not(:last-child) {margin-bottom: 8px;}

@media (width <= 1420px) {

}
@media (width <= 1280px) {
    .pg-product .list ul li .thumb img {width: 220px;}
    .pg-product .list ul li a {padding: 56px 32px;}
}
@media (width <= 1024px) {
    .pg-product .list ul li {width: calc((100% - 20px) / 2);}
    .pg-product .list ul li .info .tit {margin-bottom: 12px;}
}
@media (width <= 860px) {
    .pg-product .list ul {gap: 12px;}
    .pg-product .list ul li {width: calc((100% - 12px) / 2);}
    .pg-product .list ul li a {gap: 16px; padding: 36px 24px;}
    .pg-product .list ul li .thumb img {width: 200px;}
    .pg-product .list ul li .info .tit {font-size: 20px;}
}
@media (width <= 640px) {
    .pg-product .list ul li {width: 100%}
    .pg-product .list ul li a {gap: 10px; padding: 32px 20px;}
    .pg-product .list ul li .thumb img {width: 145px;}
    .pg-product .list ul li .info .tit {font-size: 18px;}
    .pg-product .list ul li .info p.dot {padding: 0 0 0 8px;}
}




/* ==========================================================================
    솔루션
    ========================================================================== */

.pg-solution {}
.pg-solution .top {display: flex;}
.pg-solution .top .image {position: relative; width: 100%; height: 480px; margin-bottom: 60px; border-radius: var(--radius03); overflow: hidden;}
.pg-solution .top .image img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
.pg-solution .top .info {display: flex; gap: 40px;}
.pg-solution .top .info .title {width: 610px; font-size: 42px; color: #999; font-weight: 700; line-height: 1.25em;}
.pg-solution .top .info .title span {color: var(--basic-color);}
.pg-solution .top .info .desc {flex: 1; padding: 12px 0 0 0;}

.pg-solution .marquee-wrap {overflow: hidden; width: 100%; margin-top: 60px;}
.pg-solution .marquee-inner {display: flex; width: max-content; flex-shrink: 0; animation: marquee 120s linear infinite;}
.pg-solution .marquee-inner .marquee-list {display: flex; flex-shrink: 0; gap: 48px; padding-right: 100px;}
.pg-solution .marquee-inner .marquee-item {display: flex; flex-direction: row; align-items: center; flex-shrink: 0; font-family: "handel-gothic", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 60px; white-space: nowrap; color: #212121;}
.pg-solution .marquee-inner .marquee-item::after {content: '';  display: block; width: 10px; height: 10px; background: #212121; border-radius: 50%; margin-left: 48px;}
@keyframes marquee {
    from {transform: translate3d(0, 0, 0);}
    to {transform: translate3d(-50%, 0, 0);}
}

.pg-solution .list {margin-top: 100px;}
.pg-solution .list .title {font-size: 42px; color: #fff; font-weight: 700;}
.pg-solution .list ul {display: flex; flex-wrap: wrap; gap: 20px; margin-top: 60px;}
.pg-solution .list ul li {width: calc((100% - 60px) / 4); aspect-ratio: 365 / 320; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; text-align: center; background: #212121; border-radius: var(--radius03);}
.pg-solution .list ul li .ico img {width: 100px; aspect-ratio: 1 / 1;}
.pg-solution .list ul li .info {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px;}
.pg-solution .list ul li .info .num {width: 100px; background: var(--point-color01); font-size: 13px; border-radius: var(--radius03); font-family: "handel-gothic", sans-serif; text-transform: uppercase}

@media (width <= 1520px) {

}
@media (width <= 1280px) {
    .pg-solution .top .image {height: 360px; margin-bottom: 30px;}
    .pg-solution .top .info {flex-direction: column; gap: 15px;}
    .pg-solution .top .info .title {width: 100%; font-size: 30px;}
    .pg-solution .top .info .desc {padding: 0;}

    .pg-solution .marquee-wrap {margin-top: 30px;}
    .pg-solution .marquee-inner .marquee-list {gap: 24px;}
    .pg-solution .marquee-inner .marquee-item {font-size: 45px;}
    .pg-solution .marquee-inner .marquee-item::after {margin-left: 24px;}

    .pg-solution .list {margin-top: 50px;}
    .pg-solution .list .title {font-size: 30px;}
    .pg-solution .list ul {margin-top: 30px;}
    .pg-solution .list ul li {width: calc((100% - 40px) / 3);}
    .pg-solution .list ul li .ico img {width: 90px;}
}
@media (width <= 1024px) {

}
@media (width <= 860px) {
    .pg-solution .top .image {height: 300px;}
    .pg-solution .list ul li {width: calc((100% - 20px) / 2); aspect-ratio: auto; padding: 56px;}
    .pg-solution .list ul li .ico img {width: 80px;}
}
@media (width <= 640px) {
    .pg-solution .top .image {height: 220px;}
    .pg-solution .top .info {gap: 10px;}
    .pg-solution .top .info .title {font-size: 22px;}

    .pg-solution .list .title {font-size: 22px;}
    .pg-solution .list ul li {padding: 48px; width: 100%;}
    .pg-solution .list ul li .ico img {width: 65px;}

}


/* ==========================================================================
    고객지원
    ========================================================================== */

.pg-inquiry {}
.pg-inquiry .main-grid {display: flex; gap: 120px;}
.pg-inquiry .main-grid .left {width: 572px;}
.pg-inquiry .main-grid .left .top .title {font-size: 42px; font-weight: 700; color: #999; line-height: 1.25em;}
.pg-inquiry .main-grid .left .top .title span {color: #fff;}
.pg-inquiry .main-grid .left .top .desc {margin-top: 10px;}
.pg-inquiry .main-grid .left .bottom {margin-top: 60px;}
.pg-inquiry .main-grid .left .bottom .item {display: flex; gap: 12px;}
.pg-inquiry .main-grid .left .bottom .item span {font-weight: 700; color: #999;}

.pg-inquiry .main-grid form {flex: 1;}
.pg-inquiry .form_wrap .form_table tbody tr th {color: var(--basic-color);}
.pg-inquiry .form_wrap .form_table input,
.pg-inquiry .form_wrap .form_table textarea {background: #222222; border: 0px; color: #fff; border-radius: 8px; overflow: hidden;}
.pg-inquiry .form_wrap .form_table select {
    border: 0px; color: #fff;
    background-color: #222222;
    background-position: calc(100% - 20px) center;
    background-image:  url('/assets/site/img/common/form_sel_arrow_w.png');
    background-repeat: no-repeat;
}
.pg-inquiry .form_wrap .form_table textarea {padding: var(--form-padding);}
.pg-inquiry .form_wrap .form_table input::placeholder,
.pg-inquiry .form_wrap .form_table textarea::placeholder {color: #999;}

.pg-inquiry .form_wrap .form_table .email {display: flex; gap: 10px;}
.pg-inquiry .form_wrap .form_table .email input,
.pg-inquiry .form_wrap .form_table .email select {width: 50%;}
.pg-inquiry .form_wrap .custom-file {width: 100%; height: 55px; line-height: 55px;}
.pg-inquiry .form_wrap .custom-file label {width: 100%; height: var(--input-height); line-height: var(--input-height); background: #222222; border: 0; border-radius: 8px; overflow: hidden; padding: 0 var(--form-padding);}
.pg-inquiry .form_wrap .custom-file-btn {line-height: var(--input-height); background: #555; border-radius: 0 8px 8px 0;}
.pg-inquiry .form_wrap .info_list li {color: #999;}
.pg-inquiry .form_wrap .agree {background: #222222; border: 0; border-radius: 8px; overflow: hidden; padding: var(--form-padding); height: auto;}
.pg-inquiry .form_wrap .checkbox_style input:checked + label {
    font-weight: 600; color: var(--point-color02);
}
.pg-inquiry .form_wrap .checkbox_style input:checked + label::before {
    background: var(--point-color02); border: 0;
}
.pg-inquiry .form_wrap .btn_wrap {text-align: left;}
.pg-inquiry .form_wrap .btn_wrap .btn {
    background: var(--point-color01);
}
@media (width <= 1420px) {
.pg-inquiry .main-grid {gap: 40px;}
.pg-inquiry .main-grid .left {width: 40%;}
}
@media (width <= 1280px) {
.pg-inquiry .main-grid {flex-direction: column;}
.pg-inquiry .main-grid .left {width: 100%;}
.pg-inquiry .main-grid .left .top .title {font-size: 30px;}
.pg-inquiry .main-grid .left .top .title br {display: none;}
.pg-inquiry .main-grid .left .bottom {margin-top: 20px;}

}
@media (width <= 1024px) {

}
@media (width <= 860px) {
    .pg-inquiry .form_wrap .btn_wrap .btn {width: 100%;}


}
@media (width <= 640px) {
.pg-inquiry .main-grid .left .top .title {font-size: 22px;}
.pg-inquiry .form_wrap .form_table .email {flex-direction: column;}
.pg-inquiry .form_wrap .form_table .email input,
.pg-inquiry .form_wrap .form_table .email select {width: 100%;}

}



/* 게시판 커스텀 */
.pg-notice .bo_top .total {color: #fff;}
.pg-notice .bo_top .bo-search select {border: 0; background: #222 url('/assets/site/img/common/form_sel_arrow_w.png') no-repeat calc(100% - 20px) center; color: #fff;}
.pg-notice .bo_top .bo-search input[type="text"] {border: 0; background: #222; color: #fff;}
.pg-notice .bo_top .bo-search input[type="text"]::placeholder {color: #999;}
.pg-notice .bo_top .bo-search input[type="submit"] {background: #555;}
.pg-notice .bo_basic_list th {background: #222;}
.pg-notice .bo_basic_list tbody tr:hover {background: #111;}
.pg-notice .bo_basic_list tbody td {border-bottom: 1px solid rgba(153, 153, 153, 0.5);}
.pg-notice .bo_basic_list tbody td.tda span.notice {background: var(--point-color01);}
.pg-notice .bo-pagenate .paging ol li a {border: 0;}
.pg-notice .bo-pagenate .paging ol li a.on {color: #fff; font-weight: 700;}
.pg-notice .bo-pagenate .paging a {border: 0; background-image: none;}
.pg-notice .bo-pagenate .paging .first {
    -webkit-mask: url('/assets/site/img/board/arr-paging-first.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask: url('/assets/site/img/board/arr-paging-first.svg') no-repeat center;
    mask-size: contain;
    background-color: #fff;
}
.pg-notice .bo-pagenate .paging .prev {
    -webkit-mask: url('/assets/site/img/board/arr-paging-prev.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask: url('/assets/site/img/board/arr-paging-prev.svg') no-repeat center;
    mask-size: contain;
    background-color: #fff;
}
.pg-notice .bo-pagenate .paging .next {
    -webkit-mask: url('/assets/site/img/board/arr-paging-next.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask: url('/assets/site/img/board/arr-paging-next.svg') no-repeat center;
    mask-size: contain;
    background-color: #fff;
}
.pg-notice .bo-pagenate .paging .end {
    -webkit-mask: url('/assets/site/img/board/arr-paging-last.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask: url('/assets/site/img/board/arr-paging-last.svg') no-repeat center;
    mask-size: contain;
    background-color: #fff;
}
.pg-notice .bo_basic_view {border: 0;}
.pg-notice .bo_basic_view .view-header {background-color: #222; border: 0;}
.pg-notice .bo_basic_view .view-header .view-title {font-size: 20px;}
.pg-notice .bo_basic_view .view-header .view-title strong {color: #fff; font-size: 20px;}
.pg-notice .bo_basic_view .view-header .view-date {color: #fff;}
.pg-notice .bo_basic_view .view-nav {color: #fff; border-top: 1px solid rgba(153, 153, 153, 0.5);}
.pg-notice .bo_basic_view .view-nav .nav-item {border-bottom: 1px solid rgba(153, 153, 153, 0.5);}
.pg-notice .bo_basic_view .view-nav .nav-label {background-color: #222;}
.pg-notice .bo_basic_view .bbs_file_t {background: #222;}
.pg-notice .bo_basic_view .bbs_file_t .bbs_file_wrap span a:before {height: 19px; background: url("/assets/site/img/board/icon_document.png") no-repeat center / cover;}

.pg-notice .btn_wrap .btn {border: 0; background: #555;}

@media (width <= 1420px) {

}
@media (width <= 1280px) {

}
@media (width <= 1024px) {

}
@media (width <= 860px) {
.pg-notice .bo_basic_list {border-top: 1px solid rgba(153, 153, 153, 0.5);}
.pg-notice .bo_basic_list tbody tr {border-bottom: 1px solid rgba(153, 153, 153, 0.5);}
.pg-notice .bo_basic_list tbody td {border-bottom: 0;}
.pg-notice .btn_wrap .btn {width: 100%;}
}
@media (width <= 640px) {
    .bo_basic_view .bbs_file_t .acc {width: 100%; margin-bottom: 10px;}
    .bo_basic_view .bbs_file_t .acc::after {content: none;}

}