@charset "utf-8";
@import url(setting.css);
/* ************************************************************************************************************************************************************
						《 공통 레이아웃 스타일 》
************************************************************************************************************************************************************ */

/* ============================== [ 레이아웃 리셋 Layout Reset ] ========================================================================================== */
::selection {color:#fff; background-color:#f24975;}
.go_view {position:absolute; left:0; top:0; height:100%; width:100%;}
.inner {width:100%; max-width:1040px; margin:0 auto; padding:0 20px; box-sizing:border-box;}

/* ============================== [ #header ] ========================================================================================== */
#header {border-bottom: 1px solid #eae3e5; }
#header .inner {display: flex; align-items: center; height: 100px; position: relative;}
#header .select_wrap {min-width: 100px; margin-right: auto;}
#header .nice-select::before {display: block; content: ''; width: 11px; height: 7px; background: url(../img/ico_arr.png) no-repeat 0 0; background-size: 11px 7px; position: absolute; right: 4px; top: 7px;}
#header .nice-select:after {display: none;}
#header h1 a {display: block; width: 248px; height: auto;}
#header h1 a img {display: block; width: 100%; height: auto;}
#header .search {position: relative; margin-left: 130px;}
#header .search input {font-family: 'NanumSquareNeoExtraBold'; padding: 0 30px 0 10px; height: 35px; border-bottom: 2px solid #222;}
#header .search button {background: url(../img/ico_search.png) no-repeat 0 0; width: 16px; height: 16px; position: absolute; right: 8px; top: 10px;}

/* ============================== [ #contents ] ========================================================================================== */
#contents {position:relative; background-color: #f7f3f5; padding-bottom: 120px;}

/* ============================== [ #footer ] ========================================================================================== */
#footer {background-color: #222; padding: 48px 0;}
#footer .inner {display: flex; align-items: center; justify-content: space-between; max-width: 1170px;}
#footer h2 img {display: block; width: 145px; height: auto;}
#footer p {color: #919191; text-align: center; font-size: 12px; line-height: 1.8;}
#footer .btn_wrap {display: flex; gap:38px;}
#footer .btn_wrap .btn {width: 136px; height: 40px; display: flex; align-items: center; justify-content: center; color:#fff; border:1px solid #fff; border-radius: 5px; transition: .3s; font-size: 13px;}
#footer .btn_wrap .btn:hover {background-color: #fff; color:#222;}
#footer .sns_wrap {display:flex; flex-wrap: wrap; gap:12px 8px; width:210px; justify-content:space-between;}
#footer .sns_wrap a {display:flex; align-items:center; color:#f7f3f5; font-size:12px; width:95px;}
#footer .sns_wrap i {display:block; width:24px; height:24px; border-radius: 50%; background-position: center; background-size: 100% auto; background-repeat: no-repeat; margin-right:10px;}
#footer .sns_wrap .twt i {background-image: url(../img/sns_twt.png); border-radius: 0;}
#footer .sns_wrap .kakao i {background-image: url(../img/sns_kakao.png);}
#footer .sns_wrap .line i {background-image: url(../img/sns_line.png);}
#footer .sns_wrap .fb i {background-image: url(../img/sns_fb.png);}
#footer .sns_wrap .insta i {background-image: url(../img/sns_insta.png);}
#footer .sns_wrap .zalo i {background-image: url(../img/sns_zalo.png); border-radius: 0;}

@media screen and (max-width:1024px) {
	#footer h2 {order:-1}
	#footer .sns_wrap {order:-1}
}

/* ============================== [ Quiz List ] ========================================================================================== */
.catg {display:flex; flex-wrap: wrap; gap:12px 8px; padding-top: 30px;}
.catg li button {color:#f24975; font-size: 14px; padding: 6px 12px; border:1px solid #f24975; border-radius: 15px; transition: .3s;}
.catg li button::before {content: '+ ';}
.catg li.on button,
.catg li button:hover {background-color: #f24975; color:#fff; box-shadow: 0 4px 7px 0px rgba(0, 0, 0, 0.1);}

.quiz_cont {display:flex; gap:16px; padding: 40px 0 0; }
.quiz_cont .list_wrap {flex:1;}
.quiz_cont .rank_wrap {width: 238px;}
.quiz_cont h2 {margin-bottom: 20px; font-size: 18px; font-family: 'NanumSquareNeoHeavy';}
.list_wrap ul {display:flex; flex-wrap: wrap; gap:16px;}
.list_wrap ul li {position: relative; width: calc(33.33% - 11px);}
.list_wrap ul li a {border-radius: 5px; overflow: hidden; transition: .3s; display: block; height: 100%;}
.list_wrap ul li a::after { display: block; width: 100%; height: 100%; content: ''; background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 50%,rgba(0,0,0,1) 100%); position: absolute; left: 0; top: 0; border-radius: 5px; transition: .3s; opacity: 1; visibility: visible;}
.list_wrap ul li a::before { display: block; width: 100%; height: 100%; content: ''; background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 50%,#f24975 100%); position: absolute; left: 0; top: 0; border-radius: 5px; transition: .3s; opacity: 0; visibility: hidden;}
.list_wrap ul li a:hover::after {opacity: 0; visibility: hidden;}
.list_wrap ul li a:hover::before {opacity: 1; visibility: visible;}
.list_wrap ul li img {display: block; width: 100%; height: 100%; object-fit: cover;}
.list_wrap ul li span {position: absolute; width: 90%; text-align: center; left:5%; bottom: 12%; font-size: 15px; font-family: 'NanumSquareNeoExtraBold'; color:#fff; z-index: 1;}
.list_wrap .page {display: flex; align-items: center; justify-content: center; gap:24px; margin-top: 70px;}
.list_wrap .page .arr {width: 36px; height: 36px; border-radius: 50%; background-color: #000; background-position: center; background-repeat: no-repeat;}
.list_wrap .page .arr.prev {background-image: url(../img/page_l.png);}
.list_wrap .page .arr.next {background-image: url(../img/page_r.png);}
.list_wrap .page ol {display: flex; gap:8px;}
.list_wrap .page ol li a {width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 15px;}
.list_wrap .page ol li a span {position: relative;}
.list_wrap .page ol li a span::after {display: block; content: ''; width: 18px; height: 2px; background-color: transparent; position: absolute; left: 50%; transform: translateX(-50%); bottom: -4px;}
.list_wrap .page ol li a.on span {color:#f24975;}
.list_wrap .page ol li a.on span::after {background-color: #f24975;}
.rank_wrap ol {border-radius: 8px; border:2px solid #222; padding: 10px 20px; background-color: #fff;}
.rank_wrap ol li {font-size: 13px;}
.rank_wrap ol li span {color: #f24975; display: inline-block; margin-right: 8px;}
.rank_wrap ol li a {padding:7px 0; display: block; line-height: 1.4; transition: .3s; letter-spacing: -0.15px; font-family: 'NanumSquareNeoExtraBold';}
.rank_wrap ol li a:hover {color:#f24975; text-decoration: underline; text-underline-offset: 3px;}
.ad {width: 300px; height: 600px; position: fixed; right: 4%; top: 46%; transform: translateY(-50%); background-color: #e3d4db;}

@media screen and (max-width:1750px) {
	.ad {right: 10px;}
}
@media screen and (max-width:1650px) {
	.ad {position: relative; right: 0; top:0; transform: none; display: block; width: 100%; max-width: 1000px; height: 250px; margin: 0 auto;}
	.quiz_cont {margin-bottom: 40px;}
}
@media screen and (max-width:1024px) {
	#header .inner {justify-content: space-between;}
	#header .search {margin-left: auto;}
	#footer .inner {flex-direction: column; gap:20px;}
	#footer .btn_wrap .btn {height: 32px;}
	.list_wrap ul li span {font-size: 13px;}
	.ad {right: -20px; width: calc(100% - 40px); margin: 0;}

}
@media screen and (max-width:768px) {
	#contents {padding-bottom: 70px;}
	#header .inner {padding-top: 60px; padding-bottom: 20px; height: auto; align-items: flex-end; gap:20px;}
	#header h1 {position: absolute; left: 50%; top: 20px; transform: translateX(-50%);}
	#header h1 a {width: 160px;}
	#header .nice-select {min-width: 100% !important;}
	#header .search {flex:1;}
	#header .search input {height: 30px; font-size: 14px; width: 100%; box-sizing: border-box;}
	#header .search button {top: 7px;}
	#footer p {font-size: 11px; letter-spacing: -0.25px;}
	.catg {gap:6px; padding-top: 20px;}
	.catg li button {font-size: 12px; padding: 6px 8px;}
	.quiz_cont {flex-direction: column-reverse; gap:40px; padding:30px 0 0}
	.quiz_cont .rank_wrap {width: 100%;}
	.quiz_cont h2 {margin-bottom: 16px; font-size: 16px;}
	.list_wrap ul {gap:10px;}
	.list_wrap ul li {width: calc(50% - 5px);}
	.list_wrap .page {margin-top: 20px; gap:10px}
	.list_wrap .page .arr {width: 28px; height: 28px;}
	.list_wrap .page ol li a {width: 30px; height: 30px;}
}

/* ============================== [ Quiz Box ] ========================================================================================== */
.box_quiz_container {width: 90%;max-width: 600px;padding: 80px 0 0;margin: 0 auto;box-sizing: border-box;}
.box_quiz {margin: 0 auto;padding: 80px 90px 64px;border: 1px solid #222;border-radius: 8px;background-color: #fff;text-align: center;box-sizing: border-box;}
.box_quiz .num {font-size: 18px;font-family: 'NanumSquareNeoHeavy';color: #f24975;}
.box_quiz .que {margin-top: 20px;font-size: 24px;font-family: 'NanumSquareNeoHeavy';}
.box_quiz .answer {margin: 60px auto 0;padding: 0 0px 35px 0px; text-align: left;box-sizing: border-box;}
.box_quiz .answer label {display: flex;align-items: center; /* justify-content: center;*/}
.box_quiz .answer label + label {margin-top: 40px;}
.box_quiz .answer label input {cursor: pointer;}
.box_quiz .answer label input::before {display: block;content: '';width: 28px;height: 28px;background-image: url('./../img/ico_unchecked.png');background-repeat: no-repeat;background-size: contain;}
.box_quiz .answer label input:checked::before {background-image: url('./../img/ico_checked.png'); transition: .3s;}

.box_quiz .answer label span {
	/* display: inline-block; */
	padding-left: 30px; padding-right:20px; font-size: 20px;font-family: 'NanumSquareNeoBold';cursor: pointer; line-height:1.4;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	box-sizing: border-box;
	word-break: keep-all;
	word-wrap: break-word;
}



.box_quiz .answer label .result em {display: inline-block;padding:20px; border: 1px solid transparent;border-radius: 20px;background-position: center center;background-repeat: no-repeat;font-size: 18px;font-family: 'NanumSquareNeoBold';}
.box_quiz .answer label .result.correct em {border-color: #aee1b3;background-color: #ebf9ef;background-image: url('./../img/ico_correct.png');color: #33c165;}

.box_quiz .result span {display: inline-block;padding: 10px 24px;padding-left: 56px;  border: 1px solid transparent;border-radius: 20px;background-position: 10px center;background-repeat: no-repeat;font-size: 18px;font-family: 'NanumSquareNeoBold';}
.box_quiz .result.correct span {border-color: #aee1b3;background-color: #ebf9ef;background-image: url('./../img/ico_correct.png');color: #33c165;}
.box_quiz .result.incorrect span {border-color: #f7cddd;background-color: #ffeff5;background-image: url('./../img/ico_incorrect.png');color: #f24975;}
.box_quiz .score {padding-bottom: 120px;background-image: url('./../img/img_emojis.png');background-position: bottom center;background-repeat: no-repeat;background-size: contain;}
.box_quiz .score p {font-size: 18px;font-family: 'NanumSquareNeoHeavy';}
.box_quiz .score strong {display: inline-block;margin-top: 10px;font-size: 60px;line-height: 1em;color: #f24975;font-family: 'NanumSquareNeoHeavy';}
.box_quiz .score strong::after {display: inline-block;content: '점';font-size: 40px;}
.box_quiz .board {margin-top: 60px;padding: 30px 70px;background-color: #f9f9f9;border-radius: 20px;text-align: left;}
.box_quiz .board div {display: flex;align-items: center;padding-left: 36px;background-repeat: no-repeat;background-position: left center;background-size: 25px;font-family: 'NanumSquareNeoBold';font-size: 20px;line-height: 1.3em;}
.box_quiz .board div + div {margin-top: 16px;}
.box_quiz .board div.correct {background-image: url('./../img/ico_correct.png');}
.box_quiz .board div.incorrect {background-image: url('./../img/ico_incorrect.png');}
.box_quiz .board div.time {background-image: url('./../img/ico_stopwatch.png');}
.box_quiz .board p {padding-left: 8px;font-family: 'NanumSquareNeoBold';font-size: 20px;}
.box_quiz .btn_wrap {padding-top: 35px;}
.box_quiz .btn_wrap .btn {display: block;width:100%;padding: 18px 20px;border-radius: 5px;background-color: #000;color: #fff;font-size: 20px;-webkit-transition: 0.3s;transition: 0.3s;}
.box_quiz .btn_wrap .btn:hover {background-color: #f24975;box-shadow: 0px 3px 6px #f24975;}

@media screen and (max-width: 768px){
	.box_quiz_container {padding-top: 70px;}
	.box_quiz {padding: 40px 20px 50px;}
	.box_quiz .num {font-size: 14px;}
	.box_quiz .que {font-size: 20px;}
	.box_quiz .answer {margin-top: 30px;padding: 0 0 20px 30%;}
	.box_quiz .answer label + label {margin-top: 20px;}
	.box_quiz .answer label input::before {width: 20px;height: 20px;}
	.box_quiz .answer label span {padding-left: 16px;font-size: 16px;}

	.box_quiz .answer label .result em {padding: 8px 16px;padding-left: 40px;border-radius: 16px;font-size: 14px;}

	.box_quiz .result span {padding: 8px 16px;padding-left: 40px;border-radius: 16px;font-size: 14px;}
	.box_quiz .score {padding-bottom: 80px;}
	.box_quiz .score p {font-size: 14px;}
	.box_quiz .score strong {font-size: 40px;}
	.box_quiz .board {margin-top: 40px;padding: 20px 32%;border-radius: 16px;}
	.box_quiz .board div {padding-left: 28px;background-size: 20px;font-size: 16px;}
	.box_quiz .board p {font-size: 16px;}
	.box_quiz .btn_wrap {padding-top: 20px;}
	.box_quiz .btn_wrap .btn {width: 100%;padding: 12px 20px;font-size: 16px;}
}

@media screen and (max-width: 480px){
	.box_quiz .answer {padding: 0 2% 20px;}
	.box_quiz .board {padding: 20px 24%;}
}