:root {
    --blue: #4C7DF3;
    --green: #23C78A;
    --lightgreen: #E4F0EC;
    --gray: #F1F2F6;
}

html {font-size: 10px; line-height: 1.6; font-family: 'Pretendard'; font-optical-sizing: auto; font-style: normal; font-weight: 400}
body {font-size: 1.6rem; overflow-x: hidden;}
html.no-scroll {overflow: hidden;}
h1, h2, h3, h4, h5, h6 {line-height: 1.2;}
input, textarea, select {font-family: 'Pretendard'; font-weight: 400; color: #222;}
button {border: 0; outline: 0; font-family: 'Pretendard';}
.inner {max-width: 148rem; width: 95%; margin: 0 auto;}

/*폰트 사이즈*/
.title-lg {font-size: 7rem;}
.title-big {font-size: 4rem;}
.title-md {font-size: 3.6rem;}
.title-sm {font-size: 3rem;}
.title-sm2 {font-size: 2.4rem;}
.title-xsm {font-size: 2.2rem;}
.text-huge {font-size: 2rem;}
.text-lg {font-size: 1.8rem;}
.text-big {font-size: 1.7rem;}
.text-md {font-size: 1.6rem;}
.text-sm {font-size: 1.5rem;}
.text-xsm {font-size: 1.4rem;}

@media (min-width: 2000px) {
	.inner {max-width: 180rem;}
}

@media (max-width: 1600px) {
    html {font-size: calc(1000vw/1800)}
}

@media (max-width: 1440px) {
    html {font-size: calc(1000vw/1700)}
}

@media (max-width: 1280px) {
    html {font-size: calc(1000vw/1300)}
	
	.title-lg {font-size: 5rem;}
	.title-big {font-size: 3.6rem;}
	.title-md {font-size: 3.2rem;}
	.title-sm {font-size: 2.6rem;}
	.text-huge {font-size: 1.8rem;}
	.text-lg {font-size: 1.6rem;}
}

@media (max-width: 1024px) {
   html {font-size: calc(1000vw/1000);} 
}

@media (max-width: 480px) {
	html {font-size: calc(1000vw/460);} 
	
	.title-lg {font-size: 3.5rem;}
	.title-big {font-size: 3.4rem;}
	.title-md {font-size: 2.8rem;}
	.title-sm {font-size: 2.6rem;}
	.title-sm2 {font-size: 1.9rem;}
	.text-lg {font-size: 1.9rem;}
	.text-big {font-size: 1.8rem;}
	.text-md {font-size: 1.7rem;}
	.text-sm {font-size: 1.6rem;}
    .text-xsm {font-size: 1.6rem;}
	
}

@media (max-width: 370px) {
	html {font-size: calc(1000vw/400);} 
}

/*폰트 색깔*/
.text-blue {color: var(--blue);}

/*버튼 스타일*/
.ubtn {display: flex; align-items: center; justify-content: center; border-radius: 999px; transition: .15s;}
.ubtn.round {border-radius: 6px;}
.ubtn.primary {background: var(--blue); padding: 1rem; color: #fff; font-size: 1.6rem; width: 10rem; text-align: center; line-height: 1.2;}
.ubtn.primary.grey {background: #ddd; color: #767678;}
.ubtn.more {font-size: 1.5rem;}
.ubtn.plus {width: 5rem; height: 5rem; background: #fff; position: relative;}
.ubtn.plus::before, .ubtn.plus::after {content: ""; display: inline-block; width: 1.9rem; height: 2px; background: #222; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 999px; transition: .15s;}
.ubtn.plus::after {transform: translate(-50%, -50%) rotate(90deg);}

/*헤더*/
.header {position: relative; transition: .25s; height: 10rem;}
.header .nav-bg {width: 100%; position: absolute; top: calc(100% - 1px); left: 0; background: #fff; height: 0; transition: height 0.25s; z-index: 2;}
.header .inner {display: flex; justify-content: space-between; align-items: center; height: 100%;}
.header .logo {display: flex; align-items: center; width: 31.5rem;}
.header .logo img, .footer-logo img {width: 100%;}
.header .gnb, .header .gnb nav {height: 100%;}
.header .gnb .depth1 {display: flex; align-items: center; height: 100%;}
.header .gnb .depth1 > li {display: flex; align-items: center; position: relative; height: 100%;}
.header .gnb .depth1 > li:not(:last-child) {padding-right: 11rem;}
.header .gnb .depth1 > li > a {display: flex; align-items: center; justify-content: center; padding: 1.5rem 2.5rem; position: relative; z-index: 100; line-height: 1; border-radius: 1rem; font-size: 2rem; font-weight: 700;}
.header .gnb .depth1 > li span {position: relative;}
.header .gnb a {display: inline-block; font-family: 'Pretendard'; text-align: center; width: 100%; text-align: center; color: #222; word-break: keep-all;;}
.header .gnb .depth2 {position: absolute; top: 99%; width: 100%; z-index: 10; height: 0; overflow: hidden}
.header .gnb .depth2 > li {width: 90%;}
.header .gnb .depth2 a {line-height: 2.5; font-size: 1.5rem; text-align: left;}
.header .header-menu-open {display: none;}
.header .header-menu--btn {display: flex; justify-content: center; flex-direction: column; cursor: pointer;}
.header .header-menu--btn span {width: 18px; height: 2px; border-radius: 999px; margin: 2px 0; transition: all ease .3s; background: #222; transition: .15s;}
.header.open .nav-bg {height: 40rem; }
.header.open .depth1 > li::after {transition: height .25s, background-color .25s;}
.header.open .depth1 > li:hover::after {background: #F6F8FA; height: calc(100% + 40rem - 2px);}
.header.open .depth2 {display: flex; flex-direction: column; row-gap: 1rem; height: auto;}
.header.open .depth2 > li > a {padding: 0.6rem 1rem; line-height: 1.25; border-radius: 0.5rem; margin-bottom: 0.5rem;}
.header.open .depth3 a {padding: 0.6rem 1.7rem; position: relative; color: #666666;line-height: 1.25;}
.header.open .depth3 a::before {content: ""; display: inline-block; width: 2px; height: 2px; background: #a6a6a6; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);}
.header .gnb .depth1 > li.current > a {background: var(--gray);}
.header .gnb .depth1 > li.current span::after {content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--blue); position: absolute; right: -0.8rem; top: 0;}
body.scrollDown .header {transform: translateY(-100%);}
.header .gnb .depth2 > li.current > a {background: var(--gray)}

/*푸터 배너*/
.logoBanner {padding: 4.5rem 0;}
.logoBanner .inner {position: relative; column-gap: 0; width: 90%;}
.logoBanner .swiper-slide {display: flex; align-items: center; justify-content: center; cursor: pointer;}
.logoBanner .swiper-slide img {width: 90%;}
.logoBanner .swiper-button-next, .logoBanner .swiper-button-prev {left: auto; right: auto; transform: translate(0,0); margin: 0; padding: 0; font-size: 0; height: 2.4rem; width: 2.4rem; position: absolute; top: 50%; transform: translateY(-50%);}
.logoBanner .swiper-button-next {right: -3rem;}
.logoBanner .swiper-button-prev {left: -3rem;}
.logoBanner .swiper-button-next:after, .logoBanner .swiper-button-prev:after {content: ""; background: #111;; mask: url('../img/main/icon_visual_arrow.svg') no-repeat 50% 50% / contain; width: 1rem; height: 1.7rem;}
.logoBanner .swiper-button-next:after {transform: rotate(180deg);}

/*푸터*/
.footer {background: #222; padding: 4.8rem 0 5.4rem;}
.footer .inner {display: flex; justify-content: center; align-items: center; flex-direction: column; row-gap: 2rem; text-align: center;}
.footer .footer-link ul {display: flex; align-items: center; column-gap: 2rem;}
.footer .footer-link a {color: #fff;}
.footer .footer-info p, .footer .footer-info a {color: #aaa; font-size: 1.4rem;}
.footer .footer-info p {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 1.2rem;}
.footer .footer-info span {position: relative;}
.footer .footer-info span:not(:last-child)::after {content: ""; display: inline-block; width: 1px; height: 1.1rem; background: #aaa; margin: 0 0.6rem; position: absolute; top: 50%; transform: translate(-50%, -50%);}

.card-group {display: flex; align-items: flex-start;}
.card-group.col-4 {column-gap: 3rem;}
.card-group .card {align-self: stretch; flex: 1;}
.card-group .card.text-white * {color: #fff;}

/*페이징*/
.pg_wrap {margin-top: 30px; width: 100%; display: flex; align-items: center; justify-content: center;}
.pg_wrap .pg {display: flex; align-items: center; justify-content: center; width: 100%; column-gap: 3px;}
.pg_wrap .pg_page {display: flex; align-items: center; justify-content: center; font-size: 1.4rem; width: 4rem; height: 4rem; background: #fff; color: #999; font-weight: 300; border: 1px solid #DDD; border-radius: 999px;}
.pg_wrap .pg_page.pg_current {border: 1px solid #222; background: #222; color: #fff; border-radius: 999px;}
.pg_wrap .pg_next, .pg_wrap .pg_prev {text-indent: 0; border: 0; min-width: unset; line-height: unset; width: auto; padding: 1rem 1.5rem; color: #222; font-weight: 500;}
.pg_wrap .pg_prev {margin-right: 4rem;}
.pg_wrap .pg_next {margin-left: 4rem;}

/*폼*/
form input[type=text]:focus, form input[type=password]:focus, form textarea:focus, form select:focus {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: 0 !important;}
form select:focus-visible {outline: 0;}
.form-section {display: flex; flex-direction: column; row-gap: 2rem;}
.form-section--title {}
.form-row {display: flex; flex-direction: column; row-gap: 1rem;}
.form-row--btn {display: flex; align-items: center; flex-direction: row; justify-content: center; column-gap: 0.6rem;}
.form-row--file {flex-direction: row; column-gap: 1rem; flex-wrap: wrap; row-gap: 0.6rem;}
.form-row .label {display: flex; align-items: center;}
.form-row .label label {line-height: 1.2;}
.input-item {background: #fff; border: 1px solid #ddd; border-radius: 6px; overflow: hidden;}
.input-item .frm_input, .input-item select {border: 0; -webkit-box-shadow: none; box-shadow: none; border-radius: 0;}
.input-item.textarea {padding: 1rem 1.5rem; background: #fff; font-size: 1.4rem; line-height: 1.2; width: 100%; min-height: 20rem;}
.input-item input, .input-item select {background: transparent; border: 0; padding: 1rem 1.5rem; font-size: 1.4rem; line-height: 1.2; width: 100%;}
.input-item select {background: url('../img/sub/select_icon.png') no-repeat 88% 50%; background-size: 1rem; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.input-item.smarteditor2 {border: 0; border-radius: 0;}
.input-item.smarteditor2 .btn_cke_sc {display: none;}
.form-row--file .input-wrap {flex: 1;}
.form-row--file .label {width: 8rem;}
.form-row--file input[type="file"] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;} 
.form-row--file .upload-name {}
.form-row--file .attach {width: 10rem; align-self: stretch; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #666; border-radius: 6px; color: #313131; font-size: 1.5rem; }
.form-row--file .attach label {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer;}
.form-row--file .file_del {width: 100%;}
.form-row .term-text {padding: 2.5rem 2rem; max-height: 20rem; overflow-y: auto;}
.checkbox {position: relative; text-align: left; font-size: 1.6rem; color: #222; line-height: 1em; cursor: pointer; line-height: 1.6em;}
.checkbox label {display: flex; align-items: center; column-gap: 1rem;}
.checkbox label span {display: flex; align-items: flex-start; line-height: 1.8rem; font-size: 1.6rem;}
.checkbox label em {display: inline-block; width: 1.8rem; height: 1.8rem; background: #fff; border: 1px solid #D9D9D9; border-radius: 3px;}
.checkbox input:checked ~ label em {border-color: var(--blue); background-color: var(--blue); background-image: url('../img/sub/icon_checkbox_check.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 12px 10px;}
.radio-warp {display: flex; align-items: center; column-gap: 1.5rem;}
.radio-warp .radio {position: relative; text-align: left; font-size: 1.6rem; color: #222; line-height: 1em; cursor: pointer; line-height: 1.6em;}
.radio label {display: flex; align-items: center; column-gap: 1rem;}
.radio label span {display: flex; align-items: flex-start; line-height: 1.8rem; font-size: 1.6rem;}
.radio label em {display: inline-block; width: 1.8rem; height: 1.8rem; background: #fff; border: 1px solid #D9D9D9; border-radius: 999px;}
.radio input:checked ~ label em {border-color: var(--blue); background-color: var(--blue); background-repeat: no-repeat; background-position: 50% 50%; background-size: 12px 10px;}

/*로그인*/
.member_wrap, .member_wrap.mbskin {height: 100%; max-width: 460px; width: 90%; margin-top: 10rem; margin-bottom: 6rem; margin-left: auto; margin-right: auto;}
.member_wrap h1 {position: static; margin-bottom: 50px; text-align: center; }
.member_wrap h1 a {display: flex; align-items: center; justify-content: center; margin-bottom: 25px;}
.member_wrap.mbskin .mbskin_box {border: 0;}
.member_wrap .login_form {margin-bottom: 4rem;}
.member_wrap #login_fs {padding: 0;}
.member_wrap .input_wrap {width: 100%;}
.member_wrap .input_wrap:nth-child(2) {margin-bottom: 8px;}
.member_wrap .input_item.valid::before {content: ''; position: absolute; top: -1px; right: -1px; left: -1px; bottom: -1px; border: 1px solid var(--main-theme); z-index: 3; border-radius: 12px}
.member_wrap .checkbox_wrap {display: flex; align-items: center; margin: 0; column-gap: 3rem;}
.member_wrap.mbskin form .btn_wrap {margin-top: 1.5rem;}
.member_wrap.mbskin form .ubtn {color: #fff; background: var(--blue); border-radius: 6px; font-size: 1.4rem; padding: 1.2rem 2.5rem;}
.member_wrap .login_info {display: flex; align-items: center; justify-content: center; column-gap: 2.5rem; text-align: center;}
.member_wrap .login_info a {font-size: 1.6rem;}
.member_wrap.mbskin .section-row--heading h2 {margin-bottom: 1.5rem;}
.member_wrap.--login .ubtn {width: 100%; }

@media (hover: hover) and (pointer: fine) {
	.ubtn.primary:hover {background: #07349f;}
	.ubtn.primary.grey:hover {background: #222; color: #fff;}
	.ubtn.more:hover {color: var(--blue)}
	.form-row--file .attach:hover {background: #666; color: #fff;}

	.header .gnb .depth1 > li:hover > a {background: var(--gray);}
	.header .gnb .depth1 > li:hover span::after {content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--blue); position: absolute; right: -0.8rem; top: 0;}
	.header .gnb .depth2 > li:hover > a {background: var(--gray)}
	.header.open .depth3 a:hover {color: var(--blue);}

	.footer .footer-link a:hover {border-bottom: 1px solid currentColor}
}

@media (orientation: landscape) {

}

@media (max-width: 1600px) {
	.header .logo {width: 28rem;}
}

@media (max-width: 1280px) {
	.card-group.col-4 {column-gap: 2rem;}
}


@media (max-width: 1366px) {
	.header {height: 8rem;}
	.header .nav-bg {height: 0 !important; opacity: 0; visibility: hidden; transition: opacity .3s; position: fixed; top: 0;}

	.header .gnb {position: fixed; right: -100%; top: 0; margin: 0; padding: 0; padding-top: 8rem; z-index: 5000; max-width: none; min-width: 300px; width: 74%; height: 100%; background-color: #fff; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
	.header .gnb .depth1 {display: flex; flex-direction: column; align-items: flex-start; row-gap: 1.5rem; overflow-y: scroll; padding: 2.5rem 2rem 8rem; margin-left: 0; width: 100%; height: 100%; -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth;}
	.header .gnb .depth1 > li {display: block; height: auto; width: 100%;}
	.header .gnb .depth1 > li:not(:last-child) {padding-right: 0;}
	.header .gnb .depth1 > li > a {display: block; padding: 15px 2rem; width: 100%; position: relative; font-size: 18px; height: auto; margin-bottom: 2rem; cursor: pointer; text-align: left;}
	.header .gnb .depth1 > li > a::after {content: ""; display: inline-block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; transition: background-position 0.15s ease;  background-position: 50% 50%;}
	.header .gnb .depth1 > li > a::before {content: none; }
	.header .gnb .depth1 > li.active > a {background: var(--gray);}
	.header .gnb .depth1 > li.active span::after {content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--blue); position: absolute; right: -0.8rem; top: 0;}
	.header .gnb .depth2 {position: static; transform: translateX(0); text-align: left; padding: 0; max-height: 0; overflow: hidden; }
	.header .gnb .depth2 a {font-size: 15px;}
	.header.open .depth2 > li > a {padding: 1.2rem 2rem 1.1rem;}
	.header.open .depth3 {padding-left: 2rem;}
	.header.open .depth3 a {padding-left: 1rem;}
	.header.open .depth3 a::before {left: 0;}
	.header .header-menu-open {display: block; z-index: 6000;}

	.header.open .gnb {right: 0;}
	.header.open .nav-bg {width: 100%; height: 100% !important; opacity: 0.7; visibility: visible; background: #000000;}
	.header.open .header-menu--btn span:nth-child(1) {transform: rotate(45deg) translateY(-0.5px); transform-origin: 0 50%;}
	.header.open .header-menu--btn span:nth-child(2) {transform: translate(-100%); opacity: 0;}
	.header.open .header-menu--btn span:nth-child(3) {transform: rotate(-45deg) translateY(0.5px); transform-origin: 0 50%;}
}

@media (max-width: 1024px) {
	.card-group {flex-wrap: wrap;}
	.card-group.col-4 {column-gap: 4rem; row-gap: 4rem;}
	.card-group.col-4 .card {width: calc((100% - 6rem) / 2); flex: auto;}

}

@media (max-width: 768px) {
	.header .gnb .depth1 > li > a {margin-bottom: 1rem;}
	.header .gnb {padding-top: 6rem;}

	.logoBanner {padding: 1.5rem 0}
}

@media (max-width: 480px) {
	.footer .footer-info {width: 90%;}
	.footer .footer-info p, .footer .footer-info a {font-size: 1.5rem;}
	.footer .footer-info span.mb-nobar::after {content: none;}

	.ubtn.plus {width: 4rem; height: 4rem; }
	.ubtn.plus::before, .ubtn.plus::after {width: 1.5rem; height: 1.5px;}

	.card-group.col-4 {row-gap: 2rem;}
	.card-group.col-4 .card {width: 100%;}

	.logoBanner .inner {width: 85%;}
	.logoBanner .swiper-button-prev {left: -1.5rem;}
	.logoBanner .swiper-button-next {right: -1.5rem;}

	.form-section {row-gap: 1.5rem;}
	.form-row--file {column-gap: 0.5rem; row-gap: 0.4rem;}
	.form-row--file .attach {width: 8rem;}
	.input-item input, .input-item select {font-size: 1.5rem;}
}