/* BOARD */
.boardSearch { display: flex; margin-top: 100px; height: 60px; }
.box-search { display: flex; width: 100%; border-bottom: 1px solid #dfdfdf; }
.box-search .box-input.submit { width: 20px; }
.box-search .box-input.submit button i { display: block; width: 20px; height: 20px; background: url(/images/board/ico_board_search.png) no-repeat center; }

.formBoard .box-select { margin-right: 4%; max-width: 440px; }
.formBoard .box-select.short { max-width: 220px; }


.boardList { margin-top: 38px; }
.boardList ul {  }
.boardList ul li { display: flex; align-items: center; padding: 10px 30px; min-height: 100px; border-bottom: 1px solid #dfdfdf; }
.boardList ul li.head { height: 82px; }
.boardList ul li .col { font-size: 18px; color: #333; font-weight: 300; }
.boardList ul li.head .col { font-size: 20px; color: #000; font-weight: 500; letter-spacing: 0; }
.boardList ul li:nth-child(2) { border-top: 2px solid #000; }


.boardList.news .col.title { flex: 1; width: 100%; line-height: 1.4; }
.boardList.news .col.date { flex: none; width: 150px; text-align: center; }
.boardList.news .col.down2 { flex: none; margin-right: 120px; width: 100px; text-align: center; }
.boardList.news .col.provide { flex: none; margin-right: 120px; width: 150px; text-align: center; }


.boardGallery { margin-top: 70px; }
.boardGallery ul { display: flex; flex-wrap: wrap; }
.boardGallery ul li { margin-left: 20px; margin-bottom: 40px; width: calc(33.33% - 10px); max-width: 413px; }
.boardGallery ul li:first-child { margin-left: 0; }
.boardGallery ul li:nth-child(3n + 1) { margin-left: 0; }
.boardGallery ul li img { width: 100%; height: 100%; object-fit: cover;}
.boardGallery ul li .box-image { aspect-ratio: 16 / 9; position: relative; border-radius: 20px; border: 1px solid #D9D9D9; overflow: hidden;}
.boardGallery.media ul li .box-image:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/common/ico_play.png); background-position: center; background-repeat: no-repeat; }
.boardGallery.media ul li .box-image.brochure:after {display:none;}
.boardGallery ul li .box-txt { position: relative; padding: 20px 10px;  }
.boardGallery ul li .category { margin-bottom: 15px; font-size: 18px; color: #ea002c; }
.boardGallery ul li .title { font-size: 20px; color: #000000; font-weight: 500; line-height: 1.5; }
.boardGallery ul li .title > a { display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.5; overflow: hidden; height: 4.5em; }
.boardGallery ul li .title.en {font-size: 16px;}
.boardGallery ul li .title.en > a {height: 6em; line-clamp: 4; -webkit-line-clamp: 4;}

.boardGallery ul li .title::after {content: ''; display: block; width: 84px; height: 1px; margin-top: 16px; border-top: 1px solid #ea002c;}
.boardGallery ul li .content { margin-top: 18px; font-size: 14px; color: #555555; font-weight: 300; line-height: 1.6; }
.boardGallery ul li .date { font-family: "NotoSansCJKkr" , sans-serif; margin-top: 16px; font-size: 16px; color: #888888; font-weight: 300; letter-spacing: -0.128px;}
.boardGallery ul li .more { display: flex; align-items: center; position: absolute; top: 30px; right: 28px; font-size: 13px; color: #ea002c; }
.boardGallery ul li .more i { display: inline-block; position: relative; top: 1px; margin-left: 10px; width: 15px; height: 1px; background-color: #ea002c; }
.boardGallery ul li .more i:before { content: ""; display: block; position: absolute; bottom: 0; right: 3px; width: 1px; height: 6px; background-color: #ea002c; transform: rotate(-45deg); }


.boardPr { margin-top: 70px; }
.boardPr ul { display: flex; flex-wrap: wrap; }
.boardPr ul li { margin-left: 40px; margin-bottom: 40px; width: 100%; max-width: 400px; }
.boardPr ul li:first-child { margin-left: 0; }
.boardPr ul li:nth-child(3n + 1) { margin-left: 0; }
.boardPr ul li .box-img img { width: 100%; }
.boardPr ul li .box-txt { display: flex; justify-content: space-between; padding: 16px 0;  }
.boardPr ul li .title { font-size: 18px; color: #000; font-weight: 500; line-height: 1.4; }
.boardPr ul li .down {  }


.boardView { margin-top: 68px; border-top: 2px solid #000; }
.boardView.news {border-top: 2px solid #ea002c;}
.boardView.news b {font-weight:500;}
.boardView .top { display: flex; justify-content: space-between; align-items: center; padding: 10px 30px; min-height: 80px; }
.boardView .top strong { font-size: 22px; color: #000; font-weight: 300; }
.boardView .top p { flex: none; margin-left: 20px; font-size: 18px; font-weight: 200; color: #333; letter-spacing: 0; }
.boardView .middle { padding: 45px 30px; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; font-size: 16px; color: #333; line-height: 1.6; }

.boardView .middle p {min-height:15px;}
.boardView .middle div { min-height:15px; font-size: 16px; color: #333333; margin: 0; font-weight: 300; line-height: 1.56;}
.boardView .middle strong { font-weight: 500; }
.boardView .middle .box-image { font-size: 14px; color: #7c7c7c; text-align: center; }
.boardView .middle .box-image img { width: auto; }
.boardView .middle .box-image span { display: block; margin-top: 5px; }
.boardView .middle img { width: 100%; margin-bottom:5px; }
.boardView .middle video { width: 100%; }
.boardView .middle .more { margin-top: 30px; }
.boardView .middle .more a { color: #177ed7; }
.boardView .file { display: flex; align-items: center; padding: 10px 30px; min-height: 65px; border-top: 1px solid #dfdfdf; }
.boardView .file em { display: block; flex: none; font-size: 18px; color: #666; font-weight: 300; text-align: center; font-style: normal; }
.boardView .file div {  width: 100%; }
.boardView .file a { display: flex; align-items: center; margin-left: 55px; font-size: 18px; color: #333; font-weight: 300;  }
.boardView .file a img { margin-right: 18px; }
.boardView .bottom {  }
.boardView .bottom .boardNavi { display: flex; border-bottom: 1px solid #dfdfdf; }
.boardView .bottom .boardNavi ul { width: 100%; }
.boardView .bottom .boardNavi ul li { display: flex; height: 60px; align-items: center; }
.boardView .bottom .boardNavi ul li + li { border-top: 1px solid #dfdfdf; }
.boardView .bottom .boardNavi ul li em { display: block; flex: none; width: 104px; font-size: 18px; color: #222; font-weight: 300; text-align: center; font-style: normal; }
.boardView .bottom .boardNavi ul li div {  width: 100%; }
.boardView .bottom .boardNavi ul li div a { font-size: 18px; color: #333; font-weight: 300; }
.boardView .bottom .boardNavi .goList { display: flex; justify-content: center; align-items: center; flex: none; padding: 10px 0; width: 160px; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; }






.boardPage { margin-top: 50px; }
.boardPage ul { display: flex; justify-content: center; }
.boardPage ul li { position: relative; margin-left: 25px; }
.boardPage ul li:first-child { margin-left: 0; }
.boardPage ul li a { font-size: 16px; color: #545454; font-weight: 300; letter-spacing: 0; }
.boardPage ul li.on a { color: #333333; font-weight: 500; }
.boardPage ul li.disabled a { cursor: default; }
.boardPage ul li.first a, 
.boardPage ul li.prev a,
.boardPage ul li.next a,
.boardPage ul li.last a { position: relative; display: block; width: 10px; height: 10px; font-size: 0; color: transparent; }
.boardPage ul li.first a:after, 
.boardPage ul li.prev a:after,
.boardPage ul li.next a:after,
.boardPage ul li.last a:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%) rotate(0); }
.boardPage ul li.first a:before, 
.boardPage ul li.last a:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%) rotate(0); }
.boardPage ul li.first a:after { border-top: 2px solid #707070; border-left: 2px solid #707070; transform: translate(-50%, -10%) rotate(-45deg); }
.boardPage ul li.prev a:after { border-top: 2px solid #707070; border-left: 2px solid #707070; transform: translate(-50%, -10%) rotate(-45deg); }
.boardPage ul li.next a:after { border-top: 2px solid #707070; border-right: 2px solid #707070; transform: translate(-50%, -10%) rotate(45deg); }
.boardPage ul li.last a:after { border-top: 2px solid #707070; border-right: 2px solid #707070; transform: translate(-50%, -10%) rotate(45deg); }
.boardPage ul li.first a:before { border-top: 2px solid #707070; border-left: 2px solid #707070; transform: translate(-110%, -10%) rotate(-45deg); } 
.boardPage ul li.last a:before { border-top: 2px solid #707070; border-right: 2px solid #707070; transform: translate(-110%, -10%) rotate(45deg); }


#layerPop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; }
#layerPop .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: .5; }
#layerPop .container { display: flex; justify-content: center; align-items: center;  }
#layerPop .inner { position: relative; width: 100%; }
#layerPop .inner .box-image { display: none; }
#layerPop .inner .box-media { position: relative; width: 100%; max-width: 1280px; border-top: 10px solid #ea002c; }
#layerPop .inner .box-media video { width: 100%; }
#layerPop .inner .box-media iframe { width: 100%; height: 720px; max-height: 720px }
#layerPop .inner .box-media i { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; }
#layerPop .inner .close { position: absolute; top: 25px; right: 15px; }

#layerPop.poster .inner .box-media { display: none; }
#layerPop.poster .box-image { display: block; width: 100%; max-width: 1280px; text-align: center; }
#layerPop.poster .box-image img { max-width: 100%; height: auto; max-height: 800px; }


@media (max-width: 1320px) {
    .boardList.news .col.down2 { margin-right: calc(120px - ((1320px - 100vw) / 4)); }
    .boardList.news .col.provide { margin-right: calc(120px - ((1320px - 100vw) / 4)); }
}

@media (max-width: 1204px) {
    .boardGallery ul li { margin-left: 30px; margin-bottom: 30px; width: calc(50% - 15px); max-width: 100%; }
    .boardGallery ul li:nth-child(3n + 1) { margin-left: 30px; }
    .boardGallery ul li:nth-child(2n + 1) { margin-left: 0px; }
}


@media (max-width: 767px) {
    .boardSearch { margin-top: 50px; height: 45px; }
    .box-input input { font-size: 15px; }

    .boardList ul li { position: relative; padding: 35px 10px 10px; min-height: 70px; }
    .boardList ul li .col { font-size: 14px; }
    .boardList ul li.head { display: none; }

    .boardList.news .col.down2 { margin-right: 0; width: auto; }
    .boardList.news .col.down2 img { width: 20px }
    .boardList.news .col.provide { position: absolute; top: 15px; left: 10px; margin-right: 0; width: auto; text-align: left; opacity: .5; }

    .boardList.news li .col.date { position: absolute; top: 10px; right: 10px; width: auto; font-size: 13px; opacity: .5; }

    .boardView .top { padding: 10px 10px; }
    .boardView .top strong { font-size: 18px; }
    .boardView .top p { margin-left: 5px; font-size: 16px; }

    .boardView { margin-top: 50px; }
    .boardView .middle { padding: 25px 10px; font-size: 15px; }
    .boardView .file { padding: 25px 10px; font-size: 15px; }
    .boardView .file a { margin-left: 25px; }
    .boardView .bottom .boardNavi ul li { height: auto; min-height: 60px; }
    .boardView .bottom .boardNavi ul li em { width: 82px; font-size: 15px; }
    .boardView .bottom .boardNavi ul li div { padding: 5px 10px 5px 0px; }
    .boardView .bottom .boardNavi ul li div a { font-size: 15px; }
    .boardView .bottom .boardNavi .goList { width: 120px; }
    .boardView .bottom .boardNavi .goList img { width: 22px; }

    .boardGallery { margin-top: 40px; }
    .boardGallery ul li { margin-left: 0; margin-bottom: 20px; width: 100%; max-width: 100%; }
    .boardGallery ul li:nth-child(3n + 1) { margin-left: 0px; }
    .boardGallery ul li:nth-child(2n + 1) { margin-left: 0px; }
}

@media (max-width: 550px) {
    .boardView .top strong { font-size: 15px; }
    .boardView .top p { font-size: 13px; }

    .boardView .middle { font-size: 14px; }
    .boardView .file em { font-size: 14px; }
    .boardView .file a { font-size: 14px; }
    .boardView .bottom .boardNavi ul li em { width: 65px; font-size: 14px; }
    .boardView .bottom .boardNavi ul li div a { font-size: 14px; }
}

@media (max-width: 425px) {
    .boardSearch { display: block; height: auto; }
    .formBoard .box-select { margin-right: 0; margin-bottom: 10px; max-width: 100%; height: 45px; }
    .box-search { height: 45px; }

    .boardView .bottom .boardNavi .goList { width: 80px; }
}

@media (max-height: 930px) {
    #layerPop .inner .box-media iframe { height: calc(100vh - 200px); }
}