/***** 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}
      */


      
      /***** common *****/
      * { margin: 0; font-family: Arial, Helvetica, "돋움", sans-serif; word-break: keep-all; }
      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 0.5s;
      }

      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;} /*temp*/

        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 {
          display: none;
          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 {
        margin:10px;
      }      
      div#archive:hover #archive_list{display: block;}

      div#archive_list {
        display: none;
        position: absolute;
        max-height:335px;
        width:200px;
        overflow-y: scroll;
        border: 1px solid;
        z-index: 10;
      }
      
      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:100px;
        background:#fff;
        border:1px solid;
        height: 30px;
      }

      img#icon_archive_more {width: 16px;}


      
      
      /***** 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);
        }

        div#fragment_wrapper {
          margin:10px;
        }

        div#introduction {
          margin:10px;
        }

        /*archive_list was here*/
        /* 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; */
        }

      }

      @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;}


      }


      /*  default */

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

      div#frags>a {
        display:none;
      }
      
      span.filename, figcaption {
        font-style: italic;
      }
    


      .image{width:80%; max-width: 600px;}
      .pdf object{width:100%;height: 600px;}
      .x-empty, .plain, .rtf, .unkown-file, .quicktime, video, .pdf{width:80%; max-width: 600px;}
      .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;} */
      video {width: 80%;max-width: 600px;}
      

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