@charset "utf-8";

.btn_confirm {padding:3em 0; text-align:center;}

/** Thumb Frame */
.character-card-frame {display:block; position:relative; width:100%; z-index:0;}
.character-card-frame .pad {position:relative; z-index:-1;}
.character-card-frame .pic {display:block; position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; background:transparent; border:none;
	-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.3);
	-moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.3);
	box-shadow:0 0 10px 0 rgba(0,0,0,0.3);
}
.character-card-frame button.pic {width:100%; height:100%;}
.character-card-frame .pic > em {display:block; position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); background:no-repeat 50% 50%; background-size:cover;}
.character-card-frame .pic.over > em {transform:translate(-50%, -50%) scale(1.1); -webkit-transform:translate(-50%, -50%) scale(1.1);}
.character-card-frame .pic .cover {display:block; position:absolute; left:0; right:0; bottom:0; top:0; font-size:16px; overflow:hidden;  transform:translateY(100%); -webkit-transform:translateY(100%); transition:.3s all; -webkit-transition:.3s all;}
.character-card-frame .pic .cover > * {display:table; width:100%; height:100%;}
.character-card-frame .pic .cover > * > * {display:table-cell; vertical-align:middle; text-align:center;}
.character-card-frame .pic .cover .subject,
.character-card-frame .pic .cover .sub-subject {display:block; position:relative;font-size:1em; word-break:keep-all; line-height:1.2; padding:0 1.5em; text-align:center;}
.character-card-frame .pic .cover .sub-subject {font-size:.8em; opacity:.6;}

.character-card-frame a.pic:hover > em {transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); opacity:.2;}
.character-card-frame .pic .cover.fix,
.character-card-frame a.pic:hover .cover {transform:translate(0); -webkit-transform:translate(0);}

@media all and (max-width:740px) {
	.character-card-frame .pic .cover {font-size:15px;}
}
@media all and (max-width:540px) {
	.character-card-frame .pic .cover{font-size:14px;}
}
@media all and (max-width:430px) {
	.character-card-frame .pic .cover {font-size:13px;}
}


/***********************************************
	List
***********************************************/

/** Category */
#bo_sch {text-align:center;}
#bo_cate {text-align:center;}
#bo_cate li {display:inline-block; vertical-align:middle; margin:0.2em;}
#bo_cate li a {border-radius:9em;}

/** List */
.character-board-wrap {position:relative; max-width:850px; margin:0 auto;}
.character-card-list {display:block; position:relative; text-align:center; padding:20px 0; overflow:hidden;}
.character-card-list li {display:inline-block; position:relative; max-width:47%; padding:5px; box-sizing:border-box;}



/***********************************************
	Viewer
***********************************************/

#bo_v {position:relative; z-index:0; max-width:850px; margin:0 auto; padding-bottom:30px;}

#character_sheet_wrap {overflow:auto;}

@media all and (min-width:801px) { 
	.board-sheet-background {position:absolute; top:0; left:0; right:0; bottom:0; z-index:-9; background:no-repeat 100% 0%; background-size:contain; opacity:.2; text-align:center; transition:.3s opacity; -webkit-transition:.3s opacity;}
	.board-sheet-background img {display:none; position:relative; margin:0 auto;}
}
@media all and (max-width:800px) { 
	.board-sheet-background {display:none;}
	.board-sheet-background img {display:block; max-width:80%; margin:0 auto;}
}
.board-sheet-background.popup {display:block; position:fixed; max-height:none; top:0; left:0; right:0; bottom:0; z-index:99999; overflow:auto; backdrop-filter: blur(2px); opacity:1; background:transparent !important;}
.board-sheet-background.popup img {display:block; max-width:none;}
.board-default-profile {display:block; position:relative;}
.board-default-profile .thumb {max-width:100%; margin:0 auto;}
.board-default-profile .con {padding-top:20px;}
.board-default-profile .name {font-size:1.2em; text-align:center;}
.board-default-profile .name span {display:block; opacity:.6; margin-bottom:.2em;}
.board-default-profile .name strong {display:inline-block; font-size:1.5em; margin-bottom:.2em;}
.board-default-profile .name strong i {display:block; height:.2em;}
.board-default-profile .info {display:block; text-align:center; margin:.3em 0 1em;}
.board-default-profile .info span {display:inline-block; vertical-align:middle;}
.board-default-profile .info span + span:before {content:" / ";}
.board-default-profile .desc {margin:1em 0;}

.board-sub-tit {font-weight:800; padding-bottom:1em;}
.board-sub-tit:before {content:"◆ "; font-weight:800;}
.board-sub-tit.off:before {content:"◇ ";}

.board-viewer-section {margin:3em 0;}
.board-viewer-section-content {transition:none; -webkit-transition:none;}


/***********************************************
	세션 기록
***********************************************/

#bo_vc {padding-top:1em; margin-bottom:1em;}
#bo_vc article {position:relative; }
#bo_vc article .inner {position:relative; padding:1em 0;}
#bo_vc article .control {display:inline-block;}
#bo_vc article .control .ui-btn {font-size:11px; padding:0; height:auto; line-height:1.5em; width:1.7em; text-align:center; border-radius:100%;}

#bo_vc_w  {margin-bottom:1em;}
#bo_vc_w .comment-write-box,
#bo_vc .comment-write-box {height:auto; padding:.3em .5em .5em; margin:.3em 0;}
#bo_vc_w .comment-write-box .guest-box,
#bo_vc .comment-write-box .guest-box {display:table; width:100%; table-layout:fixed;}
#bo_vc_w .comment-write-box .guest-box > *,
#bo_vc .comment-write-box .guest-box > * {display:table-cell; vertical-align:top; padding-right:.5em;}
#bo_vc_w .comment-write-box .guest-box input[type="text"],
#bo_vc_w .comment-write-box .guest-box input[type="password"],
#bo_vc .comment-write-box .guest-box input[type="text"],
#bo_vc .comment-write-box .guest-box input[type="password"] {width:100%;}
#bo_vc_w .comment-write-box .guest-box .last,
#bo_vc .comment-write-box .guest-box .last {padding-right:0;}
#bo_vc_w .comment-write-box .textarea,
#bo_vc .comment-write-box .textarea {position:relative; padding-right:50px;}
#bo_vc_w .comment-write-box textarea,
#bo_vc .comment-write-box textarea {border-radius:0; border-width:0; border-top-width:1px; background:transparent; outline:0;}
#bo_vc_w .comment-write-box .textarea .btn_confirm,
#bo_vc .comment-write-box .textarea .btn_confirm {position:absolute; top:0; right:0; width:40px; bottom:0; padding:0;}
#bo_vc_w .comment-write-box .textarea .btn_confirm .ui-btn,
#bo_vc .comment-write-box .textarea .btn_confirm .ui-btn {width:100%; height:100%; padding:0;}

#bo_vc  .reply-marker {display:block; position:absolute; top:0; bottom:0; left:-.2em; width:3px; transform:translateX(-100%); -webkit-transform:translateX(-100%);}


/***********************************************
	캐릭터 시트
***********************************************/

#character_sheet_control {text-align:right; padding-top:.5em;}
#character_sheet_wrap * {outline:0;}

#character_sheet .repcontainer {position:relative;}
#character_sheet .repitem {position:relative;}
#character_sheet .repitem .itemcontrol {display:none; position:absolute; top:0; left:0; right:0; bottom:0; z-index:100;}
#character_sheet .repitem .itemcontrol button {display:block; position:relative; width:100%; height:100%; background:red !important; border-radius:4px; color:#fff !important; opacity:.5;}
#character_sheet .repcontainer.editmode .repitem .itemcontrol {display:block;}
#character_sheet .repcontrol {overflow:hidden;}
#character_sheet .repcontrol .repcontrol_edit {float:right;}

#character_sheet .repcontrol {display:block; position:relative; overflow:hidden; background:#000; border-radius:9em; font-size:11px; opacity:.7;}
#character_sheet .repcontrol:before {content:""; display:block; position:absolute; width:1px; top:5px; bottom:5px; left:50%; background:#fff; opacity:.5;}
#character_sheet .repcontrol > * {height:20px; line-height:20px; padding:0 10px !important; font-size:11px; font-weight:400; color:#fff; background:#000; border:none;}