@charset "utf-8";



/********************************공통 레이아웃********************************/


#wrap {
    width: 100%;
}

.inner {
    width: 1440px;
    margin: 0 auto;
    height: 100%;
}

.pc_only {
    display: block;
}

.moblile_only {
    display: none;
}

.btnbx  {display:flex;  margin-top: 6rem; 
    justify-content: center; gap:1rem;}



/* Skip Navigation */
#skipNav {
    position: relative;
    z-index: 99999;
}

#skipNav a {
    position: absolute;
    left: 0;
    top: -50px;
    width: 220px;
    height: 50px;
    line-height: 50px;
    background: #000;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: top .3s;
}

#skipNav a:focus,
#skipNav a:active {
    top: 0;
}







@media (max-width:1440px) {

    .inner {
        width: 100%;
        padding: 0 3%;
    }
}



@media (max-width:768px) {


    .pc_only {
        display: none;
    }

    .moblile_only {
        display: block;
        ;
    }
	.btnbx { margin-top: 3rem; }
    #skipNav {display: none; ;}
}

/********************************헤더********************************/


#areaHeader {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
    transition-duration: 0.4s;
    transition-timing-function: ease;
    background: transparent;
}

#areaHeader .headerWrap {
    position: relative;
    transition: all 0.2s ease;
    padding: 0 3%;
}

#areaHeader .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


#areaHeader .logo {
    display: block;
    width: 21.5rem;
    height: 5.3rem;
    background: url(../images/main/logo.svg)no-repeat;
    background-size: contain;
}

#areaHeader .logo img {
    width: 100%;
}


/* GNB */
#areaHeader .gnb_wrap {
    width: 100%;
}

#areaHeader .gnb_wrap > li {
    float: left;
}

#areaHeader .gnb_wrap > li > a {
    color: var(--text-white);
    font-weight: 400;
    font-size: var(--fz-20);
    display: inline-block;
    text-align: center;
    padding: 0 3rem;
    line-height: 14.5rem;
    border-bottom: 4px solid transparent;
    transition: all 0.3s ease;
}

#areaHeader .gnb_wrap > li > a:hover {
    border-bottom: 4px solid #764D2A;
    color: var(--primary-hover);
}

#areaHeader .gnb_wrap > li:hover > .gnb_submenu,
#areaHeader .gnb_wrap > li:focus > .gnb_submenu,
#areaHeader .gnb_wrap > li.on > .gnb_submenu {
    display: block;
}

#areaHeader .gnb_submenu {
    position: absolute;
    left: 0;
    top: 145px;
    width: 100%;
    height:320px; 
    display: none;
    background: url(../images/contents/menu_bg.svg)no-repeat top left #f8f8f8; background-size: contain;
   
    border-top: 1px solid #566B54;
}
#areaHeader .gnb_submenu .inner { display: flex;  gap:4rem; padding: 5rem 0;  }
#areaHeader .gnb_submenu h2 {font-size: var(--fz-40); margin-bottom: 2rem; font-weight: 600;  }
#areaHeader .gnb_mnbox {   width:  calc( 100% - 300px); ;margin-left: 5rem; display:flex;
align-items:flex-start;  flex-wrap: nowrap;
  
}
#areaHeader .gnb_mnbox > li {    } 
#areaHeader .gnb_mnbox > li > a { border: 1px solid #dbdbdb;  display: inline-block;   padding: 1rem 0; margin-right: 4rem; width: 250px; text-align: center; ;
    position: relative;
    font-size: 1.8rem;
    transition: all 0.1s ease
}

#areaHeader .gnb_mnbox > li:hover > a{
    font-weight:700;
    background-color:var(--primary-hover);
    color:#fff;
}

#areaHeader .gnb_mnbox .depth3  { margin-top: 2rem; display: flex; flex-direction: column ; gap:2rem;  }
#areaHeader .gnb_mnbox .depth3 a { position: relative; ; font-size: var(--fz-18); padding-left: 2rem;}
#areaHeader .gnb_mnbox .depth3 a::before {content: ''; position: absolute; top: 50%; transform: translateY(-50%) ; left:10px;   width: 6px; height: 6px; display: inline-block; background: var(--primary); }
#areaHeader .gnb_mnbox .depth3 a:hover { font-weight: 600; }

#areaHeader .gnb_mnbox > li:hover > a,
#areaHeader .gnb_mnbox > li:has(.depth3 a:hover) > a{
    font-weight:700;
    background-color:var(--primary-hover);
    color:#fff;
}





#areaHeader .web_all_btn {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(../images/main/all_menu.svg)no-repeat center;
    background-size: contain
}

#areaHeader .headerWrap:hover {
    background: rgba(255, 255, 255, 1);
}

#areaHeader .headerWrap:hover h1 a {
    background: url(../images/main/logo_bk.svg)no-repeat;
    background-size: contain;
}

#areaHeader .headerWrap:hover .all_sch_btn {
    background: url(../images/main/insta_icon_b.svg)no-repeat center;
}

#areaHeader .headerWrap:hover .gnb_wrap > li > a {
    color: var(--text-primary);
    transition: all 0.3s ease;
}

#areaHeader .headerWrap:hover .gnb_wrap > li > a:hover {
    font-weight: 600;
}


#areaHeader .headerWrap:hover .web_all_btn {
    background: url(../images/main/all_menu_bk.svg)no-repeat top;
    background-size: contain;
}

#areaHeader .headerWrap .snsbx {
    display: flex;
    gap: 3rem;
    align-items: center;
}

#areaHeader .headerWrap .snsbx > a {
    width: 32px;
    height: 32px;
}

#areaHeader .headerWrap .snsbx .blog {
    background: url(../images/main/sns_b_icon.svg)no-repeat center;
    background-size: contain;
}

#areaHeader .headerWrap .snsbx .insta {
    background: url(../images/main/sns_i_icon.svg)no-repeat center;
    background-size: contain;
}

#areaHeader .headerWrap:hover .blog {
    background: url(../images/main/sns_b_icon_bk.svg)no-repeat center;
    background-size: contain;
}

#areaHeader .headerWrap:hover .insta {
    background: url(../images/main/sns_i_icon_bk.svg)no-repeat center;
    background-size: contain;
}



#areaHeader .mobile_headerWrap {
    display: none;
}

.down {
    background: #fff !important;
    border-bottom: 0 !important;
    ;
}



#areaHeader.down {
    background: rgba(255, 255, 255, 1);
}

#areaHeader.down h1 a {
    background: url(../images/main/logo_bk.svg)no-repeat;
    background-size: contain;
}

#areaHeader.down .all_sch_btn {
    background: url(../images/main/insta_icon_b.svg)no-repeat center;
}

#areaHeader.down .gnb_wrap > li > a {
    color: var(--text-primary);
    transition: all 0.3s ease;
}

#areaHeader.down .gnb_wrap > li > a:hover {
    font-weight: 600;
}


#areaHeader.down .web_all_btn {
    background: url(../images/main/all_menu_bk.svg)no-repeat top;
    background-size: contain;
}

#areaHeader.down .headerWrap .snsbx .insta {
    background: url(../images/main/sns_i_icon_bk.svg)no-repeat center;
    background-size: contain;
}
#areaHeader.down .headerWrap .snsbx .blog {  background: url(../images/main/sns_b_icon_bk.svg)no-repeat center;
    background-size: contain; }



.subWrap #areaHeader .headerWrap {
    background: rgba(255, 255, 255, 1);
    border-bottom: 1px solid #dbdbdb;
}

.subWrap #areaHeader .headerWrap h1 a {
    background: url(../images/main/logo_bk.svg)no-repeat;
    background-size: contain;
}

.subWrap #areaHeader .headerWrap .all_sch_btn {
    background: url(../images/main/insta_icon_b.svg)no-repeat center;
}

.subWrap #areaHeader .headerWrap .gnb_wrap > li > a {
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.subWrap #areaHeader .headerWrap .gnb_wrap > li > a:hover {
    font-weight: 600;
}


.subWrap #areaHeader .headerWrap .web_all_btn {
    background: url(../images/main/all_menu_bk.svg)no-repeat top;
    background-size: contain;
}

.subWrap #areaHeader .headerWrap .snsbx .blog {
    background: url(../images/main/sns_b_icon_bk.svg)no-repeat center;
    background-size: contain;
}

.subWrap #areaHeader .headerWrap .snsbx .insta {
    background: url(../images/main/sns_i_icon_bk.svg)no-repeat center;
    background-size: contain;
}



@media (max-width:1440px) {


    #areaHeader .logo {
        width: 14.9305vw;
        height: 3.6805vw;
    }

    #areaHeader .headerWrap .snsbx {
        gap: 2rem;
    }

    #areaHeader .gnb_wrap > li > a {
        padding: 0 1.4rem;
    }

    #areaHeader .headerWrap .snsbx > a {
        width: 26px;
        height: 26px;
    }

    #areaHeader .web_all_btn {
        width: 26px;
        height: 26px;
    }

}



@media (max-width:960px) {


    #areaHeader .headerWrap {
        display: none;
    }

    #areaHeader .mobile_headerWrap {
        position: fixed;
        top: 0;
        display: flex;
        width: 100%;
        height: 70px;
        align-items: center;
        padding: 0 3%;
        border-bottom: 1px solid #dbdbdb;
		background: #fff; 
    }

    #areaHeader .logo {
        background:  url(../images/main/logo_bk.svg)no-repeat; background-size: cover;
    }
    #areaHeader.down h1 a { background-size: contain;}

    #areaHeader .mobile_headerWrap .web_all_btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 3%;
        background: url(../images/main/all_menu_bk.svg)no-repeat;
        background-size: contain;
        text-indent: -9999px;
        width: 32px;
        height: 32px;
    }



    #areaHeader .close {
        width: 32px;
        height: 32px;
        padding: 0;
        background: url(../images/main/mob_close.svg)no-repeat;
        background-size: contain;
        text-indent: -9999px
    }



    #areaHeader .mobile .mob_allbnt {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 3%;
        cursor: pointer;
        width: 50px;
        height: 50px;
        background: url(../images/main/all_menu_bk.svg) no-repeat;
        ;
        background-size: contain;
        border: none;
        color: #fff;
    }

    #areaHeader .mobile > h1 {
        text-align: center;
    }

    #areaHeader .mobile > h1 a {
        line-height: 0;
        display: block;
    }

    #areaHeader .mobile > h1 a img {
        width: 45%;
    }

    #areaHeader .mobile .mob_allbnt:hover {}

    #areaHeader .mobile .mobile_inner {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        background: #fff;
        height: 100%;
        margin-left: 100%;
        overflow-y: auto;
        z-index: 999;
    }

    #areaHeader .mobile_inner .top_m {
        display: flex;
        height: 70px;
        padding: 0 3%;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #dbdbdb;
    }

    #areaHeader .top_m a {
        font-size: 12px;
    }

    #areaHeader .accordion_wrap {}

    #areaHeader .que {
        position: relative;
        padding: 12px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        border-bottom: 1px solid #dbdbdb;
        color: #232323;
        font-weight: 600;
    }

    #areaHeader .que:after {
        content: '+';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 16px;
        font-size: 22px;
        font-weight: 100;
        color: #007BB0;
    }

    #areaHeader .accordion_wrap .on {
        background: #007BB0;
        color: #fff;
    }

    #areaHeader .accordion_wrap .on > div {
        color: #fff;
    }

    #areaHeader .anw {
        display: none;
        padding: 0 16px;
        overflow: hidden;
        background-color: #f9f9f9;
    }

    #areaHeader .anw a {
        display: block;
        padding: 10px;
        font-size: 14px;
        font-weight: 500;
        border-bottom: 1px solid #dbdbdb;
    }

    #areaHeader .accordion_wrap .on:after {
        color: #fff;
    }


    #areaHeader .anw .dot:before {
        width: 4px;
        height: 4px;
    }


    #areaHeader .mobile .mobile_inner li {
        margin: 5px 0;
    }

    #areaHeader .mobile .close:hover {}

    #areaHeader .mobile .mobile_inner li a {
        padding: 4px 12px;
    }

    #areaHeader .mobile .mobile_inner li a:hover {
        background: #fff;
    }

    #areaHeader .mobile_inner .mdep1 {
        font-size: 16px;
        font-weight: 700;
    }

    #areaHeader .mobile_inner .mdep2 {
        font-size: 14px;
        font-weight: 600;
        padding: 0 15px;
        margin: 0
    }

    #areaHeader .twodep_menu {
        display: none;
    }

    .back_bg {
        z-index: 8;
    }


}




@media (max-width:600px) {


    #areaHeader .logo {
        width: 35.8333vw;
        height: 8.83333vw;
    }



}





/********************************헤더 end********************************/



/********************************footer 시작********************************/


#areaFooter {
    background: #2E6B84;
    padding: 6rem 0;
}

.footerWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footerWrap > div:first-child {
    width: calc(100% - 210px);
    display: flex;
    flex-direction: column;
    gap: 3rem
}

.footerWrap > div:nth-child(2) {
    width: 210px;
    font-size: var(--fz-16);
}

.vistitbx {
    border: 1px solid #fff;
    color: #fff;
    text-align: center;
    line-height: 50px;
}

.sitebx {
    position: relative;
    border: 1px solid #fff;
    color: #fff;
    text-align: center;
    line-height: 50px;
}

.sitebx button {
    color: #fff;
}

.sitelink {
    display: none;
    overflow-y: auto;
    border: 1px solid #fff;
    width: 100%;
    max-height: 152px;
    position: absolute;
    bottom: 56px;
    left: 0;
    right: 0;
    z-index: 99;
    background: #27586D;
}

.sitelink a {
    color: #fff;
    border-bottom: 1px solid #fff;
    display: block;
}

.sitelink a:last-child {
    border-bottom: 0;
}

.sitelink a:hover {
    text-decoration: underline;
}



.persbx {}

.persbx a {
    position: relative;
    color: #fff;
    font-size: var(--fz-16);
    font-weight: 300;
    padding-right: 80px;
    font-weight: 500;
}

.persbx a:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
    width: 1px;
    height: 16px;
    display: inline-block;
    background: #fff;
}

.persbx a:last-child:before {
    display: none;
}

.footerWrap p {
    color: #fff;
    font-size: var(--fz-16);
    font-weight: 400;
}


.back_bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 15;
}




.footerWrap .ri_box {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.footerWrap .snsbx {
    display: flex;
    gap: 1.6rem;
    justify-content: flex-end;
}





.sitemapWrap {display: none; overflow: hidden; position: fixed; top:50%;  left:50%; transform: translate(-50%, -50%); width: 1400px; height: 700px;  padding: 54px 80px;  background: #fff;  z-index: 20;  box-sizing: border-box; overflow-y: auto; border: 1px solid #333; }

.sitemap_nav { }
.sitemap_dep1 {margin-top: 40px; border-top:1px solid #dbdbdb; }
.sitemap_dep1 > li  {display: flex; align-items: stretch; padding: 40px ; border-bottom:1px solid #dbdbdb;   }
.sitemap_dep1 > li > a {font-size: 2.6rem; width: 220px; font-weight: 600;   }
.sitemap_dep2 {display: flex; flex-wrap: wrap; align-items: stretch;     justify-content: flex-start; flex: 1 1 auto;  width: calc(100% - 300px); gap:40px 120px;  }
.sitemap_dep2 > li { }
.sitemap_dep2 > li > a {position: relative; font-size:1.8rem; font-weight: 500;  }
.sitemap_dep2 > li > a:before { content:''; display: block; width: 6px; height: 6px; background: var(--primary);  position: absolute; top:8px; left:-12px;}
.sitemap_dep3 {margin-top: 10px; }
.sitemap_dep3 > li > a {font-size: 16px; padding: 4px 0; text-align: left;  display: inline-block; }


.sitemap_close {position: absolute; top:44px ; right:50px; display: block; width: 36px;height: 36px; background: url(../images/main/mob_close.svg)no-repeat center; text-indent: -9999px; }






@media (max-width:768px) {

    #areaFooter  {padding: 3rem 0 ;}

    .footerWrap {
        display: flex;
        flex-direction: column-reverse;
        align-items: center; gap:2rem; 
    }

    .footerWrap > div:first-child {
        width: 100%;
    }

    .footerWrap p {
        letter-spacing: -0.04rem
    }

    .persbx {
        margin: 16px 0;
        display: flex;
        justify-content: center;
        gap: 20px;
    }


    .persbx a {
        padding-right: 0;
    }

    .persbx a:before {
        right: -10px;
        height: 12px;
    }


    .footerWrap > div:nth-child(2) {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 4rem;
    }

    .vistitbx {
        width: 100%;
        line-height: 40px;
        margin-top: 0;
    }

    .sitebx {
        width: 100%;
        margin-top: 0;
        line-height: 40px;
    }

    .footerWrap .img {
        text-align: center;
    }

    .sitelink {
        bottom: 50px;
        top: auto;
    }
.persbx { margin:0; }
    .footerWrap p { text-align: center; ;}
    .footerWrap > div:first-child { gap:1.6rem; }
    .footerWrap > div:nth-child(2) {margin-top: 0; }

}


/********************************footer end********************************/

/********************************board start********************************/





.board_schbx {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.board_schbx select {
    padding: 1rem 2rem;
    color: #888;
    border-radius: 50px;
    box-sizing: border-box;
    border: 1px solid #dbdbdb;
    font-size: 1.6rem;
    background: #F8F8F8;
}

.board_schbx input[type="text"] {
    border: 1px solid #dbdbdb;
    border-radius: 25px;
    background: #F8F8F8;
    overflow: auto;
    box-sizing: border-box; 
    font-size: var(--fz-16);
}

.board_schbx p {
    font-size: var(--fz-16);
}

.board_sch {
    border-radius: 20px;
    background: var(--primary-hover);
    text-align: center;
    display: inline-block;
    padding: 1rem 3rem;
    font-size: var(--fz-16);
    color: #fff;
}




/* photo_list */
.photo_list {
    overflow: hidden;
    padding: 4rem;
    display: flex;
    gap: 4.2rem;
    flex-wrap: wrap;
}

.photo_list li {
    width: calc(33.3% - 2.8rem);
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    ;
}

.photo_list .imgbx {
    display: block;
    overflow: hidden;
    line-height: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    border: 1px solid #dbdbdb;
}

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

.photo_list li:nth-child(3n+1) {
    margin-left: 0;
}

.photo_list .txtbx {
    padding: 0 !important
}

.photo_list .txtbx a {
    display: block;
    font-size: var(--fz-20);
    font-weight: 600;
    line-height: 1.4;
    transition: all 0.3s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 52px;
    margin-bottom: 1rem;
}

.photo_list .txtbx p {
    color: #333;
    font-size: var(--fz-18); 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
    margin-bottom: 0.6rem;

}

.photo_list .txtbx span {
    color: #999;
    font-size: var(--fz-16);
}

.photo_list > li:hover {
    border: 1px solid var(--primary);
    transition: border-color ease 1s;
}

.photo_list > li:hover .imgbx img {
    transform: scale(1.2);
    transition: transform 2s;
}

.photo_list .txtbx a:hover {
    color: var(--primary);
    font-weight: 700;
}

.photo_list .txtbx span.tag {
    color: var(--primary-600);
    margin-bottom: 0.6rem;
    display: inline-block;
}






/* board */
.boardList {clear:both;  width:100%;  margin-top: 1rem; overflow-x: auto; border-top: 1px solid #333; -webkit-overflow-scrolling: touch;   margin-top: 4rem; }
.boardList table { width:100%; 
min-width: 820px;
table-layout: fixed;

}


.boardList tr th {  padding: 1.8rem 1rem; border-bottom:1px solid #333; text-align:center; color:#333;  vertical-align: middle;  font-size: var(--fz-18); font-weight: 600;  }
.boardList tr td { padding: 1.8rem 1rem; border-bottom:1px solid #dbdbdb; text-align:center;  vertical-align: middle; font-size: var(--fz-18); line-height:1.5; }

.boardList tr td a {font-size:1.8rem; width:100%;  display: block; 
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;   }
.boardList tr td a:hover {font-weight: 600; color: var(--primary-hover) }
.boardList tr td:nth-child(2) { max-width: 600px; }














/*페이지넘버*/
.numBX {
    margin-top: 60px;
    text-align: center;
}

.numBX a {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    line-height: 40px;
    text-align: center;
    font-size: 1.6rem;
    cursor: pointer;
}

.numBX a:hover {
    background: var(--primary);
    color: #fff;
}

.numBX .on {
    background: var(--primary);
    color: #fff;
}

.cases_num:before {
    content: ' ';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 4px solid var(--primary);
    margin-right: 4px;
    line-height: 16px;
    vertical-align: middle;
}





/*  view*/
.boardview {
    clear: both;
    text-align: left;
    border-top: 1px solid #333;
    width: 100%;
    margin-top: 1rem;
}

.boardview .titBox {
    position: relative;
    padding: 2.4rem 0;
    border-bottom: 1px solid #333;
    background: var(--gray-100);
}

.boardview .titBox .title {
    font-size: var(--fz-28);
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    margin-bottom: 10px;
}

.boardview .titBox .info {
    text-align: center
}

.boardview .titBox .info span {
    position: relative;
    margin-left: 12px;
    padding-left: 14px;
    font-size: var(--fz-16);
    color: #8c8c8c;
}

.boardview .titBox .info span:before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    width: 1px;
    height: 12px;
    background: #cbcbcb;
}

.boardview .titBox .info span:first-child { margin-left:0; padding-left:0;  }
.boardview .titBox .info span:first-child:before {
    display: none;
}



.boardWrap .view_txt { min-height: 50vh; padding: 3rem; font-size: var(--fz-18); }
.boardWrap .view_txt img{ width: 100%; }
.boardWrap .file {border-top: 1px solid #dbdbdb; }
.boardWrap .file ul {float:left;}
.boardWrap .file li {font-size:var(--fz-16);}
.boardWrap .file dl {overflow: hidden;}
.boardWrap .file dd  {float: left;}
.boardWrap .file dd a {display: block; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fz-16);} 


.boardWrap dl {width:100%; padding:2rem 0; border-bottom:1px solid #e2e2e2; overflow:hidden;}
.boardWrap dt {position:relative; float:left; width:15rem; text-align:center; font-size:var(--fz-16); font-weight:bold;}

.boardWrap dt.prev:after {content:''; position:absolute; top:8px; right:40px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:8px solid #cbcbcb; clear:both;}
.boardWrap dt.next:after {content:''; position:absolute; top:9px; right:40px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid #cbcbcb; clear:both;}
.boardWrap dd {font-size:1.6rem; color:#333}
.boardWrap .prevBox dd{ padding:0 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:var(--fz-16);  }
.boardWrap img {width: auto; height: auto;  display: inline-block;;}








@media (max-width:1200px) {


    .photo_list {
        gap: 3rem;
        padding: 3rem;
    }

    .photo_list li {
        width: calc((100% - 3rem) / 2);
    }

    .photo_list .txtbx a {
        font-size: 1.8rem;
    }

}



@media (max-width:768px) {



    .board_sch { padding: 0.4rem 2rem}

    .board_schbx {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .bd_sch {
        width: 100%;
        display: flex;
        gap: 1rem;
    }

    .board_schbx input[type="text"] {
        flex: 1;
        min-width: 0;
        width: 100%;
        padding: 0.6rem 1.2rem; 

    }

    .photo_list {
        padding: 2rem 0;
         gap: 2rem;
    }

    .photo_list li {
        width: 100%;
        padding: 2rem;
    }

    .photo_list .txtbx a {
        font-size: 1.7rem;
        min-height: auto;
    }

    .photo_list .txtbx p {
        font-size: 1.5rem;
    }

    .photo_list .txtbx span {
        font-size: 1.4rem;
    }

    .numBX {
        margin-top: 4rem;
    }

    .numBX a {
        width: 3.6rem;
        height: 3.6rem;
        line-height: 3.6rem;
    }


	.boardWrap .view_txt { padding: 2rem; }

	.boardWrap dl { display:flex; gap:2rem;  padding: 2rem;  }
	.boardWrap dt { width: 18%; }
	.boardWrap dt.prev:after { right: -0.4rem;  top: 0.6rem; }
	.boardWrap dt.next:after { right: -0.4rem;  top: 0.6rem; }
	.boardWrap .prevBox dd { width: calc( 100% - 20%) }
	.boardview .titBox .info span {font-size: 1.2rem; }
	.boardview .titBox .info span:before { top:0; }




}





/********************************board end********************************/