@charset "UTF-8";
/* 폰트어썸 */
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
/* 폰트 */
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-display: swap;
  src: local("Pretendard Black"), url("/comm/view/font/pretendard/Pretendard-Black.woff") format("woff2"), url("/comm/view/font/pretendard/Pretendard-Black.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard ExtraBold"), url("/comm/view/font/pretendard/Pretendard-ExtraBold.woff2") format("woff2"), url("/comm/view/font/pretendard/Pretendard-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"), url("/comm/view/font/pretendard/Pretendard-Bold.woff2") format("woff2"), url("/comm/view/font/pretendard/Pretendard-Bold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"), url("/comm/view/font/pretendard/Pretendard-SemiBold.woff2") format("woff2"), url("/comm/view/font/pretendard/Pretendard-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"), url("/comm/view/font/pretendard/Pretendard-Medium.woff2") format("woff2"), url("/comm/view/font/pretendard/Pretendard-Medium.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), url("/comm/view/font/pretendard/Pretendard-Regular.woff2") format("woff2"), url("/comm/view/font/pretendard/Pretendard-Regular.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-display: swap;
  src: local("Pretendard Light"), url("/comm/view/font/pretendard/Pretendard-Light.woff2") format("woff2"), url("/comm/view/font/pretendard/Pretendard-Light.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-display: swap;
  src: local("Pretendard ExtraLight"), url("/comm/view/font/pretendard/Pretendard-ExtraLight.woff2") format("woff2"), url("/comm/view/font/pretendard/Pretendard-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-display: swap;
  src: local("Pretendard Thin"), url("/comm/view/font/pretendard/Pretendard-Thin.woff2") format("woff2"), url("/comm/view/font/pretendard/Pretendard-Thin.woff") format("woff");
}
/* g마켓 산스 */
@font-face {
  font-family: "GmarketSans";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: local("GmarketSans Light"), url("/comm/view/font/gmarketsans/GmarketSansLight.woff2") format("woff2"), url("/comm/view/font/gmarketsans/GmarketSansLight.woff") format("woff");
}
@font-face {
  font-family: "GmarketSans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local("GmarketSans Medium"), url("/comm/view/font/gmarketsans/GmarketSansMedium.woff2") format("woff2"), url("/comm/view/font/gmarketsans/GmarketSansMedium.woff") format("woff");
}
@font-face {
  font-family: "GmarketSans";
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  src: local("GmarketSans Bold"), url("/comm/view/font/gmarketsans/GmarketSansBold.woff2") format("woff2"), url("/comm/view/font/gmarketsans/GmarketSansBold.woff") format("woff");
}
/* 여기어때 잘난체 */
@font-face {
  font-family: "Jalnan";
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: local("Jalnan"), url("/comm/view/font/etc/Jalnan.woff2") format("woff2"), url("/comm/view/font/etc/Jalnan.woff") format("woff");
}
/* 디폴트 css */
* {
  margin: 0;
  padding: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  box-sizing: border-box;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul, li {
  list-style: none;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

b, strong {
  font-weight: bolder;
  background: transparent;
}

small {
  font-size: 80%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button, input, optgroup, select, textarea {
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button {
  background: transparent;
  border: none;
  cursor: pointer;
}

/* mixin 버튼 모서리깍기*/
.topbottom {
  background: linear-gradient(135deg, transparent 5px, #58a 0) top left, linear-gradient(-135deg, transparent 5px, #58a 0) top right, linear-gradient(-45deg, transparent 5px, #58a 0) bottom right, linear-gradient(45deg, transparent 5px, #58a 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

/********************* 
*       변수지정       * 
**********************/
/********************* 
*      common 요소    * 
**********************/
html, body {
  font-size: 20px;
  color: #333;
  font-family: "Pretendard";
}

body {
  font-size: 1rem;
  overflow-x: hidden;
  width: 100vw;
}

/********************* 
*      개별페이지       * 
**********************/
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 5rem;
  line-height: 5rem;
  padding: 0 3rem;
  display: flex;
  color: #ffffff;
  box-shadow: 0 0 1rem #00000010;
  transition: 0.2s;
}
header h1 span {
  opacity: 0;
}
header h1 path {
  fill: #ffffff;
}
header nav {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header nav ul {
  display: flex;
  gap: 2.5rem;
  margin: 0 auto;
  margin-right: -1.5rem;
}
header nav ul li a {
  padding: 0 1rem;
  font-weight: 600;
}
header nav ul li a.on {
  color: #1540f2;
}
header nav .pub_btn {
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  border-radius: 0.5rem;
  padding: 0 0.6rem;
  height: 2rem;
  line-height: 2rem;
  margin-left: auto;
  padding: 0 1rem;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
header nav.mobile {
  width: 50px;
  height: 50px;
  flex-grow: 0;
  display: none;
}
header nav.mobile .site_map rect {
  fill: #ffffff;
}
header nav.mobile .menu {
  width: 100%;
  height: 100svh;
  background: #00000080;
  position: fixed;
  top: 0;
  right: -100vw;
}
header nav.mobile .menu .close_x {
  color: #ffffff;
  font-size: 1.6rem;
  position: absolute;
  top: 0.5rem;
  right: 1rem;
}
header nav.mobile .menu .inner_box {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #003a9e;
  width: 50vw;
  height: 100svh;
  min-width: 250px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
header nav.mobile .menu .inner_box h2 {
  margin-bottom: 2rem;
  border-bottom: 1px solid #ffffff;
  display: flex;
  justify-content: center;
  padding: 1rem;
  padding-top: 3rem;
}
header nav.mobile .menu .inner_box h2 svg {
  fill: #ffffff;
  width: 100px;
  margin-right: 0.5rem;
}
header nav.mobile .menu .inner_box ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-right: auto;
}
header nav.mobile .menu .inner_box ul li {
  height: 3rem;
  line-height: 3rem;
  text-align: center;
}
header nav.mobile .menu .inner_box .pub_btn {
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  margin-top: auto;
  margin-bottom: 2rem;
  text-align: center;
}
header.on {
  background-color: #ffffff60;
  backdrop-filter: blur(10px);
  color: #333;
  transition: 0.3s;
}
header.on h1 path {
  fill: #1540f2;
}
header.on .pub_btn {
  background-color: transparent;
  border: 1px solid #1540f2;
  color: #1540f2;
  border-radius: 0.5rem;
  padding: 0 0.6rem;
  height: 2rem;
  line-height: 2rem;
  margin-left: auto;
  padding: 0 1rem;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
header.on nav.mobile .site_map rect {
  fill: #333;
}
header.on nav.mobile ul li {
  color: #ffffff;
}
header.on nav.mobile .pub_btn {
  border-color: #ffffff;
  color: #ffffff;
}

footer {
  position: relative;
  z-index: 1;
  width: 100%;
  background-color: #052864;
  color: #ffffff;
}
footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 0.2rem;
  background: linear-gradient(to right, #FF4356 0%, #1540F2 100%);
}
footer .footer_btn_box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  width: 100%;
  box-shadow: 0 0.2rem 0.5rem #00000010;
  background-color: #012D78;
}
footer .footer_btn_box a {
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.9rem 1rem;
  display: inline-block;
}
footer .footer_main_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
footer .footer_main_box select {
  appearance: none;
  width: 13rem;
  margin: 2rem 0 1rem 0;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  color: #fff;
  border: none;
  background: 95% 55%/6% no-repeat url(../images/icon_arrow.svg);
  background-color: #00000050;
}
footer .footer_main_box select::-ms-expand {
  display: none;
}
footer .footer_main_box .footer_info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  width: 50%;
  min-width: 25rem;
  padding-bottom: 1.5rem;
}
footer .footer_main_box .footer_info li {
  font-size: 0.8rem;
  color: #e5eafe;
  display: flex;
  gap: 0.5rem;
  font-weight: 300;
}
footer .footer_main_box .footer_info b {
  color: #ffffff;
  font-weight: 500;
}
footer .footer_main_box .copy {
  font-size: 0.8rem;
  color: #b3bada;
  opacity: 0.8;
  padding: 0.5rem;
}

#sec_banner div.banner {
  margin: 0 auto;
  margin-bottom: 6rem;
  width: 100%;
  border-radius: 1rem;
  height: 23rem;
  overflow: hidden;
  transition: 0.1s;
  padding: 3rem;
  background: 100%/50% no-repeat url(../images/bg_contact.webp);
  background-color: #F0F6F6;
}
#sec_banner div.banner:hover {
  transition: 0.3s;
  background-size: 55%;
  background-position: 100%;
}
#sec_banner div.banner h3 {
  font-size: 1.75rem;
  font-weight: 800;
}
#sec_banner div.banner a {
  font-size: 1rem;
  padding: 1rem;
  color: #fff;
  border-radius: 1rem;
  background-color: #000;
  font-weight: 900;
  display: block;
  width: fit-content;
  margin-top: 3rem;
}
#sec_banner div.banner img {
  display: none;
}

#sec_download {
  width: 100%;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  background: center/cover no-repeat url(../images/bg_download.webp);
  position: relative;
  z-index: 1;
}
#sec_download .inner_box h3 {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.3;
}
#sec_download .inner_box p {
  margin-top: 1rem;
}
#sec_download .inner_box .grid_box {
  display: flex;
  margin-top: 2.5rem;
  gap: 1.5rem;
}
#sec_download .inner_box .grid_box .btn_wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex-shrink: 0;
}
#sec_download .inner_box .grid_box .btn_wrap a {
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  border-radius: 0.5rem;
  padding: 0 0.6rem;
  height: 3.25rem;
  line-height: 3.25rem;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 2rem;
  border-width: 2px;
}
#sec_download .inner_box .grid_box .btn_wrap a:last-child {
  position: relative;
}
#sec_download .inner_box .grid_box .btn_wrap a:last-child ::after {
  content: "준비중";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #000000af;
  border-radius: 0.5rem;
}
#sec_download .inner_box .grid_box .btn_wrap img {
  height: 1.5rem;
}
#sec_download .inner_box .grid_box .qrcode {
  width: 8rem;
  height: 8rem;
  flex-shrink: 0;
}

#account_delete_popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  width: 100vw;
  height: 100vh;
  background-color: #00000050;
  display: none;
  color: #ffffff;
}
#account_delete_popup .inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  background-color: #000;
  color: #444;
  border: 1px solid #fff;
  padding: 2rem;
}
#account_delete_popup h5 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: #ffffff;
}
#account_delete_popup p {
  font-size: 0.85rem;
  color: #efefef;
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
}
#account_delete_popup .p {
  color: #ff0000;
  font-weight: 600;
}
#account_delete_popup .p i {
  color: #ff0000;
}
#account_delete_popup i {
  font-size: 0.7rem;
  margin-right: 0.25rem;
}
#account_delete_popup .btn_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
}
#account_delete_popup a, #account_delete_popup button {
  font-size: 0.85rem;
  color: #ffffff;
}
#account_delete_popup a {
  width: 210px;
  height: 47px;
  border-radius: 0.25rem;
  margin-right: 0.5rem;
  background-color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#account_delete_popup button {
  width: 210px;
  height: 47px;
  border-radius: 0.25rem;
  background-color: #888;
  cursor: pointer;
}

#sec_notice {
  max-width: 1400px;
  margin: auto auto 4rem auto;
}

.notice_list {
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  font-family: sans-serif;
}
.notice_list h1 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.notice_item {
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.notice_header {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  background: #f9f9f9;
  font-weight: bold;
}

.notice_body {
  display: none;
  padding: 15px;
  background: #fff;
  color: #333;
  font-size: 14px;
  line-height: 1.6;
}
.notice_body .contents {
  white-space: pre-line;
  margin: 1rem 0;
}

.notice_item.active .notice_body {
  display: block;
}

#index #sec_main {
  width: 100%;
  height: 100svh;
  overflow: hidden;
  position: relative;
}
#index #sec_main .video_box {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
}
#index #sec_main .video_box video {
  width: 100%;
  min-width: 1920px;
}
#index #sec_main .text_box {
  width: 100%;
  height: 100%;
  color: #ffffff;
  position: relative;
  z-index: 1;
  background-color: #00000050;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-left: 10%;
}
#index #sec_main .text_box h2 {
  font-size: 3rem;
  font-weight: 500;
}
@keyframes typing {
  0%, 29% {
    content: "ㄹ";
  }
  1%, 28% {
    content: "리";
  }
  2%, 27% {
    content: "리ㅇ";
  }
  3%, 26% {
    content: "리우";
  }
  4%, 25% {
    content: "리워";
  }
  5%, 24% {
    content: "리워ㄷ";
  }
  6%, 23% {
    content: "리워드 ";
  }
  7%, 22% {
    content: "리워드 ㅇ";
  }
  8%, 21% {
    content: "리워드 애";
  }
  9%, 20% {
    content: "리워드 앱";
  }
  10%, 19% {
    content: "리워드 앱ㅌ";
  }
  11%, 18% {
    content: "리워드 앱태";
  }
  12%, 17% {
    content: "리워드 앱태ㅋ";
  }
  13%, 16% {
    content: "리워드 앱태크";
  }
  30%, 96% {
    content: "";
  }
  33%, 96% {
    content: "";
  }
  34%, 95% {
    content: "1";
  }
  35%, 94% {
    content: "1ㅊ";
  }
  36%, 93% {
    content: "1처";
  }
  37%, 92% {
    content: "1천 ";
  }
  38%, 91% {
    content: "1천 1";
  }
  39%, 90% {
    content: "1천 1ㅂ";
  }
  40%, 89% {
    content: "1천 1배";
  }
  41%, 88% {
    content: "1천 1백";
  }
  42%, 87% {
    content: "1천 1백ㅁ";
  }
  43%, 86% {
    content: "1천 1백마";
  }
  44%, 85% {
    content: "1천 1백만 ";
  }
  45%, 84% {
    content: "1천 1백만 ㄹ";
  }
  46%, 83% {
    content: "1천 1백만 리";
  }
  47%, 82% {
    content: "1천 1백만 리ㅇ";
  }
  48%, 81% {
    content: "1천 1백만 리우";
  }
  49%, 80% {
    content: "1천 1백만 리워";
  }
  50%, 79% {
    content: "1천 1백만 리워ㄷ";
  }
  51%, 78% {
    content: "1천 1백만 리워드";
  }
  52%, 77% {
    content: "1천 1백만 리워드 ㄷ";
  }
  53%, 76% {
    content: "1천 1백만 리워드 다";
  }
  54%, 75% {
    content: "1천 1백만 리워드 당";
  }
  55%, 74% {
    content: "1천 1백만 리워드 당ㅊ";
  }
  56%, 73% {
    content: "1천 1백만 리워드 당처";
  }
  57%, 72% {
    content: "1천 1백만 리워드 당첨 ";
  }
  58%, 71% {
    content: "1천 1백만 리워드 당첨 ㅎ";
  }
  59%, 70% {
    content: "1천 1백만 리워드 당첨 해";
  }
  60%, 69% {
    content: "1천 1백만 리워드 당첨 행";
  }
  61%, 68% {
    content: "1천 1백만 리워드 당첨 행ㅇ";
  }
  62%, 67% {
    content: "1천 1백만 리워드 당첨 행우";
  }
  63%, 66% {
    content: "1천 1백만 리워드 당첨 행운";
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
#index #sec_main .text_box .typewriter {
  --caret: currentcolor;
}
#index #sec_main .text_box .typewriter::before {
  content: "";
  animation: typing 15s infinite;
}
#index #sec_main .text_box .typewriter::after {
  content: "";
  border-right: 1px solid var(--caret);
  animation: blink 0.5s linear infinite;
}
#index #sec_sub {
  width: 100%;
  height: 100svh;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#index #sec_sub .inner_box {
  background-color: #ffffff;
  border-radius: 1rem;
  text-align: center;
  padding: 2rem 6rem 3rem 6rem;
}
#index #sec_sub .inner_box h3 {
  margin: 0.5rem auto 2.5rem auto;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.4;
}
#index #sec_sub .inner_box .btn_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
#index #sec_sub .inner_box .btn_wrap a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222222;
  color: #ffffff;
  border-radius: 0.5rem;
  padding: 0 0.6rem;
  height: 3rem;
  line-height: 3rem;
  width: 11rem;
}
#index #sec_sub .inner_box .btn_wrap a img {
  height: 1.25rem;
  margin-right: 0.5rem;
}
#index #sec_sub .svg_list_box {
  width: 100%;
  border-bottom: 5px solid #222222;
}
#index #sec_sub .svg_list_box ul {
  display: flex;
  justify-content: space-around;
  margin-top: 5rem;
}
#index #sec_contents {
  width: 100%;
  background-color: #ffffff;
  position: relative;
  background: 100% 0%/50% no-repeat url(../images/bg_service.webp);
}
#index #sec_contents .bg_svg {
  position: sticky;
  top: 5rem;
  width: 100%;
  height: 50%;
}
#index #sec_contents .bg_svg svg {
  position: absolute;
  right: 1rem;
  width: 800px;
  top: 1rem;
  display: none;
}
#index #sec_contents .bg_svg img {
  width: 100%;
}
#index #sec_contents .title {
  padding-top: 10rem;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}
#index #sec_contents .title h3 {
  font-size: 2.5rem;
  font-weight: 900;
}
#index #sec_contents .title b {
  color: #1540f2;
}
#index #sec_contents .service_box {
  width: 100%;
  margin: 0 auto;
  display: flex;
  gap: 8rem;
  position: relative;
  z-index: 1;
  padding-bottom: 10rem;
}
#index #sec_contents .service_box ul {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  flex: 1;
  flex-shrink: 0;
  width: calc(40% - 4rem);
}
#index #sec_contents .service_box ul li {
  width: 100%;
  height: auto;
  padding: 3rem;
  padding-bottom: 5rem;
  background-color: #ffffff50;
  backdrop-filter: blur(10px);
  border: 2px solid #efefef;
  border-radius: 1rem;
}
#index #sec_contents .service_box ul li .img_box {
  background-color: #efefef;
  border-radius: 0.75rem;
  height: 30rem;
}
#index #sec_contents .service_box ul li img {
  height: 95%;
  overflow: hidden;
  object-fit: contain;
}
#index #sec_contents .service_box ul:nth-child(1) li:nth-of-type(1) .img_box {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#index #sec_contents .service_box ul:nth-child(1) li:nth-of-type(2) .img_box {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1rem;
}
#index #sec_contents .service_box ul:nth-child(1) li:nth-of-type(2) .img_box img {
  height: 90%;
}
#index #sec_contents .service_box ul:nth-child(2) {
  margin-top: 27.5rem;
}
#index #sec_contents .service_box ul:nth-child(2) li:nth-of-type(1) .img_box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 1.5rem;
}
#index #sec_contents .service_box ul:nth-child(2) li:nth-of-type(2) .img_box {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1rem;
  padding-right: 1rem;
}
#index #sec_contents .service_box ul:nth-child(2) li:nth-of-type(2) .img_box img {
  height: 90%;
}
#index #sec_contents .service_box .text_box h3 {
  margin-top: 4rem;
  font-size: 1.65rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #222222;
}
#index #sec_contents .service_box .text_box p {
  line-height: 140%;
  color: #777777;
  font-size: 1rem;
}
#index #sec_contents .service_box .text_box a {
  display: block;
  margin-top: 3rem;
  border-radius: 0.5rem;
  background-color: #1540f2;
  color: #ffffff;
  background: linear-gradient(to right, #FF4356 0%, #1540F2 100%);
  background-size: 300% 100%;
  background-position-x: 100%;
  padding: 1rem 1.5rem;
  width: fit-content;
  font-size: 0.9rem;
}
#index #sec_contents .service_box .text_box a:hover {
  transition: 0.3s;
  background-size: 200%;
  background-position-x: 25%;
  font-weight: 600;
}

#subpages {
  /* 섭페이지 개별 */
}
#subpages header {
  background-color: #ffffff;
  color: #333;
  transition: 0.3s;
}
#subpages header h1 path {
  fill: #1540f2;
}
#subpages header .pub_btn {
  border-color: #1540f2;
  color: #1540f2;
}
#subpages header nav.mobile .site_map rect {
  fill: #333;
}
#subpages header nav.mobile ul li {
  color: #ffffff;
}
#subpages header nav.mobile .pub_btn {
  border-color: #ffffff;
  color: #ffffff;
}
#subpages #sec_subpages_title {
  padding: 4rem;
  padding-top: 15rem;
  height: 25rem;
  overflow: hidden;
  background: center/cover no-repeat url(../images/bg_sub_title.webp);
}
#subpages #sec_subpages_title .text_box {
  margin: 0 auto;
}
#subpages #sec_subpages_title h2 {
  font-size: 3rem;
  line-height: 1;
  font-weight: 900;
  color: #ffffff;
  width: 100%;
}
#subpages #sec_subpages_title h2 span {
  font-size: 1.5rem;
  display: block;
  color: #b3bada;
}
#subpages #sec_subpages_title h2:after {
  content: "";
  display: block;
  margin: 1rem 0;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
}
#subpages #sec_subpages_title p {
  text-align: right;
  color: #ffffff;
}
#subpages #sec_contents_sub {
  width: 100%;
  background-color: #ffffff;
  position: relative;
}
#subpages #sec_contents_sub h3 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 10rem;
}
#subpages #sec_contents_sub h3 span {
  color: #1540f2;
  font-size: 1.25rem;
  display: block;
}
#subpages #sec_contents_sub .service_box {
  width: 100%;
  margin: 4rem auto;
  margin-bottom: 6rem;
  display: grid;
  gap: 5rem;
  grid-template-columns: 1fr 1fr;
  background-color: #f8f8f8;
  border-radius: 1rem;
  padding: 3rem;
}
#subpages #sec_contents_sub .service_box .img_box {
  grid-column: 1/span 2;
  border-radius: 0.75rem;
  height: 100%;
  background-color: #efefef;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#subpages #sec_contents_sub .service_box .img_box img {
  width: 100%;
}
#subpages #sec_contents_sub .service_box .img_box .mobile {
  display: none;
}
#subpages #sec_contents_sub .service_box .title_box h4 {
  font-size: 1.65rem;
  background: linear-gradient(to right, #FF4356 0%, #1540F2 100%);
  width: fit-content;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  background-size: 100%;
}
#subpages #sec_contents_sub .service_box .title_box p {
  line-height: 140%;
  color: #555555;
  margin-top: 1rem;
}
#subpages #sec_contents_sub .service_box .title_box span {
  font-size: 0.85rem;
}
#subpages #sec_contents_sub .service_box .sub_box {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
#subpages #sec_contents_sub .service_box .sub_box h5 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
#subpages #sec_contents_sub .service_box .sub_box .stap {
  display: grid;
  grid-template-columns: 1.5rem auto;
  gap: 0 1rem;
  border-bottom: 1px solid #cdcdcd;
  padding-bottom: 3rem;
}
#subpages #sec_contents_sub .service_box .sub_box .stap:last-child {
  border: none;
}
#subpages #sec_contents_sub .service_box .sub_box .stap p {
  color: #555555;
  line-height: 140%;
}
#subpages #sec_contents_sub .service_box .sub_box .stap span {
  display: block;
  color: #777777;
  font-size: 0.85rem;
}
#subpages #sec_contents_sub .service_box .sub_box .stap::before {
  content: "";
  grid-row: 1/4;
}
#subpages #sec_contents_sub .service_box .sub_box .progress {
  padding-bottom: 4rem;
}
#subpages #sec_contents_sub .service_box .sub_box .progress ul {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
#subpages #sec_contents_sub .service_box .sub_box .progress ul:before {
  content: "";
  position: absolute;
  left: calc(1rem - 1px);
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #b3bada;
}
#subpages #sec_contents_sub .service_box .sub_box .progress ul li {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #6A7399;
  font-weight: 600;
}
#subpages #sec_contents_sub .service_box .sub_box .progress ul li::before {
  content: "";
  vertical-align: middle;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #b3bada;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
#subpages #sec_contents_sub .service_box .sub_box .progress ul li:first-child::before {
  content: "1";
}
#subpages #sec_contents_sub .service_box .sub_box .progress ul li:nth-child(2)::before {
  content: "2";
}
#subpages #sec_contents_sub .service_box .sub_box .progress ul li:nth-child(3)::before {
  content: "3";
}
#subpages #sec_contents_sub .service_box .sub_box .progress ul li:nth-child(4)::before {
  content: "4";
}
#subpages #sec_progress_img {
  padding: 5rem;
  padding-top: 7rem;
  width: 100vw;
  overflow: hidden;
}
#subpages #sec_progress_img h3 {
  position: relative;
  margin: 0 auto;
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
  color: #333;
  width: 100%;
}
#subpages #sec_progress_img h3 span {
  font-size: 1.5rem;
  display: block;
  color: #b3bada;
}
#subpages #sec_progress_img h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  margin: 1rem;
  width: 0%;
  height: 2px;
  background-color: #1540f2;
}
#subpages #sec_progress_img h3.on::after {
  width: 100%;
  transition: 0.7s;
}
#subpages #sec_progress_img .slides {
  width: 100vw;
  margin: 0 auto;
  margin-top: 2rem;
  margin-bottom: 7rem;
}
#subpages #sec_progress_img .slides ul {
  display: flex;
  position: relative;
}
#subpages #sec_progress_img .slides li {
  width: 33rem;
  height: 30rem;
  flex-shrink: 0;
}
#subpages #sec_progress_img .slides li div {
  width: 28rem;
  height: 100%;
  background-color: #f8f8f8;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#subpages #sec_progress_img .slides li div img {
  width: 48%;
}
#subpages #sec_publishers {
  background: 130% top/contain no-repeat url(../images/bg_contact.webp);
  background-color: #F0F6F6;
}
#subpages #sec_publishers .inner_box {
  height: 100svh;
  width: 100%;
  padding-top: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1600px;
  margin: 0 auto;
}
#subpages #sec_publishers h3 {
  font-size: 2.75rem;
  font-weight: 700;
}
#subpages #sec_publishers p {
  line-height: 1.5;
  margin-top: 1rem;
  font-size: 1.15rem;
}
#subpages #sec_publishers a {
  display: block;
  width: fit-content;
  background-color: #1540f2;
  color: #ffffff;
  padding: 1rem 2rem;
  border-radius: 4rem;
  box-shadow: 0 2px 5px #00000030;
  margin-top: 3rem;
  font-weight: 600;
}
#subpages .contents#issuance #sec_subpages_title {
  background: center/cover no-repeat url(../images/bg_sub_title_issuance.webp);
}
#subpages .contents#issuance #sec_contents_sub .service_box .sub_box .stap:first-child::before {
  padding-top: 0.2rem;
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 43 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.667 27.6673V25.1006' stroke='%231540F2' stroke-width='4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27.667 19.9666V17.3999' stroke='%231540F2' stroke-width='4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27.667 12.2664V9.69971' stroke='%231540F2' stroke-width='4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27.667 4.56673V2' stroke='%231540F2' stroke-width='4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M40.5002 9.70004C37.6672 9.70004 35.3668 12.0004 35.3668 14.8334C35.3668 17.6665 37.6672 19.9668 40.5002 19.9668V22.957C40.5002 26.0093 38.8428 27.6668 35.7903 27.6668H6.70988C3.65742 27.6668 2 26.0094 2 22.957V19.9668C4.83296 19.9668 7.13338 17.6665 7.13338 14.8334C7.13338 12.0004 4.83296 9.70004 2 9.70004V6.70988C2 3.65751 3.65742 2 6.70988 2H35.7903C38.8428 2 40.5002 3.65743 40.5002 6.70988V9.70004Z' stroke='%231540F2' stroke-width='4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
#subpages .contents#issuance #sec_contents_sub .service_box .sub_box .stap:nth-child(2)::before {
  padding: 0 0.1rem;
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 34 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.547 4.91887L23.7254 8.53057H19.547V4.91887ZM27.6242 30.6617C26.7704 30.6617 26.0753 31.3493 26.0753 32.2031V33.9409H3.09035V3.08279H16.4567V10.0644C16.4567 10.9182 17.1518 11.6058 18.0056 11.6058H26.0828V20.8542C26.0828 21.708 26.778 22.3956 27.6318 22.3956C28.4856 22.3956 29.1807 21.708 29.1807 20.8542V9.85285C29.1807 9.40705 28.9843 8.97637 28.6443 8.68924L19.0181 0.377793C18.7385 0.136006 18.3759 0 18.0056 0H1.54895C0.695139 0 0 0.687584 0 1.5414V35.4823C0 36.3361 0.695139 37.0237 1.54895 37.0237H27.6318C28.4856 37.0237 29.1807 36.3361 29.1807 35.4823V32.2031C29.1732 31.3493 28.4781 30.6617 27.6242 30.6617Z' fill='%231540F2'/%3E%3Cpath d='M20.7562 14.1978H8.51575C7.66194 14.1978 6.9668 14.8853 6.9668 15.7392C6.9668 16.593 7.66194 17.2805 8.51575 17.2805H20.7638C21.6176 17.2805 22.3128 16.593 22.3128 15.7392C22.3128 14.8853 21.6101 14.1978 20.7562 14.1978Z' fill='%231540F2'/%3E%3Cpath d='M20.7562 21.7915H8.51575C7.66194 21.7915 6.9668 22.4791 6.9668 23.3329C6.9668 24.1867 7.66194 24.8743 8.51575 24.8743H20.7638C21.6176 24.8743 22.3128 24.1867 22.3128 23.3329C22.3052 22.4866 21.6101 21.7915 20.7562 21.7915Z' fill='%231540F2'/%3E%3Cpath d='M33.9937 23.1589C33.9181 22.3126 33.1625 21.6855 32.3163 21.7611C28.8255 22.0708 25.5084 25.8866 23.8008 28.2062L22.7959 27.0653C22.2292 26.423 21.2545 26.3626 20.6122 26.9293C19.97 27.496 19.9095 28.4707 20.4762 29.1054L22.7959 31.7348C23.7026 32.6339 24.7 32.4677 25.2666 31.5308C26.2791 29.8609 29.8531 25.0781 32.5883 24.8363C33.4421 24.7532 34.0692 24.0051 33.9937 23.1589Z' fill='%231540F2'/%3E%3C/svg%3E%0A");
}
#subpages .contents#issuance #sec_contents_sub .service_box .sub_box .stap:last-child::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.5086 11.9911C22.0211 11.503 21.2286 11.503 20.7411 11.9911L15.3748 17.3567L13.1336 15.1161C12.6461 14.628 11.8536 14.628 11.3661 15.1161C10.878 15.6042 10.878 16.3955 11.3661 16.8836L14.4911 20.0086C14.7348 20.253 15.0548 20.3748 15.3748 20.3748C15.6948 20.3748 16.0148 20.253 16.2586 20.0086L22.5086 13.7586C22.9967 13.2705 22.9967 12.4792 22.5086 11.9911Z' fill='%231540F2' stroke='%231540F2' stroke-width='2'/%3E%3Cpath d='M29.75 14.75C29.06 14.75 28.5 15.31 28.5 16C28.5 22.8925 22.8925 28.5 16 28.5C9.1075 28.5 3.5 22.8925 3.5 16C3.5 9.1075 9.1075 3.5 16 3.5C19.3556 3.5 22.5056 4.81125 24.8706 7.1925C25.3563 7.68313 26.1481 7.68563 26.6381 7.19875C27.1281 6.7125 27.1306 5.92125 26.6444 5.43125C23.8069 2.57375 20.0262 1 16 1C7.72875 1 1 7.72875 1 16C1 24.2713 7.72875 31 16 31C24.2713 31 31 24.2713 31 16C31 15.31 30.44 14.75 29.75 14.75Z' fill='%231540F2' stroke='%231540F2' stroke-width='1'/%3E%3C/svg%3E%0A");
}
#subpages .contents#present #sec_subpages_title {
  background: center/cover no-repeat url(../images/bg_sub_title_present.webp);
}
#subpages .contents#together #sec_subpages_title {
  background: center/cover no-repeat url(../images/bg_sub_title_together.webp);
}
#subpages .contents#exchange #sec_subpages_title {
  background: center/cover no-repeat url(../images/bg_sub_title_exchange.webp);
}
#subpages .contents#exchange #sec_contents_sub .service_box .sub_box .stap:first-child::before {
  padding: 0 0.15rem;
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.5455 11.4286H26.1818V10C26.1818 4.48591 21.6143 0 16 0C10.3857 0 5.81818 4.48591 5.81818 10V11.4286H1.45455C0.651278 11.4286 0 12.0682 0 12.8571V35.7143C0 38.0776 1.95739 40 4.36364 40H27.6364C30.0426 40 32 38.0776 32 35.7143V12.8571C32 12.0682 31.3487 11.4286 30.5455 11.4286ZM8.72727 10C8.72727 6.06166 11.9901 2.85714 16 2.85714C20.0099 2.85714 23.2727 6.06166 23.2727 10V11.4286H8.72727V10ZM29.0909 35.7143C29.0909 36.5018 28.4382 37.1429 27.6364 37.1429H4.36364C3.56179 37.1429 2.90909 36.5018 2.90909 35.7143V14.2857H5.81818V15.7143C5.81818 16.5032 6.46946 17.1429 7.27273 17.1429C8.07599 17.1429 8.72727 16.5032 8.72727 15.7143V14.2857H23.2727V15.7143C23.2727 16.5032 23.924 17.1429 24.7273 17.1429C25.5305 17.1429 26.1818 16.5032 26.1818 15.7143V14.2857H29.0909V35.7143Z' fill='%231540F2'/%3E%3C/svg%3E%0A");
}
#subpages .contents#exchange #sec_contents_sub .service_box .sub_box .stap:nth-child(2)::before {
  padding: 0 0.15rem;
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 28C10.6492 27.9958 10.3052 27.9029 10 27.73L6 25.42L3 27.15C2.69596 27.3255 2.35107 27.4179 2 27.4179C1.64893 27.4179 1.30404 27.3255 1 27.15C0.700619 26.9772 0.451132 26.7298 0.275872 26.4318C0.100613 26.1339 0.00556529 25.7956 0 25.45V3C0 2.20435 0.316071 1.44129 0.87868 0.87868C1.44129 0.316071 2.20435 0 3 0H19C19.7956 0 20.5587 0.316071 21.1213 0.87868C21.6839 1.44129 22 2.20435 22 3V25.45C21.9944 25.7956 21.8994 26.1339 21.7241 26.4318C21.5489 26.7298 21.2994 26.9772 21 27.15C20.696 27.3255 20.3511 27.4179 20 27.4179C19.6489 27.4179 19.304 27.3255 19 27.15L16 25.42L12 27.73C11.6948 27.9029 11.3508 27.9958 11 28ZM6 23.42C6.35077 23.4242 6.69477 23.5171 7 23.69L11 26L15 23.69C15.304 23.5145 15.6489 23.4221 16 23.4221C16.3511 23.4221 16.696 23.5145 17 23.69L20 25.42V3C20 2.73478 19.8946 2.48043 19.7071 2.29289C19.5196 2.10536 19.2652 2 19 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V25.45L5 23.69C5.30523 23.5171 5.64923 23.4242 6 23.42ZM4 7C4 6.73478 4.10536 6.48043 4.29289 6.29289C4.48043 6.10536 4.73478 6 5 6H17C17.2652 6 17.5196 6.10536 17.7071 6.29289C17.8946 6.48043 18 6.73478 18 7C18 7.26522 17.8946 7.51957 17.7071 7.70711C17.5196 7.89464 17.2652 8 17 8H5C4.73478 8 4.48043 7.89464 4.29289 7.70711C4.10536 7.51957 4 7.26522 4 7ZM17 10H5C4.73478 10 4.48043 10.1054 4.29289 10.2929C4.10536 10.4804 4 10.7348 4 11C4 11.2652 4.10536 11.5196 4.29289 11.7071C4.48043 11.8946 4.73478 12 5 12H17C17.2652 12 17.5196 11.8946 17.7071 11.7071C17.8946 11.5196 18 11.2652 18 11C18 10.7348 17.8946 10.4804 17.7071 10.2929C17.5196 10.1054 17.2652 10 17 10ZM11 14H5C4.73478 14 4.48043 14.1054 4.29289 14.2929C4.10536 14.4804 4 14.7348 4 15C4 15.2652 4.10536 15.5196 4.29289 15.7071C4.48043 15.8946 4.73478 16 5 16H11C11.2652 16 11.5196 15.8946 11.7071 15.7071C11.8946 15.5196 12 15.2652 12 15C12 14.7348 11.8946 14.4804 11.7071 14.2929C11.5196 14.1054 11.2652 14 11 14Z' fill='%231540F2'/%3E%3C/svg%3E%0A");
}
#subpages .contents#exchange #sec_contents_sub .service_box .sub_box .stap:last-child::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.1111 5.43189V4.56332C24.1111 -0.187775 5.33334 -0.187775 5.33334 4.56332V13.9722C5.33334 14.6492 5.72043 15.2537 6.4464 15.7745C3.38232 16.2619 1 17.3477 1 19.0386V23.3812C1 25.7567 5.72334 27 10.3889 27C15.0545 27 19.7778 25.7567 19.7778 23.3812V20.2649C21.4817 20.8616 23.8066 21.2099 26.2779 21.2099C30.9434 21.2099 35.6668 19.9667 35.6668 17.5911V8.90587C35.6667 6.16158 29.4037 5.00587 24.1111 5.43189ZM14.7223 2.44439C19.8625 2.44439 22.6667 3.87541 22.6667 4.61106C22.6667 5.34671 19.8624 6.77773 14.7223 6.77773C9.58211 6.77773 6.77783 5.34671 6.77783 4.61106C6.77776 3.87547 9.58204 2.44439 14.7223 2.44439ZM6.77776 6.62085C8.53026 7.67561 11.6345 8.22222 14.7222 8.22222C15.5216 8.22222 16.3212 8.18308 17.0999 8.11077C16.9623 8.37016 16.8889 8.64804 16.8889 8.94447V11.004C16.1728 11.0685 15.4488 11.1111 14.7222 11.1111C9.58197 11.1111 6.77776 9.68012 6.77776 8.94447V6.62085ZM6.77776 10.9542C8.53026 12.0089 11.6345 12.5556 14.7222 12.5556C15.4482 12.5556 16.1716 12.5143 16.8889 12.4535V16.4056C14.8543 15.7104 12.0223 15.4174 9.30924 15.5234L9.31398 15.5065C7.45342 14.9797 6.77776 14.3167 6.77776 14V10.9542ZM18.3334 23.3889C18.3334 24.1246 15.5291 25.5556 10.3889 25.5556C5.24877 25.5556 2.44449 24.1246 2.44449 23.3889V21.0653C4.19692 22.1201 7.30122 22.6667 10.3889 22.6667C13.4766 22.6667 16.5809 22.1201 18.3334 21.0653V23.3889ZM10.3889 21.2222C5.2487 21.2222 2.44449 19.7912 2.44449 19.0556C2.44449 18.3199 5.24877 16.8889 10.3889 16.8889C15.5291 16.8889 18.3334 18.3199 18.3334 19.0556C18.3334 19.7912 15.5291 21.2222 10.3889 21.2222ZM34.2223 17.591C34.2223 18.3282 31.418 19.7623 26.2779 19.7623C23.6749 19.7623 21.2808 19.3665 19.7355 18.6996C19.6051 18.0447 19.0997 17.4907 18.3334 17.0355V15.2625C20.0859 16.3195 23.1901 16.8672 26.2779 16.8672C29.3656 16.8672 32.4699 16.3195 34.2223 15.2625V17.591ZM34.2223 13.2485C34.2223 13.9857 31.418 15.4198 26.2779 15.4198C21.1377 15.4198 18.3334 13.9857 18.3334 13.2485V10.9199C20.0859 11.9769 23.1901 12.5248 26.2778 12.5248C29.3655 12.5248 32.4698 11.977 34.2222 10.9199V13.2485H34.2223ZM26.2778 11.0772C21.1376 11.0772 18.3334 9.64308 18.3334 8.90594C18.3334 8.16873 21.1376 6.73467 26.2778 6.73467C31.4179 6.73467 34.2222 8.1688 34.2222 8.90594C34.2222 9.64308 31.418 11.0772 26.2778 11.0772Z' fill='%231540F2' stroke='%231540F2' stroke-width='0.5'/%3E%3C/svg%3E%0A");
}

/* 반응형 */
@media (min-width: 335px) and (max-width: 534px) {
  html, body {
    font-size: 16px;
  }

  body {
    font-size: 1rem;
  }

  #sec_banner div.banner, #index #sec_contents .title,
#index #sec_contents .service_box, #subpages #sec_subpages_title .text_box,
#subpages #sec_contents_sub .service_box, #subpages #sec_progress_img h3,
#subpages #sec_progress_img .slides,
#subpages #sec_publishers .inner_box {
    max-width: 85%;
  }

  #index #sec_contents {
    background: 100% 0%/70% no-repeat url(../images/bg_service.webp);
  }
  #index #sec_contents .title {
    padding-top: 7rem;
  }
  #index #sec_contents .title h3 {
    font-size: 2rem;
  }
  #index #sec_contents .service_box {
    gap: 2rem;
    padding-bottom: 3rem;
    flex-direction: column;
  }
  #index #sec_contents .service_box ul {
    gap: 2rem;
    width: 100%;
  }
  #index #sec_contents .service_box ul li {
    padding: 2rem;
  }
  #index #sec_contents .service_box ul li .img_box {
    height: 16rem;
  }
  #index #sec_contents .service_box ul:nth-child(2) {
    margin-top: 0;
  }
  #index #sec_contents .service_box .text_box h3 {
    margin-top: 2rem;
  }
  #index #sec_contents .service_box .text_box p {
    font-size: 1.1rem;
  }

  #index #sec_main .text_box {
    white-space: pre;
  }
  @keyframes typing {
    0%, 29% {
      content: "ㄹ";
    }
    1%, 28% {
      content: "리";
    }
    2%, 27% {
      content: "리ㅇ";
    }
    3%, 26% {
      content: "리우";
    }
    4%, 25% {
      content: "리워";
    }
    5%, 24% {
      content: "리워ㄷ";
    }
    6%, 23% {
      content: "리워드 ";
    }
    7%, 22% {
      content: "리워드 ㅇ";
    }
    8%, 21% {
      content: "리워드 애";
    }
    9%, 20% {
      content: "리워드 앱";
    }
    10%, 19% {
      content: "리워드 앱ㅌ";
    }
    11%, 18% {
      content: "리워드 앱태";
    }
    12%, 17% {
      content: "리워드 앱태ㅋ";
    }
    13%, 16% {
      content: "리워드 앱태크";
    }
    30%, 96% {
      content: "";
    }
    33%, 96% {
      content: "";
    }
    34%, 95% {
      content: "1";
    }
    35%, 94% {
      content: "1ㅊ";
    }
    36%, 93% {
      content: "1처";
    }
    37%, 92% {
      content: "1천 ";
    }
    38%, 91% {
      content: "1천 1";
    }
    39%, 90% {
      content: "1천 1ㅂ";
    }
    40%, 89% {
      content: "1천 1배";
    }
    41%, 88% {
      content: "1천 1백";
    }
    42%, 87% {
      content: "1천 1백ㅁ";
    }
    43%, 86% {
      content: "1천 1백마";
    }
    44%, 85% {
      content: "1천 1백만 ";
    }
    45%, 84% {
      content: "1천 1백만 ㄹ";
    }
    46%, 83% {
      content: "1천 1백만 리";
    }
    47%, 82% {
      content: "1천 1백만 리ㅇ";
    }
    48%, 81% {
      content: "1천 1백만 리우";
    }
    49%, 80% {
      content: "1천 1백만 리워";
    }
    50%, 79% {
      content: "1천 1백만 리워ㄷ";
    }
    51%, 78% {
      content: "1천 1백만 리워드";
    }
    52%, 77% {
      content: "1천 1백만 리워드 \aㄷ";
    }
    53%, 76% {
      content: "1천 1백만 리워드 \a다";
    }
    54%, 75% {
      content: "1천 1백만 리워드 \a당";
    }
    55%, 74% {
      content: "1천 1백만 리워드 \a당ㅊ";
    }
    56%, 73% {
      content: "1천 1백만 리워드 \a당처";
    }
    57%, 72% {
      content: "1천 1백만 리워드 \a당첨 ";
    }
    58%, 71% {
      content: "1천 1백만 리워드 \a당첨 ㅎ";
    }
    59%, 70% {
      content: "1천 1백만 리워드 \a당첨 해";
    }
    60%, 69% {
      content: "1천 1백만 리워드 \a당첨 행";
    }
    61%, 68% {
      content: "1천 1백만 리워드 \a당첨 행ㅇ";
    }
    62%, 67% {
      content: "1천 1백만 리워드 \a당첨 행우";
    }
    63%, 66% {
      content: "1천 1백만 리워드 \a당첨 행운";
    }
  }
  #index #sec_main .text_box svg {
    width: 100px;
  }
  #index #sec_main .text_box h2 {
    font-size: 2.5rem;
  }

  #index #sec_sub {
    height: auto;
    padding: 0;
  }
  #index #sec_sub .inner_box {
    padding: 6rem 4rem 7rem 4rem;
    background-color: #f8f8f8;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    border-radius: 0;
  }
  #index #sec_sub .inner_box > img {
    width: 80px;
    height: 80px;
  }
  #index #sec_sub .inner_box h3 {
    font-size: 1.6rem;
  }
  #index #sec_sub .inner_box h3 span {
    display: block;
  }
  #index #sec_sub .inner_box .btn_wrap {
    flex-direction: column;
  }
  #index #sec_sub .inner_box .btn_wrap a {
    width: 100%;
    height: 3.5rem;
    line-height: 3.5rem;
    border-radius: 4rem;
    font-weight: 700;
    font-size: 1.1rem;
  }

  #sec_banner div.banner {
    height: auto;
    background: #f0f6f6;
    padding: 2rem;
    margin-bottom: 4rem;
  }
  #sec_banner div.banner img {
    display: block;
    width: 60%;
    margin: 0 auto;
    margin-bottom: 2rem;
  }
  #sec_banner div.banner h3 {
    font-size: 1.75rem;
    padding-bottom: 1rem;
    text-align: center;
  }
  #sec_banner div.banner h3 span {
    display: block;
  }
  #sec_banner div.banner a {
    width: 100%;
    margin-top: 1rem;
    text-align: center;
    font-size: 1rem;
  }

  #sec_download {
    height: auto;
    padding: 6rem 0;
  }
  #sec_download .inner_box {
    margin: 0 auto;
  }
  #sec_download .inner_box p {
    margin-top: 0;
  }
  #sec_download .inner_box svg {
    width: 80px;
    height: 80px;
  }
  #sec_download .inner_box .grid_box {
    align-items: center;
    flex-direction: column;
  }
  #sec_download .inner_box .grid_box .btn_wrap {
    gap: 1rem;
  }
  #sec_download .inner_box .grid_box .btn_wrap a {
    width: 12rem;
    padding: 0;
  }
  #sec_download .inner_box .grid_box .qrcode {
    width: 12rem;
    height: 12rem;
  }

  footer .footer_btn_box {
    gap: 4.5%;
  }
  footer .footer_btn_box a {
    padding: 0.9rem 0.5rem;
    font-size: 0.85rem;
  }
  footer .footer_main_box .footer_info {
    width: 90%;
    min-width: 90%;
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    height: 4rem;
    line-height: 4rem;
  }

  header nav.pc {
    display: none;
  }

  header nav.mobile {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  header nav.mobile .site_map {
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  header nav.mobile .site_map svg {
    width: 32px;
    height: 32px;
  }

  header h1 a {
    display: block;
    display: flex;
    align-items: center;
  }

  header h1 svg {
    width: 100px;
  }

  #subpages #sec_subpages_title {
    height: auto;
    padding: 0;
    padding-top: 10rem;
    padding-bottom: 3rem;
  }

  #subpages #sec_subpages_title h2 {
    font-weight: bold;
  }

  #subpages #sec_subpages_title h2:after {
    margin: 0.5rem 0;
  }

  #subpages #sec_subpages_title p {
    font-size: 0.9rem;
  }

  #subpages #sec_contents_sub h3 {
    margin-top: 0;
    font-size: 2rem;
  }

  #subpages #sec_contents_sub {
    background-color: #f8f8f8;
    padding-top: 6rem;
  }

  #subpages #sec_contents_sub .service_box {
    gap: 3rem;
    margin: 3rem auto;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    padding: 0;
    padding-bottom: 3rem;
  }

  #subpages #sec_contents_sub .service_box .title_box {
    margin-bottom: 3rem;
  }

  #subpages #sec_contents_sub .service_box .sub_box {
    gap: 0rem;
  }

  #subpages #sec_contents_sub .service_box .sub_box .stap {
    padding-bottom: 2rem;
    border-bottom: none;
    border-top: 1px solid #cdcdcd;
    padding-top: 2rem;
  }

  #subpages #sec_contents_sub .service_box .sub_box .stap:last-child {
    border-top: 1px solid #cdcdcd;
  }

  #subpages #sec_contents_sub .service_box .img_box .pc {
    display: none;
  }
  #subpages #sec_contents_sub .service_box .img_box .mobile {
    display: block;
  }

  #subpages #sec_progress_img {
    padding: 0;
    padding-top: 0rem;
  }

  #subpages #sec_progress_img h3 {
    font-size: 1.5rem;
  }

  #subpages #sec_progress_img h3:after {
    height: 1px;
  }

  #subpages #sec_progress_img .slides {
    margin-bottom: 6rem;
  }

  #subpages #sec_progress_img .slides li {
    width: 15rem;
    height: auto;
  }

  #subpages #sec_progress_img .slides li div {
    width: 13rem;
    padding: 2rem 0;
  }

  #subpages #sec_progress_img .slides li div img {
    width: 70%;
  }

  #subpages #sec_publishers {
    background: center/cover no-repeat url(../images/bg_contact_2.webp);
    height: fit-content;
    overflow: hidden;
    position: relative;
  }
  #subpages #sec_publishers::after {
    content: "";
    background-color: #00000080;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
  }
  #subpages #sec_publishers .inner_box {
    position: relative;
    z-index: 1;
    height: 100vsh;
    padding: 15rem 0 10rem 0;
    color: #ffffff;
    text-align: center;
  }
  #subpages #sec_publishers h3 {
    font-size: 2rem;
    line-height: 1.4;
  }
  #subpages #sec_publishers p {
    font-size: 1rem;
    line-height: 1.6;
  }
  #subpages #sec_publishers a {
    margin: 0 auto;
    margin-top: 3rem;
  }
  #subpages #sec_publishers span {
    display: block;
  }
}
@media (min-width: 535px) and (max-width: 719px) {
  html, body {
    font-size: 16px;
  }

  body {
    font-size: 1rem;
  }

  #sec_banner div.banner, #index #sec_contents .title,
#index #sec_contents .service_box, #subpages #sec_subpages_title .text_box,
#subpages #sec_contents_sub .service_box, #subpages #sec_progress_img h3,
#subpages #sec_progress_img .slides,
#subpages #sec_publishers .inner_box {
    max-width: 80%;
  }

  #index #sec_contents .service_box {
    gap: 4rem;
    padding-bottom: 6rem;
    flex-direction: column;
  }
  #index #sec_contents .service_box ul {
    gap: 4rem;
    width: 100%;
  }
  #index #sec_contents .service_box ul li {
    padding: 3rem;
  }
  #index #sec_contents .service_box ul li .img_box {
    height: 20rem;
  }
  #index #sec_contents .service_box ul:nth-child(2) {
    margin-top: 0;
  }
  #index #sec_contents .service_box .text_box h3 {
    margin-top: 3rem;
  }
  #index #sec_contents .service_box .text_box p {
    font-size: 1.1rem;
  }

  #index #sec_main .text_box {
    white-space: pre;
  }
  @keyframes typing {
    0%, 29% {
      content: "ㄹ";
    }
    1%, 28% {
      content: "리";
    }
    2%, 27% {
      content: "리ㅇ";
    }
    3%, 26% {
      content: "리우";
    }
    4%, 25% {
      content: "리워";
    }
    5%, 24% {
      content: "리워ㄷ";
    }
    6%, 23% {
      content: "리워드 ";
    }
    7%, 22% {
      content: "리워드 ㅇ";
    }
    8%, 21% {
      content: "리워드 애";
    }
    9%, 20% {
      content: "리워드 앱";
    }
    10%, 19% {
      content: "리워드 앱ㅌ";
    }
    11%, 18% {
      content: "리워드 앱태";
    }
    12%, 17% {
      content: "리워드 앱태ㅋ";
    }
    13%, 16% {
      content: "리워드 앱태크";
    }
    30%, 96% {
      content: "";
    }
    33%, 96% {
      content: "";
    }
    34%, 95% {
      content: "1";
    }
    35%, 94% {
      content: "1ㅊ";
    }
    36%, 93% {
      content: "1처";
    }
    37%, 92% {
      content: "1천 ";
    }
    38%, 91% {
      content: "1천 1";
    }
    39%, 90% {
      content: "1천 1ㅂ";
    }
    40%, 89% {
      content: "1천 1배";
    }
    41%, 88% {
      content: "1천 1백";
    }
    42%, 87% {
      content: "1천 1백ㅁ";
    }
    43%, 86% {
      content: "1천 1백마";
    }
    44%, 85% {
      content: "1천 1백만 ";
    }
    45%, 84% {
      content: "1천 1백만 ㄹ";
    }
    46%, 83% {
      content: "1천 1백만 리";
    }
    47%, 82% {
      content: "1천 1백만 리ㅇ";
    }
    48%, 81% {
      content: "1천 1백만 리우";
    }
    49%, 80% {
      content: "1천 1백만 리워";
    }
    50%, 79% {
      content: "1천 1백만 리워ㄷ";
    }
    51%, 78% {
      content: "1천 1백만 리워드";
    }
    52%, 77% {
      content: "1천 1백만 리워드 \aㄷ";
    }
    53%, 76% {
      content: "1천 1백만 리워드 \a다";
    }
    54%, 75% {
      content: "1천 1백만 리워드 \a당";
    }
    55%, 74% {
      content: "1천 1백만 리워드 \a당ㅊ";
    }
    56%, 73% {
      content: "1천 1백만 리워드 \a당처";
    }
    57%, 72% {
      content: "1천 1백만 리워드 \a당첨 ";
    }
    58%, 71% {
      content: "1천 1백만 리워드 \a당첨 ㅎ";
    }
    59%, 70% {
      content: "1천 1백만 리워드 \a당첨 해";
    }
    60%, 69% {
      content: "1천 1백만 리워드 \a당첨 행";
    }
    61%, 68% {
      content: "1천 1백만 리워드 \a당첨 행ㅇ";
    }
    62%, 67% {
      content: "1천 1백만 리워드 \a당첨 행우";
    }
    63%, 66% {
      content: "1천 1백만 리워드 \a당첨 행운";
    }
  }

  #index #sec_sub {
    height: auto;
    padding: 0;
  }
  #index #sec_sub .inner_box {
    padding: 9rem 4rem 8rem 4rem;
    background-color: #f8f8f8;
    width: 100%;
    margin: 0 auto;
    border-radius: 0;
  }
  #index #sec_sub .inner_box > img {
    width: 80px;
    height: 80px;
  }

  #sec_banner div.banner {
    height: auto;
    background: #f0f6f6;
  }

  #sec_download {
    height: auto;
    padding: 8rem 0;
  }
  #sec_download .inner_box {
    margin: 0 auto;
  }

  footer .footer_main_box .footer_info {
    width: 90%;
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10%;
  }

  header nav.pc {
    display: none;
  }

  header nav.mobile {
    display: block;
    width: fit-content;
  }

  header h1 a {
    display: block;
    display: flex;
    align-items: center;
  }

  header h1 svg {
    width: 100px;
  }

  #subpages #sec_subpages_title {
    height: auto;
    padding: 0;
    padding-top: 15rem;
    padding-bottom: 3rem;
  }

  #subpages #sec_contents_sub .service_box {
    gap: 3rem;
    margin: 3rem auto;
    margin-bottom: 6rem;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    padding: 2rem;
  }

  #subpages #sec_contents_sub .service_box .title_box {
    margin-bottom: 3rem;
  }

  #subpages #sec_contents_sub .service_box .sub_box {
    gap: 0rem;
  }

  #subpages #sec_contents_sub .service_box .sub_box .stap {
    padding-bottom: 2rem;
    border-bottom: none;
    border-top: 1px solid #cdcdcd;
    padding-top: 2rem;
  }

  #subpages #sec_contents_sub .service_box .sub_box .stap:last-child {
    border-top: 1px solid #cdcdcd;
  }

  #subpages #sec_contents_sub .service_box .img_box .pc {
    display: none;
  }
  #subpages #sec_contents_sub .service_box .img_box .mobile {
    display: block;
  }

  #subpages #sec_progress_img {
    padding: 0;
    padding-top: 0rem;
  }

  #subpages #sec_progress_img h3 {
    font-size: 1.75rem;
  }

  #subpages #sec_progress_img .slides {
    margin-bottom: 6rem;
  }

  #subpages #sec_progress_img .slides li {
    width: 20rem;
    height: 20rem;
  }

  #subpages #sec_progress_img .slides li div {
    width: 17rem;
  }

  #subpages #sec_publishers {
    background: center/cover no-repeat url(../images/bg_contact_2.webp);
    height: fit-content;
    overflow: hidden;
    position: relative;
  }
  #subpages #sec_publishers::after {
    content: "";
    background-color: #00000080;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
  }
  #subpages #sec_publishers .inner_box {
    position: relative;
    z-index: 1;
    height: 100vsh;
    padding: 15rem 0 10rem 0;
    color: #ffffff;
    text-align: center;
  }
  #subpages #sec_publishers h3 {
    font-size: 2rem;
    line-height: 1.4;
  }
  #subpages #sec_publishers p {
    font-size: 1rem;
    line-height: 1.6;
  }
  #subpages #sec_publishers a {
    margin: 0 auto;
    margin-top: 3rem;
  }
  #subpages #sec_publishers span {
    display: block;
  }
}
@media (min-width: 720px) and (max-width: 959px) {
  html, body {
    font-size: 16px;
  }

  body {
    font-size: 1rem;
  }

  #sec_banner div.banner, #index #sec_contents .title,
#index #sec_contents .service_box, #subpages #sec_subpages_title .text_box,
#subpages #sec_contents_sub .service_box, #subpages #sec_progress_img h3,
#subpages #sec_progress_img .slides,
#subpages #sec_publishers .inner_box {
    max-width: 80%;
  }

  #index #sec_contents .service_box {
    gap: 4rem;
    padding-bottom: 6rem;
    flex-direction: column;
  }
  #index #sec_contents .service_box ul {
    gap: 4rem;
    width: 100%;
  }
  #index #sec_contents .service_box ul li {
    padding: 3rem;
  }
  #index #sec_contents .service_box ul li .img_box {
    height: 20rem;
  }
  #index #sec_contents .service_box ul:nth-child(2) {
    margin-top: 0;
  }
  #index #sec_contents .service_box .text_box h3 {
    margin-top: 3rem;
  }

  #index #sec_sub {
    height: auto;
    padding: 8rem 0;
  }
  #index #sec_sub .inner_box {
    padding: 3rem 4rem 3rem 4rem;
    width: 80%;
    margin: 0 auto;
  }
  #index #sec_sub .inner_box > img {
    width: 80px;
    height: 80px;
  }

  #sec_banner div.banner {
    height: auto;
    background: #f0f6f6;
  }

  #sec_download {
    height: auto;
    padding: 8rem;
  }

  footer .footer_main_box .footer_info {
    width: 90%;
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10%;
  }

  header nav.pc {
    display: none;
  }

  header nav.mobile {
    display: block;
    width: fit-content;
  }

  header h1 a {
    display: block;
    display: flex;
    align-items: center;
  }

  header h1 svg {
    width: 100px;
  }

  #subpages #sec_subpages_title {
    height: auto;
    padding: 0;
    padding-top: 15rem;
    padding-bottom: 3rem;
  }

  #subpages #sec_contents_sub .service_box {
    gap: 3rem;
    margin: 3rem auto;
    margin-bottom: 6rem;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  #subpages #sec_contents_sub .service_box .title_box {
    margin-bottom: 5rem;
  }

  #subpages #sec_contents_sub .service_box .sub_box {
    gap: 0rem;
  }

  #subpages #sec_contents_sub .service_box .sub_box .stap {
    padding-bottom: 3rem;
    border-bottom: none;
    border-top: 1px solid #cdcdcd;
    padding-top: 3rem;
  }

  #subpages #sec_contents_sub .service_box .sub_box .stap:last-child {
    border-top: 1px solid #cdcdcd;
  }

  #subpages #sec_progress_img {
    padding: 0;
    padding-top: 4rem;
  }

  #subpages #sec_progress_img .slides li {
    width: 20rem;
    height: 20rem;
  }

  #subpages #sec_progress_img .slides li div {
    width: 17rem;
  }

  #subpages #sec_publishers {
    background-position: 80% 140%;
    background-size: cover;
    height: fit-content;
    overflow: hidden;
    position: relative;
  }
  #subpages #sec_publishers::after {
    content: "";
    background-color: #00000080;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
  }
  #subpages #sec_publishers .inner_box {
    position: relative;
    z-index: 1;
    height: fit-content;
    padding: 15rem 0 10rem 0;
    color: #ffffff;
    text-align: center;
  }
  #subpages #sec_publishers h3 {
    font-size: 2rem;
  }
  #subpages #sec_publishers p {
    font-size: 1rem;
  }
  #subpages #sec_publishers a {
    margin: 0 auto;
    margin-top: 2rem;
  }
}
@media (min-width: 960px) and (max-width: 1023px) {
  html, body {
    font-size: 17px;
  }

  body {
    font-size: 1rem;
  }

  #sec_banner div.banner, #index #sec_contents .title,
#index #sec_contents .service_box, #subpages #sec_subpages_title .text_box,
#subpages #sec_contents_sub .service_box, #subpages #sec_progress_img h3,
#subpages #sec_progress_img .slides,
#subpages #sec_publishers .inner_box {
    max-width: 90%;
  }

  #index #sec_contents .service_box {
    gap: 4rem;
    padding-bottom: 6rem;
  }
  #index #sec_contents .service_box ul {
    gap: 4rem;
  }
  #index #sec_contents .service_box ul li {
    padding: 2rem;
  }
  #index #sec_contents .service_box ul li .img_box {
    height: 18rem;
  }
  #index #sec_contents .service_box ul:nth-child(2) {
    margin-top: 15rem;
  }
  #index #sec_contents .service_box .text_box h3 {
    margin-top: 3rem;
  }

  #index #sec_sub {
    height: auto;
    padding: 8rem;
  }

  #sec_download {
    height: auto;
    padding: 8rem;
  }

  #sec_banner div.banner {
    height: auto;
  }

  footer .footer_main_box .footer_info {
    width: 90%;
  }

  header nav ul {
    gap: 1.5rem;
    margin-right: 10%;
  }

  #subpages #sec_subpages_title {
    height: auto;
    padding: 0;
    padding-top: 15rem;
    padding-bottom: 3rem;
  }

  #subpages #sec_contents_sub .service_box {
    gap: 3rem;
    margin: 3rem auto;
    margin-bottom: 6rem;
    grid-template-columns: 40% auto;
  }

  #subpages #sec_progress_img {
    padding: 0;
    padding-top: 6rem;
  }

  #subpages #sec_progress_img .slides li {
    width: 28rem;
    height: 28rem;
  }

  #subpages #sec_progress_img .slides li div {
    width: 25rem;
  }

  #subpages #sec_publishers {
    background-position: center;
    background-size: cover;
    height: fit-content;
    overflow: hidden;
    position: relative;
  }
  #subpages #sec_publishers::after {
    content: "";
    background-color: #00000080;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
  }
  #subpages #sec_publishers .inner_box {
    position: relative;
    z-index: 1;
    height: fit-content;
    padding: 14rem 0 10rem 0;
    color: #ffffff;
    text-align: center;
  }
  #subpages #sec_publishers h3 {
    font-size: 2rem;
  }
  #subpages #sec_publishers p {
    font-size: 1rem;
  }
  #subpages #sec_publishers a {
    margin: 0 auto;
    margin-top: 2rem;
  }
}
@media (min-width: 1024px) and (max-width: 1499px) {
  html, body {
    font-size: 18px;
  }

  body {
    font-size: 1rem;
  }

  #sec_banner div.banner, #index #sec_contents .title,
#index #sec_contents .service_box, #subpages #sec_subpages_title .text_box,
#subpages #sec_contents_sub .service_box, #subpages #sec_progress_img h3,
#subpages #sec_progress_img .slides,
#subpages #sec_publishers .inner_box {
    max-width: 90%;
  }

  #index #sec_contents .service_box {
    gap: 4rem;
    padding-bottom: 6rem;
  }
  #index #sec_contents .service_box ul {
    gap: 4rem;
  }
  #index #sec_contents .service_box ul li {
    padding: 2rem;
  }
  #index #sec_contents .service_box ul li .img_box {
    height: 18rem;
  }
  #index #sec_contents .service_box ul:nth-child(2) {
    margin-top: 15rem;
  }
  #index #sec_contents .service_box .text_box h3 {
    margin-top: 3rem;
  }

  #index #sec_sub {
    height: auto;
    padding: 8rem;
  }

  #sec_download {
    height: auto;
    padding: 8rem;
  }

  #sec_banner div.banner {
    height: auto;
  }

  footer .footer_main_box .footer_info {
    width: 90%;
  }

  #subpages #sec_subpages_title {
    height: auto;
  }

  #subpages #sec_progress_img {
    padding: 0;
    padding-top: 6rem;
  }

  #subpages #sec_publishers {
    background-position: 20rem top;
    background-size: cover;
    height: fit-content;
    overflow: hidden;
  }
  #subpages #sec_publishers .inner_box {
    height: fit-content;
    padding: 12rem 0 10rem 0;
  }
  #subpages #sec_publishers h3 {
    font-size: 2rem;
  }
  #subpages #sec_publishers p {
    font-size: 1rem;
  }
}
@media (min-width: 1500px) and (max-width: 1799px) {
  #sec_banner div.banner,
#index #sec_contents .title,
#index #sec_contents .service_box,
#subpages #sec_subpages_title .text_box,
#subpages #sec_contents_sub .service_box,
#subpages #sec_progress_img h3,
#subpages #sec_progress_img .slides,
#subpages #sec_publishers .inner_box {
    max-width: 1400px;
  }

  #index #sec_contents .service_box ul li .img_box {
    height: 25rem;
  }

  #subpages #sec_publishers {
    background-position: 27rem top;
  }
}
@media (min-width: 1800px) {
  #sec_banner div.banner,
#index #sec_contents .title,
#index #sec_contents .service_box,
#subpages #sec_subpages_title .text_box,
#subpages #sec_contents_sub .service_box,
#subpages #sec_progress_img h3,
#subpages #sec_progress_img .slides,
#sec_publishers .inner_box {
    max-width: 1600px;
  }
}