@charset "UTF-8";
@import "https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Rubik:wght@400;500;600;700;800;900&display=swap');

::selection {
	color:#fc79a6;}

::-webkit-scrollbar {
	width:5px;
	height:5px;
	background:#ffddef;}

::-webkit-scrollbar-thumb {
	background:#fc79a6;}

* {
	font-family: 'Noto Sans KR', sans-serif;
	font-size:13px;
	line-height:180%;
	box-sizing:border-box;
	word-break:break-all;}

h2, h2[data-ke-size] {
	font-size:18px !important;
	font-weight:700 !important;}

h3, h3[data-ke-size] {
	font-size:16px !important;
	font-weight:500 !important;}

h4, h4[data-ke-size] {
	font-size:14px !important;}

a {
	color:#000;
	text-decoration:none;}

a:hover {
	color:#fc79a6;
	transition-duration:0.5s;}

input, textarea {
	outline:none;}

body,p,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,blockquote,th,td,input,select,textarea,button {
	list-style:none;
	margin:0;
	padding:0;
	outline:0;}

fieldset,img, button {
	border:0;
	background:none;
	outline:none;}
	
textarea {
	height:90px !important;
	transition:0.3s;}

textarea:focus,
input:focus {
	outline:0;
	border:0;}

img, iframe, embed, video, object, table {
	max-width:100%;}

body {
	max-width:100%;
	overflow-x:hidden;
	margin:0;
	padding:0;
	background-color:#f3d57f;}

body:before {
	content:'';
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:-2;
	background:url(./images/bg2.jpg) no-repeat;
	background-position:center top !important;}

.back {
	position:fixed;
	z-index:-1;
	display:none;}

.back.b1 {
	top:-100px;
	right:6%;
	animation:turn 1s linear infinite;}

.back.b2 {
	top:-50px;
	left:2%;
	animation:turn2 1s linear infinite;}

.back.b3 {
	left:-60px;
	bottom:0;
	animation:turn 1s linear infinite;}

.back.b4 {
	right:-38px;
	bottom:1%;
	animation:turn2 1s linear infinite;}

.back.b5 {
	top:10%;
	left:13%;
	animation:zoom 2s linear infinite;}

.back.b6 {
	right:20%;
	bottom:10%;
	animation:zoom 2s linear infinite;}

@keyframes turn {
	0% {transform:rotate(0);}
	50% {transform:rotate(-15deg);}
	0% {transform:rotate(0);}
}

@keyframes turn2 {
	0% {transform:rotate(0);}
	50% {transform:rotate(15deg);}
	0% {transform:rotate(0);}
}

@keyframes zoom {
	0% {transform:scale(1);}
	50% {transform:scale(1.2);}
	100% {transform:scale(1);}
}

#main {
	width:340px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
	display:none;}

#main .logo img {
	width:240px;}

#main nav {
	text-align:center;
	margin:60px 0;}

#main nav ul {
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	gap:16px;
	grid-template-columns:1fr 1fr;}

#main nav li a {
	display:block;
	font-family: 'Rubik', sans-serif;
	font-size:13px;
	font-weight:800;
	background:#fff;
	padding:25px 0;
	border-radius:20px;
	border:solid #000 2px;
	position:relative;}

#main nav li a:before {
	content:'';
	width:100%;
	height:50px;
	border-radius:20px;
	background:#fc79a6;
	border:solid #000 2px;
	position:absolute;
	left:-2px;
	right:0;
	bottom:-6px;
	z-index:-1;}

#main nav li:last-child a {
	background:#fc79a6;
	color:#fff;}

footer {
	font-size:8px;
	font-weight:800;
	font-family: 'Rubik', sans-serif;}

footer a {
	font-size:8px;
	font-family: 'Rubik', sans-serif;}

#cosmo {
	width:90%;
	max-width:800px;
	margin:0 auto;}

header {
	text-align:center;
	padding:100px 0 40px;}

header .logo img {
	width:200px;}

#content {
	background:#fff;
	border:solid #000 2px;
	border-radius:20px;
	padding:30px;
	position:relative;}

#content:before {
	content:'';
	width:100%;
	height:50px;
	border-radius:20px;
	background:#fc79a6;
	border:solid #000 2px;
	position:absolute;
	left:-2px;
	right:0;
	bottom:-6px;
	z-index:-1;}

#cosmo footer {
	text-align:center;
	padding:40px 0 60px;}

.set {
	position:fixed;
	top:40px;
	right:40px;
	z-index:9;}

.set a {
	display:inline-block;
	width:52px;
	height:52px;
	border-radius:50%;
	background:#fff;
	border:solid #000 2px;
	margin-left:15px;}

.set i {
	font-size:20px;
	line-height:50px;}

/*갤러리형 목록*/
.cosmo_gal {
	width:100%;}

.cosmo_gal ol {
	display:grid;
	gap:20px;
	grid-template-columns:1fr 1fr 1fr;}

.cosmo_gal li {
	position:relative;}

.cosmo_gal li .thumb {
	width:100%;
	position:relative;}

.cosmo_gal li .thumb img {
	display:block;
	position:absolute;
	top:0;
	z-index:1;
	border:solid #000 2px;
	border-radius:10px;
	line-height:0;
	margin:0;
	padding:0;}

.cosmo_gal li .thumb .noimg {
	position:relative;
	z-index:0;}
	
.cosmo_gal li img {
	width:100%;
	display:none;}
	
.cosmo_gal li .info_wrap {
	width:100%;
	text-align:center;
	padding:10px 0;
	text-align:center;
	word-wrap:break-word;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;}

/*텍스트형 목록*/
.cosmo_text .thumb img {
	display:none;}

.cosmo_text li {
	border-top:solid #000 2px;}

.cosmo_text li:last-child {
	border-bottom:solid #000 2px;}

.cosmo_text .info_wrap {
	width:100%;
	height:54px;
	line-height:54px !important;
	text-overflow:ellipsis;
	white-space:nowrap;
	word-wrap:normal;
	overflow:hidden;}

.info_wrap img {
	display:none;
	width:15px !important;}

.list_empty {
	text-align:center;
	padding:120px 0;}

/*본문*/
#article_wrap {
	clear:both;
	text-align:center;}
	
#article_wrap .title {
	width:100%;
	line-height:180%;
	font-size:15px !important;
	font-weight:600;
	padding:10px 0;}
	
#article_wrap .title span {
	display:block;
	font-weight:400;
	font-size:8px !important;}

#article_wrap .title span a {
	font-size:8px !important;}

#article_wrap .content {
	padding:30px 0 0;
	text-align:left;}

/*인용구*/
#article_wrap .content blockquote {
	text-align:left;
	font-weight:bold;
	border:solid #000 1px;
	margin:0;
	padding:8px 15px;}

/*더보기*/
.btn-toggle-moreless, .btn_more, .btn_less, .txt_fold {
	text-align:left;
	margin:0 !important;
	height:auto !important;
	color:#000 !important;
	outline:none !important;
	font-size:12px !important;
	line-height:15px !important;}

div .btn-toggle-moreless:before,
div .btn_more:before{
	font-family:'xeicon' !important;
	content:'\e942';
	padding-right:5px;
	color:#000 !important;}

.btn_less::before,
.btn_more::before {
	font-family:'xeicon' !important;
	content:'\e942';
	padding-right:5px;
	line-height:15px !important;}

div.open .btn-toggle-moreless:before,
div.open .btn_less:before {
	font-family:'xeicon' !important;
	content:'\e945';
	padding-right:5px;
	line-height:15px !important;}

.moreless_content {
	text-align:left;
	border:0 !important;
	padding:0 !important;}

.moreless_content .btn_less,
.txt_fold {
	margin:0 !important;}

.moreless_content .btn_less:last-child {
	display:none;}

/*공감신고*/
.container_postbtn {
	padding:20px 0 0 !important;}

.container_postbtn .postbtn_like {
	border-color:#eee !important;
	border-radius:0 !important;
	padding:0 !important;}

.container_postbtn .btn_menu_toolbar {
	width:70px !important;
	border-radius:0 !important;
	border-color:#eee !important;}

/*태그리스트*/
.etc_wrap {
	clear:both;
	display:flex;}

dl.taglist {
	flex:4;
	padding:15px 0;;}

.comment_open {
	flex:1;
	text-align:right;
	padding:15px 0;}

/*댓글리스트 및 게스트*/
#comment {
	display:none;
	clear:both;
	position:relative;}

/* 댓글쓰기 */
#comment .comment_form {
	clear:both;}

.comment_form .c_info {
	display:grid;
	gap:5px;
	grid-template-columns:1fr 1fr;
	margin:0 0 10px;}

.comment_form .c_info input {
	width:100%;
	height:26px;
	border:solid #000 2px;
	text-align:center;}

.comment_form textarea {
	width:100%;
	padding:15px;
	border:solid #000 2px;}

.comment_form .w_wrap {
	text-align:right;
	margin:10px 0;}

.comment_form .w_wrap label {
	padding:0 15px;}
 
.comment_form .w_wrap input.checkbox { 
	display:none;}

.comment_form .w_wrap label#secret:before {
	font-family:'xeicon' !important;
	content:'\e965';}

.comment_form  .w_wrap input.checkbox:checked + #secret:before {
	font-family:'xeicon' !important;
	content:'\e964';}
	
.comment_form button {
	width:100px;
	height:26px;
	line-height:26px !important;
	border:solid #fc79a6 1px;
	background:#fc79a6;
	color:#fff;
	font-size:10px !important;}

.comment_list {
	clear:both;
	margin:0 0 15px;}

.comment_list li {
	width:100%;
	position:relative;
	line-height:180%;
	border-top:solid #000 2px;}

.comment_list li:last-child {
	border-bottom:solid #000 2px;}

.comment_list li li:last-child {
	border-bottom:0 !important;}

.comment_list .rp_info {
	width:100%;
	padding:15px 0 0;}

.comment_list .image {
	width:48px;
	height:48px;
	float:left;
	margin:0 15px 0 0;}

.comment_list .image img {
	display:block;
	width:100%;
	height:100%;
	border-radius:50%;}

.comment_list .name {
	font-weight:700;
	padding:0 5px 0 0;}

.comment_list .date {
	font-size:10px !important;
	padding:0 15px 0 0;
	font-family: 'Rubik', sans-serif !important;}

.comment_list .control a {
	font-size:10px !important;}

.comment_list .rp_c {
	padding:10px 0 15px;}

.comment_list .reply_w {
	background:rgba(0,0,0,0.02);}

/*보호글*/
.protected_form {
	width:280px;
	margin:35px auto;
	clear:both;}

.protected_form .wrap {
	width:100%;
	height:46px;
	border-top:solid #000 2px;
	border-bottom:solid #000 2px;
	padding:10px 0;}

.protected_form .left {
	float:left;
	width:50px;
	height:24px;
	padding:6px 0 0;
	text-align:center;
	border-right:solid #000 2px;}

.protected_form .right {
	width:220px;
	float:right;
	padding-left:10px;
	text-align:center;}

.protected_form .secret_input {
	width:100%;
	height:24px;
	line-height:24px;
	border:0;
	padding:0 10px;
	background:none !important;
	font-size:8px !important;}

.protected_form button {
	width:100%;
	clear:both;
	margin:10px 0 0;
	height:34px;
	line-height:30px !important;
	border:solid #fc79a6 1px;
	background:#fc79a6;
	color:#fff;
	font-size:10px !important;
	text-align:center;
	font-weight:700;}
	
/*공지*/
#notice_wrap {
	width:100%;
	position:relative;
	overflow:hidden;
	line-height:180%;}

/* 페이징 */
#paging {
	text-align:center;
	clear:both;
	padding:20px 0;}

#paging a {
	font-size:8px !important;}

#paging .page_num span,
#paging i {
	display:inline-block;
	padding:0 6px;
	font-size:8px !important;}

#paging .no-more-prev,
#paging .no-more-next {
	display:none;}

#paging .page_num .selected {
	color:#fc79a6;
	font-weight:bold;}

@media screen and (max-width:1460px){
body:before {
	background-size:1460px auto !important;}

.back.b1 {
	width:150px;
	top:-60px;}

.back.b2 {
	width:114px;
	top:-50px;}

.back.b3 {
	width:100px;
	left:-40px;}

.back.b4 {
	width:80px;
	right:-30px;}

.back.b5 {
	width:100px;}

.back.b6 {
	width:100px;}
}

@media screen and (max-width:1060px){
body:before {
	background-size:1160px auto !important;}

.back.b1 {
	width:120px;
	right:0%;}

.back.b2 {
	width:90px;
	left:-10px;}

.back.b3 {
	width:90px;
	left:-20px;
	bottom:-20px;}

.back.b4 {
	width:80px;
	right:-30px;}

.back.b5 {
	width:80px;
	top:15%;
	left:5%;}

.back.b6 {
	width:80px;
	right:5%;
	bottom:15%;}

#main nav li a {
	padding:20px 0;}
	
.set {
	right:5%;}

.set a {
	width:44px;
	height:44px;
	margin-left:10px;}

.set i {
	font-size:16px;
	line-height:42px;}

header {
	padding:80px 0 30px;}

header .logo img {
	width:180px;}

#cosmo footer {
	padding:30px 0 60px;}
	
.cosmo_gal ol {
	grid-template-columns:1fr 1fr;}
}

@media screen and (max-width:660px){
body:before {
	background-size:960px auto !important;}

.back.b1 {
	width:90px;
	top:-40px;}

.back.b2 {
	width:70px;
	top:-30px;
	left:-30px;}

.back.b3 {
	width:70px;}

.back.b4 {
	width:60px;}

.back.b5,
.back.b6 {
	width:60px;}

#main {
	width:280px;}

#main .logo img {
	width:160px;}

#main nav {
	margin:30px 0;}

#main nav ul {
	gap:15px;}

#main nav li a {
	font-size:12px;
	padding:15px 0;}

header {
	padding:70px 0 30px;}

header .logo img {
	width:140px;}

.set {
	top:20px;}

.set a {
	width:34px;
	height:34px;
	margin-left:6px;}

.set i {
	font-size:14px;
	line-height:32px;}
	
#content {
	padding:20px;}

#cosmo footer {
	padding:30px 0 50px;}
}