html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select,
textarea {
  margin: 0;
}

html {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -ms-box-sizing: inherit;
  box-sizing: inherit;

  word-break: keep-all;
}

html, body {
  color: #000000;
  background-color: #fcfcfc;
  line-height: 1.8;
  font-family: 'authentic-sans-60', 'PretendardJP-Light', 'PyeojinGothic-Light', BlinkMacSystemFont, -apple-system, sans-serif;
  font-feature-settings: "tnum";

  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

ul, li {
  list-style-type: none;
}


li {
  vertical-align: middle;
}

em {
  font-style: normal;
  text-emphasis: "*" #000;
  text-emphasis-position: over;
}

/*small {
  font-family: "PyeojinGothic-Light";
}*/

/*dd {
  margin-inline-start: 0 !important;
}*/

/*span.corporation-nameplace {
  word-spacing: 0rem;
  font-size: 1.5rem;
}*/

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.quotation-marks {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

a.work:link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

a:hover {
  /*text-shadow: 0 0 0.125rem #696969;*/
}

span a#mitochondriaOfWww {
  color: #606060;
  text-shadow: 0 0 0.75rem #606060;
}

/*@keyframes blink-effect {
  50% {
    color: #606060;
  }
}

span a#mitochondriaOfWww {
  animation: blink-effect 2s step-start 0s infinite;
  -webkit-animation: blink-effect 2s step-start 0s infinite;
}
*/
span a#mitochondriaOfWww:hover {
  color: #fcfcfc;
  background-color: #606060;
  /*color: #fff;*/
  /*background-color: #606060;*/
  padding: 0.375rem 0 0.375rem 0;
}

a.external-link {
  border-bottom: 1px solid #000;
}

a.not-yet {
  opacity: 0.5;
}

a.not-yet:hover {
  cursor: not-allowed !important;
}

a.not-yet:hover::after {
  content: attr(id);
  display: block;
  position: fixed;
  z-index: 551;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 2rem;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.33;
  text-align: center;
  color: #000;
  text-shadow:
    0 1px 0 #b2beb5,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa;
}

@keyframes cornershaking {
  0% {
    border-radius: 2rem;
  }

  50% {
    border-radius: 0.5rem;
  }

  100% {
    border-radius: 1.9rem;
  }
}

a.co-operating-group {
  font-family: "Courier New" !important;
  font-size: 1rem;

  line-height: 1.8;

  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
}

a.co-operating-group:hover {
  opacity: 0.75;
}

/*a.co-operating-group {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;

  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  background-color: #f0f0f0;
  border: 1px solid #606060;

  animation-name: cornershaking;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation: cornershaking 2s infinite;

  font-size: 1em;
  line-height: 1.33;
}*/

#noDisplay {
  display: none;
}

body {
/*  position: relative;
  min-height: 100vh;
*/}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  display: none !important;
}

/*body::-moz-scrollbar {
  display: none !important;
}

.full-screen:-o-scrollbar {
  display: none !important;
}*/

dl, dt, dd {
  display: block;
}

header, main, footer, img {
  display: block;
}

table {
  border: none;
  line-height: 1.8;

  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: nowrap;
  flex-direction: column;
}

thead th {
  text-align: left;
  padding: 0 1rem 0 0;
  font-size: 1rem;
  font-weight: normal;
  text-align: left;;
  white-space: nowrap;
}

thead td {
  /*text-indent: -1rem;
  padding: 0 0 0 1rem;*/
  vertical-align: text-top;
}

tbody td {
  /*text-indent: 1rem;
  padding: 0 0 0 -1rem;*/
  vertical-align: text-top;
  text-align: left;
}

tbody td + td {
  padding: 0 0 0 1rem;
  vertical-align: text-top;
  text-align: left;
  width: calc(100% / 2);
}

tbody tr.blank {
  height: 1.8rem;
}

figure {
  margin-inline-end: 0;
  vertical-align: text-top;
  margin: 0 0 0 0;

  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}


ul#bitCarrierBag {
  display: block;
  margin: 3.6rem 0 0 0;
}

span#bitCarrierBag {
  display: inline-block !important;
  width: 1.8rem !important;
  height: 1.8rem !important;
  border-radius: 1rem;
}

/* limjinkwang.rocks comprehensive style */
.rocks {
/*  display: flex;
  flex-direction: column;*/
  height: 100vh;
}

.rocks-of-geosphere {
  /*position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;*/
  /*-ms-scrollbar-snap-type: y mandatory;
  scroll-snap-type: y mandatory;*/
}

.sphere {
  display: flex;
  display: -webit-flex;
  display: -ms-flexbox;
}


/* index.html-upsidedown */

div.lookalike {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;

  scrollbar-width: none;

  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  font-size: 1rem;
  line-height: 2.5rem;
  height: 2rem;
  z-index: 510 !important;
}

div.look-just-like-me {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;

  scrollbar-width: none;

  padding: 1rem;
}

div.look-like-me {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  flex-wrap: nowrap;
/*  align-items: flex-start;
  justify-content: flex-start;*/

  scrollbar-width: none;

  padding: 1rem;
  height: 100%;
}

div.tremors-and-echo-nearby {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;

  scrollbar-width: none;

  padding: 1rem;
  height: 100vh;
}

.monument {
  /*position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;*/
  font-size: 1rem;
  height: 5.4rem;
  flex: 0 0 5.4rem;
  z-index: 510 !important;

  /*margin: 0 0 3.4rem 0;*/
}

.monument:hover {
  cursor: pointer;
}

div.look-like-me footer,
div.tremors-and-echo-nearby footer {

  display: flex !important;
  flex-direction: column;
  
  margin: 3.6rem 0 0 0;
}

footer p#version {
  color: #606060;
}

footer p#version.thelunarcalendar {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;

  color: #606060;

  /*gap: 1rem;*/
  /*gap: 0.66ch;*/

  justify-content: flex-start;
  align-items: center;
}

/*footer p#version.thelunarcalendar>span:not(:last-child) {
  margin: 0 0.5rem 0 0;
} 
*/
footer p#version.thelunarcalendar>img:not(:last-child) {
  height: 1rem;
  width: 1rem;
  opacity: 0.66;

  margin: 0 0.375rem 0.25rem 0.375rem;
}

header.pebble {
/*  margin: 0 0.5rem 0.25rem 0;*/
  margin: 0 0.5rem 0 0;
}

footer.pebble {
  margin: 0 0.25rem 0.25rem 0.25rem;
}

main.pebble div#noDisplay {
  margin: 0 0.5rem 0.25rem 0.25rem;
}

@media screen and (max-width: 600px) {
  main.pebble div#noDisplay {
    margin: 0 0.5rem 0.5rem 0;
  }

  header.pebble {
    margin: 0 0.5rem 0 0;
  }

  footer.pebble {
    margin: 0rem 0 0 0.0625rem;
  }
}

.pebble .corporation-nameplace {
  font-size: 1.5rem;
  line-height: 1.33;
  padding: 0.2rem 0.5rem 0.15rem 0.25rem;
  margin: -0.4375rem 0.5rem 0rem 0rem;

  border-top: 1px solid #606060;
  border-right: 1px solid #606060;
  border-radius: 0.375rem;
}

/* .pebble .corporation-nameplace margin-top={(-0.375)+(-0.0625)}rem=-0.4375rem
.index-navigation .button-outside margin-top=(-0.0625)rem
 */

.pebble .corporation-nameplace:hover {
  /*text-shadow: 0 0 1.25rem #000;
  color: #606060;*/
  background-color: #f0f0f0;
  border-bottom: 1px solid #606060;
  border-right: 1px solid #606060;
/*  transform: translateX(-0.125rem);*/
}

.title {
  font-size: 1.5rem;
}

.title:hover {
  cursor: pointer;
}


/* 연약권asthenosphere과 암석권lithosphere */
.asthenosphere {
/*  background-color: #fff;*/
}

.lithosphere {
/*  background-color: #c9c9c9;*/
}

.slide-group {
  display: flex;
  display: -webit-flex;
  display: -ms-flexbox;
  height: 100%;
}

.slide {
  display: block;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  text-align: left;
}

.index-container {
  width: 100%;
  height: 100%;
  margin: 0 0 2rem 0;
  z-index: 111;
  padding: 0 0 16rem 0;
}

/* from-side-to-side-in-the-recursive-acronym */
.main {
  padding: 3rem 1rem 1rem 1rem;
  z-index: 10 !important;
}

.space-time {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  writing-mode: vertical-lr;

  margin: 1rem 0 0 0.5rem;
}

.moon figure {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: nowrap;
  width: 2rem;
}

.moon img {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.5rem 0.5rem 0.5rem 0;
}

.ephemera-paragraph:not(:last-child) {
  margin: 0 0 1rem 0;
}

.non-title {
  font-size: 1rem;
  margin: 1.8rem 0 2rem 1rem;
  text-indent: -1rem;
  z-index: 10 !important;
}

i.not-any-meaning {
  font-style: normal;
  filter: blur(0.125rem);
}


/* header */
.index-navigation,
.about-works-navigation {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.button-outside:hover {
  /*text-shadow: 0 0 1.25rem #000;
  color: #606060;*/
  background-color: #f0f0f0;
  border-bottom: 1px solid #606060;
  border-right: 1px solid #606060;
}

.index-navigation .close-button-outside:hover {
  cursor: zoom-out;
  text-shadow: 0 0 1.25rem #000;
}

.index-navigation .close-button-outside {
  font-size: 1.5rem;
  color: #f0f0f0;
  line-height: 1.33;
  padding: 0.15rem 0.5rem 0.15rem 0.5rem;
  margin: 0rem -0.5rem 0rem -0.25rem;

  display: block;

  border-radius: 0.25rem;

  z-index: 515 !important;
}


.index-navigation .button-outside {
  font-size: 1.5rem;
  line-height: 1.33;
  padding: 0.2rem 0.5rem 0.05rem 0.5rem;
  margin: 0 0 0.5rem 0;

  display: block;

  background-color: #f0f0f0;
  border: 1px solid #606060;

  border-radius: 0.25rem;

  z-index: 515 !important;

  white-space: nowrap !important;
}

.index-navigation .button-outside:not(:last-child) {
  font-size: 1.5rem;
  line-height: 1.33;
  padding: 0.2rem 0.5rem 0.05rem 0.5rem;
  margin: -0.15rem 0.5rem 0.5rem 0;
  display: block;

  background-color: #f0f0f0;
  border: 1px solid #606060;

  border-radius: 0.25rem;

  z-index: 515 !important;

  white-space: nowrap !important;
}

/*@media screen and (max-width: 600px) {
  .index-navigation .button-outside:not(:last-child) {
    font-size: 1.5rem;
    line-height: 1.33;
    padding: 0.125rem 0.5rem 0.125rem 0.5rem;
    margin: -0.0625rem 0.5rem 0.5rem 0;

    display: block;

    background-color: #f0f0f0;
    border: 1px solid #606060;

    border-radius: 0.25rem;

    z-index: 515 !important;
  }
}*/


.contact .button-outside {
  font-size: 1.5rem;
  line-height: 1.33;

  padding: 0.125rem 0.5rem 0.125rem 0.5rem;
  margin: -0.25rem 0.5rem 0.5rem 0;

  display: block;

  background-color: #f0f0f0;
  border: 1px solid #606060;

  border-radius: 0.25rem;

  z-index: 515 !important;
  text-align: center;
}

.contact div {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: nowrap;
}

.contact-area {
  font-size: 1.5rem;
  line-height: 1.2;
  padding: 0 0.75rem 0.75rem 0;
}

.mail-copy {
  font-size: 0.75rem;
  line-height: 1.25;
  padding: 0.125rem 0.25rem 0.125rem 0.25rem;
}

.about-works-navigation div.button-outside {
  font-size: 1.5rem;
  line-height: 1.33;
  height: 3rem;

  padding: 0.20rem 0.5rem 0.05rem 0.5rem;
  margin: 0 0 0.5rem 0;

  display: block;

  background-color: #f0f0f0;
  border: 1px solid #606060;

  border-radius: 0.25rem;

  white-space: nowrap;
}

.about-works-navigation div.button-inside {
  font-size: 1.5rem;
  line-height: 1.33;

  padding: 0.20rem 0.5rem 0.05rem 0.5rem;
  margin: 0 0 0.5rem 0;

  display: block;

  color: #606060;
  text-shadow: 0 0 1.25rem #000;
  background-color: #f0f0f0;
  border: 1px solid #606060;

  border-radius: 0.25rem;

  z-index: 515 !important;

  white-space: nowrap;
}

.about-works-navigation div.button-inside:hover {
  color: #000;
  background-color: #f0f0f0;
  border: 1px solid #606060;
  text-shadow: 0 0 1.25rem #fff;
}

details summary::marker,
details summary::-webkit-details-marker {
  display: none;
  content: "";
}

details select {
  /*-moz-appearance: none;*/
  -webkit-appearance: none;

  margin: 0 0 0 4rem;
  padding: 0;
  font-size: 1.5rem;
  font-family: inherit;
  color: #000;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
}

.between {
  height: 1rem;
}

.fragment {
  box-sizing: border-box;
  border-radius: 1rem;
  background-color: #000;
  color: #fff;
}

.fragment ul {
  padding: 0.25rem 0.75rem 0.25rem 0.75rem;
}
/* end */




/* works */
.grotto {
  float: left;
  width: 100%;
  height: auto;

  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;

  z-index: 10;

  flex: 0 0 0;

/*  box-sizing: content-box;*/
}

#memoir.grotto {
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 6fr));
  z-index: 111 !important;
}

@media screen and (max-width: 600px) {
  #memoir.grotto {
    display: grid;
    grid-gap: 3rem;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 6fr));
    z-index: 111 !important;
  }
}

@media screen and (max-width: 450px) {
  #memoir.grotto {
    display: grid;
    grid-gap: 3rem;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 6fr));
    z-index: 111 !important;
  }
}

.grotto-row {
  width: calc(100% - 2rem);
  padding: 0;

  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;

  z-index: 10;
}

.grotto-co-operating-header-each-page {
  position: relative;
  float: left;
  width: 100%;

  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;

  margin: 0 0 3.03020625rem 0;

  z-index: 10;
}

.grotto-header-each-page {
  position: relative;
  float: left;
  width: 100%;

  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;

  margin: 0 0 0 0;
  height: 5.4rem !important;

  z-index: 10;
}

.grotto-main-each-page {
  position: relative;
  float: left;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;

  z-index: 10;
}

.grotto-main-each-page div {
/*  display: inline-block;*/
  vertical-align: text-top;
}

.grotto-main-each-page .project-index-each div {
/*  display: inline-block;*/
  vertical-align: middle !important;
}

.grotto-main-each-page div#module img {
  width: 100%;
}

.grotto-main-each-page div#module {
  margin: 0 1.8rem 1.8rem 0;
}

.project-segment {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 1rem !important;
  left: 0 !important;
  background: transparent;
  z-index: 333 !important;
}
/*.grotto-main-each-page .project-segment {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0 !important;
  left: 0 !important;
  background: transparent;
}*/

/* damon zucconi box exercise */
/*.grotto-main-each-page dl#column {
  line-height: 1.5;
  width: fit-content;
}

.grotto-main-each-page div#row {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;

  justify-content: flex-start;
  -webkit-box-pack: start;

  margin: 0 0 -1px 0;
}

.grotto-main-each-page dt.top {
  border-radius: 0.25rem 0 0 0;
  border-top: 1px solid #000;
}

.grotto-main-each-page dd.top {
  border-radius: 0 0.25rem 0 0;
  margin: 1px 0 0 0;
}

.grotto-main-each-page dt.bottom {
  border-radius: 0 0 0 0.25rem;
}

.grotto-main-each-page dd.bottom {
  border-radius: 0 0 0.25rem 0;
}

.grotto-main-each-page dt {
  margin: 0 -1px 0 0;

  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  
  -webkit-box-align: center;
  align-items: center;

  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  border-bottom: 1px solid #000;
  border: 1px solid #000;
}

.grotto-main-each-page dd {
  flex: 1 1 0%;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  border-right: 1px solid #000;
  border: 1px solid #000;
}

.grotto-main-each-page dd div {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;

  justify-content: flex-start;
  align-items: center;
  -webkit-box-align: center; 
  -webkit-box-pack: start;
}*/
/* end */




/* with-works.html */
.work-index-container {
  width: 100%;
  height: 100%;
  margin: 0 0 3.6rem 0;
  z-index: 111;
}

p.text-title {
  font-size: 1.5rem;
  line-height: 1.33;
  min-height: 2rem;
  text-align: left;
  display: block;

/*  border-radius: 1rem;*/
  border-radius: 0.5rem;

  background-color: #f0f0f0;
  /*padding: 0.45rem 0.75rem 0.3rem 0.75rem;*/

  padding: 0.20rem 0.5rem 0.05rem 0.5rem;
  border: 1px solid #f0f0f0;
  
  /*white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;*/
}

.work-index-flex {
/*  flex: 1 1 0;*/

  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3.6rem 1.8rem;

  align-items: flex-start;
  justify-content: flex-start;
}

/*.work-index-flex li {
  flex: 1 1 0;
}*/

/*.work-index-grid {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(5, 1fr) !important;
  padding: 0 0 16rem 0;
}

@media screen and (max-width: 900px) {
  .work-index-grid {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr) !important;
    padding: 0 0 16rem 0;
  }
}

@media screen and (max-width: 750px) {
  .work-index-grid {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 0 0 16rem 0;
  }
}

@media screen and (max-width: 600px) {
  .work-index-grid {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 0 16rem 0;
  }
}*/

/*.work-index-grid a:hover {
  p.text-title {
    box-shadow: 0 0 0.5rem #d8d8d8;
  }

  .work-index {
    border: 1px solid #606060;
    padding: calc(10% - 1px);
    background-color: #f6f6f6;
  }
}*/

.work-index {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;

  flex-wrap: wrap;
  flex-direction: row;
  /*-webkit-box-pack: center;
  justify-content: center;

  text-align: center;
  align-items: center;

  background-color: #f6f6f6;
  padding: 10%;
  width: 100%;
  height: 100%;
  line-height: 1.2;
  aspect-ratio: 1 / 1;*/

  border-radius: 0.25rem;
}

.work-index-box {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;

  /*-webkit-box-pack: center;
  justify-content: center;

  text-align: center;
  align-items: center;*/

  width: 100%;
  height: 100%;
}


.work-index-box img {
  display: block;
  object-fit: contain;
  /*width: 100%;
  height: 100%;
  transform: scale(0.66, 0.66);*/
}

@media screen and (max-width: 600px) {
  .work-index figure {
    width: 100%;
    height: auto;
  }

  .work-index-box img {
    box-sizing: border-box;
    object-fit: contain;
    max-width: calc(100vw - 2rem);
    height: auto;
  }
}

.work-index-box img#whiteBackground {
  border: 1px solid #f0f0f0;
  box-sizing: border-box;
}

#withSlashAtworks li.work-index figure {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  flex-wrap: nowrap !important;
  margin: 0 0 0 0 !important;

  width: min-content;
}

.work-index figure {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column; !important;
  flex-wrap: nowrap !important;
  margin: 0 0 0 0 !important;
}

.work-index-box figcaption {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 0 0 0 !important;

  width: 100%;
  justify-content: flex-start;
/*  justify-content: center;*/
}

.work-index-element {
  width: fit-content;

  line-height: 1.33;
  margin: 0.5rem 0.5rem 0 0;
  padding: 0.3rem 0.5rem 0.2rem 0.5rem;
  border-radius: 0.5rem;
  border-top: 0.5px solid #ffffff;
  border-right: 0.5px solid #000000;
  border-bottom: 0.5px solid #000000;
  border-left: 0.5px solid #ffffff;
}

.work-index-element:hover {
  border: ;
  background-color: #f0f0f0;
  border-top: 0.5px solid #f0f0f0;
  border-right: 0.5px solid #f0f0f0;
  border-bottom: 0.5px solid #f0f0f0;
}

/* end 


/* with-works-each-page */
.work-each-page-container {
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 111;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.stones img {
  width: 2rem;
  height: 2rem;
  margin: 0 0 0 0.5rem;
  transform: scale(2.0, 2.0);
}
/* end */




/* back-and-forth-with-co-operating-works... project-list */
.project-index-container {
  width: 100%;
  height: 100%;
  margin: 0 0 0 0;
  z-index: 111;
}

.project-index-container picture {
  z-index: 5;
}

.project-index-each {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

/*.project-index-flex-row {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
}*/

.project-index-grid {
  display: grid;
  grid-gap: 1.8rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  padding: 0 0 0 0;
}

@media screen and (max-width: 750px) {
  .project-index-grid {
    display: grid;
    grid-gap: 1.8rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    padding: 0 0 0 0;
  }
}

@media screen and (max-width: 600px) {
  .project-index-grid {
    display: grid;
    grid-gap: 1.8rem;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    padding: 0 0 0 0;
  }
}

@media screen and (max-width: 450px) {
  .project-index-grid {
    display: grid;
    grid-gap: 1.8rem;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    padding: 0 0 0 0;
  }
}


.project-index-grid a:hover {
  cursor: pointer;
}

.project-index {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;

  flex-direction: column;

  width: 100%;

/*  padding: 0 1.5rem 1.5rem 0;*/
}

.project-index div {
  position: relative;
  box-sizing: border-box;
}

.left .category {
  position: relative;
  display: inline-block;
  z-index: 1;
  text-align: left;
}

.left .category div {
  display: inline-block;
  text-align: left;
}

.left .category p {
  font-size: 1rem;
  line-height: 2rem;
  height: 2rem;

  background-color: #f0f0f0;
  border: 1px solid #606060;
  border-bottom-width: 0;

  border-radius: 0.25rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0 0.75rem;

  white-space: nowrap;
}

.center .category {
  position: relative;
  z-index: 1;
  text-align: center;
}

.center .category div {
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
}

.center .category p {
  font-size: 1rem;
  line-height: 2rem;
  height: 2rem;

  background-color: #f0f0f0;
  border: 1px solid #606060;
  border-bottom-width: 0;

  border-radius: 0.25rem;
  padding: 0 0.75rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.right .category {
  position: relative;
  z-index: 1;
  text-align: right;
}

.right .category div {
  display: inline-block;
  text-align: right;
  box-sizing: border-box;
}

.right .category p {
  font-size: 1rem;
  line-height: 2rem;
  height: 2rem;

  background-color: #f0f0f0;
  border: 1px solid #606060;
  border-bottom-width: 0;

  border-radius: 0.25rem;
  padding: 0 0.75rem;
}

.left p.work-text-title {
  font-size: 1.5rem;
  line-height: 2rem;
/*  height: 3rem;*/

  display: block;
  /*overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;*/

  background-color: #f0f0f0;
  border: 1px solid #606060;

  padding: 0.5rem;
  border-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.left p.project-title {
  /*font-size: 1.5rem;
  line-height: 2rem;
  height: 3rem;
  width: 15rem;*/
  font-size: 1.5rem;
  line-height: 1.33;
  width: 100%;
  /*height: 3rem;
  width: 15rem;*/
  display: block;
  /*overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;*/

  background-color: #f0f0f0;
  border: 1px solid #606060;

/*  padding: 0.75rem 0.5rem 0.5rem 0.5rem;*/
  padding: 0.375rem 0.5rem 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.left p.project-title-each-page {
  font-size: 1.5rem;
  line-height: 1.2;
  width: 100%;
  display: block;
  /*overflow: hidden;
  white-space: wrap;
  word-break: keep-all;*/
  word-break: break-word;

  background-color: #f0f0f0;
  border: 1px solid #606060;

/*  padding: 0.5rem;*/
  padding: 0.5rem 0.5rem 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.center p.project-title {
  font-size: 1.5rem;
  line-height: 2rem;
  height: 3rem;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  background-color: #f0f0f0;
  border: 1px solid #606060;

  padding: 0.5rem;
  border-radius: 0.25rem;
}

.right .project-title {
  font-size: 1.5rem;
  line-height: 2rem;
  height: 3rem;
  width: 15rem;
  display: block;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  background-color: #f0f0f0;
  border: 1px solid #606060;

  padding: 0.5rem;
  border-radius: 0.25rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.left .caption {
  position: relative;
  z-index: 1;
  text-align: left;
}

.left .caption div {
  display: inline-block;
  text-align: left;
}

.left .caption div + div {
  margin: 0 0 0 0.5rem ;
}

.left .caption p.caption-script {
  font-size: 1rem;
  line-height: 2rem;
  height: 2rem;

  background-color: #f0f0f0;
  border: 1px solid #606060;
  border-top-width: 0;

  border-radius: 0.25rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 0 0.75rem;
}

.center .caption {
  position: relative;
  z-index: 1;
  text-align: center;
}

.center .caption div {
  display: inline-block;
  text-align: center;
}

.center .caption div + div {
  margin: 0 0.5rem 0 0 ;
}

.right .caption {
  position: relative;
  z-index: 1;
  text-align: right;
}

.right .caption div {
  display: inline-block;
  text-align: right;
}

.right .caption div + div {
  margin: 0 0 0.5rem ;
}
/* end */




/* field-note.html */
.note-index ul {
  display: grid;
  grid-gap: 3rem;
}

.note-head {
  display: flex;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  flex-direction: column;

  margin: 0 0 0 0;
}

.note-head img.bieutgal {
  max-width: 3.6rem;
  height: 3.6rem;
  border: 0 !important;
  border-radius: 3.6rem;
  background-clip: border-box !important;
}

.note-head h4.snap {
  width: 12rem;
  height: 12rem;
  border: 0 !important;
}

.note-head figcaption {
  margin: 0.9rem 0 0.9rem 0;
  font-family: monospace;
  color: #666;
}

.note-index ul h4 figure {
  margin: 1.8rem 0 0 0;
}

.note-index ul h4 img {
  max-width: 5rem;
  max-height: 5rem;
}

.note-index ul {
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 12fr));;
}

@media screen and (max-width: 750px) {
  .note-index ul {
    display: grid;
    grid-gap: 3rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 12fr));;
  }
}

@media screen and (max-width: 450px) {
 .note-index ul {
    display: grid;
    grid-gap: 3rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 12fr));
  }
}
/* end */


/* sunbeam-diary.html */
aside.metadata {
  display: flex;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  flex-direction: column;
}

/*.eight-letters-container {
  width: 100%;
  height: 100%;
  margin: 0rem 0 2rem 0;
  z-index: 111;
}

.ying-yang-container {
  width: 100%;
  height: 100%;
  margin: 0 0 2rem 0;
  z-index: 111;
}

.wu-xing-container {
  width: 100%;
  height: 100%;
  margin: 0 0 2rem 0;
  z-index: 111;
}*/

#mindful-activity {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
}

/*div#sunbeam.approach-list:hover {
  border: 1px solid #606060;
  border-radius: 0 !important;
  box-shadow: 0 0 0 !important;
}*/

div#stumble,
div#field,
div#sunbeam {
  font-size: 1.5rem;
  line-height: 1.33;
  min-height: 2rem;
/*  height: 3rem;*/
  text-align: left;
  display: block;
  /*overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;*/
  /*  width: 15rem;*/

  border-radius: 0.5rem;

  background-color: #f0f0f0;
  padding: 0.20rem 0.5rem 0.05rem 0.5rem;
  border: 1px solid #f0f0f0;
/*padding: 0.375rem 0.75rem 0.375rem 0.75rem;*/

/*  padding: 0.25rem 0.75rem 0.25rem 0.75rem;*/
/*  box-shadow: 0 0 0.5rem #606060;*/
}

/* 월백색 */
/*div#sunbeam.approach-list-done {
  color: #c7cdd1; 
}*/

div#supplier {
  font-size: 1.5rem;
  line-height: 2rem;
  height: 3rem;
  width: 15rem;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  background-color: #f0f0f0;
  border: 1px solid #606060;

  padding: 0.5rem;
  border-radius: 0.25rem;
}

div#soiled {
  font-size: 1.5rem;
  line-height: 2rem;
  height: 3rem;
  width: 15rem;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  border-radius: 1rem;

  background-color: #f0f0f0;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  box-shadow: 0 0 0.5rem #606060;
}

sub {
  display: inline-block;
  vertical-align: baseline;
  font-size: 1rem;
  line-height: 0.75rem;
  margin: 0 0rem 0 0.25rem;
}

li#sunbeam-record {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  float: left;
}

#sunbeam-record figure {
  height: 8rem;
}

#sunbeam-record img {
  width: 5rem;
  height: 5rem;
  border: 0;
  border-radius: 2.5rem;

  vertical-align: middle !important;

  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -ms-background-clip: border-box !important;
  /*-moz-background-clip: border-box !important;*/
}

#sunbeam-record img:hover {
  opacity: 0.75;
  box-shadow: 0 0 0.125rem 0.25rem #ffcc33;
}

#sunbeam-record img.going-out-nowhere-today {
  width: 5rem;
  height: 5rem;
  border-radius: 2.5rem;
  border: 0 !important;
  background-color: #f0f0f0;
}

#sunbeam-record img.no-record-here {
  width: 5rem;
  height: 5rem;
  border-radius: 2.5rem;
  border: 0;
  background-color: #f0f0f0;
}

#sunbeam-record img.going-out-nowhere-today:hover {
  box-shadow: inset 0 0 0.125rem 0.25rem #606060;
}

#sunbeam-record img.no-record-here:hover {
  box-shadow: inset 0 0 0.125rem 0.25rem #e9d66b;
}

#sunbeam-record img.did-you-feel-it:hover {
  box-shadow: 0 0 0.125rem 0.25rem #0d98ba;
}

#sunbeam-record figcaption {
  font-size: 0.75rem;
  margin: 0.5rem 0 0 0;
  text-align: center;
  line-height: 1.33;
  width: 100%
}

/* end */




/* with-works -- work-list */
.work-index-container {
  z-index: 1 !important;
  padding: 0 0 8rem 0;
}

.mass {
  position: relative;
  display: block;
}

.mass .metadata {
  color: #a0aba2;
}

.mass ul {
  border-bottom: 1px solid #000;
}

.mass li {
  padding: 0 0 0.5rem 0;
}

.mass span {
  vertical-align: text-top;
  line-height: 1.4rem;
}

.index-project a {
  border-bottom: 1px solid #000;
}

@media screen and (max-width: 750px) {
    .index-title {
    display: inline-block;
    width: calc(100vw / 4);
    margin: 0 2rem 0 0;
  }

  .index-type {
    display: inline-block;
    width: calc(100vw / 6);
    margin: 0 1rem 0 0;
  }

  .index-topic {
    display: inline-block;
    width: calc(100vw / 6);
    margin: 0 1rem 0 0;
  }

  .index-year {
    display: inline-block;
    width: calc(100vw / 24);
    margin: 0 0 0 0.5rem;
  }
}

.index-title {
  display: inline-block;
  width: calc(100vw / 3);
  margin: 0 2rem 0 0;
}

.index-type {
  display: inline-block;
  width: calc(100vw / 6);
  margin: 0 1rem 0 0;
  word-break: break-word;
}

.index-topic {
  display: none;
  width: calc(100vw / 6);
  margin: 0 1rem 0 0;
}

.index-year {
  display: inline-block;
  width: calc(100vw / 24);
  margin: 0 0 0 0.5rem;
}
/* end */




/* with-slash-at-works--project--each page */
/* with-slash-at-works--work--each-page */
.grotto-main-each-page summary#month {
  width: 5rem;
  height: 5rem;
  font-size: 1rem;
  line-height: 1.2;
  background-color: #f0f0f0;
  vertical-align: middle;
  text-align: center;
  border-radius: 0;
  border: 1px solid #f0f0f0;
}

.grotto-main-each-page summary#month:hover {
  cursor: pointer;
  border-radius: 0.25rem;
  border: 1px solid #606060;
}

summary#month p {
  padding: 1.3rem 0 1.3rem 0;
}

.grotto-main-each-page img#whiteBackground {
  border: 0.5px solid #f0f0f0;
  box-sizing: border-box;
}

/* log형 문서들 <div id="log" class="look-like-me"> 예: 햇살일지 */
#log .grotto-main-each-page ul {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;

  flex-wrap: wrap;
}
/* end */

.grotto-main-each-page #column:not(:last-child) {
  margin: 0 0 3rem 0;
}


.documentation-wrapper section.brief {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.8rem;
}

.documentation-wrapper section.inandout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.8rem;
  /*display: flex !important;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1.33rem;*/
}

.documentation-wrapper section.liminal {}

.documentation-wrapper section.relata-flex-wrap {
  display: flex !important;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 1.8rem;
}

.documentation-wrapper section.relata h4 {
  margin: 0;
  padding: 0;
}

.documentation-wrapper section.relata ul {
  display: flex !important;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
}

.relata-entry { 
  border-radius: 100%;
  line-height: 1.33;

  color: #000;
  box-shadow: -5px -3px 5px 0 #f0f0f0;

  display: flex !important;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: center;
  align-items: center;

  text-align: center;
  display: inline-block;
  font-family: "PyeojinGothic-Light" !important;
  /*font-family: monospace !important;*/
  word-spacing: 1ch;
}

.relata .relata-entry:hover {
  color: #000;
  background-color: #f0f0f0;
  border: 1px solid #f0f0f0;
  box-shadow: 0 0 0 0;

  /*cursor: context-menu;*/
  cursor: alias;
}

.relata .relata-container {
  display: flex !important;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: flex-start;
  align-items: flex-start;

  flex-wrap: wrap;
  gap: 1.8rem;

}

section.exercise-book {
  display: flex !important;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: nowrap;
  flex-direction: column;
  gap: 1.8rem;

  cursor: crosshair;
}

section.exercise-book div.paper {
  display: flex !important;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 0rem;
}

/*section.exercise-book div.paper img#thing:hover {
  cursor: 1.8rem;
}*/

section.inandout #imageAttachment {
  display: flex !important;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  gap: 1.33rem;
  text-align: center;
}

section.inandout #press {
  columns: 12rem 2;
  column-gap: 1.8rem;
}

section.inandout #press p + p {
  margin: 1.8rem 0 0 0;
}

section.inandout .images {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: 1.8rem;
}

section.inandout .image figure#long img,
section.inandout .images figure#long img,
section.inandout .image figure#longbutnarrow img,
section.inandout .images figure#longbutnarrow img {
  min-height: 24rem;
  height: 50vh;
  width: auto;
}

/*section.inandout .image figure#long img,
section.inandout .images figure#long img,
section.inandout .image figure#longbutnarrow img,
section.inandout .images figure#longbutnarrow img {
  width: auto;
  height: 40vw;
}*/

section.inandout .image figure#fullwidth img,
section.inandout .images figure#fullwidth img  {
  /*width: 100%;
  height: auto;*/
}


section.inandout .image div#motifContainer img {
  width: auto;
  height: 3.6rem;
}

/*section.inandout .metadata {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.8rem;
}*/

section.inandout .metadata {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  text-align: left;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-width: 14.4rem;
  -webkit-column-width: 14.4rem;
  -moz-column-width: 14.4rem;
  column-gap: 1.8rem;
  -webkit-column-gap: 1.8rem;
  -moz-column-gap: 1.8rem;
}

.metadata dl:not(:last-child) {
  margin: 0 0 1.8rem 0;
}

.metadata dl {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;

  width: fit-content;

  margin: 0;
}

.metadata dl div.specification-entry {
  border-top: 0.5px solid #606060;
  border-right: 0.5px solid #606060;
  border-bottom: 0.5px solid #606060;
  border-left: 0.5px solid #606060;
  margin: -0.5px -0.5px -0.5px -0.5px; 

  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: nowrap;

  align-items: center;
  justify-content: flex-start;
}

.metadata dl div.specification-entry dd div {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;

  justify-content: flex-start;
  align-items: center;
  -webkit-box-align: center; 
  -webkit-box-pack: start;

  box-sizing: border-box;
  width: 100%;

  line-height: 1.8 !important;
}

.metadata p:not(:last-child) {
  padding: 0 1.8rem 1.8rem 0;
}

.metadata p {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;

  margin: 0 1.8rem 0 0;
  margin: 0 0 0 0;
}

.metadata figure {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;

  margin: 0 0 0 0;
  margin: 0 0 0 0;
}

.metadata figure:not(:last-child) {
  margin: 0 0 1.8rem 0;
}


.metadata dl:not(:last-child) {
  margin: 0 0 1.8rem 0;
}

.metadata dt {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  -webkit-box-align: center;
  align-items: center;
  
  /*min-width: 8ch;*/
  padding: 0 0.5rem 0 0.5rem;
  margin: 0;
  line-height: 1.8 !important;
}

.metadata div#resourceChunk h3:not(:last-child) {
  padding: 0 !important;
}

.metadata h3:not(:last-child),
.metadata h4:not(:last-child),
.metadata h5:not(:last-child),
.metadata h6:not(:last-child) {
  padding: 0 1.8rem 1.8rem 0;
}

.metadata h3,
.metadata h4,
.metadata h5,
.metadata h6 {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;

  margin: 0 1.8rem 0 0;
  margin: 0 0 0 0;
}

.metadata dd {
  padding: 0 0.5rem 0 0.5rem;

  /*border-top: 0.5px solid #606060;
  border-right: 0.5px solid #606060;
  border-bottom: 0.5px solid #606060;*/
  border-left: 0.5px solid #606060;

  margin: 0 0 0 -0.5px;
  line-height: 1.8 !important;
}

.metadata dl button {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -moz-box-align: center;
  align-items: center;
  justify-content: center;

  font-family: "PyeojinGothic-Light";
  background-color: transparent;
  border-width: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: #000;

  user-select: all;
  -webkit-user-select: all;

  border-left: 0.5px solid #606060;
  border-right: 0.5px solid #606060;
  border-bottom: 0.5px solid #606060;
  margin: 0 -0.5px -0.5px -0.5px;

  width: calc(100% + 1px);
}

.metadata ul:not(:last-child) {
  padding: 0 0 1.8rem 0;

  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 0;
}

.metadata ul > li {
  /*padding: 0 0 0 0.9rem;
  text-indent: -0.9rem;*/
  padding: 0 0 0 1ch;
  text-indent: -1ch;
}

.metadata div#resourceChunk {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;

  margin: 0 1.8rem 1.8rem 0;
}

section.inandout .image {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.image .solo {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  /*flex-direction: row;
  justify-content: flex-end;*/
  flex-flow: row-reverse wrap;
  gap: 1.33rem;

  width: 100%;
}

/* back-and-forth-with-co-operating-works */
section.info .metadata {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  text-align: left;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-width: 28.8rem;
  -webkit-column-width: 28.8rem;
  -moz-column-width: 28.8rem;
  column-gap: 1.8rem;
  -webkit-column-gap: 1.8rem;
  -moz-column-gap: 1.8rem;
}

/*.image figure {
  flex: 1 1 0;
}*/

.image figure + figure {
  margin: 0 0 0 1.8rem;
}

.image figure#long + figure#long {
  margin: 1.8rem 0 0 0;
}
/*section.inandout .image figure:not(:last-child) {
  margin: 0 0 1.8rem 0;
}*/

/*section.inandout .image div#motifContainer:not(:last-child) {
  padding: 0 0 1.8rem 0;
}*/

section.inandout .image div#motifContainer {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 0;

  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;

  gap: 1.8rem;
}

/*section.inandout .image div#motifContainer figure {
  margin-inline-end: 0;
  vertical-align: text-top;
  margin: 0 0 0 0;

  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}*/

section.inandout p#motifContainer img {
  float: left;
  margin: 0.3rem 0.9rem 0.6rem 0;
}

section.inandout .image img#cut {
  border-radius: 0rem;
}

/*section.passage {
  padding: 1.8rem 0 0 0;
  border-top: 1px solid #000;
}*/

section.passage p {
  padding: 0 1.8rem 1.8rem 0;
}

section.passage p#slides img {
  height: 20vw;
  width: auto;
}

section.passage p#wideslides img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 750px) {
  section.passage p#slides img {
    width: 50vw;
    height: auto;
  }
}


@media screen and (max-width: 600px) {
  section.passage p#slides img {
    width: 90vw;
    height: auto;
  }
}

section.inandout img.wide-spread,
section.passage img.wide-spread {
  width: 100%;
  height: auto;
}

section.passage img {
  height: 25vw;
  width: auto;
}

section.passage figure#long img {
  width: 100%;
  height: auto;
  /*height: 36vw;*/
}

p#address,
section#address {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

section.depict {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  text-align: left;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-width: 18rem;
  -webkit-column-width: 18rem;
  -moz-column-width: 18rem;
  column-gap: 1.8rem;
  -webkit-column-gap: 1.8rem;
  -moz-column-gap: 1.8rem;
}

section.depict p {
  padding: 0 1.8rem 0 0;
}

/*.documentation-wrapper section.passage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.8rem;
}*/

/*section.inandout .image img,
section.inandout .images img {
  width: auto;
}*/

section.inandout .images img {
  max-width: 100%;
  height: auto;
  
  margin: 0;
  padding: 0;
}

section.inandout .image img,
section.close img {
  max-width: 100%;
  height: auto;
  
  margin: 0;
  padding: 0;
}

.documentation-wrapper section.passage p {
  flex-basis: 100%;
  margin: 0;
  padding: 0;
}

.documentation-wrapper section.passage p:not(:last-child) {
  margin: 0 0 1.8rem 0;
}

.documentation-wrapper section.passage p#slides {
  width: 100%;
  padding: 0 !important;

  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 3.6rem;
  column-gap: 1.8rem;
}

.documentation-wrapper section.passage p#wideslides {
  width: 100%;
  padding: 0 !important;

  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: nowrap;
  flex-direction: column;
  gap: 1.8rem;

  margin: 0 0 3.6rem 0;
}

.documentation-wrapper section.passage p#specific,
.documentation-wrapper section.passage div#specific {
  width: 100%;
  padding: 0 !important;

  /*display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 1.8rem;*/
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.8rem;
}

.documentation-wrapper section.passage div#specific:last-child {
  padding: 1.8rem 0 0 0 !important;
}

@media screen and (max-width: 750px) {
  .documentation-wrapper section.passage div#specific:last-child {
    padding: 0 !important;
    margin: 0 !important;
  }
}

/*@media screen and (max-width: 1300px) {
  section.inandout img#wide,
  section.passage img#wide,
  section.close img#wide {
    width: 100%;
    height: auto;
  }

  section.inandout img#whiteBackgroundWide,
  section.passage img#whiteBackgroundWide,
  section.close img#whiteBackgroundWide {
    width: 100%;
    height: auto;
    border: 0.5px solid #f0f0f0;
  }
}*/

@media screen and (max-width: 900px) {
  .documentation-wrapper section.inandout {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    grid-gap: 1.8rem;
  }

  section.inandout .metadata p#alttext {
    width: 100% !important;
    float: left;
  }

  section.inandout .metadata {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }

  /*section.inandout .image img {
    width: 100%;
    height: auto;
  }*/

  /*section.inandout .image figure#long img {
    width: auto;
    height: 56vw;
  }*/

  section.inandout #press {
    columns: 12rem 2;
    column-gap: 1.8rem;
  }

  section.inandout #press p + p {
    margin: 1.8rem 0 0 0;
  }

  section.passage figure#long img {
    width: auto;
    height: 40vw;
  }
}

@media screen and (max-width: 750px) {
  .documentation-wrapper section.inandout,
  .documentation-wrapper section.close {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    grid-gap: 1.8rem;
  }

  section.inandout #press {
    columns: auto 1;
  }

  section.passage img {
    width: auto;
    height: 30vw;
  }

  .documentation-wrapper section.passage p#slides,
  .documentation-wrapper section.passage p#wideslides,
  .documentation-wrapper section.passage div#specific {
    width: 100%;
    padding: 0 !important;

    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1.8rem;
  }

  .documentation-wrapper section.passage div#specific figure img {
    margin-inline-end: 0;
    vertical-align: text-top;
    margin: 0 0 0 0;

    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 600px) {
  .documentation-wrapper section.inandout,
  .documentation-wrapper section.passage,
  .documentation-wrapper section.close {
    display: flex !important;
    display: -webkit-flex;
    display: -ms-flexbox;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
  }

  .documentation-wrapper section.passage {
    display: flex !important;
    display: -webkit-flex;
    display: -ms-flexbox;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
  }

  section.inandout .image img {
    width: auto;
    height: 63vw;
  }

  section.inandout .image figure#long img {
    width: auto;
    height: 60vw;
  }

  section.inandout #press {
    columns: auto 1;
  }

  section.passage figure#long img {
    width: 52vw;
    height: auto;
  }

  section.passage img {
    width: 48vw;
    height: auto;
  }
}

img.small {
  display: block;
  max-width: 16rem;
  height: auto;
}

.image img {
  display: block;
  /*width: 100%;
  height: 100%;*/
}

.metadata p {
  margin: 0 0 1.8rem 0;
  line-height: 1.8;
}

/*.metadata p {
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}*/


/* back-and-forth-with ... / image display */
.documentation-wrapper section.display {
  /*-webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;*/

  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;

  gap: 1.8rem;

  margin: 0 auto 0 atuo;
  width: 100%;

  /*display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 2fr));
  grid-gap: 1.8rem;*/
}


.documentation-wrapper section.display figure {

}

.documentation-wrapper section.display figure img {
  width: 24vw;
  min-width: 12rem;
}

/*.documentation-wrapper section.display p {
  flex-basis: 100%;
  margin: 0;
  padding: 0;
}*/

@media screen and (max-width: 600px) {
  .documentation-wrapper section.display {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
}


/* at-works / setences */
div.tremors-and-echo-nearby {}


/*.documentation-wrapper section.essay {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 1.8rem;
}

.documentation-wrapper section.essay .text {
  grid-column-start: 5;
  grid-column-end: 9;
}*/

.documentation-wrapper h3#title {
  text-align: center;
  margin: 0 0 0 0;
}

.documentation-wrapper h4#title {
  margin: 0 0 0 1.8rem;
}

.documentation-wrapper section.essay .text {
  margin: 0 auto 0 auto;
  max-width: 56ch !important;

  /*column-count: 3;
  column-gap: 1.8rem;

  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;*/
}


.documentation-wrapper section.essay .text p + p {
  margin: 1.8rem 0 0 0;
}

.documentation-wrapper section.info {
  /*display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 1.8rem;*/

  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  text-align: left;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-width: 14.4rem;
  -webkit-column-width: 14.4rem;
  -moz-column-width: 14.4rem;
  column-gap: 1.8rem;
  -webkit-column-gap: 1.8rem;
  -moz-column-gap: 1.8rem;

  
  /*max-width: 56ch !important;*/

  /*width: 100%;
  margin-left: auto;
  margin-right: auto;*/

  /*display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.8rem;*/
}


.documentation-wrapper section.info .metadata dl {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 0;
}

.documentation-wrapper section.info .metadata dl:not(:last-child) {
  margin: 0 0 1.8rem 0;
}

.documentation-wrapper section.info .text {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 0;
}

.documentation-wrapper section.info .text p {
  margin: 0 1.8rem 0 0;
}

.documentation-wrapper section.info .text p:not(:last-child) {
  margin: 0 1.8rem 1.8rem 0;
}

@media screen and (max-width: 950px) {
  section.essay {
    /*display: grid;
    align-items: flex-start;
    grid-template-columns: 1fr 1fr;
    grid-gap :1.8rem;*/
    /*columns: 16rem 3;
    column-gap: 3.6rem;*/

    column-count: 2;
    column-gap: 1.8rem;

    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  section.essay .text {
    max-width: 28rem !important;
    margin: 0 auto 0 auto;
  }

  .documentation-wrapper section.info {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 1.8rem;
  }

  .documentation-wrapper section.info .text {
    max-width: 56ch;
  }
}

@media screen and (max-width: 600px) {
  section.essay {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 1.8rem;
  }
}

/*@media screen and (min-width: 900px) { 
  section.essay h3 {
    position: sticky;
    left: 1rem;
    top: 1rem;
  }
}*/

.source {
  font-size: 0.80rem;
  line-height: 1.33;
  padding: 0 0 0.736rem 0;
  color: #606060;
}

.first-list {
  margin: 0;
}

.not-first-list {
  margin: 0;
  text-indent: 1rem;
}

section.essay .image {
  width: 100%;
  display: flex !important;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: flex-start;
  align-items: flex-start;
}

/*.documentation-wrapper section.passage figure + figure {
  margin: 1.33rem 1.33rem 0 0;
}*/

/*@media screen and (min-width: 900px) {
  .documentation-wrapper section {
    column-count: 3;
    column-gap: 1.5rem;
  }
}

.documentation-wrapper section.inandout,
.documentation-wrapper section.passage,
.documentation-wrapper section.close {
  -webkit-column-avoid: avoid;
  page-break-inside: avoid;
  break-inside: avoid;

  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: center;
}*/

/*.documentation-wrapper.intro {
  column-count: 3;
  column-gap: 1.5rem;
}

.documentation-wrapper.middle {
  column-count: 2;
  column-gap: 1.5rem;
}

.documentation-wrapper.outro {
  column-count: 3;
  column-gap: 1.5rem;
}
*/

.documentation-wrapper section:not(:last-child) {
  margin: 0 0 3.6rem 0;
}

.documentation-wrapper:not(:last-child) {
  margin: 0 0 3.6rem 0;
}

.documentation-joint {
  width: 100%;
  margin: 0 0 3.6rem 0;
  padding: 0 1rem 0 1rem;
  border: 0.5px solid #f0f0f0;
}

.documentation-wrapper {
  width: 100%;
}

/*.document div {
  margin: 0 1.5rem 1.5rem 0;
}*/

.documentation-wrapper article {
  width: 100%;
  margin: 0 0 3rem 0;
}

.documentation-wrapper p {
  margin: 0 0 0 0;
}

.documentation-wrapper .metadata li:not(:last-child) {
  margin: 0 0 0 0 !important;
}

.documentation-wrapper li:not(:last-child) {
  margin: 0 0 1.8rem 0;
}

/*.documentation-wrapper li:last-child {
  margin: 1.8rem 0 0rem 0;
}*/

.documentation-wrapper video {
  border: 0.5px solid #000;
  max-width: 24vw;
  filter: drop-shadow(0 0.25rem 0.25rem 0.25rem #b2b2b2);
}

.documentation-wrapper figcaption {
  font-size: 1rem;
  margin: 0.9rem 0 0 0;
}

.documentation-wrapper .doummal img {
  display: block;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 10rem;
}

.documentation-wrapper .doummal {
  margin: 0;
}

@media screen and (max-width: 600px) {
  div.w75 {
    width: calc(100% - 2rem) !important;
  }
}

@media screen and (max-width: 600px) {
  div.w50,
  div.w33,
  div.w24,
  div.w12 {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    width: calc(100% - 2rem) !important;
  }
}

div.w12 {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  width: 12vw;
}

div.w24 {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  width: 24vw;
}


div.w33 {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  width: 31.33vw;
}

div.w50 {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  width: 50vw;

/*  flex: 50 0 50vw;*/
}

div.w75 {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  width: 75vw;

/*  flex: 75 0 75vw;*/
  padding: 0 0 4rem 0;
}

span.point {
  font-size: 1rem;
  line-height: 1.33;
}

a#expired span.unit {
  word-break: break-word;
  color: #606060;
  background-color: #efefef !important;
}

.unit {
  word-break: break-word;
  color: #ffffff;
  background-color: #606060;
}

.indent {
  margin: 0 0 0 1.8rem;
}

sup.publish-information {
  font-size: 0.75rem;
  vertical-align: middle;
  margin: 0 0 0 0.5rem;
}

sup.sole-publish-information {
  font-size: 0.75rem;
  vertical-align: middle;
  margin: 0 0 0 0rem;
}

/*div.category-title {
  font-size: 1rem;
  line-height: 1;
  margin: 1rem 0 1rem 0.75rem !important;
}*/

span.part {
  font-size: 1.5rem;
}

/*span#situation {
  border-bottom: 0.5px dashed #000;
  font-size: 1rem;
  line-height: 1.33;
  text-align: left;
  padding: 0.125rem 0 0.125rem 0;
  margin: 0 0 0 0.125rem;
}*/

/*.information,
.paratext {
  margin: 0 0 1.8rem 0;
  vertical-align: text-top;
}*/

/*.information caption,
.paratext caption {
  font-size: 1.5rem;
  text-align: left;
  margin: 0 0 1vw 0;
}*/

.information th,
.information td,
.paratext th,
.paratext td {
  font-weight: normal;
  padding: 0 1rem 0 0;
  vertical-align: text-top;
  text-align: left;
}

.information th {
  width: 8ch !important;
}

.information tr,
.paratext tr {
  margin: 0.5rem 0 0.5rem 0;
}

.information small,
.paratext small {
  font-size: 0.75rem;
  vertical-align: baseline;
}

.documentation li + li {
  margin: 1.8rem 0 0 0;
}

small.entity {
  border-bottom: 0.5px solid #000;
}

/*.supplier {
  display: block;
  padding: 18rem 0 0 0 !important;
}*/

.supplier {
  flex: 1 0 50vh;
  /*padding: 18rem 0 0 0 !important;*/
}


@media screen and (max-width: 600px) {
  .supplier {
    flex: 1 0 37.5vh;
  }
}

.supplier-for-small-size {
  display: block;
  padding: 0 !important;
}

@media screen and (max-width: 1200px) {
  .supplier-for-small-size {
    display: block;
    flex: 1 0 37.5vh;
    /*padding: 18rem 0 0 0 !important;*/
  }
}

div#products {
  width: calc(100% - 2rem);
}

div#products ol {
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 12fr));;
}

@media screen and (max-width: 600px) {
  div#products ol {
    display: grid;
    grid-gap: 3rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 12fr));;
  }
}

@media screen and (max-width: 450px) {
 div#products ol {
    display: grid;
    grid-gap: 3rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 12fr));
  }
}
/* end */




/* thyselves.html */
.index-container section {
  column-count: 3;
  column-gap: 1.8rem;

  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

@media screen and (max-width: 750px) {
  .index-container section {
    column-count: 2;
    column-gap: 1.8rem;

    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

.index-container section div:not(:last-child) {
  margin: 0 0 1.8rem 0;
}

.bio h3 {
  text-indent: -1.8rem;
  margin: 0 0 0 1.8rem;
}

p.episode {
  margin: 0 0 0 1.8rem;
}

p.episode-information {
  /*margin: 0.25rem 0 1rem 1rem;
  font-size: 0.75rem;
  line-height: 1.25;*/
  margin: 0 0 0 1.8rem;
  color: #8f8f8f;
}

p.output {
  margin: 0 0 0 1.8rem;
  line-height: 1.8;
}

p.output span {
  background-color: #8f8f8f;
  padding: 0.45rem 0 0.45rem 0;
}

p.output-information {
  margin: 0 0 0 1.8rem;
  color: #8f8f8f;
}

/*span.block {
  padding: 0.125rem 0.125rem 0.25rem 0.125rem;
  border-radius: 0.25rem;
  background-color: #f3f6f4;
}*/
/* end */




/*cover-letter-to-factory2.html*/
.cover-letter {
  width: 25rem;
}

.cover-letter p {
  margin: 0 0 1rem 0;
}

.cover-letter li {
  margin: 0 0 2rem 0;
}

@media screen and (max-width: 450px) {
  .cover-letter {
    width: 100%;
  }
}

span.spot {
  margin: 0 0 0 1rem;
}

p.spot {
  margin: 0 0 1rem 1rem;
}
/* end */




/* setences-alongside-the-memory -- any html files  */
.sentences-index-flex-row {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
}

.sentences-index-flex-row a:hover {
  cursor: pointer;
}


.paragraph, .bookrack {
  position: absolute;
  display: block;
  padding: 4rem 2rem 4rem 2rem;
  margin: 0 0 4rem 0;
}

.sentence, .title, .corporation-nameplace {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 1.33;
}

li.word {
  line-height: 2rem;
  height: 2rem;
  border-radius: 1rem;
  background-color: #000;
  color: rgba(0, 0, 0, 1);
  padding: 0 0.75rem 0 0.75rem;
  margin: 0 0.25rem 1.5rem 0;
  flex: 1 1 0;
    -webkit-box-flex: 1;
    -ms-box-flex: 1;
    -ms-flex: 1 1 0px;
  -moz-box-flex: 1;
  -o-box-flex: 1;
}


li.word:hover {
  cursor: pointer;
}

li.word:hover::after {
  content: attr(id);
    display: block;
    position: fixed;
    z-index: -1;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 2rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.75;
    text-align: center;
    color: #fff;
    text-shadow:0 1px 0 #ccc,
       0 2px 0 #c9c9c9,
       0 3px 0 #bbb,
       0 4px 0 #b9b9b9,
       0 5px 0 #aaa,
       0 6px 1px rgba(0,0,0,.1),
       0 0 5px rgba(0,0,0,.1),
       0 1px 3px rgba(0,0,0,.3),
       0 3px 5px rgba(0,0,0,.2),
       0 5px 10px rgba(0,0,0,.25),
       0 10px 10px rgba(0,0,0,.2),
       0 20px 20px rgba(0,0,0,.15);
}

div#last-pebble:hover {
  cursor: help;
}

.full-stop-anchor {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0.125rem 0.5rem 1.5rem 0.25rem;
  padding: 0.25rem;
  border-radius: 35% 35% 35% 35%;
  background-color: #000;
  filter: drop-shadow(0 0 1rem #595757)
}

.punctuation-word {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0.125rem 1rem 1.5rem 0.25rem;
  padding: 0.25rem;
  border-radius: 35% 35% 35% 35%;
  background-color: #fff;
  color: #fff;
  filter: drop-shadow(0 0 1rem #595757)
}

.black-screen {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0.5rem 1.5rem 0.25rem;
  padding: 0.25rem;
  border-radius: 35% 35% 35% 35%;
  background-color: #fff;
}

.punctuation-word-for-special {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 1rem;
    margin: 0 0.25rem 1rem 0.5rem;
    padding: 0.25rem;
    border: dotted;
    border-width: 0.5rem 0.5rem;
    background: transparent;

  flex: 1 1 0;
    -webkit-box-flex: 1;
    -ms-box-flex: 1;
    -ms-flex: 1 1 0px;
  -moz-box-flex: 1;
  -o-box-flex: 1;
}

.anchor {
  width: 1rem;
  height: 1rem;
  background: transparent;
  margin: 0 0.125rem 1.5rem 0;
  flex: 1 1 0;
  -webkit-box-flex: 1;
  -ms-box-flex: 1;
  -ms-flex: 1 1 0px;
  -moz-box-flex: 1;
  -o-box-flex: 1;
}

.anchor img {
  width: 1.25rem;
  height: 1.25rem;
}

.punctuation-word:hover {
  cursor: pointer;
}

.bookrack {
  padding: 4rem 2rem 4rem 2rem;
}

ul.set-of-figure {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  flex-direction: row;
  align-content: flex-start;
}

.first-hollow-figure {
  display: block;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0 1rem 0 1rem;
  background-color: #000;
  color: #fff;
  border-radius: 2rem;
  min-height: 2rem;
  max-width: 20rem;
  
  word-break: keep-all;
  text-align: left;
  line-height: 1.8;

}

.paratext, .shuffle {
  display: none !important;
}

div.drawer {
  margin: 0 0 1rem 0;
}

div.reel {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.fascicle-title-container {
  width: 100%;
  height: 100%;
  /*margin: 0rem 0 2rem 0;*/
  margin: 0 0 0 0;
  z-index: 111;
}

.fascicle-title {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
}

.fascicle-title:hover {
  border: 1px solid #606060;
  border-radius: 0 !important;
  box-shadow: 0 0 0 !important;
}

div#title {
  font-size: 1.5rem;
  line-height: 1.33;
  min-height: 2rem;
  display: block;

  border-radius: 0.5rem;
  background-color: #f0f0f0;
  padding: 0.20rem 0.5rem 0.05rem 0.5rem;
  border: 1px solid #f0f0f0;
  /*padding: 0.375rem 0.75rem 0.375rem 0.75rem;*/
  white-space: wrap;
}

li.article-area {
  padding: 0 0 2rem 1rem;
  width: 90%;
}

@media screen and (min-width: 750px) {
 li.article-area {
    width: 50%;
  }
}

.article-area summary {
  font-size: 1.5rem;
}

aside div.point-of-view {
  font-size: 0.5em;
  padding: 0.5rem 0 0 0;
  color: #696969;
  width: 50vw;
}

div.picture img {
  margin: 2rem 0 0 0;
  padding: 0;
  border-width: 0;
  max-width: 12rem;
  height: auto;
}

aside.grotto-main-each-page {
  padding: 0 1rem 1rem 2rem;
}




/* block-game-system */
div.shoulder {
  position: absolute;
  /*width: 100vw;
  height: 100vh;*/
  width: 100%;
  height: 100%;
  transform: scaleY(-1.0);
  z-index: 500;
}

div.another-shoulder {
  position: fixed;
  display: block;
  bottom: 0;
  left: 0;
  scrollbar-width: none;
  z-index: 550 !important;
}

div.shoulder::-webkit-scrollbar,
div.synthesizer::-webkit-scrollbar
 {
  width: none;
  display: none;
}

.game {
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  scrollbar-width: none;
}

.game::-webkit-scrollbar {
  width: none;
  display: none;
}

.block-game-system {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 155 !important;
}

.grid-container {
  display: block;
}

.grid-container:hover {
  opacity: 0.9;
  cursor: pointer;
}

#first-type.grid-container {
  display: grid;
  grid-template-columns: 3.75rem 3.75rem 3.75rem;
  grid-template-rows: 3.75rem 3.75rem;
  grid-gap: 0;
  z-index: 115 !important;
}

#second-type.grid-container {
  display: grid;
  grid-template-columns: 3.75rem 3.75rem;
  grid-template-rows: 3.75rem 3.75em 3.75rem;
  grid-gap: 0 0;
  z-index: 155 !important;
}

#third-type.grid-container {
  display: grid;
  grid-template-columns: 3.75rem 3.75rem 3.75rem 3.75rem;
  grid-template-rows: 3.75rem;
  grid-gap: 0 0;
  z-index: 155 !important;
}

#fourth-type.grid-container {
  display: grid;
  grid-template-columns: 3.75rem;
  grid-template-rows: 3.75rem 3.75rem 3.75rem 3.75rem;
  grid-gap: 0 0;
  z-index: 155 !important;
}

#fifth-type.grid-container {
  display: grid;
  grid-template-columns: 3.75rem 3.75rem;
  grid-template-rows: 3.75rem 3.75rem;
  grid-gap: 0 0;
  z-index: 155 !important;
}

.shoulder div#active {
  background-color: #b2beb5;
  border-bottom: 3px solid #c9d1cb;
  border-left: 3px solid #c9d1cb;
  border-top: 3px solid #6a726c;
  border-right: 3px solid #464947;

  color: #fff;
  text-align: center;
  padding: 1rem 0 0 0;
}

.another-shoulder div#active {
  background-color: #b2beb5;
  border-bottom: 3px solid #c9d1cb;
  border-left: 3px solid #c9d1cb;
  border-top: 3px solid #6a726c;
  border-right: 3px solid #464947;

  color: #fff;
  text-align: center;
  padding: 1rem 0 0 0;
} 
/*end*/


/* block-game-system-of-navigation in these work-each-page and co-operating-work-each-page */
.edges::-webkit-scrollbar {
  width: none;
  display: none;
}

.edges {
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  scrollbar-width: none;
  width: 100vw !important;
  z-index: 155 !important;
}

.block-game-system-as-navigation {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;  
  z-index: 155 !important;
  width: 100vw !important;
}
/*end*/


/* main */
.button-wrap {
  display: flex;
  flex: column
}

.button {
  height: 1.5rem;
}

.production-category {
  display: flex;
  display: -webkit-box;
  display: -ms-box;
  flex: 1 1 0;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
}

.name {
  float: right;
}

.production-category li {
  margin: 0 0.5rem 0 0;
}

img.item {
  position: absolute;
  max-width: 75%;
  width: auto;
}


/* feed-keywords */
.keywords {
  position: absolute;
  left:  40%;
  right: 0;
  width: 20%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.keywords .feed-title {
  text-align: center;
  font-size: 0.8em;
  padding: 0 0 1rem 0;
}

/* hiding scrollbar */
.keywords::-webkit-scrollbar {
  display: none;
}

.keywords {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.keywords ul {
  display: grid;
  gap: 1rem 0.25rem;
}

.keywords li figure {
  display: flex;
  display: -webkit-box;
  display: -ms-box;
  display: -moz-box;
  display: -webkit-flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0.125rem 0.25rem 0.125rem 0.25rem;
}

.keywords li figure figcaption.comment {
  opacity: 0.75;
  font-size: 0.8em;
  text-align: center;
  line-height: 1.33;
  margin: 0.25rem 0 0 0;
}

.keywords li img {
  max-width: 10vw;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0rem;
  filter: drop-shadow(0.125rem 0.125rem 1rem #cccc);
}
/* end */




/* aside-scroll-gallery */
.scroll-gallery {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 5rem;
  height: 100vh;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0 0.5rem;
  z-index: 11 !important;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
}

aside li.cell-element {
  padding: 0 0 0.25rem 0;
}

aside img.artwork-thumb {
  display: block;
  object-fit: cover;
  width: 4.5rem;
}

aside.scroll-gallery::-webkit-scrollbar {
  display: none;
}

.work-wrapper, section.homepage-vitrine {
  width: 100%;
  padding: 3rem 1rem 0 1rem;
  overflow-y: scroll;
}

section.context-wrapper {
  position: fixed;
  bottom: 0;
  padding: 0 1.5rem 2rem 1.5rem;
  background-color: rgba(46, 46, 46, 0.9);
  max-height: 35vh;
  width: auto;
  overflow-y: scroll;
  z-index: 111;
  color: #fff;
}


.artwork-info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.image-cell ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  box-sizing: border-box;
}

.image-cell ul li {
  width: 100%;
}

@media screen and (min-width: 450px) {
  .image-cell ul li {
    width: 50%;
  }
}

@media screen and (min-width: 750px) {
  .image-cell ul li {
    width: 33%;
  }
}
/* end */




/* work */
.description {
  padding: 1rem 1rem 0 1rem;
}

.description p {
  margin: 0 0 1rem 0;
}

.description-list li {
  margin: 0 0 0 2rem;
}

figure.cover {
  position: relative;
  width: 100%;
  height: 45vh;
  padding: 0 0 1rem 0;
}

figcaption.work-title {
  font-weight: normal;
  text-align: center;
}
/* end */





/* image adjustment */
img.artwork {
  position: absolute;
  display: block;
  max-width: 80%;
  height: auto;
  max-height: 80%;
  width: auto;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  object-position: center center;
}

/* limjinkwang.rocks/sentences-as-memory/index.html */
div.paratext {
  position: fixed;
  right: 0;
  width: 8rem;
  margin: 1rem 1rem 1rem 2rem;
  overflow-y: scroll !important;
}

div.table-of-contents, div.index {
    overflow-y: scroll;
}

div.table-of-contents details.table {
  margin:0 0 2rem 0;
}

div.table-of-contents div.contents {
  margin: 1rem 0 2rem 0;
}

div.shuffle {
  margin: 0 10rem 0 0;
  padding: 1rem 2rem 1rem 1rem;
}


section.reel {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1rem 0 1rem 0;
}

li.bio-article-paragraph {
  padding: 0 0 0 0;
}

li.article-paragraph {
  padding: 1rem 0 0 0;
}

p.source {
  font-size: 0.5rem;
  text-indent: 1rem;
  vertical-align: super;
}

p.first-list {
  margin: 0 0 0 1rem;
}

p.not-first-list {
  margin: 0 0 0 1rem;
  text-indent: 1rem;
}

img.image-cell {
  max-width: 12rem;
  padding: 1rem 0 1rem 0;
}

aside div.point-of-view {
  font-size: 0.5em;
  padding: 0.5rem 0 0 0;
  color: #696969;
}