@charset "utf-8";
@import url("/fonts/fonts.css");

/******************************************************
	공통 CSS
******************************************************/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", "Roboto", "Segoe UI", sans-serif;
    outline: none;
    font-size: 10px;
}
address, caption, cite, code, dfn, em, strong, th, var {font-style :normal; font-weight:normal}
table {border-collapse:collapse;}
a {text-decoration:none; color:inherit; display:inline;}
a:link, a:visited {text-decoration:none; color:#222;}
a:hover {text-decoration:none; color:#222;}
::-moz-selection {
	background-color: rgba(28,136,237,0.87);
	color: #fff;
}
::selection {
	background-color: rgba(28,136,237,0.87);
	color: #fff;
}

span {display:inline;}
img {vertical-align:middle; border:0;}
ol, ul {list-style:none outside;}

html, body {width:100%; height:100%;}
html{
	-o-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-webkit-text-size-adjust:none;
	text-size-adjust:none;
}

.notScroll {position:fixed; top:0; left:0;}

input, textarea, select, button { -webkit-border-radius:0; -moz-appearance:none; -o-appearance:none; -ms-appearance:none; appearance:none; border-radius: 0;}
input::-ms-clear {display: none;}
input:focus {outline:none;}
select:focus {outline:none;}
textarea:focus {outline:none; border-radius:0; box-shadow: 0;}
select::-ms-expand {display:none}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {-webkit-text-fill-color: #000; -webkit-box-shadow: 0 0 0 100rem #fff inset; box-shadow: 0 0 0 100rem #fff inset; transition: background-color 5000s ease-in-out 0s;}

:focus-visible {outline-color:#0068B7;}

input::placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder {color:#9EA4AA; font-size:1.6rem; font-weight:400;}

textarea::placeholder,
textarea::-moz-placeholder,
textarea:-ms-input-placeholder,
textarea::-webkit-input-placeholder {color:#9EA4AA; font-size:1.6rem; font-weight:400;}
/**** 공통 CSS END ****/


#wrap {width:100%;}
#wrap * {font-family: "Pretendard", sans-serif;}

#header {width:100%; position:-webkit-sticky; position:sticky; top:0; left:0; z-index:99;}
#footer {width:100%;}


.inner {width:100%; margin: auto; max-width:130rem; padding:0 5rem;}

@media (max-width:1023px) {
	.inner {padding:0 3rem;}
}
@media (max-width:600px) {
    .inner {padding:0 2.2rem;}
}
@media (max-width:479px) {
	.inner {padding:0 2rem;}
}

@media (max-width:390px) {
	* {font-size:9px;}
}
@media (max-width:360px) {
	* {font-size:8.5px;}
}
@media (max-width:320px) {
	* {font-size:8px;}
}




header {width:100%; background-color:#fff; transform: translateY(-100%); z-index:99;}
body:not(:has(main)) header {transform:translateY(0)!important;}
header .top {width:100%;}
header .top .inner {height:6.5rem; display:flex; align-items: center; position: relative;}
header .top a.logo {display: block; width:18rem; height:100%; background:url("../svg/common/logo.svg")no-repeat center; background-size:100%;}

header .top ul.gnb {display:flex; margin-left: auto; margin-right:auto;}
header .top ul.gnb li {padding:0 3.2rem;}
header .top ul.gnb li a {display: block; width:100%; font-size:1.7rem; color:#26282B; font-weight:500; line-height:6.5rem; position:relative; background-color:transparent; cursor: pointer;}
header .top ul.gnb li a::before {content:""; width:0; height:0.2rem; background-color:#26282B; position: absolute; bottom:1.7rem; left:50%; transform: translateX(-50%); z-index:-1;}
header .top ul.gnb li.hit a {color:#080404; font-weight:600;}
header .top ul.gnb li.hit a::before {width:100%;}

header .top .lang {display:flex; gap:3.2rem; position: relative;}
header .top .lang button {font-size:1.5rem; color:#9EA4AA; font-weight:400; line-height:2.4rem; position: relative; cursor: pointer; background-color: transparent;}
header .top .lang button + button::before {content:""; width:1px; height:1.6rem; background-color:#E3E5E8; position: absolute; top:50%; left:-1.6rem; transform:translateY(-50%) translateY(-0.05rem);}
header .top .lang button:disabled {cursor: default; color:#26282B;}

header .top #gnbBtn {width:8.6rem; height:100%; display:none; justify-content: center; align-items: center; cursor: pointer;}
header .top #gnbBtn div {width:2.6rem; height:1.8rem; position: relative;}
header .top #gnbBtn div span {width:100%; height:0.2rem; background-color:#080404; position:absolute; left:0; border-radius:10rem;}
header .top #gnbBtn div span:nth-child(1) {top:0;}
header .top #gnbBtn div span:nth-child(2) {top:50%; transform: translateY(-50%);}
header .top #gnbBtn div span:nth-child(3) {bottom:0;}


@media (hover: hover) {
    header .top ul.gnb li a {transition:color 0.2s;}
	header .top ul.gnb li a::before {transition:width 0.2s;}
    header .top ul.gnb li:not(.hit) a:hover {color:#080404; font-weight:600;}
	header .top ul.gnb li:not(.hit) a:hover::before {width:100%;}

	header .top .lang button {transition:opacity 0.2s;}
	header .top .lang button:not(:disabled):hover {opacity:0.6;}
}
@media (max-width:1023px){
    header .top ul.gnb li {padding:0 2.4rem;}
}
@media (max-width:900px){
    header .top .inner {padding-right:0; height:6.4rem;}
    header .top a.logo {width:18rem;}
    header .top ul.gnb {display:none;}
    header .top .lang {margin-left: auto;}
	header .top #gnbBtn {display: flex;}
}
@media (max-width:767px){
    header .top .inner {height:6.2rem;}
    header .top a.logo {width:16rem;}
}
@media (max-width:600px){
    header .top .lang {gap:2.8rem;}
    header .top .lang button {font-size:1.4rem; line-height:2.2rem;}
    header .top .lang button + button::before {height:1.4rem; left:-1.4rem; transform: translateY(-50%);}
    header .top #gnbBtn {width:6.6rem;}
    header .top #gnbBtn div {width:2.2rem; height:1.4rem;}
}
@media (max-width:479px) {
	header .top .inner {height:5.8rem;}
	header .top a.logo {width:14rem;}
	header .top #gnbBtn {width:6.2rem;}
}
@media (max-width:420px) {
    header .top .lang {gap:2.4rem;}
    header .top .lang button {font-size:1.3rem; line-height:2.3rem;}
    header .top .lang button + button::before {height:1.2rem; left:-1.2rem; transform: translateY(-50%)translateY(0.05rem);}
}



#gnbPopup {transform: translateY(calc(-100% - 2px)); position:fixed; top:0; left:0; width:100%; height:100%; overflow-y: auto; background-color:#fff; z-index:100; display:flex; align-items: center; justify-content:center; background-color:rgba(0,0,0,0.9); flex-wrap: wrap;}
#gnbPopup .btn_close {position: absolute; top:0; right:1rem; width:6.8rem; height:6.8rem; background:url("../svg/common/ic_close.svg")no-repeat center; background-size:2rem; cursor: pointer;}

#gnbPopup ul.list {width:100%; padding:8rem 0;}
#gnbPopup ul.list li {width:100%; display:flex; justify-content: center;}
#gnbPopup ul.list li + li {margin-top:4rem;}
#gnbPopup ul.list li a {display: block; font-size:4rem; color:#fff; font-weight:600; line-height:5rem; position: relative; text-shadow:0 0.1rem 0.4rem rgba(0,0,0,0.2); background-color:transparent;}
#gnbPopup ul.list li a::before {content:""; width:0; height:0.4rem; background-color:#fff; position: absolute; bottom:-0.5rem; left:50%; z-index:-1; transform: translateX(-50%);}

.gnbShow {animation:popupShow 0.5s cubic-bezier(0.17, 0.67, 0, 1) forwards;}
.gnbHide {animation:popupHide 0.5s cubic-bezier(0.17, 0.67, 0, 1) forwards;}
@keyframes popupShow {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0);}
}
@keyframes popupHide {
    0% {transform: translateY(0);}
    100% {transform: translateY(-100%);}
}

@media (hover: hover) {
	#gnbPopup .btn_close {transition:opacity 0.2s;}
	#gnbPopup ul.list li a::before {transition:width 0.2s;}

	#gnbPopup .btn_close:hover {opacity:0.5;}
	#gnbPopup ul.list li a:hover::before {width:100%;}
}
@media (max-width:600px) {
    #gnbPopup ul.list {padding:6rem 0;}
	#gnbPopup ul.list li + li {margin-top:3rem;}
	#gnbPopup ul.list li a {font-size:3.8rem; line-height:4.8rem;}
	#gnbPopup ul.list li a::before {bottom:-0.4rem; height:0.3rem;}
}
@media (max-width:479px) {
	#gnbPopup ul.list {padding:5rem 0;}
	#gnbPopup ul.list li a {font-size:3.4rem; line-height:4.4rem;}
	#gnbPopup ul.list li a::before {height:1.5rem;}
}




footer {width:100%; padding:4.6rem 0; background-color:#F9FAFB; position: relative;}
footer .footer_top {width:100%; display:flex;}
footer .footer_top img.f_logo {height:4rem;}

footer .footer_top .siteLink {width:24rem; position: relative; margin-left: auto;}
footer .footer_top .siteLink .slTit {width:100%; border:1px solid #E3E5E8; padding:0 1.6rem; position: relative; z-index:2; cursor: pointer; background-color: #fff;}
footer .footer_top .siteLink .slTit em {font-size:1.4rem; color:#454C53; font-weight:500; line-height:4rem; letter-spacing:-0.03em; display: block; position: relative;}
footer .footer_top .siteLink .slTit em::before {content:""; width:0.2rem; height:1.4rem; background-color:#9EA4AA; position:absolute; top:50%; right:0.6rem; transform: translateY(-50%);}
footer .footer_top .siteLink .slTit em::after {content:""; width:1.4rem; height:0.2rem; background-color:#9EA4AA; position:absolute; top:50%; right:0; transform: translateY(-50%);}

footer .footer_top .siteLink .slList {position: absolute; bottom:4.1rem; left:0; border:1px solid #E3E5E8; background-color:#fff; width:100%; display:none;}
footer .footer_top .siteLink .slList a {display: block; padding:1rem 1.6rem; font-size:1.4rem; color:#454C53; font-weight:500; letter-spacing:-0.03em; line-height:2rem;}
footer .footer_top .siteLink .slList a::before {content:""; width:1.2rem; height:100%; position: absolute; top:0; right:1.6rem; mask:url("../svg/common/ic_blank.svg")no-repeat center; mask-size:100%; background-color:#454C53;}
footer .footer_top .siteLink .slList a + a {border-top:1px solid #E3E5E8;}

footer .footer_top .siteLink.on .slTit em::before {transform:translateY(-50%) rotate(-90deg);}
footer .footer_top .siteLink.on .slList {display:block;}


footer .footer_info {width:100%; display:flex; gap:1.6rem; margin-top:2.4rem;}
footer .footer_info a {font-size:1.4rem; color:#080404; font-weight:500; letter-spacing:-0.03em; line-height:2.2rem; text-underline-offset:0.3rem;}

footer .footer_content {width:100%; position: relative;}
footer .footer_content .footer_company {width:100%; overflow: hidden; margin-top:1.6rem;}
footer .footer_content .footer_company div {width:100%; display:flex; flex-wrap:wrap;}

footer .footer_content .footer_company em {font-size:1.3rem; color:#454C53; font-weight:500; letter-spacing:-0.03em; line-height:2.2rem; position:relative; word-break: keep-all; float:left;}
footer .footer_content .footer_company em + em {padding-left:0.6rem; margin-left:0.6rem;}
footer .footer_content .footer_company em + em::before {content:""; width:1px; height:1.1rem; position: absolute; top:50%; left:0; background-color:#454C53; margin-top:-0.55rem;}

footer .footer_content .footer_company em:nth-child(5),
footer .footer_content .footer_company em:nth-child(n + 9) {margin:0; padding:0; clear: both;}
footer .footer_content .footer_company em:nth-child(5)::before,
footer .footer_content .footer_company em:nth-child(n + 9)::before {display:none;}

footer .footer_content .footer_bottom {width:100%; display:flex; align-items: center; margin-top:2.4rem;}
footer .footer_content .footer_bottom strong {display: block; font-size:1.4rem; color:#080404; font-weight:500; letter-spacing:-0.03em; line-height:2rem;}
footer .footer_content .footer_bottom .partner {margin-left:auto; display:flex; gap:4rem;}
footer .footer_content .footer_bottom .partner img {display: block;}

@media (hover: hover) {
	footer .footer_top .siteLink .slTit em {transition:color 0.2s;}
	footer .footer_top .siteLink .slTit em::before,
	footer .footer_top .siteLink .slTit em::after {transition:background-color 0.2s;}
	footer .footer_top .siteLink .slList a {transition:color 0.2s;}
	footer .footer_top .siteLink .slList a::before {transition:background-color 0.2s;}

	footer .footer_top .siteLink .slTit:hover em {color:#000;}
	footer .footer_top .siteLink .slTit:hover em::before,
	footer .footer_top .siteLink .slTit:hover em::after {background-color:#000;}

	footer .footer_top .siteLink .slList a:hover {color:#184D98;}
	footer .footer_top .siteLink .slList a:hover::before {background-color:#184D98;}
	footer .footer_info a:hover {text-decoration: underline;}
}
@media (max-width:1023px) {
	footer .footer_top img.f_logo {height:3.6rem;}
}
@media (max-width:900px) {
    footer .footer_content .footer_bottom .partner {gap:3rem;}
}
@media (max-width:767px) {
	footer .footer_top img.f_logo {height:3.2rem;}
	
	footer .footer_content .footer_company em + em {padding-left:0.9rem; margin-left:0.8rem;}
	footer .footer_content .footer_company em:nth-child(4),
	footer .footer_content .footer_company em:nth-child(8) {padding:0; margin:0; clear:both;}
	footer .footer_content .footer_company em:nth-child(4)::before,
	footer .footer_content .footer_company em:nth-child(8)::before {display:none;}
	
	footer .footer_content .footer_bottom {margin-top:2rem;}
    footer .footer_content .footer_bottom .partner {display:none;}
}
@media (max-width:600px) {
	footer {padding:3.6rem 0;}
	footer .footer_top {display: block;}
	footer .footer_top img.f_logo {height:3rem;}
	footer .footer_top .siteLink {width:100%; margin-top:2.4rem;}

	footer .footer_info {margin-top:2rem;}
	footer .footer_content .footer_company {display:flex; flex-wrap:wrap; margin-top:1.6rem;}
    footer .footer_content .footer_company em {line-height:2.2rem;}
	footer .footer_content .footer_company em + em {padding:0; margin-left:0;}
	footer .footer_content .footer_company em + em::before {display:none;}
	footer .footer_content .footer_company em:nth-child(4) {width:100%;}
    footer .footer_content .footer_company em:nth-child(5),
    footer .footer_content .footer_company em:nth-child(6) {margin-right:1.2rem; clear: none;}
	footer .footer_content .footer_company em:nth-child(n + 8) {width:100%;}

	footer .footer_content .footer_bottom {margin-top:1.6rem;}
}
@media (max-width:479px) {
	footer .footer_top img.f_logo {height:2.6rem;}
	footer .footer_info,
	footer .footer_content .footer_company {margin-top:1.6rem;}
	footer .footer_content .footer_company em {width:100%;}
	footer .footer_content .footer_company em:nth-child(5) {width:auto; margin:0!important;}
	footer .footer_content .footer_company em:nth-child(6) {width:auto; margin-left:1rem; padding-left:1rem;}
	footer .footer_content .footer_company em:nth-child(6)::before {display:block;}

    footer .footer_content .footer_bottom {margin-top:1.2rem;}
	footer .footer_content .footer_bottom strong {font-size:1.3rem; line-height:1.8rem;}
}
@media (max-width:420px) {
    footer .footer_top .siteLink .slTit {padding:0 1.2rem;}
	footer .footer_top .siteLink .slTit em {font-size:1.3rem;}
	footer .footer_top .siteLink .slTit em::before {height:1.2rem; right:0.8rem;}
	footer .footer_top .siteLink .slTit em::after {width:1.2rem; right:0.3rem;}

	footer .footer_top .siteLink .slList a {display: block; padding:1rem 1.2rem; font-size:1.3rem; line-height:1.8rem;}
	footer .footer_top .siteLink .slList a::before {width:1rem; right:1.2rem;}

    footer .footer_info a {font-size:1.3rem; line-height:2rem;}

    footer .footer_content .footer_company {margin-top:1.2rem;}
	footer .footer_content .footer_company em {font-size:1.2rem; line-height:2rem;}
	
    footer .footer_content .footer_bottom {margin-top:0.8rem;}
    footer .footer_content .footer_bottom strong {font-size:1.2rem;}
}



#topBtn {position: fixed; bottom:var(--topBtnBottom); right:3rem; z-index:99; display:none; --topBtnBottom:3rem;}
#topBtn div {width:5rem; height:5rem; border-radius:100%; background-color:#fff; box-shadow:0 0.4rem 0.8rem rgba(0,0,0,0.08);}
#topBtn div::before {content:""; width:100%; height:100%; -webkit-mask:url("../svg/common/top_btn.svg")no-repeat center; -moz-mask:url("../svg/common/top_btn.svg")no-repeat center; -o-mask:url("../svg/common/top_btn.svg")no-repeat center; -ms-mask:url("../svg/common/top_btn.svg")no-repeat center; mask:url("../svg/common/top_btn.svg")no-repeat center; -webkit-mask-size:2rem; -moz-mask-size:2rem; -o-mask-size:2rem; -ms-mask-size:2rem; mask-size:2rem; background-color:#454C53; display: block; cursor: pointer;}

@media (hover: hover) {
	#topBtn div,
	#topBtn div::before {transition:background-color 0.2s;}
	#topBtn div:hover {background-color:#184D98;}
	#topBtn div:hover::before {background-color:#fff;}
}
@media (max-width:900px) {
	#topBtn div {width:4.6rem; height:4.6rem;}
	#topBtn div::before {-webkit-mask-size:1.8rem; -moz-mask-size:1.8rem; -o-mask-size:1.8rem; -ms-mask-size:1.8rem; mask-size:1.8rem;}
}
@media (max-width:767px) {
	#topBtn div {width:4.2rem; height:4.2rem;}
	#topBtn div::before {-webkit-mask-size:1.6rem; -moz-mask-size:1.6rem; -o-mask-size:1.6rem; -ms-mask-size:1.6rem; mask-size:1.6rem;}
}
@media (max-width:600px) {
    #topBtn {right:2.2rem; --topBtnBottom:2.4rem;}
}
@media (max-width:479px) {
    #topBtn {right:2rem;}
	#topBtn div {width:3.8rem; height:3.8rem;}
	#topBtn div::before {-webkit-mask-size:1.4rem; -moz-mask-size:1.4rem; -o-mask-size:1.4rem; -ms-mask-size:1.4rem; mask-size:1.4rem;}
}


#section {width:100%;}
#section .subTop {width:100%; height:32rem; display:flex; align-items: center; justify-content: center; overflow: hidden;}
#section .subTop img.pc_top_img {display: block; min-width:192rem; width:100%;}
#section .subTop img.m_top_img {display:none; width:100%;}

#section .sub_title {width:100%;}
#section .sub_title h2 {display: block; font-size:3.2rem; color:#080404; font-weight:600; letter-spacing:-0.03em; line-height:4.2rem; word-break: keep-all;}

@media (max-width:1200px) {
	#section .subTop {height:28rem;}
	#section .subTop img.pc_top_img {min-width:172rem;}
}
@media (max-width:1023px) {
	#section .subTop {height:24rem;}
	#section .subTop img.pc_top_img {min-width:146rem;}
	#section .sub_title h2 {font-size:3rem; line-height:4rem;}
}
@media (max-width:767px) {
	#section .subTop {height:18rem;}
	#section .subTop img.pc_top_img {min-width:112rem;}
	#section .sub_title h2 {font-size:2.8rem; line-height:3.8rem;}
}
@media (max-width:600px) {
	#section .subTop {height:auto;}
	#section .subTop img.pc_top_img {display:none;}
	#section .subTop img.m_top_img {display:block;}
	#section .sub_title h2 {font-size:2.6rem; line-height:3.6rem;}
}
@media (max-width:479px) {
	#section .sub_title h2 {font-size:2.4rem; line-height:3.4rem;}
}
@media (max-width:420px) {
	#section .sub_title h2 {font-size:2.2rem; line-height:3.2rem;}
}


.page {width:100%; display:flex; justify-content: center; margin-top:4rem;}
.page ul {display:flex; align-items: center; gap:1.6rem;}
.page ul li a {display:flex; align-items: center; justify-content: center; width:1.8rem; height:1.8rem;}
.page ul li a img {display: block; width:1.8rem; height:1.8rem;}
.page ul li .num {width:2.4rem; height:2.4rem; display:flex; align-items: center; justify-content: center; font-size:1.5rem; color:#fff; font-weight:500; text-align: center; background-color:#184D98; border-radius:100%;}
.page ul li a.num {background-color:transparent; color:#72787F;}


.page #pagination {display:flex; align-items: center; justify-content: center; gap:1.6rem;}
.page #pagination button {display:flex; align-items: center; justify-content: center; width:1.8rem; height:1.8rem; cursor: pointer;}
.page #pagination button#page-prev {background:url("/svg/common/page_prev.svg")no-repeat center; background-size:100%;}
.page #pagination button#page-next {background:url("/svg/common/page_next.svg")no-repeat center; background-size:100%;}
.page #pagination button#page-prev:disabled,
.page #pagination button#page-next:disabled {opacity:0.35;}
.page #pagination button.page-num {width:2.4rem; height:2.4rem; display:flex; align-items: center; justify-content: center; font-size:1.5rem; color:#72787F; font-weight:500; text-align: center;  border-radius:100%; background-color:transparent;}
.page #pagination button.page-num.active {color:#fff; background-color:#184D98;}

.page #pagination button:disabled {cursor: default;}

@media (hover: hover) {
	.page ul li a {transition:opacity 0.2s;}
	.page ul li a:hover {opacity:0.5;}

    .page #pagination button {transition:opacity 0.2s;}
	.page #pagination button:not(:disabled):hover {opacity:0.5;}
}
@media (max-width:767px) {
	.page {margin-top:3.8rem;}
	.page ul {gap:1.2rem;}
	.page #pagination {gap:1.2rem;}
}
@media (max-width:420px) {
	.page {margin-top:3.6rem;}
}
@media (max-width:390px) {
	.page ul {gap:1rem;}
	.page #pagination {gap:1rem;}
}


#overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; pointer-events: none; z-index: 9999999;}
:has(main) #overlay {display:none!important;}