#wrap {width: 100%; height: auto;}
#header {width: 100%; height: auto; background: rgba(2, 137, 181, .7); position: fixed; top:0; left: 0; z-index: 1000; backdrop-filter: blur(5px);}
#container {width: 100%; height: auto;}
#footer {width: 100%; height: auto; padding: 2.18em 0; border-top: 1px solid #ced0d1; font-size: .92em; line-height: 1;}

/* main page */
.main #footer, .main #footer .customer {border-top: none;}

/* page contents with 1600 */
.contents {padding: 5em 0; /*margin-top: 100vh;*/ min-height: calc(100vh - 173px); position: relative; z-index: 1;}
.inner {max-width: 1460px; /*max-width: 1366px;*/ padding: 0 20px; margin: 0 auto;}
.inner.col {display: grid; grid-template-columns: 460px 1fr; column-gap: 80px;}
.bg-white {background-color: white;}
.pagewrap {padding: 5em 0;}

@media screen and (max-width: 1280px) {
	/* .contents {margin-top: 480px;} */
	.inner.col {grid-template-columns: 1fr; row-gap: 3em;}
}

/* header */
#header .inner {display: flex; justify-content: space-between;}
#header .logo {display: flex; align-items: center; gap: 0 1.25em;}
#header .logo img {width: 15.13em; height: 2.54em; vertical-align: middle;}

.air-navi {display: flex; align-items: center; gap: 0 1em; line-height: 1;}
.air-navi .gnb {display: flex; align-items: center; font-weight: 700; font-size: 1.17em;}
.air-navi .gnb a {display: block;}
/* 1depth */
.air-navi .gnb > li {position: relative; color: white;}
.air-navi .gnb > li::before {content: ''; display: block; width: 100%; height: 5px; background-color: #80c5dc; position: absolute; top:0; left:0; opacity: 0;}
.air-navi .gnb > li > a {padding: 1.29em 1.43em; text-align: center;}
/* 2depth */
.air-navi .submenu {display: none; width: 9em; height: auto; padding: .36em 1.07em; position: absolute; top: 3.57em; left: 50%; transform: translateX(-50%); background-color: #fff; border-radius: 0 0 10px 10px; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.36);}
.air-navi .submenu .depth-2 {font-size: .79em;}
.air-navi .submenu .depth-2 > li > a {padding: 10px 0; color: #404040;}
.air-navi .submenu .depth-2 > li > a:hover {color: #0085b0;}
/* 3depth */
.air-navi .sub-submenu .depth-3 {padding: 5px 0; font-weight: 600; font-size: .91em;}
.air-navi .sub-submenu .depth-3 li {padding-left: 10px; position: relative;}
.air-navi .sub-submenu .depth-3 li::before {content: ''; display: block; width: 5px; height: 5px; background-color: #7ab1c2; border-radius: 100%; position: absolute; top: .60em; left: 0;}
.air-navi .sub-submenu .depth-3 li > a {padding: 5px 0; color: #555;}
.air-navi .sub-submenu .depth-3 li > a:hover {color: #0085b0; text-decoration: underline;}
/* hover */
.air-navi .gnb > li:hover::before {opacity: 1;}
.air-navi .gnb > li:hover .submenu {display: block;}
/* menu + button */
.bt-menu, .bt-menu-close {display: none;}
.bt-quote {display: flex; align-items: center; justify-content: center; gap: 0 8px; width: 6.67em; height: 2.17em; border-radius: 50px; font-weight: 700; background-color: #002332; color: white;}
.bt-quote i {display: block; width: .96em; height: .71em; background: url("../image/icon/mail.png") center / cover no-repeat;}
.bt-quote:hover {background-color: #fff; color: #002332;}
.bt-menu-close {position: absolute; top: 24px; right: 24px;}

/* mobile navi */
body.menu-open {overflow: hidden;}
body.menu-open::before {content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 999; animation: fadeIn 0.3s;}

.mob-navi {align-items: flex-start; justify-content: center; position: fixed; top: 0; right: -100%; width: 80%; max-width: 320px; height: 100vh; background: #fff; transition: right 0.3s ease-in-out; overflow-y: auto; z-index: 1000; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1)}
.mob-navi.active {right: 0;}
/* mobile 1depth */
.mob-navi.active .air-navi .gnb {flex-direction: column; width: 100%; font-size: 24px;}
.mob-navi.active .air-navi .gnb > li {position: relative; color: #2a2a2a; width: 100%;}
.mob-navi.active .air-navi .gnb > li > a {padding: 1em .5em; text-align: left; position: relative;}
.mob-navi.active .air-navi .gnb > li > .depth1-lnk::after {content: ''; position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; border-right: 2px solid #92a6ad; border-bottom: 2px solid #92a6ad; transition: transform 0.3s;}
.mob-navi.active .air-navi .gnb > li > .submenu {width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; position: relative; top: 0; border-radius: 10px; box-shadow: none; background-color: #f1f9fc;}
/* mobile active */
.mob-navi.active .air-navi .gnb > li.active {color: #0289b5;}
.mob-navi.active .air-navi .gnb > li.active .depth1-lnk::after {transform: translateY(-50%) rotate(-135deg); border-color: currentColor;}
.mob-navi.active .air-navi .gnb > li.active > .submenu {display: block;}

@media screen and (max-width: 1280px) {
	.bt-menu, .bt-menu-close {display: block;}
	#header {padding: 10px 0;}
	#header .air-navi {display: none;}
	#header .mob-navi.active .air-navi {display: flex; flex-direction: column; padding: 4em 20px;}
	/* hover */
	.air-navi .gnb > li:hover::before {opacity: 0;}
	.air-navi .gnb > li:hover .submenu {display: none;}
	/* button */
	.bt-quote {width: 80%; height: 56px; font-size: 20px; position: absolute; bottom: 4em; left: 50%; transform: translateX(-50%);}
}

/* footer */
#footer .inner {display: flex; justify-content: space-between;}
#footer .info {display: flex; gap: 0 1.73em;}
#footer .info .addr address {display: flex; flex-wrap: wrap; gap: .5em;}
#footer .info .addr cite {display: block; margin-top: 16px;}
#footer .customer {--pad-le: 48px;}
#footer .customer .numb {display: inline-block; padding: 4px 0; font-weight: 700; font-size: 32px; color: #005f87; padding-left: var(--pad-le); background:url("../image/icon/tel.png") 0 0 / 40px no-repeat;}
#footer .customer .txt {padding-left: var(--pad-le); margin-top: 10px; font-size: 15px; color: #053f58; line-height: 1.4; white-space: pre-line;}

#bt-top {width: 5rem; height: 5rem; background-color: #002332; color: white; border-radius: 100%; position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: 600; font-size: 1.4rem;}
#bt-top .ico-arr-top {display: block; width: 20px; height: 16px; background: url("../image/icon/arrow_top.svg") center / contain no-repeat;}

@media screen and (max-width: 1366px) {
	#footer .inner {align-items: flex-end; gap: 0 1.5em;}
	#footer .info {flex-direction: column; gap: 1em 1.73em;}
}
@media screen and (max-width: 1280px) {
	#footer {padding-top: 0; border-top: none;}
	#footer .inner {flex-direction: column; align-items: center; padding: 0;}
	#footer .info {order: 2; width: 100%; padding-top: 2em; border-top: 2px solid #ebebeb; margin-top: 2em; align-items: center; text-align: center;}
	#footer .info .addr {font-size: 18px;}
	#footer .info .addr address {justify-content: center;}

	#footer .customer {width: 100%; padding-top: 2em; display: flex; flex-direction: column; align-items: center; text-align: center; border-top: 2px solid #ebebeb;}
	#footer .customer .txt {white-space: normal; padding-left: 0; font-size: 16px;}
}
@media screen and (max-width: 767px) {
	#footer .customer .txt {white-space: pre-line;}
	#bt-top {width: 4.4rem; height: 4.4rem; font-size: 1.2rem;}
}