@charset "UTF-8";

/* reset css */
*,:before,:after {box-sizing:border-box;}

/* 모든태그 여백빼기 */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,code,em,img,strong,sub,sup,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figure,figcaption,footer,header,hgroup,menu,nav,section,main,audio,video {margin: 0; padding: 0;}

/* fullpage */
html {font-size: 62.5%;height: 100%;width: 100%;}
body {width: 100%;height: 100%;overflow: hidden;}
/* body.on {overflow: hidden;} */

ol, ul {list-style: none;}

a {text-decoration: none;color: inherit;}

address, em {font-style: normal;}
strong {font-weight: normal;}
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;}

/* 외부컨텐츠 안쪽내용이 페이지에 영향을 못주도록 가리기 */
iframe {overflow: hidden;border: 0;}

table {border-collapse: collapse;border-spacing: 0;width: 100%;table-layout: fixed;}
input, select, textarea, button {vertical-align: middle;margin: 0;padding: 0;border-radius: 0;}

/* 공통스타일 */
body,input,button,select,textarea,table {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif;
    font-size: 1.6rem;
    color: #252525;
    line-height: 1.6;
    letter-spacing: -0.03em;
    word-break: keep-all;
}

.blind {
    font-size: 0;
    line-height: 0;
    height: 0;
    overflow: hidden;
    text-indent: -9999px;
}

/* float해제 */
.clearfix:after {content: '';display: block;clear: both;}

.flex {display: flex;}

.mt7 {margin-top: 7px;}
.ml5 {margin-left: 5px;}

/* 모바일 최소단말기 크기 까지만 */
body {min-width: 320px;}

/* header */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    line-height: 70px;
    height: 70px;
    width: 100%;
    overflow: hidden;
    z-index: 999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.4s;
    transition-timing-function: ease;
}
#header .inner {
    display: flex;
    justify-content: space-between;
    max-width: 90%;
    margin: 0 auto;
    height: 100%;
}
#header .logo {
    width: 12.6rem;
    height: 100%;
}
#header .logo a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/h_logo_w.svg)no-repeat center / 100%;
}
#header .gnb {
    display: flex;
}
#header .gnb li {
    border-bottom: 3px solid rgba(165, 152, 186, 0);
}
#header .gnb li:hover,
#header .gnb li.on {
    border-bottom: 3px solid #16305f;
}
#header .gnb a {
    padding: 0 40px;
    display: block;
    color: #fff;
    font-size: 1.8rem;
}

/*header.down */
#header.down {
    border-color: rgba(0, 0, 0, 0.1);
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.4s;
    transition-timing-function: ease;
    background-color: #fff;
}
#header.down .gnb a {
    color: #252525;
    font-weight: 500;
}
#header.down .logo a {
    background-image: url(../img/h_logo_n.svg);
}


/*메인 스크롤 애니메이션*/
.scroll {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translate(-50%, 0);
    z-index: 100;
}
.scroll .scroll_text {
    display: block;
    font-weight: 600;
    color: #FFF;
    margin-bottom: 15px;
}
.scroll .dots {
    width: 2.5rem;
    margin: 0 auto;
    height: 50px;
    position: relative;
}
.scroll .dots span {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    background-color: #fff;
    border-radius: 50%;
    width: 2.5rem;
    height: 25px;
    animation: dots1 2s infinite;
}
.scroll .dots span:nth-child(1) {opacity: .1;transform: translateY(0px);}
.scroll .dots span:nth-child(2) {opacity: .3;transform: translateY(4px);}
.scroll .dots span:nth-child(3) {opacity: .5;transform: translateY(9px);}
.scroll .dots span:nth-child(4) {opacity: .7;transform: translateY(13px);}
.scroll .dots span:nth-child(5) {opacity: .8;transform: translateY(16px);}
.scroll .dots span:nth-child(6) {opacity: 1;transform: translateY(19px);}
@keyframes dots1 {
    0% {}
    100% {transform: translateY(19px);}
}


#container {
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding-bottom: 200px;
}
#container .fullpage {height: 100vh;}
#container .fullpage:last-child {
    height: calc(100vh - 200px);
    padding-top: 70px;
}


/*.visual & #main */
.visual .visual_text {
    width: 90%;
    position: absolute;
    left: 5%;
    bottom: 20vh;
}
.visual .visual_text h3 {
    font-size: 4.3rem;
    letter-spacing: 0em;
    line-height: 1.4;
    color: #fff;
    font-weight: 700;
}
.visual .visual_text p {
    font-size: 2rem;
    letter-spacing: -0.03em;
    line-height: 1.4;
    color: #fff;
    font-weight: 400;
    margin-top: 30px;
    word-break: keep-all;
    word-wrap: break-word;
}

.visual .video_wrap {
    width: 100%;
    height: 100vh;
    position: relative;
}
.visual .video_wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*.service & #work */
.service .service_wrap {
    display: flex;
    gap: 10%;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.service .text_group {text-align: right;}
.service .text_group .main_tit {
    font-size: 8.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 15px;
}
/* .service .text_group .main_tit p {color: #979797;} */
.service .text_group .main_tit p + p {margin-top: 15px;}
.service .text_group .main_tit span {
    font-weight: 700;
    color: #05357f;
}
.service .text_group .txt {font-size: 2rem;}

.service .left {
    display: flex;
    gap: 16px;
    margin-top: 60px;
}
.service ul {
    display: flex;
    width: 50%;
    flex-direction: column;
    gap: 16px;
}
.service ul:nth-child(2) {margin-top: 50px;}
.service ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 1.8rem;
    padding: 60px 0;
}
.service ul:first-child li {background: #dfeafe;}
.service ul:last-child li {background: #f5f5f5;}
.service .service_box {
    width: 84%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    text-align: center;
}
.service .service_box img {
    width: 100%;
    height: 100px;
    object-fit: contain;
}
.service .service_box h3 {
    font-size: 2.2rem;
    margin-bottom: .7rem;
    font-weight: 600;
}


/*.business & #offer */
.business {position: relative;}
.business .inner {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    background: #eff2f4;
    position: absolute;
    top: 56%;
    transform: translateY(-52%);
    padding: 60px 0px;
}
.business h3 {
    font-size: 4rem;
    line-height: 1.42;
    font-weight: 600;
    color: #080808;
    letter-spacing: -1.28px;
    text-align: center;
    margin: 20px 0 57px;
}
.business .ico_flam {
    width: 5rem;
}
.business ul {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.business ul li {
    width: 20rem;
    height: 20rem;
    border-radius: 30px;
    box-shadow: 5px 2px 22px -15px;
    background: #fff;
    text-align: center;
    padding: 43px 0px;
}
.business ul li + li {margin-left: 25px;}
.business .cont img {
    width: 7.5rem;
}
.business .cont p {
    padding-top: 7px;
    color: #080808;
    font-size: 1.8rem;
    font-weight: 500;
}


/*.information & #map */
.information {
    position: relative;
}
.info {
    text-align: left;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.info .txt_wrap {
    width: 50%;
    height: 550px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
}
.info .main_tit {
    font-weight: 700;
    font-size: 5.5rem;
}
.info .info_item {
    display: flex;
    gap: 20px;
    line-height: 1.2;
    margin-bottom: 15px;
    align-items: flex-start;
}
.info .info_item:last-child {
    margin-bottom: 0;
}
.info .info_item dt {
    font-weight: 700;
    border: 1px solid #b8b7b7;
    width: 80px;
    border-radius: 13px;
    padding: 5px 0;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    font-size: 2rem;
}
.info .info_item dd {
    padding-top: 5px;
    font-size: 2rem;
}
.info .info_item .mini {
    display: inline-block;
    font-size: 1.6rem;
    margin-top: 5px;
}


/*카카오맵*/
.kakaomap {
    position: relative;
    margin: 0 auto;
    width: 50%;
    max-height: 750px;
}

.kakaomap>.root_daum_roughmap {
    width: 100%;
    height: 100%;
}

.kakaomap>.root_daum_roughmap .wrap_map {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.kakaomap .hide {
    display: none;
}


/*footer*/
#footer {
    position: relative;
    transform: translateY(-100%);
    background: #16305f;
    padding: 26px 0;
}
#footer .f_wrap {max-width: 90%;margin: 0 auto;color: #fff;}
#footer .f_left {float: left;}
#footer .f_logo {float: right;}
#footer .f_logo a {display: flex;height: 50px;align-items: center;}
#footer .f_logo img {width: 12.6rem;opacity: 0.8;}
#footer .f_info {display: flex;gap: 0 15px;flex-wrap: wrap;}
#footer .f_info span {
    line-height: 1.8;
    letter-spacing: 0.7px;
    font-size: 1.4rem;
    font-weight: 400;
    position: relative;
}
#footer .copyright {
    color: rgba(0255, 255, 255, .5);
    font-size: 1.2rem;
    letter-spacing: 1px;
    margin-top: 5px;
}


/*고정 상단 버튼*/
.btn_top {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: fixed;
    right: 3vw;
    bottom: 6vw;
    background: #fff;
    box-shadow: 0 0 0 1px #dadcdf, 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    z-index: 200;
}
.btn_top span {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
    position: relative;
}
.btn_top span::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 17px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotateZ(315deg) translate(-50%, -50%);
}


/*컨테이너 사이즈*/
.w1200 {
    max-width: 1200px;
    width: 85%;
    margin: 0 auto;
}


/* media query */
/*1920px 초과*/
@media screen and (min-width:1921px) {
    .visual .visual_text h3 {font-size: 7.2rem;}
    .visual .visual_text p {font-size: 2.4rem;line-height: 2;}

    .information .info {font-size: 2rem;}
    .info .txt_wrap {height: 700px;}

    .kakaomap {max-height: 770px;}
}

@media screen and (max-width:1330px) {
    .service .text_group .main_tit {font-size: 6rem;}
    .service .text_group .txt {text-wrap: nowrap;font-size: 1.5rem;}
    .service .text_group .txt br {display: block;}
    .service ul li {padding: 30px 0px;}
    .service .service_box h3 {font-size: 1.8rem;}

    .info .main_tit {font-size: 4.5rem;}
    .info .info_item dt {font-size: 1.8rem;}
    .info .info_item dd {font-size: 1.6rem;}
    .info .info_item .mini {font-size: 1.5rem;}
}

@media screen and (max-width:1023px) {
    .body {font-size: 1.4rem;}
    #header .gnb a {padding: 0 25px;font-size: 1.6rem;}
    #container>section:not(.visual) {padding-top: 70px;}

    .visual .visual_text {bottom: 24vh;}

    .service .service_wrap {height: 100%;justify-content: center;flex-direction: column;gap: 3%;}
    .service .text_group {width: 100%;font-size: 2rem;text-align: left;}
    .service .text_group .main_tit {font-size: 5.82rem;margin-bottom: 20px;}
    .service .text_group .main_tit p + p {margin-top: 7px;}
    .service .text_group .txt {font-size: 1.8rem;text-wrap: wrap;}

    .service .left {margin-top: 0;}
    .service ul:nth-child(2) {margin-top: 0;}
    .service ul li {height: 250px;}
    .service .service_box img {height: 85px;}

    .business h3 {font-size: 3rem;}
    .business ul {flex-direction: column;}
    .business ul li {width: 55%;height: 100px;border-radius: 20px;margin: 10px auto;position: relative;}
    .business ul li + li {margin-left: auto;}
    .business ul .cont {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);display: flex;align-items: center;width: 160px;justify-content: center;}
    .business .cont img {width: 5.5rem;}
    .business .cont p {display: inline-block;margin-left: 30px;}
    
    [data-aos=fade-up] {transform: translate3d(0, 0px, 0) !important;}

    .information .info {justify-content: center;flex-direction: column;height: calc(100% - 100px);}
    .info .txt_wrap {width: 100%;height: auto;gap: 20px;}
    .info .info_item dt {font-size: 1.6rem;}
    .info .info_item dd {font-size: 1.6rem;}

    .kakaomap {margin: 30px auto;width: 100%;height: 400px;}
}


/*767px 이하 모바일 버전*/
@media screen and (max-width:767px) {
    body {overflow: auto;}
    #header .logo {width: 11rem;}
    #header .gnb {display: none;}
  
    #container>section:not(.visual) {display: flex;}

    .scroll {bottom: 25px;}
    .scroll .scroll_text {font-size: 1.4rem;}

    .m_none {display: none;}

    .visual .visual_text {position: relative;bottom: 55%;text-align: center;transform: translate3d(-50%, -45%, 0);}
    .visual .visual_text h3 {font-size: 3.8rem;}
    .visual .visual_text p {font-size: 1.6rem;}

    .service .service_wrap {width: 100%;}
    .service .text_group .main_tit {font-size: 4rem;}
    .service .text_group .txt {font-size: 1.5rem;}

    .service .left {width: 100%;}
    .service ul {width: 100%;font-size: 1.2rem;}
    .service ul li {padding: 0;height: 165px;}
    .service ul li .service_box {width: 100%;margin: 0 auto;position: relative;padding: 25px 15px;}
    .service .service_box img {height: 60px;}
    .service .service_box h3 {font-size: 1.4rem;}
    .service .service_box .m_mouseover {opacity: 0;}
    .m_mouseover {
        width: 100%;
        padding: 20px;
        border-radius: 1.8rem;
        height: 100%;
        background: #16305fe8;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .business .inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .business h3 {font-size: 2.2rem;margin: 15px 0 30px;}
    .business .ico_flam {width: 3.5rem;}
    .business ul li {width: 70%;border-radius: 10px;}
    .business ul .cont {margin: 0 auto;height: 100px;}
    .business .cont img {width: 5rem;}
    .business .cont p {font-size: 1.6rem;}

    .information .info {font-size: 1.4rem;height: calc(100% - 155px);top:5%;transform: translate(-50%, 0);}
    .info .main_tit {font-size: 3rem;}
    .info .info_item {line-height: 2;gap: 15px;margin-bottom: 7px;}
    .info .info_item dt {font-size: 1.4rem;width: 60px;padding:0;border-radius: 10px;}
    .info .info_item dd {font-size: 1.4rem;padding-top: 0;}
    .info .info_item .mini {font-size: 1.2rem;}

    .kakaomap {margin: 20px auto 0px;height: 45%;max-height: 350px;}

    #footer {padding: 24.11px 0;}
    #footer .f_logo img {width: 10rem;margin-bottom: .7vw;}
    #footer .f_info span {font-size: 1.3rem;}
    #footer .f_wrap .copyright {margin-top: 10px;}
}

@media screen and (max-width:479px) {
    .service .text_group .txt br {display: none;}
    .info .info_item .mini {display: none;;}
    .kakaomap {height: 35%;}

    #footer .f_info span:last-child {width: 100%;}
    #footer .f_wrap .copyright {font-size: 1rem;}
}


/* 카카오맵 하단 선 */
.root_daum_roughmap_landing .border2 {display: block !important;}