@charset "UTF-8";
/* 
 *	eunjye's reset : https://velog.io/@eunjye
 *	(based on Eric Meyer's Reset css v2.0 : http://meyerweb.com/eric/tools/css/reset/)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  color: inherit;
  box-sizing: border-box;
  line-height: inherit;
  text-decoration: inherit;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

html, body {
  width: 100%;
  height: 100%;
}

*:after, *:before {
  box-sizing: border-box;
}

body {
  line-height: inherit;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

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

img, button, a {
  vertical-align: middle;
}

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

caption {
  opacity: 0;
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
  color: transparent;
}

input {
  box-sizing: border-box;
}

@font-face {
  font-family: "notokr";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../font/NotoSans-Bold.woff2") format("woff2"), url("../font/NotoSans-Bold.woff") format("woff"), url("../font/NotoSans-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "notokr";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../font/NotoSans-Medium.woff2") format("woff2"), url("../font/NotoSans-Medium.woff") format("woff"), url("../font/NotoSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "notokr";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../font/NotoSans-Regular.woff2") format("woff2"), url("../font/NotoSans-Regular.woff") format("woff"), url("../font/NotoSans-Regular.ttf") format("truetype");
}
.typo-size-100 {
  font-size: 6rem !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

.typo-size-200 {
  font-size: 5.2rem !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.typo-size-250 {
  font-size: 4.8rem !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

.typo-size-300 {
  font-size: 4.4rem !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

.typo-size-350 {
  font-size: 4rem !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.typo-size-300 {
  font-size: 4.4rem !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

.typo-color-black {
  color: #111 !important;
}

.icon18 {
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon28 {
  display: inline-block;
  width: 2.8rem;
  height: 2.8rem;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon32 {
  display: inline-block;
  width: 3.2rem;
  height: 3.2rem;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon38 {
  display: inline-block;
  width: 3.8rem;
  height: 3.8rem;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon42 {
  display: inline-block;
  width: 4.2rem;
  height: 4.2rem;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon54 {
  display: inline-block;
  width: 5.4rem;
  height: 5.4rem;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon62 {
  display: inline-block;
  width: 6.2rem;
  height: 6.2rem;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-emoji-heart {
  background-image: url("../images/main/icon-emoji-heart.svg");
}

.icon-heart-pink {
  background-image: url("../images/main/icon-heart-pink.svg");
}

.icon-heart-purple {
  background-image: url("../images/main/icon-heart-purple.svg");
}

.icon-thumbsup-pink {
  background-image: url("../images/main/icon-thumbsup-pink.svg");
}

.icon-emoji-smile {
  background-image: url("../images/main/icon-emoji-smile.svg");
}

.icon-arrow-right-pink {
  background-image: url("../images/main/icon-arrow-right-pink.svg");
}

.icon-lock {
  background-image: url("../images/main/icon28-lock.svg");
}

.icon-unlock {
  background-image: url("../images/main/icon28-unlock.svg");
}

.icon-mypage {
  background-image: url("../images/main/icon28-mypage.svg");
}

[data-motion*=wiggle-up] {
  position: relative;
  -webkit-animation: wiggle-up ease-in-out 2.5s infinite;
          animation: wiggle-up ease-in-out 2.5s infinite;
  opacity: 0;
}

[data-motion*=balloon-up] {
  position: relative;
  -webkit-animation: balloon-up ease-in-out 3.5s infinite;
          animation: balloon-up ease-in-out 3.5s infinite;
  opacity: 0;
}

[data-motion*=avatar-move] {
  position: relative;
  -webkit-animation: avatarMove ease-in-out 2s infinite;
          animation: avatarMove ease-in-out 2s infinite;
  opacity: 1;
  transform-origin: bottom center;
}

[data-motion*=dongdong] {
  -webkit-animation: dongdong ease-in-out 2.5s infinite;
          animation: dongdong ease-in-out 2.5s infinite;
}

[data-motion-delay*="-300ms"] {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}

[data-motion-delay*="-600ms"] {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}

[data-motion-delay*="-900ms"] {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}

[data-motion-delay*="300ms"] {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

[data-motion-delay*="600ms"] {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

[data-motion-delay*="900ms"] {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

@-webkit-keyframes dongdong {
  0%, 100% {
    transform: translateY(-0.5rem);
  }
  50% {
    transform: translateY(0.5rem);
  }
}

@keyframes dongdong {
  0%, 100% {
    transform: translateY(-0.5rem);
  }
  50% {
    transform: translateY(0.5rem);
  }
}
@-webkit-keyframes pause {
  0%, 100% {
    top: 0;
    opacity: 0;
  }
}
@keyframes pause {
  0%, 100% {
    top: 0;
    opacity: 0;
  }
}
@-webkit-keyframes wiggle-up {
  0% {
    transform: scale(0.5) rotate(10deg);
    left: 0;
    top: 0;
    opacity: 0;
  }
  10%, 60% {
    opacity: 1;
  }
  10%, 40% {
    left: -0.3rem;
    transform: rotate(-10deg);
  }
  25%, 55% {
    left: 0.3rem;
    transform: rotate(10deg);
  }
  70%, 100% {
    left: 0;
    top: -6rem;
    opacity: 0;
    transform: rotate(-10deg);
  }
}
@keyframes wiggle-up {
  0% {
    transform: scale(0.5) rotate(10deg);
    left: 0;
    top: 0;
    opacity: 0;
  }
  10%, 60% {
    opacity: 1;
  }
  10%, 40% {
    left: -0.3rem;
    transform: rotate(-10deg);
  }
  25%, 55% {
    left: 0.3rem;
    transform: rotate(10deg);
  }
  70%, 100% {
    left: 0;
    top: -6rem;
    opacity: 0;
    transform: rotate(-10deg);
  }
}
@-webkit-keyframes balloon-up {
  0% {
    transform: scale(0.5) translateX(-0.5rem);
    left: 0;
    top: 0;
    opacity: 0;
  }
  10%, 60% {
    opacity: 1;
  }
  10%, 40% {
    left: -0.3rem;
    transform: translateX(0.5rem);
  }
  25%, 55% {
    left: 0.3rem;
    transform: translateX(-0.5rem);
  }
  70%, 100% {
    left: 0;
    top: -6rem;
    opacity: 0;
    transform: translateX(0.5rem);
  }
}
@keyframes balloon-up {
  0% {
    transform: scale(0.5) translateX(-0.5rem);
    left: 0;
    top: 0;
    opacity: 0;
  }
  10%, 60% {
    opacity: 1;
  }
  10%, 40% {
    left: -0.3rem;
    transform: translateX(0.5rem);
  }
  25%, 55% {
    left: 0.3rem;
    transform: translateX(-0.5rem);
  }
  70%, 100% {
    left: 0;
    top: -6rem;
    opacity: 0;
    transform: translateX(0.5rem);
  }
}
@-webkit-keyframes linearUp {
  0% {
    opacity: 0;
  }
  30%, 40% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
    transform: translateY(-25%);
  }
}
@keyframes linearUp {
  0% {
    opacity: 0;
  }
  30%, 40% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
    transform: translateY(-25%);
  }
}
html {
  font-size: 10px;
  -webkit-text-size-adjust: none; /* 크롬, 사파리, 오페라 신버전 */
  -ms-text-size-adjust: none; /* IE */
  -moz-text-size-adjust: none; /* 파이어폭스 */
  -o-text-size-adjust: none; /* 오페라 구버전 */
}

body {
  color: #111;
  font-size: 1.4rem;
  font-family: "notokr", "Noto Sans KR", "Apple SD Gothic", "Malgungothic", sans-serif;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.025em;
  -webkit-text-size-adjust: none; /* 크롬, 사파리, 오페라 신버전 */
  -ms-text-size-adjust: none; /* IE */
  -moz-text-size-adjust: none; /* 파이어폭스 */
  -o-text-size-adjust: none; /* 오페라 구버전 */
}

/* common */
.tar {
  text-align: right !important;
}

.tac {
  text-align: center !important;
}

.tal {
  text-align: left !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-regular {
  font-weight: 400 !important;
}

.header-area {
  position: relative;
  width: 100%;
  height: 11rem;
  background: #fff;
  transition: height ease-in-out 0.2s;
}
.header-area.is-small {
  height: 8rem;
}
.header-area.is-small .header-area__fixed {
  height: 8rem;
}
.header-area.is-small h1 a,
.header-area.is-small .btn-icon--joytown {
  transform: scale(0.8);
}
.header-area img {
  transition: transform ease-in-out 0.2s;
}
.header-area .header-area__fixed {
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 11rem;
  background: #fff;
  transition: height ease-in-out 0.2s;
}
.header-area .header-area__grid {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  padding: 0 2rem;
  text-align: center;
}
.header-area .header-area__grid h1 {
  flex: 1 1 auto;
}
.header-area .header-area__grid h1 a {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  transition: transform ease-in-out 0.2s;
}
.header-area .header-area__grid .logo-ani {
  position: absolute;
  left: 10rem;
  top: 50%;
  margin-top: 0.8rem;
  transform: translateY(-50%);
}
.header-area .header-area__util {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
}
.header-area .header-area__util .btn-icon--joytown {
  transition: all ease-in-out 0.2s;
  margin-left: 4rem;
}

.footer-area {
  background: #444853;
}
.footer-area .footer-area__grid {
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 500;
  line-height: 1.8;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8rem;
  text-align: center;
  font-weight: 300;
  color: #d2d2d2;
}
.footer-area .footer-area__logo {
  margin-bottom: 4rem;
}
.footer-area .footer-area__desc p > span {
  margin-right: 1rem;
}
.footer-area .footer-area__copy {
  display: block;
  font-size: 1.4rem;
}

/* in main page */
.container-main {
  overflow: hidden;
  margin-top: 68px;
}

.section-area {
  width: 100%;
}

.section-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 12rem 2rem;
}

.section-tit {
  font-size: 4.4rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #111;
  text-align: center;
}

.section-desc {
  font-size: 2rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
  margin-top: 2rem;
}

.tit-area {
  margin-bottom: 6rem;
}

.main-visual {
  position: relative;
  height: 104rem;
}
.main-visual:after {
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: -11rem;
  display: block;
  width: calc(100% + 35rem);
  height: 30rem;
  background: url("../images/main/bg-wave-white.png") center bottom/auto repeat-x;
  content: "";
}
.main-visual .section-inner {
  padding-top: 22rem;
}
.main-visual .tit-area {
  z-index: 10;
  position: relative;
}
.main-visual .section-tit {
  font-size: 6rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-align: left;
  color: #fff;
}
.main-visual .main-visual__added {
  position: relative;
  width: 20rem;
  margin-top: 4rem;
}
.main-visual .main-visual__added .btn-base {
  display: block;
  margin-bottom: 1.5rem;
}
.main-visual .main-visual__item {
  position: relative;
}
.main-visual .main-visual__item:after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin-left: 0.4rem;
  background: url("../images/main/main-visual-bg.png") center bottom 11rem/149.8rem auto no-repeat;
  content: "";
}
.main-visual .main-visual__item .main-visual__avatar {
  position: absolute;
}
.main-visual .main-visual__item .main-visual__avatar .icon-item {
  position: absolute;
  bottom: 100%;
  left: 50%;
}
.main-visual .main-visual__item .main-visual__img {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: 1400px;
  margin: 0 auto;
  background-position: center bottom 31.1rem;
  background-size: 42.7rem auto;
  background-repeat: no-repeat;
}
.main-visual .main-visual__item.n1 {
  background: linear-gradient(to bottom, #ffc1b9 0%, #c19dff 100%);
}
.main-visual .main-visual__item.n1 .main-visual__img {
  background-image: url("../images/main/main-visual1.png");
}
.main-visual .main-visual__item.n1 .main-visual__avatar.n1 {
  top: 53rem;
  left: 50%;
  margin-left: -10rem;
}
.main-visual .main-visual__item.n2 {
  background: linear-gradient(to bottom, #f9cb9e 0%, #ef86c1 100%);
}
.main-visual .main-visual__item.n2 .main-visual__img {
  background-image: url("../images/main/main-visual2.png");
}
.main-visual .main-visual__item.n3 {
  background: linear-gradient(to bottom, #fd92e3 0%, #7ddec9 100%);
}
.main-visual .main-visual__item.n3 .main-visual__img {
  background-image: url("../images/main/main-visual3.png");
}
.main-visual .swiper {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.main-visual .main-visual__stage {
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: 149.8rem;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  pointer-events: none;
}
.main-visual .main-visual__stage .balloon-area {
  z-index: 5;
  position: absolute;
  left: 50%;
  white-space: nowrap;
}
.main-visual .main-visual__stage .balloon-area.n1 {
  bottom: 53rem;
  margin-left: -35rem;
}
.main-visual .main-visual__stage .balloon-area.n2 {
  bottom: 45rem;
  margin-left: -30rem;
}
.main-visual .main-visual__stage .balloon-area.n3 {
  bottom: 40rem;
  margin-left: 5rem;
}
.main-visual .main-visual__stage .balloon-area.n4 {
  bottom: 55rem;
  margin-left: 16rem;
}
.main-visual .main-visual__stage .balloon-area.n5 {
  bottom: 40rem;
  margin-left: 30rem;
}
.main-visual .main-visual__stage .main-avatar {
  position: absolute;
  left: 50%;
}
.main-visual .main-visual__stage .main-avatar img {
  width: 4rem;
}
.main-visual .main-visual__stage .main-avatar .icon-area {
  position: absolute;
  left: 50%;
  bottom: 120%;
}
.main-visual .main-visual__stage .main-avatar .icon-area + .icon-area {
  bottom: 100%;
  left: 100%;
}
.main-visual .main-visual__stage .main-avatar.n1 {
  bottom: 23rem;
  margin-left: -44rem;
}
.main-visual .main-visual__stage .main-avatar.n2 {
  bottom: 29rem;
  margin-left: -33rem;
}
.main-visual .main-visual__stage .main-avatar.n3 {
  bottom: 27rem;
  margin-left: -10rem;
}
.main-visual .main-visual__stage .main-avatar.n4 {
  bottom: 25rem;
  margin-left: 3rem;
}
.main-visual .main-visual__stage .main-avatar.n5 {
  bottom: 28rem;
  margin-left: 17rem;
}
.main-visual .main-visual__stage .main-avatar.n6 {
  bottom: 30rem;
  margin-left: 24rem;
}
.main-visual .main-visual__stage .main-avatar.n7 {
  bottom: 29.3rem;
  margin-left: 31rem;
}
.main-visual .main-stage-icon {
  position: absolute;
  left: 50%;
}
.main-visual .main-stage-icon img {
  width: 100%;
}
.main-visual .main-stage-icon.offering {
  bottom: 27rem;
  margin-left: -4.5rem;
  width: 3.2rem;
}
.main-visual .main-stage-icon.cloud {
  bottom: 52rem;
  margin-left: 30rem;
  width: 19rem;
}
.main-visual .main-stage-icon.flash {
  bottom: 70rem;
  margin-left: -32rem;
  width: 67.1rem;
}
.main-visual .main-visual__paging-area {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.main-visual .main-visual__paging-area .main-visual__paging-grid {
  position: absolute;
  top: 50%;
  right: 2rem;
  margin-top: -10rem;
  transform: translateY(-50%);
  text-align: right;
  width: 15rem;
}
.main-visual .main-visual__paging-area .main-visual__paging-item {
  display: block;
  width: 100%;
  position: relative;
  margin: 0 0 9rem;
  color: #fff;
  font-size: 1.4rem;
  transition: all ease-in-out 0.2s;
  text-align: right;
  padding-right: 3.5rem;
  background: none;
}
.main-visual .main-visual__paging-area .main-visual__paging-item:last-child {
  margin-bottom: 0;
}
.main-visual .main-visual__paging-area .main-visual__paging-item:last-child:before {
  display: none;
}
.main-visual .main-visual__paging-area .main-visual__paging-item > span {
  opacity: 0.6;
}
.main-visual .main-visual__paging-area .main-visual__paging-item > span strong {
  display: block;
  font-weight: 700;
}
.main-visual .main-visual__paging-area .main-visual__paging-item:after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: #fff;
  transition: background-color ease-in-out 0.2s;
  content: "";
}
.main-visual .main-visual__paging-area .main-visual__paging-item:before {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  bottom: -11rem;
  width: 0.1rem;
  background: #fff;
  display: block;
  content: "";
}
.main-visual .main-visual__paging-area .main-visual__paging-item.swiper-pagination-bullet-active {
  color: #4d4098;
}
.main-visual .main-visual__paging-area .main-visual__paging-item.swiper-pagination-bullet-active:after {
  background: #4d4098;
}
.main-visual .main-visual__paging-area .main-visual__paging-item.swiper-pagination-bullet-active > span {
  opacity: 1;
}
.main-visual .main-icon {
  z-index: 10;
  position: absolute;
}
.main-visual .main-icon.icon-avatar {
  z-index: 1;
  left: 50%;
  width: 4rem;
}
.main-visual .main-icon.icon-avatar img {
  width: 100%;
}
.main-visual .main-icon.icon-avatar.n1 {
  margin-left: -67rem;
  bottom: 4rem;
}
.main-visual .main-icon.icon-avatar.n2 {
  margin-left: 42rem;
  bottom: 2rem;
}
.main-visual .main-icon.icon-avatar .balloon-area {
  z-index: 5;
  position: absolute;
  left: 120%;
  bottom: 100%;
  white-space: nowrap;
}
.main-visual .main-icon.icon-heart {
  width: 3rem;
  left: 50%;
}
.main-visual .main-icon.icon-heart img {
  width: 100%;
}
.main-visual .main-icon.icon-heart.n1 {
  margin-left: -72rem;
  bottom: 14rem;
}
.main-visual .main-icon.icon-heart.n2 {
  z-index: 1;
  margin-left: 58rem;
  bottom: 14rem;
}
.main-visual .main-icon.icon-bubble {
  left: 50%;
  transform: translateX(-50%);
  min-width: 1800px;
  max-width: 2000px;
  width: 100%;
}
.main-visual .main-icon.icon-bubble.n1 {
  bottom: 15rem;
  text-align: left;
}
.main-visual .main-icon.icon-bubble.n1 img {
  margin-left: -6rem;
}
.main-visual .main-icon.icon-bubble.n2 {
  bottom: 5rem;
  text-align: right;
}
.main-visual .main-icon.icon-bubble.n2 img {
  margin-right: 6rem;
}

.balloon-area {
  position: relative;
}

.balloon-box {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  display: inline-block;
  height: 2.8rem;
  line-height: 2.8rem;
  border-radius: 1.4rem;
  padding: 0 1.2rem;
  box-shadow: 0 0.2rem 0 0.2rem rgba(0, 0, 0, 0.04);
}
.balloon-box.balloon-box--blue {
  background: #6754d6;
}
.balloon-box.balloon-box--pink {
  background: #e557a8;
}

.main-service {
  position: relative;
}
.main-service .section-tit {
  font-size: 5.2rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 700;
  line-height: 1.4;
}
.main-service .section-tit .icon54 {
  margin-top: -1.6rem;
}
.main-service .section-inner {
  position: relative;
  padding-bottom: 0;
}
.main-service .bg-particle {
  position: absolute;
  top: 50%;
  right: 0;
}
.main-service .bg-particle img {
  -webkit-animation: linearUp ease-in-out 4s infinite;
          animation: linearUp ease-in-out 4s infinite;
}

.service-intro {
  padding-top: 20rem;
  height: 52rem;
  overflow: hidden;
}
.service-intro .service-intro__earth {
  position: relative;
  width: 82rem;
  height: 82rem;
  margin: 0 auto;
  background: radial-gradient(#b778fd, #ab94fe);
  border-radius: 50%;
  transition: transform ease-in-out 0.5s;
}
.service-intro .service-intro__earth:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(#b778fd, #ab94fe);
  border-radius: 50%;
  content: "";
}
.service-intro .service-intro__earth:after {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100rem;
  height: 100rem;
  border: 0.1rem solid #6754d6;
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
  -webkit-animation: earthLine ease-in-out 2s infinite;
          animation: earthLine ease-in-out 2s infinite;
  content: "";
}
@-webkit-keyframes earthLine {
  0%, 100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(1.015);
  }
}
@keyframes earthLine {
  0%, 100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(1.015);
  }
}
.service-intro .service-intro__earth.step1 {
  transform: rotate(0deg);
}
.service-intro .service-intro__earth.step2 {
  transform: rotate(-30deg);
}
.service-intro .service-intro__earth.step3 {
  transform: rotate(-60deg);
}
.service-intro .service-intro__earth.step4 {
  transform: rotate(-90deg);
}
.service-intro .service-intro__earth.step5 {
  transform: rotate(-120deg);
}
.service-intro .service-intro__earth.step6 {
  transform: rotate(-150deg);
}
.service-intro .service-intro__earth.step7 {
  transform: rotate(-180deg);
}
.service-intro .service-intro__earth.step8 {
  transform: rotate(-210deg);
}
.service-intro .service-intro__earth.step9 {
  transform: rotate(-240deg);
}
.service-intro .service-intro__earth.step10 {
  transform: rotate(-270deg);
}
.service-intro .service-intro__earth.step11 {
  transform: rotate(-300deg);
}
.service-intro .service-intro__earth.step12 {
  transform: rotate(-330deg);
}
.service-intro .service-intro__earth.is-return {
  transition: none;
  transform: rotate(30deg);
}
.service-intro .service-intro__earth.is-end {
  transition: none;
  transform: rotate(-360deg);
}
.service-intro .service-intro__item {
  z-index: -1;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  width: 16rem;
  height: 100%;
  margin: 0 auto;
  outline: none;
  pointer-events: none;
  /* SCSS */
}
.service-intro .service-intro__item:nth-child(odd) .avatar-item {
  -webkit-animation-delay: -600ms;
          animation-delay: -600ms;
}
.service-intro .service-intro__item:nth-child(1) {
  transform: rotate(0deg);
}
.service-intro .service-intro__item:nth-child(2) {
  transform: rotate(30deg);
}
.service-intro .service-intro__item:nth-child(3) {
  transform: rotate(60deg);
}
.service-intro .service-intro__item:nth-child(4) {
  transform: rotate(90deg);
}
.service-intro .service-intro__item:nth-child(5) {
  transform: rotate(120deg);
}
.service-intro .service-intro__item:nth-child(6) {
  transform: rotate(150deg);
}
.service-intro .service-intro__item:nth-child(7) {
  transform: rotate(180deg);
}
.service-intro .service-intro__item:nth-child(8) {
  transform: rotate(210deg);
}
.service-intro .service-intro__item:nth-child(9) {
  transform: rotate(240deg);
}
.service-intro .service-intro__item:nth-child(10) {
  transform: rotate(270deg);
}
.service-intro .service-intro__item:nth-child(11) {
  transform: rotate(300deg);
}
.service-intro .service-intro__item:nth-child(12) {
  transform: rotate(330deg);
}
.service-intro .service-intro__item .character-stage__background-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.service-intro .service-intro__item .character-stage__icon {
  position: absolute;
}
.service-intro .service-intro__item .character-stage__icon:first-child {
  left: 0;
  bottom: 30%;
}
.service-intro .service-intro__item .character-stage__icon:nth-child(2) {
  right: 30%;
  bottom: 60%;
}
.service-intro .service-intro__item .character-stage__icon:nth-child(3) {
  left: 10%;
  bottom: 20%;
}
.service-intro .service-intro__item .character-stage__icon:nth-child(4) {
  right: 0;
  bottom: 40%;
}
.service-intro .service-intro__item [data-motion] {
  display: none;
}
.service-intro .service-intro__item .character-stage {
  z-index: -1;
  transform: scale(0.8) translateY(4rem);
  transition: transform ease-in-out 0.2s;
}
.service-intro .service-intro__item .avatar-item {
  -webkit-animation: avatarMove ease-in-out 2s infinite;
          animation: avatarMove ease-in-out 2s infinite;
  transform-origin: center bottom;
}
@-webkit-keyframes avatarMove {
  0%, 100% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-2deg);
  }
}
@keyframes avatarMove {
  0%, 100% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-2deg);
  }
}
.service-intro .service-intro__item strong {
  font-size: 2rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 500;
  z-index: 4;
  position: absolute;
  bottom: 90%;
  left: 0;
  width: 100%;
  text-align: center;
  display: block;
  padding-bottom: 1rem;
  color: #4d4098;
  font-weight: 700;
  transition: all ease-in-out 0.2s;
}
.service-intro .service-intro__item strong:before {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 3rem;
  height: 3rem;
  content: "";
}
.service-intro .service-intro__item.service-intro__item--active {
  z-index: 1;
}
.service-intro .service-intro__item.service-intro__item--active [data-motion] {
  display: block;
}
.service-intro .service-intro__item.service-intro__item--active ~ .service-intro__item strong:before {
  right: auto;
  left: 0;
}
.service-intro .service-intro__item.service-intro__item--active .character-stage {
  transform: none;
}
.service-intro .service-intro__item.service-intro__item--active strong {
  font-size: 2rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 500;
  color: #fff;
  font-weight: 700;
  bottom: -4rem;
}
.service-intro .service-intro__item-inner {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: -3rem;
}

.character-stage {
  position: relative;
  display: block;
  width: 14rem;
  height: 16rem;
  margin: 0 auto;
  background: url("../images/main/character-stage.png") center bottom/14rem auto no-repeat;
}
.character-stage .character-stage__background {
  z-index: -1;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.character-stage .character-stage__background.character-stage__background--study {
  z-index: 1;
  background-image: url("../images/main/character/stage-bg1.png");
}
.character-stage .character-stage__background.character-stage__background--chapel {
  z-index: 1;
  background-image: url("../images/main/character/stage-bg2.png");
}
.character-stage .character-stage__background.character-stage__background--children {
  background-image: url("../images/main/character/stage-bg3.png");
}
.character-stage .character-stage__background.character-stage__background--revival {
  background-image: url("../images/main/character/stage-bg4.png");
}
.character-stage .character-stage__background.character-stage__background--worship {
  background-image: url("../images/main/character/stage-bg5.png");
}
.character-stage .character-stage__background.character-stage__background--game {
  background-image: url("../images/main/character/stage-bg6.png");
}
.character-stage .character-stage__background.character-stage__background--market {
  z-index: 1;
  background-image: url("../images/main/character/stage-bg7.png");
}
.character-stage .character-stage__background.character-stage__background--vod {
  z-index: 1;
  background-image: url("../images/main/character/stage-bg8.png");
}
.character-stage .character-stage__background.character-stage__background--seminar {
  background-image: url("../images/main/character/stage-bg9.png");
}
.character-stage .character-stage__background.character-stage__background--studyroom {
  z-index: 1;
  background-image: url("../images/main/character/stage-bg10.png");
}
.character-stage .character-stage__background.character-stage__background--tree {
  background-image: url("../images/main/character/stage-bg11.png");
}
.character-stage .character-stage__background.character-stage__background--gallery {
  background-image: url("../images/main/character/stage-bg12.png");
}

.avatar-item {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.avatar-item.avatar-item--study {
  background-image: url("../images/main/character/character1.png");
}
.avatar-item.avatar-item--chapel {
  background-image: url("../images/main/character/character2.png");
}
.avatar-item.avatar-item--children {
  background-image: url("../images/main/character/character3.png");
}
.avatar-item.avatar-item--revival {
  background-image: url("../images/main/character/character4.png");
}
.avatar-item.avatar-item--worship {
  background-image: url("../images/main/character/character5.png");
}
.avatar-item.avatar-item--game {
  background-image: url("../images/main/character/character6.png");
}
.avatar-item.avatar-item--market {
  background-image: url("../images/main/character/character7.png");
}
.avatar-item.avatar-item--vod {
  background-image: url("../images/main/character/character8.png");
}
.avatar-item.avatar-item--seminar {
  background-image: url("../images/main/character/character9.png");
}
.avatar-item.avatar-item--studyroom {
  background-image: url("../images/main/character/character10.png");
}
.avatar-item.avatar-item--tree {
  background-image: url("../images/main/character/character11.png");
}
.avatar-item.avatar-item--gallery {
  background-image: url("../images/main/character/character12.png");
}

.main-point {
  position: relative;
  background: #f7afaf;
}
.main-point .big-logo-joytown {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%) translateY(-10%);
}
.main-point:before {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100vw;
  display: block;
  height: 14.3rem;
  background: url("../images/main/bg-wave-pink.png") 0 0/2000px auto repeat-x;
  content: "";
}
.main-point .section-inner {
  position: relative;
}
.main-point .section-inner > .bg-icon {
  z-index: 10;
  position: absolute;
}
.main-point .section-inner > .bg-icon.ps-left {
  top: 50%;
  left: 0;
}
.main-point .section-inner > .bg-icon.ps-right {
  right: 0;
  top: 40%;
}
.main-point .section-inner > .bg-icon.ps-right.n2 {
  right: 3rem;
  top: 60%;
}
.main-point .section-inner > .bg-icon.ps-bottom {
  bottom: -3rem;
  left: 40%;
}

.point-list {
  display: flex;
  max-width: 120rem;
  margin: 0 auto;
  justify-content: space-between;
  align-items: stretch;
}
.point-list .point-list__column {
  flex: 1 1 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 2.4rem;
}
.point-list .point-list__row {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.point-list .point-list__row.point-list__row--divide {
  border-top: 0.1rem solid #fff;
  border-bottom: 0.1rem solid #fff;
}
.point-list .point-list__row.point-list__row--divide .point-list__box {
  margin-top: 0;
}
.point-list .point-list__box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 3rem;
  height: 28.4rem;
  text-align: center;
  font-size: 3.2rem;
  font-weight: 700;
  color: #4d4098;
  padding: 5rem 1rem;
  background: #fff;
  margin: 2rem 0;
}
.point-list .point-list__box.point-list__box--yellow {
  background: #ffe1a8;
}
.point-list .point-list__box.point-list__box--blue {
  background: #b4a1ff;
}
.point-list .point-list__box.point-list__box--blue .point-list__tit {
  color: #fff;
}
.point-list .point-list__tit {
  display: block;
  margin-bottom: 2rem;
  line-height: 1.2;
}
.point-list .point-list__visual img {
  width: 10rem;
}
.point-list .point-list__desc {
  color: #fff;
  font-size: 1.6rem;
}
.point-list .point-list__arrow {
  position: absolute;
  width: 3rem;
  height: 5.6rem;
  background: url("../images/main/icon-pointer.svg") center/contain no-repeat;
}
.point-list .point-list__arrow.point-list__arrow--top {
  top: 5rem;
  left: 100%;
  margin-left: -1.5rem;
  transform: rotate(-90deg);
  transform-origin: left top;
}
.point-list .point-list__arrow.point-list__arrow--bottom {
  bottom: -3rem;
  left: 100%;
  margin-left: -1.5rem;
  transform: rotate(-90deg);
  transform-origin: left top;
}
.point-list .point-list__arrow.point-list__arrow--right {
  right: 2rem;
  top: 100%;
  margin-top: -1.5rem;
}

.main-live {
  background: #aa95fe;
  color: #fff;
}
.main-live .section-tit {
  color: #fff;
}
.main-live .section-inner {
  position: relative;
  padding-left: 0;
}

.live-slider {
  max-width: 120rem;
}
.live-slider .swiper-wrapper {
  padding: 9rem 0 11rem;
}
.live-slider .live-slider__item {
  position: relative;
  width: 24rem;
  height: 24rem;
  border-radius: 3rem;
  overflow: hidden;
}
.live-slider .live-slider__item .iframe-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.live-slider .live-slider__item .iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.live-slider .live-slider__item.swiper-slide-active {
  z-index: 10;
  overflow: visible;
}
.live-slider .live-slider__item.swiper-slide-active .live-slider__cont {
  display: block;
  box-shadow: 0.4rem 0 0.8rem rgba(54, 40, 80, 0.45);
  opacity: 1;
}
.live-slider .live-slider__item.swiper-slide-active .live-slider__item-inner {
  position: absolute;
  width: 52.6rem;
  -webkit-animation: aniShowSlide ease-in-out 0.2s both;
          animation: aniShowSlide ease-in-out 0.2s both;
}
.live-slider .live-slider__item.swiper-slide-active .live-slider__item-inner:after {
  display: none;
}
@-webkit-keyframes aniShowSlide {
  0% {
    opacity: 0;
    margin-top: -1rem;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
@keyframes aniShowSlide {
  0% {
    opacity: 0;
    margin-top: -1rem;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
.live-slider .live-slider__item.swiper-slide-active .live-slider__item-inner img, .live-slider .live-slider__item.swiper-slide-active .live-slider__item-inner iframe {
  width: 52.6rem;
  height: 100%;
}
.live-slider .live-slider__item.swiper-slide-active .live-slider__item-inner .live-slider__visual {
  height: 29rem;
}
.live-slider .live-slider__item.swiper-slide-active a {
  pointer-events: auto;
}
.live-slider .live-slider__item a {
  pointer-events: none;
}
.live-slider .live-slider__item-inner {
  position: relative;
  width: 24rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.live-slider .live-slider__item-inner:after {
  z-index: 10;
  top: 0;
  left: 0;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.3;
  border-radius: 3rem;
  content: "";
}
.live-slider .live-slider__visual {
  border-radius: 3rem;
  height: 24rem;
  overflow: hidden;
  background: #000;
}
.live-slider .live-slider__visual img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center bottom;
     object-position: center bottom;
}
.live-slider .live-slider__cont {
  color: #111;
  margin-top: -3rem;
  display: none;
  background: #fff;
  border-radius: 0 0 3rem 3rem;
  padding: 5.5rem 3rem 3rem;
  text-align: center;
  opacity: 0;
}
.live-slider .live-slider__tit {
  font-size: 2.8rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 500;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1rem;
}
.live-slider .live-slider__desc {
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 500;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-slider-nextprev {
  position: absolute;
  display: block;
  top: auto;
  right: 9rem;
  bottom: 10rem;
  width: 8rem;
  height: 6rem;
  background: url("../images/main/btn-slider-nextprev.svg") center/contain no-repeat;
  transition: transform ease-in-out 0.2s;
}
.live-slider-nextprev:after {
  display: none;
}
.live-slider-nextprev:hover {
  transform: translateX(0.5rem);
}
.live-slider-nextprev.swiper-button-prev {
  left: 9rem;
  right: auto;
  transform: scaleX(-1);
}
.live-slider-nextprev.swiper-button-prev:hover {
  transform: translateX(-0.5rem) scaleX(-1);
}
.live-slider-nextprev.type-earth {
  background-image: url("../images/main/btn-slider-nextprev2.svg");
}

.communicate-tab {
  position: relative;
  max-width: 96rem;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.communicate-tab:before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 0.1rem;
  background: #aa95fe;
  transform: translateX(-50%);
  content: "";
}
.communicate-tab .communicate-tab__item {
  flex: 0 0 auto;
  text-align: center;
  padding-top: 6.8rem;
  margin-top: -1.3rem;
  background: url("../images/main/line-communicate-tab.svg") top center/2.8rem auto no-repeat;
}
.communicate-tab .communicate-tab__item.communicate-tab__item--active .communicate-tab__thumb {
  border-color: #ddd5ff;
}
.communicate-tab .communicate-tab__btn {
  padding: 0 1rem;
  font-size: 1.6rem;
}
.communicate-tab .communicate-tab__thumb {
  width: 8.2rem;
  height: 8.2rem;
  border-radius: 50%;
  overflow: hidden;
  margin: -0.7rem auto 2rem;
  border: 0.7rem solid transparent;
  transition: border-color ease-in-out 0.2s;
}
.communicate-tab .communicate-tab__thumb:focus, .communicate-tab .communicate-tab__thumb:hover {
  border-color: #ddd5ff;
}
.communicate-tab .communicate-tab__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.communicate-intro {
  margin-top: 7rem;
}
.communicate-intro .communicate-intro__section {
  position: absolute;
  width: 1px;
  height: 1px;
  justify-content: space-between;
  align-items: stretch;
  overflow: hidden;
}
.communicate-intro .communicate-intro__section.communicate-intro__section--active {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  overflow: visible;
}
.communicate-intro .communicate-intro__link-area {
  flex: 0 0 50%;
  padding-right: 6rem;
  overflow: hidden;
}
.communicate-intro .communicate-intro__cont {
  font-size: 2rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 500;
  width: 50%;
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 1rem 6rem 1rem 0;
}
.communicate-intro .communicate-intro__cont-tit {
  flex: 0 0 auto;
  display: block;
  color: #aa95fe;
}
.communicate-intro .communicate-intro__cont-desc {
  flex: 0 0 auto;
  width: 100%;
  line-height: 1.6;
}
.communicate-intro .communicate-intro__cont-footer {
  flex: 0 0 auto;
  position: relative;
}
.communicate-intro .communicate-intro__cont-footer span {
  position: relative;
  z-index: 1;
  display: inline;
  padding-right: 1.5rem;
  line-height: 1.4;
  background: #fff;
}
.communicate-intro .communicate-intro__cont-footer:after {
  position: absolute;
  bottom: 1.4rem;
  left: 0;
  display: block;
  width: 100%;
  height: 0.1rem;
  background: #000;
  content: "";
}

.communicate-link {
  position: relative;
  display: block;
  height: 38rem;
  overflow: hidden;
  border-radius: 3rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.communicate-link:after {
  display: block;
  clear: both;
  content: "";
}
.communicate-link .communicate-link__bg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.communicate-link:hover .communicate-link__bg, .communicate-link:focus .communicate-link__bg {
  transition: transform ease-out 4s;
  transform: scale(1.08);
}
.communicate-link .communicate-link__cont {
  position: relative;
  float: right;
  min-width: 23.7rem;
  padding: 4rem 3rem;
  background: #f272b2;
  color: #fff;
  height: 100%;
}
.communicate-link .communicate-link__num {
  position: relative;
  margin-bottom: 4rem;
  font-size: 2.4rem;
}
.communicate-link .communicate-link__num span {
  z-index: 1;
  position: relative;
  display: inline-block;
  background: #f272b2;
  padding: 0 0.5rem 0.5rem 0;
  line-height: 1;
}
.communicate-link .communicate-link__num:after {
  position: absolute;
  bottom: 1.2rem;
  width: 100%;
  height: 0.1rem;
  background: #fff;
  display: block;
  content: "";
}
.communicate-link .communicate-link__tit {
  font-size: 4rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 700;
}
.communicate-link .communicate-link__added {
  position: absolute;
  bottom: 4rem;
  left: 3rem;
}
.communicate-link .communicate-link__added .icon38 {
  margin-right: 0.5rem;
  vertical-align: middle;
}

.communicate-thumbs {
  position: relative;
  flex: 0 0 auto;
  margin: 1rem 0;
}
.communicate-thumbs .communicate-slider-nextprev {
  left: -3rem;
  transform: scale(0.8);
}
.communicate-thumbs .communicate-slider-nextprev:after {
  color: #f272b2;
  transform: scale(0.7);
}
.communicate-thumbs .communicate-slider-nextprev.swiper-button-next {
  left: auto;
  right: -3rem;
}
.communicate-thumbs .communicate-thumbs__item {
  border-radius: 1.6rem;
  overflow: hidden;
}
.communicate-thumbs .communicate-thumbs__item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.main-contact {
  background: #ffdced;
}
.main-contact .section-tit {
  font-size: 4.8rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 500;
  color: #5928aa;
}
.main-contact .section-inner {
  padding-bottom: 0;
}

.contact-area {
  position: relative;
}
.contact-area .contact-icon {
  z-index: 2;
  position: absolute;
  pointer-events: none;
}
.contact-area .contact-icon-snack img {
  transform: scaleY(-1) rotate(-20deg);
}
.contact-area .contact-icon-snack.n1 {
  top: 0;
  left: 9rem;
}
.contact-area .contact-icon-snack.n2 {
  right: 2rem;
  bottom: 16rem;
}
.contact-area .contact-icon-chat.n1 {
  top: 12rem;
  left: 2rem;
}
.contact-area .contact-icon-chat.n2 {
  z-index: 4;
  top: 18rem;
  right: 0;
}
.contact-area .contact-icon-chat.n3 {
  top: 10rem;
  right: 4rem;
}

.contact-card {
  position: relative;
  max-width: 80.2rem;
  margin: 0 auto;
  color: #fff;
}
.contact-card .contact-card__cont {
  transform: translateY(100%);
  background: #aa95fe;
  border-radius: 6rem 6rem 0 0;
  margin: 0 4rem;
  padding: 4rem 4rem 6rem;
  text-align: center;
  transform: translateY(50%);
  transition: transform ease-in-out 0.5s 0.2s;
}
.contact-card .contact-card__cover {
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  max-width: 80.2rem;
  height: 13rem;
  background: url("../images/main/contact-card-cover.png") bottom center/contain no-repeat;
  pointer-events: none;
}
.contact-card .contact-card__tit strong {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #f3d672;
  letter-spacing: 0.2em;
}
.contact-card .contact-card__tit span {
  font-size: 2rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 500;
  display: block;
}
.contact-card .contact-card__form {
  max-width: 36.2rem;
  width: 80%;
  margin: 1rem auto 2rem;
}
.contact-card .form-item {
  margin: 1rem 0;
}
.contact-card .agree-area {
  margin-top: 1.5rem;
  padding-left: 1.5rem;
}
.contact-card .chk-item {
  color: #fff;
}
.contact-card .contact-card__footer {
  margin-top: 2rem;
}
.contact-card.screenon .contact-card__cont {
  transform: translateY(0);
}

.agree-area .agree-area__btn {
  width: 3rem;
  height: 3rem;
  background: url("../images/main/icon-arrow-bottom-yellow.svg") center right/2.3rem auto no-repeat;
}
.agree-area .agree-area__body {
  border-radius: 0.6rem;
  padding: 1rem 1.6rem;
  background: rgba(255, 255, 255, 0.1);
  max-height: 12rem;
  overflow: auto;
  text-align: left;
  margin-top: 1rem;
}
.agree-area .agree-area__body::-webkit-scrollbar {
  width: 8px;
}
.agree-area .agree-area__body::-webkit-scrollbar-thumb {
  width: 6px;
  background-color: #4d4098;
  border-radius: 10px;
}
.agree-area .agree-area__body::-webkit-scrollbar-track {
  background-color: none;
  border-radius: 10px;
  box-shadow: none;
}
.agree-area .agree-area__header {
  z-index: 0;
  position: relative;
  text-align: left;
}
.agree-area .agree-area__header:before {
  z-index: -1;
  position: absolute;
  bottom: 1rem;
  left: 0;
  width: 100%;
  height: 0.1rem;
  display: block;
  background: #fff;
  content: "";
}
.agree-area .agree-area__header .chk-item {
  background: #AA95FE;
  padding-right: 1rem;
}
.agree-area .agree-area__header .agree-area__btn {
  position: absolute;
  bottom: -0.4rem;
  right: 0;
  background-color: #AA95FE;
}

.form-item .inp-item {
  display: block;
  width: 100%;
}

.inp-item {
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 500;
  border: 0;
  background: #fff;
  line-height: 4.8rem;
  height: 4.8rem;
  text-align: left;
  padding: 0 2.2rem;
  border-radius: 2.4rem;
  font-weight: 700;
}

.chk-item {
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 500;
  cursor: pointer;
}
.chk-item > .icon {
  position: relative;
  display: inline-block;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  background: #fff;
  margin-right: 1rem;
  vertical-align: middle;
}
.chk-item > .icon:before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.2rem;
  height: 0.8rem;
  display: none;
  transform: rotate(135deg) translate(-50%, -50%);
  transform-origin: top left;
  border-top: 0.3rem solid #aa95fe;
  border-right: 0.3rem solid #aa95fe;
  content: "";
}
.chk-item span {
  vertical-align: middle;
  display: inline-block;
}
.chk-item input {
  position: absolute;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none !important;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
}
.chk-item input:checked + .icon:before {
  display: block;
}

.btn-point {
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 500;
  transition: background ease-in-out 0.2s;
  display: inline-block;
  border-radius: 1.6rem;
  background: #F15656;
  text-align: center;
  min-width: 17.5rem;
  padding: 2rem 1rem;
  color: #Fff;
}
.btn-point:hover, .btn-point:focus {
  background: #eb4b4b;
}

.btn-line {
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-weight: 500;
  transition: background ease-in-out 0.2s;
  border: 0.1rem solid #4d4098;
  height: 3.6rem;
  line-height: 3.4rem;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  font-weight: 700;
  color: #4d4098;
  border-radius: 1.8rem;
  padding: 0 1.6rem;
}
.btn-line:hover, .btn-line:focus {
  background: #e9e4ff;
}
.btn-line.btn-line--active {
  background: linear-gradient(to right, #8265cf 0%, #e557a8 100%);
  color: #fff;
  border-color: transparent;
}

.tab-area {
  margin-top: 3.5rem;
}
.tab-area .tab-area__inner {
  text-align: center;
  font-size: 0;
}
.tab-area .tab-area__inner .btn-line {
  margin: 0.5rem;
}

.btn-base {
  transition: background ease-in-out 0.2s;
  display: inline-block;
  height: 4.4rem;
  line-height: 4.2rem;
  text-align: center;
  background: #fff;
  border-radius: 2.2rem;
  color: #4d4098;
  font-size: 1.4rem;
  font-weight: 500;
}
.btn-base:hover, .btn-base:focus {
  background: #e9e4ff;
}

.btn-icon {
  display: inline-block;
  vertical-align: middle;
  padding: 0.5rem;
}
.btn-icon + .btn-icon {
  margin-left: 0.5rem;
}

.logo-ani {
  position: relative;
  display: inline-block;
  width: 5.1rem;
  height: 5rem;
}
.logo-ani img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.logo-ani .logo-ani__bg {
  -webkit-animation: logoBgRotate ease-in-out 8s infinite;
          animation: logoBgRotate ease-in-out 8s infinite;
}
@-webkit-keyframes logoBgRotate {
  0% {
    transform: rotate(0deg);
  }
  40%, 100% {
    transform: rotate(360deg);
  }
}
@keyframes logoBgRotate {
  0% {
    transform: rotate(0deg);
  }
  40%, 100% {
    transform: rotate(360deg);
  }
}
.logo-ani .logo-ani__dot {
  opacity: 0;
  transform: scale(0.8);
}
.logo-ani .logo-ani__dot.n1 {
  -webkit-animation: logoDotShow1 ease-in-out 8s infinite;
          animation: logoDotShow1 ease-in-out 8s infinite;
  transform-origin: right bottom;
}
.logo-ani .logo-ani__dot.n2 {
  -webkit-animation: logoDotShow2 ease-in-out 8s infinite;
          animation: logoDotShow2 ease-in-out 8s infinite;
}
.logo-ani .logo-ani__dot.n3 {
  -webkit-animation: logoDotShow3 ease-in-out 8s infinite;
          animation: logoDotShow3 ease-in-out 8s infinite;
}
.logo-ani .logo-ani__dot.n4 {
  -webkit-animation: logoDotShow4 ease-in-out 8s infinite;
          animation: logoDotShow4 ease-in-out 8s infinite;
}
@-webkit-keyframes logoDotShow1 {
  0%, 20% {
    transform: scale(0.5);
    opacity: 0;
  }
  23% {
    transform: scale(1.03);
    opacity: 1;
  }
  30%, 80% {
    transform: scale(1);
    opacity: 1;
  }
  85%, 100% {
    opacity: 0;
  }
}
@keyframes logoDotShow1 {
  0%, 20% {
    transform: scale(0.5);
    opacity: 0;
  }
  23% {
    transform: scale(1.03);
    opacity: 1;
  }
  30%, 80% {
    transform: scale(1);
    opacity: 1;
  }
  85%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes logoDotShow2 {
  0%, 22% {
    transform: scale(0.5);
    opacity: 0;
  }
  25% {
    transform: scale(1.03);
    opacity: 1;
  }
  32%, 80% {
    transform: scale(1);
    opacity: 1;
  }
  85%, 100% {
    opacity: 0;
  }
}
@keyframes logoDotShow2 {
  0%, 22% {
    transform: scale(0.5);
    opacity: 0;
  }
  25% {
    transform: scale(1.03);
    opacity: 1;
  }
  32%, 80% {
    transform: scale(1);
    opacity: 1;
  }
  85%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes logoDotShow3 {
  0%, 24% {
    transform: scale(0.5);
    opacity: 0;
  }
  27% {
    transform: scale(1.03);
    opacity: 1;
  }
  34%, 80% {
    transform: scale(1);
    opacity: 1;
  }
  85%, 100% {
    opacity: 0;
  }
}
@keyframes logoDotShow3 {
  0%, 24% {
    transform: scale(0.5);
    opacity: 0;
  }
  27% {
    transform: scale(1.03);
    opacity: 1;
  }
  34%, 80% {
    transform: scale(1);
    opacity: 1;
  }
  85%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes logoDotShow4 {
  0%, 26% {
    transform: scale(0.5);
    opacity: 0;
  }
  28% {
    transform: scale(1.03);
    opacity: 1;
  }
  36%, 80% {
    transform: scale(1);
    opacity: 1;
  }
  85%, 100% {
    opacity: 0;
  }
}
@keyframes logoDotShow4 {
  0%, 26% {
    transform: scale(0.5);
    opacity: 0;
  }
  28% {
    transform: scale(1.03);
    opacity: 1;
  }
  36%, 80% {
    transform: scale(1);
    opacity: 1;
  }
  85%, 100% {
    opacity: 0;
  }
}

.floating-area {
  z-index: 99;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1500px;
  width: 100%;
}

.floating-util {
  position: absolute;
  right: 1.5%;
  bottom: 5rem;
  width: 6rem;
  border-radius: 32px;
  overflow: hidden;
  background: #fff;
  transition: all ease-in-out 0.2s;
}

.floating-util button {
  display: block;
  position: relative;
  width: 100%;
  height: 6rem;
  background: url("../images/main/sp_floating.png") 0 0/6rem auto no-repeat;
  padding: 1.9rem 1.3rem 1.6rem;
  transition: background-color ease-in-out 0.2s;
  border: 0.1rem solid #dadadc;
  border-radius: 50%;
}

.floating-util button + button:before {
  position: absolute;
  display: block;
  width: 3.5rem;
  left: 1.3rem;
  top: -0.1rem;
  height: 2px;
  background: #e2e1e3;
  content: "";
  transition: opacity ease-in-out 0.2s;
}

.is-home .floating-util button + button:before {
  opacity: 0;
}

.floating-util button.kakao {
  height: 9.6rem;
}

.floating-util button.top {
  background-position-y: -9.6rem;
  background-position-x: -0.1rem;
  overflow: hidden;
}

.floating-util button:hover {
  background-color: #f1f1f1;
}

.is-home .floating-util {
  opacity: 0;
  transform: translateY(1rem);
}

/* only pc
**************************/
@media screen and (min-width: 871px) {
  .only-tablet,
	.only-resp {
    display: none !important;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 9px;
  }
	.only-pc {display: none !important;}
  .icon62 {
    width: 5rem;
    height: 5rem;
  }
  .live-slider-nextprev.swiper-button-prev {
    left: 2rem;
  }
  .live-slider-nextprev {
    right: 2rem;
  }
  .point-list .point-list__box {
    font-size: 2.6rem;
  }
  .point-list .point-list__column {
    padding: 0 1rem;
  }
  .point-list .point-list__arrow {
    height: 3rem;
    background-size: 3rem auto;
    background-position: top center;
  }
  .contact-area .contact-icon-chat.n1 {
    right: 100%;
    left: auto;
    margin-right: -20rem;
  }
  .contact-area .contact-icon-chat.n2 {
    right: -8rem;
  }
  .contact-area .contact-icon-chat.n3 {
    right: -9rem;
  }
}
/* table max
**************************/
@media screen and (max-width: 870px) {
  html {
    font-size: 10px;
  }
  .header-area,
.header-area .header-area__fixed {
    height: 6rem !important;
  }
  .header-area .icon28 {
    width: 2rem;
    height: 2rem;
  }
  .header-area .header-area__grid h1 a {
    z-index: 2;
    transform: scale(0.6);
  }
  .footer-area .footer-area__logo {
    transform: scale(0.6);
    transform-origin: top center;
    margin-bottom: 1.2rem;
  }
  .header-area .header-area__grid h1 {
    text-align: left;
  }
  .header-area .header-area__grid h1 a {
    transform-origin: left center;
  }
  .header-area .header-area__util .btn-icon--joytown {
    margin-left: 0;
    transform-origin: center right;
    transform: scale(0.8);
  }
  .btn-icon {
    padding: 0.2rem;
  }
  .btn-icon + .btn-icon {
    margin-left: 0.2rem;
  }
  .section-inner {
    padding: 6rem 2rem;
  }
  .section-tit {
    font-size: 3.2rem;
  }
  .tit-area {
    margin-bottom: 4rem;
  }
  .btn-base {
    height: 3.6rem;
    line-height: 3.4rem;
  }
  .main-visual {
    height: 80rem;
  }
  .main-visual:after {
    width: 100%;
    left: 0;
    background-size: contain;
  }
  .main-visual .section-inner {
    padding-top: 8rem;
  }
  .main-visual .section-tit {
    font-size: 4rem;
  }
  .main-visual .main-visual__paging-area .main-visual__paging-grid {
    top: 8rem;
    margin-top: 0;
    transform: none;
  }
  .main-visual .main-visual__paging-area .main-visual__paging-item {
    margin-bottom: 2rem;
  }
  .main-visual .main-visual__paging-area .main-visual__paging-item:last-child {
    margin-bottom: 0;
  }
  .main-visual .main-visual__paging-area .main-visual__paging-item:before {
    bottom: -4rem;
  }
  .main-visual .main-visual__added {
    margin-top: 2rem;
    width: 15rem;
  }
  /* 비주얼 모바일에서 scale*/
  .main-visual .main-visual__item:after {
    background-size: 119.84rem auto;
    background-position: center bottom 9rem;
    margin: 0;
  }
  .main-visual .main-visual__img,
.main-visual .main-visual__stage {
    transform: scale(0.8);
    transform-origin: center bottom;
  }
  .main-visual .main-icon.icon-avatar.n1 {
    margin-left: -36%;
    bottom: -3rem;
  }
  .main-visual .main-icon.icon-avatar.n2 {
    margin-left: 32%;
    bottom: -1rem;
  }
  .main-visual .main-visual__item.n1 .main-visual__avatar.n1 {
    top: 28rem;
  }
  .main-service {
    z-index: 2;
    background: #fff;
  }
  .main-service .section-inner {
    padding-left: 0;
    padding-right: 0;
  }
  .main-service .section-tit {
    font-size: 3.8rem;
  }
  .main-point {
    z-index: 3;
  }
  .main-point .section-inner > .bg-icon.ps-right.n1 {
    top: 30%;
  }
  .main-point .section-inner > .bg-icon.ps-right.n2 {
    top: 40%;
  }
  .point-list {
    flex-wrap: wrap;
  }
  .point-list .point-list__column {
    flex: 1 1 50%;
  }
  .point-list .point-list__box {
    margin: 1rem 0;
  }
  .live-slider .live-slider__item.swiper-slide-active .live-slider__item-inner {
    width: 34rem;
  }
  .live-slider .live-slider__tit {
    font-size: 2rem;
  }
  .live-slider .live-slider__desc {
    font-size: 1.4rem;
  }
  .main-service .tab-area {
    position: relative;
    z-index: 2;
    max-width: 67rem;
    margin-left: auto;
    margin-right: auto;
  }
  .main-service .section-inner {
    padding-bottom: 40rem;
  }
  .service-intro {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: scale(0.8) translateX(-63%);
    overflow: visible;
  }
  .main-service .bg-particle {
    transform: scale(0.5);
    transform-origin: top right;
    z-index: -1;
  }
  .main-point .big-logo-joytown {
    pointer-events: none;
  }
  .main-point .big-logo-joytown img {
    transform: scale(0.5);
    transform-origin: center bottom;
  }
  .main-point {
    margin-top: -4rem;
  }
  .main-point:before {
    pointer-events: none;
    background-size: contain;
    background-position: center bottom;
  }
  .point-list .point-list__box {
    min-height: 0;
    height: 100%;
    font-size: 2rem;
    padding: 4rem 1rem;
    margin: 0;
  }
  .point-list .point-list__visual {
    display: block;
  }
  .point-list .point-list__visual img {
    width: 7.5rem;
  }
  .point-list .point-list__row.point-list__row--divide {
    padding: 2rem 0;
  }
  .point-list .point-list__row.point-list__row--divide .point-list__box {
    margin-bottom: 2rem;
  }
  .point-list .point-list__column {
    padding-bottom: 3rem;
  }
  .point-list .point-list__row {
    padding: 1rem 0;
  }
  .live-slider-nextprev {
    z-index: 4;
    width: 7rem;
    height: 5rem;
  }
  .point-list .point-list__desc {
    font-size: 1.4rem;
  }
  .communicate-intro {
    margin-top: 3rem;
    padding: 3rem 0 0;
  }
  .communicate-intro .communicate-intro__link-area {
    padding-right: 3rem;
  }
  .communicate-intro .communicate-intro__cont-tit {
    margin-bottom: 1rem;
  }
  .communicate-link .communicate-link__num:after {
    bottom: 1.7rem;
  }
  .communicate-intro .communicate-intro__cont-footer:after {
    bottom: 1rem;
  }
  .communicate-thumbs {
    margin-top: 1.6rem;
  }
  .communicate-thumbs .communicate-slider-nextprev {
    left: -1rem;
  }
  .communicate-thumbs .communicate-slider-nextprev.swiper-button-next {
    right: -1rem;
  }
  .communicate-intro .communicate-intro__cont-footer {
    margin-top: 1.6rem;
  }
  .communicate-thumbs {
    padding: 0 2rem;
  }
  .communicate-link .communicate-link__tit {
    font-size: 2.8rem;
  }
  .communicate-link .communicate-link__cont {
    min-width: 20rem;
  }
  .communicate-tab {
    display: block;
    text-align: center;
    padding: 0;
    margin: 0 -2rem;
  }
  .communicate-tab:before {
    display: none;
  }
  .communicate-tab .communicate-tab__thumb {
    width: 6rem;
    height: 6rem;
    margin-bottom: 0.6rem;
    border-width: 0.4rem;
  }
  .communicate-tab .communicate-tab__item {
    display: inline-block;
    background: none;
    padding: 0.6rem 0 0;
    margin: 0.6rem;
    vertical-align: top;
  }
  .communicate-tab .communicate-tab__btn {
    padding: 0 0.1rem;
    overflow: visible;
  }
  .communicate-intro .communicate-intro__section {
    flex-wrap: wrap;
  }
  .communicate-intro .communicate-intro__link-area {
    flex: 1 1 100%;
    padding: 0 0 2rem;
  }
  .communicate-intro .communicate-intro__cont {
    flex: 1 1 100%;
    padding: 0;
  }
  .communicate-intro .communicate-intro__cont {
    font-size: 1.6rem;
  }
  .main-contact .section-tit {
    font-size: 3.4rem;
  }
  .contact-area .contact-icon img {
    transform: scale(0.8);
  }
  .contact-area .contact-icon-chat {
    margin-top: 2rem;
  }
  .contact-area .contact-icon-chat.n1 {
    margin-right: -16rem;
  }
  .contact-area .contact-icon-snack.n2 {
    bottom: auto;
    top: 10rem;
  }
  .footer-area .footer-area__grid {
    padding: 4rem 2rem;
    font-size: 1.4rem;
  }
  .live-slider .live-slider__item.swiper-slide-active .live-slider__item-inner img {
    width: 100%;
  }
  .live-slider .live-slider__item.swiper-slide-active .live-slider__item-inner iframe {
    position: static;
    width: 100%;
    height: 29rem;
  }
  .communicate-tab .communicate-tab__btn {
    font-size: 1.4rem;
    line-height: 1.2;
    padding-top: 1rem;
  }
  .communicate-intro {
    margin-top: 0;
  }
  .contact-card .contact-card__cont {
    margin: 0 2rem;
  }
  .contact-card .contact-card__cover {
    left: -1rem;
    right: -1rem;
  }
  .contact-card .contact-card__tit span {
    font-size: 1.6rem;
  }
}
/* phone max
**************************/
@media screen and (max-width: 500px) {
  .no-mobile {
    display: none !important;
  }
  .only-tablet {
    display: none !important;
  }
  .communicate-link:hover .communicate-link__bg, .communicate-link:focus .communicate-link__bg {
    transform: none;
  }
  .live-slider {
    margin: 0 -2rem;
  }
  .live-slider .live-slider__cont {
    display: block;
    opacity: 1;
  }
  .live-slider .live-slider__item-inner {
    width: calc(100% - 4rem) !important;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: none;
  }
  .live-slider .live-slider__item {
    height: auto;
  }
  .live-slider .live-slider__visual {
    height: 29rem;
  }
  .live-slider .live-slider__item .iframe-wrapper {
    height: 29rem;
    border-radius: 3rem;
    overflow: hidden;
  }
  .live-slider .live-slider__item img {
    width: 100% !important;
    height: 100%;
    -o-object-position: center !important;
       object-position: center !important;
  }
  .live-slider .live-slider__item.swiper-slide-active .live-slider__item-inner {
    -webkit-animation: none;
            animation: none;
  }
  .live-slider .live-slider__item .iframe-wrapper iframe {
    display: block;
    line-height: 0;
    height: 2rem;
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    width: 100% !important;
    height: 100%;
    overflow: hidden;
    border-radius: 3rem;
  }
  .point-list .point-list__desc {
    font-size: 1.2rem;
  }
  .point-list .point-list__column {
    padding-bottom: 1rem;
  }
  .point-list .point-list__row.point-list__row--divide {
    padding: 1rem 0;
  }
  .point-list .point-list__row.point-list__row--divide .point-list__box {
    margin-bottom: 1rem;
  }
  .point-list .point-list__arrow {
    transform: scale(0.8);
  }
  .point-list .point-list__arrow.point-list__arrow--top,
.point-list .point-list__arrow.point-list__arrow--bottom {
    transform: scale(0.8) rotate(-90deg);
  }
  .header-area .header-area__grid h1 a {
    transform: scale(0.45);
  }
  /* 비주얼 모바일에서 scale*/
  .main-visual .main-visual__item:after {
    background-size: 74.9rem auto;
    background-position: center bottom 9rem;
  }
  .main-visual .main-visual__img,
.main-visual .main-visual__stage {
    transform: scale(0.5) translateY(-6.5rem);
    transform-origin: center bottom;
  }
  .main-visual .main-visual__stage .balloon-area {
    transform: scale(1.5);
  }
  .main-visual .main-icon.icon-avatar {
    transform: scale(0.5);
    transform-origin: center bottom;
    margin-bottom: 2rem;
  }
  .main-visual .main-icon.icon-avatar .balloon-area {
    transform: scale(1.5);
  }
  .main-visual {
    height: 71rem;
  }
  .main-visual .section-inner {
    padding-top: 6rem;
  }
  .main-visual .main-visual__paging-area .main-visual__paging-item > span {
    display: none;
  }
  .main-visual .section-tit {
    font-size: 3rem;
    text-align: center;
  }
  .main-visual .main-visual__added {
    margin-left: auto;
    margin-right: auto;
  }
  .main-visual .main-visual__paging-area .main-visual__paging-grid {
    top: 10rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: auto;
    transform: rotate(-90deg);
  }
  .main-visual .main-visual__paging-area .main-visual__paging-item {
    margin-bottom: 1.2rem;
  }
  .main-visual .main-visual__paging-area .main-visual__paging-item:before {
    display: none;
  }
  .main-visual .main-visual__paging-area .main-visual__paging-item:after {
    width: 0.6rem;
    height: 0.6rem;
  }
  .main-service .section-tit {
    font-size: 2.8rem;
  }
  .icon38 {
    width: 2.6rem;
    height: 2.6rem;
  }
  .icon54 {
    width: 3.2rem;
    height: 3.2rem;
  }
  .icon62 {
    width: 3.6rem;
    height: 3.6rem;
  }
  .btn-line {
    height: 3rem;
    padding: 0 1rem;
    line-height: 2.8rem;
    font-size: 1.4rem;
  }
  .tab-area {
    padding: 0 1rem;
  }
  .tab-area .tab-area__inner .btn-line {
    margin: 0.2rem;
  }
  .main-service .section-inner {
    padding-bottom: 35rem;
  }
  .main-point .section-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .service-intro {
    padding-top: 30rem;
    transform: scale(0.6) translateX(-85%);
  }
  .main-point .section-inner > .bg-icon.ps-right.n2 {
    top: 23%;
  }
  .section-tit {
    font-size: 2.6rem;
  }
  .section-desc {
    margin-top: 1rem;
    font-size: 1.2rem;
  }
  .tit-area {
    margin-bottom: 3rem;
  }
  .main-live .section-inner {
    padding: 6rem 2rem;
  }
  .live-slider .swiper-wrapper {
    padding: 0 0 7rem;
  }
  .main-live .live-slider-nextprev {
    margin-bottom: -4rem;
  }
  .communicate-link {
    height: 24rem;
  }
  .communicate-link .communicate-link__cont {
    padding: 3rem 2rem;
  }
  .communicate-link .communicate-link__num {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
  .communicate-link .communicate-link__num:after {
    bottom: 1.2rem;
  }
  .communicate-link .communicate-link__tit {
    font-size: 2rem;
  }
  .communicate-link .communicate-link__cont {
    min-width: 40%;
  }
  .communicate-link .communicate-link__added {
    left: 2rem;
    bottom: 2rem;
  }
  .communicate-tab .communicate-tab__item {
    margin: 0 0 1.4rem;
  }
  .main-contact .section-tit {
    font-size: 2.8rem;
  }
  .contact-card .contact-card__cont {
    margin: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 3.6rem 3.6rem 0 0;
  }
  .contact-card .contact-card__cover {
    left: -2rem;
    right: -2rem;
  }
  .contact-area .contact-icon img {
    transform: scale(0.5);
    display: none;
  }
  .contact-area .contact-icon-chat.n1 {
    margin-right: -12rem;
  }
  .inp-item {
    height: 3.6rem;
    line-height: 3.4rem;
    font-size: 1.4rem;
    padding: 0 1.6rem;
  }
  .chk-item > .icon {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.6rem;
  }
  .chk-item {
    font-size: 1.2rem;
  }
  .chk-item > .icon:before {
    width: 1rem;
    height: 0.6rem;
  }
  .chk-item span {
    margin-top: -0.4rem;
  }
  .agree-area .agree-area__body {
    font-size: 1.2rem;
  }
  .btn-point {
    padding: 1.2rem 1rem;
    border-radius: 1.2rem;
  }
  .footer-area .footer-area__grid,
.footer-area .footer-area__copy {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 350px) {
  html {
    font-size: 8px;
  }
}
.header-area__gnb {
  display: block;
  width: 100%;
  height: 6.8rem;
  background: linear-gradient(110deg, #ab70dc 500px, #6dd5e0 100%);
  position: relative;
}
.header-area__gnb::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 500px;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: url("../images/bg_gnb_left.png");
  z-index: 1;
}
.header-area__gnb .gnb-list {
  display: block;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 68px;
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
}
.header-area__gnb .gnb-list li a {
  color: #ffffff;
  font-size: 2rem;
  font-weight: medium;
  position: relative;
  padding-top: 4px;
  display: block;
  padding: 2px 10px;
}
.header-area__gnb .gnb-list li a.active, .header-area__gnb .gnb-list li a::after {
  content: "";
  display: block;
  position: absolute;
  width: 0%;
  height: 2px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  margin-top: 2px;
  transition: all ease-in-out 0.2s;
}
.header-area__gnb .gnb-list li a:hover::after {
  width: 100%;
}/*# sourceMappingURL=main.css.map */





/* sub 추가 */

.container-sub {
  overflow: hidden;
  margin-top: 6.8rem;
  padding-top:5.5rem;
  padding-bottom:10.5rem;
}

@media screen and (max-width: 1000px) {
	.container-sub {
	  padding-left:1rem;
	  padding-right:1rem;
	}
}


.login {
	width:48rem; 
	max-width:100%;
	margin:0 auto; 
}

.join {
	width:48rem; 
	max-width:100%;
	margin:0 auto; 
}

.section-header {
	margin-bottom:3rem;
	text-align:center;
}
.section-header h3{
	font-size:3.2rem;
}

.section-header h5{
	font-size:1.6rem;
	font-weight:200;
	color:#9d9fc6;
	letter-spacing:0.2rem;
}

.section-header p{
	font-size:1.7rem;
	font-weight:400;
	line-height:2.4rem;
	color:#000;
	margin:1rem 0;
	word-break:keep-all;
}

.section-content {
	/* padding:5.5rem 8rem; */
	/* font-weight:400; */
}

.section-content.form{
	border-top:2px solid #464982;
	background-color:#f4f7fc;0
}


.form-group {
	margin-bottom:2rem;
}

.form-group label{
	display:block;
	text-align:left;
	font-size:1.6rem;	
	margin-bottom:1rem;
}
.form-group .form-control {
	width:100%;
	height:5.2rem;
	line-height:3.2rem;
	font-size:1.6rem;
	padding:1rem;	
	background-color:#fff;
	border:1px solid #6a789b;
	border-radius:0.6rem;
}

.form-group input.high{
	height:5.6rem;
	line-height:3.6rem;
}

.form-group textarea {
	height: 12rem !important;
	padding:0 !important;
	resize: none;
}

.btn-area{
	display:block;
	clear:both; 
	text-align:center;
}

.btn-area .btn-login, .btn-area .btn-join{
	margin:1rem 0 2.5rem;
	width:100%;
	height:5.6rem;
	line-height:3.6rem;
	font-size:1.6rem;
	color:#fff;
	padding:1rem;	
	background-color:#464982;
	border-radius:0.6rem;
}

.btn-area > ul > li {
  display: inline-block;
  vertical-align: top;
}
.btn-area > ul > li:after {
  position: relative;
  top: 2px;
  display: inline-block;
  vertical-align: top;
  width: 1px;
  height: 1.4rem;
  content: "";
  margin: 0;
  background-color: #c2c2d4;
}
.btn-area > ul > li > a {
  display: inline-block;
  width:15rem;
  text-align:center;
  vertical-align: top;
  font-size: 1.6rem;
  color: #000;
}
.btn-area > ul > li:last-child:after {
  display: none;
}

.agree-area{
	display:block;
	clear:both;
	margin:2rem 0;
	
}
.agree-area .agree-check{
	margin:0.5rem 0;
	font-size:1.6rem;
}

.agree-area .agree-check .allagree {
	font-weight:bold;
}

.agree-area .agree-check input[type="chekbox"] {
	width:2rem;
	height:2rem;
}

.agree-area .agree-check .view_all {
	float:right;
	color:#464982;
	text-decoration:underline;
}

.sns-login{
	margin-top:8.5rem;
	width:100%;
}

.sns-login .title{
	margin-bottom:2.5rem;
}
 
.sns-login h6{
	display:inline-block;
	width:10rem;
	font-size:1.6rem;
	color:#464982;
}

.sns-login .hline{
	margin-top:1.2rem;
	float:right;
	display:inline-block;
	width:calc(100% - 10rem);
	height:1px;
	background-color:#464982;
}
.sns-login .btn-naver{
	margin:0.8rem 0;
	display:block;
	width:100%;
	height:4.8rem;
	line-height:4.8rem;
	font-size:1.6rem;
	color:#04cf5c;
	text-align:center;
	border:1px solid #04cf5c;
	border-radius:0.6rem;
	background: #fff url("../images/sub/logo_naver.png") 3rem center no-repeat;
}

.sns-login .btn-kakao{
	margin:0.4rem 0;
	display:block;
	width:100%;
	height:4.8rem;
	line-height:4.8rem;
	font-size:1.6rem;
	color:#000;
	text-align:center;
	border-radius:0.6rem;
	background: #fee500 url("../images/sub/logo_kakao.png") 3rem center no-repeat;
}

@media screen and (max-width: 480px) {
	.section-content {
		padding:5.5rem 1rem;
	}
}


/* 레이어 팝업 */

.popup_layer{
	z-index:1001;
	position: absolute;
    top: 50%;
    /* left: 50%;
	transform: translate(-50%, -50%); */
	background:#fff; 
	border:2px solid #8c9ddc;
	padding: 24px 34px 0px 34px;
}

.findPW {
	left:1rem;
	width:32rem;
	height:21.6rem;
	border-radius:0 0 0.6rem 0.6rem;
}

.popup_layer_header {
	position:relative;
	/*margin:2rem 2rem 0rem;*/

}
.popup_layer_header h3{
	font-size:2rem;
	line-height:2.2rem;
}

.popup_layer_con {
	
}

.popup_layer_con .form-group:first-child {/* margin-top: 34px; */}

.popup_layer_con .form-group .form-find {
	border:0;
	border-bottom:2px solid #6a789b;
	border-radius:0;
	color:#000;
	padding: 6px 2px;
	margin-top:34px;
}

.popup_layer_con .form-group .form-select {
	width:16rem;
	height:4.8rem;
	line-height:2.8rem;
	font-size:1.6rem;
	padding:1rem;	
	background:#fff url('../images/sub/icon_down.png') right center no-repeat;
	appearance: none;
	border:0;
	border-bottom:2px solid #6a789b;
	border-radius:0;
	color:#000;
}

.popup_layer_con .form-group .price{
	float:right;
	width:10rem;
	line-height:2.8rem;
	padding:1rem;
	font-size:1.6rem;
	font-weight:normal;
}

.popup_layer_con .desc{
	margin:34px 0px;
	font-size:1.6rem;
	font-weight:normal;
}

.btn-close {
	position: absolute;
	top:0;
	right:0;
	display: block;
	width:2rem;
	height:2rem;
	background:url("../images/sub/icon_close.png") center center no-repeat;
}
.btn-submit{
	position:absolute;
	left:-2px;
	bottom:-1px;
	width:calc(100% + 4px);
	height:5.6rem;
	line-height:3.6rem;
	font-size:1.6rem;
	color:#fff;
	padding:1rem;	
	background-color:#464982;
	border-radius:0 0 0.6rem 0.6rem;
}





/* 무료 TOWN 개설하기 */

.open {
	width:100rem; 
	max-width:100%;
	margin:0 auto; 
} 

.open .section-content {

}

.open .section-content > ul{
	width:68rem;
	max-width:100%;
	margin:0 auto;
	padding-bottom:3rem;
	border-bottom:1px solid #464982;
}

.section-content ul li dl {
	width:100%;
}

.section-content ul li dl dt{
	display:inline-block;
	float:left;
	width:14.8rem;
	padding:1rem 0 1rem 2.5rem;
	font-size:1.6rem;	
	font-weight:400;
	line-height:2.8rem;	
}

.section-content ul li dl dd{
	display:inline-block;
	width:calc(100% - 14.8rem);
}

.section-content ul li dl dd .form-group .form-control {
	width:32rem;
	height:4.8rem;
	line-height:2.8rem;
	font-size:1.6rem;
	padding:1rem;	
	background-color:#fff;
	border:1px solid #6a789b;
	border-radius:0.6rem;
}

.section-content ul li dl dd .form-group .short{
	width:24rem;

}

.section-content ul li dl dd .form-group input.readonly {
	border: 0;
	box-shadow: none;
	background-color: transparent;
}

.btn-doublecheck {
	margin:0.4rem 0 0 2rem;
	width:11rem;
	height:4rem;
	line-height:3rem;
	font-size:1.6rem;
	color:#fff;
	text-align:left;
	padding:0.5rem 0 0.5rem 2rem;	
	background:#6a789b url('../images/sub/icon_check.png') 8.5rem center no-repeat;
	border-radius:0.6rem;
}

.form-group .form-select{
    width:32rem;
	height:4.8rem;
	line-height:2.8rem;
	font-size:1.6rem;
	padding:1rem;	
	background:#fff url('../images/sub/icon_down.png') right center no-repeat;
	border:1px solid #6a789b;
	border-radius:0.6rem;
	appearance: none;
}



.open .form-group label{
	display:inline-block;
	width:15.4rem;
	text-align:left;
	font-size:1.6rem;	
	margin:0 1rem 0 0;
}
.open .form-group label img {
	display:block;
	width:15.4rem;
	height:9.2rem;
	border:1px solid #6a789b;
	border-radius:0.6rem;
}

.open .form-group input[type="radio"]{
	width:2rem;
	height:2rem;
}

.open .view_all {
	color:#464982;
	text-decoration:underline;
	margin-left:2rem;
}


.btn-area .btn-open {
	display:block; 
	margin:5.5rem auto;
	width:48rem;
	height:5.6rem;
	line-height:3.6rem;
	font-size:1.6rem;
	color:#fff;
	padding:1rem;	
	background-color:#464982;
	border-radius:0.6rem;
}





.paymentFee{
	left:1rem;
	top:50%;
	width:34rem;
	height:33rem;
	border-radius:0 0 0.6rem 0.6rem;
}


/* Tabs */

.tabs{	
	margin:0 0 3rem 0;
	padding:0
}
.tab-nav{
	margin:0;
	padding:0;
	font-size:0;
	list-style:none
}
.tab-nav:after{
	width:calc(100% - 3px);
	height:0;
	display:block;
	content:" ";
	overflow:hidden;
	clear:both;
	margin-top:-2px; 
	border-top:2px solid #97b1e1;
}
.tabs .tab-nav > li{
	margin:0 0 0 -1px;
	display:inline-block;
	width:20%;
}
.tabs .tab-nav > li:first-child{
	margin-left:0
}

.tabs .tab-nav > li.active + li{
	margin-left:0;
	border-left:0;	
}
.tabs .tab-nav > li.active a:hover,.tabs .tab-nav > li.active a{
	background:#ffffff;
	border-top:2px solid #97b1e1;
	border-right:2px solid #97b1e1;
	border-bottom:2px solid transparent;
	border-left:2px solid #97b1e1;
	cursor:default;
}
.tabs .tab-nav > li a{
	width:100%;
	padding:2rem 0;
	margin:0;
	font-size:2rem;
	font-weight:500;
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	display:inline-block;
	color:#30376d;
	background-color:#fff;
	border:1px solid #d6d6d6;
	border-bottom:1px solid #97b1e1;
	cursor:pointer
}

@media screen and (max-width: 480px) {
	.tabs .tab-nav > li a {
		font-size:1.4rem;
	}
}

/* 주요기능 */

.major {
	width:100rem;
	max-width:100%;
	margin:auto;
}

.major .section-content{
	display:inline-block; 
	width:100%;
	padding:2.5rem 0 8rem;
	border-bottom:1px solid #ddd;
	margin:0 auto 5rem;
}

.major .section-content.noline{
	border:none;
	margin:0 auto;
}

.txt-area {
	width:62rem;
	max-width:100%;
}

.txt-area h4{
	font-size:2.4rem;
	font-weight:500;
	margin-bottom:4rem;
}
.lineArea {
	position:relative;
}

.lineArea .vline{
	position:absolute;
	top:0;
	left:0;
	width:1.8rem;
	height:50%; 
	border-right:1px solid #e3c5ed;
	z-index:1;
}

.lineArea .vline.long{
	height:70%; 
}

.lineArea .vline.long2{
	height:76%; 
}


.lineArea ul{
	position:relative;
	z-index:2;
	display:inline-block;
}

.lineArea ul li{
	display:block;
	clear:both;
}

.lineArea .num{
	float:left;
	display:block;
	width:3.8rem;
	height:3.8rem;
	background:#464982;
	border-radius:50%;
	font-size:1.6rem;
	line-height:3.6rem;
	color:#fff;
	text-align:center;
	margin-right:1.5rem;	
}

.lineArea .txt{
	float:right;
	width:56rem;
}

.lineArea .txt h6{
	display:block;
	width:17.4rem;
	height:3.8rem;
	background:#f1e2f6;
	border-radius:1.8rem;
	font-size:2rem;
	line-height:3.6rem;
	color:#000;
	padding:0 2rem;
	margin-bottom:2rem; 
	text-align:center;
}

.lineArea .txt p{
	width:100%;
	font-size:1.7rem;
	line-height:3.2rem;
	margin-bottom:7rem; 
}

.image-area {
	display:inline-block;
}

.image-area li{
	margin-bottom:2.4rem;
}

.fleft{
	float:left;
}

.fright{
	float:right;
}

.feature-area{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}


.feature_desc{
	width:27.5rem;
	max-width:48%;
	margin-bottom:7rem;
}

.feature_desc .feature_icon{
	display:block;
	width:4.4rem;
	height:4.4rem;
	margin-bottom:2rem;
}

.feature_desc .feature_icon.icon01{
	background:url('../images/sub/icon_feature01.png') center center no-repeat;
}
.feature_desc .feature_icon.icon02{
	background:url('../images/sub/icon_feature02.png') center center no-repeat;
}
.feature_desc .feature_icon.icon03{
	background:url('../images/sub/icon_feature03.png') center center no-repeat;
}
.feature_desc .feature_icon.icon04{
	background:url('../images/sub/icon_feature04.png') center center no-repeat;
}
.feature_desc .feature_icon.icon05{
	background:url('../images/sub/icon_feature05.png') center center no-repeat;
}
.feature_desc .feature_icon.icon06{
	background:url('../images/sub/icon_feature06.png') center center no-repeat;
}

.feature_desc h6{
	font-size:2rem;
	font-weight:500;
	margin:1rem 0;
}
.feature_desc p{
	font-size:1.6rem; 
	line-height:2.4rem;
}

@media screen and (max-width: 640px) {
	.lineArea .txt{
		width:calc(100% - 5.5rem);
	}

	.image-area {
		width:100%;
		text-align:center;
	}
}



/* 템플릿 */

.template {
	width:100rem;
	max-width:100%;
	margin:auto;
}

.template .section-content{
	padding:0 0 2rem;
	border-bottom:1px solid #ddd;
	margin-bottom:6rem;
}

.template .section-content.noline{
	border:none;
	margin:0 auto;
}

.temp_list{
	border-top:1px solid #ddd;
	padding:5rem 0 1rem;
}

.temp_list h4 {
	font-size:2.4rem;
	line-height:3.6rem;
	font-weight:500;
	margin-bottom:2.5rem;
}

.temp_list .gallery .gal-item{
	width:24rem;
	max-width:48%;
}

.template .view_list{
	text-align:center;
}

.template .view_list .big{
	float:left;
	display:inline-block;
	max-width:100%;
}

.template .view_list img{
	max-width:100%;
}

.template .view_list .big p{
	font-size:1.6rem;
	line-height:6rem;
	border-bottom:1px solid #000;
	text-align:left;
}

.template .view_list ul{
	display:flex;
	flex-wrap:wrap; 
	justify-content:space-between;
	width:50%;
	max-width:100%;
	float:right;
}

.template .view_list ul li{
	width:24rem;
	max-width:48%;
	position:relative;
	margin:0 0 2rem;
}

.template .view_list ul li a{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.25);
	text-align:center;
	color:#fff;
	font-size:1.6rem;
	padding-top:25%;
	
}

@media screen and (max-width: 1200px) {

	.template .view_list .big{
		float:none;
		clear:both;
		margin:0 auto 2rem;
	}
	.template .view_list ul {
		float:none;
		clear:both;
		width:100%;
		margin:0 auto;
	}
}


/* 요금 */

.price{
	width:100rem;
	max-width:100%;
	margin:auto;
}

.price .section-content{
	display:inline-block; 
	width:100%;
	padding:2.5rem 0 8rem;
	margin:0 auto 5rem;
}

.price-list {
	display:flex;
	flex-wrap:wrap; 
	justify-content:space-between;
	align-items:stretch; 

}

.price-item{
	width:24rem;
	height:44.5rem;
	border:2px solid #8c9ddc;
	border-radius:1.6rem;
	position:relative;
	text-align:center;
	padding:3rem 1rem;
	margin-bottom:3.5rem;
}

.price-item h3{
	font-size:2rem;
	color:#9136d0;
	margin-bottom:1rem;
}

.price-item h2{
	font-size:2.4rem;
	margin-bottom:3rem;
}

.price-item h2 span{
	font-weight:500;
}

.price-item ul{
	margin-left:2.5rem;
}

.price-item ul li {
	list-style-image:url('../images/sub/price_check.png');
	text-align:left;
	font-size:1.6rem;
	word-break:keep-all; 

}

.price-item .option-tit{
	position:relative;
	margin:2rem;
}

.price-item .option-tit:before {
	position:absolute;
	top:50%;
	left:2.5%;
	content:"";
	display:block;
	width:95%;
	height:1px;
	border-bottom:1px solid #97b1e1;
	margin:0 auto;
	z-index:1;
}

.price-item .option-tit span{
	position:relative;
	display:inline-block;
	width:10rem;
	height:2.4rem;
	line-height:2.2rem;
	text-align:center;
	background:#97b1e1;
	color:#fff;
	border-radius:1.2rem;
	margin:auto;
	z-index:2;
}

.price-item .btn-start{
	position:absolute;
	left:-2px;
	bottom:-1px;
	width:calc(100% + 4px);
	height:5.6rem;
	line-height:3.6rem;
	font-size:1.6rem;
	color:#fff;
	padding:1rem;	
	background-color:#464982;
	border-radius:0 0 1.6rem 1.6rem;
}

@media screen and (max-width: 870px) {
	.price-list {
		justify-content:space-around;
	}
}

.price .tip ul{
	margin-left:2.5rem;
}

.price .tip ul li {
	list-style-image:url('../images/sub/tip_bullet.png');
	text-align:left;
	font-size:1.6rem;
	margin:1rem 0;

}

.faq_list_wrap {

}

.faq_list_wrap h4{
	font-size:2.8rem;
	margin-bottom:2rem;
}

.faq_list {
	color: #363636; 
	border-top:2px solid #363636;  
}

.faq_list li{
	border-bottom:1px solid #ddd;
	font-size:1.6rem;
}

.faq_list p.q {
	display: block; 
	padding:2rem 3rem 2rem 4rem;  
	position: relative; 
	cursor: pointer;
	color:#464982; 
}

.faq_list p.q:after {
	content:"+"; 
	font-size:3rem; 
	display:block; 
	text-align: center; 
	position:absolute;  
	width:4rem; 
	height:4rem; 
	line-height:3.8rem;
	right:1rem; 
	top:50%; 
	margin-top:-2rem;	
	z-index:12;
	color:#97b1e1;
	font-weight:400; 
}

.faq_list p.q.on:after  {
	content:"-"; 
	font-weight:400; 
}

.faq_list p.q.on {
	background: #fff;
	font-weight:500;
}

.faq_list span.qt {
	color: #464982; 
	display:block; 
	float: left; 
	width: 4rem; 
	text-align: center; 
	margin-left: -4rem; 

}

.faq_list div.answer  {
	color: #686868; 
	background:#fff; 
	padding:2rem 2rem 5rem 4rem; 
	display: none;
}

.faq_list div.answer:before {
	content:"A"; 
	display: block; 
	color: #97b1e1; 
	width:4rem;  
	display: block; 
	float: left; 
	text-align:center; 
	margin-left: -4rem;
}

.faq_list div.answer img {
	max-width:100%; 
	margin: 0;
}

.faq_list div.answer .desc {

}


/* 고객센터 */

.cs {
	width:100rem;
	max-width:100%;
	margin:auto;
}


.cs .section-content{
	/* padding:2.5rem 0 8rem; */
	/* text-align:center; */
}


.guide .section-content{
	/* background:#f4f7fc; */
	/* margin:0 auto 5rem; */
}



/* Accordion */
.accordion {
	color: #363636; 
	border-top:2px solid #363636;  
	font-size:1.6rem;
}
.accordion li{
	padding:1rem;
	border-bottom: 1px solid #d6d6d6; 
	text-align:left;
}


.accordion .tit {
	display: block;position: 
	position: relative;	
	cursor: pointer;
	padding:2rem 0;
}

.accordion .tit.active {
	font-weight: 500; 
}

.accordion .cont-area {
	padding: 2rem 0; 
	display: none;
}

.accordion .cont-area .desc {}

.accordion .date {
	display: inline-block;
	float:right; 
}

.table-wrap {
	width:100%;
	

}
.table-wrap .table {
  width: 100%;
  table-layout: fixed;
}
.table-wrap .table thead {
  position: relative;
}
.table-wrap .table thead:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background:#000;
}
.table-wrap .table thead tr th {
  font-size: 1.6rem;
  color: #000;
  font-weight: 500;
  padding-bottom:2rem;
}

.table-wrap .table tbody tr td {
  font-size: 15px;
  color: #8e8e8e;
  font-weight: 400;
  text-align: center;
  padding:2rem 0.5rem;
  border-bottom: 1px solid #d6d6d6;
}
.table-wrap .table tbody tr td > a {
  display: inline-block;
  font-size: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.table-wrap .table tbody tr td > a .icon-new {
  position: relative;
  top: -2px;
  display: inline-block;
  vertical-align: middle;
  width: 0.9rem;
  height: 0.9rem;
  font-style: normal;
  margin-left: 0.7rem;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: 0 0;
  background-image: url(../.../images/ico_new.png);
}
.table-wrap .table tbody tr td > a .icon-file {
  position: relative;
  top: -2px;
  display: inline-block;
  vertical-align: middle;
  width: 0.9rem;
  height: 13rem;
  font-style: normal;
  margin-left: 0.7rem;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: 0 0;
  background-image: url(../.../images/ico_file.png);
}
.table-wrap .table tbody tr td > a .icon-file ~ .icon-file {
  margin-left: 3px;
}

.table-wrap .table tbody tr td:nth-of-type(2) {
  text-align: left;
  padding-left:5rem;
}
.table-wrap .table tbody tr.notice td > a {
  font-weight: 600;
}
.table-wrap .table tbody tr.notice td:nth-of-type(1) {
  font-weight: 500;
  color: #6b53e3;
}
.controls {
  margin-top: 7rem;
}
.controls .pagination {
  text-align: center;
  font-size: 0;
}
.controls .pagination > ul > li {
  display: inline-block;
  vertical-align: top;
  padding: 0 0.5rem;;
}
.controls .pagination > ul > li > a {
  display: block;
  font-size: 1.7rem;
  width: 3.6rem;
  height: 3.6rem;
  line-height: 3.2rem;
  color: #000; 
  font-weight: 500;
  border-radius: 50%;
  border: 1px solid #fff;
}

.controls .pagination > ul > li.active > a {
  color: #fff;
  border-color: #97b1e1;
  background-color: #97b1e1;
}

.controls .pagination > ul > li.first > a, .controls .pagination > ul > li.last > a, .controls .pagination > ul > li.prev > a, .controls .pagination > ul > li.next > a {
  border-color: #e9e9e9;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto;
}


.controls .pagination > ul > li.first > a {
  background-image: url(../images/ico_first.png);
}

.controls .pagination > ul > li.last > a {
  background-image: url(../images/ico_last.png);
}
.controls .pagination > ul > li.prev {
  padding-right: 7.5px;
}
.controls .pagination > ul > li.prev > a {
  background-image: url(../images/ico_prev.png);
}
.controls .pagination > ul > li.next {
  padding-left: 7.5px;
}
.controls .pagination > ul > li.next > a {
  background-image: url(../images/ico_next.png);
}
.controls .btn-area {
  margin-top: 2rem;
  text-align: right;
}

.controls .btn-area > .btn-write {
	display: inline-block;
	width: 9rem;
	font-size: 1.6rem;
	line-height: 3.6rem;
	padding:1rem;
	color: #fff;
	text-align: center;
	vertical-align: top;
	background-color: #464982;
	border-radius:0.6rem; 
}

@media screen and (max-width: 600px) {
	.table-wrap .table tbody tr td:nth-of-type(2) {
	  padding-left:1rem;
	}
}

.btn-exper{
	margin:0 auto;
	display: inline-block;
	width:32rem;
	font-size: 1.6rem;
	line-height: 3.6rem;
	padding:1rem;
	color: #fff;
	text-align: center;
	vertical-align: top;
	background-color: #464982;
	border-radius:0.6rem; 
}

.guide .screenshot{
	margin:11rem auto 8rem;
	position:relative;
	width:56rem;
	/* height:31.5rem; */
}


.guide .screenshot span.point{
	position:absolute;
	background:url('../images/sub/guide_point.png') center center no-repeat ;
	background-size:contain; 
	width:2.5rem;
	height:6rem;
	color:#fff;
	line-height:2.4rem;
}

.guide .screenshot span.top01 {
	top:-3rem;
	left:3rem;
}

.guide .screenshot span.top02 {
	top:-3rem;
	left:6.6rem;
}

.guide .screenshot span.top03 {
	top:-3rem;
	left:20.2rem;
}

.guide .screenshot span.top04 {
	top:-3rem;
	right:2.5rem;
}

.guide .screenshot span.left05 {
	left:-3.3rem;
	top:19.7rem;
	width:6rem;
	height:2.5rem;
	background:url('../images/sub/guide_pointL.png') center center no-repeat ;
	text-align:left;
	padding-left:0.8rem;
}

.guide .screenshot span.bottom06 {
	background:url('../images/sub/guide_pointB.png') center center no-repeat ;
	left:3rem;
	top:29rem;
	padding-top:3.5rem;
}

.guide .screenshot span.bottom07 {
	background:url('../images/sub/guide_pointB.png') center center no-repeat ;
	left:6.6rem;
	top:29rem;
	padding-top:3.5rem;
}
    

.guide .screenshot img{
	max-width:95%;
	border:1rem solid #fff;
}

.guide_list{
	border-top:2px solid #464982;
	width:56rem;
	margin:0 auto;
}

.guide_list li{
	display:inline-block;
	border-bottom:1px solid #ddd;
	padding:1rem;
	width:100%;
}

.guide_list li dl {
	width:100%;
	display:block;
}

.guide_list li dl dt{
	width:14.8rem;	
    line-height: 2.8rem;
    margin-bottom:0;
	text-align:left;
}

.guide_list li dl dd{
	width:41rem;
	text-align:left;
	padding:1rem;
	font-size:1.6rem;	
    line-height: 2.8rem;
	font-weight:400;
}


.edu .section-content{
	border-bottom:1px solid #ddd;
	margin:0 auto 5rem;

}

.gallery{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}


.gallery .gal-item{
	width:32rem;
	margin:0 0 3rem;
}

.gallery .gel-img {
	position:relative;
	width:100%;
}

.gallery .gel-img img{
	max-width:100%;
}

.gallery .gel-img a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	/*
	background:rgba(108,116,216,0.25) url('../images/sub/icon_play.png') center center no-repeat;
	*/
}


.gallery .gal-item p{
	font-size:1.6rem;
	margin:1rem 0;
	line-height:3.4rem;
	text-align:left;
}

.gallery .gal-item p .num{
	display:inline-block;
	width:3.6rem;
	height:3.6rem;
	font-weight:700;
	color:#fff;
	text-align:center;
	background:#464982;
	border-radius:50%; 
	margin-right:1rem;
}

@media screen and (max-width: 870px) {
	.gallery{
		justify-content:space-around;
	}
}


.cs .section-content.form{
	width:57rem;
	padding:5rem 7.5rem;
	margin:0 auto;
}

.cs .section-content ul li dl dt{
	width:10.5rem;
	padding:1rem 0;	
}

.cs .section-content ul li dl dd{
	width:calc(100% - 10.5rem);
}

.hline {
	width:100%;
	height:1px;
	background:#d8d8e5;
	margin:2rem 0 3rem;
}

.cs .btn-area {
	margin:2rem 0 7rem;
}

.btn-cancel {
	display:block; 
	float:left;
	width:14.4rem;
	height:5.6rem;
	line-height:3.6rem;
	font-size:1.6rem;
	color:#464982;
	padding:1rem;	
	background-color:#d7d8ef;
	border-radius:0.6rem;
}


.btn-inquiry {
	display:block; 
	float:right;
	width:26.4rem;
	height:5.6rem;
	line-height:3.6rem;
	font-size:1.6rem;
	color:#fff;
	padding:1rem;	
	background-color:#464982;
	border-radius:0.6rem;
}

/* mypage */

.mypage {
	width:100rem;
	max-width:100%;
	margin:auto;
}

.mypage .section-content{
	padding:0 0 9rem;
}

.mypage .mypage-box {
	width:100%;
	display:inline-block; 
	padding:3rem 3rem 4rem ;
	border:2px solid #6a789b;
	margin-bottom:3.6rem;
}

.mypage .mypage-tit{
	position:relative;
	margin-bottom:2rem;
}

.mypage .mypage-tit .view_more {
	position:absolute;
	right:0;
	top:0.5rem;
	font-size:1.6rem;
	color:#6a789b;
	padding:0 3rem;
	background:url('../images/sub/icon_plus.png') right center no-repeat;
}

.mypage h4{
	font-size:2rem;
	font-weight:500;
}

.mypage-box .mypage-tit h4:after{
	content:"";
	display:block;
	width:4rem;
	height:1px;
	background:#6a789b;
	margin:1.6rem 0 0 ;
}

.info-area {
	display
}

.info-area ul{
	margin-right:11rem;
	display:flex;
	justify-content:center;
}

.info-area ul li{
	width:19rem;
	border-right:1px solid #d2d6e1;
	padding-left:1.6rem;
	font-size:1.6rem;
}

.info-area li:last-child{
	border:none;
}

.info-area li .stit{
	display:block;
	font-weight:bold;
	line-height:3.2rem;
}


.info-area .btn-area{
	float:right;
	margin-top:-1.6rem;

}

.btn-mypage{
	display:block;
	width:10rem;
	height:3.2rem;
	border:1px solid #6a789b;
	border-radius:1.6rem;
	background:#fff url('../images/sub/icon_arrow.png') 7.5rem center no-repeat;
	text-align:left;
	padding-left:1.4rem;
	color:#6a789b;
}

.pay-list li{
	padding:0.8rem 0;
}

.pay-list .pay-rows {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}

.pay-rows .pay-item{
	width:19.5rem;
	height:3rem;
	line-height:2.8rem;
	text-align:center;
	font-size:1.6rem;
}

.pay-item.cate, .pay-item.cont{
	font-weight:500;
}

.pay-item.receipt{
	
}
.pay-item .line{
	display:inline-block;
	width:1px;
	height:1rem;
	background:#000; 
	margin:0 1rem;
}

.btn-receipt{
	display:block;
	width:9.6rem;
	height:2.8rem;
	border-radius:1.4rem;
	background:#464982 url('../images/sub/icon_receipt.png') 1.5rem center no-repeat;
	text-align:left;
	padding-left:3.6rem;
	color:#fff;
	margin:0 auto;
}

.mypage-area{
	display:inline-block;
	width:100%;
	margin:5rem 0;
}

.mypage-area .inquiry-list {
	border-top:1px solid #6a789b;
	margin-bottom:2rem;
}

.mypage-area .inquiry-list li{
	padding:2.5rem 0;
	border-bottom:1px solid #d2d6e1;
	font-size:1.6rem;
}

.mypage-area .btn-area{
	float:right;
}

.mypage .mytown{
	float:left;
	width:50%;
	padding:0 1rem;
}

.mytown ul{
	width:26rem;
	margin:1.6rem 0;
}
.mytown li{
	border-bottom:1px solid #d2d6e1;
	padding:1.6rem 0;
}
.mytown li .go-quick{
	color:#464982;
	padding:0 3rem;
	float:right;
}

.mytown .use-room{
	margin:2rem 0;
	display:flex;
	flex-wrap:wrap;
}

.use-room .room-item{
	width:7.2rem;
	height:7.2rem;
	background:#97b1e1;
	border-radius:50%;
	color:#fff;
	text-align:center;
	font-size:1.6rem;
	line-height:7rem;
	margin:0 1rem 1rem 0;
}

.mytown-list:before{
	content:"";
	display:block;
	clear:both;
	width:100%;
	height:1px;	
}

.mytown-list {
	display:inline-block;
	margin:5rem 1rem 1rem;
}

.mytown-list table{
	width:100%;
}

.mytown-list table thead {
	border-top:1px solid #6a789b;
	border-bottom:1px solid #6a789b;
	margin-bottom:2.5rem;
}

.mytown-list table th {
	padding:1.6rem 0;
	color:#6a789b;
	font-size:1.6rem;
}


.mytown-list table td {
	text-align:center;
	padding:0.8rem 0;
	line-height:2.8rem;
	font-size:1.6rem;
	vertical-align:middle;
}

.mytown-list table tbody tr:first-child td{
	padding-top:3rem;
}

.mytown-list .bold{
	font-weight:500;
}

.mytown-list .grade{
	display:inline-block;
	width:14rem;
	height:2.8rem;
	line-height:2.6rem;
	border-radius:1.4rem;
	background:#464982;
	color:#fff;
	font-size:1.4rem;
	margin:0 1rem;
}

.mytown-list .grade.off{
	background:#b1bbd3;
}


.mytown-list .edit{
	display:inline-block;
	padding-left:3rem;
	background:url('../images/sub/icon_gear.png') left center no-repeat;	
}

.mypage .btn-open{
	width:32rem;
	max-width:100%;
	height:6rem;
	background:linear-gradient(90deg, rgba(167,127,224,1) 0%, rgba(116,202,224,1) 100%);
	border-radius:3rem;
}

.mytown-content {
  display: block;
}

.mypage .mytown {display: block; float: none; padding: 0px; width: 100%;}

.class-pack {margin-top: 20px;}
.class-pack > div {background-color: #fff; border: 1px solid #d2d6e1; border-radius: 10px;}
.class-pack > div.on {border-radius: 10px 10px 0 0;}
.class-pack > div + div {margin-top: 10px;}
.class-pack .class-head {position: relative;padding: 0 3rem;height: 67px;background: url(../images/icnClassPack.png) 98% center no-repeat;}
.class-pack .on .class-head {background-image: url(../images/icnClassPackOn.png);}
.class-pack .on .class-head a:hover {color: #97b1e1;}
.class-pack .class-head h3 {padding-top: 1.6rem; line-height: 3.4rem; font-size: 2rem; color: #333; font-weight: 600;}
.class-pack .class-nav {position: absolute; top: 1.6rem; right: 6.2rem; font-size: 0;}
.class-pack .class-nav span {display: inline-block; margin-left: 1rem; width: 9rem; height: 3.4rem; line-height: 3.4rem; font-size: 1.4rem; color: #333; font-weight: 500; background-color: #fff; border: 1px solid #ccc; border-radius: 3rem; text-align: center; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s;}
.class-pack .class-nav span.on {background-color: #97b1e1; color: #ffffff; border-color: #97b1e1;}
.class-pack .class-body {display: none; padding: 2rem 1.8rem; border-top: 1px solid #dadada;}
.class-pack .on .class-body {display: block;} 
.class-pack .class-body .class-list {margin-top: 0;}
.class-pack .class-body .class-list > div {margin-bottom: 0;}
.mytown-list {margin-top: 0px;}


/* 이용약관 레이어 팝업 */
.layer-popup1 {
	display: none; 
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 60;
	background:rgba(0, 0, 0, 0.5);
}


.layer-popup1 .dimmed {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.layer-popup1 .popup {
	position: absolute;
	left: 50%;
	top: 50%;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid #999;
	transform:translate(-50%, -50%);
}

.layer-popup1 .popup .cont {
	color: #4c4c4c;
	text-align: left;
}
.layer-popup1 .popup .scroll-area {
	height: 400px;
    overflow-y: scroll;
    padding: 10px;
	border: 1px solid #f1f1f1;
	font-size: 15px;
}

.layer-popup1 .pop-bottom-btn{
	display:block;
	width:100%;
	text-align: center;
	padding-bottom: 40px;
}
.layer-popup1 .pop-bottom-btn button{
	display:inline-block;
	width:90%;
	height:40px;
	line-height:40px;
	font-size: 16px;
	color: #fff;
	background: #333333;
	border-radius: 50px;
}


.layer-popup1 .popup .title-area {
	height: 41px;
    /* margin-top: -40px; */
    display: table;
    width: 100%;
    font-size: 20px;
    font-weight: 900;
}

.layer-popup1 {
	display:none
  }
.layer-popup1.on{
 display:block
}


.layer-popup1_1 {
	display: none; 
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 60;
	background:rgba(0, 0, 0, 0.5);
}


.layer-popup1_1 .dimmed {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.layer-popup1_1 .popup {
	position: absolute;
	left: 50%;
	top: 50%;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid #999;
	transform:translate(-50%, -50%);
}

.layer-popup1_1 .popup .cont {
	color: #4c4c4c;
	text-align: left;
}
.layer-popup1_1 .popup .scroll-area {
	height: 400px;
    overflow-y: scroll;
    padding: 10px;
	border: 1px solid #f1f1f1;
	font-size: 15px;
}

.layer-popup1_1 .pop-bottom-btn{
	display:block;
	width:100%;
	text-align: center;
	padding-bottom: 40px;
}
.layer-popup1_1 .pop-bottom-btn button{
	display:inline-block;
	width:90%;
	height:40px;
	line-height:40px;
	font-size: 16px;
	color: #fff;
	background: #333333;
	border-radius: 50px;
}


.layer-popup1_1 .popup .title-area {
	height: 41px;
    /* margin-top: -40px; */
    display: table;
    width: 100%;
    font-size: 20px;
    font-weight: 900;
}

.layer-popup1_1 {
	display:none
  }
.layer-popup1_1.on{
 display:block
}

.layer-popup2 {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 60;
	background:rgba(0, 0, 0, 0.5);
}


.layer-popup2 .dimmed {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.layer-popup2 .popup {
	position: absolute;
	left: 50%;
	top: 50%;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid #999;
	transform: translate(-50%, -50%);
}

.layer-popup2 .popup .cont {
	color: #4c4c4c;
	text-align: left;
}
.layer-popup2 .popup .scroll-area {
	height: 400px;
    overflow-y: scroll;
    padding: 10px;
	border: 1px solid #f1f1f1;
	font-size: 15px;
}

.layer-popup2 .pop-bottom-btn{
	display:block;
	width:100%;
	text-align: center;
	padding-bottom: 40px;
}
.layer-popup2 .pop-bottom-btn button{
	display:inline-block;
	width:90%;
	height:40px;
	line-height:40px;
	font-size: 16px;
	color: #fff;
	background: #333333;
	border-radius: 50px;
}


.layer-popup2 .popup .title-area {
	height: 41px;
    /* margin-top: -40px; */
    display: table;
    width: 100%;
    font-size: 20px;
    font-weight: 900;
}

.layer-popup2 {
	display:none
  }
.layer-popup2.on{
 display:block
}

.layer-popup3 {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 60;
	background:rgba(0, 0, 0, 0.5);
}


.layer-popup3 .dimmed {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.layer-popup3 .popup {
	position: absolute;
	left: 50%;
	top: 50%;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 4px;
    border: 1px solid #999;
}

.layer-popup3 .popup .cont {
	color: #4c4c4c;
	text-align: left;
}
.layer-popup3 .popup .scroll-area {
	height: 400px;
    overflow-y: scroll;
    padding: 10px;
	border: 1px solid #f1f1f1;
	font-size: 15px;
}

.layer-popup3 .pop-bottom-btn{
	display:block;
	width:100%;
	text-align: center;
	padding-bottom: 40px;
}
.layer-popup3 .pop-bottom-btn button{
	display:inline-block;
	width:90%;
	height:40px;
	line-height:40px;
	font-size: 16px;
	color: #fff;
	background: #333333;
	border-radius: 50px;
}


.layer-popup3 .popup .title-area {
	height: 41px;
    /* margin-top: -40px; */
    display: table;
    width: 100%;
    font-size: 20px;
    font-weight: 900;
}

.layer-popup3 {
	display:none
  }
.layer-popup3.on{
 display:block
}

.layer-player_popup {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 60;
	background:rgba(0, 0, 0, 0.5);
}


.layer-player_popup .dimmed {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.layer-player_popup .popup {
	position: absolute;
	left: 50%;
	top: 50%;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid #999;
	transform:translate(-50%, -50%);
	width:600px;
}

.layer-player_popup .popup .cont {
	color: #4c4c4c;
	text-align: left;
}
.layer-player_popup .popup .scroll-area {
	height: 400px;
	width: 540px;
    padding: 10px;
	border: 1px solid #f1f1f1;
	font-size: 15px;
}

.layer-player_popup .pop-bottom-btn{
	display:block;
	width:100%;
	text-align: center;
	padding-bottom: 40px;
}
.layer-player_popup .pop-bottom-btn button{
	display:inline-block;
	width:90%;
	height:40px;
	line-height:40px;
	font-size: 16px;
	color: #fff;
	background: #333333;
	border-radius: 50px;
}


.layer-player_popup .popup .title-area {
	height: 41px;
    /* margin-top: -40px; */
    display: table;
    width: 100%;
    font-size: 20px;
    font-weight: 900;
}

.layer-player_popup {
	display:none
  }
.layer-player_popup.on{
 display:block
}



.layer-player_popup2 {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 60;
	background:rgba(0, 0, 0, 0.5);
}


.layer-player_popup2 .dimmed {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.layer-player_popup2 .popup {
	position: absolute;
	left: 50%;
	top: 50%;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid #999;
	transform:translate(-50%, -50%);
	width:600px;
}

.layer-player_popup2 .popup .cont {
	color: #4c4c4c;
	text-align: left;
}
.layer-player_popup2 .popup .scroll-area {
	height: 400px;
	width: 540px;
    padding: 10px;
	border: 1px solid #f1f1f1;
	font-size: 15px;
}

.layer-player_popup2 .pop-bottom-btn{
	display:block;
	width:100%;
	text-align: center;
	padding-bottom: 40px;
}
.layer-player_popup2 .pop-bottom-btn button{
	display:inline-block;
	width:90%;
	height:40px;
	line-height:40px;
	font-size: 16px;
	color: #fff;
	background: #333333;
	border-radius: 50px;
}


.layer-player_popup2 .popup .title-area {
	height: 41px;
    /* margin-top: -40px; */
    display: table;
    width: 100%;
    font-size: 20px;
    font-weight: 900;
}

.layer-player_popup2 {
	display:none
  }
.layer-player_popup2.on{
 display:block
}

.servicebtn{
	margin-left: 1rem;
	width: 12rem;
	height: 3.4rem;
	line-height: 3.4rem;
	font-size: 1.4rem;
	color: #333;
	font-weight: 500;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 3rem;
	text-align: center;
}

@media screen and (max-width: 870px) {
	.mypage .mytown {
		float:none;
		width:100%;
	}
	
	.mypage-box.pack {padding: 1em 1rem 2rem;}
  .class-pack .class-head {height: auto;}
  
  .class-pack .class-nav { position: relative;
    top: inherit;
    left: -1rem;
    margin-top: 1.2rem;
  }
  .class-pack .class-nav span {margin-bottom: 1rem;}
  .class-pack .class-body {padding: 1rem 0px;}

  .mytown-list {overflow:auto;}
  .mytown-list table {white-space:nowrap;border-collapse:collapse;}
  .mytown-list table tbody tr td {width: 30%;}
}

@media screen and (max-width: 840px) {
	.open .section-content > ul{
		width:100%;
	}

	.open .section-content ul li dl dt{
		padding-left:0;
		width:100%;
	}

	.open .section-content ul li dl dd{
		width:100%;
	}

	.btn-area .btn-open{
		width:100%;
	}
	
	.guide .screenshot {
		margin: 2rem auto;
		width: 100%;
		height: 100%;
	}
	.guide .screenshot span {display: none;}
}

@media screen and (max-width: 680px) {
	.info-area ul{
		margin-right:0;
	}
	.info-area .btn-area{
		margin-top:1.6rem;

	}
	.mytown-list .grade{
		display:block;
		margin:0 auto;
	}
	
	.mytown-list table colgroup,
  .mytown-list table thead {display: none;}
  .mytown-list table tbody {display: block;}
  .mytown-list table tbody tr {display: block;}
  .mytown-list table tbody tr td {width: 30%;}
  .class-pack .class-nav {left: 0rem;}
  .mytown-list table tbody tr td {width: 100%; display: block;padding-top:10px !important;}

	
	.cs .section-content.form {width: 100%;padding: 2rem 2rem;}
	.cs .section-content ul li dl dt {width: 30%; text-align: left;}
	.cs .section-content ul li dl dd {width: 70%;}
	.cs .section-content ul li dl dd .form-group .form-select,
	.cs .section-content ul li dl dd .form-group .form-select {width: 100%;}
	.cs .section-content ul li dl dd .form-group .form-control {width: 100%;}
	.cs .btn-area button {width:  100%; margin-top: 2rem;}
}


@media screen and (max-width: 480px) {
	.info-area ul{
		flex-direction:column;
		
	}

	.info-area ul li{
		border-right:none;
		border-bottom:1px solid #d2d6e1;
		padding:1rem;
		margin-bottom:1rem;
	}
	
	.mytown-list .grade{
		max-width:100%;
		height:auto;
		word-break:keep-all;
	}

	.mytown-list .edit{
		display:inline-block;
		padding:2.2rem 0 0 0;
		background:url('../images/sub/icon_gear.png') center top no-repeat;	
	}
	
	.controls .pagination > ul > li.first > a {display: none;}
	.controls .pagination > ul > li.last > a {display: none;}
	
	.table-wrap .table tbody tr td {overflow: hidden; text-overflow:ellipsis; font-size: 1.5rem;}
	
}



@media screen and (max-width: 480px) {
	.open .view_all {
		margin-left:1rem;
	}
	
	.guide .screenshot {
		margin: 2rem auto;
		width: 100%;
		height: 21.5rem;
	}
	.guide .screenshot span {display: none;}
}







/* manual add */

.container-manual {
  overflow: hidden;
  margin-top: 6.8rem;
  padding-top:5.5rem;
  padding-bottom:10.5rem;
}


.manual {		
	margin:auto;
}

.manual .tabs {
	width:100rem;
	max-width:100%;
	margin:0 auto 3rem;
}

.manual .tabs .tab-nav > li{
	margin:0 0 0 -1px;
	display:inline-block;
	width:25%;
}

.manual section {
	display:inline-block; 
	width:100%;
	margin:0 auto 0;
	padding:10rem 0 5rem;
}

.manual .section-header {
	margin:0 0 5rem;
}

.row{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	max-width:100rem;
	margin-right:auto;
	margin-left:auto;
	margin-top:0;
	margin-bottom:0;
	padding:7.5rem 0;
}

.row.alignR {flex-direction:row-reverse;}
.row.line {border-bottom:1px solid #ddd;}

.width-1{width:8.33333%}
.width-2{width:16.66667%}
.width-3{width:25%}
.width-4{width:33.33333%}
.width-5{width:41.66667%}
.width-6{width:50%}
.width-7{width:58.33333%}
.width-8{width:66.66667%}
.width-9{width:75%}
.width-10{width:83.33333%}
.width-11{width:91.66667%}
.width-12{width:100%}

.bgLightGray{ background:#F6F6F8; }
.bgGray{ background:#eee; }


.manual .txtArea {  }

.manual .txtArea h4{
	font-size:2.4rem;
	font-weight:500;
	margin-bottom:4rem;
}


.manual .txtArea .num{
	float:left;
	display:block;
	width:3.8rem;
	height:3.8rem;
	background:#464982;
	border-radius:50%;
	font-size:1.6rem;
	line-height:3.6rem;
	color:#fff;
	text-align:center;
	margin-right:1.5rem;	
}

.manual .txtArea .txt{
	float:left;		
	width: calc(100% - 5.5rem); 
	word-break:keep-all;
}

.manual .txtArea .txt.wide{
	width:100% !important;
}

.manual .txtArea .txt h6{
	display:block;
	width:17.4rem;
	height:3.8rem;
	background:#f1e2f6;
	border-radius:1.8rem;
	font-size:2rem;
	line-height:3.6rem;
	color:#000;
	padding:0 2rem;
	margin-bottom:2rem; 
	text-align:center;
}

.manual .txtArea .txt p {
	width:100%;
	font-size:1.7rem;
	line-height:3.2rem;
	margin-bottom:7rem; 
}

.manual .txtArea .txt p.small {
	font-size:1.4rem;
	font-weight:400; 
	margin-top:2rem;
}

.manual .txtArea .txt p.mb-20 {
	margin-bottom:2rem;
}

.manual .txtArea .txt p.tac {
	
}

.manual .txtArea .half li {
	width:48%;
	margin:0 1%;
	float:left;
}

.manual .txtArea .half li .num {
	float:none;
	margin: 0 auto 1rem;
}

.manual .txtArea .half li .txt{
	width:100%;
	margin-bottom:3rem; 
}

.manual .txtArea .txt ul {
	margin-left:2rem;
}

.manual .txtArea .txt ul li {
	width:100%;
	font-size: 1.6rem;
	line-height:2;
	font-weight:400; 
	list-style-type: circle;
}

.gt {display:inline-block; width:1rem; height:2rem; line-height:2rem; background:url('../images/manual/iconGt.png') no-repeat 50% 50%; background-size:auto;  }



.manual .imgArea{
	margin:auto;
	padding-bottom:3rem;
	text-align:center;
}



.manual .screenshot{
	position:relative;
	display:inline-block;
	margin:0 auto;
	width:auto; 
}

.manual .shadow{
	box-shadow:0 0 3rem rgba(0,0,0,0.125) ;
}

.manual img{
	max-width:100%;
}




.manual .screenshot span.point{
	position:absolute;
	left:0;
	width:6.75rem;
	height:3.2rem;
	line-height:3.2rem;
	background:url('../images/sub/guide_pointL.png') left center no-repeat ;
	text-align:left;
	padding-left:0.5rem;
	color:#fff;
}

#aOne span.point.left01 {	top:13rem;}
#aOne span.point.left02 {	top:21.25rem;}
#aOne span.point.left03 {	top:29.5rem;}
#aOne span.point.left04 {	top:37.75rem;}
#aOne span.point.left05 {	top:44.5rem;}
#aOne span.point.left06 {	top:51.5rem;}
#aOne span.point.left07 {	top:58.5rem;}
#aTwo span.point.left01 {	left:3rem; bottom:9rem;}
#aTwo span.point.left02 {	left:13.7rem; bottom:4.75rem;}
#aThree span.point.left01 { left:52%; top:22%;}
#aThree span.point.left02 { left:0%; top:37%; }
#aThree span.point.left03 { left:70%; top:37%; }
#aThree span.point.left04 { left:-1.5rem; top:52%; }
#aThree span.point.left05 { left:-1.5rem; top:75%; }
#aSix span.point.left31 { left:20%; top:22%; }

#uOne span.point.left01 {	left:35%; bottom:18.5%;}
#uOne span.point.left02 {	left:30%; bottom:27%;}
#uOne span.point.right03 {
	left:auto;
	width:6.8rem;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
	right:34%; 
	bottom:18.5%;
	}

#uTwo span.point.left01 {	left:-1rem; top:5rem;}
#uTwo span.point.left02 {	left:-1rem; top:12rem;}
#uTwo span.point.left03 {	left:-1rem; top:20.25rem;}
#uTwo span.point.left04 {	left:-1rem; top:27rem;}
#uTwo span.point.left05 {	left:-1rem; top:35.5rem;}
#uTwo span.point.left06 {	left:-1rem; top:43rem;}
#uTwo span.point.left07 {	left:-1rem; top:47rem;}


#uThree span.point.right01 { 
	left:2.5%; 
	top:2.5%;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
}

#uThree span.point.right02 { 
	left:2.5%; 
	top:42%;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
}

#uThree span.point.left03 {left:auto; right:4%; top:2.5%;}
#uThree span.point.left04 {left:auto; right:4.75%; top:13.5%;}
#uThree span.point.left05 {left:19.5%; bottom:3.5%;}
#uThree span.point.left06 {left:89%; bottom:3.5%;}

#uFour span.point.left01 {left:37.5%; top:25.5%;}
#uFour span.point.left02 {left:22.5%; top:55%;}
#uFour span.point.left03 {left:37.5%; top:55%;}
#uFour span.point.left04 {left:55%;  top:25.5%;}
#uFour span.point.left05 {left:55%; bottom:25%;}

#uFive span.point.left01 {left:8%; top:50%;}
#uFive span.point.right02 {
	left:37.5%; 
	top:50%;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
}
#uFive span.point.left03 {left:45%; bottom:22.5%;}
#uFive span.point.left04 {left:auto; right:10%;  top:50%;}
#uFive span.point.left05 {left:auto; right:18%; bottom:5%;}

#uSix span.point.left01 {	left:13%; bottom:22%;}
#uSix span.point.left02 {	left:35%; bottom:22%;}
#uSix span.point.left03 {	left:55%; top:30%;}

#uSix span.point.left321 {	left:-1rem; top:10%;}
#uSix span.point.left322 {	left:-1rem; top:21%;}
#uSix span.point.left323 {	left:-1rem; top:32%;}
#uSix span.point.left324 {	left:-1rem; top:43%;}
#uSix span.point.left325 {	left:-1rem; top:54%;}
#uSix span.point.left326 {	left:-1rem; top:65.5%;}
#uSix span.point.left327 {	left:-1rem; top:72%;}

@media screen and (max-width: 1000px) {
	.manual .tabs {
		max-width:calc(100% - 2rem);
		margin-left:1rem;
		margin-right:1rem;
	}

}

@media screen and (max-width: 890px) {
	#uTwo span.point.left01 { top:3.25rem;}
	#uTwo span.point.left02 {	top:8.75rem;}
	#uTwo span.point.left03 {	top:15rem;}
	#uTwo span.point.left04 {	top:20.5rem;}
	#uTwo span.point.left05 {	top:26.75rem;}
	#uTwo span.point.left06 {	top:32.75rem;}
	#uTwo span.point.left07 {	top:36rem;}

}

@media screen and (max-width: 768px) {	
	.row.alignR {flex-direction:row; }
	.width-1,.width-2,.width-3,.width-4,.width-5,.width-6,.width-7,.width-8,.width-9,.width-10,.width-11,.width-12{width:100%; }
	.manual .fleft, .manual fright { float:none; }

	.manual .txtArea { width:90%; margin:auto 5%;  }
	.manual .imgArea { width:90%; margin:auto 5%;  }

	.manual .txtArea .txt p.tac { text-align:left !important;}

	.manual .txtArea .half li {width:100%; margin:0;  float:none; }
	.manual .txtArea .half li .num { float:left; margin:0 1.5rem 0 0;}
	.manual .txtArea .half li .txt{ width:calc(100% - 5.5rem);  text-align:left;}

	#aSix span.point.left31 { left:17.5%; top:22%; }

	#uOne span.point.left01 {	left:30%; bottom:16.5%;}
	#uOne span.point.left02 {	left:27.5%; bottom:27%;}
	#uOne span.point.right03 { right:30%; bottom:16.5%;  }

	#uTwo span.point.left01 {	left:0; top:9%;}
	#uTwo span.point.left02 {	left:0; top:20%;}
	#uTwo span.point.left03 {	left:0; top:33.5%;}
	#uTwo span.point.left04 {	left:0; top:45%;}
	#uTwo span.point.left05 {	left:0; top:58.5%;}
	#uTwo span.point.left06 {	left:0; top:70%;}
	#uTwo span.point.left07 {	left:0; top:76.5%;}

	#uThree span.point.left05 {left:18%; }
	#uThree span.point.left06 {left:86.5%; }

	#uSix span.point.left01 {	left:11%; }
	#uSix span.point.left02 {	left:31%; }
	#uSix span.point.left03 {	left:52%; }

	#uSix span.point.left321 {	left:1rem; top:10%;}
	#uSix span.point.left322 {	left:1rem; top:21%;}
	#uSix span.point.left323 {	left:1rem; top:32%;}
	#uSix span.point.left324 {	left:1rem; top:43%;}
	#uSix span.point.left325 {	left:1rem; top:54%;}
	#uSix span.point.left326 {	left:1rem; top:65.5%;}
	#uSix span.point.left327 {	left:1rem; top:72%;}

}

@media screen and (max-width: 640px) {

	#aThree span.point.left01 {top:20%; left:48%;	}
	#aThree span.point.left02 {top:36%;	}
	#aThree span.point.left03 {left:68.5%; top:36%;	}
	#aThree span.point.left04, #aThree span.point.left05 { left:-1rem; }
	#aSix span.point.left31 { left:15%; }

	#uOne span.point.left01 {	left:27.5%; bottom:15%}
	#uOne span.point.left02 {	left:25%; bottom:25%;}
	#uOne span.point.right03 { right:27.5%; bottom:15%;  }

	#uThree span.point.right01 { top:1%;}
	#uThree span.point.right02 { left:2.5%; top:41%;}
	#uThree span.point.left03 { right:4%; top:1%;}
	#uThree span.point.left04 { right:4.75%; top:12.5%;}
	#uThree span.point.left05 {left:15%; bottom:0;}
	#uThree span.point.left06 {left:82%; bottom:0;}

	#uFour span.point.left01 {left:34%; top:25%;}
	#uFour span.point.left02 {left:19%; top:50%;}
	#uFour span.point.left03 {left:34%; top:50%;}
	#uFour span.point.left04 {left:48%;  top:21%;}
	#uFour span.point.left05 {left:51%; bottom:22%;}

	#uFive span.point.left01 {left:5%; }
	#uFive span.point.right02 {left:37.5%; }
	#uFive span.point.left03 {left:40%; bottom:20%;}
	#uFive span.point.left04 {right:10%; }
	#uFive span.point.left05 {right:18%; }

	#uSix span.point.left01 {	left:9.5%; bottom:20%;}
	#uSix span.point.left02 {	left:29.5%; bottom:20%;}
	#uSix span.point.left03 {	left:49%; top:30%;}

	#uSix span.point.left321 {	left:-1rem;}
	#uSix span.point.left322 {	left:-1rem;}
	#uSix span.point.left323 {	left:-1rem;}
	#uSix span.point.left324 {	left:-1rem;}
	#uSix span.point.left325 {	left:-1rem;}
	#uSix span.point.left326 {	left:-1rem;}
	#uSix span.point.left327 {	left:-1rem;}
		
}

@media screen and (max-width: 480px) {
	#aThree span.point.left01 {left:44%; top:19%; }
	#aThree span.point.left02 {top:35%;	}
	#aThree span.point.left03 {left:65%; top:35%; }
	#aThree span.point.left04, #aThree span.point.left05 { left:-0.5rem; 	width:3rem}
	#aSix span.point.left31 { left:12.5%; }

	#uOne span.point.left01 {	left:25%; bottom:14%}
	#uOne span.point.left02 {	left:22.5%; bottom:23%;}
	#uOne span.point.right03 { right:25%; bottom:14%;  }

	#uTwo span.point.left01 {	left:-1.5rem; width:5rem}
	#uTwo span.point.left02 {	left:-1.5rem; width:5rem}
	#uTwo span.point.left03 {	left:-1.5rem; width:5rem}
	#uTwo span.point.left04 {	left:-1.5rem; width:5rem}
	#uTwo span.point.left05 { left:-1.5rem; width:5rem}
	#uTwo span.point.left06 {	left:-1.5rem; width:5rem}
	#uTwo span.point.left07 {	left:-1.5rem; width:5rem}

	#uThree span.point.right01 { top:-1rem; left:1%}
	#uThree span.point.right02 { left:1%; top:36%;}
	#uThree span.point.left03 { right:3%; top: -1rem;}
	#uThree span.point.left04 { right:3.5%; top:9%;}
	#uThree span.point.left05 {left:12.5; }
	#uThree span.point.left06 {left:78%; }

	#uSix span.point.left321 {	left:-1.5rem; width:5rem}
	#uSix span.point.left322 {	left:-1.5rem; width:5rem}
	#uSix span.point.left323 {	left:-1.5rem; width:5rem}
	#uSix span.point.left324 {	left:-1.5rem; width:5rem}
	#uSix span.point.left325 {	left:-1.5rem; width:5rem}
	#uSix span.point.left326 {	left:-1.5rem; width:5rem}
	#uSix span.point.left327 {	left:-1.5rem; width:5rem}


}

.fnav {
  position: fixed;
  top: 25%;
  bottom: 0;
  right: 2rem;
  height: 100%;
  list-style: none;
  z-index: 997;
}


.dot-nav {
  list-style: none;
  position: relative;
  z-index: 5;
}

.dot-nav a {
  display: inline-block;
  background: #ddd;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  vertical-align: middle;
}

.dot-nav a:hover {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  background: #f272b2;
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
}

.dot-nav a.active {
  background-color: #f272b2;
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
}

.dot-nav li {
  margin: 25px 0;
}

.dot-nav li span {
  opacity: 0;
  position: fixed;
  right:2rem;
  vertical-align: middle;
  color: #fff;
  background: #444853;
  padding: 8px 8px;
  margin-top: -16px;
  margin-right: 32px;
  border-radius: 4px;
  -webkit-transition: opacity 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out;
  font-size: 14px;
  width: 100%;
  max-width: 200px;
}

.dot-nav li span b {
  display: block;
  font-size: 18px;
  line-height: 1;
  margin-bottom: 5px;
}

.dot-nav li a.active + span,
.dot-nav li a:hover + span {
  opacity: 1;
}




/* sub 추가 */

.container-sub {
  overflow: hidden;
  margin-top: 6.8rem;
  padding-top:5.5rem;
  padding-bottom:10.5rem;
}

@media screen and (max-width: 1000px) {
	.container-sub {
	  padding-left:1rem;
	  padding-right:1rem;
	}
}


.login {
	width:48rem; 
	max-width:100%;
	margin:0 auto; 
}

.join {
	width:48rem; 
	max-width:100%;
	margin:0 auto; 
}

.section-header {
	margin:0rem 3rem 3rem 3rem;
	text-align:center;
}
.section-header h3{
	font-size:3.2rem;
}

.section-header h5{
	font-size:1.6rem;
	font-weight:200;
	color:#9d9fc6;
	letter-spacing:0.2rem;
}

.section-header p{
	font-size:1.7rem;
	font-weight:400;
	line-height:2.4rem;
	color:#000;
	margin:1rem 0;
	word-break:keep-all;
}

.section-content {
	padding:5.5rem 8rem;
	font-weight:400;
}

.section-content.form{
	border-top:2px solid #464982;
	background-color:#f4f7fc;0
}


.form-group {
	/* margin-bottom:2rem; */
}

.form-group label{
	display:block;
	text-align:left;
	font-size:1.6rem;	
	margin-bottom:1rem;
}
.form-group .form-control {
	width:100%;
	height:5.2rem;
	line-height:3.2rem;
	font-size:1.6rem;
	padding:1rem;	
	background-color:#fff;
	border:1px solid #6a789b;
	border-radius:0.6rem;
}

.form-group input.high{
	height:5.6rem;
	line-height:3.6rem;
}

.form-group textarea {
	height: 12rem !important;
	padding:0 !important;
	resize: none;
}

.btn-area{
	display:block;
	clear:both; 
	text-align:center;
}

.btn-area .btn-login, .btn-area .btn-join{
	margin:1rem 0 2.5rem;
	width:100%;
	height:5.6rem;
	line-height:3.6rem;
	font-size:1.6rem;
	color:#fff;
	padding:1rem;	
	background-color:#464982;
	border-radius:0.6rem;
}

.btn-area > ul > li {
  display: inline-block;
  vertical-align: top;
}
.btn-area > ul > li:after {
  position: relative;
  top: 2px;
  display: inline-block;
  vertical-align: top;
  width: 1px;
  height: 1.4rem;
  content: "";
  margin: 0;
  background-color: #c2c2d4;
}
.btn-area > ul > li > a {
  display: inline-block;
  width:15rem;
  text-align:center;
  vertical-align: top;
  font-size: 1.6rem;
  color: #000;
}
.btn-area > ul > li:last-child:after {
  display: none;
}

.agree-area{
	display:block;
	clear:both;
	margin:2rem 0;
	
}
.agree-area .agree-check{
	margin:0.5rem 0;
	font-size:1.6rem;
}

.agree-area .agree-check .allagree {
	font-weight:bold;
}

.agree-area .agree-check input[type="chekbox"] {
	width:2rem;
	height:2rem;
}

.agree-area .agree-check .view_all {
	float:right;
	color:#464982;
	text-decoration:underline;
}

.sns-login{
	margin-top:8.5rem;
	width:100%;
}

.sns-login .title{
	margin-bottom:2.5rem;
}
 
.sns-login h6{
	display:inline-block;
	width:10rem;
	font-size:1.6rem;
	color:#464982;
}

.sns-login .hline{
	margin-top:1.2rem;
	float:right;
	display:inline-block;
	width:calc(100% - 10rem);
	height:1px;
	background-color:#464982;
}
.sns-login .btn-naver{
	margin:0.8rem 0;
	display:block;
	width:100%;
	height:4.8rem;
	line-height:4.8rem;
	font-size:1.6rem;
	color:#04cf5c;
	text-align:center;
	border:1px solid #04cf5c;
	border-radius:0.6rem;
	background: #fff url("../images/sub/logo_naver.png") 3rem center no-repeat;
}

.sns-login .btn-kakao{
	margin:0.4rem 0;
	display:block;
	width:100%;
	height:4.8rem;
	line-height:4.8rem;
	font-size:1.6rem;
	color:#000;
	text-align:center;
	border-radius:0.6rem;
	background: #fee500 url("../images/sub/logo_kakao.png") 3rem center no-repeat;
}

@media screen and (max-width: 480px) {
	.section-content {
		padding:5.5rem 1rem;
	}
}


/* 레이어 팝업 */

.popup_layer{
	z-index:1001;
	position: absolute;
    top: 50%;
    /* left: 50%;
	transform: translate(-50%, -50%); */
	background:#fff; 
	border:2px solid #8c9ddc;
}

.findPW {
	left:1rem;
	width: 34rem;
	height: 35rem;
	border-radius:0 0 0.6rem 0.6rem;
}

.popup_layer_header {
	position:relative;
	/* margin:2rem 2rem 0rem; */
}
.popup_layer_header h3{
	font-size:2rem;
	line-height:2.2;
}


.popup_layer_con .form-group {
	/* margin: 0 2rem 1.8rem; */
}

.popup_layer_con .form-group .form-find {
	border:0;
	border-bottom:2px solid #6a789b;
	border-radius:0;
	color:#000;
}

.popup_layer_con .form-group .form-select {
	width:16rem;
	height:4.8rem;
	line-height:2.8rem;
	font-size:1.6rem;
	padding:1rem 0;	
	background:#fff url('../images/sub/icon_down.png') right center no-repeat;
	appearance: none;
	border:0;
	border-bottom:2px solid #6a789b;
	border-radius:0;
	color:#000;
}

.popup_layer_con .form-group .price{
	float:right;
	width:10rem;
	line-height:2.8rem;
	padding:1rem;
	font-size:1.6rem;
	font-weight:normal;
}

.popup_layer_con .desc{
	margin:3rem 2rem;
	font-size:1.6rem;
	font-weight:normal;
}

.btn-close {
	position: absolute;
	top:0;
	right:0;
	display: block;
	width:2rem;
	height:2rem;
	background:url("../images/sub/icon_close.png") center center no-repeat;
}
.btn-submit{
	position:absolute;
	left:-2px;
	bottom:-1px;
	width:calc(100% + 4px);
	height:5.6rem;
	line-height:3.6rem;
	font-size:1.6rem;
	color:#fff;
	padding:1rem;	
	background-color:#464982;
	border-radius:0 0 0.6rem 0.6rem;
}





/* 무료 TOWN 개설하기 */

.open {
	width:100rem; 
	max-width:100%;
	margin:0 auto; 
} 

.open .section-content {

}

.open .section-content > ul{
	width:68rem;
	max-width:100%;
	margin:0 auto;
	padding-bottom:3rem;
	border-bottom:1px solid #464982;
}

.section-content ul li dl {
	width:100%;
}

.section-content ul li dl dt{
	display:inline-block;
	float:left;
	width:14.8rem;
	padding:1rem 0 1rem 2.5rem;
	font-size:1.6rem;	
	font-weight:400;
	line-height:2.8rem;	
}

.section-content ul li dl dd{
	display:inline-block;
	width:calc(100% - 14.8rem);
}

.section-content ul li dl dd .form-group .form-control {
	width:32rem;
	height:4.8rem;
	line-height:2.8rem;
	font-size:1.6rem;
	padding:1rem;	
	background-color:#fff;
	border:1px solid #6a789b;
	border-radius:0.6rem;
}

.section-content ul li dl dd .form-group .short{
	width:24rem;

}

.section-content ul li dl dd .form-group input.readonly {
	border: 0;
	box-shadow: none;
	background-color: transparent;
}

.btn-doublecheck {
	margin:0.4rem 0 0 2rem;
	width:11rem;
	height:4rem;
	line-height:3rem;
	font-size:1.6rem;
	color:#fff;
	text-align:left;
	padding:0.5rem 0 0.5rem 2rem;	
	background:#6a789b url('../images/sub/icon_check.png') 8.5rem center no-repeat;
	border-radius:0.6rem;
}

.form-group .form-select{
    width:32rem;
	height:4.8rem;
	line-height:2.8rem;
	font-size:1.6rem;
	padding:1rem;	
	background:#fff url('../images/sub/icon_down.png') right center no-repeat;
	border:1px solid #6a789b;
	border-radius:0.6rem;
	appearance: none;
}



.open .form-group label{
	display:inline-block;
	width:15.4rem;
	text-align:left;
	font-size:1.6rem;	
	margin:0 1rem 0 0;
}
.open .form-group label img {
	display:block;
	width:15.4rem;
	height:9.2rem;
	border:1px solid #6a789b;
	border-radius:0.6rem;
}

.open .form-group input[type="radio"]{
	width:2rem;
	height:2rem;
}

.open .view_all {
	color:#464982;
	text-decoration:underline;
	margin-left:2rem;
}


.btn-area .btn-open {
	display:block; 
	margin:5.5rem auto;
	width:48rem;
	height:5.6rem;
	line-height:3.6rem;
	font-size:1.6rem;
	color:#fff;
	padding:1rem;	
	background-color:#464982;
	border-radius:0.6rem;
}


@media screen and (max-width: 840px) {
	.open .section-content > ul{
		width:100%;
	}

	.open .section-content ul li dl dt{
		padding-left:0;
		width:100%;
	}

	.open .section-content ul li dl dd{
		width:100%;
	}

	.btn-area .btn-open{
		width:100%;
	}
}

@media screen and (max-width: 480px) {
	.open .view_all {
		margin-left:1rem;
	}
}


.paymentFee{
	left:1rem;
	top:50%;
	width:34rem;
	height:33rem;
	border-radius:0 0 0.6rem 0.6rem;
}


/* Tabs */

.tabs{	
	margin:0 0 3rem 0;
	padding:0
}
.tab-nav{
	margin:0;
	padding:0;
	font-size:0;
	list-style:none
}
.tab-nav:after{
	width:calc(100% - 3px);
	height:0;
	display:block;
	content:" ";
	overflow:hidden;
	clear:both;
	margin-top:-2px; 
	border-top:2px solid #97b1e1;
}
.tabs .tab-nav > li{
	margin:0 0 0 -1px;
	display:inline-block;
	width:20%;
}
.tabs .tab-nav > li:first-child{
	margin-left:0
}

.tabs .tab-nav > li.active + li{
	margin-left:0;
	border-left:0;	
}
.tabs .tab-nav > li.active a:hover,.tabs .tab-nav > li.active a{
	background:#ffffff;
	border-top:2px solid #97b1e1;
	border-right:2px solid #97b1e1;
	border-bottom:2px solid transparent;
	border-left:2px solid #97b1e1;
	cursor:default;
}
.tabs .tab-nav > li a{
	width:100%;
	padding:2rem 0;
	margin:0;
	font-size:2rem;
	font-weight:500;
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	display:inline-block;
	color:#30376d;
	background-color:#fff;
	border:1px solid #d6d6d6;
	border-bottom:1px solid #97b1e1;
	cursor:pointer
}

@media screen and (max-width: 640px) {
	.tabs .tab-nav > li a {
		font-size:1.6rem;
	}
}

@media screen and (max-width: 480px) {
	.tabs .tab-nav > li a {
		font-size:1.2rem;
	}
}


/* 주요기능 */

.major {
	width:100rem;
	max-width:100%;
	margin:auto;
}

.major .section-content{
	display:inline-block; 
	width:100%;
	padding:2.5rem 0 8rem;
	border-bottom:1px solid #ddd;
	margin:0 auto 5rem;
}

.major .section-content.noline{
	border:none;
	margin:0 auto;
}

.txt-area {
	width:62rem;
	max-width:100%;
}

.txt-area h4{
	font-size:2.4rem;
	font-weight:500;
	margin-bottom:4rem;
}
.lineArea {
	position:relative;
}

.lineArea .vline{
	position:absolute;
	top:0;
	left:0;
	width:1.8rem;
	height:50%; 
	border-right:1px solid #e3c5ed;
	z-index:1;
}

.lineArea .vline.long{
	height:70%; 
}


.lineArea ul{
	position:relative;
	z-index:2;
	display:inline-block;
}

.lineArea ul li{
	display:block;
	clear:both;
}

.lineArea .num{
	float:left;
	display:block;
	width:3.8rem;
	height:3.8rem;
	background:#464982;
	border-radius:50%;
	font-size:1.6rem;
	line-height:3.6rem;
	color:#fff;
	text-align:center;
	margin-right:1.5rem;	
}

.lineArea .txt{
	float:right;
	width:56rem;
}

.lineArea .txt h6{
	display:block;
	width:17.4rem;
	height:3.8rem;
	background:#f1e2f6;
	border-radius:1.8rem;
	font-size:2rem;
	line-height:3.6rem;
	color:#000;
	padding:0 2rem;
	margin-bottom:2rem; 
	text-align:center;
}

.lineArea .txt p{
	width:100%;
	font-size:1.7rem;
	line-height:3.2rem;
	margin-bottom:7rem; 
}

.image-area {
	display:inline-block;
}

.image-area li{
	margin-bottom:2.4rem;
}

.fleft{
	float:left;
}

.fright{
	float:right;
}

.feature-area{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}


.feature_desc{
	width:27.5rem;
	max-width:48%;
	margin-bottom:7rem;
}

.feature_desc .feature_icon{
	display:block;
	width:4.4rem;
	height:4.4rem;
	margin-bottom:2rem;
}

.feature_desc .feature_icon.icon01{
	background:url('../images/sub/icon_feature01.png') center center no-repeat;
}
.feature_desc .feature_icon.icon02{
	background:url('../images/sub/icon_feature02.png') center center no-repeat;
}
.feature_desc .feature_icon.icon03{
	background:url('../images/sub/icon_feature03.png') center center no-repeat;
}
.feature_desc .feature_icon.icon04{
	background:url('../images/sub/icon_feature04.png') center center no-repeat;
}
.feature_desc .feature_icon.icon05{
	background:url('../images/sub/icon_feature05.png') center center no-repeat;
}
.feature_desc .feature_icon.icon06{
	background:url('../images/sub/icon_feature06.png') center center no-repeat;
}

.feature_desc h6{
	font-size:2rem;
	font-weight:500;
	margin:1rem 0;
}
.feature_desc p{
	font-size:1.6rem; 
	line-height:2.4rem;
}

@media screen and (max-width: 640px) {
	.lineArea .txt{
		width:calc(100% - 5.5rem);
	}

	.image-area {
		width:100%;
		text-align:center;
	}
}



/* 템플릿 */

.template {
	width:100rem;
	max-width:100%;
	margin:auto;
}

.template .section-content{
	padding:0 0 2rem;
	border-bottom:1px solid #ddd;
	margin-bottom:6rem;
}

.template .section-content.noline{
	border:none;
	margin:0 auto;
}

.temp_list{
	border-top:1px solid #ddd;
	padding:5rem 0 1rem;
}

.temp_list h4 {
	font-size:2.4rem;
	line-height:3.6rem;
	font-weight:500;
	margin-bottom:2.5rem;
}

.temp_list .gallery .gal-item{
	width:24rem;
	max-width:48%;
}

.template .view_list{
	text-align:center;
}

.template .view_list .big{
	float:left;
	display:inline-block;
	max-width:100%;
}

.template .view_list img{
	max-width:100%;
}

.template .view_list .big p{
	font-size:1.6rem;
	line-height:6rem;
	border-bottom:1px solid #000;
	text-align:left;
}

.template .view_list ul{
	display:flex;
	flex-wrap:wrap; 
	justify-content:space-between;
	width:50%;
	max-width:100%;
	float:right;
}

.template .view_list ul li{
	width:24rem;
	max-width:48%;
	position:relative;
	margin:0 0 2rem;
}

.template .view_list ul li a{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.25);
	text-align:center;
	color:#fff;
	font-size:1.6rem;
	padding-top:25%;
	
}

@media screen and (max-width: 1200px) {

	.template .view_list .big{
		float:none;
		clear:both;
		margin:0 auto 2rem;
	}
	.template .view_list ul {
		float:none;
		clear:both;
		width:100%;
		margin:0 auto;
	}
}


/* 요금 */

.price{
	width:100rem;
	max-width:100%;
	margin:auto;
}

.price .section-content{
	display:inline-block; 
	width:100%;
	padding:2.5rem 0 8rem;
	margin:0 auto 5rem;
}

.price-list {
	display:flex;
	flex-wrap:wrap; 
	justify-content:space-between;
}

.price-item{
	width:24rem;
	height:44.5rem;
	border:2px solid #8c9ddc;
	border-radius:1.6rem;
	position:relative;
	text-align:center;
	padding:3rem 1rem;
	margin-bottom:3.5rem;
}

.price-item h3{
	font-size:2rem;
	color:#9136d0;
	margin-bottom:1rem;
}

.price-item h2{
	font-size:2.4rem;
	margin-bottom:3rem;
}

.price-item h2 span{
	font-weight:500;
}

.price-item ul{
	margin-left:2.5rem;
}

.price-item ul li {
	list-style-image:url('../images/sub/price_check.png');
	text-align:left;
	font-size:1.6rem;
	word-break:keep-all; 

}

.price-item .option-tit{
	position:relative;
	margin:2rem;
}

.price-item .option-tit:before {
	position:absolute;
	top:50%;
	left:2.5%;
	content:"";
	display:block;
	width:95%;
	height:1px;
	border-bottom:1px solid #97b1e1;
	margin:0 auto;
	z-index:1;
}

.price-item .option-tit span{
	position:relative;
	display:inline-block;
	width:10rem;
	height:2.4rem;
	line-height:2.2rem;
	text-align:center;
	background:#97b1e1;
	color:#fff;
	border-radius:1.2rem;
	margin:auto;
	z-index:2;
}

.price-item .btn-start{
	position:absolute;
	left:-2px;
	bottom:-1px;
	width:calc(100% + 4px);
	height:5.6rem;
	line-height:3.6rem;
	font-size:1.6rem;
	color:#fff;
	padding:1rem;	
	background-color:#464982;
	border-radius:0 0 1.6rem 1.6rem;
}

@media screen and (max-width: 870px) {
	.price-list {
		justify-content:space-around;
	}
}

.price .tip ul{
	margin-left:2.5rem;
}

.price .tip ul li {
	list-style-image:url('../images/sub/tip_bullet.png');
	text-align:left;
	font-size:1.6rem;
	margin:1rem 0;

}

.schArea { margin: 3rem auto; display:inline-block;  }
.bo_sch { display:block; }
.bo_sch .sch_input   {
	width: 24rem;
    height: 4.8rem;
    line-height: 2.8rem;
    font-size: 1.6rem;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #6a789b;
    border-radius: 0.6rem;
	float:left
}
.bo_sch .sch_btn {
	display: block;
    float: right;
    width: 8rem;
    height: 4.8rem;
    line-height: 2.6rem;
    font-size: 1.6rem;
    color: #fff;
    padding: 1rem;
    background-color: #464982;
    border-radius: 0.6rem;
	margin-left:0.5rem;
}

.bo_cate {margin:0 0 4rem;}
.bo_cate li {display:inline-block;padding:0.2rem; width:calc(25% - 0.4rem); }
.bo_cate a {display:block; line-height:2rem; padding:1.5rem 0; font-size:1.8rem;  border-radius:0.6rem; border:1px solid #d7d8ef; color:#464982; }
.bo_cate a:focus, .bo_cate a:hover, .bo_cate a:active {text-decoration:none;background:#d7d8ef; color:#464982}
.bo_cate .bo_cate_on {z-index:2;background:#d7d8ef;color:#464982;font-weight:bold;border:1px solid #d7d8ef; }

.faq_list_wrap {

}

.faq_list_wrap h4{
	font-size:2.8rem;
	margin-bottom:2rem;
}

.faq_list {
	color: #363636; 
	border-top:2px solid #363636;  
}

.faq_list li{
	border-bottom:1px solid #ddd;
	font-size:1.6rem;
	text-align:left; 
}

.faq_list p.q {
	display: block; 
	padding:2rem 3rem 2rem 4rem;  
	position: relative; 
	cursor: pointer;
	color:#464982; 
}

.faq_list p.q:after {
	content:"+"; 
	font-size:3rem; 
	display:block; 
	text-align: center; 
	position:absolute;  
	width:4rem; 
	height:4rem; 
	line-height:3.8rem;
	right:1rem; 
	top:50%; 
	margin-top:-2rem;	
	z-index:12;
	color:#97b1e1;
	font-weight:400; 
}

.faq_list p.q.on:after  {
	content:"-"; 
	font-weight:400; 
}

.faq_list p.q.on {
	background: #fff;
	font-weight:500;
}

.faq_list span.qt {
	color: #464982; 
	display:block; 
	float: left; 
	width: 4rem; 
	text-align: center; 
	margin-left: -4rem; 

}

.faq_list div.answer  {
	color: #686868; 
	background:#fff; 
	padding:2rem 2rem 5rem 4rem; 
	display: none;
}

.faq_list div.answer:before {
	content:"A"; 
	display: block; 
	color: #97b1e1; 
	width:4rem;  
	display: block; 
	float: left; 
	text-align:center; 
	margin-left: -4rem;
}

.faq_list div.answer img {
	max-width:100%; 
	margin: 0;
}

.faq_list div.answer .desc {

}

.faq_list .btnModi{
	display:inline-block;
	width: 4rem;
    height: 2.8rem;
    line-height: 2.5rem;
    font-size: 1.6rem;
	text-align:center;
    color: #464982;
    border:1px solid #464982;
    border-radius: 0.6rem;
	margin-right:0.5rem;
}


/* 고객센터 */

.cs {
	width:100rem;
	max-width:100%;
	margin:auto;
}


.cs .section-content{
	padding:2.5rem 0 8rem;
	text-align:center;
}


.guide .section-content{
	margin:0 auto 5rem;
}



/* Accordion */
.accordion {
	color: #363636; 
	border-top:2px solid #363636;  
	font-size:1.6rem;
}
.accordion li{
	padding:1rem;
	border-bottom: 1px solid #d6d6d6; 
	text-align:left;
}


.accordion .tit {
	display: block;position: 
	position: relative;	
	cursor: pointer;
	padding:2rem 0;
}

.accordion .tit.active {
	font-weight: 500; 
}

.accordion .cont-area {
	padding: 2rem 0; 
	display: none;
}

.accordion .cont-area .desc {}

.accordion .date {
	display: inline-block;
	float:right; 
}

.table-wrap {
	width:100%;
	

}
.table-wrap .table {
  width: 100%;
  table-layout: fixed;
}
.table-wrap .table thead {
  position: relative;
}
.table-wrap .table thead:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background:#000;
}
.table-wrap .table thead tr th {
  font-size: 1.6rem;
  color: #000;
  font-weight: 500;
  padding-bottom:2rem;
}

.table-wrap .table tbody tr td {
  font-size: 15px;
  color: #8e8e8e;
  font-weight: 400;
  text-align: center;
  padding:2rem 0.5rem;
  border-bottom: 1px solid #d6d6d6;
}
.table-wrap .table tbody tr td > a {
  display: inline-block;
  font-size: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.table-wrap .table tbody tr td > a .icon-new {
  position: relative;
  top: -2px;
  display: inline-block;
  vertical-align: middle;
  width: 0.9rem;
  height: 0.9rem;
  font-style: normal;
  margin-left: 0.7rem;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: 0 0;
  background-image: url(../../assets/images/ico_new.png);
}
.table-wrap .table tbody tr td > a .icon-file {
  position: relative;
  top: -2px;
  display: inline-block;
  vertical-align: middle;
  width: 0.9rem;
  height: 13rem;
  font-style: normal;
  margin-left: 0.7rem;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: 0 0;
  background-image: url(../../assets/images/ico_file.png);
}
.table-wrap .table tbody tr td > a .icon-file ~ .icon-file {
  margin-left: 3px;
}

.table-wrap .table tbody tr td:nth-of-type(2) {
  text-align: left;
  padding-left:5rem;
}
.table-wrap .table tbody tr.notice td > a {
  font-weight: 600;
}
.table-wrap .table tbody tr.notice td:nth-of-type(1) {
  font-weight: 500;
  color: #6b53e3;
}
.controls {
  margin-top: 7rem;
}
.controls .pagination {
  text-align: center;
  font-size: 0;
}
.controls .pagination > ul > li {
  display: inline-block;
  vertical-align: top;
  padding: 0 0.5rem;;
}
.controls .pagination > ul > li > a {
  display: block;
  font-size: 1.7rem;
  width: 3.6rem;
  height: 3.6rem;
  line-height: 3.2rem;
  color: #000; 
  font-weight: 500;
  border-radius: 50%;
  border: 1px solid #fff;
}

.controls .pagination > ul > li.active > a {
  color: #fff;
  border-color: #97b1e1;
  background-color: #97b1e1;
}

.controls .pagination > ul > li.first > a, .controls .pagination > ul > li.last > a, .controls .pagination > ul > li.prev > a, .controls .pagination > ul > li.next > a {
  border-color: #e9e9e9;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto;
}


.controls .pagination > ul > li.first > a {
  background-image: url(../images/ico_first.png);
}

.controls .pagination > ul > li.last > a {
  background-image: url(../images/ico_last.png);
}
.controls .pagination > ul > li.prev {
  padding-right: 7.5px;
}
.controls .pagination > ul > li.prev > a {
  background-image: url(../images/ico_prev.png);
}
.controls .pagination > ul > li.next {
  padding-left: 7.5px;
}
.controls .pagination > ul > li.next > a {
  background-image: url(../images/ico_next.png);
}
.controls .btn-area {
  margin-top: 2rem;
  text-align: right;
}

.controls .btn-area > .btn-write {
	display: inline-block;
	width: 9rem;
	font-size: 1.6rem;
	line-height: 3.6rem;
	padding:1rem;
	color: #fff;
	text-align: center;
	vertical-align: top;
	background-color: #464982;
	border-radius:0.6rem; 
}

@media screen and (max-width: 600px) {
	.table-wrap .table tbody tr td:nth-of-type(2) {
	  padding-left:1rem;
	}
}

.btn-exper{
	margin:0 auto;
	display: inline-block;
	width:32rem;
	font-size: 1.6rem;
	line-height: 3.6rem;
	padding:1rem;
	color: #fff;
	text-align: center;
	vertical-align: top;
	background-color: #464982;
	border-radius:0.6rem; 
}

.guide .screenshot{
	position:relative;
	display:inline-block;
	margin:0 auto;
	width:auto; 
}


.guide .screenshot span.point{
	position:absolute;
	left:0;
	width:6.75rem;
	height:3.2rem;
	line-height:3.2rem;
	background:url('../images/sub/guide_pointL.png') left center no-repeat ;
	text-align:left;
	padding-left:0.5rem;
	color:#fff;
}

.guide  span.point.right01 { 
	left:2.5%; 
	top:2.5%;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
}

.guide span.point.right02 { 
	left:2.5%; 
	top:42%;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
}

.guide span.point.left03 {left:auto; right:4%; top:2.5%;}
.guide span.point.left04 {left:auto; right:4.75%; top:13.5%;}
.guide span.point.left05 {left:19.5%; bottom:3.5%;}
.guide span.point.left06 {left:89%; bottom:3.5%;}

.guide span.point.right11 { 
	left:2.5%; 
	top:40%;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
}

.guide span.point.right12 { 
	left:12.5%; 
	bottom:20%;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
}

.guide span.point.left13 {left:19.5%; bottom:5%;}
.guide span.point.left14 {left:auto; right:4%; top:3.5%;}
.guide span.point.left15 {left:auto; right:4.75%; top:16.5%;}
.guide span.point.left16 {left:auto; right:4%; bottom:5%;}
    
.guide .txtArea { margin-top:4rem; }

.guide .txtArea h4{
	font-size:2.4rem;
	font-weight:500;
	margin:4rem auto;
}

.guide .txtArea li {
	width:48%;
	margin:0 1%;
	float:left;
}

.guide .txtArea li .num {
	display:block;
	width:3.8rem;
	height:3.8rem;
	background:#464982;
	border-radius:50%;
	font-size:1.6rem;
	line-height:3.6rem;
	color:#fff;
	text-align:center;
	margin: 0 auto 1rem;
}

.guide .txtArea li .txt{
	width:100%;
	margin-bottom:3rem; 
}

.guide .txtArea .txt p {
	width:100%;
	font-size:1.7rem;
	line-height:3.2rem;
	margin-bottom:7rem; 
}

@media screen and (max-width: 768px) {	

	.guide .txtArea { width:90%; margin:4rem 5%;  }
	.guide span.point.left05 {left:18%; }
	.guide span.point.left06 {left:86.5%; }
	.guide span.point.left13 {left:18%; }

	.guide .txtArea li {width:100%; margin:0;  float:none; }
	.guide .txtArea li .num { float:left; margin:0 1.5rem 0 0;}
	.guide .txtArea li .txt{ width:calc(100% - 5.5rem);  text-align:left;}


}

@media screen and (max-width: 640px) {

	.guide span.point.right01 { top:1%;}
	.guide span.point.right02 { left:2.5%; top:41%;}
	.guide span.point.left03 { right:4%; top:1%;}
	.guide span.point.left04 { right:4.75%; top:12.5%;}
	.guide span.point.left05 {left:15%; bottom:0;}
	.guide span.point.left06 {left:82%; bottom:0;}

	.guide span.point.right11 { left:2.5%; top:37%;}
	.guide span.point.right12 {left:10%; }	
	.guide span.point.left13 {left:15%; bottom:0;}
	.guide span.point.left14 {top:1%;}
	.guide span.point.left15 {top:12.5%;}	
	.guide span.point.left16 {bottom:0;}
		
}

@media screen and (max-width: 480px) {

	.guide span.point.right01 { top:-1rem; left:1%}
	.guide span.point.right02 { left:1%; top:36%;}
	.guide span.point.left03 { right:3%; top: -1rem;}
	.guide span.point.left04 { right:3.5%; top:9%;}
	.guide span.point.left05 {left:12.5; }
	.guide span.point.left06 {left:78%; }

	.guide span.point.left13 {left:12.5%;}
	.guide span.point.left14 {right:3%;}
	.guide span.point.left15 {right:3%;}
	.guide span.point.left16 {right:3%;}

}

.guide .screenshot img{
	max-width:100%;
}

.guide_list{
	border-top:2px solid #464982;
	width:56rem;
	margin:0 auto;
}

.guide_list li{
	display:inline-block;
	border-bottom:1px solid #ddd;
	padding:1rem;
	width:100%;
}

.guide_list li dl {
	width:100%;
	display:block;
}

.guide_list li dl dt{
	width:14.8rem;	
    line-height: 2.8rem;
    margin-bottom:0;
	text-align:left;
}

.guide_list li dl dd{
	width:41rem;
	text-align:left;
	padding:1rem;
	font-size:1.6rem;	
    line-height: 2.8rem;
	font-weight:400;
}





.edu .section-content{
	border-bottom:1px solid #ddd;
	margin:0 auto 5rem;

}

.gallery{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}


.gallery .gal-item{
	width:32rem;
	margin:0 0 3rem;
}

.gallery .gel-img {
	position:relative;
	width:100%;
}

.gallery .gel-img img{
	max-width:100%;
}

.gallery .gel-img a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(108,116,216,0.25) url('../images/sub/icon_play.png') center center no-repeat;
}


.gallery .gal-item p{
	font-size:1.6rem;
	margin:1rem 0;
	line-height:3.4rem;
	text-align:left;
}

.gallery .gal-item p .num{
	display:inline-block;
	width:3.6rem;
	height:3.6rem;
	font-weight:700;
	color:#fff;
	text-align:center;
	background:#464982;
	border-radius:50%; 
	margin-right:1rem;
}

@media screen and (max-width: 870px) {
	.gallery{
		justify-content:space-around;
	}
}


.cs .section-content.form{
	width:57rem;
	padding:5rem 7.5rem;
	margin:0 auto;
}

.cs .section-content ul li dl dt{
	width:10.5rem;
	padding:1rem 0;	
}

.cs .section-content ul li dl dd{
	width:calc(100% - 10.5rem);
}

.hline {
	width:100%;
	height:1px;
	background:#d8d8e5;
	margin:2rem 0 3rem;
}

.cs .btn-area {
	margin:2rem 0 7rem;
}

.btn-cancel {
	display:block; 
	float:left;
	width:14.4rem;
	height:5.6rem;
	line-height:3.6rem;
	font-size:1.6rem;
	color:#464982;
	padding:1rem;	
	background-color:#d7d8ef;
	border-radius:0.6rem;
}


.btn-inquiry {
	display:block; 
	float:right;
	width:26.4rem;
	height:5.6rem;
	line-height:3.6rem;
	font-size:1.6rem;
	color:#fff;
	padding:1rem;	
	background-color:#464982;
	border-radius:0.6rem;
}

/* mypage */

.mypage {
	width:100rem;
	max-width:100%;
	margin:auto;
}

.mypage .section-content{
	padding:0 0 9rem;
}

.mypage .mypage-box {
	width:100%;
	display:inline-block; 
	padding:3rem 3rem 4rem ;
	border:2px solid #6a789b;
	margin-bottom:3.6rem;
}




.mypage .mypage-tit{
	position:relative;
	margin-bottom:2rem;
}

.mypage .mypage-tit .view_more {
	position:absolute;
	right:0;
	top:0.5rem;
	font-size:1.6rem;
	color:#6a789b;
	padding:0 3rem;
	background:url('../images/sub/icon_plus.png') right center no-repeat;
}

.mypage h4{
	font-size:2rem;
	font-weight:500;
}

.mypage-box .mypage-tit h4:after{
	content:"";
	display:block;
	width:4rem;
	height:1px;
	background:#6a789b;
	margin:1.6rem 0 0 ;
}

.info-area {
	display
}

.info-area ul{
	margin-right:11rem;
	display:flex;
	justify-content:center;
}

.info-area ul li{
	width:19rem;
	border-right:1px solid #d2d6e1;
	padding-left:1.6rem;
	font-size:1.6rem;
}

.info-area li:last-child{
	border:none;
}

.info-area li .stit{
	display:block;
	font-weight:bold;
	line-height:3.2rem;
}


.info-area .btn-area{
	float:right;
	margin-top:-1.6rem;

}

.btn-mypage{
	display:block;
	width:10rem;
	height:3.2rem;
	border:1px solid #6a789b;
	border-radius:1.6rem;
	background:#fff url('../images/sub/icon_arrow.png') 7.5rem center no-repeat;
	text-align:left;
	padding-left:1.4rem;
	color:#6a789b;
}

.pay-list li{
	padding:0.8rem 0;
}

.pay-list .pay-rows {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}

.pay-rows .pay-item{
	width:19.5rem;
	height:3rem;
	line-height:2.8rem;
	text-align:center;
	font-size:1.6rem;
}

.pay-item.cate, .pay-item.cont{
	font-weight:500;
}

.pay-item.receipt{
	
}
.pay-item .line{
	display:inline-block;
	width:1px;
	height:1rem;
	background:#000; 
	margin:0 1rem;
}

.btn-receipt{
	display:block;
	width:9.6rem;
	height:2.8rem;
	border-radius:1.4rem;
	background:#464982 url('../images/sub/icon_receipt.png') 1.5rem center no-repeat;
	text-align:left;
	padding-left:3.6rem;
	color:#fff;
	margin:0 auto;
}

.mypage-area{
	display:inline-block;
	width:100%;
	margin:5rem 0;
}

.mypage-area .inquiry-list {
	border-top:1px solid #6a789b;
	margin-bottom:2rem;
}

.mypage-area .inquiry-list li{
	padding:2.5rem 0;
	border-bottom:1px solid #d2d6e1;
	font-size:1.6rem;
}

.mypage-area .btn-area{
	float:right;
}

.mypage .mytown{
	/* float:left; */
	/* width:50%; */
	padding:0 1rem;
}

.mytown ul{
	width:26rem;
	margin:1.6rem 0;
}
.mytown li{
	border-bottom:1px solid #d2d6e1;
	padding:1.6rem 0;
}
.mytown li .go-quick{
	color:#464982;
	padding:0 3rem;
	float:right;
}

.mytown .use-room{
	margin:2rem 0;
	display:flex;
	flex-wrap:wrap;
}

.use-room .room-item{
	width:7.2rem;
	height:7.2rem;
	background:#97b1e1;
	border-radius:50%;
	color:#fff;
	text-align:center;
	font-size:1.6rem;
	line-height:7rem;
	margin:0 1rem 1rem 0;
}

.mytown-list:before{
	content:"";
	display:block;
	clear:both;
	width:100%;
	height:1px;	
}

.mytown-list {
	display:inline-block;
	margin:5rem 1rem 1rem;
}

.mytown-list table{
	width:100%;
}

.mytown-list table thead {
	border-top:1px solid #6a789b;
	border-bottom:1px solid #6a789b;
	margin-bottom:2.5rem;
}

.mytown-list table th {
	padding:1.6rem 0;
	color:#6a789b;
	font-size:1.6rem;
}


.mytown-list table td {
	text-align:center;
	padding:0.8rem 0;
	line-height:2.8rem;
	font-size:1.6rem;
	vertical-align:middle;
}

.mytown-list table tbody tr:first-child td{
	padding-top:3rem;
}

.mytown-list .bold{
	font-weight:500;
}

.mytown-list .grade{
	display:inline-block;
	width:14rem;
	height:2.8rem;
	line-height:2.6rem;
	border-radius:1.4rem;
	background:#464982;
	color:#fff;
	font-size:1.4rem;
	margin:0 1rem;
}

.mytown-list .grade.off{
	background:#b1bbd3;
}


.mytown-list .edit{
	display:inline-block;
	padding-left:3rem;
	background:url('../images/sub/icon_gear.png') left center no-repeat;	
}

.mypage .btn-open{
	width:32rem;
	max-width:100%;
	height:6rem;
	background:linear-gradient(90deg, rgba(167,127,224,1) 0%, rgba(116,202,224,1) 100%);
	border-radius:3rem;
}


@media screen and (max-width: 870px) {
	.mypage .mytown {
		float:none;
		width:100%;
	}
}

@media screen and (max-width: 680px) {
	.info-area ul{
		margin-right:0;
	}
	.info-area .btn-area{
		margin-top:1.6rem;

	}
	.mytown-list .grade{
		display:block;
		margin:0 auto;
	}
}


@media screen and (max-width: 480px) {
	.info-area ul{
		flex-direction:column;
		
	}

	.info-area ul li{
		border-right:none;
		border-bottom:1px solid #d2d6e1;
		padding:1rem;
		margin-bottom:1rem;
	}
	
	.mytown-list .grade{
		max-width:100%;
		height:auto;
		word-break:keep-all;
	}

	.mytown-list .edit{
		display:inline-block;
		padding:2.2rem 0 0 0;
		background:url('../images/sub/icon_gear.png') center top no-repeat;	
	}
}

/* manual add */

.container-manual {
  overflow: hidden;
  margin-top: 6.8rem;
  padding-top:5.5rem;
  padding-bottom:10.5rem;
}


.manual {		
	margin:auto;
}

.manual .tabs {
	width:100rem;
	max-width:100%;
	margin:0 auto 3rem;
}

.manual .tabs .tab-nav > li{
	margin:0 0 0 -1px;
	display:inline-block;
	width:25%;
}

.manual section {
	display:inline-block; 
	width:100%;
	margin:0 auto 0;
	padding:10rem 0 5rem;
}

.manual .section-header {
	margin:0 0 5rem;
}

.row{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	max-width:100rem;
	margin-right:auto;
	margin-left:auto;
	margin-top:0;
	margin-bottom:0;
	padding:7.5rem 0;
}

.row.alignR {flex-direction:row-reverse;}
.row.line {border-bottom:1px solid #ddd;}

.width-1{width:8.33333%}
.width-2{width:16.66667%}
.width-3{width:25%}
.width-4{width:33.33333%}
.width-5{width:41.66667%}
.width-6{width:50%}
.width-7{width:58.33333%}
.width-8{width:66.66667%}
.width-9{width:75%}
.width-10{width:83.33333%}
.width-11{width:91.66667%}
.width-12{width:100%}

.bgLightGray{ background:#F6F6F8; }
.bgGray{ background:#eee; }


.manual .txtArea {  }

.manual .txtArea h4{
	font-size:2.4rem;
	font-weight:500;
	margin-bottom:4rem;
}


.manual .txtArea .num{
	float:left;
	display:block;
	width:3.8rem;
	height:3.8rem;
	background:#464982;
	border-radius:50%;
	font-size:1.6rem;
	line-height:3.6rem;
	color:#fff;
	text-align:center;
	margin-right:1.5rem;	
}

.manual .txtArea .txt{
	float:left;		
	width: calc(100% - 5.5rem); 
	word-break:keep-all;
}

.manual .txtArea .txt.wide{
	width:100% !important;
}

.manual .txtArea .txt h6{
	display:block;
	width:17.4rem;
	height:3.8rem;
	background:#f1e2f6;
	border-radius:1.8rem;
	font-size:2rem;
	line-height:3.6rem;
	color:#000;
	padding:0 2rem;
	margin-bottom:2rem; 
	text-align:center;
}

.manual .txtArea .txt p {
	width:100%;
	font-size:1.7rem;
	line-height:3.2rem;
	margin-bottom:7rem; 
}

.manual .txtArea .txt p.small {
	font-size:1.4rem;
	font-weight:400; 
	margin-top:2rem;
}

.manual .txtArea .txt p.mb-20 {
	margin-bottom:2rem;
}

.manual .txtArea .txt p.tac {
	
}

.manual .txtArea .half li {
	width:48%;
	margin:0 1%;
	float:left;
}

.manual .txtArea .half li .num {
	float:none;
	margin: 0 auto 1rem;
}

.manual .txtArea .half li .txt{
	width:100%;
	margin-bottom:3rem; 
}

.manual .txtArea .txt ul {
	margin-left:2rem;
}

.manual .txtArea .txt ul li {
	width:100%;
	font-size: 1.6rem;
	line-height:2;
	font-weight:400; 
	list-style-type: circle;
}

.gt {display:inline-block; width:1rem; height:2rem; line-height:2rem; background:url('../images/manual/iconGt.png') no-repeat 50% 50%; background-size:auto;  }



.manual .imgArea{
	margin:auto;
	padding-bottom:3rem;
	text-align:center;
}



.manual .screenshot{
	position:relative;
	display:inline-block;
	margin:0 auto;
	width:auto; 
}

.manual .shadow{
	box-shadow:0 0 3rem rgba(0,0,0,0.125) ;
}

.manual img{
	max-width:100%;
}




.manual .screenshot span.point{
	position:absolute;
	left:0;
	width:6.75rem;
	height:3.2rem;
	line-height:3.2rem;
	background:url('../images/sub/guide_pointL.png') left center no-repeat ;
	text-align:left;
	padding-left:0.5rem;
	color:#fff;
}

#aOne span.point.left01 {	top:13rem;}
#aOne span.point.left02 {	top:21.25rem;}
#aOne span.point.left03 {	top:29.5rem;}
#aOne span.point.left04 {	top:37.75rem;}
#aOne span.point.left05 {	top:44.5rem;}
#aOne span.point.left06 {	top:51.5rem;}
#aOne span.point.left07 {	top:58.5rem;}
#aTwo span.point.left01 {	left:3rem; bottom:9rem;}
#aTwo span.point.left02 {	left:13.7rem; bottom:4.75rem;}
#aThree span.point.left01 { left:52%; top:22%;}
#aThree span.point.left02 { left:0%; top:37%; }
#aThree span.point.left03 { left:70%; top:37%; }
#aThree span.point.left04 { left:-1.5rem; top:52%; }
#aThree span.point.left05 { left:-1.5rem; top:75%; }
#aSix span.point.left31 { left:20%; top:22%; }

#uOne span.point.left01 {	left:35%; bottom:18.5%;}
#uOne span.point.left02 {	left:30%; bottom:27%;}
#uOne span.point.right03 {
	left:auto;
	width:6.8rem;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
	right:34%; 
	bottom:18.5%;
	}

#uTwo span.point.left01 {	left:-1rem; top:5rem;}
#uTwo span.point.left02 {	left:-1rem; top:12rem;}
#uTwo span.point.left03 {	left:-1rem; top:20.25rem;}
#uTwo span.point.left04 {	left:-1rem; top:27rem;}
#uTwo span.point.left05 {	left:-1rem; top:35.5rem;}
#uTwo span.point.left06 {	left:-1rem; top:43rem;}
#uTwo span.point.left07 {	left:-1rem; top:47rem;}


#uThree span.point.right01 { 
	left:2.5%; 
	top:2.5%;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
}

#uThree span.point.right02 { 
	left:2.5%; 
	top:42%;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
}

#uThree span.point.left03 {left:auto; right:4%; top:2.5%;}
#uThree span.point.left04 {left:auto; right:4.75%; top:13.5%;}
#uThree span.point.left05 {left:19.5%; bottom:3.5%;}
#uThree span.point.left06 {left:89%; bottom:3.5%;}

#uThree span.point.right11 { 
	left:2.5%; 
	top:40%;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
}

#uThree span.point.right12 { 
	left:12.5%; 
	bottom:20%;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
}

#uThree span.point.left13 {left:19.5%; bottom:5%;}
#uThree span.point.left14 {left:auto; right:4%; top:3.5%;}
#uThree span.point.left15 {left:auto; right:4.75%; top:16.5%;}
#uThree span.point.left16 {left:auto; right:4%; bottom:5%;}


#uFour span.point.left01 {left:37.5%; top:25.5%;}
#uFour span.point.left02 {left:22.5%; top:55%;}
#uFour span.point.left03 {left:37.5%; top:55%;}
#uFour span.point.left04 {left:55%;  top:25.5%;}
#uFour span.point.left05 {left:55%; bottom:25%;}

#uFive span.point.left01 {left:8%; top:50%;}
#uFive span.point.right02 {
	left:37.5%; 
	top:50%;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
}
#uFive span.point.left03 {left:45%; bottom:22.5%;}
#uFive span.point.left04 {left:auto; right:10%;  top:50%;}
#uFive span.point.left05 {left:auto; right:18%; bottom:5%;}

#uSix span.point.left01 {	left:13%; bottom:22%;}
#uSix span.point.left02 {	left:35%; bottom:22%;}
#uSix span.point.left03 {	left:55%; top:30%;}

#uSix span.point.left321 {	left:-1rem; top:10%;}
#uSix span.point.left322 {	left:-1rem; top:21%;}
#uSix span.point.left323 {	left:-1rem; top:32%;}
#uSix span.point.left324 {	left:-1rem; top:43%;}
#uSix span.point.left325 {	left:-1rem; top:54%;}
#uSix span.point.left326 {	left:-1rem; top:65.5%;}
#uSix span.point.left327 {	left:-1rem; top:72%;}

@media screen and (max-width: 1000px) {
	.manual .tabs {
		max-width:calc(100% - 2rem);
		margin-left:1rem;
		margin-right:1rem;
	}

}

@media screen and (max-width: 890px) {
	#uTwo span.point.left01 { top:3.25rem;}
	#uTwo span.point.left02 {	top:8.75rem;}
	#uTwo span.point.left03 {	top:15rem;}
	#uTwo span.point.left04 {	top:20.5rem;}
	#uTwo span.point.left05 {	top:26.75rem;}
	#uTwo span.point.left06 {	top:32.75rem;}
	#uTwo span.point.left07 {	top:36rem;}

}

@media screen and (max-width: 768px) {	
	.row.alignR {flex-direction:row; }
	.width-1,.width-2,.width-3,.width-4,.width-5,.width-6,.width-7,.width-8,.width-9,.width-10,.width-11,.width-12{width:100%; }
	.manual .fleft, .manual fright { float:none; }

	.manual .txtArea { width:90%; margin:auto 5%;  }
	.manual .imgArea { width:90%; margin:auto 5%;  }

	.manual .txtArea .txt p.tac { text-align:left !important;}

	.manual .txtArea .half li {width:100%; margin:0;  float:none; }
	.manual .txtArea .half li .num { float:left; margin:0 1.5rem 0 0;}
	.manual .txtArea .half li .txt{ width:calc(100% - 5.5rem);  text-align:left;}

	#aSix span.point.left31 { left:17.5%; top:22%; }

	#uOne span.point.left01 {	left:30%; bottom:16.5%;}
	#uOne span.point.left02 {	left:27.5%; bottom:27%;}
	#uOne span.point.right03 { right:30%; bottom:16.5%;  }

	#uTwo span.point.left01 {	left:0; top:9%;}
	#uTwo span.point.left02 {	left:0; top:20%;}
	#uTwo span.point.left03 {	left:0; top:33.5%;}
	#uTwo span.point.left04 {	left:0; top:45%;}
	#uTwo span.point.left05 {	left:0; top:58.5%;}
	#uTwo span.point.left06 {	left:0; top:70%;}
	#uTwo span.point.left07 {	left:0; top:76.5%;}

	#uThree span.point.left05 {left:18%; }
	#uThree span.point.left06 {left:86.5%; }

	#uThree span.point.left13 {left:18%; }

	#uSix span.point.left01 {	left:11%; }
	#uSix span.point.left02 {	left:31%; }
	#uSix span.point.left03 {	left:52%; }

	#uSix span.point.left321 {	left:1rem; top:10%;}
	#uSix span.point.left322 {	left:1rem; top:21%;}
	#uSix span.point.left323 {	left:1rem; top:32%;}
	#uSix span.point.left324 {	left:1rem; top:43%;}
	#uSix span.point.left325 {	left:1rem; top:54%;}
	#uSix span.point.left326 {	left:1rem; top:65.5%;}
	#uSix span.point.left327 {	left:1rem; top:72%;}

}

@media screen and (max-width: 640px) {

	#aThree span.point.left01 {top:20%; left:48%;	}
	#aThree span.point.left02 {top:36%;	}
	#aThree span.point.left03 {left:68.5%; top:36%;	}
	#aThree span.point.left04, #aThree span.point.left05 { left:-1rem; }
	#aSix span.point.left31 { left:15%; }

	#uOne span.point.left01 {	left:27.5%; bottom:15%}
	#uOne span.point.left02 {	left:25%; bottom:25%;}
	#uOne span.point.right03 { right:27.5%; bottom:15%;  }

	#uThree span.point.right01 { top:1%;}
	#uThree span.point.right02 { left:2.5%; top:41%;}
	#uThree span.point.left03 { right:4%; top:1%;}
	#uThree span.point.left04 { right:4.75%; top:12.5%;}
	#uThree span.point.left05 {left:15%; bottom:0;}
	#uThree span.point.left06 {left:82%; bottom:0;}

	#uThree span.point.right11 { left:2.5%; top:37%;}
	#uThree span.point.right12 {left:10%; }	
	#uThree span.point.left13 {left:15%; bottom:0;}
	#uThree span.point.left14 {top:1%;}
	#uThree span.point.left15 {top:12.5%;}	
	#uThree span.point.left16 {bottom:0;}

	#uFour span.point.left01 {left:34%; top:25%;}
	#uFour span.point.left02 {left:19%; top:50%;}
	#uFour span.point.left03 {left:34%; top:50%;}
	#uFour span.point.left04 {left:48%;  top:21%;}
	#uFour span.point.left05 {left:51%; bottom:22%;}

	#uFive span.point.left01 {left:5%; }
	#uFive span.point.right02 {left:37.5%; }
	#uFive span.point.left03 {left:40%; bottom:20%;}
	#uFive span.point.left04 {right:10%; }
	#uFive span.point.left05 {right:18%; }

	#uSix span.point.left01 {	left:9.5%; bottom:20%;}
	#uSix span.point.left02 {	left:29.5%; bottom:20%;}
	#uSix span.point.left03 {	left:49%; top:30%;}

	#uSix span.point.left321 {	left:-1rem;}
	#uSix span.point.left322 {	left:-1rem;}
	#uSix span.point.left323 {	left:-1rem;}
	#uSix span.point.left324 {	left:-1rem;}
	#uSix span.point.left325 {	left:-1rem;}
	#uSix span.point.left326 {	left:-1rem;}
	#uSix span.point.left327 {	left:-1rem;}
		
}

@media screen and (max-width: 480px) {
	#aThree span.point.left01 {left:44%; top:19%; }
	#aThree span.point.left02 {top:35%;	}
	#aThree span.point.left03 {left:65%; top:35%; }
	#aThree span.point.left04, #aThree span.point.left05 { left:-0.5rem; 	width:3rem}
	#aSix span.point.left31 { left:12.5%; }

	#uOne span.point.left01 {	left:25%; bottom:14%}
	#uOne span.point.left02 {	left:22.5%; bottom:23%;}
	#uOne span.point.right03 { right:25%; bottom:14%;  }

	#uTwo span.point.left01 {	left:-1.5rem; width:5rem}
	#uTwo span.point.left02 {	left:-1.5rem; width:5rem}
	#uTwo span.point.left03 {	left:-1.5rem; width:5rem}
	#uTwo span.point.left04 {	left:-1.5rem; width:5rem}
	#uTwo span.point.left05 { left:-1.5rem; width:5rem}
	#uTwo span.point.left06 {	left:-1.5rem; width:5rem}
	#uTwo span.point.left07 {	left:-1.5rem; width:5rem}

	#uThree span.point.right01 { top:-1rem; left:1%}
	#uThree span.point.right02 { left:1%; top:36%;}
	#uThree span.point.left03 { right:3%; top: -1rem;}
	#uThree span.point.left04 { right:3.5%; top:9%;}
	#uThree span.point.left05 {left:12.5; }
	#uThree span.point.left06 {left:78%; }

	#uThree span.point.left13 {left:12.5%;}
	#uThree span.point.left14 {right:3%;}
	#uThree span.point.left15 {right:3%;}
	#uThree span.point.left16 {right:3%;}

	#uSix span.point.left321 {	left:-1.5rem; width:5rem}
	#uSix span.point.left322 {	left:-1.5rem; width:5rem}
	#uSix span.point.left323 {	left:-1.5rem; width:5rem}
	#uSix span.point.left324 {	left:-1.5rem; width:5rem}
	#uSix span.point.left325 {	left:-1.5rem; width:5rem}
	#uSix span.point.left326 {	left:-1.5rem; width:5rem}
	#uSix span.point.left327 {	left:-1.5rem; width:5rem}


}



#uFour span.point.right01 {
	left:32.5%; 
	top:19%;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
}
#uFour span.point.right02 {
	left:52%; 
	top:45%;
	background:url('../images/sub/guide_pointR.png') right center no-repeat ;
	text-align:right;
	padding-right:0.55rem;
}

#uFour span.point.left03 { left: 57.5%; top: 17.5%; }
#uFour span.point.left04 { left: 57.5%; top: 26%; }

@media screen and (max-width: 640px) {

	#uFour span.point.left03 {left:52%; top:16%;}
	#uFour span.point.left04 {left:52%;  top:25%;}
}


.dot-nav.new {
  list-style: none;
  position: relative;
  z-index: 5;
}

.dot-nav.new a {
  display: inline-block;
  background: #ddd;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  vertical-align: middle;
}

.dot-nav.new a:hover {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  background: #f272b2;
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
}

.dot-nav.new a.active {
  background-color: #f272b2;
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
}

.dot-nav.new li {
  margin: 25px 0;
}

.dot-nav.new li span {
  opacity: 1;
  position: fixed;
  right: 4rem;
  vertical-align: middle;
  color: #505050;
  background: none;
  padding: 8px 8px;
  margin-top: 0px;
  margin-right: 32px;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  font-size: 14px;
  width: 100%;
  max-width: 200px;
  text-align: right;
}

.dot-nav.new li span b {
  display: block;
  font-size: 18px;
  line-height: 1;
  margin-bottom: 5px;
}

.dot-nav.new li a.active + span,
.dot-nav.new li a:hover + span {
  opacity: 1;
  color: #f272b2;
  font-size: 16px;
  margin-top: -3px;
}


/* 23.07.19_추가 */

.mypageBox {
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap; 
	height:100%;
}

.mypageBox .boxArea {
	padding:3rem 2.5rem ;
	border:2px solid #6a789b;
	margin-bottom:3.6rem;
	flex:1; 
	max-width:32%;
}

.mypageBox .boxArea.wide {
	max-width:100%;
}

.mypage .mypage-tit .viewMore {
	position:absolute;
	right:0;
	top:0;
	display:block;
	width:10rem;
	height:3.2rem;
	border:1px solid #6a789b;
	border-radius:1.6rem;
	background:#fff url('../images/sub/icon_plus.png') 7.5rem center no-repeat;
	background-size:auto 40%;
	text-align:left;
	padding:0.5rem 1.4rem;
	color:#6a789b;
}

.mypage .mypage-tit .btnModify {
	position:absolute;
	right:0;
	top:0;
	display:block;
	width:10rem;
	height:3.2rem;
	border:1px solid #6a789b;
	border-radius:1.6rem;
	background:#fff url('../images/sub/icon_arrow.png') 7.5rem center no-repeat;
	text-align:left;
	padding:0.5rem 1.4rem;
	color:#6a789b;
}

.infoArea {
	display:flex;
	align-items: center; 
}

.infoArea .photoArea { 
	display:block;
	width:10rem;
	height:10rem;
	border-radius:50%;
	margin-right:2rem;
}

.infoArea .photoArea img {
	max-width:100%;
	border-radius:50%;
}

.payList li{
	padding:0.8rem 0;
	border-bottom:1px solid #d2d6e1; 
}

.payList li:last-child{
	border-bottom:none; 
}

.payList .pay-rows {
	display:flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap:wrap;
}

.payList .pay-rows ul li {
	line-height:1.2;
	padding:0; 
	border:none;
}

.pay-item.cate, .pay-item.cont{
	font-weight:500;
}

.pay-item.receipt{
	
}
.pay-item .line{
	display:inline-block;
	width:1px;
	height:1rem;
	background:#000; 
	margin:0 1rem;
}

.btn-receipt{
	display:block;
	width:9.6rem;
	height:2.8rem;
	border-radius:1.4rem;
	background:#464982 url('../images/sub/icon_receipt.png') 1.5rem center no-repeat;
	text-align:left;
	padding-left:3.6rem;
	color:#fff;
	margin:0; 
}

.inquiryList {
	margin-bottom:2.5rem;
}

.inquiryList li{
	line-height:3rem; 
}

.inquiryList li .date{
	float:right;
	font-size:1.2rem; 
	color:#999; 
}

.btnInquiry {
	display:block; 
	width: 9.6rem;
    height: 2.8rem;
    line-height: 2.6rem;
    border-radius: 1.4rem;
    background: #464982;
    color: #fff;
    font-size: 1.4rem;
    margin: 0 auto;
}

.mytownList .table {
	width:100%;
}

.mytownList .table thead th {
	font-size: 2rem;
    font-weight: 500;
	padding-bottom:1rem; 
}

.mytownList .table td{
	padding:0.5rem 0;
}

.mytownList ul li {
	display:flex; 
	justify-content: space-between;
	align-items: center;
	margin:0.5rem 0;
}

.mytownList ul li .item{
	text-align:center;
	word-break:keep-all; 
}

.mytownList ul li .town {
	flex:25%
}

.mytownList ul li .room {
	flex:30%;
}

.mytownList ul li .level {
	flex:20%;
}

.mytownList ul li .option {
	flex:17%;
}

.mytownList ul li .adm {
	flex:8%;
}


.btnShort {
	margin-left: 1rem;
	width: 8rem;
	height: 3.4rem;
	line-height: 3.4rem;
	font-size: 1.4rem;
	color: #333;
	font-weight: 500;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 3rem;
	text-align: center;
}

.mytownList .class-nav span {
	display: inline-block; 
	margin-right: 0.25rem; 
	width: 8rem; 
	height: 3.4rem; 
	line-height: 3.4rem; 
	font-size: 1.4rem; 
	color: #333; 
	font-weight: 500; 
	background-color: #fff; 
	border: 1px solid #ccc; 
	border-radius: 3rem; 
	text-align: center;
	-webkit-transition: background-color 0.2s; 
	-moz-transition: background-color 0.2s; 
	transition: background-color 0.2s;
}
.mytownList .class-nav span.on {
	background-color: #97b1e1; 
	color: #ffffff; 
	border-color: #97b1e1;
}

.mytownList .grade{
	display:inline-block;
	width:13rem;
	height:2.8rem;
	line-height:2.6rem;
	border-radius:1.4rem;
	background:#464982;
	color:#fff;
	font-size:1.4rem;
	margin:0 1rem;
}

.mytownList .add {
	display: inline-block; 
	margin-left: 0.25rem; 
	width: 5rem; 
	height: 2.8rem; 
	line-height: 2.6rem; 
	font-size: 1.4rem; 
	color: #333; 
	font-weight: 500; 
	background-color: #fff; 
	border: 1px solid #ccc; 
	border-radius: 3rem; 
	text-align: center; -webkit-transition:
	background-color 0.2s; 
	-moz-transition: background-color 0.2s; 
	transition: background-color 0.2s;
}

.mytownList .edit{
	display:inline-block;
	padding-left:3rem;
	background:url('../images/sub/icon_gear.png') left center no-repeat;	
	background-size:contain; 
}

.descArea {
	padding-bottom:3rem;
	border-bottom: 1px dashed #eee;
}

.descArea li {
	list-style-type:disc;
	font-size:1.4rem; 
	margin:0.5rem 2rem;
}

.popup_layer_con .contService {
	margin:2rem 0;
}

.popup_layer_con .contService li {
	font-size:1.6rem;
	font-weight:400;
	margin:0.5rem 0 ;
}

.popup_layer_con .contService li .popTit {
	display:inline-block;
	width:12rem;
}

.popup_layer_con .contService li .popLevel {
	display:inline-block;
	width:6rem;
}


.popup_layer_con .form-group {
	display:inline-block; 
}


.popup_layer_con .popPayment {
	background-color: #97b1e1; 
	color:#464982;
	font-size:1.8rem;
	height: 4rem; 
	line-height: 4rem; 
	border-radius: 3rem; 
	text-align: center;
}

.popup_layer_con .desc li{ 
	list-style-type:disc;
	font-size:1.4rem; 
}

.tCenter {text-align:center;}

@media screen and (max-width: 870px) {
	.mypageBox {
		display:block;
		height:100%;
	}
	
	.mypageBox .boxArea {
		max-width:100%;
		width:100%;
	}

	.mytownList .class-nav span {
		margin-bottom:0.2rem;
	}

	.mytownList .edit{
		padding-left:0;
		padding-top: 2rem;
		background:url('../images/sub/icon_gear.png') center top no-repeat;	
		background-size:auto 2rem;

	}

	.mytownList .table thead th {
		font-size: 1.5rem;
	}

	.mytownList .table td {
		padding:0.25rem;
		word-break:keep-all; 
	}
	.header-area__gnb .gnb-list li a{font-size:1.5rem;}
}
}

@media screen and (max-width: 640px) {

	.mytownList ul li .item h4 {
		font-size: 1.6rem;
	}

	.mytownList .grade{
		width:8rem;
		height:3.2rem;
		line-height:1.6rem;
		border-radius:3rem;
		background:#464982;
		color:#fff;
		font-size:1.4rem;
		margin:0 0.5rem;
		
	}

	.dot-nav.new{display:none;}

		
	
	
}

@media screen and (max-width: 400px) {
	.mytownList ul li {
		 flex-direction: column;
		 border-bottom:1px solid #eee;
	}

	.mytownList ul li .item{
		margin:0.5rem 0; 
	}

	.mytownList ul li .item h4  {
		display:none;
	}

	.dot-nav.new{display:none;}
}