body {
  animation: fadein 1000ms ease-out;
  -moz-animation: fadein 1000ms ease-out;
  -webkit-animation: fadein 1000ms ease-out;
  -o-animation: fadein 1000ms ease-out;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body {
  overflow-x: hidden;
}

.tran {
  transform: translateY(-70px);
}

.opa_in {
  animation: opa_in 0.5s 0.5s linear both;
}

.opa_out {
  animation: opa_out 0.5s 0.5s linear both;
}

.opa_in_delay {
  animation: opa_in 1s 0.5s linear both;
}

.opa_out_delay {
  animation: opa_out 0.5s 0.5s linear both;
}

.z_up {
  animation: z_up 1s linear both;
}

.z_down {
  animation: z_down 1s linear both;
}

.o_up {
  animation: o_up 1s linear both;
}

.o_down {
  animation: o_down 1s linear both;
}

.t_up {
  animation: t_up 1s linear both;
}

.t_down {
  animation: t_down 1s linear both;
}

.th_up {
  animation: th_up 1s linear both;
}

.th_down {
  animation: th_down 1s linear both;
}

.f_up {
  animation: f_up 1s linear both;
}

.f_down {
  animation: f_down 1s linear both;
}

.upp {
  animation: upp 1s linear both;
}

.downn {
  animation: downn 1s linear both;
}

.leftt {
  animation: leftt 1s linear both;
}

.rightt {
  animation: rightt 1s linear both;
}

.to_b_2 {
  animation: to_b_2 1s linear both;
}

.to_t_2 {
  animation: to_t_2 1s linear both;
}

.z_in {
  animation: z_in 1s linear both;
}

.z_out {
  animation: z_out 1s linear both;
}

.header_up {
  transform: translateY(-100%);
  transition: all 0.5s;
}

header {
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 9998;
}
header .header_bg {
  height: 152px;
  width: 1920px;
  background-color: #fff;
  /* transform: translateY(-152px); */
  transition: all 0.3s;
}
header .header_bg .header_wrap {
  width: 1680px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 56px 0;
}
header .header_bg .header_wrap h1 a img {
  width: 106px;
  height: 31px;
}
header .header_bg .header_wrap .right ul {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
header .header_bg .header_wrap .right ul li {
  margin-left: 32px;
}
header .header_bg .header_wrap .right ul li a {
  font-weight: 800;
  transition: all 0.3s;
}
header .header_bg .header_wrap .right ul li:first-child {
  margin-left: 0;
}
header .header_bg .header_wrap .right ul li:hover a {
  color: rgba(0, 0, 0, 0.5);
}

/* header:hover .header_bg {
    transform: translateY(0);
} */
main {
  width: 1920px;
  height: 1200px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
main .campaign_agency_00 {
  position: relative;
  z-index: 200;
  /* width:1920px;  */
  height: 1200px;
  width: 1556px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
main .campaign_agency_00 .left {
  margin-left: 18px;
  margin-bottom: 43px;
  /*             .section_00:hover h2 {
                  transform: translateY(-105px);
              } */
}
main .campaign_agency_00 .left .section_00 {
  position: absolute;
  height: 100px;
  overflow: hidden;
  top: 460px;
  /* transform: translateY(-800px); */
}
main .campaign_agency_00 .left .section_00 h2 {
  display: flex;
  align-items: center;
  letter-spacing: 0.2rem;
  transition: all 0.3s;
}
main .campaign_agency_00 .left .section_00 h2 span {
  font-weight: 500;
  font-size: 2.946rem;
}
main .campaign_agency_00 .left .section_00 h2:first-child {
  padding-top: 40px;
}
main .campaign_agency_00 .left .section_00 h2:last-child {
  margin-top: 10px;
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: 0.08rem;
  line-height: 1.2;
  font-family: NotosansKR;
}
main .campaign_agency_00 .left .section_01 {
  margin-top: 85px;
  margin-left: 5px;
}
main .campaign_agency_00 .left .section_01 span {
  display: block;
  line-height: 1.45;
  font-size: 1.338rem;
  font-weight: 200;
  letter-spacing: 0rem;
  font-family: NotosansKR;
}
main .campaign_agency_00 .right {
  position: absolute;
  top: 490px;
  right: 20px;
  /* right: 175px; */
  margin-right: 20px;
}
main .campaign_agency_00 .right .section_02 {
  animation: updown 1.5s linear alternate infinite;
  position: relative;
}
main .campaign_agency_00 .right .section_02 span {
  font-family: NotosansKR;
  display: block;
  text-align: center;
  font-weight: 500;
  font-size: 3rem;
  line-height: 1.2;
  color: transparent;
}
main .campaign_agency_00 .right .section_02 span:first-child {
  opacity: 0;
  position: relative;
  color: #000;
  animation: blink_2 3s 4s infinite reverse, lr_0 3s infinite alternate-reverse;
}
main .campaign_agency_00 .right .section_02 span:nth-child(2) {
  position: relative;
  color: #000;
  width: 450px;
  right: 0px;
  animation: lr_1 3s infinite alternate-reverse, blink_2 3s 0.5s infinite reverse;
}
main .campaign_agency_00 .right .section_02_2 {
  animation: updown 1.5s linear alternate infinite;
  position: absolute;
  top: 0;
  left: 10px;
}
main .campaign_agency_00 .right .section_02_2 span {
  display: block;
  text-align: center;
  font-weight: 500;
  font-size: 3rem;
  line-height: 1.2;
  color: transparent;
}
main .campaign_agency_00 .right .section_02_2 span:first-child {
  position: relative;
  text-transform: capitalize;
  background: linear-gradient(to bottom, #fff 11%, #000);
  background-position-y: 0%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100% 150%;
  animation: blink 3s 4s infinite reverse, lr_0 3s infinite alternate-reverse, rgba_1 1.5s linear alternate infinite;
}
main .campaign_agency_00 .right .section_02_2 span:nth-child(2) {
  position: relative;
  color: #000;
  width: 450px;
  right: 6px;
  animation: lr_1 3s infinite alternate-reverse, blink 3s 0.2s infinite reverse;
}
main .campaign_agency_00 .right .perspective_wrapper {
  position: absolute;
  top: 47px;
  right: -158px;
}
main .campaign_agency_00 .right .perspective_wrapper > .right {
  display: flex;
  justify-content: space-between;
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category {
  width: 122px;
  height: 722px;
  position: relative;
  margin-left: 64px;
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category a {
  width: 122px;
  height: 722px;
  transition: all 0.3s;
  display: block;
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category a span {
  display: block;
  font-size: 1.875rem;
  font-weight: 900;
  display: inline-block;
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category a:hover {
  width: 177px;
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_00 {
  /* transform: translate( 372px,-75px); */
  transform: translateY(1000px);
  margin-left: 0;
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_00 a {
  background: url(../images/agency_page/images_00.png) no-repeat;
  background-size: cover;
  background-position: center;
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_00 a span {
  letter-spacing: 0.1rem;
  color: #fff;
  width: 177px;
  display: inline-block;
  transform: translate(0px, 602px) rotate(90deg);
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_01 {
  /* transform: translate( 186px,-75px); */
  transform: translateY(1000px);
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_01 a {
  background: url(../images/agency_page/images_01.png) no-repeat;
  background-size: cover;
  background-position: center;
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_01 a span {
  width: 177px;
  display: inline-block;
  transform: translate(5px, 590px) rotate(90deg);
  color: #fff;
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_01 a:hover {
  background-position: left;
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_02 {
  /* transform: translateY(1000px); */
  transform: translateY(1000px);
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_02 a {
  background: url(../images/agency_page/images_02.png) no-repeat;
  background-size: cover;
  background-position: center;
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_02 a span {
  width: 177px;
  display: inline-block;
  transform: translate(0px, 586px) rotate(90deg);
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_03 {
  transform: translateY(1000px);
  /* transform: translate( -186px,-75px); */
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_03 a {
  background: url(../images/agency_page/images_04.png) no-repeat;
  background-size: cover;
  background-position: center;
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_03 a span {
  color: #fff;
  width: 177px;
  display: inline-block;
  transform: translate(5px, 493px) rotate(90deg);
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_03 a:hover {
  background-position: 80% top;
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_04 {
  transform: translateY(1000px);
  /* transform: translateX( -372px); */
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_04 a {
  background: url(../images/agency_page/images_03.png) no-repeat;
  background-size: cover;
  background-position: center;
}
main .campaign_agency_00 .right .perspective_wrapper > .right .category_04 a span {
  width: 177px;
  display: inline-block;
  transform: translate(0px, 555px) rotate(90deg);
}
main .campaign_agency_01 {
  opacity: 1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-48%);
  height: 1200px;
  width: 1556px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
main .campaign_agency_01 .left {
  opacity: 0;
  position: relative;
  top: -95px;
  /* transform: translateX(-800px); */
  /*             h2 {
                  font-weight: 700;
                  font-size: 2.5rem;
                  letter-spacing: 0.08rem;
                  line-height: 1.2;
              } */
}
main .campaign_agency_01 .left .section_00 {
  /* transform: translateX(-150%); */
}

.blue_b {
  z-index: 10000;
  position: absolute;
  top: -1300px;
  left: 0;
  background: #BFE8FF;
  width: 1920px;
  height: 3622px;
  animation: blue_box 1.4s 0.1s ease-out both;
}

footer {
  background: #000;
  height: 122px;
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  align-content: center;
}
footer .footer_wrap {
  width: 1355px;
  line-height: 75px;
  margin: 0 auto;
  padding: 20px 0;
}
footer .footer_wrap .footer_up {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #fff;
  padding-bottom: 10px;
}
footer .footer_wrap .footer_up h1 a img {
  width: 106px;
  height: 31px;
}
footer .footer_wrap .footer_up .right ul {
  display: flex;
  justify-content: space-between;
}
footer .footer_wrap .footer_up .right ul li {
  margin-left: 32px;
  position: relative;
}
footer .footer_wrap .footer_up .right ul li span {
  color: #fff;
}
footer .footer_wrap .footer_up .right ul li:first-child {
  margin-left: 0;
}
footer .footer_wrap .footer_up .right ul li::after {
  content: "";
  display: inline-block;
  background-color: #fff;
  width: 1px;
  height: 16px;
  position: absolute;
  top: 0;
  right: -16px;
}
footer .footer_wrap .footer_up .right ul li:nth-child(2) {
  font-family: NotosansKR;
  font-weight: 300;
}
footer .footer_wrap .footer_up .right ul li:last-child::after {
  display: none;
}
footer .footer_wrap .footer_down {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
}
footer .footer_wrap .footer_down p {
  color: #fff;
  font-family: NotosansKR;
  font-weight: 300;
}
footer .footer_wrap .footer_down .right ul {
  display: flex;
  justify-content: space-between;
}
footer .footer_wrap .footer_down .right ul li {
  position: relative;
  margin-left: 32px;
  color: #fff;
}
footer .footer_wrap .footer_down .right ul li:first-child {
  margin-left: 0;
}
footer .footer_wrap .footer_down .right ul li::after {
  content: "";
  display: inline-block;
  background-color: #fff;
  width: 1px;
  height: 16px;
  position: absolute;
  top: 0;
  right: -16px;
}
footer .footer_wrap .footer_down .right ul li:nth-child(2) {
  font-family: NotosansKR;
  font-weight: 300;
}
footer .footer_wrap .footer_down .right ul li:last-child::after {
  display: none;
}

@keyframes lr_0 {
  0% {
    transform: translateX(15px);
  }
  100% {
    transform: translateX(-15px);
  }
}
@keyframes lr_1 {
  0% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(-5px);
  }
}
@keyframes updown {
  0% {
    transform: translateY(-25px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes rgba_1 {
  0% {
    background-position-y: 0%;
  }
  100% {
    background-position-y: 100%;
  }
}
@keyframes upp {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-800px);
  }
}
@keyframes downn {
  0% {
    transform: translateY(-800px);
  }
  100% {
    transform: translateY(10px);
  }
}
@keyframes leftt {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateX(-800px);
  }
}
@keyframes rightt {
  0% {
    transform: translateX(-800px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes to_b_2 {
  0% {
    /* transform: translate3d(0,0, 0em); */
    transform: translateY(0) translateZ(0em);
  }
  100% {
    /* transform: translate3d(0%, 700%, -50em); */
    transform: translateY(350%) translateZ(-50em);
  }
}
@keyframes to_t_2 {
  0% {
    /* transform: translate3d(0,0, 0em); */
    transform: translateY(350%) translateZ(-50em);
  }
  100% {
    /* transform: translate3d(0%, 700%, -50em); */
    transform: translateY(0) translateZ(0em);
  }
}
@keyframes mar_0 {
  0% {
    margin-left: 63.5px;
  }
  100% {
    margin-left: 0px;
  }
}
@keyframes mar_1 {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 63.5px;
  }
}
@keyframes mar_00 {
  100% {
    margin-left: 63.5px;
  }
}
@keyframes z_in {
  0% {
    z-index: -1;
  }
  100% {
    z-index: 200;
  }
}
@keyframes z_out {
  0% {
    z-index: 200;
  }
  100% {
    z-index: -1;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink_2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opa_out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes opa_in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blue_box {
  0% {
    background: #EFF9FF;
    transform: translateY(0);
    border-radius: 1000px;
  }
  100% {
    transform: translateY(-3322px);
    background: #BFE8FF;
    border-radius: 250px;
  }
}
@keyframes z_up {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(372px, 1000px);
  }
}
@keyframes z_down {
  0% {
    transform: translate(372px, 1000px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes o_up {
  0% {
    transform: translate(0, -75px);
  }
  100% {
    transform: translate(186px, 1000px);
  }
}
@keyframes o_down {
  0% {
    transform: translate(186px, 1000px);
  }
  100% {
    transform: translate(0, -75px);
  }
}
@keyframes t_up {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(0, 1000px);
  }
}
@keyframes t_down {
  0% {
    transform: translate(0px, 1000px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes th_up {
  0% {
    transform: translate(0, -75px);
  }
  100% {
    transform: translate(-186px, 1000px);
  }
}
@keyframes th_down {
  0% {
    transform: translate(-186px, 1000px);
  }
  100% {
    transform: translate(0, -75px);
  }
}
@keyframes f_up {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-372px, 1000px);
  }
}
@keyframes f_down {
  0% {
    transform: translate(-372px, 1000px);
  }
  100% {
    transform: translate(0);
  }
}/*# sourceMappingURL=opulab_agency.css.map */