@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
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;
}

.campaign_in {
  animation: to_b 1s linear both;
}

.campaign_out {
  animation: to_t 1s linear both;
}

.campaign_op_in {
  animation: opacity_in 1s linear both;
}

.campaign_op_out {
  animation: opacity_out 1s linear both;
}

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

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

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

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

.campaign_top_l {
  animation: to_l 1s linear both;
}

.campaign_top_r {
  animation: to_r 1s linear both;
}

.campaign_down {
  animation: to_b_2 1s ease-out both;
}

.campaign_up {
  animation: to_t_2 1s ease-out both;
}

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

.no_touch {
  animation: no_to 1s linear both;
}

.yes_touch {
  animation: ye_to 1s linear both;
}

.img {
  animation: scal 1s linear both;
}

.contact {
  animation: opa_cam3 1s linear both;
}

.cam3_bg_r {
  animation: to_r_3 1s linear both;
}

.text_up {
  animation: tran_y 0.3s linear both;
}

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 .campaign_00 {
  text-align: center;
  width: 1920px;
  height: 1200px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
main .campaign_00 .perspective_wrapper {
  perspective: 500px;
  /* transition: all 3s; */
  cursor: pointer;
  /*                         position: relative;
                  left:50%; top:50%;
                  transform: translate(-50%, -50%);
                  text-align: center; */
  /*         transform-style:perserve-3d;
          perspective:500px; */
  z-index: 1;
  position: relative;
}
main .campaign_00 .perspective_wrapper .bnr_wrap {
  width: 1920px;
  height: 1200px;
  cursor: pointer;
  /* animation: to_b 1s linear both; */
}
main .campaign_00 .perspective_wrapper .bnr_wrap > div {
  cursor: pointer;
}
main .campaign_00 .perspective_wrapper .bnr_wrap > div iframe {
  position: relative;
  z-index: -1;
  cursor: pointer;
  width: 100%;
}
main .campaign_00 .perspective_wrapper .bnr_wrap img {
  display: block;
  position: absolute;
  left: 840px;
  top: 580px;
}
main .span_wrap {
  text-align: center;
  position: absolute;
  left: 715px;
  top: 680px;
  z-index: 2;
  /* transform: translateX(-50%); */
  /* animation: opacity_in 1s linear both; */
}
main .span_wrap span {
  font-family: "Noto sans KR";
  font-size: 1.25rem;
  font-weight: 200;
  display: block;
  color: #fff;
  line-height: 1.2;
}
main .campaign_01 {
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  margin: 0 auto;
  width: 1920px;
  height: 1200px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
main .campaign_01 .div_wrap {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
main .campaign_01 .div_wrap .top {
  width: 1430px;
  text-align: start;
  position: relative;
  top: -71px;
  left: 160px;
  display: flex;
  flex-flow: column wrap;
  /*                             .h2_wrap:hover h2 {transform: translateY(-68px);} */
}
main .campaign_01 .div_wrap .top .h2_wrap {
  height: 68px;
  overflow: hidden;
}
main .campaign_01 .div_wrap .top .h2_wrap h2 {
  display: flex;
  align-items: center;
  font-weight: 800;
  transition: all 0.3s;
  font-size: 3rem;
  letter-spacing: -0.1em;
}
main .campaign_01 .div_wrap .top .h2_wrap h2 span {
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: -0.1em;
}
main .campaign_01 .div_wrap .top .h2_wrap h2:last-child {
  font-weight: 700;
  font-family: "Noto sans KR";
}
main .campaign_01 .div_wrap .top span {
  display: block;
  line-height: 1.5;
  font-size: 1.438rem;
  font-weight: 100;
  font-family: "Noto sans KR";
}
main .campaign_01 .div_wrap .top span:first-child {
  margin-top: 16px;
}
main .campaign_01 .div_wrap .top > a {
  position: relative;
  z-index: 999;
  font-size: 0.938rem;
  margin-top: 16px;
  width: 98px;
  line-height: 30px;
  border: 1px #000 solid;
  border-radius: 15px;
  text-align: center;
  font-weight: 700;
  transition: all 0.4s;
}
main .campaign_01 .div_wrap .top a:hover {
  color: #fff;
  background: #000;
}
main .campaign_01 .div_wrap .perspective_wrapper {
  perspective: 500px;
}
main .campaign_01 .div_wrap .perspective_wrapper .btm {
  /* animation: to_b_2 1.5s ease-out both; */
  width: 1625px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main .campaign_01 .div_wrap .perspective_wrapper .btm .solution_wrap {
  transition: all 0.3s;
}
main .campaign_01 .div_wrap .perspective_wrapper .btm .solution_wrap > a {
  width: 348px;
  height: 413px;
  overflow: hidden;
  display: flex;
  flex-flow: column wrap;
  border-radius: 15px;
}
main .campaign_01 .div_wrap .perspective_wrapper .btm .solution_wrap > a img {
  border-radius: 15px;
  transition: all 0.3s;
}
main .campaign_01 .div_wrap .perspective_wrapper .btm .solution_wrap h3 {
  font-weight: 800;
  margin: 12px 0;
}
main .campaign_01 .div_wrap .perspective_wrapper .btm .solution_wrap span {
  font-weight: 300;
  font-family: "Noto sans KR";
  display: block;
}
main .campaign_01 .div_wrap .perspective_wrapper .btm .solution_wrap:hover a img {
  transform: scale(1.4);
}
main .campaign_01 .div_wrap .perspective_wrapper .btm .solution_wrap:hover {
  transform: scale(0.99);
}
main .campaign_01 .div_wrap .perspective_wrapper .btm .solution_wrap:first-child {
  position: relative;
}
main .campaign_01 .div_wrap .perspective_wrapper .btm .solution_wrap:first-child::before {
  content: "";
  display: inline-block;
  background-color: #000;
  width: 40px;
  height: 3px;
  position: absolute;
  top: 45%;
  left: -64px;
}
main .campaign_01 .div_wrap .perspective_wrapper .btm .solution_wrap:last-child {
  position: relative;
}
main .campaign_01 .div_wrap .perspective_wrapper .btm .solution_wrap:last-child a img {
  width: 348.82px;
  height: 413.35px;
  -o-object-fit: cover;
     object-fit: cover;
}
main .campaign_01 .div_wrap .perspective_wrapper .btm .solution_wrap:last-child::after {
  content: "";
  display: inline-block;
  background-color: #000;
  width: 40px;
  height: 3px;
  position: absolute;
  top: 45%;
  right: -64px;
}
main .campaign_02 {
  width: 1418px;
  margin: 0 auto;
  margin-top: 100px;
  /*         .h2_wrap:hover h2 {transform: translateY(-68px);} */
}
main .campaign_02 .h2_wrap {
  height: 68px;
  overflow: hidden;
}
main .campaign_02 .h2_wrap h2 {
  display: flex;
  align-items: center;
  font-size: 3rem;
  font-weight: 700;
  font-family: "Noto sans KR";
  transition: all 0.3s;
}
main .campaign_02 .h2_wrap h2 span {
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: -0.1em;
}
main .campaign_02 .h2_wrap h2 span em {
  font-size: 1.25rem;
  margin: 0 5px;
}
main .campaign_02 span {
  display: block;
  line-height: 1.5;
  font-size: 1.438rem;
  font-weight: 100;
  font-family: "Noto sans KR";
}
main .campaign_02 .brand_wrap {
  display: flex;
  flex-flow: column wrap;
  margin: 30px 0;
}
main .campaign_02 .brand_wrap a {
  border-radius: 5px;
  width: 1418px;
  height: 439px;
  overflow: hidden;
}
main .campaign_02 .brand_wrap a img {
  transition: all 0.4s;
}
main .campaign_02 .brand_wrap a:hover img {
  transform: scale(1.1);
}
main .campaign_02 .brand_wrap h3 {
  margin: 12px 0;
  font-weight: 800;
  font-size: 0.938rem;
}
main .campaign_02 .brand_wrap p {
  font-family: "Noto sans KR";
  font-size: 0.938rem;
}
main .campaign_02 .brand_wrap:last-child {
  margin-top: 48px;
}
main .campaign_03 {
  margin-top: 100px;
  margin-bottom: -5px;
}
main .campaign_03 .bg {
  width: 1920px;
  height: 860px;
  overflow: hidden;
  position: relative;
}
main .campaign_03 .bg > img {
  width: 100%;
}
main .campaign_03 .bg .contact {
  width: 1420px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
main .campaign_03 .bg .contact h2 {
  margin-left: 5px;
  font-weight: 600;
  font-size: 3rem;
}
main .campaign_03 .bg .contact p {
  font-family: "Noto sans KR";
  margin: 30px 0;
}
main .campaign_03 .bg .contact a {
  display: block;
  width: 106px;
  line-height: 30px;
  border-radius: 100px;
  border: 1px #000 solid;
  text-align: center;
  font-size: 0.938rem;
  transition: all 0.3s;
}
main .campaign_03 .bg .contact a:hover {
  color: #fff;
  background: #000;
}
main .campaign_03 .bg .box {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  width: 1920px;
  height: 860px;
}

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 p 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 opacity_in {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes opacity_out {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes to_b {
  0% {
    transform: translate3d(0, 0, 0em);
    opacity: 1;
    /*         z-index: 200; */
  }
  100% {
    transform: translate3d(-10%, 0%, -150em);
    opacity: 0;
    /*         z-index: -100; */
  }
}
@keyframes to_t {
  0% {
    transform: translate3d(-10%, 0%, -150em);
    opacity: 0;
    /*         z-index: -100; */
  }
  100% {
    transform: translate3d(0, 0, 0em);
    opacity: 1;
    /*         z-index: 200; */
  }
}
@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 to_l {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-900px);
  }
}
@keyframes to_r {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes to_r_3 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(1920px);
  }
}
@keyframes scal {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes opa_cam3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tran_y {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-69px);
  }
}
@keyframes tran_y2 {
  0% {
    transform: translateY(-69px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes no_to {
  0% {
    visibility: inherit;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes ye_to {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: inherit;
  }
}
@keyframes z_in {
  0% {
    z-index: -1;
  }
  100% {
    z-index: 200;
  }
}
@keyframes z_out {
  0% {
    z-index: 200;
  }
  100% {
    z-index: -1;
  }
}
@keyframes z_in_a {
  0% {
    z-index: 0;
  }
  100% {
    z-index: 201;
  }
}
@keyframes z_out_a {
  0% {
    z-index: 201;
  }
  100% {
    z-index: 0;
  }
}/*# sourceMappingURL=main.css.map */