@charset "utf-8";

.boardLatest {position: relative;}

.boardLatest > ul > li:hover h5 {color: #20b04b;}


.boardLatest > ul {margin-top: 0;}
.boardLatest > ul > li {border-bottom: 1px solid #ddd; padding: 20px;}
.boardLatest > ul > li > .text {position: relative; display: flex; justify-content: space-between;}
.boardLatest > ul > li > .text > h5 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-weight: 500; width: calc(100% - 100px); line-height: 1.6em;}
.boardLatest > ul > li > .text > h5 .new_icon {color: #e00000; font-weight: 300;}
.boardLatest > ul > li > .text > .datetime {color: #888; width: 100px; text-align: right; margin-top: 5px;}
.boardLatest > ul > li > .text > a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

.boardLatest > ul > li.empty_li {position: relative; border-bottom: 0; padding-top: 49%;}
.boardLatest > ul > li.empty_li p {display: flex; justify-content: center; align-items: center; position: absolute; width: 100%; height: 100%; top: 0; left: 0; font-size: 1em;}

.boardLatest .topBox {position: relative; display: flex; background-color: #fff; padding: 20px; margin: 0 0 10px; border-bottom: 0;}
.boardLatest .topBox > .image {width: 30%;}
.boardLatest .topBox > .image > img {width: 100%;}
.boardLatest .topBox > .text {display: flex; flex-direction: column; justify-content: center; width: 70%; padding: 0 0 0 2vw;}
.boardLatest .topBox > .text > h5 {margin-bottom: 10px; line-height: 1.4em;}
.boardLatest .topBox > .text > .cont {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.boardLatest .topBox > .text > .datetime {margin-top: 10px; text-align: left;}
.boardLatest .topBox > a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

.boardLatest .more {position: absolute; width: 30px; height: 30px; top: -51px; right: 0; font-size: 0;}
.boardLatest .more:before,
.boardLatest .more:after {position: absolute; display: block; width: 30px; height: 2px; background-color: #666; content: '';}
.boardLatest .more:before {top: 15px;}
.boardLatest .more:after {transform: rotate(90deg); top: 15px;}

.boardLatest .more:hover:before,
.boardLatest .more:hover:after {background-color: #20b04b;}

	@media screen and (max-width:1199px){
        .boardLatest > ul > li.empty_li {padding-top: 380px;}

        .boardLatest .topBox {padding: 30px 20px;}
	}

	@media screen and (max-width:1024px){
        .boardLatest .topBox {padding: 20px 20px;}
	}

	@media screen and (max-width:999px){
        .boardLatest > ul > li.empty_li {padding-top: 39%}
	}

	@media screen and (max-width:799px){
        .boardLatest > ul > li {padding: 10px 20px;}

        .boardLatest > ul > li.empty_li {padding-top: 200px}

        .boardLatest .topBox > .image {width: 40%;}
        .boardLatest .topBox > .text {width: 60%;}

        .boardLatest .more:before,
        .boardLatest .more:after {width: 24px;}
        .boardLatest .more:before {top: 18px;}
        .boardLatest .more:after {top: 18px;}
	}

	@media screen and (max-width:499px){
        .boardLatest > ul > li > .text > .datetime {display: none;}

        .boardLatest .topBox {flex-direction: column;}
        .boardLatest .topBox > .image {width: 100%;}
        .boardLatest .topBox > .text {width: 100%; margin-top: 20px;}
        .boardLatest .topBox > .text > .datetime {display: block;}

        .boardLatest .more:before,
        .boardLatest .more:after {width: 20px;}
        .boardLatest .more:before {top: 16px;}
        .boardLatest .more:after {top: 16px;}
	}