/* 위아래 */
.scrollRemoveDown{
  position:absolute;z-index:3;
  width:100%;top:0;height:100%;
  transform-stylepreserve-3d;
  transform-origin: 50% 0%;
  animation: scrollRemoveDown 0.7s linear 0s 1 alternate forwards;
}
@keyframes scrollRemoveDown{
  0%  {transform:perspective(1000px) translateY(0%);z-index:1;}
  100%{transform:perspective(1000px) translateY(-100%);z-index:1;}  
}

.scrollMoveDown{
  position:absolute;z-index:2;
  width:100%;top:0;height:100%;
  transform-stylepreserve-3d;
  transform-origin: 50% 50%;
  animation: scrollMoveDown 0.7s linear 0s 1 alternate both;
}
@keyframes scrollMoveDown{
  0%  {transform:perspective(1000px) translateY(100%);z-index:1;}
  100%{transform:perspective(1000px) translateY(0%);z-index:1;}  
}







.scrollRemoveUp{
  position:absolute;z-index:3;
  width:100%;top:0;height:100%;
  transform-stylepreserve-3d;
  transform-origin: 50% 100%;
  animation: scrollRemoveUp 0.7s linear 0s 1 alternate forwards;
}
@keyframes scrollRemoveUp{
  0%  {transform:perspective(1000px) translateY(0%);z-index:1;}
  100%{transform:perspective(1000px) translateY(100%);z-index:1;}  
}

.scrollMoveUp{
  position:absolute;z-index:2;
  width:100%;top:0;height:100%;
  transform-stylepreserve-3d;
  transform-origin: 50% 50%;
  animation: scrollMoveUp 0.7s linear 0s 1 alternate both;
}
@keyframes scrollMoveUp{
  0%  {transform:perspective(1000px) translateY(-100%);z-index:1;}
  100%{transform:perspective(1000px) translateY(0%);z-index:1;}  
}







.scrollRemoveRight{
  position:absolute;z-index:3;
  width:100%;top:0;height:100%;
  transform-stylepreserve-3d;
  transform-origin: 50% 50%;
  animation: scrollRemoveRight 0.7s 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.7s 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.7s 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.7s 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);}
}






/* photoMotion 관련 */
.scrollRemoveNo{
  position:absolute;z-index:2;
  width:100%;top:0;height:100%;
}
.scrollMoveNo{
  position:absolute;z-index:3;
  width:100%;top:0;height:100%;
}
.photoMC{
  position:relative;overflow:hidden;
  height:100%;
  background-repeat:no-repeat;
  background-position:-10000% -10000%;
  background-size:5px;
}
.photoMC li{
  position:relative;display:inline-block;float:left;overflow:hidden;
  background-image:inherit;
  background-position:center;
  background-size:cover;
  transition:all 0.7s;
  transition-property:transform, opacity;
}
.photoMC .MOVE{
  transform:translateX(0px) translateY(0px) scale(1) rotate(0) !important;
  opacity: 1.0 !important;
}
.photoMC li p{
  display:inline-block;
  position:absolute;left:0;top:0;
  background-image:inherit;
  background-position:inherit;
  background-size:inherit;
}



/* */


/* 이미지 로더를 위한것. */
.loader, .loaderANI{
  width:100%;height:100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:cover;
}

/* 줌효과 무한루프 */
.zoominoutbg{
  transform:scale(1.2) rotate(0.3deg);
  animation:zoom 10s linear 0s infinite alternate forwards;
  -webkit-animation:zoom 10s linear 0s infinite alternate forwards;
}

@keyframes zoom {
  0%{transform:scale(1.2) rotate(0.3deg)}
  100%{transform:scale(1) rotate(0deg)}
}

@-webkit-keyframes zoom {
  0%{-webkit-transform:scale(1.2) rotate(0.3deg)}
  100%{-webkit-transform:scale(1) rotate(0deg)}
}

/* 중앙에 오게 하는데 내용 넘치면 scroll */
.cntMidScroll_position {
  overflow:auto;
  position:fixed;
  z-index:1010;
  width:100%;
  height:100%;
}

.cntMidScroll_wrap {
  display:table;
  width:100%;
  height:100%;
}

.cntMidScroll_content {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  width:100%;
  height:100%;
}

/* 그냥 기본적으로 쓰는것 */
body, div {
  font-family:'NanumGothicWeb','나눔고딕','Dotum';
}

.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:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

#get_info {
  line-height:20px;
  font-size:13px;
}

.paging_ver {
  position:fixed;
  z-index:100;
  right:47px;
  top:50%;
}

.paging_ver a {
  display:block;
  opacity:0.6;
  filter:alpha(opacity=60);
  line-height:0;
  font-size:0;
  height:17px;
  margin-top:10px;
}

.paging_ver img {
  vertical-align:top;
}

.paging_ver .sel {
  border-bottom:2px solid #fff;
  opacity:1;
  filter:alpha(opacity=100);
}

.naviWidth {
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  margin:auto;
  width:100%;
  max-width:1400px;
  height:100%;
}

.naviWidth_main {
  position:absolute;z-index:1;
  left:0;
  right:0;
  margin:auto;
  width:100%;
  max-width:1920px;
  height:100%;
}

body {
  background:white;
}

.navi_top {
  position:fixed;
  z-index:100;
  left:0;
  right:0;
  margin:auto;
  width:100%;
}


.cpage{
  background:#fff;
}

.cpage .TRAN {
  opacity:0;transition:all 0.7s;
  transition-property:transform, opacity;
}

.ANI .TRAN {
  transform:translateX(0px) translateY(0px) scale(1) !important;
  opacity: 1.0 !important;
}

.FLbox{
  position:relative;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  float:left;
}

.FRbox {
  position:relative;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  float:right;
}

.boxNum {
  position:absolute;
}

#cp1 .cp1slogan1 {
  display:inline-block;
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
  top:25%;
  width:0px;
  height:29px;
  background:url(../images/main/cp1slogan1.png) no-repeat left top;
  transition:width 1.2s linear 0s;
}

#cp1.ANI .cp1slogan1 {
  width:402px;
  height:177px;
}



.grid-stack-item {
  background-color:#fff;
}

.grid-stack-item-content {
  position:relative;
  text-align: center;
  background-color:#fff;
  overflow:hidden !important;
}


.split .tran-right0 {transform:translateX(-100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:0s;}
.split.ANI .tran-right0 {transform:translateX(0%) ;opacity:1}

.split .tran-right0_5 {transform:translateX(-100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:0.5s;}
.split.ANI .tran-right0_5 {transform:translateX(0%) ;opacity:1}

.split .tran-right1 {transform:translateX(-100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:1s;}
.split.ANI .tran-right1 {transform:translateX(0%) ;opacity:1}

.split .tran-right1_5 {transform:translateX(-100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:1.5s;}
.split.ANI .tran-right1_5 {transform:translateX(0%) ;opacity:1}

.split .tran-right2 {transform:translateX(-100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:2s;}
.split.ANI .tran-right2 {transform:translateX(0%) ;opacity:1}

.split .tran-right2_5 {transform:translateX(-100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:2.5s;}
.split.ANI .tran-right2_5 {transform:translateX(0%) ;opacity:1}

.split .tran-right3 {transform:translateX(-100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:3s;}
.split.ANI .tran-right3 {transform:translateX(0%) ;opacity:1}



.split .tran-left0 {transform:translateX(100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:0s;}
.split.ANI .tran-left0 {transform:translateX(0%)  ;opacity:1}

.split .tran-left0_5 {transform:translateX(100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:0.5s;}
.split.ANI .tran-left0_5 {transform:translateX(0%)  ;opacity:1}

.split .tran-left1 {transform:translateX(100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:1s;}
.split.ANI .tran-left1 {transform:translateX(0%)  ;opacity:1}

.split .tran-left1_5 {transform:translateX(100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:1.5s;}
.split.ANI .tran-left1_5 {transform:translateX(0%)  ;opacity:1}

.split .tran-left2 {transform:translateX(100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:2s;}
.split.ANI .tran-left2 {transform:translateX(0%)  ;opacity:1}

.split .tran-left2_5 {transform:translateX(100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:2.5s;}
.split.ANI .tran-left2_5 {transform:translateX(0%)  ;opacity:1}

.split .tran-left3 {transform:translateX(100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:3s;}
.split.ANI .tran-left3 {transform:translateX(0%)  ;opacity:1}



.split .tran-down0 {transform:translateY(-100%);opacity:0;  transition:transform 1s ,opacity 1s; transition-delay:0s;}
.split.ANI .tran-down0 {transform:translateY(0%)  ;opacity:1}

.split .tran-down0_5 {transform:translateY(-100%);opacity:0;  transition:transform 1s ,opacity 1s; transition-delay:0.5s;}
.split.ANI .tran-down0_5 {transform:translateY(0%)  ;opacity:1}

.split .tran-down1 {transform:translateY(-100%);opacity:0;  transition:transform 1s ,opacity 1s; transition-delay:1s;}
.split.ANI .tran-down1 {transform:translateY(0%)  ;opacity:1}

.split .tran-down1_5 {transform:translateY(-100%);opacity:0;  transition:transform 1s ,opacity 1s; transition-delay:1.5s;}
.split.ANI .tran-down1_5 {transform:translateY(0%)  ;opacity:1}

.split .tran-down2 {transform:translateY(-100%);opacity:0;  transition:transform 1s ,opacity 1s; transition-delay:2s;}
.split.ANI .tran-down2 {transform:translateY(0%)  ;opacity:1}

.split .tran-down2_5 {transform:translateY(-100%);opacity:0;  transition:transform 1s ,opacity 1s; transition-delay:2.5s;}
.split.ANI .tran-down2_5 {transform:translateY(0%)  ;opacity:1}

.split .tran-down3 {transform:translateY(-100%);opacity:0;  transition:transform 1s ,opacity 1s; transition-delay:3s;}
.split.ANI .tran-down3 {transform:translateY(0%)  ;opacity:1}


.split .tran-up0 {transform:translateY(100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:0s;}
.split.ANI .tran-up0 {transform:translateY(0%)  ;opacity:1}

.split .tran-up0_5 {transform:translateY(100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:0.5s;}
.split.ANI .tran-up0_5 {transform:translateY(0%)  ;opacity:1}

.split .tran-up1 {transform:translateY(100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:1s;}
.split.ANI .tran-up1 {transform:translateY(0%)  ;opacity:1}

.split .tran-up1_5 {transform:translateY(100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:1.5s;}
.split.ANI .tran-up1_5 {transform:translateY(0%)  ;opacity:1}

.split .tran-up2 {transform:translateY(100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:2s;}
.split.ANI .tran-up2 {transform:translateY(0%)  ;opacity:1}

.split .tran-up2_5 {transform:translateY(100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:2.5s;}
.split.ANI .tran-up2_5 {transform:translateY(0%)  ;opacity:1}

.split .tran-up3 {transform:translateY(100%);opacity:0; transition:transform 1s ,opacity 1s; transition-delay:3s;}
.split.ANI .tran-up3 {transform:translateY(0%)  ;opacity:1}
