@charset "utf-8";
/*             
 *        
 * CSS CONTENTS:      
 *         
 * 01. Web Font     
 * 02. Type Selector Reset   
 * 03. Accessibility Navigation
 * 04. Layout Selector  
 * 05. Components 
 * 06. Entry Content 
 * 07. Comment
 * 08. Widget & Template Page
 * 09. ETC
 * 10. Post Type & Color Type
 * 11. Retina Display
 * 12. Media Screen - Tablet
 * 13. Media Screen - Mobie
 *  
 */ 

/* Web Font Load */
@import url('//fonts.googleapis.com/css?family=Nanum+Myeongjo');

@font-face {
    font-family: 'RIDIBatang';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
     font-family: 'KOMACON';
     src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_seven@1.2/KOMACON.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
 
@font-face {
  font-family: 'gulim';
  src: url('images/gulimche-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'GangwonEdu_OTFBoldA';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Galmuri11';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Galmuri11/Galmuri11-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'HakgyoansimGeurimilgiTTF-R';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimGeurimilgiTTF-R.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


/* Type Selector Reset */
body {
  font-weight: 400;
  font-family: Pretendard-Regular, sans-serif;
  font-size: 1em;
  line-height: 1.25;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
  margin: 0;
  padding: 0;
}

header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
  display: block;
}

button, input[type=submit], input[type=reset], input[type=button] {
  overflow: visible;
  cursor: pointer;
}

input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
  -webkit-appearance: none;
}

input, select, textarea, button {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 100%;
  border-radius: 0;
}

button {
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

ul li {
  list-style: none;
}

img, fieldset {
  border: none;
  vertical-align: top;
}

hr {
  display: none;
}

/* Accessibility Navigation */
#acc-nav {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 0;
}

#acc-nav a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin-left: -1px;
  margin-bottom: -1px;
  text-align: center;
  font-weight: bold;
  font-size: 0.875em;
  color: #000;
  white-space: nowrap;
}

#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
  width: 100%;
  height: auto;
  padding: 10px 0;
  background: #000;
  color: #fff;
  z-index: 1000;
}

/* Layout Selector */

/*헤더랑 hide-header, wrap 상단 padding까지
상단헤더 스크롤에따른 숨김용*/
#header {
  /* position: relative; */
  width: 100%;

  position: fixed;
  top: 0;
  background: white;
  transition: transform 0.3s ease;
  z-index: 999;
}

#header.hide-header {
  transform: translateY(-100%);
}

div#wrap{
  padding-top:80px;
}

#header:has(div.menu.on){
  background-color: rgba(0,0,0,0);
}
#header:has(div.menu.on) h1,
#header:has(div.menu.on) div.search.on{
  opacity:0;
}

/*헤더숨김 끝*/

#header h1 {
  padding: 28px 0;
  text-align: center;
  font-size: 1.5em;
  line-height: 1;
  color: #1a1a1a;
}

#header h1 a {
  display: inline-block;
  text-decoration: none;
  vertical-align: top;
  color: #1a1a1a;
}

#header .mobile-menu {
  position: absolute;
  /* position: fixed; */
  top: 20px;
  left: 44px;
  z-index: 500;
  width: 50px;
  height: 50px;
  outline: none;
  /* background-color: white; */
  /* border-radius:1em; */
  /* box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; */
}

#header .mobile-menu span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 2px;
  margin: -2px 0 0 -13px;
  background-color: #000;
  text-indent: -999em;
}

#header .mobile-menu:before,
#header .mobile-menu:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 2px;
  margin-left: -13px;
  background-color: #000
}

#header .mobile-menu:before {
  margin-top: -9px;
}

#header .mobile-menu:after {
  margin-top: 5px;
}

#header .mobile-menu.on {
  position: fixed;
}

#header .mobile-menu.on span {
  display: none;
}

#header .mobile-menu.on:before,
#header .mobile-menu.on:after {
  margin-top: -2px;
}

#header .mobile-menu.on:before {
  transform: rotate(-45deg);
}

#header .mobile-menu.on:after {
  transform: rotate(45deg);
}

#header .menu {
  position: fixed;
  top: 0;
  left: -348px;
  z-index: 400;
  width: 348px;
  height: 100%;
  padding: 94px 40px 189px;
  background-color: #fff;
  box-sizing: border-box;
  transition: left .5s ease-in-out;
}

#header .menu .social-link {
  position: absolute;
  left: 40px;
  bottom: 129px;
}

#header .menu p {
  position: absolute;
  left: 40px;
  bottom: 79px;
  font-size: 0.75em;
  color: #9b9b9b;
}

#header .menu.on {
  left: 0;
}

#header .search {
  position: absolute;
  top: 20px;
  right: 19px;
  width: 0;
  padding-right: 40px;
}

#header .search input {
  display: none;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: 1em;
  line-height: 40px;
  color: #000;
  border: 0;
  box-sizing: border-box;
  background-color: transparent;
}

#header .search button {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  width: 40px;
  height: 40px;
  background: url(./images/ico_package.png) no-repeat 0 0;
  text-indent: -999em;
  outline: none;
}

#header .search:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
  width: 40px;
  height: 40px;
  background: url(./images/ico_package.png) no-repeat 0 0;
  text-indent: -999em;
  cursor: pointer;
}

#header .search:hover:before {
  background-color: #ebebeb;
}

#header .search.on {
  width: 322px;
  border-bottom: 1px solid #000;
}

#header .search.on input {
  display: block;
  outline: none;
}

#header .search.on button {
  display: block;
}

#header .search.on:before {
  display: none;
}


#gnb {
  overflow: auto;
  height: 100%;
  margin-bottom: 8px;
}

#gnb ul li {
  margin-bottom: 6px;
  font-size: 1.125em;
  line-height: 1.5;
}

#gnb ul li a {
  display: block;
  text-decoration: none;
  color: #000;
}

#gnb ul li ul li ul li a.link_sub_item {
  color: #333;
}

#gnb ul li a:hover {
  text-decoration: underline;
  color: #4e2e28;
}

#gnb ul li ul {
  margin: 22px 0 0;
}

#gnb ul li ul li {
  font-size: 1em;
}

#gnb ul li ul li ul {
  margin: 6px 0 13px;
}

#gnb ul li ul li ul li {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5625rem;
}

#gnb ul li ul li ul li a:before {
  content: "-";
  margin-right: 5px;
  color: #333;
}

#gnb ul li ul li ul li a {
  padding: 0 12px;
}

#content .inner {
  max-width: 600px;
  margin: 0 auto;
}

#content>.inner {
  max-width: 600px;
}


#content .inner:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

#footer {
  position: relative;
  padding: 29px 0;
  border-top: 1px solid #ebebeb;
}

#footer p {
  text-align: center;
  font-size: 0.75em;
  color: #9b9b9b;
}

#footer p a {
  text-decoration: none;
  color: #9b9b9b;
}

#footer .admin {
  color: #666;
}

#footer .admin:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 15px;
  margin: 0 9px;
  background-color: #b2b2b2;
  vertical-align: middle;
}

#tt-body-index #footer {
  border-top: 0;
}

/* Components */
.social-link a {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 5px;
  text-indent: -999em;
  background-image: url(./images/ico_package.png);
  background-repeat: no-repeat;
  vertical-align: top;
}

.social-link a:hover {
  background-position-y: -68px;
}

.social-link .pinterest {
  background-position: 0 -50px;
}

.social-link .facebook {
  background-position: -50px -50px;
}

.social-link .twitter {
  background-position: -100px -50px;
}

.social-link .instagram {
  background-position: -150px -50px;
}

.btn, a.btn {
  display: inline-block;
  width: 158px;
  height: 50px;
  border: 1px solid #dcdcdc;
  font-size: 0.875em;
  line-height: 50px;
  color: unset;
}

.btn:hover {
  border-color: #4d4d4d;
}

.cover-thumbnail-list {
  margin: 0 auto -1px;
  padding: 40px 0 56px;
  border-bottom: 1px solid #ebebeb;
}

.cover-thumbnail-list h2 {
  margin-bottom: 26px;
  font-size: 1em;
}

.cover-thumbnail-list ul {
  width: 100%;
}

.cover-thumbnail-list ul li {
  float: left;
  width: 24.0625%;
  margin: 0 0 32px;
  padding-left: 1.25%;
}

.cover-thumbnail-list ul li:nth-child(4n+1) {
  clear: both;
  padding-left: 0;
}

.cover-thumbnail-list ul li a {
  display: block;
  text-decoration: none;
  color: #080808;
}

.cover-thumbnail-list ul li .thum {
  display: block;
  position: relative;
  overflow: hidden;
  height: 0;
  margin-bottom: 11px;
  padding-bottom: 75.757575757575758%;
  background-color: #f6f6f6;
}

.cover-thumbnail-list ul li .thum:before {
  content: "NO IMAGE";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 18px;
  margin: -9px 0 0 0;
  text-align: center;
  font-family: 'Arial';
  font-weight: bold;
  font-size: 0.875em;
  color: #cbcbcb;
}

.cover-thumbnail-list ul li .thum img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.cover-thumbnail-list ul li .category {
  display: inline-block;
  margin-bottom: 8px;
  border-bottom: 1px solid #a3a3a3;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 0.875em;
  color: #808080;
}

.cover-thumbnail-list ul li .title {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.75em;
  padding-right: 10%;
  font-weight: 700;
  line-height: 1.375em;
}

.cover-thumbnail-list ul li a:hover .title {
  text-decoration: underline;
  color: #4e2e28;
}

.cover-thumbnail-list ul li .date {
  display: block;
  font-size: 0.8125em;
  color: #999;
}

.cover-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: #000;
}

.cover-slider ul li {
  display: table;
  width: 100%;
  height: 460px;
  text-align: center;
  background-position: 50% 50%;
  background-size: cover;
}

.cover-slider ul li a {
  display: table-cell;
  background-color: rgba(0, 0, 0, 0.25);
  text-decoration: none;
  color: #fff;
  vertical-align: middle;
}

.cover-slider ul li .category {
  display: inline-block;
  margin-bottom: 16px;
  border-bottom: 1px solid #fff;
}

.cover-slider ul li .title {
  display: block;
  max-width: 580px;
  margin: 0 auto 28px;
  font-size: 2.5em;
  line-height: 1.3;
}

.cover-slider ul li .btn {
  border-color: #fff;
  color: #fff;
}

.cover-slider ul li .btn:hover {
  background-color: #fff;
  color: #000;
}

.cover-slider .prev,
.cover-slider .next {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 20;
  width: 70px;
  height: 70px;
  margin: -25px 0 0 0;
  background: url(./images/ico_package.png) no-repeat 0 -250px;
  text-indent: -999em;
}

.cover-slider .prev {
  margin-left: -506px;
  background-position: 0 -250px;
}

.cover-slider .next {
  margin-left: 436px;
  background-position: -100px -250px;
}

.cover-slider .prev:hover,
.cover-slider .next:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.cover-masonry {
  margin-bottom: -1px;
  padding: 60px 0 49px;
  border-bottom: 1px solid #ebebeb;
}

.cover-masonry h2 {
  margin-bottom: 30px;
  font-size: 1em;
}

.cover-masonry ul {
  display: inline-block;
  margin-left: -42px;
  vertical-align: top;
}

.cover-masonry ul li {
  float: left;
  width: 33.3333%;
  margin: 0 0 37px;
  padding-left: 42px;
  box-sizing: border-box;
}

.cover-masonry ul li a {
  display: block;
  text-decoration: none;
  color: #080808;
}

.cover-masonry ul li .thum {
  display: block;
  margin-bottom: 11px;
}

.cover-masonry ul li .thum img {
  width: 100%;
  height: auto;
}

.cover-masonry ul li .category {
  display: inline-block;
  margin-bottom: 7px;
  border-bottom: 1px solid #a3a3a3;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 0.875em;
  color: #808080;
}

.cover-masonry ul li .title {
  display: block;
  font-weight: 700;
  font-size: 1.125em;
  line-height: 1.4444;
}

.cover-masonry ul li a:hover .title {
  text-decoration: underline;
  color: #4e2e28;
}

.cover-masonry ul li .excerpt {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 6.4em;
  font-size: 0.9375em;
  line-height: 1.6;
  color: #666;
}

.cover-list {
  margin-bottom: -1px;
  padding: 30px 0 60px;
  border-bottom: 1px solid #ebebeb;
}

.cover-list h2 {
  margin: 30px 0 0 0;
  font-size: 1em;
}

.cover-list ul li {
  border-top: 1px solid #ebebeb;
}

.cover-list ul li:first-child {
  border-top: 0;
}

.cover-list ul li a {
  display: block;
  min-height: 172px;
  padding: 30px 0 30px;
  text-decoration: none;
  color: #080808;
}

.cover-list ul li figure {
  float: right;
  position: relative;
  width: 172px;
  height: 172px;
  margin: 0 0 0 80px;
  background-color: #f6f6f6;
}

.cover-list ul li figure:before {
  content: "NO IMAGE";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 18px;
  margin: -9px 0 0 0;
  text-align: center;
  font-family: 'Arial';
  font-weight: bold;
  font-size: 0.875em;
  color: #cbcbcb;
}

.cover-list ul li figure img {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.cover-list ul li .category {
  display: inline-block;
  margin-bottom: 7px;
  border-bottom: 1px solid #a3a3a3;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 0.875em;
  color: #808080;
}

.cover-list ul li .title {
  display: block;
  font-weight: 700;
  font-size: 1.125em;
  line-height: 1.4444em;
}

.cover-list ul li a:hover .title {
  text-decoration: underline;
  color: #666;
}

.cover-list ul li .excerpt {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 4.8em;
  font-size: 0.9375em;
  line-height: 1.6;
  color: #666;
}

.cover-list ul li .date {
  display: block;
  font-size: 0.8125em;
  color: #999;
}

.cover-gallery {
  margin: 0 auto -1px;
  padding: 60px 0 75px;
  border-bottom: 1px solid #ebebeb;
}

.cover-gallery h2 {
  margin-bottom: 30px;
  font-size: 1em;
}

.cover-gallery ul {
  display: inline-block;
  margin-left: -12px;
}

.cover-gallery ul li {
  float: left;
  width: 25%;
  margin: 0 0 12px 0;
  padding-left: 12px;
  box-sizing: border-box;
}

.cover-gallery ul li a {
  display: block;
  position: relative;
  width: 100%;
  background-color: #ebebeb;
}

.cover-gallery ul li .title {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 30;
  overflow: hidden;
  width: 100%;
  max-height: 4.2em;
  text-align: center;
  line-height: 1.4;
  padding: 0 20px;
  color: #fff;
  box-sizing: border-box;
  transform: translateY(-50%);
  visibility: hidden;
}

.cover-gallery ul li a:hover .title {
  visibility: visible;
}

.cover-gallery ul li a:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.cover-gallery ul li a:before {
  content: "NO IMAGE";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 18px;
  margin: -9px 0 0 0;
  text-align: center;
  font-family: 'Arial';
  font-weight: bold;
  font-size: 0.875em;
  color: #cbcbcb;
}

.cover-gallery ul li figure {
  height: 0;
  padding-bottom: 100%;
}

.cover-gallery ul li figure img {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 10;
}

.cover-footer {
  position: relative;
  z-index: 10;
  text-align: center;
}

.cover-footer .image {
  height: 300px;
  margin-bottom: 80px;
  background-position: 50% 50%;
  background-size: cover;
}

.cover-footer p {
  margin: -5px 0 20px;
  text-align: center;
  font-weight: 700;
  font-size: 1.25em;
  color: #000;
}

.cover-footer .menu ul {
  text-align: center;
}

.cover-footer .menu ul li {
  display: inline-block;
  margin: 40px 0 48px;
  padding: 0 14px;
  font-size: 0.875em;
}

.cover-footer .menu ul li a {
  display: block;
  text-decoration: none;
  color: #282828;
}

.cover-footer .menu ul li a:hover {
  text-decoration: underline;
  color: #4e2e28;
}

.cover-footer p:first-child {
  margin-top: 76px;
}

.cover-footer .social-link:first-child a {
  margin-top: 80px;
}

.post-header {
  position: relative;
  overflow: hidden;
  max-width: 600px;
  margin: 0 auto 30px;
  padding: 57px 0 15px;
  border-bottom: 1px solid #ebebeb;
}

.post-header h1 {
  float: left;
  font-size: 1em;
}

.post-header .list-type {
  float: right;
}

.post-header .list-type button {
  float: left;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  background-image: url(./images/ico_package.png);
  background-repeat: no-repeat;
  text-indent: -999em;
  outline: none;
}

.post-header .list-type button:hover {
  background-color: #ebebeb;
}

.post-header .list-type .list {
  background-position: 0 -200px;
}

.post-header .list-type .thum {
  background-position: -100px -200px;
}

.post-header .list-type .list.current {
  background-position: -50px -200px;
}

.post-header .list-type .thum.current {
  background-position: -150px -200px;
}

.post-item {
  overflow: hidden;
  width: 100%;
  border-bottom: 1px solid #ebebeb;
}

.post-item a {
  display: block;
  min-height: 148px;
  padding: 30px 0 30px;
  text-decoration: none;
  color: #080808;
}

.post-item:first-child a {
  padding-top: 0;
}

.post-item a:hover .title {
  text-decoration: underline;
  color: #4e2e28;
}

.post-item .thum {
  float: right;
  overflow: hidden;
  max-width: 148px;
  margin-left: 80px;
}

.post-item .thum img {
  width: 195px;
  height: 148px;
  margin: 0 0 0 -23.5px;
}

.post-item .category {
  display: inline-block;
  margin-bottom: 16px;
  border-bottom: 1px solid #a3a3a3;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 0.875em;
  color: #808080;
}

.post-item .title {
  display: block;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.8em;
  font-weight: 700;
  font-size: 1.125em;
  line-height: 1.4;
}

.post-item .excerpt {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9375em;
  line-height: 1.6;
  color: #666;
}

.post-item .excerpt.protected:before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 13px;
  margin-right: 10px;
  background: url(./images/ico_package.png) no-repeat -0 -100px;
  vertical-align: baseline;
}

.post-item .date {
  display: block;
  font-size: 0.8125em;
  color: #999;
}

.pagination {
  max-width: 860px;
  margin: 60px auto 160px;
  text-align: center;
}

.pagination .current {
  display: none;
}

.pagination .view-more {
  display: inline-block;
  width: 158px;
  height: 50px;
  border: 1px solid #dcdcdc;
  font-size: 0.875em;
  line-height: 50px;
  color: #000;
}

.pagination .view-more:hover {
  border-color: #4d4d4d;
  background: none;
}

.pagination a {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0 4px;
  text-decoration: none;
  font-size: 0.9375em;
  line-height: 24px;
  color: #b2b2b2;
  vertical-align: middle;
}

.pagination a:hover {
  background-color: #ebebeb;
}

.pagination .selected {
  color: #000;
}

.pagination .prev,
.pagination .next {
  width: 50px;
  height: 50px;
  background-image: url(./images/ico_package.png);
  background-repeat: no-repeat;
  border: 1px solid #dcdcdc;
  text-indent: -999em;
  vertical-align: middle;
  box-sizing: border-box;
}

.pagination .prev {
  background-position: -50px 0;
}

.pagination .next {
  background-position: -100px 0;
}

.pagination .prev:hover,
.pagination .next:hover {
  background-color: transparent;
  border-color: #4d4d4d;
}

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

.hgroup {
  max-width: 860px;
  margin: 50px auto 60px;
  padding: 0 0 20px;
  border-bottom: 1px solid #ebebeb;
}

.hgroup .category {
  display: inline-block;
  margin-bottom: 16px;
  padding-top: 5px;
  border-bottom: 1px solid #FD1493;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 0.875em;
  color: #808080;
}

.hgroup .category a{
  color: #FD1493;
  text-decoration: none;
}

.hgroup h1 {
  display: block;
  margin-bottom: 9px;
  font-weight: 700;
  font-size: 1.6875em;
  line-height: 1.4444em;
}

.hgroup .post-meta {
  display: block;
  font-size: 0.8125em;
  color: #808080;
}

.hgroup .post-meta a {
  text-decoration: none;
  color: #999;
}

.hgroup .post-meta a:hover {
  text-decoration: underline;
}

.hgroup .post-meta span:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  margin: 0 7px 0 10px;
  background-color: #ebebeb;
  vertical-align: baseline;
}

.hgroup .post-meta span:first-child:before {
  content: none;
}

.another_category {
  display:none;
  margin: 60px auto 80px;
  padding: 0 !important;
  border: 0 !important;
}

.another_category h4 {
  margin-bottom: 28px;
  font-weight: 400;
  font-size: 1em !important;
}

.another_category h4 em {
  border-bottom: 1px solid #000;
  font-style: normal;
}

.another_category table {
  width: 100%;
  border-collapse: collapse;
  border: 0 !important;
  font-size: 0.9375em;
  color: #666;
}

.another_category table th {
  padding: 8px 0 4px;
  border: 0 !important;
  text-align: left;
  font-weight: 400;
}

.another_category table th a {
  text-decoration: none;
  color: #666;
}

.another_category td {
  width: 60px;
  padding: 8px 0 4px;
  border-left: 0 !important;
  border-top: 0 !important;
  font-size: 0.8125em;
  line-height: 1;
  color: #b2b2b2;
}

.tags {
  position: relative;
  overflow: hidden;
  max-width: 860px;
  /* margin: 53px auto; */
  margin: 20px auto;
  padding: 10px 0 28px 47px;
  border-top: 1px solid #ebebeb;
  /* border-bottom: 1px solid #ebebeb; */
  color: #999;
  box-sizing: border-box;
}

.tags h2 {
  float: left;
  width: 47px;
  margin-left: -47px;
  font-weight: 400;
  font-size: 1em;
  color: #000;
}

.tags .items a {
  display: inline-block;
  margin-left: 15px;
  text-decoration: none;
  font-size: 0.8125em;
  line-height: 1.5384;
  color: #999;
}

.tags .items a:hover {
  color: #7a583a;
}

.tags .items a:before {
  content: "#";
}

.related-articles {
  overflow: hidden;
  width: 100%;
  margin: 57px 0 69px;
}

.related-articles h2 {
  margin-bottom: 28px;
  font-weight: 400;
  font-size: 1em;
}

.related-articles h2 em {
  border-bottom: 1px solid #000;
  font-style: normal;
}

.related-articles ul li {
  float: left;
  width: 24.0625%;
  padding-left: 1.25%;
}

.related-articles ul li:first-child {
  padding-left: 0;
}

.related-articles ul li a {
  display: block;
  text-decoration: none;
  color: #080808;
}

.related-articles ul li a:hover .title {
  text-decoration: underline;
  color: #4e2e28;
}

.related-articles ul li .thum {
  display: block;
  position: relative;
  overflow: hidden;
  height: 0;
  margin-bottom: 12px;
  padding-bottom: 75.757575757575758%;
  background-color: #ebebeb;
}

.related-articles ul li .thum:before {
  content: "NO IMAGE";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 18px;
  margin: -9px 0 0 0;
  text-align: center;
  font-family: 'Arial';
  font-weight: bold;
  font-size: 0.875em;
  color: #cbcbcb;
}

.related-articles ul li .thum img {

  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.related-articles ul li .category {
  display: inline-block;
  margin-bottom: 16px;
  border-bottom: 1px solid #a3a3a3;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 0.875em;
  color: #808080;
}

.related-articles ul li .title {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.75em;
  margin-bottom: 9px;
  font-weight: 700;
  line-height: 1.375;
}

.related-articles ul li .date {
  display: block;
  font-size: 0.8125em;
  color: #999;
}

/* Entry Content */
.entry-content h1 {
  margin: 60px 0 19px;
  font-size: 1.6875em;
}

.entry-content h2 {
  margin: 60px 0 19px;
  font-size: 1.5em;
}

.entry-content h3 {
  margin: 60px 0 19px;
  font-weight: 700;
  font-size: 1.3125em;
}

.entry-content h4 {
  margin: 60px 0 19px;
  font-weight: 400;
  font-size: 1.125em;
}

.entry-content p img {
  max-width: 100%;
  height: auto;
  margin-top: 36px;
}

.entry-content hr {
  display: block;
  height: 0;
  border: 0;
  border-bottom: 1px solid #000;
}

.entry-content pre {
  word-break: break-word;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.entry-content pre code.hljs {
  padding: 20px;
}

.entry-content ul,
.entry-content ol {
  margin-bottom: 50px;
}

.entry-content ul {
  list-style: disc inside;
}

.entry-content ul li {
  padding-left: 22px;
  position: relative;
  list-style: inherit;
  text-indent: -22px;
}

.entry-content ol {
  list-style: inside decimal;
}

.entry-content ol li {
  position: relative;
  padding-left: 16px;
  text-indent: -15px;
  list-style: inherit;
}

.entry-content a {
  color: #666;
}

.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: 60px;
  padding: 16px 20px;
  border-left: 4px solid #e6e6e6;
}

.entry-content blockquote p {
  margin: 22px 0 0;
}

.entry-content blockquote p:first-child {
  margin-top: 0;
}

.entry-content table {
  width: 100%;
  margin-bottom: 22px;
  border-collapse: collapse;
}

.entry-content table thead th {
  padding: 7px 0 11px;
}

.entry-content table tbody td {
  padding: 7px 0 11px;
}

.entry-content input {
  display: inline-block;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #e6e6e6;
  font-size: 0.875em;
  line-height: 1.25;
  color: #666;
  box-sizing: border-box;
  vertical-align: middle;
}

.entry-content .protected_form {
  margin-bottom: 40px;
  padding: 120px 0 200px;
  border-bottom: 1px solid #7a583a;
  text-align: center;
}

.entry-content .protected_form p:before {
  content: "";
  display: block;
  width: 64px;
  height: 84px;
  margin: 0 auto 30px;
  background: url(./images/ico_package.png) no-repeat -50px -100px;
}
.entry-content .protected_form p {
  margin-bottom: 30px;
}

.entry-content .protected_form input {
  width: 220px;
  height: 50px;
  margin-bottom: 10px;
  background-color: transparent;
  vertical-align: top;
}

.entry-content .cap1 {
  text-align: center;
  font-size: 0.875em;
  font-style: italic;
}

/* Comment */
#tt-body-guestbook .tt-comment-cont {
  max-width: 860px;
  margin: 50px auto;
}

.comments {
  max-width: 860px;
  margin: 0 auto 60px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e6e6e6;
}

.comments h2 {
  font-weight: 400;
  font-size: 1em;
  color: #000;
}

.comments .comment-list {
  font-size: 16px;
  margin-bottom: 6px;
  overflow: hidden;
}

.comments .comment-list ul li {
  padding: 30px 0 25px;
  border-top: 1px solid #e6e6e6;
  position: relative;
  min-height: 48px;
}

.comments .comment-list ul li:first-child {
  border: none;
}

.comments .comment-list ul li ul li {
  padding: 26px 0 0 60px;
  border-top: 0;
  border-bottom: 0;
}

.comments .comment-list ul li .author-meta {
  position: absolute;
  overflow: hidden;
  top: 30px;
  height: 48px;
  left: 0;
  right: 0;
  padding: 4px 0 0 60px;
}

.comments .comment-list ul li ul li .author-meta {
  top: 26px;
  left: 60px;
}

.comments .comment-list ul li .author-meta .avatar {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.comments .comment-list ul li .author-meta span {
  display: inline-block;
}

.comments .comment-list ul li .author-meta a {
  text-decoration: none;
  color: #000;
}

.comments .comment-list ul li .author-meta .nickname {
  float: left;
  font-size: 0.875em;
  line-height: 20px;
}

.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
  margin-bottom: 3px;
  margin-right: 0;
  vertical-align: bottom;
}

.comments .comment-list ul li .author-meta .date {
  float: left;
  margin-left: 10px;
  font-size: 0.75em;
  color: #999;
  line-height: 20px;
}

.comments .comment-list ul li .author-meta .date:before,
.comments .comment-list ul li .author-meta .date a:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 9px;
  margin-right: 10px;
  background-color: #b2b2b2;
}

.comments .comment-list ul li .author-meta .date a {
  margin-left: 10px;
}

.comments .comment-list ul li .control {
  position: absolute;
  top: 33px;
  right: 0;
}

.comments .comment-list ul li ul li .control {
  top: 29px;
}

.comments .comment-list ul li .control a {
  margin: 0 2px;
  text-decoration: none;
  font-size: 12px;
  color: #999;
}

.comments .comment-list ul li p {
  position: relative;
  margin: 29px 0 0 60px;
  font-size: 0.875em;
  line-height: 1.5714;
  color: #666;
}

.comments .comment-form .field {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 8px;
}

.comments .comment-form input[type=text],
.comments .comment-form input[type=password],
.comments .comment-form textarea {
  border: 1px solid #e6e6e6;
  font-size: 0.9375em;
  line-height: 1.25;
  color: #666;
  background-color: transparent;
}

.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
  width: 140px;
  height: 52px;
  margin-right: 6px;
  padding: 10px;
  box-sizing: border-box;
}

.comments .comment-form input::-webkit-input-placeholder,
.comments .comment-form textarea::-webkit-input-placeholder {
  color: #d6d6d6;
}

.comments .comment-form textarea {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  resize: none;
  box-sizing: border-box;
}

.comments .comment-form .field .secret {
  display: inline-block;
  margin-left: 15px;
  vertical-align: middle;
}

.comments .comment-form .field .secret input {
  display: none;
}

.comments .comment-form .field .secret label {
  font-size: 0.8125em;
  line-height: 52px;
  color: #666;
  outline: none;
  cursor: pointer;
}

.comments .comment-form .field .secret label:before {
  content: "";
  display: inline-block;
  width: 19px;
  height: 18px;
  margin-right: 9px;
  border: 1px solid #e1e1e1;
  vertical-align: middle;
  background-color: #fff;
}

.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
  background-image: url(./images/ico_package.png);
  background-repeat: no-repeat;
  background-position: -150px -100px;
}

.comments .comment-form .field .submit {
  float: right;
}

/* Widget & Template Page */

/* ETC */
#dimmed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.43);
}

/* Post Type & Color Type */
.post-type-thumbnail .post-item {
  float: left;
  width: 24.0625%;
  margin: 0 0 58px;
  padding-left: 1.25%;
  border: 0;
}

.post-type-thumbnail .post-item:nth-child(4n+1) {
  padding-left: 0;
}

.post-type-thumbnail .post-item a {
  padding: 0;
}

.post-type-thumbnail .post-item .thum {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  height: 0;
  margin: 0 0 9px 0;
  padding-bottom: 75.757575757575758%;
  background-color: #ebebeb;
}

.post-type-thumbnail .post-item .thum:before {
  content: "NO IMAGE";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 18px;
  margin: -9px 0 0 0;
  text-align: center;
  font-family: 'Arial';
  font-weight: bold;
  font-size: 0.875em;
  color: #cbcbcb;
}

.post-type-thumbnail .post-item .thum img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  margin: 0;
}

.post-type-thumbnail .post-item .title {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  height: 2.75em;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.375em;
}

.post-type-thumbnail .post-item .excerpt {
  display: none;
}

.post-type-thumbnail .pagination {
  margin-top: 0;
}

/* Color Type */
.color-chocolate,
.color-chocolate .cover-footer,
.color-chocolate #footer {
  background-color: #f4f2f1;
}

.color-chocolate #header h1 a,
.color-chocolate #gnb ul li a,
.color-chocolate #footer .admin,
.color-chocolate .cover-thumbnail-list ul li a,
.color-chocolate .cover-masonry ul li a,
.color-chocolate .cover-list ul li a,
.color-chocolate .cover-footer p,
.color-chocolate .cover-footer .menu ul li a,
.color-chocolate .post-item a,
.color-chocolate .hgroup h1,
.color-chocolate .hgroup .post-meta a,
.color-chocolate .entry-content h1,
.color-chocolate .entry-content h2,
.color-chocolate .entry-content h3,
.color-chocolate .entry-content h4,
.color-chocolate .entry-content a,
.color-chocolate .related-articles ul li a,
.color-chocolate .comments .comment-list ul li .author-meta span,
.color-chocolate .comments .comment-list ul li .author-meta .date a,
.color-chocolate .pagination .selected {
  color: #4e2e28;
}

.color-chocolate #header .menu p,
.color-chocolate #footer p,
.color-chocolate .cover-thumbnail-list ul li .date,
.color-chocolate .cover-masonry ul li .excerpt,
.color-chocolate .cover-list ul li .excerpt,
.color-chocolate .cover-list ul li .date,
.color-chocolate .post-item .excerpt,
.color-chocolate .post-item .date,
.color-chocolate .hgroup .post-meta,
.color-chocolate .another-category td,
.color-chocolate .tags .items a,
.color-chocolate .related-articles ul li .date,
.color-chocolate .comments .comment-list ul li .author-meta .date,
.color-chocolate .comments .comment-list ul li .author-meta .control a {
  color: #a69693;
}

.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
  color: #94817e;
}

.color-chocolate .entry-content p,
.color-chocolate .entry-content table,
.color-chocolate .entry-content ul li,
.color-chocolate .entry-content ol li,
.color-chocolate .another-category table,
.color-chocolate .another-category table th a,
.color-chocolate .comments .comment-list ul li p {
  color: #836c68;
}

.color-chocolate #gnb ul li a:hover,
.color-chocolate .cover-footer .menu ul li a:hover,
.color-chocolate .cover-thumbnail-list ul li a:hover .title,
.color-chocolate .cover-masonry ul li a:hover .title,
.color-chocolate .cover-list ul li a:hover .title,
.color-chocolate .post-item a:hover .title,
.color-chocolate .related-articles ul li a:hover .title {
  color: #2d140f;
}

.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
  border-color: #a69693;
}

.color-chocolate .entry-content ul li:before {
  background-color: #a69693;
}

.color-chocolate #header .mobile-menu:before,
.color-chocolate #header .mobile-menu:after,
.color-chocolate #header .mobile-menu span {
  background-color: #4e2e28;
}

.color-chocolate .pagination a:hover,
.color-chocolate #header .search:hover:before {
  background-color: #e7e2e1;
}

.color-chocolate .btn,
.color-chocolate .cover-thumbnail-list .color-chocolate .cover-masonry .color-chocolate .cover-list .color-chocolate .cover-gallery,
.color-chocolate .cover-list ul li,
.color-chocolate .post-item,
.color-chocolate .hgroup,
.color-chocolate .entry-content table,
.color-chocolate .entry-content table thead th,
.color-chocolate .entry-content table tbody td,
.color-chocolate .entry-content blockquote,
.color-chocolate .comments,
.color-chocolate .comments .comment-list ul li,
.color-chocolate .comments .comment-form input[type=text],
.color-chocolate .comments .comment-form input[type=password],
.color-chocolate .comments .comment-form textarea,
.color-chocolate .comments .comment-form .field .secret label:before,
.color-chocolate .pagination .prev,
.color-chocolate .pagination .next,
.color-chocolate .pagination a {
  border-color: #e7e2e1;
}

.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate #header .search:before,
.color-chocolate .cover-thumbnail-list ul li .thum:before,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button,
.color-chocolate .related-articles ul li .thum:before {
  background-image: url(./images/ico_package_chocolate.png);
}

.color-chocolate .btn:hover,
.color-chocolate .pagination .prev:hover,
.color-chocolate .pagination .next:hover {
  border-color: #4d4d4d;
}

.color-chocolate #header .search.on {
  border-color: #4e2e28;
}

/* Retina Display */
@media only screen and (-webkit-min-device-pixel-ratio:1.5) {

  #header .search button,
  #header .search:before,
  .social-link a,
  .cover-slider .prev,
  .cover-slider .next,
  .cover-gallery ul li a:before,
  .post-header .list-type button,
  .pagination .prev,
  .pagination .next,
  .comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
    background-image: url(./images/ico_package_2x.png);
    background-size: 200px auto;
  }

  .color-chocolate .social-link a,
  .color-chocolate #header .search button,
  .color-chocolate .cover-gallery ul li a:before,
  .color-chocolate .post-header .list-type button {
    background-image: url(./images/ico_package_chocolate_2x.png);
    background-size: 200px auto;
  }
}

/* Media Screen - Tablet */
@media screen and (max-width:1023px) {
  #header .search.on {
    width: 180px;
  }

  #content .guest_inner,
  #content>.inner {
    padding: 0 40px;
  }

  .post-header {
    padding: 40px;
  }

  .cover-thumbnail-list {
    padding: 40px 40px 65px;
  }

  .cover-slider ul li .title {
    max-width: none;
    padding: 0 98px
  }

  .cover-slider .prev {
    left: 14px;
    margin-left: 0;
  }

  .cover-slider .next {
    left: auto;
    right: 14px;
    margin-left: 0;
  }

  .cover-masonry {
    padding: 60px 40px 81px;
  }

  .cover-list {
    padding: 30px 40px 85px;
  }

  .cover-gallery {
    padding: 60px 40px 130px;
  }
}

/* Media Screen - Mobie */
@media screen and (max-width:767px) {
  #header .mobile-menu {
    top: 10px;
    left: 11px;
  }

  #header .menu {
    padding: 84px 20px 189px;
  }

  #header .menu .social-link,
  #header .menu p {
    left: 20px;
  }

  #header h1 {
    padding: 15px 62px;
    line-height: 1.25;
  }

  #header h1 a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #header .search {
    top: 10px;
    right: 1px;
  }

  #header .search.on {
    position: absolute;
    top: 60px;
    left: 0;
    right: auto;
    z-index: 100;
    width: 100%;
    padding: 10px 18px 10px 17px;
    border: 0;
    background-color: #fff;
    box-sizing: border-box;
  }

  #header .search.on input {
    border-bottom: 1px solid #000;
  }

  #header .search.on button {
    top: -50px;
    right: 1px;
  }

  #content .guest_inner,
  #content>.inner {
    padding: 0 18px;
  }

  .post-header {
    padding: 20px 18px;
  }

  .cover-thumbnail-list {
    padding: 40px 18px 65px;
  }

  .cover-thumbnail-list ul li,
  .related-articles ul li {
    width: 48.591549295774648%;
    padding-left: 2.816901408450704%;
  }

  .cover-thumbnail-list ul li:nth-child(odd),
  .related-articles ul li:nth-child(odd) {
    clear: both;
    padding-left: 0;
  }

  .cover-slider ul li {
    width: 100%;
    box-sizing: border-box;
  }

  .cover-slider ul li .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 5.2em;
    padding: 0 18px;
    font-size: 2.125em;
  }

  .cover-slider .prev {
    top: auto;
    bottom: 0;
    left: 0;
  }

  .cover-slider .next {
    top: auto;
    right: 0;
    bottom: 0;
  }

  .cover-masonry {
    padding: 60px 18px 81px;
  }

  .cover-masonry ul li {
    float: none;
    width: 100%;
  }

  .cover-masonry ul li .category,
  .cover-list ul li .category {
    margin-bottom: 8px;
  }

  .cover-thumbnail-list ul li .title,
  .related-articles ul li .title,
  .cover-list ul li .title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 4.2em;
    line-height: 1.4;
  }

  .cover-list {
    padding: 10px 18px 80px;
  }

  .cover-list h2 {
    margin: 30px 0 0 0;
  }

  .cover-list ul li a {
    min-height: 98px;
  }

  .cover-list ul li figure {
    width: 113px;
    height: 113px;
    margin: 0 0 0 18px;
  }

  .cover-list ul li .title {
    -webkit-line-clamp: 2;
    margin-bottom: 3px;
    padding-top: 6px;
    font-size: 1em;
  }

  .cover-list ul li .category {
    display: none;
  }

  .cover-list ul li .excerpt {
    -webkit-line-clamp: 2;
    font-size: 0.8125em;
    line-height: 1.5;
  }

  .cover-gallery {
    padding: 60px 18px 130px;
  }

  .cover-gallery ul li {
    width: 50%;
  }

  .post-item a {
    min-height: 100px;
  }

  .post-item .thum {
    max-width: 113px;
    margin-left: 18px;
  }

  .post-item .thum img {
    width: auto;
    height: 113px;
    margin: 0 0 0 -16.5px;
  }

  .post-item .title {
    line-height: 1.2;
  }

  .post-item .excerpt {
    -webkit-line-clamp: 2;
  }

  .post-type-thumbnail .post-item {
    width: 48.591549295774648%;
    margin-bottom: 26px;
    padding-left: 2.816901408450704%;
  }

  .post-type-thumbnail .post-item:nth-child(4n+1) {
    padding-left: 2.816901408450704%;
  }

  .post-type-thumbnail .post-item:nth-child(2n+1) {
    clear: both;
    padding-left: 0%;
  }

  .post-type-thumbnail .post-item .title {
    -webkit-line-clamp: 3;
    height: auto;
    max-height: 4.125em;
  }

  .entry-content .table-wrap {
    overflow: auto;
    width: 100%;
  }

  .entry-content table {
    width: 680px;
    table-layout: fixed;
  }

  .entry-content .protected_form input {
    display: block;
    width: 160px;
    margin: 0 auto 10px;
  }

  .pagination {
    padding: 0 18px;
  }

  .pagination a {
    display: none;
  }

  .pagination .current {
    display: block;
    font-size: 0.875em;
    line-height: 50px;
  }

  .pagination .prev {
    display: block;
    float: left;
    margin: 0;
  }

  .pagination .next {
    display: block;
    float: right;
    margin: 0;
  }

  .another-category table th {
    display: block;
    padding: 0;
  }

  .another-category table td {
    display: block;
    margin-bottom: 19px;
  }

  .comments .comment-list {
    margin-bottom: 10px;
    margin-top: 10px;
    border-top: 1px solid #e6e6e6;
  }

  .comments .comment-list ul li {
    padding-bottom: 0;
  }

  .comments .comment-list ul li ul {
    border-top: 1px solid #e6e6e6;
  }

  .comments .comment-list ul li ul li {
    padding: 20px 0 0 48px;
  }

  .comments .comment-list ul li ul li:before {
    content: "";
    position: absolute;
    top: 34px;
    left: 18px;
    width: 12px;
    height: 12px;
    background: url(./images/ico_package.png) no-repeat 0 -150px;
  }

  .comments .comment-list ul li .author-meta,
  .comments .comment-list ul li ul li .author-meta {
    position: relative;
    top: 0;
    left: 0;
  }

  .comments .comment-list ul li .author-meta img {
    position: absolute;
    top: 0;
    left: 0;
  }

  .comments .comment-list ul li .author-meta .nickname,
  .comments .comment-list ul li .author-meta .date {
    display: block;
    float: none;
    line-height: 1.5;
  }

  .comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
    margin-bottom: 4px;
  }

  .comments .comment-list ul li .author-meta .date {
    margin-left: 0;
    margin-top: 2px;
  }

  .comments .comment-list ul li .author-meta .date::before {
    display: none;
  }

  .comments .comment-list ul li p {
    margin: 14px 0 0;
  }

  .comments .comment-list ul li .control {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    margin: 9px 0 18px -2px;
  }

  .comments .comment-list ul li ul li .control {
    top: auto;
  }

  .comments .comment-form input[type=text],
  .comments .comment-form input[type=password] {
    width: 100px;
  }

  .comments .comment-form .field .secret {
    margin-left: 0;
  }

  .comments .comment-form .field .secret label:before {
    margin-right: 5px;
  }

  .comments .comment-form .field .submit {
    display: block;
    float: none;
    margin: 60px auto 0;
  }
}

.revenue_unit_wrap.position_list {
  max-width: 860px;
  margin: 30px auto
}

.guest_inner .tt-comment-cont {
  padding-top: 40px;
}

.tt-comment-cont .tt-box-total .tt_txt_g {
  font-size: 14px;
}

.tt-comment-cont .tt-box-total .tt_num_g {
  font-size: 14px;
}

.tt-comment-cont .tt-wrap-cmt .tt-link-user {
  font-size: 14px;
}

.tt-comment-cont .tt-wrap-cmt .tt_desc {
  font-size: 14px;
  color: #666;
}

.tt-comment-cont .tt-txt-mention {
  color: #666;
}

.tt-comment-cont .tt-btn_register {
  width: 158px;
  height: 50px;
  background-color: #fff;
  color: #222;
  border-radius: 0;
  border-color: #DCDCDC;
}

.tt-comment-cont .tt-btn_register:hover {
  background-color: #fff;
  border-color: #222;
}

.tt-comment-cont .tt-btn_register:focus {
  background-color: #fff;
  border-color: #222;
}

/* 전체 공통 */
#article-view {
  margin: 0;
  /* padding: 20px 20px 50px; */
  word-wrap: break-word;
  color: #333;
  min-height: 370px;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}

.contents_style>* {
  margin: 20px 0 0 0;
}

/* 텍스트 관련 */
#article-view h2[data-ke-size] {
  font-size: 1.62em;
  line-height: 1.46;
}

#article-view h3[data-ke-size] {
  font-size: 1.44em;
  line-height: 1.48;
}

#article-view h4[data-ke-size] {
  font-size: 1.25em;
  line-height: 1.55;
}

#article-view p[data-ke-size='size18'] {
  font-size: 1.12em;
  line-height: 1.67;
}

#article-view p[data-ke-size='size16'] {
  line-height: 1.75;
}

#article-view p[data-ke-size='size14'] {
  font-size: 0.87em;
  line-height: 1.71;
}

#article-view h2,
#article-view h3,
#article-view h4 {
  font-weight: normal;
  letter-spacing: -1px;
  color: #000;
  /* margin: 1em 0 20px; */
  margin: 1em 0 5px;
}

#article-view p+p, #article-view p {
  margin-bottom: 30px;
}

#article-view h2+h2,
#article-view h3+h3,
#article-view h4+h4 {
  margin: 0;
}

#article-view h2+h3,
#article-view h2+h4,
#article-view h3+h4 {
  margin-top: 10px;
}

#article-view h2+p,
#article-view h3+p,
#article-view h4+p,
#article-view h5+p,
#article-view h6+p {
  margin-top: 10px;
}

#article-view div[data-ke-type='moreLess'] {
  caret-color: auto;
  background-color: #fafafa;
  padding: 20px 10px;
  margin: 20px 0;
  border: 1px dashed #dddddd;
  color: #333333;
}

#article-view a{
  color: #0070d1;
  text-decoration: underline;
}

#article-view div.char-card-wrap a{
  color:#bbb;
  text-decoration: none;
}

#article-view figure[data-ke-type='contentSearch'] a {
  text-decoration: none;
}

/* 인용문 */
#article-view blockquote[data-ke-style='style1'] {
  text-align: center;
  background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/blockquote-style1.svg) no-repeat 50% 0;
  padding: 34px 0 0 0;
  font-size: 1.12em;
  color: #333;
  line-height: 1.67;
  border: 0 none;
  font-family: "Noto Serif KR";
}

#article-view blockquote[data-ke-style='style2'] {
  border-color: #d0d0d0;
  border-width: 0 0 0 4px;
  border-style: solid;
  padding: 1px 0 0 12px;
  color: #666;
  line-height: 1.75;
  font-size: 1em;
  text-align: left;
}

#article-view blockquote[data-ke-style='style3'] {
  border: 1px solid #dddddd;
  background-color: #fcfcfc;
  text-align: left;
  padding: 21px 25px 20px 25px;
  color: #666;
  font-size: 1em;
  line-height: 1.75;
}

#article-view blockquote {
  display: block;
  margin: 20px auto 0;
  letter-spacing: 0px;
}

/* 첨부: 공통 */

/* 이미지 클릭 관련 - lightbox */
#article-view span[data-lightbox] {
  cursor: pointer;
}

/* 첨부: 파일 */
#article-view figure.fileblock {
  width: 470px;
  height: 73px;
  box-sizing: border-box;
  position: relative;
  border-radius: 1px;
  margin-top: 20px;
  margin-bottom: 0px;
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 7%);
  border: solid 1px rgba(0, 0, 0, 0.1);
}

#article-view figure.fileblock a {
  display: block;
}

#article-view figure.fileblock .image {
  float: left;
  width: 30px;
  height: 30px;
  background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');
  margin: 22px 17px 21px 22px;
  background-position: 0 0;
}

#article-view figure.fileblock .desc {
  position: absolute;
  left: 70px;
  right: 60px;
  top: 4px;
  bottom: 0;
}

#article-view figure.fileblock .filename {
  color: #333333;
  font-size: 14px;
  text-overflow: ellipsis;
  width: 100%;
  height: 20px;
  margin: 16px 0 0;
}

#article-view figure.fileblock .size {
  font-family: "Pretendard Variable", Pretendard;
  font-size: 12px;
  color: #777;
  height: 16px;
}

#article-view figure[data-ke-align=alignCenter].fileblock {
  margin-left: auto;
  margin-right: auto;
}

#article-view figure[data-ke-align=alignRight].fileblock {
  margin-left: auto;
}

#article-view figure.fileblock .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 272px;
  height: 20px;
  display: block;
}

#article-view figure.fileblock a::after {
  content: '';
  background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');
  background-position: -40px 0;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 24px;
  top: 19px;
}

/* 첨부: 이미지 */
#article-view figure.imageblock {
  display: table;
  position: relative;
}

#article-view figure.imageblock.alignLeft {
  text-align: left;
}

#article-view figure.imageblock.alignCenter {
  margin: 20px auto 0;
  text-align: center;
}

#article-view figure.imageblock.alignRight {
  text-align: right;
  margin-left: auto;
}

#article-view figure.imageblock.floatLeft {
  float: left;
  margin-right: 20px;
}

#article-view figure.imageblock.floatRight {
  float: right;
  margin-left: 20px;
}

#article-view figure.imageblock.widthContent {
  display: block;
}

#article-view figure.imageblock.widthContent img {
  width: 100%;
}

#article-view figure.imageblock.floatLeft figcaption,
#article-view figure.imageblock.floatRight figcaption {
  text-align: left;
}

#article-view figure.imageblock img {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  height: auto;
}

#article-view iframe,
#article-view figure img,
#article-view figure iframe {
  max-width: 100%;
}

#article-view figure img:not([width]),
#article-view figure iframe:not([width]) {
  width: 100%;
}

#article-view figure {
  max-width: 100%;
  clear: both;
}

#article-view figure img {
  display: inline-block;
}

#article-view figure.imagegridblock+figure.imagegridblock,
#article-view figure.imagegridblock+figure.imageblock,
#article-view figure.imageblock+figure.imagegridblock {
  margin-top: 10px;
}

/* 캡션 텍스트 */
#article-view figure figcaption {
  font-size: 13px;
  color: #777;
  word-break: break-word;
  padding-top: 10px;
  min-height: 20px;
  caption-side: bottom;
  text-align: center;
  caret-color: auto;
  width: 100%;
  box-sizing: content-box;
}

/* 첨부: 이미지 그리드 */
#article-view figure.imagegridblock {
  position: relative;
  caret-color: transparent;
  background-color: transparent;
  width: 100%;
  height: auto;
  margin: 20px 0 0 0;
}

#article-view figure.imagegridblock .image-container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
}

#article-view figure.imagegridblock .image-container>span {
  margin-right: 0;
  margin-top: 2px;
}

#article-view figure.imagegridblock img {
  margin: 0;
  height: inherit;
}

#article-view figure.imagegridblock span img {
  width: 100%;
}

hr[data-ke-style],
#article-view hr[data-ke-style] {
  border: none;
  font-size: 0;
  line-height: 0;
  margin: 20px auto;
  background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/divider-line.svg);
  background-size: 200px 420px;
  cursor: default !important;
}

hr[data-ke-style='style1'],
#article-view hr[data-ke-style='style1'] {
  background-position: center 0;
  width: 64px;
  height: 4px;
  padding: 20px;
}

hr[data-ke-style='style2'],
#article-view hr[data-ke-style='style2'] {
  background-position: center -48px;
  width: 64px;
  height: 3px;
  padding: 20px;
}

hr[data-ke-style='style3'],
#article-view hr[data-ke-style='style3'] {
  background-position: center -96px;
  width: 64px;
  height: 8px;
  padding: 18px 20px;
}

hr[data-ke-style='style4'],
#article-view hr[data-ke-style='style4'] {
  background-position: center -144px;
  width: 2px;
  height: 60px;
  padding: 0 51px;

}

hr[data-ke-style='style4']+hr[data-ke-style='style4'],
#article-view hr[data-ke-style='style4']+hr[data-ke-style='style4'] {
  margin-top: 0;
}

hr[data-ke-style='style5'],
#article-view hr[data-ke-style='style5'] {
  background-position: center -208px;
  background-repeat: repeat-x;
  height: 2px;
  padding: 21px 0;
}

hr[data-ke-style='style6'],
#article-view hr[data-ke-style='style6'] {
  background-position: center -256px;
  background-repeat: repeat-x;
  height: 2px;
  padding: 21px 0;
}

hr[data-ke-style='style7'],
#article-view hr[data-ke-style='style7'] {
  background-position: center -304px;
  width: 200px;
  height: 19px;
  padding: 18px 20px 17px 20px;
}

hr[data-ke-style='style8'],
#article-view hr[data-ke-style='style8'] {
  background-position: center -362px;
  width: 200px;
  height: 19px;
  padding: 18px 20px 17px 20px;
}

/* 테이블 */
#article-view table[data-ke-style] {
  margin-bottom: 0px;
}

#article-view table {
  margin-bottom: 0px;
  border-color: #ddd;
}

#article-view table tbody tr {
  box-sizing: content-box;
}

#article-view table td {
  word-break: break-word;
  padding: 8px;
  font-size: 15px;
}

#article-view table[data-ke-style='style1'] tr:first-child td {
  border-bottom: 1px solid #6ed3d8;
}

#article-view table[data-ke-style='style2'] tr:first-child td {
  border-bottom: 1px solid #008300;
}

#article-view table[data-ke-style='style3'] tr:first-child td {
  border-bottom: 1px solid #006dbe;
}

#article-view table[data-ke-style='style4'] tr:nth-child(2n) td {
  background-color: #f9f9f9;
}

#article-view table[data-ke-style='style5'] tr:nth-child(2n) td {
  background-color: #f8fbfb;
}

#article-view table[data-ke-style='style6'] tr:nth-child(2n) td {
  background-color: #f5f7f5;
}

#article-view table[data-ke-style='style7'] tr:nth-child(2n) td {
  background-color: #f6f8fb;
}

#article-view table[data-ke-style='style8'] tr:first-child td {
  border-bottom: 2px solid #797979;
}

#article-view table[data-ke-style='style8'] {
  border-left: 0 none;
  border-right: 0 none;
}

#article-view table[data-ke-style='style8'] td {
  border-right-color: transparent;
  border-left-color: transparent;
}

#article-view table[data-ke-style='style9'] tr:first-child td {
  border-bottom: 2px solid #6ed3d8;
}

#article-view table[data-ke-style='style9'] {
  border-left: 0 none;
  border-right: 0 none;
}

#article-view table[data-ke-style='style9'] td {
  border-right-color: transparent;
  border-left-color: transparent;
}

#article-view table[data-ke-style='style10'] tr:first-child td {
  border-bottom: 2px solid #008300;
}

#article-view table[data-ke-style='style10'] {
  border-left: 0 none;
  border-right: 0 none;
}

#article-view table[data-ke-style='style10'] td {
  border-right-color: transparent;
  border-left-color: transparent;
}

#article-view table[data-ke-style='style11'] tr:first-child td {
  border-bottom: 2px solid #2780d4;
}

#article-view table[data-ke-style='style11'] {
  border-left: 0 none;
  border-right: 0 none;
}

#article-view table[data-ke-style='style11'] td {
  border-right-color: transparent;
  border-left-color: transparent;
}

#article-view table[data-ke-style='style12'] tr:nth-child(odd) td {
  background-color: #f9f9f9;
}

#article-view table[data-ke-style='style12'] tr td:first-child {
  background-color: #efefef;
}

#article-view table[data-ke-style='style12'] tr:first-child td {
  background-color: #9b9b9b;
  border: 1px solid #888;
  color: #fff;
}

#article-view table[data-ke-style='style13'] tr:nth-child(odd) td {
  background-color: #f9f9f9;
}

#article-view table[data-ke-style='style13'] tr td:first-child {
  background-color: #efefef;
}

#article-view table[data-ke-style='style13'] tr:first-child td {
  background-color: #6ed3d8;
  border: 1px solid #5cbcc1;
  color: #fff;
}

#article-view table[data-ke-style='style14'] tr:nth-child(odd) td {
  background-color: #f9f9f9;
}

#article-view table[data-ke-style='style14'] tr td:first-child {
  background-color: #efefef;
}

#article-view table[data-ke-style='style14'] tr:first-child td {
  background-color: #008300;
  border: 1px solid #006d00;
  color: #fff;
}

#article-view table[data-ke-style='style15'] tr:nth-child(odd) td {
  background-color: #f9f9f9;
}

#article-view table[data-ke-style='style15'] tr td:first-child {
  background-color: #efefef;
}

#article-view table[data-ke-style='style15'] tr:first-child td {
  background-color: #2780d4;
  border: 1px solid #1568b7;
  color: #fff;
}

#article-view table[data-ke-style='style16'],
#article-view table[data-ke-style='style16'] tr,
#article-view table[data-ke-style='style16'] tr td {
  border-color: transparent;
}

/* 오픈 그래프 */
#article-view figure[data-ke-type='opengraph'] {
  margin: 10px 0;
}

#article-view figure[data-ke-type='opengraph'] a {
  box-sizing: initial;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.07);
  border: solid 1px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #000;
}

#article-view figure[data-ke-type='opengraph'] a:hover {
  opacity: 1;
}

#article-view figure[data-ke-type='opengraph'] div.og-image {
  border-right: solid 1px rgba(0, 0, 0, 0.06);
  width: 200px;
  height: 200px;
  background-size: cover;
  background-position: center;
}

#article-view figure[data-ke-type='opengraph'] div.og-image button {
  display: none;
}

#article-view figure[data-ke-type='opengraph']:hover div.og-image button {
  cursor: pointer;
  border: none;
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #000;
  width: 15px;
  height: 15px;
}

#article-view figure[data-ke-type='opengraph'] p.og-title {
  color: #000000;
  font-size: 22px;
  padding-bottom: 10px;
  max-width: 467px;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0px;
  overflow: hidden;
  font-family: "Pretendard Variable", Pretendard;
}

#article-view figure[data-ke-type='opengraph'] .og-desc {
  margin: 0px;
  max-width: 467px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: "Pretendard Variable", Pretendard;
  font-size: 14px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #909090;
  max-height: 42px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

@media (max-width: 600px) {
  #article-view figure[data-ke-type='opengraph'] a {
    height: 90px;
  }

  #article-view figure[data-ke-type='opengraph'] a::before {
    left: 44px;
  }

  #article-view figure[data-ke-type='opengraph'] div.og-image {
    width: 90px;
    height: 90px;
  }

  #article-view figure[data-ke-type='opengraph'] div.og-text {
    padding: 13px 12px 0 20px;
    height: 90px;
  }

  #article-view figure[data-ke-type='opengraph'] div.og-text p.og-title {
    font-size: 16px;
    -webkit-line-clamp: 1;
  }

  #article-view figure[data-ke-type='opengraph'] div.og-text p.og-desc {
    display: none;
  }

  #article-view figure[data-ke-type='opengraph'] div.og-text p.og-host {
    bottom: 10px;
  }
}

/* 비디오 첨부 */
#article-view figure[data-ke-type='video'] {
  display: block;
  table-layout: fixed;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  color: #bdbdbd;
  font-size: 16px;
  line-height: 30px;
}

#article-view figure[data-ke-type='video'][data-ke-style='alignLeft'] {
  text-align: left;
}

#article-view figure[data-ke-type='video'][data-ke-style='alignCenter'] {
  margin: 20px auto 0;
  text-align: center;
}

#article-view figure[data-ke-type='video'][data-ke-style='alignRight'] {
  text-align: right;
  margin-left: auto;
}

#article-view figure[data-ke-type='video'] img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

#article-view figure[data-ke-type='video'][data-video-host] iframe {
  margin: 0px;
  display: block;
}

#article-view figure[data-ke-type='video']>iframe[width='0'][height='0'] {
  width: 860px;
  height: 484px;
  max-width: 100%;
}

/* 코드 블럭 */
#article-view pre code.hljs {
  font-size: 14px;
  padding: 20px;
  font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
  border: solid 1px #ebebeb;
  line-height: 1.71;
  overflow: auto;
}

/* 접은 글 */
#article-view .moreless-content :first-child {
  /* margin-top: 0;
  margin-bottom: 0; */
}

#article-view div[data-ke-type='moreLess'] .moreless-content {
  display: none;
}

#article-view div[data-ke-type='moreLess'].open .moreless-content {
  display: block;
}

#article-view div[data-ke-type='moreLess'] .btn-toggle-moreless {
  color: #909090;
  font-size: 16px;
  line-height: 26px;
  font-family: Pretendard-Regular, sans-serif;
  cursor: pointer;
  text-decoration: none;
}

/* 리스트 */
#article-view ul li,
#article-view ol li {
  /* margin: 0 0 3px 22px; */
  margin: 0 0 3px 5px;
  line-height: 1.7;
}

#article-view ul,
#article-view ol {
  margin: 14px auto 24px;
  padding: 0 0 0 10px;
}

/* 이모티콘 */
#article-view figure[data-ke-type=emoticon][data-ke-align=alignCenter] {
  text-align: center;
}

#article-view figure[data-ke-type=emoticon][data-ke-align=alignLeft] {
  text-align: left;
}

#article-view figure[data-ke-type=emoticon][data-ke-align=alignRight] {
  text-align: right;
}

/* 지도 */
#article-view figure[data-ke-type='map'],
#article-view iframe[data-ke-type='map'] {
  display: block;
  margin: 0 auto;
}

/* 첨부: 이미지 슬라이드 */
#article-view figure.imageslideblock {
  clear: both;
  position: relative;
  font-size: 0;
  outline: 0 none;
}

#article-view figure.imageslideblock .btn {
  display: none;
  outline: none;
}

#article-view figure.imageslideblock.ready .btn {
  display: inline-block;
}

#article-view figure.imageslideblock.ready .mark {
  opacity: 1;
}

#article-view figure.imageslideblock div.image-container {
  position: relative;
  min-width: 480px;
  max-width: 100%;
  min-height: 300px;
  max-height: 860px;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
}

#article-view figure.imageslideblock div.image-container span.image-wrap {
  display: none;
}

#article-view figure.imageslideblock div.image-container span.image-wrap.selected {
  display: inline;
}

#article-view figure.imageslideblock div.image-container img {
  max-width: 100%;
  max-height: 100%;
}

#article-view figure.imageslideblock div.image-container .btn {
  position: absolute;
  border: 0;
  background: transparent;
  width: 60px;
  height: 60px;
  top: 50%;
  margin-top: -20px;
}

#article-view figure.imageslideblock div.image-container .btn-prev {
  left: 0;
}

#article-view figure.imageslideblock div.image-container .btn-next {
  right: 0;
}

#article-view figure.imageslideblock div.image-container:hover .btn span {
  opacity: 0.3;
}

#article-view figure.imageslideblock div.image-container .btn span {
  background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');
  text-indent: -10000px;
  overflow: hidden;
  width: 40px;
  height: 40px;
  opacity: 0;
  transition: opacity ease-in-out 0.2s;
  display: inline-block;
}

#article-view figure.imageslideblock div.image-container .btn:hover span {
  opacity: 1;
}

#article-view figure.imageslideblock div.image-container .btn .ico-prev {
  background-position: -220px 0;
}

#article-view figure.imageslideblock div.image-container .btn .ico-next {
  background-position: -260px 0;
}

#article-view figure.imageslideblock div.mark {
  display: block;
  height: 44px;
  text-align: center;
  opacity: 0;
  transition: opacity ease-in-out 0.2s;
}

#article-view figure.imageslideblock div.mark span {
  width: 30px;
  height: 4px;
  display: inline-block;
  margin: 20px 1px;
  background-color: #d6d6d6;
  text-indent: -10000px;
  overflow: hidden;
  cursor: pointer;
}

#article-view figure.imageslideblock div.mark span:first-child {
  background-color: #000;
  margin-left: 0;
}

#article-view figure.imageslideblock div.mark span:last-child {
  margin-right: 0;
}

#article-view figure.imageslideblock figcaption {
  text-align: center;
  color: #666;
  font-size: 14px;
}

#article-view figure.imageslideblock.alignLeft {
  text-align: left;
}

#article-view figure.imageslideblock.alignCenter {
  margin: 0 auto 20px;
  text-align: center;
}

#article-view figure.imageslideblock.alignRight {
  text-align: right;
  margin-left: auto;
}

@media (max-width: 600px) {
  #article-view figure.imageslideblock div.image-container {
    min-width: 100%;
    width: 100%;
    max-height: 100%;
  }

  #article-view figure.imageslideblock div.image-container .btn span {
    opacity: 0.3;
  }
}

/* 구 에디터 속성 */
.btn_more, .btn_less {
  border: 0;
  background: transparent;
  display: block;
  height: 21px;
  margin: 20px 0;
  font-size: 14px;
  line-height: 14px;
  color: #888;
  position: relative;
  width: 100%;
  text-align: left;
}

.btn_less::before,
.btn_more::before {
  content: "...";
  display: inline-block;
  padding-right: 5px;
  font-size: 14px;
  line-height: 6px;
  vertical-align: top;
}

.box-timeline-content {
  word-break: break-all;
}



/*여기서부턴 직접 작성, 별도 개별파일로 올릴거고 여긴 공통설정인것들*/
div.game-context{
  line-height: 1.5;
}

div.game-context .italic{
  font-style: italic;
}

div.story-title{
  /* background: linear-gradient(to right, #ffffff00, rgb(190, 110, 255), #ffffff00); */
  border:1px solid;
  border-left: 1px;
  border-right: 1px;
  width:100%;
  text-align: center;
  box-sizing: border-box;
  padding:10px 10px 20px 10px;
  margin-top:30px;
}

/* div.char-name, div.char-etc{ */
div.bubble > div:not(.char-script) {
  font-weight: bold;
  padding:1.5em 0 0 0;
}

div.blank-slate span.word-blue,
div.aporia-staff span.word-blue,
div.monologue span.word-blue,
div.aporia-staff-right.suoh span.word-blue,
div.aporia-staff-right.ichikawa span.word-blue,
div.ito-left span.word-blue{
  color:#37a1ff; 
  /* color:#46a8ff;  */
  /* color:#5fb4ff;  */
}

div.sly-red div.ito span.word-blue,
div.phony-violet div.ito span.word-blue,
div.piece-of-cake div.ito span.word-blue,
div.aporia-staff-right.kosaka span.word-blue,
div.aporia-staff-right.ayato span.word-blue,
div.aporia-staff-right.ukyo span.word-blue,
div.aporia-staff-right.kanno span.word-blue,
div.aporia-staff-right.fushimi span.word-blue,
div.aporia-staff-right.mikado span.word-blue,
div.aporia-staff-right.shinkai span.word-blue,
div.aporia-staff-right.aizawa span.word-blue,
div.aporia-staff-right.arima span.word-blue,
div.aporia-staff-right.tateshina span.word-blue,
div.aporia-staff-right.kamiya span.word-blue{
  /*둘 다 잘 안보이는애들*/
  color: #9bdeff;
  /* color: #84d6ff; */
  /* color: #6cceff; */
}

span.word-blue{
  color:#003bac;
  /* color:#0000ac; */
  font-weight: 600;
}

/*기본 핑크*/
span.word-pink{
  color:#f527ef;
  /* color:#331E2A; */
  font-weight: 600;
}

/*기본핑크 잘 안보이는 애들 진한핑크*/
div.aloof-yellow div.ito span.word-pink,
.aporia-staff-right.arima span.word-pink,
.aporia-staff-right.okiya span.word-pink,
div.vindictive-blue div.ito span.word-pink
{
  color:#8d0089;
  
}

/*기본핑크도 잘안보여... 진한핑크도 잘안보여.. 한애들*/
.aporia-staff-right.kosaka span.word-pink,
div.piece-of-cake div.ito span.word-pink{
  color:#ff9bed;
}

span.word-green{
  color: #23b08d;
  font-weight: 600;
}


.aporia-staff-right.okiya span.word-green{
  color: #33fdcb;
}

.kosaka div.char-name::before,
.aporia-staff-right.kosaka div.char-name::after{
  background-image:url('images/kosaka_head.png');
}
.kise div.char-name::before,
.aporia-staff-right.kise div.char-name::after{
  background-image:url('images/kise_head.png');
}

.suoh div.char-name::before,
.aporia-staff-right.suoh div.char-name::after{
  background-image:url('images/suoh_head.png');
}

.ayato div.char-name::before,
.aporia-staff-right.ayato div.char-name::after{ /**/
  background-image:url('images/ayato_head.png');
}
.ukyo div.char-name::before,
.aporia-staff-right.ukyo div.char-name::after{
  background-image:url('images/ukyo_head.png');
}

.hinomiya div.char-name::before,
.aporia-staff-right.hinomiya div.char-name::after{
  background-image:url('images/hinomiya_head.png');
}

.kanno div.char-name::before,
.aporia-staff-right.kanno div.char-name::after{
  background-image:url('images/kanno_head.png');
}

.tsukimoto div.char-name::before,
.aporia-staff-right.tsukimoto div.char-name::after{
  background-image:url('images/tsukimoto_head.png');
}
.ichikawa div.char-name::before,
.aporia-staff-right.ichikawa div.char-name::after{
  background-image:url('images/ichikawa_head.png');
}

.okiya div.char-name::before,
.aporia-staff-right.okiya div.char-name::after{
  background-image:url('images/okiya_head.png');
}

.fushimi div.char-name::before,
.aporia-staff-right.fushimi div.char-name::after{
  background-image:url('images/fushimi_head.png');
}

.mikado div.char-name::before,
.aporia-staff-right.mikado div.char-name::after{
  background-image:url('images/mikado_head.png');
}

.shinkai div.char-name::before,
.aporia-staff-right.shinkai div.char-name::after{
  background-image:url('images/shinkai_head.png');
}

.aizawa div.char-name::before,
.aporia-staff-right.aizawa div.char-name::after{
  background-image:url('images/aizawa_head.png');
}

.arima div.char-name::before,
.aporia-staff-right.arima div.char-name::after{
  background-image:url('images/arima_head.png');
}

.shido div.char-name::before,
.aporia-staff-right.shido div.char-name::after{
  background-image:url('images/shido_head.png');
}

.tateshina div.char-name::before,
.aporia-staff-right.tateshina div.char-name::after{
  background-image:url('images/tateshina_head.png');
}

.onda div.char-name::before,
.aporia-staff-right.onda div.char-name::after{
  background-image:url('images/onda_head.png');
}

.nina div.char-name::before,
.aporia-staff-right.nina div.char-name::after{
  background-image:url('images/nina_head.png');
}

.kamiya div.char-name::before,
.aporia-staff-right.kamiya div.char-name::after{
  background-image:url('images/kamiya_head.png');
}

.manami div.char-name::before,
.aporia-staff-right.manami div.char-name::after{
  background-image:url('images/manami_head.png');
}

.rare div.char-name::before{
  background-image:url('images/rare_head.png');
}

.date div.char-name::before{
  background-image:url('images/date_head.png');
}
 
.togo div.char-name::before{
  background-image:url('images/togo_head.png');
}

.amo div.char-name::before{
  background-image:url('images/amo_head.png');
}

/*--------- 만우절 전용 ---------*/
body:has(.only-april-fool){
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE */
}

.only-april-fool .bubble{
  width: 100%;
  position:relative;
  margin:20px 0;
}

.only-april-fool figure img{
  pointer-events: none;
  user-select: none;
  transition: none;
}

.april-simulation figure img{
  filter: brightness(1) ;
}

.april-simulation img:not([src]),
.april-administrative img:not([src]) {
  display: none;
}

.april-simulation .transition-on img,
.april-watchdog .transition-on img {
  transition: filter 0.6s ease;
}

.april-administrative .transition-on img {
  transition: filter 2s ease;
}

.only-april-fool figure.to-black img {
  filter: brightness(0);
}
.only-april-fool figure.to-white img {
  filter:  grayscale(1) brightness(15);
}

.only-april-fool.april-main .april-char-name,
.only-april-fool.april-watchdog .char-etc,
.only-april-fool.april-watchdog .april-char-name{
  position:relative;
  top:320px;
  /* display:block; */
  font-size:36px;
  width:100%;
  padding:0 !important;
  /* background:rgba(255, 255, 255, 0.8); */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0) 70%);
}

.only-april-fool.april-watchdog .char-etc,
.only-april-fool.april-watchdog .april-char-name{
  top:unset;
  z-index:60;
}


.only-april-fool.april-main .monologue{
  font-family: 'gulim';
  font-style: italic;
  font-size:48px;
  margin-bottom:5em;
}

.april-main .april-kise,
.april-main .april-kosaka{
  height:500px;
}
.april-main .april-kosaka div.april-char-name::after{
  background-image:url('images/april_kosaka.png');
  background-position: left;
  position:absolute;
  z-index:-50;
  top:-320px;
}
.april-main .april-kise div.april-char-name::after{
  background-image:url('images/april_kise.png');
  background-position: right;
  position:absolute;
  z-index:-50;
  top:-320px;
}

.only-april-fool.april-main [class^="bubble aporia-staff april-"] .char-script,
.only-april-fool.april-watchdog .bubble .char-script{
  font-family: 'gulim';
  display:block;
  font-weight: 500;
  border-radius: 10px !important;
  /* background: linear-gradient(180deg, rgba(0, 2, 94, 0.8) 20%, rgba(82, 84, 192, 0.8) 100%); */
  background:rgba(0, 2, 94, 0.8) !important;
  color:white;
  width:100%;
  height:150px;
  font-size:32px;
  text-align:left;
  text-shadow: 1.5px 0px #000, 0px 1.5px #000, -1.5px 0px #000, 0px -1.5px #000;
  position:absolute;
  bottom:-30px;
  z-index: 50;
}

.only-april-fool.april-watchdog .bubble .char-script{
  bottom: unset;
}

.april-negotiation{
  height:580px;
}
.only-april-fool div.shout{
  font-size:26px !important;
}
.only-april-fool div.shout.x2{
  font-size:56px !important;
}
.april-negotiation .story-content{
  top:160px;
}

.april-negotiation .emoji{
  text-align: center;
}

.april-negotiation .story-content > * {
  display: none !important;
  /* position:absolute; */
}

.april-negotiation .story-content > *.show{
  display: block !important;
}



.april-negotiation div.monologue{
  /* height:100px; */
  font-size:28px;
  animation: fadein 0.1s;
  -moz-animation: fadein 0.1s; /* Firefox */
  -webkit-animation: fadein 0.1s; /* Safari and Chrome */
  -o-animation: fadein 0.1s; /* Opera */
  animation-fill-mode: forwards;
  margin:0 10px;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.only-april-fool div.image-wrap{
  position: relative;
  width:100%;
}

.april-negotiation .scene-image{
  position:absolute;
  top:120px;
}

.april-negotiation .scene-image img {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.only-april-fool.april-negotiation div.character-set{
  position:absolute;
  display:flex;
  width:100%;
  justify-content: space-around;
  top:20px;
}

div.charter-set img[class$="on"]{
  animation: hopTwice 0.6s ease;
}

div.character-set img{
  min-width: 0;
}


.only-april-fool.april-negotiation .april-char-name,
.only-april-fool.april-negotiation .char-etc{
  font-family: 'HakgyoansimGeurimilgiTTF-R';
  /* display:block; */
  font-size:28px;
  margin-left:10px;
  padding:10px 0 5px 15px;
  bottom: -50px;
  position: absolute;
  z-index: 10;
  /* border-radius: 10px 0 0 0; */
  /* background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0) 70%); */
}

.only-april-fool.april-negotiation .char-script{
  margin:0 10px;

}
.only-april-fool.april-negotiation [class^="bubble aporia-staff april-"] .char-script{
  font-family: 'HakgyoansimGeurimilgiTTF-R';
  width: calc(100% - 20px);
  display:block;
  border-radius: 10px !important;
  position:absolute;
  height:220px;
  font-size:32px;
  padding-top: 50px;
  background-color:rgba(255,255,255,0.85);
  /* https://smoothshadows.com/#djEsMSw1LDAuMDgsMjQsMTAsMCwjMDMwNzEyLCNmM2Y0ZjYsI2ZmZmZmZiwy */
  box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.02),
    0px 2px 4px rgba(3, 7, 18, 0.03),
    0px 4px 9px rgba(3, 7, 18, 0.05),
    0px 6px 15px rgba(3, 7, 18, 0.06),
    0px 10px 24px rgba(3, 7, 18, 0.08);

}

.april-simulation .story-content{
  margin:80px 0;
}

.only-april-fool.april-simulation .bubble,
.only-april-fool.april-administrative .bubble{
  position:absolute;
  bottom:0;
  margin:0;

}

.april-simulation div.character-set,
.april-administrative div.character-set{
  position: absolute;
  height: 95%;
  margin: 0 auto;
  z-index: 50;
  padding: 20px 0 0 0;
  box-sizing: border-box;
  bottom: 0;
}

.april-simulation div.character-set img,
.april-administrative div.character-set img{
  height: 100%;

}

.only-april-fool.april-simulation .char-etc,
.only-april-fool.april-simulation .april-char-name{
  position:relative;
  bottom: 100px;
  font-size:20px;
  width:100%;
  padding-left:15px;
  color:white;
  z-index:60;
  font-family: 'GangwonEdu_OTFBoldA';

}

.only-april-fool.april-simulation .april-select{
  position:absolute;
  border-radius: 0 !important;
  color:white;
  width:100%;
  /* height:130px; */
  top: 50%;
  transform: translateY(-50%);
  font-size:20px;
  text-align:left;
  z-index: 50;
  padding-left:30px;
  box-sizing: border-box;
}

.april-select button{
  padding:15px 0;
}

.only-april-fool.april-simulation [class^="bubble aporia-staff"] .char-script,
.only-april-fool.april-simulation .april-monologue{
  position:absolute;
  bottom:0;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 10%);
  color:white;
  width:100%;
  height:130px;
  font-size:20px;
  text-align:left;
  z-index: 50;
  padding:25px 15px 15px 35px;
  box-sizing: border-box;
  font-family: 'GangwonEdu_OTFBoldA';  
}

.only-april-fool.april-simulation .april-select button{
  /* display: block; */
  text-align: left;
  width:85%;
  font-family: 'GangwonEdu_OTFBoldA';
  color:black;
}
.april-administrative .monologue,
.april-administrative figure,
.april-administrative .bubble{
  position:absolute;
  bottom:0;
}

.april-administrative .bubble{
  width:99%;
  z-index:80;
}
.april-administrative .bubble .char-etc,
.april-administrative .bubble .april-char-name{
  position:absolute;
  display: inline-block;
  border:2px solid rgba(136, 136, 136, 0.6);
  outline:2px solid rgba(255, 255, 255, 0.6);
  background-color: rgba(28, 58, 196, 0.7);
  color:white;
  padding:0 5px;
  border-radius:5px;
  top: -25px;
  font-family: 'Galmuri11';
}

.april-administrative .monologue,
.april-administrative .bubble .char-script{
  display: block;
  width:100%;
  height: 80px;
  margin:0 auto 2px auto;
  background-color:rgba(0, 0, 0, 0.6);
  border:2px solid rgba(136, 136, 136, 0.6);
  outline:2px solid rgba(255, 255, 255, 0.6);
  border-radius:5px;
  color:white;
  text-align: left;
  /* font-size: 20px; */
  font-size: clamp(16px, 4vw, 23px);
  font-family: 'Galmuri11';
  padding:6px;
}
.april-watchdog .image-wrap{
  height:500px;
}

.april-watchdog .scene-image{
  position:relative;
}

.april-watchdog .character-set{
  display:flex;
  position:relative;
  z-index: 50;
  align-items: baseline;
  justify-content: center;
  height:100%;
}
.april-watchdog .character-set img{
  max-height: 90%;
}
.april-watchdog .scene-image .bg{
  position:absolute;
  transition: opacity 0.5s ease;
}

.april-watchdog .opacity-zero{
  /* position:absolute; */
  opacity:0;
}


.april-watchdog .bubble{
  position:absolute;
}

.april-st div.character-set{
  display:flex;
  justify-content: center;
  align-items: flex-end;
  position:absolute;
  z-index:50;
  width:100%;
}

.april-st div.character-set img{
  height: auto;     /* ✅ 원래 비율 유지 */
  display: block;
  object-fit: contain; /* 필요 시 사용 */
}

.april-st .april-char-name,
.april-st .char-etc{
  position:relative;
  z-index:90;
}

.only-april-fool.april-st .bubble .char-script,
.only-april-fool.april-st .monologue{
  width:100%;
  position: relative;
  z-index:60;
  min-height:150px;
  font-size: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 241, 241, 0.95));
  border: 2px solid #e0e0e0;
  border-radius: 16px;
  padding: 12px 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  text-align: unset;
}


.april-suoh div.april-char-name::before{
    content: '';
    background-image:url('images/april_suoh.png');
    display: inline-block;
    aspect-ratio: 271 / 474;
    width:200px;
    background-size: contain;
    background-repeat: no-repeat;
}

.bubble.april-rare{
  display: block;
  width: 100%;
  max-width: unset;
}

.april-rare .char-name::before{
  transition:none;
  transform: scale(1);
  position: relative;
  transform-origin: center center;
}
.april-rare.to-bigger .char-name{
  text-align: center;

}
.april-rare.to-bigger .char-name::before{
  transition: transform 1s linear;
  transform: scale(8);
}

.april-rare.to-bigger-fadeout .char-name::before{
  transition: opacity 0.7s ease;
  opacity:0;
}

/* tap indicator ~ 교제부 선택지 */
.april-main .tap-indicator,
.april-watchdog .tap-indicator,
.april-st .tap-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 1rem;
  color:white;
  background-color:black;
  animation: floatDown 1s ease-in-out infinite;
  z-index: 80;
  pointer-events: none;
}

.april-simulation .tap-indicator {
  width: 16px;
  height: 16px;
  background: #ff96c0;
  transform: rotate(-45deg);
  z-index:100;
  animation: pulse 1.2s ease-in-out infinite;
  position:absolute;
  bottom: 20px;
  right: 20px;
  box-shadow: 0 0 8px rgba(255, 62, 158, 0.9);
}

.april-simulation .tap-indicator::before,
.april-simulation .tap-indicator::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: #ff96c0;
  border-radius: 50%;
}

.april-simulation .tap-indicator::before {
  top: -8px;
  left: 0;
}

.april-simulation .tap-indicator::after {
  left: 8px;
  top: 0;
}

.april-simulation .choice {
  padding: 10px;
  border: 1px solid #ccc;
  margin: 6px 0;
  background: white;
  /* transition: background 0.2s ease; */
  user-select: none;
  transition: opacity 0.3s ease;
}

.april-simulation .choice.selected {
  background: #ffe0f0; /* 커서 강조 */
  border-color: hotpink;
}

.april-simulation .choice.shake {
  animation: shake 0.3s ease;
}

.april-administrative .tap-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 1rem;
  color:white;
  animation: floatRight 1s ease-in-out infinite;
  z-index: 100;
  pointer-events: none;
  font-family: 'Galmuri11';
}

@keyframes floatDown {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.7; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes floatRight {
  0% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(4px); opacity: 0.7; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes pulse {
  0%, 100% {
    filter: brightness(1.0);
  }
  50% {
    filter: brightness(1.2);
  }
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}
.fade-out-down {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.fade-hidden {
  display: none;
}


/*--------- 만우절 끝 ---------*/

.shout{
  font-style: italic;
  font-size:1.2em; 
}
.shout.x2{
  font-size: 1.6em;
}

.small{
  font-size:0.8em;
}

button.switch-design {
  margin:0 auto;
  width: 100%;
  min-width: 100px;
  height: 45px;
  padding: 8px;
  border-radius: 5px;
  box-shadow: 0px 0px 23px -20px;
  cursor: pointer;
  background-color:  #ededed;
  transition: all 0.2s ease-in-out 0ms;
  user-select: none;
}

button.switch-design:hover {
  background-color: #fefefe;
  box-shadow: 0px 0px 20px -18px;
}

button.switch-design:active {
  transform: scale(0.95);
}

div.go-next-episode{
  padding-top: 20px;
  border-top: 1px solid;
  /* margin-top:30px; */
}
div.not-exist-episode{
  color:gray;
  font-size: 0.9em;
  text-align: center;
}

div.main-story-banner{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 15px;
}

div.main-story-banner figure{
  width:100%;
}

.calling{
  font-family: 'RIDIBatang';
  /* font-size: 1.05em; */
}
/* .rare .char-script{
  font-family: 'TTHakgyoansimKkokkomaR';
  font-size:1.2em;
} */

ul.custom_link{
  margin-bottom:20px;
}
ruby{
  white-space: nowrap;
}

div.puzzle{
  padding-top:50px;
}

/*태그 글 역순*/
#tt-body-tag.post-type-text .post-item:first-child a{
  padding-top:30px;

}

#tt-body-tag.post-type-text .post-item:last-child a{
  padding-top:0;

}

#tt-body-tag.post-type-text #content div.inner{
  display:flex;
  flex-direction: column-reverse;
}

div.episode-note{
  color:gray;
  font-size: 0.9em;
  text-align: justify;
}

div.game-context.magazine .story-content{
  text-align: justify;
  /* font-family: 'RIDIBatang'; */
  padding:0 12px;
  text-indent: 15px;
}

div.game-context.magazine p{
  width:100%;
  line-height: 2 !important;
}

/* div.event-img-parent{
  position:relative;
  width:100%;
  height:800px;
}

div.event-img-child{
    position: absolute;
    width: 200%;
    left: 50%;
    top:-50px;
    transform: translateX(-50%);
    box-sizing:border-box;
}

@media (max-width: 1200px) {
  .event-img-child {
      max-width: 100vw; 
      left: 0;
  }
} */

/*이벤트 일람 페이지 관련*/
div.inner:has(div.width-860){
  max-width:860px !important;
}

div.inner:has(div.width-1200){
  max-width:1200px !important;
}

div.event-list-item{
  margin-bottom:50px;
}

div.event-list-item h4{
  display:flex;
  align-items: center;
}

ul.event-char-list span.char-icon{
  display: inline-block;
  width: 5px;
  padding-left: 8px;
}

div.event-list-item td:has(img){
  position:relative;
  padding: 0 !important;
} 

div.event-img-wrap{
  aspect-ratio: 16/9;
  object-fit: cover;
  overflow:hidden; 
  box-sizing:border-box;
  position:relative;
  }

div.event-img-wrap img{
  height:100%;
  transition: 0.4s;
  position:absolute;
}
div.event-img-wrap img:not(.showing){
  opacity:0;
}

div.event-img-wrap img.showing{
  opacity:1;
}

div.event-list-item button{
  position:absolute;
  width:3.5em;
  height:100%;
  z-index:10;
}
div.event-list-item button.img-prev-button{
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), transparent);
}
div.event-list-item button.img-next-button{
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.6), transparent);
  right:0;
}


div.event-list-item button.img-prev-button::before{
  content:'';
  position: absolute;
  border-top: 2px solid #eee;
  border-left: 2px solid #eee;
  top: 50%; 
  width: 25px;
  height: 25px;
  transform:rotate(-45deg) translateY(-50%);
  left:30px;
}

div.event-list-item button.img-next-button::before{
  content:'';
  position: absolute;
  border-top: 2px solid #eee;
  border-right: 2px solid #eee;
  top: 50%;
  width: 25px;
  height: 25px;
  transform:rotate(45deg) translateY(-50%);
  right:30px;
}

/**********카드스토리 페이지 css**********/
div.char-story-wrap table{
  margin-top:40px;
  border-collapse: separate;
}

div.char-story-wrap h1{
  text-align: center;
  font-size:36px;
}

table.team-list{
  text-align: center;
  width: 100%;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}
table.team-list tr.tr-team td{
  cursor: pointer;
  font-size:0.8rem !important;
}

table.team-list td.selected{
  font-weight: bold;
  text-decoration: underline;
  color: #FD1493;
}

.hidden{ 
  display:none;
}

/*차수 테이블*/
div.chasu-data div.table-wrap{
  overflow-x: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE10+ */
}

div.chasu-data div.table-wrap::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

table.table-chasu{
  width:auto;
  border-collapse: collapse;
  table-layout: fixed;
}

table.table-chasu caption{
  color:dimgray;
  margin:10px 0;
}

table.table-chasu td:has(img){
  padding:0 !important;
}
table.table-chasu td{
  border:1px solid lightgray;
  padding:4px !important;
  font-size:12px !important;
}

table.table-chasu td[rowspan="2"]{
  min-width:42px;
  white-space: nowrap;
}

table.table-chasu td[rowspan="6"],
table.table-chasu td[rowspan="8"]{
  width:10px;
  color:white;
  font-weight: bold;
  text-align: center;
}

div.event-list h2 span{
  font-size:15px;
  color:dimgray;

}

/*상단 pw 간이공지 관련*/

.about-pw {
  display: inline-block;
  user-select: none;
  background-color: #f7f7f7;
  color: #333;
  border-radius: 20px;
  border: 1px solid #f0f0f0;
}

label.pw-title{
  padding: 15px 25px;
  display: block;
  font-weight: bold;

}

label.pw-title::before{
  content:'🔐 ';
}

.pw-desc {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  margin:0 25px;
}

.pw-desc p:last-child{
  padding-bottom: 15px;
}
.pw-desc p{
  padding-left:10px;
  padding-top:5px;
  line-height: 1.5;
  text-indent: -7px;
  text-align: justify;
}

.pw-desc p::before{
  content:'•';
}

/* 체크박스는 숨김 */
input#pw-toggle[type="checkbox"] {
  display: none;
}

/* 체크되면 desc 보여줌 */
.about-pw:has(input:checked) .pw-desc {
  max-height: 300px;
  opacity: 1;
}

input#pw-toggle:checked + label::before {
  content: "🔑 ";
}

span.ellipsis-special{
  font-family: 'RIDIBatang';
}

div.game-context:not(.only-april-fool) img:not(figure img){
  margin-top:20px;
}

div.letter-box {
  position: relative;
  display: inline-block; /* 이미지 크기에 맞춰서 감싸게 */
}

div.letter-box::before,
div.letter-box::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 7%; /* 덮는 레터박스 높이 (조절 가능) */
  background: black;
  z-index: 1;
  pointer-events: none; /* 이미지 클릭 막지 않게 */
}

div.letter-box::before {
  top: 0;
}

div.letter-box::after {
  bottom: 0;
}

div.letter-box img {
  display: block;
}

img.bg-img{
  max-width: 100%;
  width:100%;
}