A:link {color: #80FF00}
    A:visited {color: #FF00FF}
    H1 {font-size: 24pt; font-family: arial}
    H2 {font-size: 18pt; font-family: arial}
    H3 {font-size: 14pt; font-family: arial}
    


.sample-box {
    position: relative;
    margin:0 auto;
    width: 1000px;
}

.chi01 {
   display: flex;
    justify-content: center;
    align-items: center;
    
    position: absolute;
    top:  0.2%;
    left: 13%;
}
.chi02 {
   display: flex;
    justify-content: center;
    align-items: center;
    
    position: absolute;
    top:  0.2%;
    left: 13%;
}
.chi03 {
   display: flex;
    justify-content: center;
    align-items: center;
    
    position: absolute;
    top:  0.2%;
    left: 13%;
}
.chi04 {
   display: flex;
    justify-content: center;
    align-items: center;
    
    position: absolute;
    top:  0.2%;
    left: 13%;
}
.chi05 {
   display: flex;
    justify-content: center;
    align-items: center;
    
    position: absolute;
    top:  0.2%;
    left: 13%;
}
.chi06 {
   display: flex;
    justify-content: center;
    align-items: center;
    
    position: absolute;
    top:  0.2%;
    left: 13%;
}
.chi07 {
   display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
    position: absolute;
    top:  2%;
    left: 1%;
}

.chi08 {
   display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
    position: absolute;
    top:  18%;
    left: 1%;
}
.chi09 {
   display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
    position: absolute;
    top:  34%;
    left: 1%;
}
.chi10 {
   display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
    position: absolute;
    top:  50%;
    left: 1%;
}
.chi11 {
   display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
    position: absolute;
    top:  66%;
    left: 1%;
}
.chi12 {
   display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
    position: absolute;
    top:  82%;
    left: 1%;
}


#content {
  width: 303px;
  margin: 0 auto;
  padding: 40px 0
}
.main,
.main li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.main {
  margin-bottom: 5px;
}
.main li {
  width: 350px;
  height: 698px;
  overflow: hidden;
}
.main li.item2,
.main li.item3,
.main li.item4,
.main li.item5,
.main li.item6 {
  display: none;
}
.main li:hover img {
  opacity: 100;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
}
.mamor,
.mamor li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mamor li {
  display: inline-block;
  width: 100px;
  height: 100px;
  overflow: hidden;
  cursor: pointer;
  vertical-align: top;
  margin-bottom: 4px;
}
.mamor li img {
  width: 100%;
  height: auto;
}
.mamor li:hover img {
  opacity: 1;
  filter: opacity(80%);
  -ms-filter: "opacity(80%)";
}