@charset "utf-8";

img {max-width: 100%;}
.desc {
    font-size: 20px;
    line-height: 1.5;
    word-break: keep-all;
}
.desc span {
    color: #00467b;
    font-weight: bold;
}
.more-btn {
    background: #00467b;
    border-radius: 8px;
    width: max-content;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    color: #fff;
    font-size: 18px;
    transition: all .3s;
    font-weight: bold;
}
.more-btn img {margin-left: 10px;}
.more-btn:hover {background: #002d4f;}
.admin-btn {
    position: relative;
    z-index: 10;
    margin-top: 30px;
    text-align: center;
}
.admin-btn a {
    font-size: 20px;
    color: #ef2727;
    display: inline-block;
}
@media all and (max-width: 767px) {
    .desc {font-size: 16px;}
    .more-btn {
        height: 40px;
        padding: 0 25px;
        border-radius: 5px;
        font-size: 15px;
    }
}

/*메인*/
.main .visual {padding: 0 50px;}
.main .visual .inner {
    position: relative;;
    background: #ecf1f5;
    border-radius: 20px;
    max-width: 1820px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    align-items: end;
    justify-content: end;
}
.main .visual .txt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 110px;
    z-index: 1;
}
.main .visual h2 {
    font-size: 50px;
    margin-bottom: 50px;
    word-break: keep-all;
}
.main .visual .more-btn {
    margin-top: 80px;
    font-size: 20px;
}
.main .service {padding: 150px 0;}
.main .service .title {
    margin-bottom: 100px;
    text-align: center;
}
.main .service .title h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}
.main .service .title h2::before,
.main .service .title h2::after {
    content: "";
    background: #00467b;
    width: 50px;
    height: 1px;
    display: block;
}
.main .service .title h2 span {
    font-size: 24px;
    color: #00467b;
    margin: 0 15px;
}
.main .service .title p {
    font-size: 40px;
    font-weight: bold;
    line-height: 1.5;
    word-break: keep-all;
}
.main .service ul {
    display: flex;
    flex-wrap: wrap;
    margin-right: -40px;
}
.main .service ul li {
    width: calc((100% - 120px)/4);
    padding-right: 40px;
    margin-right: 40px;
    border-right: 1px solid #ddd;
    padding-bottom: 50px;
}
.main .service ul li:nth-child(4n) {
    border-right: none;
    margin-right: 0;
}
.main .service ul li:nth-child(5),
.main .service ul li:nth-child(6),
.main .service ul li:nth-child(7),
.main .service ul li:nth-child(8) {padding-bottom: 0;}
.main .service ul li a {display: block;}
.main .service ul li .img {
    width: 100%;
    aspect-ratio: 290 / 220;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 4px solid transparent;
    transition: all .3s;
}
.main .service ul li .img .plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    border: 2px solid #00467b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
}
.main .service ul li p {
    font-size: 21px;
    font-weight: bold;
    margin-top: 25px;
    text-align: center;
    transition: all .3s;
}
.main .service ul li:hover .img {border-color: #00467b;}
.main .service ul li:hover .img .plus {opacity: 0;}
.main .service ul li:hover p {color: #00467b;}
.main .service ul li:first-child .img {background-image: url(/img/assets/main_service_img_01.jpg)}
.main .service ul li:first-child:hover .img {background-image: url(/img/assets/main_service_img_01_hover.jpg)}
.main .service ul li:nth-child(2) .img {background-image: url(/img/assets/main_service_img_02.jpg)}
.main .service ul li:nth-child(2):hover .img {background-image: url(/img/assets/main_service_img_02_hover.jpg)}
.main .service ul li:nth-child(3) .img {background-image: url(/img/assets/main_service_img_03.jpg)}
.main .service ul li:nth-child(3):hover .img {background-image: url(/img/assets/main_service_img_03_hover.jpg)}
.main .service ul li:nth-child(4) .img {background-image: url(/img/assets/main_service_img_04.jpg)}
.main .service ul li:nth-child(4):hover .img {background-image: url(/img/assets/main_service_img_04_hover.jpg)}
.main .service ul li:nth-child(5) .img {background-image: url(/img/assets/main_service_img_05.jpg)}
.main .service ul li:nth-child(5):hover .img {background-image: url(/img/assets/main_service_img_05_hover.jpg)}
.main .service ul li:nth-child(6) .img {background-image: url(/img/assets/main_service_img_06.jpg)}
.main .service ul li:nth-child(6):hover .img {background-image: url(/img/assets/main_service_img_06_hover.jpg)}
.main .service ul li:nth-child(7) .img {background-image: url(/img/assets/main_service_img_07.jpg)}
.main .service ul li:nth-child(7):hover .img {background-image: url(/img/assets/main_service_img_07_hover.jpg)}
.main .service ul li:nth-child(8) .img {background-image: url(/img/assets/main_service_img_08.jpg)}
.main .service ul li:nth-child(8):hover .img {background-image: url(/img/assets/main_service_img_08_hover.jpg)}
.main .link .inner {
    display: flex;
    flex-wrap: wrap;
}
.main .link .inner a {
    width: calc((100% - 30px)/2);
    display: block;
    border-radius: 10px;
    padding: 60px;
    margin-right: 30px;
}
.main .link .inner a:last-child {margin-right: 0;}
.main .link .inner h3 {
    font-size: 30px;
    margin-bottom: 20px;
}
.main .link .inner .more-btn {
    height: 40px;
    border-radius: 5px;
}
.main .link .inner .specialists {
    background: url(/img/assets/main_link_specialists_bg.jpg) center / cover no-repeat;
    color: #fff;
}
.main .link .inner .specialists .more-btn {
    background: #fff;
    color: #00467b;
}
.main .link .inner .specialists .more-btn:hover {background: #ecf1f5;}
.main .link .inner .location {background: url(/img/assets/main_link_location_bg.jpg) center / cover no-repeat;}
.main .link .inner .location .more-btn {}

@media all and (max-width: 1919px) {
    .main .visual .img {width: 60%;}
}
@media all and (max-width: 1600px) {
    .main .visual .txt {left: 80px;}
    .main .visual h2 {font-size: 42px;}
    .main .service .title p {font-size: 36px;}
}
@media all and (max-width: 1024px) {
    .main .visual {padding: 0 30px;}
    .main .visual .inner {
        display: block;
        padding-top: 100px;
    }
    .main .visual .txt {
        position: static;
        transform: none;
        text-align: center;
        margin-bottom: 50px;
    }
    .main .visual h2 {margin-bottom: 30px;}
    .main .visual .more-btn {margin: 30px auto 0;}
    .main .visual .img {width: 100%;}
    .main .service ul li {
        width: calc((100% - 40px)/2);
    }
    .main .service ul li:nth-child(4n) {
        border-right: 1px solid #ddd;
        margin-right: 40px;
    }
    .main .service ul li:nth-child(2n) {
        border-right: none;
        margin-right: 0;
    }
    .main .service ul li:nth-child(5), .main .service ul li:nth-child(6) {padding-bottom: 50px;}
    .main .link .inner a {
        width: 100%;
        margin: 0 0 30px;
    }
    .main .link .inner a:last-child {margin-bottom: 0;}
}
@media all and (max-width: 767px) {
    .main .visual {padding: 0 15px;}
    .main .visual .inner {padding-top: 40px;}
    .main .visual .txt {
        padding: 0 30px;
        margin-bottom: 30px;
    }
    .main .visual h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .main .visual .more-btn {
        font-size: 16px;
        margin-top: 20px;
    }
    .main .service {padding: 50px 0;}
    .main .service .title {margin-bottom: 30px;}
    .main .service .title h2 {margin-bottom: 20px;}
    .main .service .title h2 span {font-size: 16px;}
    .main .service .title p {font-size: 20px;}
    .main .service ul {margin-right: -30px;}
    .main .service ul li {
        width: calc((100% - 30px)/2);
        margin-right: 15px;
        padding-right: 15px;
        padding-bottom: 25px;
    }
    .main .service ul li:nth-child(5), .main .service ul li:nth-child(6) {padding-bottom: 25px;}
    .main .service ul li .img .plus {
        width: 36px;
        height: 36px;
    }
    .main .service ul li p {
        font-size: 16px;
        margin-top: 15px;
        word-break: keep-all;
    }
    .main .link .inner a {
        padding: 25px;
        margin-bottom: 15px;
    }
    .main .link .inner h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }
}

/*서브*/
.page-title {margin-bottom: 80px;}
.page-title h2 {font-size: 50px;}
@media all and (max-width: 767px) {
    .page-title {margin-bottom: 30px;}
    .page-title h2 {font-size: 36px;}
}

/*회사 소개*/
.sub-company .top {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 100px;
}
.sub-company .slider-controls {
    display: flex;
    align-items: center;
}
.sub-company .slider-controls > div {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: #eeeff3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.sub-company .slider-controls .prev-btn img {opacity: 0.3;}
.sub-company .slider-controls .next-btn {
    background: #00467b;
    margin-left: 20px;
}
.sub-company .bottom {padding-left: calc((100% - 1400px)/2)}
.sub-company .office-slider .swiper-slide {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 600 / 400;
}
@media all and (max-width: 1440px) {
    .sub-company .bottom {padding-left: 80px;}
}
@media all and (max-width: 1024px) {
    .sub-company .bottom {padding-left: 50px;}
}
@media all and (max-width: 991px) {
    .sub-company .slider-controls {
        width: 100%;
        margin-top: 30px;
    }
}
@media all and (max-width: 767px) {
    .sub-company .top {margin-bottom: 50px;}
    .sub-company .slider-controls > div {
        width: 40px;
        height: 40px;
    }
    .sub-company .slider-controls .next-btn {margin-left: 10px;}
    .sub-company .slider-controls > div img {width: 8px;}
    .sub-company .bottom {padding-left: 15px;}
}

/*업무 소개*/
.sub-service ul {
    border-top: 1px solid #111;
    display: flex;
    flex-wrap: wrap;
}
.sub-service ul li {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 80px;
    padding-top: 80px;
    border-top: 1px solid #ddd;
    scroll-margin-top: 150px;
}
.sub-service ul li:nth-child(odd) {padding-right: 50px;}
.sub-service ul li:nth-child(2n) {padding-left: 50px;}
.sub-service ul li:first-child,
.sub-service ul li:nth-child(2) {
    border-top: none;
    margin-top: 0;
    padding-top: 80px;
}
.sub-service h3 {
    font-size: 32px;
    margin-bottom: 25px;
}
.sub-service .desc b {font-weight: 600;}
.sub-service .img {margin-top: 60px;}
@media all and (max-width: 1024px) {
    .sub-service ul li:nth-child(odd) {padding-right: 20px;}
    .sub-service ul li:nth-child(2n) {padding-left: 20px;}
}
@media all and (max-width: 991px) {
    .sub-service ul li {
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .sub-service .img img {
        max-width: none;
        width: 100%;
    }
}
@media all and (max-width: 767px) {
    .sub-service ul {padding-top: 30px;}
    .sub-service ul li {
        padding-bottom: 30px !important;
        margin-bottom: 30px !important;
        border-bottom: 1px solid #ddd !important;
    }
    .sub-service ul li:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .sub-service h3 {
        font-size: 24px;
        margin-bottom: 15px;
    }
    .sub-service .img {margin-top: 30px;}
}

/*오시는 길*/
.sub-location .map {
    height: 500px;
    overflow: hidden;
}
.sub-location .map .root_daum_roughmap {
    width: 100% !important;
    height: 100%;
}
.sub-location .map .root_daum_roughmap .wrap_map {height: 100% !important;}
.sub-location .info {
    border-top: 1px solid #111;
    padding-top: 50px;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
}
.sub-location .info li {
    width: 25%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.sub-location .info li .ico {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: #f1f3f8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sub-location .info li .txt {
    width: calc(100% - 50px);
    padding-left: 25px;
    font-size: 18px;
}
.sub-location .info li h3 {margin-bottom: 6px;}
.sub-location .info .address {width: 50%;}

@media all and (max-width: 1024px) {
    .sub-location .info li {width: 50%;}
    .sub-location .info .address {
        width: 100%;
        padding-bottom: 50px;
    }
}
@media all and (max-width: 767px) {
    .sub-location .map {height: 300px;}
    .sub-location .info {
        padding-top: 30px;
        margin-top: 30px;
    }
    .sub-location .info li {
        width: 100%;
        align-items: start;
        padding-bottom: 20px;
    }
    .sub-location .info li:last-child {padding-bottom: 0;}
    .sub-location .info li .txt {
        font-size: 16px;
        padding-left: 15px;
    }
    .sub-location .info li .ico {
        width: 42px;
        height: 42px;
    }
    .sub-location .info .address {padding-bottom: 20px;}
}