@font-face {
  font-family: 'HalibutSerif';
  src: local('HalibutSerif-Expanded'), url('../woff2/HalibutSerif/HalibutSerif-Expanded.woff2') format('woff2');
}


* {
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  font-family: Pretendard ; 
  font-weight: 400;
  word-break: keep-all;
  overflow: hidden;
  background-color: #F5F5F5;   /**WhiteSmoke**/

}
header {
  height: 8.1vh ;
  background-color: #191970;  /**MidnightBlue**/
  color:  #F5F5F5;   /**WhiteSmoke**/
}

a {
  cursor: pointer;

}

.name, .palimpsest {
  float: left;
  width: 50vw;            
}    

.palimpsest {
  text-align: right;
}          

.nav {
  display: block;
  width: 35vw;
  height: 92vh;
  float: left;
  overflow-y: scroll;
}

.nav_index {
  display: block;
  width: 35vw;
  height: 92vh;
  float: left;
  overflow-y: scroll;
}

.zindex {
  width: 35vw;
  height: 92vh;
  position: absolute;
  z-index: 100;
  pointer-events: none;
  color: #191970;  /**MidnightBlue**/
}          

.tabulrasa {
  position: absolute;
  z-index: 3;
  left: 31vw;
  top: 97.5vh;
  color: #dcdcdc;
}

.home{ 
  display : none;
}

.tabulrasa_m {
  position: absolute;
  z-index: 2;
  left: 31vw;
  top: 97.5vh;
  color: #dcdcdc;
}            

.zindex > h1 {
  padding: 0 0 0 1vw;
}

.zindexz {
  width: 65vw;
  height: 92vh;
  left: 36vw;
  position: absolute;
  z-index: 100;
  pointer-events: none;
  margin-left: -2vw;
  font-family: 'HalibutSerif';
  text-align: right;
  color: #191970;  /**MidnightBlue**/
}          

.contents {
  width: 65vw;
  height: 92vh;
  float: left;
  overflow-y: scroll;
  overflow-x: hidden;
}

.contents_index {
  display: block;
  width: 65vw;
  height: 92vh;
  float: left;
}

.overlap > p {
  padding: 0 0 1vh ;
}

.overlap {
  padding: 0.5vh 0 0 0.5vw;
}

.before, .after  {
  width: 100%;
}

.before > h4, .before > img, .after  > h4, .after  > img  {
  padding-left: 0.5vw;
}

.main_text {
  width: 100%;
  width: 64vw;
}  

.main_text > p, .main_text > img, .main_text > video  {
  padding: 0 0 0.5vh 0.5vw;
}    

.small_header {
  position: sticky;
  top: 0;
  background: #F5F5F5;   /**WhiteSmoke**/
  padding: 0.5vw;
  width: 100%;
  color:  #000000;
  height: 8vh ;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  transition: all 0.6s ease 0s;
}

.small_header_sangdo {
  position: sticky;
  top: 0;
  background: #F5F5F5;   /**WhiteSmoke**/
  padding: 0.5vw;
  width: 100%;
  color:  #000000;
  height: 8vh ;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  transition: all 0.6s ease 0s;
}


.photograph_header {
  text-align: right;
  top: 0;
  background: #F5F5F5;   /**WhiteSmoke**/
  padding: 0.5vw;
  color:  #000000;
  height: 8vh ;
}

.Photograph {
  padding: 0 0.5vw 0.5vh 0.5vw;
}

.Photograph > p {
  padding: 0 0 0.7vh 0;
}

.jangja > p {
  text-align: right;
  padding: 0 0 0.7vh 0;
}

h1 {
  padding: 1vw;
  cursor:default;
  font-weight: 700; 
}

h2 {
  font-weight: 500;
  margin-bottom: 0.5vw;
}

h3 {
  font-weight: 500;
  padding: 0.5vh 0 0.5vh 0.5vw;
}     

h4 {
  font-weight: 500;
  padding-bottom: 0.5vw;
}  

h5 {
  font-weight: 500;
  font-size: 1vw;
}     

details {
  cursor:default;
  margin: 8px;
}

summary {
  font-size: 1.5vw;
  margin: 8px;
  outline: none;
}

summary::marker{
  content: "+ ";
}

details[open] summary::marker {
  content: "- ";
}

details[open] summary~details summary::marker {
  content: "+ ";
}

details[open] summary~details summary {
  font-size: 1.2vw;
}

details > ul > li > p, details > details > ul > li > p {
  font-size: 1vw;
}

details[open] summary~details[open] summary::marker {
  content: "- ";
}

summary~p {
  margin-left: 24px;
}

summary~details {
  margin-left: 16px;
}

sup {
  font-weight: 300;
}

p {
  line-height: -10vh;
}

details > summary > a:link,
details > summary > a:visited,
details > summary > a:hover,
details > summary > a:active
{
  color : #0000cd; /**MediumBlue**/
}

img, video {
  width: 63.5vw;
  padding-bottom: 0.5vw;
}


.Photograph > img {
  display: block;
  max-height: 80vh;
  width: auto;
  padding-bottom: 1vh;
}

li {
  margin-left: 40px;
  line-height: 28px;
}             

/**▼link▼**/
a:link {
  color : #0000cd; /**MediumBlue**/
}
a:visited {
  color : #8A2BE2; /**BlueViolet**/
}
a:hover {
  color : blue; 
}
a:active {
  color : #8A2BE2; /**BlueViolet**/
}

/**▼scroll▼**/
.nav::-webkit-scrollbar {
  width: 0.5vw;
}
.nav::-webkit-scrollbar-thumb {
  background-color: #191970;  /**MidnightBlue**/
}
.nav::-webkit-scrollbar-track {
  background-color: #F5F5F5;   /**WhiteSmoke**/  
}          
.nav_index::-webkit-scrollbar {
  width: 0.5vw;
}
.nav_index::-webkit-scrollbar-thumb {
  background-color: #191970;  /**MidnightBlue**/
}
.nav_index::-webkit-scrollbar-track {
  background-color: #F5F5F5;   /**WhiteSmoke**/  
}
.contents::-webkit-scrollbar {
  width: 0.5vw;
}
.contents::-webkit-scrollbar-thumb {
  background-color: #191970;  /**MidnightBlue**/
}
.contents::-webkit-scrollbar-track {
  background-color: #708090;   /**SlateGray**/  
}

.title, .daido, .date-wrap {
  display: none;
}


/**▼temp▼**/

.cm {
 position: absolute;
 font-size: 2.5vh;
  top: 40%;
  left: 17%;
  margin: -25px 0 0 -25px;
  text-align: center;

  }

.cm_title {
  font-weight: 600;
}

.cm_subtitle {
  font-weight: 300;
  margin: 1vh 0 0 0;
}


.cm_body {
  font-style: italic;
 font-weight: 500;
  margin: 2vh 0 2vh 0;
}

  
.cm_mail {
   font-weight: 300;
}




/**▼mobile▼**/

@media screen and (max-width: 600px) 
{                
  .nav_index {
    display: block;
    width: 100vw;
    height: 92vh;
    float: left;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  #nav_m {
    display : none;
  }

  #contents_index_m {
    display: none;
  }

  .name, .palimpsest {
    float: left;
    width: 46vw;
    padding: 1vh 2vw 0 2vw;
  }    

  .zindex > h1 {
    padding: 0 0 1vh 3vw;
  }

  .zindexz  > h5, .zindexz  > p {
    padding-right: 2vw;
  }      

  .zindexz > h5 {
    font-size: 5.5vw;
  }

  .zindexz > p {
    font-size: 1.5vh;
  }

  .tabulrasa {
    display : none ;
  }

  .home {
    display : inline-block;
    position: absolute;
    z-index: 2;
    left: 3vw;
    top: 95vh;
    color: #dcdcdc;
  }

  .tabulrasa_m {
    position: absolute;
    z-index: 2;
    left: 76vw;
    top: 95vh;
    color: #dcdcdc;
  }

  .small_header {
    padding-left: 2vw;
    height: 8vh
  }

  .small_header_sangdo {
    height: 12vh;
  }

  .small_header_sangdo > h2 {
    padding-right : 5vw;
  }

  .photograph_header  {
    padding-right : 3vw;
  }

  .contents {
    width: 100vw;
    height: 92vh;
    float: left;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .main_text {
    width: 96vw;
    padding: 2vw;
  }     

  .inside, .outside {
    width: 96vw;
    padding: 2vw;
  }  

  img, video {            
    width: 95vw;
    padding-bottom: 1vh;
    object-fit: cover;
  }

  .Photograph > img {          
    width: 96vw;
    padding: 2vw;
  }

  .Photograph > p {          
    padding: 0 2vw 0 2vw;
  }

  .jangja > p {
    text-align: right;
    padding: 0 2vw 0 2vw;
  }

  summary {
    font-size: 4.5vw;
    margin: 1vw;
    outline: none;
  }

  details[open] summary~details summary {
    font-size: 4vw;
  }

  details > ul > li > p, details > details > ul > li > p {
    font-size: 3.5vw;
  }


  summary:after {
    content: "+";
    float : left;
    margin: 0 1vw 0 0;
  }

  summary::-webkit-details-marker {
    display: none
  }

  summary::marker {
    display: none
  }

  details[open] summary:after {
    content: "-";
  }
  
  details[open] summary~details summary::after {
    content: "+ ";
  }

  details[open] summary~details[open] summary::after {
    content: "- ";
  }

  .home {
    text-decoration-line : none;
  }

  .home:link,
  .home:visited,
  .home:hover,
  .home:active    {
    color : #dcdcdc; 
  }

/**▼shodo▼**/

.warning {
  display : none
}

.daido {
  width: 75vw;
  height: 20vh;
  font-size: 1.6vh;
  text-align: left; 
  margin: 1vw;
  display: inline-block;
}
.title-wrap {
  width: 20vw;
  height: 20vh;
  margin: 1vw;
  text-align: center;
  display: inline-block;
}

.title {
  font-size: 8vh;
  display: block;

}
.date-wrap {
  display: block;
  height: 78vh;
  margin: 1vw;
  text-align: left; 
}

.date1 {
  display: inline;
  word-break: break-all;

   /* 애니메이션 */
  animation-name: arebureboke1;
  animation-duration:5s;
  animation-iteration-count:infinite;
  animation-direction:alternate-reverse;
}

.date2 {
  display: inline;
  word-break: break-all;

   /* 애니메이션 */
  animation-name: arebureboke2;
  animation-duration:6s;
  animation-iteration-count:infinite;
  animation-direction:alternate-reverse;
}


/**▼link▼**/
.date1 a, .date2 a:link {
  color : #0000cd; /**MediumBlue**/
}
.date1 a, .date2 a:visited {
  color : #0000cd; /**BlueViolet**/
}
.date1 a, .date2 a:active {
  color : #8A2BE2; /**BlueViolet**/
}

.date1 a, .date2 a {
  text-decoration-line: none;
}

@keyframes arebureboke1 {
  0%   { text-shadow: 0px 2px 1px grey; opacity: 0.6;  }
  70% { text-shadow: 0px 0px 1px black; opacity: 1;  }
  100% { text-shadow: 0px -2px 1px grey;opacity: 0.6;  }
}

@keyframes arebureboke2 {
  0%   { text-shadow: 0px -2px 1px grey; opacity: 0.6;  }
  70% { text-shadow: 0px 0px 1px black; opacity: 1;  }
  100% { text-shadow: 0px 2px 1px grey;opacity: 0.6;  }
}


}