*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 100%;
}

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

details summary {
  list-style-type: none;
  display: block;
  outline: 0;
  cursor: pointer;
  overflow-x: hidden;
  overflow-y: auto;
}


details summary::marker {
  display: none;
}

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

details summary::-ms-details-marker {
  display: none;
}

details summary::-moz-details-marker {
  display: none;
}

details summary::-o-details-marker {
  display: none;
}

details summary:hover {
  font-style: normal;
}

/*
::-webkit-scrollbar {
  display: none;
}
*/

html {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
}

iframe {
  border: 0;
}

html, body {
  height: 100%;
  font-size: 16px;
  text-rendering: optimizeLegibility;

  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;


  font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
  -ms-font-smoothing: subpixel-antialiased; 
  -moz-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: subpixel-antialiased;

  -webkit-overflow-scrolling: touch;

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

body,
button,
input,
select,
textarea {
  font-family: "NotoSansCJKkr-Medium", "MALGUN", "HelveticaLTStd-Bold", "helvetica neue", "helvetica", "-apple-system", "BlinkMacSystemFont", "avenir next", "avenir", "segoe ui", "Ubuntu", "roboto", "noto", "arial", sans-serif;
}

html, body {
  position: absolute;
  display: block;
  font-size: 1rem;
  font-weight: 600;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 1.75;
  word-break: keep-all;
  color: black;
  background: transparent;
  cursor: default;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-rendering: optimizeSpeed;
}

body {
  min-width: 320px;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer; 
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: auto;
  text-overflow: ellipsis;
  -webkit-text-overflow:  ellipsis;
  -ms-text-overflow:  ellipsis;
  -moz-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

details summary {
  cursor: pointer;
}

abbr {
  text-decoration: none ;
}

small {
  font-size: 0.75em;
  line-height: 1em;
  margin-left: 0.125em;
  margin-right: 0.125em;
  margin-bottom: 0.3125em;
}

img,
video {
  display: block;
  height: auto;
  max-height: 100%;
}

em {
  font-style: normal;
  border-bottom: 1px solid;
}

i {
  text-decoration-style: none;
  font-style: normal;
}

i#feeler {
  animation-name: feeler; 
  animation-duration: 4s; 
  animation-iteration-count: infinite; 
} 

@keyframes feeler { 
  0% {
    color: rgba(0, 0, 0, 1);
  }  
  50%{
    color: rgba(0, 0, 0, 0.7);
  }
  100%{
    color: rgba(0, 0, 0, 0.5);
  }
}


mark {
  background-color: transparent;
  border-bottom: 1px dotted;
}

.helvetica span {
  font-family: "HelveticaLTStd-Bold", sans-serif !important;
}


table {
  border-collapse: collapse;
  width: 100%;
}

thead {
 border-top: 1px solid #000;
}

thead:hover {
  background-color: #000;
  color: #fff;
}

th, td {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: .5rem;
  vertical-align: text-top;
}

th {
  text-align: left;
  font-size: 0.75rem;
  line-height: 1.25rem;
}

td {
  text-align: left;
  font-size: 0.75rem;
  line-height: 1.25rem;
}

/*
tr:hover {
  background-color: #b2b2b2;
}
*/

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 0 0 0 1rem;
  padding: 0;
  font-family: "NotoSansCJKkr-Medium" !important;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.75;
  vertical-align: center;
  color: inherit;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  cursor: grab;
}


optgroup {
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-family: "NotoSansCJKkr-Medium" !important;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.75;
  vertical-align: center;
  color: inherit;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  cursor: grab;

}

option {
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-family: "NotoSansCJKkr-Medium" !important;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.75;
  vertical-align: center;
  color: inherit;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  cursor: grab;
}

audio {
  min-width: 5rem;
  max-width: 15rem;
}


/* each html files without index.html */
.container {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
}

.white-dot {
  position: absolute;
  width: calc(100vw - 4rem);
  height: calc(100vw - 4rem);
  border-radius: 100%;
  background-color: #fff;
  filter: drop-shadow(0 0 2rem #b2b2b2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 600px) {
  .white-dot {
    position: absolute;
    width: calc(100vh - 4rem);
    height: calc(100vh - 4rem);
    border-radius: 100%;
    background-color: #fff;
    filter: drop-shadow(0 0 2rem #b2b2b2);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* intro and outro */

div.shuffle-first:active :after {
  display: none;
}

.imprint {
  display: block;
}

dl > div.sentence {  
  display: inline-block;
  width: 100%;

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

.sentence {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-content: flex-start;
}

li.word {
  line-height: 1.9rem;
  height: 2rem;
  border-radius: 1rem;
  background: transparent;
  color: #000;
  margin: 0 0.25rem 1rem 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-for-special {
  line-height: 1.9rem;
  height: 2rem;
  border-radius: 1rem;

  background-color: #fff;
  filter: drop-shadow(0 0 0.5rem #b2b2b2);
  color: #000;
  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;
}


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

.punctuation-word {
  display: block;
  width: 2rem;
  height: 2rem;
  margin: 0rem 0.5rem 0rem 0rem;
  padding: 0.375rem 0.25rem 0.5rem 0.375rem;
  border-radius: 35% 35% 35% 35%;
  background-color: #fff;
  filter: drop-shadow(0 0 0.5rem #b2b2b2);
}

.punctuation-word-at-last {
  display: block;
  width: 2rem;
  height: 2rem;
  margin: 0 0 0 1rem;
  padding: 0.375rem 0.25rem 0.5rem 0.375rem;
  border-radius: 35% 35% 35% 35%;
  background-color: #fff;
  filter: drop-shadow(0 0 0.5rem #b2b2b2);
}

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

.anchor {
  width: 2rem;
  height: 2rem;
  background: transparent;
  margin: 0.125rem 0.125rem 1.5rem 0.125rem;
  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: 1rem;
  height: 1rem;
}

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

.audio-as-word audio {
  display: block;
  padding: 0 1rem 1.25rem 0;
}

figcaption.little {
  text-indent: 0 !important;
  margin: 0;
  font-size: 1.5vw;
  line-height: 1.25rem;
  display: block;
  word-break: keep-all;

  color: #fff;
  text-align: center;
}


/*tool, menu, navigation */
.tool {
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 1rem 0 1rem 1rem;
  width: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.top {
  position: absolute;
  display: block;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  max-height: 2rem;
  background-color: #000;
}

.top:hover {
  cursor: crosshair !important;
  transform-origin: 2rem | 50% | 0;
  transform: rotate(45deg) scale(0.9);
  filter: drop-shadow(0 0 1rem #000) !important;
}

.middle {
  position: center;
  display: block;
  left: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  max-height: 2rem;
  background-color: #000;
}

.middle:hover {
  cursor: crosshair;
  transform-origin: 2rem | 50% | 0;
  transform: rotate(45deg) scale(0.9);
  filter: drop-shadow(0 0 1rem #000) !important;
}

.bottom {
  position: absolute;
  display: block;
 
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  max-height: 2rem;
  background-color: #000;
}

.bottom:hover {
  cursor: crosshair !important;
  transform-origin: 2rem | 50% | 0;
  transform: rotate(45deg) scale(0.9);
  filter: drop-shadow(0 0 1rem #000) !important;
}


/* top and bottom */
.menu {
  position: absolute;
  display: flex;
  /*
  display: -webkit-box;
  display: -ms-flexbox;
  display: -moz-box;
  display: -o-box;
  */
  
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  
  justify-content: flex-start;
  align-content: center;
  box-pack: justify;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-box-pack: justify;

  top: 0rem;
  left: 3rem;
  right: 0rem;
  margin: 1rem 2rem 1rem 1rem;
}

.menu a:hover {
  filter: drop-shadow(0 0 0.25rem #000);
}

.menu a:hover li.menu-button {
  background-color: #fff;
  color: #000;
}

li.menu-button {
   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;

  margin: 0 0.5rem 0 0;
  padding: 0 1rem 0;
  height: 2rem;
  line-height: 1.9;
  background-color: #000;
  color: #fff;
  text-align: center;
  border-radius: 1rem;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
}


.navigation {
  position: fixed;
  display: flex;
  /*
  display: -webkit-box;
  display: -ms-flexbox;
  display: -moz-box;
  display: -o-box;
  */
  
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  
  justify-content: flex-start;
  align-content: center;
  box-pack: justify;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-box-pack: justify;

  bottom: 0rem;
  left: 3rem;
  margin: 1rem 1rem 1rem 1rem;
}

li.navigation-button {
   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;

  margin: 0 0.5rem 0 0;
  padding: 0 1rem 0;
  height: 2rem;
  line-height: 1.9;
  background-color: #000;
  color: #fff;
  text-align: center;
  border-radius: 1rem;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
}

.navigation a:hover li.navigation-button {
  background-color: #fff;
  color: #000;
}

.navigation a:hover {
  filter: drop-shadow(0 0 0.25rem #000);
}

/* dialogue */
div#guest-book {
  position: fixed;
  display: block;

  box-sizing: border-box;
  left: 0rem;
  bottom: calc(50% + 1rem);
  margin: 1rem 1rem 1rem 1rem;
}

div#board {
  position: fixed;
  display: block;

  box-sizing: border-box;
  left: 1rem;
  top: calc(50% + 2rem);
}

li.dialogue-button {
  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;

  margin: 0 0 0 0;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  height: 5rem;
  line-height: 1.9;
  background-color: #000;
  color: #fff;
  text-align: center;
  border-radius: 1rem;
  width: 2rem;

  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
  -moz-writing-mode: vertical-lr;
  -o-writing-mode: vertical-lr;
  text-orientation: sideways;
  
  padding-block-start: 0.1rem;
  transform: rotate(0.5turn);
}

div#guest-book:hover, div#board:hover {
  filter: drop-shadow(0 0 0.25rem #000);
}

li.dialogue-button:hover {
  background-color: #fff;
  color: #000;
}


.question-box {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-grow: 1;
  margin: 0 0 1.75rem 0;
}

.question-box div#title {
  display: inline-block;
  width: 100%;
  height: 1.75rem;
  margin: 0 1rem 1.75rem 1rem;
  max-width: 4.75rem;
}

textarea#question {
  margin: 0rem 0.5rem 1rem 0rem;
  padding: 0.375rem 0.5rem 0.375rem 0.5rem;
  border-width: 0;
  border-radius: 1rem;
  filter: drop-shadow(0 0 0.25rem #b2b2b2);
  min-height: 10.5rem;
  width: calc(100% - 4.75rem);
}

textarea#one-word {
  margin: 0rem 0.5rem 1rem 0rem;
  padding: 0.375rem 0.5rem 0.375rem 0.5rem;
  border-width: 0;
  border-radius: 1rem;
  filter: drop-shadow(0 0 0.25rem #b2b2b2);
  min-height: 3.5rem;
  width: calc(100% - 4.75rem);
}

div.dialogue-head li {
  display: inline-flex;
  padding: 0.25rem 1rem 0.25rem 1rem;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  width: auto;
  margin: 0 0 1.25rem 0;
  font-weight: 700;
  filter: drop-shadow(0 0 0.25rem #b2b2b2);
}

form.gform {
  margin: 0 0 0 0rem;
}

.form-box {
  display: flex;
  flex-direction: row;
}

.form-box label {
  margin: 0 1rem 1.75rem 1rem;
  max-width: 4.75rem;
}

.form-box input {
  margin: 0rem 0.5rem 1.25rem 0;
  padding: 0.375rem 0.5rem 0.375rem 0.5rem;
  border-width: 0;
  border-radius: 0.75rem;
  filter: drop-shadow(0 0 0.25rem #b2b2b2);
  height: 2rem;
  width: calc(100% - 4.75rem);
}

input#submit-button {
  padding: 0.25rem 1rem 0.25rem 1rem;
  margin: 1.75rem 0 0 1rem;
  border-radius: 1rem;
  border: 1px solid #000;
  background-color: #fff;
  font-weight: 700;
  line-height: 1.75;
}

input#submit-button:hover {
  color: #fff;
  text-shadow: 0 0 0.25rem #595757;
  border-style: none;
  filter: drop-shadow(0 0 0.25rem #595757);
}

.thankyou_message {
  margin: 3.5rem 0 0 0;
}

/* guest-book-response */

.guest-alarm {
  border-top: 1px dashed #000;
}

div.main-list-button li {
  display: inline-flex;
  padding: 0.25rem 1rem 0.25rem 1rem;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  width: auto;
  margin: 0 0 1rem 0;
  font-weight: 700;
  filter: drop-shadow(0 0 0.25rem #b2b2b2);
}


/* main-list, main */
.shuffle {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.shuffle::-webkit-scrollbar,
.shuffle::-moz-scrollbar,
.shuffle::-o-scrollbar {
  display: none !important;
}

.shuffle:not(:target) {
  display: none;
}

section.page {
  position: absolute;
  display: block;
  top: 3.5rem;
  left: 3rem;
  right: 2rem;
  bottom: 3rem;
  width: calc(100% - 6rem);
  height: calc(100% - 7rem);
  
  padding: 1rem 0 0 1rem;
  
  font-size: 1rem;
  line-height: 1.75;

  overflow-x: hidden;
  overflow-y: auto;   

  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  
  word-break: keep-all;

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

.preloader {
  position: relative;
  height: 100vh;
  padding: 2rem;
  background-color: #000;
}

.ending-scene {
  position: relative;
  height: 100vh;
  padding: 2rem;
  background-color: #000;
}

@media screen and (max-width: 600px) {
    img#color, img#black-and-white {
    width: 80vw;
    height: 113.12vw;
    filter: drop-shadow(0 0 1.25rem #fff);
    margin: auto;
  }
    img#ending-image {
    height: 56.53vw;
    width: 80vw;
    filter: drop-shadow(0 0 0.625rem #fff);
    margin: auto;
  }
}


@media screen and (min-width: 601px) {
    img#color, img#black-and-white {
    width: 56.58vh;
    height: 80vh;
    filter: drop-shadow(0 0 1.25rem #fff);
    margin: auto;
  }
    img#ending-image {
    height: 80vh;
    width: 113.12vh;
    filter: drop-shadow(0 0 0.0625rem #fff);
    margin: auto;
  }
}

section.page-as-door {
    position: absolute;
    display: block;
    
    /*
    top: 3.5rem;
    left: 3rem;
    right: 2rem;
    bottom: 3rem;
    */
    margin: 3.5rem 2rem 3rem 3rem;

    width: calc(100% - 5rem);
    height: calc(100% - 7rem);
    
    padding: 1rem 0 0 1rem;
    
    font-size: 1rem;
    line-height: 1.75;

    overflow-x: hidden !important;
    overflow-y: auto;   

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    
    word-break: keep-all;

    -ms-overflow-style: none;
    scrollbar-width: none;

    background: transparent;
}

/* main-list */
.main-list {
  display: flex;
  
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-content: flex-start;
  margin: 0 0 1rem 0;
}

.main-list a div.work {
  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;
}

.main-list li {
  flex: none;
  max-width: 100%;
  height: 100%;
  box-sizing: border-box;
}

div.main-list-button li {
  display: inline-flex;
  padding: 0.25rem 1rem 0.25rem 1rem;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  width: auto;
  margin: 0.125rem 0 1rem 0;
  line-height: 1.5;
  font-weight: 700;
  filter: drop-shadow(0 0.25rem 0.25rem #b2b2b2);
}


div#both.main-list-button li::after {
  background-image: url("../media/images/typing-ellipsis-rotation/000000/counterclockwise-and-clockwise.gif") !important;
}

div#both.main-list-button li::after {
  content: "";
  display: inline-block;
  height: 1.25rem;
  width: 1.25rem;
  margin: 0.5rem 0 0 0.25rem;
  background-size: 0.75rem 0.75rem;
  background-repeat: no-repeat;
  line-height: 1.75rem;
  vertical-align: center;  
}

div#counterclockwise.main-list-button li::after {
  background-image: url("../media/images/typing-ellipsis-rotation/000000/counterclockwise.gif") !important;
}

div#counterclockwise.main-list-button li::after {
  content: "";
  display: inline-block;
  height: 1.25rem;
  width: 1.25rem;
  margin: 0.5rem 0 0 0.25rem;
  background-size: 0.75rem 0.75rem;
  background-repeat: no-repeat;
  line-height: 1.75rem;
  vertical-align: center;  
}

div#clockwise.main-list-button li::after {
  background-image: url("../media/images/typing-ellipsis-rotation/000000/clockwise.gif") !important;
}

div#clockwise.main-list-button li::after {
  content: "";
  display: inline-block;
  height: 1.25rem;
  width: 1.25rem;
  margin: 0.5rem 0 0 0.25rem;
  background-size: 0.75rem 0.75rem;
  background-repeat: no-repeat;
  line-height: 1.75rem;
  vertical-align: center;  
}


.main-list div.work {
  display: block;

  margin: 0.25rem 0.25rem 0.25rem 0rem;
  padding: 0 1rem 0 1rem;
  background-color: #000;
  color: #fff;
  
  min-height: 2rem;
  max-width: 14rem;
  border-radius: 1rem;

  word-break: keep-all;
  text-align: left;
  line-height: 1.75;
}

.main-list div.worker {
  display: block;

  margin: 0.25rem 0.25rem 0.25rem 0rem;
  padding: 0 1rem 0 1rem;
  background-color: #000;
  color: #fff;
  
  min-height: 2rem;
  max-width: 14rem;
  border-radius: 1rem;

  word-break: keep-all;
  text-align: left;
  line-height: 1.75;
}

.main-list .middle-dot {
  margin: 0.25rem 0.75rem 0.25rem 0.5rem;
  background-color: #fff;
  height: 2rem;
  width: 2rem;
  line-height: 2rem;
  border-radius: 1rem;
  filter: drop-shadow(0 0 0.25rem #b2b2b2);
  z-index: 0;
}

.main-list .worker-name .worker:hover {
  text-shadow: 0 0 1.5rem #fff;
}

/* work and worker both */
.worker-profile-image-including {
  display: flex;
  height: 2rem;

  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;

  margin: 0.25rem 0.25rem 0.25rem 0rem;
  padding: 0 1rem 0 1rem;
  background-color: #000;
  color: #fff;
  min-height: 2rem;
  max-width: 14rem;
  border-radius: 1rem;
  word-break: keep-all;
  text-align: left;
  line-height: 1.75;
}

.worker-profile-image-including.worker-image {
  display: inline-block;
  max-height: 2rem;

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

.worker-name .worker-profile-image-including .worker-image img {
  border-radius: 0rem;
  max-width: 1rem;
  max-height: 1rem;
  margin: 0.5rem 0.25rem 0.5rem 0.5rem
}

div.worker-profile-image-including:hover {
  border-radius: 0rem;
}

div.worker-profile-image-including:hover .worker-image img {
  border-radius: 1rem;
}

/* main-list worker profile */
.main-list div.worker {
  display: block;

  margin: 0.25rem 0.25rem 0.25rem 0rem;
  padding: 0 1rem 0 1rem;
  background-color: #000;
  color: #fff;
  
  min-height: 2rem;
  max-width: 14rem;
  border-radius: 1rem;

  word-break: keep-all;
  text-align: left;
  line-height: 1.75;
}

summary.work-name {
  display: block;
  height: 2rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis; 
}

.work-name span {
  line-height: 1.9rem;
}

.work-name span:hover {
  text-shadow: 0 0 0.25rem #fff;
}

.work-summary {
  padding: 0 0 0.5rem 0;
}
.work-ellipsis {
  display: block;
  white-space: nowrap;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;

  -webkit-line-clamp: 1;
  line-height: 1.75rem;
  height: 1.75rem;
}

.work-preview-image {
  display: flex;
  flex-direction: column;
  height: 5rem;
}

.work-preview-image img {
  filter: drop-shadow(0 0 0.25rem #fff);
  border: 1px solid #fff;
}

div.work:hover .work-preview-image img#yoon-work-preview {
  border-radius: 1rem;
}

div.work:hover .work-preview-image img#yoon-seung-work-preview {
  border-radius: 1rem;
}

div.work:hover .work-preview-image img#jin-kwang-work-preview {
  border-radius: 1rem;
}

div.work:hover .work-preview-image img#jin-lli-work-preview {
  border-radius: 1rem;
}

div.work:hover .work-preview-image img#hami-work-preview {
  border-radius: 1rem;
}

div.work:hover .work-preview-image img#hae-soo-work-preview {
  border-radius: 1rem;
}

img#yoon-work-preview {
  width: 9rem;
}

img#yoon-seung-work-preview {
  width: 3.75rem;
}

img#jin-kwang-work-preview {
  width: 5rem;
}

img#jin-lli-work-preview {
  width: 9rem;
}

img#hami-work-preview {
  width: 7.5rem;
}

img#hae-soo-work-preview {
  width: 6.7rem;
}

summary.profile-name {
  height: 2rem;
}

.profile-name span {
  line-height: 1.9rem;
}

.profile-name span:hover {
  text-shadow: 0 0 0.25rem #fff;
}

.profile-image {
  height: 5rem;
  width: 5rem;
}

.profile-image img {
  border: 1px solid #fff;
}

.card-catalogue-room {
  padding: 0 0 1rem 0;
}

.card-catalogue {
  margin: 0.5rem 1rem 0rem 0rem;
}

.card-catalogue .text-box p {
  word-break: keep-all;
  overflow-y: auto;
  min-height: 4rem;
}

.card-catalogue .text-box p:hover {
  text-shadow: 0 0 0.125rem #b2b2b2;
}

.profile.profile-image {
  display: inline-block;
  height: 2rem;

  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;

  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
}

div.worker:hover, div.work:hover {
  border-radius: 0rem;
}

div.worker:hover .profile-image img {
  border-radius: 1rem;
}


/* radio and work */
/* radio */
.radio {
  position: absolute;
  display: block;
  top: 3.5rem;
  left: 1rem;
  right: 1rem;
  bottom: 3.5rem;
  width: calc(100% - 2rem);
  height: calc(100% - 7rem);
  z-index: 0;
}

.interface {
  background-color: #000;
  max-width: 2rem;
  max-height: 2rem;
  color: #fff;
}

.hide {
  display: none;
}

.blank {
  background: transparent;
  min-height: 1rem;
}

div#play-and-pause.jp-controls {
  background: transparent !important;
}

div#circle-box {
  width: 4rem;
  height: 4rem;
  box-sizing: border-box;
  background-color: #000;
  border-radius: 30%;
  filter: drop-shadow(0 0 0.5rem #b2b2b2);
}

div#concentric-circle {
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 45%;
  background-color: #fff;
  background-clip:content-box;
  padding: 0.5rem;
  border: 1rem solid transparent;

  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: playing;
  animation-duration: 4s;
  display: block;
}

@keyframes playing {
  0% {
    border: 2rem;
  }

  12.5% {
    padding: 0.25rem;
    border: 1.75rem
  }

  25% {
    padding: 0.5rem;
    border: 1.5rem;
  }

  37.5% {
    padding: 0.75rem;
    border: 1.25rem;
  }

  50% {
    padding: 1rem;
    border: 1rem;
  }

  60% {
    padding: 1.25rem;
    border: 0.75rem;
  }

  70% {
    padding: 1.5rem;
    border: 0.5rem;
  }

  80% {
    padding: 1.35rem;
    border: 0.65rem;
  }

  90% {
    padding: 1.5rem;
    border: 0.5rem;
  }

  100% {
    padding: 1.25rem;
    border: 0.75rem;
  }
}

div.preview div#concentric-circle:hover {
  cursor: auto;
  animation-play-state: paused;
}


div#concentric-circle:hover {
  cursor: pointer;
  animation-play-state: paused;
}

div#concentric-circle:hover:after {
  content: attr(title);
  display: inline-block;
  position: fixed;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 2rem;
  font-size: 1rem;
  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);
}




/* work */
.main {
  position: absolute;
  display: block;
  top: 3.25rem;
  left: 3.5rem;
  right: 3.5rem;
  bottom: 3.5rem;
  width: calc(100% - 7rem);
  height: calc(100% - 7rem);
  font-size: 1rem;
  line-height: 1.75;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  word-break: keep-all;
}

.main::-webkit-scrollbar {
  display: none;
}

/* audio-visual-page */ 
section#scroll-1.scroll-contents {
  display: block;
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

section.audio-visual-page {
  display: flex;
  flex-direction: row;

  top: 0;
  bottom: 2.8rem;
  overflow-x: scroll;
  overflow-y: hidden;
}

section.audio-visual-page::scrollbar {
  width: 2rem;
}

section.audio-visual-page::-webkit-scrollbar {
  width: 2rem;
}

section.audio-visual-page::-moz-scrollbar {
  width: 2rem;
}

section.audio-visual-page::-o-scrollbar {
  width: 2rem;
}

section.audio-visual-page::scrollbar-track {
  box-shadow: inset 0 0 0.5rem #b2b2b2; 
  border-radius: 2rem;
}

section.audio-visual-page::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.5rem #b2b2b2; 
  border-radius: 2rem;
}

section.audio-visual-page::-moz-scrollbar-track {
  box-shadow: inset 0 0 0.5rem #b2b2b2; 
  border-radius: 2rem;
}

section.audio-visual-page::-o-scrollbar-track {
  box-shadow: inset 0 0 0.5rem #b2b2b2; 
  border-radius: 2rem;
}

section.audio-visual-page::scrollbar-thumb {
  background: #fff;
  box-shadow: inset 0 0 2.5rem #b2b2b2; 
  border-radius: 2rem;
}

section.audio-visual-page::-webkit-scrollbar-thumb {
  background: #fff;
  box-shadow: inset 0 0 2.5rem #b2b2b2; 
  border-radius: 2rem;
}

section.audio-visual-page::-moz-scrollbar-thumb {
  background: #fff;
  box-shadow: inset 0 0 2.5rem #b2b2b2; 
  border-radius: 2rem;
}

section.audio-visual-page::-o-scrollbar-thumb {
  background: #fff;
  box-shadow: inset 0 0 2.5rem #b2b2b2; 
  border-radius: 2rem;
}

section.audio-visual-page::scrollbar-thumb:hover {
  background: radial-gradient(#b2b2b2, #595757);
}

section.audio-visual-page::-webkit-scrollbar-thumb:hover {
  background: radial-gradient(#b2b2b2, #595757);
}

section.audio-visual-page::-moz-scrollbar-thumb:hover {
  background: radial-gradient(#b2b2b2, #595757);
}

section.audio-visual-page::-o-scrollbar-thumb:hover {
  background: radial-gradient(#b2b2b2, #595757);
}

.work-item-column {
  flex: 1 1 0;
  -webkit-box-flex: 1;
  -ms-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  -ms-flex: 1 1 0px;

  margin-bottom: auto;
  align-items: flex-start;

  padding: 1rem 3rem 0rem 1rem;

  box-sizing: border-box;
}

.material {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.material.expanded {
  position: fixed;
  z-index: 999;
  top: 0rem;
  left: 0rem;
  max-width: 100%;
  width: 100%;
  max-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.9);
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.material.expanded img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 100%;
  width: auto;
  max-height: 100%;
  height: auto;
}

.material.expanded figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: ;
  padding: 1rem 1rem 2rem 1rem;
}

.work-item dd.full-screen a::before {
  background-image: url("../media/images/anchor-by-paul/000000/north.png") !important;
}

.work-item dd.full-screen a::before {
  padding-right: .25rem;
  content: "";
  display: inline-block;
  height: .75rem;
  width: .75rem;
  margin-left: auto;
  margin-right: 0.5rem;
  margin-top: auto;
  margin-bottom: auto;
  background-size: .75rem .75rem;
  background-repeat: no-repeat;
  line-height: 1.75rem;
  vertical-align: center;  
}

.work-item dd.text::before {
  background-image: url("../media/images/anchor-by-paul/000000/south.png") !important;
}

.work-item dd.text::before {
  padding-right: .25rem;
  content: "";
  display: inline-block;
  height: .75rem;
  width: .75rem;
  margin-left: auto;
  margin-right: 0.5rem;
  margin-top: auto;
  margin-bottom: auto;
  background-size: .75rem .75rem;
  background-repeat: no-repeat;
  line-height: 1.75rem;
  vertical-align: center; 
}

div#theater {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  background-color: #000;
}

.full-screen-page {
  position: fixed;
  top: 3.5rem;
  left: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  background: transparent;
  z-index: 1;
}

.full-screen-back-button {
  position: absolute;
  top: 0;
  bottom: calc(100% - 3.5rem);
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  max-width: calc(100% - 2rem);
  width: auto;
  margin: 1rem 0 0.5rem 0;
}

div.full-video {
  filter: drop-shadow(0 0 2.5rem #b2b2b2);
  margin: 0 1.25vw 1.25vw 1.25vw;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  max-width: calc(100% - 2rem);
  width: auto;
}

div.full-video iframe#yoon-video-full {
  width: 80vw;
  max-width: 80vw;
  height: 44.45vw;
  max-height: 44.45vw;
}

div.full-video iframe#yoon-seung-video-full {
  width: 80vw;
  max-width: 80vw;
  height: 44.45vw;
  max-height: 44.45vw;
}

div.full-video iframe#jin-lli-video-full {
  width: 80vw;
  max-width: 80vw;
  height: 44.45vw;
  max-height: 44.45vw;
}

div.full-video iframe#hami-video-full {
  width: 65.8vw;
  max-width: 65.8vw;
  height: 44.45vw;
  max-height: 44.45vw;
}

div.full-video iframe#hae-soo-video-full {
  width: 59.563vw;
  max-width: 59.563vw;
  height: 44.45vw;
  max-height: 44.45vw;
}

img#hae-soo-material {
  border: 1px solid #000;
}

.video-container {
  position: relative;
  display: block;
  box-sizing: border-box;
}

.video-container iframe {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}


/* image change by media */
@media screen and (max-width: 600px) {
  .work-item-column dl.work-item div img {
    height: 10rem;
  }
  
  .work-item-column dl.work-item div.material.expanded img {
    height: 12.5rem;
  }
}

@media screen and (min-width: 601px) and (max-width: 900px) {
  .work-item-column dl.work-item div img {
    height: 15rem;
  }

  .work-item-column dl.work-item div.material.expanded img {
    height: 22.5rem;
  }
}

@media screen and (min-width: 901px) {
  .work-item-column dl.work-item div img {
    height: 25rem;
  }

  .work-item-column dl.work-item div.material.expanded img {
    height: 35rem;
  }
}


/* audio and video change by media */
@media screen and (max-width: 600px) {
  .work-item-column dl.work-item audio {
    width: 10rem;
  }

  dt#yoon-player div.video-container {
    width: 21.6rem;
    height: 12rem;
  }
  dt#yoon-seung-player-square div.video-container {
    width: 12rem;
    height: 12rem;
  }
  dt#yoon-seung-player div.video-container {
    width: 16rem;
    height: 12rem;
  }
  dt#jin-lli-player div.video-container {
    width: 21.6rem;
    height: 12rem;
  }
  dt#hami-player div.video-container { 
    width: 17.8rem;
    height: 12rem;
  }
  dt#hae-soo-player div.video-container { 
    width: 16rem;
    height: 12rem;
  }
}

@media screen and (min-width: 601px) and (max-width: 900px) {
  .work-item-column dl.work-item audio {
    width: 12rem;
  }

  .work-item-column dl.work-item dt#yoon-player div.video-container {
    width: 32.4rem;
    height: 18rem;
  }
   .work-item-column dl.work-item dt#yoon-seung-player-square div.video-container {
    width: 18rem;
    height: 18rem;
  }
  .work-item-column dl.work-item dt#yoon-seung-player div.video-container {
    width: 24srem;
    height: 18rem;
  }
  .work-item-column dl.work-item dt#jin-lli-player div.video-container {
    width: 32.4rem;
    height: 18rem;
  }
  .work-item-column dl.work-item dt#hami-player div.video-container { 
    width: 26.71rem;
    height: 18rem;
  }
   .work-item-column dl.work-item dt#hae-soo-player div.video-container { 
    width: 24rem;
    height: 18rem;
  }
}

@media screen and (min-width: 901px) {
  .work-item-column dl.work-item audio {
    width: 18rem;
  }

  .work-item-column dl.work-item dt#yoon-player div.video-container {
    width: 43.2rem;
    height: 24rem;
  }
  .work-item-column dl.work-item dt#yoon-seung-player-square div.video-container {
    width: 24rem;
    height: 24rem;
  }
  .work-item-column dl.work-item dt#yoon-seung-player div.video-container {
    width: 32rem;
    height: 24rem;
  }
  .work-item-column dl.work-item dt#jin-lli-player div.video-container {
    width: 43.2rem;
    height: 24rem;
  }
  .work-item-column dl.work-item dt#hami-player div.video-container { 
    width: 35.6rem;
    height: 24rem;
  }
   .work-item-column dl.work-item dt#hae-soo-player div.video-container { 
    width: 32rem;
    height: 24rem;
  }
}


/* scroll, title */
section#scroll-2 {
  display: block;
}

div#scroll.text-and-caption {
  height: 100%;
  box-sizing: border-box;
  width: 100%;
}

.sticky-bottom {
  position: sticky;
  position: -webkit-sticky;
  position: -ms-sticky;
  position: -moz-stikcy;
  position: -o-sticky;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -o-flex-wrap: wrap;

  box-pack: left;
  -webkit-box-pack: left;
  -ms-box-pack: left;
  -moz-box-pack: left;
  -o-box-pack: center;
   
  bottom: 0;
  width: 100%;
  
  margin: 0rem 0 1rem 0;

  padding: 0.5rem 1.5rem 0.5rem 1.5rem;

  text-align: left;
  background-color: white;

  z-index: 11 !important;
  filter: drop-shadow(0 0 0.25rem #b2b2b2);
}

.sticky-top {
  position: sticky;
  position: -webkit-sticky;
  position: -ms-sticky;
  position: -moz-stikcy;
  position: -o-sticky;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -o-flex-wrap: wrap;

  box-pack: left;
  -webkit-box-pack: left;
  -ms-box-pack: left;
  -moz-box-pack: left;
  -o-box-pack: center;
   
  top: 0;
  width: 100%;
  
  margin: 0rem 0 1.75rem 0;

  padding: 0.5rem 1.5rem 0.5rem 1.5rem;

  text-align: left;
  background-color: white;

  z-index: 11 !important;
  filter: drop-shadow(0.5rem 0.125rem 0.5rem #b2b2b2);
}

.sticky-top-long-title {
  position: sticky;
  position: -webkit-sticky;
  position: -ms-sticky;
  position: -moz-stikcy;
  position: -o-sticky;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -o-flex-wrap: wrap;

  box-pack: left;
  -webkit-box-pack: left;
  -ms-box-pack: left;
  -moz-box-pack: left;
  -o-box-pack: center;
   
  top: 0;
  width: 100%;
  
  margin: 0;

  padding: 0.5rem 1.5rem 0.5rem 1.5rem;

  text-align: left;
  background-color: white;

  z-index: 11 !important;
  filter: drop-shadow(0 0 0.25rem #b2b2b2);
}

.title-as-subtitle {
  display: flex;
  flex-direction: row;
}

.title-as-subtitle li:not(:last-child) {
  margin-right: 0.5rem;
  margin-left: 1rem;
}

.title-as-subtitle li {
  flex: 1 1 0;
  -webkit-box-flex: 1;
  -ms-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  -ms-flex: 1 1 0px;
}

.title {
  flex: none;
}

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

.moving-box {
  line-height: 1.75rem;
  overflow-x: hidden;
  margin: 0 0 0 1.5rem;
}

.moving-wrap {
  width: 100%;
  padding-left: 25%;
  margin-right: 25%;
}

@keyframes moving {
  0% {
    transform: translate3d(0rem, 0rem, 0rem);
  }
  100% {
    transform: translate3d(-100%, 0px, 0px);
  }
}

.moving {
  display: inline-block;
  white-space: nowrap;

  padding-right: 50%;

  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: moving;
  animation-duration: 25s;
}


.moving-item {
  display: inline-block;
  padding: 0 0 0 1rem;
}

.moving-item span {
  padding-right: 4rem;
}


/* work-page */ 
div#scroll-container {
  margin-top: 0rem;
}

section.work-page {
  position: relative;
  display: flex;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  word-break: keep-all;
  padding: 0rem 0 0 0rem;
}

div.basic-contents {
    flex: none;
    -webkit-box-flex: 0;
    -ms-box-flex: 0;
    -moz-box-flex: 0;
    -o-box-flex: 0;
    -ms-flex: 0 0 auto;
  
    display: block;
    width: 100%;
    word-break: keep-all;
    margin: 0 0 3.5rem 0;
  }


div.more-contents {
    flex: none;
    -webkit-box-flex: 0;
    -ms-box-flex: 0;
    -moz-box-flex: 0;
    -o-box-flex: 0;
    -ms-flex: 0 0 auto;
  
    display: block;
    width: 100%;
    word-break: keep-all;
    margin: 0 0 3.5rem 0;
  }

/* basic-sentence */ 
div#basic-sentence {
  margin-bottom: 0;
}

.basic-sentence div.basic-text {
  display: inline-flex;
  padding: 0 0.5rem;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  height: 2rem;
  line-height: 2rem;
  margin: 0.75rem 0.5rem 0.75rem 0.5rem;
  font-weight: 700;
  border-radius: 1rem;
  filter: drop-shadow(0 0 0.25rem #b2b2b2);
  box-sizing: content-box;
}

.basic-text li {
  padding: 0 0.5rem 0 0.5rem;
}

.basic-sentence p {
  margin-bottom: 1.75rem;
}

.basic-sentence p.last {
  margin-bottom: 0rem;
}

.basic-sentence div.about {
  margin: 0 0 0 1.5rem;
  text-indent: 0rem;
}

.basic-text {
  display: inline-flex;
  padding: 0 0.5rem;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  width: auto;
  height: 2rem;
  line-height: 2rem;
  margin: 0 0.5rem 1rem 0;
  font-weight: 700;
  filter: drop-shadow(0 0 0.25rem #b2b2b2);
}

.head {
  display: inline-flex;
  padding: 0 0.5rem;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  width: auto;
  height: 2rem;
  line-height: 2rem;
  margin: 0 0.5rem 1rem 0;
  font-weight: 700;
  filter: drop-shadow(0 0 0.25rem #b2b2b2);
}

/* more-description */
.more-description {
  margin-top: 0;
}

.more-description dt.head {
  display: inline-flex;
  padding: 0 1rem 0 1rem;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  height: 2rem;
  line-height: 2rem;
  margin: 0.75rem 0.5rem 0.75rem 0.5rem;
  font-weight: 700;
  border-radius: 1rem;
  filter: drop-shadow(0 0 0.25rem #b2b2b2);
  box-sizing: content-box;
}


.more-description dt.head::after {
  background-image: url("../media/images/typing-ellipsis/horizontal-only/000000.gif") !important;
}

.more-description dt.head::after {
  content: "";
  display: inline-block;
  height: .75rem;
  width: .75rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  background-size: .75rem .75rem;
  background-repeat: no-repeat;
  line-height: 1.75rem;
  vertical-align: center;  
}

/* more-more-description */
.more-more-description {
  margin-top: 0rem;
}


.more-more-description dt.head {
  display: inline-flex;
  padding: 0 .5rem;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  height: 2rem;
  line-height: 2rem;
  margin: 0.75rem 0.5rem 0.75rem 0.5rem;
  font-weight: 700;
  border-radius: 1rem;
  filter: drop-shadow(0 0 0.25rem #b2b2b2);
  box-sizing: content-box;
}


.more-more-description dt.head::after {
  background-image: url("../media/images/typing-ellipsis-ellipsis/horizontal-only/000000.gif") !important;
}

.more-more-description dt.head::after {
  content: "";
  display: inline-block;
  height: .75rem;
  width: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  background-size:  1.5rem .75rem;
  background-repeat: no-repeat;
  line-height: 1.75rem;
  vertical-align: center;  
}

@media screen and (max-width: 900px) {
  section.work-page {
    flex-direction: column;
  }

  div.basic-contents {
    width: 100%;
  }

  div.more-contents {
    width: 100%;
  }
}

@media screen and (min-width: 901px) {
  section.work-page {
    flex-direction: row;
  }

  div.basic-contents {
    width: calc(100% / 3);
  }

  div.more-contents {
    left: calc(100% / 3);
    width: calc(200% / 3);
  }
}

/* work-column-text */
.work-column {
  display: inline-block;
  box-sizing: border-box;
  margin: 0 0 1.75rem 1.5rem;
  word-break: keep-all;
}

.work-column p.first-class {
  margin: 0;
}

.work-column p#category.first-class {
  text-shadow: 0 0 0.25rem #595757;
}

.work-column p.not-first {
  text-indent: 0rem;
  margin-bottom: 1.75rem;
}

.work-column p.last {
  text-indent: 0rem;
}

.work-column p#quote {
  text-indent: -0.5rem;
  margin-top: 0;
  margin-left: 1rem;
  line-height: 1.75;
}

.work-column p#href {
  display: inline-block;
  text-indent: 0rem;
  margin: 0.4375rem 0 1.75rem 1rem;
  vertical-align: center;
}

.work-column mark {
  font-style: normal;
  border-bottom: 1px dotted;
}

.work-column, .work-page dl, .work-column div {
  display: block;
}

.work-column.head {
  margin-bottom: 1.75rem;
}




/* caption */
div#scroll-container.caption {
  position: absolute;
  display: block;
  width: 100%;

  margin-left: 0rem;
  margin-top: 1.75rem;
  
  padding-bottom: 4rem;
}

.caption dt.head {
  display: inline-flex;
  padding: 0 1rem 0 1rem;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  width: auto;
  height: 2rem;
  line-height: 2rem;
  border-radius: 1rem;
  margin: 1rem 0.5rem 1rem 0.5rem;
  font-weight: 700;
  filter: drop-shadow(0 0 0.25rem #b2b2b2)
}

span.little {
  text-indent: 0 !important;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.25rem;
  display: block;
  word-break: keep-all;
}

.adjustment {
  margin-left: 1rem;
}

.letter-half-blank-line {
  display: block;
  background: transparent;
  height: 0.5rem;
}

.half-blank-line {
  display: block;
  background: transparent;
  height: 0.875rem;
}

.blank-line {
  display: block;
  background: transparent;
  height: 1.75rem;
}

.blank-line-important {
  display: block;
  width: 100%;
  background: transparent;
  height: 1.75rem;
}

.blank-again {
  display: block;
  background: transparent;
  height: 0.5rem;
}

.blank-again-again {
  display: block;
  background: transparent;
  height: 0.25rem;
}

.blank-2 {
  display: none;
  background: transparent;
  height: 1.75rem;
}

.blank-for-arrow {
  display: none;
  background: transparent;
  height: 1.75rem;
}

.caption figcaption {
  display: flex;
  flex-direction: row;
}


.arrow-scroll {
  display: none;
}

/*
.arrow-scroll {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.arrow-scroll-button {
  max-width: 1rem;
  max-height: 1rem;
  flex: 1 0 0;
  -webkit-box-flex: 1;
  -ms-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  -ms-flex: 1 1 0px;
}

.arrow-scroll.scroll-right, .arrow-scroll.scroll-left {
    vertical-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 100vw;
    overflow-x: scroll !important;
}
*/

/* replace this sentece with upper 3-line sentences after applying javascript about scrollLeft  */
/*
@media screen and (max-width: 600px) {
  .caption figcaption {
    display: flex;
    flex-direction: row;
  }
}
*/

.diagram {
  display: block;
  word-break: keep-all;
  overflow: auto;
  /*
  overflow-x: scroll;
  */
  padding-left: 1rem;
}


div.main section#scroll-3 {
  display: none;
}


/* dialogue: 10-guestbook, 11-board */
div.dialogue 
li.opinion-button {
  display: flex;
  
  flex: 1 1 0;
  -webkit-box-flex: 1;
  -ms-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  -ms-flex: 1 1 0px;

  margin: 0.25rem 0.5rem 0.25rem 0;
  padding: 0 1rem 0;
  min-height: 2rem;
  line-height: 1.9rem;
  background-color: #000;
  color: #fff;
  text-align: left;
  border-radius: 1rem;
}




/* index */
.index {
  position: fixed;
  display: block;
  
  padding: 0;

  top: calc(50% + 2rem);
  left: 1rem;
  bottom: calc(100% - (50% + 13rem));

  width: 2rem;
  height: 11rem;

  background: transparent;
}

.index-container {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -moz-box;
  display: -o-box;

  flex-direction: column;
  
   flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -o-flex-wrap: nowrap;

  
  justify-content: center;
  box-pack: justify;
  -webkit-box-pack: justify;
  -ms-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;

  overflow-x: hidden;
  overflow-y: hidden;
  text-align: center;
}

.index-card {
  background-color: #000;
  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;

  display: inline-block;
  height: 2rem;
}

.index-card a {
  display: inline-flex;

  max-height: 2rem;
  max-width: 2rem;
  line-height: 2rem;

  color: #fff;
  text-align: center;
}

.index-card:hover {
  cursor: pointer;
}

#arrow-1, #arrow-2, #arrow-3, #arrow-4 {
  display: none;
}

.index-card:hover #arrow-1 {
  display: block;
}

.index-card:hover #arrow-2 {
  display: block;
}

.index-card:hover #arrow-3 {
  display: block;
}

.index-card:hover #arrow-4 {
  display: block;
}

.index-card .arrow img {
  padding: 0.125rem 0.25rem 0.125rem 0.125rem;
  margin: 0.375rem 0 0 0.125rem;
  height: 1.5rem;
  width: 1.5rem;
}

@media screen and (min-width: 600px) {
  .index-container {
    display: none; 
  }
}



/* 5-about-this club; 7-about-this exhibition, 8-about-this exhibition */
.page dl {
  columns: 14rem 3;
  -webkit-columns: 14rem 3;
  -ms-columns: 14rem 3;
  -moz-columns: 14rem 3;
  -o-columns: 14rem 3;

  column-gap: 3.5rem;
  -webkit-column-gap: 3.5rem;
  -ms-column-gap: 3.5rem;
  -moz-column-gap: 3.5rem;
  -o-column-gap: 3.5rem;
}

.contents {
  display: block;
  word-break: keep-all;
  margin: 0 0 3.5rem 0;
}

.column {
  display: block;
  box-sizing: border-box;
}

dl > div {  
  display: inline-block;
  width: 100%;
  
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.column p.antennae-club {
  margin-bottom: 3.5rem;
}

.column p.first {
  margin: 0 0 0 1rem;
}

.column p.not-first {
  margin-top: 0rem;
  text-indent: 1rem;
  margin-bottom: 3.5rem;
}

.column p.not-first {
  text-indent: 0rem;
}

#credit-1 div {
  margin-left: 0rem;
  text-indent: 0rem;
}

.column p.credit-2 {
  text-indent: 0 !important;
  margin: 0.5rem 0.125rem 2.8125rem 0rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  display: block;
  word-break: keep-all;
}

.column p#quote.first {
  text-indent: -0.375rem;
  margin-top: 0;
  margin-left: 1rem;
  line-height: 1.75;
}

.conlumn dt, .column dl, .column dd {
  display: block !important;
}

div.column dt {
  margin-left: 0rem;
  text-shadow: 0 0 0.5rem #595757;
}

div.column dd {
  margin-bottom: 1.75rem;
}

div.logo-box {
  margin: 0.25rem;
  margin-left: 0.125rem !important;
}

div.column img#logo {
  display: block;
  width: 8.4rem;
  height: 1.75rem;
}

.column p#href.little {
  text-indent: 0 !important;
  margin: 0.5rem 0.125rem 2.8125rem 1.125rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  display: block;
  word-break: keep-all;
}

div.horizontal-rule-top {
  display: block;
  border-top: 1px solid #000;
  min-width: 100%;
}

div.horizontal-rule-bottom {
  display: block;
  border-bottom: 1px solid #000;
  width: 100%;
}


div#download {
  margin-bottom: 1.75rem;
}

div#download a::before {
    background-image: url("../media/images/anchor-by-paul/000000/south.png") !important;
}

div#download.shuffle-inside:not(:hover) {
  display: none;
}

div#hyperlink {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -moz-box;
  display: -o-box;
  flex-direction: row;
}

div#hyperlink a::before {
  background-image: url("../media/images/anchor-by-paul/000000/north-east.png") !important;
}

div#next {
  display: block;
  line-height: 1.75rem;
  width: 2rem;
  height: 2rem;
}

img#next {
  width: 1rem;
  height: 1rem;
  vertical-align: center;
}

div#download a::before {
  content: "";
  display: inline-block;
  height: .75rem;
  width: .75rem;
  padding: 0 0.25rem 0 0rem;
  margin:  0;
  margin-bottom: auto;
  background-size: .75rem .75rem;
  background-repeat: no-repeat;
  line-height: 1.75rem;
  vertical-align: center;  
}

div#hyperlink a::before {
  padding-right: .25rem;
  content: "";
  display: inline-block;
  height: .75rem;
  width: .75rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  background-size: .75rem .75rem;
  background-repeat: no-repeat;
  line-height: 1.75rem;
  vertical-align: center;  
}

div.image-wrapper {
  position: absolute;
  display: inline-block;
}

.image-wrapper img {
  max-width: 14rem;
  padding: 1rem 0.5rem 3.5rem 0.5rem;
}

.image-wrapper video {
  max-width: 14rem;
  padding: 1rem 0.5rem 3.5rem 0.5rem;
  filter: drop-shadow(0 0rem 1rem #b2b2b2);
}