/* ==================================================================
   1. VISUAL (메인 비주얼)
   ================================================================== */
.visual {
  position: relative;
  height: 960px;
  overflow: hidden;
}

.visual .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.visual .info-box {
  margin-top: -90px;
  text-align: center;
}
.visual .info-box h2 {
  position: relative;
  margin: 14px 0 0;
  font-size: 60px;
  font-weight: 300;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  top: -1rem;
  transition: all 0.5s 0.5s;
}
.visual .info-box h2 strong {
  font-weight: 800;
}
.visual .info-box h2.active {
  opacity: 1;
  top: 0;
}
.visual .info-box p {
  position: relative;
  margin: 40px 0 0;
  font-size: 24px;
  color: #fff;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  top: 1rem;
  transition: all 0.5s 1s;
}
.visual .info-box p.active {
  opacity: 1;
  top: 0;
}

/* --- Visual Paging & Navigation --- */
.visual .page-box {
  position: absolute;
  bottom: 350px;
  left: 50%;
  z-index: 9;
  width: 570px;
  margin-left: -285px;
  display: flex;
  align-items: center;
  color: #fff;
}
.visual .page-box .line {
  flex: 1;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}
.visual .page-box .page {
  flex: none;
  width: 50px;
  font-size: 14px;
  text-align: center;
}
.visual .page-box .swiper-button {
  position: absolute;
  top: -14px;
  right: 0;
  width: 30px;
  height: 50px;
  display: flex;
  cursor: pointer;
  transition: all 0.2s ease;
}
.visual .page-box .swiper-button:hover {
  right: -20px;
  width: 50px;
}
.visual .page-box .swiper-button .arrow {
  position: relative;
  width: 50px;
  height: 1px;
  margin: auto;
  background: #fff;
}
.visual .page-box .swiper-button .arrow::before {
  content: '';
  position: absolute;
  top: -5px;
  right: -2px;
  width: 14px;
  height: 1px;
  background: #fff;
  transform: rotate(45deg);
}
.visual .page-box .swiper-button.prev {
  right: auto;
  left: 0;
}
.visual .page-box .swiper-button.prev:hover {
  left: -20px;
  width: 50px;
}
.visual .page-box .swiper-button.prev .arrow::before {
  right: auto;
  left: -3px;
  transform: rotate(135deg);
}

/* --- Mouse Scroll Animation --- */
.mouse-box {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 9;
  width: 50px;
  height: 50px;
  margin-left: -25px;
}
.mouse-box .mouse {
  width: 16px;
  height: 26px;
  margin: 0 auto;
  border: 2px solid #fff;
  border-radius: 8px;
}
.mouse-box .mouse .wheel {
  display: block;
  position: relative;
  width: 2px;
  height: 5px;
  margin: 3px auto;
  background-color: #fff;
  animation: mouse-wheel 0.8s linear infinite;
}
@keyframes mouse-wheel {
  0% { top: 1px; }
  50% { top: 3px; }
  100% { top: 1px; }
}

/* ==================================================================
   2. COMMON (공통 요소)
   ================================================================== */
/* --- Section Title --- */
.section-title {
  margin: 200px 0 150px;
  padding: 0 14px;
  text-align: center;
}
.section-title h2 {
  margin: 0;
  font-size: 35px;
}
.section-title h2 img {
  display: inline-block;
  height: 32px;
  margin-bottom: 3px;
  vertical-align: middle;
}
.section-title p {
  margin: 14px 0 0;
  font-size: 18px;
}

/* --- Sub Page Title --- */
.sub-title {
  margin: 200px 0 150px;
  padding: 0 14px;
  text-align: center;
}
.sub-title h2 {
  margin: 0;
  font-size: 35px;
}
.sub-title h2 img {
  display: inline-block;
  height: 32px;
  margin-bottom: 3px;
  vertical-align: middle;
}
.sub-title p {
  margin: 14px 0 0;
  font-size: 18px;
}

/* --- Mobile Break (모바일에서만 줄바꿈) --- */
.br-mobile {
  display: none;
}

/* --- App Download Button (공통) --- */
.app-down {
  display: block;
  margin: 90px 0 0;
  padding: 0;
  list-style: none;
}
.app-down li {
  display: inline-block;
  width: 140px;
  margin-right: 10px;
}
.app-down li:last-child {
  margin-right: 0;
}
.app-down li img {
  border: 1px solid #ddd;
}
.link {
  padding: 60px 0;
  text-align: left;
}
.link .btn {
  padding: 12px 35px;
  font-size: 18px;
  color: #fff;
  background-color: #3163e6;
  border-radius: 30px;
}

/* ==================================================================
   3. SECTION: (공통 info-box 스타일)
   ================================================================== */
.info-group .summary {
  font-size: 21px;
}
.info-group .summary strong {
  display: block;
  text-decoration: underline;
}
.info-group h3 {
  position: relative;
  margin: 60px 0;
  height: 90px;
  font-size: 36px;
  font-weight: 700;
  color: #ddd;
  text-transform: uppercase;
}
.info-group h3 small {
  position: absolute;
  top: 30px;
  left: 0;
  font-size: 60px;
  font-weight: 700;
  color: #222;
}
.info-group h3 small.right {
  right: 0;
  left: auto;
}
.info-group h4 {
  position: relative;
  margin: 60px 0;
  height: 90px;
  font-size: 36px;
  font-weight: 500;
  color: #ddd;
  text-transform: uppercase;
}
.info-group h4 small {
  position: absolute;
  top: 30px;
  left: 0;
  font-size: 54px;
  font-weight: 700;
  color: #222;
}
.info-group h4 small.right {
  right: 0;
  left: auto;
}
.info-group  h5 {
  margin: 0 0 40px;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -1px;
}
.info-group  h5 strong {
  display: block;
  font-weight: 700;
}
.info-group p {
  margin: 0;
  font-size: 18px ;
}
.info-group p small {
  display: block;
  margin: 14px 0 0;
  font-size: 18px;
  color: #3163e6;
}

.whats {
  position: relative;
  z-index: 2;
  /*overflow: hidden;*/
}
.whats .info-box {
  margin: 10px 0 0;
  height: 700px;
}
.whats .info-box2 {
  margin: 10px 0 0;
  height: 650px;
}

/* --- Whats Image Box & Video --- */
.whats .img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.whats .img-box .img {
  position: relative;
}
.whats .img-box .img img {
  position: absolute;
  max-width: none;
}
.whats .img-box .img .seo-01 { left: 0; z-index: 2; border: 1px solid #eee; box-shadow: 6px 6px 15px -5px rgba(0, 0, 0, 0.5); }
.whats .img-box .img .seo-02 { top: 240px; left: 340px; z-index: 1; border: 1px solid #eee; box-shadow: 6px 6px 15px -5px rgba(0, 0, 0, 0.5); }
.whats .img-box .img .viral-01 { right: 0; z-index: 2; box-shadow: -6px 6px 15px -5px rgba(0, 0, 0, 0.5); }
.whats .img-box .img .viral-02 { top: 240px; right: 340px; z-index: 1; box-shadow: -6px 6px 15px -5px rgba(0, 0, 0, 0.5); }
.whats .img-box .img .contents-01 { top: -50px; left: 240px; z-index: 1; box-shadow: 6px 6px 15px -5px rgba(0, 0, 0, 0.5); }
.whats .img-box .img .contents-02 { top: 130px; left: 380px; z-index: 3; box-shadow: 6px 6px 15px -5px rgba(0, 0, 0, 0.5); }
.whats .img-box .img .contents-03 { top: 320px; left: 270px; z-index: 2; box-shadow: 6px 6px 15px -5px rgba(0, 0, 0, 0.5); }
.vertical-video {
  position: relative;
  z-index: 4;
  width: 320px;
  aspect-ratio: 9 / 16;
}
.vertical-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2rem;
}
/* ==================================================================
   4. SECTION: PASS
   ================================================================== */
.pass {
  position: relative;
  z-index: 2;
}
.pass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: 100%;
  background-image: url(/img/pass-bg.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  transform: translateX(-50%);
}

.pass .info-box {
  height: 600px;
  margin: 10px 0 0;
}

.pass .img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.pass .img-box .img {
  position: relative;
}
.pass .img-box .img img {
  position: absolute;
  max-width: none;
}
.pass .img-box .img .pass-01 { left: 0; z-index: 1; }
.pass .img-box .img .pass-02 { left: 290px; z-index: 1; }
.pass .img-box .img .pass-03 { left: 580px; z-index: 1; }

/* --- Pass Info & Stats --- */
.pass .pass-info {
  height: 500px;
  margin: 20px 0 0;
}
.pass .pass-info h3 {
  margin: 0 0 60px;
  font-size: 34px;
  font-weight: 400;
}
.pass .pass-info h3 strong {
  display: block;
  font-weight: 700;
}
.pass .pass-info p {
  font-size: 18px;
}
/* --- Pass Image Box (하단) & Swiper --- */
.pass .pass-box {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
}
.pass .pass-box .img {
  position: relative;
  height: 510px;
}
.pass .pass-box .img img {
  position: absolute;
  max-width: none;
}
.pass .pass-box .img .img-01 { bottom: 0; left: -90px; z-index: 2; }
.pass .pass-box .img .img-02 { bottom: 248px; left: -84px; z-index: 1; }
.pass .pass-box .img .img-03 { bottom: 248px; left: 158px; z-index: 1; }
.pass .pass-box .img .img-04 { bottom: 8px; left: -84px; z-index: 1; }
.pass .pass-box .img .img-05 { bottom: 35px; left: 158px; z-index: 1; }

.pass .swiper-pass {
  position: relative;
  width: 860px;
  overflow: hidden;
}
.pass .swiper-slide {
  width: 280px;
}
/* ==================================================================
   5. SECTION: WORKS
   ================================================================== */
/*.works .info-box {
  display: flex;
  flex-direction: column;
  height: 380px;
  margin: 60px 0;
}
.works .info-box h3 {
  margin: 0 0 35px;
  font-size: 34px;
  letter-spacing: -1px;
}
.works .info-box p {
  margin: 5px 0 0;
  font-size: 18px;
  padding-right: 30px;
}

.works .img-box {
  position: absolute;
  top: 0;
  left: 0;
}
.works .img-box .img {
  position: relative;
}
.works .img-box .img img {
  position: absolute;
  max-width: none;
}
.works .img-box .img .img-011 { top: 70px; width: 382px; z-index: 1; }
.works .img-box .img .img-012 { top: 280px; left: 280px; z-index: 2; }
.works .img-box .img .img-013 { top: 240px; left: 400px; z-index: 3; }
.works .img-box .img .img-02 { top: 0; }
.works .img-box .img .img-031 { top: 0; width: 410px; }
.works .img-box .img .img-032 { top: 200px; width: 200px; }
.works .img-box .img .img-033 { top: 230px; left: 260px; width: 160px; }
.works .img-box .img .img-04 { top: 0; }*/

/* ==================================================================
   6. SECTION: PARTNER
   ================================================================== */
.partner {
  padding: 100px 0;
  text-align: center;
}
.partner p {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 2;
}
.partner .btn {
  margin: 30px 0 0;
  padding: 12px 35px;
  font-size: 18px;
  color: #fff;
  background-color: #3163e6;
  border-radius: 30px;
}
.kakaobtn {
  margin: 30px 0 0;
}

/* ==================================================================
   7. SUB PAGES (서브 페이지 공통)
   ================================================================== */
.visual-sub {
  position: relative;
  height: 800px;
  overflow: hidden;
}

.visual-sub .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.visual-sub .info-box {
  margin-top: -20px;
  text-align: center;
}
.visual-sub .info-box h2 {
  position: relative;
  margin: 14px 0 0;
  font-size: 60px;
  font-weight: 300;
  line-height: 1.3;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  top: -1rem;
  transition: all 0.5s 0.5s;
}
.visual-sub .info-box h2 strong {
  display: block;    
  font-weight: 800;
}
.visual-sub .info-box h2.active {
  opacity: 1;
  top: 0;
}
.visual-sub .info-box p {
  position: relative;
  margin: 40px 0 0;
  font-size: 24px;
  color: #fff;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  top: 1rem;
  transition: all 0.5s 1s;
}
.visual-sub .info-box p.active {
  opacity: 1;
  top: 0;
}
/* ==================================================================
   8. AGENCY PAGE
   ================================================================== */
.agency-s1 .info-box {
  display: flex;
  flex-direction: column;
  height: 420px;
  margin: 40px 0 120px;
}
.agency-s1 .info-box h3 {
  margin: 0 0 60px;
  font-size: 34px;
  letter-spacing: -1px;
}
.agency-s1 .info-box p {
  margin: 5px 0 0;
  font-size: 18px;
  padding-right: 30px;
}
.agency-s1 .stats-wrapper {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 20px 0 40px;
  text-align: center;
}
.agency-s1 .stat-item {
  position: relative;
}
.agency-s1 .stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -20px;
  width: 1px;
  height: 40px;
  background-color: #ddd;
  transform: translateY(-50%);
}
.agency-s1 .stat-title {
  margin-bottom: 8px;
  font-size: 16px;
  color: #666;
}
.agency-s1 .stat-value {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: 28px;
  font-weight: 900;
  color: #333;
}
.agency-s1 .stat-unit {
  margin-left: 4px;
  font-size: 18px;
  font-weight: 700;
  color: #666;
}
.agency-s1 .img-box {
  position: absolute;
  top: 0;
  left: 0;
}
.agency-s1 .img-box .img {
  position: relative;
}
.agency-s1 .img-box .img img {
  position: absolute;
  max-width: none;
}
.agency-s1 .img-box .img .img-011 { top: 70px; width: 382px; z-index: 1; }
.agency-s1 .img-box .img .img-012 { top: 280px; left: 280px; z-index: 2; }
.agency-s1 .img-box .img .img-013 { top: 240px; left: 400px; z-index: 3; }
.agency-s1 .img-box .img .img-02 { top: 0; }
.agency-s1 .img-box .img .img-031 { top: 0; width: 410px; }
.agency-s1 .img-box .img .img-032 { top: 200px; width: 200px; }
.agency-s1 .img-box .img .img-033 { top: 230px; left: 260px; width: 160px; }
.agency-s1 .img-box .img .img-04 { top: 0; }

/*.pass .pass-info .stats-wrapper {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 60px 0 40px;
  text-align: center;
}
.pass .pass-info .stat-item {
  position: relative;
}
.pass .pass-info .stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -20px;
  width: 1px;
  height: 40px;
  background-color: #ddd;
  transform: translateY(-50%);
}
.pass .pass-info .stat-title {
  margin-bottom: 8px;
  font-size: 16px;
  color: #666;
}
.pass .pass-info .stat-value {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: 28px;
  font-weight: 900;
  color: #333;
}
.pass .pass-info .stat-unit {
  margin-left: 4px;
  font-size: 18px;
  font-weight: 700;
  color: #666;
}*/
/*.service-s1 {
  margin: 40px 0 150px;
}
.service-s1 .swiper-slide {
  width: 240px !important;
  height: 130px;
}
.service-s1 .swiper-slide p {
  margin-top: 140px;
  font-size: 16px;
  text-align: center;
  color: #666;
  background-color: #f4f4f4;
}*/

.service-s2 .info-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 500px;
}
.service-s2 .info-box h2 {
  margin: 0 0 20px;
  font-size: 18px;
  font-style: italic;
  color: #3163e6;
}
.service-s2 .info-box h3 {
  margin: 0 0 40px;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -1px;
}
.service-s2 .info-box h3 strong {
  display: block;
  font-weight: 700;
}
.service-s2 .info-box p {
  margin: 5px 0 0;
  font-size: 18px;
  line-height: 1.8;
}

.service-s2 .img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.service-s2 .img-box .img {
  position: relative;
}
.service-s2 .img-box .img img {
  position: absolute;
  max-width: none;
}
.service-s2 .img-box .img .img-01 { top: 55px; left: 90px; z-index: 1; }
.service-s2 .img-box .img .img-02 { top: -30px; left: 300px; z-index: 2; }
.service-s2 .img-box .img .img-03 { top: 133px; left: 230px; z-index: 3; }
.service-s2 .img-box .img .img-04 { top: 250px; left: 35px; z-index: 4; }
.service-s2 .img-box .img .img-011 { top: 70px; width: 382px; z-index: 1; }
.service-s2 .img-box .img .img-012 { top: 250px; left: 345px; width: 85px; z-index: 2; }

.service-s3 {
  margin: 0 0 180px;
  background-color: #3163e6;
}
.service-s3 .info-box {
  position: relative;
  height: 600px;
  color: #fff;
}
.service-s3 .info-box .swiper-text {
  position: absolute;
  top: 150px;
  left: 0;
}
.service-s3 .info-box h3 {
  position: relative;
  margin: 0 0 40px;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -1px;
  opacity: 0;
  top: -1rem;
  transition: all 0.5s 0.3s;
}
.service-s3 .info-box h3 strong {
  display: block;
  font-weight: 700;
}
.service-s3 .info-box h3.active {
  opacity: 1;
  top: 0;
}
.service-s3 .info-box p {
  position: relative;
  margin: 5px 0 0;
  padding-right: 50px;
  font-size: 18px;
  line-height: 1.8;
  opacity: 0;
  top: 1rem;
  transition: all 0.5s 0.3s;
}
.service-s3 .info-box p.active {
  opacity: 1;
  top: 0;
}
.service-s3 .info-box .page-box {
  position: absolute;
  top: 90px;
  right: 30px;
  z-index: 2;
  width: 80px;
}
.service-s3 .info-box .page-box .arrow {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.service-s3 .info-box .page-box .arrow.prev {
  left: 0;
  transform: translate3d(0, -50%, 0) rotate(-135deg);
}
.service-s3 .info-box .page-box .arrow.next {
  right: 0;
  transform: translate3d(0, -50%, 0) rotate(45deg);
}
.service-s3 .info-box .page-box .arrow:hover {
  border-width: 3px;
}
.service-s3 .img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 100px;
  background-color: #fff;
}
.service-s3 .img-box .img {
  position: relative;
}
.service-s3 .img-box .img .swiper-container {
  position: absolute;
  top: 60px;
  left: 0;
  width: 960px;
}

.agency-s2 .item {
  height: 230px;
  margin: 0 0 30px;
  padding: 25px 14px 14px;
  font-size: 20px;
  font-weight: 700;
}
.agency-s2 .item span {
  display: block;
  margin-bottom: 14px;
  padding: 5px 0;
  font-size: 24px;
  font-style: italic;
  color: #3163e6;
  border-bottom: 1px solid #ddd;
}

.agency-s3 {
  margin: 0 0 80px;
  background-color: #3163e6;
}
.agency-s3 .info-box {
  position: relative;
  height: 600px;
  color: #fff;
}
.agency-s3 .info-box .swiper-text {
  position: absolute;
  top: 150px;
  left: 0;
}
.agency-s3 .info-box h3 {
  position: relative;
  margin: 0 0 40px;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -1px;
  opacity: 0;
  top: -1rem;
  transition: all 0.5s 0.3s;
}
.agency-s3 .info-box h3 strong {
  display: block;
  font-weight: 700;
}
.agency-s3 .info-box h3.active {
  opacity: 1;
  top: 0;
}
.agency-s3 .info-box p {
  position: relative;
  margin: 5px 0 0;
  padding-right: 50px;
  font-size: 18px;
  line-height: 1.8;
  opacity: 0;
  top: 1rem;
  transition: all 0.5s 0.3s;
}
.agency-s3 .info-box p.active {
  opacity: 1;
  top: 0;
}
.agency-s3 .info-box .page-box {
  position: absolute;
  top: 90px;
  right: 30px;
  z-index: 2;
  width: 80px;
}
.agency-s3 .info-box .page-box .arrow {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.agency-s3 .info-box .page-box .arrow.prev {
  left: 0;
  transform: translate3d(0, -50%, 0) rotate(-135deg);
}
.agency-s3 .info-box .page-box .arrow.next {
  right: 0;
  transform: translate3d(0, -50%, 0) rotate(45deg);
}
.agency-s3 .info-box .page-box .arrow:hover {
  border-width: 3px;
}
.agency-s3 .img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 100px;
  background-color: #fff;
}
.agency-s3 .img-box .img {
  position: relative;
}
.agency-s3 .img-box .img .swiper-container {
  position: absolute;
  top: 60px;
  left: 0;
  width: 960px;
}
.agency-s4 {
  margin: 0 0 100px;
}
.agency-s4 .info-box {
  display: flex;
  flex-direction: column;
  height: 340px;
  margin: 60px 0 100px;
}
.agency-s4 .info-box h3 {
  margin: 0 0 60px;
  font-size: 34px;
  letter-spacing: -1px;
}
.agency-s4 .info-box p {
  margin: 5px 0 0;
  font-size: 18px;
  padding-right: 30px;
}
.agency-s4 .img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 500px;
  background-color: #fff;
}
.agency-s4 .img-box .img {
  position: relative;
}
.agency-s4 .img-box .img img {
  position: absolute;
  max-width: none;
}
.agency-s4 .img-box .img .img-02 { top: 60px; }
.agency-swiper {
  margin: 0 0 60px;
}
.agency-swiper .swiper-wrapper {
    transition-timing-function: linear; /* 가속/감속 없이 일정한 속도로 움직이게 설정 */
}
.agency-swiper .swiper-slide {
  width: 320px !important;
  height: 320px;
}
.agency-swiper .swiper-slide p {
  margin-top: 140px;
  font-size: 16px;
  text-align: center;
  color: #666;
  background-color: #f4f4f4;
}
/* ==================================================================
   9. MARKETING PAGE
   ================================================================== */
.marketing-s1 {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.marketing-s1 .info-box {
  margin: 10px 0 0;
  height: 600px;
}
.marketing-s1 .info-box2 {
  margin: 10px 0 40px;
}
.marketing-s1 .img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.marketing-s1 .img-box .img {
  position: relative;
}
.marketing-s1 .img-box .img img {
  position: absolute;
  max-width: none;
}
.marketing-s1 .img-box .img .seo-01 { left: 0; z-index: 2; }
.marketing-s1 .img-box .img .seo-02 { top: 80px; left: 350px; z-index: 1; }
.marketing-s1 .img-box .img .viral-01 { right: 0; z-index: 2; }
.marketing-s1 .img-box .img .viral-02 { top: 240px; right: 340px; z-index: 1; }
.marketing-s1 .img-box .img .contents-01 { top: -50px; left: 240px; z-index: 1; }
.marketing-s1 .img-box .img .contents-02 { top: 130px; left: 380px; z-index: 3; }
.marketing-s1 .img-box .img .contents-03 { top: 320px; left: 270px; z-index: 2; }

.marketing-s2 {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.marketing-s2 .info-box {
  margin: 10px 0 0;
  height: 600px;
}
.marketing-s2 .info-box h2 {
  margin: 0 0 20px;
  font-size: 18px;
  font-style: italic;
  color: #3163e6;
}
.marketing-s2 .info-box h3 {
  margin: 0 0 40px;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -1px;
}
.marketing-s2 .info-box h3 strong {
  display: block;
  font-weight: 700;
}
.marketing-s2 .info-box p {
  margin: 5px 0 0;
  font-size: 18px;
  line-height: 1.8;
}
.marketing-s2 .img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.marketing-s2 .img-box .img {
  position: relative;
}
.marketing-s2 .img-box .img img {
  position: absolute;
  max-width: none;
}
.marketing-s2 .img-box .img .img-01 { top: 30px; width: 382px; z-index: 1; }
.marketing-s2 .img-box .img .img-02 { top: 248px; left: 250px; z-index: 2; }
.marketing-s2 .img-box .img .img-03 { top: 220px; left: 390px; z-index: 3; }

.marketing-s3 {
  position: relative;
  margin: 80px 0 0;
}
.marketing-s3 .bg-img {
  height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url('/img/service-contents.jpg');
  background-position: top center;
  background-attachment: fixed;
}
.marketing-s3 .bg-img .info-box {
  color: #fff;
  text-align: center;
}
.marketing-s3 .bg-img .info-box h3 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
}
.marketing-s3 .bg-img .info-box p {
  margin: 20px 0 0;
  font-size: 18px;
  line-height: 2;
}
.marketing-swiper {
  margin: -100px 0 60px;
}
.marketing-swiper .swiper-wrapper {
    transition-timing-function: linear; /* 가속/감속 없이 일정한 속도로 움직이게 설정 */
}
.marketing-swiper .swiper-slide {
  width: 320px !important;
  height: 320px;
}
.marketing-swiper .swiper-slide p {
  margin-top: 140px;
  font-size: 16px;
  text-align: center;
  color: #666;
  background-color: #f4f4f4;
}
/* ==================================================================
   10. CREATOR PAGE
   ================================================================== */
.creator-s1 {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.creator-s1 .info-box {
  margin: 10px 0 0;
  height: 700px;
}
.creator-s1 .info-box2 {
  margin: 10px 0 0;
}
.creator-s1 .img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.creator-s1 .img-box .img {
  position: relative;
}
.creator-s1 .img-box .img img {
  position: absolute;
  max-width: none;
}
.creator-s1 .img-box .img .creat-01 { left: 0; z-index: 1; }
.creator-s1 .img-box .img .creat-02 { top: 6px; left: -11px; z-index: 2; }
.creator-s1 .img-box .img .creat-03 { top: 253px; left: -10px; z-index: 3; }
.creator-s1 .img-box .img .creat-04 { top: 25px; left: 620px; z-index: 4; }
.creator-s1 .img-box .img .viral-01 { right: 0; z-index: 2; }
.creator-s1 .img-box .img .viral-02 { top: 240px; right: 340px; z-index: 1; }
.creator-s1 .img-box .img .contents-01 { top: -50px; left: 240px; z-index: 1; }
.creator-s1 .img-box .img .contents-02 { top: 130px; left: 380px; z-index: 3; }
.creator-s1 .img-box .img .contents-03 { top: 320px; left: 270px; z-index: 2; }
/*.creator-s2 {
  height: 500px;
  margin-top: 80px;
  display: flex;
  align-items: center;
  background-image: url('/img/creator-s2.jpg');
}
.creator-s2 .info-box {
  text-align: center;
}
.creator-s2 .info-box h3 {
  margin: 0;
  font-size: 20px;
  color: #999;
}
.creator-s2 .info-box p {
  margin: 40px 0 0;
  font-size: 20px;
  line-height: 1.8;
  color: #fff;
}
.creator-s2 .info-box span {
  display: block;
}
.creator-s2 .info-box i {
  display: block;
  margin: 10px 0 0;
  font-size: 18px;
}

.creator-s3 dl {
  padding: 50px 0;
  overflow: hidden;
  border-top: 1px solid #ddd;
}
.creator-s3 dl dt {
  float: left;
  width: 35%;
  margin: 0;
  font-size: 24px;
}
.creator-s3 dl dd {
  float: left;
  display: block;
  font-size: 14px;
}
.creator-s3 dl dd ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.creator-s3 dl dd ul li {
  margin: 0;
  padding-bottom: 8px;
}*/

.creator-s4 {
  position: relative;
  height: 500px;
}
.creator-s4 .page-box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 750px;
  margin-left: -375px;
}
.creator-s4 .page-box .arrow {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.creator-s4 .page-box .arrow.prev {
  left: 0;
  transform: translate3d(0, -50%, 0) rotate(-135deg);
}
.creator-s4 .page-box .arrow.next {
  right: 0;
  transform: translate3d(0, -50%, 0) rotate(45deg);
}
.creator-s4 .page-box .arrow:hover {
  border-width: 3px;
}

.creator-s5 h3 {
  margin: 40px 0 0;
  font-size: 30px;
}
.creator-s5 .table {
  margin: 30px 0 50px;
}
.creator-s5 .table tr:nth-child(odd) {
  background-color: #f9f9f9;
}
.creator-s5 .table th,
.creator-s5 .table td {
  font-size: 15px;
  vertical-align: middle;
}
.creator-s5 .table th:first-child,
.creator-s5 .table td:first-child {
  width: 25%;
}
.creator-s5 .table th:last-child,
.creator-s5 .table td:last-child {
  width: 20%;
}
.creator-s5 .table th {
  padding: 10px 20px;
  color: #fff;
  background-color: #888;
}
.creator-s5 .table td {
  position: relative;
  padding: 25px 20px;
  line-height: 2;
  border-bottom: 1px solid #ddd;
}
.creator-s5 .table td .subject {
  font-size: 20px;
}
.creator-s5 .table td .util {
  color: #666;
}
.creator-s5 .table td .cate,
.creator-s5 .table td .dday {
  display: none;
}
.creator-s5 .table td .dday {
  color: #666;
}

/* --- Creator Blog --- */
.creator-blog .category {
  margin: 0;
  border-bottom: 1px solid #d4d4d4;
}
.creator-blog .category > ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.creator-blog .category > ul > li {
  display: block;
  padding: 0 5px;
}
.creator-blog .category > ul > li > a {
  display: block;
  padding: 8px 15px;
  font-size: 16px;
  border-bottom: 2px solid transparent;
}
.creator-blog .category ul > li > a:hover,
.creator-blog .category ul > li > a.active {
  color: #3163e6;
  font-weight: 700;
  border-bottom-color: #3163e6;
}

.creator-blog .list {
  padding: 15px 0;
}
.creator-blog .list .item {
  padding: 15px 0 0;
}
.creator-blog .list .item .bg-img {
  display: block;
  height: 270px;
  background-size: 100%;
  transition: background-size 0.3s ease;
}
.creator-blog .list .item .bg-img:hover {
  background-size: 110%;
}
.creator-blog .list .item .text-box {
  min-height: 148px;
}
.creator-blog .list .item .rest-date {
  margin: 10px 0 0;
  color: #3163e6;
}
.creator-blog .list .item h4,
.creator-blog .list .item p {
  display: inline-block;
  width: 100%;
  margin: 5px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.creator-blog .list .item p {
  margin: 0;
}

.creator-blog .view {
  overflow: hidden;
}
.creator-blog .view h3 {
  padding: 0 0 10px;
  margin: 0 0 10px;
  font-size: 22px;
  border-bottom: 1px solid #ddd;
}
.creator-blog .view h3 small {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #666;
}
.creator-blog .view .info-box span {
  display: block;
  padding-right: 20px;
  font-size: 16px;
  color: #555;
}
.creator-blog .view .btn-group {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -17px;
}
.creator-blog .view .info-file {
  padding: 15px 10px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid #ddd;
}
.creator-blog .view .content {
  padding: 25px 0;
  font-size: 16px;
  font-weight: 400;
}
.creator-blog .view .navi-btn {
  padding: 25px 0;
  text-align: right;
  border-top: 1px solid #ddd;
}
.creator-blog .view .swiper-container {
  width: 800px;
}
.creator-blog .view .page-box {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  width: 100%;
}
.creator-blog .view .page-box .arrow {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.creator-blog .view .page-box .arrow.prev {
  left: 20px;
  transform: translate3d(0, -50%, 0) rotate(-135deg);
}
.creator-blog .view .page-box .arrow.next {
  right: 20px;
  transform: translate3d(0, -50%, 0) rotate(45deg);
}
.creator-blog .view .page-box .arrow:hover {
  border-width: 4px;
}

.creator-blog .register {
  padding: 20px 0;
  font-size: 16px;
  overflow: hidden;
}
.creator-blog .register h4 {
  padding-bottom: 30px;
  font-size: 22px;
  font-weight: 400;
  text-align: center;
}
.creator-blog .register h4 small {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}
.creator-blog .register h5 {
  font-size: 16px;
  font-weight: 400;
}
.creator-blog .register .table th {
  font-size: 16px;
  font-weight: 400;
  vertical-align: middle;
}
.creator-blog .register .form-control {
  font-size: 16px;
}

/* ==================================================================
   11. PARTNER PAGE
   ================================================================== */
.partner-s1 {
  position: absolute;
  bottom: 140px;
  left: 50%;
  width: 750px;
  height: 120px;
  margin-left: -375px;
  overflow: hidden;
}
.partner-s1 .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.14);
  transition: all 0.2s ease;
}
.partner-s1 .swiper-slide-prev,
.partner-s1 .swiper-slide-next {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.24);
}
.partner-s1 .swiper-slide-active {
  font-size: 24px;
  color: #fff;
}
.partner-s1 .info-box {
  margin: 0;
  text-align: center;
}

.partner-s2 {
  position: relative;
  overflow: hidden;
}
.partner-s2 .line {
  position: absolute;
  top: 45px;
  left: 40px;
  width: 2px;
  height: 100%;
  background-color: #3163e6;
}
.partner-s2 .line::before {
  content: '';
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 2px;
  height: 78px;
  background-color: #fff;
}
.partner-s2 ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #292f3e;
}
.partner-s2 ul li {
  position: relative;
  display: block;
  padding: 40px 0;
  border-bottom: 1px solid #ddd;
}
.partner-s2 dl {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.partner-s2 dl dt {
  position: relative;
  float: left;
  width: 330px;
  padding-left: 72px;
  font-size: 24px;
}
.partner-s2 dl dt span {
  position: absolute;
  top: 0;
  left: 10px;
  display: block;
  width: 32px;
  height: 32px;
  font-size: 18px;
  line-height: 32px;
  color: #fff;
  text-align: center;
  background-color: #3163e6;
  border-radius: 50%;
}
.partner-s2 dl dd {
  float: left;
  width: calc(100% - 330px);
  font-size: 18px;
  line-height: 1.8;
}

.partner-s3 {
  position: relative;
  margin: 130px 0 0;
  padding: 80px 0;
  color: #fff;
  background-image: url(/img/partner-s3.jpg);
  background-attachment: fixed;
}
.partner-s3 .diagonal {
  position: absolute;
  top: -114px;
  left: -10%;
  z-index: 1;
  width: 120%;
  height: 130px;
  background-color: #fff;
  transform: rotate(3deg);
  transform-origin: left bottom;
}
.partner-s3 .form ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.partner-s3 .form ul li {
  float: left;
  display: block;
  width: 50%;
  padding: 20px 14px;
}
.partner-s3 .form ul li:last-child {
  width: 100%;
}
.partner-s3 label {
  font-size: 18px;
  font-weight: 400;
  color: #ebf1ff;
}
.partner-s3 label span {
  display: inline-block;
  margin-left: 5px;
  color: #3163e6;
}
.partner-s3 input[type='text'],
.partner-s3 textarea {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  color: #fff;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #fff;
}
.partner-s3 .submit {
  padding-top: 80px;
  text-align: center;
}
.partner-s3 .submit .btn {
  margin: 30px 0 0;
  padding: 12px 35px;
  font-size: 18px;
  color: #fff;
  background-color: #3163e6;
  border-radius: 30px;
}

/* ==================================================================
   12. UTILITIES (유틸리티)
   ================================================================== */
.sweet-alert h2 {
  font-size: 18px;
  line-height: 1.6;
}
.sweet-alert p {
  font-size: 18px;
}
.ps {
  position: relative;
  overflow: auto;
}
.help-block {
  margin-bottom: 0;
  color: #f65579;
}
.help-block.inline {
  display: inline-block !important;
}

/* ==================================================================
   13. MEDIA QUERIES (반응형 스타일)
   ================================================================== */
@media (max-width: 1199px) {
  /* Visual */
  .visual { height: 720px; }
  .visual .page-box { bottom: 180px; }

  /* Whats */
  .whats .img-box .img .seo-01 { width: 90%; }
  .whats .img-box .img .seo-02 { top: 140px; left: 260px; width: 70%; }
  .whats .img-box .img .viral-01 { width: 90%; }
  .whats .img-box .img .viral-02 { top: 300px; right: 300px; width: 70%; }
  .whats .img-box .img .contents-01 { top: -40px; left: 160px; }
  .whats .img-box .img .contents-02 { top: 130px; left: 340px; }
  .whats .img-box .img .contents-03 { left: 250px; }
  .vertical-video video { width: 90%; height: 90%; }

  /* Pass */
  .pass::before { background-position-x: calc(50% + 100px); }

  /* Marketing */
  .marketing { background-position-x: -345px; }
  .marketing-s1 .img-box .img .seo-01 { width: 90%; }
  .marketing-s1 .img-box .img .seo-02 { top: 140px; left: 260px; width: 70%; }
  .marketing-s1 .img-box .img .viral-01 { width: 90%; }
  .marketing-s1 .img-box .img .viral-02 { top: 300px; right: 300px; width: 70%; }
  .marketing-s1 .img-box .img .contents-01 { top: -40px; left: 160px; }
  .marketing-s1 .img-box .img .contents-02 { top: 130px; left: 340px; }
  .marketing-s1 .img-box .img .contents-03 { left: 250px; }
    
  /* creator */
  .creator-s1 .img-box .img .seo-01 { width: 90%; }
  .creator-s1 .img-box .img .seo-02 { top: 140px; left: 260px; width: 70%; }
  .creator-s1 .img-box .img .viral-01 { width: 90%; }
  .creator-s1 .img-box .img .viral-02 { top: 300px; right: 300px; width: 70%; }
  .creator-s1 .img-box .img .contents-01 { top: -40px; left: 160px; }
  .creator-s1 .img-box .img .contents-02 { top: 130px; left: 340px; }
  .creator-s1 .img-box .img .contents-03 { left: 250px; }
      
}

/** ------------------------------------------------
 *  991px 이하 (Medium Devices)
 * ------------------------------------------------- */
@media (max-width: 991px) {  
  /* Common */
  .section-title { margin: 140px 0 80px; }
  .section-title h2 { font-size: 28px; }
  .sub-title { margin: 50px 0; }
  .sub-title h2 { font-size: 25px; letter-spacing: -1px; }
  .sub-title h2 span { display: block; }
  .sub-title p { margin: 5px 0 0; font-size: 16px; }
  .link { text-align: center; }    

  /* Visual */
  .visual .info-box h2 { padding: 0 20px; font-size: 50px; }
  .visual .info-box p { font-size: 24px; }
  .visual-sub { height: 500px; }
  .visual-sub .info-box { margin-top: 30px; }
  .visual-sub .info-box h2 { font-size: 32px; }
  .visual-sub .info-box p { margin: 30px 0 0; line-height: 1.6; }

  /* 공통 info-group */
  .info-group h3 { margin: 20px 0; height: 80px; font-size: 24px; }
  .info-group h3 small { font-size: 36px; }
  .info-group h4 { margin: 20px 0; height: 80px; font-size: 24px; }
  .info-group h4 small { font-size: 36px; }    
  .info-group h5 { margin: 0 0 20px; font-size: 22px; }
  .info-group p { font-size: 18px; }
  .info-group p small { margin-top: 5px; font-size: 18px; }

  /* Whats */
  .whats { background-position-x: -125px; }
  .whats .info-box { height: 420px; margin: 20px 0; }
  .whats .info-box2 { height: 500px; margin: 50px 0 0; }
  .whats .img-box { position: static; height: 600px; }
  .whats .img-box .img .seo-01 { width: 60%; }
  .whats .img-box .img .seo-02 { top: 20px; left: 380px; width: 50%; }
  .whats .img-box .img .viral-01 { width: 60%; }
  .whats .img-box .img .viral-02 { top: 160px; right: 370px; width: 50%; }
  .whats .img-box .img .contents-01 { top: -30px; left: 200px; }
  .whats .img-box .img .contents-02 { top: 120px; left: 410px; }
  .whats .img-box .img .contents-03 { left: 280px; }
  .vertical-video video { width: 84%; height: 84%; }

  /* Pass */
  .pass::before { background-position-x: calc(50% + 445px); }
  .pass .info-box { height: 360px; }
  .pass .img-box { position: static; height: 540px; }
  .pass .pass-info { height: 300px; text-align: center; }
  .pass .pass-info h3 { margin: 0 0 30px; }
  /*.pass .pass-info .stats-wrapper { justify-content: center; gap: 30px; }*/
  .pass .pass-info .app-down { display: none; }
  .pass .pass-box { position: relative; height: 660px; margin-top: 30px; }
  .pass .pass-box .img { height: 520px; }
  .pass .pass-box .img .img-01 { bottom: -132px; left: 128px; }
  .pass .pass-box .img .img-02 { bottom: 116px; left: 133px; }
  .pass .pass-box .img .img-03 { bottom: 116px; left: 375px; }
  .pass .pass-box .img .img-04 { bottom: -122px; left: 133px; }
  .pass .pass-box .img .img-05 { bottom: -98px; left: 375px; }

  /* Works */
  /*.works .info-box { display: block; height: auto; margin: 0; padding: 10px 0 20px; }
  .works .info-box:nth-of-type(2) { padding-top: 60px; }
  .works .info-box h3 { margin: 35px 0; }	
  .works .info-box p { padding-right: 0; }
  .works .img-box { position: static; padding: 20px 0 80px; text-align: center; }
  .works .img-box .img img { position: static; max-width: 100%; }
  .works .img-box .img .img-012 { position: absolute; top: 68%; left: 65%; }
  .works .img-box .img .img-013 { position: absolute; top: 58%; left: 80%; }
  .works .img-box .img .img-031 { width: 72%; }
  .works .img-box .img .img-032 { position: absolute; top: 38%; left: 0; width: 30%; }
  .works .img-box .img .img-033 { position: absolute; top: 48%; left: 70%; width: 29%; }*/

  /* agency */
  .agency-s1 .info-box { display: block; height: auto; margin: 0; padding: 10px 0 20px; }
  .agency-s1 .info-box:nth-of-type(2) { padding-top: 60px; }
  .agency-s1 .info-box h3 { margin: 35px 0; }	
  .agency-s1 .info-box p { padding-right: 0; }
  .agency-s1 .img-box { position: static; padding: 20px 0 80px; text-align: center; }
  .agency-s1 .img-box .img img { position: static; max-width: 100%; }
  .agency-s1 .img-box .img .img-012 { position: absolute; top: 68%; left: 65%; }
  .agency-s1 .img-box .img .img-013 { position: absolute; top: 58%; left: 80%; }
  .agency-s1 .img-box .img .img-031 { width: 72%; }
  .agency-s1 .img-box .img .img-032 { position: absolute; top: 38%; left: 0; width: 30%; }
  .agency-s1 .img-box .img .img-033 { position: absolute; top: 48%; left: 70%; width: 29%; }
  .agency-s1 .stats-wrapper { justify-content: center; gap: 30px; }    	
  .service-s1 .swiper-slide { width: 160px !important; height: 87px; }
  .service-s2 .info-box { height: 560px; }
  .service-s2 .info-box h2 { font-size: 16px; }
  .service-s2 .info-box h3 { margin: 0 0 20px; font-size: 22px; }
  .service-s2 .img-box .img img { max-width: 100%; }
  .service-s2 .img-box .img .img-01 { width: 70%; }
  .service-s2 .img-box .img .img-02 { position: absolute; top: 105px; left: 0; width: 80%; }
  .service-s2 .img-box .img .img-03 { position: absolute; top: 170px; left: 70px; width: 90%; }
  .service-s2 .img-box .img .img-04 { position: absolute; top: 230px; left: 0; width: 100%; }
  .service-s2 .img-box .img .img-011 { width: 75%; }
  .service-s2 .img-box .img .img-012 { position: absolute; top: 58%; left: 78%; width: 17%; }
  .service-s3 { margin: 0 0 110px; }
  .service-s3 .info-box { height: 400px; }
  .service-s3 .info-box .swiper-text { top: 100px; }
  .service-s3 .info-box h3 { margin: 0 0 20px; font-size: 22px; }
  .service-s3 .info-box p { padding-right: 30px; font-size: 16px; }
  .service-s3 .info-box .page-box { top: 60px; right: 15px; width: 60px; }
  .service-s3 .info-box .page-box .arrow { width: 24px; height: 24px; }
  .service-s3 .img-box,
  .service-s3 .img-box .img .swiper-container { width: 640px; }
  .service-s3 .img-box .img .swiper-container { top: 40px; }
  .agency-s2 .item { height: 180px; padding: 25px 10px 14px; font-size: 16px; font-weight: 400; }
  .agency-s2 .item span { font-size: 24px; }
  .agency-s3 { margin: 0 0 110px; }
  .agency-s3 .info-box { height: 400px; }
  .agency-s3 .info-box .swiper-text { top: 100px; }
  .agency-s3 .info-box h3 { margin: 0 0 20px; font-size: 22px; }
  .agency-s3 .info-box p { padding-right: 30px; font-size: 16px; }
  .agency-s3 .info-box .page-box { top: 60px; right: 15px; width: 60px; }
  .agency-s3 .info-box .page-box .arrow { width: 24px; height: 24px; }
  .agency-s3 .img-box,
  .agency-s3 .img-box .img .swiper-container { width: 640px; }
  .agency-s3 .img-box .img .swiper-container { top: 40px; }
  .agency-s4 .info-box { display: block; height: auto; margin: 0; padding: 10px 0 20px; }
  .agency-s4 .info-box:nth-of-type(2) { padding-top: 60px; }
  .agency-s4 .info-box h3 { margin: 35px 0; }	
  .agency-s4 .info-box p { padding-right: 0; }
  .agency-s4 .img-box { position: static; padding: 20px 0 80px; text-align: center; }
  .agency-s4 .img-box .img img { position: static; max-width: 100%; }	
  .agency-swiper .swiper-slide { width: 160px !important; height: 87px; }

  /* Marketing */
  .marketing { background-position-x: -125px; }
  .marketing-s1 .info-box { height: 420px; margin: 20px 0; }
  .marketing-s1 .info-box2 { height: 500px; margin: 50px 0 0; }
  .marketing-s1 .img-box { position: static; height: 600px; }
  .marketing-s1 .img-box .img .seo-01 { width: 60%; }
  .marketing-s1 .img-box .img .seo-02 { top: 20px; left: 380px; width: 50%; }
  .marketing-s1 .img-box .img .viral-01 { width: 60%; }
  .marketing-s1 .img-box .img .viral-02 { top: 160px; right: 370px; width: 50%; }
  .marketing-s1 .img-box .img .contents-01 { top: -30px; left: 200px; }
  .marketing-s1 .img-box .img .contents-02 { top: 120px; left: 410px; }
  .marketing-s1 .img-box .img .contents-03 { left: 280px; }
	
  .marketing-s2 .info-box { height: 560px; }
  .marketing-s2 .info-box h2 { font-size: 16px; }
  .marketing-s2 .info-box h3 { margin: 0 0 20px; font-size: 22px; }
  .marketing-s2 .img-box .img img { max-width: 100%; }
  .marketing-s2 .img-box .img .img-01 { width: 75%; }
  .marketing-s2 .img-box .img .img-02 { position: absolute; top: 68%; left: 65%; }
  .marketing-s2 .img-box .img .img-03 { position: absolute; top: 58%; left: 80%; }
    
  .marketing-s3 { margin-top: 20px; }
  .marketing-s3 .bg-img { height: 400px; }
  .marketing-s3 .bg-img .info-box h3 { font-size: 20px; }
  .marketing-s3 .bg-img .info-box p { margin: 20px 0 0; font-size: 16px; }
  .marketing-s3 .bg-img .info-box p br { display: none; }    
    
  .marketing-swiper .swiper-slide { width: 160px !important; height: 87px; }    

  /* Creator */
  .creator-s1 .info-box { padding: 30px 25px; }
  .creator-s1 .info-box h3 { font-size: 24px; }
  /*.creator-s2 { height: 300px; margin-top: 40px; background-position: right center; }
  .creator-s2 .info-box p { margin: 20px 0 0; font-size: 16px; }
  .creator-s2 .info-box i { font-size: 12px; }
  .creator-s3 dl { padding: 30px 0 10px; }
  .creator-s3 dl dt { width: 30%; font-size: 24px; }*/
  .creator-s4 { height: 300px; }
  .creator-s4 .page-box { left: 0; width: 100%; margin-left: 0; }
  .creator-s4 .page-box .arrow { width: 26px; height: 26px; }
  .creator-s4 .page-box .arrow.prev { left: 14px; }
  .creator-s4 .page-box .arrow.next { right: 14px; }
  /*.creator-blog .view .swiper-container { width: 100%; }*/
  
  /* Partner */
  .partner-s1 { bottom: 90px; height: 85px; width: 100%; left: 0; margin-left: 0; }
  .partner-s1 .swiper-slide { font-size: 10px; letter-spacing: -1px; }
  .partner-s1 .swiper-slide-prev,
  .partner-s1 .swiper-slide-next { font-size: 13px; }
  .partner-s1 .swiper-slide-active { font-size: 16px; }
  .partner-s2 .line { left: 37px; }
  .partner-s2 .line::before { bottom: 45px; }
  .partner-s2 ul li { padding: 20px 0; }
  .partner-s2 dl dt { float: none; width: 100%; padding-left: 50px; font-size: 24px; }
  .partner-s2 dl dt span { width: 26px; height: 26px; font-size: 14px; line-height: 26px; }
  .partner-s2 dl dd { float: none; width: 100%; padding: 10px 0 0 50px; line-height: 1.6; }
  .partner-s3 { margin-top: 80px; padding: 80px 0; }
  .partner-s3 .diagonal { top: -65px; height: 80px; }
  .partner-s3 .form ul { margin: 0 -5px; }
  .partner-s3 .form ul li { padding: 10px 5px; }
  .partner-s3 label { font-size: 16px; }
  .partner-s3 input[type='text'],
  .partner-s3 textarea { font-size: 16px; }
}

/** ------------------------------------------------
 *  767px 이하 (Small Devices)
 * ------------------------------------------------- */
@media (max-width: 767px) {
  /* Common */
  .section-title { margin: 100px 0 50px; }
  .section-title h2 { font-size: 26px; }
  .section-title h2 img { height: 24px; }
  .section-title p { margin: 10px 0 0; font-size: 16px; }
  .br-mobile { display: block; }

  /* Visual */
  .visual { height: 680px; }
  .visual .info-box h2 { padding: 0 30px; font-size: 31px; line-height: 1.1; }
  .visual .info-box p { font-size: 24px; }
  .visual .page-box { width: 86%; bottom: 40%; margin-left: -43%; }
  /*.visual .page-box .swiper-button:hover,
  .visual .page-box .swiper-button.prev:hover { width: 30px; left: 0; right: 0; }*/
  
  /* Whats & Pass (공통 info-group) */
  .info-group { height: auto; padding: 20px 0; }
  .info-group p { font-size: 16px; }
  .info-group p small { font-size: 16px; }	

  /* Whats */
  .whats { background-position-x: 23%; }
  .whats .info-box .summary { padding: 20px 0; }
  .whats .img-box { position: relative; height: auto; min-height: 88vw; padding-bottom: 40px; }
  .whats .img-box .img { display: flex; justify-content: center; align-items: flex-start; height: 100%; }
  .whats .img-box .img img { max-width: 100%; }
  .whats .img-box .img .seo-01 { left: 0; width: 80%; }
  .whats .img-box .img .seo-02 { top: 30px; left: 60%; width: 60%; }
  .whats .img-box .img .viral-01 { right: 0; width: 70%; }
  .whats .img-box .img .viral-02 { top: 130px; right: 45%; width: 60%; }
  .whats .img-box .img .contents-01 { top: 0%; left: 200px; width: 100%; }
  .whats .img-box .img .contents-02 { top: 30%; left: -10%; width: 90%; }
  .whats .img-box .img .contents-03 { top: 50%; left: 70%; width: 90%; }
  .vertical-video { top: 30px; width: 60% !important; max-width: 320px !important; }
  .vertical-video video { width: 100%; height: 100%; object-fit: cover; }

  /* Pass */
  .pass::before { background-position-x: calc(50% + 320px); background-size: 1500px; }
  .pass .img-box { height: 100%; }
  .pass .img-box .img { position: relative; height: 57vw; }
  .pass .img-box .img img { max-width: 100%; }
  .pass .img-box .img .pass-01 { width: 75%; left: 0; }
  .pass .img-box .img .pass-02,
  .pass .img-box .img .pass-03 { top: 25%; left: 60%; width: 60%; }
  .pass .pass-info { height: auto; margin: 60px 0 0; }
  .pass .pass-info h3 { font-size: 24px; }
  .pass .pass-info p { font-size: 16px; }	
  /*.pass .pass-info .stats-wrapper { flex-direction: column; gap: 20px; padding: 20px 0; }
  .pass .pass-info .stat-item:not(:last-child)::after { display: none; }
  .pass .pass-info .stat-title { margin-bottom: 2px; }
  .pass .pass-info .stat-value { font-size: 32px; }
  .pass .pass-info .stat-unit { font-size: 20px; }*/
  .pass .pass-box { position: relative; height: 350px; }
  .pass .pass-box .img { position: relative; height: 100%; }
  .pass .pass-box .img img { position: absolute; }
  .pass .pass-box .img .img-01 { top: 50%; left: 51%; width: 310px; transform: translate(-50%, -50%); margin-left: 0; }
  .pass .pass-box .img .img-02 { top: 52px; left: 50%; width: 130px; transform: translateX(calc(-50% - 80px)); }
  .pass .pass-box .img .img-03 { top: 52px; left: 50%; width: 130px; transform: translateX(calc(-50% + 74px)); }
  .pass .pass-box .img .img-04 { top: auto; bottom: 15px; left: 50%; width: 130px; transform: translateX(calc(-50% - 80px)); }
  .pass .pass-box .img .img-05 { top: auto; bottom: 31px; left: 50%; width: 125px; transform: translateX(calc(-50% + 71px)); }    
  .pass .swiper-pass { width: 100%; padding: 0; }
  .pass .swiper-slide { flex-shrink: 0; }
  .pass .swiper-wrapper { padding-right: 8px; }

  /* Works */
  /*.works .info-box { padding: 50px 0 30px; }
  .works .info-box h3 { margin: 0 0 25px; font-size: 24px; letter-spacing: 0; }
  .works .info-box p { font-size: 16px; padding-right: 0; }
  .works .img-box { position: static; padding: 0 0 50px; text-align: center; }
  .works .img-box .img img { position: static; max-width: 100%; }
  .works .img-box .img .img-012 { position: absolute; top: 94%; left: 10%; }
  .works .img-box .img .img-013 { position: absolute; top: 86%; left: 56%; }*/

  /* Agency */
  .agency-s1 .info-box { padding: 50px 0 30px; }
  .agency-s1 .info-box h3 { margin: 0 0 25px; font-size: 24px; letter-spacing: 0; }
  .agency-s1 .info-box p { font-size: 16px; padding-right: 0; }
  .agency-s1 .img-box { position: static; padding: 0 0 50px; text-align: center; }
  .agency-s1 .img-box .img img { position: static; max-width: 100%; }
  .agency-s1 .img-box .img .img-012 { position: absolute; top: 94%; left: 10%; }
  .agency-s1 .img-box .img .img-013 { position: absolute; top: 86%; left: 56%; }	
  .agency-s1 .stats-wrapper { flex-direction: column; gap: 20px; padding: 20px 0; }
  .agency-s1 .stat-item:not(:last-child)::after { display: none; }
  .agency-s1 .stat-title { margin-bottom: 2px; }
  .service-s2 .info-box { height: auto; padding: 50px 0 20px; }
  .service-s2 .img-box { position: static; padding: 0 0 80px; }
  .service-s2 .img-box .img { text-align: center; }
  .service-s2 .img-box .img img { position: static; max-width: 330px; }
  .service-s2 .img-box .img .img-01 { width: 100%; }
  .service-s2 .img-box .img .img-02 { position: absolute; top: -235px; left: 0; width: 50%; }
  .service-s2 .img-box .img .img-03 { position: absolute; top: -185px; left: 10%; width: 75%; }
  .service-s2 .img-box .img .img-04 { position: absolute; top: -160px; left: 20%; width: 75%; }
  .service-s3 { margin-bottom: 50px; }
  .service-s3 .info-box { height: 260px; padding: 50px 0 20px; }
  .service-s3 .info-box .swiper-text { top: 50px; }
  .service-s3 .info-box p { padding-right: 0; }
  .service-s3 .info-box .page-box { top: 50px; right: 10px; width: 60px; }
  .service-s3 .info-box .page-box .arrow { width: 24px; height: 24px; }
  .service-s3 .img-box { position: static; width: auto; height: auto; margin: 0 0 15px; background-color: #3163e6; }
  .service-s3 .img-box .img .swiper-container { position: static; width: 100%; }
  .agency-s2 .item { height: 150px; margin: 0; padding: 14px 0 5px; }
  .agency-s2 .item br { display: none; }
  .agency-s3 .info-box { height: 260px; padding: 50px 0 20px; }
  .agency-s3 .info-box .swiper-text { top: 50px; }
  .agency-s3 .info-box p { padding-right: 0; }
  .agency-s3 .info-box .page-box { top: 50px; right: 10px; width: 60px; }
  .agency-s3 .info-box .page-box .arrow { width: 24px; height: 24px; }
  .agency-s3 .img-box { position: static; width: auto; height: auto; margin: 0 0 15px; background-color: #3163e6; }
  .agency-s3 .img-box .img .swiper-container { position: static; width: 100%; }
  .agency-s4 .info-box { padding: 50px 0 30px; }
  .agency-s4 .info-box h3 { margin: 0 0 25px; font-size: 24px; letter-spacing: 0; }
  .agency-s4 .info-box p { font-size: 16px; padding-right: 0; }
  .agency-s4 .img-box { position: static; padding: 0 0 50px; text-align: center; }
  .agency-s4 .img-box .img img { position: static; max-width: 100%; }	

  /* Marketing */
  .marketing { background-position-x: 23%; }
  .marketing-s1 .info-box .summary { padding: 20px 0; }
  .marketing-s1 .img-box { position: relative; height: auto; min-height: 88vw; padding-bottom: 40px; }
  .marketing-s1 .img-box .img { display: flex; justify-content: center; align-items: flex-start; height: 100%; }
  .marketing-s1 .img-box .img img { max-width: 100%; }
  .marketing-s1 .img-box .img .seo-01 { left: 0; width: 80%; }
  .marketing-s1 .img-box .img .seo-02 { top: 30px; left: 60%; width: 60%; }
  .marketing-s1 .img-box .img .viral-01 { right: 0; width: 70%; }
  .marketing-s1 .img-box .img .viral-02 { top: 130px; right: 45%; width: 60%; }
  .marketing-s1 .img-box .img .contents-01 { top: 0%; left: 200px; width: 100%; }
  .marketing-s1 .img-box .img .contents-02 { top: 30%; left: -10%; width: 90%; }
  .marketing-s1 .img-box .img .contents-03 { top: 50%; left: 70%; width: 90%; }
	
  .marketing-s2 .info-box { height: auto; padding: 50px 0 20px; }
  .marketing-s2 .img-box { position: static; padding: 0 0 80px; }
  .marketing-s2 .img-box .img { text-align: center; }
  .marketing-s2 .img-box .img img { position: static; max-width: 330px; }
  .marketing-s2 .img-box .img .img-01 { width: 100%; }
  .marketing-s2 .img-box .img .img-02 { position: absolute; top: -235px; left: 0; width: 50%; }
  .marketing-s2 .img-box .img .img-03 { position: absolute; top: -185px; left: 10%; width: 75%; }
    
  .marketing-s3 .bg-img .info-box p br { display: none; }    

  /* Creator */
  .creator-s1 { background-position-x: 23%; }
  .creator-s1 .info-box .summary { padding: 20px 0; }
  .creator-s1 .img-box { position: relative; height: auto; min-height: 88vw; padding-bottom: 40px; }
  .creator-s1 .img-box .img { display: flex; justify-content: center; align-items: flex-start; height: 100%; }
  .creator-s1 .img-box .img img { max-width: 100%; }
  .creator-s1 .img-box .img .seo-01 { left: 0; width: 80%; }
  .creator-s1 .img-box .img .seo-02 { top: 30px; left: 60%; width: 60%; }
  .creator-s1 .img-box .img .viral-01 { right: 0; width: 70%; }
  .creator-s1 .img-box .img .viral-02 { top: 130px; right: 45%; width: 60%; }
  .creator-s1 .img-box .img .contents-01 { top: 0%; left: 200px; width: 100%; }
  .creator-s1 .img-box .img .contents-02 { top: 30%; left: -10%; width: 90%; }
  .creator-s1 .img-box .img .contents-03 { top: 50%; left: 70%; width: 90%; }
  /*.creator-s1 .line-top { border-top: 1px solid #292f3e; }
  .creator-s1 .info-box { padding: 25px 14px 20px; border-bottom: 1px solid #ddd; }
  .creator-s1 .info-box h3 { font-size: 24px; }
  .creator-s3 dl { padding: 30px 10px 0; }
  .creator-s3 dl dt { float: none; width: 100%; }
  .creator-s3 dl dd { padding: 14px 0 0; }
  .creator-s3 dl dd ul li { padding-bottom: 5px; }
  .creator-s5 .container { padding: 0; }
  .creator-s5 h3 { margin: 40px 15px 0; font-size: 26px; }
  .creator-s5 .table { margin-top: 20px; }
  .creator-s5 .table th:first-child, .creator-s5 .table td:first-child,
  .creator-s5 .table th:last-child, .creator-s5 .table td:last-child,
  .creator-s5 .table th { display: none; }
  .creator-s5 .table td { padding: 20px 15px; line-height: 1.5; }
  .creator-s5 .table td .subject { padding: 5px 0 20px; font-size: 20px; }
  .creator-s5 .table td .cate,
  .creator-s5 .table td .dday { display: block; }
  .creator-s5 .table td .dday { position: absolute; right: 15px; bottom: 20px; }*/

  /* Partner */
  .partner-s3 .form ul li { width: 100%; float: none; }
  .partner-s3 .submit .btn { width: 100%; }
}