@charset "utf-8";


/** Notice Box **/
.board-notice	{ max-width: 430px; height:265px; padding: 45px 35px 40px; margin: 50px auto 30px; text-align: center; }



.qna-box		{ overflow: hidden; }

.ui-qna-list li ul li p.announce {padding: 20px;background: #eee;border-radius: 12px;color:#aaa;margin:0;}
.ui-option					{ clear: both; padding-bottom: 10px;  font-weight: 800; letter-spacing: 1px; }
.ui-write-box				{ margin: 0 auto; width: 100%; overflow: hidden; }
.ui-write-box textarea		{ width: 100%; height: 100px; padding: 10px; box-sizing: border-box; }
.ui-control					{ padding: 6px 0 0; overflow: hidden; text-align: right; }

.ui-write-area.top			{ margin-bottom: 20px; }

.ui-qna-list					{ position: relative; clear: both;  background: white; padding: 20px 16px; } 



.ui-qna-list li					{ position: relative; }
.ui-qna-list li header {display:flex; align-items:center; gap:8px;}
.ui-qna-list > ul > li			{margin:20px 0; }
.ui-qna-list li p				{ clear: both; line-height: 1.5em; overflow: hidden; }
.ui-qna-list li p i				{ position: relative; font-style: normal; padding-right: 10px; margin-right: 5px;    }
.ui-qna-list li p em			{ font-style: normal; margin-right: 20px; }
.ui-qna-list li p strong a		{ display: inline-block; font-size:9px; font-family: 'Dotum'; padding: 2px 5px; font-weight: normal; }
.ui-qna-list li span.date:before {content:'·';}
.ui-qna-list li .qna-content			{ padding:8px 0; line-height: 1.8em; }
.ui-qna-list li .qna-comment-content	{ padding: 12px 4px;line-height: 1.8em; }

.ui-qna-list li ul				{  }
.qna-list {}

#page_board_content h2 {position:absolute; font-family:'Galmuri11'; color:#322a46;}
#page_board_content h2:hover{animation: buzz linear 0.2s infinite;}

@keyframes buzz {25% {transform: translateX(4px) rotate(3deg);} 50% {transform: translateX(-4px) rotate(-3deg);} 75% {transform: translateX(4px) rotate(3deg);}}

/**TWITTER SKIN**/
#page_board_content {padding:0 100px; background:url('./img/background.png');border-radius: 12px; background-attachment: fixed; background-size: cover;}
#page_board_content_inner {background:white; padding:20px 12px;}
.twitter-li{border-bottom: 1px solid #ccc; font-family:'Galmuri11';}
.twitter-li-in{display:flex; gap:12px;}
.profile-icon {width: 48px; border-radius: 50%; border: 1px solid #ADB6FF;  overflow: hidden;}
.open-more { position: absolute;    right: 0;    top: -8px; cursor:pointer; color:#1b0844; padding:4px; border-radius:50%; height:25px;}
.open-more:hover {background:#eceefc; color:#adb8fc;}
.twitter-more {position:absolute; display:none; right: 0; box-shadow:rgba(101, 119, 134, 0.2) 0px 0px 15px, rgba(101, 119, 134, 0.15) 0px 0px 3px 1px; padding:}
.twitter-more a {background:white; color:#444; padding: 12px; display:block;}
.twitter-more a:hover {background:#eee;}

.twitter-icon-fx { padding: 0 60px;  margin-bottom: 20px;  display: grid;  grid-auto-flow: column; align-items: center;}
.twitter-icon-fx img {margin-right:4px; vertical-align: sub;}
.twitter-icon-fx span{font-size:10px;}

.wr_content::placeholder, #content::placeholder {font-size:16px; color:#8d98a0;}

.not-admin {filter:grayscale(1); opacity:.3; cursor:default;}

/**화살표**/
.reply-arrow {
  position: absolute;
  display: inline-block;
  width: 28px;
  height: 2px;
  margin: 6.9px 0;
  --arrow-color:#d3d9fd;
  background-color: var(--arrow-color);
    left: 20px;
    top: 40px;
}

.reply-arrow::before,
.reply-arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 1.5px);
  right: 0;
  width: 12px;
  height: 2px;
  background-color: var(--arrow-color);
  transform-origin: calc(100% - 1px) 50%;
}

.reply-arrow::before {
  transform: rotate(45deg);
}

.reply-arrow::after {
  transform: rotate(-45deg);
}

.reply-arrow > div {
background: var(--arrow-color);
    position: absolute;
    width: 2px;
	height: 40px;
    top: -38px;
}

/** IMG BOX **/
.ui-top {margin:20px 0 8px;display: flex;align-items: flex-start;gap: 20px;}
.preview-profile {overflow:hidden; border-radius:50%; width:60px;}
.ui-profile-icon {display: flex; align-items: center; gap: 8px;  margin-bottom: 16px; position:relative; z-index:2;}

.select-icon { width:62px; height: 62px;overflow: hidden; position:relative;}
.select-icon li:before { content:'프로필 사진 선택'; color:#fff; display:flex; align-items:center; justify-content:center; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:1; pointer-events:none; border-radius:100%; opacity:0; text-align: center; word-break: keep-all; }
.select-icon li:hover:before { opacity:1; }
.select-icon.on {overflow:visible; width:196px;}
.profile-select {display:none;}
.select-icon li {height:60px;border-radius: 50%;border: 1px solid #ccc;overflow: hidden; width:60px; display:inline-block; position:relative;}
.select-icon label {display:block;width:60px;}

#empty_box{position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:1; display:none; cursor:pointer;}
#empty_box.on {display:block;}

@media all and (max-width: 460px) { 
	.qna-list {padding-right:0;}
	.ui-qna-list li ul			{ margin-left: 0px; }
}
.ui-qna-list li ul li			{margin:5px 0; padding:15px;  padding: 15px 52px;}
.ui-qna-list li ul li p					{ padding-top: 16px; }
.ui-qna-list li ul li strong			{ float: right; }

.ui-qna-list .ui-qna-list-password label		{ padding-right: 10px; }
.ui-qna-list .ui-qna-list-password label.blur	{ text-shadow: none; }
.ui-qna-list .ui-qna-list-password input		{ position: relative; z-index: 1; }
.ui-qna-list .ui-qna-list-password button		{ 
	height: 28px; line-height: 28px; padding: 0 25px;
	font-family: 'Dotum'; margin-left: -5px; border-left-width: 0;

}

@media all and (max-width: 370px) {
	.ui-qna-list .ui-qna-list-password		{ position: relative; padding-right: 90px; }
	.ui-qna-list .ui-qna-list-password .ui-submit	{ position: absolute; top: 0; right: 0; width: 90px; }
	.ui-qna-list .ui-qna-list-password input		{ width: 100%; }
}

.ui-qna-list li div.ui-write-area					{ padding: 10px 0; background: transparent; background: none; border: none; }
.ui-qna-list li div.ui-write-area button			{ white-space:nowrap; height: 28px; line-height: 28px; padding: 0 25px; margin-top: 5px; }
.ui-qna-list li div.ui-write-area textarea			{
	width: 100%;
	height: 100px;
	padding: 10px;
	box-sizing: border-box;
	border: none;
	word-break: break-all;
}
.ui-qna-list .no-data			{ text-align: center; line-height: 100px; padding-bottom: 50px; }

.search-box			{ clear: both;     text-align: right; margin-bottom: 10px; }

.ui-control input[type="text"],
.ui-control input[type="password"]	{ margin-bottom: 5px; }

@media all and (max-width: 535px) {
	.ui-control button	{ display: block; clear: both; width: 100%; }
}
@media all and (max-width: 435px) {
	.ui-control input[type="text"],
	.ui-control input[type="password"]	{ display: block; clear: both; width: 100%; }
	.ui-qna-list	{ padding: 10px 0; }
}

@media all and (max-width: 380px) {
	.ui-qna-list .ui-qna-list-password label	{ display: none; }
}