@charset "utf-8";

#contentwrap {
    width: 100%;
    height: 1700px;
    position: relative;
}

/*******************************************/

.content {
    width: 100%;
    margin-top: -100px;
}

.text {
    position: relative;
    width: 1280px;
    height: 220px;
    margin: 0 auto;
}

.text #fonT {
    position: absolute;
    bottom: 40px;
    color: #faf3e2;
    font-size: 54px;
    font-weight: 700;
}

.text #line {
    position: absolute;
    right: 0;
    bottom: 70px;
    color: "";
    width: 69%;
    height: 3px;
    background-color: rgba(250, 243, 226, 60%);
}

.text #sub {
    position: absolute;
    right: 0;
    bottom: 75px;
    color: #faf3e2;
    font-weight: 100;
}

/*******************************************/

.content ul {
    width: 1280px;
    margin: 0 auto;
    overflow: hidden;
}

.content > ul > li {
    position: relative;
    width: 32.8%;
    float: left;
    padding-right: 10.2px;
    padding-bottom: 20px;
}

.content ul li:nth-child(3),
.content ul li:nth-child(6),
.content ul li:nth-child(9) {
    padding-right: 0;
}

.content ul li:nth-child(7),
.content ul li:nth-child(8),
.content ul li:nth-child(9) {
    padding-bottom: 0;
}

.content ul li a img {
    width: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(40, 40, 40, 50%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2;
}

.content ul li.active .overlay {
    opacity: 1;
}