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

.header {
    position: fixed; /* fixed는 항상 body 기준 정렬 */
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 90px;
    color: #fff;
}

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

.header .logo a {
    display: block;
    width: 145px;
    height: 48px;
    background: url(../images/logo_w.svg) no-repeat center center / contain; /* 잘리지 않게 contain을 줌 */
}

.header .gnb .gnb_open,
.header .gnb .gnb_close {
    display: none; /* PC에서는 안 보임 */
}

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

.header .gnb .gnb_wrap ul li a {
    display: block;
    line-height: 90px; /* .header의 높이 */
    padding: 0 26px;
    font-size: 20px;
    font-weight: 800;
}

.header .util {
    display: flex; /* .mypage, .lang 가로 배치 */
}

.header .util .mypage {
    display: block;
    width: 40px;
    height: 40px;
    background: url(../images/mypage_w.svg) no-repeat center center;
}

.header .util .lang .lang_open {
    display: block;
    width: 40px;
    height: 40px;
    background: url(../images/lang_w.svg) no-repeat center center;
}

/*** .header.fixed .header.over (스타일 같음) 시작 ***/
.header.fixed,
.header.over {
    background-color: #fff;
    color: #181818;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.header.fixed .logo a,
.header.over .logo a {
    background-image: url(../images/logo.svg);
}

.header.fixed .util .mypage,
.header.over .util .mypage {
    background-image: url(../images/mypage.svg);
}
.header.fixed .util .mypage:hover,
.header.over .util .mypage:hover {
    background-image: url(../images/mypage_on.svg);
}

.header.fixed .util .lang .lang_open,
.header.over .util .lang .lang_open {
    background-image: url(../images/lang.svg);
}
.header.fixed .util .lang .lang_open:hover,
.header.over .util .lang .lang_open:hover {
    background-image: url(../images/lang_on.svg);
}
/*** .header.fixed .header.over (스타일 같음) 끝 ***/

/* 너비 1024px 이하부터 */
@media screen and (max-width:1024px) {
                .header {
                    height: 72px;
                }
                
                .header .wrapper {
                    margin-right: 0; /* .gnb_open 버튼 너비는 오른쪽 끝까지 차지함 */
                }
                
                .header .gnb .gnb_open {
                    display: block; /* 모바일에서 보임 */
                    width: 72px;
                    height: 72px;
                    background: url(../images/gnb_open_w.svg) no-repeat center center / 36px;
                }
                
                .header .gnb .gnb_wrap {
                    display: none /* 모바일에서 안 보임 */
                }
                
                .header .util {
                    display: none; /* 모바일에서 안 보임 */
                }

                /*** .header.fixed .header.over (스타일 같음) 시작 ***/
                .header.fixed .gnb .gnb_open,
                .header.over .gnb .gnb_open {
                    background-image: url(../images/gnb_open.svg);
                }
                /*** .header.fixed .header.over (스타일 같음) 끝 ***/
} /* @media screen and (max-width:1024px) */

/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {
                .header {
                    height: 56px;
                }

                .header .logo a {
                    width: 82px;
                    height: 27px;
                }
                
                .header .gnb .gnb_open {
                    width: 56px;
                    height: 56px;
                    background-size: 26px;
                }
} /* @media screen and (max-width:768px) */

.visual {
    position: relative; /* .scroll 정렬 기준 */
}

.visual .swiper-slide {
    height: 100dvh; /* 브라우저 높이 */
    min-height: 500px;
    background: url(../images/visual_bg1.jpg) no-repeat center center / cover;
    color: #fff;
    display: flex; /* .wrapper를 아래 기준 정렬함 */
    align-items: flex-end;
}
.visual .swiper-slide.pop2 {
    background-image: url(../images/visual_bg2.jpg);
}
.visual .swiper-slide.pop3 {
    background-image: url(../images/visual_bg3.jpg);
}
.visual .swiper-slide.pop4 {
    background-image: url(../images/visual_bg4.jpg);
}

.visual .swiper-slide h2 {
    font-size: 88px;
    font-weight: 800;
    line-height: 1.3;
    margin: 14px 0 13vh 0;
}
.visual .swiper-slide.pop2 h2 br,
.visual .swiper-slide.pop3 h2 br {
    display: none;
}

.visual .scroll {
    position: absolute; /* .visual 기준 정렬 */
    /* 좌우 가운데 */
    left: 50%;
    transform: translateX(-50%);

    bottom: 50px;
    z-index: 10;
    font-size: 12px;
    color: #fff;
}
.visual .scroll::before {
    content: "";
    position: absolute; /* .scroll 기준 정렬 */
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 6px;
    background: url(../images/visual_scroll.svg) no-repeat center center;
    animation: scroll 1.5s linear 0s infinite;
}
/* .scroll::before 애니메이션 */
@keyframes scroll {
    0%{bottom: -10px;}
    50%{bottom: -20px;}
    100%{bottom: -10px;}
}

/* 화살표 2개인 경우
.visual .scroll::before,
.visual .scroll::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 6px;
    background: url(../images/visual_scroll.svg) no-repeat center center;
    animation: scroll 2s linear 0s infinite;
}
.visual .scroll::after { 
    bottom: -16px;
    animation: scroll2 2s linear 0s infinite;
} 
@keyframes scroll2 {
    0%{bottom: -16px;}
    50%{bottom: -26px;}
    100%{bottom: -16px;}
}
*/

/* 너비 1024px 이하부터 */
@media screen and (max-width:1024px) {    
                .visual .swiper-slide h2 {
                    font-size: 45px;
                }

                .visual .scroll {
                    display: none;
                }
} /* @media screen and (max-width:1024px) */

/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {    
                .visual .swiper-slide h2 {
                    font-size: 32px;
                }

                .visual .swiper-slide.pop2 h2 br,
                .visual .swiper-slide.pop3 h2 br {
                    display: block;
                }
} /* @media screen and (max-width:768px) */


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

.biz .wrapper {
    display: flex; /* .tit, .list 가로 배치 */
    justify-content: space-between;
    align-items: flex-start; /* .tit 높이 길이가 .list와 달라야 함 (주지 않으면 둘이 같은 높이가 됨) */
    /* overflow: hidden; 자식 요소 sticky가 안 됨 */
}

.biz .tit {
    position: sticky;
    /* 고정할 요소는 높이가 짧아야, 스크롤 시 기대한 대로 상하단에 고정할 수 있음
    좌우 배치를 flex로 한 경우, 고정할 요소가 그렇지 않은 요소와
    높이 길이가 같아지므로 align-items: flex-start를 설정해야 함 */
    top: 114px; /* sticky는 top만 줌 */
    margin-right: 30px;
}

.biz .tit strong {
    font-weight: 800;
    color: #0B3D6E;
}

.biz .tit h2 {
    font-size: 45px;
    font-weight: 800;
    line-height: 1.3;
    color: #181818;
    margin: 7px 0 0 0;
}

.biz .list {
    /* 2줄만 표시되도록 너비 제한함 */
    max-width: 720px;
    width: calc(100% - 210px);
}

.biz .list ul {
    display: flex; /* li 가로 배치 */
    /* 여러 줄 허용 */
    flex-wrap: wrap;
    gap: 24px 24px;
}

.biz .list ul li {
    /* 반응형 너비: (100% / <1줄 li 개수>) - (<1줄 gap 크기 합계> / 1줄 li 개수>)
     = (100% / 2) - (24px / 2) 
     what? ul 너비가 변함에 따라 li 너비가 변함 */
    width: calc(50% - 12px);
}
/* 홀수
 .biz .list ul li:nth-child(odd) {

} */
/* 짝수 */
.biz .list ul li:nth-child(even) {
    transform: translateY(154px);
    /* transform으로 하면 flex-wrap: wrap의 자동 줄바꿈 영향에서 벗어나서 이동할 수 있음 */
}

.biz .list ul li a {
    display: block;
    height: 500px;
    background: url(../images/biz01.jpg) no-repeat center center / cover;
    color: #fff;
    border-radius: 16px;
    position: relative; /* .txt, ::before 정렬 기준 */
    overflow: hidden;
}
.biz .list ul li.biz02 a {
    background-image: url(../images/biz02.jpg);
}
.biz .list ul li.biz03 a {
    background-image: url(../images/biz03.jpg);
}
.biz .list ul li.biz04 a {
    background-image: url(../images/biz04.jpg);
}
.biz .list ul li.biz05 a {
    background-image: url(../images/biz05.jpg);
}
.biz .list ul li a::before {
    content: "";
    position: absolute; /* a 기준 정렬 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #0B3D6E;
    opacity: 0;
    transition: 0.3s;
}

.biz .list ul li a .txt {
    /* :hover 애니메이션: 밑에서 위로 자연스럽게 올라오면서 p 태그가 드러남 */
    /* 그러러면 position: absolute;를 설정해야 함 */
    position: absolute; /* a 기준 정렬 */
    left: 30px;
    bottom: -80px;
    width: calc(100% - 60px); /* 좌우 여백 뺌 */
    transition: 0.3s;
}

.biz .list ul li a .txt h3 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 17px 0;
}

.biz .list ul li a .txt p {
    opacity: 0;
    transition: 0.3s;
}

/*** a:hover a:hover a:hover 시작 ***/
.biz .list ul li a:hover::before {
    opacity: 0.9;
}

.biz .list ul li a:hover .txt {
    bottom: 40px;
}

.biz .list ul li a:hover .txt p {
    opacity: 1;
}
/*** a:hover a:hover a:hover 끝 ***/

/* 너비 1024px 이하부터 */
@media screen and (max-width:1024px) {
        .biz .tit h2 {
            font-size: 32px;
        }

        .biz .list {
            max-width: 500px;
        }

        .biz .list ul li {
            width: 100%;
        }

        .biz .list ul li:nth-child(even) {
            transform: translateY(0);
        }

        .biz .list ul li a .txt {
            bottom: 30px;
        }
        
        .biz .list ul li a .txt h3 {
            font-size: 24px;
        }

        .biz .list ul li a .txt p {
            opacity: 1;
        }
} /* @media screen and (max-width:1024px) */

/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {
                .biz {
                    margin: 122px 0 0 0;
                }
                
                .biz .wrapper {
                    display: block; /* 모바일은 세로 배치함 (flex 필요 없음) */
                }
                
                .biz .tit {
                    position: relative; /* 모바일은 sticky 안 함 */
                    top: auto; /* top도 뺌 */
                }
                
                .biz .tit h2 {
                    font-size: 28px;
                    margin: 6px 0 0 0;
                }
                
                .biz .list {
                    /* 모바일은 너비 자동 */
                    width: auto;
                    margin: 39px 0 0 0;
                    max-width: 100%;
                }
                
                .biz .list ul {
                    /* 여러 줄 안 허용, 1줄로 배치함 */
                    flex-direction: column;
                    flex-wrap: nowrap;
                    gap: 6px 0;
                }
                
                .biz .list ul li {
                    width: auto;
                }
                /* 홀수 */
                /* .biz .list ul li:nth-child(odd) {
                
                }  */
                /* 짝수 */
                .biz .list ul li:nth-child(even) {
                    transform: translateY(0);
                    /* transform으로 하면 flex-wrap: wrap의 자동 줄바꿈 영향에서 벗어나서 이동할 수 있음 */
                }
                
                .biz .list ul li a {
                    height: 164px;
                    border-radius: 8px;
                    /* background-position: center top; */
                }
                .biz .list ul li a::before {
                    display: none; /* 모바일은 호버링 시 배경 안 씀, 거슬림 */
                }
                
                .biz .list ul li a .txt {
                    /* 모바일은 :hover 애니메이션 안 씀 */
                    left: 20px;
                    bottom: 20px;
                    width: calc(100% - 70px); /* 좌우 여백 + 오른쪽 아이콘(30px) 뺌 */
                }
                .biz .list ul li a .txt::after {
                    content: "";
                    position: absolute;
                    right: -30px;
                    bottom: 5px;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background: #fff url(../images/biz_more.svg) no-repeat center center;
                }
                
                .biz .list ul li a .txt h3 {
                    font-size: 22px;
                    margin: 0;
                }
                
                .biz .list ul li a .txt h3 br {
                    display: none;
                }
                
                .biz .list ul li a .txt p {
                    display: none; /* 모바일은 p 내용 안 씀 */
                }
                
                /*** a:hover a:hover a:hover 시작 ***/                
                .biz .list ul li a:hover .txt {
                    bottom: 20px;
                }
                /*** a:hover a:hover a:hover 끝 ***/
} /* @media screen and (max-width:768px) */

.news {
    background-color: #0B3D6E;
    color: #fff;
    margin: 124px 0 0 0;
    padding: 175px 0 123px 0;
}

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

.news .tit strong {
    font-weight: 800;
    color: #C5DAF6;
}

.news .tit h2 {
    font-size: 45px;
    font-weight: 800;
    line-height: 1.3;
    margin: 7px 0 0 0;
}

.news .list {
    margin: 39px 0 0 0;
}

/* li 다음에 나오는 li에 적용 (즉, li와 li 사이) */
/* 서로 다른 태그가 패턴을 갖고 반복해서 나올 때 사용할 수 있을 것? */
.news .list ul li+li {
    margin-top: 16px;
}

.news .list ul li a {
    display: flex;
    padding: 38px 50px;
    background-color: #F1F6FC;
    color: #282828;
    border-radius: 2px;
    align-items: center;
    justify-content: space-between;
}
.news .list ul li a:hover {
    background-color: #282828;
    color: #fff;
}

.news .list ul li a strong {
    background-color: #282828;
    color: #fff;
    font-size: 20px;
    line-height: 1.3;
    border-radius: 50px;
    padding: 7px 21px;
}
.news .list ul li.sch a strong {
    background-color: #23459C;
}
.news .list ul li a:hover strong {
    background-color: #fff;
    color: #282828;
}
.news .list ul li.sch a:hover strong {
    background-color: #F8F9FB;
    color: #23459C;
}

.news .list ul li a h3 {
    font-size: 24px;
    line-height: 1.3;
    color: #181818;
    /* 100% - 136px - 150px*/
    width: calc(100% - 286px);
    /* 1줄 제한 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news .list ul li a:hover h3 {
    color: #fff;
}

.news .more {
    position: absolute; /* .wrapper 기준 정렬 */
    right: 0;
    top: 43px;
}

.news .more a {
    display: block;
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 9px 41px 9px 23px;
    position: relative; /* ::after 정렬 기준 */
}
.news .more a::after {
    content: "";
    position: absolute; /* a 기준 정렬 */
    right: 22px;
    top: 15px;
    width: 13px;
    height: 13px;
    background: url(../images/more_w.svg) no-repeat center center / contain;
    transition: transform 1s;
}
.news .more a:hover {
    background-color: #fff;
    color: #0C4DA2;
}
.news .more a:hover::after {
    background-image: url(../images/more_on.svg);
    transform: rotate(360deg);
}

/* 너비 1024px 이하부터 */
@media screen and (max-width:1024px) {
    .news .tit h2 {
        font-size: 32px;
    }

    .news .list ul li a {
        padding: 38px 38px;
    }
    
    .news .list ul li a strong {
        font-size: 18px;
    }

    .news .list ul li a h3 {
        font-size: 20px;
        width: calc(100% - 240px);
    }

    .news .more {
        top: 36px;
    }

    .news .more a {
        padding: 5px 34px 5px 18px;
    }
    .news .more a::after {
        right: 16px;
        top: 11px;
    }
} /* @media screen and (max-width:1024px) */

/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {
                .news {
                    margin: 87px 0 0 0;
                    padding: 102px 0 80px 0;
                }
                
                .news .tit h2 {
                    font-size: 28px;
                    margin: 6px 0 0 0;
                }
                
                .news .list {
                    margin: 18px 0 0 0;
                }

                .news .list ul li {
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                }
                /* .news .list ul li:first-child {
                    border-top: 1px solid rgba(255, 255, 255, 0.1);
                } */
                .news .list ul li:last-child {
                    border-bottom: none;
                }
                
                /* li 다음에 나오는 li에 적용 (즉, li와 li 사이) */
                /* 서로 다른 태그가 패턴을 갖고 반복해서 나올 때 사용할 수 있을 것? */
                .news .list ul li+li {
                    margin-top: 0px;
                }
                
                .news .list ul li a {
                    padding: 16px 0px 16px 0px;
                    background-color: transparent;
                    color: #fff;
                }
                .news .list ul li a:hover {
                    background-color: transparent;
                }
                
                .news .list ul li a strong {
                    display: none; /* 모바일에서 안 보임 */
                }
                
                .news .list ul li a h3 {
                    font-size: 18px;
                    color: #fff;
                    /* 100% - 0px - 117px*/
                    width: calc(100% - 117px);
                }

                .news .list ul li a span {
                    font-size: 15px; /* 모바일의 날짜는 15px */
                }
                
                .news .more {
                    position: relative; /* 모바일의 .more 위치는 아래임, absolute 안 함 */
                    right: auto;
                    top: auto;
                    margin: 9px 0 0 0;
                    display: flex;
                    justify-content: center;
                }
                
                .news .more a {
                    border: none;
                    padding: 9px 42px 9px 27px;
                    background-color: #fff;
                    color: #0C4DA2;
                }
                .news .more a::after {
                    right: 23px;
                    top: 15px;
                    width: 11px;
                    height: 11px;
                    background-image: url(../images/more_on.svg);
                }
                .news .more a:hover::after {
                    transform: none;
                }
} /* @media screen and (max-width:768px) */


.webzine {
    background-color: #145BA2;
    color: #fff;
    padding: 175px 0 123px 0;
}

.webzine .wrapper {
    position: relative;
}

.webzine .tit strong {
    font-weight: 800;
    color: #C5DAF6;
}

.webzine .tit h2 {
    font-size: 45px;
    font-weight: 800;
    line-height: 1.3;
    margin: 7px 0 0 0;
}

.webzine .list {
    margin: 60px 0 0 0;
}

.webzine .list .swiper-slide a {
    display: block;
    background-color: #F1F6FC;
    color: #282828;
    border-radius: 16px;
}

.webzine .list .swiper-slide a .photo {
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    height: 277px;
}
.webzine .list .swiper-slide a .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
.webzine .list .swiper-slide a:hover .photo img {
    transform: scale3d(1.125, 1.125, 1);
}

.webzine .list .swiper-slide a .txt {
    padding: 30px 30px 40px 30px;
}

.webzine .list .swiper-slide a .txt strong {
    font-weight: 800;
    color: #23459C;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.webzine .list .swiper-slide a .txt h3 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: #181818;
    margin: 7px 0 17px 0;
    /* 2줄 제한 */
    height: 2.6em;
    overflow: hidden;
}

.webzine .list .swiper-slide a .txt p {
    /* 3줄 제한 */
    height: 4.5em;
    overflow: hidden;
}

.webzine .ctrl_wrap {
    position: absolute;
    right: 0;
    top: 44px;
    display: flex;
    gap: 0 4px;
}

.webzine .ctrl_wrap button {
    width: 44px;
    height: 44px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: url(../images/prev_w.svg) no-repeat center center;
}
.webzine .ctrl_wrap button.next {
    transform: rotate(180deg);
}
.webzine .ctrl_wrap button.swiper-button-disabled { /* disabled */
    opacity: 0.4;
    cursor: default;
}
.webzine .ctrl_wrap button:not(.swiper-button-disabled):hover {
    background-color: #fff;
    background-image: url(../images/prev_on.svg);
}

.webzine .ctrl_wrap .more a {
    display: block;
    height: 44px;
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 9px 39px 0 23px;
    position: relative; /* ::after 정렬 기준 */
}
.webzine .ctrl_wrap .more a::after {
    content: "";
    position: absolute; /* a 기준 정렬 */
    right: 20px;
    top: 14px;
    width: 13px;
    height: 13px;
    background: url(../images/more_w.svg) no-repeat center center / contain;
    transition: transform 1s;
}
.webzine .ctrl_wrap .more a:hover {
    background-color: #fff;
    color: #0C4DA2;
}
.webzine .ctrl_wrap .more a:hover::after {
    background-image: url(../images/more_on.svg);
    transform: rotate(360deg);
}

/* 너비 1024px 이하부터 */
@media screen and (max-width:1024px) {
    .webzine .tit h2 {
        font-size: 32px;
    }
    
    .webzine .list .swiper-slide a .txt {
        padding: 25px 20px 30px 20px;
    }

    .webzine .list .swiper-slide a .txt h3 {
        font-size: 20px;
    }

    .webzine .ctrl_wrap {
        top: 38px;
    }

    .webzine .ctrl_wrap button {
        width: 32px;
        height: 32px;
    }

    .webzine .ctrl_wrap .more a {
        height: 32px;
        padding: 3px 32px 0 18px;
    }
    .webzine .ctrl_wrap .more a::after {
        right: 13px;
        top: 9px;
    }


} /* @media screen and (max-width:1024px) */

/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {
                .webzine {
                    padding: 102px 0 84px 0;
                }
                
                .webzine .tit h2 {
                    font-size: 28px;
                    margin: 6px 0 0 0;
                }
                
                .webzine .list {
                    margin: 38px 0 0 0;
                }

                .webzine .list .swiper-slide {
                    max-width: 250px;
                }
                
                .webzine .list .swiper-slide a {
                    border-radius: 8px;
                }
                
                .webzine .list .swiper-slide a .photo {
                    border-radius: 8px 8px 0 0;
                    height: 171px;
                }
                .webzine .list .swiper-slide a:hover .photo img {
                    transform: none;
                }
                
                .webzine .list .swiper-slide a .txt {
                    padding: 20px 15px 25px 15px;
                }
                            
                .webzine .list .swiper-slide a .txt h3 {
                    font-size: 18px;
                    margin: 6px 0 9px 0;
                }
                
                .webzine .ctrl_wrap {
                    position: relative;
                    right: auto;
                    top: auto;
                    margin: 27px 0 0 0;
                    justify-content: center;
                }
                
                .webzine .ctrl_wrap button {
                    display: none;
                }
                
                .webzine .ctrl_wrap .more a {
                    height: 42px;
                    border: none;
                    padding: 9px 42px 0 27px;
                    background-color: #fff;
                    color: #0C4DA2;
                }
                .webzine .ctrl_wrap .more a::after {
                    right: 24px;
                    top: 15px;
                    width: 11px;
                    height: 11px;
                    background-image: url(../images/more_on.svg);
                }
                .webzine .ctrl_wrap .more a:hover::after {
                    transform: none;
                }
} /* @media screen and (max-width:768px) */


.service {
    background-color: #F1F6FC;
    padding: 175px 0 133px 0;
}

.service .tit strong {
    font-weight: 800;
    color: #0B3D6E;
}

.service .tit h2 {
    font-size: 45px;
    font-weight: 800;
    line-height: 1.3;
    color: #181818;
    margin: 7px 0 0 0;
}

.service .list {
    margin: 52px 0 0 0;
}

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

.service .list ul li {
    /* 100% / <li개수> - <gap총합> / <li개수> 
    즉, 100%/3 - 48px/3 = 33.333% - 16px */
    width: calc((100% / 3) - 16px);
}

.service .list ul li a {
    display: block;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    padding: 20px 90px 21px 30px;
    position: relative;
}
.service .list ul li a:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}
.service .list ul li a::after {
    content: "";
    position: absolute;
    right: 30px;
    top: 27px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #A9CCFF url(../images/more_w.svg) no-repeat center center / 15px;
    transition: transform 1s;
}
.service .list ul li a:hover::after {
    transform: rotate(360deg);
}

.service .list ul li a h3 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: #181818;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service .list ul li a h3 br {
    display: none;
}

/* 너비 1024px 이하부터 */
@media screen and (max-width:1024px) {
    .service .tit h2 {
        font-size: 32px;
    }

    .service .list ul li a h3 {
        font-size: 20px;
    }
    .service .list ul li a {
        text-align: center;
        padding: 20px 0 94px 0;
        height: 100%;
    }
    .service .list ul li a::after {
        right: calc(50% - 22.5px);
        top: auto;
        bottom: 28px;
    }
} /* @media screen and (max-width:1024px) */

/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {
                .service {
                    padding: 129px 0 101px 0;
                }
                
                .service .tit h2 {
                    font-size: 28px;
                    margin: 6px 0 0 0;
                }
                
                .service .list {
                    margin: 24px 0 0 0;
                }
                
                .service .list ul li {
                    /* 100% / <li개수> - <gap총합> / <li개수> 
                    즉, 100%/3 - 32px/3 */
                    width: calc((100% / 3) - (32px / 3));
                }
                
                .service .list ul li a {
                    padding: 18px 0 48px 0;
                    text-align: center;
                }
                .service .list ul li a:hover {
                    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
                }
                .service .list ul li a::after {
                    /* 모바일의 더보기 아이콘 위치는 가운데 아래 */
                    right: calc(50% - (21px/2));
                    top: auto;
                    bottom: 17px;
                    width: 21px;
                    height: 21px;
                    background-size: 7px;
                }
                .service .list ul li a:hover::after {
                    transform: none;
                }

                .service .list ul li a strong {
                    display: none;
                }
                
                .service .list ul li a h3 {
                    font-size: 18px;
                }

                .service .list ul li a h3 br {
                    display: block;
                }
} /* @media screen and (max-width:768px) */


.footer {
    padding: 83px 0 85px 0;
    color: #666;
}

.footer .wrapper {
    position: relative; /* .top 정렬 기준 */
}

.footer .top {
    position: absolute;
    right: 0;
    top: -14px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #0C4DA2 url(../images/top_w.svg) no-repeat center center / 16px;
    background-position-y: top 21px;
}

.footer .f_nav ul {
    display: flex;
    gap: 11px 43px;
    flex-wrap: wrap;
}

.footer .f_nav ul li {
    position: relative;
}
.footer .f_nav ul li::after {
    content: "";
    position: absolute; 
    right: -21px;
    top: 6px;
    width: 1px;
    height: 12px;
    background-color: rgba(204, 204, 204, 0.4);
}
.footer .f_nav ul li:last-child::after {
    display: none;
}
.footer .f_nav ul li.imp {
    font-weight: 800;
}

.footer .f_info {
    margin: 37px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 22px;
}

/* 너비 768px 이하부터 */
@media screen and (max-width:768px) {
    .footer {
        padding: 63px 0 51px 0;
    }
    
    .footer .top {
        top: -80px;
        width: 48px;
        height: 48px;
        background-position-y: top 20px;
    }
    
    .footer .f_nav ul {
        gap: 11px 41px;
    }
    .footer .f_nav ul li::after {
        right: -21px;
        top: 6px;
        height: 11px;
    }
    
    .footer .f_info {
        margin: 38px 0 45px 0;
    }
} /* @media screen and (max-width:768px) */