.no-scroll {overflow: hidden; height: 100%;}

/* header */
#header {z-index: 9999; transition: all 0.5s;}
#header .header_bg {content: ''; position: absolute; top: 7.2rem; left: 50%; transform: translateX(-50%); width: 100vw; height: 0; background: #F6F7F9; transition: all 0.3s; z-index: -1;}
#header .in_header {width: 144rem; height: 7.2rem; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
#header .in_header .logo {display: block; width: 16.4rem; height: 4rem; background-image: url('../img/layout/header_logo.png'); background-repeat: no-repeat; background-size: 100%;}
#header .in_header .nav a {display: block; color: #fff; text-align: center; width: 100%;}
#header .in_header .nav > li {width: 15.2rem; height: 7.2rem; padding: 0 0.8rem; box-sizing: border-box; display: flex; align-items: center;}
#header .in_header .nav > li:hover > a {color: #008FD6;}
#header .in_header .nav > li > ul {display: none; top: 7.2rem; left: 0; width: 100%; height: 25.6rem; transition: all 0.3s; flex-direction: column; padding-top: 2rem;}
#header .in_header .nav > li > ul > li:not(:last-child) {padding-bottom: 1.5rem;}
#header .in_header .nav > li > ul > li > a {color: #454C53;}
#header .in_header .nav > li > ul > li > a:hover {color: #008FD6;}
#header .in_header .call {width: 25.6rem; height: 4.2rem; background-image: url('../img/layout/menu-call.png'); background-repeat: no-repeat; background-size: 100%;}
#header.on,
#header.act {background: #fff;}
#header.on .header_bg {height: 25.6rem;}
#header.on .in_header .logo,
#header.act .in_header .logo {background-image: url('../img/layout/header_logo_on.png');}
#header.on .in_header .call,
#header.act .in_header .call {background-image: url('../img/layout/menu-call_on.png');}
#header.on .in_header .nav a,
#header.act .in_header .nav a {color: #222527;}
#header.on .in_header .nav > li > ul {display: flex;}

@media screen and (max-width: 880px) {
    #header .in_header {width: 38.2rem; height: 6.4rem;}
    #header .in_header .logo {width: 12.8rem; height: 3.2rem; background-image: url('../img/layout/header_logo_mo.png');}
    #header .in_header .call {width: 16.1rem; height: 2.9rem; background-image: url('../img/layout/menu-call_mo.png');}
    #header .mo_btn {width: 3.6rem; height: 1.2rem; background-image: url('../img/layout/mo_menu.png'); background-repeat: no-repeat; background-size: 100%;}
    #header.on .in_header .logo,
    #header.act .in_header .logo {background-image: url('../img/layout/header_logo_on_mo.png');}
    #header.on .in_header .call,
    #header.act .in_header .call {background-image: url('../img/layout/menu-call_on_mo.png');}
    #header .mo_menu_wrap {position: fixed; width: 30.1rem; height: 100vh; overflow-y: scroll; top: 0; right: -30.1rem; padding: 2.6rem 2.6rem 0 3rem; box-sizing: border-box; background: #fff; transition: all 0.3s;}
    #header .mo_menu_wrap .mo_close_box {justify-content: flex-end; margin-bottom: 1.8rem;}
    #header .mo_menu_wrap .mo_logo {display: block; width: 17.8rem; height: 4.4rem; margin-bottom: 4.1rem;}
    #header .mo_menu_wrap .mo_nav>li {margin-bottom: 4rem;}
    #header .mo_menu_wrap .mo_nav>li>a {display: block; margin-bottom: 1rem;}
    #header .mo_menu_wrap .mo_nav .flex {line-height: 3.2rem; max-width: 23rem;}
    #header .mo_menu_wrap .mo_nav>li:first-child .flex {max-width: 14.5rem;}
    #header .mo_menu_wrap .mo_close {display: block; width: 4rem; height: 1.8rem;}
    #header .mo_menu_wrap.on {right: 0;}
    #header.on .header_bg {display: none;}
    #header.on .mo_btn,
    #header.act .mo_btn {background-image: url('../img/layout/mo_menu_on.png');}
}

/* visual */
#visual {height: 100rem;}
#visual .visual_slide {height: 100%;}
#visual .visual_slide img {width: 100%; height: 100%; object-fit: cover;}
#visual .visual_slide_page {z-index: 99; width: 100%; height: 12.8rem;}
#visual .visual_slide_page a {width: 47.85rem; height: 100%; background: rgba(255,255,255,0.3); text-align: center;}
#visual .visual_slide_page a span {margin-bottom: 1.2rem;}
#visual .visual_slide_page a.on {background: #63BEF6;}
#visual .visual_slide_page a.on p {font-weight: 700;}

@media screen and (max-width: 880px) {
    #visual {height: 93.2rem;}
    #visual .visual_slide_page {height: 9.4rem;}
    #visual .visual_slide_page a {width: 10.6rem;}
    #visual .visual_slide_page a span {font-size: 1.4rem; margin-bottom: 0.7rem;}
    #visual .visual_slide_page a p {font-size: 1.4rem; line-height: 2rem;}
}

/* footer */
#footer {position: relative; padding: 19rem 0 0 0;}
#footer::before {content: ''; position: absolute; top: 0; right: 0; width: 124.4rem; height: 16.3rem; background-image: url('../img/layout/ft_bg.png'); background-repeat: no-repeat; background-size: 100%;}
#footer::after {content: ''; position: absolute; bottom: 8.8rem; left: 0; width: 100%; height: 81.3em; background: #D4EEFF; opacity: 0.32; z-index: -1;}
#footer .inner {width: 150.4rem;}
#footer .inner .cont_area {padding-bottom: 15.2rem;}
#footer .inner .left_cont .text_area {position: relative; padding: 13.2rem 0 10.8rem 7rem; box-sizing: border-box; width: 88.2rem; background: #1C87CA; border-radius: 0 0 18rem 0; margin-bottom: 5.2rem;}
#footer .inner .left_cont .text_area::before {content: ''; position: absolute; top: 6.5rem; right: 8.9rem; width: 22.6rem; height: 22.6rem; background-image: url('../img/layout/ft_left_bg.png'); background-repeat: no-repeat; background-size: 100%;}
#footer .inner .left_cont .text_area li:not(:last-child) {margin-bottom: 5.5rem;}
#footer .inner .left_cont .text_area li.flex {gap: 6.4rem;}
#footer .inner .left_cont .text_area li.flex .icon {gap: 0.6rem;}
#footer .inner .left_cont .text_area li.flex .link .fs18 {line-height: 2.8rem; margin-top: 1.6rem;}
#footer .inner .left_cont .link_area {gap: 2rem 1.2rem;}
#footer .inner .right_cont {top: 7.1rem; left: -5.2rem;}
#footer .inner .right_cont .text_area {margin-top: 3.1rem;}
#footer .inner .right_cont .text_area .list li {gap: 4rem;}
#footer .inner .right_cont .text_area .list li:not(:last-child) {margin-bottom: 1.8rem;}
#footer .inner .right_cont .text_area .list li .icon {gap: 0.6rem;}
#footer .inner .right_cont .text_area .list .fs18 {line-height: 2.8rem;}
#footer .footer_cont {height: 17.9rem; background: #33383C; padding-top: 5.3rem;}
#footer .footer_cont .inner .flex {gap: 11.7rem;}
#footer .footer_cont .inner .flex .text_area .fs14:first-child {margin-bottom: 0.8rem;}
#footer .footer_cont .inner .flex .text_area .fs14 .pc_view {display: inline-block;}
#footer .root_daum_roughmap {width: 64.2rem; height: 49.2rem;}
#footer .root_daum_roughmap .wrap_map {height: 100%;}

@media screen and (max-width: 880px) {
    #footer {padding: 13.1rem 0 0 0;}
    #footer::before {width: 40.6rem; height: 10.1rem; background-image: url('../img/layout/ft_bg_mo.png');}
    #footer::after {display: none;}
    #footer .inner {width: 100%}
    #footer .inner .cont_area {display: block; padding-bottom: 0;}
    #footer .inner .top_area {width: 100%; padding: 4rem 2.4rem; box-sizing: border-box; background: #1C87CA;}
    #footer .inner .top_area .map {margin-bottom: 4.7rem;}
    #footer .inner .top_area .kakao {margin: 3.1rem 0 3.3rem 0;}
    #footer .inner .top_area .kakao .icon {gap: 0.6rem; margin-bottom: 1.2rem;}
    #footer .inner .top_area .kakao .icon img {width: 2.4rem;}
    #footer .inner .top_area .kakao .link {padding-left: 3rem; box-sizing: border-box;}
    #footer .inner .top_area .kakao .link img {width: 21.6rem;}
    #footer .inner .top_area .kakao .link .fs18 {line-height: 2.8rem; margin-top: 1.2rem;}
    #footer .inner .link_list {width: 27.2rem; padding: 4.8rem 0;}
    #footer .inner .link_list li:not(:last-child) {margin-bottom: 0.8rem;}
    #footer .inner .link_list a,
    #footer .inner .link_list a img {width: 100%;}
    #footer .footer_cont {height: 23rem; padding: 2.9rem 0 0 2.4rem; box-sizing: border-box;}
    #footer .footer_cont .inner .flex {flex-direction: column; gap: 1.5rem; align-items: flex-start;}
    #footer .footer_cont .inner .flex img {width: 13.6rem;}
    #footer .footer_cont .inner .flex .text_area .fs14 {font-size: 1.2rem; line-height: 2.2rem; font-family: "Spoqa", sans-serif;}
    #footer .footer_cont .inner .flex .text_area .fs14:first-child {margin-bottom: 3.6rem;}
    #footer .footer_cont .inner .flex .text_area .fs14 .pc_view {display: none;}
    #footer .root_daum_roughmap {width: 100%; height: 29.5rem; margin-bottom: 4.7rem;}
}

/* side */
#side {right: 12rem; bottom: 27.3rem; gap: 1.6rem; z-index: 99;}
#side .list {display: none; width: 6.4rem; height: 38.4rem; position: absolute; top: -40rem; z-index: -1;}
#side a {display: block; width: 6.4rem; height: 6.4rem; box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.16); margin-bottom: 1.6rem; border-radius: 50%;}
#side a.top {width: 6.4rem; height: 6.4rem; box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.16);}
#side a.top img {transition: all 0.3s;}
#side.on .list {display: block;}
#side.on a.top img {transform: rotate(180deg);}

@media screen and (max-width: 880px) {
    #side {right: 2.4rem; gap: 1.2rem;}
    #side a {margin-bottom: 1.2rem;}
    #side a.top {width: 4.8rem; height: 4.8rem;}
    #side .list {width: 4.8rem; top: -30.1rem;}
    #side .list a {width: 4.8rem; height: 4.8rem;}
}