@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
.notosanskr * {
	font-family: "Noto Sans KR", sans-serif;
}

@font-face {
	font-family: "yg-jalnan";
	src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff")
		format("woff");
	font-weight: normal;
	font-style: normal;
}

/* common */
* {
	box-sizing: border-box;
}

body,
th,
td,
input,
select,
textarea,
button {
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: -0.015em;
	font-family: "Noto Sans KR", "Malgun Gothic", "맑은 고딕", sans-serif;
	color: #000;
}

div,
header,
section,
nav,
input,
ul,
li {
	box-sizing: border-box;
}

body,
th,
td,
p,
li,
span,
h1,
h2,
h3,
h4,
h5 {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

body,
a,
button,
input,
label,
select,
div,
li {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a,
p,
li,
span,
div,
h1,
h2,
h3,
h4,
h5,
input,
select,
textarea,
button,
dl,
dd,
dt {
	word-break: keep-all;
}

a {
	color: #0b0405;
}

dl {
	color: inherit; /* Inherit text color of parent element. */
	text-decoration: none; /* Remove underline. */
	/* Additional css `propery: value;` pairs here */
}

img {
	width: auto;
	max-width: 100%;
}

body::-webkit-scrollbar {
	display: none;
}

/* font */
.bodoni {
	font-family: "Bodoni Moda", serif;
}

body {
	-ms-overflow-style: none;
}
html,
body,
.wrap {
	position: relative;
}
html.open,
body.open,
.wrap.open {
	overflow: hidden;
}

.w100 {
	width: 100% !important;
}
.w95 {
	width: 95% !important;
}
.w90 {
	width: 90% !important;
}
.w85 {
	width: 85% !important;
}
.w80 {
	width: 80% !important;
}
.w75 {
	width: 75% !important;
}
.w70 {
	width: 70% !important;
}
.w65 {
	width: 65% !important;
}
.w60 {
	width: 60% !important;
}
.w55 {
	width: 55% !important;
}
.w50 {
	width: 50% !important;
}
.w45 {
	width: 45% !important;
}
.w40 {
	width: 40% !important;
}
.w35 {
	width: 35% !important;
}
.w30 {
	width: 30% !important;
}
.w25 {
	width: 25% !important;
}
.w20 {
	width: 20% !important;
}
.w15 {
	width: 15% !important;
}
.w10 {
	width: 10% !important;
}
.w5 {
	width: 5% !important;
}

.wrap {
	position: relative;
	display: block;
	overflow-x: hidden;
	overflow-y: auto;
	min-height: 100vh;
}

.header {
	position: absolute;
	background: none;
	top: 0;
	width: 100%;
	height: 6.5em;
	z-index: 10;
}

.header .header_wrap {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 0 0.3em;
	width: 100%;

	height: 100%;
}

.header .header_wrap .logo {
	position: relative;
	width: 5.55em;
	height: 3.15em;
	z-index: 12;
}
.header .header_wrap .logo img {
	position: absolute;
	top: 0;
	left: 0;
	transition: all ease-in-out 0.3s;
}
.header .header_wrap .logo img.text {
	opacity: 1;
}
.wrap.open .header .header_wrap .logo img.text {
	opacity: 0;
}
.header .header_wrap .logo img.ci {
	opacity: 0;
}
.wrap.open .header .header_wrap .logo img.ci {
	opacity: 1;
}

.header .nav_area {
	position: relative;
	justify-content: flex-start;
	align-items: center;
	width: 7.5em;
	z-index: 10;
}
.header .nav_area > a {
	margin-left: 1em;
}

.header .logo .clogo,
.header .nav_area .c_ico {
	display: none;
}

.header .subTitle {
	width: 75%;
	color: #232323;
	font-size: 1.7em;
	font-weight: 500;
	text-align: center;
}

.header .header_right {
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	height: 100%;
}

.header .header_right a.snsBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 1em;
	width: 6.8185em;
	height: 100%;
	font-size: 1.1em;
	font-weight: 600;
	color: #fff;
	background-color: #0d4226;
	z-index: 11;
	transition: all ease-in-out 0.3s;
}
.wrap.open .header .header_right a.snsBtn {
	color: #0d4226;
	background-color: #fff;
}

/* hamberger menu icon */
.menuBtn {
	position: relative;
	z-index: 21;
	width: 100%;
	height: 100%;
}
.menuBtn .menu-btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 2em;
	width: 100%;
	height: 100%;
	font-size: 1.1em;
	font-weight: 600;
	cursor: pointer;
	transition: all ease-in-out 0.3s;
}
.wrap .menuBtn .menu-btn .mbtn.active {
	color: #fff;
}
.menuBtn .menu-btn .mbtn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all ease-in-out 0.3s;
}
.menuBtn .menu-btn .mbtn.inactive {
	opacity: 1;
}
.wrap.open .menuBtn .menu-btn .mbtn.inactive {
	opacity: 0;
}
.menuBtn .menu-btn .mbtn.active {
	opacity: 0;
}
.wrap.open .menuBtn .menu-btn .mbtn.active {
	opacity: 1;
}
.menuBtn .menu-btn .line {
	background: #000;
	display: block;
	width: 100%;
	height: 2px;
	float: left;
	clear: right;
	margin: 0.25em 0;
}
.menuBtn .menu-btn .hid {
	transform: rotateZ(0deg);
	/*transition:all .2s ease;*/
	position: absolute;
	background: rgba(255, 255, 255, 0);
	margin: 0.25em 0 0 0;
}
.menuBtn .menu-btn.gnbClose .hid {
	transform: rotateZ(135deg);
	background: #fff;
}

.menuBtn .menu-btn .second {
	transform: rotateZ(0deg);
	/*transition:all .5s ease;*/
	background: #000;
}
.menuBtn .menu-btn .second.animate {
	transform: rotateZ(225deg);
	background: #fff;
	/*transition:all .5s ease;*/
}
.menuBtn .menu-btn .first {
	margin: 0;
}
.menuBtn .menu-btn .first,
.menuBtn .menu-btn .third {
	/*transition:all .5s ease-out;*/
}
.menuBtn .menu-btn .third {
	left: 0;
	float: left;
	margin: 0;
}
.menuBtn .menu-btn .first.animate,
.menuBtn .menu-btn .third.animate {
	width: 0; /*transition:all .3s ease-out;*/
}
/* hamberger menu icon */

.gnb {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	top: 0;
	left: 0;
	width: 100vw;
	height: 0;
	background-color: #0d4226;
	z-index: 20;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
}

.gnb.active {
	height: 100vh;
}

.gnbOpen {
	display: block;
}

.gnb > nav {
	position: relative;
	display: block;
	width: 100%;
	min-width: 375px;
	opacity: 0;
	transition: all ease-in-out 0.3s;
}
.gnb.active > nav {
	opacity: 1;
}

.gnb > nav > .nav-category {
	margin: 0 auto;
	padding: 0 0.3em;
	width: 100%;
	max-width: 60em;
}

.gnb ul.gnbBox {
	margin: 0 auto;
	padding: 0 1.25em;
	width: 100%;
}
.gnbBox > li {
	position: relative;
	margin: 0 auto;
	width: auto;
}
.gnbBox > li:last-child {
	margin-right: 0;
}
.gnbBox > li.subNav > a:before,
.gnbBox > li.subNav > a:after {
	background-color: #fff;
}
.gnbBox > li.subNav > a:before {
	position: absolute;
	content: "";
	top: 50%;
	right: calc(1em - 1px);
	width: 1px;
	height: 0.6em;
	transform: translate(-50%, -50%);
	transition: all 0.2s ease-out;
}
.gnbBox > li.subNav > a:after {
	position: absolute;
	content: "";
	top: 50%;
	right: 0.7em;
	width: 0.6em;
	height: 1px;
	transform: translateY(-50%);
}
.gnbBox > li.subNav.active > a:before {
	opacity: 0;
	height: 0;
	transition: all 0.2s ease-out;
}

.gnbBox > li > a {
	position: relative;
	display: table;
	margin: 0 auto;
	color: #fff;
	font-size: 3.75em;
	font-weight: 700;
	text-align: center;
	letter-spacing: -0.05em;
	opacity: 0.7;
	transition: all 0.2s ease-in-out;
}
.gnbBox > li:hover > a {
	opacity: 1;
}
.gnbBox > li > a:after {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.5);
	transition: all 0.3s ease-in-out;
}

.gnbBox > li:hover > a:after {
	width: 100%;
	opacity: 1;
}

.gnbBox > li > a > span {
	font-size: 0.75em;
	font-weight: 500;
}

.gnbBox > li > ul {
	display: none;
	padding: 0.75em 0;
	background-color: rgba(0, 0, 0, 0.1);
	border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.gnbBox > li > ul > li {
	display: block;
	padding: 0 1em;
	width: 100%;
	box-sizing: border-box;
	transition: 0.3s;
}

.gnbBox > li > ul > li:last-child {
	border-bottom: none;
}

.gnbBox > li > ul > li > a {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0.25em 1em 0.25em;
	color: #fff;
	font-size: 1em;
	font-weight: 300;
	text-align: left;
	transition: 0.3s;
}
.gnbBox > li > ul > li > a:before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	width: 0.5em;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.8);
	transform: translateY(-50%);
}

.gnbBox > li > ul:hover > li {
	opacity: 0.4;
	transition: 0.3s;
}

.gnbBox > li > ul:hover > li:hover {
	opacity: 1;
	transition: 0.3s;
}
.gnbBox > li > ul:hover > li:hover > a:before {
	background-color: rgba(255, 255, 255, 0.7);
}

.gnbBox > li > ul > li > a span {
	display: block;
	font-size: 0.7em;
	font-weight: 300;
	z-index: 1;
}

.gnbBox > li > a img.navIco {
	margin-right: 1.5em;
	width: 2.2em;
}

.gnbBox > li:first-child > a img.navIco,
.gnbBox > li:nth-child(2) > a img.navIco {
	margin-top: -0.2em;
}

.gnbBox > li > a img.navArrow {
	margin-left: auto;
	width: 0.675em;
	line-height: 0;
	opacity: 0.4;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
.gnbBox > li.active > a img.navArrow {
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	opacity: 1;
}

.gnbBox > li > ul > li > a img.navArrow {
	width: 0.675em;
	opacity: 0.15;
}

.gnb > nav .gnbBottom {
	position: absolute;
	left: 0;
	bottom: 2.25em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 1.75em;
	width: 100vw;
}

.gnb > nav .gnbBottom span.asCenter {
	font-size: 1.2em;
	font-weight: 500;
}

.gnb > nav .gnbBottom span.asCenter span {
	font-weight: 600;
}

.gnb > nav .gnbBottom a.logOut {
	padding-right: 1.5em;
	font-size: 1.2em;
	font-weight: 500;
	background: url("../img/common/ic_logout.png") no-repeat right 60%;
	background-size: 1em;
}

.gnb .gnb_footer {
	position: absolute;
	left: 50%;
	bottom: 5em;
	padding: 0 0.3em;
	width: 100%;
	max-width: 60em;
	font-weight: 700;
	color: #fff;
	transform: translateX(-50%);
}

.gnb .gnb_footer .link {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 0.5em;
}
.gnb .gnb_footer .link span,
.gnb .gnb_footer .link a {
	display: table;
	margin: 0 0.5em;
}
.gnb .gnb_footer .link span {
	font-size: 1.2em;
}
.gnb .gnb_footer .link a {
	font-size: 1em;
	text-decoration: underline;
	color: #fff;
}
.gnb .gnb_footer p.copy {
	font-size: 0.6em;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.01em;
	opacity: 0.6;
}

/* board paging area */
.paging_area {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.5em 0;
}
.paging_area a {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0.25em;
	width: 2em;
	height: 2em;
	font-size: 0.65em;
	border: 1px solid transparent;
	transition: 0.3s;
}
.paging_area a:hover {
	background-color: #f0f0f0;
}
.paging_area a.active {
	color: #fff;
	background-color: #367daf;
	border-color: #367daf;
}

/* follow link */
.followLink {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 6em;
	z-index: 5;
}

.followLink.end {
	position: relative;
}

.followLink a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: 100%;
	color: #fff;
	font-size: 1.35em;
}

.followLink a:first-child {
	background-color: #29407c;
}

.followLink a:last-child {
	background-color: #0b0405;
}

.followLink a img {
	margin-right: 0.75em;
	width: 1.1484em;
}

/* floating banner */
.floating_area {
	position: fixed;
	display: none;
	left: 1em;
	bottom: 1em;
	width: 8em;
	z-index: 1;
}

.floating_area.end {
	position: absolute;
	top: auto;
	bottom: 10.75em;
}

.floating_area.show {
	display: block;
}

.floating_area span {
	display: block;
	padding: 0.25em 0 0.3em;
	font-size: 0.7em;
	text-align: center;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 10px 10px 0 0;
}

/* footer */
.footer {
	width: 100%;
	background-color: #000;
}

.footer footer {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0 auto;
	padding: 2.5em 0.3em;
	width: 100%;
	max-width: 60em;
	box-sizing: border-box;
}
.footer footer > div {
	margin-right: 0.6em;
	width: calc((100% - 1.2em) / 3);
}
.footer footer .terms {
	width: 100%;
}
.footer footer .terms,
.footer footer .copyright,
.footer footer .company_info {
	margin-right: 0;
}
.footer footer .copyright {
	margin-top: 2em;
	padding-top: 2em;
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.footer footer span {
	display: table;
	margin-bottom: 1em;
	color: #fff;
	font-size: 0.85em;
}
.footer footer p {
	color: #d9d7d7;
	font-size: 0.75em;
	font-weight: 300;
}
.footer footer p b {
	font-weight: 400;
	color: #fff;
}
.footer footer .terms {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 2em;
	padding-bottom: 2em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.footer footer .terms a {
	display: table;
	margin: 0 0.3em;
	padding: 0.25em 1em;
	width: auto;
	font-size: 0.75em;
	text-align: center;
	color: #fff;
	border: 1px solid #fff;
}
.footer footer .terms a:last-child {
	margin-right: 0;
}
.footer footer .copyright p {
	display: block;
	font-size: 0.6em;
	text-align: center;
}

/* popup */
.popup {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	z-index: 12;
}
.popup .modal-bg,
.popup .overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 3;
}
.popup .modal-cont {
	position: relative;
	margin: 0 auto;
	padding: 1em;
	width: calc(100% - 2em);
	max-width: 800px;
	height: 70vh;
	background-color: #fff;
	z-index: 4;
}
.popup .modal-cont h2 {
	display: block;
	font-size: 0.9em;
	margin-bottom: 0.3em;
	color: #011627;
}
.popup .modal-cont .tableArea {
	display: none;
	margin: 0 auto 0.75em;
	width: 100%;
	border: 0.1em solid #dcdcdc;
	border-left: none;
	border-right: none;
}
.popup .modal-cont .tableArea.popView {
	display: block;
	height: calc(100% - 3em);
	font-size: 0.6em;
	overflow-y: auto;
}
.popup .modal-cont .tableArea.popView > p {
	margin-bottom: 0.5em;
}
.popup .modal-cont .tableArea.popView > ul > li {
	margin-bottom: 0.5em;
}
.popup .modal-cont .tableArea.popView > ul > li > ul {
	font-size: 0.8em;
}
.popup .modal-cont .tableArea ul li > span {
	display: block;
	padding: 0.375em;
	width: 7.5em;
	color: #24205c;
	text-align: center;
	background-color: #e5e6eb;
	border-bottom: 0.1em solid #fff;
	box-sizing: border-box;
}
.popup .modal-cont .tableArea ul li > span b {
	color: #fd0200;
}
.popup .modal-cont .tableArea ul li .input_area {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.375em;
	width: 19.5em;
	border-bottom: 0.1em solid #e5e6eb;
}
.popup .modal-cont .tableArea ul li:last-child > span,
.popup .modal-cont .tableArea ul li:last-child > .input_area {
	border-bottom: none;
}
.popup .modal-cont .tableArea ul li .input_area input[type="text"],
.popup .modal-cont .tableArea ul li .input_area input[type="password"] {
	padding: 0.025em 0.25em;
	width: 100%;
	border: 0.1em solid #e5e6eb;
}

.popup .modal-cont .tableArea dl {
	margin: 1em 0;
}
.popup .modal-cont .tableArea dl dd {
	margin: 0.25em 0;
	font-size: 0.8em;
}

.popup .modal-cont .btn_area {
	margin: 0 auto;
	width: 100%;
}
.popup .modal-cont .btn_area button {
	display: block;
	width: 100%;
	line-height: 3em;
	color: #fff;
	background-color: #24205c;
	border: 0.1em solid #24205c;
}
.popup .modal-cont .close {
	position: absolute;
	top: 1.4em;
	right: 1em;
}
.popup .modal-cont .close img {
	width: 0.6em;
}

.popup .img-show {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	height: 100vh;
	z-index: 5;
}
.popup .img-show span.popup_close {
	position: absolute;
	top: 1em;
	right: 1em;
	color: #fff;
}

/* custom radio, checkbox */
.chk_list {
	font-size: 0.85em;
}
.customChk {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.customChk label {
	position: relative;
	display: block;
	padding-left: 1.5em;
	width: calc(100% - 8em);
	color: #323232;
	font-size: 0.9em;
}
.customChk label:before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	width: 1em;
	height: 1em;
	border: 1px solid rgba(0, 0, 0, 0.2);
	transform: translateY(-50%);
}
.customChk label:after {
	position: absolute;
	content: "";
	opacity: 0;
	top: 50%;
	left: calc(0.2em + 1px);
	width: 0.6em;
	height: 0.6em;
	background-color: #263050;
	transform: translateY(-50%);
	transition: 0.3s;
}
.customChk input[type="radio"],
.customChk input[type="checkbox"] {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	width: 0;
	height: 0;
	opacity: 0;
}
.customChk input[type="radio"] + label:before,
.customChk input[type="radio"] + label:after {
	border-radius: 50%;
}
.customChk input[type="radio"]:checked + label:after,
.customChk input[type="checkbox"]:checked + label:after {
	opacity: 1;
	transition: 0.3s;
}

.customChk > a.btn_terms {
	display: block;
	width: 7em;
	font-size: 1em;
	line-height: 1em;
}
.customChk > a.btn_terms span {
	display: block;
	padding: 0.2em 0.5em;
	font-size: 0.9em;
	text-align: center;
}

.icon-search-container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 1em;
	width: 1em;
	position: relative;
	/*transition: width 0.2s ease-out;*/
	backface-visibility: hidden;
}
.icon-search-container.active {
	width: 9.6em;
	/*transition: width 0.2s ease-out;*/
}
.icon-search-container.active .fa-times-circle {
	opacity: 1;
}
.icon-search-container .fa-search {
	color: #fff;
	cursor: pointer;
}
.icon-search-container .fa-times-circle {
	opacity: 0;
	color: #d9d9d9;
	transition: opacity 0.2s ease-out;
	cursor: pointer;
}
.icon-search-container .search-input {
	cursor: default;
	margin: 0;
	padding: 0;
	width: 0;
	border: none;
	outline: none;
	font-size: 0.75em;
	background-color: rgba(255, 255, 255, 0.7);
	/*transition: width 0.2s ease-out;*/
	box-sizing: border-box;
	opacity: 0;
}
.icon-search-container.active .search-input {
	margin: 0 0.5em;
	padding: 5px;
	width: 200px;
	opacity: 1;
	/*transition: width 0.2s ease-out;*/
}

/* 200514 약관 팝업 추가 */
[data-ml-modal] {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 999;
	width: 0;
	height: 0;
	opacity: 0;
}
[data-ml-modal]:target {
	width: 100%;
	height: 100vh;
	opacity: 1;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
[data-ml-modal]:target .modal-overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	cursor: pointer;
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 1;
}
[data-ml-modal] .modal-dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
		0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
	width: 90vw;
	max-width: 660px;
	max-height: 70vh;
	overflow: hidden;
	z-index: 2;
	transform: translate(-50%, -50%);
}
.modal-dialog-lg {
	max-width: 820px !important;
}

[data-ml-modal] .modal-dialog > h3 {
	position: relative;
	background-color: #000;
	color: #fff;
	font-size: 24px;
	font-weight: 400;
	margin: 0;
	padding: 0.8em 56px 0.8em 27px;
}
[data-ml-modal] .modal-content {
	background: #fff;
	padding: 23px 27px;
	height: calc(70vh - 76px);
	font-size: 0.75em;
	overflow-y: auto;
}
[data-ml-modal] .modal-content .section p {
	display: block;
	margin-bottom: 0.5em;
	font-size: 1em;
	color: #323232;
}
[data-ml-modal] .modal-content .section span {
	display: block;
	margin-bottom: 0.25em;
	font-size: 1.2em;
	color: #323232;
}
[data-ml-modal] .modal-close {
	position: absolute;
	top: 50%;
	right: 1em;
	color: #000;
	background-color: #fff;
	border-radius: 50%;
	height: 40px;
	width: 40px;
	font-size: 30px;
	line-height: 34px;
	text-align: center;
	transform: translateY(-50%);
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
[data-ml-modal] .modal-close:hover {
	background-color: #000;
	color: #fff;
	cursor: pointer;
}
[data-ml-modal] p:first-child,
[data-ml-modal] p:last-child {
	margin: 0;
}
@media (max-width: 768px) {
	[data-ml-modal] .modal-dialog {
	}
}
/* End Modals ------------------------------*/

@media screen and (max-width: 1024px) {
	body,
	th,
	td,
	input,
	select,
	textarea,
	button {
		font-size: 20px;
	}
	.header .nav_area {
		display: flex;
	}

	.footer .client_area ul {
		padding: 1.25em;
		max-width: 768px;
	}
	.footer .client_area ul li {
		border-left: 1px solid #dcdcdc;
		border-right: 1px solid #dcdcdc;
	}
	.footer .client_area ul li.client span {
		padding: 3em 1em;
	}
	.footer .client_area ul li.host,
	.footer .client_area ul li.client {
		width: 100%;
	}
	.footer .client_area ul li.host {
		border-top: 1px solid #dcdcdc;
		border-bottom: 1px solid #dcdcdc;
	}
	.footer .client_area ul li.client {
		border-bottom: 1px solid #dcdcdc;
	}
	.footer .client_area ul li .ci_area {
		padding: 0.5em;
	}
	.footer .client_area ul li .ci_area a {
		margin: 0.5em;
	}

	.footer .client_area ul li .ci_area img {
		width: 9em;
	}
}

@media screen and (max-width: 768px) {
	body,
	th,
	td,
	input,
	select,
	textarea,
	button {
		font-size: 18px;
	}
	.header {
		height: 4.5em;
	}
	.header .header_wrap .headerTop .logo.host {
		display: none;
	}
	.header .header_wrap .logo img.ci {
		left: 0.75em;
	}
	.header .header_wrap .headerBottom {
		display: none;
	}
	.menuBtn .menu-btn {
		padding: 0 1em;
	}
	.main_nav ul {
		display: none;
	}
	.header .nav_area {
		display: flex;
		width: 6em;
	}
	.header .header_right a.snsBtn {
		width: 6em;
	}
	.gnb > nav {
		min-width: 50%;
	}
	.gnbBox > li > a {
		font-size: 3em;
	}
	.footer footer {
		flex-wrap: wrap;
	}
	.footer footer > div {
		margin: 0 0 1em;
		width: 100%;
	}
	.footer footer dd,
	.footer footer .client_area {
		width: 100%;
	}
	.footer footer dd dl {
		text-align: center;
	}
	.footer footer .familySite {
		margin-top: 1em;
		width: 100%;
	}
	.footer footer .familySite select {
		display: block;
		margin: 0 auto;
	}
	.footer .client_area ul {
		max-width: calc(375px + 2.5em);
	}
	.footer .client_area ul li.client span {
		padding: 4em 1em;
	}
	.footer .client_area ul li .ci_area img {
		width: 9em;
	}
}

@media screen and (max-width: 570px) {
	.footer .client_area ul li.client span {
		padding: 4em 1em;
	}
	.footer .client_area ul {
		max-width: calc(375px + 2.5em);
	}
}

@media screen and (max-width: 425px) {
	body,
	th,
	td,
	input,
	select,
	textarea,
	button {
		font-size: 16px;
	}
	.header .header_wrap .headerTop .logo {
		width: 15em;
	}
	.gnb > nav {
		min-width: 100%;
	}
	[data-ml-modal] .modal-dialog {
		max-height: 60vh;
	}
	[data-ml-modal] .modal-content {
		height: calc(60vh - 76px);
	}
	.footer .client_area ul li .ci_area img {
		width: 9em;
	}
}