마지막 업데이트 22.11.19
개인 기록용으로 업로드합니다.
HTML
<!doctype html>
<html lang="ko">
<head>
<title>공지사항</title>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="No-Cache"/>
<meta http-equiv="Pragma" content="No-Cache"/>
<meta name="viewport" content="width=device-width">
<meta name="keywords" Content="공지사항"/>
<meta name="theme-color" content="#ffffff"/>
<meta name="robots" content="All"/>
<meta name="robots" content="index,follow"/>
<meta name="Subject" content="공지사항"/>
<meta name="author" content="마이클 존"/>
<meta name="writer" content="마이클 존"/>
<meta name="publisher" content="마이클 존"/>
<meta name="copyright" content="©2021 마이클 존®. All Rights Reserved."/>
<link rel="canonical" href="https://1-3-2-5-writing.tistory.com/"/>
<link rel="alternate" hreflang="x-default" href="https://1-3-2-5-writing.tistory.com/"/>
<link rel="alternate" hreflang="ko" href="https://1-3-2-5-writing.tistory.com/"/>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<!--코드블럭 복사 버튼1 -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<!--태그컴마삭제--><!--
<script>
$(function () {
$('.tagTrail').each(function () {
var comma = $(this).html();
$(this).html(comma.replace(/,/g, ''));
});
});
</script>-->
<!--제발--> <!--
<script>
$(document).ready(function() {
var selector = document.getElementById('fontselect');
var font = document.querySelector('body');
var family = selector.options[selector.selectedIndex].value;
font.style.fontFamily = family;
selector.onchange = function(){
var family = this.value;
font.style.fontFamily = family;
localStorage.font = family;
}
if (localStorage.length != 0) {
font.style.fontFamily = localStorage.font;
font.value = localStorage.font;
}else{
localStorage.setItem('font', '');
}
});
$(function() {
$('#fontselect').change(function() {
localStorage.setItem('currentvalue', this.value);
});
if(localStorage.getItem('currentvalue')){
$('#fontselect').val(localStorage.getItem('currentvalue'));
}
});
</script>-->
<!--제발-오리지널-->
<script>
$(document).ready(function() {
var selector = document.getElementById('fontselect');
var family = selector.options[selector.selectedIndex].value;
var font = document.querySelector('body');
font.style.fontFamily = family;
selector.onchange = function(){
var family = this.value;
font.style.fontFamily = family;
localStorage.font = family;
}
if (localStorage.length != 0) {
font.style.fontFamily = localStorage.font;
font.value = localStorage.font;
}else{
localStorage.setItem('font', '');
}
});
$(function() {
$('#fontselect').change(function() {
localStorage.setItem('currentvalue', this.value);
});
if(localStorage.getItem('currentvalue')){
$('#fontselect').val(localStorage.getItem('currentvalue'));
}
});
</script><!--본문크기조절-->
<script>
$(document).ready(function() {
const body = document.querySelector('body')
const copy = document.querySelector('.copyright')
const foot = document.getElementById('footer')
const cont = document.querySelector('.content-wrap')
const conte = document.getElementById('content')
const checkbox = document.querySelector(".check.w");
const lab = document.querySelector(".switch-button.w");
const img = document.querySelector("img");
const acb = document.querySelector(".all-comment-box");
const cl = document.querySelector(".comment-list");
const pg = document.querySelector(".pagination");
const widthToggle = (event) => {
if (event.target.checked) {
body.style.overflow='hidden';
foot.style.display='none';
copy.style.display='none';
cont.style.position='unset';
conte.style.padding='0';
$('.entry-content').addClass('active');
cont.style.maxWidth='calc(95% - 19pc)';
cont.style.margin='unset';
img.style.maxWidth='290px';
acb.style.marginBottom='10px';
acb.style.maxHeight='85px';
acb.style.overflowX='hidden';
cl.style.borderTop="none";
pg.style.marginTop="20px";
} else {
body.style.overflow='auto';
foot.style.display='block';
copy.style.display='block';
cont.style.position='auto';
conte.style.padding='0 0 60px';
$('.entry-content').removeClass('active');
cont.style.maxWidth='1080px';
cont.style.margin='40px auto 0';
img.style.maxWidth='inherit';
acb.style.marginBottom='0px';
acb.style.maxHeight='none';
acb.style.overflowX='auto';
cl.style.borderTop="1px solid #eee";
pg.style.marginTop="60px";
}
};
checkbox.addEventListener("click", widthToggle);
if(document.body.id == 'tt-body-page') {
checkbox.style.display='inline';
lab.style.display='block';
} else {
checkbox.style.display='none';
lab.style.display='none';
}
});
</script>
<script>
// 접은글 텍스트 변경 스크립트
$(document).ready(function(){
$(".btn-toggle-moreless").each(function(){
var text_more = $(this).parent().first().data("text-more");
var text_less = $(this).parent().first().data("text-less");
$(this).text(text_more);
$(this).on("click", function(){
if ($(this).text() == text_less) {
$(this).text(text_less);
} else {
$(this).text(text_more);
}
});
});
});
</script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<style>
:root {
--base: ;
--color: ;
--point: ;
--content-width: ;
--content-height: 851px;}
</style>
<script type="text/javascript">
function changeFont(_name) {
document.body.style.fontFamily = _name;
document.textarea = _name;
}
</script>
<script src="https://kit.fontawesome.com/40b2901ac4.js" crossorigin="anonymous"></script>
<!--<script> //유튜브브금//
//////////////////////////////////////////////////////////////////////
// BLOG BGM With Youtube
// BY. https://d-dl.tistory.com/
//////////////////////////////////////////////////////////////////////
// [ SETTING ]
const youtubeVideoKey = "cfTLvQ9TZhg";
const youtubePlayListKey = "PLNl9bgfY9xlnTYq6xNTLIfaJ4dAFOXWbT";
const URLChange = true;
const setShuffle = true;
const volumeUpDownValue = 10; // 0~100
const config = {
'loop': 1,
'autoplay': 1,
'controls': 1,
'disablekb': 1,
'enablejsapi': 1,
'iv_load_policy': 3,
'origin': document.location.origin
};
//////////////////////////////////////////////////////////////////////
// [ BODY ]
let YTplayer = null;
window.addEventListener('DOMContentLoaded', (event) => {
console.clear();
if (parent[0].name !== '') return;
let docIframe = document.createElement("iframe");
docIframe.style.cssText = `width: 100vw; height: 100vh; overflow: auto; border: 0; margin: 0; position: absolute;`;
docIframe.name = "MAIN";
docIframe.id = "BGM_DOC_IFRAME";
docIframe.src = document.location;
docIframe.addEventListener("load", function(e) {
const iframePath = docIframe.contentDocument.location.pathname;
if (URLChange && document.location.pathname !== iframePath){
history.replaceState(null, null, iframePath);
}
});
let musicDiv = document.createElement("div");
musicDiv.name = "MUSIC";
musicDiv.id = "Youtube_Music_Iframe";
document.body.style.overflow = "hidden";
document.body.innerHTML = "";
document.body.prepend(docIframe);
document.body.prepend(musicDiv);
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});
function onYouTubeIframeAPIReady() {
YTplayer = new YT.Player('Youtube_Music_Iframe', {
videoId: youtubeVideoKey,
playerVars: config,
height: '0',
width: '0',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onPlayerError
}
});
}
let listSet = false;
function onPlayerReady(event) {
if (!listSet && youtubePlayListKey !== null) {
YTplayer.loadPlaylist({
list:youtubePlayListKey,
listType:'playlist',
index:0,
startSeconds:0,
suggestedQuality:'small'
});
YTplayer.setShuffle(setShuffle);
listSet = true;
}
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
if (listSet)
YTplayer.nextVideo();
else
YTplayer.playVideo();
}
}
function onPlayerError(event) {
console.error(event.data);
}
function receiveBGMMessage(event)
{
let state = event.data.BGM;
if (!state) return;
switch (state.toString().toLowerCase()) {
case 'play':
YTplayer.playVideo();
break;
case 'pause':
YTplayer.pauseVideo();
break;
case 'previous':
YTplayer.previousVideo();
YTplayer.playVideo();
break;
case 'next':
YTplayer.nextVideo();
YTplayer.playVideo();
break;
case 'volumeup':
YTplayer.setVolume(YTplayer.getVolume() + volumeUpDownValue);
break;
case 'volumedown':
YTplayer.setVolume(YTplayer.getVolume() - volumeUpDownValue);
break;
}
console.log(`%c♬ BGM : NOW "${state.toUpperCase()}"`, 'color:blue');
}
addEventListener("message", receiveBGMMessage, false);
</script>-->
<!--구글폰트-->
<style>
/*구글 영문폰트+이것저것 독스 폰트*/
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Alata&family=Alex+Brush&family=Alumni+Sans+Collegiate+One:ital@0;1&family=Amatic+SC:wght@400;700&family=Bangers&family=Bebas+Neue&family=Black+Ops+One&family=Caveat:wght@400;500;600;700&family=Cinzel:wght@400;500;600;700;800;900&family=Fredericka+the+Great&family=Gowun+Batang:wght@400;700&family=Gowun+Dodum&family=Hahmlet:wght@100;200;300;400;500;600;700;800;900&family=Homemade+Apple&family=IBM+Plex+Sans+KR:wght@100;200;300;400;500;600;700&family=Indie+Flower&family=Julius+Sans+One&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Nanum+Brush+Script&family=Nothing+You+Could+Do&family=Noto+Sans+HK:wght@100;300;400;500;700;900&family=Noto+Serif+HK:wght@200;300;400;500;600;700;800;900&family=Oleo+Script+Swash+Caps:wght@400;700&family=Pangolin&family=Permanent+Marker&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&family=Rock+Salt&family=Rubik+Burned&family=Rubik+Dirt&family=Rubik+Iso&family=Rubik+Marker+Hatch&family=Shadows+Into+Light&family=Sigmar+One&family=Special+Elite&family=Splash&family=Staatliches&family=Tiro+Gurmukhi&display=swap');
/*노토 산스*/
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
.notosanskr * {
font-family: 'Noto Sans KR', sans-serif;
}
/*나눔스퀘어*/
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
.nanumsquare * {
font-family: 'NanumSquare', sans-serif;
}
</style>
<!--
font-family: 'Abril Fatface', cursive;
font-family: 'Alata', sans-serif;
font-family: 'Alex Brush', cursive;
font-family: 'Alumni Sans Collegiate One', sans-serif;
font-family: 'Amatic SC', cursive;
font-family: 'Bangers', cursive;
font-family: 'Bebas Neue', cursive;
font-family: 'Black Ops One', cursive;
font-family: 'Caveat', cursive;
font-family: 'Cinzel', serif;
font-family: 'Fredericka the Great', cursive;
font-family: 'Gowun Batang', serif;
font-family: 'Gowun Dodum', sans-serif;
font-family: 'Hahmlet', serif;
font-family: 'Homemade Apple', cursive;
font-family: 'IBM Plex Sans KR', sans-serif;
font-family: 'Indie Flower', cursive;
font-family: 'Julius Sans One', sans-serif;
font-family: 'Libre Baskerville', serif;
font-family: 'Nanum Brush Script', cursive;
font-family: 'Nothing You Could Do', cursive;
font-family: 'Noto Sans HK', sans-serif;
font-family: 'Noto Serif HK', serif;
font-family: 'Oleo Script Swash Caps', cursive;
font-family: 'Pangolin', cursive;
font-family: 'Permanent Marker', cursive;
font-family: 'Quantico', sans-serif;
font-family: 'Rock Salt', cursive;
font-family: 'Rubik Burned', cursive;
font-family: 'Rubik Dirt', cursive;
font-family: 'Rubik Iso', cursive;
font-family: 'Rubik Marker Hatch', cursive;
font-family: 'Shadows Into Light', cursive;
font-family: 'Sigmar One', cursive;
font-family: 'Special Elite', cursive;
font-family: 'Splash', cursive;
font-family: 'Staatliches', cursive;
font-family: 'Tiro Gurmukhi', serif;
-->
</head>
<body id="tt-body-index" class="layout-aside-left list-type-default">
<script type="text/javascript">
$(window).resize(function(){resizeYoutube();});
$(function(){resizeYoutube();});
function resizeYoutube(){ $("iframe").each(function(){ if( /^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr("src")) ){ $(this).css("width","100%"); $(this).css("height",Math.ceil( parseInt($(this).css("width")) * 480 / 854 ) + "px");} }); }
</script>
<s_t3>
<div id="wrap">
<header id="header">
<div class="inner">
<h2 class="logo">
<a href="https://1-3-2-5-writing.tistory.com/" >
백업
</a>
</h2>
</div>
</header>
<section id="container">
<div class="content-wrap">
<article id="content">
<!--커버-->
<s_cover_group>
<div class="cover">
<s_cover_rep>
<s_cover name='slider'>
<s_cover_item>
<div class="post-item b">
<a href="" >
<span class="thum">
<figure>
<s_article_rep_thumbnail>
<img src="<s_cover_item_thumbnail></s_cover_item_thumbnail>" width="250px;" height="250px;" >
</s_article_rep_thumbnail>
</figure>
</span>
<span class="title">
<strong></strong>
</span>
<span class="excerpt"></span>
</a>
</div>
</s_cover_item>
<s_cover_url>
</s_cover_url>
</s_cover> </s_cover_rep></div></s_cover_group>
<!--커버 끝-->
<s_article_protected>
<s_index_article_rep>
<div class="post-item protected">
<a href="" >
<span class="thum"></span>
<span class="title"></span>
<span class="excerpt">보호된 글입니다.</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="entry-content">
<form class="protected_form" onsubmit="{reloadEntry(14);return false;}">
<h2>보호된 글입니다.</h2>
<p>비밀번호를 입력하세요.</p>
<input type="password" id="entry14password" name="entry14password" value="" placeholder="비밀번호">
<button type="submit" class="btn">확인</button>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>
<div class="inner">
<s_article_rep>
<s_index_article_rep>
<div class="post-item">
<a href="" >
<span class="thum">
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C250x250/?fname=" width="250px;" height="250px;" >
</s_article_rep_thumbnail>
</span>
<span class="title">
<strong></strong>
</span>
<span class="excerpt"></span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="inner" style="display: flex;flex-wrap: wrap;justify-content: flex-end;">
<!-- 이동경로 시작 -->
<nav role="navigation" aria-label="Breadcrumbs" class="bf-breadcrumb clearfix bc-top-style"><div class="container bf-breadcrumb-container"><ul class="bf-breadcrumb-items" itemscope="" itemtype="http://schema.org/BreadcrumbList"><meta name="numberOfItems" content="3"><meta name="itemListOrder" content="Ascending">
<li class="book-toc">
<time class="content-time"></time>
<s_ad_div>
<span>
<a href="#" onclick="" d-dl-tooltip="수정하기"><i class="fas fa-edit"></i></a>
·
<a href="#" onclick="" d-dl-tooltip="삭제"><i class="fas fa-trash-alt"></i></a>
·
<a href="#" onclick="">→</a>
</span>
</s_ad_div>
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="bf-breadcrumb-item bf-breadcrumb-begin"><a itemprop="item" href="https://1-3-2-5-writing.tistory.com/" rel="home"><span itemprop="name">백업</span><meta itemprop="position" content="1"></a></li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="bf-breadcrumb-item"><a itemprop="item" href=""><span itemprop="name"></span><meta itemprop="position" content="2"></a></li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="bf-breadcrumb-item bf-breadcrumb-end"><span itemprop="name"></span><meta itemprop="position" content="3"><meta itemprop="item" content=""></li></ul>
</div></nav><div class="tagbox"> <s_tag_label>
<div class="tagTrail">
</div>
</s_tag_label></div>
<!-- 이동경로 끝 -->
<a class="innertitle" style="display: table;" href=""> <h1></h1></a>
</div>
<div class="entry-content">
</div>
<s_article_related>
<div class="related-articles">
<h2>관련글</h2>
<ul>
<s_article_related_rep>
<li class="childlist">
<a href="">
<figure>
<s_article_related_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C180x180/?fname=">
</s_article_related_rep_thumbnail>
</figure>
<span class="title"></span>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>
<div class="comments">
<h2>댓글<span class="count"><s_rp_count></s_rp_count></span></h2>
<s_rp>
<!--시작-->
<div class="comment-list">
<s_rp_container>
<ul>
<s_rp_rep>
<li>
<div class="all-comment-box">
<div id="" class="comment-box ">
<div class="author-meta">
<img src="//i1.daumcdn.net/thumb/C140x140/?fname=" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
<span class="control">
<div class="comment-content">
<header class="no-drag">
<div class="comment-action no-drag">
<button type="button">더보기</button>
<div class="link">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div></div></header></div>
</span>
</div>
<p><br>
<a href="#" onclick="" class="reply">답글</a></p>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li>
<div id="" class="sub-comment-box ">
<div>
<div class="author-meta">
<img src="//i1.daumcdn.net/thumb/C140x140/?fname=" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
<span class="control">
<div class="comment-content">
<header class="no-drag">
<div class="comment-action no-drag">
<button type="button">더보기</button>
<div class="link">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div></div></header></div>
</span>
</div>
<p></p>
</div> </div> </li>
</s_rp2_rep>
</ul>
</s_rp2_container> </div> </div>
</li>
</s_rp_rep>
</ul>
</s_rp_container>
</div>
<!--끝-->
<s_rp_input_form>
<div class="comment-form">
<s_rp_member>
<div class="field">
<s_rp_guest>
<input type="text" name="" placeholder="이름" value="">
<input type="password" name="" maxlength="8" placeholder="비밀번호" value="">
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret">
<label for="secret" tabindex="0">비밀글</label>
</div>
</div>
</s_rp_member>
<textarea name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">등록</button>
</div>
</div>
</s_rp_input_form>
</s_rp>
</div>
</s_permalink_article_rep>
</s_article_rep>
</div>
<s_index_article_rep>
<s_notice_rep>
<div class="notice">
<span class=d_m_write data-tooltip-text="글쓰기" style=" cursor: pointer;" onclick="window.open('https://1-3-2-5-writing.tistory.com/manage/notice')"><i class="fas fa-feather-alt"></i></span>
<div class="inner">
<h1><a href=""></a></h1>
<span class="meta">
<span class="date"></span>
</span>
</div>
</div>
<div class="entry-content">
</div>
</s_notice_rep>
</s_index_article_rep>
<s_tag>
<div class="post-header">
<h1>태그</h1>
</div>
<div class="tags">
<s_tag_rep>
<a href="" class=""></a>
</s_tag_rep>
</div>
</s_tag>
<s_guest>
<div class="comments">
<div class="post-header">
<h1>방명록</h1>
</div>
<s_guest_input_form>
<div class="comment-form">
<s_guest_member>
<div class="field">
<s_guest_form>
<input type="text" name="" placeholder="이름" value="">
<input type="password" name="" placeholder="암호" value="">
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">등록</button>
</div>
</div>
</s_guest_input_form>
<s_guest_container>
<div class="comment-list">
<ul>
<s_guest_rep>
<li>
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" >
<span class="nickname"></span>
<span class="date"></span>
<span class="control">
<button type="button">더보기</button>
<div class="link">
<a href="#" onclick="">수정/삭제</a>
</div>
</span>
</div>
<p><br>
<a href="#" class="reply" onclick="">답변</a></p>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li>
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar">
<span class="nickname"></span>
<span class="date"></span>
<span class="control">
<button type="button">더보기</button>
<div class="link">
<a href="#" onclick="">수정/삭제</a>
</div>
</span>
</div>
<p></p>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</s_guest>
<s_paging>
<div class="pagination">
<a class="prev " href="#" >이전</a>
<s_paging_rep>
<a href="#" ></a>
</s_paging_rep>
<a class="next " href="#">다음</a>
</div>
</s_paging>
</article>
<aside id="aside" class="sidebar">
<div class="sidebar-1">
<s_sidebar>
<s_sidebar_element>
<!-- 프로필 -->
<div class="inner-box">
<a href="https://1-3-2-5-writing.tistory.com/"><img src="" class="img-profile" style = "background-size: ; opacity:; "></a>
<p class="text-profile"></p>
</div>
</s_sidebar_element>
<!-- 관리자메뉴 -->
<s_sidebar_element>
<sidebar_manage>
<ul>
<li>
<a href="https://1-3-2-5-writing.tistory.com/manage" ttooltip="환경설정">
<i class="fas fa-wrench"></i>
</a>
</li>
<li>
<a href="https://1-3-2-5-writing.tistory.com/manage/post" ttooltip="글쓰기">
<i class="fas fa-feather-alt"></i>
</a>
</li>
<li>
<a href="/manage/design/skin/edit#/" ttooltip="스킨 편집" target="_blank">
<i class="fas fa-code"></i></a>
</li>
<li>
<a href="http://nomnom1325.ivyro.net/clap/#/" target="_blank" ttooltip="웹박수">
<i class="fa-solid fa-hands-clapping"></i>
</a>
</li>
<!--toggle button-->
<label class="switch-button" ttooltip="다크모드">
<input class="check" type="checkbox" />
<span class="onoff-switch"></span>
</label>
<label class="switch-button w" ttooltip="본문 크기 작게">
<input class="check w" type="checkbox" />
<span class="onoff-switch w"></span>
</label>
<!--toggle button-->
<s_if_var_github-id>
<li id="github-icon">
<a href="" target="_blank" ttooltip="깃허브">
<i class="fab fa-github-square"></i>
</a>
</li>
</s_if_var_github-id>
<s_if_var_facebook-id>
<li id="facebook-icon">
<a href="" target="_blank" ttooltip="페이스북">
<i class="fab fa-facebook-square"></i>
</a>
</li>
</s_if_var_facebook-id>
<s_if_var_twitter-id>
<li id="twitter-icon">
<a href="" target="_blank" ttooltip="트위터">
<i class="fab fa-twitter"></i>
</a>
</li>
</s_if_var_twitter-id>
<s_if_var_instagram-id>
<li id="instagram-icon">
<a href="" target="_blank" ttooltip="인스타그램">
<i class="fab fa-instagram"></i>
</a>
</li>
</s_if_var_instagram-id>
</ul>
</sidebar_manage>
</s_sidebar_element>
<s_sidebar_element>
<s_sidebar_chap>
<!--목차버튼--><div class="chap">
<div>목차</div>
</div>
<div class="c-toc" >
<div class="c-c-toc">
<div class="c-toc-t">
목차
<div class="s-c_b">
<div class="s-c_b2">
<i class="fas fa-times"></i>
</div>
</div>
<div class="clear"></div>
</div>
<div class="c-toc-m">
</div>
<div class="c-toc-s">
<div class="c-n-toc">
<div class="Toc"></div>
</div>
</div>
</div>
</div>
</s_sidebar_chap>
</s_sidebar_element>
<!--유튜브브금2BGM-->
<!-- <s_sidebar_element>
<s_sidebar_bgm>
<span class="bgm">BGM</span>
<div>
<button class="bgm" ttooltip="재생" onclick="parent.postMessage({BGM:'play'}, '*')"></button>
<button class="bgm" ttooltip="정지" onclick="parent.postMessage({BGM:'pause'}, '*')"></button>
<button class="bgm" ttooltip="이전 곡" onclick="parent.postMessage({BGM:'previous'}, '*')"></button>
<button class="bgm" ttooltip="다음 곡" onclick="parent.postMessage({BGM:'next'}, '*')"></button>
<button class="bgm" ttooltip="볼륨 +" onclick="parent.postMessage({BGM:'volumeup'}, '*')"></button>
<button class="bgm" ttooltip="볼륨 -" onclick="parent.postMessage({BGM:'volumedown'}, '*')"></button>
</div>
</s_sidebar_bgm>
</s_sidebar_element>-->
<s_sidebar_element>
<s_sidebar_font>
<!--글꼴/폰트/글씨체변경-->
<div id="myform"style="font-family">
<span>글꼴</span>
<div>
<!--1 <details class="custom-select" id="fontselect2">
<summary class="radios">
<input type="radio" name="item" id="default" title="KoPubWorld돋움체" checked>
<input type="radio" value="Helvetica Neue"style="font-family:'Helvetica Neue'" name="item" id="item1" title="기본(Helvetica Neue)">
<input type="radio" value="Pretendard"style="font-family:'Pretendard'" name="item" id="item2" title="프리텐다드">
<input type="radio" value="Noto Sans KR"style="font-family:'Noto Sans KR'" name="item" id="item3" title="노토 산스">
<input type="radio" value="NanumSquare"style="font-family:'NanumSquare'" name="item" id="item4" title="나눔 스퀘어">
<input type="radio" value="RIDIBatang"style="font-family:'RIDIBatang'" name="item" id="item5" title="리디바탕">
</summary>
<ul class="list">
<li>
<label for="default" value="KoPubWorldDotum" style="font-family:'KoPubWorldDotum'">KoPubWorld돋움체</label>
</li>
<li>
<label for="item1" value="Helvetica Neue"style="font-family:'Helvetica Neue'">기본(Helvetica Neue)</label>
</li>
<li>
<label for="item2"value="Pretendard"style="font-family:'Pretendard'">프리텐다드</label>
</li>
<li>
<label for="item3"value="Noto Sans KR"style="font-family:'Noto Sans KR'" >노토 산스</label>
</li>
<li>
<label for="item4"value="NanumSquare"style="font-family:'NanumSquare'">나눔 스퀘어</label>
</li>
<li>
<label for="item5"value="RIDIBatang"style="font-family:'RIDIBatang'" >리디바탕</label>
</ul>
</details>-->
<select class="custom-select" id="fontselect" onchange="changeFont(this.value);">
<option value="KoPubWorldDotum" style="font-family:'KoPubWorldDotum'">KoPubWorld돋움체</option>
<option value="Helvetica Neue"style="font-family:'Helvetica Neue'">기본(Helvetica Neue)</option>
<option value="Pretendard"style="font-family:'Pretendard'">프리텐다드</option>
<option value="Noto Sans KR"style="font-family:'Noto Sans KR'">노토 산스</option>
<option value="NanumSquare"style="font-family:'NanumSquare'">나눔 스퀘어</option>
<option value="RIDIBatang"style="font-family:'RIDIBatang'">리디바탕</option>
<option value="Gowun Dodum"style="font-family:'Gowun Dodum'">고운돋움</option>
<option value="IBM Plex Sans KR"style="font-family:'IBM Plex Sans KR'">IBM Plex Sans KR</option>
</select><!--3-
<details class="custom-select 2" id="fontselect 2"><summary class="radios">
<select class="custom-select" id="fontselect" onchange="changeFont(this.value);">
<option type="radio" value="KoPubWorldDotum"style="font-family:'KoPubWorldDotum'" name="item" id="default">KoPubWorld돋움체</option>
<option type="radio" value="Helvetica Neue"style="font-family:'Helvetica Neue'" name="item" id="item1">기본(Helvetica Neue)</option>
<option type="radio" value="Pretendard"style="font-family:'Pretendard'" name="item" id="item2">프리텐다드</option>
<option type="radio" value="Noto Sans KR"style="font-family:'Noto Sans KR" name="item" id="item3">노토 산스</option>
<option type="radio" value="NanumSquare"style="font-family:'NanumSquare" name="item" id="item4">나눔 스퀘어</option>
<option type="radio" value="RIDIBatang"style="font-family:'RIDIBatang" name="item" id="item5">리디바탕</option></select></summary>
<ul class="list">
<li>
<label for="default" value="KoPubWorldDotum" style="font-family:'KoPubWorldDotum'">KoPubWorld돋움체</label>
</li>
<li>
<label for="item1" value="Helvetica Neue"style="font-family:'Helvetica Neue'">기본(Helvetica Neue)</label>
</li>
<li>
<label for="item2"value="Pretendard"style="font-family:'Pretendard'">프리텐다드</label>
</li>
<li>
<label for="item3"value="Noto Sans KR"style="font-family:'Noto Sans KR'" >노토 산스</label>
</li>
<li>
<label for="item4"value="NanumSquare"style="font-family:'NanumSquare'">나눔 스퀘어</label>
</li>
<li>
<label for="item5"value="RIDIBatang"style="font-family:'RIDIBatang'" >리디바탕</label>
</ul>
</details> -->
</div></div>
</s_sidebar_font>
</s_sidebar_element>
<s_sidebar_element>
<!-- 검색 -->
<div class="search">
<s_search>
<form class="main-search-form">
<div class="flex">
<input type="text" name="" placeholder="Search" value="" required />
<button type="submit" onclick=""><i class="fas fa-search"></i></button>
</div>
</form>
</s_search>
</div>
</s_sidebar_element>
<s_sidebar_element>
<!-- 카테고리 -->
<nav class="category">
</nav>
</s_sidebar_element>
<s_sidebar_element>
<!-- 링크메뉴 -->
<nav class="category_home">
<ul> <li class="t_menu_home first">
<a href="/">홈</a>
</li>
<li class="t_menu_notice">
<a href="/notice">공지사항</a>
</li>
<li class="t_menu_tag">
<a href="/tag">태그</a>
</li>
<li class="t_menu_guestbook last">
<a href="/guestbook">방명록</a>
</li>
</ul>
</nav>
</s_sidebar_element>
<s_sidebar_element>
<!-- 최근글/인기글 -->
<div class="post-list tab-ui">
<div id="popular" class="tab-list">
<h2>인기글</h2>
<ul>
<s_rctps_popular_rep>
<li>
<a href="">
<s_rctps_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C58x58/?fname=" />
</s_rctps_rep_thumbnail>
<span class="title"></span>
<span class="date"></span>
</a>
</li>
</s_rctps_popular_rep>
</ul>
</div>
<div id="recent" class="tab-list">
<h2>최근글</h2>
<ul>
<s_rctps_rep>
<li>
<a href="">
<s_rctps_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C58x58/?fname=" />
</s_rctps_rep_thumbnail>
<span class="title"></span>
<span class="date"></span>
</a>
</li>
</s_rctps_rep>
</ul>
</div>
</div>
</s_sidebar_element>
<s_sidebar_element>
<!-- 최근댓글 -->
<div class="post-list tab-ui">
<div class="recent-comment">
<h2>최근댓글</h2>
<ul>
<s_rctrp_rep>
<li><a href=""></a></li>
</s_rctrp_rep>
</ul>
</div>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
</aside>
</div>
</section>
<!-- 저작권 삭제 절대금지 -->
<div class="copyright"><a href="https://creativestudio.kr/" >라이브러리 브랜드 그룹</a> | <a href="https://1-3-2-5-writing.tistory.com/" >백업</a></div>
<footer id="footer">
<div class="udbtn">
<div class="btn_wrap">
<a>.</a>
</div>
<div class="btn_top">
<a>맨 위로</a>
</div>
<div class="btn_bottom">
<a>맨 아래로</a>
</div>
<!--<div class="btn_go">
<a>접기</a>
</div>-->
</div>
</footer>
</div>
<script>
$(document).ready(function() {
var linkHref = $(location).attr('href');
if (linkHref.indexOf("https://1-3-2-5-writing.tistory.com/category") !== -1) {
$('#list-icon-category').css({
display: 'inline'
});
} else if (linkHref.indexOf("https://1-3-2-5-writing.tistory.com/tag") !== -1) {
$('#list-icon-tag').css({
display: 'inline'
});
} else if (linkHref.indexOf("https://1-3-2-5-writing.tistory.com/search") !== -1) {
$('#list-icon-search').css({
display: 'inline'
});
} else {
$('#list-icon-default').css({
display: 'inline'
});
}
var linkHref2 = encodeURI(linkHref);
var hostHref = $(location).attr('protocol') + '//' + $(location).attr('host') + '/';
$(".tt_category a").each(function() {
var origHref = encodeURI($(this).attr("href"));
if (linkHref.indexOf(origHref) == -1 && linkHref2.indexOf(origHref) == -1)
return;
var link = linkHref.substr(linkHref.length - origHref.length);
var link2 = linkHref2.substr(linkHref2.length - origHref.length);
if (link.indexOf(origHref) == -1 && link2.indexOf(origHref) == -1) {
if (origHref == "/") {
if (linkHref != hostHref)
return;
} else if (origHref == "/category") {
if (linkHref.indexOf(origHref + "/?") == -1 &&
linkHref2.indexOf(origHref + "/?") == -1)
return;
} else if (origHref.indexOf("/category/") == 0) {
if (linkHref.indexOf(origHref + "?") == -1 &&
linkHref2.indexOf(origHref + "?") == -1)
return;
}
}
$(this).addClass("selected");
$(this).closest(".sub_category_list").addClass("selected");
});
$(".category_home a").each(function() {
var origHref = encodeURI($(this).attr("href"));
if (linkHref.indexOf(origHref) == -1 && linkHref2.indexOf(origHref) == -1)
return;
var link = linkHref.substr(linkHref.length - origHref.length);
var link2 = linkHref2.substr(linkHref2.length - origHref.length);
if (link.indexOf(origHref) == -1 && link2.indexOf(origHref) == -1) {
if (origHref == "/") {
if (linkHref != hostHref)
return;
} else if (origHref == "/category") {
if (linkHref.indexOf(origHref + "/?") == -1 &&
linkHref2.indexOf(origHref + "/?") == -1)
return;
} else if (origHref.indexOf("/category/") == 0) {
if (linkHref.indexOf(origHref + "?") == -1 &&
linkHref2.indexOf(origHref + "?") == -1)
return;
}
}
$(this).addClass("selected");
$(this).closest(".sub_category_list").addClass("selected");
});
noimg = '<s_if_var_noimg><img src=""></s_if_var_noimg><s_not_var_noimg><img src="./images/noimg.png"></s_not_var_noimg>';
a_name = '<a href="https://1-3-2-5-writing.tistory.com/">마이클 존</a>';
g_ny = '';
g_name = '';
$(".thum:not(:has(img))").append(noimg);
$('.guest_admin > .name:not(:has(a))').append(a_name);
$( '.m-line' ).after( $( '.titleWrap' ));
$('#content').before($('.lst_web2'));
$( '#menu' ).append($( '.actionTrail'));
$('.cover').next('#container').remove();
if ($('.tagTrail').length <= 0) {
$('.tag_b2').html('<i class="xi-caret-down"></i>');
$('.tag_b2').attr('class','st_b2');
}
if(document.body.id == 'tt-body-page' || document.body.id == 'tt-body-guestbook') {
setTimeout(function () {
$('.date a').html('<i class="xi-error-o"></i>');
$('.date a').each(function(){
$(this).parent().next('.control').prepend($(this));
});
$('.ny').each(function() {
var ny_t = $(this).html();
$(this).html(ny_t.replace('[비밀댓글]', '<i class="xi-lock-o"></i>'));
});
$('.ny').each(function() {
var ny_t = $(this).html();
$(this).html(ny_t.replace('비밀댓글입니다', '[비밀댓글입니다.] <i class="xi-lock-o"></i>'));
});
}, 0);
}
});
var burger = $('.btn_wrap');
burger.each(function(index) {
var $this = $(this);
$this.on('click', function(e) {
e.preventDefault();
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('.btn_wrap').addClass('active');
$('.btn_top').addClass('active');
$('.btn_bottom').addClass('active');
$('.btn_go').addClass('active');
} else {
$('.btn_wrap').removeClass('active');
$('.btn_top').removeClass('active');
$('.btn_bottom').removeClass('active');
$('.btn_go').removeClass('active');
}
});
});
var burger2 = $('.btn_go');
burger2.each(function(index) {
var $this = $(this);
$this.on('click', function(e) {
e.preventDefault();
$(this).toggleClass('fold');
if ($(this).hasClass('fold')) {
$('.udbtn').addClass('fold');
} else {
$('.udbtn').removeClass('fold');
}
});
});
var bookburger = $('.content-time');
bookburger.each(function(index) {
var $this = $(this);
$this.on('click', function(e) {
e.preventDefault();
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('.content-time').addClass('active');
$('.book-toc').addClass('active');
} else {
$('.content-time').removeClass('active');
$('.book-toc').removeClass('active');
}
});
});
/*
var widthcheck = $('.check.w');
widthcheck.each(function(index) {
var $this = $(this);
$this.on('click', function(e) {
e.preventDefault();
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('.entry-content').addClass('active');
} else {
$('.entry-content').removeClass('active');
}
});
}); */
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--다크모드2-->
<script>
$(document).ready(function() {
const DARK = "dark";
const LIGHT = "light";
const THEME_KEY = "theme";
const userTheme = sessionStorage.getItem(THEME_KEY);
const osTheme = window.matchMedia("(prefers-color-scheme: light)").matches
? LIGHT
: DARK;
const getTheme = () => {
const Theme = userTheme ? userTheme : osTheme;
return Theme;
};
const setTheme = (color) => {
sessionStorage.setItem(THEME_KEY, color);
document.documentElement.setAttribute(THEME_KEY, color);
};
if (getTheme() === DARK) {
setTheme(DARK);
} else {
setTheme(LIGHT);
}
const checkbox = document.querySelector(".check");
const themeToggle = (event) => {
if (event.target.checked) {
setTheme(DARK);
} else {
setTheme(LIGHT);
}
};
checkbox.addEventListener("click", themeToggle);
if (getTheme() === DARK) {
checkbox.setAttribute("checked", "");
}
});
</script>
<!--목차드래그-->
<script>
//목차 스크립트
$(document).ready(function() {
$('.chap').click(function(){
$('.c-toc').fadeToggle();
});
$('.s-c_b').click(function() {
$('.c-toc').hide();
});
$('.c-toc').draggable();
});
if (( window.location.pathname == '/' )||( window.location.pathname == '/guestbook' )||( window.location.pathname == '/category' )||( window.location.pathname == '/category/TRPG' )||( window.location.pathname == '/tag')||( window.location.pathname == '/notice' )) { document.write( '<style>.c-toc{display:none !important;} .chap{display:none !important;}</style>' ); }
if($('blockquote').filter(":contains('개요')").length > 0) { $('.c-toc').show();$('.chap').show(); }
if($('blockquote').filter(":contains('진상')").length > 0) { $('.c-toc').show(); $('.chap').show();}
if($('h2').filter(":contains('개요')").length > 0) { $('.c-toc').show();$('.chap').show(); }
if($('h2').filter(":contains('진상')").length > 0) { $('.c-toc').show(); $('.chap').show();}
$( document ).ready( function() {
$( '.Toc:empty' ).append( '불러올 목차가 없습니다.' );
} );
</script>
</s_t3>
<!--toc목차스크립트-->
<script>
function Toclist () {
const Htag = document.querySelectorAll('h2[data-ke-size],h4[data-ke-size],h3[data-ke-size],blockquote[data-ke-style="style2"]');
const toc = document.querySelector(".Toc");
toc.setAttribute('style','display:block');
if (Htag.length <2) {return !1}
const hleng = Htag.length;
for (var i=0; i<hleng; i++) {
const text = Htag[i].textContent;
Htag[i].id = text.replace(/ /gi,"");
const atag = document.createElement('a');
atag.textContent = text;
atag.setAttribute('href','#'+text.replace(/ /gi,""));
atag.className = 'tocNum';
console.log(Htag[i].tagName)
if (Htag[i].tagName == 'H2') {
atag.classList.add('realNum');
}
else if (Htag[i].tagName == 'H3') {
atag.classList.add('subNum');
}
else if (Htag[i].tagName == 'H4') {
atag.classList.add('subbNum');
}
toc.appendChild(atag);
}
}
Toclist();
</script>
<!--코드블럭 복사 버튼2-->
<script src="./images/BlockCopy.js"></script>
<!--출처: https://seons-dev.tistory.com/188-->
<script>
$("pre[data-ke-type='codeblock']").each(function() {
var showTxt = "열기", hideTxt = "닫기", pre = this;
var code = this.dataset.keLanguage;
var $labelDiv = $("<div>");
var $labelBtn = $("<span>");
var $wrapBtn = $("<label><input type='checkbox' checked='checked'> 줄바꿈</label>");
var $code = $(this).find("code").first();
var codeHtml = $code.html();
if (codeHtml.search('<hide/>\n') > -1 || pre.dataset.hide) {
$code.html(codeHtml.replace('<hide/>\n',''));
$labelBtn.text(showTxt);
$wrapBtn.hide();
$(this).hide();
$(this).attr('data-hide', 1);
} else {
$labelBtn.text(hideTxt);
$(this).show(); //줄번호 표시를 사용하고 있다면 이 줄은 주석 처리
}
$labelBtn.on("click", function() {
var txt = $(this).text();
$(this).text((txt==showTxt)?hideTxt:showTxt);
if (txt==showTxt) {
$wrapBtn.show();
$(pre).removeAttr('data-hide');
} else {
$wrapBtn.hide();
}
$(pre).toggle();
});
$labelDiv.on("click", function() {
$labelBtn.triggerHandler("click");
});
$wrapBtn.find("input").first().on("click", function() {
$(pre).css({'white-space': (this.checked)?'pre-wrap':'pre', 'word-wrap': (this.checked)?'break-word':'normal'});
if (typeof setLnHeight === 'function') {
setLnHeight(pre);
}
});
$labelDiv.text(code).prop('title', code+' - '+showTxt+'/'+hideTxt);
var $codeLabel = $('<div class="codeLabel">').append($labelDiv).append($labelBtn).append($wrapBtn);
$(this).before($codeLabel);
});
$(window).on("load", function() {
if ($('code').length) {
var col = window.getComputedStyle($('code').first()[0], null).getPropertyValue("color");
var bgc = window.getComputedStyle($('code').first()[0], null).getPropertyValue("background-color");
$('.codeLabel div').css({'color': col, 'background-color': bgc});
}
});
</script>
<script src="./images/linenumber2.js"></script>
<!-- 새글알림 기능-->
<script> $('img[alt="N"]').each(function(){ $(this).replaceWith('<img src="./images/new_icon_8.png" style="width: 4px;height: 4px;top: 6px;position: relative;">'); }); </script>
<script src="./images/script.js"></script>
<!-- 목차기능 -->
<script>
$(function(){
$("#toc").toc( {content: ".entry-content", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
});
$(function() {
$(".btn_top").click(function() {
$('html, body').animate({
scrollTop : 0
}, 500);
return false;
});
//rgyBottom 클릭 이벤트
$(".btn_bottom").click(function() {
// $(document).height(), 현재 페이지 맨 아래 위치 값 구하기
var height = $(document).height()
$('html, body').animate({ // animate() 지정 위치까지 서서히 이동
scrollTop: height // scrollTop, 이동할 위치
}, 500); //500, 이동속도 (커질수록 느려짐)
return false;
});
});
</script>
<!-- 카테고리 주소 수정 기능 #1 -->
<script>
var categorylist = document.getElementsByClassName("post-item");
var removeSID;
var indexSID;
if (categorylist.length) {
for (i = 0; i < categorylist.length; i ++) {
removeSID = categorylist[i].getElementsByTagName("A")[0].href;
indexSID = removeSID.indexOf("?");
if (indexSID == -1) {
break;
}
removeSID = removeSID.substring(0, indexSID);
categorylist[i].getElementsByTagName("A")[0].href = removeSID;
}
}
</script>
<!-- 카테고리 주소 수정 기능 #2-->
<script>
var categorylist = document.getElementsByClassName("childlist");
var removeSID;
var indexSID;
if (categorylist.length) {
for (i = 0; i < categorylist.length; i ++) {
removeSID = categorylist[i].getElementsByTagName("A")[0].href;
indexSID = removeSID.indexOf("?");
if (indexSID == -1) {
break;
}
removeSID = removeSID.substring(0, indexSID);
categorylist[i].getElementsByTagName("A")[0].href = removeSID;
}
}
</script>
<!--한역게시글배경랜덤바꾸기<script> var images = ['nophoto.jpg', 'nophoto2.jpg']; $(document).ready(function(){ $('.tt_article_hy').css({"background-image":"url(./images/" + images[Math.floor(Math.random() * images.length)]+ ")", 'background-size' : '100%'}); }); </script>-->
<script src="./images/jquery.toc.min.js"></script>
<script type="text/javascript">
$(function() {
tistoryFootnote.showSuper = tistoryFootnote.show;
tistoryFootnote.show = function(anchor, entryId, noteId) {
this.showSuper(anchor, entryId, noteId);
var layer = document.getElementById("tistoryFootnoteLayer_" + entryId + "_" + noteId);
layer.style.color = "#000";
layer.style.font = "unset";
layer.style.fontSize = "12.669999px";
layer.style.fontFamily = "Pretendard";
layer.style.lineHeight = "0.8";
layer.style.filter = "grayscale(1) contrast(1) drop-shadow(0px 0px 6px var(--shadow))";
}
});
</script>
</body>
</html>
CSS
/*글꼴 유니코드변경
영 unicode-range:U+0041-005A, U+0061-007A, U+0030-0039
한 unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF; */
@charset "utf-8";
@font-face {
font-family: NanumSquare;
font-weight: 400;
src: url(./images/se-nanumsquare-regular.woff) format("woff")
}
@font-face {
font-family: 'KoPubWorld돋움체';
font-weight: 300;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumLight.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumLight.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumLight.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumLight.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumLight.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'KoPubWorld돋움체';
font-weight: 500;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumMedium.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumMedium.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumMedium.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumMedium.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumMedium.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'KoPubWorld돋움체';
font-weight: 700;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumBold.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumBold.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumBold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumBold.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumBold.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: '국립박물관문화재단클래식B';
src: url('./images/CFNMK_Classic_B.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/*네오둥근모 (제목용)*/
@font-face {
font-family: 'NeoDunggeunmo';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.3/NeoDunggeunmo.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/*둥근모꼴+ Fixedsys (본문용)*/
@font-face {
font-family: 'DungGeunMo';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/*삼국지3*/
@font-face {
font-family: 'Sam3KRFont';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/Sam3KRFont.woff') format('woff');
font-weight: normal;
font-style: normal;
unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}
/*교보손글씨*/
@font-face {
font-family: 'KyoboHand';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/*양진체*/
@font-face { font-family: ‘yangjin’; src: url(‘https://cdn.jsdelivr.net/gh/supernovice-lab/font@0.9/yangjin.woff’) format(‘woff’); font-weight: normal; font-style: normal; }
/*리디바탕*/
@font-face {
font-family: 'RIDIBatang';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/*프리텐다드*/
@font-face {
font-family: 'Pretendard';
font-weight: 100;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
font-weight: 200;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
font-weight: 300;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.ttf') format("truetype");
font-display: swap;
}/*
@font-face {
font-family: 'Pretendard';
font-weight: 400;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.ttf') format("truetype");
font-display: swap;
}*/
@font-face {
font-family: 'Pretendard';
font-weight: 500;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
font-weight: 600;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
font-weight: 700;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
font-weight: 800;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
font-weight: 900;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.ttf') format("truetype");
font-display: swap;
}
/*
--base: #F6E7C1;
--color: #393939;
--point: #FF7F5B;
--base: #E2DED3;
--color: #4E413B;
--point: #FF6D24;
--base: #f7f7f7;
--color: #100303;
--point: #95389e;
--base: #eeeeee;
--color: #393e46;
--point: #32e0c4;
--base: #e8ead3;
--color: #654062;
--point: #fbd46d;
--base: #faeee7;
--color: #0a97b0;
--point: #f54291;
*/
*,
*::after,
*::before,
input {
font: inherit;
font-size: inherit;
color: inherit;
line-height: inherit;
letter-spacing: inherit;
padding: 0;
margin: 0;
}
b {font-weight: bold !important;}
.entry-content i {font-style: italic !important;}
s {color: var(--color);}
.entry-content {
margin: 10px auto;
}
.content, .content *, .content *::after,
.content *::before
{ max-width: 100%;
text-align: inherit;
box-sizing: border-box;
}
#lightboxOverlay.lightbox,
#lightboxOverlay.lightbox * {
max-width: none !important;
}
/*부드러운 스크롤 효과*/
html {
scroll-behavior: smooth;
}
body {
/*여기서부터 trpg용 수정*/
max-width: 100%;
overflow-x: hidden;
}
/*다크모드용*/
html[theme="dark"] {
--base: #101010;
--color: #fff;
--point: #4531ff;
--background-color-body: #0d1117;
--background-color-head-foot: #161b22;
--border-bottom-h2: 1px solid #21262d;
--scroll: #a7a7a7;
--scroll2: #3a3a3a;
--color2: #fff;
--color-accent: #58a6ff;
--header-background: rgb(0 0 0 / 80%);
--header-border: rgb(44 44 44 / 32%);
--blockquote-border-left: 5px solid #30363d !important;
--tag-background-color: #222;
--color-a: #8b949e;
--color-b:#7c7c7c;
--background-color-inline-code: rgba(110, 118, 129, 0.4);
--hover: #fff;
--hover-color: #101010;
--border: #222222;
--border2: #222222;
--trpgemas:#1c1c1c;
--trpgcolor1:#fff;
--trpgmes:#101010;
--trpgcolor2:#fff;
--trpgspacer:#101010;
--trpgspacer2:#101010;
--trpgspacer3:#1c1c1c;
--trpgdice:#101010;
--trpgred1: #fff;
--trpgred2: #dc143c;
--trpgwh: #1c1c1c;
--dummya: #2a1818;
--dummyb:#062632;
--dummyc:#363636;
--shadow:rgb(0 0 0 / 0%);
--op5:rgb(0 0 0 / 75%);
}
html[theme="light"] {
--base: #fff;
--color: #000;
--point: #4531ff;
--background-color-body: #fff;
--background-color-head-foot: #f6f8fa;
--border-bottom-h2: 1px solid #d8dee4;
--scroll: #57606a;
--scroll2: #f0f0f0;
--color2: #333;
--color-accent: #0969da;
--header-background: rgb(255 255 255 / 80%);
--header-border: rgb(248,248,248);
--blockquote-border-left: 5px solid #d0d7de !important;
--tag-background-color: #f0f0f0;
--color-a: #57606a;
--color-b:#7c7c7c;
--background-color-inline-code: rgba(175, 184, 193, 0.2);
--hover: #000;
--hover-color: #fff;
--border: #ededed;
--border2: #fff;
--trpgemas:#f5e4d3;
--trpgcolor1:#653e10;
--trpgmes:#f1f1f1;
--trpgcolor2:#333333;
--trpgspacer:#e1e1e1;
--trpgspacer2:#f0c392;
--trpgspacer3:#f0f092;
--trpgdice:#bebebe;
--trpgred1: #c7254e;
--trpgred2: #f9f2f4;
--trpgwh: #f2f5d3;
--dummya: #f0e3ff;
--dummyb:#e3f7ff;
--dummyc:#dfdfdf;
--shadow:rgb(0 0 0 / 9%);
--op5:rgb(255 255 255 / 75%);
}
/*스크롤바*/
::-webkit-scrollbar {
width: 4px;
height: 6px;
padding: 1px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
background-color: var(--scroll2);
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
margin: 1px;
background-color: var(--scroll);
opacity: .5;
}
::-webkit-scrollbar-button {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-button:start,
::-webkit-scrollbar-button:end {
width: 0;
height: 0;
}
/* 드래그 */
/*검은색
::selection {
color: #fcfcfc;
text-shadow: 0 0 2px #373737;
transition: all 250ms ease-in;
background: black;
}
::-moz-selection{
color: #fcfcfc;
text-shadow: 0 0 2px #373737;
transition: all 250ms ease-in;
background: black;
}*/
::selection{
color: transparent;
text-shadow: 0 0 2px var(--color);
transition: all 250ms ease-in;
}
::-moz-selection{
color: transparent;
text-shadow: 0 0 2px #373737;
transition: all 250ms ease-in;
}
a[href=""],
a:not([href]) {
cursor: default;
}
button {
cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
.title {
/*font-family: 'New Tegomin', 'RIDIBatang', 'GongGothicMedium', ui-serif;*/
font-family:unset;
/*--도트 font-family: 'DungGeunMo', ui-serif;*/
/*-- 자필 느낌 font-family: 'New Tegomin', 'RIDIBatang', 'GongGothicMedium', ui-serif; */
/* -- 원본 font-family: '국립박물관문화재단클래식B', 'KoPubWorld돋움체', sans-serif; */
/* font-weight: bold; */
font-weight: bold;
word-break: keep-all;
line-height: 1.2;
}
/*드래그 금지 {user-select: none;} */
.container_postbtn .postbtn_like {
border-color: var(--border2) !important;
box-shadow: 0 10px 25px -10px rgba(0,0,0,.1),0 0 7px rgba(0,0,0,.05)!important
}
/*프로필사진*/
.img-profile {
width: 140px;
height: 140px;
margin: 0;
/*border-radius: 140px;*/
transition: all 0.5s;
}
.img-profile:hover {filter: drop-shadow(0px 0px 5px var(--color-b)); transition: all 0.5s;}
/*.img-profile:hover {box-shadow: 0 0 12px 5px var(--dummyc); transition: all 0.5s;}*/
.inner-box {
position: relative;
margin-bottom: 10px;
text-align: center;
}
body, .inner-box p, inner {
font-family: 'KoPubWorld돋움체', 'Noto Serif KR', sans-serif;
font-size: 12pt;
letter-spacing: -0.05em;
background-color: var(--base);
color: var(--color);
line-height: 1.6;
/*여기서부터 trpg용 수정*/ max-width: 100%;
overflow-x: hidden;
}
/*
.inner-box p {
line-height: 1.5rem;
font-size: 13px;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
letter-spacing: 0.3px;
margin-top: 20px;
text-align: left;
display: block;
font-family: 'nanumsquare',"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Nanum Gothic",Dotum,'돋움',Helvetica,sans-serif;
text-align: center;
}
body {
text-size-adjust: 100%;
font-weight: 400;
font-family: 'nanumsquare',"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Nanum Gothic",Dotum,'돋움',Helvetica,sans-serif;
line-height: 1.25;
color: #333;
}
.inner {
margin-bottom: 20px;
color: rgb(51,51,51);
font-family: 'nanumsquare',"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Nanum Gothic",Dotum,'돋움',Helvetica,sans-serif;
}
*/
body,html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 100%
}
blockquote,code,dd,div,dl,dt,fieldset,figure,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul {
margin: 0;
padding: 0
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block
}
button,input,select,textarea {
font-size: 100%;
border-radius: 0
}
button {
overflow: visible;
margin: 0;
padding: 0;
border: 0;
background: 0 0
}
ul li {
list-style: none
}
fieldset,img {
border: none;
vertical-align: top
}
a,a:link {
text-decoration: none;
color: var(--color2);
}
.entry-content a:link:hover { text-decoration: underline;}
a:visited {
text-decoration: none
}
a:active {
text-decoration: none
}
#header {
border-bottom: 1px solid var(--header-border);
padding-bottom: 20px;
top: 0;
z-index: 999;
background: var(--base);
backdrop-filter: blur(2px)
}
#header .inner {
position: relative;
max-width: 1080px;
margin: 0 auto
}
#header .inner .logo {
padding: 20px 0 0;
font-size: 21px;
letter-spacing: 0px;
color: #333;
text-align: center;
font-family: 'M PLUS 1p';
}
#header .inner .logo a {
display: inline-block;
text-decoration: none;
vertical-align: top;
font-family: 'NanumSquare';
font-weight: 700;
font-size: 16px;
}
#header .inner .logo img {
width: auto;
height: 22px;
display: block;
text-align: center;
margin: 0 auto;
/* opacity: .7; */
padding-top: 4px;
}
#container {
position: relative
}
#container .content-wrap {
max-width: 1080px;
margin: 40px auto 0;
padding: 0 20px
}
#container .content-wrap::after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden
}
#content {
float: left;
width: 75%;
padding: 0 0 60px;
box-sizing: border-box
}
#content>.inner::after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden
}
#aside {
float: right;
width: 20%;
padding: 0 0 32px;
box-sizing: border-box
}
#footer {
padding: 38px 0 28px
}
#footer .inner {
position: relative;
max-width: 1080px;
margin: 0 auto
}
#footer p {
margin-bottom: 10px;
font-size: .875em;
color: rgb(119,119,119)
}
#footer .page-top {
position: absolute;
bottom: -40px;
right: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: url(images/ico_package.png) -100px -200px no-repeat rgb(255,255,255);
text-indent: -999em;
border: 1px solid rgb(238,238,238);
margin-bottom: 40px
}
#footer .page-top:focus,#footer .page-top:hover {
background-color: rgb(117,117,117);
background-position-x: -150px
}
#tt-body-index #content {
padding-bottom: 20px
}
.btn,a.btn {
display: inline-block;
width: 100px;
height: 36px;
background-color: rgb(196,196,196);
text-align: center;
font-weight: 400;
font-size: 14px;
line-height: 36px;
color: rgb(255,255,255);
vertical-align: middle
}
.btn:hover {
background-color: rgb(103,103,103)
}
.post-header h1 {
margin-bottom: 18px;
font-size: 1.4em;
line-height: 1.375
}
.post-header h1 em {
margin-left: 7px;
font-style: normal;
color: rgb(4,190,184)
}
.post-item {
float: left;
width: 31.0811%;
margin: 0 0 30px 3.37838%;
border-radius: 10px;
box-sizing: border-box;
box-shadow: 0 10px 25px -10px rgb(0 0 0 / 10%), 0 0 7px rgb(0 0 0 / 5%);
}
.post-item a:hover .title>strong {
background: linear-gradient(var(--dummya),var(--dummyb)) repeat-x left 0 bottom 0 / 1px 6px;
}
.post-item:nth-child(3n+1) {
clear: both;
margin-left: 0
}
.post-item a {
display: block;
text-decoration: none
}
.post-item .thum {
position: relative;
display: block;
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 100%;
box-sizing: border-box;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
/*
.post-item .thum img {
width: 100%;
height: auto
}*/
.post-item.protected .thum img {
visibility: hidden;
}
.post-item .title {
font-size: 17px;
line-height: 1.4;
margin: 20px 20px 0 20px;
letter-spacing: -.8px;
color: var(--color2);
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-word;
transition: padding .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.post-item:hover .title {
-webkit-line-clamp: inherit;
height: fit-content;
word-break: break-all;
padding: 5px 0px;
transition: padding .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.post-item .excerpt {
padding: 20px 20px 20px 20px;
overflow: hidden;
max-width: 100%;
min-height: 60px;
margin-bottom: 20px;
text-overflow: ellipsis;
font-size: 13px;
line-height: 1.25rem;
color: #999;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.post-item .excerpt:hover {
color: var(--hover);
transition: .3s ease
}
.post-item:hover .excerpt {-webkit-line-clamp: 5 !important;}
.post-item.protected .thum::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 34px;
height: 47px;
margin: -24px 0 0 -17px;
background: url(images/ico_package.png) 0 -120px / 120px no-repeat
}
#tt-body-archive .not-found ul,#tt-body-category .not-found ul,#tt-body-tag .not-found ul {
display: none
}
#tt-body-archive .not-found .archive,#tt-body-category .not-found .category,#tt-body-tag .not-found .tag {
display: block
}
.pagination {
margin-top: 60px;
text-align: center;
margin-bottom: 30px;
}
.pagination a {
display: inline-block;
margin: 0 12px;
font-size: .875em;
line-height: 1.5rem;
vertical-align: top;
color: #333
}
.pagination .selected {
color: var(--hover);}
.pagination .next,.pagination .prev {
width: 22px;
height: 22px;
border: 1px solid rgb(0 0 0);
background: url(images/ico_package.png) 0 -50px no-repeat;
text-indent: -999em;
display: inline-block;
}
.pagination .next {
background-position-x: -50px
}
.pagination .view-more {
display: block;
margin: 0;
padding: 12px 0 11px;
border: 1px solid rgb(238,238,238);
text-align: center;
font-size: .875em;
color: rgb(153,153,153)
}
.related-articles {
margin-bottom: 55px
}
.related-articles h2 {
margin-bottom: 15px;
font-weight: 600;
font-size: 1em
}
.related-articles ul {
display: inline-block;
width: 101.622%;
margin-left: -1.62162%;
vertical-align: top
}
.related-articles ul li {
float: left;
width: 25%;
padding-left: 1.62162%;
box-sizing: border-box
}
.related-articles ul li:first-child {
margin-left: 0
}
.related-articles ul li a {
color: rgb(85,85,85)
}
.related-articles ul li a:focus,.related-articles ul li a:hover {
color: var(--hover);
}
.related-articles ul li a:hover > figure img {
box-shadow: 0 0 4px 3px var(--border);
transition: all 0.3s;
}
.related-articles ul li figure {
display: block;
width: 100%;
height: 0;
margin-bottom: 0;
padding-bottom: 100%;
border-radius: 10px;
}
.related-articles ul li figure img {
width: 100%;
height: auto;
aspect-ratio: 1 !important;
object-fit: cover;
content-visibility: auto;
image-rendering: -webkit-optimize-contrast;
transform: translateZ(0);
}
/* Shine */
.related-articles ul li figure {
position: relative;
overflow: hidden;
}
.related-articles ul li figure::before {
position: absolute;
top: 0;
right: -100%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgb(255 255 255 / 22%) 97%, rgb(255 255 255 / 0%) 100%);
background: linear-gradient(to left, rgb(255 255 255 / 22%) 97%, rgb(255 255 255 / 0%) 100%);
-webkit-transform: skewX(35deg);
transform: skewX(35deg);
}
.related-articles ul li figure:hover::before {
-webkit-animation: shine .35s;
animation: shine .35s;
animation-fill-mode: forwards; /
animation-play-state: paused;
}
@-webkit-keyframes shine {
100% {
right: -40%;
}
}
@keyframes shine {
100% {
right: -40%;
}
}
/*
.related-articles ul li figure::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.related-articles ul li figure:hover::before {
-webkit-animation: shine .75s;
animation: shine .75s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}*/
.related-articles ul li .title {
overflow: hidden;
max-width: 100%;
white-space: initial;
font-size: .975em;
line-height: 1.4;
margin-top: 10px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
display: -webkit-box;
font-weight: 700
word-break: break-all;
}
.entry-content h1 {
clear: both;
margin: 29px 0 22px;
font-size: 1.6875em;
line-height: 1.5;
color: var(--color);
}
.entry-content h2 {
clear: both;
line-height: 1.5;
color: var(--color);
font-weight: bold!important;
margin: 20px 0 10px;
font-size: 28px;
}
.entry-content h3 {
clear: both;
margin: 20px 0 10px;
font-size: 24px;
line-height: 1.5;
color: var(--color);
font-weight: bold!important;
}
.entry-content h4 {
clear: both;
line-height: 1.5;
color: var(--color);
font-weight: bold!important;
margin: 20px 0 10px;
font-size: 20px;
}
.entry-content a {
color: var(--color);
}
.entry-content p {
word-break: break-all;
color: var(--color1);
}
.entry-content p img {
max-width: 100%;
height: auto
}
.entry-content figure {
margin-top: 8px!important
}
.entry-content pre {
word-break: break-all;
white-space: pre-wrap;
overflow-wrap: break-word
}
.entry-content ul {
list-style: none;
margin-bottom: 5px;
padding: 0;
}
.entry-content ul li {
position: relative;
margin-bottom: 5px;
line-height: 1.8;
list-style-type: square!important;
margin-left: 22px;
}
.entry-content ol li {
position: relative;
margin: 5px 0px 5px 20px;
line-height: 1.67;
list-style-type: upper-roman;
/* margin-left: 20px; */
}
.entry-content img.alignleft {
float: left;
margin: 0 22px 22px 0
}
.entry-content img.aligncenter {
display: block;
margin: 0 auto 22px
}
.entry-content img.alignright {
float: right;
margin: 0 0 22px 22px
}
.entry-content blockquote {
margin-bottom: 40px;
padding: 16px 20px;
border-left: 4px solid rgb(230,230,230);
}
.entry-content blockquote p {
margin: 22px 0 0
}
.entry-content blockquote p:first-child {
margin-top: 0
}
.entry-content input {
height: 36px;
padding: 0 10px;
border: 1px solid rgb(230,230,230);
font-size: .875em;
line-height: 1.25;
color: rgb(102,102,102);
box-sizing: border-box;
vertical-align: middle
}
.entry-content .entry-content .protected_form {
margin-bottom: 40px;
padding: 120px 0 200px;
border-bottom: 1px solid rgb(122,88,58);
text-align: center
}
.entry-content .entry-content .protected_form input {
width: 200px;
margin-bottom: 10px;
vertical-align: top
}
.entry-content .cap1 {
text-align: center;
font-size: .875em;
font-style: italic
}
.entry-content .iframe-wrap {
position: relative;
height: 0;
padding-bottom: 56.25%
}
.entry-content .iframe-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.entry-content .protected_form {
display: block;
width: 100%;
padding: 98px 0 120px;
text-align: center
}
.entry-content .protected_form h2 {
margin: 0 0 8px;
font-weight: 600;
font-size: 1.625em;
line-height: 2.125rem;
color: rgb(85,85,85)
}
.entry-content .protected_form p {
margin-bottom: 34px;
font-weight: 300;
font-size: 1em;
line-height: 1.75;
color: rgb(153,153,153)
}
.entry-content .protected_form input {
width: 183px;
padding: 0 23px;
border: 1px solid rgb(238,238,238);
font-size: .9125em;
line-height: 2.125rem
}
.entry-content .protected_form input:focus {
border-color: rgb(72,72,72)
}
.entry-content .protected_form .btn {
margin-left: 5px
}
input:-internal-autofill-selected {
background-color: #ffffff !important;
background: #fff !important;
}
/*사이드바*/
.sidebar ul li {
padding: 4px 0 5px;
line-height: 1.8
}
.sidebar ul li a:visited {
color: rgb(51,51,51)
}
.sidebar ul li a:hover {
color: var(--hover);
}
.sidebar ul li a:visible {
color: rgb(51,51,51);
}
.sidebar .sidebar-2 {
margin-top: 38px;
padding-top: 46px;
border-top: 1px solid rgb(238,238,238)
}
/*사이드바 관리자메뉴*/
/*sidebar_manage ul {
display: grid;
justify-items: center;
grid-auto-flow: column;
grid-template-columns: repeat(8, 2fr);
align-items: center;
}*/
sidebar_manage ul {
display: flex;
justify-content: space-evenly;
align-items: baseline;
}
/*카테고리*/
nav.category_home {
margin-bottom: 46px;
/* font-family: 'nanumsquare',"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Nanum Gothic",Dotum,'돋움',Helvetica,sans-serif;*/
font-family: unset;
text-align: left;
font-weight: bold;
}
.sidebar .category {
margin-bottom: 46px;
/* font-family: 'nanumsquare',"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Nanum Gothic",Dotum,'돋움',Helvetica,sans-serif;*/
font-family: unset;
text-align: center;
}
.sidebar .category ul li a {
padding: 0;
font-size: 15px;
font-weight: 600;
text-align: left;
}
.sidebar .category ul li .category_list {
padding-top: 10px;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(2, 2fr);
padding-bottom: 10px;
}
.sub_category_list {
transition: all .2s ease;
max-height: 0px;
max-width:0px;
opacity: 0;
visibility:hidden;
}
.category_list li:hover > ul.sub_category_list, .category_list li > ul.sub_category_list.selected {
transition: all .5s;
max-height: 500px;
max-width:500px;
opacity: 1;
visibility:visible;
}
.category_list li:hover > .sub_category_list li:first-child {
margin-top: 5px;
transition: all .5s;
}
.sub_category_list li:first-child {
margin-top: 0px;
transition: all .5s;
}
.sidebar .category ul li .category_list li a {
font-weight: bold;
text-align: center;
border: 1px solid var(--border);
font-size: 13px;
padding: 10px 5px;
box-sizing: border-box;
border-radius: 10px;
color: var(--color);
}
.sidebar .category ul li .category_list li a:hover {box-shadow: 0 0 4px 3px var(--border); transition: all 0.3s;}
.sidebar .category ul li .category_list a {
display: block;
}
.category_list .c_cnt, .list-count {
/* font-size: .5em; */
/* opacity: .2; */
display: none;
}
a.link_item.selected, a.link_sub_item.selected, a.link_tit.selected {
background: var(--header-border);
box-shadow: inset 0 0 6px 1px var(--background-color-inline-code);
}
/*a.link_item.selected, a.link_sub_item.selected {
background: #fdfdfd;
box-shadow: inset 0 0 6px 1px #ebebeb;
}*/
.category_home li .selected, .category_home li a:hover {
padding: 5px 12px;
background: var(--base);
display: block;
/* border-radius: 10px; */
color: var(--color) !important;
border-left: 4px solid var(--background-color-inline-code);
}
/*.category_home li a:hover { padding: 5px 12px;
background: var(--base);
display: block;
border-radius: 10px;
color: var(--color) !important;}*/
.category_home li a {
display: block;
color: var(--color2) !important;
}
/*사이드바*/
.sidebar .recent-comment {
margin-bottom: 36px
}
.sidebar .recent-comment ul li a {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.sidebar .post-list {
margin-bottom: 46px;
}
.sidebar .tab-list {
margin-bottom: 46px
}
.sidebar .post-list h2 {
margin-bottom: 12px;
font-size: 15px;
margin-top: 12px;
}
.sidebar .post-list ul li {
overflow: hidden;
margin-bottom: 6px;
padding: 0;
}
.sidebar .post-list ul li img {
float: right;
width: 58px;
height: 58px;
display: none;
}
.sidebar .post-list ul li a {
display: block;
overflow: hidden;
text-decoration: none;
color: #999;
}
.sidebar .post-list ul li a:hover .title {
text-decoration: underline
}
.sidebar .post-list ul li .title {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 15px;
font-size: 13px;
}
.sidebar .post-list ul li .date {
display: none;
margin-top: 6px;
font-size: 14px;
color: #777;
}
.sidebar .tab-ui h2 a {
color: rgb(153,153,153)
}
.sidebar .tab-ui h2 a.current {
color: rgb(85,85,85)
}
.sidebar .tab-ui h2 a::before {
content: "";
display: inline-block;
width: 1px;
height: 5px;
margin: 0 10px;
vertical-align: middle;
background: url(images/ico_package.png) -100px -50px no-repeat
}
.sidebar .tab-ui h2 a:first-child::before {
content: none
}
#dimmed {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.6)
}
.slide-wrap {
overflow: hidden
}
#content .another_category {
padding: 16px 20px 14px;
margin: 60px 0 57px!important
}
#content .another_category h4 {
margin: 0 0 13px!important;
padding: 0px!important;
border-bottom: 0px!important;
font-size: 0.875em!important;
border-left: 0px solid var(--color);
}
#content .another_category table {
border: 0;
margin: 0px!important
}
#content .another_category th {
padding: 2px 0px!important;
font-size: 0.875rem!important
}
#content .another_category th a.current {
font-weight: 400;
text-decoration: none !important;
color: var(--color)!important;
border: 0px!important;
}
#content .another_category td {
border: 0;
padding: 2px 0px!important;
font-size: 0.75rem!important
}
.container_postbtn {
margin: 53px 0 55px;
padding: 0px!important
}
.absent_post::before {
content: "";
display: block;
margin-bottom: 7px;
font-weight: 700;
font-size: 1.75em;
line-height: 1.28571;
color: rgb(85,85,85);
white-space: pre
}
.absent_post {
line-height: 1.75;
padding: 98px 0px!important;
background: 0 0px!important;
font-weight: 400!important;
font-size: 1em!important;
color: rgb(153,153,153)!important
}
.layout-aside-left #content {
float: right
}
.layout-aside-left #aside {
float: left;
margin-left: 0;
padding: 0 0;
top: 90px;
position: sticky;
}
.layout-aside-left #container .content-wrap::before {
margin-left: -256px
}
/*썸네일*/
.thum img {
image-rendering: -webkit-optimize-contrast;
transform: translateZ(0);
}
.list-type-thumbnail .post-header {
margin-bottom: 28px;
padding-bottom: 18px;
border-bottom: 1px solid rgb(238,238,238)
}
.list-type-thumbnail .post-header h1 {
margin-bottom: 0
}
.list-type-thumbnail .post-item {
float: none;
overflow: hidden;
width: 100%;
margin: 0 0 28px
}
.list-type-thumbnail .post-item .thum {
display: inline;
width: auto;
height: auto;
margin: 0;
padding: 0
}
.list-type-thumbnail .post-item .thum img {
float: right;
width: 126px;
height: auto;
margin-left: 57px;
border: 1px solid rgb(241,241,241);
transform: translateY(0)
}
.list-type-thumbnail .post-item.protected .thum {
float: right;
width: 126px;
height: 166px;
margin-left: 57px;
border: 1px solid rgb(241,241,241);
background-color: rgb(248,248,248)
}
.list-type-thumbnail .post-item .title {
max-width: 95%;
margin-bottom: 12px;
padding-top: 7px;
font-size: 1.25em
}
.list-type-thumbnail .post-item .excerpt {
overflow: hidden;
height: 3.75rem;
margin-bottom: 20px;
font-size: .875em;
line-height: 1.25rem
}
.list-type-text .post-header {
margin-bottom: 38px;
padding-bottom: 18px;
border-bottom: 1px solid rgb(238,238,238)
}
.list-type-text .post-header h1 {
margin-bottom: 0
}
.list-type-text .post-item {
float: none;
overflow: hidden;
width: 100%;
margin: 0 0 35px
}
.list-type-text .post-item .thum {
display: none
}
.list-type-text .post-item .title {
max-width: 96%;
margin-bottom: 10px;
padding-top: 0;
font-size: 1em
}
.list-type-text .post-item .excerpt {
max-width: 96%;
margin-bottom: 20px;
font-size: .875em;
line-height: 1.25rem
}
.list-type-text .pagination {
margin-top: 36px
}
@media screen and (max-width: 1080px) {
#footer,#header h1 {
padding-left:24px;
padding-right: 24px
}
#container .content-wrap::before {
left: 72.7%;
margin-left: 0
}
.layout-aside-left #container .content-wrap::before {
left: 27.3%;
margin-left: 0
}
#header .inner .logo {
padding: 0 20px;
padding-top: 24px
}
}
/*모바일*/
@media screen and (max-width: 767px) {
#container .content-wrap {
margin: 0 auto 0;
padding: 0;
}
#header h1 {
position:relative;
z-index: 10;
padding: 40px 24px 0 24px;
background-color: rgb(255,255,255);
margin: 0
}
#container .content-wrap::before {
content: none
}
#content {
float: none;
width: auto;
padding: 34px 14px 40px
}
#aside {
position: fixed;
top: 0;
right: -278px;
z-index: 400;
float: none;
overflow: auto;
width: 278px;
height: 100%;
padding: 20px 20px 40px;
box-sizing: border-box;
transition: right 0.5s ease 0s
}
#footer {
padding: 32px 24px 26px
}
#footer p {
margin-bottom: 11px;
font-size: .8125em
}
#header .inner .logo {
padding: 0 24px;
padding-top: 24px;
text-align: center
}
#tt-body-index #content {
padding: 0
}
#tt-body-index #content>.inner {
padding: 0 15px;
margin-top: 40px;
}
#tt-body-index #content>.inner:first-child {
padding-top: 15px
}
#tt-body-index.list-type-text #content>.inner:first-child {
padding-top: 36px
}
#tt-body-index .pagination {
margin: 0 20px 40px
}
#tt-body-page #content {
padding-left: 0;
padding-right: 0
}
.layout-aside-left #aside {
padding: 20px 20px 20px;
width: 100%;
position: inherit;
}
.post-header {
padding-top: 2px;
text-align: center;
}
.tags {
text-align: center;
}
.post-item:nth-child(3n+1) {
margin: 1.44828%;
clear: none !important;
}
.post-item:nth-child(2n+1) {
margin-left: 2.44828%;
clear: both;
}
.post-item {
margin: 0 auto;
width: 46%;
margin-bottom: 15px;
margin: 1.44828%;
min-height: 383.39px;
display: table-cell;
}
.thum img {
overflow: hidden;
width: 100%;
}
.cover {
display: table;
vertical-align: top;
margin-bottom: 21px;
padding: 0 3.33028%;
}
.post-item .thum {
margin-bottom: 0
}
.post-item .excerpt {
padding: 20px 20px 20px 20px
}
.pagination {
margin-bottom: 30px;
}
.pagination a {
margin: 0 4px;
display: none;
}
.list-type-vertical .post-item {
margin-bottom: 30px
}
.list-type-vertical .post-item .title {
margin-bottom: 7px
}
.list-type-thumbnail .post-item .thum img {
width: 96px;
margin-left: 25px
}
.list-type-thumbnail .post-item .title {
margin-bottom: 9px;
padding-top: 3px;
font-size: 1.125em
}
.list-type-thumbnail .post-item .excerpt {
margin-bottom: 11px
}
.list-type-thumbnail .post-item.protected .thum {
width: 96px;
height: 128px;
margin-left: 25px
}
.list-type-text .post-header {
margin-bottom: 28px
}
.list-type-text .post-item {
margin-bottom: 26px
}
.list-type-text .post-item .title {
margin-bottom: 10px
}
.list-type-text .post-item .excerpt {
margin-bottom: 12px;
-webkit-line-clamp: 4
}
.list-type-text .pagination {
margin-top: 30px
}
.inner h1 {
padding: 0 12px;
font-size: 1.4em;
letter-spacing: 0px;
}
.entry-content h2 {
font-size: 20px
}
.entry-content h3 {
font-size: 18px
}
.entry-content h4 {
font-size: 16px
}
.entry-content {
padding: 20px
}
.entry-content p {
margin-bottom: 22px;
line-height: 1.625rem
}
.entry-content figure {
margin-top: 6px!important
}
.entry-content .protected_form input {
width: 163px
}
#content .another_category {
margin: 40px 0 37px!important
}
.container_postbtn {
margin: 35px 0 37px
}
.related-articles {
margin-bottom: 21px;
padding: 0 24px
}
.related-articles h2 {
margin-bottom: 19px
}
.related-articles ul {
width: 103.571%;
margin-left: -3.57143%
}
.related-articles ul li {
width: 50%;
margin-bottom: 15px;
padding-left: 3.44828%;
}
.related-articles ul li figure {
margin-bottom: 9px
}
.related-articles ul li .title {
height: 2.8em;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
.layout-aside-left #content {
float: none
}
#content .another_category th {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical
}
.bf-breadcrumb.bc-top-style {
padding: 0 12px
}
.message, .message.desc, .message.general, .message.general.you, .message.rollresult {
font-size: 0.97em !important;
}
.entry-content * {
font-size: 0.97em !important;
}
#tt-body-index .post-header {
padding-top:36px;
padding-left: 24px
}
.comments {
margin-bottom: 60px;
padding: 0 12px;
}
span.d_m_write {
display: inline-block;
float: right;
padding-top: 6px;
color: var(--scroll2);
margin-right: 12px;
}
}
/*모바일 끝*/
.revenue_unit_wrap.position_list {
max-width: 740px;
margin: 30px auto
}
.adsense {
width: 100%;
height: 100%;
margin-bottom: 10px
}
.btn_bottom, .btn_go {
display: block;
position: fixed;
right: 5%;
bottom: 65px;
z-index: 5000; transition: all .5s ease;
}
.btn_top, .btn_wrap { display: block;
position: fixed;
right: 5%;
bottom: 65px;
z-index: 5001;transition: all .5s ease;}
.btn_wrap{z-index: 5003 !important;}
.btn_top a, .btn_wrap a{
display: block;
width: 67px;
height: 67px;
overflow: hidden;
text-indent: -9999px;
background: url(./images/toppp.png) no-repeat;
outline: 0;
border-radius: 100%;
cursor: pointer; transition: all .5s ease;
box-shadow: 0px 0px 30px 6px var(--shadow);
}
.btn_wrap.active {
border-radius: 100%;
z-index: 5003 !important;
filter: brightness(100);
box-shadow: 0 0 1px white;
}
.btn_bottom a {display: block;
width: 67px;
height: 67px;
overflow: hidden;
text-indent: -9999px;
background: url(./images/btmmm.png) no-repeat;
outline: 0;
border-radius: 100%;
cursor: pointer; transition: all .5s ease;}
.btn_bottom.active a, .btn_go.active a {
box-shadow: 0px 0px 30px 6px var(--shadow);
}
.btn_go.active, .btn_top.active, .btn_bottom.active {transition: all .5s ease;}
.btn_top.active {
bottom: 214px;
}
.btn_bottom.active {
bottom: 140px;
z-index: 5002;
}
/**접기버튼**//*
.btn_go a { opacity: 0; display: block;
width: 67px;
height: 67px;
overflow: hidden;
text-indent: -9999px;
border-radius: 100%;
cursor: pointer;
opacity: 1;
background: url(./images/toppp.png) no-repeat;
transform: rotateZ(90deg);}
.btn_go.active {
right: 5%;
bottom: -12px;
}
.udbtn.fold .btn_wrap, .udbtn.fold .btn_top, .udbtn.fold .btn_bottom {
max-height: 0px;
opacity: 0;
transition: all .5s ease;
bottom: 0;
}
.udbtn.fold div {
right: -3% !important;
bottom: -4% !important;
}
.btn_go.active.fold a {
transform: rotateZ(270deg);
transition: all .5s ease;
}*/
h1,h2,h3,h4,h5,h6 {
/* font-family: 'NanumSquare'; */
font-weight: 700!important;
letter-spacing: -1px;
color: var(--color);
}
/*.bf-breadcrumb.bc-top-style {
margin: 0 0 10px 0;
font-size: 15px;
display: inline-block;
vertical-align: top;
}*/
.bf-breadcrumb.bc-top-style {
margin: 0 0 10px 0;
font-size: 15px;
vertical-align: top;
order: 1;
flex-basis: 100%;
}
.bf-breadcrumb .bf-breadcrumb-items {
padding: 0;
margin: 0;
list-style: none;
letter-spacing: -1px;
}
.bf-breadcrumb .bf-breadcrumb-item:not(.bf-breadcrumb-end):after {
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: '/';
margin-left: 5px;
margin-right: 5px;
color: #b7b7b7;
vertical-align: baseline;
font-size: 10px;
}
.bf-breadcrumb .bf-breadcrumb-item a,.bf-breadcrumb .bf-breadcrumb-item span {
color: #9e9e9e;
display: inline-block;
font-size: 13px;
letter-spacing: 0.3px;
}
li.bf-breadcrumb-item {
display: inline-block
}
#toc * {
font-size: 15px;
color: var(--color);
opacity: .8;
}
#toc a:hover {opacity: 1;transition: .3s ease;}
#toc ul {
margin-bottom: 0;
margin-top: 5px
}
#toc>li {
margin-bottom: 0
}
#toc {
margin-left: 0;
}
#toc>li>ul li {
margin-bottom: 5px!important;
margin-left: 15px
}
.link_tit {
border: 1px solid var(--border);
font-size: 13px !important;
padding: 10px 5px !important;
box-sizing: border-box;
border-radius: 10px;
color: var(--color) !important;
display: block;
text-align: center !important;
}
.link_tit:hover {
box-shadow: 0 0 4px 3px var(--border);
transition: all 0.3s;
}
.link_tit span.c_cnt {
display: none;
}
figure figcaption {
font-size: 14px;
padding-top: 0px;
font-style: italic;
color: var(--color-b);
padding-bottom: 5px;
}
figure.imageblock.alignCenter {
margin: 0 auto !important;
}
figure.imagegridblock, #tt-body-page figure.imagegridblock {
margin: 0px !important
}
figure.imagegridblock .image-container {
margin-bottom: 7px
}
#tt-body-page figure.imageblock img, figure.imageblock img {
margin-bottom: 7px!important
}
.copyright {
line-height: 1.25rem;
color: var(--color);
display: block;
text-align: center;
margin: 0 auto;
font-size: 13px;
opacity: 0.35;
}
}
/* 검색창 */
.main-search-form {
margin: 0 auto;
}
.flex {
display: flex !important;
}
li[class^="t_menu_"] {
margin: 10px 0px;
}
li[class^="t_menu_link_"]:after {
background: url(./images/new_icon_8.png);
content: "";
width: 4px;
height: 4px;
position: relative;
background-repeat: no-repeat;
display: inline-block;
background-size: contain;
bottom: 6px;
}
/*검색 기능*/
.main-search-form {
padding: 10px 25px;
font-size: .9em;
font-weight: bold;
}
.main-search-form > div {
margin: 0 auto;
text-align: left;
border: 1px solid var(--border);
width: 100%;
font-size: 13px;
padding: 10px 15px;
box-sizing: border-box;
border-radius: 10px;
color:#333;
}
input[type="text"], input.submit {
background: transparent;
border-color: transparent;
outline: none;
}
.main-search-form > div:hover {box-shadow: 0 0 4px 3px var(--border); color: var(--hover); transition: all 0.3s;}
.main-search-form > div > * {
width: 100%;
background: transparent;
border: 0;
padding: 1px;
}
.main-search-form input {
padding: 1px 10px;
width: 75%;
transition: all .5s;
}
.main-search-form > div:hover {
color: var(--color);
}
.main-search-form button {
width: 20% !important;
text-align: center;
color: #333;
}
.main-search-form button:hover {
color: var(--hover);
}
/* Comment */
.comments {
margin-bottom: 60px;
}
.comments h2 {
margin-bottom: 15px;
font-weight: 600;
font-size: 1em;
}
.comments h2 .count{
margin-left: 4px;
color: #999;
}
.comment-list {
/*margin-bottom: 60px;*/
border-top: 1px solid #eee;
}
/*.comment-list ul li {
display: inline-block;
width: 100%;
padding: 32px 0 28px;
border-bottom: 1px solid #eee;
vertical-align: top;
box-sizing: border-box;
}*/
.sub-comment-box {
margin: 28px 0 -32px 0;
border-top: 1px solid #eee;
background-color: #fafafa;
display: inline-block;
width: 100%;
vertical-align: top;
box-sizing: border-box;
padding: 14px 0 15px 20px;
border-bottom: 0;
}
.comment-box {
display: inline-block;
width: 100%;
padding: 32px 0 28px;
border-bottom: 1px solid #eee;
vertical-align: top;
box-sizing: border-box;
}
.comment-list .tt_more_preview_comments_wrap {
padding: 0;
border: 0;
}
.comment-list .tt_more_preview_comments_text {
display: block;
margin: -1px 0 0;
padding: 12px 0 11px;
border: 1px solid #eee;
text-align: center;
font-size: 0.875em;
color: #999;
}
.comment-list .tt_more_preview_comments_text:hover {
text-decoration: underline;
}
.comment-list ul li .author-meta {
position: relative;
margin-bottom: 7px;
padding: 0px 0 0 60px;
font-size: 0.8125em;
color: #999;
}
.comment-list ul li .author-meta a {
color: #999;
}
.comment-list ul li .author-meta a:before,
.comment-list ul li .author-meta span:before {
content: "";
display: inline-block;
width: 2px;
height: 2px;
margin: 0 7px 0 5px;
background-color: #e3e3e3;
vertical-align: middle;
}
.comment-list ul li .author-meta .nickname {
font-weight: 700;
color: #555;
}
.comment-list ul li .author-meta .nickname a {
color: #555;
}
.comment-list ul li .author-meta .avatar {
float: left;
width: 50px;
height: 50px;
margin: -2px 0px 0px -60px;
border: 1px solid #eee;
border-radius: 50%;
margin-right: 10px;
margin-left: -60px;
}
.comment-list ul li .author-meta .control {
position: absolute;
top: 0;
right: 0px;
border-bottom: 0;
}
.comment-list ul li .author-meta .control button {
content: "";
display: block;
width: 20px;
height: 20px;
background: url(./images/ico_package.png) no-repeat -141px 5px;
text-indent: -999em;
}
.comment-list ul li .author-meta .control .link {
display: none;
position: absolute;
top: 100%;
left: -65px;
width: 70px;
text-align: center;
}
.comment-list ul li .author-meta .control .link a {
display: block;
margin-top: -1px;
border: 1px solid #e0e0e0;
background-color: #fff;
text-decoration: none;
font-size: 0.875em;
line-height: 1.5rem;
color: #333;
}
.comment-list ul li .author-meta .control .link a:focus,
.comment-list ul li .author-meta .control .link a:hover {
background-color: #fafafa;
color: #222;
}
.comment-list ul li .author-meta .nickname:before,
.comment-list ul li .author-meta .nickname a:before,
.comment-list ul li .author-meta .control:before,
.comment-list ul li .author-meta .control a:before {
content: none;
}
.comment-list ul li p {
max-width: 95%;
overflow: hidden;
font-size: 0.9em;
line-height: 1.3125rem;
color: #777;
box-sizing: border-box;
}
/*.comment-list ul li p {
max-width: 95%;
font-size: 0.8em;
line-height: 1.3125rem;
color: #000;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
white-space: pre-line;
}*/
.comment-list ul li .reply {
display: inline-block;
margin-top: 10px;
font-size: 0.8125rem;
color: #999;
}
/*.comment-list ul li ul {
margin: 28px 0 -32px 0;
padding: 26px 0 21px;
border-top: 1px solid #eee;
background-color: #fafafa;
}
.comment-list ul li ul li {
padding: 14px 0 15px 0px;
border-bottom: 0;
}*/
.comment-list ul li ul li .author-meta {
margin-bottom: 8px;
}
.comment-list ul li ul li .author-meta .control {
right: 0px;
}
.comment-list ul li ul li .author-meta .avatar {
width: 80px;
height: 80px;
}
.comment-list ul li ul li p {
max-width: 80%;
}
.comment-list ul li ul .tt_more_preview_comments_wrap {
display: block;
}
.comment-list ul li ul .tt_more_preview_comments_text {
margin-bottom: 16px;
border-top: 0;
border-left: 0;
border-right: 0;
}
.comment-list ul li ul .tt_more_preview_comments_text:first-child {
margin-top: -24px;
padding: 12px 0 11px;
}
.comment-form {
position: relative;
margin-bottom: 60px;
}
.comment-form .field {
overflow: hidden;
margin-bottom: -1px;
border: 1px solid #eee;
}
.comment-form .field input[type=text], .comment-form .field input[type=password] {
float: left;
width: 50%;
padding: 12px 16px;
border: 0;
border-left: 1px solid #eee;
font-size: 0.875em;
color: #777;
box-sizing: border-box;
background: white !important;
outline: none !important;
}
.comment-form .field input:first-child {
border-left: 0;
}
.comment-form textarea {
display: block;
width: 100%;
margin-bottom: 20px;
padding: 16px;
border: 1px solid #eee;
font-size: 15px;
color: #777;
box-sizing: border-box;
font-family: unset;
outline: none !important;
resize: vertical;
min-height: 130px;
max-height: 30vh;
}
.comment-form input::-webkit-input-placeholder,
.comment-form textarea::-webkit-input-placeholder {
color: #999;
}
.comment-form .secret {
position: absolute;
left: 0;
bottom: 8px;
}
.comment-form .secret input {
display: none;
}
.comment-form .secret label {
display: inline-block;
font-size: 0.8125em;
line-height: 1.25rem;
color: #666;
outline: none;
cursor: pointer;
}
.comment-form .secret label:before {
content: "";
display: inline-block;
width: 19px;
height: 18px;
margin-right: 12px;
border: 1px solid #e1e1e1;
vertical-align: top;
background-color: #fff;
}
.comment-form .secret input[type=checkbox]:checked+label:before {
background: url(./images/ico_package.png) no-repeat -47px 4px;
}
.comment-form .submit {
text-align: right;
}
.comment-form .submit button {
background-color: #333;
color: #fff;
}
.comment-form .submit button:hover,
.comment-form .submit button:focus {
background-color: #4531ff;
}
/*툴팁 */
*[ttooltip] {
position: relative !important;
overflow: visible !important;
}
*[ttooltip]::before {
content: attr(ttooltip);
visibility: hidden;
opacity: 0;
/*font-family: 'KoPubWorld돋움체', sans-serif;*/
font-family: unset;
font-weight: normal;
font-size: 10pt;
font-style: normal;
max-width: 200px;
width: max-content;
background: var(--color2);
color: var(--hover-color);
border: 1px solid var(--hover-color);
padding: 4px 10px 3px;
border-radius: 5px;
position: absolute;
top: -1em;
left: 50%;
overflow: hidden;
transform: translate(-50%, 0);
max-height: 0;
z-index: 1000;
}
*[ttooltip].icon-tooltip::before {
font-family: 'Font Awesome 5 Free' !important;
font-style: normal !important;
font-weight: 900 !important;
}
*[ttooltip].icon-tooltip.blank-icon::before {
content: "\f35d";
}
*[ttooltip]:hover::before {
transition: all .3s;
visibility: visible;
opacity: .95;
max-height: 50px;
top: -2.7em;
}
/*인용*/
blockquote, blockquote p { MARGIN-block: 10px !important;}
#tt-body-page blockquote[data-ke-style='style1'] {
text-align: inherit;
background: none !important;
padding: inherit;
font-size: inherit;
color: var(--color2);
line-height: 23pt;
border: 0 none;
font-weight: bolder;
font-family: 'Noto Serif KR', sans-serif;
margin-left: 15px !important;
}
blockquote[data-ke-style='style1'] {
text-align: inherit;
background: none !important;
padding: inherit;
font-size: inherit;
color: var(--color2);
line-height: 23pt;
border: 0 none;
font-weight: bolder;
font-family: 'Noto Serif KR', sans-serif;
margin-left: 15px !important;
}
blockquote[data-ke-style="style1"]::before {
content: "\201C";
font-size: 3em;
font-family: 'KoPubWorld돋움체', fantasy;
color: var(--color);
float: inherit;
display: block;
margin: 0px 0 -35px -20px;
}
blockquote[data-ke-style='style2'] {
border-color: var(--base);
border-width: 0 0 0 4px;
border-style: double;
padding: 1px 0 0 12px;
color: var(--base);
line-height: 1.5;
font-size: 1em;
text-align: left;
padding-right: 10px;
font-weight: bold;
font-family: unset;
outline-style: solid;
outline-width: thin;
BACKGROUND: var(--color);
}
blockquote[data-ke-style='box'], #tt-body-page blockquote[data-ke-style='box'], blockquote[data-ke-style='style3'], #tt-body-page blockquote[data-ke-style='style3'] {
border: 1px solid #6b6b6b;
background: var(--base);
text-align: left;
padding: 6px 12px;
color: var(--color);
line-height: normal;
font-size: unset;
}
blockquote,
blockquote p {
font-size: 16px;
line-height: 1.6;
color: #666;
letter-spacing: 0px;
}
/*#tt-body-page blockquote {
margin: 10px auto !important;
}*/
/* 더보기 */
.moreless_fold span, .moreless_top span, .moreless_bottom span {
transition: 0.6s;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition:0.6s;
-ms-transition: 0.6s;
font-size: 12px;
}
.moreless_fold:before, .btn_more:before {
font-family: "Font Awesome 5 Free";
content: "\f067";
font-weight: 900;
margin-right: 5px;
}
.btn_more {
display: block;
}
.moreless_top:before, .btn_less:before, .moreless_bottom:before {
font-family: 'Font Awesome 5 Free';
content: '\f068';
font-weight: 900;
margin-right: 5px;
}
.moreless_content {
padding: 10px;
margin: 10px 0;
border: 1px solid rgba(55, 55, 55, 0.2);
}
.moreless_bottom {
text-align: right;
display: block;
}
.moreless_bottom:after {
margin-left: 5px;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f068';
}
.moreless_fold span:hover, .moreless_top span:hover, .moreless_bottom span:hover {
letter-spacing: 4px;
}
div[data-ke-type='moreLess'] .btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless {
font-size: 1em !important;
color: var(--base);
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
background: var(--color);
display: unset;
padding: 0 5px;
left: -2.5px;
font-family: 'kopubworld돋움체';
}
div[data-ke-type='moreLess'].open .btn-toggle-moreless:before {
font-family: 'Font Awesome 5 Free';
content: '\f068';
font-weight: 900;
margin-right: 5px;
padding: 0px;
}
.btn-toggle-moreless:before {
font-family: "Font Awesome 5 Free";
content: "\f067";
font-weight: 900;
margin-right: 5px;
}
/**코드블럭**/
/*
pre[data-ke-type='codeblock'] {
white-space: pre-wrap;
word-break: break-word;
margin: 0 0 20px 0;
font-size: 13px;
line-height: 17px;
background: var(--hover);
color: var(--hover-color);
padding: 10px;
}*/
pre[data-ke-type='codeblock'] {
white-space: pre-wrap;
word-break: break-word;
margin: 0 0 20px 0;
font-size: 13px;
line-height: 17px;
background: var(--hover-color);
padding: 10px;
color: var(--hover);
border: 1px solid var(--border);
border-radius: 0 0 10px 10px;
box-shadow: inset -3px 1px 11px -1px var(--border);
}
pre[data-ke-type='codeblock'] > code {
display: block;
overflow-x: auto;
font-family: consolas, monospace;
}
pre[data-ke-type='codeblock'] > code.lnWrap {
position: relative;
padding-left: 40px;
}
pre[data-ke-type='codeblock'] > code .ln[data-ln]::before,
pre[data-ke-type='codeblock'] > code .ln[data-ln--before]::before {
content: attr(data-ln);
}
pre[data-ke-type='codeblock'] > code .ln,
pre[data-ke-type='codeblock'] > code .lnBorder {
box-sizing: border-box;
position: absolute;
left: 0;
display: inline-block;
width: 40px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
pre[data-ke-type='codeblock'] > code .lnBorder {
z-index: 1;
top: 0;
bottom: 0;
border: 1px solid transparent;
border-right-color: #ccc;
}
pre[data-ke-type='codeblock'] > code .ln {
z-index: 0;
padding-right: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
pre[data-ke-type='codeblock'] > code .lc {
box-sizing: border-box;
display: inline-block;
width: 100%;
padding-left: 10px;
}
pre[data-ke-type='codeblock'] > code.noline .lc {
padding-left: 0;
}
pre[data-ke-type='codeblock'] > code .ln.marker {
background-color: rgba(40, 70, 100, 1);
background: linear-gradient(to left, rgba(40, 70, 100, 1) 60%, transparent);
color: white !important;
}
pre[data-ke-type='codeblock'] > code .lc.marker {
background-color: rgba(40, 70, 100,1);
background: linear-gradient(to right, rgba(40, 70, 100, 1) 80%, transparent);
}
pre[data-ke-type='codeblock'] > code .lnA { }
pre[data-ke-type='codeblock'] > code .lnB { }
pre[data-ke-type='codeblock'] > code .colBox {
display: inline-block;
width: 8px;
height: 8px;
vertical-align: middle;
margin-right: 4px;
outline: 1px solid grey;
}
/*pre[data-ke-type='codeblock'] > code .hover, pre[data-ke-type='codeblock'] > code .clicked {
outline: solid 1px gold;
} */
pre[data-ke-type='codeblock'] > code .solo:hover {
color: red;
}
.codeLabel {
position: relative;
margin: 0;
}
hr[data-ke-style='style6'], #tt-body-page hr[data-ke-style='style6'] {
background-position: 0 -140px;
}
hr[data-ke-style], #tt-body-page hr[data-ke-style] { height: 2px !important; margin: 7px auto;}
.codeLabel {
position: relative;
margin: 10px 0 0;
}
.codeLabel * {
user-select: none;
cursor: pointer;
font-size: 13px;
}
/*
.codeLabel > div {
display: var(--hover-color) inline-block;
color: var(--base) !important;
text-transform: uppercase;
background-color: var(--hover) !important;
padding: 6px 10px;
}*/
.codeLabel > div {
display: var(--hover-color) inline-block;
color: var(--hover) !important;
text-transform: uppercase;
background-color: var(--border) !important;
padding: 6px 10px;
}
.codeLabel span {
color: #555;
margin: 0 0 0 10px;
}
.codeLabel span ~ label {
position: absolute;
right: 0;
top: 6px;
}
.codeLabel span ~ label input {
height: auto !important;
padding: 0 !important;
margin: 0 !important;
}
/* 코드블럭 복사버튼 스타일 */
pre {
/* */
position: relative;
/*overflow: visible; */
/* background-color: #eee; */
font-family : monospace;
font-size:13px;
line-height : normal;
/* margin-top: 1em; */
/* margin-bottom: 1em; */
/* padding-top: 1em; */
/* padding-bottom: 1em; */
/* padding-left: 10px; */
/* padding-right: 10px; */
display: block;
}
pre code {
font-size: 14px;
line-height: 20px
}
pre .copy-btn {
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
opacity: 0;
padding: 4px 10px;
position: absolute;
right: 5px;
top: 5px;
border-radius: 20px;
border-collapse: collapse;
opacity: 0.3;
background: white;
line-height: 1.5;
}
pre:hover .copy-btn,pre .copy-btn:focus {
opacity: 1
}
.clippy {
margin-top: -3px;
position: relative;
top: 3px
}
img.clippy {
width: 1.5em;
font-size: inherit;
font-family: monospace;
}
.copy-btn[disabled] .clippy {
opacity: .3
}
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.tooltipped {
position: relative;
}
.codeLabel {
position: relative;
margin: 10px 0px 0px 0px;
}
/*코드블럭 복사버튼 클릭시 텍스트*/
.tooltipped:after {
position: absolute;
z-index: 1000000;
display: none;
padding: 5px 8px;
font: normal normal 11px/1.5 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
width: max-content;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: rgba(0,0,0,.8);
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased
}
.tooltipped:before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgba(0,0,0,.8);
pointer-events: none;
content: "";
border: 5px solid transparent
}
.tooltipped:hover:before,.tooltipped:hover:after,.tooltipped:active:before,.tooltipped:active:after,.tooltipped:focus:before,.tooltipped:focus:after {
display: inline-block;
text-decoration: none
}
.tooltipped-multiline:hover:after,.tooltipped-multiline:active:after,.tooltipped-multiline:focus:after {
display: table-cell
}
.tooltipped-s:after,.tooltipped-se:after,.tooltipped-sw:after {
top: 100%;
right: 50%;
margin-top: 5px
}
.tooltipped-s:before,.tooltipped-se:before,.tooltipped-sw:before {
top: auto;
right: 50%;
bottom: -5px;
margin-right: -5px;
border-bottom-color: rgba(0,0,0,.8)
}
.tooltipped-se:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-sw:after {
margin-right: -15px
}
.tooltipped-n:after,.tooltipped-ne:after,.tooltipped-nw:after {
right: 50%;
bottom: 100%;
margin-bottom: 5px
}
.tooltipped-n:before,.tooltipped-ne:before,.tooltipped-nw:before {
top: -5px;
right: 50%;
bottom: auto;
margin-right: -5px;
border-top-color: rgba(0,0,0,.8)
}
.tooltipped-ne:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-nw:after {
margin-right: -15px
}
.tooltipped-s:after,.tooltipped-n:after {
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%)
}
.tooltipped-w:after {
right: 100%;
bottom: 50%;
margin-right: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-w:before {
top: 50%;
bottom: 50%;
left: -5px;
margin-top: -5px;
border-left-color: rgba(0,0,0,.8)
}
.tooltipped-e:after {
bottom: 50%;
left: 100%;
margin-left: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-e:before {
top: 50%;
right: -5px;
bottom: 50%;
margin-top: -5px;
border-right-color: rgba(0,0,0,.8)
}
.tooltipped-multiline:after {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
max-width: 250px;
word-break: break-word;
word-wrap: normal;
white-space: pre-line;
border-collapse: separate
}
.tooltipped-multiline.tooltipped-s:after,.tooltipped-multiline.tooltipped-n:after {
right: auto;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.hljs {
display: block;
overflow-x: inherit !important;
padding: .55em;
line-height: 1.3em;
color: #abb2bf;
background: #282c34;
border-radius: 5px;
white-space: break-spaces;
}
.hljs-comment, .hljs-quote {
color: #abb2bf !important;
font-style: normal !important;
}
/**코드블럭**/
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string, .hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst, .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number, span.javascript, .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title, .hljs-comment, .hljs-quote, span.css, .hljs-built_in, .hljs-class .hljs-title, .hljs-keyword, .hljs-operator, span.xml, span.hljs-tag, .hljs-function, .hljs-literal {font-family:monospace;}
pre[data-ke-type='codeblock'] {
white-space: pre-wrap;
word-break: break-word;
margin: 0 0 10px 0;
font-size: 13px;
line-height: 17px;
display: none;
overflow: visible;
}
pre[data-ke-type='codeblock'] > code.lnWrap {
position: relative;
padding-left: 40px;
}
pre[data-ke-type='codeblock'] > code .ln[data-ln]::before,
pre[data-ke-type='codeblock'] > code .ln[data-ln--before]::before {
content: attr(data-ln);
}
pre[data-ke-type='codeblock'] > code .ln,
pre[data-ke-type='codeblock'] > code .lnBorder {
box-sizing: border-box;
position: absolute;
left: 0;
display: inline-block;
width: 40px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
pre[data-ke-type='codeblock'] > code .lnBorder {
z-index: 1;
top: 0;
bottom: 0;
border: 1px solid transparent;
border-right-color: #ccc;
}
pre[data-ke-type='codeblock'] > code .ln {
z-index: 0;
padding-right: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
pre[data-ke-type='codeblock'] > code .lc {
box-sizing: border-box;
display: inline-block;
width: 100%;
padding-left: 10px;
}
pre[data-ke-type='codeblock'] > code.noline .lc {
padding-left: 0;
}
pre[data-ke-type='codeblock'] > code .ln.marker {
background-color: rgba(40, 70, 100, 1);
background: linear-gradient(to left, rgba(40, 70, 100, 1) 60%, transparent);
color: white !important;
}
pre[data-ke-type='codeblock'] > code .lc.marker {
background-color: rgba(40, 70, 100,1);
background: linear-gradient(to right, rgba(40, 70, 100, 1) 80%, transparent);
}
pre[data-ke-type='codeblock'] > code .lnA { }
pre[data-ke-type='codeblock'] > code .lnB { }
pre[data-ke-type='codeblock'] > code .colBox {
display: inline-block;
width: 8px;
height: 8px;
vertical-align: middle;
margin-right: 4px;
outline: 1px solid grey;
}
/*pre[data-ke-type='codeblock'] > code .hover, pre[data-ke-type='codeblock'] > code .clicked {
outline: solid 1px gold;
} */
pre[data-ke-type='codeblock'] > code .solo:hover {
color: red;
}
/*새창으로 툴팁안뜨게*/
*[d-dl-tooltip].icon-tooltip::before {display: none;}
/*테이블*/
/*table[data-ke-style] th, table[data-ke-style] td, #tt-body-page table[data-ke-style] th, #tt-body-page table[data-ke-style] td, .contents_style table td {
padding: 8px;
min-width: 4em;
}
@media screen and (max-width: 767px) {
table[data-ke-style] th, table[data-ke-style] td, #tt-body-page table[data-ke-style] th, #tt-body-page table[data-ke-style] td, .contents_style table td {
min-width: 0em;
}
}
*/
table[data-ke-style], #tt-body-page table[data-ke-style] {
margin: 20px 0px;
}
table[data-ke-style='style16'], table[data-ke-style='style16'] td {
border-color: transparent !important;
margin: 0px !important;
}
.table tr th:nth-child(1), .table tr th:nth-child(2), .table tr th:nth-child(4), .table tr th:nth-child(5), .table tr td:nth-child(1), .table tr td:nth-child(2), .table tr td:nth-child(4), .table tr td:nth-child(5) {
display: none;
}
/*태그*/
.tags {
margin-bottom: 45px;
font-size: 0;
}
.tags:after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.tags h2 {
margin-bottom: 15px;
font-weight: 600;
font-size: 16px;
}
.tags a {
display: inline-block;
margin: 0 8px 12px 0;
padding: 0 17px;
border: 1px solid #eee;
border-radius: 32px;
font-size: 14px;
line-height: 30px;
vertical-align: middle;
transition: all 0.3s;
text-transform: capitalize;
}
.tags a:hover,
.tags a:focus {
color: #333;
}
.notice .date {
display: none;
}
.notice .inner h1 {
border-bottom: 1px solid var(--border);
padding-bottom: 20px;
margin-bottom: 20px;
}
.tagTrail a {
display: inline-block;
padding: 0 17px;
border: 1px solid var(--border);
border-radius: 32px;
font-size: 14px;
line-height: 30px;
vertical-align: sub;
color: #555; transition: all 0.3s;
margin-bottom: 5px;
text-transform: capitalize;
}
.tags a:hover, .tagTrail a:hover {
background: #fdfdfd;
box-shadow: inset 0 0 6px 1px #ebebeb; transition: all 0.3s;
}
.tagTrail {text-align: right;}
@media screen and (max-width: 767px) {
.tagTrail a {margin-left:5px;}
}
/*.tagbox {
display: inline-block;
float: right;
max-width: 50%;
}*/
.tagbox {
float: right;
flex-basis: auto;
display: flex;
justify-content: flex-end;
order: 3;
}
.tagbox {
color: var(--base);
font-size: 0.5px;
}
/*TPPG 백업*/
/*폰트 변경*/
.message {
/* font-family: 'KopubWorld돋움체', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;*/
font-family:unset !important;
font-size: 14.9px !important;
-webkit-font-smoothing: antialiased;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
unset !important
.spacer {
padding: 0 0 0 45px !important;
}
/*주사위 가로 길이*/
.sheet-rolltemplate-coc-attack-1, .sheet-rolltemplate-coc-attack table, .sheet-rolltemplate-coc-1, .sheet-rolltemplate-coc-dice-roll table, .sheet-rolltemplate-coc-bomadness-rt table, .sheet-rolltemplate-coc table, .sheet-rolltemplate-coc-pulp-bomadness-rt table {max-width:50%;}
.sheet-rolltemplate-coc-attack table, .sheet-rolltemplate-coc-dice-roll table, .sheet-rolltemplate-coc-bomadness-rt table, .sheet-rolltemplate-coc table, .sheet-rolltemplate-coc-pulp-bomadness-rt table {margin: inherit;}
.textchatcontainer .message.you .spacer {color:unset !important;}
/*화자 파란 색상 제거*/
.message.you {background-color:var(--trpgmes) !important;}
.message.you .spacer {background-color:var(----trpgspacer) !important;}
.message.general.you { overflow-wrap: break-word;}
.message.desc span { display: revert !important;}
/*줄바꿈*/
.message.desc, .message.general, .message.general.you, .message.rollresult {
word-break: break-all;
text-overflow: clip;
word-wrap: break-word;
overflow-x: clip;
}
/*블로그 다크모드 적용*/
.message.desc, .message.general, .message.general.you, .message.rollresult {
background-color: var(--trpgmes) !important;
color: var(--trpgcolor2) !important;
}
.message.emote{
background-color: var(--trpgemas) !important;
color: var(--trpgcolor1) !important;
}
.message.you .spacer, .message.desc .spacer, .message.general .spacer, .message.rollresult .spacer, .message .spacer {background-color: var(--trpgspacer) !important;}
.message.emote .spacer {background-color: var(--trpgemas) !important;}
.message.private.whisper .spacer {background-color: var(--trpgspacer3) !important;}
span.inlinerollresult.showtip.tipsy-n-right {
background: var(--trpgdice) !important;
margin-left: revert !important;
}
.sheet-rolltemplate-coc-attack-1 span.inlinerollresult.showtip.tipsy-n-right, .sheet-rolltemplate-coc-1 span.inlinerollresult.showtip.tipsy-n-right {
border: none !important;
}
.sheet-rolltemplate-coc-attack span.inlinerollresult.showtip.tipsy-n-right {
background: rgb(190,190,190) !important;
border: white !important;
}
.sheet-rolltemplate-coc span.inlinerollresult.showtip.tipsy-n-right {
background: #fff !important;
border: 2px solid #fff !important;
}
.formula {
background: var(--base) !important;
}
.sheet-rolltemplate-coc-1 tbody, .sheet-rolltemplate-coc-1 tr, .sheet-rolltemplate-coc-1 td, .sheet-rolltemplate-coc-1 table, .sheet-rolltemplate-coc-attack-1 tbody, .sheet-rolltemplate-coc-attack-1 td, .sheet-rolltemplate-coc-attack-1 tr, .sheet-rolltemplate-coc-attack-1 table, .sheet-rolltemplate-coc-dice-roll table, .sheet-rolltemplate-coc-dice-roll td, .sheet-rolltemplate-coc-bomadness-rt table, .sheet-rolltemplate-coc-bomadness-rt td,.sheet-rolltemplate-coc-1 tbody, .sheet-rolltemplate-coc-1 tr, .sheet-rolltemplate-coc-1 td, .sheet-rolltemplate-coc-1 table, .sheet-rolltemplate-coc-attack-1 tbody, .sheet-rolltemplate-coc-attack-1 td, .sheet-rolltemplate-coc-attack-1 tr, .sheet-rolltemplate-coc-attack-1 table, .sheet-rolltemplate-coc-dice-roll table, .sheet-rolltemplate-coc-dice-roll td, .sheet-rolltemplate-coc-bomadness-rt table, .sheet-rolltemplate-coc-bomadness-rt td, .sheet-rolltemplate-coc-pulp-bomadness-rt table, .sheet-rolltemplate-coc-pulp-bomadness-rt td, .sheet-rolltemplate-coc-pulp-bomadness-rt tr {
color: var(--color) !important;
border-color: var(--base) !important;
background: var(--base);
border: none !important;
border-collapse: collapse;
}
.sheet-rolltemplate-coc-attack tbody, .sheet-rolltemplate-coc-attack tr,.sheet-rolltemplate-coc-attack td,.sheet-rolltemplate-coc-attack table, .sheet-rolltemplate-coc tbody, .sheet-rolltemplate-coc td, .sheet-rolltemplate-coc tr,.sheet-rolltemplate-coc table {border-color: transparent !important; border: none !important;}
.message code {
color: var(--trpgred1) !important;
background-color: var(--trpgred2) !important;
}
.message.private.whisper {
background-color: var(--trpgwh) !important;
color: var(--color) !important;
}
.entry-content .ho_wrap {
background: white;
}
.ho_name {
white-space: pre;
}
.message.desc a {
line-height: 1.2;
}
.entry-content .message.general a {
color: #000;
}
.sheet-text {
color: #000;
}
.sheet-template-area {
color: #000;
}
.sheet-random {
margin: auto;
display: grid;
}
.userscript-inner_hwrap {
color: #000000 !important;
}
/*기타 가독성*/
.message.desc span {
margin-left: -15px !important;
}
.message span.by {
vertical-align: top;
}
@media screen and (max-width: 767px) {
.sheet-rolltemplate-coc-attack-1, .sheet-rolltemplate-coc-attack table, .sheet-rolltemplate-coc-1, .sheet-rolltemplate-coc-dice-roll table, .sheet-rolltemplate-coc-bomadness-rt table, .sheet-rolltemplate-coc > table, .sheet-rolltemplate-coc-pulp-bomadness-rt table {max-width: 100%;}
}
.sheet-rolltemplate-coc-attack-1 > table {width: -webkit-fill-available !important;}
.sheet-rolltemplate-coc-1 > table {width: -webkit-fill-available !important;}
{width: -webkit-fill-available !important;}
.message code{font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12.285px;padding: 2px 4px;border-radius: 4px;user-select: auto;vertical-align: middle;margin: 0px 2px 0px 2px;}
/*블로그 표*/
table {margin: auto;}.contents_style table td {word-break: break-word;padding: 10px;}.contents_style table td {word-break: break-word;padding: 10px;}
/*****/
/*아티클액션*/
.book-toc ul {
list-style-type: decimal
}
.book-toc p {
font-weight: 550;
margin-bottom: 7px
}
.book-toc, .book-toc a {
color: #9e9e9e;
display: inline-block;
font-size: 13px;
font-weight: normal;
}
/*
.book-toc {
display: block!Important;
width: auto!Important;
position: absolute !Important;
bottom: calc(100%);
font-size: .7em!Important;
text-align: right!Important;
z-index: 1!Important;
border-radius: 120px!Important;
content-visibility: auto!Important;
color: #8d8d8ddd!Important;
margin-left: -6px;
}*/
.content-time {
display: inline-block;
background: var(--base);
}
.book-toc a:hover, .bf-breadcrumb .bf-breadcrumb-item a:hover, .bf-breadcrumb .bf-breadcrumb-item span:hover {color: var(--hover);}
li.bf-breadcrumb-item.bf-breadcrumb-end span:hover{color: #9e9e9e;}
.book-toc span:before, .book-toc:after {
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: '───';
margin-left: 5px;
margin-right: 5px;
color: #b7b7b7;
vertical-align: baseline;
font-size: 14px;
font-weight: bolder;
text-shadow: 0 0 1px #b7b7b7, 0 0 1px #b7b7b7, 0 0 1px #b7b7b7;
}
.book-toc > span > a > .fas {
font-weight: 500;
}
li.book-toc.active span {
max-width: 500px;
display: inline-block !important;
transition: all .3s ease;
}
li.book-toc span {
max-width: 0px;
display: none;
transition: all .3s ease;
}
/*다크모드 버튼*/
.switch-button, .switch-button.w {
position: relative;
box-shadow: 0 0 1px #0000004d, 0 0 3px #00000061, 0 0 7px #ffffff61;
border-radius: 6px;
}
.switch-button input,.switch-button.w input {
opacity: 0;
}
.onoff-switch, .onoff-switch.w {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
background-color: var(--trpgdice);
-webkit-transition: 0.4s;
transition: 0.4s;
}
.onoff-switch::before, .onoff-switch.w::before {
position: absolute;
content: "";
height: 14px;
width: 13px;
border-radius: 20px;
background-color: #fff;
-webkit-transition: 0.3s;
transition: 0.3s;
bottom: 0px;}
.switch-button input:checked + .onoff-switch, .switch-button.w input:checked + .onoff-switch.w {
background-color: #000000;
}
.switch-button input:checked + .onoff-switch::before, .switch-button.w input:checked + .onoff-switch.w::before {
-webkit-transform: translateY(-14px);
-ms-transform: translateY(-14px);
transform: translateY(-14px);
}
@media only screen and (max-width: 747px) {
.switch-button {
margin: 21px 0 -6px 15px;
border-radius: 15px;
}
.onoff-switch::before {
left: 1px;
height: 14px;
width: 14px;
}
label.switch-button.w {
display: none !important;
}
}
label.switch-button.w {
display: none !important;
}
/*글꼴변경 버튼*/
div#myform {
padding: 10px 25px;
font-size: .9em;
font-weight: bold;
margin: 0 auto;
display: grid;
justify-items: center;
grid-auto-flow: column;
grid-template-columns: repeat(1, 1fr);
align-items: baseline;
justify-content: space-around;
align-content: stretch;
}
select#fontselect {
margin: 0 auto;
text-align: left;
border: 1px solid var(--border);
font-size: 13px;
box-sizing: border-box;
border-radius: 10px;
color: var(--color-b);
background: #fff0;
padding: 5px 10px;
width: 130%;
white-space: pre-line;
max-width: 100%;
}
select#fontselect:hover {
color: var(--color);
transition: all .3s;
background: var(--base);
box-shadow: 0 0 4px 3px var(--border);
}
div#myform > span {
min-width: max-content;
padding-right: 5px;
}
option {
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
}
select {
display: inline;
width: auto;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/*공지쓰기버튼*/
span.d_m_write {
display: inline-block;
float: right;
padding-top: 18px;
color: var(--scroll2);
}
span.d_m_write:hover {
color: var(--hover);
transition: all .3s;
}
/*커버*/
.post-item .thum img {
aspect-ratio: 1 !important;
object-fit: cover;
content-visibility: auto;
height: auto;
width: 100%;
}
.post-item.b .excerpt {
padding: 20px 20px 20px 20px;
overflow: hidden;
max-width: 100%;
min-height: 60px;
margin-bottom: 20px;
text-overflow: ellipsis;
font-size: 13px;
line-height: 1.25rem;
color: #999;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
white-space: pre-line;
}
.post-item.b .excerpt:hover {
color: var(--hover);
transition: .3s ease
}
/**//*
details {
padding: 5px 10px;
font-weight: bold;
margin: 0 auto;
display: grid;
justify-items: center;
grid-auto-flow: column;
grid-template-columns: repeat(2, 2fr);
align-items: baseline;
position: relative;
}
details[open] {
z-index: 1;
}
summary {
list-style: none;
margin: 0 auto;
text-align: left;
border: 1px solid var(--border);
font-size: 13px;
box-sizing: border-box;
border-radius: 10px;
color: var(--color-b);
background: var(--base);
padding: 5px 10px;
width: max-content;
}
summary:hover, details[open]:hover > summary {
color: var(--color);
transition: all .3s;
background: var(--base);
box-shadow: 0 0 4px 3px var(--border); }
summary::-webkit-details-marker {
display: none;
}
summary:after {
content: '';
display: inline-block;
float: right;
width: .5rem;
height: .5rem;
border-bottom: 1px solid currentColor;
border-left: 1px solid currentColor;
border-bottom-left-radius: 2px;
transform: rotate(45deg) translate(50%, 0%);
transform-origin: center center;
transition: transform ease-in-out 100ms;
margin-top: 2px;
}
summary:focus {
outline: none;
}
details[open] summary:after {
transform: rotate(-45deg) translate(0%, 0%);
}
details.custom-select ul {
width: 100%;
background: #ddd;
position: absolute;
top: calc(100% + .5rem);
left: 0;
padding: 1rem;
margin: 0;
box-sizing: border-box;
border-radius: 5px;
max-height: 200px;
overflow-y: auto;
}
details.custom-select li {
margin: 0;
padding: 1rem 0;
border-bottom: 1px solid #ccc;
}
details.custom-select li:first-child {
padding-top: 0;
}
details.custom-select li:last-child {
padding-bottom: 0;
border-bottom: none;
}
/* FAKE SELECT *//*
details.custom-select.radios {
counter-reset: radios;
}
details.custom-select option[type=radio] {
counter-increment: radios;
appearance: none;
display: none;
}
details.custom-select option[type=radio]:checked {
display: inline;
pointer-events: none;
margin-right: 10px;
}
details.custom-select option[type=radio]:after {
content: attr(title);
display: inline;
}
details.custom-select ul.list {
counter-reset: labels;
}
details.custom-select label {
width: 100%;
display: block;
cursor: pointer;
}
/*video*/
figure[data-ke-type='video'] figcaption{min-height:0px !important;}
figure[data-ke-type='video'][data-ke-style='alignCenter'] {margin: 8px auto 0px !important;}
/**목차**/
/*플로팅목차*/
.tocNum {
display:block;
margin-left: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 90%;
}
.c-toc {
background: rgb(0 0 0 / 12%);
position: fixed;
width: 277px;
right: 6.5%;
top: 11.1%;
z-index: 1;
display: none;
-ms-user-select: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
box-shadow: 2px 2px 6px 0px rgb(0 0 0 / 32%);
}
.c-toc-t {
padding: 4px 8px;
color: var(--base);
font-weight: bold;
font-size: 14px;
line-height: 18px;
cursor: default;
background: var(--color);
}
.c-toc-s {
font-size: 12.7px;
}
.s-c_b {
float: right;
margin-top: 1.46px;
}
a.tocNum:hover, .tocNum.active {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
padding: 0 0 0 6px;
font-weight: bolder;
font-style: italic;
border-left: 2px solid var(--color);
}
.Toc {
display:none;
width:280px;
right:0;
padding:10px;
}
.subbNum {
margin-left: 20px;
}
.realNum {
margin-left: 0px !important;
}
@media (max-width:768px) {
.c-toc {display:none !important;}
}
.c-toc-m {
line-height: 23px;
margin: 0 7px;
font-size: 12.7px;
}
/*a.tocNum.realNum:before {
content: "▶ ";
}*/
.content2 {
touch-action: auto !important;
}
/* 챕터 이너콘텐츠 안에 있는 버전
.chap {
background: var(--color);
color: var(--base);
cursor: pointer;
padding: 0 17px;
border-radius: 32px;
font-size: 14px;
line-height: 30px;
vertical-align: sub;
transition: all 0.3s;
margin-bottom: 5px;
display: none;
order: 4;
flex-basis: 5%;
}*/
/*챕터 사이드바에 있는 버전*/
.chap {
background: var(--color);
color: var(--base);
cursor: pointer;
padding: 0 17px;
border-radius: 10px;
font-size: 14px;
line-height: 30px;
vertical-align: sub;
transition: all 0.3s;
display: none;
text-align: center;
}
.chap:hover {
box-shadow: 0 0 4px 3px var(--border);
transition: all 0.3s;
}
/*게시글제목부분 flex 수정*/
.innertitle {
flex-basis: 100%;
order: 2;
margin-bottom: 10px;
}
a.innertitle h1 {
max-width: 810px;
white-space: break-spaces;
word-break: normal;
}
/*유튜브브금바*/
.kix-first-party-entity-view.kix-rich-link-view:hover {
background-color: #d1d3d5 !important;
}
span.kix-first-party-entity-title {
color:black !important;}
.kix-first-party-entity-view.kix-rich-link-view {
width: fit-content;
user-select: auto;
background-color: #e8eaed;
border-radius: 15px;
padding-left: 3px;
height: 20px !important;
display: inline-block;
margin-block: 5px 3px !important;
}
.kix-first-party-entity-icon {
padding-left: 5px;
user-select: auto;
display: inline-table;
}
.kix-first-party-entity-icon:before {
content: "\f167";
color: #ff0000;
font-family: "Font Awesome 5 Brands";
font-size: 0.79em !important;
font-weight: normal;
vertical-align: super;
}
span.kix-first-party-entity-title {
padding-right: 5px;
user-select: auto;
display: inline-table;
font-size: 0.87em;
font-family: 'RIDIBatang', KoPubWorld돋움체, 'noto';
font-weight: normal;
vertical-align: super;
}
/*구독하기 버튼*/
.container_postbtn .btn_menu_toolbar {
width: 80px;
height: 32px;
line-height: 30px;
color: inherit;
box-sizing: border-box;
float: left;
padding: 0 9px;
border-radius: 16px;
border: 1px solid #959595;
font-size: 0 !important;
border-color: var(--border2) !important;
box-shadow: 0 10px 25px -10px rgba(0,0,0,.1),0 0 7px rgba(0,0,0,.05)!important;
}
/*한역정리표*/
blockquote[data-ke-style='style4'] {
background: var(--op5);
border-radius: 10px;
border: none;
box-shadow: 0 10px 25px -10px rgb(0 0 0 / 10%), 0 0 7px rgb(0 0 0 / 5%);
text-align: left;
padding: 10px 10px;
color: var(--color);
line-height: normal;
font-size: unset;
}
h2.hy_name {
text-align: center;
border-left: 5px solid;
border-left-color: var(--scroll2);
display: table;
margin: auto;
padding: 0 10px;
background: var(--base);
border-radius: 10px;
box-shadow: inset 0 0 74px -3px var(--tag-background-color), 0 1px 25px -10px rgb(0 0 0 / 10%), 0 0 2px rgb(0 0 0 / 5%);
letter-spacing: 7px;
text-shadow: var(--background-color-inline-code) 2px 3px;
font-family: unset;
}
p.hy_name {
font-weight: bolder;
}
p.hy_bgm {
background-color: var(--border);
border-radius: 10px;
}
blockquote[data-ke-style='style5'] {
border: none;
text-align: center;
background: var(--header-background);
font-weight: bolder;
font-family: unset !important;
margin: 5px auto !important;
color: var(--color2) !important;
font-size: 15px;
}
.tt_article_hy:before {
opacity: 0.1;
content: "";
width: 100%;
height: 100%;
border: 0px solid transparent;
position: absolute;
top: 0;
left: 0;
z-index: -100;
background-repeat: round;
}
.image-container.hy {
display: table !important;
margin: auto;
}
.image-container.hy img {
border-radius: 50%;
box-shadow: 0 15px 25px -10px rgb(0 0 0 / 10%), 0 0 7px rgb(0 0 0 / 5%);
width: 200px;
margin: 0px 10px;
}
figure.imagegridblock.hy {
background: linear-gradient(transparent,var(--base)) !important;
padding: 19px;
border-radius: 10px;
}
.image-container.hy figcaption {
display: inline-table;
margin: auto;
color: var(--color) !important;
font-style: inherit;
font-weight: bolder;
font-size: 17px;
border-radius: 10px;
padding: 10px;
}
/*각주,footnotes*/
ol.footnotes a {
color: #f9650d;
font-weight: bolder;
}
div.footnotes {
margin-top: 10px;
border-collapse: collapse;
}
ol.footnotes {
margin-top: 20px;
color: grey;
padding: 15px;
background: var(--header-border);
font-size: 13px;
/* border: var(--border) 2px solid; */
/* border-radius: 10px; */
}
sup.footnote a {
padding-left: 1px;
font-size: small !important;
font-family: unset !important;
}
/*유튜브브금*/
iframe#Youtube_Music_Iframe {
width: 0% !important;
height: 0% !important;
}
button.bgm {
line-height: normal;
color: var(--color2);
font-family: 'FontAwesome';
text-align: center;
border-radius: 100%;
font-weight: 700;
border: 1px solid var(--border);
width: 25px;
height: 25px;
}
button.bgm:hover {
box-shadow: 0 0 4px 3px var(--border);
transition: all 0.3s;
color: var(--color);
}
s_sidebar_bgm {
display: flex;
justify-content: space-evenly;
align-items: baseline;
margin: 0 auto;
text-align: left;
/* border: 1px solid var(--border); */
width: 100%;
font-size: 13px;
padding: 10px 15px;
box-sizing: border-box;
border-radius: 10px;
color: #333;
/* flex-direction: row; */
/* flex-wrap: wrap; */
}
span.bgm {
font-weight: bolder;
font-size: 14px;
color: var(--color);
width: 100%;
margin-right: 5px;
text-align: center;
}
s_sidebar_bgm div {
width: 100%;
text-align: center;
display: flex;
justify-content: space-evenly;
}
button.bgm::before {
font-family: 'KoPubWorld돋움체';
}
/*본문크기조절토글버튼*/
/*.entry-content.active {
line-height: 1.25em;
font-size: 1.05em;
word-wrap: break-word;
border: 1px solid #aaaaaa;
color: #404040;
position: absolute;
right: 0px;
width: 315px;
overflow: hidden;
border-left: 1px solid black;
height: 100%;
top: 0px;
padding: 3px 0px;
margin: 0;
z-index: 100;
max-width: 98%;
overflow-y: scroll;
background: white;
}*/
.entry-content.active {
line-height: 1.25em;
font-size: 1.05em;
word-wrap: break-word;
border: 1px solid #aaaaaa;
color: #404040;
position: absolute;
right: 0px;
width: 315px;
overflow: hidden;
/* border-left: 1px solid black; */
height: 100%;
top: 0px;
padding: 3px 0px;
margin: 0;
z-index: 100;
max-width: 98%;
overflow-y: scroll;
background: white;
background-color: #fff;
box-shadow: 0 1px 6px 0 rgba(32,33,36,.28);
border-radius: 12px 2px 2px 12px;
box-sizing: border-box;
height: calc(100% - 100px);
overflow-x: hidden;
overflow-y: scroll;
overscroll-behavior: contain;
position: fixed;
top: 66px;
z-index: 128;
}
.entry-content.active .sheet-rolltemplate-coc-attack-1, .entry-content.active .sheet-rolltemplate-coc-attack table, .entry-content.active .sheet-rolltemplate-coc-1, .entry-content.active .sheet-rolltemplate-coc-dice-roll table, .entry-content.active .sheet-rolltemplate-coc-bomadness-rt table, .entry-content.active .sheet-rolltemplate-coc table, .entry-content.active .sheet-rolltemplate-coc-pulp-bomadness-rt table {
max-width: 100%;
}
.entry-content.active img {
max-width: 286px !important;
}
.entry-content.active * {
box-sizing: content-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-width: 100%;
width: auto;
}
.entry-content.active .message.desc a {
width: auto !important;
}
.entry-content .image-container, .entry-content .message span {
width: auto !important;
height: auto !important;
}
.entry-content table, .entry-content td, .entry-content tr, .entry-content tbody {
height: auto !important;
}
.entry-content.active .ho_name {
white-space: normal;
}
/**커뮤 한역 pc**/
p.comm.m-tcol-c {
overflow: unset !important;
line-height: 1.4em !important;
font-family: '돋움',dotum,Helvetica,sans-serif;
font-weight: 300;
margin-top: 2px !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
}
ul.cmlist li, ul.cmlist li.reply {
height: fit-content !important;
}
ul.cmlist, ul.cmlist li {
list-style: none !important;
}
.reply-box, .tit-box {
width: -webkit-fill-available !important;
}
.tit-box {
width: -webkit-fill-available !important;
height: fit-content !important;
padding: 10px 10px 5px 10px !important;
margin-top: 0px !important;
border-top: 0px none !important;
}
/*p.memo-box {
font-family: 'KoPubWorld돋움체', "맑은 고딕", "Malgun Gothic", 돋움, dotum, "Apple SD Gothic Neo", sans-serif !important;
padding: 20px 10px 15px 10px !important;
}*/
p.memo-box {
padding: 5px 10px !important;
}
.reply-box {
width: -webkit-fill-available !important;
padding-top: 0px !important;
}
/*한역 클릭방지*/
a.m-tcol-c._rosRestrict._nickUI, span.dsc_comm, p.btn_edit.m-tcol-c, td.p-nick, td.pc2w, .pers_nick_area, span.re-p-nick, .reply-box {
pointer-events: none;}
/*********커뮤한역 모바일 가시성*********/
@media all and (max-width: 700px) {
/*작성자*/
span.author.m-tcol-p {
height: fit-content !important;
font-family: 'Noto Sans DemiLight';
font-size: xx-small !important;
}
/*수정/삭제*/
p.btn_edit.m-tcol-c {
float: none !important;
}
li.reply {
padding: 0 0 0 0px !important;
}
p.comm.m-tcol-c {
padding-left: 0px !important;
height: auto !important;
padding-bottom: 10px !important;
}
/*작성자 수정/답글 삭제*/
span.dsc_comm, p.btn_edit.m-tcol-c {
display: none;
}
.h {
height: 20px !important;
padding-bottom: 35px !important;
}
/*닉네임*/
td.p-nick {
vertical-align: bottom;
}
/*프로필*/
.box_profile {height: 25px !important;}
.comm.u_cbox_image_section {
padding-top: 3px;
padding: 0 0 0px !important;
}
}
/***모바일 끝***/