@charset "UTF-8";
/* common, skipNavi, header, footer, topbtn, scroll */


/* =========================================================
 * common
 * ========================================================= */
body{
	width:100%;
	height:100%;
	font-family: "Pretendard", sans-serif;
    line-height: 1.5;
}
body.on{overflow:hidden;}
a:focus-visible{outline: none;outline: dotted 2px #FFF;}
#seoul-common-gnb a:focus-visible,
#seoul-common-gnb button:focus-visible{outline: none;outline: dotted 2px #000;}
button:focus-visible{outline: none;outline: dotted 2px #FFF;}
.sec1 a:focus-visible{outline-offset: 0px; outline: dotted 2px #000;}
.sec1 button:focus-visible{outline: none;outline: dotted 2px #000;}
.sec1 select:focus-visible{outline: none;outline: dotted 2px #000;}
.sec4 a:focus-visible{outline-offset: 0px; outline: dotted 2px #000;}
.sec4 button:focus-visible{outline: none;outline: dotted 2px #000;}
.sec4 select:focus-visible{outline: none;outline: dotted 2px #000;}
#custom-header-wrap a:focus-visible{outline: none;outline: dotted 2px #000;}
/* contents */
#wrap {min-width: 320px;}
.wrapper {
	max-width: 1440px;
	margin: 0 auto;
	/* background-color: #c0c0c0bb; */
}
/* .icon-box{padding: 2px; 기본} */
.icon-box .icon{display: block;width: 100%;height: 100%;}
.icon{background-size: contain !important;}

/* 공통 inner */
.inner{padding: 20px;}
@media only screen and (max-width: 1720px) {
}
@media only screen and (max-width: 1250px) {
}
@media only screen and (max-width: 767px) {
}


/* 토글 메뉴*/
.menu-toggle{
    width: 40px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
	position: relative;
}
.menu-toggle span{
    display: block;
    width: 100%;
    height: 4px;
    background-color: #333;
    border-radius: 4px;
    transition: 0.3s;
}
/* X자 변형 */
.menu-toggle:has(+ .nav-menu.active) span{
	position: absolute;
    top: 50%; /* 모든 span을 버튼의 정중앙으로 이동 */
    left: 0;
    transform: translateY(-50%);
}
.menu-toggle:has(+ .nav-menu.active) span:nth-child(1){
	transform: translateY(-50%) rotate(45deg);
}
.menu-toggle:has(+ .nav-menu.active) span:nth-child(2){
    opacity: 0;
}
.menu-toggle:has(+ .nav-menu.active) span:nth-child(3){
	transform: translateY(-50%) rotate(-45deg);
}

/* 네비게이션 메뉴 */
.nav-menu{
    display: none;
    position: absolute;
	top: 100px;
	left: 0px;
    width: 100%;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 10px 0;
}
.nav-menu ul li{padding: 12px;}
.nav-menu ul li a{color: #333;font-size: 16px;}
.nav-menu.active{display: block;}


/* =========================================================
 * scroll
 * ========================================================= */
.scroll-css::-webkit-scrollbar{
	margin: 15px 0px;
	width: 4px;
	border-radius: 4px;
	background: #F1F1F1;
}
.scroll-css::-webkit-scrollbar-thumb{
	background: #EBECF1;
	border-radius: 4px;
}
.scroll-css::-webkit-scrollbar-track{
	border-radius: 4px;
}

.custom-scroll{
	overflow-y: auto;
}
.custom-scroll::-webkit-scrollbar{
	width: 8px;
}
.custom-scroll::-webkit-scrollbar-thumb{
	height: 62%;
	background-color: #cfcfd0;
	border-radius: 4px;
	background-clip: padding-box;
	border: 2px solid transparent;
}
.custom-scroll::-webkit-scrollbar-track{
	border-radius: 4px;
}

/* =========================================================
 * skip navi
 * ========================================================= */
.skip_cts li a {position:absolute; left:0; top:-100px; width:100%; background:#1373be; color:#fff; text-align:center; padding:10px 0; z-index:1000;}
.skip_cts li a:focus {top:0;}
/* #skip-navi a {display: block;width: 1px;height: 1px;position: fixed;top: -9999px;left: -9999px;z-index: 20000;overflow: hidden; } 
#skip-navi a:focus {width: 100%;height: 35px;background: #333;color: #fff;line-height: 30px;color: #fff;top: 0;left: 0;text-align: center; }  */

/* =========================================================
 * top button
 * ========================================================= */
.top-button{
	position: fixed;
	right: 92px;
	bottom: 24px;
	z-index: 9;
	transition: bottom 0.4s ease-in;
}
.top-button-link{
	border-radius: 28px;
	box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.2);
}
.top-button-link:focus-visible{
	outline-offset: 4px;
}
.top-button-link img{
	width: 56px;
}

@media (max-width: 1440px){
	.top-button{
		right: 28px;
	}
}
@media (max-width: 1280px){
	.top-button{
		right: 24px;
	}
	.top-button-link img{
		width: 50px;
	}
}
@media (max-width: 1024px){
	.top-button{
		right: 16px;
	}
	.top-button-link img{
		width: 48px;
	}
}
@media (max-width: 768px){
	.top-button{
		right: 8px;
	}
	.top-button.is-show{
		bottom: 16px;
	}
}

/* =========================================================
 * pagination
 * ========================================================= */