@charset "UTF-8"; 

/* subpage */
.sub-page{
	display: flex;
	background-color: var(--color-white);
	max-width: 1232px;
	margin: 50px auto 0;
	gap: 40px;
}

/* LNB */
.LNB{
	width: 270px;
	padding: 40px 40px 0 0;
}
.LNB ul{
	display: flex;
	gap: 24px;
	flex-direction: column;
	position: sticky; 
	top:70px
}
.LNB a{
	display: flex;
	padding:4px 12px;
	position: relative;
	gap:12px;
	align-items: center;
}
.LNB a::before{
	content: '';
	display: inline-block;
	width: 3px;
	height: 14px;
	background-color: var(--color-teal);
	opacity: 0;
}
.LNB a .menu{
	font: 18px;
	color: var(--color-gray-600);
	font-weight: 600;
}
.LNB .on a::before{
	opacity: 1;
}
.LNB .on a .menu{
	color:var(--color-teal)
}

.sub-page .contents{
	width: 100%;
    padding-top:40px
}
/* tabs */
.tabs{
	width:100%;
	max-width:260px;
	padding:4px;
	display:flex;
	background:var(--color-neutral-variant-50);
	border-radius: 12px;
	box-sizing: border-box;
    margin:0 auto
}
.tabs li{flex:1}
.tabs li button, .segments .segment{
	width: 100%;
	color: var(--color-black);
	font-size: 16px;
	height: 39px;
}
.tabs li button.active, .segments .segment.active{
	font-weight:bold;
	background-color: var(--color-white);
	box-shadow: var(--shadow-box-default);
	border-radius: 12px;
}

.contents .list-contents{
    padding-top:40px;
}
.contents .item-contents{
    display: flex;
    flex-direction: column;
    gap:8px;
    align-items: baseline;
    justify-content: start;
    padding-bottom:40px;
}
.contents [data-tab-panel="1"] .item-contents{
    flex-direction: row-reverse;
    align-items: center;
    gap:24px;
}
.contents h2{
    font-size: 23px;
    color: var(--color-black);
    padding-bottom:12px;
}
.contents h3{
    font-size: 20px;
    color: var(--color-black);
    padding-bottom:4px;
}
.contents .item-contents ol>li{
    list-style: decimal;
    padding-bottom:4px;
    margin-left:20px
}
.contents .item-contents ul>li{
    padding-left:10px;
    position:relative;
    padding-bottom:4px
}
.contents .item-contents ul>li::before{
    content: '';
    display: inline-block;
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 5px;
    background-color: var(--color-black);
    top:8px;
    left:0
}
.contents .item-contents .note{
    color:var(--color-gray-600);
    font-size:14px;
}
.contents [data-tab-panel="1"] .item-contents img,
.contents[data-tab-panel="1"] .item-contents img{width:250px;}
.contents [data-tab-panel="2"] .item-contents img{width:700px;}

/* 자주묻는 질문 */
.flag{
	display: inline-block;
	padding :  4px 11px;
	border-radius: 99px;
	font-weight: 700;
	font-size: 14px;
}
.flag1{
	background-color:#E0D9F0;
	color:#32009B;
}
.flag2{
	background-color:#DBF1DC;
	color:#004603;
}

.list-faq .item-faq {
	padding: 12px 12px 16px;
}
.list-faq .open {
	background-color: #F7F8FC;
}
.list-faq .fold-top {
	display: flex;
	gap: 8px;
	width: 100%;
	align-items: center;
}
.list-faq .tit {
	font-weight: 400;
	text-align: left;
	flex: 1;
}
.list-faq .open .tit {
	font-weight: 700;
}


/* 답변 영역 */
.list-faq .fold-bottom {
	display: flex;
	gap: 8px;
	width: 100%;
	overflow: hidden;

	height: 0;
	opacity: 0;
	padding-top: 0;

	transition:
		height 0.3s ease,
		opacity 0.2s ease,
		padding-top 0.3s ease;
}

.list-faq .item-faq.open .fold-bottom {
	opacity: 1;
	padding-top: 14px;
}
.list-faq .item-faq.open .ico-keyboard_arrow_down{
	transform: rotate(180deg);
}
.list-faq .fold-bottom .txt-desc{
	padding-top:4px;
	line-height: 1.5;
}

/* list-faq2 */
.list-faq2 .item-faq{
	display: flex;
	gap: 16px;
	padding:16px 10px;
}
.list-faq2 .item-faq .num{
	font-size:20px;
	color:#1A596B;
	font-weight: 700;
}
.list-faq2 .item-faq .txt{
	padding-top:2px;
	line-height: 1.5;
}
@media screen and (max-width: 768px) {
	.sub-page{
		flex-direction: column;
		gap: 0;
	}
	.sub-page .contents{
		padding: 24px 16px;
		box-sizing: border-box;
	}
	.LNB{
		width: 100%;
		padding:0;
		background-color: rgba(255, 255, 255, 0.35);
    	box-shadow: 1px 0 2px rgba(0, 0, 0, 0.4);
		z-index: 10;
    	backdrop-filter: blur(10px);
		position: sticky;
        top: 50px;
		overflow-x: hidden;
	}
	.LNB .swiper-wrapper {
    align-items: center;
	}

	.LNB .swiper-slide {
		width: auto;
		flex-shrink: 0;
	}
	.LNB ul{
		flex-direction: row;
		gap: 0px;
	}
	.LNB a{
		width: max-content;
		flex-direction: column;
		padding-top:16px;
		padding-bottom:0;
	}
	.LNB a div{
		flex: 1 0 auto;
	}
	.LNB a::before{
		content: "";
		display: block;
		width: 100%;
		min-width: 3px;
		height: 3px;
		background: var(--color-teal);
		opacity: 0;
		will-change: opacity;
		order: 2;
	}
	.LNB .on a::before{
		opacity: 1;
	}
	.contents [data-tab-panel="1"] .item-contents,
	.contents[data-tab-panel="1"] .item-contents{
		flex-direction: column;
		align-items: baseline;
	}
	.contents [data-tab-panel="2"] .item-contents img{
		width: 100%;
	}
}