/*@font-face {
  font-family: 'ABCDiatypeHangulVF';
  src:
    url('/client/fontbox/ABCDiatypeHangulVF.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}*/

@font-face {
  font-family: 'ABCDiatypeHangulVF';
  src: url('https://yoonmingoo.tf/fontbox/read_font.php?hash=6b7c8d9e0f11223344556677889900abcdefabcdefabcdefabcdefabcdef5678') format('woff2'),
       url('https://yoonmingoo.tf/fontbox/read_font.php?hash=5a6b7c8d9e0f11223344556677889900abcdefabcdefabcdefabcdefabcdef34') format('woff'),
       url('https://yoonmingoo.tf/fontbox/read_font.php?hash=7c8d9e0f11223344556677889900abcdefabcdefabcdefabcdefabcdef6789ab') format('opentype'),
       url('https://yoonmingoo.tf/fontbox/read_font.php?hash=8d9e0f11223344556677889900abcdefabcdefabcdefabcdefabcdef789abc') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}




:root {
  --font-size-l: 50px;
  --font-size-l-kr: 49.5px;
  --font-size-ml: 46px;
  --font-size-ml-kr: 45.5px;
  --font-size-m: 36px;
  --font-size-m-kr: 39.2px;
  --font-size-ms: 30px;
  --font-size-ms-kr: 29.5px;
  --font-size-sm: 24px;
  --font-size-sm-kr: 23.5px;
  --font-size-s: 16px;
  --font-size-s-kr: 15.5px;
  --font-size-xs: 16px;
  --font-size-xs-kr: 15.5px;
  --line-height-read: 1.3;
  --line-height-read-kr: 1.5;
  --line-height-read-long: 1.3;
  --line-height-journal: 1.8;
  --black: #222;
  --lineblack: #222;
  --gray: rgba(0,0,0,0.3);
  --inactive: rgba(0,0,0,0.3);
  --bg: rgba(255,255,255,.85);
  --cubic: cubic-bezier(.65,.05,.36,1);
  --swiper-navigation-size: 14px !important;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'ABCDiatypeHangulVF', sans‑serif;
  font-variation-settings: "wdth" 100, "wght" 90, "ital" 0; 
  -webkit-font-smoothing: antialiased;
/*      word-break: keep-all;*/
}
html{
}

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

a{
  text-decoration: none;
  color: inherit;
  outline: none;
}

p{
  margin: 0;
}

img {
  width: 100%;
  vertical-align : bottom;
  user-drag: none;       /* Safari 및 일부 브라우저 */
  -webkit-user-drag: none; /* Chrome, Safari */
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-select: none;     /* 텍스트 선택도 방지 */
}

h1{
    font-size: var(--font-size-l);
}

h2{
    font-size: var(--font-size-m);
}

.krbody h2{
    line-height: 1.4;
}

h3{
    font-size: var(--font-size-s);
}

.mver{
    display: none;
}


/************* common ****************/

main {
    z-index: 1;
    display: block;
    position: relative;
}


body.container-active {
    overflow: hidden;
}

.krbody .logoen{
    display: none !important;
}

.enbody .logokr{
    display: none !important;
}



/************* header ****************/

.header {
    position: fixed;
    display: block;
    width: calc(100% - 30px);
    height: max-content;
    font-family: "Diatype Variable";
    font-size: var(--font-size-s);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
    top: 0;
    padding: 21.5px 25px;
    z-index: 9;
}

.left-menu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    padding: 21.5px 25px;
    z-index: 9;
}

.left-menu-btn {
    display: inline-block;
}

.right-menu .m-left-menu-btn{
    display: none;
}

.m-logo{
    display: none;
}

.m-keywords-box{
    display: none;
}


.center-menu{
    position: fixed;
    text-align: center;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 21.5px 25px;
}

.right-menu {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    padding: 21.5px 25px;
}



.right-menu *{
    display: inline-block;
    width: max-content;
    margin: 0 0 0 25px;
}

.m-menu-btn,
.m-menu-set{
    display: none !important;
}


.display-none {
    display: none !important;
}

.keywords-box{
    display: inline-block;
    font-size: var(--font-size-s);
    float: left;
}

.filter {
    display: block;        /* 항상 레이아웃에 둠 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

.filter-box {
    position: fixed;
    line-height: var(--line-height-read);
    font-size: var(--font-size-s);
    margin: 2px 0 0;


}

.filter.active{
    opacity: 1;
    pointer-events: auto;
}

.filter li {
   display: inline-block;
}

.filter-btn {
    display: block;
    width: max-content;
    cursor: pointer;
    margin-right: 25px;
    font-size: var(--font-size-s);
}

/*    body.filter-active .filter-btn {
        border-bottom: 1px solid #fff;
    }*/


.keywords-box .keywords-btn a{
  display: inline-block;
  margin: 0;
}

.keywords-box .keywords-btn.active .keywords-title {
    border-bottom: 1px solid;
}

.m-keywords-box .keywords-btn.active .keywords-title {
    border-bottom: 1px solid;
}

.keywords-box .keywords-btn:last-child a .comma{
    display: none;
}

.m-keywords-box .keywords-btn:last-child a .comma{
    display: none;
}

/*.filter-active {
  background-color: #f0f0f0;
  color: #333; 
}*/

svg#plus {
  width: 13px;
}
.plus-b {
  fill: none;
  stroke: #000;
  stroke-miterlimit: 10;
  stroke-width: 3;
}

.lang-btn {
    text-transform: uppercase;
}

.footertext {
    padding: 21.5px 25px;
    display: grid;
    grid-template-columns: 50% 50%;
    font-size: var(--font-size-s);
}

.footertext-left{
    text-align: left;
}
.footertext-right{
    text-align: right;
}

.keywords-fake-bg {
    width: 100dvw;
    height: 1000dvh;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8;
    background: rgba(0, 0, 0, 0.8);
}

/************* home ****************/


.home-page{
width: calc(100% - 40px);
    margin: 110px 20px 25px;
        min-height: 100dvh;
}


.home-page .grid {
    position: relative;
    z-index: 8;
    transition: opacity 0.3s;
  }

.home-page .grid-item {
    display: inline-block;
    width: calc(50% - 130px);
    height: auto;
    float: left;
    padding: 0;
    margin: 0 50px 200px;
/*    cursor: pointer;*/
  }

  /* 가운데 간격만 확장 */
.home-page .grid-item:nth-child(odd){
  margin-right: 80px;
}

.home-page .grid-item:nth-child(even){
  margin-left: 80px;
}

/* 1200px 이하: 간격 조금 축소 */
@media (max-width: 1200px){
  .home-page .grid-item{
    margin: 0 35px 120px;
    width: calc(50% - 95px);   /* 35 + 60 = 95 */
  }
  .home-page .grid-item:nth-child(odd){  margin-right: 60px; }
  .home-page .grid-item:nth-child(even){ margin-left: 60px; }
}

/* 900px 이하: 더 축소 */
@media (max-width: 900px){
  .home-page .grid-item{
    margin: 0 24px 100px;
    width: calc(50% - 64px);   /* 24 + 40 = 64 */
  }
  .home-page .grid-item:nth-child(odd){  margin-right: 40px; }
  .home-page .grid-item:nth-child(even){ margin-left: 40px; }
}


@media (max-width: 700px){
  .home-page .grid-item{
    float: none;
    display: block;
    width: calc(100% - 80px);
    margin: 0 40px 100px;   /* 여기서 좌우/하단 모두 끝 */
  }

  /* 모바일에서는 가운데 벌리기 규칙 자체를 끔 */
  .home-page .grid-item:nth-child(odd),
  .home-page .grid-item:nth-child(even){
    margin-left: 0;
    margin-right: 0;
  }
}

  .home-page .grid-item figure img{
    display: block;
    margin: auto;
  }

  .home-page .grid-item figure video{
   width: 100%;
  }

.home-page .grid-item figcaption{
    display: none;
  }

.home-page .grid-item.disable {
    cursor: default; !important;
}


/*
.grid-sizer,
.grid-item {  width: calc((100% - 60px) / 3);}
.gutter-sizer { width: 30px; }
.grid-item--width2 { width: 50%; }
.grid-item figure{
    margin-bottom: 6.5px;
}
.grid-item figcaption{
    display: none;
}
*/
/************* Single page ****************/

  .single-grid {
  grid-template-columns: repeat(12, 1fr);
  --columns: 12;
  --gutter: 0.625rem;
  display: grid;
  grid-gap: var(--gutter);
/*  grid-template-columns: 1fr;*/
}
.single-grid > .column {
  margin-bottom: var(--gutter);
  grid-column: span var(--columns);
}


.single-grid .video, .single-grid .img {
    position: relative;
    display: block;
    --w: 1;
    --h: 1;
    padding-bottom: calc(100% / var(--w) * var(--h));
    background: var(--color-black);
}

.single-grid .img img, .single-grid .video iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.single-grid .text a {
    text-decoration: underline;
}

.single-grid .text h1,
.single-grid .text h2,
.single-grid .text h3,
.single-grid .text h4,
.single-grid .text h5,
.single-grid .text h6{
    text-align: center;
}




.m-single-title {
    display: none;
}

/************* about ****************/


.about-page {
    display: grid;
    grid-template-columns: 50% 50%;
    font-size: var(--font-size-s);
    line-height: var(--line-height-read);
    padding: 0;
}



.about-sns {
    margin: 24px 0;
}


.about-sns a:last-child .comma {
    display: none;
}

.about-left {
    padding: 93px 25px;
    height: auto;
    width: calc(100% - 50px);
    word-break: unset;
}

.linksite {
    padding: 25px 0 0;
}

.linksite-item {
    width: max-content;
    float: left;
}

.linksite img {

    width: max-content;
    width: auto;
        height: 55px;
}

.linksite-text {
    display: none;
    position: absolute;
    padding: 20px 0 55px;
    left: 25px;
    max-width: calc(50% - 50px);
}

.about-right {
    padding: 100px 25px;
}

.krbody .about-right{
    line-height: var(--line-height-read-kr);
}

.about-description {
    width: 100%;
    font-size: var(--font-size-m);
    line-height: var(--line-height-read-long);
/*    max-width: 800px;*/
    display: inline-block;
/*    white-space: pre-line;*/
        word-break: keep-all;
}

.about-description-two {
    display: block;
    font-size: var(--font-size-s);
/*    max-width: 800px;*/
    padding: 0 0 40px;
        word-break: keep-all;
}

.krbody .about-description {
    line-height: var(--line-height-read-kr);
}

.before-member-text{
    margin: 0 0 25px;
}

.member {
    margin: 0 0 25px;
}

.member-about{
    margin: 0 0 0 60px;
}

.member-cv-btn {
    cursor: pointer;
    margin: 0 0 0 60px;
    border-bottom: 1px solid;
}



.cv-box {
    display: none;
    margin: 25px 0 0;
}

.cv-box.active {
    display: block;
}

.name-link {
    text-decoration: underline;
}

.name-link.active {
    text-decoration: underline;
}

.cv-box-item-title {
    margin: 0 0 4px 60px;
    display: inline-block;
}

.cv-box-item-content {
    display: block;
}

.cv-box-item {
    margin: 0 0 20px;
}

.cv-box-item-list a {
    display: grid;
    grid-template-columns: 60px calc(100% - 60px);
}



/********* container ***********/


.container {
  width: 100dvw;
  height: 100dvh;
  position: fixed;
  bottom: -100dvh;
  background: transparent;
  transition: bottom 0.5s ease-in-out;
/*  transition-timing-function: cubic-bezier(.65,.05,.36,1);*/
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 99;
  cursor: pointer;
}

.container.active{
  bottom: 0;
}

.container .box{
  overflow: hidden;
}

.fake-back {
    position: fixed;
    width: 100dvw;
    height: 100dvh;
    z-index: 1;
    cursor: pointer;
}

.inner-box {
    width: calc(100% - 50px);
    bottom: 0dvh;
    max-height: calc(100% - 14px);
    position: absolute;
    box-shadow: 0px -3px 8px 0 rgba(0, 0, 0, 0.3);
    background: #fff;
    z-index: 2;
    padding: 0 25px 14px;
    overflow-y: scroll;
}

.inner-title-set {
    position: relative;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 33.3333% 33.3333% 33.3333%;
    padding: 0;
}

.container .box .title-box {
  padding: 0 15px;
  max-width: 950px;
  margin: auto;
}

.container h1 {
  text-align: left;
  font-size: var(--font-size-l);
line-height: var(--line-height-long);
}

.container h2 {
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-ml);
  line-height: 1;
}

.container figcaption {
  font-size: var(--font-size-s);
  max-width: 100%;
  padding: 70px 15px 90px;
}

.container .text-title {
    font-size: var(--font-size-ml);
    line-height: var(--line-height-read);
    text-align: center;
    margin: 0 auto 90px;
    max-width: 950px;
    padding: 0 15px;
    word-break: keep-all;
    font-weight: 600;
}

.container p{
    font-size: var(--font-size-s);
    line-height: var(--line-height-read-long);
    margin: 0 auto;
/*    max-width: 950px;*/
max-width: 100%;
    padding: 0;
    word-break: keep-all;
    text-align: left;
}

.inner-footer-text p {
    padding: 0 0 35px;
    margin: 0;
    white-space: normal;
}

.container figcaption p:last-child,
.inner-footer-text p:last-child {
    padding: 0;
}

em {
    font-style: italic;
}

strong {
    font-weight: bold;
}

.krbody .container p {
}

.container ul {
  padding: 0;
  max-width: 100%;
  margin: auto;
}

.container li a {
    width: 100%;
    height: 100%;
}


/*.container figure {
    position: relative;
    padding: 0 25px 21.5px;
    max-width: 100%;
    margin: auto;
}*/

figure.img-box.youtubebox iframe {
    height: 41.2vw !important;
}

.img-caption {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-read);
    max-width: 400px;
    display: inline-block;
    padding: 10px 0 0;
}

.inner-footer-text {
    padding: 21.5px 25px;
    font-size: var(--font-size-s);
    line-height: var(--line-height-read);
    white-space: pre-line;
    max-width: 100%;
    margin: auto;
}

.arrow {
    width: 50px;
    height: 50px;
}

.enbody .buybtn-kr {
    display: none;
}

.krbody .buybtn-en{
    display: none;
}



.inner-buy-btn {
    font-size: var(--font-size-s);
    /*position: absolute;
    top: 0;
    right: 0;*/
    text-align: right;
    padding: 21.5px 0;
}

.inner-back-btn {
    font-size: var(--font-size-s);
    position: absolute;
    top: 0;
    right: 0;
    padding: 21.5px 0;
    cursor: pointer;
}

.inner-category {
    font-size: var(--font-size-s);
 /*   position: absolute;
    top: 0;
    left: 0;*/
    padding: 21.5px 0;
}


.inner-title {
    font-size: var(--font-size-s);
  /*  position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);*/
    padding: 21.5px 0;
    text-align: center;
}

/************* news *****************/

.news-page {
    padding: 80px 15px;
}

.news-item {
    display: grid;
    grid-template-columns: 200px calc(100% - 200px);
    font-size: var(--font-size-s);
    line-height: var(--line-height-read);
    border-bottom: 1.5px solid rgba(200, 200, 200, 0.6);
    padding: 10px 0;
}

.news-list a.active,
.news-list a.news-header {
    color: rgba(0, 0, 0, 1) !important;
}


::selection{
  background: transparent;
}

/* Scrollbar */
    /* width */
    ::-webkit-scrollbar {
      display: none;
        width: 0px;
    }
    /* Track */
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: transparent; 
        border-radius: 5px;
    }