@import url(default.css);
@import url(fonts.css);
@import url(common.css);

.product {
    background-color: #1e1e1e;
    color: #fff;
    text-align: center;
    padding: 150px 0 85px 0;
}

.product .wrapper {
    display: flex;
    flex-direction: column;
    gap: 80px 0;
}

.product .tit p {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
}

.product .list ul {
    display: flex;
    justify-content: space-between;
}

.product .list ul li {
    width: 404px;
}

.product .list ul li a {
    display: block;
    height: 300px;
    background: url(../images/product_bg01.jpg) no-repeat center center / cover;
}
.product .list ul li.product_bg02 a {
    background-image: url(../images/product_bg02.jpg);
}
.product .list ul li.product_bg03 a {
    background-image: url(../images/product_bg03.jpg);
}

.product .list ul li a h3 {
    padding: 84px 0 0 0;
}

.product .list ul li a p {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
}

.product .list ul li a span {
    display: inline-block;
    margin: 24px 0 0 0;
    border: 1px solid #fff;
    padding: 5px 29px 4px 30px;
}
.product .list ul li a:hover span {
    background-color: #fff;
    color: #3d3d3d;
}

/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {
                .product {
                    padding: 100px 0 58px 0;
                }
                
                .product .wrapper {
                    gap: 18px 0;
                }

                .product .tit {
                    text-align: left;
                }
                
                .product .tit p {
                    font-size: 32px;
                }
                
                .product .list ul {
                    flex-direction: column;
                    gap: 10px 0;
                }
                
                .product .list ul li {
                    width: auto;
                }
                
                .product .list ul li a {
                    height: 168px;
                }
                
                .product .list ul li a h3 {
                    padding: 38px 0 0 0;
                }
                
                .product .list ul li a p {
                    font-size: 24px;
                }
                
                .product .list ul li a span {
                    margin: 7px 0 0 0;
                    background-color: #fff;
                    color: #3d3d3d;
                    padding: 0 20px 1px 20px;
                }    
} /* @media screen and (max-width:768px) */


.life {
    height: 664px;
    background: url(../images/life_bg.jpg) no-repeat center center / cover;
    color: #fff;
}

.life .wrapper {
    padding: 126px 0 0 856px;
}

.life .tit h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 15px 0;
}

.life .photo_mobile {
    display: none;
}


/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {
                .life {
                    height: auto;
                    background-image: none;
                    background-color: #fff;
                    color: #3d3d3d;
                }

                .life .wrapper {
                    padding: 92px 0 84px 0;
                }

                .life .tit h2 {
                    font-size: 32px;
                    color: #1d1d1d;
                    margin: 0 0 23px 0;
                }

                .life .photo_mobile {
                    display: block;
                    margin: 39px 0 0 0;
                    height: 156px;
                    overflow: hidden;
                }

                .life .photo_mobile img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    vertical-align: top;
                }
} /* @media screen and (max-width:768px) */