@charset "utf-8";

/*------------------------------------------------------------
	렌즈 퀘스트 리스트
------------------------------------------------------------*/
#conts.quest .content {
	max-width: unset;
	padding: unset;
}

#conts.quest.detail .content {
	background-color: #141414;
}

#conts.quest .body .key-visual .img {
	position: relative;
	aspect-ratio: unset;
	background: #000;
	padding: 5.5rem 0;
}

#conts.quest .body .key-visual .img img {
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

#conts.quest .tab-pannel {
	padding: 10rem 0 0 0;
}

#conts.quest .tab-pannel .tab-list {
	display: flex;
	justify-content: center;
	gap: 0 4rem;
	padding: 0 2rem;
}

#conts.quest .tab-pannel .tab-list li {
	width: auto;
}

#conts.quest .tab-pannel .tab-list li a {
	display: block;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 2.9rem;
	color: #666;
	padding-bottom: 0.2rem;
	border-bottom: 2px solid transparent;
}

#conts.quest .tab-pannel .tab-list li.active a {
	color: #fff;
	border-color: #ffffff;
}

/*** 퀘스트소개 ***/
#conts.quest .how {
	position: relative;
	padding: 6rem 2rem 8rem;
}

#conts.quest .how.type1 {
	padding: 8rem 2rem;
	background-color: #141414;
}

#conts.quest .how.type2 {
    padding: 8rem 0 16rem 0;
    max-width: 111.3rem;
    margin: 0 auto;
    position: relative;
}

#conts.quest .how.type2 .how-wrap~.how-wrap {
	padding-top: 8rem;
}
#conts.quest .how.type2 .how-wrap.case1 {
	padding-left: 2rem;
	padding-right: 2rem;
}

#conts.quest .how.type3 {
	padding: 8rem 0;
}
#conts.quest .how.type3 .btn-display {
	margin-top: 6rem;
}
#conts.quest .how.type3 .how-para {
	margin-top: 4rem;
}
#conts.quest .how.type3 .how-para .para {
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 150%;
	color: #fff;
	text-align: center;
}

#conts.quest .how .how-head {
	position: relative;
	margin-bottom: 4rem;
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	text-align: center;
}
#conts.quest .how .how-figure {
	position: relative;
}
#conts.quest .how .how-figure img {
	display: block;
	margin: 0 auto;
}
#conts.quest .how .how-figure .current-btn {
	position: absolute;
    top: 5.5%;
    right: 12%;

    width: 20%;
    height: 3%;
}
#conts.quest .how .how-figure .current-btn .btn {
	width: 100%;
	height: 100%;
	display: block;
	box-sizing: border-box;
}

#conts.quest .how .how-tit {
	position: relative;
	margin-bottom: 3.5rem;
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	text-align: center;
}

#conts.quest .how .step-list {
	display: flex;
	justify-content: space-between;
	width: 92rem;
	margin: 0 auto;
}

#conts.quest .how .step-list+.state-list {
	padding-top: 9rem;
}

#conts.quest .how .step-item {
	position: relative;
}

#conts.quest .how .step-item+.step-item::before {
	content: '';
	position: absolute;
	top: 0;
	right: 100%;
	width: 8.5rem;
	height: 25rem;
	background-image: url(/resources/assets/img/rflensworld/quest/step-arrow.png);
	background-repeat: no-repeat;
	background-position: center;
}

#conts.quest .how .step-figure+.step-body {
	margin-top: 1.5rem;
}

#conts.quest .how .step-figure img {
	max-width: 100%;
	vertical-align: top;
}

#conts.quest .how .step-body .para {
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.5;
	color: #ECECEC;
	text-align: center;
}

#conts.quest .how .step-body .para em {
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
	color: #ECECEC;
}

/*** 퀘스트리스트 ***/
#conts.quest .tab-pannel .quest-list {
	position: relative;
	max-width: 102.7rem;
	margin: 4rem auto 0;
	padding-bottom: 16rem;
}
#conts.quest .tab-pannel .quest-list .quest-img-data img {
	width: 100%;
	display: block;
}
#conts.quest .tab-pannel .quest-list .tab-list.depth2 {
	position: absolute;
	top: 0;
	right: 11.2%;
	width: 40%;
	max-width: 42rem;
	justify-content: space-between;
	gap: unset;
	margin-top: 7.8%;
	padding: unset;
}

#conts.quest .tab-pannel .quest-list .tab-list.depth2 li {
	position: relative;
	width: 19%;
	max-width: 7.2rem;
	height: 0;
	z-index: 1;
	padding-bottom: 18%;

}

#conts.quest .tab-pannel .quest-list .tab-list.depth2 li a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#conts.quest .tab-pannel .quest-list .quest-link-data-wrap {
    width: 72%;
    max-width: 77rem;
    position: absolute;
    top: 1.8%;
    right: 14.5%;
}

#conts.quest .tab-pannel .quest-list .quest-link-data {
	width: 100%;
	height: 100%;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#conts.quest .tab-pannel .quest-list .quest-link-data ~ .quest-link-data {
	margin-top: 74%;
}

#conts.quest .tab-pannel .quest-list .quest-link-data .link {
    position: relative;
    width: calc(33.333% - 0.5rem);
    height: 0;
    padding-bottom: 42.5%;
}

#conts.quest .tab-pannel .quest-list .quest-link-data .link a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    pointer-events: auto;
}

/* 20240425 추가 */
#conts.quest .tab-pannel .quest-list .quest-link-data-wrap,
#conts.quest .tab-pannel .quest-list .quest-goods-link-data-wrap {
	pointer-events: none;
}

#conts.quest .tab-pannel .quest-list .quest-link-data-wrap .link,
#conts.quest .tab-pannel .quest-list .quest-goods-link-data-wrap .link {
	/*pointer-events: auto;*/
}

#conts.quest .tab-pannel .quest-list .quest-goods-link-data-wrap {
    width: 64%;
    max-width: 67rem;
    position: absolute;
    top: 21.5%;
    left: 17.5%;
}

#conts.quest .tab-pannel .quest-list .quest-goods-link-data {
	width: 100%;
	height: 100%;
	display: flex;
    flex-wrap: wrap;
}
#conts.quest .tab-pannel .quest-list .quest-goods-link-data ~ .quest-goods-link-data {
    margin-top: 119%;
}

#conts.quest .tab-pannel .quest-list .quest-goods-link-data.type1 {
	justify-content: flex-start;
}

#conts.quest .tab-pannel .quest-list .quest-goods-link-data.type2 {
	justify-content: center;
}

#conts.quest .tab-pannel .quest-list .quest-goods-link-data .link {
	position: relative;
	width: calc(33.333% - 0.5rem);
	height: 0;
	padding-bottom: 10%;
}

#conts.quest .tab-pannel .quest-list .quest-goods-link-data .link a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    pointer-events: auto;
}

#conts.quest .tab-pannel .quest-list .tab-box {
	position: relative;
}

/* 나의렌즈퀘스트 */
#conts.quest .state {
	/* max-width: 100rem; */
	max-width: 104rem;
	padding: 6rem 0 10rem;
	margin: 0 auto;
	position: relative;
}

#conts.quest .state .state-list {
	position: relative;
	z-index: 1;
}

#conts.quest .state .state-list::after {
	content: '';
	background: url(/resources/assets/img/rflensworld/quest/state-table-bg03.jpg) no-repeat center center;
	background-size: cover;
	position: absolute;
	top: -4rem;
	left: 0;
	width: 100%;
	height: 12.6rem;
}

#conts.quest .state .state-list~.state-list {
	margin-top: 10rem;
}

#conts.quest .state .state-list .state-wrap {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	z-index: 1;
}

#conts.quest .state .state-list .state-head .tit {
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 140%;
	color: #ffffff;
	text-align: center;
}

#conts.quest .state .state-list .state-head+.state-body {
	padding: 4rem 2rem 0;
}

#conts.quest .state .state-list.state3 .state-body .state-swiper {
	position: relative;
}

#conts.quest .state .state-list.state3 .state-body .state-swiper .swiper-pagination {
	position: relative;
	width: auto;
	top: auto;
	bottom: auto;
	left: auto;
	right: auto;
	margin-top: 3rem;
}

#conts.quest .state .state-list.state3 .state-body .state-swiper .swiper-pagination .swiper-pagination-bullet {
	border: 1px solid #ffffff;
	opacity: 0.4;
	width: 1rem;
	height: 1rem;
	margin: 0 1rem;
	box-sizing: border-box;
	background-color: transparent;
}

#conts.quest .state .state-list.state3 .state-body .state-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: #ffffff;
	opacity: 1;
}

#conts.quest .state .state-list.state3 .state-body .state-swiper+.btn-display {
	padding-top: 6rem;
	gap: 2rem;
	justify-content: center;
}

#conts.quest .state .state-list .state-body .para {
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 140%;
	color: #c3c3c3;
	text-align: center;
}

#conts.quest .state .state-list .state-body .para+.btn-display {
	padding-top: 6rem;
	justify-content: center;
}

#conts.quest .state .state-table .state-data {
	position: relative;
}
#conts.quest .state .state-table .state-data::before,
#conts.quest .state .state-table .state-data::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(270deg, #FFFFFF -30%, rgba(30, 30, 30, 0) 3%);

}

#conts.quest .state .state-table .state-data::after {
	transform: matrix(-1, 0, 0, 1, 0, 0);
}

#conts.quest .state .state-table .state-data::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(270deg, #FFFFFF -30%, rgba(30, 30, 30, 0) 3%);
}

#conts.quest .state .state-table .data-head {
	background: #282828;
	position: relative;
}
#conts.quest .state .state-table .data-head::after {
	content: '';
	width: 100%;
	height: 0.2rem;
	background: linear-gradient(90deg, #1E1E1E 0%, #CCCCCC 56.66%, #1E1E1E 100%);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

#conts.quest .state .state-table .data-head .name-list {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

#conts.quest .state .state-table .data-head .name-list .name {
	color: #FFF;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 144%;
	padding: 1.8rem 1.4rem;
	text-align: center;
	box-sizing: border-box;
}

#conts.quest .state .state-table .data-head .name-list .name~.name {
	border-left: 1px solid #3E3E3E;
}

#conts.quest .state .state-table .data-head .name-list .name:first-child {
	width: 34%;
}

#conts.quest .state .state-table .data-head .name-list .name:nth-child(2) {
	width: 28%;
}

#conts.quest .state .state-table .data-head .name-list .name:nth-child(3) {
	width: 20%;
}

#conts.quest .state .state-table .data-head .name-list .name:nth-child(4) {
	width: 18%;
}

#conts.quest .state .state-table .data-body {
	border-top: 1px solid #3E3E3E;
}

#conts.quest .state .state-table .data-body .li-list {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	border-bottom: 1px solid #3E3E3E;
}

#conts.quest .state .state-table .data-body .li-list .item {
	padding: 2.1rem 1rem;
	box-sizing: border-box;

	display: flex;
	align-items: center;
	justify-content: center;
}

#conts.quest .state .state-table .data-body .li-list .item .text {
	color: #FFF;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 2.6rem;
}

#conts.quest .state .state-table .data-body .li-list .item~.item {
	border-left: 1px solid #3E3E3E;
}

#conts.quest .state .state-table .data-body .li-list .item:first-child {
	width: 34%;
}

#conts.quest .state .state-table .data-body .li-list .item:nth-child(2) {
	width: 28%;
}

#conts.quest .state .state-table .data-body .li-list .item:nth-child(3) {
	width: 20%;
}

#conts.quest .state .state-table .data-body .li-list .item:nth-child(4) {
	width: 18%;
}

#conts.quest .state .state-table .data-body .li-list.finish {
	background: rgba(185, 0, 0, 0.3);
}

#conts.quest .state .state-table .data-body .li-list.finish .item:nth-child(4) {
	background-color: rgba(185, 0, 0, 0.6);
	background-image: url(/resources/assets/img/rflensworld/quest/state-finish-stamp.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

#conts.quest .state .state-table .data-body .li-list.finish .item:nth-child(4) .text {
	transform: rotate(-10.51deg);
}


#conts.quest .state .state-table+.btn-display {
	padding-top: 6rem;
	justify-content: center;
	gap: 2rem;
}


/* RF 렌즈 퀘스트 현황: 250610 추가 */
#conts.quest .state .state-list.mission-section .state-head + .state-body {
	padding-top: 6.4rem;
}
#conts.quest .state .state-list.mission-section .state-body {
	position: relative;
}
#conts.quest .state .state-list.mission-section .mission-content {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14%;
}
#conts.quest .state .state-list.mission-section .mission-content .mission-badge {
	flex-shrink: 0;
}
#conts.quest .state .state-list.mission-section .mission-content .badge-img {
	width: 20rem;
	height: 20rem;
	overflow: hidden;
	aspect-ratio: 1;
}
#conts.quest .state .state-list.mission-section .mission-content .badge-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#conts.quest .state .state-list.mission-section .mission-content .badge-label {
	color: #FFF;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 150%;
}
#conts.quest .state .state-list.mission-section .mission-content .mission-stats {
	display: flex;
	align-items: center;
}
#conts.quest .state .state-list.mission-section .mission-content .mission-box {
	position: relative;
}
#conts.quest .state .state-list.mission-section .mission-content .mission-box + .mission-box {
	padding-left: 16rem;
	padding-block: 1.6rem;
}
#conts.quest .state .state-list.mission-section .mission-content .mission-box + .mission-box::before {
	content: '';
	width: 0.1rem;
	height: 20rem;
	background: #3E3E3E;
	position: absolute;
	left: 8rem;
	top: 0;
}
#conts.quest .state .state-list.mission-section .mission-content .mission-box .mission-label {
	color: #fff;
	font-size: 3rem;
	font-weight: 700;
	line-height: 140%;
	text-align: center;
	white-space: nowrap;
}
#conts.quest .state .state-list.mission-section .mission-content .mission-box .mission-label + .mission-count {
	margin-top: 3.6rem;
}
#conts.quest .state .state-list.mission-section .mission-content .mission-box .mission-count {
	color: #666;
	font-size: 6.4rem;
	font-weight: 700;
	line-height: 140%;
	text-align: center;
}
#conts.quest .state .state-list.mission-section .mission-content .mission-box .mission-count .count-active {
	color: #E02C2C;
}
#conts.quest .state .state-list.mission-section .mission-content + .mission-footer {
	margin-top: 2.4rem;
}


@media all and (max-width: 767px) {
	#conts.quest .state .state-list~.state-list {
		margin-top: 6.6rem;
	}
	/* RF 렌즈 퀘스트 현황 */
	#conts.quest .state .state-list.mission-section .state-head + .state-body {
		padding-top: 2rem;
	}
	#conts.quest .state .state-list.mission-section .mission-content {
		flex-direction: column;
		gap: 11.2rem;
	}
	#conts.quest .state .state-list.mission-section .mission-content .mission-box {
		min-width: 13rem;
	}
	#conts.quest .state .state-list.mission-section .mission-content .mission-box + .mission-box {
		padding-left: 3.2rem;
		padding-block: unset;
	}
	#conts.quest .state .state-list.mission-section .mission-content .mission-box + .mission-box::before {
		height: 9.2rem;
		left: 1.6rem;
	}
	#conts.quest .state .state-list.mission-section .mission-content .mission-box .mission-label {
		font-size: 1.8rem;
	}
	#conts.quest .state .state-list.mission-section .mission-content .mission-box .mission-label + .mission-count {
		margin-top: 0.8rem;
	}
	#conts.quest .state .state-list.mission-section .mission-content .mission-box .mission-count {
		font-size: 4.2rem;
	}
	#conts.quest .state .state-list.mission-section .mission-content + .mission-footer {
		margin-top: unset;
        position: absolute;
        top: 26.8rem;
        left: 50%;
        transform: translateX(-50%);
	}
	#conts.quest .state .state-list.mission-section .mission-footer .btn-display .btn {
		white-space: nowrap;
	}
}


/* 나의 퀘스트 현황 */
#conts.quest .tier {
	padding: 8rem 0 16rem;
	background-color: #141414;
}

#conts.quest .tier .sort-display {
	max-width: 100rem;
	margin: 0 auto;
	padding: 0 2rem;
}

#conts.quest .tier .sort-display .sort-list {
	margin-bottom: 6rem;
}

#conts.quest .tier .data-list.quest {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
}

#conts.quest .tier .data-list.quest .data-item .data-wrap {
	display: flex;
	align-items: center;
	gap: 7rem;
	padding: 5rem 6rem;
	background-color: #1e1e1e;
	border: 2px solid transparent;
	box-sizing: border-box;
	opacity: 1;
}

#conts.quest .tier .data-list.quest .data-item:not(.finish) .data-wrap:hover,
#conts.quest .tier .data-list.quest .data-item:not(.finish) .data-wrap:focus,
#conts.quest .tier .data-list.quest .data-item:not(.confirm) .data-wrap:hover,
#conts.quest .tier .data-list.quest .data-item:not(.confirm) .data-wrap:focus {
	border: 2px solid #B90000;
	background-color: #282828;
}

#conts.quest .tier .data-list.quest .data-item.finish .data-wrap,
#conts.quest .tier .data-list.quest .data-item.confirm .data-wrap {
	position: relative;
	pointer-events: none;
}

#conts.quest .tier .data-list.quest .data-item.finish .data-wrap::after,
#conts.quest .tier .data-list.quest .data-item.confirm .data-wrap::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.80);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.4rem;
	color: #ECECEC;
	text-align: center;
	z-index: 2;
}
#conts.quest .tier .data-list.quest .data-item.finish .data-wrap::after {
	content: '사은품 신청 완료';
}
#conts.quest .tier .data-list.quest .data-item.confirm .data-wrap::after {
	content: '퀘스트 완료';
}

#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info {
	width: 50%;
	max-width: 44rem;
}

#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info .title {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}

#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info .title+.date {
	margin-top: 1.2rem;
}

#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info .date {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 2.4rem;
	color: #909090;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info .date span {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 2.4rem;
	color: #C3C3C3;
}

#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info .date+.util {
	margin-top: 2.4rem;
}

#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info .util .btn-display {
	gap: 1.4rem;
	flex-wrap: wrap;
}

/* 퀘스트 스탬프 */
#conts.quest .data-stemp {
	width: 50%;
	max-width: 36rem;
}

#conts.quest .data-stemp .stemp-list {
	display: flex;
	gap: 5rem 3rem;
	flex-wrap: wrap;
	transition: 0.2s ease;
}

#conts.quest .data-stemp .stemp-list .stamp-item {
	width: 10rem;
	height: 10rem;
	border-radius: 10rem;
	background-color: #272727;
	position: relative;
	box-sizing: border-box;
	transition: 0.2s ease;
}

#conts.quest .data-stemp .stemp-list .stamp-item .goods-name {
	position: absolute;
	top: 10.8rem;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: 100%;

	color: #FFF;
	text-align: center;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: normal;
	opacity: 0.8;

	text-overflow: ellipsis;
	overflow: hidden;
	word-break: keep-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical
}

#conts.quest .data-stemp .stemp-list .stamp-item::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url(/resources/assets/img/rflensworld/quest/stamp-before.png) no-repeat center center;
	background-size: contain;
	width: 100%;
	height: 100%;
}

#conts.quest .data-stemp .stemp-list .stamp-item.complete {
	position: relative;
	background-color: #B90000;
}

#conts.quest .data-stemp .stemp-list .stamp-item.complete::after {
	background: url(/resources/assets/img/rflensworld/quest/stamp-after.png) no-repeat center center;
	background-size: contain;
}

#conts.quest .quest-detail .data-stemp {
	width: 100%;
	max-width: none;
}
#conts.quest .quest-detail .data-stemp .stemp-list {
	justify-content: end;
}

/*------------------------------------------------------------
	렌즈 퀘스트 상세
------------------------------------------------------------*/
#conts.quest .quest-detail {
	padding: 10rem 2rem 16rem;
	max-width: 100rem;
	margin: 0 auto;
}

#conts.quest .quest-detail .quest-info {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 5rem;
	border-bottom: 1px solid #D9D9D9;
}
#conts.quest .quest-detail .quest-info .quest-head {
	width: 58%;
	max-width: 58rem;
}
#conts.quest .quest-detail .quest-info .quest-head .title {
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}

#conts.quest .quest-detail .quest-info .quest-head .title+.date {
	margin-top: 0.8rem;
}

#conts.quest .quest-detail .quest-info .quest-head .date {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 2.4rem;
	color: #909090;
}

#conts.quest .quest-detail .quest-info .quest-head .date span {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 2.4rem;
	color: #C3C3C3;
}
#conts.quest .quest-detail .quest-stemp {
	min-width: 49rem;
}
#conts.quest .quest-detail .quest-body {
	position: relative;
	padding-top: 6rem;
}

#conts.quest .quest-detail .quest-body .btn-display {
	position: absolute;
	top: 65.9525%;
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 0.8rem;
}

.btn-display .btn.write,
.btn-display .btn.mypage {
	width: 21.3rem;
}

/* thumbnail list */
#conts.quest .quest-detail .quest-body img {
	width: 100%;
	display: block;
}

#conts.quest .quest-detail .quest-body+.quest-aside {
	padding-top: 8rem;
}

#conts.quest .quest-detail .quest-aside .para {
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 140%;
	color: #ffffff;
	text-align: center;
}

#conts.quest .quest-detail .quest-aside .para+.pd_wrap {
	padding-top: 4rem;
}

#conts.quest .quest-detail .quest-aside .pd_list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	align-items: stretch;
	gap: 2rem;
}

#conts.quest .quest-detail .quest-aside .pd_item {
	box-sizing: border-box;
	width: calc(100% / 3 - 1.333rem);
	background: #222;
	border: 1px solid rgba(255, 255, 255, 0.10);
}

#conts.quest .quest-detail .quest-aside .pd_item .link {
	display: block;
	width: 100%;
	height: 100%;
}

#conts.quest .quest-detail .quest-aside .pd_item .link:hover,
#conts.quest .quest-detail .quest-aside .pd_item .link:focus {
	display: block;
	opacity: unset;
}

#conts.quest .quest-detail .quest-aside .pd_item .item-figure img {
	width: 100%;
}

#conts.quest .quest-detail .quest-aside .pd_item .item-body {
	padding-top: 2rem;
	padding-bottom: 3rem;
	margin: 0 3rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	
}

#conts.quest .quest-detail .quest-aside .pd_item .name {
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 130%;
	color: #ECECEC;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: keep-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: 4.7rem;
}

#conts.quest .quest-detail .quest-aside .pd_item .name + .btn-display {
	margin-top: 3rem;
	justify-content: center;
}

#conts.quest .quest-detail .quest-aside .pd_wrap + .btn-display {
	justify-content: center;
	margin-top: 10rem;
}

/* 스탬프 4개 이상인 경우 줄바꿈 문제 : 테스트 CSS */
#conts.quest .tier .data-list.quest .data-item.type1 .data-wrap {
    gap: 2rem;
    padding: 5rem 3rem 5rem 4rem;
}
#conts.quest .tier .data-list.quest .data-item.type1 .data-wrap .data-info {
	width: 40%;
	max-width: unset;
}

#conts.quest .data-item.type1 .data-stemp .stemp-list {
	min-width: 49rem;
}

#conts.quest .data-item.type1 .data-stemp {
	width: 60%;
    max-width: unset;
    display: flex;
    justify-content: end;
}

@media all and (max-width: 1100px) and (min-width: 768px) {
	#conts.quest .tier .data-list.quest .data-item .data-wrap {
		gap: 3rem;
		padding: 5rem 3rem;
	}

	#conts.quest .tier .data-list.quest .data-item.type1 .data-wrap {
		gap: 3rem;
		padding: 4rem 3rem;
	}

	#conts.quest .data-stemp .stemp-list {
		gap: 5rem 2rem;
	}
	#conts.quest .quest-detail .quest-aside .pd_item .name + .btn-display {
		margin-top: 6%;
	}
	#conts.quest .quest-detail .quest-aside .pd_item .item-body {
		margin: 0 5%;
		padding-top: 8%;
		padding-bottom: 10%;
	}
}
@media all and (max-width: 1014px) and (min-width: 768px) {
    #conts.quest .tab-pannel .quest-list .quest-goods-link-data-wrap {
        top: 21%;
    }
	#conts.quest .tab-pannel .quest-list .quest-link-data ~ .quest-link-data {
		margin-top: 72.5%;
	}
	#conts.quest .data-item.type1 .data-stemp .stemp-list .stamp-item {
		width: 9rem;
		height: 9rem;
	}
	#conts.quest .data-item.type1 .data-stemp .stemp-list .stamp-item::after {
		width: 9rem;
		height: 9rem;
	}
	#conts.quest .data-item.type1 .data-stemp .stemp-list {
		min-width: 42rem;
	}
	#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info .title {
		font-size: 2.5rem;
	}

	/* 20240425 추가 */
	#conts.quest .tab-pannel .quest-list .quest-goods-link-data ~ .quest-goods-link-data {
		margin-top: 121%;
	}
}


@media all and (max-width: 767px) {
	#conts.quest.detail .content {
		background-color: #1e1e1e;
	}
	#conts.quest .tab-pannel {
		padding: 3rem 0 0;
	}

	#conts.quest .tab-pannel .tabSwiper {
		margin-right: -2rem;
		padding-right: 10rem;
	}

	#conts.quest .tab-pannel .tab-list {
		justify-content: flex-start;
		gap: unset;
	}

	#conts.quest .tab-pannel .tab-list li a {
		font-size: 1.8rem;
		white-space: nowrap;
	}
	#conts.quest .how {
		padding: 5rem 0;
	}
	#conts.quest .how .how-head {
		font-size: 2rem;
		margin-bottom: 2rem;
	}

	#conts.quest .how.type1 {
		padding: 5rem 2rem;
	}

	#conts.quest .how.type2 {
		padding: 5rem 0 9rem 0;
	}

	#conts.quest .how.type3 {
		padding: 5rem 0 5rem;
	}

	#conts.quest .how.type3 .btn-display {
		margin-top: 4rem;
	}
	#conts.quest .how.type3 .how-para {
		margin-top: 2rem;
	}
	#conts.quest .how.type3 .how-para .para {
		font-size: 1.6rem;
		font-weight: 400;
		line-height: 150%;
		color: #fff;
		text-align: center;
	}
	#conts.quest .how.type3 .how-para .para ~ .para {
		margin-top: 1rem;
	}

	#conts.quest .how.type2 .how-wrap~.how-wrap {
		padding-top: 5rem;
	}

	#conts.quest .how .how-figure .current-btn {
		top: 8.8%;
		right: 50%;
		width: 39%;
		height: 2%;
		transform: translateX(50%);
	}

	#conts.quest .body .key-visual .img {
		padding: unset;
	}

	#conts.quest .tier .sort-display .sortTabSwiper {
		margin-right: -2rem;
		padding-right: 7rem;
	}
	#conts.quest .tab-pannel .quest-list {
		margin: 3.7rem auto 0;
		padding-bottom: 9rem;
	}
	#conts.quest .tab-pannel .quest-list .tab-box {
		margin-top: 2rem;
		padding-bottom: 9rem;
	}
	#conts.quest .tab-pannel .quest-list .quest-link-data-wrap {
        width: 72%;
        max-width: 77rem;
        position: absolute;
        top: 1.8%;
        right: 14.5%;
	}
	#conts.quest .tab-pannel .quest-list .quest-link-data .link {
		padding-bottom: 43%;
		width: calc(33.333% - 0.1rem);
	}
	#conts.quest .tab-pannel .quest-list .quest-link-data ~ .quest-link-data {
        margin-top: 76%;
	}

	/* 내가 완성한 렌즈퀘스트 */
	#conts.quest .state {
		padding: 5rem 0;
	}
	#conts.quest .state .state-list::after {
		background: url(/resources/assets/img/rflensworld/quest/state-table-bg03-sp.jpg) no-repeat center center;
		background-size: cover;
		position: absolute;
		top: -5rem;
		left: 0;
		width: 100%;
		height: 12.6rem;
	}
	#conts.quest .state .state-list .state-head .tit {
		font-size: 2rem;
	}
	#conts.quest .state .state-list .state-body .para+.btn-display {
		padding-top: 4rem ;
	}

	#conts.quest .state .state-list .state-body .para {
		font-size: 1.4rem;
	}

	#conts.quest .state .state-table .data-head {
		display: none;
	}

	#conts.quest .state .state-table .data-body {
		border-top: 0.2rem solid #ECECEC;
	}

	#conts.quest .state .state-table .data-body .li-list {
		flex-wrap: wrap;
		padding: 1.5rem 1.6rem 1.5rem 2rem;
		border-bottom: unset;
	}

	#conts.quest .state .state-table .data-body .li-list~.li-list {
		border-top: 0.2rem solid #ECECEC;
	}

	#conts.quest .state .state-table .data-body .li-list .item {
		text-align: left;
		padding: unset;
	}

	#conts.quest .state .state-table .data-body .li-list .item~.item {
		border: unset;
	}

	#conts.quest .state .state-table .data-body .li-list .item {
		justify-content: flex-start;
	}

	#conts.quest .state .state-table .data-body .li-list .item:first-child {
		width: 100%;
		padding-bottom: 2rem;
		order: 2;
	}

	#conts.quest .state .state-table .data-body .li-list .item:nth-child(2) {
		width: 50%;
		order: 3;
	}

	#conts.quest .state .state-table .data-body .li-list .item:nth-child(3) {
		width: 60%;
		width: 50%;
		justify-content: flex-end;
		order: 4;
	}

	#conts.quest .state .state-table .data-body .li-list .item:nth-child(4) {
		order: 1;
		width: 100%;
		padding-bottom: 0.6rem;
	}

	#conts.quest .state .state-table .data-body .li-list .item:first-child .text {
		font-size: 1.8rem;
		font-weight: 700;
	}

	#conts.quest .state .state-table .data-body .li-list .item:nth-child(2) .text {
		font-size: 1.4rem;
		color: #ECECEC;
	}

	#conts.quest .state .state-table .data-body .li-list .item:nth-child(3) .text {
		font-size: 1.4rem;
		position: relative;
		color: #ECECEC;
		z-index: 1;
	}

	#conts.quest .state .state-table .data-body .li-list .item:nth-child(3) .text::before {
		content: '응모일';
		font-weight: 400;
		font-size: 1.4rem;
		line-height: 2.2rem;
		color: #aaaaaa;
		padding-right: 0.6rem;
	}

	#conts.quest .state .state-table .data-body .li-list .item:nth-child(4) .text {
		font-size: 1.4rem;
	}

	#conts.quest .state .state-table .data-body .li-list.finish {
		background: linear-gradient(97.24deg, rgba(185, 0, 0, 0.6) -6.12%, #B90000 -6.12%, rgba(185, 0, 0, 0.3) -6.1%, #B90000 117.2%);
		padding: 2.8rem 2rem 3.3rem;
		position: relative;
	}

	#conts.quest .state .state-table .data-body .li-list.finish .item:nth-child(4) {
		background-color: unset;
		background-image: url(/resources/assets/img/rflensworld/quest/state-finish-stamp-sp.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		width: 15.4rem;
		height: 12.2rem;

		position: absolute;
		top: 0;
		right: 0;
	}

	#conts.quest .state .state-table .data-body .li-list.finish .item:nth-child(4) .text {
		font-size: 0;
	}

	#conts.quest .state .state-list.state3 .state-body .state-swiper .swiper-pagination .swiper-pagination-bullet {
		width: 0.8rem;
		height: 0.8rem;
		margin: 0 0.5rem;
	}

	#conts.quest .state .state-table+.btn-display {
		padding-top: 6rem;
		justify-content: center;
		gap: 2rem;
	}
	#conts.quest .tier {
		padding: 5rem 0 9rem;
	}
	#conts.quest .tier .data-list.quest .data-item .data-wrap {
		padding: 2.4rem 2rem 6rem;
		gap: 2rem;
		flex-direction: column;
		position: relative;
	}
	#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info {
		width: 100%;
		max-width: unset;
	}

	#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info .title {
		font-size: 2.4rem;
	}
	#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info .title+.date {
		margin-top: 0.8rem;
	}
	#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info .date {
		font-size: 1.4rem;
	}
	#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info .date span {
		font-size: 1.4rem;
	}
	#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info .date+.util {
		position: absolute;
		bottom: 2.4rem;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		margin-top: unset;
	}
	#conts.quest .tier .data-list.quest .data-item .data-wrap .data-info .util .btn-display {	
		justify-content: center;
		gap: 1rem;
	}


	/* 스탬프 4개 이상인 경우 줄바꿈 문제 : 테스트 CSS */
	#conts.quest .tier .data-list.quest .data-item.type1 .data-wrap {
		padding: 2.4rem 2rem 6rem;
	}
	#conts.quest .tier .data-list.quest .data-item.type1 .data-wrap .data-info {
		width: 100%;
		max-width: unset;
	}

	#conts.quest .data-item.type1 .data-stemp .stemp-list {
        gap: 1rem 2rem;
        min-width: unset;
	}

	#conts.quest .data-item.type1 .data-stemp {
		width: 100%;
		justify-content: flex-start;
	}

	
	#conts.quest .data-stemp .stemp-list {
		gap: 2.4rem;
		margin-bottom: 3rem;
	}
	#conts.quest .data-stemp {
		width: 100%;
		max-width: unset;
	}
	#conts.quest .data-stemp .stemp-list .stamp-item {
		width: 8rem;
		height: 8rem;
	}
	#conts.quest .data-stemp .stemp-list .stamp-item.complete {
		margin-bottom: 3.8rem;
	}
	#conts.quest .data-stemp .stemp-list .stamp-item .goods-name {
		top: 8.6rem;
	}
	#conts.quest .tier .data-list.quest .data-item.finish .data-wrap::after,
	#conts.quest .tier .data-list.quest .data-item.confirm .data-wrap::after {
		font-size: 2.4rem;
	}

	/* 상세 */
	#conts.quest .quest-detail {
		padding: 5rem 0 9rem;
	}
	#conts.quest .quest-detail .quest-aside .pd_list {
		gap: 1rem;
		flex-wrap: nowrap;
	}
	#conts.quest .quest-detail .quest-aside .pd_item {
		/*width: calc(100% / 3 - 0.667rem);*/
		width: 100%;
		margin-right: unset;
	}
	#conts.quest .quest-detail .quest-aside .para {
		font-size: 2rem;
	}
	#conts.quest .quest-detail .quest-body+.quest-aside {
		padding-top: 5.7rem;
		margin: 0 2rem;
	}
	#conts.quest .quest-detail .quest-aside .para+.pd_wrap {
		padding-top: 2rem;
		padding-bottom: 2.5rem;
	}
	#conts.quest .quest-detail .quest-aside .pd_list+.btn-display {
		margin-top: 4rem;
	}
	#conts.quest .quest-detail .quest-aside .pd_wrap + .btn-display {
		margin-top: 4rem;
	}

	#conts.quest .quest-detail .quest-info {
		flex-direction: column;
		padding: 2rem;
		margin: 0 2rem;
	}
	#conts.quest .quest-detail .quest-info .quest-head {
		width: 100%;
		max-width: unset;
	}
	#conts.quest .quest-detail .quest-stemp {
		width: 100%;
		min-width: unset;
	}
	#conts.quest .quest-detail .data-stemp .stemp-list {
		justify-content: flex-start;
		margin-bottom: unset;
	}
	#conts.quest .quest-detail .quest-info {
		gap: 2rem;
	}
	#conts.quest .quest-detail .quest-info .quest-head .title {
		font-size: 2.4rem;
	}
	#conts.quest .quest-detail .quest-body {
		padding-top: 0;
	}
	#conts.quest .quest-detail .quest-info .quest-head .date,
	#conts.quest .quest-detail .quest-info .quest-head .date span {
		font-size: 1.4rem;
	}

	/* 20240425 추가 */
	#conts.quest .tab-pannel .quest-list .quest-goods-link-data-wrap {
        width: 67%;
        top: -1%;
        left: 17%;
        margin-top: 82%;
	}

	#conts.quest .tab-pannel .quest-list .quest-goods-link-data ~ .quest-goods-link-data {
        margin-top: 118%;
	}
}
@media all and (max-width: 767px) and (min-width: 601px) {
	#conts.quest .quest-detail .quest-aside .pd_item .name + .btn-display {
		margin-top: 6%;
	}
	#conts.quest .quest-detail .quest-aside .pd_item .item-body {
		margin: 0 5%;
		padding-top: 8%;
		padding-bottom: 10%;
	}
	#conts.quest .quest-detail .quest-aside .pd_item .name {
		font-size: 1.6rem;
		min-height: 4rem;
	}
}

@media all and (max-width: 600px) {
	#conts.quest .quest-detail .quest-aside .pd_list {
		flex-wrap: nowrap;
		gap: unset;
	}
	/*#conts.quest .quest-detail .quest-aside .pd_item {*/
	/*	width: 100%;*/
	/*}*/
	#conts.quest .quest-detail .quest-aside .swiper-scrollbar {
		width: 100%;
		left: auto;
		height: 0.5rem;
		background: rgba(255, 255, 255, 0.05);
	}
	#conts.quest .quest-detail .quest-aside .swiper-scrollbar .swiper-scrollbar-drag { 
		background: #000;
	}
}

/* 2024-11-07 렌즈퀘스트 플로팅 배너 추가 */
.floating-banner {position:fixed; bottom:0; width:100%; height:0; padding-bottom:10.8854166%; z-index:99; display:none;}
.floating-banner.active {display:block;}
.floating-banner-btn {position:absolute; top:25px; right:35px; width:25px; height:24px; font-size:0; line-height:0; background-image :url(/resources/assets/img/rflensworld/quest/floating-banner-btn.png); background-repeat:no-repeat; background-size:100%; z-index:99;}
.floating-banner .floating-banner-link {position:relative; display:block; width:100%; height:100%;}
.floating-banner .floating-banner-link:hover {opacity:1;}
.floating-banner .floating-banner-link .floating-banner-picture {position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%,-50%); object-fit: cover;}
.floating-banner .floating-banner-link .floating-banner-picture img {width: 100%;}

@media (max-width: 767px) {
	.floating-banner {padding-bottom:30%;}
	.floating-banner-btn {top:15px; right:15px; width:12px; height:11px;}
}


/* RF 렌즈 퀘스트 명예의 전당: 250610 추가 */
#conts.quest .user-honor-section {
	padding-block: 4rem 7.5rem;
	background: #141414;
}
#conts.quest .user-honor-section .section-inner {
	max-width: 104rem;
	margin: 0 auto;
	padding: 0 2rem;
	box-sizing: border-box;
}
#conts.quest .user-honor-section .section-inner .section-aside .info-title {
	color: #979797;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    position: relative;
    display: block;
	text-align: right;
}
#conts.quest .user-honor-section .section-inner .section-aside .info-title::after {
	content: '';
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    vertical-align: middle;
    margin-left: 0.6rem;
    background: url(/resources/assets/img/rflensworld/common/icon-help.svg) no-repeat center center;
    background-size: cover;
}
#conts.quest .user-honor-section .section-inner .section-aside + .section-info {
	margin-top: 1.6rem;
}

#conts.quest .user-honor-section .section-inner .user-rank {
    display: flex;
    /*align-items: center;*/
	align-items: flex-start;
	justify-content: space-between;
}
#conts.quest .user-honor-section .section-inner .user-rank + .user-rank {
	margin-top: 6.4rem;
}
#conts.quest .user-honor-section .section-inner .user-rank-head .rank-label {
	color: #FFF;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 120%;
}
#conts.quest .user-honor-section .section-inner .user-rank-head .rank-label + .renk-badge {
	margin-top: 2.4rem;
}
#conts.quest .user-honor-section .section-inner .user-rank .user-rank-head .renk-badge {
	width: 24rem;
    height: 24rem;
	aspect-ratio: 1;
	flex-shrink: 0;
}
#conts.quest .user-honor-section .section-inner .user-rank .user-rank-head .renk-badge img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#conts.quest .user-honor-section .section-inner .user-rank .user-rank-body {
	padding-bottom: 1.2rem;
	width: 100%;
	max-width: 66rem;
	min-height: 21.6rem;
    background: rgba(34, 34, 34, 0.80);
	margin-top: 60px;
}
#conts.quest .user-honor-section .section-inner .user-rank .user-rank-body .user-list {
	padding: 3rem 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: 2rem;
}
#conts.quest .user-honor-section .section-inner .user-rank .user-rank-body .user-list .user-item {
	width: 33.333%;
    color: #C3C3C3;
    font-size: 2rem;
    font-weight: 500;
    line-height: 2.4rem;
    position: relative;
    padding-inline: 4.8rem;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    box-sizing: border-box;
}
#conts.quest .user-honor-section .section-inner .user-rank .user-rank-body .user-list .user-item::before {
	content: '';
    width: 2px;
    height: 100%;
    background-color: #B90000;
    position: absolute;
    left: 3.8rem;
    top: 0;
}


@media (max-width: 767px) {
	/* RF 렌즈 퀘스트 명예의 전당: 250610 추가 */
	#conts.quest .user-honor-section {
		padding-block: 5rem 9rem;
	}
	#conts.quest .user-honor-section .section-inner .section-aside + .section-info {
		margin-top: 2.4rem;
	}
	#conts.quest .user-honor-section .section-inner .user-rank {
		flex-direction: column;
		align-items: center;
	}
	#conts.quest .user-honor-section .section-inner .user-rank + .user-rank {
		margin-top: 4rem;
	}
	#conts.quest .user-honor-section .section-inner .user-rank-head {
		display: flex;
		flex-direction: column-reverse;
	}
	#conts.quest .user-honor-section .section-inner .user-rank-head .rank-label {
		font-size: 2rem;
		text-align: center;
	}
	#conts.quest .user-honor-section .section-inner .user-rank-head .rank-label + .renk-badge {
		margin-top: unset;
	}
	#conts.quest .user-honor-section .section-inner .user-rank .user-rank-head .renk-badge {
		width: 14.4rem;
		height: 14.4rem;
	}
	#conts.quest .user-honor-section .section-inner .user-rank .user-rank-head + .user-rank-body {
		margin-top: 2.4rem;
	}
	#conts.quest .user-honor-section .section-inner .user-rank .user-rank-body {
		padding-bottom: unset;
		width: 100%;
		min-height: unset;
        max-width: unset;
		margin-top: unset;
	}
	#conts.quest .user-honor-section .section-inner .user-rank .user-rank-body .user-list {
		padding: 3rem;
		row-gap: 1rem;
		width: 100%;
	}
	#conts.quest .user-honor-section .section-inner .user-rank .user-rank-body .user-list .user-item {
		width: 100%;
		color: #C3C3C3;
		font-size: 1.6rem;
		padding-inline: unset;
		padding-left: 1.2rem;
	}
	#conts.quest .user-honor-section .section-inner .user-rank .user-rank-body .user-list .user-item::before {
		content: '';
		width: 2px;
		height: 100%;
		background-color: #B90000;
		position: absolute;
		left: 0;
		top: 0;
	}
}