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

.header {
    height: 100px;
}

.header .wrapper {
    display: flex; /* .logo와 .gnb 좌우 배치 */
    justify-content: space-between; /* 가로 양끝 정렬 */
    align-items: center; /* 세로 가운데 정렬 */
}

.header .gnb ul {
    display: flex; /* .gnb에 속하는 ul 내 li들을 좌우 배치 */
}

.header .gnb ul li a {
    display: block;
    padding: 0 25px;
    line-height: 100px; /* .header에 주어진 height와 같은 값으로 정의하면, 글자 높이가 100px이 되고 가운데 정렬함 */
    font-size: 21px;
    font-weight: 700;
    color: #1d1d1d;
}


.visual {
    background: url(../images/visual_bg.jpg) no-repeat center center / cover;
    color: #fff;
    height: 800px;
}

.visual h2 {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.3;
    padding: 562px 0 6px 0;
}


.biz {
    margin: 147px 0 0 0;
}

.biz .tit {
    text-align: left; /* 필요 없음 */
}

.biz .tit h2 {
    font-weight: 700;
    color: #0F488F;
}

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

.biz .list {
    margin: 59px 0 0 0;
}

.biz .list ul {
    display: flex; /* .list에 속하는 ul 내 li들을 좌우 배치 */
    justify-content: space-between;
}

.biz .list ul li {
    width: 297px;
}

.biz .list ul li .txt {
    text-align: center;
    margin: 0 40px;
}

.biz .list ul li .txt h3 {
    font-size: 32px;
    line-height: 1.3;
    color: #1d1d1d;
    margin: 24px 0 12px 0; /* 상단 margin: 30px - 6px(img의 line-height)  */
}

.biz .list ul li .txt a {
    display: block;
    border: 1px solid #ccc;
    padding: 12px 0; /* 블록이라 좌우 폭은 최대 넓이, 좌우 폭은 .txt 클래스가 제한함 */
    margin: 18px 0 0 0;
}


.brand {
    margin: 124px 0 0 0;
    background: url(../images/brand_bg.jpg) no-repeat center center / cover;
    color: #fff;
    text-align: center;
    height: 700px;
    padding: 247px 0 0 0;
}

.brand h2 {
    font-weight: 700;
    color: #C8DEF9;
}

.brand p {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    margin: 3px 0 30px 0;
}

.brand a {
    display: inline-block;
    border: 1px solid #fff;
    padding: 12px 36px;
}


.footer {
    background-color: #1d1d1d;
    color: rgba(255, 255, 255, 0.8);
    padding: 82px 0;
}

.footer .f_nav ul {
    display: flex; /* .f_nav에 속해 있는 ul 내 li들을 좌우로 배치 */
    gap: 0 45px; /* display: flex일 때만 적용 가능, 자식 요소의 좌우 위아래 여백을 설정 */
}

.footer .f_info {
    margin: 21px 0;
    display: flex;
    gap: 0 23px;
}