/***** temp color *****/
      /* body                            {background-color: gray;}
      #menu                           {background-color: yellow;}
      #menu>span                      {background-color: green;}
      div#logo_wrapper                {background-color:cyan;}
      div#about_icon_wrapper          {background-color:orange;}
      div#timeline_icon_wrapper       {background-color: teal;}
      div#margin                      {background-color:brown;}
      div#fragments_wrapper           {background-color:skyblue;}
      div#about_wrapper               {background-color:skyblue;}
      p.col                           {background-color:navajowhite;}
      div#wrapper_sns                 {background-color:palevioletred;}
      div#wrapper_author              {background-color: palegreen;}
      div#fragment_wrapper            {background-color: burlywood;}
      div#introduction                {background-color: violet;}
      div#archive                     {background-color: grey;}      
      div#frags                       {background-color:skyblue;}
      div.frag                        {background-color:beige;}
      div.image                       {background-color:magenta}
      div.pdf object                  {background-color:mediumaquamarine}
      div.x-empty                     {background-color:mediumseagreen} 
      div#archive_exit                {background-color: rgba(123, 60, 99, 0.9)};
      */
     


      
      /***** common *****/
      * { margin: 0; font-family: Arial, Helvetica, "돋움", sans-serif; word-break: normal; }
      a, a:hover, a:visited {color:black;}
      .label {
        font-size: 24px;
        letter-spacing: 2px;
      }
      .shape                          {fill:none;} 

      #menu span a, #menu span a:visited {
        font-size: 18px;
        text-decoration: none;
      }

      #menu span a:hover, #menu span a:active, #menu span a:focus {
        text-decoration: underline;
        text-underline-position: under;
      }
      
      .col {
        font-size: 15px;
        line-height: 22.5px;
      }

      .list {
        font-size: 18px;
        line-height: 26px;
      }

      .focus {
        animation: rainbowLinkText 3s;
      }

      a.anchor {
        display: block;
        position: relative;
        visibility: hidden;
      }

      a:hover text, a:focus text, a:active text { animation-duration: 1s; animation-name: rainbowLink; animation-iteration-count: infinite; } 
      @keyframes rainbowLink {0% {fill: #ff2a2a;} 15% {fill: #ff7a2a;} 30% {fill: #ffc52a; }45% {fill: #43ff2a; }60% {fill: #2a89ff; }75% {fill: #202082; }90% {fill: #6b2aff; } 100% {fill: #e82aff; }}
      @keyframes rainbowLinkText {0% {color: #ff2a2a;} 15% {color: #ff7a2a;} 30% {color: #ffc52a; }45% {color: #43ff2a; }60% {color: #2a89ff; }75% {color: #202082; }90% {color: #6b2aff; } 100% {color: #e82aff; }}




      /***** mobile *****/

        /* MENU */
        #menu {
          width:100%;
          height:50px;
          padding-top:120px;
          position:fixed;
          z-index:10;
          text-align:left;
          /* padding-left:30px; */
          transition: 0.3s;
        }

        div#menu>span{ 
          font-size: 18px;
          top:20px;
          position:relative; 
          margin:5px;
        }

        div#menu>span#to_about{margin-left: 20px;}
        /* div#menu>span#to_timeline{display: none;}  */

        div#logo_wrapper {
          position:absolute;
          left: calc(50% - 50px);
          top: 10px;
        }
        img#logo_foh { width:100px; }
        
        div#about_icon_wrapper {
          position:fixed;
          left: 10px;
          top: 50px;
        }
        img#about_icon { width:80px; }

        div#timeline_icon_wrapper {
          position:fixed;
          right: 30px;
          bottom: 30px;
        }
        img#timeline_icon { width:100px; }

        div#margin {
          position:relative;
          height:180px;
        }

        div#wrapper_author {
          position:relative;
          padding:15px;
        }

        div#contents {
          position:relative;
          height:150px;
          padding:20px;
        }

        svg#author_frag {
          max-height: 400px;
          /* width:100% */
        }

        /* ABOUT ==> CODE OF CONDUCT  */
        a#wrapper_coc{
          display:block;
          width:120px;
          overflow-x: visible;
          margin-top:30px;
          margin-bottom:30px;
          text-decoration: none;
        }
        img#icon_coc {
          width: 80px;
          margin:10px;
        }

        /* ABOUT ==> SOCIAL MEDIA  */
        div#wrapper_sns {
          bottom:50px;
          left:100px;
          margin-top: 50px;
          padding-bottom: 50px;
        }
        img#icon_fb, img#icon_ig { height: 40px; margin-right:20px;}

        g {
          animation: anim_tranparency 0.3s;
      }

      /* FRAGMENT ==> AUTHOR ==> ARCHIVE DROP-DOWN */

      div#archive_exit {
        top:0px;
        z-index: 99;
        position: fixed;
        width: 100%;
        height: 100%;
      }      

      div#archive {
        margin:0px;
        position: fixed;
        bottom: 0px;
        width:100%;
        z-index: 100;
      }      

      div#archive_list {
        display: none;
        position: absolute;
        max-height:335px;
        width:100%;
        overflow-y: scroll;
        border: 1px solid;
        bottom: 40px;
        /* z-index: 10; */
        background:#fff;
      }
      
      div#archive_list a {
        display: block;
        background-color: #fff;
        border-top: 1px solid;
        padding: 6px 6px;
      }
      div#archive_list a:nth-child(1) {border-top: none;}
      
      button#archive_button{
        width:100%;
        background:#fff;
        border:1px solid;
        height: 40px;
        padding: 0px;
      }

      img#icon_archive_more {width: 16px;}


      a.anchor {
        top: -50px;
      }
      
      /***** pc *****/
      @media ( min-width: 780px ) {
        
        /* MENU */
        #menu {
          width:100%;
          height:100px;
          position:fixed;
          z-index:10;
          padding:0px;
        }

        div#menu>span {
          position:absolute;
          font-size: 18px;
          top:35px;
        }
        /* div#menu>span{  } */
        div#menu>span#to_about     {   left:95px;  }
        div#menu>span#to_fragments {   left:190px; }
        div#menu>span#to_timeline  {   right:105px; }

        div#logo_wrapper {
          position:absolute;
          left: calc(50% - 70px);
          top: 10px;
        }

        img#logo_foh { width:140px; }
        
        div#about_icon_wrapper {
          position:absolute;
          left: calc(50% - 200px);
          top: 50px;
        }
        img#about_icon { width:100px; }

        div#timeline_icon_wrapper {
          position:fixed;
          right: 30px;
          bottom: 30px;
        }
        img#timeline_icon { width:140px; }


        /* COMMON CONTENT AREA  */
        div#margin {
          position:relative;
          height:150px;
        }
        div#contents {
          position:relative;
          height:150px;
          padding:50px;
        }

        /* HOME ==> FRAGMENTS  */
        div#fragments_wrapper {
          height:calc(100vh - 250px);
        }

        /* ABOUT ==> CONTENTS  */
        div#about_wrapper {
          margin:50px;
        }

        p.col {
          display:inline-block;
          width:100%;
          margin-bottom: 50px;
        }
        p.col:nth-child(3) {margin-bottom: 100px;}

        /* ABOUT ==> CODE OF CONDUCT  */
        a#wrapper_coc{
          display:block;
          width:120px;
          overflow-x: visible;
          margin-top:30px;
          text-decoration: none;
        }
        img#icon_coc {
          width: 100px;
          margin:10px;
        }

        /* FRAGMENT ==> AUTHOR */
        div#wrapper_author {
          width: 300px;
          position: fixed;
          z-index: 10;
          left: 100px;
          height: calc(100% - 200px);
          overflow-y: auto;
        }

        div#fragment_wrapper {
          margin:10px;
        }

        div#fragment_wrapper > img {
          width: fit-content;
          min-width: 100px;
        }

        div#introduction {
          margin:10px;
        }

        /* FRAGMENT ==> AUTHOR ==> ARCHIVE DROP-DOWN */
        div#archive {
          width:140px;
          top: 100px;
          right: 115px;
          bottom: unset;
        }      

        div#archive:hover #archive_list{
          display: block;
        }

        div#archive_list {
          bottom:auto;
          top:30px;
          width:300px;
          right:0px;
          /* z-index: 10; */
        }
        button#archive_button{
          width:100%;
          background:#fff;
          border:1px solid;
          height: 30px;
        }

        /* img#icon_archive_more {width: 16px;} */



        /* FRAGMENT ==> CONTENTS */
        div#frags{
          position: absolute;
          /* background-color:skyblue; */
          left:480px;
          top:50px;
          width: calc(100% - 530px);
          /* height:2000px; */
        }

        div.frag{
          /* background:beige; */
          margin:10px;
        }

        div.png, div.jpeg {
          /* max-height:200px;
          max-width: 1000px; */
        }

        a.anchor {
          top: -200px;
        }

      }

      @media ( min-width: 1080px ) {
        /* ABOUT */
        p.col:nth-child(1) {margin-left: 0px;}

        p.col {
          display:inline-block;
          margin-left: 4%;
          width:30%;
          vertical-align:top;
        }

        /* ABOUT ==> SOCIAL MEDIA  */
        div#wrapper_sns {
          position: fixed;
          bottom:50px;
          left:100px;
        }
        img#icon_fb, img#icon_ig { height: 50px; margin-right:20px;}


        div#frags>div {
          margin-right:70px;
          max-width: 450px;
        }
      }


      /*  default */

      div#frags>div {
        margin-bottom: 30px;
        padding-top: 50px;
        display: inline-block;
        vertical-align: top;
        /* padding:20px; */
      }

      div#frags>a {
        display:none;
      }
      
      span.filename, figcaption {
        font-style: italic;
      }
    
      figure img{width:100%; max-width: calc(100vw - 40px)}
      video {width:100%; max-width: calc(100vw - 40px)}
      .x-empty, .plain, .rtf, .unkown-file, .quicktime, video, .pdf{width:100%; max-width: calc(100vw - 40px);}
      /* .pdf{width:100%; max-width: calc(100vw - 80px); height: 600px;}
      .x-empty, .plain, .rtf, .unkown-file, .quicktime, video, .pdf{width:100%; max-width: calc(100vw - 80px)} */
      .dir::before{content:"📁 ";font-size:18px;}
      .filename{display:block;font-family:mono;}
      .unkown-file::before{content:"📄 ";font-size:18px;}
      /* div{max-width: 640px;display:inline-block;vertical-align:top;margin:1em;padding:1em;} */
      /* .pdf object{width:100%; height: 450px;} */


      @keyframes anim_tranparency {
        0% {
        /* 투명도가 0, 즉, 보이지 않음*/
        opacity: 0;
        }
        /* 1초 기준 0.7부터 보이기 시작함*/
        70% {
        /* 투명도가 0, 즉, 보이지 않음*/
        opacity: 0;
        }
        /* 1초 기준, 0.9초에 완전히 보임*/
        90% {
        /* 투명도가 1, 즉, 보임*/
        opacity: 1;
        }
    }