@charset "utf-8";
:root {
	--btn-animation: arrowMove .7s ease-out infinite;
	--wid24 : 24px;
}
@media only screen and (max-width: 1366px){
	:root {
		--basic-round: .75em;
		--font-base:.94rem;
	}
	.d_width {padding-inline: 2.25em;}
	select.form-control {background-position: center right 1.5em;}
}
@media only screen and (max-width: 1024px){
	:root {
		--font-lg: 1.067em;
		--font-xlg: 1.25em;
		--font-2xlg: 1.5em;
		--font-3xlg: 2em;
	}
	[class^="ico-"]::before {width: 1.25rem; height: 1.25rem;}
	.d_width {padding-inline: 1.25em;}
	.more-btn {width: 4.5rem; height: 4.5rem; flex-shrink: 0;}
	.tab-idx a {padding: 1em 1.5em;}
	select.form-control {background-position: center right 1.45em;}
}
@media only screen and (max-width: 768px){
	:root {
		--basic-round: 8px;
		--font-base:.875rem;
		--font-2xlg: 1.43em;
		--font-3xlg: 1.75em;
		--gap-base: 2px;
		--gap-accordion: 6px;
	}
	body {line-height: var(--lh-20);}
	.d_width {padding-inline: 1em;}
	.more-btn {width: 4rem; height: 4rem;}
	.tab-idx a {width: 100%; height: 40px; line-height: 40px; flex: 1 0 128px; padding: 0; font-size: var(--font-base);}
	select.form-control {height: 40px; padding-inline: 1em 3em; background-position: center right 1.35em;}
	.l-grid12 {gap: var(--gap-2x);}
	.ws-pre {white-space: normal;}
	.mtp30 {margin-top: 2.143em !important;}
	.h5,h5 {line-height: var(--lh-20);}
	.btn-d.btn-lg {line-height: 40px;}
}
@media only screen and (max-width: 567px){
	select.form-control {background-position: center right 1em;}
}

.wid24{width:var(--wid24);}
.w324 {width:324px !important;}
.bg_wh, .bg_gr, .bx1_wh, .bx2_wh, .bx1_gr, .bx1_rd, .bg_sky, .bx1_sky {padding: 12px; margin: 8px 0; word-break:keep-all;}
.bg_gr {background-color: var(--lgray1);}
.point-dgray1 {color: var(--dgray2) !important;}

.l-grid12 {display: grid !important; grid-template-columns: repeat(12, 1fr) !important; gap: var(--gap-3x);}
.col-4 {grid-column: span 4 !important;}
.col-8 {grid-column: span 8 !important;}

/* num list */
.num-list {counter-reset: num; padding-left: 5px;}
.num-list li {display: grid; grid-template-columns: auto 1fr; counter-increment: num;}
.num-list li::before {content: counter(num) ".\00A0\00A0"; grid-row: 1 / 3; width: 1.25em; margin: 0;}
.num-list li .tit {grid-column: 2;}

.num-list2 {counter-reset: num;}
.num-list2 > li {display: flex; flex-wrap: wrap; counter-increment: num;}
.num-list2 > li:not(:nth-child(1)) {margin-top: .375em;}
.num-list2 > li::before {box-sizing: border-box; content: counter(num) ".\00A0\00A0"; flex-shrink: 0; width: 1.25em; padding-left: 0;}
.num-list2 > li .tit {width: calc(100% - 1.25em);}
.num-list2 > li .txt {width: calc(100% - 1.25em); margin-left: 1.25em;}

.num-list.roman li:before{content:counter(num, upper-roman) ".\00A0\00A0";}
.num-list.circled > li:before{content: "①";}
.num-list.circled > li:nth-child(2):before{content: "②";}
.num-list.circled > li:nth-child(3):before{content: "③";}
.num-list.circled > li:nth-child(4):before{content: "④";}
.num-list li ul:not(.num-list) li{counter-increment:none;}
.num-list a{display:contents;word-break:keep-all;}
.num-list li ul:not(.num-list) li:before {content:none;}

/* list */
ul.bu > li {padding-left:13px;}
ul.bu > li:before {content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--black);vertical-align:top;margin:10px 10px 0 -13px;}

.dash-list {}
.dash-list li {display: flex;}
.dash-list li::before {content: '-'; display: block; width: 12px; flex-shrink: 0;}

@media only screen and (max-width: 768px){
	ul.bu > li {padding-left:10px;}
	ul.bu > li:before {width:3px;height:3px; margin:9px 6px 0 -10px;}
}

#contentArea .list-nodata {min-height: 32.75em; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#contentArea .local-list .list-nodata {min-height: 100%;}

/* layout */
#wrap {width: 100%; min-width: 320px;}
/* header */
#header {position:relative; z-index: 401;}
#header > .row {justify-content:space-between;}
#header #logo {margin: 1.625em 0 .937em; font-size: var(--font-base);}
#header #logo a {display: block;}

/* header : menu */
#gnbmn {position:relative; display: flex; gap: .75em; margin-top: 1.5em;}
#gnbmn a {position:relative;}
#gnbmn ul.depth1 {display: flex;}
#gnbmn ul.depth1 > li {position: relative;}
#gnbmn ul.depth1 > li > a {display: block; padding: .75em 1em; padding-bottom: 2.5em; position:relative; color: var(--black) !important; line-height: var(--lh-20);}
#gnbmn ul.depth1 > li.on > a,
#gnbmn ul.depth1 > li > a:hover {font-weight: var(--font-bold);}
#gnbmn .depth2 {display: none; position:absolute; top: 4.375em; left: 0; z-index: 500; width: max-content;}
#gnbmn .depth2.on {display: block;}
#gnbmn .depth2 > ul > li > a {display: block; padding: 6px 1em;}
#gnbmn .depth2 > ul > li > a > span {white-space: nowrap;}
#gnbmn .depth2 > ul > li > a:hover > span {font-weight: var(--font-bold);}
#gnbmn .mob-topmn {display: none;}

/* header : search + login + mobile menu */
#header .topmn {align-items: center; height: 40px;}
#header .topmn [class*="btn"]:hover,
#header .topmn .mypage-btn.current {font-weight: var(--font-bold);}
#header .topmn .login-btn,
#header .topmn .mypage-btn {padding: .75em .5em; line-height: var(--lh-20);}
#header .topmn .search-btn {width: 40px; height:40px;}
#header .topmn .search-btn::before {margin: 0 auto;}
#header .topmn .mmenu-btn {width:40px; height:40px; display: none; align-items: center; justify-content: center;}

/* header : show : search layer */
#header.show .depth1, #header.show .topmn {opacity: 0; visibility:hidden;}
#header.show {background-color: #fff; position: sticky; top: 0; left: 0;}
#header.show:before {backdrop-filter: none; -webkit-backdrop-filter: none;}
/* header : background */
#id_gnb_bg {position:fixed; width:100%; height:148px; left:0; top: 96px; z-index:300; background:var(--white); opacity:0; visibility:hidden; pointer-events:none; transition: background .3s ease;}
#black-bg-all {position:fixed; width:100%; height:100vh; left:0; top: 96px; z-index:100; background: rgba(17,17,17,.4); backdrop-filter: blur(12px); opacity:0; visibility:hidden; pointer-events:none; transition: background .3s ease;}
#header.on {}
#header.on #id_gnb_bg {opacity:1; visibility:visible; pointer-events:auto;}
#header.on #black-bg-all {opacity:1; visibility:visible;}

/* mobile menu */
#menu {color: #111;}
#menu .topmn {display: none;}
#menu .mob-topmn {width: 100%; height: auto; padding: 1em; border-bottom: 1px solid #e6e6e6;}
#menu .mob-topmn a {display: block; width: 100%; height: 100%; padding: 0; line-height: 40px; text-align: center; border-radius: var(--round-lg);}
#menu .mob-topmn .login-btn {background-color: var(--green1);}
#menu .mob-topmn .mypage-btn {background-color: var(--black); color: var(--white);}

.mm-spn a:not(:last-child)::after,
.mm-spn.mm-spn--vertical ul ul:after {display: none;}
.mm-spn.mm-spn--vertical ul ul li a {padding: 0;}
.mm-spn.mm-spn--vertical ul ul.mm-spn--open li a {font-size: 13px;}
.mm-ocd__backdrop {background: rgba(17,17,17,.4); backdrop-filter: blur(12px); z-index:0;}

@media only screen and (max-width: 1280px){
	#header #logo img {width: 11.125em;}
}
@media only screen and (max-width: 1024px){
	#header #logo img {width: 10.125em;}
	#gnbmn ul.depth1 {display: none;}
	#header .topmn {align-items: flex-start; flex-flow: nowrap; position: absolute; top: 0; right: -6px;}
	#header .topmn .login-btn, #header .topmn .mypage-btn {display: none; /* padding-block: 0; line-height: 40px; */}
	#header .topmn .mmenu-btn {display: flex;}
}
@media only screen and (max-width: 768px){
	#header {position: sticky; top: 0;}
	#header::before {content: ''; position: absolute; inset: 0; background-color: var(--white9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: -1; pointer-events: none;}
	#gnbmn {margin-top: 1.2em;}
}

/* header : search layer */
#top-search-wrap {position:fixed; left:0; top: 96px; width:100%; height: 100%; background:rgba(17,17,17,.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index:99999999; visibility:hidden; opacity:0; transition:background .15s ease-out;}
#top-search-wrap.show {visibility:visible; opacity:1;}
#top-search {position:fixed; left:0; top:0; width:100%; background:var(--white); padding:2.5em 0 5em;}
#top-search .btn-close {width: 3em; height: 3em; right: 3.375em; top:-7em; z-index: 999;}
#top-search .btn-close .ico-close18::before {width: 3em; height: 3em; background: url("../img/icon/sd-xmark-48px.svg"); background-size: cover;}
#top-search .input-area {position:relative; display: flex; align-items: center; gap: var(--gap-3x); padding: 1.125em 0;}
#top-search .input-area:before {content: ''; display: block; width: 100%; height: 1px; background-color: var(--black); position: absolute; bottom: 0; left: 0;}
#top-search .input-area input {width: 100%; height: 1.19em; line-height:1.19em; padding: 0; background:none; border:none; border-radius:0; font-size:var(--font-2xlg);}
#top-search .input-area input:focus {color: var(--black); outline:0; box-shadow: none;}
#top-search .input-area input::placeholder {opacity:1;}
#top-search .input-area a {flex-shrink: 0; font-size:var(--font-2xlg); line-height: 1.2;}
#top-search .input-area a:focus {font-weight: var(--font-semibold);}

@media only screen and (max-width: 1366px){
	#top-search .btn-close {right: 2em;}
}
 @media only screen and (max-width: 1024px){
	#top-search-wrap {top: 5.6em;}
	#top-search {padding: 2em 0 5em;}
	#top-search .btn-close {top: -6em; right: 1em;}
}
@media only screen and (max-width: 768px){
	#top-search-wrap {height: 100vh;}
	#top-search .btn-close, #top-search .btn-close .ico-close18::before {width: 40px; height: 40px;}
}
@media only screen and (max-width: 567px){
	#top-search {padding: 1em 0 2em;}
	#top-search .input-area {flex-direction: column; padding: 0;}
	#top-search .input-area:before {display: none;}
	#top-search .input-area input {border-bottom: 1px solid var(--black); padding: 1.125em 0; font-size: 1.125em;}
	#top-search .input-area a {display: block; padding: .5em 1em;}
	#top-search .btn-close {top: -5.2em; right: .5em;}
}

/* container : main */
.main-container {margin-top: .75em; padding-bottom: 5em;}
/* container : main visual */
#main-visual .mv-title {position: absolute; top: 0; left: 3.375em; z-index: 1; padding: 3em; color: var(--white);}
#main-visual .mv-title h2 {margin: 0; font-size: var(--font-xlg); line-height: var(--lh-32); color: inherit;}
#main-visual .mv-title p {/* padding-top: .5em; */ font-weight: var(--font-bold); font-size: var(--font-xlg); line-height: var(--lh-32);}
#main-visual .btn-d {display: inline-flex; align-items: center; gap: var(--gap-2x); padding-inline: 3em; margin-top: 3em; line-height: 6em; color: var(--black); background-color: #00ff00; font-weight: var(--font-bold) !important;}
#main-visual .btn-d .ico-arrow {animation: var(--btn-animation);}
#main-visual .mv-video {width: 100%; /* height: 41.625em; */ aspect-ratio: 16 / 9; border-radius: var(--basic-round); position: relative; overflow: hidden;}
#main-visual .mv-video video {width: 101%; height: 101%; position: absolute; top: 50%; left: 50%; object-fit: cover; transform: var(--xy-center);}
#main-visual .btn-d.mob-btn {display: none;}

@media only screen and (max-width: 1366px){
	#main-visual .mv-title {padding: 2.25em; left: 2.25em;}
}
@media only screen and (max-width: 1024px){
	.main-container {margin-top: 0;}
	#main-visual .mv-title {padding: 2em; left: 2em;}
	#main-visual .mv-title h2, #main-visual .mv-title p {line-height: var(--lh-26);}
	#main-visual .mv-title .btn-d {padding-inline: 2em; margin-top: 2em; line-height: 5em;}
}
@media only screen and (max-width: 768px){
	.main-container {padding-bottom: 0;}
	#main-visual .mv-title {padding: 1em; left: 1em;}
	#main-visual .mv-title h2, #main-visual .mv-title p {line-height: var(--lh-24);}
}
@media only screen and (max-width: 567px){
	#main-visual .d_width {display: flex; flex-direction: column;}
	#main-visual .mv-title {position: static; color: var(--black); padding: 0;}
	#main-visual .mv-title h2, #main-visual .mv-title p {font-weight: var(--font-semibold); font-size: 1rem; line-height: 22px;}
	#main-visual .mv-title .btn-d {display: none;}
	#main-visual .mv-video {margin: 12px 0 6px;}
	#main-visual .btn-d.mob-btn {display: flex; justify-content: space-between; padding-inline: 2em; margin-top: 0; font-size: 1rem; line-height: 4rem;}
}
@media only screen and (max-width: 360px){
	#main-visual .mv-title p br {display: none;}
}

/* container : main contents */
#mc-cont1 {margin-top: .75em;}
#mc-cont1 > .row {gap: var(--gap-3x);}
#mc-cont1 .col_d2 {flex: 1; background-color: var(--lgray2); border-radius: var(--basic-round); overflow: hidden; position: relative;}
#mc-cont1 .col_d2 a {display: block; width: 100%; height: 100%;}
#mc-cont1 .col_d2 .mc-title {padding: 3.375em 1.5em;}
#mc-cont1 .col_d2 .more-btn {position: absolute; top: 1.5rem; right: 1.5rem;}
#mc-cont1 .col_d2 a:hover .more-btn {background-color: var(--black);}
#mc-cont1 .col_d2 a:hover .more-btn .ico-arrow:before {background-color: var(--white);}
#mc-cont1 .col_d2 .thumb {width: 100%; height: 18em;}
#mc-cont1 .col_d2 .thumb img {top: 100%; transform: translate(-50%, -100%);}

@media only screen and (max-width: 1024px){
	#mc-cont1 .col_d2 .more-btn {}
	#mc-cont1 .col_d2 .mc-title {padding: 2.8em 1.5em;}
	#mc-cont1 .col_d2 .thumb {height: 14em;}
}
@media only screen and (max-width: 768px){
	#mc-cont1 {margin-top: 6px;}
	#mc-cont1 .col_d2 {width: 100%;}
	#mc-cont1 .col_d2 .mc-title {padding: 2.4em 1em;}
	#mc-cont1 .col_d2 .more-btn {top: 1.25rem; right: 1rem;}
}
@media only screen and (max-width: 567px){
	#mc-cont1 > .row {flex-direction: column;}
	#mc-cont1 .col_d2 .mc-title {padding: 1.5em 1em;}
	#mc-cont1 .col_d2 .thumb {height: 12em;}
	#mc-cont1 .col_d2 .more-btn {display: none;}
}

/* container : main notice */
#mc-cont2 {margin-top: 2.5em;}
#mc-cont2 .d_width > h3 {font-size: var(--font-xlg); line-height: var(--lh-1); margin-bottom: 1em;}
#mc-cont2 .mnotice-list {width: 100%;}
#mc-cont2 .mnotice-list > li {width: inherit; margin-bottom: var(--gap-accordion); background-color: var(--lgray1); border-radius: var(--round-sm);}
#mc-cont2 .mnotice-list .noti-hd {display: flex; align-items: center; gap: var(--gap-3x); padding: 6px 1.5em; position: relative;}
#mc-cont2 .mnotice-list .noti-hd:hover{background-color:var(--lgray2);}
#mc-cont2 .mnotice-list li.on .noti-hd:hover{background-color:var(--lgray1);}
#mc-cont2 .mnotice-list .noti-hd .tit {display: block; font-size: var(--font-lg); line-height: var(--lh-26);}
#mc-cont2 .mnotice-list .noti-hd .date {font-size: var(--font-base); color: var(--dgray2);}
#mc-cont2 .mnotice-list .noti-hd [class^="ico-"] {position: absolute; top: 50%; right: 1.5em; transform: translateY(-50%);}
#mc-cont2 .mnotice-list .noti-cont {padding: 6px 14em 1.5em 1.5em; display: none;}
#mc-cont2 .mnotice-list li.on .noti-hd .tit {font-weight:var(--font-bold);}

@media only screen and (max-width: 1024px){
	#mc-cont2 {margin-top: 2em;}
	#mc-cont2 .d_width > h3 {margin-bottom: .75em;}
	#mc-cont2 .mnotice-list .noti-cont {padding-right: 1.5em;}
}
@media only screen and (max-width: 768px){
	#mc-cont2 .mnotice-list .noti-hd {flex-direction: column; align-items: flex-start; gap: 0; padding-inline: 1.25em 4em}
	#mc-cont2 .mnotice-list .noti-hd [class^="ico-"] {right: .75em;}
	#mc-cont2 .mnotice-list .noti-hd .tit {line-height: var(--lh-20);}
	#mc-cont2 .mnotice-list .noti-hd .date {line-height: var(--lh-18);}
}

/* footer */
#footer {margin-top: 10em; background-color: var(--brown);}
#footer .d_width {padding-top: 2.5em;}
#footer .f-logo {order: 2; width: 100%; padding-block: 2.5em;}
#footer .f-logo img {width: 11.25em;}
#footer .f-cont {order: 1; width: 100%; padding-bottom: 14.28em; color: var(--gray); font-size: var(--font-sm); line-height: var(--lh-18); letter-spacing: -0.015em;}
#footer [class^="footer-info"] em {display: block; padding: 6px 0; font-weight: 700; color: var(--gray);}
#footer [class^="footer-info"] span {display: block;}
#footer .footer-info1 {grid-column: span 2;}
#footer .footer-info2 {grid-column: span 4;}
#footer .footer-mn {grid-column: span 3; flex-wrap: nowrap;}
#footer .footer-mn a {display: block; padding: 6px 12px;}
#footer .footer-mn li:nth-child(1) a {padding-left: 0;}
#footer .copy {grid-column: span 3; padding: 6px 0 6px 12px; text-align: right;}

@media only screen and (max-width: 1366px){
	#footer .f-cont.l-grid12 {row-gap: 2em;}
	#footer .footer-info1, #footer .footer-mn {grid-column: span 5;}
	#footer .footer-info2, #footer .copy {grid-column: span 7;}
	#footer .copy {text-align: left; padding-left: 0;}
}
@media only screen and (max-width: 1024px){
	#footer {margin-top: 5em;}
	#footer .f-cont.l-grid12 {padding-bottom: 8em;}
	#footer .footer-info1, #footer .footer-info2, #footer .footer-mn, #footer .copy {grid-column: span 6;}
}
@media only screen and (max-width: 768px){
	#footer {margin-top: 2.5em;}
	#footer .d_width {padding-top: 1.25em;}
	#footer .f-logo img {width: 8.25em;}
	#footer .f-cont.l-grid12 {display: block !important; padding-bottom: 3em;}
	#footer .footer-info1 em {padding-top: 0;}
	#footer .footer-info2 {margin-top: 1em;}
	#footer .footer-mn {margin-top: 2em;}
}

/* play sub main */
.play-sub-main {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-3x); margin-bottom: .75em;}
.play-sub-main a {display: block; width: 100%; height: 100%;}
.play-sub-main .col-span2 {grid-column: span 2;}
.play-sub-main > div {background-color: var(--lgray2); border-radius: var(--basic-round); overflow: hidden; position: relative;}
.play-sub-main .thumb {width: 100%; height: 18em;}

.play-sub-main .sm-thumb .sm-title {padding: 3.375em 1.5em;}
.play-sub-main .sm-thumb .more-btn {position: absolute; top: 1.5rem; right: 1.5rem;}
.play-sub-main .sm-thumb a:hover .more-btn {background-color: var(--black);}
.play-sub-main .sm-thumb a:hover .more-btn .ico-arrow:before {background-color: var(--white);}

.play-sub-main .sm-link .sm-title {padding: 1em 1.5em; height: 9em;}
.play-sub-main .sm-link .sm-title h3 {font-size: 1.25em; line-height: var(--lh-26);}
.play-sub-main .sm-link .link-btn {top: 6.312em; left: 1.5em;}
.play-sub-main .sm-link a:hover .ico-chevron {animation: var(--btn-animation);}

@media only screen and (max-width: 1280px){
	.play-sub-main {grid-template-columns: repeat(2, 1fr);}
	.play-sub-main .col-span2:not(:nth-child(3)) {grid-column: unset;}
}
@media only screen and (max-width: 1024px){
	.play-sub-main .sm-thumb .sm-title {padding: 2.8em 1.5em; height: auto;}
}
@media only screen and (max-width: 768px){
	.play-sub-main .thumb {height: 12em;}
	.play-sub-main .sm-thumb .sm-title {padding: 2.4em 1em;}
	.play-sub-main .sm-thumb .more-btn {top: 1.25rem; right: 1rem;}
	.play-sub-main .sm-link .sm-title {padding-inline: 1em; height: 7.4em;}
	.play-sub-main .sm-link .link-btn {top: 5em; left: 1em;}
}
@media only screen and (max-width: 567px){
	.play-sub-main {grid-template-columns: 1fr;}
	.play-sub-main .col-span2 {grid-column: unset;}
	.play-sub-main .sm-thumb .sm-title {padding-block: 1.5em;}
	.play-sub-main .sm-thumb .more-btn {display: none;}
}

/* sub header */
.sub-head {height: 15em; margin-bottom: .75em;}
/* sub header : sub visual */
#sub-visual {height: inherit; display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--gap-3x);}
#sub-visual .svtit {padding: 1.5em; grid-column: span 4; align-items: center; justify-content: center; border-radius: var(--basic-round);}
#sub-visual .svtit h2 {color: var(--white); line-height: 1.1em;}
#sub-visual .svbg {position:relative; grid-column: span 4; border-radius: var(--basic-round); overflow: hidden;}
#sub-visual .svbg:before {content: ''; width: 100%; height: 100%; position:absolute; right:0; bottom:0; background-repeat:no-repeat; background-position:center; background-size:cover;}
#sub-visual.sub-tit1 .svtit {background-color: var(--blue1);}
#sub-visual.sub-tit1 .svbg:before {background-image:url(../img/sv-bg01.png);}
#sub-visual.sub-tit2 .svtit {background-color: var(--blue2);}
#sub-visual.sub-tit2 .svbg:before {background-image:url(../img/sv-bg02.png);}
#sub-visual.sub-tit3 .svtit {background-color: var(--green2);}
#sub-visual.sub-tit3 .svbg:before {background-image:url(../img/sv-bg03.png);}
#sub-visual.sub-tit4 .svtit {background-color: var(--yellow2);}
#sub-visual.sub-tit4 .svbg:before {background-image:url(../img/sv-bg04.png);}
#sub-visual.sub-tit5 .svtit {background-color: var(--org2);}
#sub-visual.sub-tit5 .svbg:before {background-image:url(../img/sv-bg05.png);} 
#sub-visual.sub-tit6 .svtit {background-color: var(--pink2);}
#sub-visual.sub-tit7 .svtit {background-color: var(--violet);}
#sub-visual.sub-tit6 .svbg:before {background-image:url(../img/sv-bg06.gif); background-size: contain; background-color: var(--dgray0);}
#sub-visual.sub-tit7 .svbg:before {background-image:url(../img/sv-bg07.gif); background-size: contain; background-color: var(--dgray0);}

/* sub header : content */
.sh-cont {width: 100%; height: auto; border-radius: var(--basic-round); background-color: var(--lgray3);}
.sub-filter {padding: 1.5em; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--gap-accordion);}
.sub-filter .select-wrap {width: 100%; max-width: 340px;}
.sub-filter .select-wrap select {width: inherit;}

.sub-filter .input-area {width: 100%; max-width: 340px; padding-inline: 1.5em; background-color: var(--white); border-radius: var(--round-lg); position: relative;}
.sub-filter .input-area .form-control {width: calc(100% - 1.5em); height: 3em; padding: 0; border: 0; border-radius: 0; color: var(--black);}
.sub-filter .input-area .form-control::placeholder {opacity:1; color: var(--dgray2);}
.sub-filter .input-area .form-control:focus {box-shadow: none;}
.sub-filter .input-area .ico-sch {position: absolute; top: 50%; right: 1em; transform: translateY(-50%); display: grid; place-items: center;}

.sub-link a {width: 100%; height: 100%; padding: 1.5em; display: flex; justify-content: space-between; align-items: center;}
.sub-link a .txt {font-weight: var(--font-semibold); font-size: var(--font-xlg); line-height: 1.1667em;}
.sub-link a:hover .more-btn, 
.sub-link a:focus .more-btn {background-color: var(--black);}
.sub-link a:hover .more-btn .ico-arrow::before, 
.sub-link a:focus .more-btn .ico-arrow::before {background-color: var(--white);}

@media only screen and (max-width: 1280px){
	.sub-link a {align-items: flex-start; position: relative;}
	.sub-link a .more-btn {position: absolute; bottom: 1.5rem; right: 1.5rem;}
}
@media only screen and (max-width: 1024px){
	.sub-head {height: auto;}
	.type-filter #sub-visual, .type-link :is(.svbg, .sub-link), .type-link #sub-visual {height: 12em;}
	
	.type-filter {height: auto;}
	.type-filter .co-8, .type-filter .col-4 {grid-column: span 12 !important;}
	.type-filter #sub-visual {grid-column: span 12 !important;}
	
	.type-thumb,
	.type-thumb #sub-visual {height: auto;}
	.type-thumb .svtit {padding: .85em !important; grid-column: span 12 !important;}
	.type-thumb .svbg {grid-column: span 12 !important; height: 12em;}
	
	.sub-filter {padding: 1.25em;}
	.sub-link a {align-items: center;}
	.sub-link a .more-btn {position: static;}
}
@media only screen and (max-width: 768px){
	.sub-head {margin-bottom: 6px;}
	#sub-visual .svtit, #sub-visual .svbg, .sh-cont {border-radius: 8px;}
	.type-filter #sub-visual, .type-link :is(.svbg, .sub-link), .type-thumb .svbg {height: 8.5em;}
	
	.type-link, .type-link #sub-visual {height: auto;}
	.type-link {grid-template-columns: repeat(2, 1fr) !important;}
	.type-link #sub-visual {display: contents;}
	.type-link .svtit {grid-column: 1 / -1 !important; padding: .85em !important;}
	.type-link :is(.svbg, .sub-link) {grid-column: span 1 !important;}
	
	.sub-filter .input-area .form-control {height: 40px;}
}
@media only screen and (max-width: 567px){
	.sub-filter {padding: 1em;}
	.sub-filter .select-wrap, .sub-filter .input-area {max-width: 100%;}
	.sub-filter .input-area {padding-inline: 1em;}
	.sub-filter .input-area .ico-sch {right: .75em;}
	.sub-link a {padding: 1em; align-items: center; text-align: center; justify-content: center;}
	.sub-link a .txt {font-size: var(--font-lg);}
	.sub-link a .more-btn {display: none;}
}
/* sub container */
.sub-container {margin-top: .75em !important; padding-bottom: 5em;}
#sub-content {align-items: start; min-height: 40em;}
#sub-content.html-cont .c_width {font-size: var(--font-base);}

/* sub container : sub navigation */
#snb {width: 100%; position: sticky; top: .75em;}

@media only screen and (max-width: 1024px){
	.sub-container {margin-top: 0 !important;}
}
@media only screen and (max-width: 768px){
	.sub-container {padding-bottom: 0;}
	#sub-content {gap: 0; min-height: auto;}
	#sub-content .col-4, #sub-content .col-8 {grid-column: span 12 !important;}
	#snb {top: 79px; z-index: 2; padding-bottom: 6px; background-color: var(--white9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);}
	#contentArea {min-height: 30em;}
}
@media only screen and (max-width: 567px){
}

/* explore bx */
.explore-bx ul a {display:flex; justify-content:space-between; align-items: center;}
.explore-bx > ul {}
.explore-bx > ul > li {margin-bottom: var(--gap-accordion); border-radius: var(--round-sm); overflow: hidden;}
.explore-bx > ul > li > .item-btn {width: 100%; padding: 6px 1.33em; line-height: var(--lh-26); font-size: var(--font-lg); color: var(--black); background-color: var(--lgray1); position: relative; text-align: left; outline: none;}
.explore-bx > ul > li .item-btn [class^="ico-"] {position: absolute; top: 50%; right: 1.11em; transform: translateY(-50%);}
.explore-bx > ul > li .item-btn:hover {background-color: var(--lgray2);}
.explore-bx > ul > li.on .item-btn {font-weight: var(--font-bold); background-color: var(--lgray2);}
.explore-bx > ul .list {background-color: var(--lgray2); padding-bottom: .75em;}
.explore-bx > ul .list li > a {padding: 4px 1.5em;}
.explore-bx > ul .list li > a:hover,
.explore-bx > ul .list li > a.active {font-weight: var(--font-semibold);}

/* mobile : play filter */
.mob-play-filter {display: none; align-items: flex-start; gap: var(--gap-accordion);}
.mob-play-filter .sel-tit {width: 100%; padding: 6px 1em; position: relative; text-align: left; outline: none; line-height: 28px; background-color: var(--lgray1); border-radius: var(--round-sm);}

.mob-play-filter .sel-bx {flex: 1; margin-top: 6px; background-color: var(--lgray1); border-radius: var(--round-sm); position: relative;}
.mob-play-filter .sel-bx .sel-tit [class^="ico-"] {position: absolute; top: 50%; right: .8em; transform: translateY(-50%); transition: transform .3s linear;}
.mob-play-filter .sel-bx .list {display: none; width: 100%; position: absolute; top: 40px; left:0; z-index: 10; background-color: var(--lgray2); border-radius: 0 0 var(--round-sm) var(--round-sm);}
.mob-play-filter .sel-bx .list li a {display: block; padding: 4px 1em;}
.mob-play-filter .sel-bx.open {background-color: var(--lgray2); border-radius: var(--round-sm) var(--round-sm) 0 0;}
/* on */
.mob-play-filter .sel-tit.on {background-color: var(--lgray2);}
.mob-play-filter .sel-tit.on,
.mob-play-filter .sel-bx .list .active {font-weight: var(--font-bold);}
.mob-play-filter .sel-bx .sel-tit.on [class^="ico-"] {transform: rotate(-180deg) translateY(50%);}
.mob-play-filter .sel-bx .list li a:hover {background-color: var(--lgray3);}

@media only screen and (max-width: 1024px){
	.explore-bx > ul > li > .item-btn {padding-inline: 1em; line-height: 28px;}
	.explore-bx > ul > li .item-btn [class^="ico-"] {right: .75em;}
}
@media only screen and (max-width: 768px){
	.explore-bx {display: none;}
	.mob-play-filter {display: flex;}
}

/* sub : play : guide */
.age-dev .chk-wrap {padding-block: .75em 1.5em;}
.age-dev .chk-wrap ul {display: grid; grid-template-columns: 300px 1fr; column-gap: var(--gap-3x);}
.age-dev .chk-wrap ul li {padding: 6px 0; min-height: 2.25em;}
.age-dev .chk-wrap ul li.grid-col2 {grid-column: span 2;}
.counsel-link .row {margin-top: 1.5em; gap: var(--gap-3x);}

/* accordion */
.acc-list {}
.acc-list .cate {padding: 0 6px; font-weight: var(--font-normal); font-size: var(--font-base); color: var(--dgray2);}
.acc-list > li:not(:nth-child(1)) {margin-top: var(--gap-accordion);}
.acc-list > li {border-radius: var(--round-sm); overflow: hidden;}
.acc-list .acc-tit {display: flex; align-items: center; gap: var(--gap-base); font-size: var(--font-lg); line-height: var(--lh-26); padding: 6px 1.33em; background-color: var(--lgray1); transition: background-color .3s linear; position: relative;}
.acc-list .acc-tit [class^="ico-"] {position: absolute; top: 50%; right: 1.11em; transform: translateY(-50%);}
.acc-list .acc-tit:hover {background-color: var(--lgray2);}
.acc-list .acc-cont {padding: .75em 1.5em 1.5em 1.5em; background-color: var(--lgray1);}
.acc-list .acc-cont .cont {margin-top: .75em;}
.acc-list .acc-cont .cont dt:nth-child(+n) {margin-top: .75em;}
.acc-list .acc-cont .cont dd {margin-top: 4px;}
.acc-list .acc-cont .btn-d {background: var(--dgray1);}
.acc-list .type-thumb, .acc-list .type-video {padding: .75em 1.5em 1.5em 1.5em;}
/* on */
.acc-list li.on .acc-tit:hover {background-color: var(--lgray1);}
.acc-list li.on .acc-tit {font-weight: var(--font-bold);}

@media only screen and (max-width: 1024px){
	.acc-list .acc-tit {padding-inline: 1em; line-height: 28px;}
	.acc-list .acc-tit [class^="ico-"] {right: .75em;}
	.acc-list .acc-cont {padding: .5em 1em 1em 1em;}
}
@media only screen and (max-width: 768px){
	.acc-list .acc-cont{padding-top:.25em;}
}
@media only screen and (max-width: 567px){
	.acc-list .cate {padding: 0; font-size: var(--font-sm);}
	.acc-list .acc-tit {font-size:var(--font-base);line-height: var(--lh-20); padding-block:10px;}
}

/* accordion : contents */
.acc-list .acc-cont .tit {font-weight:var(--font-semibold);}
.acc-list .acc-cont .thumb-list {padding-left: 5px;}
.acc-list .acc-cont .local-info .link-btn {position: static; margin-top: .75em;}
.acc-list .acc-cont .thumb-list {margin-top: .75em; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-3x);}
.acc-list .acc-cont .thumb-list .img {height: auto !important; margin-bottom: .75em; border-radius: var(--round-sm); overflow: hidden; text-align: center;}
.acc-list .acc-cont .thumb-list .img img {width: 100%; max-height: 208px;}
.acc-list .acc-cont .thumb-list .img video {height: auto !important; max-height: 730px;}
.acc-list .acc-cont .thumb-list .des {}
.acc-list .acc-cont .quote-src {padding-top:0; padding-bottom: 0.857em;}
.acc-list .acc-cont .num-list:last-child,
.acc-list .acc-cont .quote-src:last-child {padding-bottom: 0;}

/* play guide : accodiun contents : age info */
.age-info .tit, .age-info .txt, .age-info .num-list {padding-bottom: 12px;}

/* play guide : accodiun contents : age profile */
.age-profile .area:nth-child(2) {margin-top: 12px;}
.age-profile .area:not(:last-child) {margin-bottom: 12px;}
.age-profile .num-list {margin-top: 4px;}

/* play guide : accodiun contents type : thumb col2 */
.type-thumb ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5em .75em;}
.type-thumb ul .thumb {width: 100%; height:208px; margin-bottom: 12px; border-radius: var(--round-sm);}

/* play guide : accodiun contents type : video col2 */
.type-video {display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5em .75em;}
.type-video .video-wrap {width: 100%;}
.type-video .vod-iframe {border-radius: var(--round-sm); margin-bottom: .75em;}
.type-video .video-wrap.vd-shorts {max-width: 412px;}
.type-video .vd-shorts .vod-iframe {padding-bottom: 179%;}
.type-video .vd-shorts .vod-iframe video {width: 412px; height:732px;}

@media only screen and (max-width: 1280px){
	.age-dev .chk-wrap ul {grid-template-columns: 1fr;}
	.age-dev .chk-wrap ul li.grid-col2 {grid-column: span 1;}
	.acc-list .acc-cont br {display: none;}
	.acc-list .acc-cont br.mo-show {display: block;}
}
@media only screen and (max-width: 567px){
	.acc-list .acc-tit {padding-right: 3em;}
	.acc-list .acc-cont .thumb-list,
	.type-thumb ul {grid-template-columns: 1fr;}
	.acc-list .acc-cont .thumb-list .img img {max-height: 100%;}
	.acc-list .acc-cont .thumb-list .img video {max-height: 100%;}
}

/* support : search */
.local-select {padding: 1.5em; margin-bottom: 2.5em; background-color: var(--lgray2); border-radius: var(--basic-round); display: flex; align-items: center; justify-content: space-between;}
.local-select .h5 {letter-spacing: -0.015em;}
.local-select .select-wrap {display: flex; align-items: center; gap: var(--gap-3x);}
.local-select .select-wrap .form-control {min-width: 282px;}
.local-select .select-wrap .btn-d {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 3em; height: 3em;}
.local-select .select-wrap .btn-d:hover .ico-local::before {background-color: var(--white);}

/* support : list */
.local-list {margin-bottom: 2.5em; position: relative;}
.local-list h4 {margin: 0 0 1em;}
.local-list .tab-txt {position: absolute; top: 0; right: 0;}
.local-list .tab-txt a {line-height: 1.5em; padding: 0 6px; margin-left:0;}
.local-list .tab-txt a:first-child {padding-left: 0;}
.local-list .tab-txt a:last-child {padding-right: 0;}

.local-list .inner .faq-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-accordion) var(--gap-3x); align-items: start;}
.local-list .inner .faq-grid ul {display: flex; flex-direction: column; gap: var(--gap-accordion);}
.local-list .inner .faq-grid > ul > li:not(:nth-child(1)) {margin-top: 0;}
.local-list .inner .acc-list .acc-cont {padding: 6px 4.5em .75em 1.5em;}
.local-list .inner .local-info {line-height: 1.25;}
.local-list .inner .local-info p:not(:nth-child(1)) {margin-top: 4px;}

@media only screen and (max-width: 1024px){
	.local-select {padding: 1.25em; margin-bottom: 1.65em; flex-direction: column; align-items: flex-start; gap: var(--gap-3x);}
	.local-list h4 {margin-bottom: .5em;}
	.local-list .tab-txt {position: static; margin-bottom: .5em; display: flex; flex-wrap: nowrap; overflow-x: auto;}
	.local-list .tab-txt a {flex-shrink: 0; padding: 0 1em !important; margin-right: var(--gap-2x); height: 40px; line-height: 40px; text-align: center; background-color: var(--lgray2); border-radius: var(--round-lg);}
	.local-list .tab-txt a:hover {background-color: var(--black); color: var(--white);}
	.local-list .inner .faq-grid {grid-template-columns: 1fr;}
	.local-list .inner .acc-list .acc-cont {padding: 4px 1em .5em 1em;}
}
@media only screen and (max-width: 768px){
	.local-select, .local-list {margin-bottom: 1.5em;}
	.local-select .select-wrap {width: 100%;}
	.local-select .select-wrap .form-control {width: 100%; min-width: auto;}
	.local-select .select-wrap .btn-d {width: 40px; height: 40px;}
}
@media only screen and (max-width: 567px){
	.local-select {padding: 1em;}
	.local-select .select-wrap {flex-wrap: wrap; gap: var(--gap-2x);}
	.local-select .select-wrap #selectZone {width: calc(100% - 44px);}
	.local-list .inner .acc-list .acc-tit {flex-direction: column; align-items: flex-start; gap: 0;}
}

/* support : login : map */
#local-map-wrap {margin-bottom: 2.5em; border-radius: var(--basic-round); position: relative; overflow: hidden;}
#mnb {width: 309px; height: 100%; padding: 1.5em; position: absolute; top: 0; left: 0; z-index: 9;}
#mnb .select-wrap {display: flex; flex-direction: column; gap: var(--gap-accordion); margin-bottom: 2em;}
#mnb .select-wrap .form-control {width: 100%;}
/* support : login : map icon */
[class*="map-mark-"] {position:relative; transition:all .2s;}
[class*="map-mark-"]:before {content:"";display:block;width:24px;height:24px;background-position:center;background-repeat:no-repeat;background-size:24px;transition:all .2s;}
.map-mark-medi:before {background-image:url("../img/icon/sd-map-medi.svg");}
.map-mark-vou:before {background-image:url("../img/icon/sd-map-vou.svg");}
.map-mark-edu:before {background-image:url("../img/icon/sd-map-edu.svg");}
.map-mark-org:before {background-image:url("../img/icon/sd-map-org.svg");}
.map-mark-fav:before {background-image:url("../img/icon/sd-favorite.svg");}
/* support : login : map category */
:is(#mnb, #mob-mnb) .cate-bx {display: flex; flex-direction: column; gap: var(--gap-accordion); --map-medi-color: var(--pink1); --map-vou-color:  var(--blue3); --map-edu-color:  var(--yellow1); --map-org-color:  var(--green1); --map-fav-color:  var(--black)}
:is(#mnb, #mob-mnb) .cate-bx [class*="map-mark-"] {display: flex; align-items: center; gap: var(--gap-base); height: 3em; padding-left: 1.25em; background-color: var(--white); border-radius: var(--round-lg);}
:is(#mnb, #mob-mnb) .cate-bx .badge.num {width: 4em; height: 2.25em; padding: .625em; font-weight: var(--font-semibold); font-size: var(--font-base); color: var(--black); background-color: var(--lgray2); border-color: var(--lgray2); position: absolute; top: 50%; right: 6px; transform: translateY(-50%);}
:is(#mnb, #mob-mnb) .cate-bx li.active .badge.num {font-weight: var(--font-bold);}
:is(#mnb, #mob-mnb) .cate-bx li.active .map-mark-medi .badge.num {background-color:var(--map-medi-color); border-color:var(--map-medi-color);}
:is(#mnb, #mob-mnb) .cate-bx li.active .map-mark-vou .badge.num {background-color:var(--map-vou-color); border-color: var(--map-vou-color);}
:is(#mnb, #mob-mnb) .cate-bx li.active .map-mark-edu .badge.num {background-color:var(--map-edu-color); border-color: var(--map-edu-color);}
:is(#mnb, #mob-mnb) .cate-bx li.active .map-mark-org .badge.num {background-color:var(--map-org-color); border-color: var(--map-org-color);}
:is(#mnb, #mob-mnb) .cate-bx li.active .map-mark-fav .badge.num {background-color:var(--map-fav-color); border-color: var(--map-fav-color); color: var(--white);}

/* support : login : map mobile cate */
#mob-mnb {display: none; margin-top: 6px;}
#mob-mnb .cate-bx {display: grid; grid-template-columns: repeat(2, 1fr);}
#mob-mnb .cate-bx [class*="map-mark-"] {background-color: var(--lgray2); height: 40px; padding-left: .5em;}
#mob-mnb .cate-bx .badge.num {background-color: var(--white); width: 3em; height: auto; padding: .5em .25em;}

@media only screen and (max-width: 1366px){
	#mnb {width: 256px;}
}
@media only screen and (max-width: 1024px){
	#local-map-wrap {border-radius: 0;}
	#mnb {width: 100%; height: auto; padding: 0; margin-bottom: .75em; position: static; /* background-color: var(--lgray1); border-radius: var(--basic-round); */}
	#mnb .select-wrap {flex-direction: row; margin-bottom: var(--gap-accordion);}
	#mnb .select-wrap .form-control {background-color: var(--lgray2);}
	#mnb .cate-bx {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-accordion);}
	#mnb .cate-bx [class*="map-mark-"] {background-color: var(--lgray2);}
	#mnb .cate-bx .badge.num {background-color: var(--white);}
}
@media only screen and (max-width: 768px){
	#mnb {margin-bottom: 6px;}
	#mnb .select-wrap .form-control {padding-inline: .75em 2em;}
	#mnb .cate-bx {display: none;}
	#mob-mnb {display: block;}
}
@media only screen and (max-width: 320px){
	#mnb .select-wrap .form-control {font-size: 13px; background-position: center right .5em;}
	#mob-mnb .cate-bx .badge.num {font-size: 12px;}
}

/* support : login : map control */
#mapDetail {height: 666px; position: relative; border-radius: var(--basic-round); overflow: hidden;}
#mapDetail .map-ctrl {position: absolute; top: 1.5em; right: 1.5em;}
#mapDetail .map-ctrl a {display: block; text-align: center; width: 3em; height: 3em; line-height: 3em; background-color: var(--white);}
#mapDetail .map-ctrl a:not(:nth-child(1)) {margin-top: 8px;}
#mapDetail .map-ctrl img {width: var(--wid24); margin-top: -4px;}
#mapDetail .map-ctrl a:hover {background-color: var(--black);}
#mapDetail .map-ctrl a:hover img {filter: invert(1);}

/* support : login : map marker */
#map_marker_area {width: max-content; position: absolute; padding: .75em; background-color: var(--white); border-radius: var(--round-lg);}
#map_marker_area .map-detail {display: flex; align-items: center;}
#map_marker_area .map-detail a {display: block;}
#map_marker_area .map-detail .subject {padding: 0 4px; color: var(--black);}
#map_marker_area .map-detail .ico-favorite.active::before {-webkit-mask-image: url("../img/icon/sd-favorite.svg"); mask-image: url("../img/icon/sd-favorite.svg");}

@media only screen and (max-width: 1024px){
	#mapDetail {height: 480px; border-radius: var(--basic-round); overflow: hidden;}
	#mapDetail .map-ctrl {top: 1.25em; right: 1.25em;}
}
@media only screen and (max-width: 768px){
	#mapDetail {height: 400px;}
	#mapDetail .map-ctrl {top: 1em; right: 1em;}
	#mapDetail .map-ctrl a {width: 40px; height: 40px; line-height: 40px;}
}

/* support : contents */
#support-tab {margin-bottom: 1.5em;}
.sup-sec {margin-bottom: 2.5em; justify-content: space-between; border-top: 1px solid var(--basic-border);}
.sup-sec .l-grid12 {width: 100%;}
.sup-sec .col-8 {grid-column: 5 / span 8 !important;}
.supsec-more {padding-left: 1.5em; margin-block: 1.5em .375em; text-align: left; display: inline-flex; align-items: center; gap: var(--gap-base); width: 100%; height: 3em; line-height: 3em; border: 0; color: var(--black); background: transparent; border-radius: 0; position: relative; outline: none;}
.supsec-more:hover .ico-plus14 {transform: rotate(-90deg); transition: transform .5s ease;}
.sup-sec .supsec-cate {width: 100%; padding-block: 4px .75em; font-weight: var(--font-semibold);}
.sup-sec .supsec-title {padding-right: 3.44em; font-size: var(--font-lg); line-height:var(--lh-26);}
.sup-sec .supsec-cont .acc-list .acc-cont {padding-block: .375em .75em;}
.supsec-detail {width: 100%; padding-top: 2.5em;}
.supsec-detail > div > .tit {font-weight: var(--font-bold); margin-bottom: .275em;}
.supsec-detail > div > .cont {margin: .375em 0 .75em;}
.supsec-detail > div > .cont .link-btn {position: static; display: inline-flex;}
.support-process {background: var(--lgray1);padding:1.5em;border-radius: var(--basic-round);text-align:center; word-break:keep-all; white-space: normal !important;}
.support-process h4{margin:0;}
.support-process p { padding: .625em 1.25em;}
.support-process > ul > li { display:flex; align-items:stretch; margin-bottom: 1.5em; }
.support-process > ul > li:last-child { margin-bottom:0; }
.support-process > ul > li > .col-l { width:20%; }
.support-process .tit_bx { position:relative; display:flex; align-items:center; justify-content:center; height:100%; background:#fff; border: 1px solid var(--basic-border); }
.support-process .num { position:absolute; top:0; left:50%; width:1.5em; height:1.5em; transform:translate(-50%,-50%); border-radius:50%; background:var(--black); font-size: var(font-base);color:#fff; display:flex; align-items:center; justify-content:center; }
.support-process .tit { padding-top:1.25em;}
.support-process > ul > li > .col-r { position:relative; width:80%; padding-left:1.25em; }
.support-process .txt_bx { position:relative; }
.support-process .txt_bx p { position:relative; z-index:1; min-height:3.75em; display:flex; align-items:center; justify-content:center; }
.support-process .txt_bx:after { content:"\2193"; position:absolute; left:50%; transform:translateX(-50%); width:1.5em; height:1.875em; color:var(--black); display:flex; align-items:center; justify-content:center; }
.support-process > ul > li:last-child .txt_bx:after { display:none; }
.support-process .txt_bx.long:after { height:200%; }
.support-process .txt { background:#fff; border-radius: 6px; }
.support-process .desc { border-bottom:1px dashed var(--dgray2); }
.support-process .d2 { display:flex; justify-content:space-between; align-items:flex-start; }
.support-process .d2 > div { width:calc(50% - 5px); }
.support-process .d2 .txt_bx { height:auto; }
.support-process .two > div.txt_bx { height:auto; }
.support-process .two > div:nth-of-type(1) { margin-bottom: 1.5em; }

.support-process.ver2 {}
.support-process.ver2 .txt_bx > * { padding: .625em 1.25em; background:#fff; border-radius: 6px; text-align: left;}
.support-process.ver2 .d2 .bu li { width:100%; }
.support-process.ver2 .d2 .txt_bx, .support-process.ver2 .d2 .txt_bx > div { height:100%; }
.support-process.ver2 .d2 .txt_bx .desc { padding: 0; margin:10px 0; text-align: center;}

.info-card-list{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-3x); margin-top: 1.25em;}
.info-card-list > li{padding: .75em; background: var(--lgray1); border-radius: var(--round-sm);}

.info-card-list .tit{font-weight:700;padding-bottom:.75em;text-align:center;}
.info-card-list .txt:not(.bu){text-align:center;}

@media only screen and (max-width: 1366px) {
	.sup-sec .supsec-title .ws-pre {white-space: normal;}
}
@media only screen and (max-width: 1280px) {
	.supsec-detail > div > .cont .txt br {display: none;}
	#support-content01 .table2.table-responsive .table {min-width: 1280px;}
	#support-content01 .table2.table-responsive table * {white-space:nowrap;}
}
@media only screen and (max-width: 1024px){
	.sup-sec .l-grid12 {display: block !important;}
	.sup-sec .col-8 {grid-column: unset !important;}
	.supsec-more {padding-left: 1em; margin-block: 1em 0;}
	.sup-sec .supsec-title {padding-right: 0; margin-bottom: 1.25em;}
	.info-card-list {grid-template-columns: repeat(3, 1fr);}
	#support-content03 .table-responsive > table {margin-top:24px; min-width: 1024px;}
}
@media only screen and (max-width: 768px){
	#support-tab {margin-bottom: 6px;}
	.sup-sec {margin-bottom: 1.5em;}
	.sup-sec .supsec-cate {padding-block: 4px .5em;}
	.sup-sec .supsec-title {margin-bottom: .75em; line-height: var(--lh-20);}
	.supsec-detail {padding-top: 1.5em;}
	#support-content01 .table2.mtp10 {margin-top: 0 !important;}
	#support-content01 :is(.table1, .table3).table-responsive > table {margin-top: 24px;}
	#support-content01 :is(.table1, .table3).table-responsive table * {white-space:nowrap;}
	#support-content01 :is(.table1, .table3) table {min-width: 768px;}
	.support-process > ul > li {flex-direction: column; margin-bottom: 40px;}
	.support-process > ul > li > .col-l, .support-process > ul > li > .col-r {width: 100%;}
	.support-process > ul > li > .col-r {margin-top: .75em; padding-left: 0;}
	.support-process.ver2 .d2 {flex-direction: column; gap: var(--gap-accordion);}
	.support-process.ver2 .d2 > div {width: 100%;}
	.info-card-list {grid-template-columns: repeat(2, 1fr); margin-top: .75em;}
}
@media only screen and (max-width: 567px){
	#support-tab {margin-bottom: 6px; gap: var(--gap-2x);}
	#support-content02 .table-responsive > table {margin-top:24px; min-width: 600px;}
	#support-content02 .table-responsive table * {white-space:nowrap;}
	.info-card-list {grid-template-columns: 1fr;}
}

/* introduce */
.page-head {padding-block: 2.22em; font-size: var(--font-lg); line-height: var(--lh-26);}
.page-head .txt {font-weight: var(--font-semibold);}
.page-head .tit {margin: .375em 0 .75em; font-weight: var(--font-bold);}
.page-body {padding-top: 4.875em;}
.page-body .desc {padding-bottom: 2.5em;}
.page-body .desc p {font-size: var(--font-lg); line-height: var(--lh-26);}

#ksied-intro :is(.ksied-service, .ksied-family) .list {margin-top: .75em; display: grid; gap: var(--gap-3x);}
#ksied-intro .ksied-service {padding-bottom: 2.5em;}
#ksied-intro .ksied-service .list {grid-template-columns: repeat(2, 1fr);}
#ksied-intro .ksied-service .list li, 
#ksied-intro .ksied-family .list li.no-data {padding: 1.5em; background-color: var(--lgray1); border-radius: var(--round-sm);}
#ksied-intro .ksied-service .list li .tit {display: block; padding-bottom: 6px; font-weight: var(--font-semibold); font-size: var(--font-lg); line-height: var(--lh-26);}
#ksied-intro .ksied-family {padding-bottom: 5em;}
#ksied-intro .ksied-family .list {grid-template-columns: repeat(4, 1fr); gap: var(--gap-6x) var(--gap-2x);}
#ksied-intro .ksied-family .list a {/* display: flex; align-items: center; height: 48px; */ overflow: hidden; position: relative; display: block; max-width: 212px; aspect-ratio: 212 / 48;}
#ksied-intro .ksied-family .list a img {position: absolute; top: 0; left: 0; width: 100%; height: 200%; transition: top .2s ease;}
#ksied-intro .ksied-family .list a:hover img {top: -100%;}
#ksied-intro .ksied-family .list li.no-data .thumb {height: 2.5em;}

#ksied-tool div[class^="tool"] .h5 {margin-bottom: .75em;}
#ksied-tool .tool-feat .hl-bx {margin-bottom: .0em; }
#ksied-tool .tool-feat .num-list li {padding: .375em 0;}
#ksied-tool .tool-other {padding-block: 2.5em 5em;}
#ksied-tool .tool-other .acc-list .acc-cont {padding: .375em 1.5em .75em 1.5em;}
#ksied-tool .tool-other .acc-list .acc-cont .bx {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-3x);}
#ksied-tool .tool-other .acc-list .acc-cont .bx .bu {padding: 0 1.5em;}
#ksied-tool .tool-other .acc-list .acc-cont .link-btn {position: static; margin-top: 1.5em;}

@media only screen and (max-width: 1366px){
	.page-body .ws-pre {white-space: normal;}
	#ksied-intro .ksied-family .list {grid-template-columns: repeat(3, 1fr); column-gap: var(--gap-base);}
	#ksied-intro .ksied-family .list a {max-width: 212px;}
}
@media only screen and (max-width: 1024px){
	.page-head {padding-block: 0; padding-right: 1em;}
	.page-body {padding-top: 0;}
	#ksied-tool .tool-other {padding-block: 2em 0;}
	#ksied-tool .tool-other .acc-list .acc-cont .bx {grid-template-columns: 1fr;}
	#ksied-tool .tool-other .acc-list .acc-cont .bx .bu {padding: 0;}
	#ksied-intro .ksied-family .list a:hover img {top: 0;}
}
@media only screen and (max-width: 768px){
	.page-head .tit {margin: 0 0 .5em; line-height: var(--lh-26);}
	.page-body .desc {padding-bottom: 2em;}
	.page-body .desc p {line-height: var(--lh-22);}
	
	#ksied-intro .ksied-service {padding-bottom: 1.75em;}
	#ksied-intro :is(.ksied-service, .ksied-family) .list {margin-top: .5em;}
	#ksied-intro .ksied-service .list li, 
	#ksied-intro .ksied-family .list li.no-data {padding: 1em;}
	#ksied-intro .ksied-service .list li .tit {line-height: var(--lh-24); padding-bottom: 4px;}
	#ksied-intro .ksied-family {padding-bottom: 0;}
	#ksied-intro .ksied-family .list {grid-template-columns: repeat(2, 1fr);}
	
	#ksied-tool .tool-feat .num-list li {padding: .25em 0;}
}
@media only screen and (max-width: 567px){
	#ksied-intro .ksied-service .list {grid-template-columns: 1fr;}
}

/* board paging */
.board-paging {margin: 1.5em 0 .375em;}
.board-paging a {display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-base); width: 100%; height: 3em; line-height: 3em; border: 0; color: var(--black); background: transparent; border-radius: 0; font-size: var(--font-base);}
.board-paging a:after {content: ''; display: block; width: 100%; height: 1px; background-color: var(--basic-border); position: absolute; bottom: 0; left: 0; z-index: -1;}
.board-paging a:hover .ico-plus14 {transform: rotate(-90deg); transition: transform .5s ease;}

@media only screen and (max-width: 768px){
	.board-paging {margin-top: 1em;}
	.board-paging a {height: 40px; line-height: 40px;}
}

/* seach */
.seach-area{background:var(--lgray1);border-radius:var(--basic-round);padding:3.75em 0;}
.seach-input.sub-filter, .seach-wrap{padding:0; grid-column:3 / 11;gap:var(--gap-3x);align-items:flex-start;}
.seach-input.sub-filter .input-area{max-width:100%;background-color:var(--basic-color);}
.seach-input.sub-filter .input-area .form-control{background-color:var(--basic-color);height:3.5em;}
.keyword-area{align-items:center;padding:0 .375em;margin-bottom:3.75em;}
.keyword-area p{font-size:var(--font-sm);font-weight:var(--font-semibold);margin-right:16px;}
.keyword-area .keyword{display:flex;flex-wrap:wrap;gap:var(--gap-2x);}
.keyword-area .keyword a{font-size:var(--font-sm);background:var(--dgray0);border-radius:32px;padding:8px 12px;}
.seach-wrap {font-size:var(--font-base);}
.seach-wrap .tit-wrap{display:flex;align-items:center;margin-bottom:2.5em;}
.seach-wrap .tit-wrap .thumb{width:5.5em;height:5.5em;margin-right:1.5em;}
.seach-wrap .tit-wrap h2{font-size:var(--font-2xlg);line-height:var(--lh-36);margin:0;}
.seach-list{border-top:1px solid var(--dgray1);margin-top:2.5em;}
.seach-list h3{font-size:var(--font-lg) !important;line-height:var(--lh-26);margin:4px 0 .667em;padding-left:.333em;}
.seach-list ul li{transition:all .3s linear;}
.seach-list ul li:hover{background:var(--lgray2);}
.seach-list a{position:relative;display:grid;grid-template-columns:repeat(8, 1fr);gap:0 var(--gap-3x);padding:.375em 0;}
.seach-list .tit{grid-column:span 4;padding-left:.375em;}
.seach-list .cate{grid-column:span 1;}
.seach-list .detail{grid-column:span 3;}
.seach-list .ico-chevron{position:absolute;top:50%;right:0;transform:translateY(-50%);width:24px;height:24px;text-align:center;}
.seach-list.post .cate{grid-column:span 4;}

@media only screen and (max-width: 1366px){
	.seach-input.sub-filter, .seach-wrap {grid-column: 2 / 12;}
}
@media only screen and (max-width: 1024px){
	.seach-area {display: block !important; padding: 1.5em}
	.seach-input.sub-filter .input-area .form-control {height: 3em;}
	.keyword-area {margin-bottom: 2em;}
	.keyword-area p {margin-bottom: .75em;}
	.seach-wrap .tit-wrap {margin-bottom: 1.5em}
	.seach-wrap .tit-wrap .thumb {width: 4em; height: 4em;}
	.seach-wrap .tit-wrap h2 {font-size:var(--font-xlg) !important;line-height:var(--lh-26) !important;margin:0;}
	.seach-list {margin-top: 1.5em;}
}
@media only screen and (max-width: 768px){
	.seach-area {padding: 1em;}
	.seach-input.sub-filter .input-area .form-control {height: 40px;}
	.seach-wrap .tit-wrap {margin-bottom: 1em;}
	.seach-list {margin-top: 1em;}
	.seach-list h3 {margin-bottom: 2px;}
	.seach-list ul li:not(:last-child) {border-bottom: 1px dotted var(--lgray3);}
	.seach-list a {grid-template-columns:repeat(2, 1fr); padding: 6px; gap: var(--gap-2x);}
	.seach-list .tit {grid-column: span 2; padding-left: 0;}
	.seach-list .cate, .seach-list .detail {grid-column: unset;}
}
@media only screen and (max-width: 568px){
	.seach-list a {display: block; padding-right: 24px;}
	.seach-list .cate, .seach-list .detail {display: block;}
}

/* play guide : accodiun contents type : card news */
.cardnews-list {width: min(100%, 30rem); margin-top: 4px; position: relative; overflow: hidden;}
.cardnews-list .cardnews-item {width: min(100%, 480px); aspect-ratio: 4 / 5; height: auto; margin: 0 auto;}
.cardnews-list .cardnews-item img {border-radius: var(--round-sm);}

.cardnews-list [class^="sd-btn"] {width: 3.5em; height: 3.5em; display: flex; align-items: center; justify-content: center; border-radius: var(--round-xlg); background-color: rgba(17,17,17,.05); position: absolute; top: 50%; z-index: 99; transform: translateY(-50%); cursor: pointer; opacity: 0; transition: opacity 0.3s ease;}
.cardnews-list [class^="sd-btn"]:before {content: ''; display: block; width: 1.5rem; height: 1.5rem; background-color: var(--black); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain;}
.cardnews-list [class^="sd-btn"]:hover {background-color: var(--black);}
.cardnews-list [class^="sd-btn"]:hover:before {background-color: var(--white);}
.cardnews-list:hover [class^="sd-btn"] {opacity: 1;}
.cardnews-list .sd-btn-prev {left: 12px;}
.cardnews-list .sd-btn-prev:before {-webkit-mask-image: url("../img/icon/sd-arrow-short-right.svg"); mask-image: url("../img/icon/sd-arrow-short-right.svg"); transform: rotate(-180deg);}
.cardnews-list .sd-btn-next {right: 12px;}
.cardnews-list .sd-btn-next:before {-webkit-mask-image: url("../img/icon/sd-arrow-short-right.svg"); mask-image: url("../img/icon/sd-arrow-short-right.svg");}
.cardnews-list .sd-page {width: 100%; padding: 12px 0; line-height: 1; display: flex; justify-content: center; gap: var(--gap-base); position: absolute; bottom: 0; left: 0; z-index: 1;}
.cardnews-list .sd-page .swiper-pagination-bullet {padding: 4px; width: 1em; height: 1em; background: transparent; opacity: .3; cursor: pointer;}
.cardnews-list .sd-page .swiper-pagination-bullet:before {content: ''; display: block; width: 8px; height: 8px; border-radius: var(--round-xlg); background: var(--black);}
.cardnews-list .sd-page .swiper-pagination-bullet-active {opacity: 1;}
@media only screen and (max-width: 1024px){
	.cardnews-list [class^="sd-btn"] {width: 40px; height: 40px;}
	.cardnews-list [class^="sd-btn"]:before {width: 1.25rem; height: 1.25rem;}
}