.all_wrap {
  position:absolute !important;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  margin:auto !important;
  overflow:hidden !important
}

.cpage {
  height:100% !important;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.cntImage {
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  transform:scale(0.5);
  opacity:0;
}

.circleBox {
  z-index:10;
  position:absolute;
  width:27.97%;
  height:100%;
  left:0;
  right:0;
  margin:0 auto;
}

.circleBox a {
  display:block;
  z-index:10;
  width:1px;
  height:1px;
  position:absolute;
  left:50%;
  top:50%;
  color:#fff;
}

.circleBox .sel {
  color:#fdb913;
}

.circleBox a img {
  margin:-20px 0 0 -10px;
}

.circleBox a p {
  display:none;
  position:absolute;
  height:20px;
  width:120px;
  line-height:20px;
  margin-top:-10px;
  font-size:13px;
}

.ANI .circleBox {
  animation:cicle 1s linear 0s 1 alternate forwards;
}

@keyframes cicle {
  0%{transform:rotate(180deg)}
  100%{transform:rotate(0deg)}
}

.ANI .circleBox a p {
  display:block;
  animation:cicleTxt 1.5s linear 0s 1 alternate forwards;
}

@keyframes cicleTxt {
  0%{opacity:0;}
  80%{opacity:0;}
  100%{opacity:1;}
}

.ANI .cntImage {
  animation:cicleImg 0.3s linear 0s 1 alternate forwards;
}

@keyframes cicleImg {
  0%{transform:scale(0.5);opacity:0;}
  100%{transform:scale(1);opacity:1;}
}

.preView .darker {
  position:absolute;
  width:100%;
  height:100%;
  z-index:2;
  background:url('http://img.einet.kr/fullscreen/sample/bg/cp4darker.png');
}

.preView {
  transition:background 0.7s ease;
}