@charset "utf-8";

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


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

.log-board-wrap {display:block; position:relative;}
.log-board-wrap .empty-list {text-align:center; padding:100px 0; opacity:.5; border:1px solid var(--point_color); border-left-width:0; border-right-width:0;}

.campaign-list-slider {display:block; position:relative;}
.campaign-list-slider + .campaign-list-slider {margin-top:50px;}
.campaign-list-slider .category-title {display:block; position:relative; font-size:25px; margin:20px 0;}
.campaign-list-slider .swiper-button-prev,
.campaign-list-slider .swiper-button-next {display:block; position:absolute; top:0; bottom:0; width:100px; height:100%; text-indent:-999px; overflow:hidden; margin:0; opacity:0;}
.campaign-list-slider .swiper-button-prev:hover,
.campaign-list-slider .swiper-button-next:hover {opacity:1;}
.campaign-list-slider .swiper-button-prev {left:0; background:linear-gradient(90deg, var(--shadow_color) 0%, var(--shadow_color2)) 100%;}
.campaign-list-slider .swiper-button-next {right:0; background:linear-gradient(-90deg, var(--shadow_color) 0%, var(--shadow_color2)) 100%;}
.campaign-list-slider .swiper-button-prev.swiper-button-disabled,
.campaign-list-slider .swiper-button-next.swiper-button-disabled {opacity:0;}
.campaign-list-slider .slider {display:block;  position:relative;}
.campaign-list-slider .slider .swiper-slide {width:auto; max-width:80%;}

.campaign-list {overflow:hidden;}
.campaign-list > .list {margin:0 -10px; text-align:center;}
.campaign-list > .list > li {display:inline-block; width:auto; max-width:50%; box-sizing:border-box;}

.campaign-slider-item {max-width:100%; padding:10px;}
.campaign-slider-item .frame {display:block; position:relative; border-radius:20px; overflow:hidden;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
.campaign-slider-item .frame .pad {display:block; position:relative;}
.campaign-slider-item .frame .pic,
.campaign-slider-item .frame .pic > * {display:block; position:absolute; top:0; left:0; right:0; bottom:0;}
.campaign-slider-item .frame .pic > em {background:no-repeat 50% 50%; background-size:cover;}

/*캠페인 리스트 커버*/
.campaign-slider-item .frame .has-img + .cover {top:70%; background:linear-gradient(0, var(--shadow_color) 0%, var(--shadow_color2)) 100%;}
.campaign-slider-item .frame .has-img + .cover * {color:#eaeaea;
opacity:0.8;}
.campaign-slider-item .frame:hover .has-img + .cover {top:0;}

.campaign-slider-item .frame .pic .cover > * {display:table; width:100%; height:100%; table-layout:fixed;}
.campaign-slider-item .frame .pic .cover > * > * {display:table-cell; text-align:center; vertical-align:middle;}

.campaign-slider-item .frame {border:1px solid var(--point_color); background:var(--bg_color);}
.campaign-slider-item.img-frame .frame {border-width:0;}
.campaign-slider-item .frame .subject {display:block; padding:1em; font-size:16px; word-break:break-all; text-align:center;}



@media all and (max-width:1024px) {
	.campaign-list-slider .category-title {font-size:20px; margin:15px 0;}
	.campaign-slider-item .frame .subject {font-size:15px;}
}
@media all and (max-width:640px) {
	.campaign-list-slider .category-title {font-size:18px;}
	.campaign-slider-item .frame .subject {font-size:14px;}
}
@media all and (max-width:420px) {
	.campaign-list > .list > li {max-width:100%;}
}


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

/*캠페인 정보*/
.campaignViewer {
    display:block; 
    position:relative; 
    overflow:hidden; 
    min-height:80vh; 
    line-height:1.8; 
    border-radius:3em; 
    overflow:hidden; 
    /*background:var(--bg_color); */
    z-index:0;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
}

.campaignViewer .visual-box {
    display:block; 
    position:relative; 
    padding-top:350px; 
    padding-bottom:40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));}

.campaignViewer .roll20-log{
    padding:1.5em;
    background-color: rgba(255, 255 ,255 , .6);
}

.campaignViewer .visual-box.no-visual {padding-top:100px;}
.campaignViewer .visual-box .bak {position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0)) 100%; z-index:-1;}
.campaignViewer .visual-box .bak img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);}

.campaignViewer .camp-default-info {
    display:block; 
    position:relative; 
    padding:20px 40px; 
    /*text-shadow: 0px 0px 10px var(--shadow_color);*/
    word-break:keep-all;}

/*캠페인 이름*/
.campaignViewer .camp-default-info .subj {
    display:block; 
    position:relative; 
    text-shadow: 0px 0px 2px rgba(0,0,0,0.6);
    color:#eaeaea;
    font-size:40px; 
    font-weight:800; 
    line-height:1.2; 
    margin-bottom:.3em;}

/*캠페인 설명 요약*/
.campaignViewer .camp-default-info .sub-text {
    display:block; 
    position:relative; 
    font-size:16px;
    color: #ffffff;
    margin-bottom:10px; 
    opacity:.6;}

/*캠페인 설명*/
.campaignViewer .camp-default-info .txt {
    font-size:14px;
    color: #eaeaea;
    opacity:.6;}

.campaignViewer .action-box {padding:15px 0;}
.campaignViewer .tab-log-content {display:block; position:relative; padding:0 40px 50px;}

@media all and (max-width:820px) {
	.campaignViewer {margin:-80px -20px 0; border-radius:0;}
	.campaignViewer .visual-box {padding-top:200px; padding-bottom:20px;}
	.campaignViewer .camp-default-info {padding:20px;}
	.campaignViewer .tab-log-content {padding:0 20px 50px;}
}
@media all and (max-width:640px) {
	.campaignViewer .camp-default-info .subj {font-size:30px;}
	.campaignViewer .camp-default-info .sub-text {font-size:15px;}
	.campaignViewer .camp-default-info .txt {font-size:1em;}
}
@media all and (max-width:520px) {
	.campaignViewer {margin:-80px -10px 0;}
	.campaignViewer .camp-default-info {padding:10px;}
	.campaignViewer .tab-log-content {padding:0 10px 30px;}
}

.campaignViewer .tab-log-content .tabs {display:block; position:relative; overflow:hidden; z-index:0; margin-bottom:20px;}
.campaignViewer .tab-log-content .tabs:after {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.campaignViewer .tab-log-content .tabs li {display:block; position:relative; float:left;}
.campaignViewer .tab-log-content .tabs a {display:block; position:relative; font-size:16px; padding:.8em 1em; opacity:.6;}
.campaignViewer .tab-log-content .tabs a:after {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:0px; background:var(--point_color);}
.campaignViewer .tab-log-content .tabs li + li {margin-left:1.5em;}
.campaignViewer .tab-log-content .tab-content .tab-con {display:none; min-height:300px;}
.campaignViewer .tab-log-content[data-tabs="E"] .tabs a[data-tabs="E"],
.campaignViewer .tab-log-content[data-tabs="C"] .tabs a[data-tabs="C"],
.campaignViewer .tab-log-content[data-tabs="R"] .tabs a[data-tabs="R"] {opacity:1;}
.campaignViewer .tab-log-content[data-tabs="E"] .tabs a[data-tabs="E"]:after,
.campaignViewer .tab-log-content[data-tabs="C"] .tabs a[data-tabs="C"]:after,
.campaignViewer .tab-log-content[data-tabs="R"] .tabs a[data-tabs="R"]:after {height:3px;}
.campaignViewer .tab-log-content[data-tabs="E"] .tab-content .tab-con[data-tabs="E"],
.campaignViewer .tab-log-content[data-tabs="C"] .tab-content .tab-con[data-tabs="C"],
.campaignViewer .tab-log-content[data-tabs="R"] .tab-content .tab-con[data-tabs="R"] {display:block;}

@media all and (max-width:640px) {
	.campaignViewer .tab-log-content .tabs a {font-size:15px;}
}
@media all and (max-width:520px) {
	.campaignViewer .tab-log-content .tabs a {font-size:14px;}
}

.campaignViewer .tab-con .no-data {display:block; position:relative;}
.campaignViewer .tab-con .no-data:after {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.campaignViewer .tab-con .no-data > * {display:block; padding:5em 0 6em; text-align:center; opacity:.6; font-size:14px;}

.campaignViewer .comment-data-box .modify {display:none; border-left:3px solid var(--default_color); padding-left:10px;}
.campaignViewer .comment-data-box.mod .modify {display:block;}

.addEpisodeWrap,
.addCharacterWrap,
.addReviewWrap {display:none !important;}
.addEpisodeWrap.open,
.addCharacterWrap.open,
.addReviewWrap.open {display:block !important;}

.campaign-write-form {display:block; position:relative; padding:20px 0; margin-top:20px; z-index:0;}
.campaign-write-form dl {display:table; width:100%; table-layout:fixed; margin:0;}
.campaign-write-form dl > * {display:table-cell; vertical-align:middle; padding:5px 10px;}
.campaign-write-form dl dt {width:65px; color: #8a8a8a;}
.campaign-write-form .control {text-align:center; padding-top:20px;}
.campaign-write-form .control .ui-btn {min-width:200px;}


.campaignViewer .roll20-log .log {
    padding:20px; 
    background:#f1f1f1;
    margin-top:10px; 
    border-radius:1em;}

.campaignViewer .roll20-log .log #textchat {color:var(--font_color);
font-size: 1.05em;}

.campaignViewer .roll20-log .textchatcontainer .message .spacer {background:var(--default_color); opacity:.05;}


/**********************************************
	Campaign Viewer
**********************************************/
/*리스트 캠페인 정보*/
.campaignViewer_li {
    display:block; 
    position:relative; 
    overflow:hidden; 
    min-height:80vh; 
    line-height:1.8; 
    border-radius:3em; 
    overflow:hidden; 
    background:var(--bg_color);
    z-index:0;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
}

.campaignViewer_li .visual-box {
    display:block; 
    position:relative; 
    padding-top:350px; 
    padding-bottom:40px;}

.campaignViewer_li .roll20-log{
    padding:1.5em;
    background-color: rgba(255, 255 ,255 , .6);
}

.campaignViewer_li .visual-box.no-visual {padding-top:100px;}
.campaignViewer_li .visual-box .bak {position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0)) 100%; z-index:-1;}
.campaignViewer_li .visual-box .bak img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);}

.campaignViewer_li .camp-default-info {
    display:block; 
    position:relative; 
    padding:20px 40px; 
    /*text-shadow: 0px 0px 10px var(--shadow_color);*/
    word-break:keep-all;}

/*캠페인 이름*/
.campaignViewer_li .camp-default-info .subj {
    display:block; 
    position:relative; 
    text-shadow: 0px 0px 2px rgba(0,0,0,0.6);
    color:#eaeaea;
    font-size:40px; 
    font-weight:800; 
    line-height:1.2; 
    margin-bottom:.3em;}

/*캠페인 설명 요약*/
.campaignViewer_li .camp-default-info .sub-text {
    display:block; 
    position:relative; 
    font-size:16px;
    color: #ffffff;
    margin-bottom:10px; 
    opacity:.6;}

/*캠페인 설명*/
.campaignViewer_li .camp-default-info .txt {
    font-size:14px;
    color: #eaeaea;
    opacity:.6;}

.campaignViewer_li .action-box {padding:15px 0;}
.campaignViewer_li .tab-log-content {display:block; position:relative; padding:0 40px 50px;}

@media all and (max-width:820px) {
	.campaignViewer_li {margin:-80px -20px 0; border-radius:0;}
	.campaignViewer_li .visual-box {padding-top:200px; padding-bottom:20px;}
	.campaignViewer_li .camp-default-info {padding:20px;}
	.campaignViewer_li .tab-log-content {padding:0 20px 50px;}
}
@media all and (max-width:640px) {
	.campaignViewer_li .camp-default-info .subj {font-size:30px;}
	.campaignViewer_li .camp-default-info .sub-text {font-size:15px;}
	.campaignViewer_li .camp-default-info .txt {font-size:1em;}
}
@media all and (max-width:520px) {
	.campaignViewer_li {margin:-80px -10px 0;}
	.campaignViewer_li .camp-default-info {padding:10px;}
	.campaignViewer_li .tab-log-content {padding:0 10px 30px;}
}

.campaignViewer_li .tab-log-content .tabs {display:block; position:relative; overflow:hidden; z-index:0; margin-bottom:20px;}
.campaignViewer_li .tab-log-content .tabs:after {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.campaignViewer_li .tab-log-content .tabs li {display:block; position:relative; float:left;}
.campaignViewer_li .tab-log-content .tabs a {display:block; position:relative; font-size:16px; padding:.8em 1em; opacity:.6;}
.campaignViewer_li .tab-log-content .tabs a:after {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:0px; background:var(--point_color);}
.campaignViewer_li .tab-log-content .tabs li + li {margin-left:1.5em;}
.campaignViewer_li .tab-log-content .tab-content .tab-con {display:none; min-height:300px;}
.campaignViewer_li .tab-log-content[data-tabs="E"] .tabs a[data-tabs="E"],
.campaignViewer_li .tab-log-content[data-tabs="C"] .tabs a[data-tabs="C"],
.campaignViewer_li .tab-log-content[data-tabs="R"] .tabs a[data-tabs="R"] {opacity:1;}
.campaignViewer_li .tab-log-content[data-tabs="E"] .tabs a[data-tabs="E"]:after,
.campaignViewer_li .tab-log-content[data-tabs="C"] .tabs a[data-tabs="C"]:after,
.campaignViewer_li .tab-log-content[data-tabs="R"] .tabs a[data-tabs="R"]:after {height:3px;}
.campaignViewer_li .tab-log-content[data-tabs="E"] .tab-content .tab-con[data-tabs="E"],
.campaignViewer_li .tab-log-content[data-tabs="C"] .tab-content .tab-con[data-tabs="C"],
.campaignViewer_li .tab-log-content[data-tabs="R"] .tab-content .tab-con[data-tabs="R"] {display:block;}

@media all and (max-width:640px) {
	.campaignViewer_li .tab-log-content .tabs a {font-size:15px;}
}
@media all and (max-width:520px) {
	.campaignViewer_li .tab-log-content .tabs a {font-size:14px;}
}

.campaignViewer_li .tab-con .no-data {display:block; position:relative;}
.campaignViewer_li .tab-con .no-data:after {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.campaignViewer_li .tab-con .no-data > * {display:block; padding:5em 0 6em; text-align:center; opacity:.6; font-size:14px;}

.campaignViewer_li .comment-data-box .modify {display:none; border-left:3px solid var(--default_color); padding-left:10px;}
.campaignViewer_li .comment-data-box.mod .modify {display:block;}

.addEpisodeWrap,
.addCharacterWrap,
.addReviewWrap {display:none !important;}
.addEpisodeWrap.open,
.addCharacterWrap.open,
.addReviewWrap.open {display:block !important;}

.campaign-write-form {display:block; position:relative; padding:20px 0; margin-top:20px; z-index:0;}
.campaign-write-form dl {display:table; width:100%; table-layout:fixed; margin:0;}
.campaign-write-form dl > * {display:table-cell; vertical-align:middle; padding:5px 10px;}
.campaign-write-form dl dt {width:65px;}
.campaign-write-form .control {text-align:center; padding-top:20px;}
.campaign-write-form .control .ui-btn {min-width:200px;}


.campaignViewer_li .roll20-log .log {
    padding:20px; 
    background:#f1f1f1;
    margin-top:10px; 
    border-radius:1em;}

.campaignViewer_li .roll20-log .log #textchat {color:var(--font_color);
font-size: 1.05em;}

.campaignViewer_li .roll20-log .textchatcontainer .message .spacer {background:var(--default_color); opacity:.05;}

/**********************************************
	Episode
**********************************************/

.item-episode {display:block; position:relative; padding:20px 0;}
.item-episode + .item-episode:before {content:""; display:block; position:absolute; left:0; right:0; top:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.episode-list {display:table; width:100%; table-layout:fixed;}
.episode-list > * {display:table-cell; position:relative; vertical-align:middle;}
.episode-list .thumb {width:220px;}
.episode-list .thumb a {display:block; position:relative; border-radius:15px; overflow:hidden; padding-top:60%;}
.episode-list .thumb a img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.episode-list .desc .subj {display:block; position:relative; font-size:16px; font-weight:800; margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.episode-list .desc .txt {display:block; opacity:.6; line-height:1.4em;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/*목록 날짜*/
.episode-list .desc .date {
    display:inline-block; 
    vertical-align:middle; 
    margin-top:.5em; 
    color:#8a8a8a;}

.episode-list .control {display:inline-block; vertical-align:middle; margin-top:.5em; margin-left:.5em;}
.episode-list .control a {line-height:20px !important; height:20px !important; font-size:11px !important;}
.episode-list .control a + a {margin-left:5px;}

.episode-list .thumb ~ .desc {padding-left:20px;}

/*목록 내용 미리보기*/
.episode-list .thumb ~ .desc .txt {
    height:2.8em; 
    display:-webkit-box; 
    -webkit-box-orient:vertical; 
    -webkit-line-clamp:2; 
    white-space:normal; 
    color:#eaeaea;}


@media all and (max-width:520px) {
	.episode-list .thumb {width:150px;}
	.episode-list .desc .subj {margin-bottom:10px;}
}


/**********************************************
	Character
**********************************************/

.item-character {display:block; position:relative; padding:20px 0;}
.item-character + .item-character:before {content:""; display:block; position:absolute; left:0; right:0; top:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.character-list {display:table; width:100%; table-layout:fixed;}
.character-list > * {display:table-cell; position:relative; vertical-align:middle;}
.character-list .thumb {width:80px; vertical-align:top;}
.character-list .thumb > * {display:block; position:relative; border-radius:15px; overflow:hidden; padding-top:100%; border-radius:100%; border:1px solid var(--default_color);}
.character-list .thumb > * img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.character-list .thumb ~ .desc {padding-left:20px;}

/*등장인물 캐릭터 이름*/
.character-list .desc .subj {
    display:block; 
    position:relative; 
    font-size:16px; 
    font-weight:800; 
    color: #eaeaea;
    margin-bottom:5px; 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;}

/*등장인물 캐릭터 설명*/
.character-list .desc .txt {
    display:block; 
    opacity:.6; 
    color: #eaeaea;
    line-height:1.4em;}

.character-list .desc .date {display:inline-block; vertical-align:middle; margin-top:.5em;}
.character-list .control {display:inline-block; vertical-align:middle; margin-left:.5em; line-height:1;}
.character-list .control a {line-height:20px !important; height:20px !important; font-size:11px !important;}
.character-list .control a + a {margin-left:5px;}


/**********************************************
	Review
**********************************************/

.item-review {
    display:block; 
    position:relative;
    color: #eaeaea;
    padding:20px 0;}

.item-review + .item-review:before {content:""; display:block; position:absolute; left:0; right:0; top:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.review-list {display:table; width:100%; table-layout:fixed;}
.review-list > * {display:table-cell; position:relative; vertical-align:middle;}

/*리뷰 닉네임*/
.review-list .name {
    width:80px; 
    vertical-align:top; 
    color:var(--effect-point2);}

.review-list .name ~ .desc {padding-left:20px;}
.review-list .desc .txt {display:block; opacity:.6; line-height:1.4em;}

/*리뷰 날짜*/
.review-list .desc .date {
    display:inline-block; 
    vertical-align:middle; 
    margin-top:.5em; 
    color:#8a8a8a;}

.review-list .control {display:inline-block; vertical-align:middle; margin-top:.5em; margin-left:.5em;}
.review-list .control a {line-height:20px !important; height:20px !important; font-size:11px !important;}
.review-list .control a + a {margin-left:5px;}