@charset "utf-8";


#wrap {
	max-width: 1024px;
	margin: 0 auto;
}

.inner {
	position: relative;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
	margin: 0 auto;
}


#header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 1024px;
	z-index: 15;
	background: var(--white);
	margin: 0 auto;
	box-sizing: border-box;
}
#header .logo {
	padding: 15px 10px;
	font-size: 2.4rem;
	font-family: 'Jalnan';
	box-sizing: border-box;
}

#container {
	width: 100%;
	padding-bottom: 100px;
}



#footer_fix {
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1024px;
	box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.10);
	background: var(--white);
	z-index: 90;
	padding: 10px 16px;
	box-sizing: border-box;
}
#footer_fix ul li {
	flex: 1;
	text-align: center;
}
#footer_fix ul li a {
	position: relative;
	display: block;
	width: 100%;
	font-size: 1.2rem;
	font-weight: 600;
	padding-top: 30px;
	color: #767676;
	letter-spacing: -0.24px;
}
#footer_fix ul li.active a {
	color: var(--black);
}
#footer_fix ul li.ft01 a {
	background: url("../images/ft01.svg")no-repeat 50% 0;
}
#footer_fix ul li.ft01.active a {
	background: url("../images/ft01_on.svg")no-repeat 50% 0;
}
#footer_fix ul li.ft02 a {
	background: url("../images/ft02.svg")no-repeat 50% 0;
}
#footer_fix ul li.ft02.active a {
	background: url("../images/ft02_on.svg")no-repeat 50% 0;
}
#footer_fix ul li.ft03 a {
	background: url("../images/ft03.svg")no-repeat 50% 0;
}
#footer_fix ul li.ft03.active a {
	background: url("../images/ft03_on.svg")no-repeat 50% 0;
}

#review_btn {
    position: fixed;
    bottom: 80px;
    left: calc(50% - -365px);
    z-index: 5;
}
#review_btn a {
	padding: 12px 20px;
	border-radius: 50px;
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: -0.36px;
	gap: 8px;
	box-sizing: border-box;
}
#review_btn a:after {
	content: '';
	width: 24px;
	height: 24px;
	background: url("../images/ic_write.svg")no-repeat 50% 50% / 100%;
}



.modal {
	display: none;
}
.modal .black_bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100;
}
.modal .modal_cont {
    width: 90%;
    max-width: 765px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-height: 95vh;
    overflow: hidden;
	z-index: 101;
	background: #fff;
	border-radius: 10px;
}
.modal .modal_cont .scroll {
	position: relative;
	max-height: calc(95vh - 57px);
    overflow-x: hidden;
    overflow-y: visible;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
	padding: 16px;
	box-sizing: border-box;
}
.modal .modal_cont .scroll::-webkit-scrollbar {
    display: none;
}
.modal .close {
	position:absolute;
	top: 16px;
	right: 16px;
	z-index: 1;
	width: 18px;
	height: 18px;
	background: url("../images/ic_close.svg")no-repeat 50% 50% / 100%;
}
.modal h3 {
	font-size: 2rem;
	margin-bottom: 15px;
	padding: 20px 15px 0;
}
.modal .cont {
	font-size: 1.6rem;
	white-space: pre-line;
	line-height: 1.4;
}
.modal .btn_area {
	margin-top: 30px;
	gap: 10px;
}
.modal .btn_area > * {
	display: block;
	width: 100%;
	height: 46px;
	line-height: 46px;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 500;
	border-radius: 5px;
}


.not_scroll {
	overflow: hidden;
}


#loading_img {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
    background-color : rgba(16, 16, 16, 0.7);
}
#loading_img span {
	position: absolute;
    top: 50%;
    left: 50%;
	display: block;
	height: 60px;
	width: 60px;
	border: 5px solid transparent;
    border-radius: 50%;
    background-image: linear-gradient(rgb(90, 90, 90), rgb(90, 90, 90)), conic-gradient(from 180deg at 50% 50%, var(--key-color) 0deg, rgba(255, 255, 255, 0) 360deg);
    background-origin: border-box;
    background-clip: content-box, border-box;
	box-sizing: border-box;
	animation: spin 800ms infinite linear;
}

@keyframes spin {
	from {
		transform: translate(-50%,-50%) rotate(0deg);
	}
	to {
		transform: translate(-50%,-50%) rotate(359deg);
	}
}


#title_area {
	position: sticky;
	top: 0;
	width: 100%;
	max-width: 1024px;
	z-index: 15;
	background: var(--white);
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
	box-sizing: border-box;
}
#title_area h3 {
	padding: 15px 10px;
	font-size: 2.4rem;
	letter-spacing: -0.48px;
	box-sizing: border-box;
}
#title_area a {
	color: #767676;
	font-size: 1.8rem;
	letter-spacing: -0.36px;
}
#title_area button {
	color: var(--blue);
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: -0.36px;
}
#title_area .prev {
	position: absolute;
	top: 15px;
	left: 20px;
	width: 24px;
	height: 24px;
	background: url("../images/arrow-left.svg")no-repeat 50% 50%;
}




.review_list .item {
	padding: 40px 0;
	border-bottom: 1px solid #E9E9E9;
	gap: 16px;
	box-sizing: border-box;
}
.review_list .item .btn_area {
	justify-content: end;
	gap: 16px;
}
.review_list .item .btn_area a {
	font-size: 1.6rem;
}
.review_list .item .btn_area a.del_btn {
	color: #767676;
}
.review_list .item .btn_area a.modify_btn {
	color: var(--white);
	background: var(--blue);
	border-radius: 8px;
	padding: 6px 12px;
	box-sizing: border-box;
}
.review_list p + .item {
	padding-top: 8px;
}
.review_list .item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.review_list .item .title {
	color: #000;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.4px;
}
.review_list .item .img {
	position: relative;
	gap: 4px;
	display: grid;
}
.review_list .item .img > div {
	position: relative;
	height: 0;
	padding-bottom: 100%;
	border-radius: 8px;
	overflow: hidden;
}
.review_list .item .img > div img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.review_list .item .img.grid2 {
	grid-template-columns: repeat(2, calc((100% / 2) - 0px));
}
.review_list .item .img.grid3 {
	grid-template-columns: repeat(3, calc((100% / 3) - 3px));
}
.review_list .item .img.grid3 > div:nth-child(1) {
    grid-area: 1 / 3 / 3 / 1;
}
.review_list .item .img.grid4 {
    grid-template-columns: repeat(4, calc((100% / 4) - 3px));
}
.review_list .item .img.grid4 > div:nth-child(1) {
    grid-area: 1 / 3 / 3 / 1;
}
.review_list .item .img.grid4 > div:nth-child(2) {
    grid-area: 1 / 3 / 2 / 5;
	padding-bottom: 49%;
}
.review_list .item .img.grid5 {
    grid-template-columns: repeat(4, calc((100% / 4) - 3px));
}
.review_list .item .img.grid5 > div:nth-child(1) {
    grid-area: 1 / 3 / 3 / 1;
}
.review_list .item .img.more {
    grid-template-columns: repeat(4, calc((100% / 4) - 3px));
}
.review_list .item .img.more > div:nth-child(1) {
    grid-area: 1 / 3 / 3 / 1;
}
.review_list .item .img.more > span {
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(25% - 3px);
    height: calc(50% - 2px);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}
.review_list .item .img.more > span em {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: block;
	width: 100%;
	text-align: center;
	color: #A5A5A5;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.4px;
}
.review_list .item .cont {
	font-size: 1.4rem;
	line-height: 1.5;
	letter-spacing: -0.28px;
}
.review_list .item .cont .user {
	padding-top: 12px;
}
.review_list .item .cont .user span {
	position: relative;
	color: #767676;
	font-size: 1.4rem;
	letter-spacing: -0.28px;
	padding-right: 6px;
	margin-right: 6px;
}
.review_list .item .cont .user span:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: block;
	width: 1px;
	height: 12px;
	background: #d9d9d9;
}
.review_list .item .cont .user span:last-child {
	margin-right: 0;
	padding-right: 0;
}
.review_list .item .cont .user span:last-child:after {
	display: none;
}
.review_list .item .cont .user .star {
	position: relative;
	flex-flow: row-reverse;
    justify-content: center;
	gap: 5px;
}
.review_list .item .cont .user .star input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	z-index: -1;
}
.review_list .item .cont .user .star label {
	position: relative;
	width: 17px;
    height: 17px;
	background: url("../images/star_off.png")no-repeat 50% 50% / 100%;
}
.review_list .item .cont .user .star .half {
	display: none;
	left: 35px;
    margin-left: -35px;
}
.review_list .item .cont .user .star input:checked ~ label { 
	background: url("../images/star_on.png")no-repeat 50% 0 / 100%;
} 
.review_list .item .cont .user .star input:checked + label.half {
	display: block;
	background: url("../images/star_half.png")no-repeat 50% 0 / 100%;
}
.review_list .item .tag {
	gap: 4px;
}
.review_list .item .tag > div {
	padding: 8px 12px;
	gap: 4px;
	border-radius: 8px;
	border: 1px solid #DFDFDF;
	background: var(--white);
	font-size: 1.4rem;
	box-sizing: border-box;
}
.review_list .item .tag > div p {
	color: #777;
}


#thumb_pop .close {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-color: #fff;
    background-size: 16px;
    background-position: 50% 50%;
    border-radius: 50%;
    border: 1px solid #e1e1e1;
    z-index: 3;
    box-sizing: border-box;
}
#thumb_pop .modal_cont {
	width: 90%;
	max-height: 96vh;
	padding: 0;
	border-radius: 0;
	background: transparent;
}
#thumb_pop .modal_cont .scroll {
	padding: 0;
	margin-top: 25px;
	max-height: calc(96vh - 25px);
}
#thumb_pop .swiper-slide {
	height: 0;
	padding-bottom: 100%;
	border-radius: 10px;
	overflow: hidden;
}
#thumb_pop .swiper-slide img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#thumb_pop .swiper-pagination-bullet-active {
	background: var(--key-color);
}



@media screen and (min-width: 1025px) {
}
@media screen and (max-width: 1024px) {
	#review_btn {
		left: auto;
		right: 15px;
	}
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 380px) {
}