@charset "utf-8";



#wrap {
	position: relative;
	max-width: 1160px;
	width: 100%;
	margin: 0 auto;
}


#loading_img {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
    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(16, 16, 16), rgb(16, 16, 16)), conic-gradient(from 180deg at 50% 50%, #FFA200 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 {
	display: flex;
	padding: 16px;
	box-sizing: border-box;
	margin-bottom: 15px;
	min-height: 58px;
}
.title_area .prev {
    position: absolute;
    top: 18px;
    left: 16px;
}



.not_scroll {
	overflow: hidden;
}




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








.modal {
	display: none;
}
.black_bg {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 10;
}
.modal .modal_cont {
    width: 90%;
    max-width: 600px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));
    max-height: 95vh;
    overflow: hidden;
	z-index: 12;
	background: #212121;
	border-radius: 8px;
	padding: 30px 20px;
	box-sizing: border-box;
}
.modal .modal_cont .scroll {
	max-height: 80vh;
    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;
}
.modal .modal_cont .scroll::-webkit-scrollbar {
    display: none;
}
.modal .close {
	position: fixed;
	top: 20px; 
	right: 20px;
	z-index: 16;
}
.modal .close img {
	vertical-align: middle;
}

.modal .modal_cont {
	background: #2C2C35;
	padding-bottom: 10px;
}
.modal .black_bg {
	display: block;
}
.modal h3 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 10px;
}
.modal p {
	font-size: 13px;
	color: #C3C2C7;
}
.modal .btn_area {
	margin-top: 25px;
}
.modal .btn_area button {
	flex: 1;
	text-align: center;
	color: #D5D5D7;
	font-size: 13px;
	font-weight: 700;
	padding: 14px 0;
}
.modal .btn_area button.y_txt {
	color: #F8B303;
}

.input_modal h3 {
	margin-bottom: 0;
}
.input_modal input {
	display: block;
	width: 100%;
	height: 37px;
	background: #FEFEFE;
	border-radius: 4px;
	margin-top: 15px;
	padding: 0 10px;
	box-sizing: border-box;
}
.input_modal textarea {
	display: block;
	width: 100%;
	height: 45px;
	border: 0;
	resize: none;
	margin: 15px 0 10px;
	background: #FEFEFE;
	border-radius: 4px;
	font-size: 13px;
	padding: 12px 8px;
	box-sizing: border-box;
}
.input_modal .btn_area {
    margin-top: 5px;
}


#send_pop .step02 {
	display: none;
}
#send_pop textarea {
	display: block;
	width: 100%;
	height: 45px;
	border: 0;
	resize: none;
	margin: 15px 0 10px;
	background: #FEFEFE;
	border-radius: 4px;
	font-size: 13px;
	padding: 12px 8px;
	box-sizing: border-box;
}
#send_pop .desc {
	font-size: 10px;
	color: #62626D;
}
#send_pop .btn_area {
    margin-top: 15px;
}
#send_pop .btn_area .cherry {
	color: #F8B303;
}



#profile_pop .modal_cont {
	padding: 32px 16px;
}
#profile_pop .modal_cont > div {
	margin-bottom: 32px;
}
#profile_pop .top .thumb {
	position: relative;
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 8px;
	overflow: hidden;
	margin-right: 12px;
}
#profile_pop .top .thumb img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#profile_pop .top .info {
	flex: 1;
}
#profile_pop .top .info strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #FEFEFE;
}
#profile_pop .top .info p {
	font-size: 13px;
	color: #FEFEFE;
	opacity: 0.5;
	margin-top: 5px;
}
#profile_pop h4 {
	font-size: 12px;
	color: #fff;
	font-weight: 700;
	margin-bottom: 8px;
}
#profile_pop .desc {
	font-size: 13px;
	color: #FEFEFE;
}
#profile_pop .desc div {
    color: #C3C2C7;
    font-size: 12px;
    line-height: 1.5;
}
#profile_pop .hobby .flex {
	flex-wrap: wrap;
}
#profile_pop .hobby span {
	background: #111111;
	border: 0.8px solid #373A3C;
	border-radius: 38px;
	font-size: 13px;
	color: #FEFEFE;
	margin-right: 4px;
	padding: 3px 18px 5px 10px;
	box-sizing: border-box;
}
#profile_pop .send_btn {
	display: block;
	width: 100%;
	height: 45px;
	background: #222128;
	border-radius: 4px;
	color: #F8B303;
	font-size: 14px;
	font-weight: 700;
}
#profile_pop .send_btn img {
	vertical-align: -4px;
	margin-left: 8px;
}





.alarm {
	display: none;
	position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1160px;
    bottom: 135px;
    z-index: 16; 
    background: rgba(44, 44, 53, 0.3);
    backdrop-filter: blur(35px);
    border-radius: 16px;
	font-size: 13px;
	font-weight: 400;
	padding: 20px 36px;
	box-sizing: border-box;
}
.alarm div {
	flex: 1;
}
.alarm button {
	font-size: 13px;
	color: #F8B303;
}

.not_scroll {
	overflow: hidden;
}




.bottom_modal {
	
}
.bottom_modal .modal_cont {
	position: fixed;
	bottom: -100%;
	left: 50%;
	transform: translateX(-50%);
	transition: bottom .3s;
	width: 100%;
    max-width: 1160px;
	max-height: 95vh;
	z-index: 12;
	background: #212121;
	padding: 30px 17px;
	box-sizing: border-box;
}
.bottom_modal.open .modal_cont {
	bottom: 0;
}


#thumb_pop .black_bg {
	background: rgba(0, 0, 0, 0.8);
}
#thumb_pop .modal_cont {
	background: transparent;
	text-align: center;
	padding: 0;
}
#thumb_pop .modal_cont img {
	max-width: 500px;
}



#footer {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1160px;
	background: #18171C;
	border-top: 1px solid #242328;
}
#footer ul {
	padding: 10px 0;
}
#footer ul li {
	flex: 1;
	text-align: center;
}
#footer ul li a {
	display: block;
    padding-top: 25px;
	font-size: 10px;
	color: #62626D;
	font-weight: 500;
}
#footer ul li.on a {
	color: #FEFEFE;
}
#footer ul li.ft01 a {
	background: url("../images/ico-ft01.svg")no-repeat 50% 0 / 24px;
}
#footer ul li.ft01.on a {
	background: url("../images/ico-ft01-on.svg")no-repeat 50% 0 / 24px;
}
#footer ul li.ft02 a {
	background: url("../images/ico-ft02.svg")no-repeat 50% 0 / 24px;
}
#footer ul li.ft02.on a {
	background: url("../images/ico-ft02-on.svg")no-repeat 50% 0 / 24px;
}
#footer ul li.ft03 a {
	background: url("../images/ico-ft03.svg")no-repeat 50% 0 / 24px;
}
#footer ul li.ft03.on a {
	background: url("../images/ico-ft03-on.svg")no-repeat 50% 0 / 24px;
}
#footer ul li.ft04 a {
	background: url("../images/ico-ft04.svg")no-repeat 50% 0 / 24px;
}
#footer ul li.ft04.on a {
	background: url("../images/ico-ft04-on.svg")no-repeat 50% 0 / 24px;
}



.btn {
	display: block;
	background: #2C2C35;
	border-radius: 4px;
	width: 100%;
	height: 52px;
	font-size: 16px;
	font-weight: 500;
	color: #C3C2C7;
}
.btn.on {
	background: #F8B303;
	color: #18171C;
}





@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 380px) {
}