@font-face {
  font-family: 'ABCDiatypeHangulVF';
  src: url('/fontset/ABCDiatypeHangul-MinVF.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
}

::selection{
    background: #e9e9e9;
}


*{
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-family: 'ABCDiatypeHangulVF';
    word-break: keep-all;
    font-display: block; 
}

body.jp *{
    word-break: break-all;
}

/*:root {
  --font-intro: 53px;
  --font-size-m: 30px;
  --font-size-s: 18px;
}
*/

/* ========================================
   LANGUAGE FONT STYLE - PC
======================================== */


/* EN */

.panel-language[data-language="en"],
.ideas-page[data-language="en"] {
  --font-size-intro: var(--font-intro-en);
  --font-size-m: var(--font-m-en);
  --font-size-s: var(--font-s-en);

  --line-height-intro: var(--line-height-intro-en);
  --line-height-title: var(--line-height-title-en);
  --line-height-body: var(--line-height-body-en);
  --line-height-work: var(--line-height-work-en);

  --weight-intro: var(--weight-intro-en);
  --weight-title: var(--weight-title-en);
  --weight-body: var(--weight-body-en);
}


/* KO */

.panel-language[data-language="ko"] {
  --font-size-intro: var(--font-intro-ko);
  --font-size-m: var(--font-m-ko);
  --font-size-s: var(--font-s-ko);

  --line-height-intro: var(--line-height-intro-ko);
  --line-height-title: var(--line-height-title-ko);
  --line-height-body: var(--line-height-body-ko);
  --line-height-work: var(--line-height-work-ko);

  --weight-intro: var(--weight-intro-ko);
  --weight-title: var(--weight-title-ko);
  --weight-body: var(--weight-body-ko);
}


/* JA */

.panel-language[data-language="ja"] {
  --font-size-intro: var(--font-intro-ja);
  --font-size-m: var(--font-m-ja);
  --font-size-s: var(--font-s-ja);

  --line-height-intro: var(--line-height-intro-ja);
  --line-height-title: var(--line-height-title-ja);
  --line-height-body: var(--line-height-body-ja);
  --line-height-work: var(--line-height-work-ja);

  --weight-intro: var(--weight-intro-ja);
  --weight-title: var(--weight-title-ja);
  --weight-body: var(--weight-body-ja);
}


body {
/*  overflow: hidden;*/
overflow-y: scroll;
  overflow-x: hidden;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

header {
    position: absolute;
    top: 0;
    width: calc(100vw - 40px);
    display: flex;
    justify-content: space-evenly;
    padding: 15px 20px;
    font-size: var(--font-size-s);
    line-height: 1;
    z-index: 100;
}

a{
    color: #000;
    text-decoration: none;
    outline: none !important;
}

button{
    outline: none !important;
}

.mver{
    display: none !important;
}

header a{
    text-decoration: none;
    color: #000;
}


header a.disable{
    opacity: 0.2;
    pointer-events: none;
    cursor: default;
}

.lang-btn{
    display: none;
}


.scroll-top {
    position: absolute;
    top: 15px;

    border: none;
    background: none;

    font-family: 'ABCDiatypeHangulVF';
    font-size: var(--font-size-s);
    line-height: 1;
    color: #000;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transition: opacity .3s;

    z-index: 30;
    white-space: nowrap;
}


/* 왼쪽 패널 Top */

.scroll-top-left {
    right: 20px;
}


/* 오른쪽 패널 Top */

.scroll-top-right {
    left: 20px;
}


/* 보이기 */

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

/* KR */





.panel__right header {
    right: 0;
}



ul {
    list-style: inside;
}

h2{
    font-size: var(--font-size-intro);
    font-weight: var(--weight-intro);
}

h3 {
    font-size: var(--font-size-m);
    font-weight: var(--weight-title);
}
/*
::marker {
    content: "— ";
}*/

.section2 ul {
  list-style: none;
  padding: 0 40px 0 0;
}

.section2 ul li::before {
  content: "— ";
  position: absolute;
}

.section2 li span{
    padding: 0 0 0 20px;
    display: block;
}


.panel {
  display: flex;
  width: 100vw;
  min-height: 100vh;
  align-items: stretch;
}

.panel__bar {
  position: fixed;
  top: 0;
touch-action: none;
  width: 11px;
  height: 100vh;

  background: transparent;

  transform: translateX(-50%);

  z-index: 20;
  font-size: var(--font-size-s);
  cursor: col-resize;
}


.panel__bar::before {
  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width: 1px;
  height: 100%;

  background: #3B3D4A;

  transform: translateX(-50%);

  pointer-events: none;
}

/* 언어 버튼 */

.bar-lang {
    display: none;
/*    position: absolute;*/
position: static;
    bottom: 15px;

    border: none;
    background: none;

    font-family: 'ABCDiatypeHangulVF';
    font-size: var(--font-size-s);
    line-height: 1;

    color: #000;
    cursor: pointer;

    white-space: nowrap;

    z-index: 30;
}

.bar-lang.active {
  display: block;
}

.bar-lang.active {
  text-underline-offset: 2px;
}

.bar-lang-left .bar-lang {
    margin-left: 5px;
}


.bar-lang-right .bar-lang {
    margin-right: 5px;
}



/* 언어 그룹 */

.bar-lang-group {
  position: absolute;
  bottom: 15px;

  display: flex;
  align-items: center;
  gap: 10px;

  z-index: 30;
}


/* divider 왼쪽 */

.bar-lang-left {
    right: 20px;
}


/* divider 오른쪽 */

.bar-lang-right {
    left: 20px;
}



/**/

.panel_container {
    overflow: visible;
}

.panel__left,
.panel__right {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.panel__left {
  width: 50%;
  background-color: #fff;
}

.panel__right {
   position: relative;
  flex: 1;
   overflow: hidden;
}

.panel_inner {
  position: relative;
}

.panel__left .panel_container,
.panel__right .panel_container {
  position: relative;
  top: 0;
  width: 100vw;
}

.panel__left .panel_container {
  left: 0;
}


.panel__right .panel_container {
  position: absolute;
  top: 0;
  right: 0;
}

.panel-language {
  display: none;
}

.panel-language.active {
  display: block;
}

.panel-menu-language {
    display: none;
}

.panel-menu-language.active {
    display: flex;
}

/****** content ******/


.section1 {
    width: 100%;
    height: 100vh;
    line-height: 100vh;
}

.section1 h2 {
    line-height: 1.42;
    padding: 0 20px;
    display: block;
    position: relative;
    top: 50dvh;
    transform: translateY(-50%);
    text-align: center;
}

.section2 {
    display: grid;
        width: calc(100% - 40px);
    grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);
    padding: 0 20px 0;
    gap: 0px;
    min-height: 600px;
}

.section2-img {
    display: block;
    justify-self: center;
    padding: 0;
}

.first-line div,
.first-line span{
    border-bottom: 1px solid #000;
}

.section2 h3 {
    padding: 0;
    border-bottom: 1px solid #000;
    padding: 0 0 10px;
    margin: 0 0 10px;
}

.section2 li {
    font-size: var(--font-size-s);
    line-height: var(--line-height-work);
}

.section3{
    padding: 0 20px 100px;
    font-size: var(--font-size-s);
    line-height: 1.2;
}

.section3 h3 {
    padding: 0 0 10px;
}

.section3 ul{
    list-style: none;
}

.section3 .question li{
    display: grid;
    width: 100%;
    grid-template-columns: 33.3333% 66.6666%;
    gap: 0px;
}

.first-line {
    margin: 0;
}

.section3 .question .first-line li {
    border-bottom: none;
    padding: 0;
}

.section3 .projects-list li{
    display: block;
    border-bottom: 1px solid #000;
    width: 100%;
    padding: 8px 0 10px;
}

.section3 .projects-list li a{
    display: grid;
    grid-template-columns: 30% 60% 10%;
    gap: 0px;
}

.section3 .projects-list li a span {
    padding: 0 20px 0 0;
}


.section3 .question li div {
    padding: 8px 100px 8px 0;
    border-bottom: 1px solid #000;
}

.section3 .question .first-line div {
    padding: 0 0 8px;
}

.section3 .question .first-line li a span {
    padding: 0 0 8px;
    color: #000 !important;
    cursor: default !important;
}

.section4 {
    padding: 0 20px 0px;
    width: calc(100% - 60px);
        font-size: var(--font-size-s);
    line-height: 1.2;
}

.section4 h3 {
    padding: 0 0 10px;
}

.section4 .box{
    display: grid;
    width: calc(100% - 20px);
    grid-template-columns: 30% 70%;
    gap: 20px;
    padding: 0 0 15px;
}

.contact-link{
    padding-top: 12px;
}

/* 시계 */
.clock-group{

display:grid;
    width: 100%;
/* 자동으로 열 생성 */
grid-template-columns:33.3333% 33.3333% 33.3333%;
gap:0;

}



.clock{

width:100%;
box-sizing:border-box;
text-align:center;


/* 내부 정렬 */

display:grid;

    grid-template-rows: 70px 100px 75px;
align-items:center;

}



.city{

font-size:var(--font-size-s);
    font-weight: 400;

}

.hour{
        font-weight: 300;
}


.time{

display:flex;

justify-content:center;

align-items:flex-end;

font-size:7vw;

line-height:1;
    font-weight: 400;
}



.colon{
    top: -9px;
    position: relative;
animation:blink 1s infinite;
    font-weight: 400;
}

.minute{
        font-weight: 400;
}



@keyframes blink{

0%,45%{
opacity:1;
}

50%,100%{
opacity:0;
}

}



.ampm{

font-size: var(--font-size-s);

margin-left:12px;

margin-bottom:8px;

line-height:1;

}



.date{

font-size:var(--font-size-s);

}



.accordion-list {
    width: calc(100% - 40px);
    padding: 100px 20px 100px;
}

.accordion-item{
  border-top:1px solid #000;
}

.accordion-item:last-child{
  border-bottom:1px solid #000;
}

.accordion-trigger{
  width:100%;
  background:none;
  border:none;

  padding:24px 0 26px;
  text-align: center;
  font-size: var(--font-size-m);
  line-height: 1.2;
  cursor:pointer;
  color: #000;
}

.accordion-item.open .accordion-trigger {
    color: #000;
}

.accordion-content{
  height:0;

  overflow:hidden;

  transition:height .45s ease;

  display:flex;
  flex-direction:column;

  gap:20px;
      max-width: 1200px;
    justify-self: center;
}

.accordion-item.open .accordion-content{
  padding-bottom:40px;
}

.accordion-content img{

  width:100%;

  height:500px;

  object-fit:cover;

}

.separator{
  font-size:24px;
}

.accordion-content h3{
  margin:0;
  font-size: var(--font-size-m);
  font-weight:400;
}

.accordion-content p{
  margin:0;
  max-width:700px;
  line-height:1.3;
  margin: auto;
  font-size: var(--font-size-s);
}


figcaption.img-caption {
    text-align: center;
    font-size: calc(var(--font-size-s) * 0.8);
}