@charset "UTF-8";

/* ============== 공용 ============== */
/*
@media screen and (max-width:768px) {
	.img-container > img {
		width:100%;
		height:100%;
		object-fit: cover;
	}
}
*/
/*
.sub-page span {
	overflow-wrap : break-word;
	line-height: 120%;
}
*/

/*
	--black: #111111;
	--light-black:#333333;  /* figma color value : body *-/
	--dark-gray:#999999;
	--light-gray:#B7BCC7;
	--sky-blue: #00A6FF;
	--deep-blue:#00449E;
	--gra-start: #00C2FF;
	--gra-end: #006FF1;
*/
/*
.sp-font-black {color : var(--black);}
.sp-font-lightblack {color : var(--light-black);}
.sp-font-darkgray {color : var(--dark-gray);}
.sp-font-lightgray {color: var(--light-gray);}
.sp-font-white {color: var(--white);}
.sp-font-skyblue {color: var(--sky-blue);}
.sp-font-deepblue {color: var(--deep-blue);}
.sp-font-black-bold {color : var(--black); font-weight: bold;}
.sp-font-lightblack-bold {color : var(--light-black); font-weight: bold;}
.sp-font-darkgray-bold {color : var(--dark-gray); font-weight: bold;}
.sp-font-lightgray-bold {color: var(--light-gray); font-weight: bold;}
.sp-font-white-bold {color: var(--white); font-weight: bold;}
.sp-font-skyblue-bold {color: var(--sky-blue); font-weight: bold;}
.sp-font-deepblue-bold {color: var(--deep-blue); font-weight: bold;}
.sp-font-contentTextGray {color: #666666;}
.sp-font-bold {font-weight : bold;}

.sp-font-size-10 {font-size : 7rem;}
.sp-font-size-9 {font-size : 5rem;}
.sp-font-size-8 {font-size : 3.8rem;}
.sp-font-size-7 {font-size : 3.0rem;}
.sp-font-size-6 {font-size : 2.4rem;}
.sp-font-size-5 {font-size : 2.0rem;}
.sp-font-size-4 {font-size : 1.7rem;}
.sp-font-size-3 {font-size : 1.4rem;}
.sp-font-size-2 {font-size : 1.2rem;}
.sp-font-size-1 {font-size : 1rem;}
.sp-font-size-0-9 {font-size : 0.9rem;}

@media screen and (max-width:768px){
	.sp-font-size-10 {font-size : 6rem;}
	.sp-font-size-9 {font-size : 4.2rem;}
	.sp-font-size-8 {font-size : 3.2rem;}
	.sp-font-size-7 {font-size : 2.6rem;}
	.sp-font-size-6 {font-size : 2.15rem;}
	.sp-font-size-5 {font-size : 1.8rem;}
}
@media screen and (max-width:425px){
	.sp-font-size-10 {font-size : 5rem;}
	.sp-font-size-9 {font-size : 3.8rem;}
	.sp-font-size-8 {font-size : 3.0rem;}
	.sp-font-size-7 {font-size : 2.4rem;}
	.sp-font-size-6 {font-size : 2.0rem;}
	.sp-font-size-5 {font-size : 1.7rem;}
	.sp-font-size-4 {font-size : 1.5rem;}
	.sp-font-size-3 {font-size : 1.4rem;}
	.sp-font-size-2 {font-size : 1.15rem;}
	.sp-font-size-1 {font-size : 0.95rem;}
	.sp-font-size-0-9 {font-size : 0.87rem;}
}
@media screen and (max-width:320px){
	.sp-font-size-10 {font-size : 4.3rem;}
	.sp-font-size-9 {font-size : 3.2rem;}
	.sp-font-size-8 {font-size : 2.5rem;}
	.sp-font-size-7 {font-size : 2.1rem;}
	.sp-font-size-6 {font-size : 1.8rem;}
	.sp-font-size-5 {font-size : 1.6rem;}
	.sp-font-size-4 {font-size : 1.4rem;}
	.sp-font-size-3 {font-size : 1.3rem;}
	.sp-font-size-2 {font-size : 1.05rem;}
	.sp-font-size-1 {font-size : 0.92rem;}
	.sp-font-size-0-9 {font-size : 0.83rem;}
}

.sp-mar-bot-10 {margin-bottom:10px;}
.sp-mar-bot-15 {margin-bottom:15px;}
.sp-mar-bot-20 {margin-bottom:20px;}
.sp-mar-bot-30 {margin-bottom:30px;}
.sp-mar-bot-40 {margin-bottom:40px;}
.sp-mar-bot-45 {margin-bottom:45px;}
.sp-mar-bot-50 {margin-bottom:50px;}
.sp-mar-bot-60 {margin-bottom:60px;}
.sp-mar-bot-70 {margin-bottom:70px;}
.sp-mar-bot-80 {margin-bottom:80px;}
.sp-mar-bot-100 {margin-bottom:100px;}

.sp-mar-top-5 {margin-top:5px;}
.sp-mar-top-10 {margin-top:10px;}
.sp-mar-top-20 {margin-top:20px;}
.sp-mar-top-30 {margin-top:30px;}
.sp-mar-top-40 {margin-top:40px;}
.sp-mar-top-50 {margin-top:50px;}

.sp-flex-gap-1 {display: flex;gap: 1vw;}
.sp-flex-gap-2 {display: flex;gap: 2vw;}

.sp-flex-text-area {width: 100%}
.sp-img-container {width: 20vw; height: 135px; min-width: 300px; position: relative;}

.sp-list-content-cn-1 {margin-top: 50px;border-top: 2px solid gray;padding: 20px 0 10px 0;}
.sp-list-content-cn-2 {border-top: 1px solid gray;padding: 10px 0;}
.sp-list-content-cn-3 {border-top: 1px solid gray;border-bottom: 1px solid gray;padding: 10px 0;}
.sp-list-content-cn-4 {border-top: 1px solid gray;padding: 10px 0;}
*/

/*======================= 답변형 게시판 CSS =============================*/
.ab-abs_title {
	height: 100px;
	padding-top: 75px;
}

.ab-main {
	margin-top: 30px;
}

.ab-abs_h1 {
	font-size: 45px;
	font-weight: 800;
	text-align: center;
	margin-bottom: 50px;
	margin-right: 12px;
}

.ab-title_right {
	width: 380px;
	display: flex;
	border-bottom: 1px solid #929292;
	font-size: 16px;
	top: 0;
	right: 0;
	float: right;
}

.ab-title_left {
	display: flex;
	padding-top: 20px;
	float: left;
}

.ab-search_right {
	width: 280px;
	padding-bottom: 20px;
	padding-left: 25px;
	display: flex;
}

.ab-search_left {
	width: 100px;
	padding-bottom: 20px;
	padding-left: 15px;
	background-image: url(./static/css/images/sample3/icon_select.png);
	background-repeat: no-repeat;
	background-position: calc(100% - 10px) center;
	font-weight: 700;
	appearance: none;
	background-position: 80px 0px;
	background-size: 25px;
}

.ab-search_left, .ab-search_input {
	border: 0px;
	outline: none;
	font-weight: 700;
}

.ab-empty-faq-list {
	padding: 10%;
	text-align: center;
}

/* 미디어 쿼리: 화면 너비가 1400px 이하일 때 적용 */
@media screen and (max-width: 1439px) {
	/* common */
	.abs_title,
	.abs_main {
		max-width: 900px;
	}

	.abs_app {
		max-width: 1200px;
		text-align: -webkit-center;
	}
}

/* 미디어 쿼리: 화면 너비가 768px 이하일 때 적용 */
@media screen and (max-width: 767px) {
	/* common */
	.abs_title,
	.abs_main {
		max-width: 500px;
		text-align: -webkit-center;
	}

	.abs_app {
		max-width: 768px;
	}

	.page_main {
		width: max-content;
	}

	.title_main .title_left {
		display: none;
	}

	.title_main .title_right {
		position: relative;
	}
}
/* 미디어 쿼리: 화면 너비가 425px 이하일 때 적용 */
@media screen and (max-width: 425px) {
	.contentLayout {
		width: 100%;
	}
	.ab-abs_h1 {
		font-size: 35px;
		margin-bottom: 30px;
	}
	.accordion_title {
		padding-left: unset;
	}
	.accordion_detail {
		gap: 10px;
	}
	.page_main {
		margin: auto;
		margin-top: 30px;
	}
	.ab-abs_title {
		height: 6vh;
		padding-top: unset;
	}
}

/* 미디어 쿼리: 화면 너비가 375px 이하일 때 적용 */
@media screen and (max-width: 375px) {
	.contentLayout {
		width: 100%;
	}
	.ab-title_right {
		width: 100%;
	}
	.accordion_desc {
		padding: 15px;
	}
	.abs_faq_list {
		padding-left: 5px;
	}
}

/* 미디어 쿼리: 화면 너비가 320px 이하일 때 적용 */
@media screen and (max-width: 320px) {
	.contentLayout {
		width: 100%;
	}
	.ab-search_right {
		padding-left: unset;
	}
	.ab-search_left {
		width: 70px;
	}
	.abs_faq_list {
		text-align: left;
		font-size: 1rem;
	}
	.ab-search_left {
		padding-left: 5px;
		font-size: 0.8rem;
	}
	.ab-search_input {
		font-size: small;
		padding-left: 16px;
	}
	.ab-main {
		margin-top: unset;
	}
	.ab-abs_title {
		height: 9vh;
		padding-top: unset;
	}

}
/*======================= 답변형 게시판 CSS =============================*/