@charset "utf-8";
/* 공통영역 */
header, section, footer {width: 100%; position: relative;}
.container {width: 1500px; height: 100%; margin: 0 auto;}

/* header */
header {position: absolute; top: 0; left: 0; z-index: 99;}
.in_header {display: flex; justify-content: space-between; align-items: center; padding: 0 60px 0 160px; box-sizing: border-box; background: #fff;}
.in_header .logo a {display: flex; align-items: center;}
.in_header .logo a img.logo {margin-right: 30px;}
.in_header .logo a span {font-family: var(--ONEMobile); color: var(--subColor); font-size: 18px; margin-right: 10px;}

.in_header .navWrap {display: flex; align-items: center; gap: 60px;}
.in_header nav ul {display: flex; gap: 60px;}
.in_header nav ul a {font-family: var(--ONEMobile); color: #000000; font-size: 16px;}

.quickCall a {padding: 8px 20px; box-sizing: border-box; border-radius: 20px; background: var(--mainColor);}
.quickCall span {position: relative; font-family: var(--ONEMobile); font-size: 24px; color: #fff; padding-left: 30px; box-sizing: border-box;}
.quickCall span::before {content: ''; position: absolute; top: 2px; left: 0; background: url('../_images/layout/call_icon.png') no-repeat; background-size: 100%; width: 20px; height: 20px;}

/* footer */
footer {padding: 60px 0 135px 0; background: #222527; font-size: 16px; color: #72787F;}
footer .ftLogo {display: inline-block; margin-bottom: 32px;}
footer .ftBt {display: flex; justify-content: space-between; align-items: flex-end;}
footer .ftBt .adress {width: 50%; display: flex; flex-wrap: wrap; column-gap: 65px; row-gap: 12px;}
footer .ftBt .adress li {display: flex; align-items: center;}
footer .ftBt .adress span {position: relative; margin-right: 10px; box-sizing: border-box; width: 75px;}
/* footer .ftBt .adress li:nth-of-type(2n-1) {width: 250px;} */
/* footer .ftBt .adress li:nth-of-type(2n-1) span {width: 130px;} */
footer .ftBt .adress li:nth-of-type(1) span {width: 130px;}
footer .ftBt .adress span::before {content: ''; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background: #72787F;}
footer .ftBt .sns {display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 15px;}
.pc_view{display: block}
.mo_view{display: none}
/* 반응형 */
@media screen and (max-width: 1700px) {
    .in_header {padding: 0 30px 0 50px;}
    .in_header .navWrap {gap: 30px;}
    .in_header nav ul {gap: 30px;}
}

@media screen and (max-width: 1500px) {
    .container {width: 90%;}
    footer .ftBt .adress {width: 85%;}
}

@media screen and (max-width: 1400px) {
    .quickCall {display: none;}
}

@media screen and (max-width: 1280px) {
    .in_header {padding: 0 30px;}
    .in_header .logo a img.logo {margin-right: 20px;}
    .in_header .logo a span {font-size: 15px;}
    .in_header nav ul {gap: 20px;}
    .in_header nav ul a {font-size: 15px;}

    footer .ftBt .adress {width: 100%;}
    footer .ftBt .right {position: absolute; bottom: 20px; right: 20px;}
}

@media screen and (max-width: 1025px) {
    .in_header .logo a .logo2 {width: 62px; margin-right: 10px;}
    .in_header .logo a span {order: 3; margin-right: 0; word-break: keep-all;}

    .in_header nav.mo .moMenu {width: 30px; height: 20px; text-indent: -9999px; border: none; background: url('../_images/layout/mo_menu.png') no-repeat; background-size: 100%;}
    .in_header nav.mo ul {position: fixed; top: 60px; right: -100%; width: 60%; height: 100%; background: #fff; flex-direction: column; font-size: 30px; padding: 50px; box-sizing: border-box; transition: 0.5s;}
    .in_header nav.mo ul.on {right: 0;}

    footer {font-size: 15px;}
    footer .ftBt .adress li {width: 100% !important;}
    footer .ftBt .adress span {width: 70px !important; flex-shrink: 0;}
    footer .ftBt .adress li:nth-of-type(1) span {width: 110px !important}
}

@media screen and (max-width: 768px) {
    .in_header {gap: 30px;}
    .in_header .logo a img.logo {margin-right: 10px;}
    .pc_view{display: none}
    .mo_view{display: block}
}

@media screen and (max-width: 430px) {
    .in_header {gap: 20px; padding: 0 15px;}
    .in_header .logo a img.logo {width: 115px; margin-right: 3px;}
    .in_header .logo a .logo2 {width: 50px; margin-right: 5px;}
    .in_header .logo a span {font-size: 14px;}
    .in_header nav.mo .moMenu {width: 25px; height: 20px;}
    .in_header nav.mo ul {top: 48px;}
    footer .ftBt {flex-direction: column; gap: 60px}
    footer .ftBt .right {position: relative; right: auto; bottom: auto; margin: 0 auto}
    footer .ftBt .sns {justify-content: center;}
}