@charset "UTF-8";

/* 소개글 */
#sub_intro {text-align:center; font-size:18px; word-break:keep-all;}
#sub_intro .tit{display: flex; justify-content:center; align-items:center; width:209px; height:38px; margin:0 auto 38px; background:#f13f67; border-radius:38px; color: #fff; font-weight:700; font-size:18px;}
#sub_intro .info{line-height:160%; font-size:22px; font-weight:500;}
#sub_intro ul{display: flex; flex-wrap:wrap; justify-content:center; padding:40px 0 80px; font-weight:500;}
#sub_intro li + li{margin:0 0 0 47px; padding:0 0 0 47px; border-left:1px dashed #ccc;}
#sub_intro li p{line-height:100%; padding:27px 0 0 0;}
@media all and (max-width:1200px) {
	#sub_intro{font-size:17px;}
	#sub_intro .info{font-size:19px;}
	#sub_intro li{width:20%;}
	#sub_intro li img{max-width:100%;}
	#sub_intro li + li{margin:0 0 0 2%; padding:0 0 0 2%;}
}
@media all and (max-width:768px) {
	#sub_intro{font-size:16px;}
	#sub_intro .tit{margin-bottom:28px; font-size:17px;}
	#sub_intro .info{font-size:17px;}
	#sub_intro ul{padding:27px 0 50px;}
	#sub_intro li{width:40%;}
	#sub_intro li img{max-width:55%;}
	#sub_intro li:nth-child(-n + 2){margin-bottom:20px; padding-bottom:20px; border-bottom:1px dashed #ccc;}
	#sub_intro li:nth-child(3){margin:0; padding:0; border-left:none;}
	#sub_intro li p{padding:15px 0 0 0;}
}

/* 이용안내 */
#sub_use{padding:68px 12.4% 45px; background:#f9f9f9; font-size:18px; text-align:center; word-break:keep-all;}
#sub_use .info{padding:0 0 70px; line-height:160%; font-size:22px; font-weight:500;}
#sub_use dl{margin:0 0 40px; background:#fff;}
#sub_use dt{padding:18px 0; font-size:22px; font-weight:700; color: #fff; background:#a2c037;}
#sub_use dt:before{content:''; display:inline-block; vertical-align:middle; width:27px; height:27px; margin:-4px 10px 0 0; background:url(../img/content/ico_chk.png) no-repeat;}
#sub_use dd{padding:30px 10px 35px; line-height:125%;}
#sub_use dl:nth-of-type(2) dt{background:#80e266;}
#sub_use dl:nth-of-type(3) dt{background:#80e2cb;}
@media all and (max-width:1200px) {
	#sub_use{padding:40px 30px 20px; font-size:16px;}
	#sub_use .info{padding:0 0 40px; font-size:18px;}
	#sub_use dt{padding:14px 0; font-size:20px;}
	#sub_use dd{padding:25px 10px; line-height:180%;}
	#sub_use br:nth-of-type(even){display: none;}
}
@media all and (max-width:768px) {
	#sub_use{padding:30px 15px 15px; font-size:16px;}
	#sub_use .info{padding:0 0 30px; font-size:17px;}
	#sub_use dl{margin:0 0 30px;}
	#sub_use dt{padding:14px 0; font-size:19px;}
	#sub_use dd{padding:20px 10px;} 
}

/* faq */
.sort_list{display:flex; flex-wrap:wrap; justify-content:center; gap:20px; padding:25px 0 25px;}
.sort_list button{height:38px; width:144px; border:1px solid #ccc; border-radius:38px; box-sizing:border-box; color: #666; font-weight:500; font-size:18px;}
.sort_list .on{color: #fff; font-weight:700; background:#f13f67; border-color:#f13f67;}

.qna_list{border-top:1px solid #ddd; color: #666; word-break:keep-all;}
.qna_list li{position:relative; border-bottom:1px solid #ddd;}
.qna_list li > a,
.qna_list li > div{display:block; position:relative; padding:8px 40px 8px 263px;}
.qna_list li > a{color:#666; text-decoration:none;}
.qna_list li > div{display:none; padding-top:17px; padding-bottom:17px; border-top:1px solid #ddd; background:#f5f5f5;}
.qna_list li > a:before,
.qna_list li > div:before{content:'Q'; position:absolute; top:12px; left:34px; line-height:100%; font-size:20px; font-weight:400; color:#f13f67; text-decoration:uppercase; text-align:center;}
.qna_list li > a:after{content:''; display:block; position:absolute; top:12px; right:20px; width:10px; height:10px; border-bottom:2px solid #f13f67; border-right:2px solid #f13f67; transform:rotate(45deg);}
.qna_list li > div:before{content:'A'; top:20px; color:#4e71cf;}
.qna_list li > a:hover{background:#fafafa;}
.qna_list li > a.on:after{top:18px; transform:rotate(-135deg);}
.qna_list .tit{position: absolute; left:90px; top:8px; color:#f13f67;}
@media all and (max-width:1200px) {
	.sort_list{gap:15px;}
	.sort_list button{height:36px; font-size:16px;}
}
@media all and (max-width:1024px) {
	.sort_list{gap:10px;}
	.sort_list button{width:117px; font-size:15px;}

	.qna_list li > a,
	.qna_list li > div{padding-left:85px;}
	.qna_list li > div{line-height:160%; padding-right:10px !important;}
	.qna_list .tit{position: static; display:block; padding:2px 0 1px 0; font-size:15px;}
	.qna_list li > a{line-height:140%;}
}
@media all and (max-width:768px) {
	.sort_list{gap:8px;}
	.sort_list button{height:34px; font-size:14px;}

	.qna_list li > a,
	.qna_list li > div{padding-left:55px;}
	.qna_list li > a:before,
	.qna_list li > div:before{left:18px;}
}
@media all and (max-width:568px) {
	.sort_list button{width:calc(100% / 3 - 8px);}

	.qna_list li > a,
	.qna_list li > div{padding-left:38px; padding-right:35px;}
	.qna_list li > a:before,
	.qna_list li > div:before{left:13px;}
}
@media all and (max-width:380px) {
	.sort_list button:nth-child(n + 4){width:calc(100% / 2 - 25px);}
}