:root {
    --blue: #006FBC;
    --green: #23C78A;
    --lightgreen: #E4F0EC;
    --gray: #F1F2F6;
	--gradientRightBottom: linear-gradient(to right bottom, #8FC31F, #006FBC);
	--gradientRight: linear-gradient(to right, #8FC31F, #006FBC);
	--gradientBottom: linear-gradient(to bottom, #8FC31F, #006FBC);
}

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}
body.main {display: flex; flex-direction: column; height: 100svh;}
body.main main {flex: 1;}
body.sub {display: flex; flex-direction: column; min-height: 100vh; }
html.no-scroll {overflow: hidden;}
h1, h2, h3, h4, h5, h6 {line-height: 1.2;}
input, textarea, select {font-family: 'Pretendard'; font-weight: 400;}
button {border: 0; outline: 0; font-family: 'Pretendard'; background: transparent; cursor: pointer; font-weight: 400;}
.inner {max-width: 133.2rem; width: 95%; margin: 0 auto;}
ol, ul {list-style: none; padding: 0; margin: 0;}

/*폰트 사이즈*/
.title-lg {font-size: 7rem;}
.title-lg2 {font-size: 6rem;}
.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 (max-width: 2000px) {
    html {font-size: calc(1000vw/2000)}
}

@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-lg2 {font-size: 3.5rem;}
	.title-big {font-size: 3.2rem;}
	.title-md {font-size: 2.8rem;}
	.title-sm {font-size: 2.2rem;}
	.title-sm2 {font-size: 1.7rem;}
	.title-xsm {font-size: 1.7rem;}
	.text-lg {font-size: 1.7rem;}
	.text-big {font-size: 1.6rem;}
	.text-md {font-size: 1.5rem;}
	.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; line-height: 1.2em; border-radius: 999px; transition: .15s;}
.ubtn.round {border-radius: 6px;}
.ubtn.primary {background: var(--blue); padding: 1rem 2.5rem; color: #fff; font-size: 1.6rem; min-width: 10rem; width: fit-content; 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: fixed; left: 0px; top: 0px; z-index: 9999; transition: .25s; height: 10rem; width: 100%;}
.header.addBg {background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(25px);}
.header .inner {display: flex; /*justify-content: space-between;*/ align-items: center; height: 100%; column-gap: 1rem;}
.header .logo {display: flex; align-items: center; }
.header .logo a {width: 20rem; height: 5rem; background: url('../img/common/logo_header.svg') no-repeat center center / contain;}
.header .logo_40th {width: 12rem; height: 5rem; background: url('../img/main/40thlogo_transparent.png') no-repeat center center / contain;}
.header .logo img, .header .logo_40th img, .footer-logo img {width: 100%;}
.header .gnb {display: flex; align-items: center; justify-content: space-between; width: 70%; margin-left: auto;}
.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: 5rem;}
.header .gnb .depth1 > li > a {display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; position: relative; z-index: 100; line-height: 1; border-radius: 1rem; font-size: 1.8rem; font-weight: 400; color: #fff;}
.header .gnb .depth1 > li span {position: relative;}
.header .gnb a {display: inline-block; font-family: 'Pretendard'; width: 100%; color: #222; word-break: keep-all;;}
.header .gnb .depth2 {position: absolute; top: 99%; width: 100%; z-index: 10; height: 0; overflow: hidden}
.header.open .depth2 > li + li {margin-top: 1.8rem;}
.header .gnb .depth2 > li > a {font-size: 1.5rem; text-align: left; transition: 0.15s;}
.header .gnb .depth3 {margin-top: 1.5rem;}
.header .gnb .depth3 > li + li {}
.header .gnb .depth3 > li > a {font-size: 1.5rem; color: #222;}
.header .gnb .has-depth3 > a {position: relative;}
.header .gnb .has-depth3 > a::after {content: ""; display: inline-block; width: 1.4rem; height: 1.4rem; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: url('../img/common/gnb_arrow.svg') no-repeat center center / contain; transition: transform 0.15s ease;}
.header .gnb .has-depth3.active > a::after {transform: translateY(-50%) rotate(180deg);}
.header .gnb .depth4 {padding-left: 1rem; margin-bottom: 1.2rem;}
.header .gnb .depth4 a {font-size: 1.4rem; color: #666;}
.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 .header-login ul {display: flex; align-items: center; column-gap: 3rem;}
.header .header-login li:first-child {position: relative;}
.header .header-login li:first-child::after {content: ""; display: inline-block; width: 1px; height: 0.8em; background: rgba(217,217,217,0.3); position: absolute; right: -1.5rem; top: 50%; transform: translate(50%, -50%);}
.header .header-login a {color: #fff;}

/*헤더 로그인, 회원가입, 비밀번호찾기*/
.header.--member {background: #fff;}
.header.--member .logo a {background: url('../img/common/logo_footer.svg') no-repeat center center / contain;}
.header.--member .logo_40th {background: url('../img/main/40thlogo_transparent_color.png') no-repeat center center / contain;}
.header.--member .gnb .depth1 > li > a {color: #222;}
.header.--member .header-login a {color: #7A7F84;}

.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 .active .depth2 {display: flex; flex-direction: column; left: -2rem; height: auto; padding: 2.2rem; background: #fff; border-radius: 1rem; box-shadow: 0 0 8px rgba(0,0,0, 0.3); min-width: 22rem;}
.header.open .depth2 > li > a {padding: 0.2rem 0; line-height: 1.25; border-radius: 0.5rem; font-size: 1.6rem; font-weight: 600;}
.header.open .depth3 > li > a {padding: 0.6rem 1rem; position: relative; line-height: 1.25; text-align: left;}
.header.open .depth3 > li > a::before {content: ""; display: inline-block; width: 2px; height: 2px; background: #a6a6a6; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);}
.member-wrap .header .logo a {background: url('../img/common/logo_black.svg') no-repeat center center / contain;}
.member-wrap .header .gnb .depth1 > li > a {color: #222;}
.header.change {background: #fff;}
.header.change .logo a {background: url('../img/common/logo_black.svg') no-repeat center center / contain;}
.header.change .gnb .depth1 > li > a {color: #222;}
.header.change .header-menu--btn span {background: #222;}
.header.change .logo_40th {background: url('../img/main/40thlogo_transparent_color.png') no-repeat center center / contain;}


/*푸터 배너*/
.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;}
.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: #fff; padding: 4.8rem 0 5.4rem; margin-top: auto; border-top: 1px solid #E8E8E8;}
.footer .inner {display: flex; justify-content: center; align-items: center; column-gap: 8rem; row-gap: 2rem; text-align: left;}
.footer .footer-logo {display: flex; align-items: center; column-gap: 1rem;}
.footer .logo_40th {width: 12rem; }
.footer .footer-info p, .footer .footer-info a {color: #666; font-size: 1.4rem;}
.footer .footer-info p {display: flex; align-items: center; flex-wrap: wrap; column-gap: 1.2rem; word-break: keep-all;}
.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%);}*/
.footer .footer-link {display: flex; flex-direction: column; row-gap: 1.5rem; margin-left: auto;}
.footer .footer-link ul {display: flex; align-items: center; column-gap: 2rem;}
.footer .footer-link a {color: #222;}

.dropdown {position: relative; width:20rem; height:4.3rem; border:1px solid #898e91; border-radius: 6px;}
.dropbtn {width:100%; height:100%; color:rgba(255,255,255,0.7); padding:0 1.5rem; line-height:4.3rem; text-align:left; border-radius: 6px; color: #222;}
.dropbtn::after{content:''; display:block}
.dropdown svg {position:absolute; right: 1.5rem; top: 2.15rem; transform: translateY(-50%) rotate(0); transition: transform 0.15s;}
.dropdown-content {position: absolute; bottom: calc(100% + 1px); background-color: #fff; min-width: 100%; max-height: 18rem; overflow-y: auto; box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2); border-radius: 6px; z-index: 1;}
.dropdown-content a {color: black; padding: 1rem 1.6rem; text-decoration: none; display: block; transition: background-color 0.3s ease; /* 항목에 애니메이션 적용 */}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown.open svg {transform: translateY(-50%) rotate(180deg);}

.card-group {display: flex; align-items: flex-start;}
.card-group.col-4 {column-gap: 1.5%;}
.card-group .card {align-self: stretch; flex: 1;}
.card-group .card.text-white * {color: #fff;}

/*팝업*/
#hd_pop {z-index: 99999;}
#hd_pop .hd_pops {position:absolute;background:#fff; border: 0; }
#hd_pop .hd_pops .hd_pops_con {width: auto !important; height: auto !important; max-width: 45rem;}
#hd_pop .hd_pops .hd_pops_con br {display: none; height: 0;}
#hd_pop .hd_pops_footer .hd_pops_close {display: flex; align-items: center; column-gap: 3px; height: 100%;}
#hd_pop .hd_pops_footer .hd_pops_close i {display: none;}
#hd_pop .hd_pops_footer .hd_pops_close::after {content: "⨉"; display: inline-block; color: #fff; font-weight: 500; font-size: 1.6rem; line-height: 1.2; }
#hd_pop .hd_pops_footer .hd_pops_close svg {width: 17px; height: 17px;}

@media (max-width: 1280px) {
	#hd_pop {position: static;}
	#hd_pop .hd_pops {left: 50% !important; transform: translateX(-50%); top: 10rem !important;}
}

@media (max-width: 768px) {
	/*#hd_pop .hd_pops .hd_pops_con {width: auto !important; height: auto !important; }*/
}

@media (max-width: 480px) {
	#hd_pop .hd_pops .hd_pops_con {width: 80vw !important;}
	#hd_pop .hd_pops .hd_pops_footer .hd_pops_reject, #hd_pop .hd_pops_footer .hd_pops_close {font-size: 1.6rem;}
}

/*페이징*/
.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; line-height: unset; min-width: unset;}
.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_page.pg_arrow {color: #666666; border: 0; width: 3rem;}
.pg_wrap .pg_page svg {width: 2.2rem; height: 2.2rem;}
.pg_wrap .pg_prev {margin-right: 2rem;}
.pg_wrap .pg_next {margin-left: 2rem;}

/*폼*/
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;}
#captcha #captcha_key:focus {border: 1px solid var(--blue) !important;}

.form-section {display: flex; flex-direction: column; row-gap: 3rem;}
.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; font-weight: 500;}
.form-row .label .aster {color: #F63434}
.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 input, .input-item select {background: transparent; border: 0; padding: 1rem 1.5rem; font-size: 1.4rem; line-height: 2.4rem; 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%;}
.form-row--file .file_del {width: 100%;}
.form-row .term-text {padding: 1.5rem 2rem; margin: 1rem 0.5rem; max-height: 20rem; overflow-y: auto;}
::-webkit-scrollbar {width: 0.6rem;}
::-webkit-scrollbar-thumb {background: #999; border-radius: 999px; scrollbar-color: #999 white;}
.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/chk.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 12px 10px;}

/*로그인*/
.member-wrap, .member-wrap.mbskin {height: 100%; max-width: 650px; width: 90%; margin-top: 10rem; margin-bottom: 8rem; 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 .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 .form-row--btn {flex-direction: column; row-gap: 0.5rem;}
.member-wrap form .ubtn {color: #fff; background: var(--blue); border-radius: 6px; font-size: 1.5rem; padding: 1.6rem 2.5rem; transition: 0.15s;}
.member-wrap .ubtn {width: 100%; }

/*회원 비밀번호 확인*/
.member-wrap.--confirm .mbskin-guide {margin-bottom: 4rem;}

.member-wrap.--lost #captcha {text-align: left;}

@media (hover: hover) and (pointer: fine) {
	.ubtn.primary:hover {background: #003F74;}
	.ubtn.primary.grey:hover {background: #ddd; color: #767678;}

	.header .gnb .depth1 > li > a:hover,
	.header .header-login a:hover {text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #fff;}
	.header .gnb .depth2 > li:hover > a {color: var(--blue)}

	.footer .footer-link a:hover {color: var(--blue);}

	.member-wrap .login_info a:hover {color: var(--blue);}
	.member-wrap form .ubtn:hover {background: #003F74;}
}

@media (orientation: landscape) {

}

@media (max-width: 1600px) {
	.header .logo {width: 18rem;}
}

@media (max-width: 1280px) {
	.card-group.col-4 {column-gap: 2rem;}
	.footer .inner {column-gap: 5rem; }
	
}

/* ipad pro landscape 포함 그 아래의 미디어 쿼리*/
@media only screen and (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: 45%; 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 .nav {width: 100%;}
	.header .gnb .header-login {position: absolute; top: 0; left: 0; height: 8rem; width: 100%; padding: 0 4rem;}
	.header .gnb .header-login ul {height: 100%}
	.header .gnb .header-login a {color: #222;}
	.header .gnb .depth1 {display: flex; flex-direction: column; align-items: flex-start; row-gap: 1.5rem; overflow-y: scroll; padding: 2.5rem 4rem 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 0; width: 100%; position: relative; font-size: 18px; height: auto; cursor: pointer; text-align: left; color: #222;}
	.header .gnb .depth1 > li > a::after {content: ""; display: inline-block; width: 1.5rem; height: 2rem; position: absolute; top: 50%; right: 1rem; transform: translate(0, -50%); z-index: -1; background: url('../img/common/gnb_arrow.svg') no-repeat center center / contain; transition: transform 0.15s ease;  background-position: 50% 50%;}
	.header .gnb .depth1 > li > a::before {content: none; }
	.header .gnb .depth2 {position: static; transform: translateX(0); text-align: left; padding: 0; max-height: 0; overflow: hidden; }
	.header .gnb .depth2 a {font-size: 1.5rem;}
	.header.open .depth2 > li + li {margin-top: 0.5rem;}
	.header.open .depth2 > li > a {padding: 1rem 0 1rem; font-weight: 400; cursor: pointer;}
	.header.open .active .depth2 {box-shadow: none; padding: 0; margin-top: 1rem;}
	.header.open .depth3 {padding-left: 2rem; overflow: hidden; max-height: 0;}
	.header.open .depth3 a {padding-left: 1rem;}
	.header.open .depth3 a::before {left: 0;}
	.header .header-menu-open {display: block; z-index: 6000; margin-left: auto;}
	.header .header-menu--btn span {background: #fff;}
	

	.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 {background: #222;}
	.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) {
	.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 nav {width: 100%;}
	.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: 1.8rem; height: auto; cursor: pointer; text-align: left;}
	.header .gnb .depth1 > li > a::after {content: ""; display: inline-block; width: 1.5rem; height: 2rem; position: absolute; top: 50%; right: 1rem; transform: translate(0, -50%); z-index: -1; transition: transform 0.15s ease;  background-position: 50% 50%;}
	.header .gnb .depth1 > li.active > a::after {transform: translate(0, -50%) rotate(180deg);}
	.header .gnb .depth1 > li > a::before {content: none; }
	.header .gnb .depth2 {position: static; transform: translateX(0); text-align: left; padding: 0; max-height: 0; overflow: hidden; }
	.header .gnb .depth2 a {font-size: 1.5rem;}
	.header.open .depth2 > li + li {margin-top: 0;}
	.header.open .depth2 > li > a {padding: 1rem 2rem 0.9rem;}
	.header.open .depth3 {padding-left: 2rem; margin-top: 0;}
	.header.open .depth3 a {padding-left: 1rem;}
	.header.open .depth3 a::before {left: 0;}
	.header .depth1 > .active > a {background: #F3FAFF}
	.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%;}

	.card-group {flex-wrap: wrap;}
	.card-group.col-4 {column-gap: 2.5rem; row-gap: 2.5rem;}
	.card-group.col-4 .card {width: calc((100% - 6rem) / 2); flex: auto;}

	.footer .inner {flex-direction: column; align-items: flex-start;}
	.footer .footer-link {margin-left: 0;}
}

@media (max-width: 768px) {
	.header .gnb {padding-top: 6rem;}
	.header .logo_40th {width: 10rem; height: 4.5rem;}

	.logoBanner {padding: 1.5rem 0}

	.pg_wrap .pg_page {width: 3rem; height: 3rem;}
	.pg_wrap .pg_page.pg_arrow {width: 2rem;}
	.pg_wrap .pg_next {margin-left: 1rem;}
	.pg_wrap .pg_prev {margin-right: 1rem;}

}

@media (max-width: 480px) {
	.footer .footer-info {width: 100%;}
	.footer .footer-info p, .footer .footer-info a {font-size: 1.4rem;}
	.footer .footer-info span.mb-nobar::after {content: none;}
	.footer .footer-link a {font-size: 1.5rem;}

	.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;}

	.dropdown svg {width: 2rem; height: 2rem;}
}