@import url(common.css);
@import url(pretendard.css);

.biz {
    margin: 100px 0;
}

.biz .group {
    display: flex;
    justify-content: space-between;
}

.biz .group.art {
    flex-direction: row-reverse;
    margin: 118px 0 0 0;
}

.biz .group .tit {
    width: 511px;
}

.biz .group .tit h2 {
    color: #8F1A2E;
}

.biz .group .tit .sub_tit {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    color: #1d1d1d;
    margin: 16px 0;
}

.biz .group .tit .sub_tit strong {
    color: #8F1A2E;
}

.biz .group .tit .btn_wrap {
    margin: 50px 0 0 0;
    display: flex;
    gap: 6px 6px;
    flex-wrap: wrap; /* 내부 요소 줄바꿈 허용 */
}

.biz .group .tit .btn_wrap a {
    display: block;
    border: 1px solid #8F1A2E;
    color: #8F1A2E;
    padding: 15px 34px;
    border-radius: 50px;
    white-space: nowrap; /* 문장의 줄바꿈 금지 */
}

.biz .group .tit .btn_wrap a.active {
    background-color: #8F1A2E;
    color: #fff;
}

.biz .group .photo {
    overflow: hidden;
    width: 618px;
    height: 500px;
    border-radius: 20px;
}

.biz .group .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


@media screen and (max-width:768px) { /* 너비 768px 이하 */ 
                .biz .group {
                    display: block; /* display: flex 해제 */
                    /* justify-content: space-between; flex일 때만 적용 */
                }
                
                .biz .group.art {
                    /* flex-direction: row-reverse; flex일 때만 적용 */
                    margin: 106px 0 0 0;
                }
                
                .biz .group .tit {
                    width: auto; /* 너비 제한 X, 브라우저 너비에 유동적 */
                }
                
                .biz .group .tit .sub_tit {
                    font-size: 28px;
                    margin: 18px 0;
                }
                
                .biz .group .tit .btn_wrap {
                    margin: 55px 0 54px 0;
                }
                
                .biz .group .tit .btn_wrap a {
                    padding: 13px 34px;
                }
                
                .biz .group .photo {
                    width: auto;
                    height: 154px;
                    border-radius: 12px;
                }
} /* @media screen and (max-width:768px) */


.photo_wrap {
    margin: 100px 0;
}

.photo_wrap h2 {
    margin: 50px 0 10px 0;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    color: #1d1d1d;
}

/* photo_hfix: height 값을 고정하여 비율을 유지한다. 너비가 조정될 경우, 이미지는 잘린다. */ 
.photo_wrap .photo_hfix {
    overflow: hidden;
    border: 2px solid magenta;
    border-radius: 30px;
    height: 748px;
}

.photo_wrap .photo_hfix img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width:768px) { /* 너비 768px 이하 */ 
                .photo_wrap .photo_hfix {
                    height: 300px;
                }
} /* @media screen and (max-width:768px) */

/* photo_resize: object-fit cover를 빼서 이미지가 잘리지 않게 한다. 대신 너비가 조정될 경우, 이미지 비율이 깨진다. */
.photo_wrap .photo_resize {
    overflow: hidden;
    border: 2px solid magenta;
    border-radius: 30px;
    height: 748px;
}

.photo_wrap .photo_resize img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}

@media screen and (max-width:768px) { /* 너비 768px 이하 */ 
                .photo_wrap .photo_resize {
                    height: 300px;
                }
} /* @media screen and (max-width:768px) */

/* photo_font: img에 height를 빼서 비율 유지, font-size와 line-height를 0으로 하여 아래 여백을 제거 */
.photo_wrap .photo_font {
    overflow: hidden;
    border: 2px solid magenta;
    border-radius: 30px;
    font-size: 0;
    line-height: 0;
}

.photo_wrap .photo_font img {
    width: 100%;
    /* height: 100%; 너비 또는 높이만 주면 다른 하나는 비율에 자동으로 맞춤 */
}

/* photo_all: vertical-align: top으로 아래 여백을 제거, */
.photo_wrap .photo_all {
    overflow: hidden;
    border: 2px solid magenta;
    border-radius: 30px;
}

.photo_wrap .photo_all img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: top;
}

.test h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    color: #1d1d1d;
    margin: 16px 0;
}
.test img {
    width: 326px;
}