@charset "utf-8";
@media (min-width:768px){
#hd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 1000px;
  background-color: #ffffff00;
  transition: 0.5s;
}
#hd.on {
  background-color: #ecf2f3;
}
#contents {
  min-width: 1275px;
}

/* Main Slide */

.main #vis.swiper-container .swiper-button-next {
  width: 71px;
  height: 140px;
  background-image: url(../../img/main/main_next.png);
  background-size: auto;
}
.main #vis.swiper-container .swiper-button-prev {
  width: 71px;
  height: 140px;
  background-image: url(../../img/main/main_prev.png);
  background-size: auto;
}
.main #vis {
  height: 927px;
}
.main #vis .swiper-slide {
  overflow: hidden;
}
.main .main_wrap {
  width: 1275px;
  margin: 0 auto;
}

.main #vis .wrap {
  position: relative;
  width: 1210px;
  margin: 0 auto;
}
.main #vis .sw_a {
  position: absolute;
}
.main #vis .sw1 {
  background: url("../../img/main/visual/v1/visBg.jpg") no-repeat center;
  height: 927px;
}
.main #vis .sw1 .sw_a1 {
  top: 306px;
  left: 0px;
  opacity: 0;
  animation: none;
}
.main #vis .sw1 .sw_a1_1 {
  top: 281px;
  left: 36px;
  opacity: 0;
  animation: none;
}
.main #vis .sw1 .sw_a1_2 {
  top: 281px;
  left: 114px;
  opacity: 0;
  animation: none;
}
.main #vis .sw1 .sw_a1_3 {
  top: 281px;
  left: 201px;
  opacity: 0;
  animation: none;
}
.main #vis .sw1 .sw_a1_4 {
  top: 281px;
  left: 283px;
  opacity: 0;
  animation: none;
}
.main #vis .sw1 .sw_a1_5 {
  top: 281px;
  left: 366px;
  opacity: 0;
  animation: none;
}
.main #vis .sw1 .sw_a2 {
  top: 427px;
  left: 0;
  opacity: 0;
  animation: none;
}
.main #vis .sw1 .sw_a3 {
  top: 540px;
  left: 0;
  opacity: 0;
  animation: none;
}
.main #vis .sw1 .sw_a4 {
  top: 587px;
  left: 0;
  opacity: 0;
  animation: none;
}
.main #vis .sw1 .sw_a5 {
  top: 669px;
  left: 0;
  opacity: 0;
  animation: none;
}

.main #vis .sw1.on .sw_a1 {
  -webkit-animation: vis1_ani1 0.5s 0.1s linear both;
  animation: vis1_ani1 0.5s 0.1s linear both;
}
.main #vis .sw1.on .sw_a1_1 {
  -webkit-animation: vis1_ani2 0.5s 0.6s linear both;
  animation: vis1_ani2 0.5s 0.6s linear both;
}
.main #vis .sw1.on .sw_a1_2 {
  -webkit-animation: vis1_ani2 0.5s 0.8s linear both;
  animation: vis1_ani2 0.5s 0.8s linear both;
}
.main #vis .sw1.on .sw_a1_3 {
  -webkit-animation: vis1_ani2 0.5s 1s linear both;
  animation: vis1_ani2 0.5s 1s linear both;
}
.main #vis .sw1.on .sw_a1_4 {
  -webkit-animation: vis1_ani2 0.5s 1.2s linear both;
  animation: vis1_ani2 0.5s 1.2s linear both;
}
.main #vis .sw1.on .sw_a1_5 {
  -webkit-animation: vis1_ani2 0.5s 1.4s linear both;
  animation: vis1_ani2 0.5s 1.4s linear both;
}
.main #vis .sw1.on .sw_a2 {
  -webkit-animation: vis1_ani3 0.5s 1.8s linear both;
  animation: vis1_ani3 0.5s 1.8s linear both;
}
.main #vis .sw1.on .sw_a3 {
  -webkit-animation: vis1_ani4 0.3s 2.2s linear both;
  animation: vis1_ani4 0.5s 2.2s linear both;
}
.main #vis .sw1.on .sw_a4 {
  -webkit-animation: vis1_ani4 0.3s 2.6s linear both;
  animation: vis1_ani4 0.5s 2.6s linear both;
}
.main #vis .sw1.on .sw_a5 {
  -webkit-animation: vis1_ani4 0.3s 3s linear both;
  animation: vis1_ani4 0.5s 3s linear both;
}

@keyframes vis1_ani1 {
  0% {
    top: 336px;
    opacity: 0;
  }
  100% {
    top: 306px;
    opacity: 1;
  }
}
@keyframes vis1_ani2 {
  0% {
    top: 270px;
    opacity: 0;
  }
  50% {
    top: 295x;
    opacity: 1;
  }
  100% {
    top: 281px;
    opacity: 1;
  }
}
@keyframes vis1_ani3 {
  0% {
    top: 457px;
    opacity: 0;
  }
  100% {
    top: 427px;
    opacity: 1;
  }
}
@keyframes vis1_ani4 {
  0% {
    left: -30px;
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}

.main #vis .sw2 {
  background: url("../../img/main/visual/v2/visBg.jpg") no-repeat center;
  height: 927px;
}
.main #vis .sw2 .sw_a1 {
  top: 177px;
  left: 11px;
  opacity: 0;
  animation: none;
}
.main #vis .sw2 .sw_a2 {
  top: 269px;
  left: 787px;
  max-width: 370px;
  height: 20px;
  overflow: hidden;
  opacity: 0;
  animation: none;
}
.main #vis .sw2 .sw_a3 {
  top: 319px;
  left: 787px;
  opacity: 0;
  animation: none;
}
.main #vis .sw2 .sw_a4 {
  top: 551px;
  left: 787px;
  opacity: 0;
  animation: none;
}
.main #vis .sw2 .sw_a5 {
  top: 695px;
  left: 787px;
  opacity: 0;
  animation: none;
}
.main #vis .sw2 .sw_a5 {
  top: 695px;
  left: 787px;
  opacity: 0;
  animation: none;
}
.main #vis .sw2 .sw_a6 {
  top: 782px;
  left: 790px;
  opacity: 0;
  animation: none;
}

.main #vis .sw2.on .sw_a1 {
  -webkit-animation: vis2_ani1 0.5s 0.1s linear both;
  animation: vis2_ani1 0.5s 0.1s linear both;
}
.main #vis .sw2.on .sw_a2 {
  -webkit-animation: vis2_ani2 1s 0.5s linear both;
  animation: vis2_ani2 1s 0.5s linear both;
}
.main #vis .sw2.on .sw_a3 {
  -webkit-animation: vis2_ani3 0.5s 1.5s linear both;
  animation: vis2_ani3 0.5s 1.5s linear both;
}
.main #vis .sw2.on .sw_a4 {
  -webkit-animation: vis2_ani4 0.5s 1.9s linear both;
  animation: vis2_ani4 0.5s 1.9s linear both;
}
.main #vis .sw2.on .sw_a5 {
  -webkit-animation: vis2_ani5 0.5s 2.4s linear both;
  animation: vis2_ani5 0.5s 2.4s linear both;
}
.main #vis .sw2.on .sw_a6 {
  -webkit-animation: vis2_ani6 0.5s 2.8s linear both;
  animation: vis2_ani6 0.5s 2.8s linear both;
}

@keyframes vis2_ani1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes vis2_ani2 {
  0% {
    max-width: 0;
    opacity: 0;
  }
  100% {
    max-width: 370px;
    opacity: 1;
  }
}
@keyframes vis2_ani3 {
  0% {
    top: 349px;
    opacity: 0;
  }
  100% {
    top: 319px;
    opacity: 1;
  }
}
@keyframes vis2_ani4 {
  0% {
    top: 581px;
    opacity: 0;
  }
  100% {
    top: 551px;
    opacity: 1;
  }
}
@keyframes vis2_ani5 {
  0% {
    top: 725px;
    opacity: 0;
  }
  100% {
    top: 695px;
    opacity: 1;
  }
}
@keyframes vis2_ani6 {
  0% {
    top: 812px;
    opacity: 0;
  }
  100% {
    top: 782px;
    opacity: 1;
  }
}

.main #vis .sw3 {
  background: url("../../img/main/visual/v3/visBg.jpg") no-repeat center;
  height: 927px;
}
.main #vis .sw3 .sw_a1 {
  top: 283px;
  right: 0;
  opacity: 0;
  animation: none;
}
.main #vis .sw3 .sw_a2 {
  top: 283px;
  left: 0;
  opacity: 0;
  animation: none;
}
.main #vis .sw3 .sw_a3 {
  top: 345px;
  left: 0;
  opacity: 0;
  animation: none;
}
.main #vis .sw3 .sw_a4 {
  top: 461px;
  left: 0;
  opacity: 0;
  animation: none;
}
.main #vis .sw3 .sw_a5 {
  top: 625px;
  left: 319px;
  display: inline-block;
  width: 1px;
  height: 34px;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  animation: none;
}
.main #vis .sw3 .sw_a6 {
  top: 686px;
  left: 0;
  opacity: 0;
  animation: none;
}
.main #vis .sw3 .sw_a7 {
  top: 764px;
  left: 238px;
  opacity: 0;
  animation: none;
}

.main #vis .sw3.on .sw_a1 {
  -webkit-animation: vis3_ani1 0.5s 0.1s linear both;
  animation: vis3_ani1 0.5s 0.1s linear both;
}
.main #vis .sw3.on .sw_a2 {
  -webkit-animation: vis3_ani2 0.5s 0.5s linear both;
  animation: vis3_ani2 0.5s 0.5s linear both;
}
.main #vis .sw3.on .sw_a3 {
  -webkit-animation: vis3_ani3 0.5s 0.9s linear both;
  animation: vis3_ani3 0.5s 0.9s linear both;
}
.main #vis .sw3.on .sw_a4 {
  -webkit-animation: vis3_ani4 0.5s 1.3s linear both;
  animation: vis3_ani4 0.5s 1.3s linear both;
}
.main #vis .sw3.on .sw_a5 {
  -webkit-animation: vis3_ani5 0.5s 1.8s linear both;
  animation: vis3_ani5 0.5s 1.8s linear both;
}
.main #vis .sw3.on .sw_a6 {
  -webkit-animation: vis3_ani6 0.5s 2.2s linear both;
  animation: vis3_ani6 0.5s 2.2s linear both;
}
.main #vis .sw3.on .sw_a7 {
  -webkit-animation: vis3_ani7 0.5s 2.6s linear both;
  animation: vis3_ani7 0.5s 2.6s linear both;
}

@keyframes vis3_ani1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes vis3_ani2 {
  0% {
    top: 313px;
    opacity: 0;
  }
  100% {
    top: 283px;
    opacity: 1;
  }
}
@keyframes vis3_ani3 {
  0% {
    top: 375px;
    opacity: 0;
  }
  100% {
    top: 345px;
    opacity: 1;
  }
}
@keyframes vis3_ani4 {
  0% {
    top: 491px;
    opacity: 0;
  }
  100% {
    top: 461px;
    opacity: 1;
  }
}
@keyframes vis3_ani5 {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 34px;
    opacity: 1;
  }
}
@keyframes vis3_ani6 {
  0% {
    top: 716px;
    opacity: 0;
  }
  100% {
    top: 686px;
    opacity: 1;
  }
}
@keyframes vis3_ani7 {
  0% {
    top: 794px;
    opacity: 0;
  }
  100% {
    top: 764px;
    opacity: 1;
  }
}

.main #vis .sw4 {
  background: url("../../img/main/visual/v4/visBg.jpg") no-repeat center;
  height: 927px;
}
.main #vis .sw4 .sw_a1 {
  top: 281px;
  left: 299px;
  max-width: 613px;
  height: 17px;
  overflow: hidden;
  opacity: 0;
  animation: none;
}
.main #vis .sw4 .sw_a2 {
  top: 320px;
  left: 130px;
  opacity: 0;
  animation: none;
}
.main #vis .sw4 .sw_a3 {
  top: 617px;
  left: 605px;
  display: inline-block;
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: none;
}
.main #vis .sw4 .sw_a4 {
  top: 672px;
  left: 333px;
  opacity: 0;
  animation: none;
}
.main #vis .sw4 .sw_a5 {
  top: 758px;
  left: 521px;
  opacity: 0;
  animation: none;
}

.main #vis .sw4.on .sw_a1 {
  -webkit-animation: vis4_ani1 1.3s 0.1s linear both;
  animation: vis4_ani1 1.3s 0.1s linear both;
}
.main #vis .sw4.on .sw_a2 {
  -webkit-animation: vis4_ani2 0.5s 1.4s linear both;
  animation: vis4_ani2 0.5s 1.4s linear both;
}
.main #vis .sw4.on .sw_a3 {
  -webkit-animation: vis4_ani3 0.5s 1.9s linear both;
  animation: vis4_ani3 0.5s 1.9s linear both;
}
.main #vis .sw4.on .sw_a4 {
  -webkit-animation: vis4_ani4 0.3s 2.3s linear both;
  animation: vis4_ani4 0.3s 2.3s linear both;
}
.main #vis .sw4.on .sw_a5 {
  -webkit-animation: vis4_ani5 0.3s 2.6s linear both;
  animation: vis4_ani5 0.3s 2.6s linear both;
}

@keyframes vis4_ani1 {
  0% {
    max-width: 0;
    opacity: 0;
  }
  100% {
    max-width: 613px;
    opacity: 1;
  }
}
@keyframes vis4_ani2 {
  0% {
    top: 350px;
    opacity: 0;
  }
  100% {
    top: 320px;
    opacity: 1;
  }
}
@keyframes vis4_ani3 {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 34px;
    opacity: 1;
  }
}
@keyframes vis4_ani4 {
  0% {
    top: 702px;
    opacity: 0;
  }
  100% {
    top: 672px;
    opacity: 1;
  }
}
@keyframes vis4_ani5 {
  0% {
    top: 788px;
    opacity: 0;
  }
  100% {
    top: 758px;
    opacity: 1;
  }
}

.main #vis .sw5 {
  background: url("../../img/main/visual/v5/visBg.jpg") no-repeat center;
  height: 927px;
}
.main #vis .sw5 .sw_a1 {
  top: 149px;
  left: 0;
  opacity: 0;
  animation: none;
}
.main #vis .sw5 .sw_a2 {
  top: 265px;
  left: 653px;
  opacity: 0;
  animation: none;
}
.main #vis .sw5 .sw_a3 {
  top: 590px;
  left: 912px;
  display: inline-block;
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: none;
}
.main #vis .sw5 .sw_a4 {
  top: 651px;
  left: 653px;
  opacity: 0;
  animation: none;
}
.main #vis .sw5 .sw_a5 {
  top: 740px;
  left: 653px;
  opacity: 0;
  animation: none;
}
.main #vis .sw5 .sw_a6 {
  top: 792px;
  left: 831px;
  opacity: 0;
  animation: none;
}

.main #vis .sw5.on .sw_a1 {
  -webkit-animation: vis5_ani1 1s 0.1s linear both;
  animation: vis5_ani1 1s 0.1s linear both;
}
.main #vis .sw5.on .sw_a2 {
  -webkit-animation: vis5_ani2 0.5s 1.1s linear both;
  animation: vis5_ani2 0.5s 1.1s linear both;
}
.main #vis .sw5.on .sw_a3 {
  -webkit-animation: vis5_ani3 0.5s 1.6s linear both;
  animation: vis5_ani3 0.5s 1.6s linear both;
}
.main #vis .sw5.on .sw_a4 {
  -webkit-animation: vis5_ani4 0.3s 2.1s linear both;
  animation: vis5_ani4 0.3s 2.1s linear both;
}
.main #vis .sw5.on .sw_a5 {
  -webkit-animation: vis5_ani5 0.3s 2.4s linear both;
  animation: vis5_ani5 0.3s 2.4s linear both;
}
.main #vis .sw5.on .sw_a6 {
  -webkit-animation: vis5_ani6 0.3s 2.7s linear both;
  animation: vis5_ani6 0.3s 2.7s linear both;
}

@keyframes vis5_ani1 {
  0% {
    left: 302px;
    opacity: 0;
  }
  40% {
    left: 302px;
    opacity: 1;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}
@keyframes vis5_ani2 {
  0% {
    top: 295px;
    opacity: 0;
  }
  100% {
    top: 265px;
    opacity: 1;
  }
}
@keyframes vis5_ani3 {
  0% {
    height: 0px;
    opacity: 0;
  }
  100% {
    height: 34px;
    opacity: 1;
  }
}
@keyframes vis5_ani4 {
  0% {
    top: 681px;
    opacity: 0;
  }
  100% {
    top: 651px;
    opacity: 1;
  }
}
@keyframes vis5_ani5 {
  0% {
    top: 770px;
    opacity: 0;
  }
  100% {
    top: 740px;
    opacity: 1;
  }
}
@keyframes vis5_ani6 {
  0% {
    top: 822px;
    opacity: 0;
  }
  100% {
    top: 792px;
    opacity: 1;
  }
}

/* Main common Area */

span.text-bold {
  font-weight: 800;
}
#contents.main section.specialArea,
#contents.main section.strengthArea,
#contents.main section.strengthFixArea,
#contents.main section.storythArea,
#contents.main section.communicationhArea {
  width: 100%;
  margin: 80px auto;
}
#contents.main section.specialArea div.innerHeader,
#contents.main section.strengthArea div.innerHeader,
#contents.main section.strengthFixArea div.innerHeader,
#contents.main section.storythArea div.innerHeader,
#contents.main section.communicationhArea div.innerHeader,
#contents.main section.etcArea div.innerHeader-1,
#contents.main section.etcArea div.innerHeader-2 {
  text-align: center;
  margin-bottom: 50px;
}
#contents.main section.specialArea div.innerWrap,
#contents.main section.strengthArea div.innerWrap,
#contents.main section.strengthFixArea div.innerWrap,
#contents.main section.storythArea div.innerWrap,
#contents.main section.communicationhArea div.innerWrap {
  display: flex;
}
#contents.main section.specialArea .innerHeader > h3,
#contents.main section.strengthArea .innerHeader > h3,
#contents.main section.strengthFixArea .innerHeader > h3,
#contents.main section.storythArea .innerHeader > h3,
#contents.main section.communicationhArea .innerHeader > h3,
#contents.main section.etcArea .innerHeader-1 > h3,
#contents.main section.etcArea .innerHeader-2 > h3 {
  font-size: 44px;
  font-weight: 400;
  color: #333333;
}
#contents.main section.specialArea .innerHeader > h4,
#contents.main section.strengthArea .innerHeader > h4,
#contents.main section.strengthFixArea .innerHeader > h4,
#contents.main section.storythArea .innerHeader > h4,
#contents.main section.communicationhArea .innerHeader > h4,
#contents.main section.etcArea .innerHeader-1 > h4,
#contents.main section.etcArea .innerHeader-2 > h4 {
  font-size: 20px;
  font-weight: 500;
  color: #999999;
  margin-bottom: 20px;
}
#contents.main section ul a li .ico {
  display: block;
  width: 33px;
  height: 48px;
  background: url("../../img/main/specialAreaIco.png");
}
#contents.main section ul a li .ico.ico-2 {
  display: block;
  width: 33px;
  height: 48px;
  background: url("../../img/main/specialAreaIco2.png");
}
#contents.main section ul a:hover li .ico {
  display: none;
}
#contents.main section ul a li .ico.ico-1 {
  background-position: 0 0;
}
#contents.main section ul a li .ico.ico-2 {
  background-position: 0 145px;
}
#contents.main section ul a li .ico.ico-3 {
  width: 43px;
  background-position: 0 48px;
}

/* Special Area */
#contents.main .specialArea ul {
  width: 390px;
  height: 840px;
}
#contents.main .specialArea ul li {
  width: 100%;
  height: 410px;
}
#contents.main .specialArea ul li:first-child {
  margin-bottom: 20px;
}
#contents.main .specialArea ul > a {
  display: block;
  overflow: hidden;
}
#contents.main .specialArea ul a li {
  position: relative;
  padding-top: 260px;
  padding-left: 30px;
  /*background-color: gray;*/
  transition: 1.5s;
}
#contents.main .specialArea ul > a:hover li {
  text-align: center;
  padding-left: 0px;
}
#contents.main .specialArea ul a li div.cover {
  position: absolute;
  top: 0px;
  left: 0px;
  width: inherit;
  height: inherit;
  /*    background-color: #adadac26; 이미지 자체에 적용 되어 있음. */
}
#contents.main .specialArea ul a li > img.nomalImg,
#contents.main .specialArea ul a li > img.hoverImg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 390px;
  height: 410px;
  width: inherit;
  height: inherit;
  z-index: -1;
  transition: 0.5s;
}
#contents.main .specialArea ul a li > img.hoverImg,
#contents.main .specialArea ul > a:hover li div.cover,
#contents.main .specialArea ul a:hover li > img.nomalImg {
  opacity: 0;
  /*    transition-delay:0.6s; */
}
#contents.main .specialArea ul a li > h4.hoverText,
#contents.main .specialArea ul a:hover li > h4.nomalText {
  display: none;
}
#contents.main .specialArea ul a:hover li > h4.hoverText {
  display: block;
}
#contents.main .specialArea ul a:hover li > img.hoverImg {
  opacity: 1;
}
#contents.main .specialArea ul a li > h3,
#contents.main .specialArea ul a li > h4 {
  color: white;
}
#contents.main .specialArea ul a li > h3 {
  font-size: 34px;
}
#contents.main .specialArea ul a li > h4 {
  font-size: 18px;
}
#contents.main .specialArea ul a li div.box {
  position: absolute;
  top: 175px;
  right: 0px;
  width: 80px;
  height: 80px;
  font-size: 14px;
  text-align: center;
  letter-spacing: 1px;
  background-color: #01b5e6;
  padding: 13px;
  transition: 0.5s;
}
#contents.main .specialArea ul a:hover li div.box {
  opacity: 0;
  right: 0px;
  right: 309px;
}
#contents.main .specialArea ul a:hover li div.box > p {
  color: white;
}
#contents.main .specialArea ul a:hover li div.box > span.arrow,
#contents.main .specialArea ul a:hover li div.box > span.arrow::before,
#contents.main .specialArea ul a:hover li div.box > span.arrow::after {
  background: white;
}
#contents.main .specialArea ul a li div.box > span.arrow {
  position: absolute;
  top: 70px;
  right: 20px;
  width: 40px;
  height: 1px;
  display: block;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#contents.main .specialArea ul li div.box > span.arrow::before {
  content: "";
  display: block;
  height: 1px;
  background: black;
}
#contents.main .specialArea ul li div.box > span.arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  right: 0;
  width: 8px;
  height: 1px;
  background: black;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*
제거예정
#contents.main .specialArea ul.left{

}
#contents.main .specialArea ul.right{

}
*/
#contents.main .specialArea div.center {
  position: relative;
  width: 390px;
  text-align: center;
  background: url("../../img/main/specialAreaCenter.jpg") no-repeat center;
  padding-top: 465px;
  margin: 0 20px;
}
#contents.main .specialArea div.center > .glow {
  top: 218px;
  left: 203px;
  position: absolute;
  width: 15px;
  height: 15px;
  font-size: 0px;
  border-radius: 50%;
  background-color: #ffffff85;
  box-shadow: 0 0 60px 30px #fff, /* inner white */ 0 0 100px 60px #f0f,
    /* middle magenta */ 0 0 140px 90px #0ff; /* outer cyan */
  animation: light 3s infinite ease-in-out;
}
@keyframes light {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

#contents.main .specialArea div.center .number {
  font-size: 120px;
  color: white;
}
#contents.main .specialArea div.center .number > span {
  font-weight: 800;
}
#contents.main .specialArea div.center p {
  font-size: 30px;
  color: #01b5e7;
}

/* Strengt Area */

#contents.main section.strengthArea div.innerWrap {
  position: relative;
  width: 0%;
  height: 710px;
  background: url("../../img/main/strengthAreaImgBg.png") no-repeat;
  background-size: cover;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  -ms-transition: width 1s;
  transition: width 1s;

  opacity: 0;
  filter: Alpha(opacity=0);
  visibility: hidden;
  -ms-transform: scale(0.9, 0.9);
  -webkit-transform: scale(0.9, 0.9);
  -moz-transform: scale(0.9, 0.9);
  -o-transform: scale(0.9, 0.9);
  transform: scale(0.9, 0.9);
  -webkit-transition: all 0.6s 0.4s;
  -moz-transition: all 0.6s 0.4s;
  -o-transition: all 0.6s 0.4s;
  -ms-transition: all 0.6s 0.4s;
  transition: all 0.6s 0.4s;
}
#contents.main section.strengthArea div.innerWrap.bg2 {
  background: url("../../img/main/strengthAreaImgBg2.png") no-repeat;
  background-size: cover;
}
#contents.main section.strengthArea div.innerWrap.bg3 {
  background: url("../../img/main/strengthAreaImgBg3.png") no-repeat;
  background-size: cover;
}
#contents.main section.strengthArea.action div.innerWrap {
  width: 100%;
  opacity: 1;
  visibility: visible;
  filter: Alpha(opacity=100);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
#contents.main section.strengthArea div.innerWrap > a > img.text {
  position: absolute;
  top: 130px;
  right: 1090px;
  width: 552px;
  height: 442px;
  z-index: 600;
}
#contents.main section.strengthArea div.innerWrap > span.more {
  opacity: 0;
  position: absolute;
  top: 475px;
  right: 1515px;
  width: 125px;
  height: 30px;
  color: white;
  font-size: 14px;
  border: solid white 1px;
  padding-top: 2px;
  padding-left: 12px;
  z-index: 500;
}
#contents.main section.strengthArea.action div.innerWrap > span.more {
  opacity: 1;
}
#contents.main section.strengthArea div.innerWrap > span.more > span.arrow {
  position: absolute;
  top: 13px;
  right: 12px;
  width: 20px;
  height: 1px;
  display: block;
  background: white;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#contents.main
  section.strengthArea
  div.innerWrap
  > span.more
  > span.arrow::before {
  content: "";
  display: block;
  height: 1px;
  background: white;
}
#contents.main
  section.strengthArea
  div.innerWrap
  > span.more
  > span.arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  right: 0;
  width: 8px;
  height: 1px;
  background: white;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#contents.main section.strengthArea div.innerWrap a:hover + span.more {
  color: #31343b;
  border: solid #31343b 1px;
  background-color: white;
}
#contents.main
  section.strengthArea
  div.innerWrap
  a:hover
  + span.more
  > span.arrow,
#contents.main
  section.strengthArea
  div.innerWrap
  a:hover
  + span.more
  > span.arrow::before,
#contents.main
  section.strengthArea
  div.innerWrap
  a:hover
  + span.more
  > span.arrow::after {
  background: #31343b;
}
#contents.main section.strengthArea div.innerWrap > img.cover {
  opacity: 0;
  filter: Alpha(opacity=0);
  visibility: hidden;
  -ms-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);

  position: absolute;
  top: 50px;
  right: 0px;
  width: 990px;
  height: 660px;
}
#contents.main section.strengthArea.action div.innerWrap > img.cover {
  animation: strengthAreaCoverAction 1s 1s 1 ease forwards;
}

@keyframes strengthAreaCoverAction {
  0% {
    transform: translateY(-40px);
    opacity: 0;
    filter: Alpha(opacity=0);
    visibility: hidden;
    -ms-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
    filter: Alpha(opacity=100);
    visibility: visible;
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
#contents.main section.strengthArea .strengthAreaInnerWrap-pagination {
  opacity: 0;
  position: absolute;
  z-index: 2;
  bottom: 135px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff00;
  text-align: right;
  padding-right: 1090px;
}
#contents.main section.strengthArea .strengthAreaInnerWrap-control {
  opacity: 0;
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 120px;
  padding-right: 1090px;
}
#contents.main section.strengthArea .strengthAreaInnerWrap-control img {
  cursor: pointer;
}
#contents.main
  section.strengthArea
  .strengthAreaInnerWrap-control
  img.strengthAreaInnerWrap-control-button-play {
  display: none;
}
#contents.main
  section.strengthArea
  .strengthAreaInnerWrap-control
  img.strengthAreaInnerWrap-control-button-play,
#contents.main
  section.strengthArea
  .strengthAreaInnerWrap-control
  img.strengthAreaInnerWrap-control-button-stop {
  margin: 0 10px;
}
#contents.main section.strengthArea.action .strengthAreaInnerWrap-pagination {
  opacity: 1;
  color: gray;
}
#contents.main section.strengthArea.action .strengthAreaInnerWrap-control {
  opacity: 1;
}
#contents.main section.strengthArea .strengthAreaInnerWrap-pagination-bullet {
  padding-right: 20px;
  cursor: pointer;
}
#contents.main
  section.strengthArea
  .strengthAreaInnerWrap-pagination-bullet:last-child {
  padding-right: 0px;
}
#contents.main
  section.strengthArea
  .strengthAreaInnerWrap-pagination-bullet.strengthAreaInnerWrap-pagination-bullet-active {
  color: white;
}

/* 

    Strengt Fix Area 

*/

#contents.main section.strengthFixArea .swiper-slide {
  background: url("../../img/main/strengthAreaImgBg.png") no-repeat;
  background-size: cover;
}
#contents.main section.strengthFixArea .swiper-slide.bg2 {
  background: url("../../img/main/strengthAreaImgBg2.png") no-repeat;
  background-size: cover;
}
#contents.main section.strengthFixArea .swiper-slide.bg3 {
  background: url("../../img/main/strengthAreaImgBg3.png") no-repeat;
  background-size: cover;
}
#contents.main section.strengthFixArea div.innerWrap {
  position: relative;
  width: 1410px;
  height: 489px;
  margin: 0 auto;
}
#contents.main section.strengthFixArea div.innerWrap > a > img.text {
  position: absolute;
  top: 80px;
  left: 0;
  width: 561px;
  height: 257px;
  z-index: 600;

  opacity: 0;
}
#contents.main section.strengthFixArea div.innerWrap > div.lineWidth,
#contents.main section.strengthFixArea div.innerWrap > div.lineHeight {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3137254901960784);
  opacity: 0;
}
#contents.main section.strengthFixArea div.innerWrap > div.lineWidth {
  top: 163px;
  height: 6px;
}
#contents.main section.strengthFixArea div.innerWrap > div.lineHeight {
  left: 546px;
  width: 6px;
}

#contents.main section.strengthFixArea div.innerWrap > div.line1 {
  left: 141px;
  width: 20px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line1.number02 {
  left: 193px;
  width: 20px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line1.number03 {
  left: 166px;
  width: 20px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line2 {
  left: 168px;
  width: 6px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line2.number02 {
  left: 221px;
  width: 6px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line2.number03 {
  left: 195px;
  width: 6px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line3 {
  left: 181px;
  width: 6px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line3.number02 {
  left: 233px;
  width: 6px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line3.number03 {
  left: 210px;
  width: 6px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line4 {
  left: 194px;
  width: 352px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line4.number02 {
  left: 246px;
  width: 300px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line4.number03 {
  left: 223px;
  width: 323px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line5 {
  top: 163px;
  height: 325px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line6 {
  top: 495px;
  height: 6px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line7 {
  top: 507px;
  height: 6px;
}
#contents.main section.strengthFixArea div.innerWrap > div.line8 {
  top: 520px;
  height: 20px;
}
#contents.main section.strengthFixArea div.innerWrap > span.more {
  position: absolute;
  top: 307px;
  left: 40px;
  width: 125px;
  height: 30px;
  line-height: 24px;
  color: white;
  font-size: 14px;
  border: solid white 1px;
  padding-top: 2px;
  padding-left: 12px;
  z-index: 500;
  opacity: 0;
}
#contents.main section.strengthFixArea div.innerWrap > span.more > span.arrow {
  position: absolute;
  top: 13px;
  right: 12px;
  width: 20px;
  height: 1px;
  display: block;
  background: white;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#contents.main
  section.strengthFixArea
  div.innerWrap
  > span.more
  > span.arrow::before {
  content: "";
  display: block;
  height: 1px;
  background: white;
}
#contents.main
  section.strengthFixArea
  div.innerWrap
  > span.more
  > span.arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  right: 0;
  width: 8px;
  height: 1px;
  background: white;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#contents.main section.strengthFixArea div.innerWrap a:hover + span.more {
  color: #31343b;
  border: solid #31343b 1px;
  background-color: white;
}
#contents.main
  section.strengthFixArea
  div.innerWrap
  a:hover
  + span.more
  > span.arrow,
#contents.main
  section.strengthFixArea
  div.innerWrap
  a:hover
  + span.more
  > span.arrow::before,
#contents.main
  section.strengthFixArea
  div.innerWrap
  a:hover
  + span.more
  > span.arrow::after {
  background: #31343b;
}

#contents.main section.strengthFixArea div.innerWrap > img.cover {
  opacity: 0;
  filter: Alpha(opacity=0);
  /*visibility: hidden;*/
  /*-ms-transform:scale(0.7); 
    -webkit-transform:scale(0.7); 
    -moz-transform:scale(0.7); 
    -o-transform:scale(0.7); 
    transform:scale(0.7);*/

  position: absolute;
  top: 50px;
  right: -17.5%;
  /*width:990px;
    height: 660px;*/
}
#contents.main
  section.strengthFixArea
  div.innerWrap.on
  > a
  > img.text:nth-child(1) {
  -webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    0.1s both;
  animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}
#contents.main section.strengthFixArea div.innerWrap.on > img.cover {
  -webkit-animation: strengthFixAreaCoverInit2 0.5s 0.1s both;
  animation: strengthFixAreaCoverInit2 0.5s 0.1s both;
}
@-webkit-keyframes strengthFixAreaCoverInit2 {
  0% {
    right: -30%;
    opacity: 0;
  }
  100% {
    right: -17.5%;
    opacity: 1;
  }
}
@keyframes strengthFixAreaCoverInit2 {
  0% {
    right: -30%;
    opacity: 0;
  }
  100% {
    right: -17.5%;
    opacity: 1;
  }
}
/*#contents.main section.strengthFixArea div.innerWrap.on > img.cover {
    -webkit-animation: strengthFixAreaCoverInit 0.5s .1s both, strengthFixAreaCoverAction 1s 0.6s ease forwards;
            animation: strengthFixAreaCoverInit 0.5s .1s both, strengthFixAreaCoverAction 1s 0.6s ease forwards;
}

@-webkit-keyframes strengthFixAreaCoverInit {
    0% {
        width: 0px;
        opacity: 0;
        filter: Alpha(opacity=0);
        visibility: hidden;
    }
    100% {
        width: 990px;
        opacity: 1;
        filter: Alpha(opacity=100);
        visibility: visible;
    }
}
@keyframes strengthAreaFixCoverInit {
    0% {
        width: 0px;
        opacity: 0;
        filter: Alpha(opacity=0);
        visibility: hidden;
    }
    100% {
        width: 990px;
        opacity: 1;
        filter: Alpha(opacity=100);
        visibility: visible;
    }
}

@-webkit-keyframes strengthFixAreaCoverAction {
    0% {
        transform: translateY(-40px);
        -ms-transform:scale(0.7); 
        -webkit-transform:scale(0.7); 
        -moz-transform:scale(0.7); 
        -o-transform:scale(0.7); 
        transform:scale(0.7);
    }
    100% {
        transform: translateY(0px);
        -ms-transform:scale(1); 
        -webkit-transform:scale(1); 
        -moz-transform:scale(1); 
        -o-transform:scale(1); 
        transform:scale(1);
    }
}
@keyframes strengthFixAreaCoverAction {
    0% {
        transform: translateY(-40px);
        -ms-transform:scale(0.7); 
        -webkit-transform:scale(0.7); 
        -moz-transform:scale(0.7); 
        -o-transform:scale(0.7); 
        transform:scale(0.7);
    }
    100% {
        transform: translateY(0px);
        -ms-transform:scale(1); 
        -webkit-transform:scale(1); 
        -moz-transform:scale(1); 
        -o-transform:scale(1); 
        transform:scale(1);
    }
}*/

/*#contents.main section.strengthFixArea div.innerWrap.on > div.line1{
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)0.6s both;
            animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)0.6s both;
}
#contents.main section.strengthFixArea div.innerWrap.on > div.line2{
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)0.8s both;
            animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)0.8s both;
}
#contents.main section.strengthFixArea div.innerWrap.on > div.line3{
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)0.8s both;
            animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)0.8s both;
}
#contents.main section.strengthFixArea div.innerWrap.on > div.line4{
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)1s both;
            animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)1s both;
}
#contents.main section.strengthFixArea div.innerWrap.on > div.line5{
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)1.3s both;
            animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)1.3s both;
}
#contents.main section.strengthFixArea div.innerWrap.on > div.line6{
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)1.6s both;
            animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)1.6s both;
}
#contents.main section.strengthFixArea div.innerWrap.on > div.line7{
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)1.6s both;
            animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)1.6s both;
}
#contents.main section.strengthFixArea div.innerWrap.on > div.line8{
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)1.8s both;
            animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)1.8s both;
}*/

#contents.main
  section.strengthFixArea
  div.innerWrap.on
  > a
  > img.text:nth-child(2) {
  -webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    0.6s both;
  animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
}
#contents.main
  section.strengthFixArea
  div.innerWrap.on
  > a
  > img.text:nth-child(3) {
  -webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    0.9s both;
  animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s both;
}
#contents.main section.strengthFixArea div.innerWrap.on > span.more {
  -webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    1.1s both;
  animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.1s both;
}

#contents.main section.strengthFixArea .strengthFixAreaInnerWrap-controlWrap {
  position: absolute;
  left: 50%;
  bottom: 120px;
  width: 1210px;
  height: 34px;
  transform: translateX(-50%);
  z-index: 605;
}
#contents.main section.strengthFixArea .strengthFixAreaInnerWrap-control {
  position: absolute;
  left: 335px;
}
#contents.main section.strengthFixArea .strengthFixAreaInnerWrap-control img {
  cursor: pointer;
}
#contents.main
  section.strengthFixArea
  .strengthFixAreaInnerWrap-control
  img.strengthAreaInnerWrap-control-button-play {
  display: none;
}
#contents.main
  section.strengthFixArea
  .strengthFixAreaInnerWrap-control
  img.strengthAreaInnerWrap-control-button-play,
#contents.main
  section.strengthFixArea
  .strengthFixAreaInnerWrap-control
  img.strengthAreaInnerWrap-control-button-stop {
  margin: 0 10px;
}

/* 

    Story Area 

*/
#contents.main section.storythArea div.innerWrap {
  flex-direction: column;
}
#contents.main .storythArea div.innerWrap > ul {
  width: 1210px;
  height: 320px;
  font-size: 0px;
  margin-bottom: 20px;
}
#contents.main .storythArea div.innerWrap > ul.type3 {
  height: 100px;
}
#contents.main .storythArea div.innerWrap > ul:last-child {
  margin-bottom: 0px;
}
#contents.main .storythArea div.innerWrap > ul > li {
  width: 595px;
  height: inherit;
  display: inline-block;
  font-size: 11px;
  background-color: #01b5e2;
  overflow: hidden;
}
#contents.main
  .storythArea
  div.innerWrap
  > ul
  > li
  div.storyAreaType1-button-next,
#contents.main
  .storythArea
  div.innerWrap
  > ul
  > li
  div.storyAreaType1-button-prev {
  position: absolute;
  right: 0;
  top: 295px;
  z-index: 1;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 22px;
  font-size: 18px;
  background-color: white;
  color: black;
  border: solid black 1px;
  cursor: pointer;
}
#contents.main
  .storythArea
  div.innerWrap
  > ul
  > li
  div.storyAreaType1-button-prev {
  right: 25px;
}
#contents.main .storythArea div.innerWrap > ul > li > a > span.more {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  line-height: 0;
  font-size: 25px;
  border: 1px solid #333333;
  padding-left: 5px;
  padding-top: 10px;
  transition: 0.5s;
}
#contents.main .storythArea div.innerWrap > ul > li > a > span.more.more-left {
  top: 190px;
  left: 25px;
}
#contents.main .storythArea div.innerWrap > ul > li > a > span.more.more-right {
  top: 190px;
  right: 25px;
}
#contents.main .storythArea div.innerWrap > ul > li > a > span.more > .cross,
#contents.main
  .storythArea
  div.innerWrap
  > ul
  > li
  > a
  > span.more
  > .cross:after {
  background: #333333;
}
#contents.main
  .storythArea
  div.innerWrap
  > ul
  > li:hover
  > a
  > span.more
  > .cross,
#contents.main
  .storythArea
  div.innerWrap
  > ul
  > li:hover
  > a
  > span.more
  > .cross:after {
  background: #4169e1;
}
#contents.main .storythArea div.innerWrap > ul > li > a > span.more > .cross {
  position: relative;
  width: 13px;
  height: 3px;
}
#contents.main
  .storythArea
  div.innerWrap
  > ul
  > li
  > a
  > span.more
  > .cross:after {
  position: absolute;
  left: 5px;
  top: -5px;
  width: 3px;
  height: 13px;
  content: "";
}
#contents.main .storythArea div.innerWrap > ul > li:hover > a > span.more {
  border-radius: 25px;
  border: 1px solid #4169e1;
  transform: rotate(90deg);
}
#contents.main .storythArea div.innerWrap > ul > li > a > img {
  transition: 0.3s;
}
#contents.main .storythArea div.innerWrap > ul > li > a > img:nth-child(2) {
  position: absolute;
  top: 40px;
  transition: none;
}
#contents.main
  .storythArea
  div.innerWrap
  > ul
  > li
  > a
  > img.left:nth-child(2) {
  left: 27px;
}
#contents.main
  .storythArea
  div.innerWrap
  > ul
  > li
  > a
  > img.right:nth-child(2) {
  right: 27px;
}
#contents.main .storythArea div.innerWrap > ul > li:hover > a > img {
  filter: brightness(105%);
  transform: scale(1.1);
}
#contents.main
  .storythArea
  div.innerWrap
  > ul
  > li:hover
  > a
  > img:nth-child(2) {
  filter: none;
  transform: none;
}
#contents.main .storythArea div.innerWrap > ul li h3.timeHeader {
  font-size: 20px;
  font-weight: 500;
  color: white;
  margin-bottom: 10px;
}
#contents.main .storythArea div.innerWrap > ul > li > hr {
  display: block;
  margin: 15px auto 11px;
  width: 325px;
  background-color: #d9e1f9;
  height: 1px;
  border: none;
}
#contents.main .storythArea div.innerWrap > ul > li > h4 {
  font-size: 20px;
  font-weight: 500;
  color: white;
}
#contents.main .storythArea div.innerWrap > ul > li > p {
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 3px;
  color: #f8ff42;
}
#contents.main .storythArea div.innerWrap > ul li ul.time {
  font-size: 16px;
  font-weight: 300;
  color: white;
  letter-spacing: 0px;
  padding: 0 0 0 2px;
}
#contents.main .storythArea div.innerWrap > ul li ul > li {
  margin-bottom: 5px;
}
#contents.main .storythArea div.innerWrap > ul li ul.time > li > h3 {
  display: inline-block;
  width: 90px;
  font-size: 16px;
  font-weight: 400;
  text-align: justify;
  text-align-last: justify;
  margin-right: 17px;
}
#contents.main .storythArea div.innerWrap > ul li ul.time > li > span {
  font-size: 12px;
}
#contents.main .storythArea div.innerWrap > ul.type2 > li,
#contents.main .storythArea div.innerWrap > ul.type3 > li {
  width: 390px;
}
#contents.main .storythArea div.innerWrap > ul.type3 > li > a > img {
  width: 100%;
  height: 100%;
}
#contents.main .storythArea div.innerWrap > ul.type1 > li:first-child {
  margin-right: 20px;
}
#contents.main .storythArea div.innerWrap > ul.type2 > li:nth-child(2) {
  padding: 25px;
  margin: 0 20px;
}
#contents.main .storythArea div.innerWrap > ul.type3 > li:nth-child(2) {
  margin: 0 20px;
}
#contents.main .storythArea div.innerWrap > ul.type2 > li:hover:nth-child(2) {
  filter: brightness(110%);
}

/* 

    CommunicationhArea Area 

*/
#contents.main section.communicationhArea {
  background-color: #f4f4f4;
  padding-top: 70px;
  padding-bottom: 60px;
  margin: 80px 0 0;
}
#contents.main section.communicationhArea div.innerWrap {
  flex-direction: column;
}
#contents.main .communicationhArea div.innerWrap > ul {
  width: 1210px;
  height: 403px;
  font-size: 0px;
  margin-bottom: 50px;
}
#contents.main .communicationhArea .columnTitle {
  display: inline-block;
  float: left;
  margin-right: 10px;
}
#contents.main .communicationhArea div.innerWrap > ul > li {
  position: relative;
  width:/*390px;*/ 295px;
  height: inherit;
  display: inline-block;
  font-size: 11px;
  background-color: #4169e1;
  overflow: hidden;
  margin: 0 5px;
}
#contents.main .communicationhArea div.innerWrap > ul > li:last-child {
  margin-right: 0;
}
#contents.main .communicationhArea div.innerWrap ul.type2 {
  height: 80px;
  /*float:right;*/
  width: 905px;
  margin-bottom: 50px;
}
#contents.main .communicationhArea div.innerWrap ul.type2 > li {
  position: relative;
  width:/*390px;*/ 295px;
  height: inherit;
  display: inline-block;
  font-size: 11px;
  background-color: #4169e1;
  overflow: hidden;
  margin: 0 10px 0 0;
  float: left;
}
/*#contents.main .communicationhArea div.innerWrap ul.type2 >li:nth-of-type(3) {margin-right:0}*/
/*#contents.main .communicationhArea div.innerWrap > ul.type2 >li:nth-child(2){
    margin: 0 20px;
}*/

#contents.main .communicationhArea div.innerWrap > ul.type3 {
  height: 370px;
}

#contents.main .communicationhArea div.innerWrap > ul.type3 > li {
  width: 595px;
  background-color: rgba(255, 255, 255, 0);
  overflow: visible;
  margin-left: 0;
}
#contents.main .communicationhArea div.innerWrap > ul.type3 > li:first-child {
  margin-right: 20px;
}

/* type 1 text inner */
/* 
    text cover top을 줄여서 재사용 하면 되지만... 내부 내용이 바뀔 수 있기에 분리.

*/
#contents.main .communicationhArea div.innerWrap ul.type1 > li div.innerText {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: white;
  padding: 0 30px;
}
#contents.main
  .communicationhArea
  div.innerWrap
  ul.type1
  > li
  div.innerText
  > h3
  > img {
  position: absolute;
  top: 15px;
  left: 0px;
}
#contents.main
  .communicationhArea
  div.innerWrap
  ul.type1
  > li
  div.innerText
  > h3 {
  font-size: 27px;
  padding-left: 40px;
}
#contents.main
  .communicationhArea
  div.innerWrap
  ul.type1
  > li
  div.innerText
  > h4 {
  font-size: 17px;
}
#contents.main
  .communicationhArea
  div.innerWrap
  ul.type1
  > li
  div.innerText
  > h3,
#contents.main
  .communicationhArea
  div.innerWrap
  ul.type1
  > li
  div.innerText
  > h4 {
  position: relative;
  font-weight: initial;
  padding-top: 7px;
  padding-bottom: 0px;
}

/* type 1 text cover */
#contents.main .communicationhArea div.innerWrap ul.type1 > li div.cover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 390px;
  height: 403px;
  background-color: white;
  transition: all 1s;
}
#contents.main .communicationhArea div.innerWrap ul.type1 > li div.cover > img {
  width: inherit;
  height: 306px;
}
#contents.main
  .communicationhArea
  div.innerWrap
  ul.type1
  > li
  div.cover
  > div.coverText {
  position: absolute;
  bottom: 0;
  left: 0;
  width: inherit;
  height: 97px;
  padding: 0 30px;
}
#contents.main
  .communicationhArea
  div.innerWrap
  ul.type1
  > li
  div.cover
  > .coverText
  > h3 {
  font-size: 27px;
  padding-left: 40px;
}
#contents.main
  .communicationhArea
  div.innerWrap
  ul.type1
  > li
  div.cover
  > .coverText
  > h3
  > img {
  position: absolute;
  top: 15px;
  left: 0px;
}
#contents.main
  .communicationhArea
  div.innerWrap
  ul.type1
  > li
  div.cover
  > .coverText
  > h4 {
  font-size: 17px;
}
#contents.main
  .communicationhArea
  div.innerWrap
  ul.type1
  > li
  div.cover
  > .coverText
  > h3,
#contents.main
  .communicationhArea
  div.innerWrap
  ul.type1
  > li
  div.cover
  > .coverText
  > h4 {
  position: relative;
  font-weight: initial;
  padding-top: 7px;
  padding-bottom: 0px;
}
/* img inner and cover */
#contents.main .communicationhArea div.innerWrap ul.type1 > li img.header,
#contents.main .communicationhArea div.innerWrap ul.type1 > li img.cover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transition: all 0.5s;
}
/* text cover */
#contents.main .communicationhArea div.innerWrap ul.type1 > li:hover div.cover {
  top: -403px;
}
/* img cover */
#contents.main .communicationhArea div.innerWrap ul.type1 > li:hover img.cover {
  top: -403px;
}
#contents.main .communicationhArea div.innerWrap ul.type1 > li:nth-child(2) {
  margin: 0 20px;
}

/* type 2 */
#contents.main .communicationhArea div.innerWrap ul.type2 li > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
}
#contents.main .communicationhArea div.innerWrap ul.type2 li {
  font-size: 18px;
  border: solid #01b5e2 1px;
  background-color: white;
}
#contents.main .communicationhArea div.innerWrap ul.type2 li a {
  display: inline-block;
  width: 100%;
  height: inherit;
  padding-top: 12px;
  padding-left: 20px;
}
#contents.main .communicationhArea div.innerWrap ul.type2 li a span {
  display: block;
  color: #2e9def;
  font-size: 14px;
  margin-bottom: 5px;
}
#contents.main .communicationhArea div.innerWrap ul.type2 li a > span.more {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  line-height: 0;
  font-size: 25px;
  border: 1px solid #333333;
  padding-left: 8px;
  transition: 0.5s;
}
#contents.main .communicationhArea div.innerWrap .columnTitle {
  position: relative;
  width: 295px;
}
#contents.main .communicationhArea div.innerWrap .columnTitle a {
  display: block;
}
#contents.main .communicationhArea div.innerWrap span.more.more-right {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 26px;
  height: 26px;
  background: url("../../img/main/column_arrow.png") no-repeat center center;
}
/* 크로스 삭제
#contents.main .communicationhArea div.innerWrap > ul.type2 li a > span.more > .cross,
#contents.main .communicationhArea div.innerWrap > ul.type2 li a > span.more > .cross:after{
    background: #333333;
}
#contents.main .communicationhArea div.innerWrap > ul.type2 li:hover a > span.more > .cross,
#contents.main .communicationhArea div.innerWrap > ul.type2 li:hover a> span.more > .cross:after{
    background: #4169e1;
}
#contents.main .communicationhArea div.innerWrap > ul.type2 li a > span.more > .cross {
    position: relative;
    width: 13px;
    height: 3px;
}
#contents.main .communicationhArea div.innerWrap > ul.type2 li a > span.more > .cross:after {
    position: absolute;
    left: 5px;
    top: -5px;
    width: 3px;
    height: 13px;
    content: "";
}
*/
/*#contents.main .communicationhArea div.innerWrap .columnTitle a:hover span.more{
    border-radius: 25px;
    border: 1px solid #4169e1;
    transform: rotate(90deg);
}*/

/* type 3 */
#contents.main .communicationhArea div.innerWrap > ul.type3 li > div.header {
  width: 595px;
  height: 280px;
  text-align: center;
  color: white;
  background: url("../../img/main/communicationhAreaBg1.jpg") center 100%
    no-repeat;
  padding-top: 30px;
  box-shadow: 5px 5px 5px -3px gray;
  z-index: 10;
}
#contents.main
  .communicationhArea
  div.innerWrap
  > ul.type3
  li:nth-child(2)
  > div.header {
  background: url("../../img/main/communicationhAreaBg2.jpg") center 100%
    no-repeat;
}
#contents.main .communicationhArea div.innerWrap > ul.type3 li > div.header h3 {
  font-size: 27px;
}
#contents.main .communicationhArea div.innerWrap > ul.type3 li > div.header h4 {
  font-size: 18px;
  font-weight: 300;
}
#contents.main .communicationhArea div.innerWrap > ul.type3 li > div.cover {
  position: absolute;
  top: 120px;
  left: 30px;
  width: 535px;
  height: 250px;
  background-color: white;
  box-shadow: 5px 5px 5px -3px gray;
  z-index: 20;
}

/* Etc... Area */

#contents.main section.etcArea {
  background-color: #f4f4f4;
  background: url("../../img/main/etcAreaBg.jpg") center no-repeat;
  background-size: cover;
  padding-top: 70px;
  padding-bottom: 80px;
}
#contents.main section.etcArea div.innerHeader-1,
#contents.main section.etcArea div.innerHeader-2 {
  width: 585px;
  display: inline-block;
}
#contents.main section.etcArea .innerHeader-1 > h3,
#contents.main section.etcArea .innerHeader-2 > h3 {
  color: white;
}
#contents.main section.etcArea div.innerWrap {
  flex-direction: column;
}
#contents.main .etcArea div.innerWrap > ul {
  width: 1210px;
  height: 285px;
  font-size: 0px;
  margin-bottom: 20px;
}
#contents.main .etcArea div.innerWrap > ul > li {
  width: 585px;
  height: inherit;
  display: inline-block;
  font-size: 11px;
  overflow: hidden;
}
#contents.main .etcArea div.innerWrap > ul > li:first-child {
  margin-right: 20px;
}

/*커뮤니티 탭메뉴*/
.cmTap {
}
.cmTap > div {
  float: left;
}
.cmTap .cmLeftBtn {
  width: 220px;
}
.cmTap .cmLeftBtn a {
  position: relative;
  display: block;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 30px 25px;
  height: 130px;
  cursor: pointer;
  border-bottom: 1px solid #999999;
}
.cmTap .cmLeftBtn a.cmLeftBtn1 {
  background: #fff url("../../img/main/cmLeftBtn1.jpg") no-repeat 10px center;
}
.cmTap .cmLeftBtn a.cmLeftBtn2 {
  background: #fff url("../../img/main/cmLeftBtn2.jpg") no-repeat 10px center;
}
.cmTap .cmLeftBtn a.cmLeftBtn3 {
  background: #fff url("../../img/main/cmLeftBtn3.jpg") no-repeat 10px center;
  border-bottom: 0;
}

.cmTap .cmLeftBtn .cmLeftBtn1.active,
.cmTap .cmLeftBtn .cmLeftBtn1:hover {
  background: #01b5e2 url("../../img/main/cmLeftBtn1_on.jpg") no-repeat 10px
    center;
  color: #fff;
}
.cmTap .cmLeftBtn .cmLeftBtn1.active span,
.cmTap .cmLeftBtn .cmLeftBtn1:hover span,
.cmTap .cmLeftBtn .cmLeftBtn1.active h3,
.cmTap .cmLeftBtn .cmLeftBtn1:hover h3,
.cmTap .cmLeftBtn .cmLeftBtn1.active p,
.cmTap .cmLeftBtn .cmLeftBtn1:hover p {
  color: #fff;
}
.cmTap .cmLeftBtn .cmLeftBtn1.active .cm_arrow,
.cmTap .cmLeftBtn .cmLeftBtn1:hover .cm_arrow {
  color: #01b5e2;
  border-color: #fff;
  background-color: #fff;
}

.cmTap .cmLeftBtn .cmLeftBtn2.active,
.cmTap .cmLeftBtn .cmLeftBtn2:hover {
  background: #0ec6ae url("../../img/main/cmLeftBtn2_on.png") no-repeat 10px
    center;
  color: #fff;
}
.cmTap .cmLeftBtn .cmLeftBtn2.active span,
.cmTap .cmLeftBtn .cmLeftBtn2:hover span,
.cmTap .cmLeftBtn .cmLeftBtn2.active h3,
.cmTap .cmLeftBtn .cmLeftBtn2:hover h3,
.cmTap .cmLeftBtn .cmLeftBtn2.active p,
.cmTap .cmLeftBtn .cmLeftBtn2:hover p {
  color: #fff;
}
.cmTap .cmLeftBtn .cmLeftBtn2.active .cm_arrow,
.cmTap .cmLeftBtn .cmLeftBtn2:hover .cm_arrow {
  color: #4169e1;
  border-color: #fff;
  background-color: #fff;
}

.cmTap .cmLeftBtn .cmLeftBtn3.active,
.cmTap .cmLeftBtn .cmLeftBtn3:hover {
  background: #ffea00 url("../../img/main/cmLeftBtn3_on.png") no-repeat 10px
    center;
  color: #3c1e1e;
}
.cmTap .cmLeftBtn .cmLeftBtn3.active span,
.cmTap .cmLeftBtn .cmLeftBtn3:hover span,
.cmTap .cmLeftBtn .cmLeftBtn3.active h3,
.cmTap .cmLeftBtn .cmLeftBtn3:hover h3,
.cmTap .cmLeftBtn .cmLeftBtn3.active p,
.cmTap .cmLeftBtn .cmLeftBtn3:hover p {
  color: #3c1e1e;
}
.cmTap .cmLeftBtn .cmLeftBtn3.active .cm_arrow,
.cmTap .cmLeftBtn .cmLeftBtn3:hover .cm_arrow {
  color: #ffeb00;
  border-color: #3c1e1e;
  background-color: #3c1e1e;
}

.cmTap .cmLeftBtn1 span {
  display: block;
  font-size: 10px;
  color: #01b5e2;
  letter-spacing: 2px;
}
.cmTap .cmLeftBtn1 h3 {
  font-size: 27px;
  color: #01b5e2;
}
.cmTap .cmLeftBtn1 p {
  font-size: 14px;
  color: #01b5e2;
}
.cmTap .cmLeftBtn1 .cm_arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 20px;
  height: 20px;
  border: 1px solid #01b5e2;
  text-align: center;
  line-height: 20px;
}
.cmTap .cmLeftBtn2 span {
  display: block;
  font-size: 10px;
  color: #0dc6ae;
  letter-spacing: 2px;
}
.cmTap .cmLeftBtn2 h3 {
  font-size: 27px;
  color: #0dc6ae;
}
.cmTap .cmLeftBtn2 p {
  font-size: 14px;
  color: #0dc6ae;
}
.cmTap .cmLeftBtn2 .cm_arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 20px;
  height: 20px;
  border: 1px solid #0dc6ae;
  text-align: center;
  line-height: 20px;
}
.cmTap .cmLeftBtn3 span {
  display: block;
  font-size: 10px;
  color: #ffa800;
  letter-spacing: 2px;
}
.cmTap .cmLeftBtn3 h3 {
  font-size: 27px;
  color: #ffa800;
}
.cmTap .cmLeftBtn3 p {
  font-size: 14px;
  color: #ffa800;
}
.cmTap .cmLeftBtn3 .cm_arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 20px;
  height: 20px;
  border: 1px solid #ffa800;
  text-align: center;
  line-height: 20px;
}

.cmRightArea > div {
  display: none;
  width: 990px;
  height: 390px;
}
.cmRightArea .cmRightInte .slideArea {
  height: 390px;
}
.cmRightArea .cmRightInte .slideArea #custom_pager {
  position: relative;
  float: left;
  width: 223px;
  height: 100%;
  background-color: #01b5e2;
  padding: 70px 40px;
}
.cmRightArea .cmRightInte .slideArea #custom_pager > span {
  display: inline-block;
  width: 1px;
  height: 390px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 0;
  left: 45px;
}
.cmRightArea .cmRightInte .slideArea #custom_pager a {
  color: #fff;
  display: block;
  font-size: 18px;
  margin-bottom: 20px;
  background: url("../../img/main/pager_before.png") no-repeat center left;
  padding-left: 20px;
}
.cmRightArea .cmRightInte .slideArea #custom_pager a.active span,
.cmRightArea .cmRightInte .slideArea #custom_pager a:hover span {
  display: inline-block;
  width: 12px;
  height: 18px;
  background: url("../../img/main/pager_span.png") no-repeat center center;
  margin-left: 10px;
  vertical-align: top;
  margin-top: 5px;
}
/*.cmRightArea .cmRightInte .slideArea #custom_pager a::before {width:11px;height:11px;background:url('../../img/main/pager_before.png')}*/
.cmRightArea .cmRightInte .slideArea #custom_pager a.active,
.cmRightArea .cmRightInte .slideArea #custom_pager a:hover {
  color: #ffeb00;
  background: url("../../img/main/pager_before_on.png") no-repeat center left;
}
.cmRightArea .cmRightInte .slideArea .bx-wrapper {
  position: relative;
  height: 390px;
  width: 766px;
  float: left;
}
.cmRightArea .cmRightInte .slideArea .bx-wrapper .bx-viewport {
  height: 390px !important;
}
.cmRightArea .cmRightInte .slideArea .bx-wrapper .bx-viewport li {
  width: 766px !important;
}
.cmRightArea .cmRightInte .slideArea .bx-wrapper .bx-controls {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
}
.cmRightArea .cmRightInte .slideArea .bx-prev {
  background: url("../../img/main/slidePrev.png");
  width: 34px;
  height: 34px;
  display: inline-block;
  font-size: 0;
  float: left;
}
.cmRightArea .cmRightInte .slideArea .bx-next {
  background: url("../../img/main/slideNext.png");
  width: 34px;
  height: 34px;
  display: inline-block;
  font-size: 0;
  float: right;
}
.cmRightArea .cmRightInte .slideArea .bx-start {
  background: url("../../img/main/slidePlay.png");
  width: 34px;
  height: 34px;
  display: inline-block;
  font-size: 0;
}
.cmRightArea .cmRightInte .slideArea .bx-stop {
  background: url("../../img/main/slideStop.png");
  width: 34px;
  height: 34px;
  display: inline-block;
  font-size: 0;
  vertical-align: top;
}

.cmRightArea .cmRightInte .slideArea .bx-start.active,
.cmRightArea .cmRightInte .slideArea .bx-stop.active {
  display: none;
}
.cmRightArea .cmRightInte .slideArea .bx-start,
.cmRightArea .cmRightInte .slideArea .bx-stop {
  display: block;
}

.cmRightArea
  .cmRightInte
  .slideArea
  .bx-wrapper
  .bx-controls
  .bx-controls-direction {
  height: 34px;
}
.cmRightArea
  .cmRightInte
  .slideArea
  .bx-wrapper
  .bx-controls
  .bx-controls-auto {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.cmRightArea .cmRightMap {
  display: block;
  position: relative;
}
.cmRightArea .cmRightMap .root_daum_roughmap {
  padding: 0;
  border: none;
}
.cmRightArea .cmRightMap .root_daum_roughmap .wrap_controllers {
  display: none;
}
.cmRightArea .cmRightMap .cmRightMap_info {
  position: absolute;
  width: 304px;
  height: 175px;
  background-color: rgba(255, 255, 255, 0.87);
  color: #333;
  top: 108px;
  right: 50px;
  z-index: 999999999;
  text-align: center;
  padding-top: 30px;
  box-sizing: border-box;
  box-shadow: 2px 2px 15px #aaa;
}
.cmRightArea .cmRightMap .cmRightMap_info img {
  margin-bottom: 5px;
}
.cmRightArea .cmRightMap .cmRightMap_info p {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -1px;
}
.cmRightArea .cmRightMap .cmRightMap_info p span {
  display: block;
  font-size: 16px;
  font-weight: 400;
}

.cmRightKakao {
  background-color: #ffeb00;
}
.cmRightKakao > div {
  float: left;
  height: 100%;
}
.cmRightKakao > div:nth-child(2) img {
  position: absolute;
  bottom: 0;
}
.cmRightKakao .cmRightKakao_form {
  padding: 40px 40px 0;
  width: 623px;
  text-align: center;
}
.cmRightKakao .cmRightKakao_form h2 {
  font-size: 32px;
  color: #3c1e1e;
  letter-spacing: -1px;
  margin-bottom: 8px;
}
.cmRightKakao .cmRightKakao_form h4 {
  font-size: 16px;
  color: #3c1e1e;
  font-weight: 400;
  margin-bottom: 20px;
}
.cmRightKakao .cmRightKakao_form .kakaoCounselArea {
  border-top: 1px solid #3c1e1e;
  padding: 30px 0 0;
}
.cmRightKakao .cmRightKakao_form .kakaoCounselArea ul {
  margin-bottom: 15px;
}
.cmRightKakao .cmRightKakao_form .kakaoCounselArea ul li {
  width: auto;
  text-align: left;
  margin-bottom: 10px;
}
.cmRightKakao .cmRightKakao_form .kakaoCounselArea ul li label {
  width: 45px;
}
.cmRightKakao .cmRightKakao_form .kakaoCounselArea ul .cmRightKakao_txt {
  float: right;
}
.cmRightKakao .cmRightKakao_form .kakaoCounselArea ul .cmRightKakao_txt div {
  padding-left: 50px;
  margin-top: 5px;
}
.cmRightKakao
  .cmRightKakao_form
  .kakaoCounselArea
  ul
  .cmRightKakao_txt
  div
  label {
  width: 150px;
}
.cmRightKakao .cmRightKakao_form .kakaoCounselArea ul li .content_textarea {
  width: 200px;
}
.cmRightKakao .cmRightKakao_form .kakaoCounselArea ul li.kakaoCheckboxWrap {
  padding-left: 50px;
}
.cmRightKakao
  .cmRightKakao_form
  .kakaoCounselArea
  ul
  li
  label[for="kakaoCheckbox"] {
  width: 220px;
  padding-left: 5px;
}
.cmRightKakao .cmRightKakao_form .kakaoCounselArea .submit_input {
  background-color: none;
  background-position: center;
  height: auto;
  padding: 0;
}

.cmRightKakao > div:last-child {
  position: relative;
  height: 100%;
}
.cmRightKakao > div:last-child img {
  position: absolute;
  bottom: 0;
}

#contents.main .communicationhArea div.innerWrap .columnWrap .bx-wrapper {
  width: 905px;
  float: left;
  display: inline-block;
}
#contents.main .communicationhArea div.innerWrap .bx-wrapper .type2 li {
  width: 295px !important;
}
#contents.main
  .communicationhArea
  div.innerWrap
  .columnWrap
  .bx-wrapper
  .bx-controls {
  display: none;
}
#contents.main .communicationhArea div.innerWrap .columnWrap {
  margin-bottom: 48px;
}
#contents.main .communicationhArea div.innerWrap .columnWrap .column_new {
  position: absolute;
  top: 5px;
  right: 5px;
  background: url("../../skin/latest/basic_indexCommunicationType2/img/new.gif")
    no-repeat center center;
  width: 34px;
  height: 30px;
}

@-webkit-keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
    transform: rotateX(-100deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
    transform: rotateX(-100deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
}

}