/* ========== 헤더 ======== */
header {position: fixed; top: 0; left: 0; width: 100vw; z-index: 100; border-bottom: 1px solid #ffffff50; transition: all .1s;}
header .hd_wrap {width: 100%; display: flex; justify-content: space-between; }
.hd_wrap .hd_left {display: flex; align-items: center; gap: 40px;}
.hd_left h1 {max-width: 130px; height: 38px; width: 10vw;}
.hd_left h1 a {width: 100%; height: 100%; background: url(../img/logo_wh.png) no-repeat center/contain; display: block;}
.hd_left nav ul {display: flex; align-items: center; gap: 40px;}
.hd_left nav .depth1 {position: relative; padding: 40px 0;}
.hd_left nav a {color: #fff; font-size: 20px;}
.hd_left nav .depth2 {position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: max-content; display: none; z-index: 10;}
.hd_left nav .depth2 ul {gap: 20px; padding: 14px 20px; border-radius: 15px; background-color: #0093D9; box-shadow: 2px 0px 6px #00425f50;}
.hd_left nav .depth2 a {font-size: 16px; opacity: .7;}
.hd_left nav .depth2 a:hover {opacity: 1;}
.hd_left nav .deco {position: absolute; left: 50%; transform: translateX(-50%); width: max-content; display: flex; align-items: center; gap: 4px; padding: 8px 12px 8px 8px; background-color: #007bb5; border-radius: 8px; animation: quick 1.25s infinite ease-in-out;}
.hd_left nav .deco::after {content: ""; display: block; width: 23px; aspect-ratio: 1; position: absolute; left: 50%; top: -12px; transform: translateX(-50%); background: url(../img/hd_quick_arrow.png) no-repeat center/contain;}
.hd_left nav .deco i {display: block; width: 20px; aspect-ratio: 1; background: url(../img/hd_quick.png) no-repeat center/contain;}
.hd_left nav .deco span {color: #fff;}

@keyframes quick {
    0% {bottom: -10px;}
    50% {bottom: -15px;}
    100% {bottom: -10px;}
}

.hd_right {display: flex; align-items: center; gap: 30px;}
.hd_right .hd_quick {display: flex; align-items: center; gap: 30px;}
.hd_quick a {display: flex; align-items: center; gap: 10px;}
.hd_quick a i {display: block; width: 35px; aspect-ratio: 1; border-radius: 8px; overflow: hidden;}
.hd_quick a.kakao i {background: url(../img/hd_kakao.jpg) no-repeat center/contain;}
.hd_quick a.blog i {background: url(../img/hd_blog.jpg) no-repeat center/contain;}
.hd_quick a span {font-size: 20px; color: #fff; line-height: 1;}
.hd_right .hd_call {display: flex; align-items: center; gap: 10px; padding: 12px 25px; border-radius: 100px; background-color: #00425f; cursor: pointer;}
.hd_right .hd_call i {display: block; width: 25px; aspect-ratio: 1; background: url(../img/hd_call.png) no-repeat center/contain;}
.hd_right .hd_call span {color: #fff; font-size: 20px; line-height: 1;}
.hd_right .hd_inquiry {display: none; padding: 12px 25px; border-radius: 100px; background: linear-gradient(135deg, #3373c9, #00d1e9); cursor: pointer;}
.hd_right .hd_inquiry span {color: #fff; font-size: 16px; line-height: 1;}
.open_burger {display: none; width: 45px; aspect-ratio: 1; background: url(../img/open_burger.png) no-repeat center/contain;}

header.on, .wrap.sub header {background-color: #fff; border-color: #eee;}
header.on .hd_left nav a, .wrap.sub header .hd_left nav a {color: #111;}
header.on .hd_left h1 a, .wrap.sub header .hd_left h1 a {background: url(../img/logo_bl.png) no-repeat center/contain;}
header.on .hd_quick a span, .wrap.sub header .hd_quick a span {color: #111;}
header.on .hd_left nav .depth2 a, .wrap.sub header .hd_left nav .depth2 a {color: #fff;}
header.on .open_burger, .wrap.sub .open_burger {background: url(../img/open_burger_col.png) no-repeat center/contain;}


/* 버거메뉴 */
.burger {position: fixed; top: 0; left: 0; width: 100vw; z-index: -1; visibility: hidden;}
.burger.on {visibility: visible; z-index: 150;}
.burger .bg_menu {padding: 80px 16px; background-color: #002b57c7; backdrop-filter: blur(4px);}
.burger .bg_menu ul {display: flex; flex-direction: column; align-items: center; height: 100%; gap: 50px;}
.bg_menu ul li {display: flex; flex-direction: column; align-items: center; gap: 5px;}
.bg_menu li > span {font-size: clamp(20px, 4vw, 30px); color: #fff;}
.bg_menu .bg_depth2 {display: flex; align-items: center; gap: 30px;}
.bg_menu .bg_depth2 span {font-size: clamp(17px, 2vw, 24px); color: #ffffff90; border-bottom: 1px solid transparent;}
.bg_menu .bg_depth2 span:hover {color: #fff; border-color: #fff;}
.burger .close_burger {width: 48px; aspect-ratio: 1; margin: 1% auto 0; background: url(../img/close_burger.png) no-repeat center/contain; border-radius: 100%; overflow: hidden; box-shadow: 0 2px 10px #00000030;}


/* 사이드바 */
.sidebar {position: fixed; right: 2%; bottom: 3%; z-index: 100;}
.sidebar .side_menu {display: none; flex-direction: column; align-items: flex-end; gap: 10px;}
.sidebar a {display: block; width: 48px; aspect-ratio: 1; border-radius: 100%; overflow: hidden; box-shadow: 0px 2px 6px #00000015; position: relative;}
.sidebar a.kakao {background: url(../img/side_kakao.png) no-repeat center/cover;}
.sidebar a.blog {background: url(../img/side_blog.png) no-repeat center/cover;}
.sidebar .side_call {background: #00425f; display: flex; align-items: center; justify-content: center; gap: 8px;  padding: 0; border-radius: 100px; height: 48px; margin-bottom: 10px; width: 48px; transition: all .1s;}
.sidebar .side_call span {font-size: 15px; color: #fff; line-height: 1; display: none;}
.sidebar .side_call i {display: block; width: 20px; aspect-ratio: 1; background: url(../img/side_call.png) no-repeat center/contain;}
.sidebar .side_call.on {width: max-content; border-radius: 100px; padding: 10px 18px; }
.sidebar .side_call.on span {display: block;}
.sidebar .top_btn {width: 48px; aspect-ratio: 1; border-radius: 100%; overflow: hidden; background: url(../img/top_btn.png) no-repeat center/cover; box-shadow: 0px 2px 6px #00000015; display: none; float: right; cursor: pointer;}



/* ======== 푸터 ========= */
footer {background: url(../img/ft_bg.jpg) no-repeat center/cover; width: 100%; padding-bottom: 100px; position: relative; z-index: 10;}
footer::after {content: ""; display: block; position: absolute; width: 100%; height: 10%; background: linear-gradient(to bottom, #fff, #ffffff00); top: 0; left: 0; z-index: 0;}
.ft_wrap {display: flex; flex-wrap: wrap; position: relative; z-index: 1;}
.ft_wrap .ft_left {width: 50%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-around;}
.ft_left .ft_title {display: flex; flex-direction: column; align-items: flex-start; gap: 60px;}
.ft_title .ft_logo {max-width: 180px; width: 25%; min-width: 120px;}
.ft_title .ft_logo img {width: 100%; height: 100%; object-fit: contain;}
.ft_title .ft_tit p {font-size: clamp(24px, 3vw, 52px); line-height: 1.5; z-index: 1; position: relative;}
.ft_title .ft_tit span {font-family: "Montserrat", serif; font-style: italic; color: #ffffff50; font-weight: 800; font-size: clamp(30px, 4.5vw, 60px); margin-top: -50px; display: block; z-index: 0; position: relative;}
.ft_info {display: flex; flex-wrap: wrap; gap: 60px; width: 70%; row-gap: 30px;}
.ft_info dl {display: flex; flex-direction: column; align-items: flex-start; gap: 5px;}
.ft_info dl dt {font-size: 16px; color: #ffffff90;}
.ft_info dl dd {font-size: 18px; color: #fff;}


.ft_wrap .ft_right {width: 50%;}
.ft_inquiry {padding: 60px; border-radius: 15px; background-color: #13729e;}
.ft_inquiry .inq_tit {width: 100%; display: flex; align-items: flex-start; gap: 30px; margin-bottom: 40px;}
.ft_inquiry .inq_tit dl {display: flex; align-items: center; gap: 10px;}
.ft_inquiry .inq_tit dt {width: 34px; aspect-ratio: 1; background: url(../img/ft_inquiry_logo.png) no-repeat center/contain;}
.ft_inquiry .inq_tit dd {font-size: clamp(18px, 2.2vw, 25px); font-weight: 500; color: #fff;}
.ft_inquiry .inq_tit p {color: #fff; font-size: 16px; padding-top: 2px;}
.inq_form {width: 100%; display: flex; flex-direction: column; gap: 30px;}
.inq_form dl {display: flex; flex-direction: column; align-items: flex-start;}
.inq_form dt span {font-size: 15px; color: #fff; position: relative; display: block; opacity: .9;}
.inq_form dt .ess::after {content: "*"; display: block; font-size: 20px; font-weight: 900; position: absolute; top: 70%; left: calc(100% + 8px); color: #ff535b; transform: translateY(-50%);}
.flex {display: flex; width: 100%; gap: 30px;}
.flex dl {width: 50%;}
.inq_form dd {width: 100%;}

.inq_form input {background-color: transparent !important; border-radius: 0 !important; border: none !important; border-bottom: 1px solid #fff !important; padding: 12px 10px; color: #fff; font-size: 18px; width: 100%; min-height: 48px; height: initial !important; line-height: initial !important; font-family: inherit;}

.chk_area {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding-top: 10px;}
.chk_con.item input[type="checkbox"] + label {padding: 15px 30px; border-radius: 10px; background-color: #145674; width: 100%; display: block; padding-left: 50px; color: #ffffff80; font-weight: 500;}
.chk_con.item input[type="checkbox"] + label::before {top: 50%; transform: translateY(-50%); left: 15px; border-color: transparent; background: url(../img/chk.png) no-repeat center/cover;}
.chk_con.item input[type="checkbox"] + label::after {top: 50%; transform: translateY(-50%); left: 15px;}
.chk_con.item input[type="checkbox"]:checked + label {background-color: #fff; color: #111; box-shadow: 2px 2px 6px #00425f40;}

.inq_terms {display: flex; justify-content: center; align-items: center; gap: 10px;}
.inq_terms .chk_con label {color: #fff !important;}
.inq_terms .view_terms {font-size: 14px; color: #ffffff85; cursor: pointer; border-bottom: 1px solid #ffffff85; line-height: 1.2;}


.ft_info.mo {display: none;}

.ft_wrap .ft_menu {width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 80px;}
.ft_wrap .ft_menu ul {display: flex; align-items: center; gap: 30px;}
.ft_menu ul span {font-size: 15px; font-weight: 500; color: #fff; cursor: pointer;}
.ft_menu ul span.admin {opacity: .5;}
.ft_menu .copyright {font-size: 14px; color: #ffffff75; font-weight: 300;}

.inq_bottom {margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 25px;}



/* ==== 서브페이지 푸터 ==== */
footer.sub {background: #eee; padding: 40px 0;}
footer.sub::after {display: none;}
.ft01 {display: flex; align-items: center; justify-content: space-between;}
.ft01 .sub_ft_menu {display: flex; align-items: center; gap: 15px;}
.ft01 .sub_ft_menu a {font-size: 16px; font-weight: 600; color: #555;}
.ft01 .ft_util {display: flex; align-items: center; justify-content: space-between; gap: 15px;}
.ft01 .ft_util span {cursor: pointer; color: #666; font-weight: 600;}
.ft01 .ft_util .admin {opacity: .6;}
.ft02 {display: flex; align-items: flex-start; gap: 30px; width: 100%; padding: 50px 0 30px;}
.ft02 .ft_logo {width: 8%; max-width: 100px; min-width: 80px;}
.ft02 .sub_ft_info {display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 5px; width: 40%;}
.ft02 .sub_ft_info span {font-size: 15px; font-weight: 600; color: #888;}
.ft03 {width: 100%; border-top: 1px solid #ccc; padding-top: 20px; display: flex; align-items: center; justify-content: space-between;}
.ft03 .copyright {font-size: 13px; color: #aaa;}
.ft03 .sub_sns {display: flex; align-items: center; gap: 15px;}
.ft03 .sub_sns a {display: block; width: 45px; aspect-ratio: 1; border-radius: 100%; overflow: hidden;}
.ft03 .sub_sns a.blog {background: url(../img/ft_blog.png) no-repeat center/cover;}
.ft03 .sub_sns a.kakao {background: url(../img/ft_kakao.png) no-repeat center/cover;}



/* ======== 서브페이지 타이틀 ======== */
.pg_title {padding: 280px 0 100px;}
.bread {display: flex; align-items: center; gap: 12px;}
.bread a {display: block; width: 20px; aspect-ratio: 1; background: url(../img/bread_home.png) no-repeat center/contain;}
.bread i {display: block; width: 4px; border-radius: 100%; aspect-ratio: 1; background-color: #aaa;}
.bread span {font-size: 15px; color: #aaa; line-height: 1;}
.bread span.now {color: #145674;}
.pg_text {display: flex; flex-direction: column; align-items: flex-start; gap: 30px;}
.pg_text .pg_tit {font-size: clamp(28px, 4vw, 60px);}
.pg_top {width: 100%; position: relative; margin-bottom: 40px;}
.pg_top .deco {font-size: clamp(24px, 7vw, 100px); font-family: "Montserrat", serif; font-style: italic; font-weight: 900; color: #f3f3f3f3; position: absolute; bottom: 0; right: 0; line-height: 1; z-index: -1;}
.pg_bg {height: 50vh; max-height: 420px; width: 100vw; display: flex; justify-content: center;}

.pg_bg .img_box {width: 100%; max-width: 1600px; height: 100%; border-radius: 15px; overflow: hidden; transition: all .3s linear; position: relative;}
.pg_bg img {width: 100vw; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: initial;}
.pg_bg.active .img_box {border-radius: 0; max-width: 100%;}


/* ======== 1600px ======== */
@media screen and (max-width: 1600px) {
    .chk_area {grid-template-columns: 1fr 1fr; gap: 8px;}
    .pg_bg .img_box {margin: 0 16px;}
    .pg_bg.active .img_box {border-radius: 0; max-width: 100%; margin: 0;}

}

/* ======== 1440px ======== */
@media screen and (max-width: 1440px) {
    /* 헤더 */
    .hd_left h1 {width: 8vw; min-width: 100px;}
    .hd_wrap .hd_left {gap: 40px;}
    .hd_left nav ul {gap: 25px;}
    .hd_left nav a {font-size: 18px;}
    .hd_left nav .deco span {font-size: 14px;}
    .hd_right {gap: 20px;}
    .hd_right .hd_quick {gap: 20px;}
    .hd_quick a i {width: 30px;}
    .hd_quick a span {font-size: 18px;}
    .hd_right .hd_call {padding: 12px 15px;}
    .hd_right .hd_call span {font-size: 18px;}
    .hd_right .hd_call i {width: 20px;}

    
    /* 푸터 */
    .ft_left .ft_title {gap: 40px;}
    .ft_title .ft_tit span {margin-top: -40px;}
    .ft_info {flex-direction: column; flex-wrap: nowrap; row-gap: 20px;}
    .ft_info dl {gap: 0;}
    .ft_inquiry {padding: 45px;}
    .ft_inquiry .inq_tit {flex-direction: column; gap: 12px; margin-bottom: 25px;}
    .ft_inquiry .inq_tit p br {display: none;}
    .flex {gap: 15px;}
    .inq_form {gap: 20px;}
    .inq_bottom {margin-top: 25px; gap: 20px;}
    .ft_wrap .ft_menu {padding-top: 50px;}


    /* 서브페이지 타이틀 */
    .pg_title {padding: 250px 0 100px;}
    .pg_bg {height: 40vh; min-height: 250px;}
}


/* ======== 1280px ======== */
@media screen and (max-width: 1280px) {
    /* 헤더 */
    header {padding: 20px 0;}
    .hd_left nav {display: none;}
    .hd_right {gap: 10px;}
    .hd_right .hd_quick {gap: 10px;}
    .hd_quick a i {width: 35px;}
    .open_burger {display: block;}

    /* 사이드바 */
    .sidebar {right: 16px;}

    /* 푸터 */
    .ft_menu ul li:last-child {display: none;}
    .ft01 .ft_util .admin {display: none;}

    
}



/* ======== 1080px ======== */
@media screen and (max-width: 1080px) {
    /* 헤더 */
    header {padding: 16px 0;}
    .hd_quick a {display: none;}
    .hd_right {gap: 8px;}
    .hd_right .hd_call {display: none;}
    .hd_right .hd_inquiry {display: block; padding: 10px 15px;}
    .hd_right .hd_inquiry span {font-size: 15px;}
    .hd_quick a i {display: none;}


    /* 사이드바 */
    .sidebar .side_menu {display: flex;}


    /* 푸터 */
    .ft_wrap {flex-direction: column; gap: 20px;}
    .ft_wrap .ft_left {width: 100%;}
    .ft_info {display: none;}
    .ft_title .ft_tit p {text-align: center;}
    .ft_title .ft_tit p br {display: none;}
    .ft_title .ft_tit span {color: #0090d51f; margin-top: -5%; text-align: center;}
    .ft_left .ft_title {gap: 25px; width: 100%; align-items: center;}

    .ft_wrap .ft_right {width: 100%;}
    .ft_inquiry {padding: 30px;}
    .ft_info.mo {display: flex; width: 100%; flex-wrap: wrap; flex-direction: row; padding-top: 30px; justify-content: center; gap: 30px; row-gap: 5px;}
    .ft_info dl {flex-direction: row; align-items: center; gap: 8px;}
    .ft_info dl dt {font-size: 14px;}
    .ft_info dl dd {font-size: 14px;}
    .ft_menu ul span {font-size: 14px;}

    /* 서브푸터 */
    .ft02 {flex-direction: column; gap: 20px;}
    .ft01 .ft_util span {font-size: 14px; color: #999;}
    .ft02 .sub_ft_info {width: 100%;}

    
    /* 서브페이지 타이틀 */
    .pg_title {padding: 200px 0 80px;}
    .pg_bg {height: 20vh; min-height: 240px;}
}



/* ======== 650px ======== */
@media screen and (max-width: 650px) {
    /* 버거메뉴 */
    .burger .bg_menu ul {gap: 30px;}
    .bg_menu .bg_depth2 {gap: 20px;}
    .burger .close_burger {margin-top: 3%;}


    /* 푸터 */
    footer {padding-bottom: 30px;}
    .chk_area {grid-template-columns: 1fr;}
    .flex {flex-direction: column;}
    .flex dl {width: 100%;}
    .chk_con.item input[type="checkbox"] + label {padding: 12px 20px; padding-left: 44px;}
    .chk_con.item input[type="checkbox"] + label::before {left: 10px;}
    .chk_con.item input[type="checkbox"] + label::after {left: 10px;}
    .ft_wrap .ft_menu {padding-top: 0; gap: 10px; align-items: flex-start;}
    .ft_wrap .ft_menu ul {gap: 15px;}
    .ft_info.mo {justify-content: flex-start; flex-direction: column; padding-right: 50px;}
    .ft_info dl {justify-content: center; flex-direction: column; row-gap: 0; align-items: flex-start;}


    /* 서브푸터 */
    .ft03 .sub_sns {gap: 10px;}
    .ft01 {flex-direction: column; align-items: flex-start; gap: 10px;}
    .ft01 .ft_util {justify-content: initial; width: 100%; padding-bottom: 15px; border-bottom: 1px solid #ddd;}
    .ft02 {padding: 30px 0; padding-right: 50px;}
    .ft03 {flex-direction: column-reverse; align-items: flex-start; gap: 10px; justify-content: flex-start; border-top: none; padding-top: 0;}
    .ft03 .sub_sns a {width: 40px;}
    .ft02 .sub_ft_info {flex-direction: column; align-items: flex-start;}


    /* 서브페이지 타이틀 */
    .pg_title {padding: 130px 0 80px;}
    .pg_text {gap: 20px;}
    .bread {gap: 6px;}
    .bread span {font-size: 14px;}
    .bread a {width: 15px;}
    .bread i {width: 3px;}
    .pg_top .deco {bottom: initial; top: 95%;}

}




/* ======== 500px ======== */
@media screen and (max-width: 500px) {
    /* 푸터 */
    .inq_terms {width: 100%; justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 6px;}
    .inq_terms .view_terms {display: inline-block; margin-left: 35px;}

    /* 서브푸터 */
    .ft02 .sub_ft_info {flex-direction: column; row-gap: 0; align-items: flex-start;}
    .ft01 .sub_ft_menu {flex-wrap: wrap; row-gap: 2px;}
}



/* ======== 350px ======== */
@media screen and (max-width: 350px) {
    /* 버거메뉴 */
    .burger .bg_menu ul {gap: 20px;}

    /* 푸터 */
    .ft_info.mo {flex-direction: column; gap: 12px;}
}