body { width:100%; height:100%; }

 
 .text {
  position: absolute;
  width: 90%;
  box-sizing:border-box; left:5%;
   top: 30%; font-size:4vw;  overflow:hidden;  z-index:999
 }

 .text * { font-family:'Montserrat'; font-weight:700; }

 .text p {
  display: inline-block;
  vertical-align: top;
  margin: 0;  color:#fff; line-height:1em;   
}

.word {
  position: absolute;
  width: 100%;
  opacity: 0; 
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px; 
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wisteria {
  color: #8e44ad;
}

.belize {
  color: #2980b9;
}

.pomegranate {
  color: #c0392b;
}

.green {
  color: #16a085;
}

.midnight {
  color: #2c3e50;
}


a.vi_btn {font-size:1rem; border:2px solid #fff; padding:15px 50px;  color:#fff !important; line-height:1em;   transition: 0.3s linear; box-sizing:border-box;  float:left;   }
a.vi_btn:hover {padding:15px 60px; border:2px solid #fff; letter-spacing:2px }

.vi_one_link {width:140px;  height:140px;  text-align:center;  font-size:1rem;  display:inline-block; border-radius:50%; vertical-align:top; position:relative; transition: background-color 0.3s ease-in;}
.vi_one_link div {width:130px; left:50%; top:50%; position:absolute; transform: translate(-50%, -50%); color:#fff; font-weight:400; font-size:1rem }
.vi_one_link span { background:url('/common/img/ci2.png') no-repeat; background-size:cover; -webkit-animation: rotate-center 8s ease-in-out infinite;
	        animation: rotate-center 8s ease-in-out infinite; width:100%; height:100%; display:inline-block}
.vi_one_link:hover  {background-color:#752f8a}
.vi_one_link:hover  span {background:none}
 
 
 .vi_content_wrap {width:100%;  margin-top:30px;  float:left; }
  
  @-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}



/*PC비쥬얼*/


@media all and (min-width:800px) {

.pc_vi {width:100%; height:100%}
.m_vi {display:none}


}


/*모바일*/
@media all and (max-width:800px) {

.m_vi {width:100%; height:100%}

.pc_vi {display:none}

 .text {
    font-size:9vw; top:50%; transform: translate(0, -55%); 
 }
.text2 {
    font-size:9vw; top:30%;
 }

 .vi_one_link {width:120px; height:120px}


}
/******/