@charset "UTF-8";


:root {
    --main:#42D6F2; /*기본포인트컬러*/
    --sub:#42D6F2; /*카테고리 배경색*/
    --default:#000000; /*카테고리 기본글색상*/
    --width:1000px;
    --fontsize:14px;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.animated {
  animation-play-state: paused !important; /* 애니메이션 일시정지 */
}

body.intro-complete .animated {
  opacity: 1;
  animation-play-state: running !important; /* 애니메이션 실행 */
}

/* 기본 시스템 커서 숨기기 */
  body, a, img, p, span, h1, h2, h3, h4, h5, h6, div, li, td, th {
    cursor: none;
  }
  .custom-cursor {
    position: fixed; /* 위치를 고정으로 변경 */
    pointer-events: none; /* 마우스 이벤트 방해 방지 */
    z-index: 100000; /* z-index를 높여서 대부분의 팝업 위에 보이도록 설정 */
    display: none; /* 초기 상태에서는 숨겨진 상태로 설정 */
    transition: none !important;
  }

  .custom-cursor * {transition: none !important;}
  .custom-cursor {max-width: 50px !important;}


.toolbar_rb {display: none !important;}

#intro {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	display: block;
	background: #152A45;
	z-index: 10000;
	text-align: center;
}

#intro > .loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
	z-index: 100;
}

#intro > .loading img {max-width: 300px;}

.banner {
    position: fixed;
    left:20px;
    bottom:80px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    display: none;
}

.banner_icon {
    background-color: white;
    border-radius: 50%;
    padding:8px;
    display: inline-block;
    box-shadow: 0 0 5px #000;
    position:fixed;
    left : 20px;
    bottom: 20px;
    cursor: pointer;
}

.banner_icon:hover {background-color: #0059B5;}

.banner_icon span {color:#0059B5; cursor: pointer;}

.banner_icon:hover span {color:#fff;}


/*리셋*/

html {overflow-y:auto; }
body {margin:0;padding:0;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
ul, li {margin:0;padding:0;list-style:none}
legend {display: none;}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;}
button {cursor:pointer}
textarea, select {font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
pre {overflow-x:scroll;}
a:link, a:visited {text-decoration:none}
a:hover, a:focus, a:active {text-decoration:none}

ul,li { margin: 0; padding: 0; }
i,sup,em { font-style: normal; }

label { cursor: pointer; }

img { max-width: 100%; vertical-align: middle; }
table { width: 100%; }

.tt_box_namecard {display: none !important;}

/*//리셋*/

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}
*::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}

*::-webkit-scrollbar-track:hover {
  background-color: transparent;
}

*::-webkit-scrollbar-track:active {
  background-color: transparent;
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--main);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--main);
  cursor: pointer;
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--main);
}

/*기본*/
 body, button, input, select, table, textarea {
    font-family: 'Pretendard';
  }
  body  {line-height:1.5em;font-size: var(--fontsize);}
  h1 {font-size: 35px; line-height: 110%;}
  h2, h2[data-ke-size] {font-size: 30px; line-height: 110%;}
  h3, h3[data-ke-size] {font-size: 24px; line-height: 110%;}
  h4, h4[data-ke-size] {font-size: 20px; line-height: 110%;}


  @media all and (min-width:1025px)  {
	.only-pc {}
	.only-ta {display:none !important;}
	.only-mo {display:none !important;}

	.not-pc {display:none !important;}
	.not-ta {}
	.not-mo {}
}

@media all and (max-width:1024px) and (min-width:1025px)  {
	.only-pc {display:none !important;}
	.only-ta {}
	.only-mo {display:none !important;}

	.not-pc {}
	.not-ta {display:none !important;}
	.not-mo {}
}
@media all and (max-width:1025px)  {
	.only-pc {display:none !important;}
	.only-ta {display:none !important;}
	.only-mo {}

	.not-pc {}
	.not-ta {}
	.not-mo {display:none !important;}
}

*:not(.head_img *) {transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease;}


.boxTheme {display:block; position:relative; padding:50px; box-sizing:border-box;
    background: 
        repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.3) 0px,
        rgba(255, 255, 255, 0.3) 1px,
        transparent 1px,
        transparent 6px
        ),
        rgba(207, 247, 255, 0.85);
     border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.30); backdrop-filter: blur(5px);
    margin: 50px 0; line-height: 180%;
}


.head_img div {position: fixed; pointer-events: none; z-index: -1;}
.head_img .top {top:0;}
.head_img .bottom {bottom:0;}
.head_img .left {left:0;}
.head_img .right {right:0;}
.head_img .center {left:0; right:0; margin:0 auto; text-align: center;}
.head_img .objectfit img {height: 100vh; object-fit: cover;}
.head_img .centerfit img {width: 100%; object-fit: cover;}

.head_img .l-1 img {
    width: 52.375rem;
    height: 53rem;
}

.head_img .l-2 img {
    width: 23.125rem;
    height: 47.75rem;
}

.head_img .l-2 {left:14.3rem; top:12.8rem;}

.head_img .l-3 img {
    width: 53.6875rem;
    height: 36.375rem;
}

.head_img .l-4 img {
    width: 38.25rem;
    height: 54.5rem;
}
.head_img .l-4 {top:6.38rem;}

.head_img .l-5 img {
    width: 48.5625rem;
    height: 33.75rem;
}

.head_img .l-5 {top:14.4rem;}

.head_img .l-6 img {
    width: 50.75rem;
    height: 56.5rem;
}
.head_img .l-6 {left:1.38rem; top:2.63rem;}

.head_img .r-1 img {
    width: 52.5rem;
    height: 65.1875rem;
}


.head_img .r-2 img {
    width: 32.9375rem;
    height: 41.9375rem;
}

.head_img .r-2 {top:17.2rem; right:9.38rem;}

.head_img .r-3 img {
    width: 46.5rem;
    height: 31rem;
}

.head_img .r-4 img {
    width: 22.5625rem;
    height: 38.8125rem;
}

.head_img .r-4 {top:9.38rem}

.head_img .r-5 img {
    width: 34.4375rem;
    height: 39.75rem;
}

.head_img .r-6 img {
    width: 22.6875rem;
    height: 23.625rem;
}

.head_img .r-6 {top:21.1rem; right:28.5rem;}

.head_img .r-7 img {
    width: 5.5625rem;
    height: 5.5625rem;
}

.head_img .r-7 {bottom:5.56rem; right:31rem;}

.head_img .house {z-index: -1;}

.head_img .back_box {
    width: 18.9375rem;
    height: 7.1875rem;
    flex-shrink: 0;
    background: #CDFFF3;
    bottom:18.5rem;
    z-index: -4;
}

#footer2 {position: fixed; right:20px; bottom:20px; z-index: 3; font-size: 12px; color: white; }
#footer2 a:hover {color:white;}
#footer{clear:both; position: fixed; bottom:20px; left:20px; font-size:10px;}
#footer2 button {
    border:none;
    background: none;
    color:var(--main);
}

#footer2 button .material-symbols-outlined {font-size:16px;}


a:link, a:visited {color:var(--main);  }

.boxTheme .article a {color:var(--main); text-decoration: underline;}

.point {color: var(--main);}

#login_box {text-align: center;}

#body {max-width: var(--width); padding: 100px 0; margin:auto;}

.container_postbtn .btn_post .txt_like {display:none !important;}
.container_postbtn .btn_post .ico_like { margin: 3px 0 0 0 !important;}

.container_postbtn {justify-content: flex-end;}
.tt-box-thumb {display:none !important;}
.tt-box-total {text-align: right;}

.boxTheme .category a { font-size: 12px; color:#949494; border: 1px solid #949494; border-radius: 2em; padding:1px 15px; margin:10px 0; display: inline-block;}
.boxTheme .date {font-size: 10px; color:#949494; position: absolute; right:30px; top:60px;}
.boxTheme .title::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #BBB;
    margin: 10px 0 50px 0;
}

.tt_wrap_write,
.tt-area-reply {display: none; transition: none;}

.tt-box-total {display: none;}

.toggle_comment {display: flex;justify-content: flex-end;}
.toggle_comment .material-symbols-outlined {color:#bbb; font-size: 16px !important;
 border: 1px solid rgba(185, 185, 185, 0.5); border-radius: 50%; padding: 5px; cursor: pointer; }
.container_postbtn {padding: 35px 0 10px 0 !important;}

.paging {text-align: center; margin: 20px 0;}
.no-more-prev {display: none;}
.no-more-next {display: none;}

.numbox .num {color:black;}
.numbox .num span {background-color: white; border-radius: 5px; width: 20px; height: 20px; display: inline-block;}
.numbox .num span.selected {color:white; background-color: var(--main);}



.animated.fadedown {animation:fadedown 1s ease both; }
.animated.fadeup {animation:fadeup 1s ease both; }


.animated.fadeInLeftDown {animation:fadeInDownLeft 1s ease both;  }
.animated.fadeInRightDown {animation:fadeInDownRight 1s ease both;  }

.animated.fadeInLeft2 {animation:fadeInLeft2 1s ease both;  }
.animated.fadeInRight2 {animation:fadeInRight2 1s ease both;  }


.animated.slideup {animation:slideup 1s ease both; }

.animated.rotate {animation: rotate 200s linear infinite;}
.animated.rotate2 {animation: rotate 200s linear infinite; animation-direction: reverse;}
.animated.rotate3 {animation: rotate 300s linear infinite;}
.animated.rotate4 {animation: rotate 300s linear infinite; animation-direction: reverse;}
.animated.rotate5 {animation: rotate 120s linear infinite;}
.animated.rotate6 {animation: rotate 80s linear infinite; animation-direction: reverse;}


.animated.de-1 {animation-delay: 0.1s;}
.animated.de-2 {animation-delay: 0.2s;}
.animated.de-3 {animation-delay: 0.3s;}
.animated.de-4 {animation-delay: 0.4s;}
.animated.de-5 {animation-delay: 0.5s;}
.animated.de-6 {animation-delay: 0.6s;}
.animated.de-7 {animation-delay: 0.7s;}
.animated.de-8 {animation-delay: 0.8s;}
.animated.de-9 {animation-delay: 0.9s;}


.animated.de-11 {animation-delay: 1.1s;}
.animated.de-12 {animation-delay: 1.2s;}
.animated.de-13 {animation-delay: 1.3s;}
.animated.de-14 {animation-delay: 1.4s;}
.animated.de-15 {animation-delay: 1.5s;}
.animated.de-16 {animation-delay: 1.6s;}
.animated.de-17 {animation-delay: 1.7s;}
.animated.de-18 {animation-delay: 1.8s;}
.animated.de-19 {animation-delay: 1.9s;}

.animated.drop {animation: drop 5s ease infinite, fadeInDown 1s ease-out;}


@keyframes fadedown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%)
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeup {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10%);
        transform: translateY(10%)
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes slideup {
    0% {
        -webkit-transform: translateY(10%);
        transform: translateY(10%)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}
@keyframes fadeInLeft2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-10%);
        transform: translateX(-10%)
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInRight2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(10%);
        transform: translateX(10%)
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes rotate {
    from{
        transform: rotate(0deg);
		transform-origin: center;
    }
    to{
        transform: rotate(360deg);
		transform-origin: center;
    }
}

@keyframes drop {
    0% {
      transform: translateY(-18px);
    }
    50% {
      transform: translateY(10px);
    }
    100% {
      transform: translateY(-18px);
    }
  }
  

@keyframes fadeInDownLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate(-10%, -10%);
        transform: translate(-10%, -10%)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}


@keyframes fadeInDownRight {
    0% {
        opacity: 0;
        -webkit-transform: translate(10%, -10%);
        transform: translate(10%, -10%)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}


/* 보호글 */
.area-protected {
  max-width: 280px;
  margin: 0 auto;
  text-align: center;
}

.area-protected .text-protected {
  margin: 0 0 21px 0;
  padding-top: 112px;
  background: url(./images/icon-exclamation.svg) no-repeat center top;
  font-size: 18px;
  color: #333;
}

.area-protected .text-protected span {
  font-size: 14px;
  line-height: 2;
  color: #777;
}

.area-protected input {
  width: 100%;
  height: 42px;
  margin-bottom: 10px;
  font-size: 13px;
  padding-left: 20px;
  border: 1px solid #e8e8e8;
}

.area-protected input:hover, .area-protected input:focus {
  border: 1px solid #333;
}

.area-protected input.active+button {
  background: #333;
  color: #fff;
  cursor: pointer;

}

.area-protected button {
  display: block;
  width: 100%;
  height: 42px;
  background: #ddd;
  border: none;
  font-size: 13px;
}

.article-header-noimg {
  background: none !important;
  background-size: 50% 50% !important;
}

.article-header-protected {
  background: url(./images/icon-exclamation.svg) no-repeat center !important;
  background-size: 50% 50% !important;
}


/*//기본*/



/*커스텀*/

.ship {font-family: "Shippori Mincho", serif;}
.noto {font-family: "Noto Serif SC", serif;}
.kpub {font-family: 'KoPubWorld Batang';}
.corm {font-family: "Cormorant SC";}

.boxTheme .title {font-family: 'GmarketSansMedium'; font-weight: normal; padding-left: 5px; margin-top: 10px;}

html {background:url('./images/back.webp') no-repeat; background-position: bottom; background-size: cover; background-attachment: fixed;}

.grad {background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.00) 100%); width: 100%; height: 80vh;}
.grad2 {background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.00) 100%); width: 100%; height: 45vh;}
.grad3 {background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 100%); width: 100%; height: 50vh;}


#menuWrap	{ 
	text-align: center; 
    display: flex;
    justify-content: center;
    align-items: center;
	margin:auto;
    position: fixed;
    z-index: 100;
    left:0; right:0;
    top:0;
} 
#menuWrap .tt_category {
    color: rgb(255, 255, 255);
    height: 56px;
    border-radius: 0 0 30px 30px;
    background: url('./images/menu_back.png') center / cover no-repeat, #152A45;
    box-shadow: 0 0 6.4px 0 rgba(255, 255, 255, 0.80);
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0 4.56rem;
    box-sizing: border-box;
}



.link_tit {display: none;}

#menuWrap .category_list {display: flex;    align-items: center;    justify-content: center; gap: 32px;}
#menuWrap .category_list li { display: block; font-size: 14px; font-weight: 500;font-family: "Krona One"; position: relative;text-shadow: 0 0 4px rgba(0, 0, 0, 0.70);}
#menuWrap .category_list li.selected a {color:var(--main)}
#menuWrap .category_list li:before {
    content: "|";
    color: white;
    margin: 0;
    position: absolute;
    display: inline-block;
    left: -18px;
}
#menuWrap .category_list li a {color:rgb(255, 255, 255);}
#menuWrap .category_list li a:hover {color:var(--main);}

#menuWrap .category_list li:first-child::before {display: none;}
#menuWrap .category_list > li:nth-child(4) {margin-left: -32px;}
#menuWrap .category_list > li:nth-child(4)::before {display: none;}
#menuWrap .category_list > li:nth-child(3)::after {
    content: "";
    width: 42px;
    height: 42px;
    background: url('./images/logo4.png') center / cover no-repeat;
    display: block;
    margin:0 45px;
}

#menuWrap .category_list li:nth-child(3) {
    display: flex;
    justify-content: center;
    align-items: center;
}

#menuWrap .category_list .sub_category_list::before {
    content: url('./images/sub.svg');
    display: block;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 3px #fff);
}
#menuWrap .category_list .sub_category_list {position: absolute; top:55px; right:0; left:0px; text-align: center; margin:0 auto; height: 0px; width: 100%; overflow: hidden; transition: none !important;}
#menuWrap .category_list .sub_category_list li {font-size: 14px; letter-spacing: 1px;}
#menuWrap .category_list li.selected  .sub_category_list .link_sub_item {color:var(--default)}
#menuWrap .category_list li.selected  .sub_category_list .link_sub_item:hover {color: var(--main);}

#menuWrap .category_list li .sub_category_list li:before {
    display: none;
}

.logoWrap {text-align: center; position: fixed; left:0; right:0; margin:0 auto; bottom:18.7rem; z-index: -2;}
.logoWrap  * {transition: none !important;}

.logoWrap .logo {
    position: relative;
    width: 10.6875rem;
    height: 6.8125rem;
     margin:0 auto;
}

.logoWrap .logo2 {
    width: 10.6875rem;
    height: 6.8125rem;
    position: absolute;
    left:0;
    bottom:0;
    left:0; right:0; margin:0 auto;
}

:root {
  --fade-duration: 0.5s;   /* 페이드 속도 */
  --delay-between: 1.8s;   /* 전환 사이 딜레이 */
}

.logo {
  opacity: 0;
  animation-play-state: paused; /* 애니메이션 일시정지 */
}

.logo2 {
  opacity: 0;
  animation-play-state: paused; /* 애니메이션 일시정지 */
}

body.intro-complete .logo {
  animation: fadeIn var(--fade-duration) ease forwards, fadeOut var(--fade-duration) ease forwards;
  animation-delay: 0s, calc(var(--fade-duration) + var(--delay-between));
  animation-play-state: running; /* 애니메이션 실행 */
}

body.intro-complete .logo2 {
  animation: fadeIn var(--fade-duration) ease forwards;
  animation-delay: calc(var(--fade-duration)*2 + var(--delay-between));
  animation-play-state: running; /* 애니메이션 실행 */
}

.head_img .backblur {
    width: 100vw;
    height: 100vh;
    left:0;
    top:0;
    backdrop-filter: blur(2px);
}

/*기본카테고리*/

.article-type-common {
    width: 100%;
    position: relative;
    margin: 15px 0;
    display: flex;
    background: 
        repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.3) 0px,
        rgba(255, 255, 255, 0.3) 1px,
        transparent 1px,
        transparent 6px
        ),
        rgba(207, 247, 255, 0.85);
     border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.30); backdrop-filter: blur(5px);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 20px #00000083;
    box-sizing: border-box;
}
.article-type-common:last-child::after {
    content: "";
    display: block;
    clear: both;
}

.article-type-common .article-content {
    position: relative;
    padding-bottom: 20px;
    display: block;
    width: 100%;
}

.article-type-common .article-content a {
    color:var(--default)
}

.article-type-common .article-content .title { font-size: 20px;}
.article-type-common .article-content .title:hover {letter-spacing: 2px;}
.article-type-common .article-content .summary {color: #6d6d6d; padding: 10px 0px;}
.article-type-common .article-content .box-meta { position: absolute; right:10px; bottom:5px;}
.article-type-common .article-content .link-category {background-color: var(--sub); border-radius: 2em; letter-spacing: 1px; padding: 2px 8px; text-transform: uppercase;font-size: 12px; margin-right: 10px;}
.article-type-common .article-content .box-meta .date {color: #cacaca; display: block; text-align: right; letter-spacing: 2px;font-size: 10px; padding-right: 5px;}
.article-type-common .article-content .reply  {display: none;}
.article-type-common .article-content .reply span::before {content: "COMMENT - ";}

.article-type-common .thumbnail {
    width: 150px;
    height:150px;
    background-size: cover;
    background-position:center;
    margin-right: 10px;
}


.area-common::after {
        content: "";
    display: block;
    clear: both;
}

.title-search {display: none;}


.article-type-common.no-image.protected .thumbnail {background-image: url('./images/lock.png');}
.article-type-common.protected .thumbnail {background-image: url('./images/lock.png');}
.article-type-common.no-image .thumbnail {background-image: url('./images/lock2.png');}

/*갤러리카테고리*/


.article-type-gallery {
    width: 24%;
    float: left;
    position: relative;
    margin: 10px 5px;
    display: block;
    position: relative;
    box-sizing: border-box;
    border-radius: 10px;
    background: 
        repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.3) 0px,
        rgba(255, 255, 255, 0.3) 1px,
        transparent 1px,
        transparent 6px
        ),
        rgba(207, 247, 255, 0.85);
     border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.30); backdrop-filter: blur(5px);
    margin: 50px 0;
    overflow: hidden;
    margin:5px;
    display: inline-block;
    background-color: transparent;
    padding: 0;
}

.article-type-gallery .article-content {
    position: absolute;
    background: linear-gradient(180deg, transparent 9%, #fff 100%);
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: end;
    opacity: 1;
    text-align: center;
    pointer-events: none;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0px;
    padding-bottom: 20px;
    opacity: 0;
}
.article-type-gallery .article-content .title {font-size: 12px; font-weight: 500; line-height: 110%;}
.article-type-gallery .article-content .link-article {max-width: 80%; margin: 0 auto;}
.article-type-gallery .box-meta {display: none;}
.article-type-gallery .summary {display: none;}

.article-type-gallery:hover .article-content {
    opacity: 1;
}

.article-type-gallery .thumbnail {
    width: 100%;
    height:350px;
    margin-right: 0px;
}
.article-type-gallery:hover .thumbnail {
    transform: scale(1.05);
}

.article-type-gallery .article-content .link-category {display: none;}

/*커미션*/


.article-type-commi {
    width: 24%;
    float: left;
    position: relative;
    margin: 10px 5px;
    display: block;
    position: relative;
    box-sizing: border-box;
    background: 
        repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.3) 0px,
        rgba(255, 255, 255, 0.3) 1px,
        transparent 1px,
        transparent 6px
        ),
        rgba(207, 247, 255, 0.85);
     border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.30); backdrop-filter: blur(5px);
    margin: 50px 0;
    overflow: hidden;
    margin:5px;
    display: inline-block;
    background-color: transparent;
    padding: 0;
}

.article-type-commi .article-content {
    position: absolute;
    opacity: 1;
    text-align: left;
    display: inline-block;
    width: auto;
    pointer-events: none;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0px;
    padding-left: 10px;
    padding-top: 10px;
    filter: drop-shadow(0 0 3px #000);
}
.article-type-commi .article-content .title {font-size: 14px; font-weight: 600; line-height: 110%;color: #f9f9f9;}
.article-type-commi .article-content .link-article {max-width: 80%; margin: 0 auto;}
.article-type-commi .box-meta {display: none;}
.article-type-commi .summary {display: none;}

.article-type-commi .article-content .title::before {
    content: "ⓒ ";
    font-size: 17px;
}



.article-type-commi .thumbnail {
    width: 100%;
    height:250px;
    margin-right: 0px;
}
.article-type-commi:hover .thumbnail {
    transform: scale(1.05);
}

.article-type-commi .article-content .link-category {display: none;}


/*TRPG*/


.article-type-trpg {
    width: 24%;
    float: left;
    position: relative;
    margin: 0 5px;
    display: block;
    position: relative;
    box-sizing: border-box;
    background: 
        repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.3) 0px,
        rgba(255, 255, 255, 0.3) 1px,
        transparent 1px,
        transparent 6px
        ),
        rgba(207, 247, 255, 0.85);
     border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.30); backdrop-filter: blur(5px);
    margin: 50px 0;
    overflow: hidden;
    margin:5px;
    display: inline-block;
    background-color: transparent;
    padding: 0;
}

.article-type-trpg .article-content {
    position: absolute;
    background: linear-gradient(180deg, transparent 9%, #000 100%);
    height: 150px;
    display: flex;
    justify-content: flex-end;
    align-items: end;
    opacity: 1;
    text-align: center;
    pointer-events: none;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0px;
    padding-bottom: 20px;
    opacity: 0;
}
.article-type-trpg .article-content .title {
        font-size: 22px;
    text-align: right;
    color: #f9f9f9;
    padding: 0 15px;
    filter: drop-shadow(0 0 3px #000);
    line-height: 100%;
    font-weight: normal;
}
.article-type-trpg .article-content .link-article {padding-bottom: 20px;font-family: 'GmarketSansMedium'; font-weight: normal;}
.article-type-common.article-type-trpg .box-meta {font-family: 'GmarketSansMedium'; display: none;}
.article-type-common.article-type-trpg .box-meta .date {
    color: #f9f9f9;
    font-size: 12px;
    padding-top: 2px;
    filter: drop-shadow(0 0 3px #000);
    text-align: right;
    padding: 0px 5px 12px 15px;
    font-weight: 100;
    letter-spacing: 1px;}
.article-type-trpg .summary {display: none;}

.article-type-trpg:hover .article-content {
    opacity: 1;
}

.article-type-trpg .thumbnail {
    width: 100%;
    height:500px;
    margin-right: 0px;
}

.article-type-trpg:hover .thumbnail {background-position: left; animation:slide 20s infinite linear;background-position: left center; transform: scale(1.05); }
@keyframes slide {
	50% { background-position: right center; }
}
.article-type-trpg:hover {transform: scale(1.05);}

.article-type-trpg .article-content .link-category {display: none;}

.article-type-trpg .article-content .title::before {
    content: "▶";
background-color: white;
    color: black;
    width: 30px;
    height: 30px;
    padding-left: 5px;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 50%;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
    position: absolute;
    top: -45px;
    right: 50px;
}
.article-type-trpg .article-content .title::after {
    content: "+";
        border: 1px solid rgb(105, 105, 105);
    color: rgb(105, 105, 105);
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 50%;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    top: -45px;
    right: 15px;
}



/*글*/



.article-type-novel .thumbnail {display: none;}

.article-type-novel .article-content .summary {display: none;}
.article-type-novel .article-content {padding-bottom: 0;}
.article-type-novel .article-content .box-meta {bottom:0;}


/*프로필*/

/* 성장프로필 */
#body input{
    display:none;
}

#body input:checked + label{
    color:#0059B5;
}
#body label{
    font-size: 14px;
    cursor: pointer;
    color:#A9A9A9;   
     position: relative;
}
#body .tab_navi {
    position: fixed;
    bottom:24px;
    left:0;
    right:0;
    text-align: center;
    margin:0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
#body .tab_navi li {display: inline-block;}

#body .tab_navi li input:checked + label::before {
    content: "";
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #0059B5;
    position: absolute;
    left:0; right:0; margin:0 auto;
    top:-8px
}

.grad-profile {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 80.29%);
    width: 100%;
    height: 50vh;
    position: fixed;
    bottom:0;
    left:0;
    pointer-events: none;
}
.profile {text-align: center;}

.profile_wrap .profile .bottom_profile {
    position: fixed;
    bottom:70px;
    color:white;
    display: flex;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
}

.profile_wrap .profile.left .bottom_profile {
    left:204px;
}

.profile_wrap .profile.right .bottom_profile {
    right:204px;
}


.profile_wrap .profile .ch_body {
    position: absolute;
    z-index: -1;
    max-width: 750px;
    top:10%;

}

.profile_wrap .profile.left .ch_body {
    left:20%;
}

.profile_wrap .profile.right .ch_body {
    right:20%;
}

.profile_wrap .profile.left .ch_body.on_1 {
    position: relative;
    text-align: center;
    left:auto;
    right:auto;
    max-width: 100%;
}

.profile_wrap .profile.right .ch_body.on_1 {
    display: none;
}


.bottom_profile .pha {
    color: #000;
    text-align: center;
    text-shadow: 0 0 4px #FFF;
    font-family: Paperlogy;
    font-size: 24px;
    font-style: normal;
    font-weight: 250;
    line-height: 100%; /* 24px */
    position: relative;
    display: inline-block;
    max-width: 370px;
    word-break: keep-all;
    margin: 18px auto;
}

.bottom_profile .pha::before {
    content: "“ ";
    position: absolute;
    left:-14px;
    font-weight: 600;
    top:-12px;
    color:#152A45;
}
.bottom_profile .pha::after {
    position: absolute;
    content: " ”";
    right:-14px;
    font-weight: 600;
    top:-12px;
    color:#152A45;
}


.bottom_profile .kr_name {
    text-align: center;
    font-family: Paperlogy;
    font-size: 96px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 96px */
    margin-bottom: 24px;
    background: linear-gradient(180deg, #152A45 0%, #0059B5 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 4px #fff);
}

.bottom_profile .catch {
    color: #132E50;
    text-align: center;
    text-shadow: 0 0 4px #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 14px */
    letter-spacing: 6.86px;
    margin-bottom: 5px;
}

.bottom_profile .detail {
    color: #757380;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.bottom_profile .detail li {
    padding: 7px 30px;
    border-radius: 30px;
    border: 1px solid #B1B2BE;
}

.content_wrap {
    width: 500px;
    height: 480px;
    overflow: auto;
    text-align: left;
    position: fixed;
    bottom:320px;
    padding: 30px !important;
    display: none;
}

.left .content_wrap {left:121px;}
.right .content_wrap {right:121px;}



.content_wrap .content_title {
    border-radius: 30px;
    background: #0A4380;
    display: inline-flex;
    padding: 8px 25px;
    align-items: center;
    color: #FFF;
    font-family: Paperlogy;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 20px */
    gap: 6px;
    margin-bottom: 20px;
}

.content_wrap .content_title::before {
    content: url('./images/play.svg');
}

.content_wrap .content_contents {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%; /* 25.2px */
    margin-bottom: 20px;
}



/*반응형*/

@media all and (max-width:1024px)  {

    html {background:url('./images/back2.webp') no-repeat;
    background-position: center;
    background-size: cover; background-attachment: fixed;}
    
    #navigation {display: none; position: fixed;right:0; top:0; background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px); width: 100%; height: 100%; z-index: 999;}
    #menuWrap {text-align: center; width: 100%; position: relative;}
    #menuWrap .category_list li:before {display: none;}
    #menuWrap .category_list { flex-direction: column;  }
    #menuWrap .tt_category {
            position: relative;
        height: auto;
        background: none;
        box-shadow: none;
    }


    #menuWrap .category_list > li:nth-child(3)::after {
        display: none;
    }

    .menuClose {position: fixed; right:10px; top:10px; cursor: pointer;}

    .boxTheme {width: 95%; margin: auto; padding:20px;}
    .boxTheme .date {  top: 30px;   }

    .article-type-trpg {width: 95%; margin: auto;}

    #menuWrap .category_list .sub_category_list {height: auto; position: relative; left: 0; top:0;}

    #menuWrap .category_list > li:nth-child(4) {margin: 0;}
 
    #body {padding:10px;}

   /*프로필*/

   .profile_wrap .profile .ch_body {max-width: 80%; position: relative; margin-top: 50px;}
   .profile_wrap .profile.left .ch_body {left:2%;}
   .profile_wrap .profile.right .ch_body {right:2%;}

   .profile_wrap .profile .bottom_profile { width:100%; position: relative; bottom:0 }
   .profile_wrap .profile .content_wrap {position: relative; left: auto !important; right: auto !important; bottom:0; margin-top: 50px; }

   .profile_wrap .profile.right .bottom_profile {right:0px; margin-top: 50px;}
   .profile_wrap .profile.left .bottom_profile {left:0px;}

   .bottom_profile .en_name {font-size: 40px; word-break: keep-all;  letter-spacing: -1px;}
   .bottom_profile .kr_name {font-size: 40px;}
   .bottom_profile .pha {font-size: 14px;}

   .bottom_profile .detail {

   flex-direction: column;
   text-align: center;
   font-size: 12px;
}
   .bottom_profile .detail li {padding:5px 10px}

   .grad-profile {z-index: -1; height:80vh}

   .logoWrap .logo {
    position: relative;
    width: 100%;
    height: auto;
     margin:0 auto;
}

.logoWrap .logo2 {
    width: 100%;
    height: auto;
    position: absolute;
    left:0;
    bottom:0;
    left:0; right:0; margin:0 auto;
}

}