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

.header {
    position: absolute;
    /* position: fixed; 임시? */
    left: 0;
    top: 0;
    z-index: 100; /* .header는 다른 요소보다 상단에 있어야 함, z-index는 100보다 큰 수는 없다고 약속함 */
    color: #fff;
    width: 100%; /* .header는 position이 absolute이지만 너비는 .wrapper의 너비와 같음 */
    height: 100px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: top 0.3s; /* 헤더 위치 변화만 부드럽게 */
}

.header .wrapper {
    display: flex; /* .logo, .gnb, .util 좌우로 배치 */
    justify-content: space-between;
    align-items: center;
}

.header .logo a {
    display: block; /* vertical-align 적용하기 위해서 */
    width: 172px;
    height: 35px;
    background: url(../images/logo.svg) no-repeat center center / contain;
}

.header .gnb .gnb_open {
    display: none; /* PC 화면에 안 나옴*/
}

.header .gnb .gnb_wrap ul {
    display: flex; /* li 좌우로 배치 */
}

.header .gnb .gnb_wrap ul li a {
    display: block;
    font-size: 20px;
    line-height: 100px; /* .gnb 높이 고정 및 메뉴 각 버튼 높이 고정 */
    padding: 0 23px; /* 메뉴 각 버튼 너비 고정 */
}

.header .util .weather {
    position: relative; /* ::before 아이콘 정렬 기준 */
    padding: 0 0 0 33px; /* 왼쪽 아이콘 자리 여백 */
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    display: flex; /* strong 기온, span 날씨 위아래 배치 */
    flex-direction: column;
}
.header .util .weather::before {
    content: ""; /* 필수 */
    position: absolute; /* .weather 기준 정렬 */
    left: 0;
    top: 5px;
    width: 29px; /* 아이콘 사이즈 */
    height: 26px;
    background: url(../images/weather.svg) no-repeat center center;
}

/*** .header.fixed .header.fixed .header.fixed 시작 ***/
.header.fixed {
    position: fixed;
    background-color: #fff;
    color: #1d1d1d;
    border-color: rgba(237, 237, 237, 1);
    min-width: 1440px;
}

.header.fixed.hide {
    top: -110px;
}

.header.fixed .util .weather::before {
    background-image: url(../images/weather_c.svg);
}

.header.fixed .logo a {
    background-image: url(../images/logo_c.svg);
}
/*** .header.fixed .header.fixed .header.fixed 끝 ***/

/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {
                .header {
                    height: 56px;
                }                
                
                .header .wrapper {
                    margin-right: 0; /* .gnb_open이 있어야 하므로 오른쪽 여백을 제거함 */
                }

                .header .logo a {
                    width: 106px; /* 모바일 화면에서 로고가 너무 큼 */
                }

                .header .gnb .gnb_open {
                    display: block; /* 모바일 화면에 나옴*/
                    width: 56px; /* 버튼 너비는 .header 높이*/
                    height: 56px; /* 버튼 높이는 .header 높이*/
                    background: url(../images/gnb_open.svg) no-repeat center center;
                }
                
                .header .gnb .gnb_wrap {
                    display: none; /* 모바일 화면에 안 나옴, 버튼 눌려야 나옴 */
                }
                
                .header .util {
                    display: none; /* 모바일 화면에 안 나옴 */
                }

                .header.fixed {
                    position: fixed;
                    background-color: #fff;
                    color: #1d1d1d;
                    border-color: rgba(237, 237, 237, 1);
                    min-width: 0;
                }
                
                .header.fixed .gnb .gnb_open {
                    background-image: url(../images/gnb_open_c.svg);
                }
} /* @media screen and (max-width:768px) */


.visual {
    background: url(../images/visual_bg.jpg) no-repeat center center / cover;
    color: #fff;
    border-radius: 0 0 200px 0;
    text-align: center;
    position: relative; /* ::before 정렬 기준 */
}
.visual::before { /* .visual 배경 이미지 뒷 면에 배경 색 추가, 오른쪽 아래 둥근 모서리 여백 */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #f7f7f7;
}

.visual .wrapper {
    height: 900px;
    position: relative; /* a.picture 정렬 기준 */
}

.visual h2 {
    padding: 272px 0 0 0;
}

.visual .picture {
    display: block;
    width: 180px;
    height: 180px;
    border-radius: 50%; /* 정원 그리기 */
    background-color: #0A31A8;
    line-height: 1.3;
    padding: 93px 0 0 0;
    position: absolute; /* .wrapper를 기준으로 정렬함*/
    right: -90px;
    bottom: -90px;
}
.visual .picture::before {
    content: ""; /* 필수 */
    position: absolute; /* .picture를 기준으로 정렬함 */
    left: 3px;
    top: 38px;
    width: 100%;
    height: 46px;
    /* 아이콘을 배경으로 줄 때는 cover 필요 없음, contain: 배경 이미지가 잘리지 않고 최대한 확대하기 */
    background: url(../images/visual_picture.svg) no-repeat center center / contain;
}

/* 호버링 시 글자 색과 배경 아이콘 이미지 교체 */
.visual .picture:hover {
    color: #00BF99;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
}
.visual .picture:hover::before {
    background-image: url(../images/visual_picture_on.svg);
}

/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {
                .visual {
                    border-radius: 0 0 34px 34px; /* 왼쪽 위부터 시계방향 */
                    /* background-position: left 20% bottom; 배경은 왼쪽 아래를 기준으로 너비 조정 */
                    background: url(../images/visual_bg_mo.jpg) no-repeat center center / cover;
                }

                .visual .wrapper {
                    height: 800px;
                    display: flex; /* .visual h2 정렬 */
                    justify-content: center; /* .visual h2 좌우 가운데 정렬 */
                    align-items: center; /* .visual h2 위아래 가운데 정렬 */
                }

                .visual h2 {
                    padding: 0;
                }

                /* 모바일 화면에 맞게 감싸는 요소 너비(h2)의 80%로 너비를 조정함 */
                .visual h2 img {
                    width: 80%;
                    max-width: 400px;
                }
                
                .visual .picture {
                    width: 114px;
                    height: 114px;
                    padding: 54px 0 0 0;
                    right: 0;
                    bottom: -57px;
                }

                .visual .picture::before {
                    top: 14px;
                    height: 35px;
                }
} /* @media screen and (max-width:768px) */


.culture {
    padding: 194px 0 94px 0; /* 배경 색을 준다면 하단 여백도 줘야 하며, padding을 사용함 */
    background-color: #f7f7f7;
}

.culture .wrapper {
    position: relative; /* .more 정렬 기준 */
}

.culture .tit {
    margin: 0 100px 0 0; /* .more 자리 여백 */
}

.culture .tit h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    color: #1d1d1d;
    margin: 0 0 23px 0;
}

.culture .tit h2 br {
    display: none; /* PC에서 줄바꿈 안 함 */
}

.culture .list {
    margin: 50px 0 0 0;
}

.culture .list ul {
    display: flex; /* li 좌우로 배치 */
    justify-content: space-between;
}

.culture .list ul li {
    /* 너비: (100% / <li 요소 갯수>) - (<사이 여백 합계> / <li 요소 갯수>)
        li 요소 갯수는 3개이고, 사이 여백은 24px로 2개이므로,
        (100% / 3) - ((24+24) / 3)
        = 33.33% - (48/3)
        = 33.33% - 16px */
    width: calc(33.333% - 16px);
}

/* a 기본값 */
.culture .list ul li a {
    display: block;
}

/* .photo 기본값 */
.culture .list ul li a .photo {
    overflow: hidden;
}

/* .photo img 기본값 */
.culture .list ul li a .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: top;
    transition: 0.3s;
}
.culture .list ul li a:hover .photo img {
    transform: scale3d(1.125, 1.125, 1);
}

.culture .list ul li a h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #1d1d1d;
    margin: 18px 0 6px 0;
}

.culture .list ul li a h3 span {
    position: relative; /* ::after 정렬 기준 */
}

.culture .list ul li a h3 span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 0;
    height: 1px;
    background-color: #1d1d1d;
    transition: 0.3s;
}
.culture .list ul li a:hover h3 span::after {
    width: 100%;
}

.culture .more {
    position: absolute; /* .wrapper 기준 정렬함 */
    right: 1px;
    top: 101px;
    display: block;
    /* border: 1px solid #3d3d3d; 테두리가 들어가는 경우 */
    /* border-radius: 50px; 테두리가 들어가는 경우 */
    /* padding: 7px 43px 7px 25px; 테두리가 들어가는 경우, 오른쪽 아이콘 여백에 추가로 패딩이 들어감 */
    padding: 0 18px 0 0; /* 오른쪽 아이콘 여백 */
}
.culture .more::after {
    content: "";
    position: absolute; /* .more 기준 정렬함 */
    right: 2px;
    top: 7px;
    width: 12px; /* 아이콘 크기 */
    height: 12px;
    background: url(../images/more.svg) no-repeat center center / contain; /* 모바일에서 크기 변경할 예정 */
}

.culture .more:hover {
    color: #0A31A8;
}
.culture .more:hover::after {
    background-image: url(../images/more_on.svg); /* 호버링 시 이미지만 바꿈 */
}

/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {
                .culture {
                    padding: 151px 0 86px 0; /* 배경 색을 준다면 하단 여백도 줘야 하며, padding을 사용함 */
                }
                                
                .culture .tit {
                    margin: 0 40px 0 0; /* .more 자리 여백 */
                }
                
                .culture .tit h2 {
                    font-size: 28px;
                    margin: 0;
                }
                
                .culture .tit h2 br {
                    display: block; /* 모바일에서 제목 줄바꿈 함 */
                }
                
                .culture .tit p {
                    display: none; /* 모바일에서 제목 설명 안 보임 */
                }
                
                .culture .list {
                    margin: 36px 0 0 0;
                }
                
                .culture .list ul {
                    flex-direction: column; /* flex 유지함, 세로로 배치 */
                    gap: 27px 0; /* 위아래 여백, 좌우 여백 없음 */
                }
                
                .culture .list ul li {
                    /* 너비: 모바일에서는 너비 계산이 auto(권장) 또는 100% */
                    width: auto;
                }
                
                .culture .list ul li a:hover .photo img {
                    transform: scale3d(1.125, 1.125, 1);
                }
                
                .culture .list ul li a h3 {
                    font-size: 22px;
                    margin: 19px 0 10px 0;
                }
                
                .culture .more {
                    right: 0; /* 1px에서 바뀜 */
                    top: 41px;
                    /* 모바일 더보기에는 테두리가 들어감, 아이콘은 ::after에서 들어감 */
                    border: 1px solid #3d3d3d;
                    border-radius: 50%;
                    padding: 0;
                    width: 25px;
                    height: 25px;
                }
                .culture .more::after {
                    right: 6px;
                    width: 10px; /* 아이콘 크기 */
                    height: 10px;
                }
                
                .culture .more:hover {
                    border-color: #0A31A8;
                }

                .culture .more span {
                    display: none; /* 모바일에는 더보기 글자 없음, 아이콘만 있음 */
                }
} /* @media screen and (max-width:768px) */

.tour {
    margin: 146px 0 132px 0;
}

.tour .wrapper {
    position: relative; /* .more 정렬 기준 */
}

.tour .tit {
    margin: 0 100px 0 0; /* .more 자리 여백 */
}

.tour .tit h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    color: #1d1d1d;
}

.tour .tit h2 br {
    display: none; /* PC에서 줄바꿈 안 함 */
}

.tour .list {
    margin: 57px 0 0 0;
}

.tour .list ul {
    display: flex; /* li 좌우로 배치 */
    gap: 0 12px;
}

.tour .list ul li {
    flex: 1 1 0%; /* 아코디언 디자인에서 너비는 짧은 너비 */
    transition: 0.3s;
    overflow: hidden; /* 내부 요소(p)가 넘치는 것을 숨김 */
}

.tour .list ul li.active {
    flex: 3.442 1 0%; /* 아코디언 디자인에서 .active가 있는 요소는 긴 너비 */
}

.tour .list ul li a {
    display: flex; /* h3, p를 세로로 배치 및 아래를 기준으로 함 */
    flex-direction: column; /* 세로로 배치 */
    justify-content: flex-end; /* 아래를 기준으로 함 */
    height: 387px;
    background: url(../images/tour01.jpg) no-repeat center center / cover;
    color: #fff;
    text-align: center; /* 접힌 상태 제목 가운데 정렬 */
    padding: 0 0 35px 0;
}
.tour .list ul li.tour02 a {
    background-image: url(../images/tour02.jpg);
}
.tour .list ul li.tour03 a {
    background-image: url(../images/tour03.jpg);
}
.tour .list ul li.tour04 a {
    background-image: url(../images/tour04.jpg);
}

.tour .list ul li.active a {
    text-align: left; /* 펼친 상태 제목 왼쪽 정렬 */
    padding: 0 40px 34px 40px;
}

.tour .list ul li a h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.tour .list ul li.active a h3 {
    font-size: 28px;
}

.tour .list ul li a p {
    display: none;
    margin: 10px 0 0 0;
    position: relative; /* ::after 정렬 기준 */
    white-space: nowrap;
}

.tour .list ul li.active a p {
    display: block;    
}

.tour .list ul li a p::after {
    content: "";
    position: absolute; /* p 기준 정렬 */
    right: -7px;
    bottom: 11px;
    width: 30px;
    height: 30px;
    background: url(../images/tour_more.svg) no-repeat center center / contain;
}

.tour .more {
    position: absolute; /* .wrapper 기준 정렬함 */
    right: 1px;
    top: 13px;
    display: block;
    /* border: 1px solid #3d3d3d; 테두리가 들어가는 경우 */
    /* border-radius: 50px; 테두리가 들어가는 경우 */
    /* padding: 7px 43px 7px 25px; 테두리가 들어가는 경우, 오른쪽 아이콘 여백에 추가로 패딩이 들어감 */
    padding: 0 18px 0 0; /* 오른쪽 아이콘 여백 */
}
.tour .more::after {
    content: "";
    position: absolute; /* .more 기준 정렬함 */
    right: 2px;
    top: 7px;
    width: 12px; /* 아이콘 크기 */
    height: 12px;
    background: url(../images/more.svg) no-repeat center center / contain; /* 모바일에서 크기 변경할 예정 */
}

.tour .more:hover {
    color: #0A31A8;
}
.tour .more:hover::after {
    background-image: url(../images/more_on.svg); /* 호버링 시 이미지만 바꿈 */
}

/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {
                .tour {
                    margin: 102px 0 96px 0; /* 배경 색이 없으므로 margin을 유지함 */
                }
                                
                .tour .tit {
                    margin: 0 37px 0 0; /* .more 자리 여백 */
                }
                
                .tour .tit h2 {
                    font-size: 28px;
                    margin: 0;
                }
                
                .tour .tit h2 br {
                    display: block; /* 모바일에서 제목 줄바꿈 함 */
                }
                
                .tour .list {
                    margin: 36px 0 0 0;
                    overflow-x: auto; /* 아래 ul에서 너비가 넘치므로 가로 스크롤 바를 만듦, 그렇지 않으면 만들지 않음 */
                }

                .tour .list ul {
                    /* 너비: <li의 width> * 4 + <사이 여백> * 3 
                        = (250 * 4) + (16 * 3) = 1048px*/
                    width: 1048px;
                    gap: 0 16px;
                }
                
                .tour .list ul li.active {
                    flex: 1 1 0%; /* 모바일은 너비가 같음 */
                }
                
                .tour .list ul li a {
                    /* height: 387px; 높이는 PC, 모바일 같지만 일단 적음 */
                    text-align: left; /* 모바일 텍스트 왼쪽 정렬 */
                    padding: 0 24px 19px 24px; /* 모바일은 패딩이 같음 */
                }
                
                .tour .list ul li.active a {
                    padding: 0 24px 19px 24px; /* 모바일은 패딩이 같음 */
                }
                
                .tour .list ul li a h3 {
                    font-size: 28px;
                }
                
                .tour .list ul li a p {
                    display: block;
                    margin: 10px 0 0 0; /* .active에만 들어간 margin 추가 */
                    white-space: normal;
                }

                .tour .list ul li.active a p {
                    display: block; /* margin은 PC와 같음 */
                }
                .tour .list ul li a p::after {
                    display: none; /* 아이콘 안 나옴 */
                }                
                
                .tour .list ul li a p br {
                    display: none; /* br 안 나옴 */
                }

                .tour .more {
                    right: 0; /* 1px에서 바뀜 */
                    top: 41px;
                    /* 모바일 더보기에는 테두리가 들어감, 아이콘은 ::after에서 들어감 */
                    border: 1px solid #3d3d3d;
                    border-radius: 50%;
                    padding: 0;
                    width: 25px;
                    height: 25px;
                }
                .tour .more::after {
                    right: 6px;
                    width: 10px; /* 아이콘 크기 */
                    height: 10px;
                }
                
                .tour .more:hover {
                    border-color: #0A31A8;
                }

                .tour .more span {
                    display: none; /* 모바일에는 더보기 글자 없음, 아이콘만 있음 */
                }
} /* @media screen and (max-width:768px) */


.community {
    background: url(../images/community_bg.jpg) no-repeat center center / cover;
    color: #fff;
    padding: 163px 0 205px 0;
}

.community .wrapper {
    display: flex; /* .tit, .group 좌우 배치 */
    justify-content: space-between;
}

.community .tit h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    /* margin: 0 0 17px 0; 아래 글자가 있으면 margin을 추가 */
}

.community .group {
    display: flex; /* .notice, .service 좌우 배치 */
    gap: 0 24px;
    align-items: flex-end; /* 아래를 기준으로 정렬 */
}

.community .group .notice {
    width: 511px;
    height: 426px;
    border-radius: 16px;
    background-color: rgba(29, 29, 29, 0.3);
    padding: 49px 40px 0 40px; /* 높이가 주어진 경우, 아래 여백을 주지 않음 */
    backdrop-filter: blur(20px);
    position: relative; /* .more 정렬 기준 */
}

.community .group .notice h3 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
}

.community .group .notice .list {
    margin: 11px 0 0 0;
}

.community .group .notice .list ul li {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.community .group .notice .list ul li:first-child {
    border-top: none;
}

.community .group .notice .list ul li a {
    display: flex; /* h4, span 좌우 배치 */
    justify-content: space-between;
    padding: 15px 0;
}

.community .group .notice .list ul li a h4 {
    width: calc(100% - 100px); /* 오른쪽 날짜 부분 제외하고 너비 전부 사용 */
    /* 1줄로 제한 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.community .group .notice .list ul li a:hover h4 {
    font-weight: 700;
    color: #1d1d1d;
}

.community .group .notice .more {
    position: absolute; /* .notice 기준 정렬 */
    right: 40px;
    top: 50px;
    /* .more의 글자는 보이지 않음 (span의 sr-only), 아이콘만 표시함 */
    width: 34px;
    height: 34px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: url(../images/more_white.svg) no-repeat center center / 12px; /* 너비를 입력하면 비율은 알아서 조정됨 */
}

/*** .notice:hover .notice:hover .notice:hover ***/
.community .group .notice:hover {
    background-color: #fff;
    color: #3d3d3d; /* 링크, 날짜 글자색 */
}
.community .group .notice:hover h3 {
    color: #1d1d1d; /* 제목 글자색 */
}
.community .group .notice:hover .list ul li {
    border-color: #ccc;
}
.community .group .notice:hover .more {
    border-color: #1d1d1d;
    background-color: #1d1d1d;
}

.community .group .service {
    /* 너비: <li 너비> * 2 + <여백> 
    = 196 * 2 + 12 = */
    width: 404px;
}

.community .group .service ul {
    display: flex; /* li 좌우 배치 */
    flex-wrap: wrap; /* 여러 줄 허용 */
    gap: 12px 12px; /* 위아래 좌우 여백*/
}

.community .group .service ul li {
    /* 너비: 100% / <1줄에 표시할 li 개수> - <1줄의 중간 여백 합> / <1줄에 표시할 li 개수>
     <1줄에 표시할 li 개수> = 2, <1줄의 중간 여백 합> = 12px
     (100% / 2) - (12px / 2) = 50% - 6px
     */
    width: calc(50% - 6px);
}

.community .group .service ul li a {
    display: block;
    height: 156px;
    background-color: rgba(29, 29, 29, 0.3);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    padding: 30px 0 0 30px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    position: relative; /* ::after 정렬 기준 */
}
.community .group .service ul li a::after {
    content: "";
    position: absolute; /* a 기준 정렬 */
    right: 30px;
    bottom: 31px;
    /* 4개 아이콘 중 가장 넓은 크기를 기준으로 함 */
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-position: center center;
}
.community .group .service ul li.ico01 a::after {
    background-image: url(../images/service01.svg);
}
.community .group .service ul li.ico02 a::after {
    background-image: url(../images/service02.svg);
}
.community .group .service ul li.ico03 a::after {
    background-image: url(../images/service03.svg);
}
.community .group .service ul li.ico04 a::after {
    background-image: url(../images/service04.svg);
}

/*** a:hover a:hover a:hover ***/
.community .group .service ul li a:hover {
    background-color: #fff;
    color: #3d3d3d;
}
.community .group .service ul li.ico01 a:hover::after {
    background-image: url(../images/service01_on.svg);
}
.community .group .service ul li.ico02 a:hover::after {
    background-image: url(../images/service02_on.svg);
}
.community .group .service ul li.ico03 a:hover::after {
    background-image: url(../images/service03_on.svg);
}
.community .group .service ul li.ico04 a:hover::after {
    background-image: url(../images/service04_on.svg);
}

/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {
                .community {
                    padding: 114px 0 137px 0;
                }
                
                .community .wrapper {
                    display: block; /* flex 풀음 */
                }
                
                .community .tit h2 {
                    font-size: 28px;
                }

                /* .community .tit h2 br,
                .community .tit p br {
                    display: none; 모바일에서 줄바꿈 해제
                } */
                
                .community .group {
                    display: block; /* flex 풀음 */
                    margin: 43px 0 0 0; /* .tit와 .group 사이 여백 */
                    /* gap: 0 24px;
                    align-items: flex-end; flex 풀어서 작동 안 됨 */
                }
                
                .community .group .notice {
                    width: auto;
                    height: auto;
                    padding: 32px 24px 30px 24px; /* 높이가 안 주어진 경우, 아래 여백을 줌 */
                }
                
                .community .group .notice h3 {
                    font-size: 24px;
                }
                
                .community .group .notice .list ul li a {
                    padding: 10px 0;
                }
                
                .community .group .notice .more {
                    right: 21px;
                    top: 37px;
                    /* .more의 글자는 보이지 않음 (span의 sr-only), 아이콘만 표시함 */
                    width: 22px; /* 이건 원의 크기 */
                    height: 22px;
                    background-size: 8px; /* 아이콘 크기만 변경됨 */
                }
                
                .community .group .service {
                    width: auto;
                    margin: 16px 0 0 0;
                }
                
                .community .group .service ul {
                    gap: 16px 16px; /* 위아래 좌우 여백*/
                }
                
                .community .group .service ul li {
                    /* 너비: 100% / <1줄에 표시할 li 개수> - <1줄의 중간 여백 합> / <1줄에 표시할 li 개수>
                    <1줄에 표시할 li 개수> = 2, <1줄의 중간 여백 합> = 16px
                    (100% / 2) - (16px / 2) = 50% - 8px
                    */
                    width: calc(50% - 8px);
                }
                
                .community .group .service ul li a {
                    height: 92px;
                    padding: 31px 0 0 24px;
                    font-size: 24px;
                }
                .community .group .service ul li a::after {
                    right: 24px;
                    bottom: 36px;
                    /* 4개 아이콘 중 가장 넓은 크기를 기준으로 함 */
                    width: 22px;
                    height: 22px;
                    background-size: contain;
                }
} /* @media screen and (max-width:768px) */


.footer {
    background-color: #F0F0F0;
    padding: 75px 0 73px 0;
    color: #666;
}

.footer .f_nav ul {
    display: flex; /* li 좌우 배치 */
    gap: 0 40px;
    flex-wrap: wrap;
}

.footer .f_nav ul li {
    position: relative; /* ::after 정렬 기준 */
}
.footer .f_nav ul li::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 5px;
    width: 1px;
    height: 14px;
    background-color: #ccc;
}
.footer .f_nav ul li:last-child::after {
    display: none; /* 마지막 li의 선 삭제 */
}
.footer .f_nav ul li.privacy a {
    font-weight: 700;
}

.footer .f_info {
    display: flex; /* address, span 좌우 배치 */
    gap: 0 22px;
    flex-wrap: wrap;
    margin: 28px 0;
}

.footer .copyright .license {
    font-size: 14px;
    color: #767676;
    text-decoration: underline;
}

/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {
                .footer {
                    padding: 72px 0 67px 0;
                }
                
                .footer .f_nav ul {
                    gap: 0 37px;
                }

                .footer .f_nav ul li::after {
                    right: -20px;
                    top: 5px;
                    height: 12px;
                }
                
                .footer .f_info {
                    gap: 0 20px;
                    flex-wrap: wrap;
                    margin: 32px 0 38px 0;
                }
} /* @media screen and (max-width:768px) */