* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

#sample-wrap {
  position: relative;
}

article {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
}

.active {
  display: block;
}

#cgBtn,
#ssBtn {
  position: absolute;
  display: block;
  width: 76px;
  height: 18px;
  top: 5px;
  cursor: pointer;
}

#cgBtn {
  left: 631px;
}

#ssBtn {
  left: 716px;
}

#cgBtn:hover,
#ssBtn:hover {
  background-color: white;
  opacity: 0.3;
}

.sample-list {
  position: absolute;
  display: flex;
  width: 215px;
  flex-flow: row wrap;
}

#list-cg1,
#list-cg2 {
  top: 50px;
  left: 25px;
}

#list-ss1,
#list-ss2,
#list-ss3 {
  top: 38px;
  left: 18px;
}

.sample-list li {
  width: 100px;
  height: 75px;
}

.sample-list li:nth-of-type(2n) {
  margin-left: 15px;
}

.sample-list li:nth-of-type(n + 3) {
  margin-top: 15px;
}

#list-cg2 li:nth-of-type(n + 3) {
  margin-top: 11px;
}

.sample-list li:hover {
  background-color: white;
  opacity: 0.3;
}

.sample-list li a {
  display: block;
  width: 100%;
  height: 100%;
}

.nextBtn,
.prevBtn {
  position: absolute;
  top: 402px;
  left: 177px;
}

.prevBtn {
  left: 27px;
}

.nextBtn:hover,
.prevBtn:hover {
  opacity: 0.7;
}