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

.header{
    position: fixed; /* body를 기준으로 정렬 */
    left: 0;
    top: 0;
    z-index: 100; /* 내가 맨위 */
    width: 100%;
    height: 90px;
    color: #fff;
    transition: background-color 0.3s, color 0.3s;
}
.header .wrapper{
    display: flex; /* logo-gnb-util 좌우배치 */
    justify-content: space-between;
}
.header .logo{
    margin: 22px 0 0 0;
}
.header .logo a{
    display: block;
    width: 128px;
    height: 43px;
    background: url(../images/logo_w.svg) no-repeat center center / contain;
    /* logo처럼 짤리면 안되는 이미지는 contain */
}
.header .gnb .gnb_open,
.header .gnb .gnb_close{
    display: none; /* 모바일에서만 보임 */
}
.header .gnb .gnb_wrap ul{
    display: flex; /* li를 좌우로 배치 */
}
.header .gnb .gnb_wrap ul li a{
    display: block;
    line-height: 90px;/* header의 높이만큼 */
    padding: 0 34px;
    font-size: 20px;
    font-weight: 800;
}
.header .util{
    display: flex; /* mypage-lang 좌우 배치 */
    margin: 27px 0 0 0;
}
.header .util .mypage{
    display: block;
    width: 39px;
    height: 39px;
    background: url(../images/mypage_w.svg) no-repeat center center;
}
.header .util .lang .lang_open{
    display: block;
    width: 39px;
    height: 39px;
    background: url(../images/lang_w.svg) no-repeat center center;
}
/******** fixed / over 클래스가 추가됐을때 (스타일 동일) *********/
.header.fixed,
.header.over{
    background-color: #fff;
    color: #2E3138;
    box-shadow: 0 3px 5px 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);
}
@media screen and (max-width:1024px){
            .header{
                height: 72px;
            }
            .header .wrapper{
               margin-right: 0;
            }
            .header .logo{
                margin: 19px 0 0 0
            }
            .header .logo a{
                width: 86px;
                height: 30px;
            }
            .header .gnb .gnb_open{
                display: block; /* 모바일에서만 보임 */
                width: 72px;
                height: 72px;
                background: url(../images/gnb_open_w.svg) no-repeat center center / 25px;
            }
            .header .gnb .gnb_wrap{
                display: none; /* 메뉴숨김 */
            }
            .header .util{
                display: none; /* 숨김 */
            }
            /******** fixed / over 클래스가 추가됐을때 (스타일 동일) *********/
            .header.fixed .gnb .gnb_open,
            .header.over .gnb .gnb_open{
                background-image: url(../images/gnb_open.svg);
            }
}/*@media*/
@media screen and (max-width:768px){
            .header{
                height: 56px;
            }
            .header .logo{
                margin: 15px 0 0 0;
            }
            .header .logo a{
                width: 79px;
                height: 26px;
            }
            .header .gnb .gnb_open{
                width: 56px;
                height: 56px;
                background-size: 21px;
            }
}/*@media*/

.visual{
    position: relative; /* scroll 정렬의 기준 */
}
.visual .swiper-slide{
    height: 100dvh; /* 브라우저의 높이 */
    min-height: 500px;
    background: url(../images/visual_bg01.jpg) no-repeat center center / cover;
    color: #fff;
    display: flex; /* wrapper를 아래로 정렬 */
    align-items: flex-end;
}
.visual .swiper-slide.pop2{
    background-image: url(../images/visual_bg02.jpg);
}
.visual .swiper-slide.pop3{
    background-image: url(../images/visual_bg03.jpg);
}
.visual .swiper-slide h2{
    font-size: 70px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 97px 0;
}
.visual .scroll{
    position: absolute;
    /* left: 50%;
    transform: translateX(-50%);
    bottom: 33px; */
    right: 0;
    bottom: 100px;
    transform: rotate(90deg);
    z-index: 10;
    font-size: 12px;
    color: #fff;
}
.visual .scroll::before,
.visual .scroll::after{
    content: "";
    position: absolute; /* scroll를 기준으로 정렬 */
    /* left: 0;
    bottom: -11px;
    width: 100%;
    height: 13px; */
    right: -20px;
    top: 0;
    width: 13px;
    height: 100%;
    transform: rotate(-90deg);
    background: url(../images/visual_scroll.svg) no-repeat center center;
}
.visual .scroll::after{
    /* bottom: -15px; */
    opacity: 0;
    animation: scroll1 2s linear 1s infinite;
}
.visual .scroll::before{
    animation: scroll1 2s linear infinite;
}
/* 삼천리 스타일 */
@keyframes scroll1 {
    0%{right: -20px;opacity: 1;}
    80%{right: -28px;opacity: 1;}
    100%{right: -30px;opacity: 0;}
}
/*  위아래 반복 스타일 
@keyframes scroll1 {
    0%{right: -20px;}
    50%{right: -30px;}
    100%{right: -20px;} 
} */
@media screen and (max-width:1024px){
            .visual .swiper-slide h2{
                font-size: 50px;
                margin: 0 0 64px 0;
            }
            .visual .scroll{
                display: none;
            }
}/*@media*/
@media screen and (max-width:768px){
            .visual .swiper-slide h2{
                font-size: 40px;
            }
}/*@media*/

.biz{
    margin: 174px 0 0 0;
}
.biz .wrapper{
    display: flex; /* tit-list 좌우 배치 */
    justify-content: space-between;
    align-items: flex-start;
    /* align-item을 안주면 좌우로 들어가는 요소의 높이가 동일해짐
       align-item: flex-start를 주면 tit과 list가 각자의 콘텐츠가 존재하는 만큼만 높이가 잡힘 */
}
.biz .tit{
    position: sticky;
    /* 왼쪽에 고정할 요소는 오른쪽의 요소보다 반드시 짧아야 구현이 가능함.
       좌우 배치를 flex로 했다면 반드시 align-item: flex-start를 추가해줘야함 
       감싸는 요소 중에서 단한개의 요소라도 overflow:hidden값을 가지고 있으면 작동하지 않음   
    */
    top: 100px;
    /* sticky를 주면 대부분 top값만 줌 (left를 주면 도망감 ㅋ)
       맨 상단에서 부터 얼만큼 떨어져서 고정할지 위치값임 */
}
.biz .tit strong{
    font-weight: 800;
    color: #0065BD;
}
.biz .tit h2{
    font-size: 45px;
    font-weight: 800;
    line-height: 1.3;
    color: #2E3138;
    margin: 10px 0 0 0;
}
.biz .list{
    max-width: 832px; 
    /* 최대넓이 - 넓이가 이이상 늘어나지 않음 - 그리고 그보다 작을때는 260px의 여백을 빼고 나머지 전부 */
    width: calc(100%  -  260px); 
}
.biz .list ul{
    display: flex; /* li를 좌우로 배치 */
    flex-wrap: wrap; /* 여러줄 허용 */
    flex-direction: row-reverse; /**/
    gap: 24px 24px;
}
.biz .list ul li{
    width: calc(50%  -  12px);
    /* 100% / 한줄에 나오는 li 갯수 - 한줄의 여백의 합/한줄에 나오는 li 갯수
       100%/2 - 24/2 == 50% - 12px */
}
.biz .list ul li:nth-child(even){ /* 홀수 odd, 짝수 even */
    transform: translateY(152px);
    /* margin으로 여백을 주면 다른 요소가 같이 밀림 
       transform: translateY로 조절하면 괜찮음 
       transform 은 다른 요소에 영상을 끼치지 않음 
       --- 왼쪽에 있는 걸 오른쪽으로 transform으로 움직이면 겹침.. 밀리지 않음 */
}
.biz .list ul li a{
    display: block;
    height: 490px;
    background: url(../images/biz01.jpg) no-repeat center center / cover;
    color: #fff;
    border-radius: 20px;
    position: relative; /* txt정렬의 기준 */
    overflow: hidden; /* p태그 밖으로 삐져나가는거 막기 */
}
.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: #0065BD;
    opacity: 0;
    transition: 0.3s;
}
.biz .list ul li a .txt{
    /* 마우스 오버 애니메이션을 줄때 밑에서 위로 자연스럽게 올라오면서
       p태그가 나타남.. -- 그래서 a를 기준으로 absolute 줌 */
    position: absolute; /* a를 기준으로 정렬 */
    left: 40px;
    bottom: -40px;
    width: calc(100%  -  80px); /* 좌우 여백을 합 빼기 */
    transition: bottom 0.3s;
}
.biz .list ul li a .txt h3{
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 10px 0;
}
.biz .list ul li a .txt p{
    opacity: 0;
    transition: 0.3s;
}
/****** hover했을때 ******/
.biz .list ul li a:hover::before{
    opacity: 0.9;
}
.biz .list ul li a:hover .txt{
    bottom: 50px;
}
.biz .list ul li a:hover .txt p{
    opacity: 1;
}
@media screen and (max-width:1024px){
                .biz .tit h2{
                    font-size: 38px;
                }
                .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: 40px;
                }
                .biz .list ul li a .txt h3{
                    font-size: 28px;
                }
                .biz .list ul li a .txt p{
                    opacity: 1;
                }
}
@media screen and (max-width:768px){
                .biz{
                    margin: 125px 0 0 0;
                }
                .biz .wrapper{
                    display: block; /* flex해제 */
                }
                .biz .tit{
                    position: relative; /* sticky해제 - relative 제일 멀쩡한 값이라 */
                    top: auto; /* 0이랑 다름 - 아예 안준 것 처럼 됨 */
                }
                .biz .tit h2{
                    font-size: 32px;
                    margin: 6px 0 0 0;
                }
                .biz .tit h2 br{
                    display: none; /* 줄바꿈 삭제 */
                }
                .biz .list{
                    max-width: 100%;
                    width: auto; 
                    /* auto 원래 속성대로 넓이를 갖음 -
                       block요소면 100%들어감.. 
                       그냥 100%하면 안되냐???? - margin을 좌우로 줘버리면 늘어남 */
                    margin: 42px 0 0 0;
                }
                .biz .list ul{
                    flex-wrap: nowrap; /* 여러줄 허용 안함 */
                    flex-direction: column;
                    gap: 8px 0;
                }
                .biz .list ul li{
                    width: auto;
                }
                .biz .list ul li:nth-child(even){ /* 홀수 odd, 짝수 even */
                    transform: translateY(0);
                }
                .biz .list ul li a{
                    height: 150px;
                    border-radius: 10px;
                }
                /* .biz .list ul li a::before{
                    display: none;
                } */
                .biz .list ul li a .txt{
                    left: 20px;
                    bottom: 20px;
                    width: calc(100%  -  70px); /* 좌우 여백을 합 빼기 */
                }
                .biz .list ul li a .txt::after{
                    content: "";
                    position: absolute;
                    right: -24px;
                    top: 0;
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    background: #fff url(../images/biz_more.svg) no-repeat center center ;
                }
                .biz .list ul li a .txt h3{
                    font-size: 24px;
                    margin: 0;
                }
                .biz .list ul li a .txt h3 br{
                    display: none; /* 줄바꿈삭제 */
                }
                .biz .list ul li a .txt p{
                    display: none; /* 계속 안나옴 */
                }
                /****** hover했을때 ******/
                .biz .list ul li a:hover .txt{
                    bottom: 20px;
                }
}/*@media*/

.news{
    background-color: #F3F6F9;
    margin: 124px 0 0 0;
    padding: 174px 0 113px 0;
}
.news .wrapper{
    position: relative; /* more 정렬의 기준 */
}
.news .tit strong{
    font-weight: 800;
    color: #0065BD;
}
.news .tit h2{
    font-size: 45px;
    font-weight: 800;
    line-height: 1.3;
    color: #2E3138;
    margin: 10px 0 0 0;
}
.news .list{
    margin: 31px 0 0 0;
}
/*
    <ul>
        <li></li>    --- (X)맨 위에 있는 li라 해당 사항 없음
        <li></li>    --- (O)위에 li가 있고 다음에 나오는 li라 li + li 선택가능
        <li></li>    --- (O)선택가능
        <li></li>    --- (O)선택가능
    </ul>
*/
.news .list ul li + li{
    margin-top: 12px;
}
.news .list ul li a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 40px 21px 40px;
    background-color: #fff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
}
.news .list ul li a:hover{
    background-color: #536385;
    color: #fff;
}
.news .list ul li a strong{
    background-color: #536385;
    color: #fff;
    padding: 4px 18px 5px 18px;
    border-radius: 20px;
}
.news .list ul li a:hover strong{
    background-color: #fff;
    color: #536385;
    font-weight: 800;
}
.news .list ul li.sch a strong{
    background-color: #0065BD;
}
.news .list ul li.sch a:hover strong{
    background-color: #fff;
    color: #0065BD;
}
.news .list ul li a h3{
    font-size: 20px;
    font-weight: 800;
    color: #2E3138;
    line-height: 1.3;
    width: calc(100%  -  214px);
    /*  strong 카테고리명 + span 날짜가 더이상 늘어나지 않는다는 가정하에
        100%에서 그 두개의 넓이를 뺀값이 제목의 넓이
        84 + 130 = 214  
        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: 42px;
}
.news .more a{
    display: block;
    border: 1px solid #99A3B7;
    border-radius: 30px;
    padding: 12px 56px 11px 33px;
    position: relative; /* after 정렬의 기준 */
}
.news .more a:hover{
    border-color: #536385;
    background-color: #536385;
    color: #fff;
}
.news .more a::after{
    content: "";
    position: absolute; /* a를 기준으로 정렬 */
    right: 34px;
    top: 17px;
    width: 14px; /* 아이콘 사이즈 */
    height: 14px;
    background: url(../images/more1.svg) no-repeat center center / contain;
    transition: transform 1s;
}
.news .more a:hover::after{
    background-image: url(../images/more_w.svg);
    transform: rotate(360deg);
}
@media screen and (max-width:1024px){
    .news .tit h2{
        font-size: 38px;
    }
    .news .list ul li a {
        padding: 20px 40px 14px 40px;
    }
    .news .list ul li a h3{
        font-size: 18px;
    }
    .news .more {
        top: 32px;
    }
    .news .more a{
        padding: 9px 56px 8px 33px;
    }
    .news .more a::after {
        top: 14px;
    }
}/*@media*/
@media screen and (max-width:768px){
                .news{
                    margin: 84px 0 0 0;
                    padding: 126px 0 88px 0;
                }
                .news .tit h2{
                    font-size: 32px;
                    margin: 6px 0 0 0;
                }
                .news .list{
                    margin: 40px 0 0 0;
                }
                .news .list ul li{
                    border-bottom: 1px solid rgba(153, 163, 183, 0.5);
                }
                .news .list ul li:first-child{
                    border-top: 1px solid rgba(153, 163, 183, 0.5);
                }
                .news .list ul li + li{
                    margin-top: 0;
                }
                .news .list ul li a{
                    padding: 13px 0 12px 0;
                    background-color: transparent;
                    box-shadow: none;
                }
                .news .list ul li a:hover{
                    background-color: transparent;
                    color: inherit;
                }
                .news .list ul li a strong{
                    display: none; /* 모바일에서 숨김 */
                }
                .news .list ul li a h3{
                    font-size: 16px;
                    width: calc(100%  -  120px);
                }
                .news .list ul li a:hover h3{
                    color: #2E3138;
                }
                .news .more{
                    position: relative; /* absolute 해제 */
                    right: auto; /* 아예 안준것 처럼 해제 */
                    top: auto;
                    margin: 29px 0 0 0;
                    display: flex;
                    justify-content: center;
                }
                .news .more a{
                    border: none;
                    padding: 8px 54px 7px 32px;
                    background-color: #536385;
                    color: #fff;
                }
                .news .more a::after{
                    right: 32px;
                    top: 13px;
                    width: 12px; /* 아이콘 사이즈 */
                    height: 12px;
                    background-image: url(../images/more_w.svg);
                }
}/*@media*/

.webzine{
    background-color: #01194C;
    color: #fff;
    padding: 174px 0 123px 0;
}
.webzine .wrapper{
    position: relative; /* ctrl_wrap의 정렬의 기준 */
}
.webzine .tit strong{
    font-weight: 800;
    color: #78B1E3;
}
.webzine .tit h2{
    font-size: 45px;
    font-weight: 800;
    line-height: 1.3;
    margin: 10px 0 0 0;
}
.webzine .list{
    margin: 45px 0 0 0;
}
.webzine .list .swiper-slide a{
    display: block;
    background-color: #fff;
    color: #515662;
    border-radius: 20px;
}
.webzine .list .swiper-slide a .photo{
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    height: 232px;
}
.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 45px 30px;
}
.webzine .list .swiper-slide a .txt strong {
    font-weight: 800;
    color: #0065BD;
    display: block;

    /* 1줄제한 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.webzine .list .swiper-slide a .txt h3{
    font-size: 24px;
    font-weight: 800;
    color: #2E3138;
    margin: 11px 0 11px 0;
    /* 2줄 제한 */
    line-height: 1.3;
    height: 2.6em; /* 행간 * 줄수 = 단위em */
    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 2줄 */
}
.webzine .list .swiper-slide a .txt p{
    /* 3줄 제한 */
    line-height: 1.5;
    height: 4.5em; /* 행간 * 줄수 = 단위em */
    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 3줄 */
}
.webzine .ctrl_wrap{
    position: absolute;
    right: 0;
    top: 39px;
    display: flex; /* prev-next-more 좌우로 정렬 */
    gap: 0 6px;
}
.webzine .ctrl_wrap button{
    width: 49px;
    height: 49px;
    border-radius: 50%;
    border: 1px solid #F3F6F9;
    background: url(../images/prev1.svg) no-repeat center center;
}
.webzine .ctrl_wrap button:hover:not(.swiper-button-disabled){
    border-color: #fff;
    background-color: #fff;
    background-image: url(../images/prev2.svg);
}
.webzine .ctrl_wrap button.next{
    transform: rotate(180deg);
}
.webzine .ctrl_wrap button.swiper-button-disabled{
    opacity: 0.4;
    cursor: default;
}
.webzine .ctrl_wrap .more a{
    display: block;
    height: 49px;
    border: 1px solid #F3F6F9;
    border-radius: 30px;
    padding: 12px 56px 0 33px;
    position: relative; /* after 정렬의 기준 */
}
.webzine .ctrl_wrap .more a:hover{
    background-color: #fff;
    color: #01194C;
}
.webzine .ctrl_wrap .more a::after{
    content: ""; /* before/after 필수값 */
    position: absolute;
    right: 34px;
    top: 17px;
    width: 14px; /* 아이콘사이즈 */
    height: 14px;
    background: url(../images/more1.svg) no-repeat center center / contain;
    transition: transform 1s;
}
.webzine .ctrl_wrap .more a:hover::after{
    background-image: url(../images/more2.svg);
    transform: rotate(360deg);
}
@media screen and (max-width:1024px){
                .webzine .tit h2{
                    font-size: 38px;
                }
                .webzine .ctrl_wrap{
                    top: 36px;
                }
                .webzine .ctrl_wrap button{
                    width: 44px;
                    height: 44px;
                }
                .webzine .ctrl_wrap .more a{
                    height: 44px;
                    padding: 10px 56px 0 33px;
                }
                .webzine .ctrl_wrap .more a::after{
                    top: 14px;
                }
                .webzine .list .swiper-slide a .txt {
                    padding: 25px 20px 35px 20px;
                }
                .webzine .list .swiper-slide a .txt h3{
                    font-size: 22px;
                }
}/*@media*/
@media screen and (max-width:768px){
                .webzine{
                    padding: 137px 0 86px 0;
                }
                .webzine .tit h2{
                    font-size: 32px;
                    margin: 6px 0 0 0;
                }
                .webzine .list{
                    margin: 37px 0 0 0;
                }
                .webzine .list .swiper-slide{
                    width: 250px;
                }
                .webzine .list .swiper-slide a{
                    border-radius: 10px;
                }
                .webzine .list .swiper-slide a .photo{
                    border-radius: 10px 10px 0 0;
                    height: 184px;
                }
                .webzine .list .swiper-slide a .txt{
                    padding: 26px 16px 34px 16px;
                }
                .webzine .list .swiper-slide a .txt h3{
                    font-size: 20px;
                    margin: 8px 0 9px 0;
                }
                .webzine .ctrl_wrap{
                    position: relative; /* absolute해제 */
                    right: auto;
                    top: auto;
                    justify-content: center;
                    margin: 29px 0 0 0;
                }
                .webzine .ctrl_wrap button{
                    display: none;
                }
                .webzine .ctrl_wrap .more a{
                    height: 39px;
                    border: none;
                    padding: 8px 54px 0 32px;
                    background-color: #536385;
                }
                .webzine .ctrl_wrap .more a::after{
                    right: 32px;
                    top: 13px;
                    width: 12px; /* 아이콘사이즈 */
                    height: 12px;
                    background-image: url(../images/more_w.svg);
                }
}/*@media*/

.service{
    margin: 174px 0 116px 0;
}
.service .tit strong{
    font-weight: 800;
    color: #0065BD;
}
.service .tit h2 {
    font-size: 45px;
    font-weight: 800;
    line-height: 1.3;
    color: #2E3138;
    margin: 10px 0 0 0;
}
.service .list{
    margin: 32px 0 0 0;
}
.service .list ul{
    display: flex; /* li를 좌우 배치 */
    justify-content: space-between;
}
.service .list ul li{
    width: calc(33.33%  -  16px);
    /*
        100% / 한줄에보이는li갯수 - 한줄의여백의합 / 한줄에보이는li갯수
        100% / 3  - (24+24) / 3
        33.33% - 16px
    */
}
.service .list ul li a{
    display: block;
    background-color: #F3F6F9;
    padding: 35px 40px 35px 40px;
    position: relative; /* after 정렬의 기준 */
}
.service .list ul li a:hover{
    background-color: #536385;
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.1);
}
.service .list ul li a::after{
    content: "";/* 필수값 */
    position: absolute;
    right: 40px;
    top: 34px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #99A3B7 url(../images/more_w.svg) no-repeat center center / 10px;
    transition: transform 1s;
}
.service .list ul li a:hover::after{
    background-color: #fff;
    background-image: url(../images/more2.svg);
    transform: rotate(360deg);
}
.service .list ul li a strong{
    display: none;
}
.service .list ul li a h3{
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    color: #2E3138;
}
.service .list ul li a:hover h3{
    color: #fff;
}
.service .list ul li a h3 br{
    display: none; /* 모바일에서만 줄바꿈 */
}
@media screen and (max-width:1024px){
                .service .tit h2 {
                    font-size: 38px;
                }
                .service .list ul li a {
                    text-align: center;
                    padding: 35px 40px 64px 40px;
                    height: 100%; /* li의 높이와 동일하게 */
                }
                .service .list ul li a::after {
                    right: calc(50% - 13.5px); /* 넓이의 절반 */
                    top: auto;
                    bottom: 20px;
                }
                .service .list ul li a h3{
                    font-size: 18px;
                }
}/*@media*/
@media screen and (max-width:768px){
                .service{
                    margin: 123px 0 100px 0;
                }
                .service .tit h2 {
                    font-size: 32px;
                    margin: 6px 0 0 0;
                }
                .service .list{
                    margin: 28px 0 0 0;
                }
                .service .list ul{
                    flex-direction: column;
                    gap: 8px 0;
                }
                .service .list ul li{
                    width: auto;
                }
                .service .list ul li a{
                    padding: 26px 20px 25px 20px;
                    text-align: left;
                }
                .service .list ul li a::after{
                    right: 20px;
                    top: 26px;
                    bottom: auto;
                    width: 21px;
                    height: 21px;
                    background-size: 8px;
                }
                .service .list ul li a h3{
                    font-size: 16px;
                }
}/*@media*/

.footer{
    background-color: #343B48;
    color: #99A3B7;
    padding: 78px 0 92px 0;
}
.footer .wrapper{
    position: relative; /* top 정렬의 기준 */
}
.footer .top{
    position: absolute; /* wrapper를 기준으로 정렬 */
    right: 0;
    top: -18px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #0065BD url(../images/top_w.svg) no-repeat center center;
}
.footer .top:hover{
    background-color: #fff;
    background-image: url(../images/top.svg);
}
.footer .f_nav ul{
    display: flex; /* li를 좌우에 배치 */
    gap: 6px 40px;
    flex-wrap: wrap; /* 여러줄 허용 */
}
.footer .f_nav ul li{
    position: relative; /* after 정렬의 기준 */
}
.footer .f_nav ul li.imp{
    color: #fff;
    font-weight: 800;
}
.footer .f_nav ul li::after{
    content: ""; /* after/before 필수값 */
    position: absolute;
    right: -22px;
    top: 5px;
    width: 1px;
    height: 12px;
    background-color: rgba(153, 163, 183, 0.5);
}
.footer .f_nav ul li:last-child::after{
    display: none;
}
.footer .f_info{
    margin: 34px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}
@media screen and (max-width:768px){
        .footer{
            padding: 86px 0 79px 0;
        }
        .footer .top{
            top: -103px;
        }
        .footer .f_info{
            margin: 48px 0;
        }
}/*@media*/