@charset "UTF-8";
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
@font-face {
  font-family: "NanumSquareRound";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

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

.prevent_select {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.material-symbols-outlined{
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24
}

.clearfix {
  content: "";
  clear: both;
  display: table;
}

/*
font-family: 'NanumSquareNeoLight';
font-family: 'NanumSquareNeo';
font-family: 'NanumSquareNeoBold';
font-family: 'NanumSquareNeoExtraBold';
font-family: 'NanumSquareNeoHeavy';
*/
html {
  margin: 0;
  padding: 0px;
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  /* 2 */
  font-family: 'NanumSquareNeo';
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

pre {
  /* 1 */
  font-size: 1em;
  /* 2 */
}

a {
  color: inherit;
  background-color: transparent;
  text-decoration: none;
}

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: "D2Coding";
  /* 1 */
  font-size: 1em;
  /* 2 */
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
  outline: none;
}

button,
input {
  /* 1 */
  overflow: visible;
}

button,
select {
  /* 1 */
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/* common */
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}
figure {
  margin: 0;
  
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.blind {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  width: 1px;
  height: 1px;
}

/* html */
html,
body {
  box-sizing: border-box;
  position: relative;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  color: #0d0e0d;
  background: radial-gradient(circle, rgba(232,228,219,1) 0%, rgb(239, 243, 242) 100%);
  padding: 0px;
  margin: 0px;
}
  

*,
*:before,
*:after {
  box-sizing: inherit;
}

#wrap {
  position: relative;
  overflow: hidden;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Chrome, Whale, Edge */

/* 스크롤바 전체 기본 꾸미기 */
::-webkit-scrollbar {
	background-color: transparent;
}

/* 스크롤바 막대 꾸미기 */
::-webkit-scrollbar-thumb {
  background-color: white;
}

/* 스크롤바 트랙 꾸미기 */
::-webkit-scrollbar {
	width: 5px;
  
}
::-webkit-scrollbar-corner{
  background: transparent;
}
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:start:increment{
  display: block;
  height: 10px;
}


/* header */
.header {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 10px 10px #61667112;
}

.header .inner-header {
  height: 20px;
  box-sizing: border-box;
  max-width: 1520px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #5e645e;
  padding-left: 30px;
  padding-right: 30px;
  
}

.header .title-logo {
  width: 257px;
  font-size: 1.1em;
  font-family: 'NanumSquareNeoExtraBold';
  font-weight: normal;
  color: #9ea19e;
}

.header .area-gnb ul{
  display: flex;
}
.header ul li {
  position: relative;
  margin: 0px 10px 0px 10px;
}
.header ul li a {
  padding: 3px;
  transition-duration: 0.3s;
  font-size: 1.7em;
}
.header ul li a:hover {
  background-color: #ffffffa2;
  padding: 3px;
  border-radius: 4px;
  box-shadow: 1px 1px 10px 10px #61667112;
  transform: scale(1.08);
}
.header ul li::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 3px;
  right: -10px;
  top: 16px;
  background-color: #9ea19e;
  border-radius: 3px;
}
.header ul li:last-child::after {
  background-color: transparent;
}
.util .search{
  width: 257px;
  margin-right: 3px;
}
.util .search input{
  background-color: transparent;
  position: relative;
  width: 100%;
  border: none;
  border-bottom: 1px solid #9ea19e;
  padding: 5px;
  
}

#container {
  position: fixed;
  width: 100vw;
  height: calc(100vh - 160px);
  top: 90px;
  display: flex;
  justify-content: center;
}
#container .main {
  width: 100%;
  max-width: 1520px;
  display: flex;
  height: 100%;
}


.area-main{
  position: relative;
  width: calc(1520px - 640px);
  padding: 40px;
  overflow: scroll;
  background-color: #ffffff;
  box-shadow: 1px 1px 30px 10px #61667112;
  backdrop-filter: blur(20px);
  border-radius: 15px;
}


#footer {
  position: fixed;
  bottom: 0;
  height: 70px;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inner-footer {
  width: 1520px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5e645e;
}
.area-aside {
  width: 320px;
  height: calc(100vh - 140px);
  padding : 30px;
  overflow: scroll;
}

.area-aside::-webkit-scrollbar-thumb {
  display: none;
	background-color: transparent;
  }


.sidebar-block {
  margin-bottom: 30px;
  box-shadow: 0px 5px 20px 10px #61667112;
  border-radius: 7px;
  padding: 15px;
  overflow: hidden;
}
.sidebar-block:last-child{
  margin-bottom: 0;
}

.sidebar-title {
  margin-bottom: 12px;
}

.img-profile {
  height: 120px;
  width: 120px;
  border-radius: 100%;
  box-shadow: 0px 10px 20px 10px #61667112;
  background-size: cover;
  background-position: 50% 50%;
}

.text-profile {
  margin-top: 15px;
  margin-bottom: 10px;
  position: relative;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0px 10px 20px 10px #61667112;
}

.text-profile::after{
  position: absolute;
  margin-top: 4px;
  content: "";
  top: -13px;
  left: 20px;
  transform: skewX(-45deg) ;
  width: 0; 
  height: 0; 
  border-right: 7px solid transparent;
  border-bottom: 11px solid white;
  border-left: 7px solid transparent;
  border-radius: 3px;
}

.blogger-profile {
  padding: 15px 15px 0px 15px;
  font-weight: bold;
  margin: 0px;
}
.desc-profile {
  padding: 4px 15px 15px 15px;
  margin: 0px;
}

.sidebar-banner li{
  position: relative;
  background-color: white;
  border-radius: 5px;
  margin-bottom: 13px;
  box-shadow: 0px 10px 20px 10px #61667112;
  display: flex;
  gap: 10px;
  justify-content: start;
  align-items: center;
  transition-duration: 0.2s;
  cursor: pointer;
  overflow: hidden;
  height: 56px;
}
.sidebar-banner li:hover{
  transform: scale(1.08);
  box-shadow: 0px 10px 20px 10px #61667124;
}
.sidebar-banner li:hover .on-cov{
  backdrop-filter: blur(0px);
  transform: scale(1);
}
.sidebar-banner li:hover .cov{
  width: 100%;
  height: 100%;
  background-position-x: 90px;
  background-size: 60%;
}
.sidebar-banner li .after{
  z-index: 5;
  position: absolute;
  width: 30px;
  height: 30px;
  right: 0px;
  top: 5px;
}
.sidebar-banner li:last-child{
  margin-bottom: 0;
}
.sidebar-banner li .banner-desc{
  display: block;
  color: #626462;
  margin-top: 4px;
  font-size: 0.9em;
}
.profile-btn-group{
  margin-bottom: 26px;
  display: flex;
  justify-content: end;
  gap: 10px;
  padding-left: 3px;
  padding-right: 3px;
  align-items: center;
}
.sidebar-banner li .cov{
  position: absolute;
  right: 0px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-x: 40px;
  background-position-y: 50%;
  transition-duration: 0.3s;
}
.sidebar-banner li .on-cov{
  display: inline-block;
  height: 100%;
  width: 100%;
  z-index: 4;
  padding: 10px;
  backdrop-filter: blur(2px);
  background-color: linear-gradient(90deg, white, transparent);
  transition-duration: 0.4s;
}

.sidebar-banner .banner-group-title {
  margin-bottom: 7px;
  box-shadow: 0px 5px 20px 10px #61667112;
  padding: 15px;
  border-radius: 7px;
}
.sidebar-banner .banner-dividor {
  height: 1px;
  width: 100%;
  margin-bottom: 5px;
}


.btn-g {
  border: none;
  background-color: white;
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
}

.btn_subscription{
  border: none;
  background-color: white;
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
}

.tt_category .link_tit {
  display: block;
  margin-bottom: 14px;
  color: #626462;
}
.tt_category .category_list li {
  display: flex;
  align-items: center;
  font-family: "D2Coding";  
}
.tt_category .category_dividor {
  width: 100%;
  border-top: 1px dashed #0d0e0d;
  margin-top: 10px;
  margin-bottom: 10px;
}

.tt_category ul a{
  cursor: pointer;
  padding: 5px;
}
.tt_category ul a:hover{
  text-decoration: underline;  
}
.tt_category ul li span {
  transition-duration: 0.3s;
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24 

}

.tt_category ul li:hover span{
 font-variation-settings:
  'FILL' 1,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24 
}


.article-header .box-meta {
  border-bottom: 1px dashed #0d0e0d;
  padding-bottom: 14px;
}
.box-meta-in{
  display: flex;
  align-items: start;
  gap: 4px;
  font-size: 1.3em;
  font-family: 'D2Coding';
}
.box-meta-in p{
  margin: 0;
  padding: 0;
}

.box-meta-in .category-arrow{
  margin-left: 10px;
  color: #9ea19e;
  font-size: 1em;
}
.box-meta .title-article {
  background-color: #ffffffa2;
  border-bottom: 1px solid #9ea19e;
  display: inline-block;
  margin-top: 25px;
  margin-bottom: 20px;
  padding: 4px 25px 4px 5px;
  
}
.box-info .writer {
  padding-left: 4px;
  padding-right: 14px;
  margin-right: 10px;
}
.box-info .date {
  font-style: italic;
}

.article-view {
  padding-top: 30px;
}

.category-banner-wrp {
  margin-bottom: 12px;
}
.category-banner-inner{
  display: flex;
  align-items: center;
  gap: 10px;
}
.category-banner{
  width: 40px;
  height: 40px;
  background-size: cover;
  border-radius: 100%;
  box-shadow: 0px 0px 4px 4px #61667112;
  background-position: 50% 50%;
}

.area-common .title-search{
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #626462;
  font-family: "D2Coding";
}
.area-common .title-search .material-symbols-outlined{
  margin-right: 4px;
}
.area-common .title-search b{
  padding-top: 2px;
  margin-right: 20px;
}
.area-common .title-search .category-arrow{
  margin-left: 12px;
  color: #9ea19e;
  font-size: 1.08em;
}
.area-common .title-search span:not(:first-child){
  color: #9ea19e;
}

.area-common b,
.area-common h2{
  margin: 0;
  font-size: 1.2em;
  font-weight: normal;
}

article .thumbnail {
  padding:0;
  margin: 0;
  border-radius: 4px;
  width: 240px;
  height: 100%;
  margin-left: 20px;
  background-size: cover;
  background-position: 50% 50%;
}
article .thumbnail img {
  display: none;
}
.article-type-common {
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #0d0e0d;
}
.article-type-common .article-main-content {
  display: flex;
  margin-top: 20px;
  margin-bottom: 15px;
}
.article-type-common .article-content .summary{
  margin: 0;
  font-weight: lighter;
  line-height: 130%;
}
.article-type-common .box-meta {
  display: flex;
  align-items: center;
  color: #5e645e;
}
.article-type-common .box-meta a {
  margin-left: 4px;
  margin-right: 20px;
  font-family: "D2Coding";
}
.article-type-common .box-meta a:hover{
text-decoration: underline;
}
.article-type-common .box-meta .reply span {
  margin-left: 8px;
  
  border-radius: 4px;
  color: rgb(139, 92, 92);
}

.article-footer {
  border-top: 1px solid #0d0e0d;
  margin-top: 40px;
  padding-top: 20px;
}
.article-footer .article-page-title {
  display: flex;
  align-items: center;
  font-family: "D2Coding";
}
.article-footer .article-page-title span,
.article-footer .title-footer
{
  font-style: normal;
  font-size: medium;
  margin-right: 4px;
}
.article-footer .article-page ul{
  margin-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  border-bottom: 1px dashed #0d0e0d;
}
.article-footer .article-page ul li{
  margin-bottom: 10px;
}  
.article-footer .article-page ul li span {
  color: #9ea19e;
  font-size: 0.8em;
}
.article-footer .article-page ul li strong{
  font-weight: normal;
  font-size: 1em;
  margin-left: 20px;
}
.article-footer .article-page ul li a:hover{
  text-decoration: underline;
}


.area-paging {
  display: flex;
  gap: 20px;
  margin-top: 30px;
  margin-bottom: 40px;
  justify-content: center;
}
.area-paging a {
  color: #626462;
  position: relative;
  padding: 3px;
}
.area-paging a:hover::after{
  position: absolute;
  top: -4px;
  left: calc(50% - 3px);
  content: "";
  border-radius: 100%;
  width: 4px;
  height: 4px;
  background-color: #626462;
}
.area-paging .selected{
  color: #0d0e0d;
}
.area-paging .selected::after {
  position: absolute;
  top: -4px;
  left: calc(50% - 3px);
  content: "";
  border-radius: 100%;
  width: 4px;
  height: 4px;
  background-color: #0d0e0d;
}

.area-paging-more {
  display: flex;
  justify-content: center;
  
}

.area-paging-more a{
  padding: 4px 12px 4px 12px;
  background-color: #ffffffa2;
  border-radius: 4px;
  color: #5e645e;
  
}
.area-paging-more a:hover{
  text-decoration: underline;
}

.box-no-search {
  padding-top: 10px;
  color: #626462;
}

.plugin-sns-cover,
.list-recent-cover{
  display: flex;
  width: calc(200% + 30px);
}
.plugin-sns:first-child,
.list-recent:first-child{
  margin-right: 30px;
}
.plugin-sns-cover,
.list-recent-cover {
  transition-duration: 0.2s;
  transform: translateX(0px);
}
.plugin-sns {
  width: 100%;
}
.push-left {
  transform: translateX(calc(-1 * calc(50% + 15px)));
}

.list-sidebar li {
  display: flex;
  align-items: start;
}
.list-recent {
  width: 100%
}

.list-sidebar li,
.list-recent li {
  
  border-bottom: 1px dashed #0d0e0d;
  padding-bottom: 7px;
  padding-top: 12px;
  transition-duration: 0.2s;
}
.list-sidebar li:hover strong,
.list-recent li:hover strong{
  text-decoration: underline;
}
.list-sidebar li:last-child,
.list-recent li:last-child{
  border-bottom: none;
  padding-bottom: 0px;
}
.box-reply a {
  margin-left: 5px;
}
.list-sidebar strong {
  
  padding-top: 3px;
  display: block;
}

.list-sidebar p{
  margin: 0px;
 margin-top: 7px;
 color: #5e645e;
 font-size: 0.9em; 
}

.list-recent p {
  height: 50px;
  border-radius: 3px;
  background-position: 50% 50%;
  background-size: cover;
  margin: 0;
  margin-bottom: 5px;
}

.list-recent .box-recent strong{
  display: block;
  margin-bottom: 10px;
}

.list-recent .box-recent span {
  font-size: 0.9em;
  display: block;
  width: 100%;
  color: #9ea19e;
}

.tab-sns,
.tab-recent {
  display: flex;
  justify-content: space-evenly;
  box-shadow: 1px 1px 10px 10px #61667112;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 7px;
}
.tab-sns li,
.tab-recent li {
  padding: 5px;
  width: 100%;
  text-align: center;
  color: #9ea19e;
  cursor: pointer;
  transition-duration: 0.3s;
}
.tab-sns li:hover,
.tab-recent li:hover{
  color: #0d0e0d;
  background-color: #ffffffa2;
}

.tab-sns li:first-child,
.tab-recent li:first-child{
  border-right: 1px dashed #626462;
}
.tab-sns .on,
.tab-recent .on{
  background-color: #ffffffa2;
  color: #0d0e0d;
}

.article-view p {
  line-height: 150%;
}
.article-view img{
  border-radius: 5px;
  border: 1px solid #d5d5d5;
  overflow: hidden;
}
.article-view .imageblock{
  padding-top: 14px;
  padding-bottom: 14px;
}
.article-view ul{
  margin-left: 15px;
  
}

.article-tag {
  padding-bottom: 20px;
  border-bottom: 1px dashed #0d0e0d;
  margin-bottom: 20px;
}
.article-tag h3 {
  margin: 0;
  margin-bottom: 10px;
}


.article-related {
  padding-top: 20px;
  padding-bottom: 20px;
 
}
.article-related h3 {
  margin: 0;
  margin-bottom: 10px;
  
}

.article-related ul {
  display: flex;
  gap: 3%;
}

.article-related .item-related {
  width: 23%;
  max-height: 300px;
  border: 1px solid black;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.article-related .item-related:hover .box_content strong {
  border-bottom: 1px solid black;
}
.article-related .item-related span {
  display: block;
  width: 100%;
  height: 180px;
  background-position: 50% 50%;
  background-size: 180%;
  border-bottom: 1px dashed black;
}

.article-related .item-related .box_content 
{
  background: radial-gradient(circle, rgba(232, 228, 219, 1) 0%, rgb(239, 243, 242) 100%);
  padding: 10px;
}
.article-related .item-related .box_content strong
{
  font-weight: normal;
  border-bottom: 1px solid #9ea19e;
  margin-bottom: 10px;
}
.article-related .item-related .box_content .date
{
  font-weight: normal;
  margin-top: 10px;
  color: #5e645e;
}
.postbtn_ccl {
  margin-left: 10px;
}
.tt_box_namecard {
  border-radius: 4px;
  background: radial-gradient(circle, rgba(232, 228, 219, 1) 0%, rgb(239, 243, 242) 100%);;
  min-height:0;
  padding: 30px;
  
  margin-bottom: 30px;
}
.tt_box_namecard .tt_cont {
  padding: 0px;
}
.tt_box_namecard .tt_wrap_thumb{
  margin: 0px;
}
.article-tag .box-tag a,
.box_tag a {
  display: inline-block;
  padding: 4px;
  background-color: #ffffffa2;
  color: #626462;
  border-radius: 3px;
  cursor: pointer;
  transition-duration: 0.2s;
  margin-bottom: 5px;
}
.article-tag .box-tag a:hover,
.box_tag a:hover {
  background-color: white;
  color: #0d0e0d;
  text-decoration: underline;
}
.list-archive {
  display: flex;
  align-items: center;

}
.list-archive a {
  padding-top: 4px;
  margin-left: 5px;
  color:#626462;
  cursor: pointer;
}
.list-archive a:hover{
  color: #0d0e0d;
  text-decoration: underline;
}
.another_category h4,
.another_category h4 a {
  display: flex;
  align-items: center;
}
.another_category h4 a span {
  font-size: 1.3em;
}

#tt-body-page blockquote[data-ke-style='style3'],
.article-view blockquote[data-ke-style='style3'] {
  padding: 10px;
  color: #526752;
  border-color: #5e645e;
  border-radius: 4px;
  box-shadow: 0px 0px 10px 5px #61667112;
  background-color: transparent;
}

.mobile-close {
  padding: 10px;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 999;
}
.mobile-back {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 40;
  display: none;
}
/**-------------------------------------
*						media query - pc
-------------------------------------**/
@media screen and (min-width: 1061px) {
  /* wrap-right */
  .mobile-header{
    display: none;
  }
  .mobile-side {
    display: none;
  }
   .aside2{
    display: block;  
  }
  .pc-header{
    display: flex;
  }

  .mobile-open,
  .mobile-close{
    display: none;
  }
}

.mobile-header {
  padding-left: 10px;
  padding-right: 10px;
}
.mobile-header .inner-header{
  padding: 0;
}
.mobile-open {
  cursor: pointer;

}

.mobile-side {
  transform: translateX(-320px);
  transition-duration: 0.3s;
}
.mobile-side-open{
  transform: translateX(0px);
}

/* ----- media query - tab ----- */
@media screen and (max-width: 1060px) {
  .mobile-header{
    display: none;
  }
  .mobile-side {
    display: none;
  }
  .aside2{
    display: none;  
  }
  .pc-header{
    display: flex;
  }
  .mobile-open,
  .mobile-close {
    display: none;
  }
}

/* // area_paging */
/* media query - only mobile */
@media screen and (max-width: 768px) {
  .mobile-header{
    position: fixed;
    display: flex;
    height: 34px;
    box-shadow: none;
  }
  .pc-header{
    display: none;
  }

  .mobile-side {
    z-index: 1000;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    background-color: white;
    backdrop-filter: blur(5px);
    box-shadow: 0px 0px 10px 10px #61667112;
  }
  .aside1{
    display:none;
  }
  .aside2{
    display: none;  
  }
  .mobile-open,
  .mobile-close{
    display: flex;
  }
  #footer {
    display: none;
  }
  #container {
    height: calc(100vh - 50px);
    top: 34px;
  }
  .article-main-content{
    flex-direction: column-reverse;
  }
  .area-main {
    padding : 15px;
    padding-top: 20px;
  }
  .article-main-content .thumbnail {
    height: 120px;
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px;

  }
  .article-related ul{
    flex-wrap: wrap;
  }
  .article-related .item-related
  {
    height: 240px;
    width: 48%;
    margin-bottom: 10px;
  }
  .article-related .item-related a
  {
    height: 100%;
  }
  .article-related .item-related span
  {
    height: 120px;
    background-size: 100%;
  }
}