@charset "utf-8";

.main-archive {}
.main-archive > ul {display: flex; max-width: 1180px;}
.main-archive > ul > li {width: 50%;}
.main-archive > ul > li + li {margin-left: 20px;}
.main-archive .first-ul {display: flex; flex-wrap: wrap;}
.main-archive .first-ul li {width: 100%; height: 100%; max-width: 580px; max-height: 686px; position: relative;}
.main-archive .first-ul li .main-archive-img {width: 100%; height: 100%;}
.main-archive .first-ul li .main-archive-img img {width: 100%; height: 100%; max-height: 686px; object-fit: cover;}
.main-archive .first-ul li .archive-info {position: absolute; left: 0; bottom: 0; padding: 28px 30px 24px; color: #282828; max-width: 330px; background-color: #fff; transform: translate(0.1px, -0.2px);}
.main-archive .first-ul li .archive-info .li-writer {font-size: 16px; font-weight: 500;}
.main-archive .first-ul li .archive-info .li-tit {font-size: 20px; font-weight: 700; margin: 12px 0 24px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main-archive .first-ul li .archive-info .li-cont {font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main-archive .first-ul li .archive-info .li-tag {font-size: 16px; margin: 16px 0 55px;}
.main-archive .first-ul li .archive-info .more {font-size: 16px; display: flex; align-items: center;}
.main-archive .first-ul li .archive-info .more .more-line {width: 34px; height: 1px; background: #707070; margin-right: 16px;}

.main-archive .another-ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; grid-row-gap: 21px;}
.main-archive .another-ul li {max-width: 280px; max-height: 334px;}
.main-archive .another-ul li .another-li-img img {width: 100%; height: 100%; object-fit: none;}


@media screen and (max-width:1600px) {

}

@media screen and (max-width:1280px) {
    .main-archive .another-ul {grid-row-gap: 23px;}
    .main-archive .first-ul li .archive-info {padding: 18px 24px; max-width: 300px;}
    .main-archive .first-ul li .archive-info .li-writer, .main-archive .first-ul li .archive-info .li-cont, .main-archive .first-ul li .archive-info .li-tag, .main-archive .first-ul li .archive-info .more {font-size: 14px;}
    .main-archive .first-ul li .archive-info .li-tit {margin: 6px 0 14px;}
    .main-archive .first-ul li .archive-info .li-tag {margin: 10px 0 36px;}
    .main-archive .first-ul li .archive-info .more .more-line {width: 24px; margin-right: 8px;}
}

@media screen and (max-width:1000px) {
    .main-archive > ul > li:first-child {width: 66%; flex: none;}
    .main-archive > ul > li:last-child {width: 34%; flex: 1;}
    .main-archive > ul > li + li {margin-left: 15px;}
    .main-archive .first-ul li {max-width: 100%;}
    .main-archive .another-ul {grid-template-columns: repeat(1, 2fr); grid-row-gap: 18px;}
    .main-archive .another-ul li:nth-child(n+3) {display: none;}
}

@media screen and (max-width:768px) {
    .main-archive > ul > li:first-child {width: 100%;}
    .main-archive > ul > li:last-child {display: none;}
    .main-archive .first-ul li .archive-info {padding: 14px 18px; max-width: 194px;}
    .main-archive .first-ul li .archive-info .li-writer, .main-archive .first-ul li .archive-info .li-cont, .main-archive .first-ul li .archive-info .li-tag, .main-archive .first-ul li .archive-info .more {font-size: 12px;}
    .main-archive .first-ul li .archive-info .li-tit {font-size: 18px; margin: 4px 0 12px;}
    .main-archive .first-ul li .archive-info .li-tag {margin: 12px 0 24px;}
    .main-archive .first-ul li .archive-info .more .more-line {width: 20px; margin-right: 6px;}
}