* {
  margin:0;
  padding:0;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}

/* 이미지 로더를 위한것. */
.loader, .loaderANI{
  width:100%;
  height:100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:cover;
  transform-origin: 50% 50%; 
}


.cpage {
  min-width:200px;
  width:100%;
  height:100%;
  clear:both;
  position:relative;
  overflow:hidden;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

.all_wrap {
  position:relative;
}


body {
  background:#fff;
}

.paging_ver {
  position:fixed;
  z-index:100;
  right:47px;
  top:50%;
  line-height:23px;
  width:18px;
}

.paging_ver a {
  display:block;
  border:5px solid #fff;
  background-color:#fdb913;
  margin:0 0 10px 4px;
  width:10px;height:10px;

  border-radius:10px;
  -moz-border-radius : 10px;
  -webkit-border-radius : 10px;
  -ms-border-radius :10px;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

.paging_ver .sel {
  margin-left:0;
  width:18px;
  height:18px;
  border-radius:18px;
  -moz-border-radius : 18px;
  -webkit-border-radius : 18px;
  -ms-border-radius :18px;
}

.logoImg {
  display:block;
  position:fixed;
  z-index:100;
  left:30px;
  top:35px;
}

.rightBtnArea {
  position:fixed;
  z-index:101;
  right:30px;
  top:35px;
}

#naviRight {
  overflow:hidden;
  z-index:100;
  position:fixed;
  right:-330px;
  height:100%;
  width:330px;
  color:#fff;
  font-size:13px;
  background:#000;
  background:rgba(0,0,0,0.5);
  transition:right 0.5s;
  padding-top:150px;
}

#naviRight.naviOn {
  right:0px;
}

#naviRight .menuDep {
  padding-left:40px;
}

#naviRight .menuDep a {
  display:none;
  width:100%;
  line-height:21px;
}

#naviRight .menuDep:hover a {
  display:inline-block;
}

#naviRight .menuDep .big {
  display:inline-block;
  width:auto;
  margin-bottom:3px;
  line-height:43px;
  font-size:30px;
  font-family: 'Open Sans', sans-serif;
  font-weight:bold;
  color:#fdb913;
}

#naviRight .menuDep:hover .big {
  border-bottom:2px solid #fff;
  color:#fff;
}

#naviRight .menuDepNo {
  display:block;
  width:auto;
  margin-bottom:3px;
  padding-left:40px;
  line-height:30px;
  font-size:20px;
  font-family: 'Open Sans', sans-serif;
  font-weight:normal;
  font-style:italic;
  color:#a7a9ac;
}

.all_wrap {
  overflow:hidden;
  transition:margin-left 0.5s,padding-right 0.5s;
}

.all_wrap.naviOn {
  margin-left:-330px;
  padding-right:330px;
}








.scrollRemoveDown {
  position:absolute;
  z-index:3;
  width:100%;
  top:0;
  height:100%;
  transform-stylepreserve-3d;
  transform-origin: 50% 0%;
  animation: scrollRemoveDown 0.8s linear 0s 1 alternate forwards;
}

@keyframes scrollRemoveDown {
  0%  {transform:perspective(1000px) rotateX(0deg)  ;z-index:1;}                    
  15% {transform:perspective(1000px) rotateX(-10deg)  ;}                              
  80% {transform:perspective(1000px) rotateX(0deg) translateZ(-300px);}               
  100%{transform:perspective(1000px) translateZ(-300px) translatey(-10%);z-index:1;}  
}

.scrollMoveDown {
  position:absolute;
  z-index:2;
  width:100%;
  top:0;
  height:100%;
  transform-stylepreserve-3d;
  transform-origin: 50% 50%;
  animation: scrollMoveDown 1s linear 0s 1 alternate both;
}

@keyframes scrollMoveDown {
  0%  {top:100%}                    
  100%{top:0%}                              
}



.scrollRemoveUp{
  position:absolute;z-index:3;
  width:100%;top:0;height:100%;
  transform-stylepreserve-3d;
  transform-origin: 50% 100%;
  animation: scrollRemoveUp 0.8s linear 0s 1 alternate forwards;
}
@keyframes scrollRemoveUp{
  0%  {transform:perspective(1000px) rotateX(0deg)  ;z-index:1;}                          
  15% {transform:perspective(1000px) rotateX(10deg) ;}                                    
  80% {transform:perspective(1000px) rotateX(0deg) translateZ(-300px);}                     
  100%{transform:perspective(1000px) translateZ(-300px) translatey(10%);z-index:1;}         
}

.scrollMoveUp {
  position:absolute;
  z-index:2;
  width:100%;
  top:0;
  height:100%;
  transform-stylepreserve-3d;
  transform-origin: 50% 50%;
  animation: scrollMoveUp 1s linear 0s 1 alternate both;
}

@keyframes scrollMoveUp {
  0%  {top:-100%}                    
  100%{top:0%}                              
}




.scrollRemoveRight {
  position:absolute;z-index:3;
  width:100%;top:0;height:100%;
  transform-stylepreserve-3d;
  transform-origin: 50% 50%;
  animation: scrollRemoveRight 0.8s linear 0s 1 alternate forwards;
}

@keyframes scrollRemoveRight {
  0%  {margin-left:0;transform:perspective(1000px) translateZ(0px);}
  15% {margin-left:0;transform:perspective(1000px) translateZ(-200px);}
  80%{margin-left:-100%;transform:perspective(1000px) translateZ(-200px);}
  100%{margin-left:-100%;transform:perspective(1000px) translateZ(-200px);}
}

.scrollMoveRight {
  position:absolute;z-index:2;
  width:100%;top:0;height:100%;
  transform-stylepreserve-3d;
  transform-origin: 50% 50%;
  animation: scrollMoveRight 0.8s linear 0s 1 alternate both;
}

@keyframes scrollMoveRight {
  0%  {margin-left:100%;transform:perspective(1000px) translateZ(-200px);}
  15% {margin-left:100%;transform:perspective(1000px) translateZ(-200px);}
  80% {margin-left:0%;transform:perspective(1000px) translateZ(-200px);}
  100%{margin-left:0%;transform:perspective(1000px) translateZ(0px);}
}


.scrollRemoveLeft {
  position:absolute;z-index:3;
  width:100%;top:0;height:100%;
  transform-stylepreserve-3d;
  transform-origin: 50% 50%;
  animation: scrollRemoveLeft 0.8s linear 0s 1 alternate forwards;
}

@keyframes scrollRemoveLeft {
  0%  {margin-left:0;transform:perspective(1000px) translateZ(0px);}
  15% {margin-left:0;transform:perspective(1000px) translateZ(-200px);}
  80%{margin-left:100%;transform:perspective(1000px) translateZ(-200px);}
  100%{margin-left:100%;transform:perspective(1000px) translateZ(-200px);}
}

.scrollMoveLeft {
  position:absolute;z-index:2;
  width:100%;top:0;height:100%;
  transform-stylepreserve-3d;
  transform-origin: 50% 50%;
  animation: scrollMoveLeft 0.8s linear 0s 1 alternate both;
}

@keyframes scrollMoveLeft {
  0%  {margin-left:-100%;transform:perspective(1000px) translateZ(-200px);}
  15% {margin-left:-100%;transform:perspective(1000px) translateZ(-200px);}
  80% {margin-left:0%;transform:perspective(1000px) translateZ(-200px);}
  100%{margin-left:0%;transform:perspective(1000px) translateZ(0px);}
}



/* 정보영역 */
.infoArea {
  position:absolute;
  z-index:50;
  bottom:80px;
  width:100%;
  height:60px;
  font-size:0;
  text-align:center;
  transition:padding-right 0.5s;
}

.infoArea .infoBox {
  overflow:auto;
  float:right;
  margin-top:-160px;
  margin-right:30px;
  width:30%;
  min-width:450px;
  height:220px;
  padding:30px;
  font-size:13px;
  line-height:21px;
  text-align:left;
  background:#fff;  
}

.infoArea .infoBox .title {
  font-size:25px;
  font-weight:bold;
}

.infoArea .infoBox .distance {
  text-align:right;
  margin:5px 0;
  font-size:12px;
  color:#666;
}

.infoArea .infoBox .content {
  text-align:left;
  font-size:13px;
}

.infoArea .buttonBox {
  float:left;
  width:100%;
  margin-top:-60px;
}

.infoArea .buttonBox a {
  display:inline-block;
  width:60px;
  height:60px;
  line-height:60px;
  border:1px solid #fff;
  text-align:center;
}

.infoArea .buttonBox .number {
  display:inline-block;
  vertical-align:top;
  width:60px;
  height:60px;
  line-height:60px;
  border:1px solid #fff;
  text-align:center;
  font-size:20px;
  color:#fff;
  font-weight:bold;
}