@import url("./normalize.css");

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(../fonts/Pretendard-Black.woff2) format('woff2'), url(../fonts/woff/Pretendard-Black.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url(../fonts/Pretendard-ExtraBold.woff2) format('woff2'), url(../fonts/woff/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(../fonts/Pretendard-Bold.woff2) format('woff2'), url(../fonts/woff/Pretendard-Bold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(../fonts/Pretendard-SemiBold.woff2) format('woff2'), url(../fonts/woff/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(../fonts/Pretendard-Medium.woff2) format('woff2'), url(../fonts/woff/Pretendard-Medium.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(../fonts/Pretendard-Regular.woff2) format('woff2'), url(../fonts/woff/Pretendard-Regular.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(../fonts/Pretendard-Light.woff2) format('woff2'), url(../fonts/woff/Pretendard-Light.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(../fonts/Pretendard-ExtraLight.woff2) format('woff2'), url(../fonts/woff/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(../fonts/Pretendard-Thin.woff2) format('woff2'), url(../fonts/woff/Pretendard-Thin.woff) format('woff');
}


/* 페이퍼로지 */
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

/* 엘리스 배움체 */
@font-face {
  font-family: 'Elice Digital Baeum';
  src: local('EliceDigitalBaeum_Regular'), url(../fonts/EliceDigitalBaeum_Regular.woff2) format('woff2'), url(../fonts/woff/EliceDigitalBaeum_Regular.woff) format('woff');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Elice Digital Baeum';
  src: local('EliceDigitalBaeum_Bold'), url(../fonts/EliceDigitalBaeum_Bold.woff2) format('woff2'), url(../fonts/woff/EliceDigitalBaeum_Bold.woff) format('woff');
  font-weight: 700;
  font-display: swap;
}

:root {
  --theme-color1: #f48578;
  --theme-color2: #86abf1;
  --gradient-base: linear-gradient(to right, var(--theme-color1), var(--theme-color2));
  --text-base: #333;
  --main-menu-gap: 0px;
}

* {
  padding: 0;
  margin: 0;
  letter-spacing: -0.75px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  -webkit-overflow-scrolling: touch;
}

body {
  color: #333;
}

.ep-font {
  font-family: 'Elice Digital Baeum', sans-serif !important;
}

.ep-txt {
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.5;
  margin-block: 2em;
  display: block;
  text-align: center;
  word-break: keep-all;
  text-wrap: balance;
}

@media screen and (max-width: 1200px) {
  .ep-txt {
    font-size: 1.1rem;
  }
}

@media screen and (max-width: 768px) {
  .ep-txt {
    font-size: 0.9rem;
  }
}

img {
  vertical-align: middle;
}

select, button, textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  border-radius: 0;
  background-color: transparent;
}

select:focus {
  outline: none;
}

select {
  background: url("../img/select.jpg") no-repeat 98% 50%;
}

select::-ms-expand {
  display: none;
}

input[type="checkbox"] {
  display: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

textarea {
  resize: none;
}

table {
  border-collapse: collapse;
}

svg path {
  color: inherit;
}

br {
  font-family: 'Pretendard', sans-serif !important;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: 'Pretendard', sans-serif;
  font-size: 20px;
}

body {
  position: relative;
  max-width: 1920px;
  min-width: 320px;
  margin: 0 auto;
  overflow-x: hidden !important;
  overflow-y: auto;
}

header {
  position: fixed;
  left: 0;
  top: 0;
  width: 25%;
  height: 100%;
  padding: 2.5rem 2.75%;
  background-color: #fff;
  overflow: auto;
  z-index: 4;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

header::-webkit-scrollbar {
  display: none;
}

header .direct {
  position: fixed;
  left: 0;
  top: 0;
  height: 0;
  width: 100%;
  background-color: #000000;
  color: #fff;
  text-align: center;
  overflow: hidden;
  z-index: 999;
}

header .direct:focus {
  height: auto;
  padding: 0.25rem 0;
}

header .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  min-height: 100%;
}

header .logo {
  display: block;
  margin-bottom: 15px;
}

header .logo + .volume {
  font-size: 0.85rem;
  color: var(--text-base);
}

header .logo + .volume * {
  color: var(--text-base);
}

header .logo + .volume b {
  font-weight: 600;
}

header .gnb {
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-top: 1.2em;
  width: 100%;
  max-width: 200px;
}

header .gnb::-webkit-scrollbar {
  display: none;
}

header .gnb > li {
  margin-bottom: 0.5rem;
}

header .gnb > li > a {
  width: 100%;
  height: 100%;
  min-height: 50px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  max-width: 100%;
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background-color: #f7f7f7;
  color: var(--text-base);
}

header .gnb > li > a .txt {
  flex: 1;
  font-weight: 500;
}

header .gnb > li > a .line {
  width: 1px;
  height: 1.5em;
  background-color: #333;
  opacity: 0.8;
  margin-inline: 15px;
}

header .gnb > li > a .img-box {
  width: 24px;
}

header .gnb > li > a .img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

header .gnb > li > a:hover {
  filter: brightness(0.95);
}

header .gnb > li:last-child {
  margin-bottom: 0;
}

header .swiper-container {
  width: 100%;
  max-width: 266px;
  margin: 2.4rem 0 0;
  overflow: hidden;
}

header .swiper-movemnt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

header .swiper-movemnt .swiper-stop {
  display: inline-block;
  width: 9px;
  height: 12px;
  margin-right: 5px;
  background-image: url("../img/stop.png");
  background-size: 100%;
  cursor: pointer;
}

header .swiper-movemnt .swiper-stop.on {
  background-position: bottom;
}

header .swiper-pagination {
  position: static;
  left: auto;
  top: auto;
  width: max-content !important;
  max-width: calc(100% - 17px);
  overflow: hidden;
}

header .swiper-pagination .swiper-pagination-bullet {
  display: inline-block;
  float: left;
  width: 10px;
  height: 10px;
  margin: 1px 5px 1px 0 !important;
  border: 2px solid #9c9c9c;
  background-color: transparent;
  opacity: 1;
}

header .swiper-pagination .swiper-pagination-bullet:last-child {
  margin: 1px 0 !important;
}

header .swiper-pagination .swiper-pagination-bullet-active {
  border: 2px solid #000000;
  background-color: #000000;
}

header .swiper-wrapper {
  margin-top: 0.5rem;
}

header .swiper-slide .img > img {
  display: block;
  max-width: 100%;
}

header .swiper-slide .text {
  margin-top: 0.75rem;
}

header .swiper-slide .text > p {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

header .swiper-slide .text > small {
  display: -webkit-box;
  height: 2.1rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.05rem;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: keep-all;
  overflow: hidden;
}

header .sns {
  margin-top: 2.5rem;
  overflow: hidden;
}

header .sns > a {
  float: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 0.25rem;
  border-radius: 0.25rem;
  border: 1px solid #757575;
}

header .sns > a:last-child {
  margin-right: 0;
}

nav {
  position: fixed;
  left: 0;
  top: 0;
  overflow: auto;
  z-index: 998;
}

body:has(nav.on) {
  overflow-y: hidden !important;
}

nav .volume {
  position: fixed;
  right: 0;
  top: 0;
  padding: 3% 2% 0 0;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.25;
  text-align: right;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  z-index: 999;
  font-family: 'Paperozi';
}

nav .volume b {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--theme-color1);
}

nav .volume {
  font-weight: 500;
}

nav .volume small {
  display: block;
  font-weight: 300;
  font-size: 0.85rem;
}

nav .menu {
  position: fixed;
  right: 2%;
  top: 50%;
  width: 42px;
  height: 32px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
  z-index: 999;
}

nav .menu span {
  display: block;
  right: 0;
  top: 0;
  background-color: #000000;
}

nav .menu.off {
  display: inline-block;
}

nav .menu.off span {
  width: 100%;
  height: 6px;
  position: absolute;
}

nav .menu:not(.off) {
  width: 36px;
  height: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

nav .menu:not(.off) span {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
}

nav .menu:not(.off) span:last-child {
  background-color: var(--theme-color1);
  transition: transform .25s;
}

nav .menu:not(.off):hover span:last-child {
  transform: rotate(-45deg);
}

/* nav .menu span:nth-child(1) {
  width: 65%;
}
nav .menu span:nth-child(2) {
  top: 14px;
}
nav .menu span:last-child {
  top: 28px;
  width: 85%;
} */

nav .menu.off {
  position: absolute;
  left: -9999%;
}

nav .close {
  display: none;
  position: fixed;
  right: 2%;
  top: 50%;
  width: 42px;
  height: 38px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
  z-index: 999;
}

nav .close span {
  display: block;
  position: absolute;
  right: 7.5px;
  top: 50%;
  width: 100%;
  height: 6px;
  margin-top: -16px;
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  background-color: #000000;
}

nav .close span:nth-child(2) {
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

nav .close span:last-child {
  right: 7.5px;
  top: 50%;
  margin-top: 12.5px;
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

nav .close.on {
  display: inline-block;
}

nav .wrap {
  display: none;
  width: 100%;
  min-height: 100%;
  padding: 3rem calc((100% - 1404px)/2);
  background-color: #fff;
}

nav .wrap .link {
  width: 100%;
  max-width: calc(171px * 4);
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 1rem;
  justify-content: end;
  gap: 20px;
}

nav .wrap .link > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 171px;
  height: 57px;
  border-radius: 0.35rem;
  border: 1px solid #a0a0a0;
  -webkit-box-shadow: 4px 6px 1px 0px rgba(218, 218, 218, 0.75);
          box-shadow: 4px 6px 1px 0px rgba(218, 218, 218, 0.75);
}

nav .wrap .link > a:hover {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-color: var(--theme-color1);
  -webkit-box-shadow: 4px 6px 1px 0px var(--theme-color1);
          box-shadow: 4px 6px 1px 0px var(--theme-color1);
}

nav .wrap .link > a > img {
  margin-right: 0.5rem;
}

nav .wrap .link > a > span {
  font-size: 0.9rem;
}

nav .wrap .link > a:last-child {
  margin-right: 0;
}

nav .wrap .gnb {
  margin-bottom: 5rem;
}

nav .wrap .gnb .gnb_title {
  padding-bottom: 0.5rem;
  font-size: 1.85rem;
  letter-spacing: -1px;
  border-bottom: 1px solid #000000;
  color: var(--theme-color1);
}

nav .wrap .gnb .gnb_title span {
  font-size: 0.9rem;
  color: #333;
}

nav .wrap .gnb:last-child {
  margin-bottom: 0;
}

nav .wrap .lnb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 2.5rem;
}

nav .wrap .lnb > li {
  width: 100%;
}

nav .wrap .lnb > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

nav .wrap .lnb > li > a .text {
  flex: 1;
}

nav .wrap .lnb > li > a:hover .img img {
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  opacity: 0.7;
}

nav .wrap .lnb > li:nth-child(4n) {
  margin-right: 0;
}

nav .wrap .lnb > li:nth-last-child(1),
nav .wrap .lnb > li:nth-last-child(2),
nav .wrap .lnb > li:nth-last-child(3),
nav .wrap .lnb > li:nth-last-child(4) {
  margin-bottom: 0;
}

nav .wrap .lnb .img {
  width: 35.5%;
  max-width: 110px;
  margin-right: 5%;
  background-color: #000000;
  overflow: hidden;
}

nav .wrap .lnb .img img {
  display: block;
  max-width: 100%;
}

nav .wrap .lnb .text .category {
  font-size: 0.9rem;
  font-weight: 600;
  font-family: "Paperozi";
}

nav .wrap .lnb .text .title {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.4;
  word-break: keep-all;
  text-wrap: pretty;
}

nav .wrap .lnb.braille {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

nav .wrap .lnb.braille > li > a {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

nav .wrap .lnb.braille .img {
  max-width: 90px;
  margin-right: 0;
  background-color: transparent;
  overflow: visible;
}

nav .wrap .lnb.braille .img > img {
  margin-left: 5%;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

nav .wrap .lnb.braille .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.25rem 0;
  border: 1px solid #a3a3a3;
  border-left: none;
  border-radius: 0 10px 10px 0;
  -webkit-box-shadow: 6px 7px 0 #e2e2e2;
          box-shadow: 6px 7px 0 #e2e2e2;
}

nav .wrap .lnb.braille .text .title {
  display: none;
}

nav .wrap .lnb.braille .text > img {
  margin-right: 5%;
}

nav.on {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

nav.on::-webkit-scrollbar {
  display: none;
}

nav.on .volume,
nav.on .menu {
  opacity: 1 !important;
}

nav.on .wrap {
  display: block;
}

nav.off .volume,
nav.off .menu {
  opacity: 0;
}

section {
  width: 75%;
  margin-left: 25%;
}


.scroll-top {
  position: fixed;
  right: 2%;
  bottom: 1.25rem;
  z-index: 997;
  border-radius: 100%;
  background-color: #fff;
  cursor: pointer;
}

.scroll-top i, .scroll-top svg, .scroll-top path {
  font-size: 2.5rem;
  color: #f67d86;
}

/*Small PC*/
@media (max-width: 1600px) {
  nav .wrap {
    padding: 3rem 6rem 3rem 3rem;
  }
}

/*Small PC*/

/*Ipad Pro*/
@media (max-width: 1365px) {
  header {
    width: 100%;
    height: auto;
    padding: 1rem 5%;
    z-index: 997;
  }
  header .wrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  header .logo {
    margin: 0;
  }
  header .logo img {
    height: 45px;
  }
  header .gnb {
    width: 100%;
    max-width: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: fixed;
    left: 0;
    top: 80px;
    width: 100%;
    margin: 0;
    padding: 0.5rem 2.5%;
    border-top: 1px solid #959595;
    background-color: #fff;
    -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
    overflow: auto;
    gap: 20px;
    text-align: center;
  }
  header .gnb .old {
    display: none;
  }
  header .logo + .volume {
    display: none;
  }
  header .gnb > li > a .txt {
    font-size: 0.85rem;
  }
  header .gnb > li > a .line {
    display: none;
  }
  header .gnb > li > a .img-box {
    display: none;
  }
  header .gnb > li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin: 0;
    flex: 1;
  }
  header .gnb > li > a {
    /* display: block; */
    font-size: 1rem;
    color: #000000 !important;
  }
  header .gnb > li:last-child {
    margin-right: 0;
  }
  header .swiper-container {
    display: none;
  }
  header .sns {
    display: none;
  }
  nav .volume {
    right: auto;
    left: 2.5%;
    top: calc((95px - 52px)/2);
    padding: 0;
    text-align: left;
    z-index: 998;
  }
  nav .volume small {
    display: inline;
  }
  nav .menu {
    right: 2.5%;
    top: calc((95px - 52px)/2);
    -webkit-transform: none;
            transform: none;
    opacity: 1 !important;
  }
  nav .close {
    right: 2.5%;
    top: calc((95px - 38px)/2);
    -webkit-transform: none;
            transform: none;
  }
  nav .wrap {
    min-height: auto;
    padding: 5rem 5% 3rem;
  }
  nav .wrap .link {
    margin-bottom: 1.5rem;
  }
  nav .wrap .link > a {
    border-color: #a0a0a0 !important;
    -webkit-box-shadow: 4px 6px 1px 0px rgba(218, 218, 218, 0.75) !important;
            box-shadow: 4px 6px 1px 0px rgba(218, 218, 218, 0.75) !important;
  }
  nav .wrap .lnb {
    grid-template-columns: repeat(2, 1fr);
  }
  nav .wrap .lnb > li > a:hover .img img {
    -webkit-transition: all 0s linear;
    transition: all 0s linear;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  nav.on .volume {
    display: none;
  }
  nav.on .menu {
    position: absolute;
  }
  nav.on .close {
    position: absolute;
  }
  section {
    width: 100%;
    margin: 159px 0 0;
  }
  
}

.blind {
  position: absolute;
  left: -9999;
  top: -9999;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -999;
}

/*Ipad*/
@media (max-width: 991.98px) {
  /* header .gnb {
    padding: 1rem 5%;
  } */
  nav .volume {
    left: 5%;
  }
  nav .menu {
    right: 5%;
  }
  nav .close {
    right: 5%;
  }
}

/*Tablet*/
@media (max-width: 767.98px) {
  /* header .gnb {
    padding: 0.75rem 5%;
  } */
  /* header .gnb > li {
    margin-right: 4rem;
  } */
  nav .menu {
    top: calc((95px - 50px)/2);
    width: 39px;
  }
  nav .menu.close span {
    height: 5px;
  }
  nav .close {
    top: calc((95px - 35px)/2);
    width: 39px;
    height: 35px;
  }
  nav .close span {
    right: 7px;
    height: 5px;
    margin-top: -15.5px;
  }
  nav .close span:last-child {
    right: 7px;
    margin-top: 11px;
  }
  nav .wrap .link {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
  nav .wrap .link > a {
    width: 100%;
  }
  nav .wrap .gnb .gnb_title {
    font-size: 1.5rem;
  }
  nav .wrap .lnb > li {
    width: 100%;
    margin-right: 0 !important;
  }
  nav .wrap .lnb.braille .text {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0.85rem 0;
  }
  nav .wrap .lnb.braille .text > img {
    margin: 0 0 0.25rem;
  }
  section {
    margin-top: 152px;
  }
 
}

/*Mobile*/
@media (max-width: 575.98px) {
  header {
    padding: 0.75rem 5%;
  }
  header .logo img {
    height: 30px;
  }
  header .gnb {
    top: 60px;
    gap: 10px;
  }
  /* header .gnb > li {
    margin-right: 2rem;
  } */
  header .gnb > li > a {
    font-size: 0.8rem;
    min-height: auto;
  }
  nav .volume {
    top: calc((70px - 48px)/2);
    padding: 0;
    font-size: 0.65rem;
    line-height: 1.45;
  }
  nav .volume b {
    font-size: 1.1rem;
  }
  nav .volume small {
    font-size: 0.65rem;
  }
  nav .menu {
    top: calc((70px - 40px)/2);
    width: 30px;
    height: 24px;
  }
  nav .menu:not(.off) {
    width: 28px;
    height: 28px;
    gap: 3px;
  }
  nav .menu:not(.off) span {

  }
  nav .menu.close span {
    height: 4px;
  }
  nav .menu span:nth-child(2) {
    top: 10px;
  }
  nav .menu span:last-child {
    top: 20px;
  }
  nav .close {
    top: calc((70px - 28px)/2);
    width: 30px;
    height: 28px;
  }
  nav .close span {
    right: 5.5px;
    height: 4px;
    margin-top: -11.5px;
  }
  nav .close span:last-child {
    right: 5.5px;
    margin-top: 8.5px;
  }
  nav .wrap .lnb {
    grid-template-columns: 1fr;
  } 
  nav .wrap {
    padding: 3.5rem 5% 3rem;
  }
  nav .wrap .link {
    gap: 10px;
  }
  nav .wrap .link > a {
    height: auto;
    padding: 0.5rem 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  nav .wrap .link > a > img {
    max-height: 20px;
    margin: 0 auto 0.25rem;
  }
  nav .wrap .link > a > span {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    text-align: center;
  }
  nav .wrap .gnb {
    margin-bottom: 3rem;
  }
  nav .wrap .gnb:last-of-type {
    margin-bottom: 0;
  }
  nav .wrap .gnb .gnb_title {
    font-size: 1.15rem;
  }
  nav .wrap .gnb .gnb_title span {
    font-size: 0.8rem;
  }
  nav .wrap .lnb {
    margin-top: 1.5rem;
  }
  nav .wrap .lnb > li {
    margin-bottom: 0.75rem !important;
  }
  nav .wrap .lnb > li:last-child {
    margin-bottom: 0 !important;
  }
  nav .wrap .lnb .text .category {
    font-size: 0.85rem;
  }
  nav .wrap .lnb .text .title {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.45;
  }
  nav .lnb.braille .text {
    padding: 4.2% 0;
    margin-bottom: 2%;
  }
  nav .lnb.braille .text > img {
    width: 20px;
  }
  section {
    margin-top: 119px;
  }
  
  .scroll-top {
    bottom: 0.5rem;
  }
  .scroll-top i, .scroll-top svg, .scroll-top path {
    font-size: 1.75rem;
  }
}

/*Mobile(minimum)*/
@media (max-width: 369px) {
  nav .wrap .link > a > span {
    font-size: 0.55rem;
  }
  nav .wrap .lnb.braille {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  nav .wrap .lnb.braille > li {
    padding-bottom: 0.5rem;
  }
  nav .wrap .lnb.braille > li > a {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  nav .wrap .lnb.braille .text {
    width: calc(100% - 35%);
  }

  header .logo img {
    height: 24px;
  }

  header .gnb > li > a .txt {
    font-size: 0.75rem;
  }

  header .gnb {
    top: 54px;
  }

  nav .volume,
  nav .volume small {
    font-size: 12px;
  } 
}

@media (max-width: 320px) {
  nav .volume,
  nav .volume small {
    font-size: 11px;
  }
}

.footer {
  background-color: #222222;
  position: relative;
  z-index: 100;
}

.footer-inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-inner .txt-bx p {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #999;
}

.footer-inner .sns-bx {
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-inner .sns-bx a:first-of-type img {
  filter: none;
}

.footer-inner .sns-bx a .hover {
  display: none;
}

.footer-inner .sns-bx a img {
  display: none;
  filter: brightness(0) saturate(100%) invert(28%) sepia(0%) saturate(37%) hue-rotate(254deg) brightness(100%) contrast(87%);
}

.footer-inner .sns-bx a:hover img {
  display: none;
  filter: none;
}

.footer-inner .sns-bx a:hover .hover {
  display: block;
}

.footer-inner .sns-bx a img {
  display: block;
}

@media screen and (max-width: 576px) {
  .footer .footer-inner {
      flex-direction: column;
      gap: 10px;
  }

  .footer .footer-inner .txt-bx {
      text-align: center;
  }

  .footer .footer-inner .txt-bx p {
      font-size: 13px;
  }
}


.main .section01 {
  padding-bottom: 4.5rem;
  background-color: #fff;
}


.main .section01 .cover {
  display: block;
  max-width: calc(100% - var(--main-menu-gap));
  position: relative;
  overflow: hidden;
}

.main .section01 .cover > span {
  display: block;
  content: "";
  position: absolute;
  left: 0%;
  top: 0;
  width: 400%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#87abf0), color-stop(#f4785b), color-stop(#87abf0), color-stop(#f4785b), color-stop(#87abf0), color-stop(#f4785b), color-stop(#87abf0), to(#f4785b));
  background: linear-gradient(to right, #87abf0, #f4785b, #87abf0, #f4785b, #87abf0, #f4785b, #87abf0, #f4785b);
  z-index: 1;
}

.main .section01 .cover > img {
  display: block;
  position: relative;
  max-width: 100%;
  z-index: 2;
}

.main .section01 .cover > img.mo {
  display: none;
}

.main .section01 .cover .text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.main .section01 .cover .text > span {
  display: inline-block;
  padding: 0.7rem 1.25rem 0.45rem;
  border: 1px solid #a0a0a0;
  font-family: 'Paperozi';
  font-size: 1.1rem;
}

.main .section01 .cover .text > h3 {
  margin: 1.25rem 0 1rem;
  font-family: 'Paperozi';
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0;
  word-break: keep-all;
}

.txt-gradient {
  width: max-content !important;
  max-width: 100%;
  background: var(--gradient-base);
  color: transparent !important;
  display: inline-block;
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  font-weight: 900;
}

.main .section01 .cover .text > h3 > b {
  font-family: 'Paperozi';
  font-weight: 800;
}

.main .section01 .cover .text > h4 {
  margin-bottom: 2rem;
  font-family: 'Paperozi';
  font-size: 1.7rem;
  font-weight: 300;
  color: var(--text-base);
}

.main .section01 .cover .text > a {
  padding-bottom: 5px;
  font-family: 'Paperozi';
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 2px solid #333;
  letter-spacing: -1px;
  color: #333;
}

.main .section01 .swiper-container {
  display: none;
  position: relative;
}

.main .section02 {
  --point-color: #05c200;
  --point-color-soft: #71bf45;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 3rem 4.5%;
  background-image: url(../img/main02_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 0;
}

.main .section02 .text {
  max-width: 38.75%;
  margin: 0 4.15%;
}

.main .section02 .text > span {
  font-size: 0.8rem;
  font-weight: 500;
  border-bottom: 1px solid #d4d5d4;
  color: #d4d5d4;
}

.main .section02 .text > p {
  margin-top: 1.25rem;
  font-size: 2.05rem;
  font-weight: 300;
  color: #ffffff;
  word-break: keep-all;
}

.main .section02 .text > p > b {
  font-size: 2.05rem;
  font-weight: 500;
  color: #ffffff;
}

.main div {
  width: 100%;
}

.main .sec-title {
  width: max-content;
  max-width: 100%;
  font-family: 'Paperozi';
  font-size: 2rem;
  font-weight: 700;
  position: relative;
  margin-bottom: 0;
  padding-left: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--point-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.main .sec-subtitle {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  padding-left: 0.5rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: #666;
}

.main .section02 .sec-subtitle {
  margin-bottom: 0;
}

.main .sec-title img {
  width: auto;
  max-width: 100%;
}

.main .sec-title .color {
  color: var(--point-color);
}

.main .section02 .sec-contain {
  display: flex;
  align-items: start;
  gap: 60px;
}

.main .tit-box {
  position: relative;
  left: -5%;
}

.main .section02 .sec-contain .left {
  width: 200px;
  display: flex;
  padding-top: 45px;
  flex-direction: column;
  margin-inline: auto;
}

.main .section02 .sec-contain .right {
  flex: 1;
  overflow: hidden;
  transform: translateY(-3.5rem);
}

.main .section02 .sec-contain .right .swiper {
  width: 100%;
  height: 100%;
}

.main .section02 .sec-contain .swiper-pagination {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.main .section02 .sec-contain .swiper-pagination .swiper-pagination-bullet {
  width: auto;
  height: auto;
  display: flex;
  justify-content: space-between;
  padding-inline: 20px;
  padding-block: 12px;
  border-radius: 20vw;
  font-size: 17px;
  line-height: 1;
  color: var(--text-base);
  opacity: 1;
  background-color: transparent;
}

.main .section02 .sec-contain .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--point-color-soft);
  color: #fff;
}

.main .section02 .sec-contain .swiper-pagination .swiper-pagination-bullet-active::after {
  content: "+";
}

.main .section02 .sec-contain .line-wrap {
  display: flex;
}

.main .section02 .sec-contain .line-box {
  width: 30px;
  min-width: 30px;
  position: relative;
}

.main .section02 .sec-contain .line-box .bull-box {
  width: 100%;
  height: 100%;
  padding-block: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.main .section02 .sec-contain .line-box .check-bullet {
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 50%;
  background-color: var(--text-base);
  position: relative;
}

.main .section02 .sec-contain .line-box .check-bullet.active {
  background-color: #c4e4b1;
  transform: scale(2.5);
}

.main .section02 .sec-contain .line-box .check-bullet.active::before {
  content: "";
  position: absolute;
  width: 66%;
  height: 66%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--point-color-soft);
  border-radius: 50%;
}

.main .section02 .sec-contain .line-box .check-bullet.active::after {
  content: "✓";
  font-size: 4px;
  color: #fff;
  position: absolute;
  top: 2px;
  left: 2.2px;
  z-index: 1;
}

.main .section02 .sec-contain .line-box::after {
  content: "";
  width: 1px;
  height: calc(100% - 42px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: var(--text-base);
}

.main .section02 .sec-contain .bot {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 5px 15px;
  border-radius: 20vw;
  margin-top: 20px;
}

.main .section02 .sec-contain .bot .indicator {
  font-size: 17px;
  font-weight: 500;
  display: flex;
  gap: 2px;
  align-items: center;
}

.main .section02 .sec-contain .bot .indicator .curr {
  color: var(--point-color);
}

.flex {
  display: flex;
}

.bot .flex {
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 5px;
}

.main .section02 .sec-contain .bot .swiper-button-next,
.main .section02 .sec-contain .bot .swiper-button-prev {
  position: static;
  margin-top: 0;
  width: 30px;
  height: 30px;
  background-color: var(--point-color-soft);
  border-radius: 50%;
  background-image: none;
  color: #fff;
}

.main .section02 .sec-contain .bot .swiper-button-next::after,
.main .section02 .sec-contain .bot .swiper-button-prev::after {
  content: none;
}

.main .section02 .sec-contain .swiper-wrapper {
  align-items: stretch;
}

.main .section02 .sec-contain .swiper-slide {
  position: relative;
  height: auto;
}

.main .section02 .sec-contain .slide-txt-box {
  width: 100%;
  max-width: 500px;
  height: 100%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #f7fbf4d2, 0, #f7fbf4d2, 70%, transparent);
}

.main .section02 .sec-contain .slide-txt-box .tag {
  color: #fff;
  font-weight: 700;
  background-color: var(--point-color-soft);
}

.main .section02 .sec-contain .slide-txt-box h3 {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.3;
  font-family: 'Paperozi';
  color: var(--text-base);
  margin-bottom: 10px;
  word-break: keep-all;
  text-wrap: balance;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.main .section02 .sec-contain .slide-txt-box h4 {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}


@media screen and (max-width: 1024px) {
  .main .section02 .sec-contain .slide-txt-box a {
    border-radius: 0 !important;
  }
}

.main .section02 .sec-contain .slide-txt-box h4 {
  font-size: 22px;
  font-family: 'Paperozi';
  color: var(--text-base);
  word-break: keep-all;
  text-wrap: balance;
  margin-bottom: 30px;
}

.main .section02 .sec-contain .slide-txt-box a {
  width: max-content;
  max-width: 100%;
  padding: 10px 20px;
  font-size: 17px;
  border: 1px solid var(--text-base);
  border-radius: 20vw;
}

.main .section02 .sec-contain .slide-txt-box a:hover {
  background-color: var(--text-base);
  color: #fff;
}

.main .section02 .sec-contain .slide-img-box {
  display: flex;
  justify-content: end;
}

.main .section02 .sec-contain .slide-img-box img {
  max-width: 100%;
  border-radius: 50vw;
}

.main .section03 {
  --point-color: #2581ff;
  padding-block: 3rem;
  padding-right: 4.25%;
}

.main .section03 .mascot-wrapper {
  position: relative;
}

.main .section03 .mascot {
  position: absolute;
  bottom: 0;
  right: 10px;
  z-index: 15;
  pointer-events: none;
  transform: translateY(20%);
}

.main .section03 .pd,
.main .section04 .pd {
  padding-left: 4.25%;
}

.sec-line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

.main .section03 .sec-line {
  margin-top: 20px;
}

.main .section04 {
  --point-color: #ffae00;
  padding-block: 3rem;
  padding-top: 0;
  padding-right: 4.25%;
}

.main .section05 {
  --point-color: #0080ff;
  padding-block: 3rem;
  padding-right: 4.25%;
}

.main .normal-swiper .swiper-slide img {
  width: 100%;
  border-radius: 20px;
}

.main .normal-swiper .swiper-btns {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.main .normal-swiper .swiper-btns .swiper-button-next,
.main .normal-swiper .swiper-btns .swiper-button-prev {
  width: 60px;
  height: 60px;
  position: static;
  margin-top: 0;
  transform: translate(0);
}

.main .normal-swiper .swiper-btns .swiper-button-next {
  background-image: url(../img/next.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.main .normal-swiper .swiper-btns .swiper-button-prev {
  background-image: url(../img/prev.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.main .normal-swiper .swiper-btns .swiper-button-next:hover {
  background-image: url(../img/next_hover.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.main .normal-swiper .swiper-btns .swiper-button-prev:hover {
  background-image: url(../img/prev_hover.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

@media screen and (max-width: 1200px) {
  .main .normal-swiper .swiper-btns .swiper-button-next {
    background-image: url(../img/next_hover.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  .main .normal-swiper .swiper-btns .swiper-button-prev {
    background-image: url(../img/prev_hover.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}

.main .normal-swiper .swiper-btns .swiper-button-next::after,
.main .normal-swiper .swiper-btns .swiper-button-prev::after {
  content: none;
}

.main .normal-swiper .swiper-slide {
  height: auto;
}

.main .normal-swiper .normal-swiper-tit {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.5px;
  font-family: 'Paperozi';
  word-break: keep-all;
  display: block;
  margin-top: 20px;
  line-height: 1.4;
}

.main .normal-swiper .normal-swiper-subtit {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.5;
  font-family: 'Paperozi';
  word-break: keep-all;
  display: block;
}

.main .normal-swiper .swiper-slide a {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.main .section03.normal-swiper .swiper-slide a {
  justify-content: end;
}

.main .section03.normal-swiper .normal-swiper-tit {
  margin-top: 10px;
  margin-bottom: 20px;
  flex: 1;
}

.main .section04.normal-swiper .normal-swiper-subtit {
  flex: 1;
}

.main .section05 {
  padding-inline: 4.5%;
  background-image: url(../img/main05_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.main .section05 .sec-title {
  margin-bottom: 1em;
}

.main .section05.normal-swiper .swiper-slide img {
  border-radius: 0;
}

.main .section05 .all-btn {
  height: 60px;
  padding-inline: 30px;
  background-color: var(--text-base);
  color: #fff;
  border-radius: 20vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main .section05 .all-btn:hover {
  filter: brightness(0.85);
}

.main.vol276 .section01 .cover .text {
  padding: 12.5% 10%;
}

.main.vol276 .section01 .cover .text > a {
  left: 10%;
  bottom: 17.5%;
}

.main.vol277 .section01 .cover .text {
  padding: 12.5% 10%;
}

.main.vol277 .section01 .cover .text > span {
  border-color: #fff;
  color: #fff;
}

.main.vol277 .section01 .cover .text > h3 {
  color: #fff;
}

.main.vol277 .section01 .cover .text > h3 > b {
  color: #fff;
}

.main.vol277 .section01 .cover .text > a {
  left: 10%;
  bottom: 17.5%;
}

.main.vol279 .section01 .cover .text {
  padding: 8.5% 4.5%;
}

.main.vol279 .section01 .cover .text > span {
  border-color: #fff;
  color: #fff;
}

.main.vol279 .section01 .cover .text > h3 {
  color: #fff;
}

.main.vol279 .section01 .cover .text > h3 > b {
  color: #fff;
}

.main.vol279 .section01 .cover .text > a {
  left: 4.5%;
  top: calc(8.5% + 302.8px + 4%);
  bottom: auto;
}

.main.vol280 .section01 .cover .text {
  padding: 8.5% 4.5%;
}

.main.vol280 .section01 .cover .text > span {
  border-color: #fff;
  color: #fff;
}

.main.vol280 .section01 .cover .text > h3 {
  color: #fff;
}

.main.vol280 .section01 .cover .text > h3 > b {
  color: #fff;
}

.main.vol280 .section01 .cover .text > a {
  left: 4.5%;
  top: calc(8.5% + 305px + 4%);
  bottom: auto;
}

.main.vol281 .section01 .cover .text {
  max-width: 1212px;
  padding: 8.5% 4.5%;
  text-align: right;
}

.main.vol281 .section01 .cover .text > h3 {
  font-size: 2.25rem;
}

.main.vol281 .section01 .cover .text > a {
  left: auto;
  right: 4.5%;
  top: calc(8.5% + 305px + 4%);
  bottom: auto;
}

.main.vol282 .section01 .cover .text {
  padding: 8.5% 4.5%;
}

.main.vol282 .section01 .cover .text > a {
  left: 4.5%;
  top: calc(8.5% + 305px + 4%);
  bottom: auto;
}

.main.vol283 .section01 .cover .text {
  padding: 8.5% 4.5%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: start;
}

.main.vol283 .section01 .cover .text > a {
  /* left: 4.5%;
  top: calc(8.5% + 305px + 4%);
  bottom: auto; */
  position: static;
}

.main.vol283 .section01 .cover .text > span {
  border-color: #000000;
}

/*Small PC*/
@media (max-width: 1600px) {
  .main .section02 {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .main .section02 .text {
    margin-left: 0;
  }
  .main .section02 .text > p {
    font-size: 1.85rem;
  }
  .main .section02 .text > p > b {
    font-size: 1.85rem;
  }
}

/*Ipad Pro*/
@media (max-width: 1365px) {
  .main .section01 {
    padding: 0;
  }
  .main .section01 .cover {
    max-width: 95%;
    margin: 0 auto;
  }
  
  .main .section01 .swiper-container {
    display: block;
    width: 100%;
    max-width: 95%;
    margin-inline: auto;
    margin-block: 3rem;
  }
  .main .section01 .swiper-container .img {
    display: inline-block;
    float: left;
    margin-right: 1.5rem;
  }
  .main .section01 .swiper-container .img img {
    display: block;
    max-width: 100%;
  }
  .main .section01 .swiper-container .text {
    display: inline-block;
    float: left;
    width: calc(100% - (277px + 1.5rem));
  }
  .main .section01 .swiper-container .text > p {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    font-weight: bold;
    word-break: keep-all;
  }
  .main .section01 .swiper-container .text > small {
    display: -webkit-box;
    height: 3.75rem;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.25rem;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: keep-all;
    overflow: hidden;
  }
  .main .section01 .swiper-container .text > span {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    font-weight: 300;
    border: 1px solid #a0a0a0;
  }
  .main .section01 .swiper-play,
  .main .section01 .swiper-pause {
    display: none;
    position: absolute;
    left: calc(270px + 1.5rem);
    top: 0;
    width: 10px;
    height: 10px;
    background-image: url("../img/stop.png");
    background-repeat: no-repeat;
    background-size: 89%;
    background-position: top center;
    z-index: 1;
  }
  .main .section01 .swiper-play > span,
  .main .section01 .swiper-pause > span {
    display: none;
  }
  .main .section01 .swiper-pause {
    display: none;
    background-position: bottom center;
    background-size: 100%;
  }
  .main .section01 .swiper-pagination {
    left: calc(270px + 1.5rem + 15px);
    bottom: auto;
    top: 0;
    overflow: hidden;
  }
  .main .section01 .swiper-pagination .swiper-pagination-bullet {
    display: inline-block;
    float: left;
    width: 10px;
    height: 10px;
    margin: 0 5px 0 0 !important;
    border: 2px solid #9c9c9c;
    background-color: transparent;
    opacity: 1;
  }
  .main .section01 .swiper-pagination .swiper-pagination-bullet:last-child {
    margin: 0 !important;
  }
  .main .section01 .swiper-pagination .swiper-pagination-bullet-active {
    border: 2px solid #000000;
    background-color: #000000;
  }
  .main .section02 {
    display: block;
    padding: 6rem 5% 3rem;
  }
  .main .section02 .sec-contain .right {
    transform: translate(0);
  }
  .main .section02 .sec-subtitle {
    margin-bottom: 1.5rem;
  }
  .main .section02 .sec-contain {
    gap: 20px;
  }
  .main .tit-box {
    left: 0;
  }
  .main .section03,
  .main .section04,
  .main .section05 {
    padding: 6rem 5%;
    padding-right: 0;
    background-color: #f7f8f8;
  }

  .main .section04 {
    padding-top: 0;
  }

  .main .section03 .pd,
  .main .section04 .pd {
    padding-left: 0;
  }
  .main.vol276 .section01 .cover .text {
    padding: 12.5% 5%;
  }
  .main.vol276 .section01 .cover .text > a {
    left: 5%;
  }
}

/*Ipad*/
@media (max-width: 1024px) {
  .main .section01 .cover .text > span {
    font-size: 0.9rem;
  }
  .main .section01 .cover .text > h3 {
    font-size: 1.7rem;
  }
  .main .section01 .cover .text > h4 {
    font-size: 1.4rem;
  }
  .main .section01 .cover .text > a {
    font-size: 0.9rem;
  }
  .main .sec-title {
    font-size: 2rem;
  } 
  .main .section02 {
    padding: 4.5rem 5% 3rem;
  }
  .main .section03,
  .main .section04,
  .main .section05 {
    padding: 3rem 5%;
    padding-right: 0;
    background-color: #f7f8f8;
  }

  .main .section04 {
    padding-top: 0;
  }

  .main .section02 .sec-contain {
    flex-direction: column-reverse;
  }

  .main .section02 .sec-contain .line-wrap {
    display: none;
  }

  .main .section02 .sec-contain .bot {
    margin-top: 0;
  }
}

/*Tablet*/
@media (max-width: 767.98px) {
  .main .section01 .cover {
    max-width: 90%;
  }
  .main .section01 .cover .text > span {
    padding: 0.55rem 1rem 0.35rem;
    font-size: 0.85rem;
  }
  .main .section01 .cover .text > h3 {
    font-size: 1.5rem;
  }
  .main .section01 .cover .text > h4 {
    font-size: 1.2rem;
  }
  .main .section01 .cover .text > a {
    font-size: 0.65rem;
  }
  .main .section01 .swiper-container {
    max-width: 90%;
    margin-block: 2rem;
  }
  .main .section01 .swiper-container .img img {
    width: 220px;
  }
  .main .section01 .swiper-container .text {
    width: calc(100% - (220px + 1.5rem));
  }
  .main .section01 .swiper-container .text > small {
    margin-top: 1.15rem;
  }
  .main .section01 .swiper-container .text > span {
    margin-top: 1.15rem;
  }
  .main .section01 .swiper-container .swiper-pagination {
    left: calc(220px + 1.5rem);
  }
  .main .section02 {
    background-size: auto 100%;
  }
  .main .section02 .sec-contain .slide-txt-box {
    max-width: 80%;
    padding-inline: 30px;
  }
  .main .section02 .sec-contain .slide-img-box img {
    border-radius: 30px;
  }
  .main .section02 .sec-contain .slide-txt-box h3 {
    font-size: 32px;
  }
  .main .section02 .sec-contain .slide-txt-box h4 {
    font-size: 20px;
  }
  .main .section02 .sec-contain .slide-txt-box a {
    font-size: 16px;
    padding-block: 8px;
  }
  .main .section02 .sec-contain .bot {
    transform: translateY(-50%);
    z-index: 5;
    padding-block: 10px;
    padding-inline: 25px;
  }
  .main .section02 .sec-contain .left {
    width: 90%;
    max-width: 250px;
  }
  .main .section02 .sec-contain .bot .swiper-button-next, .main .section02 .sec-contain .bot .swiper-button-prev {
    width: 35px;
    height: 35px;
  }
  .main .section02 .sec-contain .bot .indicator {
    font-size: 18px;
  }
  .main .section02 .sec-contain {
    gap: 0;
  }
  .main .section03 .swiper-slide {
    width: 47.5%;
    max-width: 266px;
    margin-right: 5%;
  }
  .main .normal-swiper .normal-swiper-subtit {
    font-size: 16px;
  }
  .main .normal-swiper .normal-swiper-tit {
    font-size: 19px;
  }
  .main .normal-swiper .swiper-btns .swiper-button-next, .main .normal-swiper .swiper-btns .swiper-button-prev {
    width: 50px;
    height: 50px;
  }
  .main .section05 .all-btn {
    height: 50px;
    font-size: 16px;
  }
  .main .section03 .mascot {
    width: 70px;
    right: 0;
  }
  .main.vol281 .section01 .cover .text > h3 {
    font-size: 1.5rem;
  }
}

/*Mobile*/
@media (max-width: 575.98px) {
  .main .section01 .cover > img {
    display: none;
  }
  .main .section01 .cover > img.mo {
    display: block;
  }
  .main .section01 .cover .text > span {
    padding: 0.45rem 0.75rem 0.2rem;
    font-size: 0.65rem;
  }
  .main .section01 .cover .text > h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  }
  .main .section01 .cover .text > h4 {
    font-size: 0.8rem;
    margin-bottom: 0.9rem;
  }
  .main .section01 .cover .text > a {
    font-size: 0.65rem;
  }
  .main .section01 .swiper-container {
    width: 90%;
    margin: 1.5rem auto;
  }
  .main .section01 .swiper-container .swiper-slide {
    padding-right: 0;
  }
  .main .section01 .swiper-container .img {
    width: 45%;
    margin-right: 5%;
  }
  .main .section01 .swiper-container .img img {
    width: 100%;
  }
  .main .section01 .swiper-container .text {
    width: 50%;
  }
  .main .section01 .swiper-container .text > p {
    display: -webkit-box;
    height: auto;
    margin-top: 1rem;
    font-size: 18px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: keep-all;
    overflow: hidden;
  }
  .main .section01 .swiper-container .text > small {
    display: none;
    font-size: 15px;
    line-height: 1.5;
    margin-top: 10px;
  }
  .main .sec-title {
    font-size: 1.5rem;
    padding-left: 0;
  }

  .main .sec-title, .main .sec-subtitle {
    padding-left: 0;
  }

  .main .sec-subtitle {
    font-size: 0.85rem;
    margin-bottom: 2rem;
  }
  .main .section01 .swiper-container .text > span {
    padding: 0.45rem 0.5rem;
    margin-top: 10px;
    font-size: 0.65rem;
  }
  .main .section01 .swiper-container .swiper-play,
  .main .section01 .swiper-container .swiper-pause {
    left: 50%;
  }
  .main .section01 .swiper-container .swiper-pagination {
    left: 50%;
  }
  .main .section01 .swiper-container .swiper-pagination .swiper-pagination-bullet {
    border: 1px solid #9c9c9c;
  }
  .main .section02 {
    padding: 3rem 5% 1.5rem;
  }
  .main .section02 .text > span {
    font-size: 0.65rem;
  }
  .main .section02 .text > p {
    margin-top: 0.75rem;
    font-size: 1.15rem;
  }
  .main .section02 .text > p > b {
    font-size: 1.15rem;
  }
  .main .section02 .video {
    margin-top: 1.5rem;
  }
  .main .section03,
  .main .section04,
  .main .section05 {
    padding: 2rem 5%;
    padding-right: 0;
  }

  .main .section04 {
    padding-top: 0;
  }
  .main .section02 .sec-contain .slide-txt-box h3 {
    font-size: 22px;
  }

  .main .section02 .sec-contain .slide-txt-box {
    max-width: 100%;
    min-height: 300px;
    padding-inline: 15px;
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
    background: linear-gradient(to right, #f7fbf4d2, 40%, #f7fbf4d2, 80%, transparent);
  }

  .main .section02 .sec-contain .slide-img-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .main .section02 .sec-contain .slide-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .main .section02 .sec-contain .slide-txt-box h4 {
    font-size: 18px;
  }

  .main .section02 .sec-contain .slide-txt-box a {
    font-size: 15px;
  }

  .main .section02 .sec-contain .bot .swiper-button-next, .main .section02 .sec-contain .bot .swiper-button-prev {
    width: 30px;
    height: 30px;
  }
}

.sub {
  width: 1272px;
  max-width: 67%;
  padding: 3.5rem 1.875% 0;
}

.sub .crawling-contents-top {
  padding-bottom: 5rem;
  text-align: center;
}

.sub .crawling-contents-top .category {
  display: inline-block;
  padding: 0.5rem 0.75rem 0.5rem;
  border: 1px solid #a0a0a0;
  font-family: 'Paperozi';
  font-size: 0.85rem;
}

.sub .crawling-contents-top .title {
  margin: 1.25rem auto 0;
  font-family: 'Paperozi';
  font-size: 2.1rem;
  word-break: keep-all;
  font-weight: 700;
}

.sub .crawling-contents-top .subtitle {
  margin: 1.25rem auto 0;
  font-family: 'Paperozi';
  font-size: 1.5rem;
  font-weight: 300;
  word-break: keep-all;
}

.sub .crawling-contents-top .img {
  display: block;
  max-width: 100%;
  margin: 2.5rem auto 0;
}

.sub .crawling-contents-top .video {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  margin-top: 2.5rem;
  overflow: hidden;
}

.sub .crawling-contents-top .video iframe,
.sub .crawling-contents-top .video object,
.sub .crawling-contents-top .video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sub .crawling-contents-top .text {
  margin-top: 3rem;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.45;
  text-align: justify;
  word-break: break-all;
}

.sub .crawling-contents-top .by {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 2.5rem;
}

.sub .crawling-contents-top .by > span {
  margin: 2.5px 10px 2.5px 0;
  font-size: 0.8rem;
  font-weight: 300;
  word-break: keep-all;
  text-align: right;
}

.sub .crawling-contents-top .by > span > b {
  font-weight: 500;
}

.sub .crawling-contents-top .by > span:last-child {
  margin-right: 0;
}

.sub .crawling-contents-top .by i, .sub .crawling-contents-top .by svg, .sub .crawling-contents-top .by path {
  color: var(--theme-color1);
  margin-right: 10px;
}

.sub .crawling-contents-textbox {
  padding-bottom: 5rem;
}

.sub .crawling-contents-textbox .mo {
  display: none;
}

.sub .crawling-contents-textbox .tablet {
  display: none;
}

.sub .crawling-contents-textbox h3 {
  position: relative;
  margin-bottom: 2.5rem;
  text-align: center;
}

.sub .crawling-contents-textbox h3::before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 42.5%;
  width: 100%;
  height: 1px;
  margin-top: -0.5px;
  background-color: #a0a0a0;
  z-index: 1;
}

.sub .crawling-contents-textbox h3 > span {
  position: relative;
  display: inline-block;
  max-width: 90%;
  padding: 0 1rem;
  font-family: 'Paperozi';
  font-size: 1.75rem;
  font-weight: 700;
  background-color: #fff;
  word-break: keep-all;
  z-index: 2;
}

.sub .crawling-contents-textbox h3:last-child {
  margin-bottom: 0;
}

.sub .crawling-contents-textbox h3.qna {
  margin-bottom: 1rem;
  text-align: left;
}

.sub .crawling-contents-textbox h3.qna span {
  padding-left: 0;
  color: #4c51a2;
}

.sub .crawling-contents-textbox h4 {
  margin: 0 auto 2.5rem;
  text-align: center;
}

.sub .crawling-contents-textbox h4::before {
  display: block;
  content: "";
  width: 2px;
  height: 50px;
  margin: 0 auto 1.5rem;
  background-color: #000000;
}

.sub .crawling-contents-textbox h4 > span {
  font-family: 'Paperozi';
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.55;
  word-break: keep-all;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(80%, #fff0f0), color-stop(10%, transparent));
  background: linear-gradient(to top, #fff0f0 80%, transparent 10%);
}

.sub .crawling-contents-textbox h4:last-child {
  margin-bottom: 0;
}

.sub .crawling-contents-textbox h4.none::before {
  display: none;
}

.sub .crawling-contents-textbox h5 {
  font-size: 1.05rem;
  line-height: 1.25;
  padding-bottom: 0.5rem;
}

.sub .crawling-contents-textbox h5.qna_title {
  margin-bottom: 1rem;
  font-family: 'Paperozi';
  font-weight: 400;
  color: #4c51a2;
}

.sub .crawling-contents-textbox p {
  padding-bottom: 2.5rem;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.5;
  word-break: break-all;
  text-align: justify;
}

.sub .crawling-contents-textbox a {
  display: inline-block;
}

.sub .crawling-contents-textbox b {
  font-weight: 500;
}

.sub .crawling-contents-textbox small {
  font-size: 80%;
}

.sub .crawling-contents-textbox img {
  display: block;
  max-width: 100%;
  width: 100%;
}

.sub .crawling-contents-textbox .img {
  text-align: center;
}

.sub .crawling-contents-textbox .img > span {
  display: inline-block;
  margin-bottom: -5.75px;
}

.sub .crawling-contents-textbox .img > span small {
  display: block;
  padding: 0.5rem 3px 0 0;
  font-size: 0.75rem;
  font-weight: 300;
  color: #565656;
  text-align: right;
  word-break: keep-all;
}

.sub .crawling-contents-textbox .video {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  margin-bottom: 1.75rem;
  overflow: hidden;
}

.sub .crawling-contents-textbox .video iframe,
.sub .crawling-contents-textbox .video object,
.sub .crawling-contents-textbox .video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sub .crawling-contents-textbox .video:last-child {
  margin-bottom: 0;
}

.sub .crawling-contents-textbox .table {
  margin-bottom: 2.5rem;
  overflow: auto;
}

.sub .crawling-contents-textbox .table table {
  width: 100%;
  border-right: 1px solid #818189;
}

.sub .crawling-contents-textbox .table table th, .sub .crawling-contents-textbox .table table td {
  padding: 0.5rem 1%;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.65;
  border: 1px solid #818189;
  word-break: break-all;
  text-align: justify;
}

.sub .crawling-contents-textbox .table table th:last-child, .sub .crawling-contents-textbox .table table td:last-child {
  border-right: none;
}

.sub .crawling-contents-textbox .table table th {
  font-weight: 500;
  background-color: #c0c2d8;
  text-align: center;
  word-break: keep-all;
}

.sub .crawling-contents-textbox .table table .th {
  font-weight: 500;
  background-color: #c0c2d8;
  text-align: center;
  word-break: keep-all;
}

.sub .crawling-contents-textbox .table table .td {
  background-color: #eaeaf2;
}

.sub .crawling-contents-textbox .table table thead th {
  border-bottom: none;
}

.sub .crawling-contents-textbox .table .center td {
  text-align: center;
  word-break: keep-all;
}

.sub .crawling-contents-textbox .table:last-child {
  margin-bottom: 0;
}

.sub .crawling-contents-textbox .table:focus {
  outline: none;
}

.sub .crawling-contents-textbox .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 100%;
  padding-bottom: 2.5rem;
}

.sub .crawling-contents-textbox .flex > span {
  display: inline-block;
  margin-right: 1.5rem;
}

.sub .crawling-contents-textbox .flex > span:last-child {
  margin-right: 0;
}

.sub .crawling-contents-textbox .flex02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 100%;
  padding-bottom: 2.5rem;
}

.sub .crawling-contents-textbox .text-left {
  text-align: left;
}

.sub .crawling-contents-textbox .text-center {
  text-align: center;
  word-break: keep-all;
}

.sub .crawling-contents-textbox .text-right {
  text-align: right;
}

.sub .crawling-contents-textbox .keepall {
  word-break: keep-all;
}

.sub .crawling-contents-textbox .gmarketM {
  font-family: 'Paperozi';
  font-weight: normal;
}

.sub .crawling-contents-textbox .gmarketB {
  font-family: 'Paperozi';
}

.sub .crawling-contents-textbox .align-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sub .crawling-contents-textbox .algin-end {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.sub .crawling-contents-textbox .just-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.sub .crawling-contents-textbox .just-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}

.sub .crawling-contents-textbox .flex-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.sub .crawling-contents-textbox h5:last-child, .sub .crawling-contents-textbox p:last-child, .sub .crawling-contents-textbox .flex:last-child, .sub .crawling-contents-textbox .flex02:last-child {
  padding-bottom: 0;
}

.sub .crawling-contents-textbox .box01 {
  padding-top: 2rem;
  padding-right: 4%;
  padding-left: 4%;
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-radius: 1.5rem;
  background-color: #f2f2f3;
}

.sub .crawling-contents-textbox .box01:last-child {
  margin-bottom: 0;
}

.sub .crawling-contents-textbox .tag01 {
  display: inline-block;
  padding: 0.3rem 0.75rem 0.35rem;
  margin-bottom: 0.75rem;
  border-radius: 1.25rem;
  background-color: #4c51a2;
  color: #fff;
  word-break: keep-all;
}

.sub .crawling-contents-textbox .tag01:last-child {
  margin-bottom: 0;
}

.sub .fw500 {
  font-weight: 500 !important;
}

.function {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 1272px;
  max-width: 67%;
  padding: 0 1.875%;
  margin-left: 25%;
  margin-bottom: 1.5rem;
}

.function > span {
  font-family: 'Paperozi';
  font-size: 0.9rem;
  font-weight: bold;
}

.function .print,
.function .share {
  display: inline-block;
  min-height: 43px;
  padding: 0.35rem 0.75rem;
  border: 1px solid #a0a0a0;
  margin-left: 1rem;
  font-size: 0.9rem;
  font-family: 'Paperozi';
  font-weight: bold;
  cursor: pointer;
}

.function .print > b,
.function .share > b {
  color: #e8342f;
}

.function .share {
  display: block;
  margin-left: 0.5rem;
}

.function .share > b {
  color: #5831d9;
}

.function .share_wrap {
  position: relative;
}

.function .share_list {
  display: none;
  position: absolute;
  right: 0px;
  top: 42px;
  width: calc(100% - 0.5rem);
  padding: 0.35rem 0.75rem 0.75rem;
  border: 1px solid #a0a0a0;
  border-top: none;
  background-color: #fff;
  z-index: 3;
}

.function .share_list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.function .share_list > li > img {
  margin-right: 0.25rem;
  max-width: 32px;
}

.function .share_list > li > a {
  display: inline-block;
}

.function .share_list > li > a > span {
  display: block;
  font-size: 0.75rem;
}

.function .share_list > li:last-child {
  margin-bottom: 0;
}

.sub .quiz h5,
.sub .event h5 {
  display: inline-block;
  padding: 0.3rem 0.75rem 0.35rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 1.25rem;
  background-color: #4c51a2;
  color: #fff;
  word-break: keep-all;
}

.sub .quiz h5:last-child,
.sub .event h5:last-child {
  margin-bottom: 0;
}

.sub .quiz .top .input,
.sub .event .top .input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 0;
  border-top: 1px solid #a0a0a0;
}

.sub .quiz .top .input label,
.sub .event .top .input label {
  display: inline-block;
  width: 150px;
  padding-left: 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.sub .quiz .top .input input,
.sub .event .top .input input {
  display: inline-block;
  width: calc(100% - 190px);
  height: 40px;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  border: 1px solid #a0a0a0;
}

.sub .quiz .top .input > span,
.sub .event .top .input > span {
  float: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 50%;
}

.sub .quiz .bottom,
.sub .event .bottom {
  padding: 1.5rem 2rem;
  border-top: 1px solid #a0a0a0;
  border-bottom: 1px solid #a0a0a0;
  background-color: #f2f2f3;
}

.sub .quiz .bottom > p,
.sub .event .bottom > p {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.45;
}

.sub .quiz .bottom > p > b,
.sub .event .bottom > p > b {
  font-weight: 500;
}

.sub .quiz .bottom .agreement,
.sub .event .bottom .agreement {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrapa;
      flex-wrap: wrapa;
}

.sub .quiz .bottom .agreement > li,
.sub .event .bottom .agreement > li {
  margin-right: 2rem;
}

.sub .quiz .bottom .agreement > li input[type="radio"],
.sub .event .bottom .agreement > li input[type="radio"] {
  cursor: pointer;
}

.sub .quiz .bottom .agreement > li label,
.sub .event .bottom .agreement > li label {
  font-size: 0.9rem;
  cursor: pointer;
}

.sub .quiz .bottom .agreement > li:last-child,
.sub .event .bottom .agreement > li:last-child {
  margin: 0;
}

.sub .quiz #btnEvent,
.sub .event #btnEvent {
  display: block;
  width: 212px;
  height: 57px;
  margin: 2rem auto 0;
  font-size: 0.9rem;
  border-radius: 0.25rem;
  background-color: #e60012;
  color: #fff;
  cursor: pointer;
}

.sub .event .top .questions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: calc(100% - 190px);
}

.sub .event .top .questions p {
  margin-right: 1rem;
}

.sub .event .top .questions .btn_hint {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 300;
  padding: 0.35rem 0.75rem;
  border-radius: 1rem;
  background-color: #efeff1;
}

.sub .crawling-contents-textbox p.event_text {
  margin: 0 auto;
  font-family: 'Paperozi';
  font-size: 1.25rem;
  line-height: 1.65;
  text-align: center;
  word-break: keep-all;
  color: #8f000c;
}

.sub .crawling-contents-textbox p.event_text > b {
  font-weight: bold;
}

.sub .crawling-contents-textbox p.event_text > span {
  padding-top: 0.25rem;
  font-family: 'Paperozi';
  background-color: #820002;
  color: #fff;
}

.sub .crawling-contents-textbox p.event_text > span > span {
  font-family: 'Paperozi';
}

.sub .postcard01 .num {
  overflow: hidden;
}

.sub .postcard01 .num > b {
  display: inline-block;
  float: left;
  width: 30px;
  height: 30px;
  margin-right: 0.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 28px;
  border-radius: 100%;
  background-color: #e60012;
  color: #fff;
  text-align: center;
}

.sub .postcard01 .num > p {
  display: inline-block;
  float: left;
  max-width: calc(100% - (30px + 0.25rem));
  margin: 1px 0;
}

.sub .postcard01 .answer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sub .postcard01 .answer input {
  width: 70px;
  height: 35px;
  margin: 0 0.5rem;
  border: 1px solid #a0a0a0;
  text-align: center;
}

.sub .postcard02 .sender .input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 0;
  border-top: 1px solid #a0a0a0;
}

.sub .postcard02 .sender .input-title {
  display: inline-block;
  width: 150px;
  padding-left: 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.sub .postcard02 .sender .input-text {
  display: inline-block;
  width: calc(100% - 150px);
  height: 40px;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  border: 1px solid #a0a0a0;
}

.sub .postcard02 .sender .input-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: calc(100% - 150px);
}

.sub .postcard02 .sender .input-list > li {
  display: inline-block;
  margin: 2.5px 1rem 2.5px 0;
}

.sub .postcard02 .sender .input-list > li label,
.sub .postcard02 .sender .input-list > li input[type="radio"] {
  font-size: 0.9rem;
  font-weight: 300;
  cursor: pointer;
}

.sub .postcard02 .sender .input-list > li:last-child {
  margin-right: 0;
}

.sub .postcard02 .sender .input-btn {
  display: inline-block;
  font-size: 0.9rem;
  width: 120px;
  line-height: 40px;
  background-color: #707070;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.sub .postcard02 .sender .input-wrap {
  display: inline-block;
  width: calc(100% - 150px);
}

.sub .postcard02 .sender .input-wrap > p {
  padding: 0 0 0.25rem;
}

.sub .postcard02 .sender .input-wrap .input-list {
  width: 100%;
}

.sub .postcard02 .sender .input-wrap02 {
  display: inline-block;
  width: calc(100% - 150px);
}

.sub .postcard02 .sender .input-wrap02 > div {
  margin-bottom: 0.5rem;
}

.sub .postcard02 .sender .input-wrap02 > div > .input-text {
  width: 100%;
}

.sub .postcard02 .sender .input-wrap02 > div:last-child {
  margin: 0;
}

.sub .postcard02 .sender .input.name .input-text {
  max-width: 200px;
}

.sub .postcard02 .sender .input.email .input-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sub .postcard02 .sender .input.email .input-wrap > span {
  font-size: 0.9rem;
}

.sub .postcard02 .sender .input.email .input-text {
  width: 200px;
  max-width: calc((100% - 24.86px)/2);
}

.sub .postcard02 .sender .input.phone .input-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sub .postcard02 .sender .input.phone .input-wrap > span {
  font-size: 0.9rem;
}

.sub .postcard02 .sender .input.phone .input-text {
  width: 90px;
  max-width: calc((100% - 28.22px)/3);
}

.sub .postcard02 .sender .input.address .input-address {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sub .postcard02 .sender .input.address .input-address .input-text {
  width: 90px;
}

.sub .postcard02 .sender .input.address .input-address .input-btn {
  margin-left: 0.5rem;
}

.sub .postcard02 .sender .input.address .input-address > span {
  font-size: 0.9rem;
}

.sub .postcard02 .sender .bottom {
  padding: 1.5rem 2rem;
  border-top: 1px solid #a0a0a0;
  border-bottom: 1px solid #a0a0a0;
  background-color: #f2f2f3;
}

.sub .postcard02 .sender .bottom > p {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.45;
}

.sub .postcard02 .sender .bottom > p > b {
  font-weight: 500;
}

.sub .postcard02 .sender .bottom .agreement {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.sub .postcard02 .sender .bottom .agreement > li {
  display: inline-block;
  margin-right: 1rem;
}

.sub .postcard02 .sender .bottom .agreement > li label,
.sub .postcard02 .sender .bottom .agreement > li input[type="radio"] {
  font-size: 0.9rem;
  cursor: pointer;
}

.sub .postcard02 .sender .bottom .agreement > li:last-child {
  margin: 0;
}

.sub .postcard02 .participate {
  border-bottom: 1px solid #a0a0a0;
}

.sub .postcard02 .participate .top {
  padding: 1rem 2.5%;
  border-top: 1px solid #a0a0a0;
}

.sub .postcard02 .participate .top > p {
  padding: 0 0 1rem;
}

.sub .postcard02 .participate .input > input[type="radio"] {
  cursor: pointer;
}

.sub .postcard02 .participate .input > label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #e60012;
  cursor: pointer;
}

.sub .postcard02 .participate .input02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sub .postcard02 .participate .input02 .input-title {
  display: inline-block;
  width: 180px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #e60012;
}

.sub .postcard02 .participate .input02 .input-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: calc(100% - 180px);
}

.sub .postcard02 .participate .input02 .input-list > li {
  display: inline-block;
  margin: 5px 1rem 5px 0;
}

.sub .postcard02 .participate .input02 .input-list > li > input[type="radio"] {
  cursor: pointer;
}

.sub .postcard02 .participate .input02 .input-list > li > label {
  font-size: 0.9rem;
  font-weight: 300;
  cursor: pointer;
}

.sub .postcard02 .participate .input02 .input-list > li:last-child {
  margin-right: 0;
}

.sub .postcard02 .participate .input03 {
  padding: 1rem 2.5%;
  border-top: 1px solid #a0a0a0;
}

.sub .postcard02 .participate .input03 > p {
  padding: 0 0 1rem;
}

.sub .postcard02 .participate .input03 > textarea {
  display: block;
  width: 100%;
  height: 150px;
  padding: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.25;
  border: 1px solid #a0a0a0;
  overflow: auto;
}

.sub .postcard02 .btn_submit {
  display: block !important;
  width: 212px;
  height: 57px;
  margin: 2rem auto 0;
  font-size: 0.9rem;
  line-height: 57px;
  border-radius: 0.25rem;
  background-color: #e60012;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.sub .subscribe {
  position: relative;
}

.sub .subscribe::before {
  display: block;
  content: "";
  width: 100%;
  max-width: 460px;
  height: 65px;
  margin: 0 auto;
  border-radius: 0.5rem;
  border: 1px solid #a0a0a0;
  background-color: #f2f2f3;
}

.sub .subscribe .label01_01,
.sub .subscribe .label01_02,
.sub .subscribe .label01_03 {
  position: absolute;
  left: calc(50% - (88.25px + 0.75rem));
  top: 0;
  min-width: 85px;
  margin: calc((65px - 22px)/2) 0;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  z-index: 2;
}

.sub .subscribe .label01_01 input[type="radio"],
.sub .subscribe .label01_02 input[type="radio"],
.sub .subscribe .label01_03 input[type="radio"] {
  cursor: pointer;
}

.sub .subscribe .label01_01 > label,
.sub .subscribe .label01_02 > label,
.sub .subscribe .label01_03 > label {
  font-size: 0.9rem;
  cursor: pointer;
}

.sub .subscribe .label01_02 {
  left: 50%;
}

.sub .subscribe .label01_03 {
  left: calc(50% + (88.25px + 0.75rem));
}

.sub .subscribe .subscribe_send,
.sub .subscribe .subscribe_change,
.sub .subscribe .subscribe_cancle {
  margin-top: 2rem;
}

.sub .subscribe .input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 0;
  border-top: 1px solid #a0a0a0;
}

.sub .subscribe .input label {
  display: inline-block;
  width: 150px;
  padding-left: 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.sub .subscribe .input input {
  display: inline-block;
  width: calc(100% - 190px);
  height: 40px;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  border: 1px solid #a0a0a0;
}

.sub .subscribe .input > span {
  float: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 50%;
}

.sub .subscribe .input .address {
  width: calc(100% - 190px);
}

.sub .subscribe .input .address > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0.5rem;
}

.sub .subscribe .input .address > span > input {
  width: 100%;
}

.sub .subscribe .input .address > span > span {
  font-size: 0.9rem;
}

.sub .subscribe .input .address > span:last-child {
  margin-bottom: 0;
}

.sub .subscribe .input .address > span.address_find > input {
  width: 90px;
}

.sub .subscribe .input .address > span.address_find > a {
  display: inline-block;
  font-size: 0.9rem;
  width: 120px;
  margin-left: 0.5rem;
  line-height: 40px;
  background-color: #707070;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.sub .subscribe .agreement_wrap {
  padding: 1.5rem 2rem;
  border-top: 1px solid #a0a0a0;
  border-bottom: 1px solid #a0a0a0;
  background-color: #f2f2f3;
}

.sub .subscribe .agreement_wrap > p {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.45;
}

.sub .subscribe .agreement_wrap > p > b {
  font-weight: 500;
}

.sub .subscribe .agreement_wrap .agreement {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.sub .subscribe .agreement_wrap .agreement > li {
  margin-right: 1rem;
}

.sub .subscribe .agreement_wrap .agreement > li input[type="radio"] {
  cursor: pointer;
}

.sub .subscribe .agreement_wrap .agreement > li > label {
  font-size: 0.9rem;
  cursor: pointer;
}

.sub .subscribe .agreement_wrap .agreement > li:last-child {
  margin: 0;
}

.sub .subscribe .btn_submit {
  display: block;
  width: 212px;
  height: 57px;
  margin: 2rem auto 0;
  font-size: 0.9rem;
  line-height: 57px;
  border-radius: 0.25rem;
  background-color: #e60012;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.sub .webtoon {
  min-width: 50%;
  max-width: 50%;
  margin-right: 0 !important;
  overflow: hidden;
}

.sub .webtoon > .img {
  float: left;
  padding: 0;
  margin-right: 1rem;
}

.sub .webtoon > .img > span {
  display: block;
  margin: 0;
}

.sub .webtoon > .webtoon-text {
  display: inline-block;
  float: left;
  width: calc(100% - (206px + 1rem));
  text-align: left;
  word-break: keep-all;
}

.sub .webtoon > .webtoon-text > span {
  display: block;
  margin: 0.5rem 1rem 0.75rem 0;
  line-height: 1.25;
}

.sub .webtoon > .webtoon-text > a {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  border: 1px solid #000000;
}

/*Ipad Pro*/
@media (max-width: 1365px) {
  .sub {
    width: 100%;
    padding: 3.5rem 2.5% 0;
    padding-inline: 0;
    max-width: none;
  }
  .sub-inner {
    padding-inline: 2.5%;
  }
  .sub .crawling-contents-top .by {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .sub .crawling-contents-top .by > span {
    margin-right: 0;
    text-align: right;
    word-break: normal;
    line-height: 1.25;
  }
  .sub .crawling-contents-top .by > span:first-child {
    margin-top: 0;
  }
  .sub .crawling-contents-top .by > span:last-child {
    margin-bottom: 0;
  }
  .function {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    max-width: none;
    padding: 0;
    margin-left: 0;
  }
  .function .print {
    display: none;
  }
  .function .share {
    margin-left: 1rem;
  }
  .function .share_list {
    width: calc(100% - 1rem);
  }
  
}

/*Ipad*/
@media (max-width: 991.98px) {
  .sub {
    padding: 3.5rem 5% 0;
    padding-inline: 0;
  }
  .sub-inner {
    padding-inline: 5%;
  }
  .sub .crawling-contents-textbox .flex.flex_768 {
    display: block;
  }
  .sub .crawling-contents-textbox .flex.flex_768 > span {
    display: block;
    width: 100%;
    min-width: auto !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    margin-bottom: 2.5rem;
  }
  .sub .crawling-contents-textbox .flex.flex_768 > span:last-child {
    margin-bottom: 0;
  }
  .sub .crawling-contents-textbox .flex.flex_768 .pc {
    display: none !important;
  }
  .sub .crawling-contents-textbox .pc.tablet_none {
    display: none !important;
  }
  .sub .crawling-contents-textbox .tablet {
    display: inline !important;
  }
  .sub .crawling-contents-textbox .tablet.Block {
    display: block !important;
  }
  .sub .crawling-contents-textbox .tablet.InBlock {
    display: inline-block !important;
  }
  .sub .crawling-contents-textbox .tablet.Flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  
  .sub .event .top .questions p {
    width: 100%;
    margin-right: 0;
    text-align: left;
    word-break: normal;
  }
  .sub .event .top .questions .btn_hint {
    margin-top: 0.25rem;
  }
}

/*Tablet*/
@media (max-width: 767.98px) {
  .sub .crawling-contents-textbox .flex {
    display: block;
  }
  .sub .crawling-contents-textbox .flex > span {
    display: block;
    width: 100%;
    min-width: auto !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    margin-bottom: 2.5rem;
  }
  .sub .crawling-contents-textbox .flex > span:last-child {
    margin-bottom: 0;
  }
  .sub .quiz .top .input input,
  .sub .event .top .input input {
    width: calc(100% - 150px);
  }
  .sub .quiz .top .input > span,
  .sub .event .top .input > span {
    width: 100%;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #a0a0a0;
  }
  .sub .quiz .top .input > span:last-child,
  .sub .event .top .input > span:last-child {
    padding: 0;
    margin: 0;
    border: none;
  }
  .sub .subscribe .input input {
    width: calc(100% - 150px);
  }
  .sub .subscribe .input > span {
    width: 100%;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #a0a0a0;
  }
  .sub .subscribe .input > span:last-child {
    padding: 0;
    margin: 0;
    border: none;
  }
  .sub .subscribe .input .address {
    width: calc(100% - 150px);
  }
}

/*Mobile*/
@media (max-width: 575.98px) {
  .sub {
    padding: 3rem 5% 0;
    padding-inline: 0;
  }
  .sub-inner {
    padding-inline: 5%;
  }
  .sub .crawling-contents-top {
    padding-bottom: 4.25rem;
  }
  .sub .crawling-contents-top .title {
    max-width: none !important;
    font-size: 1.5rem;
  }
  .sub .crawling-contents-top .subtitle {
    max-width: none !important;
    font-size: 1.15rem;
  }
  .sub .crawling-contents-top .img {
    margin-top: 1.75rem;
  }
  .sub .crawling-contents-top .video {
    margin-top: 1.75rem;
  }
  .sub .crawling-contents-top .text {
    margin-top: 1.75rem;
    font-size: 0.85rem;
  }
  .sub .crawling-contents-top .by {
    margin-top: 1.25rem;
  }
  .sub .crawling-contents-textbox {
    padding-bottom: 4.25rem;
  }
  .sub .crawling-contents-textbox .pc {
    display: none !important;
  }
  .sub .crawling-contents-textbox .tablet.none {
    display: none !important;
  }
  .sub .crawling-contents-textbox .mo {
    display: inline !important;
  }
  .sub .crawling-contents-textbox .mo.Block {
    display: block !important;
  }
  .sub .crawling-contents-textbox .mo.InBlock {
    display: inline-block !important;
  }
  .sub .crawling-contents-textbox .mo.Flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .sub .crawling-contents-textbox h3 {
    margin-bottom: 1.25rem;
  }
  .sub .crawling-contents-textbox h3::before {
    display: none;
  }
  .sub .crawling-contents-textbox h3 > span {
    display: block;
    max-width: none !important;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1.4;
    text-align: left;
  }
  .sub .crawling-contents-textbox h4 {
    margin: 0 auto 1.75rem;
  }
  .sub .crawling-contents-textbox h4::before {
    width: 1px;
    height: 40px;
    margin: 0 auto 1rem;
  }
  .sub .crawling-contents-textbox h4 > span {
    font-size: 1.05rem;
  }
  .sub .crawling-contents-textbox h5 {
    font-size: 0.95rem;
  }
  .sub .crawling-contents-textbox p {
    font-size: 0.85rem;
    padding-bottom: 1.75rem;
  }
  .sub .crawling-contents-textbox .table {
    margin-bottom: 1.75rem;
  }
  .sub .crawling-contents-textbox .table table th,
  .sub .crawling-contents-textbox .table table td {
    font-size: 0.85rem;
  }
  .sub .crawling-contents-textbox .flex {
    padding-bottom: 1.75rem;
  }
  .sub .crawling-contents-textbox .flex > span {
    margin-bottom: 1.75rem;
  }
  .sub .crawling-contents-textbox .flex02 {
    padding-bottom: 1.75rem;
  }
  .sub .crawling-contents-textbox .flex.flex_768 > span {
    margin-bottom: 1.75rem;
  }
  .sub .crawling-contents-textbox .box01 {
    border-radius: 1rem;
    padding-top: 1.75rem;
    padding-right: 5% !important;
    padding-bottom: 1.75rem;
    padding-left: 5% !important;
    margin-bottom: 1.75rem;
  }
  .sub .crawling-contents-textbox .tag01 {
    padding: 0.3rem 0.75rem 0.4rem;
  }
  .sub.board {
    padding-right: 2.5%;
    padding-left: 2.5%;
  }
  .function > span {
    font-size: 0.85rem;
  }
  .function .print,
  .function .share {
    min-height: 42px;
    font-size: 0.85rem;
  }
  .function .share {
    margin-left: 0.75rem;
  }
  .function .share_list {
    top: 41px;
    width: calc(100% - 0.75rem);
  }
  .function .share_list > li > a > span {
    font-size: 0.7rem;
  }
  
  .sub .quiz .top .input,
  .sub .event .top .input {
    padding: 0.75rem 0;
  }
  .sub .quiz .top .input label,
  .sub .event .top .input label {
    width: 100px;
    padding-left: 5%;
    font-size: 0.85rem;
  }
  .sub .quiz .top .input input,
  .sub .event .top .input input {
    width: calc(100% - 100px);
  }
  .sub .quiz .top .input > span,
  .sub .event .top .input > span {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .sub .quiz .bottom,
  .sub .event .bottom {
    padding: 1.5rem 5%;
  }
  .sub .quiz .bottom > p,
  .sub .event .bottom > p {
    font-size: 0.85rem;
  }
  .sub .quiz .bottom .agreement > li label,
  .sub .event .bottom .agreement > li label {
    font-size: 0.85rem;
  }
  .sub .event .top .questions {
    width: calc(100% - 100px);
  }
  .sub .event .top .questions .btn_hint {
    font-size: 0.75rem;
  }
  .sub .crawling-contents-textbox p.event_text {
    font-size: 1.05rem;
    max-width: 90% !important;
  }
  .sub .postcard01 .num {
    margin-bottom: 0.5rem !important;
  }
  .sub .postcard01 .num > b {
    width: 25px;
    height: 25px;
    font-size: 0.85rem;
    line-height: 23px;
  }
  .sub .postcard01 .num > p {
    max-width: calc(100% - (25px + 0.25rem));
    margin: 0.5px 0;
  }
  .sub .postcard01 .num:last-child {
    margin-bottom: 0 !important;
  }
  .sub .postcard02 .sender .input-title {
    width: 113px;
    padding: 0 5%;
    font-size: 0.85rem;
  }
  .sub .postcard02 .sender .input-text {
    width: calc(100% - 113px);
  }
  .sub .postcard02 .sender .input-list {
    width: calc(100% - 113px);
  }
  .sub .postcard02 .sender .input-list > li label {
    font-size: 0.85rem;
  }
  .sub .postcard02 .sender .input-wrap {
    width: calc(100% - 113px);
  }
  .sub .postcard02 .sender .input-wrap > p {
    text-align: left;
  }
  .sub .postcard02 .sender .input-wrap02 {
    width: calc(100% - 113px);
  }
  .sub .postcard02 .sender .input.address .input-address .input-text {
    width: calc((100% - 14.11px)/2);
  }
  .sub .postcard02 .sender .input.address .input-address .input-btn {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
  }
  .sub .postcard02 .sender .bottom {
    padding: 1.5rem 5%;
  }
  .sub .postcard02 .sender .bottom > p {
    font-size: 0.85rem;
  }
  .sub .postcard02 .sender .bottom .agreement > li label {
    font-size: 0.85rem;
  }
  .sub .postcard02 .participate .input > label {
    font-size: 0.85rem;
  }
  .sub .postcard02 .participate .input02 .input-title {
    width: 100%;
  }
  .sub .postcard02 .participate .input02 .input-list {
    width: 100%;
    max-width: 100%;
    margin-top: 0.25rem;
  }
  .sub .postcard02 .participate .input02 .input-list > li > label {
    font-size: 0.85rem;
  }
  .sub .postcard02 .participate .input03 > textarea {
    font-size: 0.85rem;
  }
  .sub .subscribe::before {
    height: 55px;
  }
  .sub .subscribe .label01_01,
  .sub .subscribe .label01_02,
  .sub .subscribe .label01_03 {
    margin: calc((55px - 22px)/2) 0;
  }
  .sub .subscribe .label01_01 > label,
  .sub .subscribe .label01_02 > label,
  .sub .subscribe .label01_03 > label {
    font-size: 0.85rem;
  }
  .sub .subscribe .input {
    padding: 0.75rem 0;
  }
  .sub .subscribe .input label {
    width: 100px;
    padding-left: 5%;
    font-size: 0.85rem;
  }
  .sub .subscribe .input input {
    width: calc(100% - 100px);
    font-size: 0.85rem;
  }
  .sub .subscribe .input > span {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .sub .subscribe .input .address {
    width: calc(100% - 100px);
  }
  .sub .subscribe .input .address > span > input {
    width: 100%;
  }
  .sub .subscribe .input .address > span > span {
    font-size: 0.85rem;
  }
  .sub .subscribe .input .address > span.address_find > input {
    width: calc((100% - 10px)/2);
  }
  .sub .subscribe .input .address > span.address_find > a {
    width: calc((100% - 10px)/2);
    margin: 0 0 0 0.5rem;
    font-size: 0.85rem;
  }
  .sub .subscribe .agreement_wrap {
    padding: 1.5rem 5%;
  }
  .sub .subscribe .agreement_wrap > p {
    font-size: 0.85rem;
  }
  .sub .subscribe .agreement_wrap .agreement > li > label {
    font-size: 0.85rem;
  }
  .sub .webtoon > .img {
    width: 150px;
    margin-right: 0.75rem;
  }
  .sub .webtoon > .webtoon-text {
    width: calc(100% - (150px + 0.75rem));
    font-size: 0.7rem;
  }
  .sub .webtoon > .webtoon-text > span {
    margin: 0.25rem 0 0.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
  }
  .sub .webtoon > .webtoon-text > a {
    font-size: 0.6rem;
  }
}

/*Mobile(minimum)*/
@media (max-width: 369px) {
  .sub .subscribe .label01_01 {
    left: calc(50% - (85px + 0.35rem));
  }
  .sub .subscribe .label01_03 {
    left: calc(50% + (85px + 0.35rem));
  }
  .sub .subscribe .input .address > span.address_find > a {
    font-size: 0.75rem;
  }
}

@page {
  size: auto;
  margin: 5mm;
}

@media print {
  .scroll-top {
    display: none;
  }
}

@media print and (max-width: 1365px) {
  header {
    position: relative;
    padding-bottom: calc(1.25rem +  64px);
  }
  header .gnb {
    position: absolute;
  }
  nav {
    position: absolute;
    width: 100%;
    height: 96px;
    background-color: transparent;
  }
  nav .volume {
    position: absolute;
  }
  nav .menu {
    position: absolute;
  }
  nav .wrap {
    display: none;
  }
  section {
    margin-top: 0;
  }
}

@media print and (max-width: 767.98px) {
  header {
    padding-bottom: calc(1.25rem +  64px);
  }
}

@media print and (max-width: 575.98px) {
  header {
    padding-bottom: calc(1rem +  49px);
  }
  nav {
    height: 70px;
  }
}

.movement {
  margin-block: 30px;
  padding: 40px;
  background-color: #f2f2f2;
}

.movement .wrap {
  display: flex;
  justify-content: space-between;
  text-align: center;
  font-size: 18px;
}

.movement .prev {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 15px;
}

.movement .next {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 10px;
}

.movement .curr {
  display: flex;
  justify-content: center;
  align-items: center;
}

.movement .prev,
.movement .next,
.movement .curr {
  flex: 1;
}


.movement .arrow {
  background-color: #fff;
  padding: 7px 20px;
  border: 1px solid #222;
  font-size: 90%;
  display: block;
  align-content: center;
  line-height: 1;
}

.movement .arrow:hover {
  background-color: #f7f7f7;
}

@media screen and (max-width: 1024px) {
  .movement .prev .category,
  .movement .next .category {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .movement {
    padding: 25px;
  }

  .movement .wrap {
    font-size: 16px;
  }

  .movement .arrow {
    font-size: 14px;
  }

  .movement .arrow span {
    display: none;
  }
}
/*# sourceMappingURL=style.css.map */

/* 
  변수 영역

  페이지 공통 변수를 관리합니다.
  공통레이아웃에 사용될 크기, 혹은 간격, 컬러가이드 등이 포함됩니다.
*/

:root {
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
  --sar: env(safe-area-inset-right);
  --sal: env(safe-area-inset-left);

  /* layout */
  --outer-size: 1700px;
  --outer-gap: 30px;
  --inner-size: 1280px;
  --inner-gap: 20px;

  /* gap */
  --side-gap-l: 30px;
  --side-gap-m: 20px;
  --side-gap-s: 10px;

  --tb-gap-xl: 80px; /* top, bottom */
  --tb-gap-l: 80px;
  --tb-gap-m: 50px;
  --tb-gap-s: 25px;
  --tb-gap-xs: 10px;

  /* color */
  accent-color: var(--text-base);

  /* gray scale */
  --gray10: #ebeaea;
  --gray30: #c2c1c1;
  --gray50: #999797;
  --gray70: #707070;
  --gray80: #555;

  /* gray scale(dark mode) */
  --dark-gray10: #f9fafc;
  --dark-gray20: #f2f4f6;
  --dark-gray40: #788893;
  --dark-gray70: #303550;
  --dark-gray80: #2a2e47;
  --dark-gray90: #1e233e;
  --dark-gray100: #0c0e18;

  /* neon color */
  --neon-magenta: #ff0081;
  --neon-violet: #8b03ff;
  --neon-teal: #27d4b6;
  --neon-lightgreen: #33ff04;
  --neon-lime: #bdea14;
  --neon-orange: #ff9b00;
  --neon-hotpink: #fc00ff;
  --neon-mint: #00ffa0;
  --neon-sky: #008fff;
  --neon-yellow: #d8e118;
  --neon-purple: #3d144c;

  /* pastel color */
  --pastel-red: #ffdddd;
  --pastel-orange: #ffeedd;
  --pastel-yellow: #ffffdd;
  --pastel-green: #eeffdd;
  --pastel-teal: #ddfff6;
  --pastel-blue: #ddffff;
  --pastel-indigo: #ddf6ff;
  --pastel-lavender: #dde5ff;
  --pastel-purple : #e5ddff;

  /* theme color */
  --primary-color: #07C;
  --primary-color-light: #cddcfb;
  --secondary-color: #aacd06;
  --secondary-color-light: #e1eecd;
  --secondary-color-deep: #009e96; 
  --point-color: #009e96;
  --point-color-light: rgb(195, 238, 236);
  --text-base: #1d1d1d;
  
  /* extended color */
  --bg-color: #fff;
  --bg-sub: #fbd17b;

  /* alert color */
  --success-color: #2bff00;
  --success-light-color: #f0faee;
  --warning-color: #ffc84b;
  --warning-light-color: #fff7e4;
  --error-color: #d7260d;
  --error-light-color: #ffe9e9;

  /* SNS color */
  --naver-green: #2fbd35;
  --naver-black: #121212;
  --kakao-yellow: #ffe000;
  --kakao-brown: #391b1b;

  /* lib color */
  --swiper-theme-color : #000;
}

@media screen and (max-width: 640px) {
  :root {
  /* gap */
  --side-gap-l: 20px;
  --side-gap-m: 15px;
  --side-gap-s: 10px;

  --tb-gap-xl: 80px;
  /* top, bottom */
  --tb-gap-l: 50px;
  --tb-gap-m: 30px;
  --tb-gap-s: 20px;
  --tb-gap-xs: 10px;
  }
}
@media screen and (max-width: 475px) {
  :root {
  --outer-gap: 20px;
  --inner-gap: 15px;

  /* gap */
  --side-gap-l: 20px;
  --side-gap-m: 15px;
  --side-gap-s: 10px;

  --tb-gap-xl: 60px;
  /* top, bottom */
  --tb-gap-l: 40px;
  --tb-gap-m: 20px;
  --tb-gap-s: 15px;
  --tb-gap-xs: 10px;
  }
}


/* 
  레이아웃에 관련한 항목입니다.
  flex, grid레이아웃, 스크롤 바, 콘텐츠 드래그 시 배경색상 변경,
  대화형 요소 기본 서식 초기화 등의 내용이 포함됩니다.
*/

/* layout */
.flex {display: flex;}
.flex-center {display: flex; justify-content: center; align-items: center;}
.flex-col {display: flex; flex-direction: column;}
.flex-col-center {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.flex1 {flex: 1;}

.i-auto {
  margin-inline: auto;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

.refresh {display: none !important; border: 1px solid #009e96;}

.j-center {justify-content: center;}
.j-between {justify-content: space-between;}
.a-center {align-items: center;}

.flow-root {display: flow-root;}
.flow-root .float-l {float: left;}
.flow-root .float-r {float: right;}
.flow-root [class*="float-"] {display: block;}

@media screen and (max-width: 1200px) {
  .float-break-1200 .float-l,
  .float-break-1200 .float-r { float: none; }
  .float-break-1200 [class*="float-"] {margin-inline: auto; margin-bottom: var(--tb-gap-m);}
}

@media screen and (max-width: 1024px) {
  .float-break-1024 .float-l,
  .float-break-1024 .float-r { float: none; }
  .float-break-1024 [class*="float-"] {margin-inline: auto; margin-bottom: var(--tb-gap-m);}
  .float-break-1024 .mb0 {margin-bottom: 0;}
}

@media screen and (max-width: 768px) {
  .float-break-768 .float-l,
  .float-break-768 .float-r { float: none; }
  .float-break-768 [class*="float-"] {margin-inline: auto; margin-bottom: var(--tb-gap-m);}
  .float-break-768 .mb0 {margin-bottom: 0;}
}

@media screen and (max-width: 640px) {
  .float-break-640 .float-l,
  .float-break-640 .float-r { float: none; }
  .float-break-640 [class*="float-"] {margin-inline: auto; margin-bottom: var(--tb-gap-m);}
  .float-break-640 .mb0 {margin-bottom: 0;}
}

@media screen and (max-width: 475px) {
  .float-break-475 .float-l,
  .float-break-475 .float-r { float: none; }
  .float-break-475 [class*="float-"] {margin-inline: auto; margin-bottom: var(--tb-gap-m);}
  .float-break-475 .mb0 {margin-bottom: 0;}
}

@media screen and (max-width: 375px) {
  .float-break-375 .float-l,
  .float-break-375 .float-r { float: none; }
  .float-break-375 [class*="float-"] {margin-inline: auto; margin-bottom: var(--tb-gap-m);}
  .float-break-375 .mb0 {margin-bottom: 0;}
}

@media screen and (max-width: 320px) {
  .float-break-320 .float-l,
  .float-break-320 .float-r { float: none; }
  .float-break-320 [class*="float-"] {margin-inline: auto; margin-bottom: var(--tb-gap-m);}
  .float-break-320 .mb0 {margin-bottom: 0;}
}

.gap30 {gap: 30px;}
.gap20 {gap: 20px;}
.gap10 {gap: 10px;}

.gap-xs {gap: var(--tb-gap-xs);}
.gap-s {gap: var(--tb-gap-s);}
.gap-m {gap: var(--tb-gap-m);}
.gap-l {gap: var(--tb-gap-l);}
.gap-xl {gap: var(--tb-gap-xl);}

.gap-m-xs {gap: var(--tb-gap-m) var(--tb-gap-xs);}
.gap-m-s {gap: var(--tb-gap-m) var(--tb-gap-s);}
.gap-m-m {gap: var(--tb-gap-m) var(--tb-gap-m);}
.gap-m-l {gap: var(--tb-gap-m) var(--tb-gap-l);}
.gap-m-xl {gap: var(--tb-gap-m) var(--tb-gap-xl);}

.block {display: block;}

.align-c {align-items: center !important;}

.line-px1 {width: 100%; height: 1px; display: block; background-color: var(--gray30);}

.i-flex {display: inline-flex;}
.i-flex-center {display: inline-flex; justify-content: center; align-items: center;}
.i-flex-col {display: inline-flex; flex-direction: column;}
.i-flex-col-center {display: inline-flex; flex-direction: column; justify-content: center; align-items: center;}

.grid {width: 100%; display: grid; grid-template-columns: repeat(var(--start-fr, 1), 1fr);}
.fr-5 {--start-fr: 5;}
.fr-4 {--start-fr: 4;}
.fr-3 {--start-fr: 3;}
.fr-2 {--start-fr: 2;}

@media screen and (max-width: 1200px) {
  .fr-step1-1200 {grid-template-columns: repeat(calc(var(--start-fr) - 1), 1fr);}
  .fr-step2-1200 {grid-template-columns: repeat(calc(var(--start-fr) - 2), 1fr);}
  .fr-step3-1200 {grid-template-columns: repeat(calc(var(--start-fr) - 3), 1fr);}
}

@media screen and (max-width: 1024px) {
  .fr-step1-1024 {grid-template-columns: repeat(calc(var(--start-fr) - 1), 1fr);}
  .fr-step2-1024 {grid-template-columns: repeat(calc(var(--start-fr) - 2), 1fr);}
  .fr-step3-1024 {grid-template-columns: repeat(calc(var(--start-fr) - 3), 1fr);}
}

@media screen and (max-width: 768px) {
  .fr-step1-768 {grid-template-columns: repeat(calc(var(--start-fr) - 1), 1fr);}
  .fr-step2-768 {grid-template-columns: repeat(calc(var(--start-fr) - 2), 1fr);}
  .fr-step3-768 {grid-template-columns: repeat(calc(var(--start-fr) - 3), 1fr);}
}

@media screen and (max-width: 640px) {
  .fr-step1-640 {grid-template-columns: repeat(calc(var(--start-fr) - 1), 1fr);}
  .fr-step2-640 {grid-template-columns: repeat(calc(var(--start-fr) - 2), 1fr);}
  .fr-step3-640 {grid-template-columns: repeat(calc(var(--start-fr) - 3), 1fr);}
}

@media screen and (max-width: 475px) {
  .fr-step1-475 {grid-template-columns: repeat(calc(var(--start-fr) - 1), 1fr);}
  .fr-step2-475 {grid-template-columns: repeat(calc(var(--start-fr) - 2), 1fr);}
  .fr-step3-475 {grid-template-columns: repeat(calc(var(--start-fr) - 3), 1fr);}
}

@media screen and (max-width: 375px) {
  .fr-step1-375 {grid-template-columns: repeat(calc(var(--start-fr) - 1), 1fr);}
  .fr-step2-375 {grid-template-columns: repeat(calc(var(--start-fr) - 2), 1fr);}
  .fr-step3-375 {grid-template-columns: repeat(calc(var(--start-fr) - 3), 1fr);}
}

@media screen and (max-width: 320px) {
  .fr-step1-320 {grid-template-columns: repeat(calc(var(--start-fr) - 1), 1fr);}
  .fr-step2-320 {grid-template-columns: repeat(calc(var(--start-fr) - 2), 1fr);}
  .fr-step3-320 {grid-template-columns: repeat(calc(var(--start-fr) - 3), 1fr);}
}

/* ::-webkit-scrollbar {
  width: 16px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background-color: #fff;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.7);
  background-clip: padding-box;
  border: 3px solid transparent;
}
.table_overflow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-button {
  display: none;
} */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: var(--bg-color) 5000s ease-in-out 0s;
  -webkit-transition: var(--bg-color) 9999s ease-out;
}

.outer-wrap {
  width: 100%;
  max-width: var(--outer-size);
  padding: 0 var(--outer-gap);
}

.inner-wrap {
  width: 100%;
  max-width: var(--inner-size);
  padding: 0 var(--inner-gap);
}

.outer-wrap,
.inner-wrap {margin-inline: auto;}

/* 
  화면 출력에 관한 항목입니다.
  우선적용되어야 하는 내용이므로 important를 사용합니다.
*/

/* view */
.hide {display: none !important;}
.hidden {visibility: hidden !important;}
.op0 {opacity: 0 !important;}
.op1 {opacity: 1 !important;}

/* 
  UI간격에 관한 항목입니다.
  좌우 3가지, 상하 5가지 기준으로 구분합니다.
  추후 세분화되거나 삭제될 수 있습니다.
*/

/* gap */
/* margin */
.ml-l {margin-left: var(--side-gap-l);}
.ml-m {margin-left: var(--side-gap-m);}
.ml-s {margin-left: var(--side-gap-s);}

.mr-l {margin-right: var(--side-gap-l);}
.mr-m {margin-right: var(--side-gap-m);}
.mr-s {margin-right: var(--side-gap-s);}

.mt-xl {margin-top: var(--tb-gap-xl);}
.mt-l {margin-top: var(--tb-gap-l);}
.mt-m {margin-top: var(--tb-gap-m);}
.mt-s {margin-top: var(--tb-gap-s);}
.mt-xs {margin-top: var(--tb-gap-xs);}
.mt-0 {margin-top: 0 !important;}

.mb-xl {margin-bottom: var(--tb-gap-xl);}
.mb-l {margin-bottom: var(--tb-gap-l);}
.mb-m {margin-bottom: var(--tb-gap-m);}
.mb-s {margin-bottom: var(--tb-gap-s);}
.mb-xs {margin-bottom: var(--tb-gap-xs);}
/* padding */
.pl-l {padding-left: var(--side-gap-l);}
.pl-m {padding-left: var(--side-gap-m);}
.pl-s {padding-left: var(--side-gap-s);}

.pr-l {padding-right: var(--side-gap-l);}
.pr-m {padding-right: var(--side-gap-m);}
.pr-s {padding-right: var(--side-gap-s);}

.pt-xl {padding-top: var(--tb-gap-xl);}
.pt-l {padding-top: var(--tb-gap-l);}
.pt-m {padding-top: var(--tb-gap-m);}
.pt-s {padding-top: var(--tb-gap-s);}
.pt-xs {padding-top: var(--tb-gap-xs);}

.pb-xl {padding-bottom: var(--tb-gap-xl);}
.pb-l {padding-bottom: var(--tb-gap-l);}
.pb-m {padding-bottom: var(--tb-gap-m);}
.pb-s {padding-bottom: var(--tb-gap-s);}
.pb-xs {padding-bottom: var(--tb-gap-xs);}

/* 
  포지션 값을 지정합니다
*/

.pos-rel {position: relative;}
.pos-abs {position: absolute; top: 0; left: 0; z-index: 1;}
.pos-abs-center {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.pos-fx {position: fixed; top: 0; left: 0;}
.pos-static {position: static !important;}

/* 
  표 서식을 지정합니다.
  현재는 기본 표 서식만 존재합니다.
*/

/* table */
table {border-collapse: collapse;}
table .borderless {border: none !important;}

.table-layout-basic,
.table-layout-basic th,
.table-layout-basic td {border: 1px solid #ccc;}
.table-layout-basic th {background-color: #eee;}



table .diagonal {
  padding: 30px 10px;
  position: relative;
  background-image: linear-gradient(to left bottom, transparent calc(50% - 1px), var(--text-base), transparent calc(50% + 1px));
  background-size: 120% 120%;
  background-position: center;
}
table .diagonal .left,
table .diagonal .right {position: absolute;}
table .diagonal .left {bottom: 10px; left: 10px;}
table .diagonal .right {top: 10px; right: 10px;}

table .bg-pattern-diagonal {
  background: repeating-linear-gradient(-45deg, #eee, 2px, #fff 1px, #fff 7px);
}

/* 
  버튼 및 태그 서식을 지정합니다.
  3가지 크기로 구성합니다.
  모양에 따라 타입 클래스를 변경합니다.
  색상 변경은 text, background 클래스를 이용합니다.
*/

/* ui */
.bg-main {background-color: var(--primary-color) !important;}
.bg-sub {background-color: var(--secondary-color) !important;}
.bg-sub-deep {background-color: var(--secondary-color-deep) !important;}
.bg-point {background-color: var(--point-color) !important;}
.bg-gradient {background: var(--gradient-base) !important;}
.bg-txt {background-color: var(--text-base) !important;}
.bg-none {background-color: transparent !important;}
.bg-gray {background-color: #f2f2f2 !important;}

.border-main {border-color: var(--primary-color);}
.border-sub {border-color: var(--secondary-color);}
.border-point {border-color: var(--point-color);}

.type-round {border-radius: 20vw !important;}
.type-soft {border-radius: 10px !important;}
.type-rect {border-radius: 2px !important;}
.type-circle {border-radius: 50% !important;}

.btn {cursor: pointer;}
.btn:hover {filter: brightness(0.9);}
.btn,
.tag {
  width: max-content;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ededed;
}

.btn-l,
.tag-l {
  padding: 15px 30px;
  font-size: 1.25rem;
}
.btn-m,
.tag-m {
  padding: 10px 25px;
  font-size: 1rem;
}

.btn-s,
.tag-s {
  padding: 7px 20px;
  font-size: 0.9rem;
}

@media screen and (max-width: 1200px) {
  .btn-l,
  .tag-l {
    padding: 15px 30px;
    font-size: 1.1rem;
  }

  .btn-m,
  .tag-m {
    padding: 10px 25px;
    font-size: 0.85rem;
  }
}

@media screen and (max-width: 768px) {
  .btn-l,
  .tag-l {
    font-size: 0.9rem;
  }
}

.underline {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* 
  의사 클래스에 관한 내용입니다.
  html상에서 텍스트를 추가하거나
  의사 요소를 제거하기 위해 사용합니다.
*/

/* pseudo class */
.bf-attr::before {content: attr(-data-before);}
.af-attr::after {content: attr(-data-after);}

.bf-none::before,
.af-none::after {display: none !important;}

/* 
  실제 페이지 작성 시 사용하게 될 항목입니다.
*/

/* pages */
.border-box {
  border: 1px solid #ccc;
  padding: 30px;
}
.border-tb {
  border: 1px solid #ccc;
  border-width: 1px 0 1px 0;
}
.border-side {
  border: 1px solid #ccc;
  border-width: 0 1px 0 1px;
}

.border-main {border-color: var(--primary-color);}
.border-sub {border-color: var(--secondary-color);}
.border-point {border-color: var(--point-color);}
.border-point-light {border-color: var(--point-color-light);}

.line {
  width: 100%;
  height: 1px;
  background-color: #000;
}

.img {font-size: 0;}
.img img {
  width: auto;
  max-width: 100%;
  display: block;
}

.img-caption {
  margin-top: 5px;
  display: block;
  font-size: clamp(12px, 0.8rem, 16px);
  color: #aaa;
  text-wrap: wrap;
  word-break: keep-all;
  text-align: left;
}

/* js로 설정 */
.img-size-auto {
  width: var(--img-natural-size);
  margin: 0;
  display: block;
}

.max10 {max-width: 10%;}
.max20 {max-width: 20%;}
.max25 {max-width: 25%;}
.max30 {max-width: 30%;}
.max40 {max-width: 40%;}
.max50 {max-width: 50%;}
.max60 {max-width: 60%;}
.max70 {max-width: 70%;}
.max80 {max-width: 80%;}
.max90 {max-width: 90%;}
.max100 {max-width: 100%;}

/* 
  해상도별 분기를 지정합니다.
  줄바꿈태그나, 레이아웃 요소를 해상도에 따라 노출or제거합니다.
*/

.indent-num {display: flex; align-items: flex-start; text-align: left;}
.indent-num::before {content: attr(data-indent-num); margin-right: 0.25em; white-space: nowrap; color: inherit; font-weight: inherit;}
.indent-num.underline::before {margin-right: 0;}
.bf-bold::before {font-weight: 600;}

.no-bf::before,
.no-af::after {
  content: none !important;
} 

/* break points */
.br1200 {display: none;}
.br1024 {display: none;}
.br768 {display: none;}
.br640 {display: none;}
.br475 {display: none;}
.br375 {display: none;}
.br320 {display: none;}


@media screen and (max-width: 1200px) {
  .m-break1200 {margin: 0;}
  .p-break1200 {padding: 0;}
  .br1200 {display: block;}
  .br1200-end {display: none;}
  .img-break1200 img {min-width: auto !important;}
  .flex-col-1200 {flex-direction: column !important;}

  .flex-col-1200 > .pr-l,
  .flex-col-1200 > .pr-m,
  .flex-col-1200 > .pr-s {padding-right: 0;}
  .flex-col-1200 > .pl-l,
  .flex-col-1200 > .pl-m,
  .flex-col-1200 > .pl-s {padding-left: 0;}

  .flex-col-1200 > .mr-l,
  .flex-col-1200 > .mr-m,
  .flex-col-1200 > .mr-s {margin-right: 0;}
  .flex-col-1200 > .ml-l,
  .flex-col-1200 > .ml-m,
  .flex-col-1200 > .ml-s {margin-left: 0;}

  .flex-col-1200 .max10,
  .flex-col-1200 .max20,
  .flex-col-1200 .max30,
  .flex-col-1200 .max40,
  .flex-col-1200 .max50,
  .flex-col-1200 .max60,
  .flex-col-1200 .max70,
  .flex-col-1200 .max80,
  .flex-col-1200 .max90 {max-width: 100%;}
}

@media screen and (max-width: 1024px) {
  .m-break1024 {margin: 0;}
  .br1024 {display: block;}
  .br1024-end {display: none;}
  .img-break1024 img {min-width: auto !important;}
  .flex-col-1024 {flex-direction: column !important;}

  .flex-col-1024 > .pr-l,
  .flex-col-1024 > .pr-m,
  .flex-col-1024 > .pr-s {padding-right: 0;}
  .flex-col-1024 > .pl-l,
  .flex-col-1024 > .pl-m,
  .flex-col-1024 > .pl-s {padding-left: 0;}

  .flex-col-1024 > .mr-l,
  .flex-col-1024 > .mr-m,
  .flex-col-1024 > .mr-s {margin-right: 0;}
  .flex-col-1024 > .ml-l,
  .flex-col-1024 > .ml-m,
  .flex-col-1024 > .ml-s {margin-left: 0;}

  .flex-col-1024 .max10,
  .flex-col-1024 .max20,
  .flex-col-1024 .max30,
  .flex-col-1024 .max40,
  .flex-col-1024 .max50,
  .flex-col-1024 .max60,
  .flex-col-1024 .max70,
  .flex-col-1024 .max80,
  .flex-col-1024 .max90 {max-width: 100%;}
}

@media screen and (max-width: 768px) {
  .m-break768 {margin: 0;}
  .p-break768 {padding: 0;}
  .br768 {display: block;}
  .br768-end {display: none;}
  .img-break768 img {min-width: auto !important;}
  .flex-col-768 {flex-direction: column !important;}
  
  .flex-col-768 > .pr-l,
  .flex-col-768 > .pr-m,
  .flex-col-768 > .pr-s {padding-right: 0;}
  .flex-col-768 > .pl-l,
  .flex-col-768 > .pl-m,
  .flex-col-768 > .pl-s {padding-left: 0;}

  .flex-col-768 > .mr-l,
  .flex-col-768 > .mr-m,
  .flex-col-768 > .mr-s {margin-right: 0;}
  .flex-col-768 > .ml-l,
  .flex-col-768 > .ml-m,
  .flex-col-768 > .ml-s {margin-left: 0;}

  .flex-col-768 .max10,
  .flex-col-768 .max20,
  .flex-col-768 .max30,
  .flex-col-768 .max40,
  .flex-col-768 .max50,
  .flex-col-768 .max60,
  .flex-col-768 .max70,
  .flex-col-768 .max80,
  .flex-col-768 .max90 {max-width: 100%;}
}

@media screen and (max-width: 640px) {
  .m-break640 {margin: 0;}
  .p-break640 {padding: 0;}
  .br640 {display: block;}
  .br640-end {display: none;}
  .img-break640 img {min-width: auto !important;}
  .flex-col-640 {flex-direction: column !important;}
  
  .flex-col-640 > .pr-l,
  .flex-col-640 > .pr-m,
  .flex-col-640 > .pr-s {padding-right: 0;}
  .flex-col-640 > .pl-l,
  .flex-col-640 > .pl-m,
  .flex-col-640 > .pl-s {padding-left: 0;}

  .flex-col-640 > .mr-l,
  .flex-col-640 > .mr-m,
  .flex-col-640 > .mr-s {margin-right: 0;}
  .flex-col-640 > .ml-l,
  .flex-col-640 > .ml-m,
  .flex-col-640 > .ml-s {margin-left: 0;}

  .flex-col-640 .max10,
  .flex-col-640 .max20,
  .flex-col-640 .max30,
  .flex-col-640 .max40,
  .flex-col-640 .max50,
  .flex-col-640 .max60,
  .flex-col-640 .max70,
  .flex-col-640 .max80,
  .flex-col-640 .max90 {max-width: 100%;}
}

@media screen and (max-width: 475px) {
  .m-break475 {margin: 0;}
  .p-break475 {padding: 0;}
  .br475 {display: block;}
  .br475-end {display: none;}
  .img-break475 img {min-width: auto !important;}
  .flex-col-475 {flex-direction: column !important;}
  
  .flex-col-475 > .pr-l,
  .flex-col-475 > .pr-m,
  .flex-col-475 > .pr-s {padding-right: 0;}
  .flex-col-475 > .pl-l,
  .flex-col-475 > .pl-m,
  .flex-col-475 > .pl-s {padding-left: 0;}

  .flex-col-475 > .mr-l,
  .flex-col-475 > .mr-m,
  .flex-col-475 > .mr-s {margin-right: 0;}
  .flex-col-475 > .ml-l,
  .flex-col-475 > .ml-m,
  .flex-col-475 > .ml-s {margin-left: 0;}

  .flex-col-475 .max10,
  .flex-col-475 .max20,
  .flex-col-475 .max30,
  .flex-col-475 .max40,
  .flex-col-475 .max50,
  .flex-col-475 .max60,
  .flex-col-475 .max70,
  .flex-col-475 .max80,
  .flex-col-475 .max90 {max-width: 100%;}
}

@media screen and (max-width: 375px) {
  .m-break375 {margin: 0;}
  .p-break375 {padding: 0;}
  .br375 {display: block;}
  .br375-end {display: none;}
  .img-break375 img {min-width: auto !important;}
  .flex-col-375 {flex-direction: column !important;}

  .flex-col-375 > .pr-l,
  .flex-col-375 > .pr-m,
  .flex-col-375 > .pr-s {padding-right: 0;}
  .flex-col-375 > .pl-l,
  .flex-col-375 > .pl-m,
  .flex-col-375 > .pl-s {padding-left: 0;}

  .flex-col-375 > .mr-l,
  .flex-col-375 > .mr-m,
  .flex-col-375 > .mr-s {margin-right: 0;}
  .flex-col-375 > .ml-l,
  .flex-col-375 > .ml-m,
  .flex-col-375 > .ml-s {margin-left: 0;}

  .flex-col-375 .max10,
  .flex-col-375 .max20,
  .flex-col-375 .max30,
  .flex-col-375 .max40,
  .flex-col-375 .max50,
  .flex-col-375 .max60,
  .flex-col-375 .max70,
  .flex-col-375 .max80,
  .flex-col-375 .max90 {max-width: 100%;}
}

@media screen and (max-width: 320px) {
  .m-break320 {margin: 0;}
  .p-break320 {padding: 0;}
  .br320 {display: block;}
  .br320-end {display: none;}
  .img-break320 img {min-width: auto !important;}
  .flex-col-320 {margin: auto; flex-direction: column !important;}

  .flex-col-320 > .pr-l,
  .flex-col-320 > .pr-m,
  .flex-col-320 > .pr-s {padding-right: 0;}
  .flex-col-320 > .pl-l,
  .flex-col-320 > .pl-m,
  .flex-col-320 > .pl-s {padding-left: 0;}

  .flex-col-320 > .mr-l,
  .flex-col-320 > .mr-m,
  .flex-col-320 > .mr-s {margin-right: 0;}
  .flex-col-320 > .ml-l,
  .flex-col-320 > .ml-m,
  .flex-col-320 > .ml-s {margin-left: 0;}

  .flex-col-320 .max10,
  .flex-col-320 .max20,
  .flex-col-320 .max30,
  .flex-col-320 .max40,
  .flex-col-320 .max50,
  .flex-col-320 .max60,
  .flex-col-320 .max70,
  .flex-col-320 .max80,
  .flex-col-320 .max90 {max-width: 100%;}
}

/* 
  텍스트와 관련된 요소입니다.
  페이지에 사용될 폰트 체계를 지정합니다.
*/

/* fonts */
html, body {color: var(--text-base);}

.font0 {font-size: 0;}

.txt-main {color: var(--primary-color);}
.txt-sub {color: var(--primary-color-light);}
.txt-w {color: #fff;}
.txt-base {color: var(--text-base);}
.txt-gray {color: var(--gray50);}
.txt-point {color: var(--point-color);}
.txt-point-light {color: var(--point-color);}
.txt-gradient {
    width: max-content !important;
    max-width: 100%;
    background: var(--gradient-base);
    color: transparent !important;
    display: inline-block;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    font-weight: 900;
}

.txt-left {text-align: left !important;} 
.txt-right {text-align: right !important;}
.txt-justify {text-align: justify !important;}
.txt-center {text-align: center !important;}
.txt-120 {font-size: 1.2em !important;}
.txt-110 {font-size: 1.1em !important;}
.txt-100 {font-size: 1em !important;}
.txt-90 {font-size: 0.9em !important;}
.txt-80 {font-size: 0.8em !important;}

.semi-bold {font-weight: 600 !important;}
.bold {font-weight: 900 !important;}
.thin {font-weight: 300 !important;}
.italic {font-style: italic !important;}

[class*="highlight-"] {display: inline !important;}
[class*="highlight-"].bg-clone {box-decoration-break: clone;}
.highlight-magenta {background: linear-gradient(to bottom, transparent 50%, var(--neon-magenta) 51%, var(--neon-magenta));}
.highlight-violet {background: linear-gradient(to bottom, transparent 50%, var(--neon-violet) 51%, var(--neon-violet));}
.highlight-teal {background: linear-gradient(to bottom, transparent 50%, var(--neon-teal) 51%, var(--neon-teal));}
.highlight-lightgreen {background: linear-gradient(to bottom, transparent 50%, var(--neon-lightgreen) 51%, var(--neon-lightgreen));}
.highlight-lime {background: linear-gradient(to bottom, transparent 50%, var(--neon-lime) 51%, var(--neon-lime));}
.highlight-orange {background: linear-gradient(to bottom, transparent 50%, var(--neon-orange) 51%, var(--neon-orange));}
.highlight-hotpink {background: linear-gradient(to bottom, transparent 50%, var(--neon-hotpink) 51%, var(--neon-hotpink));}
.highlight-mint {background: linear-gradient(to bottom, transparent 50%, var(--neon-mint) 51%, var(--neon-mint));}
.highlight-sky {background: linear-gradient(to bottom, transparent 50%, var(--neon-sky) 51%, var(--neon-sky));}
.highlight-yellow {background: linear-gradient(to bottom, transparent 66%, var(--neon-yellow) 66%, var(--neon-yellow));}
.highlight-purple {background: linear-gradient(to bottom, transparent 50%, var(--neon-purple) 51%, var(--neon-purple));}

.keep-all {word-break: keep-all !important;}
.break-all {word-break: break-all !important;}

/* 
  border 색상을 지정합니다
*/
.border-base {border-color: var(--text-base);}
.border-main {border-color: var(--primary-color);}
.border-sub {border-color: var(--secondary-color);}

/* 
  텍스트가 넘치는 경우 말줄임표로 표시합니다.
*/

/* ellipsis */
.t-ellipsis {overflow: hidden; display: inline-block !important; text-overflow: ellipsis; white-space: nowrap;}
.t-ellipsis-line2 {overflow: hidden; text-overflow: ellipsis; display: inline-block; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.t-ellipsis-line3 {overflow: hidden; text-overflow: ellipsis; display: inline-block; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.t-ellipsis-line4 {overflow: hidden; text-overflow: ellipsis; display: inline-block; display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.t-ellipsis-line5 {overflow: hidden; text-overflow: ellipsis; display: inline-block; display: -webkit-box !important; -webkit-line-clamp: 5; -webkit-box-orient: vertical;}

/* 
  width값 조정을 위한 항목입니다.
*/
.w100 {width: 100%;}
.h100 {height: 100%;}
.wh100 {width: 100%; height: 100%;}

.yt-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.yt-frame iframe {
  width: 100%;
  height: 100%;
}

.toon1 .swiper-button-next,
.toon2 .swiper-button-next,
.toon1 .swiper-button-prev,
.toon2 .swiper-button-prev {
  width: calc(var(--swiper-navigation-size)/ 44 * 35);
  height: calc(var(--swiper-navigation-size)/ 44 * 35);
}

@media screen and (min-width: 768px) {
  .toon1 .swiper-button-next,
  .toon2 .swiper-button-next,
  .toon1 .swiper-button-prev,
  .toon2 .swiper-button-prev {
    width: calc(var(--swiper-navigation-size)/ 44 * 50);
    height: calc(var(--swiper-navigation-size)/ 44 * 50);
  }

  .toon1 .swiper-slide img,
  .toon2 .swiper-slide img {
    max-width: 550px;
    margin-inline: auto;
  }

  .toon1 .swiper-button-next,
  .toon2 .swiper-button-next {
    right: 0;
  }

  .toon1 .swiper-button-prev,
  .toon2 .swiper-button-prev {
    left: 0;
  }
}