body {
  background: #f9f9f9;
}

#contents.pr.media .collect .modeTarget.textMode>*:not(.pagination) .arrow::before,
#contents.pr.press .modeTarget.textMode>*:not(.pagination) .arrow::before,
.noticeList table tbody tr td.download a::before,
#details .progressCalendar .performance .pagination .timelabs button span::before,
#details .progressCalendar .performance .pagination .timelabs button::after,
#details>header .container>div .openBubble::after,
#details>header .vi .buttons>button::after,
.popup>div,
.popup>div>.closePopup,
.popup>.closePopup,
.toastMessage p {
  position: absolute !important;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.popup>div .full .inputTxt .reset {
  position: absolute !important;
  top: 0;
  bottom: 0;
  margin: auto;
}

#contents.pr.media .newsPick .swiper li,
#contents.reservation .tab,
#contents.faq .tab,
#contents.info section.faq .tab,
#contents.salesList .tab,
body.print .basic .basicInfo {
  font-size: 0;
  line-height: 0;
  letter-spacing: -4px;
}

#contents.pr.media .newsPick .swiper li>*,
#contents.reservation .tab>*,
#contents.faq .tab>*,
#contents.info section.faq .tab>*,
#contents.salesList .tab>*,
body.print .basic .basicInfo>* {
  display: inline-block;
}

@media (min-width: 1025px) {

  #contents.pr.media .collect .modeTarget,
  #contents.pr.media .collect .empty,
  #contents.pr.press .modeTarget,
  #contents.pr.press .empty,
  #contents.reservation div.noEvent,
  #contents.reservation>section>footer,
  #contents.reservation>section>section,
  #contents.reservation>section>.empty,
  #contents.cs.info .floatContainer,
  #contents.cs.info>section,
  #contents.reservation .warning,
  #contents.reservation .info,
  #contents.reservation .reservationList,
  #contents.salesList .list+.more,
  #contents.salesList .list,
  .guidePagination,
  #contents.pr.media .collect .modeTarget .pagination,
  #contents.pr.press .modeTarget .pagination,
  .noticeList .pagination,
  .bannerLink,
  .article#details .recommend,
  .article#details dl.download,
  .article#details .articleDetail,
  #details>footer,
  #details .progressCalendar,
  #details .overview,
  .article#details .info,
  #contents.salesList .calendar {
    margin-bottom: 150px;
  }

  #contents.pr.media .collect .modeTarget+*,
  #contents.pr.media .collect .empty+*,
  #contents.pr.press .modeTarget+*,
  #contents.pr.press .empty+*,
  #contents.reservation div.noEvent+*,
  #contents.reservation>section>footer+*,
  #contents.reservation>section>section+*,
  #contents.reservation>section>.empty+*,
  #contents.cs.info .floatContainer+*,
  #contents.cs.info>section+*,
  #contents.reservation .warning+*,
  #contents.reservation .info+*,
  #contents.reservation .reservationList+*,
  #contents.salesList .list+.more+*,
  #contents.salesList .list+*,
  .guidePagination+*,
  #contents.pr.media .collect .modeTarget .pagination+*,
  #contents.pr.press .modeTarget .pagination+*,
  .noticeList .pagination+*,
  .bannerLink+*,
  .article#details .recommend+*,
  .article#details dl.download+*,
  .article#details .articleDetail+*,
  #details>footer+*,
  #details .progressCalendar+*,
  #details .overview+*,
  .article#details .info+*,
  #contents.salesList .calendar+* {
    margin-top: -150px;
  }
}

@media (max-width: 1024px) {

  #contents.pr.media .collect .modeTarget,
  #contents.pr.media .collect .empty,
  #contents.pr.press .modeTarget,
  #contents.pr.press .empty,
  #contents.reservation div.noEvent,
  #contents.reservation>section>footer,
  #contents.reservation>section>section,
  #contents.reservation>section>.empty,
  #contents.cs.info .floatContainer,
  #contents.cs.info>section,
  #contents.reservation .warning,
  #contents.reservation .info,
  #contents.reservation .reservationList,
  #contents.salesList .list+.more,
  #contents.salesList .list,
  .guidePagination,
  #contents.pr.media .collect .modeTarget .pagination,
  #contents.pr.press .modeTarget .pagination,
  .noticeList .pagination,
  .bannerLink,
  .article#details .recommend,
  .article#details dl.download,
  .article#details .articleDetail,
  #details>footer,
  #details .progressCalendar,
  #details .overview,
  .article#details .info,
  #contents.salesList .calendar {
    margin-bottom: 80px;
  }

  #contents.pr.media .collect .modeTarget+*,
  #contents.pr.media .collect .empty+*,
  #contents.pr.press .modeTarget+*,
  #contents.pr.press .empty+*,
  #contents.reservation div.noEvent+*,
  #contents.reservation>section>footer+*,
  #contents.reservation>section>section+*,
  #contents.reservation>section>.empty+*,
  #contents.cs.info .floatContainer+*,
  #contents.cs.info>section+*,
  #contents.reservation .warning+*,
  #contents.reservation .info+*,
  #contents.reservation .reservationList+*,
  #contents.salesList .list+.more+*,
  #contents.salesList .list+*,
  .guidePagination+*,
  #contents.pr.media .collect .modeTarget .pagination+*,
  #contents.pr.press .modeTarget .pagination+*,
  .noticeList .pagination+*,
  .bannerLink+*,
  .article#details .recommend+*,
  .article#details dl.download+*,
  .article#details .articleDetail+*,
  #details>footer+*,
  #details .progressCalendar+*,
  #details .overview+*,
  .article#details .info+*,
  #contents.salesList .calendar+* {
    margin-top: -80px;
  }
}

#story.gwell .info+*,
#story.brighten .info+* {
  background: #fff;
}

@media (min-width: 1025px) {

  #story.gwell .info,
  #story.brighten .info {
    padding-bottom: 150px;
  }

  #story.gwell .info+*,
  #story.brighten .info+* {
    margin-top: -150px;
  }
}

@media (max-width: 1024px) {

  #story.gwell .info,
  #story.brighten .info {
    padding-bottom: 80px;
  }

  #story.gwell .info+*,
  #story.brighten .info+* {
    margin-top: -80px;
  }
}

@media (min-width: 1025px) {

  .article#details .recommend,
  #details .progressCalendar {
    padding-top: 100px;
  }
}

@media (max-width: 1024px) {

  .article#details .recommend,
  #details .progressCalendar {
    padding-top: 50px;
  }
}

@media print {
  body {
    width: 420mm;
    height: 594mm;
    margin: 30mm 45mm 30mm 45mm;
  }

  .pagebreak {
    page-break-before: always;
  }

  /* page-break-after works, as well */
  .noPrint {
    display: none;
  }
}

.hidden {
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

@media (max-width: 1024px) {
  .wideOnly {
    display: none;
  }
}

@media (min-width: 1025px) {
  .middleOnly {
    display: none;
  }
}

.narrowOnly {
  display: none;
}

@media (max-width: 640px) {
  .narrowOnly {
    display: unset;
  }
}

.narrowestOnly {
  display: none;
}

@media (max-width: 480px) {
  .narrowestOnly {
    display: unset;
  }
}

html {
  margin: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  font-size: 16px;
}

body {
  margin: 0;
  color: #212121;
  -webkit-text-size-adjust: none;
  line-height: 1;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

html,
body {
  overscroll-behavior-y: none;
}

body.resizing * {
  transition: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
}

body,
div,
span,
object,
iframe,
.h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 100%;
}

body,
input,
select,
textarea,
button,
pre {
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
}

article,
aside,
hgroup,
header,
footer,
figure,
figcaption,
nav,
section,
time,
mark,
canvas,
video,
audio,
details,
summary {
  display: block;
}

ul {
  list-style: none;
}

address {
  font-style: normal;
}

blockquote,
q {
  quotes: none;
}

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

a {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  background: transparent;
  text-decoration: none;
  color: inherit;
}

b,
strong,
.h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

ins {
  color: #212121;
}

em {
  font-style: normal;
}

mark {
  background-color: #ff9;
  font-style: italic;
  font-weight: bold;
  color: #212121;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

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

hr {
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

input,
select,
textarea,
button {
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

textarea {
  resize: none;
}

input[type=text],
input[type=password],
input[type=tel],
input[type=search],
input[type=email],
input[type=time],
input[type=month],
input[type=date],
input[type=url],
input[type=image],
input[type=button],
input[type=submit],
input[type=reset],
input[type=file],
textarea,
select,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
}

input[type=hidden],
input::-ms-clear,
input::-ms-reveal {
  display: none;
}

input[type=button]::-moz-focus-inner,
button::-moz-focus-inner {
  margin: -1px;
  padding: 0;
}

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

input[type=button],
input[type=image],
input[type=file],
input[type=submit],
button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

input:disabled,
button:disabled {
  cursor: default;
}

input[type=date] {
  background: transparent;
}

input::-webkit-calendar-picker-indicator {
  opacity: 0;
}

::-moz-placeholder {
  color: #a5a5a5;
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
  opacity: 1;
}

::placeholder {
  color: #a5a5a5;
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
  opacity: 1;
}

body {
  background: #f9f9f9;
}

/**
 * Swiper 8.2.4
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2022 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: June 13, 2022
 */
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.swiper-vertical>.swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-pointer-events {
  touch-action: pan-y;
}

.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-css-mode>.swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
  scroll-snap-align: start start;
}

.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-vertical.swiper-css-mode>.swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-centered>.swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}

.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-horizontal>.swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-vertical>.swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

.swiper-centered>.swiper-wrapper>.swiper-slide {
  scroll-snap-align: center center;
}

.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

:root {
  --swiper-navigation-size: 44px;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
  display: none !important;
}

.swiper-button-lock {
  display: none;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-disabled>.swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: 50%;
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 0.2s transform, 0.2s top;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 5px);
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s left;
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s right;
}

.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical>.swiper-pagination-progressbar {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}

.swiper-scrollbar-disabled>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical>.swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-free-mode>.swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid>.swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column>.swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-next+.swiper-slide,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-top {
  z-index: 0;
  backface-visibility: hidden;
}

.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}

.swiper-cube .swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}

.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-top {
  z-index: 0;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}

.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  backface-visibility: hidden;
  overflow: hidden;
}

.swiper .swiper-pagination-bullet {
  background-color: #dcdcdc;
  opacity: 1;
}

.swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #37234D;
}

@media (min-width: 1025px) {
  #contents .contentHeader div>.h1 {
    font-size: 60px;
    line-height: 74px;
    letter-spacing: -0.05em;
  }
}

@media (max-width: 1024px) {
  #contents .contentHeader div>.h1 {
    font-size: 32px;
    line-height: 42px;
    letter-spacing: -0.025em;
  }
}

@media (min-width: 1025px) {

  #main>.info>.h1,
  .error404 section h2,
  .preview>section>div>header h2 {
    font-size: 50px;
    line-height: 62px;
    letter-spacing: -0.035em;
  }
}

@media (max-width: 1024px) {

  #main>.info>.h1,
  .error404 section h2,
  .preview>section>div>header h2 {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
  }
}

@media (min-width: 1025px) {

  .article#details>header .h1,
  #details .progressCalendar .performance header .h1,
  #details>header .container .h1,
  .popup>div .terms .h1,
  .popup>div .full .h1:not(.caseSmall) {
    font-size: 40px;
    line-height: 52px;
    letter-spacing: -0.03em;
  }
}

@media (max-width: 1024px) {

  .article#details>header .h1,
  #details .progressCalendar .performance header .h1,
  #details>header .container .h1,
  .popup>div .terms .h1,
  .popup>div .full .h1:not(.caseSmall) {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (min-width: 1025px) {

  #contents.pr.media>section .h1,
  #contents.pr.cast>section>header .h1,
  #contents.reservation>section>section>.h1,
  #contents.cs .guideType02>div .h1,
  #contents.cs .guideType01 .h1,
  #contents.cs .guideIntro strong,
  #contents.cs.info .floatContainer>section>.h1,
  #contents.cs.info>section .guide01>*,
  #contents.cs.info>section>header .h1,
  #contents.cs.info>section>.h1,
  #contents.faq .titleCase,
  #contents.info section.faq .titleCase,
  #story.gwell .info .h1,
  #story.brighten .info .h1,
  #story .value .h1,
  #contents.salesList .calendar section .h1,
  .popup>div .full>p:not(.case).big,
  .article#details .recommend .h1 {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
    line-height: 42px;
  }
}

@media (max-width: 1024px) {

  #contents.pr.media>section .h1,
  #contents.pr.cast>section>header .h1,
  #contents.reservation>section>section>.h1,
  #contents.cs .guideType02>div .h1,
  #contents.cs .guideType01 .h1,
  #contents.cs .guideIntro strong,
  #contents.cs.info .floatContainer>section>.h1,
  #contents.cs.info>section .guide01>*,
  #contents.cs.info>section>header .h1,
  #contents.cs.info>section>.h1,
  #contents.faq .titleCase,
  #contents.info section.faq .titleCase,
  #story.gwell .info .h1,
  #story.brighten .info .h1,
  #story .value .h1,
  #contents.salesList .calendar section .h1,
  .popup>div .full>p:not(.case).big,
  .article#details .recommend .h1 {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideType02>div ul li b {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
    line-height: 42px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType02>div ul li b {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (min-width: 1025px) {
  #main .now .swiper p {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {
  #main .now .swiper p {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
  }
}

@media (min-width: 1025px) {

  .popup .gwell .caseInfo h2,
  .article#details .info p,
  .popup>div .full .info h2 {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {

  .popup .gwell .caseInfo h2,
  .article#details .info p,
  .popup>div .full .info h2 {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (min-width: 1025px) {

  #contents.pr.cast>section.youtube .list>* em,
  #contents.reservation .info>div h2,
  #contents.reservation .authentication>div p strong,
  #contents.reservation .dateTime>section>dl dd,
  #contents.reservation .chooseModelhouse>button b,
  #contents.reservation>section.indi span.label,
  #contents.cs .guideType01 .guideList04 li strong,
  #story.gwell .info .color h2,
  #story.brighten .info .color h2,
  #story .value ul li div strong,
  .bannerLink>* p,
  #details .progressCalendar .performance header p,
  .error404 section p,
  .popup>div .full.joinComplete dl {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
    line-height: 32px;
  }
}

@media (max-width: 1024px) {

  #contents.pr.cast>section.youtube .list>* em,
  #contents.reservation .info>div h2,
  #contents.reservation .authentication>div p strong,
  #contents.reservation .dateTime>section>dl dd,
  #contents.reservation .chooseModelhouse>button b,
  #contents.reservation>section.indi span.label,
  #contents.cs .guideType01 .guideList04 li strong,
  #story.gwell .info .color h2,
  #story.brighten .info .color h2,
  #story .value ul li div strong,
  .bannerLink>* p,
  #details .progressCalendar .performance header p,
  .error404 section p,
  .popup>div .full.joinComplete dl {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (min-width: 1025px) {

  #contents.reservation .form .label,
  #main .pr section .swiper.news .swiper-slide strong,
  #contents .contentHeader p,
  .preview>section>div>header h2 small,
  .popup>div .terms .termsContents .h1 {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
    line-height: 32px;
  }
}

@media (max-width: 1024px) {

  #contents.reservation .form .label,
  #main .pr section .swiper.news .swiper-slide strong,
  #contents .contentHeader p,
  .preview>section>div>header h2 small,
  .popup>div .terms .termsContents .h1 {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }
}

#contents.reservation .dateTime>section .chooseTime>p,
#contents.reservation>section>.empty span,
#contents.faq .list>li button p,
#contents.info section.faq .list>li button p,
#main .now header a,
#contents.salesList .list .noResult,
.article#details>header .utility>span,
.article#details>header p,
#details .progressCalendar .performance header h2,
#details .progressCalendar .performance header ul,
#details .progressCalendar .performance header div,
.article#details .info>div>dl,
.article#details .info>ul li span,
.article#details .info>ul li small,
#contents.salesList .calendar section a p,
.popup>div .terms .termsContents h2,
.popup>div .full.joinComplete .info ul,
.popup>div .full .bullet,
.popup>div .full .result .h1,
.popup>div .full>p.case,
.popup>div .full>label span {
  color: #666;
}

@media (min-width: 1025px) {

  #contents.reservation .dateTime>section .chooseTime>p,
  #contents.reservation>section>.empty span,
  #contents.faq .list>li button p,
  #contents.info section.faq .list>li button p,
  #main .now header a,
  #contents.salesList .list .noResult,
  .article#details>header .utility>span,
  .article#details>header p,
  #details .progressCalendar .performance header h2,
  #details .progressCalendar .performance header ul,
  #details .progressCalendar .performance header div,
  .article#details .info>div>dl,
  .article#details .info>ul li span,
  .article#details .info>ul li small,
  #contents.salesList .calendar section a p,
  .popup>div .terms .termsContents h2,
  .popup>div .full.joinComplete .info ul,
  .popup>div .full .bullet,
  .popup>div .full .result .h1,
  .popup>div .full>p.case,
  .popup>div .full>label span {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
    line-height: 30px;
  }
}

@media (max-width: 1024px) {

  #contents.reservation .dateTime>section .chooseTime>p,
  #contents.reservation>section>.empty span,
  #contents.faq .list>li button p,
  #contents.info section.faq .list>li button p,
  #main .now header a,
  #contents.salesList .list .noResult,
  .article#details>header .utility>span,
  .article#details>header p,
  #details .progressCalendar .performance header h2,
  #details .progressCalendar .performance header ul,
  #details .progressCalendar .performance header div,
  .article#details .info>div>dl,
  .article#details .info>ul li span,
  .article#details .info>ul li small,
  #contents.salesList .calendar section a p,
  .popup>div .terms .termsContents h2,
  .popup>div .full.joinComplete .info ul,
  .popup>div .full .bullet,
  .popup>div .full .result .h1,
  .popup>div .full>p.case,
  .popup>div .full>label span {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }
}

.popup .gwell .caseInfo dd span,
.popup .gwell .caseInfo dl,
.popup .gwell .caseInfo ol,
#contents.pr.media .collect .total,
#contents.pr.media .newsPick .swiper li .detail>span,
#contents.pr.press .info .total,
#contents.pr.cast>section.instagram .swiper .swiper-slide em,
#contents.pr.cast>section.youtube .list>* p,
#contents.reservation .termsInfo,
#contents.reservation .info>div ol,
#contents.reservation .authentication>div button,
#contents.reservation .authentication>div p,
#contents.reservation .terms>p.caseBg,
#contents.reservation .terms>p,
#contents.reservation .terms>section,
#contents.reservation .number>div .selectBox>div,
#contents.reservation .number>div .selectBox>button,
#contents.reservation .number>div,
#contents.reservation .dateTime>section>dl dt,
#contents.reservation .dateTime>section>.h1,
#contents.reservation .chooseModelhouse>button,
#contents.cs .guideType01.case header p,
#contents.cs .guideType01 .guideList01 li p,
#contents.cs .guideIntro p,
#contents.cs .guideIntro .h1,
#contents.cs.info>section .location>dl,
#contents.cs.info>section.contract>.info a,
#contents.faq .list>li>div,
#contents.info section.faq .list>li>div,
#contents.salesList .search input[type=text],
#contents.salesList .toggleBtns>*,
#story.gwell .info .color li p,
#story.gwell .info .color>div p,
#story.brighten .info .color li p,
#story.brighten .info .color>div p,
#story .value ul li div p,
#story .architecture ul li a p,
#story .storyVi section p,
#story .swiper.story section p,
#main .pr section .swiper.news .swiper-slide>span,
#main .pr section .swiper.news .swiper-slide p,
#main>.info section ul a,
#main>.info section header .h1,
#main .now .swiper dl,
#main .now .swiper em,
.popNotice footer,
#myinfo .loggedOut>div a,
#contents.reservation .warning,
#contents.reservation .reservationList li .buttons>*,
#contents.reservation .reservationList li .call,
#contents.reservation .reservationList li .location,
#contents.reservation .reservationList li span,
#contents.reservation .reservationList li em,
#contents.pr.media .collect .modeTarget.textMode>*:not(.pagination) .date,
#contents.pr.press .modeTarget.textMode>*:not(.pagination) .date,
#contents.pr.media .collect .modeTarget.thumbMode>* .date,
#contents.pr.press .modeTarget.thumbMode>* .date,
#contents.pr.media .collect .modeTarget.thumbMode>* .period,
#contents.pr.press .modeTarget.thumbMode>* .period,
#contents.salesList .list li:not(.noResult)>dl,
#contents.salesList .list li:not(.noResult)>span,
#contents.salesList .list li:not(.noResult) .img em,
.noticeList table tbody tr td.date,
.noticeList>p,
#contents.reservation .form>div .caseRadio label span,
#contents.reservation .form>div.birthday .selectBox>div,
#contents.reservation .form>div.birthday .selectBox>button,
#contents.reservation .form>div.email .selectBox>div,
#contents.reservation .form>div.email .selectBox>button,
.article#details dl.download,
#details .progressCalendar .calendar .selectBox>div,
#details .overview,
#details .percentage dt,
#contents.salesList .calendar section .h1 span,
#details .tab button,
#contents.reservation .tab>*,
#contents.faq .tab>*,
#contents.info section.faq .tab>*,
#contents.salesList .tab>*,
.popup>div .terms .termsContents *:not(h2):not(.h1),
.popup>div .terms .selectBox>div,
.popup>div .terms .selectBox>button,
.popup>div .full .result table,
.popup>div .full>p:not(.case),
.toastMessage p,
#contents.reservation .form>div input,
.popup>div .full .inputTxt input,
#contents.reservation .form>div textarea,
.popup>div .full .inputTxt textarea,
.guideBtnEx12,
.guideBtnEx11 {
  color: #666;
}

@media (min-width: 1025px) {

  .popup .gwell .caseInfo dd span,
  .popup .gwell .caseInfo dl,
  .popup .gwell .caseInfo ol,
  #contents.pr.media .collect .total,
  #contents.pr.media .newsPick .swiper li .detail>span,
  #contents.pr.press .info .total,
  #contents.pr.cast>section.instagram .swiper .swiper-slide em,
  #contents.pr.cast>section.youtube .list>* p,
  #contents.reservation .termsInfo,
  #contents.reservation .info>div ol,
  #contents.reservation .authentication>div button,
  #contents.reservation .authentication>div p,
  #contents.reservation .terms>p.caseBg,
  #contents.reservation .terms>p,
  #contents.reservation .terms>section,
  #contents.reservation .number>div .selectBox>div,
  #contents.reservation .number>div .selectBox>button,
  #contents.reservation .number>div,
  #contents.reservation .dateTime>section>dl dt,
  #contents.reservation .dateTime>section>.h1,
  #contents.reservation .chooseModelhouse>button,
  #contents.cs .guideType01.case header p,
  #contents.cs .guideType01 .guideList01 li p,
  #contents.cs .guideIntro p,
  #contents.cs .guideIntro .h1,
  #contents.cs.info>section .location>dl,
  #contents.cs.info>section.contract>.info a,
  #contents.faq .list>li>div,
  #contents.info section.faq .list>li>div,
  #contents.salesList .search input[type=text],
  #contents.salesList .toggleBtns>*,
  #story.gwell .info .color li p,
  #story.gwell .info .color>div p,
  #story.brighten .info .color li p,
  #story.brighten .info .color>div p,
  #story .value ul li div p,
  #story .architecture ul li a p,
  #story .storyVi section p,
  #story .swiper.story section p,
  #main .pr section .swiper.news .swiper-slide>span,
  #main .pr section .swiper.news .swiper-slide p,
  #main>.info section ul a,
  #main>.info section header .h1,
  #main .now .swiper dl,
  #main .now .swiper em,
  .popNotice footer,
  #myinfo .loggedOut>div a,
  #contents.reservation .warning,
  #contents.reservation .reservationList li .buttons>*,
  #contents.reservation .reservationList li .call,
  #contents.reservation .reservationList li .location,
  #contents.reservation .reservationList li span,
  #contents.reservation .reservationList li em,
  #contents.pr.media .collect .modeTarget.textMode>*:not(.pagination) .date,
  #contents.pr.press .modeTarget.textMode>*:not(.pagination) .date,
  #contents.pr.media .collect .modeTarget.thumbMode>* .date,
  #contents.pr.press .modeTarget.thumbMode>* .date,
  #contents.pr.media .collect .modeTarget.thumbMode>* .period,
  #contents.pr.press .modeTarget.thumbMode>* .period,
  #contents.salesList .list li:not(.noResult)>dl,
  #contents.salesList .list li:not(.noResult)>span,
  #contents.salesList .list li:not(.noResult) .img em,
  .noticeList table tbody tr td.date,
  .noticeList>p,
  #contents.reservation .form>div .caseRadio label span,
  #contents.reservation .form>div.birthday .selectBox>div,
  #contents.reservation .form>div.birthday .selectBox>button,
  #contents.reservation .form>div.email .selectBox>div,
  #contents.reservation .form>div.email .selectBox>button,
  .article#details dl.download,
  #details .progressCalendar .calendar .selectBox>div,
  #details .overview,
  #details .percentage dt,
  #contents.salesList .calendar section .h1 span,
  #details .tab button,
  #contents.reservation .tab>*,
  #contents.faq .tab>*,
  #contents.info section.faq .tab>*,
  #contents.salesList .tab>*,
  .popup>div .terms .termsContents *:not(h2):not(.h1),
  .popup>div .terms .selectBox>div,
  .popup>div .terms .selectBox>button,
  .popup>div .full .result table,
  .popup>div .full>p:not(.case),
  .toastMessage p,
  #contents.reservation .form>div input,
  .popup>div .full .inputTxt input,
  #contents.reservation .form>div textarea,
  .popup>div .full .inputTxt textarea,
  .guideBtnEx12,
  .guideBtnEx11 {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
    line-height: 28px;
  }
}

@media (max-width: 1024px) {

  .popup .gwell .caseInfo dd span,
  .popup .gwell .caseInfo dl,
  .popup .gwell .caseInfo ol,
  #contents.pr.media .collect .total,
  #contents.pr.media .newsPick .swiper li .detail>span,
  #contents.pr.press .info .total,
  #contents.pr.cast>section.instagram .swiper .swiper-slide em,
  #contents.pr.cast>section.youtube .list>* p,
  #contents.reservation .termsInfo,
  #contents.reservation .info>div ol,
  #contents.reservation .authentication>div button,
  #contents.reservation .authentication>div p,
  #contents.reservation .terms>p.caseBg,
  #contents.reservation .terms>p,
  #contents.reservation .terms>section,
  #contents.reservation .number>div .selectBox>div,
  #contents.reservation .number>div .selectBox>button,
  #contents.reservation .number>div,
  #contents.reservation .dateTime>section>dl dt,
  #contents.reservation .dateTime>section>.h1,
  #contents.reservation .chooseModelhouse>button,
  #contents.cs .guideType01.case header p,
  #contents.cs .guideType01 .guideList01 li p,
  #contents.cs .guideIntro p,
  #contents.cs .guideIntro .h1,
  #contents.cs.info>section .location>dl,
  #contents.cs.info>section.contract>.info a,
  #contents.faq .list>li>div,
  #contents.info section.faq .list>li>div,
  #contents.salesList .search input[type=text],
  #contents.salesList .toggleBtns>*,
  #story.gwell .info .color li p,
  #story.gwell .info .color>div p,
  #story.brighten .info .color li p,
  #story.brighten .info .color>div p,
  #story .value ul li div p,
  #story .architecture ul li a p,
  #story .storyVi section p,
  #story .swiper.story section p,
  #main .pr section .swiper.news .swiper-slide>span,
  #main .pr section .swiper.news .swiper-slide p,
  #main>.info section ul a,
  #main>.info section header .h1,
  #main .now .swiper dl,
  #main .now .swiper em,
  .popNotice footer,
  #myinfo .loggedOut>div a,
  #contents.reservation .warning,
  #contents.reservation .reservationList li .buttons>*,
  #contents.reservation .reservationList li .call,
  #contents.reservation .reservationList li .location,
  #contents.reservation .reservationList li span,
  #contents.reservation .reservationList li em,
  #contents.pr.media .collect .modeTarget.textMode>*:not(.pagination) .date,
  #contents.pr.press .modeTarget.textMode>*:not(.pagination) .date,
  #contents.pr.media .collect .modeTarget.thumbMode>* .date,
  #contents.pr.press .modeTarget.thumbMode>* .date,
  #contents.pr.media .collect .modeTarget.thumbMode>* .period,
  #contents.pr.press .modeTarget.thumbMode>* .period,
  #contents.salesList .list li:not(.noResult)>dl,
  #contents.salesList .list li:not(.noResult)>span,
  #contents.salesList .list li:not(.noResult) .img em,
  .noticeList table tbody tr td.date,
  .noticeList>p,
  #contents.reservation .form>div .caseRadio label span,
  #contents.reservation .form>div.birthday .selectBox>div,
  #contents.reservation .form>div.birthday .selectBox>button,
  #contents.reservation .form>div.email .selectBox>div,
  #contents.reservation .form>div.email .selectBox>button,
  .article#details dl.download,
  #details .progressCalendar .calendar .selectBox>div,
  #details .overview,
  #details .percentage dt,
  #contents.salesList .calendar section .h1 span,
  #details .tab button,
  #contents.reservation .tab>*,
  #contents.faq .tab>*,
  #contents.info section.faq .tab>*,
  #contents.salesList .tab>*,
  .popup>div .terms .termsContents *:not(h2):not(.h1),
  .popup>div .terms .selectBox>div,
  .popup>div .terms .selectBox>button,
  .popup>div .full .result table,
  .popup>div .full>p:not(.case),
  .toastMessage p,
  #contents.reservation .form>div input,
  .popup>div .full .inputTxt input,
  #contents.reservation .form>div textarea,
  .popup>div .full .inputTxt textarea,
  .guideBtnEx12,
  .guideBtnEx11 {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }
}

.article#details .recommend .h1 {
  display: block;
  padding-bottom: 20px;
}

.exclamation {
  position: relative;
  padding-left: 27px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  color: #666;
}

.exclamation::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 20px;
  height: 20px;
  border: 1px solid #666;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
}

@media (min-width: 1025px) {

  .editor .h1,
  #contents.crDetail dl.info dd:not(.diagram) .h1,
  #detailContents.portfolioDetail .progressCalendar .performance header div .h1,
  #detailContents.pressDetail .detail .h1,
  #detailContents.portfolioDetail .detailContainer>section .detail .h1 {
    font-size: 36px;
    line-height: 48px;
    letter-spacing: -0.03em;
  }

  .editor h2,
  #contents.crDetail dl.info dd:not(.diagram) h2,
  #detailContents.portfolioDetail .progressCalendar .performance header div h2,
  #detailContents.pressDetail .detail h2,
  #detailContents.portfolioDetail .detailContainer>section .detail h2 {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }

  .editor h3,
  #contents.crDetail dl.info dd:not(.diagram) h3,
  #detailContents.portfolioDetail .progressCalendar .performance header div h3,
  #detailContents.pressDetail .detail h3,
  #detailContents.portfolioDetail .detailContainer>section .detail h3 {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (max-width: 1024px) {

  .editor .h1,
  #contents.crDetail dl.info dd:not(.diagram) .h1,
  #detailContents.portfolioDetail .progressCalendar .performance header div .h1,
  #detailContents.pressDetail .detail .h1,
  #detailContents.portfolioDetail .detailContainer>section .detail .h1 {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }

  .editor h2,
  #contents.crDetail dl.info dd:not(.diagram) h2,
  #detailContents.portfolioDetail .progressCalendar .performance header div h2,
  #detailContents.pressDetail .detail h2,
  #detailContents.portfolioDetail .detailContainer>section .detail h2 {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
  }

  .editor h3,
  #contents.crDetail dl.info dd:not(.diagram) h3,
  #detailContents.portfolioDetail .progressCalendar .performance header div h3,
  #detailContents.pressDetail .detail h3,
  #detailContents.portfolioDetail .detailContainer>section .detail h3 {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }
}

.editor p,
#contents.crDetail dl.info dd:not(.diagram) p,
#detailContents.portfolioDetail .progressCalendar .performance header div p,
#detailContents.pressDetail .detail p,
#detailContents.portfolioDetail .detailContainer>section .detail p {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
}

.guideBtnEx11 {
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  text-align: center;
}

.guideBtnEx11:not(:disabled):hover {
  border-color: #46296E;
  color: #46296E;
}

@media (min-width: 1025px) {
  .guideBtnEx11 {
    min-width: 206px;
    padding: 0 20px;
    line-height: 52px;
  }
}

@media (max-width: 1024px) {
  .guideBtnEx11 {
    min-width: 160px;
    padding: 0 15px;
    line-height: 38px;
  }
}

.guideBtnEx12 {
  border-radius: 4px;
  text-align: center;
  background: #37234D;
  color: #fff;
}

@media (min-width: 1025px) {
  .guideBtnEx12 {
    padding: 0 20px;
    line-height: 48px;
  }
}

@media (max-width: 1024px) {
  .guideBtnEx12 {
    width: 100%;
    line-height: 48px;
  }
}

.popup>div .full .inputTxt {
  position: relative;
}

.popup>div .full .inputTxt input:focus {
  outline: 0;
  border-color: #46296E;
}

.popup>div .full .inputTxt .reset {
  right: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #a5a5a5;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
}

.popup>div .full .inputTxt .reset::before,
.popup>div .full .inputTxt .reset::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 14px;
  height: 1px;
  background: #fff;
}

.popup>div .full .inputTxt .reset::before {
  transform: rotate(45deg);
}

.popup>div .full .inputTxt .reset::after {
  transform: rotate(-45deg);
}

.popup>div .full .inputTxt input:not(:valid)~.reset {
  display: none;
}

#contents.reservation .form>div input,
.popup>div .full .inputTxt input,
#contents.reservation .form>div textarea,
.popup>div .full .inputTxt textarea {
  width: 100%;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  background: #fff;
}

#contents.reservation .form>div input.zoom,
.popup>div .full .inputTxt input.zoom,
#contents.reservation .form>div textarea.zoom,
.popup>div .full .inputTxt textarea.zoom {
  background-image: url("../images/icon/iconZoom3.svg");
  background-repeat: no-repeat;
  background-position: right 17px center;
}

#contents.reservation .form>div input:disabled,
.popup>div .full .inputTxt input:disabled,
#contents.reservation .form>div textarea:disabled,
.popup>div .full .inputTxt textarea:disabled {
  background: #f9f9f9;
}

@media (min-width: 1025px) {

  #contents.reservation .form>div input,
  .popup>div .full .inputTxt input,
  #contents.reservation .form>div textarea,
  .popup>div .full .inputTxt textarea {
    height: 54px;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 52px;
  }

  #contents.reservation .form>div .reset,
  .popup>div .full .inputTxt .reset {
    right: 20px;
  }

  #contents.reservation .form>div input.zoom~.reset,
  .popup>div .full .inputTxt input.zoom~.reset {
    right: 50px;
  }
}

@media (max-width: 1024px) {

  #contents.reservation .form>div input,
  .popup>div .full .inputTxt input,
  #contents.reservation .form>div textarea,
  .popup>div .full .inputTxt textarea {
    height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 38px;
  }

  #contents.reservation .form>div .reset,
  .popup>div .full .inputTxt .reset {
    right: 15px;
  }

  #contents.reservation .form>div .zoom+.reset,
  .popup>div .full .inputTxt .zoom+.reset {
    right: 50px;
  }
}

@media (max-width: 480px) {

  #contents.reservation .form>div textarea,
  .popup>div .full .inputTxt textarea {
    height: 60px !important;
    padding-top: 12px;
    line-height: 17px;
  }
}

#contents.reservation .terms label {
  position: relative;
  display: inline-block;
  padding-left: 36px;
}

#contents.reservation .terms label input {
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

#contents.reservation .terms label span {
  font-size: 16px;
  line-height: 24px;
  color: #666;
}

#contents.reservation .terms label span::before,
#contents.reservation .terms label span::after {
  content: "";
  position: absolute;
}

#contents.reservation .terms label span::before {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: 1px solid #c8c8c8;
  border-radius: 2px;
}

#contents.reservation .terms label input:checked+span {
  color: #212121;
}

#contents.reservation .terms label input:checked+span::before {
  border: 0;
  background: #46296E;
}

#contents.reservation .terms label input:checked+span::after {
  top: 6px;
  left: 6px;
  width: 13px;
  height: 7px;
  border-style: solid;
  border-color: #fff;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

.hasDatepicker {
  background-image: url("../images/icon/iconCalendar.svg") !important;
  background-repeat: no-repeat !important;
  background-position: right 20px center !important;
}

@media (min-width: 1025px) {
  .hasDatepicker {
    background-size: 34px !important;
  }
}

@media (max-width: 1024px) {
  .hasDatepicker {
    background-size: 24px !important;
  }
}

.switch-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.switch-container i {
  display: inline-block;
  position: relative;
  top: -9px;
}

.switch-container .btn-color-mode-switch {
  display: inline-block;
  margin: 0px;
  position: relative;
}

.switch-container .btn-color-mode-switch>label.btn-color-mode-switch-inner {
  margin: 0px;
  width: 140px;
  height: 30px;
  /* background: #e0e0e0; */
  border: 1px solid #ddd;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  /*box-shadow: 0px 0px 8px 0px rgba(17, 17, 17, 0.34) inset;*/
  display: block;
}

.switch-container .btn-color-mode-switch>label.btn-color-mode-switch-inner:before {
  content: attr(data-on);
  position: absolute;
  font-size: 12px;
  font-weight: 500;
  top: 7px;
  right: 20px;
}

.switch-container .btn-color-mode-switch>label.btn-color-mode-switch-inner:after {
  content: attr(data-off);
  width: 70px;
  background: #fff;
  border-radius: 26px;
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #ddd;
  padding: 5px 0px;
}

.switch-container .btn-color-mode-switch>.alert {
  display: none;
  background: #ff9800;
  border: none;
  color: #fff;
}

.switch-container input[type=checkbox] {
  cursor: pointer;
  width: 50px;
  height: 25px;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: 1;
  margin: 0px;
}

.switch-container input[type=checkbox]:checked+label.btn-color-mode-switch-inner:after {
  content: attr(data-on);
  left: 68px;
}

.switch-container input[type=checkbox]:checked+label.btn-color-mode-switch-inner:before {
  content: attr(data-off);
  right: auto;
  left: 20px;
}

.switch-container input[type=checkbox]:checked~.alert {
  display: block;
}

.toastMessage {
  z-index: 99999;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: rgba(0, 0, 0, 0.3);
}

.toastMessage p {
  padding: 0 20px;
  -ms-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102);
  background: #fff;
  text-align: center;
  color: #46296E;
}

@media (min-width: 1025px) {
  .toastMessage p {
    width: 600px;
    height: 60px;
    line-height: 60px;
  }
}

@media (max-width: 1024px) {
  .toastMessage p {
    width: 290px;
    height: 50px;
    line-height: 50px;
  }
}

.popup {
  z-index: 9999;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  margin: auto;
}

.popup>div>.closePopup,
.popup>.closePopup {
  z-index: 0;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  cursor: default;
}

.popup .btnFooterCase {
  text-align: center;
}

@media (min-width: 1025px) {
  .popup .btnFooterCase {
    padding-top: 40px;
  }
}

@media (max-width: 1024px) {
  .popup .btnFooterCase {
    padding-top: 30px;
  }
}

.popup .btnFooterCase>* {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
}

.popup .btnFooterCase>*::before,
.popup .btnFooterCase>*::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

.popup .btnFooterCase>*:not(:disabled):hover,
.popup .btnFooterCase>*:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

.popup .btnFooterCase>*:not(:disabled):hover::before,
.popup .btnFooterCase>*:not(:disabled):hover::after,
.popup .btnFooterCase>*:not(:disabled):focus::before,
.popup .btnFooterCase>*:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  .popup .btnFooterCase>* {
    font-size: 16px;
    min-width: 180px;
    height: 60px;
    padding: 0 20px;
    border-radius: 30px;
  }

  .popup .btnFooterCase>*::before {
    margin-right: 10px;
  }

  .popup .btnFooterCase>*::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  .popup .btnFooterCase>* {
    font-size: 14px;
    min-width: 180px;
    font-size: 16px;
    height: 50px;
    padding: 0 18px;
    border-radius: 25px;
  }

  .popup .btnFooterCase>*::before {
    margin-right: 14px;
  }

  .popup .btnFooterCase>*::after {
    margin-left: 18px;
  }
}

.popup>div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.popup>div .wrapper {
  position: relative;
  border: 1px solid #c8c8c8;
  background: #fff;
}

.popup>div .wrapper .close {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
}

.popup>div .notice {
  word-break: keep-all;
}

.popup>div .notice p strong {
  color: #46296E;
}

.popup>div .notice span {
  display: block;
  margin-top: 25px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  font-weight: 300;
  color: #666;
}

.popup>div .notice .close,
.popup>div .full .close,
.popup>div .terms .close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 28px;
  height: 28px;
}

.popup>div .notice .close::before,
.popup>div .notice .close::after,
.popup>div .full .close::before,
.popup>div .full .close::after,
.popup>div .terms .close::before,
.popup>div .terms .close::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 28px;
  height: 2px;
  background: #c8c8c8;
}

.popup>div .notice .close::before,
.popup>div .full .close::before,
.popup>div .terms .close::before {
  transform: rotate(45deg);
}

.popup>div .notice .close::after,
.popup>div .full .close::after,
.popup>div .terms .close::after {
  transform: rotate(-45deg);
}

.popup>div .full {
  max-height: calc(100vh - 40px);
  max-height: calc(var(--vh, 1vh) * 100 - 40px);
  overflow-y: auto;
}

.popup>div .full .h1:not(.caseSmall) {
  font-weight: 400;
}

.popup>div .full .h1:not(.caseSmall)+label>span {
  margin-top: 0 !important;
}

.popup>div .full .h1:not(.caseSmall) em {
  font-weight: 600;
  color: #46296E;
}

.popup>div .full .h1.caseSmall {
  margin-top: -10px;
  margin-bottom: 0;
  padding-bottom: 20px;
  font-size: 26px;
  line-height: 36px;
  letter-spacing: -0.02em;
}

.popup>div .full .sentenceCase {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  color: #666;
}

@media (min-width: 1025px) {
  .popup>div .full .inputTxt {
    margin-top: 10px;
  }
}

@media (max-width: 1024px) {
  .popup>div .full .inputTxt {
    margin-top: 5px;
  }
}

.popup>div .full .inputTxt input {
  color: #212121;
}

.popup>div .full>label span {
  display: block;
  color: #212121;
}

@media (min-width: 1025px) {
  .popup>div .full>label span {
    margin-top: 45px;
  }
}

@media (max-width: 1024px) {
  .popup>div .full>label span {
    margin-top: 25px;
  }
}

.popup>div .full>p {
  word-break: keep-all;
}

.popup>div .full>p:not(.case) {
  margin-top: 12px;
  color: #a5a5a5;
}

.popup>div .full>p:not(.case).big {
  color: #212121;
}

.popup>div .full>p:not(.case).big strong {
  color: #46296E;
}

@media (min-width: 1025px) {
  .popup>div .full>p.case {
    margin-top: 40px;
  }
}

@media (max-width: 1024px) {
  .popup>div .full>p.case {
    margin-top: 30px;
  }
}

.popup>div .full label.caseSchool span {
  width: 100%;
}

.popup>div .full label.caseSchool>button {
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  background: #f9f9f9;
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

.popup>div .full .result table {
  table-layout: fixed;
  margin-top: 15px;
  width: 100%;
  border-top: 2px solid #212121;
  color: #212121;
}

.popup>div .full .result table th {
  background: #f6f6f6;
  font-weight: 400;
}

.popup>div .full .result table th,
.popup>div .full .result table td {
  border-bottom: 1px solid #c8c8c8;
}

.popup>div .full .result table th:first-child,
.popup>div .full .result table td:first-child {
  text-align: center;
}

.popup>div .full .result table th:not(:first-child),
.popup>div .full .result table td:not(:first-child) {
  border-left: 1px solid #c8c8c8;
}

.popup>div .full .result table td:last-child {
  padding-left: 30px;
}

.popup>div .full .result table tr:hover {
  background: rgba(68, 21, 160, 0.2);
}

@media (min-width: 1025px) {
  .popup>div .full .result {
    margin-top: 48px;
  }

  .popup>div .full .result table th,
  .popup>div .full .result table td {
    padding: 17px 10px;
  }

  .popup>div .full .result table th:first-child,
  .popup>div .full .result table td:first-child {
    width: 90px;
  }

  .popup>div .full .result+.caseSchool {
    margin-top: 40px;
  }
}

@media (max-width: 1024px) {
  .popup>div .full .result {
    margin-top: 25px;
  }

  .popup>div .full .result table th,
  .popup>div .full .result table td {
    padding: 12px 10px;
  }

  .popup>div .full .result table th:first-child,
  .popup>div .full .result table td:first-child {
    width: 85px;
  }

  .popup>div .full .result+.caseSchool {
    margin-top: 20px;
  }
}

.popup>div .full .info {
  padding-top: 40px;
}

.popup>div .full .info h2.caseEmph {
  color: #46296E;
}

.popup>div .full .bullet {
  margin-top: 20px;
  word-break: keep-all;
}

.popup>div .full .bullet.caseMarginShort {
  margin-top: 8px;
}

.popup>div .full .bullet li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.popup>div .full .bullet li::before {
  content: "•";
  margin-right: 4px;
}

.popup>div .full .bullet li b {
  color: #212121;
}

.popup>div .full .btns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.popup>div .full .btns>*:not(.case) {
  display: inline-block;
  width: 100%;
  border: 1px solid #c8c8c8;
  border-radius: 25px;
  background: #fff;
  text-align: center;
  line-height: 50px;
  color: #212121;
}

@media (max-width: 1024px) {
  .popup>div .full .btns>*:not(.case) {
    font-size: 14px;
  }
}

.popup>div .full .btns>*:not(.case):hover {
  background: #46296E;
  border-color: #46296E;
  color: #fff;
}

.popup>div .full .btns>*.case {
  display: inline-block;
  width: 100%;
  border: 1px solid #46296E;
  border-radius: 25px;
  background: #46296E;
  text-align: center;
  line-height: 50px;
  color: #fff;
}

@media (max-width: 1024px) {
  .popup>div .full .btns>*.case {
    font-size: 14px;
  }
}

@media (min-width: 1025px) {
  .popup>div .full .btns {
    padding-top: 20px;
  }

  .popup>div .full .btns.casePaddingLong {
    padding-top: 50px;
  }

  .popup>div .full .btns>* {
    width: calc(50% - 10px) !important;
  }
}

@media (max-width: 1024px) {
  .popup>div .full .btns {
    padding-top: 40px;
  }

  .popup>div .full .btns>* {
    width: calc(50% - 5px);
  }
}

.popup>div .full .btnsFull button {
  display: inline-block;
  width: 100%;
  border: 1px solid #c8c8c8;
  border-radius: 25px;
  background: #fff;
  text-align: center;
  line-height: 50px;
  color: #212121;
}

@media (max-width: 1024px) {
  .popup>div .full .btnsFull button {
    font-size: 14px;
  }
}

.popup>div .full .btnsFull button:hover {
  border-color: #46296E;
  color: #46296E;
}

@media (min-width: 1025px) {
  .popup>div .full .btnsFull {
    margin-top: 50px;
  }

  .popup>div .full .btnsFull>*+* {
    margin-top: 25px;
  }
}

@media (max-width: 1024px) {
  .popup>div .full .btnsFull {
    margin-top: 45px;
  }

  .popup>div .full .btnsFull>*+* {
    margin-top: 10px;
  }
}

.popup>div .full.joinComplete dl {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 20px;
  background: #f9f9f9;
}

.popup>div .full.joinComplete dl dd {
  color: #46296E;
}

.popup>div .full.joinComplete .info {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #c8c8c8;
}

.popup>div .full.joinComplete .info ul {
  margin-top: 20px;
  word-break: keep-all;
}

.popup>div .full.joinComplete .info ul strong {
  color: #212121;
}

.popup>div .full.joinComplete .info ul p {
  padding-top: 12px;
}

@media (min-width: 1025px) {
  .popup>div .full.joinComplete dl {
    padding: 30px;
  }

  .popup>div .full.joinComplete ul li+li {
    margin-top: 30px;
  }
}

@media (max-width: 1024px) {
  .popup>div .full.joinComplete dl {
    padding: 15px 10px;
  }

  .popup>div .full.joinComplete ul li+li {
    margin-top: 15px;
  }
}

.popup>div .terms {
  width: calc(100% - 40px);
  max-width: 980px;
  height: calc(100% - 40px);
  max-height: 705px;
}

.popup>div .terms .h1 {
  font-weight: 400;
}

.popup>div .terms .selectBox {
  position: relative;
  position: absolute;
}

.popup>div .terms .selectBox>button {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #707070;
  text-align: left;
  color: #666;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 30px !important;
  padding-bottom: 7px;
}

.popup>div .terms .selectBox>button::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-45deg);
  top: 7px;
  right: 8px;
}

.popup>div .terms .selectBox>button.placeholder {
  color: #a5a5a5;
}

.popup>div .terms .selectBox>button.active {
  color: #46296E;
}

.popup>div .terms .selectBox>button.active::after {
  border-color: #46296E;
}

.popup>div .terms .selectBox>div {
  z-index: 3;
  position: absolute;
  display: none;
  width: 100%;
  overflow: auto;
  background: #fff;
  -ms-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
}

.popup>div .terms .selectBox>div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: #46296E;
}

.popup>div .terms .selectBox>div button {
  width: 100%;
  line-height: 2.5 !important;
  text-align: left;
}

.popup>div .terms .selectBox>div button.selected {
  color: #46296E;
}

@media (min-width: 1025px) {
  .popup>div .terms .selectBox>div>button:first-child {
    margin-top: 10px;
  }

  .popup>div .terms .selectBox>div>button:last-child {
    margin-bottom: 10px;
  }

  .popup>div .terms .selectBox>button,
  .popup>div .terms .selectBox>div button {
    padding-left: 12px;
  }
}

@media (max-width: 1024px) {
  .popup>div .terms .selectBox>div>button {
    padding-left: 10px;
  }

  .popup>div .terms .selectBox>div>button:first-child {
    margin-top: 5px;
  }

  .popup>div .terms .selectBox>div>button:last-child {
    margin-bottom: 5px;
  }
}

.popup>div .terms .termsContents {
  position: absolute;
  border: 1px solid #c8c8c8;
  overflow: auto;
}

.popup>div .terms .termsContents .h1 {
  font-weight: 700;
}

.popup>div .terms .termsContents h2 {
  font-weight: 400;
  color: #212121;
}

.popup>div .terms .termsContents>section+section {
  margin-top: 40px;
}

.popup>div .terms .termsContents>section>*+* {
  margin-top: 15px;
}

.popup>div .terms .termsContents>section li+li {
  margin-top: 5px;
}

.popup>div .terms .termsContents>section .listDash>li,
.popup>div .terms .termsContents>section p.dash {
  position: relative;
  padding-left: 0.7em;
}

.popup>div .terms .termsContents>section .listDash>li::before,
.popup>div .terms .termsContents>section p.dash::before {
  content: "-";
  position: absolute;
  left: 0;
  width: 1.2em;
}

.popup>div .terms .termsContents>section .listNum {
  counter-reset: item;
}

.popup>div .terms .termsContents>section .listNum>li {
  list-style: none;
  position: relative;
  padding-left: 1.5em;
}

.popup>div .terms .termsContents>section .listNum>li::before {
  content: "(" counter(item) ")";
  counter-increment: item;
  position: absolute;
  left: 0;
}

.popup>div .terms .termsContents>section .listCircle {
  counter-reset: item;
}

.popup>div .terms .termsContents>section .listCircle>li {
  list-style: none;
  position: relative;
  padding-left: 1.5em;
}

.popup>div .terms .termsContents>section .listCircle>li::before {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 1.4em;
  height: 1.4em;
  border: 1px solid #666;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
  line-height: 1.3em;
  overflow: hidden;
}

.popup>div .terms .termsContents>section .listOrder {
  margin-left: 1em;
}

.popup>div .terms .termsContents>section .tableWrapper {
  overflow-x: auto;
}

.popup>div .terms .termsContents>section .tableWrapper table {
  table-layout: fixed;
}

.popup>div .terms .termsContents table {
  table-layout: unset;
  width: 100%;
  border-top: 2px solid #212121;
}

.popup>div .terms .termsContents table th {
  background: #f6f6f6;
  font-weight: 400;
  color: #212121;
}

.popup>div .terms .termsContents table th,
.popup>div .terms .termsContents table td {
  padding: 5px 10px;
  border-bottom: 1px solid #c8c8c8;
}

.popup>div .terms .termsContents table th:not(:first-child),
.popup>div .terms .termsContents table td:not(:first-child) {
  border-left: 1px solid #c8c8c8;
}

@media (min-width: 1025px) {
  .popup {
    background: rgba(0, 0, 0, 0.8);
  }

  .popup .notice {
    width: 540px;
    padding: 80px 60px 85px;
  }

  .popup .notice.full {
    width: 600px;
  }

  .popup .notice p {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
  }

  .popup .full {
    width: 600px;
    padding: 80px 50px;
  }

  .popup .full.gwell {
    padding-bottom: 50px;
  }

  .popup .full .h1 {
    margin-bottom: 26px;
  }

  .popup .full .h1.case {
    font-size: 25px;
    line-height: 40px;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  .popup .full label.caseSchool {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .popup .full label.caseSchool .inputTxt {
    width: calc(100% - 110px);
  }

  .popup .full label.caseSchool>button {
    margin-top: 10px;
    width: 100px;
    height: 54px;
  }

  .popup .terms {
    padding: 88px 50px 48px;
  }

  .popup .terms .selectBox {
    top: 139px;
    right: 50px;
    width: 184px;
  }

  .popup .terms .termsContents {
    top: 189px;
    left: 50px;
    width: calc(100% - 100px);
    height: calc(100% - 240px);
    padding: 15px 20px;
  }
}

@media (max-width: 1024px) {
  .popup {
    background: rgba(0, 0, 0, 0.7);
  }

  .popup .notice {
    width: calc(100% - 40px);
    max-width: 320px;
    padding: 120px 0;
  }

  .popup .notice p,
  .popup .notice span {
    margin-left: auto;
    margin-right: auto;
    width: 220px;
  }

  .popup .notice p {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }

  .popup .full {
    width: calc(100% - 40px);
    max-width: 600px;
    min-width: 280px;
    padding: 87px 30px 80px;
  }

  .popup .full .h1 {
    margin-bottom: 14px;
  }

  .popup .full label.caseSchool {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .popup .full label.caseSchool span {
    width: 100%;
  }

  .popup .full label.caseSchool .inputTxt {
    width: calc(100% - 90px);
  }

  .popup .full label.caseSchool>button {
    margin-top: 5px;
    width: 80px;
    height: 40px;
  }
}

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

  .popup .full label.caseSchool .inputTxt,
  .popup .full label.caseSchool>button {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .popup .notice.full.gwell {
    padding: 65px 20px 30px;
  }

  .popup .notice.full.gwell .close {
    top: 20px;
    right: 20px;
  }

  .popup .terms {
    padding: 70px 20px 30px;
  }

  .popup .terms .selectBox {
    top: 115px;
    left: 20px;
    width: 150px;
  }

  .popup .terms .termsContents {
    top: 165px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 190px);
    padding: 10px;
  }
}

.tabPop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.tabPop>* {
  position: relative;
  flex-basis: 100%;
  padding-bottom: 10px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
}

@media (min-width: 1025px) {
  .tabPop>* {
    margin-bottom: 38px;
  }
}

@media (max-width: 1024px) {
  .tabPop>* {
    margin-bottom: 30px;
  }
}

.tabPop>*.active {
  border-bottom: 1px solid #37234D;
  font-weight: 700;
  color: #37234D;
}

.tabPop>*:not(.active) {
  border-bottom: 1px solid #E1E1E1;
  color: #666;
}

.tabPop>*+*::before {
  content: "";
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 1px;
  height: 15px;
  background: #E1E1E1;
}

.preview>section {
  background: #fff;
}

.preview>section>div {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

.preview>section>div>.closePopup {
  position: absolute;
  z-index: 2;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border-radius: 50%;
  background: #46296E;
  background: #141642;
}

@media (min-width: 1025px) {
  .preview>section>div>.closePopup {
    top: 100px;
    right: 107px;
    width: 48px;
    height: 48px;
  }

  .preview>section>div>.closePopup::before,
  .preview>section>div>.closePopup::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 23px;
    height: 1px;
    background: #fff;
  }

  .preview>section>div>.closePopup::before {
    transform: rotate(45deg);
  }

  .preview>section>div>.closePopup::after {
    transform: rotate(-45deg);
  }
}

@media (max-width: 1024px) {
  .preview>section>div>.closePopup {
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
  }

  .preview>section>div>.closePopup::before,
  .preview>section>div>.closePopup::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 15px;
    height: 1px;
    background: #fff;
  }

  .preview>section>div>.closePopup::before {
    transform: rotate(45deg);
  }

  .preview>section>div>.closePopup::after {
    transform: rotate(-45deg);
  }
}

@media (min-width: 1025px) {
  .preview>section>div>.closePopup {
    top: 30px;
    right: 10px;
  }
}

@media screen and (min-width: 1025px) and (min-width: 1400px) {
  .preview>section>div>.closePopup {
    top: 80px !important;
    right: -80px;
  }
}

.preview>section>div>header {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0;
}

.preview>section>div>header h2 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-end;
}

.preview>section>div>header h2 small {
  padding-left: 20px;
  font-weight: normal;
  color: #666;
}

.preview>section>div>header p {
  position: absolute;
  right: 50px;
}

@media (max-width: 690px) {
  .preview>section>div>header p {
    right: 0;
    top: 110px;
    line-height: 1.3;
  }
}

.preview>section>div>header button {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 40px;
  height: 40px;
  background: url("../images/icon/iconPrint.svg") no-repeat center;
}

@media (min-width: 1025px) {
  .preview>section>div>header {
    padding-top: 100px;
  }
}

@media (max-width: 1024px) {
  .preview>section>div>header {
    padding-top: 58px;
  }
}

body.print {
  margin: 50px;
}

@media print {
  body.print {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 10mm;
  }
}

body.print .printWrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

body.print table {
  width: 100%;
}

body.print .tbPrint,
body.print .introduce {
  border: 1px solid #333;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

body.print .tbPrint+.tbPrint,
body.print .tbPrint+.introduce,
body.print .introduce+.tbPrint,
body.print .introduce+.introduce {
  margin-top: 15px;
}

body.print .tbPrint tr>*,
body.print .introduce tr>* {
  padding: 3px;
  border-left: 1px solid #777;
  vertical-align: middle;
}

body.print .tbPrint dt,
body.print .tbPrint dd,
body.print .introduce dt,
body.print .introduce dd {
  padding: 6px;
}

body.print .tbPrint tr+tr>*,
body.print .tbPrint thead+tbody tr:first-child>*,
body.print .tbPrint *+dd,
body.print .tbPrint *+dt,
body.print .introduce tr+tr>*,
body.print .introduce thead+tbody tr:first-child>*,
body.print .introduce *+dd,
body.print .introduce *+dt {
  border-top: 1px solid #777;
}

body.print .tbPrint thead+tbody td,
body.print .introduce thead+tbody td {
  text-align: center;
}

body.print .tbPrint th,
body.print .tbPrint dt,
body.print .introduce th,
body.print .introduce dt {
  background: #eee;
}

body.print .tbPrint th,
body.print .introduce th {
  text-align: center;
}

body.print .tbPrint dt,
body.print .introduce dt {
  padding: 15px;
  font-size: 13px;
  font-weight: 600;
}

body.print .tbPrint dd,
body.print .introduce dd {
  padding: 6px 15px;
}

body.print .tbPrint dd,
body.print .introduce dd {
  min-height: 326px;
  line-height: 1.5;
  color: #666;
  width: 100%;
}

@media print {

  body.print .tbPrint dd,
  body.print .introduce dd {
    height: 113.5mm;
  }
}

body.print .printTitle {
  margin-top: 5px;
  margin-bottom: 2px;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-weight: 500;
}

@media print {
  body.print .printTitle.pagebreak {
    margin-top: 0;
  }
}

body.print .blockTitle {
  margin-bottom: 20px;
  border: 1px solid #777;
  font-size: 20px;
  font-weight: 500;
  line-height: 50px;
  text-align: center;
}

body.print img {
  display: inline-block;
}

body.print .photo {
  width: 120px;
  border: 1px solid #777;
  vertical-align: middle;
}

body.print .photo img {
  display: block;
  width: 100%;
}

body.print .basic {
  padding-left: 20px;
  vertical-align: top;
}

body.print .basic .logo {
  border: 1px solid #777;
  text-align: center;
}

body.print .basic .logo td {
  vertical-align: middle;
  height: 50px;
}

body.print .basic .logo td:first-child {
  width: 250px;
}

body.print .basic .logo td+td {
  border-left: 1px solid #777;
  font-size: 20px;
  font-weight: 500;
}

body.print .basic .basicInfo>div {
  margin-top: 20px;
  width: calc(50% - 10px);
}

body.print .basic .basicInfo>div+div {
  margin-left: 20px;
}

body.print .career {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: stretch;
  align-items: stretch;
  margin-top: 100px;
  margin-bottom: 100px;
}

@media print {
  body.print .career {
    margin-top: 0;
    margin-bottom: 0;
    min-height: 277mm;
  }
}

body.print .career .tbPrint+.blockTitle {
  margin-top: 30px;
  margin-bottom: 0;
}

body.print .career .con {
  flex-grow: 1;
  min-height: 200px;
  padding: 6px;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

.error404 {
  min-height: calc(100vh + 0px);
  min-height: calc(var(--vh, 1vh) * 100 + 0px);
}

.error404 .h1 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  .error404 .h1 {
    height: 90px;
    padding-top: 30px;
  }
}

@media (max-width: 1024px) {
  .error404 .h1 {
    height: 120px;
    padding-top: 20px;
  }
}

@media (min-width: 1025px) {
  .error404 .h1 img:not(.case):not(.case2):not(.case3) {
    width: 162px;
  }
}

@media (max-width: 1024px) {
  .error404 .h1 img:not(.case):not(.case2):not(.case3) {
    width: 105px;
  }
}

@media (min-width: 1025px) {
  .error404 .h1 img.case {
    width: 26px;
  }
}

@media (max-width: 1024px) {
  .error404 .h1 img.case {
    width: 17px;
  }
}

.error404 .h1 img.case2 {
  width: 57px;
}

@media (min-width: 1025px) {
  .error404 .h1 img.case3 {
    width: 122px;
  }
}

@media (max-width: 1024px) {
  .error404 .h1 img.case3 {
    width: 90px;
  }
}

@media (min-width: 1025px) {
  .error404.type01 {
    background: url("../images/common/lineError.svg") no-repeat center;
  }
}

.error404.type01 section::before {
  background: url("../images/common/imgError.svg") no-repeat center;
}

.error404.type02 section::before {
  background: url("../images/common/imgErrorSlp.svg") no-repeat center;
}

.error404.type03 section::before {
  background: url("../images/common/imgErrorGwell.svg") no-repeat center;
}

.error404 section {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

@media (min-width: 1025px) {
  .error404 section {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - 90px);
    min-height: calc(var(--vh, 1vh) * 100 - 90px);
    padding-bottom: 90px;
  }
}

@media (max-width: 1024px) {
  .error404 section {
    padding-bottom: 210px;
  }
}

.error404 section::before {
  position: absolute;
  content: "";
  margin: auto;
}

@media (min-width: 1025px) {
  .error404 section::before {
    top: 190px;
    right: 0;
    bottom: 0;
    width: 461px;
    height: 159px;
  }
}

@media (max-width: 1024px) {
  .error404 section::before {
    left: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    height: 110px;
    background-size: 320px !important;
  }
}

@media (min-width: 1025px) {
  .error404 section h2 {
    padding-bottom: 52px;
  }
}

@media (max-width: 1024px) {
  .error404 section h2 {
    padding-bottom: 28px;
  }
}

.error404 section a {
  display: inline-block;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  text-align: center;
  width: 145px;
  height: 44px;
  border: 1px solid #c8c8c8;
  border-radius: 22px;
  line-height: 42px;
  color: #666;
  /*&.case {
    @include btnSlp2;
  }*/
}

@media (min-width: 1025px) {
  .error404 section a {
    margin-top: 28px;
  }
}

@media (max-width: 1024px) {
  .error404 section a {
    margin-top: 23px;
  }
}

.error404 section a:hover,
.error404 section a:focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.reservation .tab,
#contents.faq .tab,
#contents.info section.faq .tab,
#contents.salesList .tab {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  white-space: nowrap;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#contents.reservation .tab>*,
#contents.faq .tab>*,
#contents.info section.faq .tab>*,
#contents.salesList .tab>* {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  min-width: 110px;
  padding: 0 33px;
  border-radius: 22px;
}

@media (min-width: 1025px) {

  #contents.reservation .tab>*,
  #contents.faq .tab>*,
  #contents.info section.faq .tab>*,
  #contents.salesList .tab>* {
    height: 44px;
  }
}

@media (max-width: 1024px) {

  #contents.reservation .tab>*,
  #contents.faq .tab>*,
  #contents.info section.faq .tab>*,
  #contents.salesList .tab>* {
    height: 40px;
  }
}

#contents.reservation .tab>*:not(.active),
#contents.faq .tab>*:not(.active),
#contents.info section.faq .tab>*:not(.active),
#contents.salesList .tab>*:not(.active) {
  border: 1px solid #E1E1E1;
  color: #212121;
}

#contents.reservation .tab>*:not(.active):hover,
#contents.faq .tab>*:not(.active):hover,
#contents.info section.faq .tab>*:not(.active):hover,
#contents.salesList .tab>*:not(.active):hover {
  border-color: #999;
}

#contents.reservation .tab>*.active,
#contents.faq .tab>*.active,
#contents.info section.faq .tab>*.active,
#contents.salesList .tab>*.active {
  background: #46296E;
  color: #fff;
}

#contents.reservation .tab>*+*,
#contents.faq .tab>*+*,
#contents.info section.faq .tab>*+*,
#contents.salesList .tab>*+* {
  margin-left: 10px;
}

#details .tab {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #details .tab {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

@media (max-width: 1024px) {
  #details .opened.tab button.active::after {
    display: none;
  }

  #details .opened.tab button:not(.active) {
    display: unset;
  }
}

@media (min-width: 1025px) {
  #details .tab button {
    flex-basis: 100%;
    height: 60px;
  }
}

@media (max-width: 1024px) {
  #details .tab button {
    margin-top: -1px;
    width: 100%;
    height: 44px;
  }
}

#details .tab button.active {
  position: relative;
  background: #37234D;
  font-weight: 500;
  color: #fff;
}

@media (max-width: 1024px) {
  #details .tab button.active::after {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 5px;
    margin: auto;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-width: 0 0 2px 2px;
    border-color: #fff;
    border-style: solid;
    transform: rotate(-45deg);
  }
}

#details .tab button:not(.active) {
  border-top: 1px solid #E1E1E1;
  border-bottom: 1px solid #E1E1E1;
}

@media (min-width: 1025px) {
  #details .tab button:not(.active) {
    border-left: 1px solid #E1E1E1;
  }

  #details .tab button:not(.active):last-child {
    border-right: 1px solid #E1E1E1;
  }
}

@media (max-width: 1024px) {
  #details .tab button:not(.active) {
    display: none;
  }
}

#contents.cs .scrollTab {
  z-index: 8;
}

@media (max-width: 1024px) {
  #contents.cs .scrollTab {
    position: sticky;
    top: 0;
    margin-top: 60px;
    height: 50px;
  }
}

@media (min-width: 1025px) {
  #contents.cs .scrollTab:not(.case) {
    position: sticky;
    top: 0;
    margin-top: 100px;
    height: 60px;
  }

  #contents.cs .scrollTab:not(.case)>div {
    position: absolute;
    width: 100%;
    background: #F5F5F5;
    overflow: hidden;
    height: 60px;
  }

  #contents.cs .case.scrollTab {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #contents.cs .case.scrollTab button:not(.active) {
    color: #B7B7B7;
  }

  #contents.cs .case.scrollTab:not(.twoStage) button+button {
    margin-left: 22px !important;
  }

  #contents.cs .case.twoStage.scrollTab {
    width: 300px;
  }

  #contents.cs .case.twoStage.scrollTab button.active::before {
    display: none;
  }

  #contents.cs .case.twoStage.scrollTab button+button {
    margin-left: unset;
  }

  #contents.cs .case.twoStage.scrollTab button:nth-of-type(2) {
    margin-left: 34px;
  }

  #contents.cs .case.twoStage.scrollTab button:nth-of-type(4) {
    margin-left: 76px;
  }

  #contents.cs .case.twoStage.scrollTab button+button+button {
    margin-top: 12px;
  }
}

#contents.cs .scrollTab>div {
  transition: max-height 0.3s;
}

@media (max-width: 1024px) {
  #contents.cs .scrollTab>div {
    position: absolute;
    width: 100%;
    background: #F5F5F5;
    overflow: hidden;
    height: 50px;
    max-height: 50px;
  }
}

@media (min-width: 641px) {
  #contents.cs .scrollTab>div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 640px) {
  #contents.cs .scrollTab>div {
    padding: 12px;
    cursor: pointer;
  }

  #contents.cs .scrollTab>div.opened {
    height: unset;
    max-height: 250px;
  }

  #contents.cs .scrollTab>div.opened button::after {
    display: none !important;
  }

  #contents.cs .scrollTab>div:not(.opened) button {
    margin-top: unset !important;
    pointer-events: none;
  }

  #contents.cs .scrollTab>div:not(.opened) button:not(.active) {
    display: none;
  }
}

#contents.cs .scrollTab button {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  color: #666;
}

@media (min-width: 641px) {
  #contents.cs .scrollTab button {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
}

@media (max-width: 640px) {
  #contents.cs .scrollTab button {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
}

#contents.cs .scrollTab button.active {
  font-weight: 700;
  color: #46296E;
}

@media (min-width: 641px) {
  #contents.cs .scrollTab button.active::before {
    content: "";
    margin-right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2E2839;
  }
}

@media (max-width: 640px) {
  #contents.cs .scrollTab button.active::after {
    margin-left: 14px;
    margin-bottom: 6px;
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    border-width: 0 0 2px 2px;
    border-color: #000;
    border-style: solid;
    transform: rotate(-45deg);
  }
}

@media (min-width: 641px) {
  #contents.cs .scrollTab button+button {
    margin-left: 44px;
  }
}

@media (max-width: 640px) {
  #contents.cs .scrollTab button+button {
    margin-top: 12px;
  }
}

#contents.salesList .calendar {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

#contents.salesList .calendar header {
  position: relative;
  width: 100%;
}

@media (min-width: 1025px) {
  #contents.salesList .calendar header {
    padding-bottom: 15px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .calendar header {
    padding-bottom: 20px;
  }
}

#contents.salesList .calendar header .h1 {
  text-align: center;
}

@media (min-width: 1025px) {
  #contents.salesList .calendar header .h1 {
    font-size: 36px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .calendar header .h1 {
    font-size: 34px;
  }
}

#contents.salesList .calendar header button {
  position: absolute;
  top: 0;
  min-width: 30px;
  height: 30px;
  color: #999;
}

@media (max-width: 1024px) {
  #contents.salesList .calendar header button {
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
  }
}

#contents.salesList .calendar header button::before {
  content: "";
  position: absolute;
  top: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #c8c8c8;
  border-radius: 50%;
}

#contents.salesList .calendar header button::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 2px 2px;
  border-color: #666;
  border-style: solid;
  transform: rotate(45deg);
}

#contents.salesList .calendar header button:hover {
  color: #212121;
}

#contents.salesList .calendar header button:hover::before {
  border-color: #46296E;
}

#contents.salesList .calendar header button.prev::before {
  left: 0;
}

#contents.salesList .calendar header button.prev::after {
  left: 12px;
}

@media (min-width: 1025px) {
  #contents.salesList .calendar header button.prev {
    left: 30px;
    padding-left: 50px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .calendar header button.prev {
    left: 0;
  }
}

#contents.salesList .calendar header button.next::before {
  right: 0;
}

#contents.salesList .calendar header button.next::after {
  right: 12px;
  transform: rotate(-135deg);
}

@media (min-width: 1025px) {
  #contents.salesList .calendar header button.next {
    right: 30px;
    padding-right: 50px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .calendar header button.next {
    right: 0;
  }
}

#contents.salesList .calendar section {
  margin-top: -1px;
  border-top: 1px solid #E1E1E1;
  border-bottom: 1px solid #E1E1E1;
  word-break: keep-all;
}

@media (min-width: 1025px) {
  #contents.salesList .calendar section {
    width: 33.3333333333%;
    min-height: 290px;
    padding: 50px 25px 40px 40px;
  }

  #contents.salesList .calendar section:not(:nth-of-type(3n-2)) {
    border-left: 1px solid #E1E1E1;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .calendar section {
    width: 50%;
    min-height: 120px;
    padding: 30px 20px 20px;
  }

  #contents.salesList .calendar section:nth-of-type(even) {
    border-left: 1px solid #E1E1E1;
  }
}

@media (max-width: 640px) {
  #contents.salesList .calendar section {
    width: 100%;
    border-left: 0 !important;
  }
}

#contents.salesList .calendar section.noProject {
  background: #f9f9f9;
}

#contents.salesList .calendar section.noProject * {
  color: #999 !important;
}

#contents.salesList .calendar section .h1 {
  color: #37234D;
}

@media (min-width: 1025px) {
  #contents.salesList .calendar section .h1 {
    margin-bottom: 30px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .calendar section .h1 {
    margin-bottom: 20px;
  }
}

#contents.salesList .calendar section .h1 span {
  font-weight: 400;
}

@media (min-width: 1025px) {
  #contents.salesList .calendar section .h1 span {
    display: inline-block;
    margin-left: 14px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .calendar section .h1 span {
    display: block;
  }
}

#contents.salesList .calendar section a {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

#contents.salesList .calendar section a+a {
  margin-top: 10px;
}

#contents.salesList .calendar section a em {
  width: 80px;
  height: 30px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  text-align: center;
}

#contents.salesList .calendar section a em.case1 {
  background: #261E33;
  line-height: 30px;
  color: #fff;
}

#contents.salesList .calendar section a em.case2 {
  border: 1px solid rgba(38, 30, 51, 0.6);
  line-height: 28px;
  color: #261E33;
}

#contents.salesList .calendar section a p {
  margin-left: 15px;
  max-width: calc(100% - 95px);
  font-weight: 700;
  color: #212121;
}

#contents.salesList .movein.calendar section em.case1+p {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

#contents.salesList .movein.calendar section em.case1+p::after {
  content: "";
  margin-left: 10px;
  width: 22px;
  height: 19px;
  background: url("../images/icon/iconMovein.svg") no-repeat center;
}

.article#details>header .utility button,
#details>header .container>div .share button {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.article#details>header .utility button.download,
#details>header .container>div .share button.download {
  background-image: url("../images/icon/iconDownload.svg");
}

.article#details>header .utility button.print,
#details>header .container>div .share button.print {
  background-image: url("../images/icon/iconPrint.svg");
}

.article#details>header .utility button.naverBlog,
#details>header .container>div .share button.naverBlog {
  background-image: url("../images/icon/iconShareBlog.svg");
}

.article#details>header .utility button.kakaotalk,
#details>header .container>div .share button.kakaotalk {
  background-image: url("../images/icon/iconShareKakaotalk.svg");
}

.article#details>header .utility button.twitter,
#details>header .container>div .share button.twitter {
  background-image: url("../images/icon/iconShareTwiter.svg");
}

.article#details>header .utility button.facebook,
#details>header .container>div .share button.facebook {
  background-image: url("../images/icon/iconShareFacebook.svg");
}

.article#details>header .utility button.url,
#details>header .container>div .share button.url {
  background-image: url("../images/icon/iconShareUrl.svg");
}

@media (max-width: 1024px) {

  .article#details>header .utility button.print,
  #details>header .container>div .share button.print {
    display: none;
  }
}

@media (min-width: 1025px) {

  .article#details>header .utility button,
  #details>header .container>div .share button {
    width: 36px;
    height: 36px;
  }

  .article#details>header .utility button+button,
  #details>header .container>div .share button+button {
    margin-left: 20px;
  }
}

@media (max-width: 1024px) {

  .article#details>header .utility button,
  #details>header .container>div .share button {
    width: 24px;
    height: 24px;
  }

  .article#details>header .utility button+button,
  #details>header .container>div .share button+button {
    margin-left: 15px;
  }
}

#details>header .container>div .share {
  z-index: 1;
  position: absolute;
  max-width: 0;
  padding: 25px 10px 10px;
  overflow: hidden;
  transition: max-width 0.3s;
}

#details>header .container>div .share>div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  opacity: 0;
  position: relative;
  padding: 20px;
  -ms-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
  -o-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
  background: #fff;
}

#details>header .container>div .share>div::before {
  content: "";
  position: absolute;
  top: -31px;
  display: block;
  -moz-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  -ms-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  -o-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 8px;
  border-color: transparent transparent #fff transparent;
}

#details>header .container>div button.active+.share {
  max-width: 420px;
}

#details>header .container>div button.active+.share>div {
  opacity: 1;
}

@media (max-width: 1024px) {
  #details>header .container>div .share .print {
    display: none;
  }
}

.article#details .info>ul,
.article#details .info>div {
  border: 1px solid #3d3a89;
  border-radius: 8px;
  background: #f9f9f9;
}

.article#details .info p {
  font-weight: 700;
  word-break: keep-all;
}

.article#details .info>ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  border: 1px solid #3d3a89;
}

.article#details .info>ul li {
  position: relative;
  width: 50%;
}

.article#details .info>ul li+li {
  border-left: 2px dashed rgba(102, 102, 102, 0.5);
}

.article#details .info>ul li a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
}

.article#details .info>ul li a::before,
.article#details .info>ul li a::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

.article#details .info>ul li a:not(:disabled):hover,
.article#details .info>ul li a:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

.article#details .info>ul li a:not(:disabled):hover::before,
.article#details .info>ul li a:not(:disabled):hover::after,
.article#details .info>ul li a:not(:disabled):focus::before,
.article#details .info>ul li a:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  .article#details .info>ul li a {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  .article#details .info>ul li a::before {
    margin-right: 10px;
  }

  .article#details .info>ul li a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  .article#details .info>ul li a {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  .article#details .info>ul li a::before {
    margin-right: 14px;
  }

  .article#details .info>ul li a::after {
    margin-left: 18px;
  }
}

@media (min-width: 769px) {
  .article#details .info>ul li.tel a {
    display: none;
  }
}

.article#details .info>ul li small {
  display: block;
  margin-top: 1em;
}

.article#details .info>ul li img {
  position: absolute;
  top: 5px;
  display: block;
}

.article#details .info>ul li span {
  display: block;
  color: #212121;
}

.article#details .info>ul li span em {
  display: inline-block;
  padding-right: 10px;
  color: #46296E;
}

.article#details .info>div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.article#details .info>div>div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding-right: 40px;
}

.article#details .info>div>dl {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}

.article#details .info>div>dl dt {
  color: #46296E;
}

.article#details .info>div>dl dt:not(:last-of-type) {
  border-right: 1px solid #c8c8c8;
}

.article#details .info>div>dl dd {
  position: absolute;
  bottom: 0;
  color: #212121;
}

@media (min-width: 1025px) {
  .article#details .info {
    padding-top: 130px;
  }

  .article#details .info>ul,
  .article#details .info>div {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .article#details .info>ul li {
    min-height: 103px;
    padding-right: 30px;
    padding-left: 215px;
  }

  .article#details .info>ul li a {
    margin-top: 25px;
  }

  .article#details .info>ul li img {
    left: 65px;
    width: 100px;
    height: 100px;
  }

  .article#details .info>ul li span {
    margin-top: 20px;
  }

  .article#details .info>div {
    padding-left: 60px;
    padding-right: 60px;
  }

  .article#details .info>div>div img {
    width: 100px;
    height: 100px;
  }

  .article#details .info>div>div p {
    margin-left: 50px;
  }

  .article#details .info>div>dl {
    height: 60px;
  }

  .article#details .info>div>dl dt {
    height: 60px;
  }

  .article#details .info>div>dl dt:not(:last-of-type) {
    margin-right: 35px;
    width: 145px;
    border-right: 1px solid #c8c8c8;
  }

  .article#details .info>div>dl dt:not(:last-of-type).caseWide,
  .article#details .info>div>dl dt:not(:last-of-type).caseWide+dd {
    width: 180px;
  }

  .article#details .info>div>dl dt:not(:last-of-type).caseWide+dd+dt+dd {
    left: 215px !important;
  }

  .article#details .info>div>dl dt:last-of-type {
    width: 110px;
  }

  .article#details .info>div>dl dd:nth-of-type(1) {
    left: 0px;
  }

  .article#details .info>div>dl dd:nth-of-type(2) {
    left: 180px;
  }

  .article#details .info>div>dl dd:nth-of-type(3) {
    left: 360px;
  }
}

@media (max-width: 1024px) {
  .article#details .info {
    padding-top: 50px;
  }

  .article#details .info>ul,
  .article#details .info>div {
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .article#details .info>ul li {
    padding-left: 140px;
    padding-right: 20px;
    background-size: 80px auto;
    background-position: 40px center;
  }

  .article#details .info>ul li a {
    margin-top: 12px;
  }

  .article#details .info>ul li img {
    left: 40px;
    width: 70px;
    height: 70px;
  }

  .article#details .info>ul li span {
    margin-top: 20px;
  }

  .article#details .info>div {
    padding-left: 40px;
    padding-right: 40px;
  }

  .article#details .info>div>div img {
    width: 70px;
    height: 70px;
  }

  .article#details .info>div>div p {
    margin-left: 30px;
  }

  .article#details .info>div>dl {
    height: 50px;
  }

  .article#details .info>div>dl dt {
    height: 50px;
  }

  .article#details .info>div>dl dt:not(:last-of-type) {
    margin-right: 30px;
    width: 125px;
  }

  .article#details .info>div>dl dt.caseWide,
  .article#details .info>div>dl dt.caseWide+dd {
    width: 155px;
  }

  .article#details .info>div>dl dt.caseWide+dd+dt+dd {
    left: 185px !important;
  }

  .article#details .info>div>dl dt:last-of-type {
    width: 95px;
  }

  .article#details .info>div>dl dd:nth-of-type(1) {
    left: 0px;
  }

  .article#details .info>div>dl dd:nth-of-type(2) {
    left: 155px;
  }

  .article#details .info>div>dl dd:nth-of-type(3) {
    left: 310px;
  }
}

@media (max-width: 1024px) and (max-width: 480px) {
  .article#details .info>ul li {
    padding-left: 0 !important;
    background-image: none !important;
  }

  .article#details .info>ul li img {
    display: none;
  }
}

@media (max-width: 1024px) and (max-width: 768px) {
  .article#details .info>ul {
    padding: 0 30px 5px;
    border-radius: 11px;
  }

  .article#details .info>ul li {
    width: 100%;
    padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 95px;
    padding-right: 0;
    border-left: 0 !important;
  }

  .article#details .info>ul li+li {
    border-top: 2px dashed rgba(102, 102, 102, 0.5);
  }

  .article#details .info>ul li img {
    top: 35px;
    left: 0;
  }

  .article#details .info>ul li>span {
    display: none;
    margin-top: 0;
  }

  .article#details .info>ul li>span em {
    display: none;
  }
}

@media (max-width: 1024px) and (max-width: 880px) {
  .article#details .info>div {
    flex-wrap: wrap;
  }

  .article#details .info>div>div {
    padding-right: 0;
  }

  .article#details .info>div>dl {
    justify-content: space-between;
    margin-top: 30px;
    width: 100%;
  }

  .article#details .info>div>dl dt:not(:last-of-type) {
    width: calc(33.3333333333% + 30px);
  }

  .article#details .info>div>dl dt:last-of-type {
    width: 33.3333333333%;
  }

  .article#details .info>div>dl dd:nth-of-type(1) {
    left: calc((33.3333333333% + 18px) * 1 - (33.3333333333% + 18px));
  }

  .article#details .info>div>dl dd:nth-of-type(2) {
    left: calc((33.3333333333% + 18px) * 2 - (33.3333333333% + 18px));
  }

  .article#details .info>div>dl dd:nth-of-type(3) {
    left: calc((33.3333333333% + 18px) * 3 - (33.3333333333% + 18px));
  }

  .article#details .info>div>dl.case dt,
  .article#details .info>div>dl.case dd {
    width: 50% !important;
  }

  .article#details .info>div>dl.case dd:nth-of-type(2),
  .article#details .info>div>dl.case dt.caseWide+dd+dt+dd {
    left: calc(50% + 15px) !important;
  }
}

@media (max-width: 1024px) and (max-width: 880px) and (max-width: 560px) {
  .article#details .info>div>dl {
    display: block;
    height: unset;
  }

  .article#details .info>div>dl dt {
    float: left;
    margin-right: 0 !important;
    width: 120px !important;
    height: unset;
    border-right: 0 !important;
  }

  .article#details .info>div>dl dt.caseWide,
  .article#details .info>div>dl dt.caseWide+dd+dt {
    width: 60% !important;
  }

  .article#details .info>div>dl dt.caseWide~dd {
    width: 40% !important;
  }

  .article#details .info>div>dl dd {
    position: static;
    float: right;
    width: calc(100% - 120px);
    text-align: right;
  }

  .article#details .info>div>dl dd:not(:first-of-type),
  .article#details .info>div>dl dt:not(:first-of-type) {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #c8c8c8;
  }
}

#details>header {
  position: relative;
}

#details>header .vi {
  position: relative;
}

#details>header .vi .img {
  position: relative;
  overflow: hidden;
}

#details>header .vi .img img {
  position: absolute;
  top: 0;
}

@media (min-width: 1025px) and (min-width: 1601px) {
  #details>header .vi .img {
    height: 0;
    padding-bottom: 38.125%;
  }

  #details>header .vi .img img {
    left: 0;
    width: 100%;
  }
}

@media (min-width: 1025px) and (max-width: 1600px) {
  #details>header .vi .img {
    height: 610px;
  }

  #details>header .vi .img img {
    left: 50%;
    margin-left: -800px;
    width: 1600px;
  }
}

@media (max-width: 1024px) {
  #details>header .vi .img {
    height: 390px;
  }

  #details>header .vi .img img {
    position: absolute;
    left: 50%;
    margin-left: -512px;
    width: 1024px;
  }
}

@media (max-width: 640px) {
  #details>header .vi .img {
    height: 360px;
  }

  #details>header .vi .img img {
    margin-left: -473px;
    width: 946px;
  }
}

#details>header .vi .swiper-pagination {
  bottom: 20px;
}

#details>header .vi .swiper-pagination>span {
  width: 10px;
  height: 10px;
}

#details>header .vi .swiper-pagination>span:not(.swiper-pagination-bullet-active) {
  background: rgba(255, 255, 255, 0.5);
}

#details>header .vi .swiper-pagination .swiper-pagination-bullet-active {
  background: #fff;
}

#details>header .vi .buttons {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#details>header .vi .buttons>button {
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

@media (min-width: 1025px) {
  #details>header .vi .buttons>button {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 1024px) {
  #details>header .vi .buttons>button {
    width: 30px;
    height: 30px;
  }
}

#details>header .vi .buttons>button.btnPrev {
  left: 20px;
}

#details>header .vi .buttons>button.btnNext {
  right: 20px;
}

#details>header .vi .buttons>button.btnNext::after {
  transform: rotate(-135deg);
}

#details>header .vi .buttons>button::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 2px 2px;
  border-color: #fff;
  border-style: solid;
  transform: rotate(45deg);
}

#details>header .vi .buttons>button:disabled {
  display: none;
}

#details>header .close {
  position: absolute;
  z-index: 2;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border-radius: 50%;
  background: #46296E;
}

@media (min-width: 1025px) {
  #details>header .close {
    top: 100px;
    right: 107px;
    width: 48px;
    height: 48px;
  }

  #details>header .close::before,
  #details>header .close::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 23px;
    height: 1px;
    background: #fff;
  }

  #details>header .close::before {
    transform: rotate(45deg);
  }

  #details>header .close::after {
    transform: rotate(-45deg);
  }
}

@media (max-width: 1024px) {
  #details>header .close {
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
  }

  #details>header .close::before,
  #details>header .close::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 15px;
    height: 1px;
    background: #fff;
  }

  #details>header .close::before {
    transform: rotate(45deg);
  }

  #details>header .close::after {
    transform: rotate(-45deg);
  }
}

@media (min-width: 1025px) {
  #details>header .close {
    right: 30px;
    top: 30px;
  }
}

@media (max-width: 1024px) {
  #details>header .close {
    width: 48px;
    height: 48px;
  }

  #details>header .close::before,
  #details>header .close::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 23px;
    height: 1px;
    background: #fff;
  }

  #details>header .close::before {
    transform: rotate(45deg);
  }

  #details>header .close::after {
    transform: rotate(-45deg);
  }
}

@media (min-width: 1025px) {
  #details>header .close:first-child {
    right: 60px;
    top: 50px;
  }
}

#details>header .container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #details>header .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 107px;
  }
}

@media (max-width: 1024px) {
  #details>header .container {
    padding-top: 55px;
  }
}

#details>header .container>div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
}

@media (max-width: 1024px) {
  #details>header .container>div {
    justify-content: flex-start;
    margin-top: 20px;
  }
}

#details>header .container>div>a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
  font-weight: 500;
}

#details>header .container>div>a::before,
#details>header .container>div>a::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#details>header .container>div>a:not(:disabled):hover,
#details>header .container>div>a:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#details>header .container>div>a:not(:disabled):hover::before,
#details>header .container>div>a:not(:disabled):hover::after,
#details>header .container>div>a:not(:disabled):focus::before,
#details>header .container>div>a:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #details>header .container>div>a {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  #details>header .container>div>a::before {
    margin-right: 10px;
  }

  #details>header .container>div>a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #details>header .container>div>a {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #details>header .container>div>a::before {
    margin-right: 14px;
  }

  #details>header .container>div>a::after {
    margin-left: 18px;
  }
}

#details>header .container>div>a+* {
  margin-left: 10px;
}

@media (min-width: 1025px) {
  #details>header .container>div>a.call {
    pointer-events: none;
  }
}

#details>header .container>div .openBubble {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #c8c8c8;
  border-radius: 50%;
}

#details>header .container>div .openBubble::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url("../images/icon/iconShare2On.svg") no-repeat center;
  background-size: 20px;
  -moz-filter: grayscale(100);
  -ms-filter: grayscale(100);
  -o-filter: grayscale(100);
  filter: grayscale(100);
}

#details>header .container>div .openBubble:hover,
#details>header .container>div .openBubble.active {
  border: 0;
  background: #46296E;
}

#details>header .container>div .openBubble:hover::after,
#details>header .container>div .openBubble.active::after {
  -moz-filter: brightness(100);
  -ms-filter: brightness(100);
  -o-filter: brightness(100);
  filter: brightness(100);
}

@media (min-width: 1025px) {
  #details>header .container>div .openBubble {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 1024px) {
  #details>header .container>div .openBubble {
    width: 40px;
    height: 40px;
  }
}

#details>header .container>div .share {
  right: 20px;
  top: 160px;
}

#details>header .container>div .share>div::before {
  right: 10px;
}

#details .percentage {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

@media (min-width: 1025px) {
  #details .percentage {
    margin-top: 70px;
    padding-bottom: 32px;
    margin-bottom: 10px;
  }
}

@media (max-width: 1024px) {
  #details .percentage {
    margin-top: 50px;
    padding-bottom: 26px;
  }
}

#details .percentage dt {
  margin-right: 15px;
  color: #212121;
}

#details .percentage dd {
  font-weight: 700;
  color: #37234D;
}

@media (min-width: 1025px) {
  #details .percentage dd {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
  }
}

@media (max-width: 1024px) {
  #details .percentage dd {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

#details .percentage dd div {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 10px;
  border-radius: 5px;
  background: #F1F1F1;
  overflow: hidden;
}

#details .percentage dd div span {
  position: absolute;
  left: 0;
  height: 10px;
  background: #37234D;
}

#details .overview {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 40px;
  word-break: keep-all;
}

#details .overview::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #c8c8c8;
}

#details .overview::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: #E9E9E9;
}

#details .overview dt,
#details .overview dd {
  border-bottom: 1px solid #E9E9E9;
}

@media (min-width: 1025px) {

  #details .overview dt,
  #details .overview dd {
    padding: 21px 30px;
  }
}

@media (max-width: 1024px) {

  #details .overview dt,
  #details .overview dd {
    padding: 18px 0 18px 15px;
  }
}

#details .overview dt {
  background: #f9f9f9;
  font-weight: 700;
  color: #212121;
}

@media (min-width: 1025px) {
  #details .overview dt {
    width: 195px;
  }
}

@media (max-width: 1024px) {
  #details .overview dt {
    width: 80px;
  }
}

@media (min-width: 1025px) {
  #details .overview dd {
    width: calc(50% - 195px);
  }
}

@media (max-width: 1024px) {
  #details .overview dd {
    width: calc(100% - 80px);
  }
}

#details .overview dd button {
  border: 1px solid #37234D;
}

@media (min-width: 1025px) {
  #details .overview dd button {
    width: 80px;
    height: 30px;
    border-radius: 15px;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    color: #37234D;
  }
}

@media (max-width: 1024px) {
  #details .overview dd button {
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border-radius: 50%;
    background: url("../images/icon/iconPin.svg") no-repeat center;
  }
}

#details .progressCalendar {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#details .progressCalendar .calendar {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #E1E1E1;
}

#details .progressCalendar .calendar .selectBox {
  position: relative;
}

#details .progressCalendar .calendar .selectBox>button {
  position: relative;
  font-weight: 700;
}

#details .progressCalendar .calendar .selectBox>button::after {
  position: absolute;
  top: 0;
  bottom: 10px;
  right: 0;
  margin: auto;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-width: 0 0 2px 2px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-45deg);
}

#details .progressCalendar .calendar .selectBox>div {
  z-index: 2;
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  display: none;
  width: 100%;
  background: #fff;
  -ms-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
}

#details .progressCalendar .calendar .selectBox>div button {
  width: 100%;
  padding: 0 20px;
  line-height: 2.5 !important;
  text-align: left;
}

#details .progressCalendar .calendar .selectBox>div button.selected {
  color: #46296E;
}

#details .progressCalendar .calendar .month button {
  padding: 2px 0;
}

#details .progressCalendar .calendar .month button:disabled {
  color: #c8c8c8;
}

#details .progressCalendar .calendar .month button.active {
  background: #46296E;
  color: #fff;
  border-radius: 50%;
}

#details .progressCalendar .performance {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  word-break: keep-all;
}

#details .progressCalendar .performance header {
  padding-top: 5px;
}

#details .progressCalendar .performance header p {
  font-weight: 700;
}

#details .progressCalendar .performance header>div {
  overflow: auto;
}

@media (min-width: 1025px) {
  #details .progressCalendar .performance header>div {
    max-height: 300px;
  }
}

#details .progressCalendar .performance header h2 {
  color: #212121;
}

#details .progressCalendar .performance header ul li {
  position: relative;
  padding-left: 15px;
}

#details .progressCalendar .performance header ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #46296E;
}

#details .progressCalendar .performance header ul {
  overflow-y: auto;
}

@media (min-width: 1025px) {
  #details .progressCalendar .performance header ul {
    max-height: 300px;
  }
}

@media (max-width: 1080px) {
  #details .progressCalendar .performance header ul {
    max-height: 250px;
  }
}

@media (max-width: 910px) {
  #details .progressCalendar .performance header ul {
    max-height: 220px;
  }
}

@media (max-width: 810px) {
  #details .progressCalendar .performance header ul {
    max-height: 180px;
  }
}

@media (max-width: 768px) {
  #details .progressCalendar .performance header ul {
    max-height: unset;
  }
}

#details .progressCalendar .performance .swiper {
  margin-left: unset;
}

#details .progressCalendar .performance .swiper img {
  width: 100%;
}

#details .progressCalendar .performance .pagination {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

#details .progressCalendar .performance .pagination img {
  width: 100%;
}

#details .progressCalendar .performance .pagination .swiper-pagination-bullet {
  position: relative;
  display: inline-block;
  margin: unset;
  width: unset;
  height: unset;
  border-radius: 0;
  background: none;
  opacity: 1 !important;
}

#details .progressCalendar .performance .pagination .swiper-pagination-bullet-active::before {
  content: "";
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid #46296E;
}

#details .progressCalendar .performance .pagination .timelabs button {
  position: relative;
}

#details .progressCalendar .performance .pagination .timelabs button::before {
  content: "";
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.44);
}

#details .progressCalendar .performance .pagination .timelabs button::after {
  content: "";
  width: 39px;
  height: 39px;
  border: 1px solid #fff;
  border-radius: 50%;
}

#details .progressCalendar .performance .pagination .timelabs button span::before {
  content: "";
  left: 9px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 7px;
  border-color: transparent transparent transparent #fff;
}

#details .progressCalendar .performance .exclamation {
  width: 100%;
}

@media (min-width: 1025px) {
  #details .progressCalendar .selectBox>button {
    padding-right: 50px;
    font-size: 50px;
  }

  #details .progressCalendar .month {
    width: calc(100% - 280px);
  }

  #details .progressCalendar .month>div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }

  #details .progressCalendar .month>div button {
    width: 50px;
    height: 50px;
  }

  #details .progressCalendar .performance {
    margin-top: 50px;
  }

  #details .progressCalendar .performance header {
    width: calc(50% - 60px);
  }

  #details .progressCalendar .performance header .h1 {
    margin-bottom: 20px;
  }

  #details .progressCalendar .performance header h2 {
    margin-top: 40px;
  }

  #details .progressCalendar .performance header ul,
  #details .progressCalendar .performance header div {
    margin-top: 10px;
  }

  #details .progressCalendar .performance .swiper {
    width: 50%;
  }

  #details .progressCalendar .performance .pagination {
    margin-top: 20px;
  }

  #details .progressCalendar .performance .pagination .performanceSwipeThumb {
    width: 86%;
  }

  #details .progressCalendar .performance .pagination .performanceSwipeThumb .swiper-pagination-bullet {
    margin-right: 20px;
    width: calc(25% - 20px);
  }

  #details .progressCalendar .performance .exclamation {
    margin-top: 25px;
  }
}

@media (max-width: 1024px) {
  #details .progressCalendar .calendar {
    margin-left: -20px;
    margin-right: -20px;
  }

  #details .progressCalendar .selectBox {
    margin-left: 20px;
  }

  #details .progressCalendar .selectBox>button {
    padding-right: 23px;
    font-size: 25px;
  }

  #details .progressCalendar .selectBox>button::after {
    bottom: 5px !important;
  }

  #details .progressCalendar .month {
    margin-top: 15px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  #details .progressCalendar .month::-webkit-scrollbar {
    display: none;
  }

  #details .progressCalendar .month>div {
    white-space: nowrap;
  }

  #details .progressCalendar .month>div button.active {
    width: 36px;
    height: 36px;
  }

  #details .progressCalendar .month>div button+button {
    margin-left: 25px;
  }

  #details .progressCalendar .performance {
    margin-top: 30px;
  }

  #details .progressCalendar .performance header .h1 {
    margin-bottom: 5px;
  }

  #details .progressCalendar .performance header h2 {
    margin-top: 30px;
  }

  #details .progressCalendar .performance header ul,
  #details .progressCalendar .performance header div {
    margin-top: 10px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  #details .progressCalendar .performance header {
    width: calc(50% - 30px);
  }

  #details .progressCalendar .performance .swiper {
    width: 50%;
  }

  #details .progressCalendar .performance .exclamation {
    margin-top: 20px;
  }

  #details .progressCalendar .performance .pagination {
    margin-top: 10px;
  }

  #details .progressCalendar .performance .pagination .performanceSwipeThumb {
    width: 85%;
  }

  #details .progressCalendar .performance .pagination .performanceSwipeThumb .swiper-pagination-bullet {
    margin-right: 10px;
    width: calc(25% - 10px);
  }
}

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

  #details .progressCalendar .performance header,
  #details .progressCalendar .performance .swiper {
    width: 100%;
  }

  #details .progressCalendar .performance header {
    order: 2;
    margin-top: 40px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #E1E1E1;
  }

  #details .progressCalendar .performance .swiper {
    order: 1;
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 20px + 20px);
  }

  #details .progressCalendar .performance .swiper .swiper-wrapper {
    padding-left: 10px;
  }

  #details .progressCalendar .performance .swiper .swiper-slide {
    width: calc(100% - 20px - 10px);
    max-width: 500px;
    padding-left: 10px;
  }

  #details .progressCalendar .performance .swiper .swiper-slide:last-child {
    margin-right: 30px;
  }

  #details .progressCalendar .performance .pagination {
    display: none;
  }

  #details .progressCalendar .performance .exclamation {
    order: 3;
  }
}

@media (min-width: 1025px) {
  #details .tab {
    padding-top: 80px;
  }
}

@media (max-width: 1024px) {
  #details .tab {
    padding-top: 60px;
  }
}

#details>footer {
  text-align: center;
}

@media (min-width: 1025px) {
  #details>footer {
    padding-top: 80px;
  }
}

@media (max-width: 1024px) {
  #details>footer {
    padding-top: 40px;
  }
}

#details>footer .btnList {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
}

#details>footer .btnList::before,
#details>footer .btnList::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#details>footer .btnList:not(:disabled):hover,
#details>footer .btnList:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#details>footer .btnList:not(:disabled):hover::before,
#details>footer .btnList:not(:disabled):hover::after,
#details>footer .btnList:not(:disabled):focus::before,
#details>footer .btnList:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #details>footer .btnList {
    font-size: 16px;
    min-width: 180px;
    height: 60px;
    padding: 0 20px;
    border-radius: 30px;
  }

  #details>footer .btnList::before {
    margin-right: 10px;
  }

  #details>footer .btnList::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #details>footer .btnList {
    font-size: 14px;
    min-width: 180px;
    font-size: 16px;
    height: 50px;
    padding: 0 18px;
    border-radius: 25px;
  }

  #details>footer .btnList::before {
    margin-right: 14px;
  }

  #details>footer .btnList::after {
    margin-left: 18px;
  }
}

.article#details {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

.article#details>header .h1 {
  color: #37234D;
}

@media (min-width: 1025px) {
  .article#details>header .h1 {
    padding-top: 110px;
  }
}

@media (max-width: 1024px) {
  .article#details>header .h1 {
    padding-top: 95px;
  }
}

@media (min-width: 1025px) {
  .article#details>header .close {
    right: 40px;
  }
}

@media (max-width: 1024px) {
  .article#details>header .close {
    right: 0;
  }
}

.article#details>header p {
  color: #212121;
}

@media (min-width: 1025px) {
  .article#details>header p {
    padding: 64px 0 20px;
  }
}

@media (max-width: 1024px) {
  .article#details>header p {
    padding: 33px 0 15px;
  }
}

.article#details>header .utility {
  position: relative;
}

@media (min-width: 1025px) {
  .article#details>header .utility {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 80px;
    padding-bottom: 20px;
  }
}

@media (max-width: 1024px) {
  .article#details>header .utility {
    padding-top: 40px;
    padding-bottom: 15px;
  }

  .article#details>header .utility>span {
    display: block;
    margin-bottom: 10px;
  }
}

.article#details>header .utility>div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.article#details>header .utility>span {
  color: #212121;
}

@media (max-width: 1024px) {
  .article#details>header .utility button.naverBlog {
    order: 1;
    margin-left: 0;
  }

  .article#details>header .utility button.kakaotalk {
    order: 2;
  }

  .article#details>header .utility button.twitter {
    order: 3;
  }

  .article#details>header .utility button.facebook {
    order: 4;
  }

  .article#details>header .utility button.download {
    order: 5;
    margin-left: 15px;
  }

  .article#details>header .utility button.url {
    order: 6;
  }
}

.article#details .articleDetail {
  border-top: 1px solid #E1E1E1;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
}

@media (min-width: 1025px) {
  .article#details .articleDetail {
    padding-top: 40px;
  }
}

@media (max-width: 1024px) {
  .article#details .articleDetail {
    padding-top: 40px;
  }
}

.article#details .articleDetail img {
  max-width: 100%;
}

.article#details .info {
  padding-top: 0 !important;
}

@media (min-width: 1025px) {
  .article#details .info {
    margin-top: -20px;
  }
}

@media (max-width: 1024px) {
  .article#details .info {
    margin-top: -30px;
  }
}

.article#details dl.download {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #E1E1E1;
  border-radius: 2px;
}

@media (min-width: 1025px) {
  .article#details dl.download {
    margin-top: -90px;
    padding: 30px;
  }
}

@media (max-width: 1024px) {
  .article#details dl.download {
    margin-top: -40px;
    padding: 20px;
  }
}

.article#details dl.download dt {
  font-weight: 700;
  color: #212121;
}

@media (min-width: 1025px) {
  .article#details dl.download dt {
    padding-right: 34px;
  }
}

@media (max-width: 1024px) {
  .article#details dl.download dt {
    padding-right: 20px;
  }
}

.article#details dl.download dd a {
  color: #37234D;
}

.article#details dl.download dd a:hover,
.article#details dl.download dd a:focus {
  text-decoration: underline;
}

.article#details dl.download dd span {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

@media (min-width: 1025px) {
  .article#details dl.download dd span {
    padding-left: 25px;
  }
}

@media (max-width: 1024px) {
  .article#details dl.download dd span {
    padding-left: 15px;
  }
}

@media (max-width: 480px) {
  .article#details .recommend .h1 {
    padding-left: 0;
  }
}

@media (min-width: 1025px) {

  .article#details .recommend .swiperContainer .btnPrev,
  .article#details .recommend .swiperContainer .btnNext {
    display: none;
  }

  .article#details .recommend .swiperContainer .swiper-wrapper {
    margin-left: -30px;
    width: calc(100% + 30px);
    font-size: 0;
    letter-spacing: -4px;
    display: block !important;
    transform: none !important;
  }

  .article#details .recommend .swiperContainer a {
    display: inline-block;
    vertical-align: top;
    width: calc(33.3333333333% - 30px);
    margin-left: 30px;
  }

  .article#details .recommend .swiperContainer a+a+a+a {
    margin-top: 55px;
  }

  .article#details .recommend .swiperContainer a>div {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
    height: 0;
    padding-bottom: 57.8125%;
    overflow: hidden;
  }

  .article#details .recommend .swiperContainer a>div.case {
    padding-bottom: 70.098%;
  }

  .article#details .recommend .swiperContainer a>div img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    width: 100%;
    transition: all 0.3s linear;
  }

  .article#details .recommend .swiperContainer a:hover img,
  .article#details .recommend .swiperContainer a:focus img {
    transform: scale(1.06);
  }

  .article#details .recommend .swiperContainer a em {
    margin-top: 20px;
    display: block;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
    color: #212121;
  }

  .article#details .recommend .swiperContainer a em+p {
    margin-top: 10px;
  }

  .article#details .recommend .swiperContainer a span {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
    display: inline;
    color: #666;
  }

  .article#details .recommend .swiperContainer a span+span {
    position: relative;
    margin-left: 10px;
    padding-left: 10px;
  }

  .article#details .recommend .swiperContainer a span+span::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 1px;
    height: 10px;
    background: #c8c8c8;
  }

  .article#details .recommend .swiperContainer a p {
    margin: 8px 0 2px;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
    line-height: 32px;
    word-break: keep-all;
  }
}

@media (max-width: 1024px) {
  .article#details .recommend .swiperContainer {
    position: relative;
    margin-left: -20px;
    margin-right: -20px;
  }

  .article#details .recommend .swiperContainer .swiper {
    margin-left: -10px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .article#details .recommend .swiperContainer .swiper-slide {
    margin-left: 10px;
    width: 320px;
  }

  .article#details .recommend .swiperContainer .swiper-slide div {
    overflow: hidden;
    margin-bottom: 17px;
  }

  .article#details .recommend .swiperContainer .swiper-slide div img {
    display: block;
    width: 100%;
    transition: all 0.3s;
  }

  .article#details .recommend .swiperContainer .swiper-slide em {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
    color: #212121;
  }

  .article#details .recommend .swiperContainer .swiper-slide em+p {
    margin-top: 13px;
  }

  .article#details .recommend .swiperContainer .swiper-slide p {
    margin-bottom: 4px;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
    word-break: keep-all;
  }

  .article#details .recommend .swiperContainer .swiper-slide span {
    position: relative;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
    color: #666;
  }

  .article#details .recommend .swiperContainer .swiper-slide span+span {
    position: relative;
    margin-left: 10px;
    padding-left: 10px;
  }

  .article#details .recommend .swiperContainer .swiper-slide span+span::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 1px;
    height: 10px;
    background: #c8c8c8;
  }

  .article#details .recommend .swiperContainer .swiper-slide span+p {
    margin-top: 3px;
  }

  .article#details .recommend .swiperContainer .swiper-slide:hover img,
  .article#details .recommend .swiperContainer .swiper-slide:focus img {
    transform: scale(1.06);
  }

  .article#details .recommend .swiperContainer .btnPrev {
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
    border: 1px solid #c1c1c1;
    border-radius: 50%;
    background: #fff;
    left: 10px;
  }

  .article#details .recommend .swiperContainer .btnPrev:not(:disabled):hover {
    border-color: #46296E;
  }

  .article#details .recommend .swiperContainer .btnPrev:not(:disabled):hover::after {
    border-color: #46296E !important;
  }

  .article#details .recommend .swiperContainer .btnPrev::after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .article#details .recommend .swiperContainer .btnNext {
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
    border: 1px solid #c1c1c1;
    border-radius: 50%;
    background: #fff;
    right: 10px;
  }

  .article#details .recommend .swiperContainer .btnNext:not(:disabled):hover {
    border-color: #46296E;
  }

  .article#details .recommend .swiperContainer .btnNext:not(:disabled):hover::after {
    border-color: #46296E !important;
  }

  .article#details .recommend .swiperContainer .btnNext::after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .article#details .recommend .swiperContainer .btnPrev,
  .article#details .recommend .swiperContainer .btnNext {
    z-index: 1;
    position: absolute;
    top: 80px;
  }

  .article#details .recommend .swiperContainer .btnPrev:disabled,
  .article#details .recommend .swiperContainer .btnNext:disabled {
    opacity: 0;
  }

  .article#details .recommend .swiperContainer .btnPrev.case,
  .article#details .recommend .swiperContainer .btnNext.case {
    top: 98px;
  }
}

@media (max-width: 1024px) and (min-width: 1025px) {
  .article#details .recommend .swiperContainer .btnPrev {
    width: 37px;
    height: 37px;
  }

  .article#details .recommend .swiperContainer .btnPrev::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(45deg);
    right: 8px;
  }
}

@media (max-width: 1024px) and (max-width: 1024px) {
  .article#details .recommend .swiperContainer .btnPrev {
    width: 25px;
    height: 25px;
  }

  .article#details .recommend .swiperContainer .btnPrev::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(45deg);
    right: 6px;
  }
}

@media (max-width: 1024px) and (min-width: 1025px) {
  .article#details .recommend .swiperContainer .btnNext {
    width: 37px;
    height: 37px;
  }

  .article#details .recommend .swiperContainer .btnNext::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-135deg);
    left: 8px;
  }
}

@media (max-width: 1024px) and (max-width: 1024px) {
  .article#details .recommend .swiperContainer .btnNext {
    width: 25px;
    height: 25px;
  }

  .article#details .recommend .swiperContainer .btnNext::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-135deg);
    left: 6px;
  }
}

#contents.reservation .terms>section .h1,
#contents.reservation .terms>section h2,
#contents.reservation .terms>section h3,
#contents.reservation .terms>section h4,
#contents.reservation .terms>section h5,
#contents.reservation .terms>section h6 {
  font-weight: 400;
  color: #212121;
}

#contents.reservation .terms>section .h1:not(:first-child),
#contents.reservation .terms>section h2:not(:first-child),
#contents.reservation .terms>section h3:not(:first-child),
#contents.reservation .terms>section h4:not(:first-child),
#contents.reservation .terms>section h5:not(:first-child),
#contents.reservation .terms>section h6:not(:first-child) {
  margin-top: 20px;
}

#contents.reservation .terms>section .h1+*,
#contents.reservation .terms>section h2+*,
#contents.reservation .terms>section h3+*,
#contents.reservation .terms>section h4+*,
#contents.reservation .terms>section h5+*,
#contents.reservation .terms>section h6+* {
  margin-top: 13px;
}

#contents.reservation .terms>section p+ul,
#contents.reservation .terms>section p+ol,
#contents.reservation .terms>section p+p,
#contents.reservation .terms>section .tableWrapper,
#contents.reservation .terms>section .tableWrapper+p {
  margin-top: 10px;
}

#contents.reservation .terms>section p,
#contents.reservation .terms>section ul,
#contents.reservation .terms>section ol,
#contents.reservation .terms>section .tableWrapper {
  font-weight: 300;
}

#contents.reservation .terms>section .listDash>li,
#contents.reservation .terms>section p.dash {
  position: relative;
  padding-left: 0.7em;
}

#contents.reservation .terms>section .listDash>li::before,
#contents.reservation .terms>section p.dash::before {
  content: "-";
  position: absolute;
  left: 0;
  width: 1.2em;
}

#contents.reservation .terms>section .listDot>li {
  position: relative;
  padding-left: 0.7em;
}

#contents.reservation .terms>section .listDot>li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #666;
}

#contents.reservation .terms>section .tableWrapper {
  overflow-x: auto;
}

#contents.reservation .terms>section .tableWrapper table {
  table-layout: fixed;
  width: 100%;
  border-top: 2px solid #212121;
}

#contents.reservation .terms>section .tableWrapper table th {
  background: #f6f6f6;
  font-weight: 400;
  color: #212121;
}

#contents.reservation .terms>section .tableWrapper table th,
#contents.reservation .terms>section .tableWrapper table td {
  padding: 5px 10px;
  border-bottom: 1px solid #c8c8c8;
}

#contents.reservation .terms>section .tableWrapper table th:not(:first-child),
#contents.reservation .terms>section .tableWrapper table td:not(:first-child) {
  border-left: 1px solid #c8c8c8;
}

#contents.reservation .form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

@media (min-width: 1025px) {
  #contents.reservation .form>div {
    margin-top: 35px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div {
    margin-top: 25px;
  }
}

@media (min-width: 1025px) {
  #contents.reservation .form>div.half {
    width: calc(50% - 20px);
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div.half {
    width: calc(50% - 10px);
  }
}

@media (max-width: 640px) {
  #contents.reservation .form>div.half {
    width: 100%;
  }
}

@media (min-width: 1025px) {
  #contents.reservation .form>div.half.alone {
    margin-right: 100px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div.half.alone {
    margin-right: 50px;
  }
}

@media (max-width: 640px) {
  #contents.reservation .form>div.half.alone {
    margin-right: 0;
  }
}

#contents.reservation .form>div.phone {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

#contents.reservation .form>div.phone .label {
  width: 100%;
}

#contents.reservation .form>div.phone span:not(.label) {
  text-align: center;
}

@media (min-width: 1025px) {
  #contents.reservation .form>div.phone span:not(.label) {
    width: 25px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div.phone span:not(.label) {
    width: 18px;
  }
}

@media (min-width: 1025px) {
  #contents.reservation .form>div.phone input {
    width: calc(33.3333333333% - 16.6666666667px);
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div.phone input {
    width: calc(33.3333333333% - 12px);
  }
}

#contents.reservation .form>div.caseAddr {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#contents.reservation .form>div.caseAddr .label {
  width: 100%;
}

@media (min-width: 1025px) {
  #contents.reservation .form>div.caseAddr input {
    width: calc(50% - 20px);
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div.caseAddr input {
    width: calc(50% - 10px);
  }
}

@media (max-width: 640px) {
  #contents.reservation .form>div.caseAddr input {
    width: 100%;
  }
}

@media (max-width: 640px) {
  #contents.reservation .form>div.caseAddr input+input {
    margin-top: 10px;
  }
}

#contents.reservation .form>div.caseAddr input:first-of-type {
  background: url("../images/icon/iconZoom.svg") no-repeat;
  -moz-filter: grayscale(100);
  -ms-filter: grayscale(100);
  -o-filter: grayscale(100);
  filter: grayscale(100);
}

@media (min-width: 1025px) {
  #contents.reservation .form>div.caseAddr input:first-of-type {
    background-position: right 20px center;
    background-size: 25px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div.caseAddr input:first-of-type {
    background-position: right 10px center;
  }
}

#contents.reservation .form>div.email {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

#contents.reservation .form>div.email .label {
  width: 100%;
}

@media (min-width: 1025px) {
  #contents.reservation .form>div.email input:first-of-type {
    width: calc(50% - 20px);
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div.email input:first-of-type {
    width: calc(50% - 10px);
  }
}

@media (max-width: 640px) {
  #contents.reservation .form>div.email input:first-of-type {
    width: calc(100% - 15px);
  }
}

@media (min-width: 1025px) {
  #contents.reservation .form>div.email input:last-of-type {
    width: calc(25% - 15px);
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div.email input:last-of-type {
    width: calc(25% - 8px);
  }
}

@media (max-width: 640px) {
  #contents.reservation .form>div.email input:last-of-type {
    margin-top: 10px;
    width: calc(50% - 5px);
  }
}

@media (max-width: 480px) {
  #contents.reservation .form>div.email input:last-of-type {
    width: 100%;
  }
}

#contents.reservation .form>div.email .selectBox {
  position: relative;
}

#contents.reservation .form>div.email .selectBox>button {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #707070;
  text-align: left;
  color: #666;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 30px !important;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
}

#contents.reservation .form>div.email .selectBox>button::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-45deg);
  right: 20px;
}

#contents.reservation .form>div.email .selectBox>button.placeholder {
  color: #a5a5a5;
}

#contents.reservation .form>div.email .selectBox>button.active {
  color: #46296E;
  border-color: #46296E;
}

#contents.reservation .form>div.email .selectBox>button.active::after {
  border-color: #46296E;
}

#contents.reservation .form>div.email .selectBox>div {
  z-index: 3;
  position: absolute;
  display: none;
  width: 100%;
  overflow: auto;
  background: #fff;
  -ms-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
}

#contents.reservation .form>div.email .selectBox>div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: #46296E;
  display: none;
}

#contents.reservation .form>div.email .selectBox>div button {
  width: 100%;
  line-height: 2.5 !important;
  text-align: left;
}

#contents.reservation .form>div.email .selectBox>div button.selected {
  color: #46296E;
}

@media (min-width: 1025px) {
  #contents.reservation .form>div.email .selectBox>div>button:first-child {
    margin-top: 10px;
  }

  #contents.reservation .form>div.email .selectBox>div>button:last-child {
    margin-bottom: 10px;
  }

  #contents.reservation .form>div.email .selectBox>button {
    height: 54px;
  }

  #contents.reservation .form>div.email .selectBox>button::after {
    top: 20px;
  }

  #contents.reservation .form>div.email .selectBox>button,
  #contents.reservation .form>div.email .selectBox>div button {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div.email .selectBox>div>button:first-child {
    margin-top: 5px;
  }

  #contents.reservation .form>div.email .selectBox>div>button:last-child {
    margin-bottom: 5px;
  }

  #contents.reservation .form>div.email .selectBox>button {
    height: 40px;
  }

  #contents.reservation .form>div.email .selectBox>button::after {
    top: 10px;
  }

  #contents.reservation .form>div.email .selectBox>button,
  #contents.reservation .form>div.email .selectBox>div button {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (min-width: 1025px) {
  #contents.reservation .form>div.email .selectBox {
    margin-left: 10px;
    width: calc(25% - 15px);
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div.email .selectBox {
    margin-left: 6px;
    width: calc(25% - 8px);
  }
}

@media (max-width: 640px) {
  #contents.reservation .form>div.email .selectBox {
    margin-left: 10px;
    margin-top: 10px;
    width: calc(50% - 5px);
  }
}

@media (max-width: 480px) {
  #contents.reservation .form>div.email .selectBox {
    margin-left: 0;
    width: 100%;
  }
}

#contents.reservation .form>div.email span:not(.label) {
  text-align: center;
}

@media (min-width: 1025px) {
  #contents.reservation .form>div.email span:not(.label) {
    width: 40px;
    font-size: 14px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div.email span:not(.label) {
    width: 20px;
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  #contents.reservation .form>div.email span:not(.label) {
    width: 15px;
    text-align: right;
  }
}

#contents.reservation .form>div.birthday {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

@media (max-width: 1024px) {
  #contents.reservation .form>div.birthday {
    width: 100%;
  }
}

#contents.reservation .form>div.birthday .label {
  width: 100%;
}

#contents.reservation .form>div.birthday .selectBox {
  position: relative;
  width: calc(33.3333333333% - 10px);
}

#contents.reservation .form>div.birthday .selectBox>button {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #707070;
  text-align: left;
  color: #666;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 30px !important;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
}

#contents.reservation .form>div.birthday .selectBox>button::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-45deg);
  right: 20px;
}

#contents.reservation .form>div.birthday .selectBox>button.placeholder {
  color: #a5a5a5;
}

#contents.reservation .form>div.birthday .selectBox>button.active {
  color: #46296E;
  border-color: #46296E;
}

#contents.reservation .form>div.birthday .selectBox>button.active::after {
  border-color: #46296E;
}

#contents.reservation .form>div.birthday .selectBox>div {
  z-index: 3;
  position: absolute;
  display: none;
  width: 100%;
  overflow: auto;
  background: #fff;
  -ms-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
}

#contents.reservation .form>div.birthday .selectBox>div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: #46296E;
  display: none;
}

#contents.reservation .form>div.birthday .selectBox>div button {
  width: 100%;
  line-height: 2.5 !important;
  text-align: left;
}

#contents.reservation .form>div.birthday .selectBox>div button.selected {
  color: #46296E;
}

@media (min-width: 1025px) {
  #contents.reservation .form>div.birthday .selectBox>div>button:first-child {
    margin-top: 10px;
  }

  #contents.reservation .form>div.birthday .selectBox>div>button:last-child {
    margin-bottom: 10px;
  }

  #contents.reservation .form>div.birthday .selectBox>button {
    height: 54px;
  }

  #contents.reservation .form>div.birthday .selectBox>button::after {
    top: 20px;
  }

  #contents.reservation .form>div.birthday .selectBox>button,
  #contents.reservation .form>div.birthday .selectBox>div button {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div.birthday .selectBox>div>button:first-child {
    margin-top: 5px;
  }

  #contents.reservation .form>div.birthday .selectBox>div>button:last-child {
    margin-bottom: 5px;
  }

  #contents.reservation .form>div.birthday .selectBox>button {
    height: 40px;
  }

  #contents.reservation .form>div.birthday .selectBox>button::after {
    top: 10px;
  }

  #contents.reservation .form>div.birthday .selectBox>button,
  #contents.reservation .form>div.birthday .selectBox>div button {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 640px) {
  #contents.reservation .form>div.birthday .selectBox {
    width: 100%;
  }
}

#contents.reservation .form>div.birthday .selectBox+.selectBox {
  margin-left: 15px;
}

@media (max-width: 640px) {
  #contents.reservation .form>div.birthday .selectBox+.selectBox {
    margin-left: 0;
    margin-top: 10px;
  }
}

#contents.reservation .form>div .label {
  display: block;
  margin-bottom: 10px;
}

#contents.reservation .form>div .caseRadio {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

#contents.reservation .form>div .caseRadio label {
  position: relative;
  width: calc(50% - 4px);
  cursor: pointer;
}

@media (min-width: 1025px) {
  #contents.reservation .form>div .caseRadio label {
    height: 60px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div .caseRadio label {
    height: 40px;
  }
}

#contents.reservation .form>div .caseRadio label span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 3px;
}

@media (min-width: 1025px) {
  #contents.reservation .form>div .caseRadio label span {
    padding-left: 25px;
    line-height: 60px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div .caseRadio label span {
    padding-left: 15px;
    line-height: 40px;
  }
}

#contents.reservation .form>div .caseRadio label span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  border-style: solid;
  border-radius: 50%;
}

@media (min-width: 1025px) {
  #contents.reservation .form>div .caseRadio label span::after {
    right: 25px;
    width: 18px;
    height: 18px;
    border-width: 5px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .form>div .caseRadio label span::after {
    right: 15px;
    width: 14px;
    height: 14px;
    border-width: 3px;
  }
}

#contents.reservation .form>div .caseRadio label input {
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

#contents.reservation .form>div .caseRadio label input:checked+span {
  background: #37234D;
  font-weight: 500;
  color: #fff;
}

#contents.reservation .form>div .caseRadio label input:checked+span::after {
  border-color: #fff;
}

#contents.reservation .form>div .caseRadio label input:not(:checked)+span {
  border: 1px solid #c8c8c8;
}

#contents.reservation .form>div .caseRadio label input:not(:checked)+span::after {
  border-color: #E1E1E1;
}

.bannerLink {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  .bannerLink {
    margin-top: 80px;
  }
}

@media (max-width: 1024px) {
  .bannerLink {
    margin-top: 60px;
  }
}

.bannerLink>* {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media (min-width: 1025px) {
  .bannerLink>* {
    padding: 65px 30px 53px 80px;
  }
}

@media (max-width: 1024px) {
  .bannerLink>* {
    padding: 42px 30px 40px;
  }
}

.bannerLink>*.type01 {
  background-image: url("../images/gwell/bgBanner01.jpg");
}

@media (max-width: 640px) {
  .bannerLink>*.type01 {
    background-image: url("../images/gwell/bgBanner01M.jpg");
  }
}

.bannerLink>* p {
  font-weight: 700;
  color: #fff;
}

@media (min-width: 1025px) {
  .bannerLink>* p {
    margin-bottom: 12px;
  }
}

@media (max-width: 1024px) {
  .bannerLink>* p {
    margin-bottom: 17px;
  }
}

.bannerLink>* a {
  display: inline-block;
  width: 140px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  line-height: 40px;
  text-align: center;
}

.banners,
.banner {
  position: relative;
}

@media (min-width: 1025px) {

  .banners,
  .banner {
    margin-top: 150px;
    margin-bottom: -40px;
  }
}

@media (max-width: 1024px) {

  .banners,
  .banner {
    margin-top: 80px;
    margin-bottom: -20px;
  }
}

.banners>ul,
.banner>ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

@media (min-width: 1025px) {

  .banners>ul,
  .banner>ul {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1240px;
    min-width: 315px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 1025px) {

  .banners>ul li,
  .banner>ul li {
    width: 50%;
  }
}

@media (min-width: 1025px) and (min-width: 1025px) {

  .banners>ul li:first-child,
  .banner>ul li:first-child {
    padding-right: 60px;
  }
}

@media (min-width: 1025px) and (min-width: 1025px) {

  .banners>ul li:last-child,
  .banner>ul li:last-child {
    padding-left: 50px;
  }
}

@media (min-width: 1025px) {

  .banners>ul li::before,
  .banner>ul li::before {
    width: 50% !important;
  }
}

.banners>ul li,
.banners>div,
.banner>ul li,
.banner>div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 1024px) {

  .banners>ul li,
  .banners>div,
  .banner>ul li,
  .banner>div {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1240px;
    min-width: 315px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 1025px) {

  .banners>ul li,
  .banners>div,
  .banner>ul li,
  .banner>div {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (max-width: 1024px) {

  .banners>ul li,
  .banners>div,
  .banner>ul li,
  .banner>div {
    position: relative;
    width: 100%;
    padding-top: 25px;
    padding-bottom: 25px;
  }
}

.banners>ul li::before,
.banners>div::before,
.banner>ul li::before,
.banner>div::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
}

@media (max-width: 1024px) {

  .banners>ul li::before,
  .banners>div::before,
  .banner>ul li::before,
  .banner>div::before {
    width: 100%;
  }
}

.banners>ul li:first-child::before,
.banners>div:first-child::before,
.banner>ul li:first-child::before,
.banner>div:first-child::before {
  left: 0;
}

.banners>ul li:last-child::before,
.banners>div:last-child::before,
.banner>ul li:last-child::before,
.banner>div:last-child::before {
  right: 0;
}

.banners>ul li.bg1::before,
.banners>div.bg1::before,
.banner>ul li.bg1::before,
.banner>div.bg1::before {
  background-image: url("../images/gwell/bgBanner1.jpg");
}

@media (max-width: 640px) {

  .banners>ul li.bg1::before,
  .banners>div.bg1::before,
  .banner>ul li.bg1::before,
  .banner>div.bg1::before {
    background-image: url("../images/gwell/bgBanner1M.jpg");
  }
}

.banners>ul li.bg2::before,
.banners>div.bg2::before,
.banner>ul li.bg2::before,
.banner>div.bg2::before {
  background-image: url("../images/gwell/bgBanner2.jpg");
}

@media (max-width: 640px) {

  .banners>ul li.bg2::before,
  .banners>div.bg2::before,
  .banner>ul li.bg2::before,
  .banner>div.bg2::before {
    background-image: url("../images/gwell/bgBanner2M.jpg");
  }
}

.banners>ul li p,
.banners>div p,
.banner>ul li p,
.banner>div p {
  z-index: 1;
  position: relative;
  font-weight: 300;
  word-break: keep-all;
  color: #f9f9f9;
}

@media (min-width: 1025px) {

  .banners>ul li p,
  .banners>div p,
  .banner>ul li p,
  .banner>div p {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {

  .banners>ul li p,
  .banners>div p,
  .banner>ul li p,
  .banner>div p {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (max-width: 640px) {

  .banners>ul li p,
  .banners>div p,
  .banner>ul li p,
  .banner>div p {
    width: 100%;
  }
}

.banners>ul li p.medium,
.banners>div p.medium,
.banner>ul li p.medium,
.banner>div p.medium {
  font-weight: 500;
}

@media (min-width: 1025px) {

  .banners>ul li p em,
  .banners>div p em,
  .banner>ul li p em,
  .banner>div p em {
    font-weight: 500;
  }
}

@media (max-width: 1024px) {

  .banners>ul li p em,
  .banners>div p em,
  .banner>ul li p em,
  .banner>div p em {
    font-weight: 700;
  }
}

.banners>ul li a,
.banners>div a,
.banner>ul li a,
.banner>div a {
  z-index: 1;
  position: relative;
  width: 140px;
  border: 1px solid #fff;
  border-radius: 20px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  line-height: 38px;
  text-align: center;
  color: #fff;
}

@media (min-width: 1025px) {

  .banners>ul li a,
  .banners>div a,
  .banner>ul li a,
  .banner>div a {
    margin: 20px 0;
  }
}

@media (max-width: 640px) {

  .banners>ul li a,
  .banners>div a,
  .banner>ul li a,
  .banner>div a {
    margin-top: 20px;
  }
}

.banners>ul li a:hover,
.banners>ul li a:focus,
.banners>div a:hover,
.banners>div a:focus,
.banner>ul li a:hover,
.banner>ul li a:focus,
.banner>div a:hover,
.banner>div a:focus {
  border: none;
  background: #2E2839;
  line-height: 40px;
}

.banners>div,
.banner>div {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

.guidePagination,
#contents.pr.media .collect .modeTarget .pagination,
#contents.pr.press .modeTarget .pagination,
.noticeList .pagination {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  min-width: 300px;
}

@media (min-width: 1025px) {

  .guidePagination,
  #contents.pr.media .collect .modeTarget .pagination,
  #contents.pr.press .modeTarget .pagination,
  .noticeList .pagination {
    margin-top: 80px;
  }

  .guidePagination .button,
  #contents.pr.media .collect .modeTarget .pagination .button,
  #contents.pr.press .modeTarget .pagination .button,
  .noticeList .pagination .button {
    margin: 0 7.5px;
  }

  .guidePagination button:not(.button)+button:not(.button),
  #contents.pr.media .collect .modeTarget .pagination button:not(.button)+button:not(.button),
  #contents.pr.press .modeTarget .pagination button:not(.button)+button:not(.button),
  .noticeList .pagination button:not(.button)+button:not(.button) {
    margin-left: 47px;
  }

  .guidePagination .prev,
  #contents.pr.media .collect .modeTarget .pagination .prev,
  #contents.pr.press .modeTarget .pagination .prev,
  .noticeList .pagination .prev {
    margin-right: 32px;
  }

  .guidePagination .next,
  #contents.pr.media .collect .modeTarget .pagination .next,
  #contents.pr.press .modeTarget .pagination .next,
  .noticeList .pagination .next {
    margin-left: 32px;
  }
}

@media (max-width: 1024px) {

  .guidePagination,
  #contents.pr.media .collect .modeTarget .pagination,
  #contents.pr.press .modeTarget .pagination,
  .noticeList .pagination {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }

  .guidePagination .button,
  #contents.pr.media .collect .modeTarget .pagination .button,
  #contents.pr.press .modeTarget .pagination .button,
  .noticeList .pagination .button {
    margin: 0 5px;
  }
}

@media (max-width: 1024px) {

  .guidePagination button:not(.button),
  #contents.pr.media .collect .modeTarget .pagination button:not(.button),
  #contents.pr.press .modeTarget .pagination button:not(.button),
  .noticeList .pagination button:not(.button) {
    margin: 0 5px;
  }
}

@media (max-width: 640px) {

  .guidePagination button:not(.button),
  #contents.pr.media .collect .modeTarget .pagination button:not(.button),
  #contents.pr.press .modeTarget .pagination button:not(.button),
  .noticeList .pagination button:not(.button) {
    display: none;
  }
}

.guidePagination .button,
#contents.pr.media .collect .modeTarget .pagination .button,
#contents.pr.press .modeTarget .pagination .button,
.noticeList .pagination .button {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.45;
}

.guidePagination .button.next,
#contents.pr.media .collect .modeTarget .pagination .button.next,
#contents.pr.press .modeTarget .pagination .button.next,
.noticeList .pagination .button.next,
.guidePagination .button.prev,
#contents.pr.media .collect .modeTarget .pagination .button.prev,
#contents.pr.press .modeTarget .pagination .button.prev,
.noticeList .pagination .button.prev {
  background: url("../images/icon/iconNext.svg") no-repeat center;
}

.guidePagination .button.last,
#contents.pr.media .collect .modeTarget .pagination .button.last,
#contents.pr.press .modeTarget .pagination .button.last,
.noticeList .pagination .button.last,
.guidePagination .button.first,
#contents.pr.media .collect .modeTarget .pagination .button.first,
#contents.pr.press .modeTarget .pagination .button.first,
.noticeList .pagination .button.first {
  background: url("../images/icon/iconLast.svg") no-repeat center;
}

.guidePagination .button.prev,
#contents.pr.media .collect .modeTarget .pagination .button.prev,
#contents.pr.press .modeTarget .pagination .button.prev,
.noticeList .pagination .button.prev,
.guidePagination .button.first,
#contents.pr.media .collect .modeTarget .pagination .button.first,
#contents.pr.press .modeTarget .pagination .button.first,
.noticeList .pagination .button.first {
  transform: rotate(180deg);
}

.guidePagination .button:disabled,
#contents.pr.media .collect .modeTarget .pagination .button:disabled,
#contents.pr.press .modeTarget .pagination .button:disabled,
.noticeList .pagination .button:disabled {
  opacity: 0.2;
}

.guidePagination .button:not(:disabled):hover,
#contents.pr.media .collect .modeTarget .pagination .button:not(:disabled):hover,
#contents.pr.press .modeTarget .pagination .button:not(:disabled):hover,
.noticeList .pagination .button:not(:disabled):hover,
.guidePagination .button:not(:disabled):focus,
#contents.pr.media .collect .modeTarget .pagination .button:not(:disabled):focus,
#contents.pr.press .modeTarget .pagination .button:not(:disabled):focus,
.noticeList .pagination .button:not(:disabled):focus {
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
  opacity: 1;
}

.guidePagination .current,
#contents.pr.media .collect .modeTarget .pagination .current,
#contents.pr.press .modeTarget .pagination .current,
.noticeList .pagination .current {
  font-weight: 700;
  color: #46296E;
}

.guidePagination button:not(.button):hover,
#contents.pr.media .collect .modeTarget .pagination button:not(.button):hover,
#contents.pr.press .modeTarget .pagination button:not(.button):hover,
.noticeList .pagination button:not(.button):hover,
.guidePagination button:not(.button):focus,
#contents.pr.media .collect .modeTarget .pagination button:not(.button):focus,
#contents.pr.press .modeTarget .pagination button:not(.button):focus,
.noticeList .pagination button:not(.button):focus {
  color: #46296E;
}

.noticeList {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

.noticeList>p {
  color: #212121;
}

@media (min-width: 1025px) {
  .noticeList>p {
    line-height: 50px;
  }
}

@media (max-width: 1024px) {
  .noticeList>p {
    margin-bottom: 20px;
  }
}

@media (min-width: 1025px) {
  .noticeList .search {
    position: absolute;
    right: 20px;
    top: 0;
    width: 300px;
  }
}

@media (max-width: 1024px) {
  .noticeList .search {
    position: relative;
    margin-bottom: 40px;
  }
}

.noticeList .search input {
  width: 100%;
  height: 50px;
  padding: 0 55px 0 25px;
  border: none;
  outline: none;
  border-radius: 30px;
  background: #f9f9f9;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
}

.noticeList .search button {
  position: absolute;
  right: 25px;
  top: 0;
  bottom: 0;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  margin: auto;
  background: url("../images/icon/iconZoom.svg") no-repeat center;
  -moz-filter: grayscale(100);
  -ms-filter: grayscale(100);
  -o-filter: grayscale(100);
  filter: grayscale(100);
}

.noticeList .empty {
  text-align: center;
  border-top: 1px solid #212121;
  border-bottom: 1px solid #c8c8c8;
  background: url("../images/brighten/page/imgResultNone.svg") no-repeat;
}

@media (min-width: 1025px) {
  .noticeList .empty {
    margin-top: 30px;
    padding-top: 230px;
    padding-bottom: 100px;
    background-position: center 100px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (max-width: 1024px) {
  .noticeList .empty {
    padding-top: 180px;
    padding-bottom: 50px;
    background-position: center 50px;
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

.noticeList .empty em {
  font-weight: 700;
  color: #37234D;
}

.noticeList table {
  width: 100%;
}

@media (min-width: 1025px) {
  .noticeList table {
    margin-top: 30px;
  }
}

@media (max-width: 1024px) {
  .noticeList table {
    display: block;
  }
}

@media (min-width: 1025px) {
  .noticeList table thead {
    border: 1px solid #E1E1E1;
  }
}

@media (max-width: 1024px) {
  .noticeList table thead {
    display: none;
  }
}

.noticeList table thead th {
  height: 70px;
  vertical-align: middle;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  font-weight: 500;
}

.noticeList table thead th.download,
.noticeList table thead th.date {
  width: 136px;
}

@media (max-width: 1024px) {
  .noticeList table tbody {
    display: block;
    border-top: 1px solid #212121;
  }
}

.noticeList table tbody tr {
  cursor: pointer;
}

@media (max-width: 1024px) {
  .noticeList table tbody tr {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 33px 0 28px;
    border-bottom: 1px solid #c8c8c8;
  }
}

@media (min-width: 1025px) {
  .noticeList table tbody tr:hover {
    font-weight: 700;
  }
}

.noticeList table tbody tr:hover td.title p,
.noticeList table tbody tr:hover td.date {
  color: #37234D;
}

@media (min-width: 1025px) {
  .noticeList table tbody tr td {
    height: 84px;
    vertical-align: middle;
    border-bottom: 1px solid #E1E1E1;
  }
}

@media (min-width: 1025px) {
  .noticeList table tbody tr td.title {
    padding: 0 20px;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }

  .noticeList table tbody tr td.title p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #666;
  }
}

@media (max-width: 1024px) {
  .noticeList table tbody tr td.title {
    order: 2;
    margin-top: 12px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
    font-weight: 700;
  }
}

@media (min-width: 1025px) {
  .noticeList table tbody tr td.download {
    text-align: center;
  }
}

@media (max-width: 1024px) {
  .noticeList table tbody tr td.download {
    display: none;
  }
}

.noticeList table tbody tr td.download a {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.noticeList table tbody tr td.download a::before {
  content: "";
  width: 15px;
  height: 15px;
  background: url("../images/icon/iconDownload4.svg") no-repeat center;
}

.noticeList table tbody tr td.download a:hover,
.noticeList table tbody tr td.download a:focus {
  background: #37234D;
}

.noticeList table tbody tr td.download a:hover::before,
.noticeList table tbody tr td.download a:focus::before {
  -moz-filter: grayscale(100) brightness(100);
  -ms-filter: grayscale(100) brightness(100);
  -o-filter: grayscale(100) brightness(100);
  filter: grayscale(100) brightness(100);
}

@media (min-width: 1025px) {
  .noticeList table tbody tr td.date {
    text-align: center;
  }
}

@media (max-width: 1024px) {
  .noticeList table tbody tr td.date {
    order: 1;
  }
}

#contents.salesList .list {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

#contents.salesList .list .noResult {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  color: #212121;
}

@media (min-width: 1025px) {
  #contents.salesList .list .noResult {
    height: 380px;
    border-bottom: 1px solid #c8c8c8;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .list .noResult {
    height: 200px;
  }
}

#contents.salesList .list .noResult::before {
  content: "";
  width: 100px;
  height: 100px;
  background: url("../images/gwell/imgNoresult.svg") no-repeat center;
}

#contents.salesList .list .noResult b {
  color: #46296E;
}

#contents.salesList .list li:not(.noResult) {
  position: relative;
}

@media (min-width: 1025px) {
  #contents.salesList .list li:not(.noResult) {
    margin: 0 30px;
    width: calc(33.3333333333% - 40px);
    padding-bottom: 82px;
  }

  #contents.salesList .list li:not(.noResult)+li+li+li {
    margin-top: 60px;
  }

  #contents.salesList .list li:not(.noResult):nth-of-type(3n+1) {
    margin-left: 0;
  }

  #contents.salesList .list li:not(.noResult):nth-of-type(3n) {
    margin-right: 0;
  }

  #contents.salesList .list li:not(.noResult) .buttons {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .list li:not(.noResult) {
    margin: 0 20px;
    width: calc(50% - 20px);
  }

  #contents.salesList .list li:not(.noResult)+li+li {
    margin-top: 40px;
  }

  #contents.salesList .list li:not(.noResult):nth-of-type(2n+1) {
    margin-left: 0;
  }

  #contents.salesList .list li:not(.noResult):nth-of-type(2n) {
    margin-right: 0;
  }
}

@media (max-width: 640px) {
  #contents.salesList .list li:not(.noResult) {
    margin: 0;
  }

  #contents.salesList .list li:not(.noResult)+li {
    margin-top: 40px;
  }
}

@media (max-width: 480px) {
  #contents.salesList .list li:not(.noResult) {
    width: 100%;
  }

  #contents.salesList .list li:not(.noResult)+li {
    margin-top: 40px;
  }
}

#contents.salesList .list li:not(.noResult) .img {
  position: relative;
}

#contents.salesList .list li:not(.noResult) .img a {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 70.8333%;
  pointer-events: none;
}

#contents.salesList .list li:not(.noResult) .img a span {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s;
}

#contents.salesList .list li:not(.noResult) .img a:hover span,
#contents.salesList .list li:not(.noResult) .img a:focus span {
  transform: scale(1.06);
}

#contents.salesList .list li:not(.noResult) .img em {
  position: absolute;
  bottom: -20px;
  right: 0;
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

#contents.salesList .list li:not(.noResult) .img em.case1 {
  background: #37234D;
  color: #fff;
}

#contents.salesList .list li:not(.noResult) .img em.case2 {
  background: #EAEBEB;
}

#contents.salesList .list li:not(.noResult)>span {
  display: block;
}

@media (min-width: 1025px) {
  #contents.salesList .list li:not(.noResult)>span {
    margin-top: 43px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .list li:not(.noResult)>span {
    margin-top: 30px;
  }
}

#contents.salesList .list li:not(.noResult)>p {
  margin-top: 14px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

@media (max-width: 1024px) {
  #contents.salesList .list li:not(.noResult)>p {
    margin-top: 10px;
  }
}

#contents.salesList .list li:not(.noResult)>p a {
  width: calc(100% - 35px);
  font-weight: 700;
  margin-top: 0 !important;
}

@media (min-width: 1025px) {
  #contents.salesList .list li:not(.noResult)>p a {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .list li:not(.noResult)>p a {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

#contents.salesList .list li:not(.noResult)>p .bookmark {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

#contents.salesList .list li:not(.noResult)>p .bookmark:not(.on) {
  background-image: url("../images/icon/iconHeart.svg");
}

#contents.salesList .list li:not(.noResult)>p .bookmark.on {
  background-image: url("../images/icon/iconHeartOn.svg");
}

@media (min-width: 1025px) {
  #contents.salesList .list li:not(.noResult)>p .bookmark {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .list li:not(.noResult)>p .bookmark {
    width: 30px;
    height: 30px;
  }
}

#contents.salesList .list li:not(.noResult) .title {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
}

@media (min-width: 1025px) {
  #contents.salesList .list li:not(.noResult) .title {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .list li:not(.noResult) .title {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

#contents.salesList .list li:not(.noResult)>dl {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 10px;
}

@media (min-width: 1025px) {

  #contents.salesList .list li:not(.noResult)>dl dt,
  #contents.salesList .list li:not(.noResult)>dl dd {
    padding-top: 10px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .list li:not(.noResult)>dl dt,
  #contents.salesList .list li:not(.noResult)>dl dd {
    padding-top: 8px;
  }
}

#contents.salesList .list li:not(.noResult)>dl dt {
  color: #212121;
}

@media (min-width: 1025px) {
  #contents.salesList .list li:not(.noResult)>dl dt {
    width: 49px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .list li:not(.noResult)>dl dt {
    width: 45px;
  }
}

@media (min-width: 1025px) {
  #contents.salesList .list li:not(.noResult)>dl dd {
    width: calc(100% - 49px);
  }
}

@media (max-width: 1024px) {
  #contents.salesList .list li:not(.noResult)>dl dd {
    width: calc(100% - 45px);
  }
}

@media (min-width: 1025px) {
  #contents.salesList .list li:not(.noResult)>dl dd .tel {
    pointer-events: none;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .list li:not(.noResult)>dl dd .tel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    font-weight: 700;
    color: #37234D;
    text-decoration: underline;
  }

  #contents.salesList .list li:not(.noResult)>dl dd .tel::after {
    content: "";
    margin-left: 8px;
    width: 20px;
    height: 20px;
    background: url("../images/icon/iconPhone.svg") no-repeat center;
  }
}

#contents.salesList .list li:not(.noResult)>dl dd.graph {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: stretch;
  align-items: center;
  color: #37234D;
}

#contents.salesList .list li:not(.noResult)>dl dd.graph strong {
  margin-right: 15px;
}

#contents.salesList .list li:not(.noResult)>dl dd.graph div {
  position: relative;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: #E9E9E9;
  overflow: hidden;
}

#contents.salesList .list li:not(.noResult)>dl dd.graph div span {
  position: absolute;
  left: 0;
  top: 0;
  height: 5px;
  background: #37234D;
}

@media (min-width: 1025px) {
  #contents.salesList .list li:not(.noResult)>dl.case dt {
    width: 64px;
  }
}

@media (min-width: 1025px) {
  #contents.salesList .list li:not(.noResult)>dl.case dd {
    width: calc(100% - 64px);
  }
}

#contents.salesList .list li:not(.noResult) .buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

@media (min-width: 1025px) {
  #contents.salesList .list li:not(.noResult) .buttons {
    margin-top: 38px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .list li:not(.noResult) .buttons {
    margin-top: 18px;
  }
}

#contents.salesList .list li:not(.noResult) .buttons>* {
  width: calc(50% - 5px);
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
}

#contents.salesList .list li:not(.noResult) .buttons>*::before,
#contents.salesList .list li:not(.noResult) .buttons>*::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.salesList .list li:not(.noResult) .buttons>*:not(:disabled):hover,
#contents.salesList .list li:not(.noResult) .buttons>*:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.salesList .list li:not(.noResult) .buttons>*:not(:disabled):hover::before,
#contents.salesList .list li:not(.noResult) .buttons>*:not(:disabled):hover::after,
#contents.salesList .list li:not(.noResult) .buttons>*:not(:disabled):focus::before,
#contents.salesList .list li:not(.noResult) .buttons>*:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.salesList .list li:not(.noResult) .buttons>* {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  #contents.salesList .list li:not(.noResult) .buttons>*::before {
    margin-right: 10px;
  }

  #contents.salesList .list li:not(.noResult) .buttons>*::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .list li:not(.noResult) .buttons>* {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.salesList .list li:not(.noResult) .buttons>*::before {
    margin-right: 14px;
  }

  #contents.salesList .list li:not(.noResult) .buttons>*::after {
    margin-left: 18px;
  }
}

#contents.salesList .list+.more {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#contents.salesList .list+.more::before,
#contents.salesList .list+.more::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.salesList .list+.more:not(:disabled):hover,
#contents.salesList .list+.more:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.salesList .list+.more:not(:disabled):hover::before,
#contents.salesList .list+.more:not(:disabled):hover::after,
#contents.salesList .list+.more:not(:disabled):focus::before,
#contents.salesList .list+.more:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.salesList .list+.more {
    font-size: 16px;
    min-width: 180px;
    height: 60px;
    padding: 0 20px;
    border-radius: 30px;
  }

  #contents.salesList .list+.more::before {
    margin-right: 10px;
  }

  #contents.salesList .list+.more::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .list+.more {
    font-size: 14px;
    min-width: 180px;
    font-size: 16px;
    height: 50px;
    padding: 0 18px;
    border-radius: 25px;
  }

  #contents.salesList .list+.more::before {
    margin-right: 14px;
  }

  #contents.salesList .list+.more::after {
    margin-left: 18px;
  }
}

@media (min-width: 1025px) {
  #contents.salesList .list+.more {
    margin-top: -70px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .list+.more {
    margin-top: -40px;
  }
}

#contents.pr.media .collect .modeTarget.thumbMode,
#contents.pr.press .modeTarget.thumbMode {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  transform: unset !important;
  height: unset !important;
  transition-property: unset !important;
}

#contents.pr.media .collect .modeTarget.thumbMode>*,
#contents.pr.press .modeTarget.thumbMode>* {
  transform: unset !important;
  backface-visibility: unset !important;
  -ms-flex-shrink: unset !important;
  -o-flex-shrink: unset !important;
  flex-shrink: unset !important;
  transition-property: unset !important;
}

@media (min-width: 1025px) {

  #contents.pr.media .collect .modeTarget.thumbMode>*,
  #contents.pr.press .modeTarget.thumbMode>* {
    width: calc(33.3333333333% - 20px);
  }

  #contents.pr.media .collect .modeTarget.thumbMode>*+*+*+*,
  #contents.pr.press .modeTarget.thumbMode>*+*+*+* {
    margin-top: 40px;
  }

  #contents.pr.media .collect .modeTarget.thumbMode>*:not(:nth-of-type(3n-2)),
  #contents.pr.press .modeTarget.thumbMode>*:not(:nth-of-type(3n-2)) {
    margin-left: 30px;
  }
}

@media (max-width: 1024px) {

  #contents.pr.media .collect .modeTarget.thumbMode>*,
  #contents.pr.press .modeTarget.thumbMode>* {
    width: calc(50% - 10px);
  }

  #contents.pr.media .collect .modeTarget.thumbMode>*+*+*,
  #contents.pr.press .modeTarget.thumbMode>*+*+* {
    margin-top: 30px;
  }

  #contents.pr.media .collect .modeTarget.thumbMode>*:nth-of-type(even),
  #contents.pr.press .modeTarget.thumbMode>*:nth-of-type(even) {
    margin-left: 20px;
  }
}

@media (max-width: 640px) {

  #contents.pr.media .collect .modeTarget.thumbMode>*,
  #contents.pr.press .modeTarget.thumbMode>* {
    margin-left: 0 !important;
    width: 100%;
  }

  #contents.pr.media .collect .modeTarget.thumbMode>*+*,
  #contents.pr.press .modeTarget.thumbMode>*+* {
    margin-top: 30px;
  }
}

#contents.pr.media .collect .modeTarget.thumbMode>* .img,
#contents.pr.press .modeTarget.thumbMode>* .img {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 70.0526%;
  overflow: hidden;
}

@media (min-width: 1025px) {

  #contents.pr.media .collect .modeTarget.thumbMode>* .img,
  #contents.pr.press .modeTarget.thumbMode>* .img {
    margin-bottom: 18px;
  }
}

@media (max-width: 1024px) {

  #contents.pr.media .collect .modeTarget.thumbMode>* .img,
  #contents.pr.press .modeTarget.thumbMode>* .img {
    margin-bottom: 13px;
  }
}

#contents.pr.media .collect .modeTarget.thumbMode>* .img span,
#contents.pr.press .modeTarget.thumbMode>* .img span {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 0.3s;
}

#contents.pr.media .collect .modeTarget.thumbMode>* .img:hover span,
#contents.pr.press .modeTarget.thumbMode>* .img:hover span,
#contents.pr.media .collect .modeTarget.thumbMode>* .img:focus span,
#contents.pr.press .modeTarget.thumbMode>* .img:focus span {
  transform: scale(1.06);
}

#contents.pr.media .collect .modeTarget.thumbMode>* .arrow,
#contents.pr.press .modeTarget.thumbMode>* .arrow {
  display: none !important;
}

#contents.pr.media .collect .modeTarget.thumbMode>*>p+p,
#contents.pr.press .modeTarget.thumbMode>*>p+p {
  margin-top: 10px;
}

#contents.pr.media .collect .modeTarget.thumbMode>* .period,
#contents.pr.press .modeTarget.thumbMode>* .period {
  color: #212121;
}

#contents.pr.media .collect .modeTarget.thumbMode>* .date,
#contents.pr.press .modeTarget.thumbMode>* .date {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

#contents.pr.media .collect .modeTarget.thumbMode>* .date span+span,
#contents.pr.press .modeTarget.thumbMode>* .date span+span {
  margin-left: 10px;
}

#contents.pr.media .collect .modeTarget.thumbMode>* .date span+span::before,
#contents.pr.press .modeTarget.thumbMode>* .date span+span::before {
  content: "|";
  padding-right: 10px;
  color: #c8c8c8;
}

#contents.pr.media .collect .modeTarget.thumbMode>* .subject,
#contents.pr.press .modeTarget.thumbMode>* .subject {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.02em;
}

#contents.pr.media .collect .modeTarget.thumbMode>* .subject:not(.case),
#contents.pr.press .modeTarget.thumbMode>* .subject:not(.case) {
  font-weight: 700;
}

@media (max-width: 1024px) {

  #contents.pr.media .collect .modeTarget.thumbMode>* .subject.case,
  #contents.pr.press .modeTarget.thumbMode>* .subject.case {
    margin-top: 3px !important;
  }
}

#contents.pr.media .collect .modeTarget.thumbMode>* .info,
#contents.pr.press .modeTarget.thumbMode>* .info {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  color: #666;
}

#contents.pr.media .collect .modeTarget.thumbMode>* .info span:first-child,
#contents.pr.press .modeTarget.thumbMode>* .info span:first-child {
  white-space: nowrap;
}

#contents.pr.media .collect .modeTarget.thumbMode>* .info span:not(:last-child),
#contents.pr.press .modeTarget.thumbMode>* .info span:not(:last-child) {
  position: relative;
  margin-right: 13px;
  padding-right: 13px;
}

#contents.pr.media .collect .modeTarget.thumbMode>* .info span:not(:last-child)::after,
#contents.pr.press .modeTarget.thumbMode>* .info span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 13px;
  background: #c8c8c8;
}

@media (min-width: 1025px) {

  #contents.pr.media .collect .modeTarget.thumbMode>* .btn,
  #contents.pr.press .modeTarget.thumbMode>* .btn {
    margin-top: 28px;
  }
}

@media (max-width: 1024px) {

  #contents.pr.media .collect .modeTarget.thumbMode>* .btn,
  #contents.pr.press .modeTarget.thumbMode>* .btn {
    margin-top: 18px;
  }
}

#contents.pr.media .collect .modeTarget.textMode>*:not(.pagination),
#contents.pr.press .modeTarget.textMode>*:not(.pagination) {
  position: relative;
  display: block;
  border-bottom: 1px solid #c8c8c8;
}

@media (min-width: 1025px) {

  #contents.pr.media .collect .modeTarget.textMode>*:not(.pagination),
  #contents.pr.press .modeTarget.textMode>*:not(.pagination) {
    padding: 33px 70px 33px 20px;
  }
}

@media (max-width: 1024px) {

  #contents.pr.media .collect .modeTarget.textMode>*:not(.pagination),
  #contents.pr.press .modeTarget.textMode>*:not(.pagination) {
    padding: 30px 0;
  }
}

#contents.pr.media .collect .modeTarget.textMode>*:not(.pagination):first-child,
#contents.pr.press .modeTarget.textMode>*:not(.pagination):first-child {
  border-top: 1px solid #000;
}

#contents.pr.media .collect .modeTarget.textMode>*:not(.pagination) .date,
#contents.pr.press .modeTarget.textMode>*:not(.pagination) .date {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

#contents.pr.media .collect .modeTarget.textMode>*:not(.pagination) .date span+span,
#contents.pr.press .modeTarget.textMode>*:not(.pagination) .date span+span {
  margin-left: 10px;
}

#contents.pr.media .collect .modeTarget.textMode>*:not(.pagination) .date span+span::before,
#contents.pr.press .modeTarget.textMode>*:not(.pagination) .date span+span::before {
  content: "|";
  padding-right: 10px;
  color: #c8c8c8;
}

#contents.pr.media .collect .modeTarget.textMode>*:not(.pagination) .subject,
#contents.pr.press .modeTarget.textMode>*:not(.pagination) .subject {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.02em;
  font-weight: 700;
}

@media (min-width: 1025px) {

  #contents.pr.media .collect .modeTarget.textMode>*:not(.pagination) .subject,
  #contents.pr.press .modeTarget.textMode>*:not(.pagination) .subject {
    margin-top: 13px;
  }
}

@media (max-width: 1024px) {

  #contents.pr.media .collect .modeTarget.textMode>*:not(.pagination) .subject,
  #contents.pr.press .modeTarget.textMode>*:not(.pagination) .subject {
    margin-top: 9px;
  }
}

#contents.pr.media .collect .modeTarget.textMode>*:not(.pagination) .arrow,
#contents.pr.press .modeTarget.textMode>*:not(.pagination) .arrow {
  position: absolute;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 25px;
  height: 25px;
}

@media (max-width: 1024px) {

  #contents.pr.media .collect .modeTarget.textMode>*:not(.pagination) .arrow,
  #contents.pr.press .modeTarget.textMode>*:not(.pagination) .arrow {
    display: none;
  }
}

#contents.pr.media .collect .modeTarget.textMode>*:not(.pagination) .arrow::before,
#contents.pr.press .modeTarget.textMode>*:not(.pagination) .arrow::before {
  content: "";
  background: url("../images/slp/iconArrow.svg") no-repeat center;
  background-size: 100%;
  -moz-filter: grayscale(100);
  -ms-filter: grayscale(100);
  -o-filter: grayscale(100);
  filter: grayscale(100);
  opacity: 0.5;
}

#contents.pr.media .collect .modeTarget.textMode>*:not(.pagination):hover .arrow::before,
#contents.pr.press .modeTarget.textMode>*:not(.pagination):hover .arrow::before,
#contents.pr.media .collect .modeTarget.textMode>*:not(.pagination):focus .arrow::before,
#contents.pr.press .modeTarget.textMode>*:not(.pagination):focus .arrow::before {
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
  opacity: 1;
}

#contents.reservation .reservationList {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#contents.reservation .reservationList li {
  position: relative;
}

@media (min-width: 1025px) {
  #contents.reservation .reservationList li {
    padding: 60px 80px 65px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .reservationList li {
    padding: 140px 20px 30px;
  }
}

#contents.reservation .reservationList li+li {
  margin-top: 30px;
}

#contents.reservation .reservationList li:not(.expired) {
  border: 1px solid #37234D;
}

#contents.reservation .reservationList li:not(.expired) em {
  background: #37234D;
  color: #fff;
}

#contents.reservation .reservationList li.expired {
  background: #f9f9f9;
}

#contents.reservation .reservationList li.expired em {
  background: #c8c8c8;
  color: #212121;
}

#contents.reservation .reservationList li em {
  position: absolute;
  top: 0;
  border-radius: 0 0 10px 10px;
  text-align: center;
}

@media (min-width: 1025px) {
  #contents.reservation .reservationList li em {
    right: 80px;
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .reservationList li em {
    right: 20px;
    width: 60px;
    height: 60px;
    line-height: 60px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .reservationList li span {
    padding-left: 28px;
    background: url("../images/icon/iconHouse.svg") no-repeat left top;
    color: #212121;
  }
}

#contents.reservation .reservationList li .date {
  padding-bottom: 18px;
  border-bottom: 1px solid #E1E1E1;
  font-weight: 700;
}

@media (min-width: 1025px) {
  #contents.reservation .reservationList li .date {
    margin-top: 19px;
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .reservationList li .date {
    position: absolute;
    top: 73px;
    left: 20px;
    right: 20px;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) and (max-width: 375px) {
  #contents.reservation .reservationList li .date {
    font-size: 19px;
  }
}

@media (max-width: 1024px) and (max-width: 360px) {
  #contents.reservation .reservationList li .date {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }
}

#contents.reservation .reservationList li .location {
  padding-left: 28px;
  background: url("../images/icon/iconLocation.svg") no-repeat left 5px;
  color: #212121;
}

@media (min-width: 1025px) {
  #contents.reservation .reservationList li .location {
    display: inline-block;
    margin-top: 30px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .reservationList li .location {
    margin-top: 10px;
    background-position: left 3px;
  }
}

#contents.reservation .reservationList li .call {
  padding-left: 28px;
  background: url("../images/icon/iconPhone2.svg") no-repeat left 5px;
  color: #212121;
}

@media (min-width: 1025px) {
  #contents.reservation .reservationList li .call {
    display: inline-block;
    margin-top: 30px;
    margin-left: 45px;
  }

  #contents.reservation .reservationList li .call a {
    pointer-events: none;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .reservationList li .call {
    margin-top: 10px;
    background-position: left 3px;
  }
}

@media (min-width: 1025px) {
  #contents.reservation .reservationList li .buttons {
    position: absolute;
    bottom: 60px;
    right: 80px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .reservationList li .buttons {
    margin-top: 30px;
  }
}

#contents.reservation .reservationList li .buttons>* {
  height: 40px;
  border: 1px solid #c8c8c8;
  border-radius: 20px;
}

#contents.reservation .reservationList li .buttons>*:hover {
  border-color: #37234D;
  color: #37234D;
}

@media (min-width: 1025px) {
  #contents.reservation .reservationList li .buttons>* {
    width: 110px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .reservationList li .buttons>* {
    width: 100%;
  }
}

@media (min-width: 1025px) {
  #contents.reservation .reservationList li .buttons>*+* {
    margin-left: 10px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .reservationList li .buttons>*+* {
    margin-top: 10px;
  }
}

#contents.reservation .info {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  word-break: keep-all;
  color: #666;
}

#contents.reservation .info>li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

#contents.reservation .info>li::before {
  content: "※";
  padding-right: 3px;
}

#contents.reservation .warning {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  color: #212121;
}

@media (min-width: 1025px) {
  #contents.reservation .warning {
    padding: 43px 50px 43px 120px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .warning {
    padding: 33px 40px 33px 80px;
  }
}

#contents.reservation .warning::before {
  content: "";
  position: absolute;
  display: block;
  left: 20px;
  top: 0;
  bottom: 0;
  background: rgba(216, 34, 32, 0.08) url("../images/icon/iconWarning.svg") no-repeat center;
}

@media (min-width: 1025px) {
  #contents.reservation .warning::before {
    width: 60px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .warning::before {
    width: 40px;
  }
}

#contents.reservation .warning::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  bottom: 0;
  display: block;
  border: 1px solid #E9E9E9;
}

#contents.reservation .warning li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

#contents.reservation .warning li::before {
  content: "※";
  margin-right: 0.4em;
}

#contents.reservation .warning li+li {
  margin-top: 0.35em;
}

.datepickerBig {
  border-bottom: 1px solid #E1E1E1;
}

.datepickerBig.hasDatepicker {
  background-image: none !important;
}

.datepickerBig .ui-widget-content {
  margin-top: 0 !important;
  width: 100%;
  padding: 0 !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;
  border-radius: unset !important;
}

@media (min-width: 1025px) {
  .datepickerBig .ui-widget-content {
    font-size: 16px !important;
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-widget-content {
    font-size: 14px !important;
  }
}

.datepickerBig .ui-state-hover,
.datepickerBig .ui-widget-content .ui-state-hover {
  background: unset;
}

.datepickerBig .ui-datepicker .ui-datepicker-header {
  margin-bottom: 0 !important;
  height: 70px;
  padding: 0 !important;
  border-radius: unset !important;
  background: #f9f9f9;
}

.datepickerBig .ui-datepicker .ui-datepicker-title {
  line-height: 70px;
}

@media (min-width: 1025px) {
  .datepickerBig .ui-datepicker .ui-datepicker-title {
    font-size: 20px;
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-datepicker .ui-datepicker-title {
    font-size: 18px;
  }
}

.datepickerBig .ui-datepicker .ui-datepicker-prev,
.datepickerBig .ui-datepicker .ui-datepicker-next {
  top: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  border: 1px solid #c8c8c8;
  cursor: pointer;
}

@media (min-width: 1025px) {
  .datepickerBig .ui-datepicker .ui-datepicker-prev {
    left: 30px;
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-datepicker .ui-datepicker-prev {
    left: 20px;
  }
}

@media (min-width: 1025px) {
  .datepickerBig .ui-datepicker .ui-datepicker-next {
    right: 30px;
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-datepicker .ui-datepicker-next {
    right: 20px;
  }
}

.datepickerBig .ui-datepicker table {
  margin: 0 !important;
}

@media (min-width: 1025px) {
  .datepickerBig .ui-datepicker table {
    font-size: 16px !important;
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-datepicker table {
    font-size: 14px !important;
  }
}

.datepickerBig .ui-datepicker-calendar thead {
  border-bottom: none !important;
}

.datepickerBig .ui-datepicker th {
  height: 55px;
  vertical-align: middle;
  padding: 0 !important;
  color: #212121 !important;
}

.datepickerBig .ui-datepicker td {
  padding: 0 !important;
  vertical-align: middle;
}

@media (min-width: 1025px) {
  .datepickerBig .ui-datepicker td {
    height: 54px !important;
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-datepicker td {
    height: 60px !important;
  }
}

.datepickerBig .ui-datepicker td a:hover {
  background: #E1E1E1;
}

.datepickerBig .ui-datepicker td[data-handler=selectDay].start {
  position: relative;
  background: #e9e9e9;
}

.datepickerBig .ui-datepicker td[data-handler=selectDay].start a {
  position: absolute;
  z-index: 5;
}

@media (min-width: 1025px) {
  .datepickerBig .ui-datepicker td[data-handler=selectDay].start a {
    top: calc(50% - 20px);
    left: calc(50% - 20px);
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-datepicker td[data-handler=selectDay].start a {
    top: calc(50% - 14px);
    left: calc(50% - 14px);
  }
}

.datepickerBig .ui-datepicker td[data-handler=selectDay].start:after {
  position: absolute;
  top: 0;
  left: 7px;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 30px 0 0 30px;
}

@media (max-width: 480px) {
  .datepickerBig .ui-datepicker td[data-handler=selectDay].start:after {
    left: 3px;
  }
}

.datepickerBig .ui-datepicker td[data-handler=selectDay].end {
  position: relative;
  background: #e9e9e9;
}

.datepickerBig .ui-datepicker td[data-handler=selectDay].end a {
  position: absolute;
  z-index: 5;
}

@media (min-width: 1025px) {
  .datepickerBig .ui-datepicker td[data-handler=selectDay].end a {
    top: calc(50% - 20px);
    right: calc(50% - 20px);
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-datepicker td[data-handler=selectDay].end a {
    top: calc(50% - 14px);
    right: calc(50% - 14px);
  }
}

.datepickerBig .ui-datepicker td[data-handler=selectDay].end:after {
  position: absolute;
  top: 0;
  right: 7px;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 0 30px 30px 0;
}

.datepickerBig .ui-state-disabled,
.datepickerBig .ui-widget-content .ui-state-disabled,
.datepickerBig .ui-widget-header .ui-state-disabled {
  opacity: 1 !important;
  background: #e9e9e9;
}

.datepickerBig .ui-state-default,
.datepickerBig .ui-widget-content .ui-state-default,
.datepickerBig .ui-widget-header .ui-state-default {
  border: 0 !important;
  color: #212121;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
}

@media (min-width: 1025px) {

  .datepickerBig .ui-state-default,
  .datepickerBig .ui-widget-content .ui-state-default,
  .datepickerBig .ui-widget-header .ui-state-default {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
  }
}

@media (max-width: 1024px) {

  .datepickerBig .ui-state-default,
  .datepickerBig .ui-widget-content .ui-state-default,
  .datepickerBig .ui-widget-header .ui-state-default {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
  }
}

.datepickerBig .ui-state-highlight,
.datepickerBig .ui-widget-content .ui-state-highlight,
.datepickerBig .ui-widget-header .ui-state-highlight {
  background: #E1E1E1;
  color: #212121;
}

.datepickerBig .ui-state-active {
  background: #37234D !important;
  color: #fff !important;
}

.datepickerBig .ui-datepicker td span,
.datepickerBig .ui-datepicker td a {
  padding: 0 !important;
}

.datepickerBig .ui-datepicker-other-month .ui-state-default {
  color: #666 !important;
}

.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-clearfix {
  min-height: 0;
  /* support: IE7 */
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0);
  /* support: IE8 */
}

.ui-front {
  z-index: 100;
}

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important;
}

/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}

/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 2px 0 0 0;
  padding: 0.5em 0.5em 0.5em 0.7em;
  min-height: 0;
  /* support: IE7 */
  font-size: 100%;
}

.ui-accordion .ui-accordion-icons {
  padding-left: 2.2em;
}

.ui-accordion .ui-accordion-icons .ui-accordion-icons {
  padding-left: 2.2em;
}

.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
  position: absolute;
  left: 0.5em;
  top: 50%;
  margin-top: -8px;
}

.ui-accordion .ui-accordion-content {
  padding: 1em 2.2em;
  border-top: 0;
  overflow: auto;
}

.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
}

.ui-button {
  display: inline-block;
  position: relative;
  padding: 0;
  line-height: normal;
  margin-right: 0.1em;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
  overflow: visible;
  /* removes extra width in IE */
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
  text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
  width: 2.2em;
}

/* button elements seem to need a little more width */
button.ui-button-icon-only {
  width: 2.4em;
}

.ui-button-icons-only {
  width: 3.4em;
}

button.ui-button-icons-only {
  width: 3.7em;
}

/* button text element */
.ui-button .ui-button-text {
  display: block;
  line-height: normal;
}

.ui-button-text-only .ui-button-text {
  padding: 0.4em 1em;
}

.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
  padding: 0.4em;
  text-indent: -9999999px;
}

.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
  padding: 0.4em 1em 0.4em 2.1em;
}

.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
  padding: 0.4em 2.1em 0.4em 1em;
}

.ui-button-text-icons .ui-button-text {
  padding-left: 2.1em;
  padding-right: 2.1em;
}

/* no icon support for input elements, provide padding by default */
input.ui-button {
  padding: 0.4em 1em;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
  position: absolute;
  top: 50%;
  margin-top: -8px;
}

.ui-button-icon-only .ui-icon {
  left: 50%;
  margin-left: -8px;
}

.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
  left: 0.5em;
}

.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
  right: 0.5em;
}

/* button sets */
.ui-buttonset {
  margin-right: 7px;
}

.ui-buttonset .ui-button {
  margin-left: 0;
  margin-right: -0.3em;
}

/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.ui-datepicker {
  width: 17em;
  padding: 0.2em 0.2em 0;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
  margin-bottom: 13px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 30px;
  height: 30px;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  top: 2px;
}

.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next-hover {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 0%;
  top: 0%;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
  font-size: 14px;
  font-size: 0.9rem;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 45%;
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
}

.ui-datepicker-calendar thead {
  border-bottom: 4px solid #fff;
}

a.ui-datepicker-next.ui-corner-all::before {
  border: solid #63666a;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px 2px 2px 4px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  content: "";
  position: absolute;
  top: 11px;
  left: 9px;
}

button.ui-datepicker-trigger {
  border: none;
  background: #4c5762 url("../../images/sub/datapicker.png") 16px 15px no-repeat;
  width: 49px;
  height: 48px;
  text-indent: -9999px;
}

a.ui-datepicker-prev.ui-corner-all::before {
  border: solid #63666a;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px 2px 2px 4px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  content: "";
  position: absolute;
  top: 11px;
  left: 12px;
}

.ui-datepicker th {
  padding: 0.7em 0.3em;
  text-align: center;
  font-weight: bold;
  border: 0;
  color: #63666a;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 0.2em;
  text-align: right;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0 0;
  padding: 0 0.2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em 0.6em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto 0.4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
  direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

.ui-dialog {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.2em;
  outline: 0;
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0.4em 1em;
  position: relative;
}

.ui-dialog .ui-dialog-title {
  float: left;
  margin: 0.1em 0;
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: 0.3em;
  top: 50%;
  width: 20px;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 20px;
}

.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  padding: 0.5em 1em;
  background: none;
  overflow: auto;
}

.ui-dialog .ui-dialog-buttonpane {
  text-align: left;
  border-width: 1px 0 0 0;
  background-image: none;
  margin-top: 0.5em;
  padding: 0.3em 1em 0.5em 0.4em;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: right;
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: 0.5em 0.4em 0.5em 0;
  cursor: pointer;
}

.ui-dialog .ui-resizable-se {
  width: 12px;
  height: 12px;
  right: -5px;
  bottom: -5px;
  background-position: 16px 16px;
}

.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}

.ui-draggable-handle {
  touch-action: none;
}

.ui-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  outline: none;
}

.ui-menu .ui-menu {
  position: absolute;
}

.ui-menu .ui-menu-item {
  position: relative;
  margin: 0;
  padding: 3px 1em 3px 0.4em;
  cursor: pointer;
  min-height: 0;
  /* support: IE7 */
  /* support: IE10, see #8844 */
}

.ui-menu .ui-menu-divider {
  margin: 5px 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 1px 0 0 0;
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
  margin: -1px;
}

/* icon support */
.ui-menu-icons {
  position: relative;
}

.ui-menu-icons .ui-menu-item {
  padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.2em;
  margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
  left: auto;
  right: 0;
}

.ui-progressbar {
  height: 2em;
  text-align: left;
  overflow: hidden;
}

.ui-progressbar .ui-progressbar-value {
  margin: -1px;
  height: 100%;
}

.ui-progressbar .ui-progressbar-overlay {
  height: 100%;
  filter: alpha(opacity=25);
  /* support: IE8 */
  opacity: 0.25;
}

.ui-progressbar-indeterminate .ui-progressbar-value {
  background-image: none;
}

.ui-resizable {
  position: relative;
}

.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  touch-action: none;
}

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
  display: none;
}

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}

.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

.ui-selectable {
  touch-action: none;
}

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted black;
}

.ui-selectmenu-menu {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.ui-selectmenu-menu .ui-menu {
  overflow: auto;
  /* Support: IE7 */
  overflow-x: hidden;
  padding-bottom: 1px;
}

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.5;
  padding: 2px 0.4em;
  margin: 0.5em 0 0 0;
  height: auto;
  border: 0;
}

.ui-selectmenu-open {
  display: block;
}

.ui-selectmenu-button {
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

.ui-selectmenu-button span.ui-icon {
  right: 0.5em;
  left: auto;
  margin-top: -8px;
  position: absolute;
  top: 50%;
}

.ui-selectmenu-button span.ui-selectmenu-text {
  text-align: left;
  padding: 0.4em 2.1em 0.4em 1em;
  display: block;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  touch-action: none;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit;
}

.ui-slider-horizontal {
  height: 0.8em;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
  margin-left: -0.6em;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-slider-vertical {
  width: 0.8em;
  height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
  left: -0.3em;
  margin-left: 0;
  margin-bottom: -0.6em;
}

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}

.ui-sortable-handle {
  touch-action: none;
}

.ui-spinner {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.ui-spinner-input {
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  margin: 0.2em 0;
  vertical-align: middle;
  margin-left: 0.4em;
  margin-right: 22px;
}

.ui-spinner-button {
  width: 16px;
  height: 50%;
  font-size: 0.5em;
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  cursor: default;
  display: block;
  overflow: hidden;
  right: 0;
}

/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
  border-top: none;
  border-bottom: none;
  border-right: none;
}

/* vertically center icon */
.ui-spinner .ui-icon {
  position: absolute;
  margin-top: -8px;
  top: 50%;
  left: 0;
}

.ui-spinner-up {
  top: 0;
}

.ui-spinner-down {
  bottom: 0;
}

/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
  /* need to fix icons sprite */
  background-position: -65px -16px;
}

.ui-tabs {
  position: relative;
  /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
  padding: 0.2em;
}

.ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: 0.2em 0.2em 0;
}

.ui-tabs .ui-tabs-nav li {
  list-style: none;
  float: left;
  position: relative;
  top: 0;
  margin: 1px 0.2em 0 0;
  border-bottom-width: 0;
  padding: 0;
  white-space: nowrap;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  float: left;
  padding: 0.5em 1em;
  text-decoration: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -1px;
  padding-bottom: 1px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
  cursor: text;
}

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
  cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
  display: block;
  border-width: 0;
  padding: 1em 1.4em;
  background: none;
}

.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  box-shadow: 0 0 5px #aaa;
}

body .ui-tooltip {
  border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.1em;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1em;
}

.ui-widget-content {
  margin-top: 4px;
  font-size: 12px;
  font-size: 0.75rem;
  border-radius: 2px;
  -o-box-shadow: 0 1px 5px 0 #2f3133;
  box-shadow: 0 1px 5px 0 #2f3133;
  padding: 20px 15px;
  border-width: 0;
  text-align: center;
  background-color: #fff;
  cursor: default;
  z-index: 100;
  width: 273px;
}

.ui-widget-content a {
  color: #222222;
}

.ui-widget-header {
  color: #222222;
  font-weight: bold;
}

.ui-widget-header a {
  color: #222222;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 1px solid #63666a;
  width: 30px;
  line-height: 30px;
  text-align: center;
  color: #555555;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
  color: #555555;
  text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover {
  background: #63666a;
  color: #fff;
}

.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  background: #bec3c9;
  background: #bec3c9;
  font-weight: normal;
  color: #fff;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
  color: #212121;
  text-decoration: none;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  font-weight: normal;
  color: #212121;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #212121;
  text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  background: #0758a8;
  color: #fff;
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #363636;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #cd0a0a;
  color: #cd0a0a;
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
  color: #cd0a0a;
}

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
  color: #cd0a0a;
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: bold;
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: 0.7;
  filter: Alpha(Opacity=70);
  /* support: IE8 */
  font-weight: normal;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  filter: Alpha(Opacity=35);
  /* support: IE8 */
  background-image: none;
}

.ui-state-disabled .ui-icon {
  filter: Alpha(Opacity=35);
  /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
  width: 30px;
  height: 30px;
}

/* positioning */
.ui-icon-blank {
  background-position: 16px 16px;
}

.ui-icon-carat-1-n {
  background-position: 0 0;
}

.ui-icon-carat-1-ne {
  background-position: -16px 0;
}

.ui-icon-carat-1-e {
  background-position: -32px 0;
}

.ui-icon-carat-1-se {
  background-position: -48px 0;
}

.ui-icon-carat-1-s {
  background-position: -64px 0;
}

.ui-icon-carat-1-sw {
  background-position: -80px 0;
}

.ui-icon-carat-1-w {
  background-position: -96px 0;
}

.ui-icon-carat-1-nw {
  background-position: -112px 0;
}

.ui-icon-carat-2-n-s {
  background-position: -128px 0;
}

.ui-icon-carat-2-e-w {
  background-position: -144px 0;
}

.ui-icon-triangle-1-n {
  background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
  background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
  background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
  background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
  background-position: -64px -16px;
}

.ui-icon-triangle-1-sw {
  background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
  background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
  background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
  background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
  background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
  background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
  background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
  background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
  background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
  background-position: -64px -32px;
}

.ui-icon-arrow-1-sw {
  background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
  background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
  background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
  background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
  background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
  background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
  background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
  background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
  background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
  background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
  background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
  background-position: 0 -48px;
}

.ui-icon-arrowthick-1-ne {
  background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
  background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
  background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
  background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
  background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
  background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
  background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
  background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
  background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
  background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
  background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
  background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
  background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
  background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
  background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
  background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
  background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
  background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
  background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
  background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
  background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
  background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
  background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
  background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
  background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
  background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
  background-position: -176px -64px;
}

.ui-icon-arrow-4 {
  background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
  background-position: -16px -80px;
}

.ui-icon-extlink {
  background-position: -32px -80px;
}

.ui-icon-newwin {
  background-position: -48px -80px;
}

.ui-icon-refresh {
  background-position: -64px -80px;
}

.ui-icon-shuffle {
  background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
  background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
  background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
  background-position: 0 -96px;
}

.ui-icon-folder-open {
  background-position: -16px -96px;
}

.ui-icon-document {
  background-position: -32px -96px;
}

.ui-icon-document-b {
  background-position: -48px -96px;
}

.ui-icon-note {
  background-position: -64px -96px;
}

.ui-icon-mail-closed {
  background-position: -80px -96px;
}

.ui-icon-mail-open {
  background-position: -96px -96px;
}

.ui-icon-suitcase {
  background-position: -112px -96px;
}

.ui-icon-comment {
  background-position: -128px -96px;
}

.ui-icon-person {
  background-position: -144px -96px;
}

.ui-icon-print {
  background-position: -160px -96px;
}

.ui-icon-trash {
  background-position: -176px -96px;
}

.ui-icon-locked {
  background-position: -192px -96px;
}

.ui-icon-unlocked {
  background-position: -208px -96px;
}

.ui-icon-bookmark {
  background-position: -224px -96px;
}

.ui-icon-tag {
  background-position: -240px -96px;
}

.ui-icon-home {
  background-position: 0 -112px;
}

.ui-icon-flag {
  background-position: -16px -112px;
}

.ui-icon-calendar {
  background-position: -32px -112px;
}

.ui-icon-cart {
  background-position: -48px -112px;
}

.ui-icon-pencil {
  background-position: -64px -112px;
}

.ui-icon-clock {
  background-position: -80px -112px;
}

.ui-icon-disk {
  background-position: -96px -112px;
}

.ui-icon-calculator {
  background-position: -112px -112px;
}

.ui-icon-zoomin {
  background-position: -128px -112px;
}

.ui-icon-zoomout {
  background-position: -144px -112px;
}

.ui-icon-search {
  background-position: -160px -112px;
}

.ui-icon-wrench {
  background-position: -176px -112px;
}

.ui-icon-gear {
  background-position: -192px -112px;
}

.ui-icon-heart {
  background-position: -208px -112px;
}

.ui-icon-star {
  background-position: -224px -112px;
}

.ui-icon-link {
  background-position: -240px -112px;
}

.ui-icon-cancel {
  background-position: 0 -128px;
}

.ui-icon-plus {
  background-position: -16px -128px;
}

.ui-icon-plusthick {
  background-position: -32px -128px;
}

.ui-icon-minus {
  background-position: -48px -128px;
}

.ui-icon-minusthick {
  background-position: -64px -128px;
}

.ui-icon-close {
  background-position: -80px -128px;
}

.ui-icon-closethick {
  background-position: -96px -128px;
}

.ui-icon-key {
  background-position: -112px -128px;
}

.ui-icon-lightbulb {
  background-position: -128px -128px;
}

.ui-icon-scissors {
  background-position: -144px -128px;
}

.ui-icon-clipboard {
  background-position: -160px -128px;
}

.ui-icon-copy {
  background-position: -176px -128px;
}

.ui-icon-contact {
  background-position: -192px -128px;
}

.ui-icon-image {
  background-position: -208px -128px;
}

.ui-icon-video {
  background-position: -224px -128px;
}

.ui-icon-script {
  background-position: -240px -128px;
}

.ui-icon-alert {
  background-position: 0 -144px;
}

.ui-icon-info {
  background-position: -16px -144px;
}

.ui-icon-notice {
  background-position: -32px -144px;
}

.ui-icon-help {
  background-position: -48px -144px;
}

.ui-icon-check {
  background-position: -64px -144px;
}

.ui-icon-bullet {
  background-position: -80px -144px;
}

.ui-icon-radio-on {
  background-position: -96px -144px;
}

.ui-icon-radio-off {
  background-position: -112px -144px;
}

.ui-icon-pin-w {
  background-position: -128px -144px;
}

.ui-icon-pin-s {
  background-position: -144px -144px;
}

.ui-icon-play {
  background-position: 0 -160px;
}

.ui-icon-pause {
  background-position: -16px -160px;
}

.ui-icon-seek-next {
  background-position: -32px -160px;
}

.ui-icon-seek-prev {
  background-position: -48px -160px;
}

.ui-icon-seek-end {
  background-position: -64px -160px;
}

.ui-icon-seek-start {
  background-position: -80px -160px;
}

/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
  background-position: -80px -160px;
}

.ui-icon-stop {
  background-position: -96px -160px;
}

.ui-icon-eject {
  background-position: -112px -160px;
}

.ui-icon-volume-off {
  background-position: -128px -160px;
}

.ui-icon-volume-on {
  background-position: -144px -160px;
}

.ui-icon-power {
  background-position: 0 -176px;
}

.ui-icon-signal-diag {
  background-position: -16px -176px;
}

.ui-icon-signal {
  background-position: -32px -176px;
}

.ui-icon-battery-0 {
  background-position: -48px -176px;
}

.ui-icon-battery-1 {
  background-position: -64px -176px;
}

.ui-icon-battery-2 {
  background-position: -80px -176px;
}

.ui-icon-battery-3 {
  background-position: -96px -176px;
}

.ui-icon-circle-plus {
  background-position: 0 -192px;
}

.ui-icon-circle-minus {
  background-position: -16px -192px;
}

.ui-icon-circle-close {
  background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
  background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
  background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
  background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
  background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
  background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
  background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
  background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
  background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
  background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
  background-position: -192px -192px;
}

.ui-icon-circle-check {
  background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
  background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
  background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
  background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
  background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
  background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
  background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
  background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
  background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
  background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
  background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
  background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
  background-position: -80px -224px;
}

/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 4px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 4px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 4px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 4px;
}

a.ui-corner-all {
  border-radius: 50%;
}

/* Overlays */
.ui-widget-overlay {
  opacity: 0.3;
  filter: Alpha(Opacity=30);
  /* support: IE8 */
}

.ui-widget-shadow {
  margin: -8px 0 0 -8px;
  padding: 8px;
  opacity: 0.3;
  filter: Alpha(Opacity=30);
  /* support: IE8 */
  border-radius: 8px;
}

.mtz-monthpicker-year {
  padding: 0.5em 1em;
}

body:not(.myinfoActive) #header:not(.hover):not(.sticky):not(.opened) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

body:not(.myinfoActive) #header:not(.hover):not(.sticky):not(.opened)>div {
  color: #fff;
}

body:not(.myinfoActive) #header:not(.hover):not(.sticky):not(.opened)>div>.h1,
body:not(.myinfoActive) #header:not(.hover):not(.sticky):not(.opened)>div>button {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
}

#header {
  z-index: 15;
  top: 0;
}

#header.sticky {
  position: sticky;
}

#header:not(.sticky) {
  position: relative;
}

@media (min-width: 1025px) {
  #header:not(.hover):not(.sticky):not(.opened) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  #header:not(.hover):not(.sticky):not(.opened)>div {
    color: #fff;
  }

  #header:not(.hover):not(.sticky):not(.opened)>div>.h1,
  #header:not(.hover):not(.sticky):not(.opened)>div>button {
    -moz-filter: grayscale(1) brightness(100);
    -ms-filter: grayscale(1) brightness(100);
    -o-filter: grayscale(1) brightness(100);
    filter: grayscale(1) brightness(100);
  }
}

#header.hover,
#header.sticky {
  border-bottom: 1px solid #E1E1E1;
  background: #fff;
}

#header.hover>nav {
  transition: all 0.3s;
  max-height: 400px;
  border-bottom: 1px solid #E1E1E1;
}

#header.hover>div>nav a.active {
  color: #37234D;
}

#header:not(.opened) section .h1 {
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

#header:not(.opened) .buttons {
  display: none;
}

#header.opened {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: #fff;
}

@media (min-width: 1025px) {
  #header.opened {
    position: relative;
  }
}

#header.opened>nav {
  display: block !important;
  transition: unset;
  position: fixed;
  left: 0;
  width: 100%;
  color: #fff;
  top: 0;
  height: 100%;
  max-height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#header.opened>nav .btnTop {
  text-align: right;
}

@media (min-width: 1025px) {
  #header.opened>nav .btnTop>button {
    display: inline-block;
  }

  #header.opened>nav .btnTop>button.my {
    position: relative;
    top: 2px;
    padding-left: 30px;
    font-size: 18px;
    font-weight: 500;
    height: 21px;
    -moz-filter: grayscale(0%) brightness(100) !important;
    -ms-filter: grayscale(0%) brightness(100) !important;
    -o-filter: grayscale(0%) brightness(100) !important;
    filter: grayscale(0%) brightness(100) !important;
    background: url(../images/icon/iconMy.svg) no-repeat left center;
  }

  #header.opened>nav .btnTop>button.menuToggle {
    position: relative;
    width: 21px;
    height: 21px;
    margin-left: 40px;
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
    background: none;
  }

  #header.opened>nav .btnTop>button.menuToggle::before,
  #header.opened>nav .btnTop>button.menuToggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 25px;
    height: 2px;
    background: #fff;
  }

  #header.opened>nav .btnTop>button.menuToggle::before {
    transform: rotate(45deg);
  }

  #header.opened>nav .btnTop>button.menuToggle::after {
    transform: rotate(-45deg);
  }
}

@media (max-width: 1024px) {
  #header.opened>nav {
    top: 60px;
  }
}

#header.opened>nav::before {
  display: none;
}

#header.opened>nav section {
  width: 100%;
  margin-left: 0;
  padding: 0;
}

#header.opened>nav section+section {
  margin-top: 20px;
}

#header.opened>nav section:first-of-type {
  padding-top: 80px;
}

@media (max-width: 1024px) {
  #header.opened>nav section:first-of-type {
    padding-top: 0;
  }
}

#header.opened>nav section:first-of-type.hovered {
  padding-top: 80px;
}

@media (max-width: 1024px) {
  #header.opened>nav section:first-of-type.hovered {
    padding-top: 0;
  }
}

@media (min-width: 1025px) {
  #header.opened>nav section:nth-of-type(2) ul li:nth-child(even) {
    width: unset;
  }

  #header.opened>nav section:nth-of-type(2) ul li:nth-child(odd) {
    width: unset;
  }
}

@media (min-width: 1025px) {
  #header.opened>nav section ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
}

#header.opened>nav section ul li {
  text-align: left;
  width: 100%;
  padding-top: 10px;
}

@media (min-width: 1025px) {
  #header.opened>nav section ul li:nth-child(even) {
    width: 150px;
  }

  #header.opened>nav section ul li:nth-child(odd) {
    width: 114px;
  }

  #header.opened>nav section ul li+li {
    margin-top: 0;
  }
}

@media (max-width: 1024px) {
  #header.opened>nav section ul li {
    padding-top: 0;
  }
}

#header.opened>nav section ul li a {
  color: #B5ABC1;
}

@media (min-width: 1025px) {
  #header.opened>nav section ul li a {
    font-size: 14px;
  }
}

@media (max-width: 1024px) {
  #header.opened>nav section ul li a {
    font-size: 18px;
    display: block;
    width: 100%;
    line-height: 50px;
  }
}

#header.opened>nav section ul li.active a {
  color: #fff !important;
}

#header.opened>nav section.hovered {
  padding-top: 0;
  border-top: 0;
}

#header.opened>nav section.opened ul {
  max-height: 320px;
  padding: 20px 0;
}

#header.opened>nav section.opened ul li+li {
  margin-top: 0;
}

#header.opened>nav section.opened button:after {
  display: none;
}

#header.opened>nav .h1 {
  width: 100%;
  text-align: left;
}

#header.opened>nav .h1 button {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  line-height: 26px;
  text-align: left;
  letter-spacing: -0.015em;
  position: relative;
}

@media (max-width: 1024px) {
  #header.opened>nav .h1 button {
    font-size: 20px;
  }
}

#header.opened>nav .h1 button::before,
#header.opened>nav .h1 button::after {
  content: "";
  position: absolute;
  right: 0;
  top: 11px;
  height: 1px;
  width: 14px;
  background: #fff;
}

#header.opened>nav .h1 button::after {
  transform: rotate(90deg);
}

#header.opened>nav .h1+ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}

#header.opened>nav>div {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 452px;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #2B1A3C url("../images/gwell/bgMyinfo.png") no-repeat center;
  background-size: cover;
}

@media (min-width: 1025px) {
  #header.opened>nav>div {
    padding: 30px 80px 70px 60px;
  }
}

@media (max-width: 1024px) {
  #header.opened>nav>div {
    padding: 45px 20px 100px;
    width: 100%;
    left: 0;
    right: 0;
    background: #2B1A3C url("../images/gwell/bgMyinfo.jpg") no-repeat center;
    background-size: cover;
  }
}

#header.opened>nav aside {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: unset;
  max-width: unset;
  width: 100%;
  padding: 0;
  margin-top: 45px;
}

#header.opened>nav aside>* {
  position: unset;
  width: calc(50% - 5px);
  color: #fff !important;
  background: rgba(246, 246, 246, 0.1) !important;
  border-radius: 4px;
}

@media (max-width: 640px) {
  #header.opened>nav aside>* {
    width: 100%;
  }

  #header.opened>nav aside>*+* {
    margin-top: 10px;
  }
}

@media (min-width: 1025px) {
  #header.opened>nav aside>* {
    height: 50px;
  }
}

@media (min-width: 1025px) {
  #header.opened>nav aside>* {
    padding-left: 0;
  }
}

#header.opened>nav aside>*::before {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
}

#header.opened>nav .buttons {
  position: relative;
  margin-top: 30px;
  text-align: right;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

#header.opened>nav .buttons a {
  height: 30px;
  line-height: 28px;
  min-width: 80px;
  padding: 0 15px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  font-size: 14px;
}

#header.opened>nav .buttons a:last-child {
  width: 115px;
}

#header.opened>nav .buttons a:hover {
  color: #212121;
  background: #fff;
  border: 1px solid #fff;
}

@media (max-width: 1024px) {
  #header.opened>nav .buttons a {
    height: 40px;
    line-height: 38px;
  }

  #header.opened>nav .buttons a:nth-child(-n+2) {
    width: calc(50% - 5px);
    margin-top: 50px;
  }

  #header.opened>nav .buttons a:last-child {
    position: absolute;
    left: unset;
    right: 0;
    top: 0;
    width: calc(50% - 5px);
  }
}

#header.opened>div .menuToggle {
  width: 40px;
  height: 40px;
  background: none;
}

#header.opened>div .menuToggle::before,
#header.opened>div .menuToggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 25px;
  height: 2px;
  background: #212121;
}

#header.opened>div .menuToggle::before {
  transform: rotate(45deg);
}

#header.opened>div .menuToggle::after {
  transform: rotate(-45deg);
}

#header>div {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 1480px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #header>div {
    height: 90px;
  }
}

@media (max-width: 1024px) {
  #header>div {
    height: 60px;
  }
}

#header>div>.h1 {
  background: url("../images/gwell/logo.svg") no-repeat center;
  background-size: 100%;
}

#header>div>.h1 a {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 1025px) {
  #header>div>.h1 {
    width: 122px;
    height: 28px;
  }
}

@media (max-width: 1024px) {
  #header>div>.h1 {
    width: 90px;
    height: 21px;
  }
}

#header>div .my {
  height: 21px;
  background: url("../images/icon/iconMy.svg") no-repeat left center;
}

@media (min-width: 1025px) {
  #header>div .my {
    position: relative;
    right: 70px;
    padding-left: 30px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 21px;
  }
}

@media (max-width: 1024px) {
  #header>div .my {
    position: absolute;
    right: 60px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    background-position: center center;
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
  }
}

#header>div .menuToggle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 40px;
  height: 40px;
  background-size: 21px;
}

@media (min-width: 1025px) {
  #header>div .menuToggle {
    background: url("../images/icon/iconMenu3.svg") no-repeat center;
  }
}

@media (max-width: 1024px) {
  #header>div .menuToggle {
    background: url("../images/icon/iconMenu2.svg") no-repeat center;
  }
}

@media (min-width: 1025px) {
  #header>div>nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    max-width: 652px;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }

  #header>div>nav a.active,
  #header>div>nav a:hover {
    font-weight: 700;
  }

  #header>div>nav a {
    width: 124px;
    margin: 0 20px;
    text-align: center;
  }
}

#header>nav {
  overflow: hidden;
  background: #fff;
}

#header>nav .btnTop>button {
  display: none;
}

@media (min-width: 1025px) {
  #header>nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 90px;
    max-height: 0;
  }

  #header>nav::before {
    z-index: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 1px;
    height: 1px;
    background: #E1E1E1;
  }

  #header>nav>div {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1240px;
    min-width: 315px;
    padding-left: 20px;
    padding-right: 20px;
    padding-left: 17px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
  }

  #header>nav section {
    width: 124px;
    padding: 45px 0 50px;
    text-align: center;
    margin: 0 20px;
  }

  #header>nav section.hovered {
    z-index: 1;
    position: relative;
    padding-top: 43px;
    border-top: 2px solid #46296E;
  }

  #header>nav section ul {
    font-size: 16px;
    line-height: 1.1;
  }

  #header>nav section ul li+li {
    margin-top: 20px;
  }

  #header>nav section ul a {
    color: #666;
  }

  #header>nav section ul a:hover {
    font-weight: 500;
    color: #212121;
  }

  #header>nav section ul li.active a {
    font-weight: 700;
    color: #46296E;
  }

  #header>nav aside {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1480px;
    padding-right: 20px;
    padding-left: 20px;
  }

  #header>nav aside>* {
    position: absolute;
    right: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 163px;
    height: 50px;
  }

  #header>nav aside>*:first-child {
    top: 40px;
  }

  #header>nav aside>*:last-child {
    top: 100px;
  }
}

@media (max-width: 1024px) {
  #header>nav {
    display: none;
    width: 100%;
    height: calc(100vh - 60px);
    height: calc(var(--vh, 1vh) * 100 - 60px);
    padding-top: 80px;
    overflow: auto;
    border-top: 1px solid #E1E1E1;
  }

  #header>nav>div {
    padding: 0 20px;
  }

  #header>nav>div section {
    padding-bottom: 30px;
  }

  #header>nav>div section button {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.02em;
    font-weight: 500;
  }

  #header>nav>div section ul {
    max-height: 0;
    transition: max-height 0.3s;
    overflow: hidden;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
    font-weight: 500;
  }

  #header>nav>div section ul li {
    padding-top: 20px;
  }

  #header>nav>div section ul li.active {
    color: #fff;
  }

  #header>nav>div section.opened ul {
    max-height: 400px;
  }

  #header>nav>div section.active button {
    font-weight: 700;
    color: #fff;
  }

  #header>nav aside {
    width: 100%;
    margin-top: 45px;
  }

  #header>nav aside>* {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 60px;
    padding-left: 20px;
    color: #fff !important;
    background: rgba(246, 246, 246, 0.1) !important;
    border-radius: 4px;
  }

  #header>nav aside>*::before {
    -moz-filter: grayscale(1) brightness(100);
    -ms-filter: grayscale(1) brightness(100);
    -o-filter: grayscale(1) brightness(100);
    filter: grayscale(1) brightness(100);
  }
}

#header>nav aside>* {
  background: #f6f6f6;
  font-size: 16px;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: #37234D;
}

#header>nav aside>*::before {
  content: "";
  margin-right: 10px;
  width: 20px;
  height: 20px;
  background: url("../images/icon/iconCalendar2.svg") no-repeat center;
  background-size: 20px;
}

body:not(.myinfoActive) #myinfo {
  display: none;
}

@media (min-width: 1025px) {
  body.myinfoActive #header {
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 1024px) {
  body.myinfoActive #header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: #fff;
  }
}

#myinfo {
  z-index: 11;
  position: fixed;
  left: 0;
  width: 100%;
  color: #fff;
}

@media (min-width: 1025px) {
  #myinfo {
    top: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  #myinfo>div {
    position: absolute;
    right: 0;
    top: 0;
    width: 452px;
    height: 100%;
    padding-right: 80px;
    padding-left: 60px;
    padding-bottom: 70px;
    overflow-y: auto;
    background: #2B1A3C url("../images/gwell/bgMyinfo.png") no-repeat center;
    background-size: cover;
  }

  #myinfo .close {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 482px;
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
    margin: auto;
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    border-radius: 50%;
  }

  #myinfo .close::before,
  #myinfo .close::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 18px;
    height: 1px;
    background: #fff;
  }

  #myinfo .close::before {
    transform: rotate(45deg);
  }

  #myinfo .close::after {
    transform: rotate(-45deg);
  }

  #myinfo .btnTop {
    position: absolute;
    top: 30px;
    right: 0;
    padding-right: 80px;
    z-index: 50;
  }

  #myinfo .btnTop button.my {
    position: relative;
    top: 2px;
    padding-left: 30px;
    font-size: 18px;
    font-weight: 500;
    height: 21px;
    -moz-filter: grayscale(0%) brightness(100) !important;
    -ms-filter: grayscale(0%) brightness(100) !important;
    -o-filter: grayscale(0%) brightness(100) !important;
    filter: grayscale(0%) brightness(100) !important;
    background: url(../images/icon/iconMy.svg) no-repeat left center;
  }

  #myinfo .btnTop button.menuToggle {
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
    width: 21px;
    height: 21px;
    margin-left: 40px;
    -moz-filter: grayscale(0%) brightness(100) !important;
    -ms-filter: grayscale(0%) brightness(100) !important;
    -o-filter: grayscale(0%) brightness(100) !important;
    filter: grayscale(0%) brightness(100) !important;
    background: url("../images/icon/iconMenu3.svg") no-repeat center;
    background-size: 100%;
  }
}

@media (max-width: 1024px) {
  #myinfo {
    top: 60px;
    height: calc(100vh - 60px);
    height: calc(var(--vh, 1vh) * 100 - 60px);
    overflow: auto;
    padding: 45px 20px 100px;
    background: url("../images/gwell/bgMyinfo.jpg") no-repeat center;
    background-size: cover;
  }

  #myinfo .btnTop {
    display: none;
  }
}

@media (min-width: 1025px) {
  #myinfo .loggedOut {
    padding-top: 208px;
  }
}

@media (min-width: 1025px) {
  #myinfo .loggedOut>div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 40px;
  }
}

#myinfo .loggedOut>div a {
  line-height: 50px;
  border-radius: 2px;
  background: #fff;
  text-align: center;
  color: #212121;
}

@media (min-width: 1025px) {
  #myinfo .loggedOut>div a {
    width: 150px;
  }
}

@media (max-width: 1024px) {
  #myinfo .loggedOut>div a {
    display: block;
  }

  #myinfo .loggedOut>div a+a {
    margin-top: 15px;
  }
}

@media (min-width: 1025px) {
  #myinfo .loggedIn {
    padding-top: 116px;
  }
}

#myinfo .loggedIn .form .selectBox {
  position: relative;
  margin-top: 20px;
}

#myinfo .loggedIn .form .selectBox>button {
  position: relative;
  width: 100%;
  padding: 0 70px 0 20px;
  height: 50px;
  line-height: 50px;
  background: #4b395f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  border-radius: 30px;
}

#myinfo .loggedIn .form .selectBox>button::after {
  position: absolute;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 1px 1px;
  border-color: #fff;
  border-style: solid;
  transform: rotate(-45deg);
  top: 20px;
  right: 20px;
}

#myinfo .loggedIn .form .selectBox>button.active::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 1px 1px;
  border-color: #fff;
  border-style: solid;
  transform: rotate(135deg);
  top: 25px;
  right: 20px;
}

#myinfo .loggedIn .form .selectBox .down {
  display: none;
  position: relative;
  padding: 20px;
  margin-top: 10px;
  z-index: 20;
  background: #fff;
  border-radius: 4px;
}

#myinfo .loggedIn .form .selectBox .down>button {
  font-size: 14px;
  color: #666;
}

#myinfo .loggedIn .form .selectBox .down>button.selected,
#myinfo .loggedIn .form .selectBox .down>button:hover {
  font-weight: 700;
  color: #2B1A3B;
}

#myinfo .loggedIn .form .selectBox .down>button+button {
  margin-top: 17px;
}

@media (max-width: 1024px) {
  #myinfo .loggedIn .btn {
    margin-top: 30px;
    text-align: right;
  }
}

#myinfo .loggedIn .btn>button {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

@media (min-width: 1025px) {
  #myinfo .loggedIn .btn>button {
    position: absolute;
    right: 80px;
    bottom: 40px;
    width: 80px;
    line-height: 28px;
  }
}

@media (max-width: 1024px) {
  #myinfo .loggedIn .btn>button {
    width: 100px;
    line-height: 38px;
  }
}

@media (min-width: 1025px) {
  #myinfo .loggedIn>ul {
    padding-top: 55px;
  }
}

@media (max-width: 1024px) {
  #myinfo .loggedIn>ul {
    padding-top: 45px;
  }
}

#myinfo .loggedIn>ul>li {
  position: relative;
}

#myinfo .loggedIn>ul>li+li {
  margin-top: 22px;
}

#myinfo .loggedIn>ul>li>a,
#myinfo .loggedIn>ul>li>button {
  text-align: left;
  display: block;
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 1025px) {

  #myinfo .loggedIn>ul>li>a,
  #myinfo .loggedIn>ul>li>button {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }
}

@media (max-width: 1024px) {

  #myinfo .loggedIn>ul>li>a,
  #myinfo .loggedIn>ul>li>button {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
    font-weight: 700;
  }
}

@media (min-width: 1025px) {
  #myinfo .loggedIn>ul>li>button {
    position: relative;
  }

  #myinfo .loggedIn>ul>li>button::before,
  #myinfo .loggedIn>ul>li>button::after {
    content: "";
    position: absolute;
    right: 0;
    top: 11px;
    height: 1px;
    width: 14px;
    background: #fff;
  }

  #myinfo .loggedIn>ul>li>button::after {
    transform: rotate(90deg);
  }
}

@media (max-width: 1024px) {

  #myinfo .loggedIn>ul>li>button::before,
  #myinfo .loggedIn>ul>li>button::after {
    content: "";
    position: absolute;
    right: 0;
    top: 11px;
    height: 1px;
    width: 14px;
    background: #fff;
  }

  #myinfo .loggedIn>ul>li>button::after {
    transform: rotate(90deg);
  }
}

#myinfo .loggedIn>ul>li ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}

@media (min-width: 1025px) {
  #myinfo .loggedIn>ul>li ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  #myinfo .loggedIn>ul>li ul li:nth-child(odd) {
    width: 150px;
  }

  #myinfo .loggedIn>ul>li ul li:nth-child(even) {
    width: 117px;
  }

  #myinfo .loggedIn>ul>li ul li {
    padding-top: 10px;
  }

  #myinfo .loggedIn>ul>li ul li a {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    color: #B5ABC1;
  }

  #myinfo .loggedIn>ul>li ul li a:hover {
    color: #fff;
  }
}

@media (max-width: 1024px) {
  #myinfo .loggedIn>ul>li ul li {
    margin-top: 10px;
  }

  #myinfo .loggedIn>ul>li ul li a {
    display: block;
    padding: 0 15px;
    border-radius: 3px;
    background: none;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
    line-height: 50px;
    color: #b5abc1;
  }

  #myinfo .loggedIn>ul>li ul li a:hover {
    background: none;
    font-weight: 700;
    color: #fff;
  }
}

#myinfo .loggedIn>ul>li.active button::after {
  display: none;
}

@media (min-width: 1025px) {
  #myinfo .loggedIn>ul>li.active button::after {
    transform: rotate(135deg);
    bottom: 0;
  }
}

@media (min-width: 1025px) {
  #myinfo .loggedIn>ul>li.active ul {
    max-height: 200px;
    padding: 20px 0;
  }
}

@media (max-width: 1024px) {
  #myinfo .loggedIn>ul>li.active ul {
    max-height: 550px;
    padding-top: 10px;
  }
}

@media (min-width: 1025px) {
  #myinfo .h1 {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
  }
}

@media (max-width: 1024px) {
  #myinfo .h1 {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
  }
}

#footer {
  background: #212121;
  word-break: keep-all;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  color: #b1b1b1;
}

#footer>div {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 60px;
  padding-bottom: 60px;
}

#footer .h1 {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  margin-bottom: 30px;
  width: 159px;
  height: 27px;
  background: url("../images/shinyoung/common/logoWhite.svg") no-repeat center;
}

#footer .info {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

@media (max-width: 640px) {
  #footer .info {
    display: block;
  }

  #footer .info span {
    display: none;
  }
}

#footer .copyright {
  margin-top: 10px;
}

@media (min-width: 386px) {
  #footer .copyright br {
    display: none;
  }
}

@media (min-width: 1025px) {
  #footer .familySite {
    position: absolute;
    right: 20px;
    top: 60px;
    width: 188px;
  }
}

@media (max-width: 1024px) {
  #footer .familySite {
    position: relative;
    margin-top: 30px;
  }
}

#footer .familySite button {
  position: relative;
  width: 100%;
  height: 40px;
  padding-left: 17px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  text-align: left;
  color: #fff;
}

#footer .familySite button::before,
#footer .familySite button::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 17px;
  margin: auto;
  width: 18px;
  height: 1px;
  background: #fff;
}

#footer .familySite button:not(.active)::after {
  transform: rotate(90deg);
}

#footer .familySite ul {
  z-index: 10;
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  padding: 0 17px 20px;
  border-color: #c8c8c8;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-radius: 2px 2px 0 0;
  background: #111;
  overflow: auto;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  color: #c8c8c8;
}

@media (min-width: 1025px) {
  #footer .familySite ul {
    height: 150px;
  }
}

@media (max-width: 1024px) {
  #footer .familySite ul {
    height: 260px;
  }
}

#footer .familySite ul strong {
  display: block;
  padding-top: 20px;
  font-weight: 700;
  color: #fff;
}

#footer .familySite ul li+li {
  margin-top: 5px;
}

@media (min-width: 1025px) {
  #footer .terms {
    position: absolute;
    bottom: 80px;
    right: 136px;
  }
}

@media (max-width: 1024px) {
  #footer .terms {
    margin-top: 30px;
  }
}

#footer .terms a:hover {
  color: #fff;
}

#footer .sns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: 85px;
}

@media (min-width: 1025px) {
  #footer .sns {
    position: absolute;
    bottom: 72px;
    right: 20px;
  }
}

@media (max-width: 1024px) {
  #footer .sns {
    margin-top: 30px;
  }
}

#footer .sns>* {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 35px;
  height: 35px;
  background-position: center;
  background-repeat: no-repeat;
}

#footer .sns .youtube {
  background-image: url("../images/icon/iconYoutube3.svg");
}

#footer .sns .instagram {
  background-image: url("../images/icon/iconInstagram2.svg");
}

.jump2top {
  z-index: 10;
  position: sticky;
  display: none;
  bottom: 0;
}

@media (min-width: 1025px) {
  .jump2top {
    padding-bottom: 40px;
  }
}

@media (max-width: 1024px) {
  .jump2top {
    padding-bottom: 20px;
  }
}

.jump2top button {
  z-index: 1;
  position: absolute;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 50px;
  height: 50px;
  border: 1px solid #999;
  background: #37234D url("../images/icon/iconArrowInvert2.svg") no-repeat center;
}

@media (min-width: 1025px) {
  .jump2top button {
    right: 40px;
    bottom: 40px;
  }
}

@media (max-width: 1024px) {
  .jump2top button {
    right: 20px;
    bottom: 20px;
  }
}

#contents {
  min-height: calc(100vh + 0px);
  min-height: calc(var(--vh, 1vh) * 100 + 0px);
}

@media (min-width: 1025px) {
  #contents {
    margin-top: -91px;
  }
}

@media (max-width: 1024px) {
  #contents {
    margin-top: -61px;
  }
}

#contents.sales .contentHeader {
  background-image: url("../images/gwell/vi/viSales.jpg");
}

#contents.cs .contentHeader {
  background-image: url("../images/gwell/vi/viCs.jpg");
}

#contents.pr .contentHeader {
  background-image: url("../images/gwell/vi/viPr.jpg");
}

#contents .contentHeader {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
}

@media (min-width: 1025px) {
  #contents .contentHeader {
    margin-bottom: 100px;
    height: 560px;
  }
}

@media (max-width: 1024px) {
  #contents .contentHeader {
    margin-bottom: 50px;
    height: 250px;
  }
}

#contents .contentHeader>div {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 1024px) {
  #contents .contentHeader>div {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    height: 250px;
    padding-top: 60px;
  }
}

@media (min-width: 1025px) {
  #contents .contentHeader div>.h1 {
    padding-top: 248px;
  }
}

#contents .contentHeader p {
  margin-top: 12px;
}

#contents .contentHeader .breadcrumb {
  position: absolute;
  right: 20px;
  top: 520px;
}

@media (min-width: 1025px) {
  #contents .contentHeader .breadcrumb {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
}

#contents .contentHeader .breadcrumb>li {
  position: relative;
}

#contents .contentHeader .breadcrumb>li+li {
  margin-left: 23px;
  padding-left: 23px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

#contents .contentHeader .breadcrumb>li a.home {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 16px;
  height: 17px;
  background: url("../images/icon/iconHome2.svg") no-repeat center;
}

#contents .contentHeader .breadcrumb>li button {
  position: relative;
  width: 160px;
  height: 18px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  line-height: 18px;
  font-weight: 500;
  text-align: left;
}

#contents .contentHeader .breadcrumb>li button::after {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 2px 2px;
  border-color: #fff;
  border-style: solid;
  transform: rotate(-45deg);
}

#contents .contentHeader .breadcrumb>li button.active {
  font-weight: 700;
}

#contents .contentHeader .breadcrumb>li button.active::after {
  top: 10px;
  transform: rotate(135deg);
}

#contents .contentHeader .breadcrumb>li button.active+div {
  max-height: 400px;
}

#contents .contentHeader .breadcrumb>li div {
  position: absolute;
  left: -20px;
  right: -45px;
  max-height: 0;
  padding: 0 20px;
  overflow: hidden;
  color: #212121;
  transition: max-height 0.4s ease-in-out;
}

#contents .contentHeader .breadcrumb>li div ul {
  z-index: 3;
  position: relative;
  margin-top: 1.125em;
  margin-bottom: 20px;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 25px;
  -ms-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.102);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.102);
  background: #fff;
  line-height: 2.5em;
  white-space: nowrap;
}

#contents .contentHeader .breadcrumb>li div ul a:hover,
#contents .contentHeader .breadcrumb>li div ul a:focus,
#contents .contentHeader .breadcrumb>li div ul li.selected {
  color: #46296E;
}

#contents .contentHeader .breadcrumb>li div ul li.selected {
  font-weight: 700;
}

#contents .contentHeader .breadcrumb>li div ul::before {
  content: "";
  position: absolute;
  top: -32px;
  right: 22px;
  display: block;
  -moz-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  -ms-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  -o-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 8px;
  border-color: transparent transparent #fff transparent;
}

.popNotice {
  z-index: 99999;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.popNotice>div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-height: calc(100vh -40px);
  max-height: calc(var(--vh, 1vh) * 100 -40px);
  overflow: auto;
  background: #fff;
}

@media (min-width: 1025px) {
  .popNotice>div {
    width: 400px;
    height: 550px;
  }
}

@media (max-width: 1024px) {
  .popNotice>div {
    width: 300px;
    height: 417px;
  }
}

.popNotice .swiper {
  position: relative;
}

@media (min-width: 1025px) {
  .popNotice .swiper img {
    width: 400px;
    height: 490px;
  }
}

@media (max-width: 1024px) {
  .popNotice .swiper img {
    width: 300px;
    height: 367.5px;
  }
}

.popNotice .swiper .swiper-pagination-bullet {
  background: #fff;
}

.popNotice .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #a5a5a5;
}

.popNotice .swiper .btnPrev,
.popNotice .swiper .btnNext {
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border-radius: 50%;
  background: #fff;
}

.popNotice .swiper .btnPrev::after,
.popNotice .swiper .btnNext::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

@media (min-width: 1025px) {

  .popNotice .swiper .btnPrev,
  .popNotice .swiper .btnNext {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 1024px) {

  .popNotice .swiper .btnPrev,
  .popNotice .swiper .btnNext {
    width: 25px;
    height: 25px;
  }
}

@media (min-width: 1025px) {
  .popNotice .swiper .btnPrev {
    left: 15px;
  }

  .popNotice .swiper .btnPrev::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(45deg);
    left: 5px;
  }
}

@media (max-width: 1024px) {
  .popNotice .swiper .btnPrev {
    left: 10px;
  }

  .popNotice .swiper .btnPrev::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(45deg);
    left: 3px;
  }
}

@media (min-width: 1025px) {
  .popNotice .swiper .btnNext {
    right: 15px;
  }

  .popNotice .swiper .btnNext::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-135deg);
    right: 5px;
  }
}

@media (max-width: 1024px) {
  .popNotice .swiper .btnNext {
    right: 10px;
  }

  .popNotice .swiper .btnNext::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-135deg);
    right: 3px;
  }
}

.popNotice footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  color: #212121;
}

.popNotice footer button {
  width: 50%;
}

.popNotice footer button+button {
  border-left: 1px solid #c8c8c8;
}

@media (min-width: 1025px) {
  .popNotice footer button {
    height: 60px;
  }
}

@media (max-width: 1024px) {
  .popNotice footer button {
    height: 50px;
  }
}

@media (min-width: 1025px) {
  #main {
    margin-top: -90px;
  }
}

@media (max-width: 1024px) {
  #main {
    margin-top: -60px;
  }
}

#main>.pagination {
  z-index: 5;
  position: fixed;
  left: 40px;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
}

@media (max-width: 1024px) {
  #main>.pagination {
    display: none;
  }
}

#main>.pagination button {
  font-size: 0;
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

#main>.pagination button+button {
  margin-top: 30px;
}

#main>.pagination button:not(.active) {
  background: #fff;
}

#main>.pagination button.active {
  background: #DAA23F;
}

#main>.pagination button.active::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #DAA23F;
}

#main>.pagination.colored button:not(.active) {
  background: #918F91;
}

#main .mainPopup {
  z-index: 5;
  position: absolute;
  transition: left 0.3s;
}

@media (min-width: 1025px) {
  #main .mainPopup {
    top: 120px;
    max-width: 100%;
    padding-right: 110px;
  }
}

@media (max-width: 1024px) {
  #main .mainPopup {
    top: 60px;
    width: 100%;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1510px) {
  #main .mainPopup:not(.active) {
    left: calc(-100% + 110px);
  }
}

@media screen and (min-width: 1025px) and (min-width: 1511px) {
  #main .mainPopup:not(.active) {
    left: -1400px;
  }
}

@media (max-width: 1024px) {
  #main .mainPopup:not(.active) {
    left: -100%;
  }
}

#main .mainPopup.active {
  left: 0;
}

#main .mainPopup .swiper {
  background: rgba(17, 17, 17, 0.8);
}

@media (min-width: 1025px) {
  #main .mainPopup .swiper {
    margin-left: unset;
    margin-right: unset;
    width: 100%;
    padding: 40px 30px 50px 20px;
  }
}

@media (max-width: 1024px) {
  #main .mainPopup .swiper {
    padding: 56px 0 135px;
  }
}

#main .mainPopup .swiper .popPagination {
  text-align: center;
}

@media (min-width: 1025px) {
  #main .mainPopup .swiper .popPagination {
    display: none;
  }
}

#main .mainPopup .swiper .popPagination .swiper-pagination-bullet {
  width: 4px;
  height: 4px;
  background: #fff;
  opacity: 0.6;
}

#main .mainPopup .swiper .popPagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 25px;
  border-radius: 2px;
  opacity: 1;
}

#main .mainPopup .swiper .swiper-wrapper {
  align-items: stretch;
}

@media (min-width: 1025px) {
  #main .mainPopup .swiper .swiper-wrapper {
    transform: none !important;
    flex-wrap: wrap;
  }
}

@media (max-width: 1024px) {
  #main .mainPopup .swiper .swiper-wrapper {
    margin-top: 30px;
  }
}

#main .mainPopup .swiper .swiper-wrapper .swiper-slide {
  background: #fff;
  word-break: keep-all;
}

@media (min-width: 1025px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide {
    width: 400px;
    height: unset;
    margin-left: 10px;
    margin-top: 10px;
    padding-bottom: 0px;
  }
}

@media (max-width: 1024px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide {
    margin-left: 20px;
    width: 320px;
    padding-bottom: 0px;
  }

  #main .mainPopup .swiper .swiper-wrapper .swiper-slide:last-child {
    margin-right: 20px;
  }
}

#main .mainPopup .swiper .swiper-wrapper .swiper-slide .img {
  width: 400px;
  height: 600px;
}

#main .mainPopup .swiper .swiper-wrapper .swiper-slide .img img {
  width: 100%;
  display: block;
}

@media (max-width: 1024px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .img {
    width: 100%;
    height: auto;
  }
}

#main .mainPopup .swiper .swiper-wrapper .swiper-slide .info {
  text-align: center;
}

@media (min-width: 1025px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .info {
    padding: 30px 20px;
  }
}

@media (max-width: 1024px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .info {
    min-height: 260px;
    padding: 38px 20px;
  }
}

#main .mainPopup .swiper .swiper-wrapper .swiper-slide .info>span {
  color: #666;
}

@media (min-width: 1025px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .info>span {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }
}

@media (max-width: 1024px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .info>span {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }
}

#main .mainPopup .swiper .swiper-wrapper .swiper-slide .info p {
  font-weight: 700;
}

@media (min-width: 1025px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .info p {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .info p {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

#main .mainPopup .swiper .swiper-wrapper .swiper-slide .info p span {
  display: block;
  margin-top: 10px;
  font-weight: 400;
}

@media (min-width: 1025px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .info p span {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }
}

@media (max-width: 1024px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .info p span {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }
}

#main .mainPopup .swiper .swiper-wrapper .swiper-slide .info dl {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

@media (min-width: 1025px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .info dl {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }
}

@media (max-width: 1024px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .info dl {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }
}

#main .mainPopup .swiper .swiper-wrapper .swiper-slide .info dl dt {
  padding: 0 25px;
  background: #37234D;
  color: #fff;
}

@media (min-width: 1025px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .info dl dt {
    margin: 12px 0;
    border-radius: 13px;
    line-height: 26px;
  }
}

@media (max-width: 1024px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .info dl dt {
    margin: 15px 0 14px;
    border-radius: 16px;
    line-height: 32px;
  }
}

#main .mainPopup .swiper .swiper-wrapper .swiper-slide .button {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: stretch;
  align-items: flex-start;
}

#main .mainPopup .swiper .swiper-wrapper .swiper-slide .button>* {
  flex-basis: 0;
  flex-shrink: 1;
  flex-grow: 1;
  width: 0;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

@media (min-width: 1025px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .button>* {
    height: 40px;
  }
}

@media (max-width: 1024px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .button>* {
    height: 50px;
  }
}

#main .mainPopup .swiper .swiper-wrapper .swiper-slide .button>*:first-child {
  color: #212121;
}

@media (min-width: 1025px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .button>*:first-child {
    border-top: 1px solid #E1E1E1;
  }
}

@media (max-width: 1024px) {
  #main .mainPopup .swiper .swiper-wrapper .swiper-slide .button>*:first-child {
    background: #C9C9C9;
  }
}

#main .mainPopup .swiper .swiper-wrapper .swiper-slide .button>*:nth-child(2) {
  background: #37234D;
  color: #fff;
}

#main .mainPopup>button {
  z-index: 1;
  position: absolute;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
}

@media (min-width: 1025px) {
  #main .mainPopup>button {
    top: 0;
    width: 50px;
    height: 140px;
    background: url("../images/gwell/main/btnPopupW.svg") no-repeat center;
    right: 60px;
  }
}

@media (max-width: 1024px) {
  #main .mainPopup>button {
    top: 20px;
    right: -40px;
    width: 40px;
    height: 40px;
    background: url("../images/gwell/main/btnPopup.svg") no-repeat center;
  }
}

@media (min-width: 1025px) {
  #main .mainPopup.active>button {
    background-image: url("../images/gwell/main/btnCloseW.svg");
  }
}

@media (max-width: 1024px) {
  #main .mainPopup.active>button {
    right: 0;
    background-image: url("../images/gwell/main/btnClose.svg");
  }
}

#main .vi {
  position: relative;
  overflow: hidden;
}

#main .vi.brighten {
  z-index: 5;
}

#main .vi.gwell>div {
  left: 0;
}

@media (min-width: 1025px) {
  #main .vi.brighten>div {
    left: calc(-100% + 120px);
  }
}

@media (max-width: 1024px) {
  #main .vi.brighten>div {
    left: -100%;
  }
}

#main .vi>div {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  transition: all 1.5s ease-in-out;
}

@media (min-width: 1025px) {
  #main .vi>div {
    width: calc(200% - 120px);
  }
}

@media (max-width: 1024px) {
  #main .vi>div {
    width: 200%;
  }
}

#main .vi>div>section {
  position: relative;
  width: 50%;
}

@media (min-width: 1025px) {
  #main .vi>div>section.brighten {
    -ms-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  }
}

#main .vi.gwell section.gwell .h1,
#main .vi.brighten section.brighten .h1 {
  opacity: 0;
}

@media (min-width: 1025px) {
  #main .vi.gwell .h1 {
    left: 0;
  }
}

@media (max-width: 1024px) {
  #main .vi.gwell .h1 {
    left: -80px;
  }
}

@media (min-width: 1025px) {
  #main .vi.gwell .h1 button {
    background: url("../images/gwell/main/logoBrighten.svg") no-repeat center;
  }
}

@media (max-width: 1024px) {
  #main .vi.gwell .h1 button {
    background: url("../images/gwell/main/btnBrighten.svg") no-repeat center;
  }
}

@media (min-width: 1025px) {
  #main .vi.brighten .h1 {
    right: 0;
  }
}

@media (max-width: 1024px) {
  #main .vi.brighten .h1 {
    right: -80px;
  }
}

@media (min-width: 1025px) {
  #main .vi.brighten .h1 button {
    background: url("../images/gwell/main/logoGwell.svg") no-repeat center;
  }
}

@media (max-width: 1024px) {
  #main .vi.brighten .h1 button {
    background: url("../images/gwell/main/btnGwell.svg") no-repeat center;
  }
}

#main .vi.gwell section.brighten,
#main .vi.brighten section.gwell {
  z-index: 3;
}

@media (min-width: 1025px) {
  #main .vi section.gwell .swiper .swiper-slide p {
    min-height: 270px;
  }
}

@media (max-width: 1024px) {
  #main .vi section.gwell .swiper .swiper-slide p {
    min-height: 195px;
  }
}

#main .vi .h1 {
  z-index: 2;
  position: absolute;
  opacity: 1;
  transition: all 1.5s ease-in-out;
}

@media (min-width: 1025px) {
  #main .vi .h1 {
    top: 0;
    bottom: 0;
    width: 60px;
    background: rgba(33, 33, 33, 0.5);
  }
}

@media (max-width: 1024px) {
  #main .vi .h1 {
    bottom: 0;
  }
}

#main .vi .h1 button {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
}

@media (min-width: 1025px) {
  #main .vi .h1 button {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 1024px) {
  #main .vi .h1 button {
    width: 80px;
    height: 80px;
  }
}

#main .vi .swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  height: calc(100vh - 0px);
  height: calc(var(--vh, 1vh) * 100 - 0px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}

/* #main .vi .swiper .swiper-slide > p {
  color: rgba(255, 255, 255, 1);
  mix-blend-mode: difference;
} */
@media (min-width: 1025px) {
  #main .vi .swiper .swiper-slide {
    max-height: 100%;
    min-height: 600px;
    padding-top: 90px;
  }
}

@media (max-width: 1024px) {
  #main .vi .swiper .swiper-slide {
    max-height: 760px;
    min-height: 375px;
    padding-top: 60px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

#main .vi .swiper .swiper-slide video {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

#main .vi .swiper .swiper-slide p {
  word-break: keep-all;
}

@media (min-width: 1025px) {
  #main .vi .swiper .swiper-slide p {
    margin-bottom: 60px;
    font-size: 70px;
    line-height: 90px;
  }
}

@media (max-width: 1024px) {
  #main .vi .swiper .swiper-slide p {
    margin-bottom: 45px;
    font-size: 50px;
    line-height: 65px;
  }
}

#main .vi .swiper .swiper-slide>div span {
  padding: 0 39px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}

#main .vi .swiper .swiper-slide>div span b {
  display: inline-block;
  color: #fff;
}

#main .vi .swiper .swiper-slide>div span b::after {
  content: "";
  display: inline-block;
  margin: 0 13px;
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
}

#main .vi .swiper .swiper-slide>div button {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 15px;
  height: 15px;
  background: url("../images/gwell/main/iconArr.svg") no-repeat center;
}

#main .vi .swiper .swiper-slide>div button.btnGwellNext,
#main .vi .swiper .swiper-slide>div button.btnBrightenNext {
  transform: rotate(180deg);
}

@media (min-width: 1025px) {
  #main .vi .swiper.gwell .swiper-slide {
    padding-left: 200px;
    max-height: 100%;
  }
}

#main .vi .swiper.brighten .swiper-slide {
  text-align: center;
  /*&.case {
      @include flexJustify(flex-start);
      p {
          @include wide { padding-top: 100px; }
          @include middle { padding-top: 80px; }
      }
  }*/
}

#main .vi .swiper.brighten .swiper-slide>* {
  width: 100%;
}

#main .now {
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
  word-break: keep-all;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
}

@media (min-width: 1025px) {

  #main .now.case01 .swiper-slide:nth-child(1),
  #main .now.case02 .swiper-slide:nth-child(2),
  #main .now.case03 .swiper-slide:nth-child(3),
  #main .now.case04 .swiper-slide:nth-child(4) {
    background: rgba(38, 30, 51, 0.8);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }

  #main .now.case01 .swiper-slide:nth-child(1) em,
  #main .now.case02 .swiper-slide:nth-child(2) em,
  #main .now.case03 .swiper-slide:nth-child(3) em,
  #main .now.case04 .swiper-slide:nth-child(4) em {
    background: rgba(255, 255, 255, 0.1);
  }

  #main .now.case01 .swiper-slide:nth-child(1) dl,
  #main .now.case01 .swiper-slide:nth-child(1) a,
  #main .now.case02 .swiper-slide:nth-child(2) dl,
  #main .now.case02 .swiper-slide:nth-child(2) a,
  #main .now.case03 .swiper-slide:nth-child(3) dl,
  #main .now.case03 .swiper-slide:nth-child(3) a,
  #main .now.case04 .swiper-slide:nth-child(4) dl,
  #main .now.case04 .swiper-slide:nth-child(4) a {
    opacity: 1;
  }
}

#main .now header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  z-index: 2;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  padding: 0 20px;
}

@media (min-width: 1025px) {
  #main .now header {
    top: 73px;
    padding-left: 80px;
  }
}

@media (max-width: 1024px) {
  #main .now header {
    top: 50px;
  }
}

#main .now header .h1 {
  width: 100%;
  letter-spacing: 0 !important;
}

@media (min-width: 1025px) {
  #main .now header .h1 {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
    margin-bottom: 19px;
  }
}

@media (max-width: 1024px) {
  #main .now header .h1 {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    margin-bottom: 9px;
  }
}

#main .now header p {
  font-weight: 500;
}

@media (min-width: 1025px) {
  #main .now header p {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
  }
}

@media (max-width: 1024px) {
  #main .now header p {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

#main .now header a {
  position: relative;
  color: #fff;
  background: url("../images/gwell/main/iconCalendar.svg") no-repeat left center;
}

@media (min-width: 1025px) {
  #main .now header a {
    margin-left: 39px;
    padding-left: 34px;
    padding-right: 60px;
    line-height: 35px;
  }

  #main .now header a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 35px;
    height: 35px;
    background: url("../images/gwell/main/iconArr2.svg") no-repeat center;
  }
}

@media (max-width: 1024px) {
  #main .now header a {
    margin-left: 15px;
    padding-left: 32px;
  }
}

@media (min-width: 1025px) {
  #main .now footer {
    display: none;
  }
}

@media (max-width: 1024px) {
  #main .now footer {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
  }
}

#main .now footer p {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.015em;
  letter-spacing: 0.25em;
  font-weight: 700;
  width: auto;
  margin: 0 17px;
}

#main .now footer button {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  background: url("../images/gwell/main/iconArr3.svg") no-repeat center;
  width: 30px;
  height: 30px;
}

#main .now footer button:first-child {
  transform: rotate(180deg);
}

#main .now footer button:disabled {
  opacity: 0.5;
}

@media (min-width: 1025px) {
  #main .now .swiper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1025px) {
  #main .now .swiper .swiper-wrapper {
    transform: none !important;
    flex-wrap: nowrap;
    align-items: stretch;
  }
}

#main .now .swiper .swiper-slide {
  position: relative;
  height: calc(100vh - 0px);
  height: calc(var(--vh, 1vh) * 100 - 0px);
  transition: all 0.3s;
}

@media (min-width: 1025px) {
  #main .now .swiper .swiper-slide {
    max-height: 910px;
    min-height: 890px;
    width: 25%;
    height: 910px !important;
    padding-left: 60px;
    padding-top: 260px;
    padding-bottom: 50px;
    background-image: none !important;
  }

  #main .now .swiper .swiper-slide:first-child {
    padding-left: 80px;
  }

  #main .now .swiper .swiper-slide+.swiper-slide {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
  }
}

@media (max-width: 1024px) {
  #main .now .swiper .swiper-slide {
    max-height: 760px;
    min-height: 610px;
    padding-top: 100px;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
  }

  #main .now .swiper .swiper-slide>* {
    max-width: 100vw;
  }
}

#main .now .swiper .swiper-slide::before {
  content: "";
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  z-index: -1;
}

#main .now .swiper em {
  display: inline-block;
  text-align: center;
  color: #fff;
  transition: all 0.3s;
}

@media (min-width: 1025px) {
  #main .now .swiper em {
    width: 100px;
    line-height: 40px;
    margin-bottom: 34px;
    background: #37234D;
    border-radius: 20px;
  }
}

@media (max-width: 1024px) {
  #main .now .swiper em {
    width: 90px;
    line-height: 30px;
    margin-bottom: 23px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
  }
}

@media (max-width: 1024px) {
  #main .now .swiper p {
    font-weight: 700;
  }
}

#main .now .swiper dl {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  color: #fff;
  transition: all 0.3s;
}

@media (min-width: 1025px) {
  #main .now .swiper dl {
    margin-top: 25px;
    opacity: 0;
  }
}

@media (max-width: 1024px) {
  #main .now .swiper dl {
    margin-top: 17px;
  }
}

@media (min-width: 1025px) {
  #main .now .swiper dl>* {
    margin-top: 17px;
  }
}

@media (max-width: 1024px) {
  #main .now .swiper dl>* {
    margin-top: 15px;
  }
}

@media (min-width: 1025px) {
  #main .now .swiper dl dt {
    width: 55px;
  }
}

@media (max-width: 1024px) {
  #main .now .swiper dl dt {
    width: 90px;
  }
}

#main .now .swiper dl dd {
  padding-right: 10px;
}

@media (min-width: 1025px) {
  #main .now .swiper dl dd {
    width: calc(100% - 55px);
  }
}

@media (max-width: 1024px) {
  #main .now .swiper dl dd {
    width: calc(100% - 90px);
  }
}

#main .now .swiper dl dd.graph {
  position: relative;
}

#main .now .swiper dl dd.graph p {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 70px;
  margin: auto;
  height: 5px;
  overflow: hidden;
  background: #E9E9E9;
  border-radius: 3px;
}

@media (min-width: 1025px) {
  #main .now .swiper dl dd.graph p {
    width: calc(100% - 100px);
  }
}

@media (max-width: 1024px) {
  #main .now .swiper dl dd.graph p {
    width: 125px;
  }
}

#main .now .swiper dl dd.graph p span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  background: #6700D8;
  border-radius: 0 3px 3px 0;
}

#main .now .swiper .swiper-slide>a {
  display: inline-block;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  line-height: 38px;
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s;
}

@media (min-width: 1025px) {
  #main .now .swiper .swiper-slide>a {
    width: 160px;
    margin-top: 47px;
    opacity: 0;
  }
}

@media (max-width: 1024px) {
  #main .now .swiper .swiper-slide>a {
    width: 140px;
    margin-top: 37px;
  }
}

#main>.info {
  position: relative;
  background-image: url("../images/gwell/main/bgInfo.jpg");
  background-position: center;
  background-size: cover;
  color: #fff;
}

@media (min-width: 1025px) {
  #main>.info {
    height: calc(100vh - 0px);
    height: calc(var(--vh, 1vh) * 100 - 0px);
    max-height: 890px;
    min-height: 600px;
    padding-left: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: stretch;
    align-items: flex-start;
  }
}

@media (max-width: 1024px) {
  #main>.info {
    padding-bottom: 50px;
  }
}

@media (max-width: 640px) {
  #main>.info {
    background-image: url("../images/gwell/main/bgInfoM.jpg");
  }
}

#main>.info>.h1 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 300;
}

@media (min-width: 1025px) {
  #main>.info>.h1 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
  }
}

@media (max-width: 1024px) {
  #main>.info>.h1 {
    padding-top: 58px;
  }
}

#main>.info>.h1 p {
  font-weight: 500;
}

#main>.info section {
  position: relative;
  z-index: 1;
}

@media (min-width: 1025px) {
  #main>.info section {
    border-left: 1px solid rgba(200, 200, 200, 0.2);
    flex-basis: 0;
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    padding-left: 80px;
  }

  #main>.info section+section {
    border-top: 1px solid rgba(200, 200, 200, 0.2);
  }
}

@media (max-width: 1024px) {
  #main>.info section {
    margin-top: 40px;
    padding-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
    border-top: 1px solid rgba(200, 200, 200, 0.2);
  }
}

#main>.info section header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

#main>.info section header .h1 {
  width: 100%;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}

@media (min-width: 1025px) {
  #main>.info section header .h1 {
    margin-bottom: 13px;
  }
}

@media (max-width: 1024px) {
  #main>.info section header .h1 {
    margin-bottom: 4px;
  }
}

#main>.info section header p {
  font-weight: 300;
  line-height: 35px !important;
}

@media (min-width: 1025px) {
  #main>.info section header p {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
  }
}

@media (max-width: 1024px) {
  #main>.info section header p {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

#main>.info section header a {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 35px;
  height: 35px;
  background: url("../images/gwell/main/iconArr2.svg") no-repeat center;
}

@media (min-width: 1025px) {
  #main>.info section header a {
    margin-left: 40px;
  }
}

@media (max-width: 1024px) {
  #main>.info section header a {
    margin-left: 23px;
  }
}

@media (min-width: 1025px) {
  #main>.info section ul {
    margin-top: 48px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
}

@media (max-width: 1024px) {
  #main>.info section ul {
    padding-top: 20px;
  }
}

@media (min-width: 1025px) {
  #main>.info section ul li+li {
    margin-left: 45px;
    padding-left: 45px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
  }
}

@media screen and (min-width: 1025px) and (max-width: 1180px) {
  #main>.info section ul li+li {
    margin-left: 30px;
    padding-left: 30px;
  }
}

@media (max-width: 1024px) {
  #main>.info section ul li {
    padding-top: 10px;
  }
}

#main>.info section ul a {
  font-weight: 500;
  color: #fff;
}

@media (min-width: 1025px) {
  #main>.info section ul a {
    line-height: 15px;
  }
}

@media (max-width: 1024px) {
  #main>.info section ul a {
    position: relative;
    display: block;
    width: 100%;
    line-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 21px;
    padding-left: 25px;
  }

  #main>.info section ul a::after {
    content: "";
    position: absolute;
    right: 25px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 6px;
    height: 12px;
    background: url("../images/gwell/main/iconArr.svg") no-repeat center;
    background-size: 100%;
    transform: rotate(180deg);
  }
}

@media (min-width: 1025px) {
  #main .pr {
    padding-bottom: 120px;
  }
}

@media screen and (min-width: 1025px) and (min-width: 1241px) {
  #main .pr {
    padding-left: calc((100vw - 1240px) / 2 + 318px);
  }
}

@media screen and (min-width: 1025px) and (max-width: 1240px) {
  #main .pr {
    padding-left: 298px;
  }
}

@media (max-width: 1024px) {
  #main .pr {
    padding-bottom: 100px;
  }
}

@media (min-width: 1025px) {
  #main .pr section {
    padding-top: 65px;
  }
}

@media (max-width: 1024px) {
  #main .pr section {
    padding-top: 55px;
  }
}

#main .pr section header {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #main .pr section header {
    position: absolute;
    left: 0;
    right: 0;
  }
}

@media (max-width: 1024px) {
  #main .pr section header {
    margin-bottom: 20px;
  }
}

@media (min-width: 1025px) {
  #main .pr section header .h1 {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
  }
}

@media (max-width: 1024px) {
  #main .pr section header .h1 {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (min-width: 1025px) {
  #main .pr section header div {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #main .pr section header div button {
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
    width: 40px;
    height: 40px;
    background: url("../images/gwell/main/iconArr4.svg") no-repeat center;
  }

  #main .pr section header div button:first-child {
    transform: rotate(180deg);
  }

  #main .pr section header div button+button {
    margin-left: 10px;
  }
}

@media (max-width: 1024px) {
  #main .pr section header div {
    display: none;
  }
}

#main .pr section .swiper.news {
  word-break: keep-all;
}

@media (max-width: 1024px) {
  #main .pr section .swiper.news {
    padding: 0 20px;
  }
}

@media (min-width: 1025px) {
  #main .pr section .swiper.news .swiper-slide {
    margin-right: 40px;
    width: 407px;
  }
}

@media (max-width: 1024px) {
  #main .pr section .swiper.news .swiper-slide {
    margin-right: 20px;
    width: 300px;
  }
}

#main .pr section .swiper.news .swiper-slide:hover .img span,
#main .pr section .swiper.news .swiper-slide:focus .img span {
  transform: scale(1.06);
}

#main .pr section .swiper.news .swiper-slide .img {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 57.739%;
  overflow: hidden;
  margin-bottom: 23px;
}

#main .pr section .swiper.news .swiper-slide .img span {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 0.3s;
}

#main .pr section .swiper.news .swiper-slide strong {
  display: block;
  display: -ms-flexbox;
  display: -moz-box;
  display: -webkit-box;
  -ms-box-align: center;
  -o-box-align: center;
  box-align: center;
  max-height: 3.2em;
  line-height: 1.6 !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: break-spaces;
  margin-bottom: 12px;
}

#main .pr section .swiper.news .swiper-slide p {
  display: block;
  display: -ms-flexbox;
  display: -moz-box;
  display: -webkit-box;
  -ms-box-align: center;
  -o-box-align: center;
  box-align: center;
  max-height: 3.25em;
  line-height: 1.625 !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: break-spaces;
}

#main .pr section .swiper.news .swiper-slide>span {
  display: block;
  font-weight: 300;
  margin-top: 12px;
}

@media (max-width: 1024px) {
  #main .pr section .swiper.sns {
    padding: 0 20px;
  }
}

#main .pr section .swiper.sns .swiper-slide {
  position: relative;
}

@media (min-width: 1025px) {
  #main .pr section .swiper.sns .swiper-slide {
    width: 218px;
    margin-right: 40px;
  }
}

@media (max-width: 1024px) {
  #main .pr section .swiper.sns .swiper-slide {
    width: 300px;
    margin-right: 20px;
  }
}

#main .pr section .swiper.sns .swiper-slide:hover p span,
#main .pr section .swiper.sns .swiper-slide:focus p span {
  transform: scale(1.06);
}

#main .pr section .swiper.sns .swiper-slide::before {
  z-index: 1;
  content: "";
  position: absolute;
  width: 45px;
  height: 45px;
  right: 20px;
  top: 20px;
  background-repeat: no-repeat;
  background-position: center;
}

#main .pr section .swiper.sns .swiper-slide.youtube::before {
  background-image: url("../images/gwell/main/iconYoutube.svg");
}

#main .pr section .swiper.sns .swiper-slide.instagram::before {
  background-image: url("../images/gwell/main/iconInsta.svg");
}

#main .pr section .swiper.sns .swiper-slide p {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

#main .pr section .swiper.sns .swiper-slide span {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: all 0.3s;
}

body.sequence01Brighten,
body.sequence02Brighten,
body.sequence03Brighten,
body.sequence04Brighten,
body.sequence01Gwell,
body.sequence02Gwell,
body.sequence03Gwell {
  overflow: hidden;
}

body.sequence01Brighten #story .storyVi .brighten01,
body.sequence01Gwell #story .storyVi .gwell01,
body.sequence02Brighten #story .storyVi .brighten02,
body.sequence02Gwell #story .storyVi .gwell02,
body.sequence03Brighten #story .storyVi .brighten03,
body.sequence03Gwell #story .storyVi .gwell03,
body.sequenceClearGwell #story .storyVi .gwell03,
body.sequence04Brighten #story .storyVi .brighten04,
body.sequenceClearBrighten #story .storyVi .brighten04 {
  opacity: 1;
}

@media (min-width: 1025px) {
  #story {
    margin: -90px 0 -40px;
  }
}

@media (max-width: 1024px) {
  #story {
    margin: -60px 0 -20px;
  }
}

#story .vod {
  position: relative;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  height: calc(100vh + 0px);
  height: calc(var(--vh, 1vh) * 100 + 0px);
}

@media (min-width: 1025px) {
  #story .vod {
    min-height: 700px;
    max-height: 890px;
  }
}

@media (max-width: 1024px) {
  #story .vod {
    min-height: 350px;
  }
}

#story .vod video {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: 0;
}

#story .vod .h1 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  z-index: 1;
  font-weight: 300;
}

@media (min-width: 1025px) {
  #story .vod .h1 {
    font-size: 50px;
    line-height: 62px;
    letter-spacing: -0.035em;
  }
}

@media (max-width: 1024px) {
  #story .vod .h1 {
    font-size: 40px;
    line-height: 52px;
    letter-spacing: -0.03em;
  }
}

#story .vod .h1 b {
  font-weight: 500;
}

#story .vod .h1.case {
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 1025px) {
  #story .vod .h1.case {
    font-size: 70px;
  }
}

@media (max-width: 1024px) {
  #story .vod .h1.case {
    font-size: 60px;
    line-height: 70px;
  }
}

#story .vod .h1 img {
  max-width: 100%;
}

#story .vod>span {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 37px;
  height: 42px;
  background: url("../images/gwell/story/iconArr.svg") no-repeat center bottom;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

@media (min-width: 1025px) {
  #story .vod>span {
    bottom: 51px;
  }
}

@media (max-width: 1024px) {
  #story .vod>span {
    bottom: 61px;
  }
}

#story .swiper.story {
  position: relative;
  color: #fff;
  overflow: hidden;
}

#story .swiper.story section {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  height: calc(100vh + 0px);
  height: calc(var(--vh, 1vh) * 100 + 0px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
}

@media (min-width: 1025px) {
  #story .swiper.story section {
    min-height: 700px;
    max-height: 890px;
  }
}

@media (max-width: 1024px) {
  #story .swiper.story section {
    min-height: 350px;
    max-height: 760px;
  }
}

#story .swiper.story section.brighten01 {
  background-image: url("../images/gwell/story/bgViBrighten01.jpg");
}

@media (max-width: 640px) {
  #story .swiper.story section.brighten01 {
    background-image: url("../images/gwell/story/bgViBrighten01M.jpg");
  }
}

#story .swiper.story section.brighten01 img:first-child {
  width: 100%;
  max-width: 682px;
}

@media (max-width: 640px) {
  #story .swiper.story section.brighten01 img:first-child {
    display: none;
  }
}

#story .swiper.story section.brighten02 {
  background-image: url("../images/gwell/story/bgViBrighten02.jpg");
}

@media (max-width: 640px) {
  #story .swiper.story section.brighten02 {
    background-image: url("../images/gwell/story/bgViBrighten02M.jpg");
  }
}

#story .swiper.story section.brighten02 div span::before {
  width: 33.3333333333%;
}

#story .swiper.story section.brighten03 {
  background-image: url("../images/gwell/story/bgViBrighten03.jpg");
}

@media (max-width: 640px) {
  #story .swiper.story section.brighten03 {
    background-image: url("../images/gwell/story/bgViBrighten03M.jpg");
  }
}

#story .swiper.story section.brighten03 div span::before {
  width: 66.6666666667%;
}

#story .swiper.story section.brighten04 {
  background-image: url("../images/gwell/story/bgViBrighten04.jpg");
}

@media (max-width: 640px) {
  #story .swiper.story section.brighten04 {
    background-image: url("../images/gwell/story/bgViBrighten04M.jpg");
  }
}

#story .swiper.story section.brighten04 div span::before {
  width: 100%;
}

#story .swiper.story section.gwell01 {
  background-image: url("../images/gwell/story/bgViGwell01.jpg");
}

@media (max-width: 640px) {
  #story .swiper.story section.gwell01 {
    background-image: url("../images/gwell/story/bgViGwell01M.jpg");
  }
}

#story .swiper.story section.gwell02 {
  background-image: url("../images/gwell/story/bgViGwell02.jpg");
}

@media (max-width: 640px) {
  #story .swiper.story section.gwell02 {
    background-image: url("../images/gwell/story/bgViGwell02M.jpg");
  }
}

#story .swiper.story section.gwell02 div span::before {
  width: 50%;
}

#story .swiper.story section.gwell03 {
  background-image: url("../images/gwell/story/bgViGwell03.jpg");
}

@media (max-width: 640px) {
  #story .swiper.story section.gwell03 {
    background-image: url("../images/gwell/story/bgViGwell03M.jpg");
  }
}

#story .swiper.story section.gwell03 div span::before {
  width: 100%;
}

#story .swiper.story section video {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: 0;
}

#story .swiper.story section .h1 {
  z-index: 1;
  font-weight: 300;
}

@media (min-width: 1025px) {
  #story .swiper.story section .h1 {
    font-size: 50px;
    line-height: 62px;
    letter-spacing: -0.035em;
  }
}

@media (max-width: 1024px) {
  #story .swiper.story section .h1 {
    font-size: 40px;
    line-height: 52px;
    letter-spacing: -0.03em;
  }
}

#story .swiper.story section .h1 b {
  font-weight: 500;
}

#story .swiper.story section .h1.case {
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 1025px) {
  #story .swiper.story section .h1.case {
    font-size: 70px;
  }
}

@media (max-width: 1024px) {
  #story .swiper.story section .h1.case {
    font-size: 60px;
    line-height: 70px;
  }
}

#story .swiper.story section .h1 img {
  max-width: 100%;
}

#story .swiper.story section p {
  color: #fff;
}

@media (min-width: 1025px) {
  #story .swiper.story section p {
    margin-top: 17px;
  }
}

@media (max-width: 1024px) {
  #story .swiper.story section p {
    margin-top: 27px;
  }
}

#story .swiper.story section div {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

#story .swiper.story section div span {
  position: relative;
  margin: 0 10px;
  width: 130px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

#story .swiper.story section div span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  background: #fff;
}

#story .storyVi {
  position: relative;
  color: #fff;
  overflow: hidden;
  height: calc(100vh + 0px);
  height: calc(var(--vh, 1vh) * 100 + 0px);
}

@media (min-width: 1025px) {
  #story .storyVi {
    min-height: 700px;
    max-height: 890px;
  }
}

@media (max-width: 1024px) {
  #story .storyVi {
    min-height: 350px;
    max-height: 760px;
  }
}

#story .storyVi>div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transition: all 1s ease-in-out;
}

#story .storyVi section {
  opacity: 0;
  transition: all 1s ease-in-out;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  height: calc(100vh + 0px);
  height: calc(var(--vh, 1vh) * 100 + 0px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
}

@media (min-width: 1025px) {
  #story .storyVi section {
    min-height: 700px;
    max-height: 890px;
  }
}

@media (max-width: 1024px) {
  #story .storyVi section {
    min-height: 350px;
    max-height: 760px;
  }
}

#story .storyVi section.brighten01 {
  background-image: url("../images/gwell/story/bgViBrighten01.jpg");
}

@media (max-width: 640px) {
  #story .storyVi section.brighten01 {
    background-image: url("../images/gwell/story/bgViBrighten01M.jpg");
  }
}

#story .storyVi section.brighten01 img:first-child {
  width: 100%;
  max-width: 682px;
}

@media (max-width: 640px) {
  #story .storyVi section.brighten01 img:first-child {
    display: none;
  }
}

#story .storyVi section.brighten02 {
  background-image: url("../images/gwell/story/bgViBrighten02.jpg");
}

@media (max-width: 640px) {
  #story .storyVi section.brighten02 {
    background-image: url("../images/gwell/story/bgViBrighten02M.jpg");
  }
}

#story .storyVi section.brighten02 div span::before {
  width: 33.3333333333%;
}

#story .storyVi section.brighten03 {
  background-image: url("../images/gwell/story/bgViBrighten03.jpg");
}

@media (max-width: 640px) {
  #story .storyVi section.brighten03 {
    background-image: url("../images/gwell/story/bgViBrighten03M.jpg");
  }
}

#story .storyVi section.brighten03 div span::before {
  width: 66.6666666667%;
}

#story .storyVi section.brighten04 {
  background-image: url("../images/gwell/story/bgViBrighten04.jpg");
}

@media (max-width: 640px) {
  #story .storyVi section.brighten04 {
    background-image: url("../images/gwell/story/bgViBrighten04M.jpg");
  }
}

#story .storyVi section.brighten04 div span::before {
  width: 100%;
}

#story .storyVi section.gwell01 {
  background-image: url("../images/gwell/story/bgViGwell01.jpg");
}

@media (max-width: 640px) {
  #story .storyVi section.gwell01 {
    background-image: url("../images/gwell/story/bgViGwell01M.jpg");
  }
}

#story .storyVi section.gwell02 {
  background-image: url("../images/gwell/story/bgViGwell02.jpg");
}

@media (max-width: 640px) {
  #story .storyVi section.gwell02 {
    background-image: url("../images/gwell/story/bgViGwell02M.jpg");
  }
}

#story .storyVi section.gwell02 div span::before {
  width: 50%;
}

#story .storyVi section.gwell03 {
  background-image: url("../images/gwell/story/bgViGwell03.jpg");
}

@media (max-width: 640px) {
  #story .storyVi section.gwell03 {
    background-image: url("../images/gwell/story/bgViGwell03M.jpg");
  }
}

#story .storyVi section.gwell03 div span::before {
  width: 100%;
}

#story .storyVi section video {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: 0;
}

#story .storyVi section .h1 {
  z-index: 1;
  font-weight: 300;
}

@media (min-width: 1025px) {
  #story .storyVi section .h1 {
    font-size: 50px;
    line-height: 62px;
    letter-spacing: -0.035em;
  }
}

@media (max-width: 1024px) {
  #story .storyVi section .h1 {
    font-size: 40px;
    line-height: 52px;
    letter-spacing: -0.03em;
  }
}

#story .storyVi section .h1 b {
  font-weight: 500;
}

#story .storyVi section .h1.case {
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 1025px) {
  #story .storyVi section .h1.case {
    font-size: 70px;
  }
}

@media (max-width: 1024px) {
  #story .storyVi section .h1.case {
    font-size: 60px;
    line-height: 70px;
  }
}

#story .storyVi section .h1 img {
  max-width: 100%;
}

#story .storyVi section p {
  color: #fff;
}

@media (min-width: 1025px) {
  #story .storyVi section p {
    margin-top: 17px;
  }
}

@media (max-width: 1024px) {
  #story .storyVi section p {
    margin-top: 27px;
  }
}

#story .storyVi section div {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

#story .storyVi section div span {
  position: relative;
  margin: 0 10px;
  width: 130px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

#story .storyVi section div span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  background: #fff;
}

#story .storyVi section>span {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 37px;
  height: 42px;
  background: url("../images/gwell/story/iconArr.svg") no-repeat center bottom;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

@media (min-width: 1025px) {
  #story .storyVi section>span {
    bottom: 51px;
  }
}

@media (max-width: 1024px) {
  #story .storyVi section>span {
    bottom: 61px;
  }
}

@media (min-width: 1025px) {
  #story .basic {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
  }

  #story .basic section {
    width: calc(50% - 5px);
  }
}

@media (min-width: 1025px) {
  #story .basic.case section {
    padding: 50px 40px 47px;
  }
}

#story .basic section {
  position: relative;
  background: #fff;
  text-align: center;
}

@media (min-width: 1025px) {
  #story .basic section {
    padding: 50px 40px 110px;
  }
}

@media (max-width: 1024px) {
  #story .basic section {
    padding: 40px 30px;
  }
}

@media (max-width: 1024px) {
  #story .basic section+section {
    margin-top: 10px;
    padding-bottom: 105px;
  }
}

@media (min-width: 1025px) {
  #story .basic section+section img {
    margin-top: 80px;
  }
}

#story .basic section h2 {
  text-align: left;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.015em;
}

#story .basic section img {
  width: 100%;
}

@media (min-width: 1025px) {
  #story .basic section img {
    margin-top: 35px;
    max-width: 430px;
  }

  #story .basic section img.case01 {
    margin-top: 17px;
    max-width: 389px;
  }

  #story .basic section img.case02 {
    margin-top: 75px;
    max-width: 329px;
  }
}

@media (max-width: 1024px) {
  #story .basic section img {
    margin-top: 20px;
    max-width: 260px;
  }
}

#story .basic section .buttons {
  position: absolute;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  border: 1px solid #c8c8c8;
  background: #f9f9f9;
}

@media (min-width: 1025px) {
  #story .basic section .buttons {
    right: 40px;
    top: 44px;
    border-radius: 20px;
  }
}

@media (max-width: 1024px) {
  #story .basic section .buttons {
    left: 30px;
    right: 30px;
    bottom: 40px;
    margin: auto;
    max-width: 260px;
    border-radius: 22px;
  }
}

@media (min-width: 1025px) {
  #story .basic section .buttons button {
    width: 80px;
    height: 38px;
  }
}

@media (max-width: 1024px) {
  #story .basic section .buttons button {
    width: 46.2%;
    height: 42px;
  }
}

#story .basic section.type01 .buttons button:first-of-type,
#story .basic section.type02 .buttons button:last-of-type {
  margin: -1px;
  border: 1px solid #c8c8c8;
  background: #fff;
}

@media (min-width: 1025px) {

  #story .basic section.type01 .buttons button:first-of-type,
  #story .basic section.type02 .buttons button:last-of-type {
    width: 92px;
    height: 40px;
    border-radius: 20px;
  }
}

@media (max-width: 1024px) {

  #story .basic section.type01 .buttons button:first-of-type,
  #story .basic section.type02 .buttons button:last-of-type {
    width: calc(53.8% + 2px);
    height: 44px;
    border-radius: 22px;
  }
}

#story .basic section.type01 img.type02,
#story .basic section.type02 img.type01 {
  display: none !important;
}

#story .architecture>h2 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
}

@media (min-width: 1025px) {
  #story .architecture>h2 {
    height: 80px;
  }
}

@media (max-width: 1024px) {
  #story .architecture>h2 {
    height: 60px;
    margin-bottom: 10px;
  }
}

@media (min-width: 1025px) {
  #story .architecture>h2 img {
    width: 110px;
  }
}

@media (max-width: 1024px) {
  #story .architecture>h2 img {
    width: 90px;
  }
}

#story .architecture ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

@media (min-width: 1025px) {
  #story .architecture ul li {
    margin-left: 30px;
    width: calc(33.3333333333% - 20px);
    padding-top: 50px;
  }

  #story .architecture ul li:first-child,
  #story .architecture ul li:nth-child(3n+1) {
    margin-left: 0;
  }
}

@media (max-width: 1024px) {
  #story .architecture ul li {
    padding-top: 40px;
    width: calc(50% - 10px);
  }

  #story .architecture ul li:nth-of-type(even) {
    margin-left: 20px;
  }
}

@media (max-width: 640px) {
  #story .architecture ul li {
    width: 100%;
    margin-left: 0 !important;
  }
}

#story .architecture ul li h3 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

#story .architecture ul li h3 img {
  height: 23px;
}

@media screen and (min-width: 1025px) and (max-width: 1050px) {
  #story .architecture ul li h3 img {
    height: 20px;
  }
}

@media screen and (max-width: 1024px) and (min-width: 641px) and (max-width: 695px) {
  #story .architecture ul li h3 img {
    height: 19px;
  }
}

@media screen and (max-width: 358px) {
  #story .architecture ul li h3 img {
    height: 17px;
  }
}

#story .architecture ul li h3 span {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  line-height: 18px;
  border-left: 1px solid #c8c8c8;
  padding-left: 20px;
  margin-left: 20px;
}

#story .architecture ul li>img,
#story .architecture ul li a>img {
  display: block;
  margin-top: 18px;
  width: 100%;
}

#story .architecture ul li a {
  position: relative;
}

#story .architecture ul li a p {
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(17, 17, 17, 0.8);
  color: #fff;
  font-weight: 500;
  text-align: center;
  line-height: 40px;
}

#story .architecture ul li a p::after {
  content: "";
  display: inline-block;
  background: url("../images/gwell/story/iconArr2.svg") no-repeat center/100%;
}

@media (min-width: 1025px) {
  #story .architecture ul li a p::after {
    width: 6px;
    height: 12px;
    margin-left: 10px;
  }
}

@media (max-width: 1024px) {
  #story .architecture ul li a p::after {
    width: 5px;
    height: 10px;
    margin-left: 7px;
  }
}

#story .value {
  background: url("../images/gwell/story/bgValue.jpg") no-repeat center/cover;
  color: #fff;
  text-align: center;
}

@media (min-width: 1025px) {
  #story .value {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    height: calc(100vh + 0px);
    height: calc(var(--vh, 1vh) * 100 + 0px);
    min-height: 700px;
    max-height: 890px;
  }
}

@media (max-width: 1024px) {
  #story .value {
    padding: 80px 0;
  }
}

@media (max-width: 640px) {
  #story .value {
    background-image: url("../images/gwell/story/bgValueM.jpg");
  }
}

@media (min-width: 1025px) {
  #story .value .h1 {
    margin-bottom: 40px;
  }
}

@media (max-width: 1024px) {
  #story .value .h1 {
    margin-bottom: 20px;
  }
}

#story .value ul {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#story .value ul li {
  position: relative;
  height: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

@media (min-width: 1025px) {
  #story .value ul li {
    width: calc(25% + 20px);
    padding-bottom: calc(25% + 20px);
  }

  #story .value ul li+li {
    margin-left: -27px;
  }
}

@media (max-width: 1024px) {
  #story .value ul li {
    width: calc(50% + 15px);
    padding-bottom: calc(50% + 15px);
  }

  #story .value ul li:nth-child(even) {
    margin-left: -30px;
  }

  #story .value ul li+li+li {
    margin-top: -30px;
  }
}

@media (max-width: 640px) {
  #story .value ul li {
    width: 100%;
    padding-bottom: 100%;
    margin-left: 0 !important;
  }

  #story .value ul li+li {
    margin-top: -30px;
  }
}

#story .value ul li div {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

#story .value ul li div p {
  color: #fff;
  margin-top: 10px;
}

#story.brighten .concept {
  background: url("../images/gwell/story/bgConceptBrighten.jpg") no-repeat center/cover;
  color: #fff;
}

@media (min-width: 1025px) {
  #story.brighten .concept {
    height: calc(100vh + 0px);
    height: calc(var(--vh, 1vh) * 100 + 0px);
    min-height: 700px;
    max-height: 890px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    color: #fff;
  }
}

@media (max-width: 1024px) {
  #story.brighten .concept {
    padding: 80px 0;
  }
}

#story.brighten .concept>div {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  overflow: hidden;
}

@media (min-width: 1025px) {
  #story.brighten .concept>div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
}

#story.brighten .concept>div header {
  width: 100%;
  text-align: center;
}

@media (min-width: 1025px) {
  #story.brighten .concept>div header {
    padding-bottom: 97px;
  }
}

#story.brighten .concept>div header .h1 {
  font-weight: 400;
}

@media (min-width: 1025px) {
  #story.brighten .concept>div header .h1 {
    font-size: 16px;
  }
}

@media (max-width: 1024px) {
  #story.brighten .concept>div header .h1 {
    font-size: 14px;
  }
}

#story.brighten .concept>div header p {
  padding-top: 10px;
  font-weight: 300;
}

@media (min-width: 1025px) {
  #story.brighten .concept>div header p {
    font-size: 50px;
    line-height: 62px;
    letter-spacing: -0.035em;
  }
}

@media (max-width: 1024px) {
  #story.brighten .concept>div header p {
    font-size: 40px;
    line-height: 52px;
    letter-spacing: -0.03em;
  }
}

#story.brighten .concept>div header p em {
  font-weight: 500;
}

@media (max-width: 640px) {
  #story.brighten .concept>div header p em {
    display: block;
  }
}

#story.brighten .concept>div>div {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
}

@media (min-width: 1025px) {
  #story.brighten .concept>div>div {
    width: calc(100% - 400px);
    max-width: 741px;
    height: 425px;
    background: url("../images/gwell/story/imgConceptBrightenW.png") no-repeat center/100%;
  }
}

@media (max-width: 1024px) {
  #story.brighten .concept>div>div {
    display: block;
    margin: 60px auto;
    height: 350px;
    background: url("../images/gwell/story/imgConceptBrighten.png") no-repeat center/360px;
  }
}

#story.brighten .concept dl {
  white-space: nowrap;
}

#story.brighten .concept dl dt {
  font-size: 0;
  background-repeat: no-repeat;
}

#story.brighten .concept dl dt:nth-of-type(1) {
  background-image: url("../images/gwell/story/txtBrighten01.svg");
}

#story.brighten .concept dl dt:nth-of-type(2) {
  background-image: url("../images/gwell/story/txtBrighten02.svg");
}

#story.brighten .concept dl dt:nth-of-type(3) {
  background-image: url("../images/gwell/story/txtBrighten03.svg");
}

@media (min-width: 1025px) {
  #story.brighten .concept dl {
    width: 360px;
  }

  #story.brighten .concept dl dt {
    height: 47px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    background-position: left bottom;
  }

  #story.brighten .concept dl dd {
    padding-top: 5px;
    padding-bottom: 20px;
  }
}

@media (max-width: 1024px) {
  #story.brighten .concept dl {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    max-width: 360px;
    margin: 0 auto;
  }

  #story.brighten .concept dl dt,
  #story.brighten .concept dl dd {
    line-height: 63px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }

  #story.brighten .concept dl dt {
    width: 160px;
    background-position: left center;
  }

  #story.brighten .concept dl dt:nth-of-type(1) {
    background-size: 146px;
  }

  #story.brighten .concept dl dt:nth-of-type(2) {
    background-size: 174px;
  }

  #story.brighten .concept dl dt:nth-of-type(3) {
    background-size: 146px;
  }

  #story.brighten .concept dl dd {
    width: calc(100% - 160px);
  }
}

#story.brighten .info {
  padding-top: 25px;
  background: #121212;
}

#story.brighten .info .h1 {
  text-align: center;
  color: #fff;
}

@media (min-width: 1025px) {
  #story.brighten .info .h1 {
    margin-bottom: 40px;
  }
}

@media (max-width: 1024px) {
  #story.brighten .info .h1 {
    margin-bottom: 20px;
  }
}

#story.brighten .info>section {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #story.brighten .info>section {
    padding-top: 100px;
  }
}

@media (max-width: 1024px) {
  #story.brighten .info>section {
    padding-top: 60px;
  }
}

#story.brighten .info .bi {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
}

@media (min-width: 1025px) {
  #story.brighten .info .bi {
    height: 400px;
    padding-top: 108px;
  }
}

@media (max-width: 1024px) {
  #story.brighten .info .bi {
    height: 210px;
    padding: 40px 30px 0;
  }
}

@media (min-width: 1025px) {
  #story.brighten .info .bi img {
    margin-bottom: 58px;
  }
}

@media (max-width: 1024px) {
  #story.brighten .info .bi img {
    margin-bottom: 30px;
    width: 100%;
    max-width: 260px;
  }
}

#story.brighten .info .bi a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
  width: 100%;
  max-width: 260px;
}

#story.brighten .info .bi a::before,
#story.brighten .info .bi a::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#story.brighten .info .bi a::after {
  content: "";
  margin-top: -2px !important;
  background-image: url("../images/icon/iconDownload2.svg");
}

#story.brighten .info .bi a:not(:disabled):hover,
#story.brighten .info .bi a:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#story.brighten .info .bi a:not(:disabled):hover::before,
#story.brighten .info .bi a:not(:disabled):hover::after,
#story.brighten .info .bi a:not(:disabled):focus::before,
#story.brighten .info .bi a:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #story.brighten .info .bi a {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  #story.brighten .info .bi a::before {
    margin-right: 10px;
  }

  #story.brighten .info .bi a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #story.brighten .info .bi a {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #story.brighten .info .bi a::before {
    margin-right: 14px;
  }

  #story.brighten .info .bi a::after {
    margin-left: 18px;
  }
}

#story.brighten .info .bi a:hover,
#story.brighten .info .bi a:focus {
  background-color: #615C54 !important;
}

#story.brighten .info .color {
  color: #fff;
}

#story.brighten .info .color h2 {
  padding-bottom: 10px;
  text-transform: uppercase;
}

#story.brighten .info .color+.color {
  margin-top: 40px;
}

@media (min-width: 1025px) {
  #story.brighten .info .color ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }

  #story.brighten .info .color ul li {
    width: 50%;
  }
}

@media (min-width: 1025px) {

  #story.brighten .info .color li,
  #story.brighten .info .color>div {
    padding: 30px;
  }
}

@media (max-width: 1024px) {

  #story.brighten .info .color li,
  #story.brighten .info .color>div {
    padding: 30px 20px;
  }
}

#story.brighten .info .color li strong,
#story.brighten .info .color>div strong {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

#story.brighten .info .color li p,
#story.brighten .info .color>div p {
  color: #fff;
  line-height: 2em;
}

@media (min-width: 1025px) {

  #story.brighten .info .color li p,
  #story.brighten .info .color>div p {
    margin-top: 30px;
  }
}

@media (max-width: 1024px) {

  #story.brighten .info .color li p,
  #story.brighten .info .color>div p {
    margin-top: 20px;
  }
}

#story.brighten .info .color li:first-child {
  background: #C87D64;
}

#story.brighten .info .color li:last-child {
  background: #5A5550;
}

#story.brighten .info .color>div {
  background: #22201F;
}

#story.gwell {
  background: #f9f9f9;
}

#story.gwell .info {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#story.gwell .info .h1 {
  text-align: center;
}

@media (min-width: 1025px) {
  #story.gwell .info .h1 {
    margin-bottom: 40px;
  }
}

@media (max-width: 1024px) {
  #story.gwell .info .h1 {
    margin-bottom: 20px;
  }
}

@media (min-width: 1025px) {
  #story.gwell .info>section {
    padding-top: 100px;
  }
}

@media (max-width: 1024px) {
  #story.gwell .info>section {
    padding-top: 60px;
  }
}

#story.gwell .info .color h2 {
  padding-bottom: 10px;
  text-transform: uppercase;
}

#story.gwell .info .color+.color {
  margin-top: 40px;
}

@media (min-width: 1025px) {
  #story.gwell .info .color ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }

  #story.gwell .info .color ul li {
    width: 33.3333333333%;
  }
}

#story.gwell .info .color li,
#story.gwell .info .color>div {
  color: #fff;
}

@media (min-width: 1025px) {

  #story.gwell .info .color li,
  #story.gwell .info .color>div {
    padding: 30px;
  }
}

@media (max-width: 1024px) {

  #story.gwell .info .color li,
  #story.gwell .info .color>div {
    padding: 30px 20px;
  }
}

#story.gwell .info .color li strong,
#story.gwell .info .color>div strong {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

#story.gwell .info .color li p,
#story.gwell .info .color>div p {
  color: #fff;
  line-height: 2em;
}

@media (min-width: 1025px) {

  #story.gwell .info .color li p,
  #story.gwell .info .color>div p {
    margin-top: 30px;
  }
}

@media (max-width: 1024px) {

  #story.gwell .info .color li p,
  #story.gwell .info .color>div p {
    margin-top: 20px;
  }
}

#story.gwell .info .color li p.case,
#story.gwell .info .color>div p.case {
  color: #261E33;
}

#story.gwell .info .color li:first-child {
  background: #261E33;
}

#story.gwell .info .color li:last-child {
  background: #EAEBEB;
  color: #261E33;
}

#story.gwell .info .color li:nth-child(2) {
  background: #828282;
}

#story.gwell .info .color>div {
  background: #37234D;
}

#story.gwell .info .bi {
  position: relative;
  background: #fff;
  text-align: center;
}

@media (min-width: 1025px) {
  #story.gwell .info .bi {
    padding: 133px 30px 75px;
  }
}

@media (max-width: 1024px) {
  #story.gwell .info .bi {
    padding: 40px 30px;
  }
}

#story.gwell .info .bi>div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  background: #f9f9f9;
  border: 1px solid #c8c8c8;
}

@media (min-width: 1025px) {
  #story.gwell .info .bi>div {
    position: absolute;
    right: 40px;
    top: 40px;
    border-radius: 20px;
    width: 170px;
  }
}

@media (max-width: 1024px) {
  #story.gwell .info .bi>div {
    border-radius: 22px;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }
}

#story.gwell .info .bi>div button.on {
  background: #fff;
  margin: -1px;
  border: 1px solid #c8c8c8;
}

@media (min-width: 1025px) {
  #story.gwell .info .bi>div button.on {
    width: 90px;
    height: 40px;
    border-radius: 20px;
  }
}

@media (max-width: 1024px) {
  #story.gwell .info .bi>div button.on {
    width: calc(53.85% + 2px);
    height: 44px;
    border-radius: 22px;
  }
}

@media (min-width: 1025px) {
  #story.gwell .info .bi>div button:not(.on) {
    width: 80px;
  }
}

@media (max-width: 1024px) {
  #story.gwell .info .bi>div button:not(.on) {
    width: 46.15%;
  }
}

@media (min-width: 1025px) {
  #story.gwell .info .bi img {
    width: 328px;
    margin-bottom: 60px;
  }
}

@media (max-width: 1024px) {
  #story.gwell .info .bi img {
    width: 100%;
    max-width: 220px;
    margin: 40px 0 30px;
  }
}

#story.gwell .info .bi a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
  width: 100%;
  max-width: 260px;
  display: flex;
  margin: 0 auto;
}

#story.gwell .info .bi a::before,
#story.gwell .info .bi a::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#story.gwell .info .bi a::after {
  content: "";
  margin-top: -2px !important;
  background-image: url("../images/icon/iconDownload2.svg");
}

#story.gwell .info .bi a:not(:disabled):hover,
#story.gwell .info .bi a:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#story.gwell .info .bi a:not(:disabled):hover::before,
#story.gwell .info .bi a:not(:disabled):hover::after,
#story.gwell .info .bi a:not(:disabled):focus::before,
#story.gwell .info .bi a:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #story.gwell .info .bi a {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  #story.gwell .info .bi a::before {
    margin-right: 10px;
  }

  #story.gwell .info .bi a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #story.gwell .info .bi a {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #story.gwell .info .bi a::before {
    margin-right: 14px;
  }

  #story.gwell .info .bi a::after {
    margin-left: 18px;
  }
}

#contents.salesList .toggleBtns {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#contents.salesList .toggleBtns>* {
  display: inline-block;
  padding-left: 35px;
  font-weight: 700;
  line-height: 24px;
  color: #37234D;
}

#contents.salesList .toggleBtns>*.active {
  display: none;
}

@media (min-width: 1061px) {
  #contents.salesList .toggleBtns>* {
    position: absolute;
    right: 20px;
    top: -35px;
  }
}

@media (max-width: 1060px) {
  #contents.salesList .toggleBtns>* {
    margin-top: 30px;
  }
}

#contents.salesList .toggleBtns .viewCalendar {
  background: url("../images/icon/iconCalendar3.svg") no-repeat left center;
}

#contents.salesList .toggleBtns .viewList {
  background: url("../images/icon/iconList.svg") no-repeat left center;
}

#contents.salesList .search {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #contents.salesList .search {
    margin: 50px auto;
    padding: 35px 0;
    background: #f9f9f9;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .search {
    margin: 30px auto;
  }
}

#contents.salesList .search>div {
  position: relative;
}

@media (min-width: 1025px) {
  #contents.salesList .search>div {
    margin: 0 auto;
    width: 500px;
  }
}

#contents.salesList .search input[type=text] {
  width: 100%;
  border: 1px solid #E1E1E1;
  outline: none;
  background: #fff;
  color: #212121;
}

@media (min-width: 1025px) {
  #contents.salesList .search input[type=text] {
    height: 50px;
    padding: 0 0 0 30px;
    border-radius: 25px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .search input[type=text] {
    height: 45px;
    padding: 0 0 0 20px;
    border-radius: 23px;
  }
}

#contents.salesList .search button {
  position: absolute;
  top: 0;
  bottom: 0;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  margin: auto;
  background: url("../images/icon/iconZoom.svg") no-repeat center;
  background-size: 100%;
  -moz-filter: grayscale(100);
  -ms-filter: grayscale(100);
  -o-filter: grayscale(100);
  filter: grayscale(100);
}

@media (min-width: 1025px) {
  #contents.salesList .search button {
    width: 24px;
    height: 24px;
    right: 30px;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .search button {
    width: 20px;
    height: 20px;
    right: 20px;
  }
}

@media (min-width: 1025px) {
  #contents.salesList .calendar {
    margin-top: 70px !important;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .calendar {
    margin-top: 40px !important;
  }
}

#contents.faq .titleCase,
#contents.info section.faq .titleCase {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 700;
}

@media (min-width: 1025px) {

  #contents.faq .titleCase,
  #contents.info section.faq .titleCase {
    margin-bottom: 30px;
  }
}

@media (max-width: 1024px) {

  #contents.faq .titleCase,
  #contents.info section.faq .titleCase {
    margin-bottom: 20px;
  }
}

#contents.faq .list,
#contents.info section.faq .list {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {

  #contents.faq .list,
  #contents.info section.faq .list {
    margin-top: 60px;
  }
}

@media (max-width: 1024px) {

  #contents.faq .list,
  #contents.info section.faq .list {
    margin-top: 40px;
  }
}

#contents.faq .list>li,
#contents.info section.faq .list>li {
  border-bottom: 1px solid #E1E1E1;
  word-break: keep-all;
}

#contents.faq .list>li:nth-child(1),
#contents.info section.faq .list>li:nth-child(1) {
  border-top: 1px solid #212121;
}

#contents.faq .list>li button,
#contents.info section.faq .list>li button {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

@media (min-width: 1025px) {

  #contents.faq .list>li button,
  #contents.info section.faq .list>li button {
    padding: 28px 20px;
  }
}

@media (max-width: 1024px) {

  #contents.faq .list>li button,
  #contents.info section.faq .list>li button {
    padding: 20px 10px;
  }
}

#contents.faq .list>li button::after,
#contents.info section.faq .list>li button::after {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
}

@media (min-width: 1025px) {

  #contents.faq .list>li button::after,
  #contents.info section.faq .list>li button::after {
    right: 20px;
  }
}

@media (max-width: 1024px) {

  #contents.faq .list>li button::after,
  #contents.info section.faq .list>li button::after {
    right: 10px;
  }
}

@media (min-width: 1025px) {

  #contents.faq .list>li button:not(.on)::after,
  #contents.info section.faq .list>li button:not(.on)::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-width: 0 0 2px 2px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-45deg);
  }
}

@media (max-width: 1024px) {

  #contents.faq .list>li button:not(.on)::after,
  #contents.info section.faq .list>li button:not(.on)::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-width: 0 0 2px 2px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-45deg);
  }
}

@media (min-width: 1025px) {

  #contents.faq .list>li button.on::after,
  #contents.info section.faq .list>li button.on::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-width: 0 0 2px 2px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(135deg);
  }
}

@media (max-width: 1024px) {

  #contents.faq .list>li button.on::after,
  #contents.info section.faq .list>li button.on::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-width: 0 0 2px 2px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(135deg);
  }
}

#contents.faq .list>li button:not(.on) em,
#contents.info section.faq .list>li button:not(.on) em {
  border: 1px solid #261E33;
  color: #261E33;
}

#contents.faq .list>li button.on em,
#contents.info section.faq .list>li button.on em {
  border: 1px solid #DAA23F;
  color: #DAA23F;
}

#contents.faq .list>li button em,
#contents.info section.faq .list>li button em {
  text-align: center;
}

@media (min-width: 1025px) {

  #contents.faq .list>li button em,
  #contents.info section.faq .list>li button em {
    margin-right: 20px;
    width: 90px;
    line-height: 32px;
    border-radius: 17px;
  }
}

@media (max-width: 1024px) {

  #contents.faq .list>li button em,
  #contents.info section.faq .list>li button em {
    margin-right: 15px;
    width: 80px;
    line-height: 28px;
    border-radius: 15px;
  }
}

#contents.faq .list>li button p,
#contents.info section.faq .list>li button p {
  text-align: left;
  font-weight: 700;
  color: #212121;
}

@media (min-width: 1025px) {

  #contents.faq .list>li button p,
  #contents.info section.faq .list>li button p {
    width: calc(100% - 165px);
  }
}

@media (max-width: 1024px) {

  #contents.faq .list>li button p,
  #contents.info section.faq .list>li button p {
    width: calc(100% - 130px);
  }
}

#contents.faq .list>li>div,
#contents.info section.faq .list>li>div {
  display: none;
  border-top: 1px solid #E1E1E1;
  background: #f9f9f9;
  color: #212121;
}

@media (min-width: 1025px) {

  #contents.faq .list>li>div,
  #contents.info section.faq .list>li>div {
    padding: 30px 20px 30px 130px;
  }
}

@media (max-width: 1024px) {

  #contents.faq .list>li>div,
  #contents.info section.faq .list>li>div {
    padding: 20px;
  }
}

#contents.faq>footer,
#contents.info section.faq>footer {
  text-align: center;
}

@media (min-width: 1025px) {

  #contents.faq>footer,
  #contents.info section.faq>footer {
    padding-top: 60px;
  }
}

@media (max-width: 1024px) {

  #contents.faq>footer,
  #contents.info section.faq>footer {
    padding-top: 30px;
  }
}

#contents.faq>footer button,
#contents.info section.faq>footer button {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
}

#contents.faq>footer button::before,
#contents.faq>footer button::after,
#contents.info section.faq>footer button::before,
#contents.info section.faq>footer button::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.faq>footer button:not(:disabled):hover,
#contents.faq>footer button:not(:disabled):focus,
#contents.info section.faq>footer button:not(:disabled):hover,
#contents.info section.faq>footer button:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.faq>footer button:not(:disabled):hover::before,
#contents.faq>footer button:not(:disabled):hover::after,
#contents.faq>footer button:not(:disabled):focus::before,
#contents.faq>footer button:not(:disabled):focus::after,
#contents.info section.faq>footer button:not(:disabled):hover::before,
#contents.info section.faq>footer button:not(:disabled):hover::after,
#contents.info section.faq>footer button:not(:disabled):focus::before,
#contents.info section.faq>footer button:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {

  #contents.faq>footer button,
  #contents.info section.faq>footer button {
    font-size: 16px;
    min-width: 180px;
    height: 60px;
    padding: 0 20px;
    border-radius: 30px;
  }

  #contents.faq>footer button::before,
  #contents.info section.faq>footer button::before {
    margin-right: 10px;
  }

  #contents.faq>footer button::after,
  #contents.info section.faq>footer button::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {

  #contents.faq>footer button,
  #contents.info section.faq>footer button {
    font-size: 14px;
    min-width: 180px;
    font-size: 16px;
    height: 50px;
    padding: 0 18px;
    border-radius: 25px;
  }

  #contents.faq>footer button::before,
  #contents.info section.faq>footer button::before {
    margin-right: 14px;
  }

  #contents.faq>footer button::after,
  #contents.info section.faq>footer button::after {
    margin-left: 18px;
  }
}

#contents.cs.info>section>.h1 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #contents.cs.info>section>.h1 {
    margin-bottom: 28px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section>.h1 {
    margin-bottom: 18px;
  }
}

#contents.cs.info>section>header {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 1025px) {
  #contents.cs.info>section>header {
    margin-bottom: 28px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section>header {
    margin-bottom: 18px;
  }
}

#contents.cs.info>section>header a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
  min-width: 100px;
  width: 128px;
  color: #212121;
}

#contents.cs.info>section>header a::before,
#contents.cs.info>section>header a::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.cs.info>section>header a:not(:disabled):hover,
#contents.cs.info>section>header a:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.cs.info>section>header a:not(:disabled):hover::before,
#contents.cs.info>section>header a:not(:disabled):hover::after,
#contents.cs.info>section>header a:not(:disabled):focus::before,
#contents.cs.info>section>header a:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.cs.info>section>header a {
    font-size: 16px;
    font-size: 14px;
    min-width: 100px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.cs.info>section>header a::before {
    margin-right: 10px;
  }

  #contents.cs.info>section>header a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section>header a {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.cs.info>section>header a::before {
    margin-right: 14px;
  }

  #contents.cs.info>section>header a::after {
    margin-left: 18px;
  }
}

@media (min-width: 1025px) {
  #contents.cs.info>section+section {
    margin-top: -50px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section+section {
    margin-top: -20px;
  }
}

#contents.cs.info>section .guide01 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#contents.cs.info>section .guide01>* {
  background-image: url("../images/gwell/bgGuide01.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-weight: 700;
  color: #fff;
}

@media (min-width: 1025px) {
  #contents.cs.info>section .guide01>* {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    height: 350px;
    padding: 0 80px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section .guide01>* {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    height: 312px;
    text-align: center;
  }
}

@media (max-width: 640px) {
  #contents.cs.info>section .guide01>* {
    background-image: url("../images/gwell/bgGuide01M.jpg");
  }
}

#contents.cs.info>section .guide01>*::after {
  content: "GWELL";
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #fff;
  border-radius: 50%;
  background: url("../images/gwell/logo.svg") no-repeat center;
  -moz-filter: grayscale(100) brightness(100);
  -ms-filter: grayscale(100) brightness(100);
  -o-filter: grayscale(100) brightness(100);
  filter: grayscale(100) brightness(100);
}

@media (min-width: 1025px) {
  #contents.cs.info>section .guide01>*::after {
    width: 220px;
    height: 220px;
    background-size: 120px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section .guide01>*::after {
    margin-top: 20px;
    width: 150px;
    height: 150px;
    background-size: 80px;
  }
}

#contents.cs.info>section.contract {
  background: url("../images/gwell/bgGuide02.jpg") no-repeat center;
  background-size: cover;
  color: #fff;
}

@media (min-width: 1025px) {
  #contents.cs.info>section.contract {
    padding: 105px 0 100px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section.contract {
    padding: 64px 0 60px;
  }
}

@media (max-width: 640px) {
  #contents.cs.info>section.contract {
    background-image: url("../images/gwell/bgGuide02M.jpg");
  }
}

#contents.cs.info>section.contract .h1 {
  margin-bottom: 0 !important;
}

#contents.cs.info>section.contract>.info {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #contents.cs.info>section.contract>.info {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 1px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section.contract>.info {
    margin-top: 15px;
  }
}

@media (min-width: 1025px) {
  #contents.cs.info>section.contract>.info p {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section.contract>.info p {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }
}

#contents.cs.info>section.contract>.info a {
  border: 1px solid #fff;
  border-radius: 20px;
  line-height: 38px;
  text-align: center;
  color: #fff;
}

@media (min-width: 1025px) {
  #contents.cs.info>section.contract>.info a {
    width: 140px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section.contract>.info a {
    display: inline-block;
    margin-top: 27px;
    width: 130px;
  }
}

#contents.cs.info>section.contract>.list {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #contents.cs.info>section.contract>.list {
    margin-top: 60px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section.contract>.list {
    margin-top: 40px;
  }
}

#contents.cs.info>section.contract>.list ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

@media (min-width: 1025px) {
  #contents.cs.info>section.contract>.list ul {
    padding-left: 15px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section.contract>.list ul {
    padding-left: 10px;
  }
}

#contents.cs.info>section.contract>.list ul li {
  position: relative;
  height: 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

@media (min-width: 1025px) {
  #contents.cs.info>section.contract>.list ul li {
    margin-left: -15px;
    width: calc(25% + 15px);
    padding-bottom: calc(25% - 15px);
    border-width: 15px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section.contract>.list ul li {
    margin-left: -10px;
    width: calc(25% + 10px);
    padding-bottom: calc(25% - 10px);
    border-width: 10px;
  }
}

@media (max-width: 640px) {
  #contents.cs.info>section.contract>.list ul li {
    width: calc(50% + 10px);
    padding-bottom: calc(50% - 10px);
  }

  #contents.cs.info>section.contract>.list ul li+li+li {
    margin-top: -10px;
  }
}

#contents.cs.info>section.contract>.list ul li:not(:last-child)::after {
  z-index: 1;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url("../images/gwell/iconGuide02_arr.svg") no-repeat center;
  background-size: 100%;
}

@media (min-width: 1025px) {
  #contents.cs.info>section.contract>.list ul li:not(:last-child)::after {
    right: -27px;
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section.contract>.list ul li:not(:last-child)::after {
    right: -20px;
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 640px) {
  #contents.cs.info>section.contract>.list ul li:nth-child(2)::after {
    right: 0;
    left: 0;
    top: unset;
    bottom: -20px;
    transform: rotate(90deg);
  }
}

@media (max-width: 640px) {
  #contents.cs.info>section.contract>.list ul li:nth-child(3)::after {
    transform: rotate(180deg);
  }
}

#contents.cs.info>section.contract>.list ul li:nth-child(1) p::before {
  background-image: url("../images/gwell/iconGuide02_1.svg");
}

#contents.cs.info>section.contract>.list ul li:nth-child(2) p::before {
  background-image: url("../images/gwell/iconGuide02_2.svg");
}

#contents.cs.info>section.contract>.list ul li:nth-child(3) p::before {
  background-image: url("../images/gwell/iconGuide02_3.svg");
}

#contents.cs.info>section.contract>.list ul li:nth-child(4) p::before {
  background-image: url("../images/gwell/iconGuide02_4.svg");
}

#contents.cs.info>section.contract>.list ul li p {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  font-weight: 500;
}

@media (min-width: 1025px) {
  #contents.cs.info>section.contract>.list ul li p {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section.contract>.list ul li p {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }
}

#contents.cs.info>section.contract>.list ul li p::before {
  content: "";
  width: 50px;
  height: 50px;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 1025px) {
  #contents.cs.info>section.contract>.list ul li p::before {
    margin-bottom: 23px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section.contract>.list ul li p::before {
    margin-bottom: 6px;
  }
}

#contents.cs.info>section .location {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#contents.cs.info>section .location .map {
  background: #c8c8c8;
}

@media (min-width: 1025px) {
  #contents.cs.info>section .location .map {
    height: 420px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section .location .map {
    height: 300px;
  }
}

#contents.cs.info>section .location>dl {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

@media (min-width: 1025px) {
  #contents.cs.info>section .location>dl {
    margin-top: 40px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section .location>dl {
    margin-top: 30px;
    align-items: flex-start;
  }
}

#contents.cs.info>section .location>dl dt:first-child {
  border-style: solid;
  border-color: #E1E1E1;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  background: url("../images/gwell/logo.svg") no-repeat left top;
}

@media (min-width: 1025px) {
  #contents.cs.info>section .location>dl dt:first-child {
    width: 182px;
    height: 28px;
    border-width: 0 1px 0 0;
    background-size: 122px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section .location>dl dt:first-child {
    width: 100%;
    height: 38px;
    border-width: 0 0 1px 0;
    background-size: 100px;
  }
}

#contents.cs.info>section .location>dl dt:not(:first-child) {
  color: #999;
}

@media (min-width: 1025px) {
  #contents.cs.info>section .location>dl dt:not(:first-child) {
    margin: 0 17px 0 60px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section .location>dl dt:not(:first-child) {
    margin-top: 17px;
    width: 46px;
  }
}

#contents.cs.info>section .location>dl dd {
  color: #212121;
  word-break: keep-all;
}

@media (max-width: 1024px) {
  #contents.cs.info>section .location>dl dd {
    margin-top: 17px;
    width: calc(100% - 46px);
  }
}

#contents.cs.info>section .firstTime {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #contents.cs.info>section .firstTime {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  #contents.cs.info>section .firstTime a {
    position: relative;
    width: calc(25% - 20px);
    height: 234px;
    padding-top: 115px;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    font-size: 16px;
    font-weight: medium;
    text-align: center;
  }

  #contents.cs.info>section .firstTime a:hover,
  #contents.cs.info>section .firstTime a:focus {
    padding-top: 116px;
    border: 0;
    background: url("../images/gwell/guide/bgGuide01.svg") no-repeat center;
    color: #fff;
  }

  #contents.cs.info>section .firstTime a:hover span,
  #contents.cs.info>section .firstTime a:focus span {
    border: 0;
    line-height: 40px;
    color: #37234D;
  }

  #contents.cs.info>section .firstTime a:hover::before,
  #contents.cs.info>section .firstTime a:focus::before {
    -moz-filter: brightness(100);
    -ms-filter: brightness(100);
    -o-filter: brightness(100);
    filter: brightness(100);
    top: 41px;
  }

  #contents.cs.info>section .firstTime a::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    top: 40px;
    left: 0;
    right: 0;
    margin: auto;
    background-position: center;
  }

  #contents.cs.info>section .firstTime a:first-child::before {
    background-image: url("../images/gwell/guide/iconGuide01a.svg");
  }

  #contents.cs.info>section .firstTime a:nth-child(2)::before {
    background-image: url("../images/gwell/guide/iconGuide01b.svg");
  }

  #contents.cs.info>section .firstTime a:nth-child(3)::before {
    background-image: url("../images/gwell/guide/iconGuide01c.svg");
  }

  #contents.cs.info>section .firstTime a:nth-child(4)::before {
    background-image: url("../images/gwell/guide/iconGuide01d.svg");
  }

  #contents.cs.info>section .firstTime a span {
    display: block;
    margin: 20px auto 0;
    width: 110px;
    line-height: 38px;
    border: 1px solid #c8c8c8;
    border-radius: 20px;
    background: #fff;
    color: #666;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info>section .firstTime a {
    position: relative;
    display: block;
    line-height: 65px;
    border-bottom: 1px solid #E1E1E1;
    font-size: 16px;
    letter-spacing: -0.015em;
  }

  #contents.cs.info>section .firstTime a span {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-image: url("../images/gwell/guide/iconArr.svg");
    background-repeat: no-repeat;
    background-position: center;
  }

  #contents.cs.info>section .firstTime a:hover,
  #contents.cs.info>section .firstTime a:focus {
    border-bottom: 1px solid #37234D;
  }

  #contents.cs.info>section .firstTime a:hover span,
  #contents.cs.info>section .firstTime a:focus span {
    background-color: #37234D;
    background-image: url("../images/gwell/guide/iconArrInvert.svg");
  }
}

#contents.cs.info .floatContainer {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #contents.cs.info .floatContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info .floatContainer {
    padding-top: 60px;
  }
}

@media (min-width: 1025px) {
  #contents.cs.info .floatContainer>section {
    width: calc(50% - 11px);
    padding-top: 88px;
  }
}

@media (min-width: 1025px) {
  #contents.cs.info .floatContainer>section>.h1 {
    margin-bottom: 28px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info .floatContainer>section>.h1 {
    margin-bottom: 18px;
  }
}

@media (min-width: 1025px) {
  #contents.cs.info .floatContainer .howto ul li {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    min-height: 150px;
    padding: 25px 40px 25px 165px;
    background-color: #F0F2F2;
    background-position: 40px center;
    background-repeat: no-repeat;
    border-radius: 3px;
  }

  #contents.cs.info .floatContainer .howto ul li:first-child {
    background-image: url("../images/gwell/guide/iconMethod01.svg");
  }

  #contents.cs.info .floatContainer .howto ul li:last-child {
    background-image: url("../images/gwell/guide/iconMethod02.svg");
  }

  #contents.cs.info .floatContainer .howto ul li p {
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }

  #contents.cs.info .floatContainer .howto ul li a {
    width: 110px;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
    line-height: 40px;
    border-radius: 20px;
    background: #fff;
    text-align: center;
  }

  #contents.cs.info .floatContainer .howto ul li+li {
    margin-top: 10px;
  }
}

@media (max-width: 1024px) {
  #contents.cs.info .floatContainer .howto {
    background: url("../images/gwell/guide/bgMethod.jpg") no-repeat center;
    background-size: cover;
    color: #fff;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 63px;
    padding-bottom: 60px;
  }

  #contents.cs.info .floatContainer .howto ul li {
    background-color: rgba(33, 33, 33, 0.4);
    background-position: center 40px;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 125px;
    padding-bottom: 40px;
  }

  #contents.cs.info .floatContainer .howto ul li:first-child {
    background-image: url("../images/gwell/guide/iconMethod01M.svg");
  }

  #contents.cs.info .floatContainer .howto ul li:last-child {
    background-image: url("../images/gwell/guide/iconMethod02M.svg");
  }

  #contents.cs.info .floatContainer .howto ul li+li {
    margin-top: 30px;
  }

  #contents.cs.info .floatContainer .howto ul li p {
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
    margin-bottom: 28px;
  }

  #contents.cs.info .floatContainer .howto ul li a {
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 20px;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    font-weight: 500;
    line-height: 38px;
    width: 140px;
  }
}

@media (min-width: 1025px) {
  #contents.cs.info .floatContainer .faqGuide>div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    height: 310px;
    padding: 34px 40px 0;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    background: url("../images/gwell/guide/bgFaqGuide.svg") no-repeat center;
  }

  #contents.cs.info .floatContainer .faqGuide>div p {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
    line-height: 40px;
    font-weight: 500;
  }

  #contents.cs.info .floatContainer .faqGuide>div>a {
    width: 110px;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    background: #37234D;
  }

  #contents.cs.info .floatContainer .faqGuide>div div {
    position: relative;
    margin-top: 100px;
    width: 100%;
    padding-top: 16px;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    text-indent: -1em;
    margin-left: 1em;
  }

  #contents.cs.info .floatContainer .faqGuide>div div a {
    text-decoration: underline;
  }

  #contents.cs.info .floatContainer .faqGuide>div div::before {
    position: absolute;
    content: "";
    top: 0;
    left: -1em;
    right: 0;
    height: 1px;
    width: 100%;
    background: rgba(33, 33, 33, 0.2);
  }
}

@media (max-width: 1024px) {
  #contents.cs.info .floatContainer .faqGuide {
    margin-top: 60px;
  }

  #contents.cs.info .floatContainer .faqGuide>div {
    background: #E9E9E9 url("../images/gwell/guide/bgFaqGuideM.jpg") no-repeat right center;
    background-size: cover;
    padding: 42px 30px 37px;
  }

  #contents.cs.info .floatContainer .faqGuide>div p {
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }

  #contents.cs.info .floatContainer .faqGuide>div>a {
    display: inline-block;
    margin-top: 18px;
    background: #fff;
    width: 140px;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    line-height: 40px;
    text-align: center;
    border-radius: 20px;
    margin-bottom: 30px;
  }

  #contents.cs.info .floatContainer .faqGuide>div div {
    text-indent: -1em;
    margin-left: 1em;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }

  #contents.cs.info .floatContainer .faqGuide>div div a {
    text-decoration: underline;
  }
}

#contents.cs .tabInfo {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  color: #666;
}

@media (min-width: 1025px) {
  #contents.cs .tabInfo {
    padding-top: 17px;
    text-align: center;
  }
}

@media (max-width: 1024px) {
  #contents.cs .tabInfo {
    padding-top: 5px;
  }
}

#contents.cs .guideIntro {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

@media (min-width: 1025px) {
  #contents.cs .guideIntro {
    height: 308px;
  }
}

#contents.cs .guideIntro .h1 {
  font-weight: 400;
}

@media (min-width: 1025px) {
  #contents.cs .guideIntro .h1 {
    margin-bottom: 15px;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideIntro div {
    position: absolute;
    top: 0;
    right: 20px;
    width: calc(100% - 400px);
    max-width: 800px;
    height: 308px;
    overflow: hidden;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideIntro div {
    margin: 8px 0 24px;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideIntro div img {
    position: absolute;
    left: 50%;
    margin-left: -400px;
    width: 800px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideIntro div img {
    display: block;
    width: 100%;
  }
}

#contents.cs .guideIntro strong {
  display: block;
}

@media (min-width: 1025px) {
  #contents.cs .guideIntro p {
    margin: 13px 0 43px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideIntro p {
    margin: 7px 0 30px;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideIntro a {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    border: 1px solid #c8c8c8;
    background-color: #fff;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.2;
    word-break: keep-all;
    color: #212121;
    width: 238px;
  }

  #contents.cs .guideIntro a::before,
  #contents.cs .guideIntro a::after {
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.7;
  }

  #contents.cs .guideIntro a:not(:disabled):hover,
  #contents.cs .guideIntro a:not(:disabled):focus {
    border-color: #46296E;
    background: #46296E;
    color: #fff;
  }

  #contents.cs .guideIntro a:not(:disabled):hover::before,
  #contents.cs .guideIntro a:not(:disabled):hover::after,
  #contents.cs .guideIntro a:not(:disabled):focus::before,
  #contents.cs .guideIntro a:not(:disabled):focus::after {
    -moz-filter: grayscale(1) brightness(100);
    -ms-filter: grayscale(1) brightness(100);
    -o-filter: grayscale(1) brightness(100);
    filter: grayscale(1) brightness(100);
    opacity: 1;
  }
}

@media (min-width: 1025px) and (min-width: 1025px) {
  #contents.cs .guideIntro a {
    font-size: 16px;
    min-width: 180px;
    height: 60px;
    padding: 0 20px;
    border-radius: 30px;
  }

  #contents.cs .guideIntro a::before {
    margin-right: 10px;
  }

  #contents.cs .guideIntro a::after {
    margin: 0 2px 0 15px;
  }
}

@media (min-width: 1025px) and (max-width: 1024px) {
  #contents.cs .guideIntro a {
    font-size: 14px;
    min-width: 180px;
    font-size: 16px;
    height: 50px;
    padding: 0 18px;
    border-radius: 25px;
  }

  #contents.cs .guideIntro a::before {
    margin-right: 14px;
  }

  #contents.cs .guideIntro a::after {
    margin-left: 18px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideIntro a {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    border: 1px solid #c8c8c8;
    background-color: #fff;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.2;
    word-break: keep-all;
    color: #212121;
    width: 180px;
  }

  #contents.cs .guideIntro a::before,
  #contents.cs .guideIntro a::after {
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.7;
  }

  #contents.cs .guideIntro a:not(:disabled):hover,
  #contents.cs .guideIntro a:not(:disabled):focus {
    border-color: #46296E;
    background: #46296E;
    color: #fff;
  }

  #contents.cs .guideIntro a:not(:disabled):hover::before,
  #contents.cs .guideIntro a:not(:disabled):hover::after,
  #contents.cs .guideIntro a:not(:disabled):focus::before,
  #contents.cs .guideIntro a:not(:disabled):focus::after {
    -moz-filter: grayscale(1) brightness(100);
    -ms-filter: grayscale(1) brightness(100);
    -o-filter: grayscale(1) brightness(100);
    filter: grayscale(1) brightness(100);
    opacity: 1;
  }
}

@media (max-width: 1024px) and (min-width: 1025px) {
  #contents.cs .guideIntro a {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  #contents.cs .guideIntro a::before {
    margin-right: 10px;
  }

  #contents.cs .guideIntro a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) and (max-width: 1024px) {
  #contents.cs .guideIntro a {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.cs .guideIntro a::before {
    margin-right: 14px;
  }

  #contents.cs .guideIntro a::after {
    margin-left: 18px;
  }
}

#contents.cs .guideType01 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 {
    margin-top: 150px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01 {
    margin-top: 45px;
  }
}

#contents.cs .guideType01 .guideList01 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  word-break: keep-all;
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 .guideList01 {
    margin-top: 35px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01 .guideList01 {
    margin-top: 40px;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 .guideList01 li {
    width: 33.3333333333%;
  }

  #contents.cs .guideType01 .guideList01 li+li+li+li {
    margin-top: 135px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01 .guideList01 li {
    width: calc(50% - 20px);
  }

  #contents.cs .guideType01 .guideList01 li+li+li {
    margin-top: 35px;
  }
}

@media (max-width: 640px) {
  #contents.cs .guideType01 .guideList01 li {
    width: 100%;
  }

  #contents.cs .guideType01 .guideList01 li+li {
    margin-top: 35px;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 .guideList01 li h2 {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01 .guideList01 li h2 {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

#contents.cs .guideType01 .guideList01 li h2 span {
  padding-right: 0.5em;
  font-size: 1.15em;
  color: #c8c8c8;
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 .guideList01 li p {
    margin-top: 20px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01 .guideList01 li p {
    margin-top: 10px;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 .guideList02 {
    margin-top: 30px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01 .guideList02 {
    margin-top: 6px;
  }
}

#contents.cs .guideType01 .guideList02 li {
  word-break: keep-all;
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 .guideList02 li {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }

  #contents.cs .guideType01 .guideList02 li:nth-child(odd) div {
    padding-left: 6.65%;
  }

  #contents.cs .guideType01 .guideList02 li:nth-child(even) {
    flex-direction: row-reverse;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01 .guideList02 li {
    padding-top: 30px;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 .guideList02 li img {
    width: 50%;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01 .guideList02 li img {
    width: 100%;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 .guideList02 li div {
    width: 50%;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01 .guideList02 li div {
    width: 240px;
    margin-top: 13px;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 .guideList02 li div strong {
    font-size: 40px;
    line-height: 52px;
    letter-spacing: -0.03em;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01 .guideList02 li div strong {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 .guideList02 li div p {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
    margin-top: 32px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01 .guideList02 li div p {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    color: #666;
    margin-top: 5px;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 .guideList04 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 30px;
  }
}

#contents.cs .guideType01 .guideList04 li {
  text-align: center;
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 .guideList04 li {
    width: calc(50% - 20px);
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01 .guideList04 li {
    margin-top: 40px;
  }
}

#contents.cs .guideType01 .guideList04 li img {
  width: 100%;
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 .guideList04 li img {
    margin-bottom: 49px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01 .guideList04 li img {
    margin-bottom: 23px;
  }
}

#contents.cs .guideType01 .guideList04 li p {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
}

@media (min-width: 1025px) {
  #contents.cs .guideType01 .guideList04 li p {
    margin-top: 17px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01 .guideList04 li p {
    margin-top: 7px;
    color: #666;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideType01.case {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideType01.case header {
    width: 250px;
  }
}

#contents.cs .guideType01.case header p {
  word-break: keep-all;
}

@media (min-width: 1025px) {
  #contents.cs .guideType01.case header p {
    margin-top: 12px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01.case header p {
    margin-top: 6px;
  }
}

#contents.cs .guideType01.case .guideList03 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  word-break: keep-all;
}

@media (min-width: 1025px) {
  #contents.cs .guideType01.case .guideList03 {
    width: calc(100% - 280px);
    max-width: 846px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01.case .guideList03 {
    padding-top: 11px;
  }
}

#contents.cs .guideType01.case .guideList03 li {
  position: relative;
  background: #F4F5F5;
}

@media (min-width: 1025px) {
  #contents.cs .guideType01.case .guideList03 li {
    width: calc(33.3333333333% - 12px);
    padding: 147px 22px 38px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01.case .guideList03 li {
    margin-top: 30px;
    width: calc(33.3333333333% - 7px);
    padding: 147px 30px 44px;
  }
}

@media screen and (max-width: 800px) {
  #contents.cs .guideType01.case .guideList03 li {
    width: 100%;
    padding-top: 140px;
  }
}

#contents.cs .guideType01.case .guideList03 li::before {
  position: absolute;
  content: "";
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

@media (min-width: 1025px) {
  #contents.cs .guideType01.case .guideList03 li::before {
    top: 18px;
    right: 18px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01.case .guideList03 li::before {
    top: 30px;
    right: 30px;
  }
}

#contents.cs .guideType01.case .guideList03 li:nth-child(1)::before {
  background-image: url("../images/gwell/guide/iconGuide01.svg");
}

#contents.cs .guideType01.case .guideList03 li:nth-child(2)::before {
  background-image: url("../images/gwell/guide/iconGuide02.svg");
}

#contents.cs .guideType01.case .guideList03 li:nth-child(3)::before {
  background-image: url("../images/gwell/guide/iconGuide03.svg");
}

@media (min-width: 1025px) {
  #contents.cs .guideType01.case .guideList03 li strong {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType01.case .guideList03 li strong {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

#contents.cs .guideType01.case .guideList03 li p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
}

@media (max-width: 1024px) {
  #contents.cs .guideType01.case .guideList03 li p {
    color: #666;
  }
}

#contents.cs .guideType02 {
  background: url("../images/gwell/guide/bgGuide02.jpg") no-repeat center/cover;
}

@media (min-width: 1025px) {
  #contents.cs .guideType02 {
    margin-top: 225px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType02 {
    margin-top: 45px;
  }
}

@media (max-width: 640px) {
  #contents.cs .guideType02 {
    background-image: url("../images/gwell/guide/bgGuide02M.jpg");
  }
}

#contents.cs .guideType02>div {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  color: #fff;
}

@media (min-width: 1025px) {
  #contents.cs .guideType02>div {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType02>div {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (min-width: 1025px) {
  #contents.cs .guideType02>div header p {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
    padding: 17px 0 58px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType02>div header p {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    padding: 14px 0 57px;
  }
}

#contents.cs .guideType02>div ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

@media (min-width: 1025px) {
  #contents.cs .guideType02>div ul {
    max-width: 1056px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType02>div ul {
    max-width: 640px;
  }
}

@media (max-width: 640px) {
  #contents.cs .guideType02>div ul {
    max-width: 320px;
    justify-content: flex-end;
  }
}

#contents.cs .guideType02>div ul li {
  position: relative;
  height: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  text-align: center;
}

@media (min-width: 1025px) {
  #contents.cs .guideType02>div ul li {
    width: calc(33.3333333333% - 32px);
    padding-bottom: calc(33.3333333333% - 32px);
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType02>div ul li {
    width: calc(33.3333333333% - 13.3333333333px);
    padding-bottom: calc(33.3333333333% - 13.3333333333px);
  }
}

@media (max-width: 640px) {
  #contents.cs .guideType02>div ul li {
    width: calc(50% - 10px);
    padding-bottom: calc(50% - 10px);
  }

  #contents.cs .guideType02>div ul li+li {
    margin-left: 20px;
  }

  #contents.cs .guideType02>div ul li+li+li {
    margin-top: 20px;
  }

  #contents.cs .guideType02>div ul li+li+li::before {
    left: 0;
    right: 0;
    bottom: unset;
    top: -11px;
    transform: rotate(90deg);
  }
}

#contents.cs .guideType02>div ul li+li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

@media (min-width: 1025px) {
  #contents.cs .guideType02>div ul li+li::before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 17px;
    border-color: transparent transparent transparent #fff;
    left: -32px;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType02>div ul li+li::before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 8px;
    border-color: transparent transparent transparent #fff;
    left: -14px;
  }
}

#contents.cs .guideType02>div ul li div {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

#contents.cs .guideType02>div ul li b {
  margin-bottom: 20px;
}

#contents.cs .guideType02>div ul li p {
  font-weight: 500;
}

@media (min-width: 1025px) {
  #contents.cs .guideType02>div ul li p {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {
  #contents.cs .guideType02>div ul li p {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }
}

#contents.reservation>section:not(.active) {
  display: none;
}

#contents.reservation>section.indi>section:first-of-type {
  padding-top: 0 !important;
}

#contents.reservation>section>.empty {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #contents.reservation>section>.empty {
    margin-top: 50px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation>section>.empty {
    margin-top: 40px;
  }
}

#contents.reservation>section>.empty span {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #E1E1E1;
  text-align: center;
  color: #212121;
}

@media (min-width: 1025px) {
  #contents.reservation>section>.empty span {
    height: 402px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation>section>.empty span {
    height: 264px;
  }
}

#contents.reservation>section>.empty span::before {
  content: "";
  display: block;
  background: url("../images/gwell/logo.svg") no-repeat center;
  background-size: 100%;
}

@media (min-width: 1025px) {
  #contents.reservation>section>.empty span::before {
    margin-bottom: 35px;
    width: 200px;
    height: 46px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation>section>.empty span::before {
    margin-bottom: 20px;
    width: 130px;
    height: 30px;
  }
}

#contents.reservation>section>section {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #contents.reservation>section>section:not(:first-of-type) {
    padding-top: 85px;
  }

  #contents.reservation>section>section:first-of-type {
    padding-top: 65px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation>section>section {
    padding-top: 45px;
  }
}

#contents.reservation>section>section>.h1 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  color: #212121;
}

@media (min-width: 1025px) {
  #contents.reservation>section>section>.h1 {
    margin-bottom: 28px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation>section>section>.h1 {
    margin-bottom: 18px;
  }
}

#contents.reservation>section>section>.h1 span {
  margin-right: 0.4em;
  font-weight: 700;
  color: #c8c8c8;
}

#contents.reservation>section>footer {
  text-align: center;
}

@media (min-width: 1025px) {
  #contents.reservation>section>footer {
    padding-top: 80px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation>section>footer {
    padding-top: 40px;
  }
}

#contents.reservation>section>footer button {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
}

#contents.reservation>section>footer button::before,
#contents.reservation>section>footer button::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.reservation>section>footer button:not(:disabled):hover,
#contents.reservation>section>footer button:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.reservation>section>footer button:not(:disabled):hover::before,
#contents.reservation>section>footer button:not(:disabled):hover::after,
#contents.reservation>section>footer button:not(:disabled):focus::before,
#contents.reservation>section>footer button:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.reservation>section>footer button {
    font-size: 16px;
    min-width: 180px;
    height: 60px;
    padding: 0 20px;
    border-radius: 30px;
  }

  #contents.reservation>section>footer button::before {
    margin-right: 10px;
  }

  #contents.reservation>section>footer button::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation>section>footer button {
    font-size: 14px;
    min-width: 180px;
    font-size: 16px;
    height: 50px;
    padding: 0 18px;
    border-radius: 25px;
  }

  #contents.reservation>section>footer button::before {
    margin-right: 14px;
  }

  #contents.reservation>section>footer button::after {
    margin-left: 18px;
  }
}

@media (min-width: 1025px) {
  #contents.reservation>section>footer button {
    width: 208px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation>section>footer button {
    width: 196px;
  }
}

#contents.reservation .chooseModelhouse {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

#contents.reservation .chooseModelhouse>.h1 {
  width: 100%;
}

#contents.reservation .chooseModelhouse>button {
  width: calc(50% - 10px);
}

@media (min-width: 1025px) {
  #contents.reservation .chooseModelhouse>button {
    padding: 45px 20px;
  }

  #contents.reservation .chooseModelhouse>button+button+button {
    margin-top: 20px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .chooseModelhouse>button {
    padding: 25px 20px;
  }

  #contents.reservation .chooseModelhouse>button+button+button {
    margin-top: 10px;
  }
}

@media (max-width: 640px) {
  #contents.reservation .chooseModelhouse>button {
    width: 100%;
  }

  #contents.reservation .chooseModelhouse>button+button {
    margin-top: 10px;
  }
}

#contents.reservation .chooseModelhouse>button.active {
  background: #37234D;
  color: #fff;
}

#contents.reservation .chooseModelhouse>button.active p {
  color: rgba(255, 255, 255, 0.8);
}

#contents.reservation .chooseModelhouse>button.active p::before {
  background: #fff;
}

#contents.reservation .chooseModelhouse>button.active p::after {
  -moz-filter: brightness(100);
  -ms-filter: brightness(100);
  -o-filter: brightness(100);
  filter: brightness(100);
}

#contents.reservation .chooseModelhouse>button:not(.active) {
  border: 1px solid #E1E1E1;
  color: #212121;
}

#contents.reservation .chooseModelhouse>button:not(.active):hover {
  border-color: #46296E;
}

#contents.reservation .chooseModelhouse>button b {
  display: block;
  margin-bottom: 12px;
}

#contents.reservation .chooseModelhouse>button p {
  position: relative;
  display: inline-block;
  color: #666;
  padding-left: 36px;
}

#contents.reservation .chooseModelhouse>button p::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  background: url("../images/icon/iconLocationNew.svg") no-repeat left center;
}

#contents.reservation .chooseModelhouse>button p+p {
  margin-left: 1.2em;
  padding-left: calc(1.2em + 36px);
}

#contents.reservation .chooseModelhouse>button p+p::before {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 0.875em;
  opacity: 0.3;
  background: #000;
}

#contents.reservation .chooseModelhouse>button p+p::after {
  left: 1.2em;
  background-image: url("../images/icon/iconPhoneNew.svg");
}

#contents.reservation .dateTime {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

#contents.reservation .dateTime>.h1 {
  width: 100%;
}

#contents.reservation .dateTime>section {
  position: relative;
  padding-bottom: 40px;
}

@media (min-width: 1025px) {
  #contents.reservation .dateTime>section {
    width: calc(50% - 20px);
  }
}

@media (max-width: 1024px) {
  #contents.reservation .dateTime>section {
    width: calc(50% - 10px);
  }
}

@media (max-width: 640px) {
  #contents.reservation .dateTime>section {
    width: 100%;
  }

  #contents.reservation .dateTime>section+section {
    margin-top: 40px;
  }
}

#contents.reservation .dateTime>section>.h1 {
  margin-bottom: 18px;
  font-weight: 400;
  color: #37234D;
  display: none;
}

#contents.reservation .dateTime>section>dl {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  height: 70px;
  background: #f9f9f9;
}

#contents.reservation .dateTime>section>dl dd {
  margin-left: 18px;
  font-weight: 700;
}

#contents.reservation .dateTime>section .chooseTime {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

@media (min-width: 1025px) {
  #contents.reservation .dateTime>section .chooseTime {
    padding: 20px 6.89% 0;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .dateTime>section .chooseTime {
    padding: 10px 0;
  }
}

#contents.reservation .dateTime>section .chooseTime>p {
  width: 100%;
  text-align: center;
  color: #212121;
  background: url("../images/icon/iconGwellCalendar.svg") no-repeat center 70px;
  padding-top: 180px;
}

@media (max-width: 640px) {
  #contents.reservation .dateTime>section .chooseTime>p {
    padding-top: 170px !important;
    background-size: 100px !important;
    padding-bottom: 60px !important;
  }
}

#contents.reservation .dateTime>section .chooseTime>p b {
  color: #37234D;
}

#contents.reservation .dateTime>section .chooseTime button {
  margin-top: 10px;
}

@media (min-width: 1025px) {
  #contents.reservation .dateTime>section .chooseTime button {
    width: calc(33.3333333333% - 6.6666666667px);
    height: 44px;
    border-radius: 22px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .dateTime>section .chooseTime button {
    width: calc(50% - 5px);
    height: 40px;
    border-radius: 20px;
  }
}

#contents.reservation .dateTime>section .chooseTime button:not(.active):not(:disabled) {
  border: 1px solid #E1E1E1;
}

#contents.reservation .dateTime>section .chooseTime button.active {
  background: #37234D;
  color: #fff;
}

@media (min-width: 1025px) {
  #contents.reservation .dateTime>section .chooseTime button:disabled {
    background: #e9e9e9;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .dateTime>section .chooseTime button:disabled {
    background: #f6f6f6;
  }
}

#contents.reservation .dateTime>section .availability {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding-top: 15px;
}

#contents.reservation .dateTime>section .availability span {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  color: #666;
}

#contents.reservation .dateTime>section .availability span+span {
  margin-left: 23px;
}

#contents.reservation .dateTime>section .availability span::before {
  content: "";
  margin-right: 8px;
  width: 20px;
  height: 20px;
  border: 1px solid #c8c8c8;
  border-radius: 50%;
}

@media (min-width: 1025px) {
  #contents.reservation .dateTime>section .availability span:last-child::before {
    background: #e9e9e9;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .dateTime>section .availability span:last-child::before {
    background: #f6f6f6;
  }
}

@media (min-width: 1025px) {
  #contents.reservation .dateTime>section .chooseTime+.availability {
    border-top: 1px solid #E1E1E1;
  }
}

#contents.reservation .number>div {
  padding: 30px 20px;
  background: #f9f9f9;
}

@media (min-width: 1025px) {
  #contents.reservation .number>div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
}

#contents.reservation .number>div span {
  color: #212121;
}

@media (max-width: 1024px) {
  #contents.reservation .number>div span {
    display: block;
  }
}

#contents.reservation .number>div .selectBox {
  position: relative;
}

#contents.reservation .number>div .selectBox>button {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #707070;
  text-align: left;
  color: #666;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 30px !important;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
}

#contents.reservation .number>div .selectBox>button::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-45deg);
  right: 20px;
}

#contents.reservation .number>div .selectBox>button.placeholder {
  color: #a5a5a5;
}

#contents.reservation .number>div .selectBox>button.active {
  color: #46296E;
  border-color: #46296E;
}

#contents.reservation .number>div .selectBox>button.active::after {
  border-color: #46296E;
}

#contents.reservation .number>div .selectBox>div {
  z-index: 3;
  position: absolute;
  display: none;
  width: 100%;
  overflow: auto;
  background: #fff;
  -ms-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
}

#contents.reservation .number>div .selectBox>div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: #46296E;
  display: none;
}

#contents.reservation .number>div .selectBox>div button {
  width: 100%;
  line-height: 2.5 !important;
  text-align: left;
}

#contents.reservation .number>div .selectBox>div button.selected {
  color: #46296E;
}

@media (min-width: 1025px) {
  #contents.reservation .number>div .selectBox>div>button:first-child {
    margin-top: 10px;
  }

  #contents.reservation .number>div .selectBox>div>button:last-child {
    margin-bottom: 10px;
  }

  #contents.reservation .number>div .selectBox>button {
    height: 54px;
  }

  #contents.reservation .number>div .selectBox>button::after {
    top: 20px;
  }

  #contents.reservation .number>div .selectBox>button,
  #contents.reservation .number>div .selectBox>div button {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .number>div .selectBox>div>button:first-child {
    margin-top: 5px;
  }

  #contents.reservation .number>div .selectBox>div>button:last-child {
    margin-bottom: 5px;
  }

  #contents.reservation .number>div .selectBox>button {
    height: 40px;
  }

  #contents.reservation .number>div .selectBox>button::after {
    top: 10px;
  }

  #contents.reservation .number>div .selectBox>button,
  #contents.reservation .number>div .selectBox>div button {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (min-width: 1025px) {
  #contents.reservation .number>div .selectBox {
    margin-left: 25px;
    width: 500px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .number>div .selectBox {
    margin-top: 13px;
  }
}

#contents.reservation .number>div .selectBox>button {
  border-radius: unset !important;
  border: 0;
  background: #fff;
}

#contents.reservation .number>div .selectBox>button.placeholder {
  color: unset !important;
}

#contents.reservation .terms>section {
  overflow: auto;
  border: 1px solid #c8c8c8;
}

@media (min-width: 1025px) {
  #contents.reservation .terms>section {
    height: 300px;
    padding: 15px 20px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .terms>section {
    height: 220px;
    padding: 15px;
  }
}

#contents.reservation .terms>p {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

@media (min-width: 1025px) {
  #contents.reservation .terms>p {
    margin-top: 20px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .terms>p {
    margin-top: 10px;
  }
}

#contents.reservation .terms>p::before {
  content: "※";
  padding-right: 4px;
  font-size: 14px;
  font-weight: 300;
}

#contents.reservation .terms>p.caseBg {
  padding: 20px;
  background: #F6F6F6;
}

@media (min-width: 1025px) {
  #contents.reservation .terms>p.caseBg {
    margin-top: 30px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .terms>p.caseBg {
    margin-top: 20px;
  }
}

#contents.reservation .terms label {
  margin-top: 20px;
}

@media (min-width: 1025px) {
  #contents.reservation .terms label {
    margin-right: 40px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .terms label {
    margin-right: 20px;
  }
}

#contents.reservation .authentication>div {
  background: #37234D;
}

@media (min-width: 1025px) {
  #contents.reservation .authentication>div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 60px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .authentication>div {
    padding: 50px 20px;
    text-align: center;
  }
}

#contents.reservation .authentication>div p {
  background-image: url("../images/gwell/imgAuthentication.svg");
  background-repeat: no-repeat;
}

@media (min-width: 1025px) {
  #contents.reservation .authentication>div p {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    height: 80px;
    padding-left: 110px;
    background-position: left center;
    color: rgba(255, 255, 255, 0.6);
  }
}

@media (max-width: 1024px) {
  #contents.reservation .authentication>div p {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding-top: 113px;
    background-position: center top;
    color: #fff;
  }
}

#contents.reservation .authentication>div p strong {
  margin-bottom: 12px;
  color: #fff;
}

#contents.reservation .authentication>div button {
  border: 1px solid #fff;
  color: #fff;
}

@media (min-width: 1025px) {
  #contents.reservation .authentication>div button {
    width: 170px;
    height: 50px;
    border-radius: 25px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .authentication>div button {
    margin: 25px auto 0;
    width: 150px;
    height: 40px;
    border-radius: 20px;
  }
}

#contents.reservation .form>.h1 {
  width: 100%;
}

@media (max-width: 1024px) {
  #contents.reservation .form>div:first-child {
    margin-top: 0;
  }
}

#contents.reservation .form>p {
  margin-top: -16px;
  padding-bottom: 10px;
  width: 100%;
}

#contents.reservation .form>p.required {
  margin-top: -10px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  color: #37234D;
}

#contents.reservation .form>p.required,
#contents.reservation .form span.label.required {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

#contents.reservation .form>p.required::after,
#contents.reservation .form span.label.required::after {
  content: "";
  margin-left: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #37234D;
}

#contents.reservation .info>div {
  background: #f9f9f9;
}

@media (min-width: 1025px) {
  #contents.reservation .info>div {
    padding: 20px 50px 60px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .info>div {
    padding: 10px 20px 30px;
  }
}

#contents.reservation .info>div h2 {
  color: #212121;
}

@media (min-width: 1025px) {
  #contents.reservation .info>div h2 {
    margin-top: 43px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .info>div h2 {
    margin-top: 23px;
  }
}

#contents.reservation .info>div ol {
  padding-left: 1em;
}

@media (min-width: 1025px) {
  #contents.reservation .info>div ol {
    margin-top: 23px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .info>div ol {
    margin-top: 16px;
  }
}

@media (min-width: 1025px) {
  #contents.reservation .reservationList {
    padding-top: 60px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .reservationList {
    padding-top: 40px;
  }
}

#contents.reservation .info {
  padding-top: 30px;
}

@media (min-width: 1025px) {
  #contents.reservation .termsInfo {
    padding-bottom: 30px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation .termsInfo {
    padding-bottom: 15px;
  }
}

#contents.reservation div.noEvent {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#contents.reservation div.noEvent p {
  border-top: 1px solid #212121;
  border-bottom: 1px solid #c8c8c8;
  background-image: url("../images/icon/imgNoResult.svg");
  background-repeat: no-repeat;
  text-align: center;
}

@media (min-width: 1025px) {
  #contents.reservation div.noEvent p {
    padding-top: 240px;
    padding-bottom: 115px;
    background-position: center 115px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (max-width: 1024px) {
  #contents.reservation div.noEvent p {
    padding-top: 180px;
    padding-bottom: 50px;
    background-position: center 50px;
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

#contents.reservation div.noEvent p b {
  color: #37234D;
}

#contents.pr.cast>section.youtube {
  background: url("../images/gwell/bgCast.svg") no-repeat center 522px;
}

@media (min-width: 1025px) {
  #contents.pr.cast>section.youtube {
    padding-bottom: 120px;
    background-size: cover;
  }
}

@media (max-width: 1024px) {
  #contents.pr.cast>section.youtube {
    padding-bottom: 50px;
    background-position: center 140px;
  }
}

@media (max-width: 640px) {
  #contents.pr.cast>section.youtube {
    background-image: url("../images/gwell/bgCastM.svg");
    background-size: 100%;
    background-position: center 70px;
  }
}

#contents.pr.cast>section.youtube>header {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#contents.pr.cast>section.youtube>header a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
}

#contents.pr.cast>section.youtube>header a::before,
#contents.pr.cast>section.youtube>header a::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.pr.cast>section.youtube>header a::before {
  content: "";
  background-image: url("../images/gwell/iconYoutube.svg");
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.pr.cast>section.youtube>header a::before {
    width: 26px;
    background-size: unset;
  }
}

#contents.pr.cast>section.youtube>header a:not(:disabled):hover,
#contents.pr.cast>section.youtube>header a:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.pr.cast>section.youtube>header a:not(:disabled):hover::before,
#contents.pr.cast>section.youtube>header a:not(:disabled):hover::after,
#contents.pr.cast>section.youtube>header a:not(:disabled):focus::before,
#contents.pr.cast>section.youtube>header a:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.pr.cast>section.youtube>header a {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  #contents.pr.cast>section.youtube>header a::before {
    margin-right: 10px;
  }

  #contents.pr.cast>section.youtube>header a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.cast>section.youtube>header a {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.pr.cast>section.youtube>header a::before {
    margin-right: 14px;
  }

  #contents.pr.cast>section.youtube>header a::after {
    margin-left: 18px;
  }
}

#contents.pr.cast>section.instagram {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #contents.pr.cast>section.instagram {
    margin-top: 100px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.cast>section.instagram {
    margin-top: 58px;
  }
}

#contents.pr.cast>section.instagram>header a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
}

#contents.pr.cast>section.instagram>header a::before,
#contents.pr.cast>section.instagram>header a::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.pr.cast>section.instagram>header a::before {
  content: "";
  background-image: url("../images/gwell/iconInsta.svg");
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.pr.cast>section.instagram>header a::before {
    width: 26px;
    height: 26px;
    background-size: unset;
  }
}

#contents.pr.cast>section.instagram>header a:not(:disabled):hover,
#contents.pr.cast>section.instagram>header a:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.pr.cast>section.instagram>header a:not(:disabled):hover::before,
#contents.pr.cast>section.instagram>header a:not(:disabled):hover::after,
#contents.pr.cast>section.instagram>header a:not(:disabled):focus::before,
#contents.pr.cast>section.instagram>header a:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.pr.cast>section.instagram>header a {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  #contents.pr.cast>section.instagram>header a::before {
    margin-right: 10px;
  }

  #contents.pr.cast>section.instagram>header a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.cast>section.instagram>header a {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.pr.cast>section.instagram>header a::before {
    margin-right: 14px;
  }

  #contents.pr.cast>section.instagram>header a::after {
    margin-left: 18px;
  }
}

@media (min-width: 1025px) {
  #contents.pr.cast>section>header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.cast>section>header {
    padding-bottom: 30px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.cast>section>header a {
    margin-top: 15px;
  }
}

#contents.pr.cast>section.youtube .list {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

#contents.pr.cast>section.youtube .list>* {
  position: relative;
  /*.img {
      position: relative;
      @include hiddenTxt;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
      display: block;
      &::after {
          content: '';
          @include absoluteFull;
          background: url('../images/gwell/iconPlay.svg') no-repeat center;
          @include middle { background-size: 60px; }
      }
      span {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          @include prefix(transition, all .3s);
      }
      >div {
          position: relative;
          width: 100%;
          height: auto;
          padding-top: 50%;
      }
      iframe {
          @include absoluteFull;
      }
  }*/
}

@media (min-width: 641px) {
  #contents.pr.cast>section.youtube .list>*:first-child {
    width: 100%;
  }

  #contents.pr.cast>section.youtube .list>*:first-child .txt {
    position: absolute;
    left: 0;
    bottom: 0;
    color: #fff;
  }
}

@media (min-width: 641px) and (min-width: 1025px) {
  #contents.pr.cast>section.youtube .list>*:first-child .txt {
    padding: 0 80px 60px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  #contents.pr.cast>section.youtube .list>*:first-child .txt {
    padding: 0 40px 40px;
  }
}

@media (min-width: 641px) and (min-width: 1025px) {
  #contents.pr.cast>section.youtube .list>*:first-child .txt em {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  #contents.pr.cast>section.youtube .list>*:first-child .txt em {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (min-width: 641px) {
  #contents.pr.cast>section.youtube .list>*:first-child .txt em::after {
    -moz-filter: brightness(100);
    -ms-filter: brightness(100);
    -o-filter: brightness(100);
    filter: brightness(100);
  }

  #contents.pr.cast>section.youtube .list>*:first-child .txt p {
    color: #fff;
  }
}

@media (min-width: 641px) and (min-width: 1025px) {
  #contents.pr.cast>section.youtube .list>*:first-child .txt p {
    margin-top: 12px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  #contents.pr.cast>section.youtube .list>*:first-child .txt p {
    margin-top: 9px;
  }
}

@media (min-width: 641px) {
  #contents.pr.cast>section.youtube .list>*:first-child .txt p br {
    display: none;
  }
}

@media (max-width: 640px) {
  #contents.pr.cast>section.youtube .list>*:first-child {
    width: 100%;
  }
}

@media (min-width: 641px) and (min-width: 1025px) {
  #contents.pr.cast>section.youtube .list>*:not(:first-child) {
    margin-top: 80px;
    width: calc(50% - 40px);
  }

  #contents.pr.cast>section.youtube .list>*:not(:first-child):nth-child(2n) {
    top: -70px;
  }

  #contents.pr.cast>section.youtube .list>*:not(:first-child):nth-child(2),
  #contents.pr.cast>section.youtube .list>*:not(:first-child):nth-child(3) {
    margin-top: 170px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  #contents.pr.cast>section.youtube .list>*:not(:first-child) {
    margin-top: 30px;
    width: calc(50% - 15px);
  }
}

@media (max-width: 640px) {
  #contents.pr.cast>section.youtube .list>*:not(:first-child) {
    margin-top: 30px;
    width: 100%;
  }
}

#contents.pr.cast>section.youtube .list>*>div {
  position: relative;
  margin-bottom: 15px;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 30px;
}

#contents.pr.cast>section.youtube .list>*>div iframe {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#contents.pr.cast>section.youtube .list>* em {
  display: block;
  font-weight: 700;
}

@media (min-width: 1025px) {
  #contents.pr.cast>section.youtube .list>* em {
    margin-top: 43px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.cast>section.youtube .list>* em {
    margin-top: 23px;
  }
}

#contents.pr.cast>section.youtube .list>* em::after {
  content: "";
  display: inline-block;
  margin-left: 18px;
  vertical-align: top;
  position: relative;
  top: 0.3em;
  width: 13px;
  height: 13px;
  background: url("../images/gwell/iconArr.svg") no-repeat center;
}

@media (max-width: 1024px) {
  #contents.pr.cast>section.youtube .list>* em::after {
    width: 10px;
    height: 10px;
    background-size: 100%;
  }
}

#contents.pr.cast>section.youtube .list>* p {
  color: #212121;
}

@media (min-width: 1025px) {
  #contents.pr.cast>section.youtube .list>* p {
    margin-top: 17px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.cast>section.youtube .list>* p {
    margin-top: 12px;
  }
}

#contents.pr.cast>section.instagram .swiper {
  word-break: keep-all;
}

@media (min-width: 1025px) {
  #contents.pr.cast>section.instagram .swiper {
    margin-left: -27px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.cast>section.instagram .swiper {
    margin-left: -20px;
  }
}

@media (min-width: 1025px) {
  #contents.pr.cast>section.instagram .swiper .swiper-slide {
    margin-left: 27px;
    width: 280px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.cast>section.instagram .swiper .swiper-slide {
    margin-left: 20px;
    width: 300px;
  }
}

#contents.pr.cast>section.instagram .swiper .swiper-slide:hover .img span,
#contents.pr.cast>section.instagram .swiper .swiper-slide:focus .img span {
  transform: scale(1.06);
}

#contents.pr.cast>section.instagram .swiper .swiper-slide .img {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}

#contents.pr.cast>section.instagram .swiper .swiper-slide .img span {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: all 0.3s linear;
}

#contents.pr.cast>section.instagram .swiper .swiper-slide em {
  display: block;
  margin-top: 18px;
  text-align: center;
  color: #212121;
  font-weight: 700;
  padding: 0 10px;
}

@media (min-width: 1025px) {
  #contents.pr.cast>section.instagram .swiper .swiper-slide em {
    height: 56px;
  }
}

#contents.pr.cast>section.instagram>button {
  position: absolute !important;
  top: 0;
  bottom: 0;
  margin: auto;
}

@media (max-width: 1024px) {
  #contents.pr.cast>section.instagram>button {
    display: none;
  }
}

#contents.pr.cast>section.instagram>button.instaPrev {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #c1c1c1;
  border-radius: 50%;
  background: #fff;
  left: -50px;
}

#contents.pr.cast>section.instagram>button.instaPrev:not(:disabled):hover {
  border-color: #46296E;
}

#contents.pr.cast>section.instagram>button.instaPrev:not(:disabled):hover::after {
  border-color: #46296E !important;
}

#contents.pr.cast>section.instagram>button.instaPrev::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 10px;
}

@media (min-width: 1025px) {
  #contents.pr.cast>section.instagram>button.instaPrev {
    width: 40px;
    height: 40px;
  }

  #contents.pr.cast>section.instagram>button.instaPrev::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(45deg);
  }
}

@media (max-width: 1024px) {
  #contents.pr.cast>section.instagram>button.instaPrev {
    width: 35px;
    height: 35px;
  }

  #contents.pr.cast>section.instagram>button.instaPrev::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(45deg);
  }
}

@media (max-width: 1024px) {
  #contents.pr.cast>section.instagram>button.instaPrev {
    display: none;
  }
}

#contents.pr.cast>section.instagram>button.instaNext {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #c1c1c1;
  border-radius: 50%;
  background: #fff;
  right: -50px;
}

#contents.pr.cast>section.instagram>button.instaNext:not(:disabled):hover {
  border-color: #46296E;
}

#contents.pr.cast>section.instagram>button.instaNext:not(:disabled):hover::after {
  border-color: #46296E !important;
}

#contents.pr.cast>section.instagram>button.instaNext::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 10px;
}

@media (min-width: 1025px) {
  #contents.pr.cast>section.instagram>button.instaNext {
    width: 40px;
    height: 40px;
  }

  #contents.pr.cast>section.instagram>button.instaNext::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-135deg);
  }
}

@media (max-width: 1024px) {
  #contents.pr.cast>section.instagram>button.instaNext {
    width: 35px;
    height: 35px;
  }

  #contents.pr.cast>section.instagram>button.instaNext::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-135deg);
  }
}

@media (max-width: 1024px) {
  #contents.pr.cast>section.instagram>button.instaNext {
    display: none;
  }
}

#contents.pr.press>div {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#contents.pr.press .info {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 1025px) {
  #contents.pr.press .info .search {
    position: absolute;
    right: 93px;
    top: 0;
    width: 300px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.press .info .search {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
  }
}

#contents.pr.press .info .search input {
  width: 100%;
  height: 50px;
  padding: 0 55px 0 25px;
  border: none;
  outline: none;
  border-radius: 30px;
  background: #f9f9f9;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
}

#contents.pr.press .info .search button {
  position: absolute;
  right: 25px;
  top: 0;
  bottom: 0;
  width: 20px;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  margin: auto;
  background: url("../images/icon/iconZoom.svg") no-repeat center;
  -moz-filter: grayscale(100);
  -ms-filter: grayscale(100);
  -o-filter: grayscale(100);
  filter: grayscale(100);
}

#contents.pr.press .info .total {
  color: #212121;
}

@media (min-width: 1025px) {
  #contents.pr.press .info .total {
    line-height: 50px;
  }
}

#contents.pr.press .info .choose {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
}

#contents.pr.press .info .choose>button {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 26px;
  height: 26px;
  background-position: center;
  background-repeat: no-repeat;
}

#contents.pr.press .info .choose>button.thumbMode {
  background-image: url("../images/icon/iconThumbModeActive.svg");
}

#contents.pr.press .info .choose>button.textMode {
  background-image: url("../images/icon/iconTextModeActive.svg");
}

#contents.pr.press .info .choose>button+button {
  margin-left: 14px;
}

#contents.pr.press .info .choose>button:not(.active) {
  -moz-filter: grayscale(100);
  -ms-filter: grayscale(100);
  -o-filter: grayscale(100);
  filter: grayscale(100);
  opacity: 0.4;
}

#contents.pr.press .empty {
  text-align: center;
  border-top: 1px solid #212121;
  border-bottom: 1px solid #c8c8c8;
  background: url("../images/brighten/page/imgResultNone.svg") no-repeat;
}

@media (min-width: 1025px) {
  #contents.pr.press .empty {
    margin-top: 30px;
    padding-top: 230px;
    padding-bottom: 100px;
    background-position: center 100px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (max-width: 1024px) {
  #contents.pr.press .empty {
    margin-top: 15px;
    padding-top: 180px;
    padding-bottom: 50px;
    background-position: center 50px;
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

#contents.pr.press .empty em {
  font-weight: 700;
  color: #37234D;
}

@media (min-width: 1025px) {
  #contents.pr.press .modeTarget {
    margin-top: 30px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.press .modeTarget {
    margin-top: 15px;
  }
}

#contents.pr.press .modeTarget.thumbMode .img {
  padding-bottom: 57.8947% !important;
}

@media (min-width: 1025px) {
  #contents.pr.press .modeTarget.thumbMode>a+a+a+a {
    margin-top: 55px;
  }
}

@media (min-width: 1025px) {
  #contents.pr.press .modeTarget.thumbMode .pagination {
    margin-top: 80px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.press .modeTarget.thumbMode .pagination {
    margin-top: 40px;
  }
}

#contents.pr.press .modeTarget .pagination {
  width: 100%;
}

#contents.pr.media>section {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

#contents.pr.media>section .h1 {
  margin-bottom: 20px;
}

#contents.pr.media .newsPick .swiper {
  position: relative;
}

#contents.pr.media .newsPick .swiper li {
  position: relative;
}

#contents.pr.media .newsPick .swiper li .img {
  position: relative;
  overflow: hidden;
  vertical-align: top;
}

#contents.pr.media .newsPick .swiper li .img span {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 57.922%;
  background-size: cover;
  background-position: center;
}

#contents.pr.media .newsPick .swiper li .detail {
  position: relative;
  vertical-align: top;
}

#contents.pr.media .newsPick .swiper li .detail .paging span {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
}

#contents.pr.media .newsPick .swiper li .detail .paging span:hover::before {
  opacity: 0;
}

#contents.pr.media .newsPick .swiper li .detail .paging span::before,
#contents.pr.media .newsPick .swiper li .detail .paging span::after {
  z-index: 1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.3s;
}

#contents.pr.media .newsPick .swiper li .detail .paging span::before {
  background: rgba(0, 0, 0, 0.53);
}

#contents.pr.media .newsPick .swiper li .detail .paging span::after {
  max-width: 0;
  background: rgba(46, 40, 57, 0.47);
}

#contents.pr.media .newsPick .swiper li .detail .paging span.swiper-pagination-bullet-active::before {
  display: none;
}

@keyframes maxWidthKey {
  to {
    max-width: 100%;
  }
}

#contents.pr.media .newsPick .swiper li .detail .paging span.swiper-pagination-bullet-active::after {
  max-width: 0;
  animation: maxWidthKey 10s 0s forwards;
}

#contents.pr.media .newsPick .swiper li .detail .paging span+span {
  margin-left: 10px;
}

#contents.pr.media .newsPick .swiper li .detail .paging span img {
  display: block;
  width: 100%;
  height: 100%;
}

#contents.pr.media .newsPick .swiper li .detail em {
  display: block;
  display: -ms-flexbox;
  display: -moz-box;
  display: -webkit-box;
  -ms-box-align: center;
  -o-box-align: center;
  box-align: center;
  max-height: 4.2em;
  line-height: 1.4 !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: break-spaces;
  word-break: keep-all;
}

@media (min-width: 1025px) {
  #contents.pr.media .newsPick .swiper li .detail em {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
  }
}

@media (max-width: 1024px) {
  #contents.pr.media .newsPick .swiper li .detail em {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

#contents.pr.media .newsPick .swiper li .detail>span {
  display: block;
  display: block;
  display: -ms-flexbox;
  display: -moz-box;
  display: -webkit-box;
  -ms-box-align: center;
  -o-box-align: center;
  box-align: center;
  max-height: 3.4em;
  line-height: 1.7 !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: break-spaces;
}

#contents.pr.media .newsPick .swiper li .detail a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
  min-width: 100px;
}

#contents.pr.media .newsPick .swiper li .detail a::before,
#contents.pr.media .newsPick .swiper li .detail a::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.pr.media .newsPick .swiper li .detail a:not(:disabled):hover,
#contents.pr.media .newsPick .swiper li .detail a:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.pr.media .newsPick .swiper li .detail a:not(:disabled):hover::before,
#contents.pr.media .newsPick .swiper li .detail a:not(:disabled):hover::after,
#contents.pr.media .newsPick .swiper li .detail a:not(:disabled):focus::before,
#contents.pr.media .newsPick .swiper li .detail a:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.pr.media .newsPick .swiper li .detail a {
    font-size: 16px;
    font-size: 14px;
    min-width: 100px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.pr.media .newsPick .swiper li .detail a::before {
    margin-right: 10px;
  }

  #contents.pr.media .newsPick .swiper li .detail a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.media .newsPick .swiper li .detail a {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.pr.media .newsPick .swiper li .detail a::before {
    margin-right: 14px;
  }

  #contents.pr.media .newsPick .swiper li .detail a::after {
    margin-left: 18px;
  }
}

#contents.pr.media .newsPick .swiper li .detail a:hover {
  background: #37234D !important;
  border: 1px solid #37234D !important;
}

@media (min-width: 1025px) {
  #contents.pr.media .newsPick .swiper li {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1240px;
  }

  #contents.pr.media .newsPick .swiper li .img {
    z-index: 2;
    width: 64.166%;
    height: 0;
    padding-bottom: 37.0829%;
    transition: all 0.5s;
  }

  #contents.pr.media .newsPick .swiper li .img.order {
    order: 2;
    padding-left: 4%;
  }

  #contents.pr.media .newsPick .swiper li .detail {
    width: 35.834%;
    min-height: 100%;
    padding-left: 4%;
    padding-right: 20px;
    opacity: 1;
    transition: left 1s;
  }

  #contents.pr.media .newsPick .swiper li .detail.order {
    order: 1;
    padding-left: 0;
  }

  #contents.pr.media .newsPick .swiper li .detail .paging {
    margin: 13px 0 38px;
  }

  #contents.pr.media .newsPick .swiper li .detail .paging span {
    width: 53px;
    height: 53px;
  }

  #contents.pr.media .newsPick .swiper li .detail>span {
    margin-top: 30px;
  }

  #contents.pr.media .newsPick .swiper li .detail a {
    margin-top: 38px;
  }

  #contents.pr.media .newsPick .swiper li .detail .buttonWrap {
    margin-top: 30px;
    /*@media (max-width: 1200px) {
      left: unset;
      right: $space;
    }*/
  }

  #contents.pr.media .newsPick .swiper li .detail .buttonWrap *+* {
    margin-left: 20px;
  }
}

@media (min-width: 1025px) and (min-width: 1281px) {

  #contents.pr.media .newsPick .swiper li.swiper-slide-prev,
  #contents.pr.media .newsPick .swiper li.swiper-slide-duplicate-prev {
    /*
    .img {
      margin-left: 35.834%;
    }
    .detail {
      left: 50%;
      opacity: 0;
    }*/
  }

  #contents.pr.media .newsPick .swiper li.swiper-slide-prev .img,
  #contents.pr.media .newsPick .swiper li.swiper-slide-duplicate-prev .img {
    order: 1;
  }
}

@media (max-width: 1024px) {
  #contents.pr.media .newsPick .swiper li {
    width: 100%;
  }

  #contents.pr.media .newsPick .swiper li .detail .paging {
    margin-bottom: 36px;
  }

  #contents.pr.media .newsPick .swiper li .detail .paging span {
    width: 40px;
    height: 40px;
  }

  #contents.pr.media .newsPick .swiper li .detail>span {
    margin-top: 12px;
  }

  #contents.pr.media .newsPick .swiper li .detail a {
    margin-top: 20px;
  }

  #contents.pr.media .newsPick .swiper li .detail .buttonWrap *+* {
    margin-left: 12px;
  }
}

@media (max-width: 1024px) and (min-width: 801px) {
  #contents.pr.media .newsPick .swiper li .img {
    width: 55%;
    height: 0;
    padding-bottom: 31.796875%;
  }

  #contents.pr.media .newsPick .swiper li .detail {
    width: 45%;
    min-height: 100%;
    padding-left: 30px;
    padding-right: 20px;
  }

  #contents.pr.media .newsPick .swiper li .detail .buttonWrap {
    margin-top: 20px;
    /*@media (max-width: 990px) {
      left: unset;
      right: $space;
    }*/
  }
}

@media (max-width: 800px) {
  #contents.pr.media .newsPick .swiper li {
    max-width: 300px;
    padding: 0 10px;
  }

  #contents.pr.media .newsPick .swiper li .img {
    width: 100%;
  }

  #contents.pr.media .newsPick .swiper li .detail .paging {
    margin-top: 30px;
  }

  #contents.pr.media .newsPick .swiper li .detail>a {
    margin-top: 33px;
  }

  #contents.pr.media .newsPick .swiper li .detail .buttonWrap {
    margin-top: 20px;
  }
}

@media (max-width: 800px) and (min-width: 360px) {

  #contents.pr.media .newsPick .swiper li .paging,
  #contents.pr.media .newsPick .swiper li .buttonWrap,
  #contents.pr.media .newsPick .swiper li>a {
    opacity: 1;
    transition: all 0.5s;
  }

  #contents.pr.media .newsPick .swiper li:not(.swiper-slide-duplicate-active):not(.swiper-slide-active) .paging,
  #contents.pr.media .newsPick .swiper li:not(.swiper-slide-duplicate-active):not(.swiper-slide-active) .buttonWrap,
  #contents.pr.media .newsPick .swiper li:not(.swiper-slide-duplicate-active):not(.swiper-slide-active) .detail>a {
    opacity: 0;
  }
}

@media (max-width: 480px) {
  #contents.pr.media .newsPick .swiper {
    margin-left: -20px;
  }

  #contents.pr.media .newsPick .swiper li {
    max-width: calc(100% - 20px * 3);
  }
}

@media (max-width: 480px) and (max-width: 359px) {
  #contents.pr.media .newsPick .swiper {
    min-width: 315px;
    margin: 0 !important;
  }

  #contents.pr.media .newsPick .swiper li {
    max-width: unset;
    width: 100%;
    padding: 0 20px;
  }
}

@media (min-width: 1025px) {
  #contents.pr.media .newsPick .swiper {
    padding-top: 10px;
  }
}

#contents.pr.media .newsPick .swiper-button-next {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #c1c1c1;
  border-radius: 50%;
  background: #fff;
  position: absolute !important;
  top: 50%;
  right: -70px;
  border: 0;
}

#contents.pr.media .newsPick .swiper-button-next:not(:disabled):hover {
  border-color: #46296E;
}

#contents.pr.media .newsPick .swiper-button-next:not(:disabled):hover::after {
  border-color: #46296E !important;
}

#contents.pr.media .newsPick .swiper-button-next::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 10px;
}

@media (min-width: 1025px) {
  #contents.pr.media .newsPick .swiper-button-next {
    width: 40px;
    height: 40px;
  }

  #contents.pr.media .newsPick .swiper-button-next::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-135deg);
  }
}

@media (max-width: 1024px) {
  #contents.pr.media .newsPick .swiper-button-next {
    width: 35px;
    height: 35px;
  }

  #contents.pr.media .newsPick .swiper-button-next::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-135deg);
  }
}

#contents.pr.media .newsPick .swiper-button-next:after {
  width: 15px;
  height: 15px;
}

@media (max-width: 1024px) {
  #contents.pr.media .newsPick .swiper-button-next {
    display: none;
  }
}

#contents.pr.media .newsPick .swiper-button-prev {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #c1c1c1;
  border-radius: 50%;
  background: #fff;
  position: absolute !important;
  top: 50%;
  left: -70px;
  border: 0;
}

#contents.pr.media .newsPick .swiper-button-prev:not(:disabled):hover {
  border-color: #46296E;
}

#contents.pr.media .newsPick .swiper-button-prev:not(:disabled):hover::after {
  border-color: #46296E !important;
}

#contents.pr.media .newsPick .swiper-button-prev::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 10px;
}

@media (min-width: 1025px) {
  #contents.pr.media .newsPick .swiper-button-prev {
    width: 40px;
    height: 40px;
  }

  #contents.pr.media .newsPick .swiper-button-prev::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(45deg);
  }
}

@media (max-width: 1024px) {
  #contents.pr.media .newsPick .swiper-button-prev {
    width: 35px;
    height: 35px;
  }

  #contents.pr.media .newsPick .swiper-button-prev::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(45deg);
  }
}

#contents.pr.media .newsPick .swiper-button-prev:after {
  width: 15px;
  height: 15px;
}

@media (max-width: 1024px) {
  #contents.pr.media .newsPick .swiper-button-prev {
    display: none;
  }
}

#contents.pr.media .newsPick button:disabled,
#contents.pr.media .newsPick button.swiper-button-disabled {
  display: none !important;
}

#contents.pr.media .newsPick button:disabled+button,
#contents.pr.media .newsPick button.swiper-button-disabled+button {
  margin-left: 0 !important;
}

@media (min-width: 1025px) {
  #contents.pr.media .collect {
    padding-top: 105px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.media .collect {
    padding-top: 53px;
  }
}

@media (min-width: 1025px) {
  #contents.pr.media .collect .utility {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
  }
}

#contents.pr.media .collect .tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

@media (min-width: 1025px) {
  #contents.pr.media .collect .tags {
    width: calc(100% - 400px);
  }
}

#contents.pr.media .collect .tags>* {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
  min-width: 100px;
  padding: 0 22px;
  font-weight: 700;
}

#contents.pr.media .collect .tags>*::before,
#contents.pr.media .collect .tags>*::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.pr.media .collect .tags>*:not(:disabled):hover,
#contents.pr.media .collect .tags>*:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.pr.media .collect .tags>*:not(:disabled):hover::before,
#contents.pr.media .collect .tags>*:not(:disabled):hover::after,
#contents.pr.media .collect .tags>*:not(:disabled):focus::before,
#contents.pr.media .collect .tags>*:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.pr.media .collect .tags>* {
    font-size: 16px;
    font-size: 14px;
    min-width: 100px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.pr.media .collect .tags>*::before {
    margin-right: 10px;
  }

  #contents.pr.media .collect .tags>*::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.media .collect .tags>* {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.pr.media .collect .tags>*::before {
    margin-right: 14px;
  }

  #contents.pr.media .collect .tags>*::after {
    margin-left: 18px;
  }
}

@media (min-width: 1025px) {
  #contents.pr.media .collect .tags>* {
    margin-right: 15px;
    margin-bottom: 15px;
    font-size: 16px !important;
  }
}

@media (max-width: 1024px) {
  #contents.pr.media .collect .tags>* {
    margin-right: 7px;
    margin-bottom: 10px;
  }
}

#contents.pr.media .collect .tags>*.active {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.pr.media .collect .tags>*.active::before,
#contents.pr.media .collect .tags>*.active::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

#contents.pr.media .collect .tags>* span {
  display: inline-block;
  padding-left: 15px;
}

#contents.pr.media .collect .search {
  position: relative;
}

@media (min-width: 1025px) {
  #contents.pr.media .collect .search {
    width: 300px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.media .collect .search {
    margin-top: 20px;
  }
}

#contents.pr.media .collect .search input {
  width: 100%;
  height: 50px;
  padding: 0 55px 0 25px;
  border: none;
  outline: none;
  border-radius: 30px;
  background: #f9f9f9;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
}

#contents.pr.media .collect .search button {
  position: absolute;
  right: 25px;
  top: 0;
  bottom: 0;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  margin: auto;
  width: 20px;
  background: url("../images/icon/iconZoom.svg") no-repeat center;
  -moz-filter: grayscale(100);
  -ms-filter: grayscale(100);
  -o-filter: grayscale(100);
  filter: grayscale(100);
}

#contents.pr.media .collect .info {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}

#contents.pr.media .collect .total {
  color: #212121;
}

#contents.pr.media .collect .choose {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
}

#contents.pr.media .collect .choose>button {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 26px;
  height: 26px;
  background-position: center;
  background-repeat: no-repeat;
}

#contents.pr.media .collect .choose>button.thumbMode {
  background-image: url("../images/icon/iconThumbModeActive.svg");
}

#contents.pr.media .collect .choose>button.textMode {
  background-image: url("../images/icon/iconTextModeActive.svg");
}

#contents.pr.media .collect .choose>button+button {
  margin-left: 14px;
}

#contents.pr.media .collect .choose>button:not(.active) {
  -moz-filter: grayscale(100);
  -ms-filter: grayscale(100);
  -o-filter: grayscale(100);
  filter: grayscale(100);
  opacity: 0.4;
}

#contents.pr.media .collect .empty {
  text-align: center;
  border-top: 1px solid #212121;
  border-bottom: 1px solid #c8c8c8;
  background: url("../images/brighten/page/imgResultNone.svg") no-repeat;
}

@media (min-width: 1025px) {
  #contents.pr.media .collect .empty {
    margin-top: 30px;
    padding-top: 230px;
    padding-bottom: 100px;
    background-position: center 100px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (max-width: 1024px) {
  #contents.pr.media .collect .empty {
    margin-top: 15px;
    padding-top: 180px;
    padding-bottom: 50px;
    background-position: center 50px;
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

#contents.pr.media .collect .empty em {
  font-weight: 700;
  color: #37234D;
}

@media (min-width: 1025px) {
  #contents.pr.media .collect .modeTarget {
    margin-top: 30px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.media .collect .modeTarget {
    margin-top: 15px;
  }
}

#contents.pr.media .collect .modeTarget.thumbMode .img {
  padding-bottom: 57.8947% !important;
}

@media (min-width: 1025px) {
  #contents.pr.media .collect .modeTarget.thumbMode>a+a+a+a {
    margin-top: 55px;
  }
}

@media (min-width: 1025px) {
  #contents.pr.media .collect .modeTarget.thumbMode .pagination {
    margin-top: 80px;
  }
}

@media (max-width: 1024px) {
  #contents.pr.media .collect .modeTarget.thumbMode .pagination {
    margin-top: 40px;
  }
}

#contents.pr.media .collect .modeTarget .pagination {
  width: 100%;
}

.locationContentPop {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
}

@media (max-width: 1024px) {
  .locationContentPop {
    font-weight: 300;
  }
}

.locationContentPop .map {
  background: #c8c8c8;
}

@media (min-width: 1025px) {
  .locationContentPop .map {
    margin-top: 15px;
    height: 400px;
  }
}

@media (max-width: 1024px) {
  .locationContentPop .map {
    margin-top: 10px;
    height: 280px;
  }
}

.popup>div .notice span#cpx_address {
  margin-top: 0;
}

@media (max-width: 1024px) {
  .popup>div .notice span#cpx_address {
    width: 100%;
  }
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo {
    padding-top: 40px;
  }
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo {
    padding-top: 30px;
  }
}

.popup .gwell .caseInfo h2 {
  margin-bottom: 20px;
  color: #37234D;
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo h2 {
    padding-top: 14px;
  }
}

.popup .gwell .caseInfo dl,
.popup .gwell .caseInfo ol {
  border: 1px solid #E1E1E1;
}

@media (min-width: 1025px) {

  .popup .gwell .caseInfo dl,
  .popup .gwell .caseInfo ol {
    padding: 40px;
  }
}

@media (max-width: 1024px) {

  .popup .gwell .caseInfo dl,
  .popup .gwell .caseInfo ol {
    padding: 20px;
  }
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo ol {
    padding-left: calc(40px + 0.6em);
  }
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo ol {
    padding-left: calc(20px + 1em);
  }
}

.popup .gwell .caseInfo dl {
  color: #212121;
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dl {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dt {
    width: 120px;
  }
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo dt {
    margin-bottom: 8px;
  }
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dt:not(:first-of-type) {
    margin-top: 27px;
  }
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo dt:not(:first-of-type) {
    margin-top: 17px;
  }
}

.popup .gwell .caseInfo dd {
  font-weight: 700;
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dd {
    width: calc(100% - 120px);
  }
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dd:not(:first-of-type) {
    margin-top: 27px;
  }
}

.popup .gwell .caseInfo dd span {
  width: unset !important;
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dd span {
    margin-top: 7px;
  }
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo dd span {
    margin-top: 3px;
  }
}

.tab::-webkit-scrollbar {
  display: none;
}

.guideBtnEx01 {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
}

.guideBtnEx01::before,
.guideBtnEx01::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

.guideBtnEx01:not(:disabled):hover,
.guideBtnEx01:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

.guideBtnEx01:not(:disabled):hover::before,
.guideBtnEx01:not(:disabled):hover::after,
.guideBtnEx01:not(:disabled):focus::before,
.guideBtnEx01:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  .guideBtnEx01 {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  .guideBtnEx01::before {
    margin-right: 10px;
  }

  .guideBtnEx01::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  .guideBtnEx01 {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  .guideBtnEx01::before {
    margin-right: 14px;
  }

  .guideBtnEx01::after {
    margin-left: 18px;
  }
}

.guideBtnEx02 {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
  min-width: 100px;
}

.guideBtnEx02::before,
.guideBtnEx02::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

.guideBtnEx02:not(:disabled):hover,
.guideBtnEx02:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

.guideBtnEx02:not(:disabled):hover::before,
.guideBtnEx02:not(:disabled):hover::after,
.guideBtnEx02:not(:disabled):focus::before,
.guideBtnEx02:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  .guideBtnEx02 {
    font-size: 16px;
    font-size: 14px;
    min-width: 100px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  .guideBtnEx02::before {
    margin-right: 10px;
  }

  .guideBtnEx02::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  .guideBtnEx02 {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  .guideBtnEx02::before {
    margin-right: 14px;
  }

  .guideBtnEx02::after {
    margin-left: 18px;
  }
}

.guideBtnEx03 {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
}

.guideBtnEx03::before,
.guideBtnEx03::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

.guideBtnEx03:not(:disabled):hover,
.guideBtnEx03:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

.guideBtnEx03:not(:disabled):hover::before,
.guideBtnEx03:not(:disabled):hover::after,
.guideBtnEx03:not(:disabled):focus::before,
.guideBtnEx03:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  .guideBtnEx03 {
    font-size: 16px;
    min-width: 180px;
    height: 60px;
    padding: 0 20px;
    border-radius: 30px;
  }

  .guideBtnEx03::before {
    margin-right: 10px;
  }

  .guideBtnEx03::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  .guideBtnEx03 {
    font-size: 14px;
    min-width: 180px;
    font-size: 16px;
    height: 50px;
    padding: 0 18px;
    border-radius: 25px;
  }

  .guideBtnEx03::before {
    margin-right: 14px;
  }

  .guideBtnEx03::after {
    margin-left: 18px;
  }
}

.guideBtnEx04 {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
}

.guideBtnEx04::before,
.guideBtnEx04::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

.guideBtnEx04::before {
  content: "";
  background-image: url("../images/icon/iconWeb.svg");
}

.guideBtnEx04:not(:disabled):hover,
.guideBtnEx04:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

.guideBtnEx04:not(:disabled):hover::before,
.guideBtnEx04:not(:disabled):hover::after,
.guideBtnEx04:not(:disabled):focus::before,
.guideBtnEx04:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  .guideBtnEx04 {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  .guideBtnEx04::before {
    margin-right: 10px;
  }

  .guideBtnEx04::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  .guideBtnEx04 {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  .guideBtnEx04::before {
    margin-right: 14px;
  }

  .guideBtnEx04::after {
    margin-left: 18px;
  }
}

.guideBtnEx05 {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
}

.guideBtnEx05::before,
.guideBtnEx05::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

.guideBtnEx05::before {
  content: "";
  background-image: url("../images/icon/iconCall.svg");
}

.guideBtnEx05:not(:disabled):hover,
.guideBtnEx05:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

.guideBtnEx05:not(:disabled):hover::before,
.guideBtnEx05:not(:disabled):hover::after,
.guideBtnEx05:not(:disabled):focus::before,
.guideBtnEx05:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  .guideBtnEx05 {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  .guideBtnEx05::before {
    margin-right: 10px;
  }

  .guideBtnEx05::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  .guideBtnEx05 {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  .guideBtnEx05::before {
    margin-right: 14px;
  }

  .guideBtnEx05::after {
    margin-left: 18px;
  }
}

.guideBtnEx06 {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
}

.guideBtnEx06::before,
.guideBtnEx06::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

.guideBtnEx06::after {
  content: "";
  background-image: url("../images/icon/iconArrow.svg");
}

.guideBtnEx06:not(:disabled):hover,
.guideBtnEx06:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

.guideBtnEx06:not(:disabled):hover::before,
.guideBtnEx06:not(:disabled):hover::after,
.guideBtnEx06:not(:disabled):focus::before,
.guideBtnEx06:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  .guideBtnEx06 {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  .guideBtnEx06::before {
    margin-right: 10px;
  }

  .guideBtnEx06::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  .guideBtnEx06 {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  .guideBtnEx06::before {
    margin-right: 14px;
  }

  .guideBtnEx06::after {
    margin-left: 18px;
  }
}

.guideBtnEx07 {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
}

.guideBtnEx07::before,
.guideBtnEx07::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

.guideBtnEx07::after {
  content: "";
  margin-top: -2px !important;
  background-image: url("../images/icon/iconDownload2.svg");
}

.guideBtnEx07:not(:disabled):hover,
.guideBtnEx07:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

.guideBtnEx07:not(:disabled):hover::before,
.guideBtnEx07:not(:disabled):hover::after,
.guideBtnEx07:not(:disabled):focus::before,
.guideBtnEx07:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  .guideBtnEx07 {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  .guideBtnEx07::before {
    margin-right: 10px;
  }

  .guideBtnEx07::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  .guideBtnEx07 {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  .guideBtnEx07::before {
    margin-right: 14px;
  }

  .guideBtnEx07::after {
    margin-left: 18px;
  }
}

.guideBtnEx08 {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #212121;
}

.guideBtnEx08::before,
.guideBtnEx08::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

.guideBtnEx08::after {
  content: "";
  background-image: url("../images/icon/iconZoom.svg");
}

.guideBtnEx08:not(:disabled):hover,
.guideBtnEx08:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

.guideBtnEx08:not(:disabled):hover::before,
.guideBtnEx08:not(:disabled):hover::after,
.guideBtnEx08:not(:disabled):focus::before,
.guideBtnEx08:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  .guideBtnEx08 {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  .guideBtnEx08::before {
    margin-right: 10px;
  }

  .guideBtnEx08::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  .guideBtnEx08 {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  .guideBtnEx08::before {
    margin-right: 14px;
  }

  .guideBtnEx08::after {
    margin-left: 18px;
  }
}

.guideBtnEx09 {
  display: inline-block;
  width: 100%;
  border: 1px solid #000;
  border-radius: 25px;
  background: #ccc;
  text-align: center;
  line-height: 50px;
  color: #555;
}

@media (max-width: 1024px) {
  .guideBtnEx09 {
    font-size: 14px;
  }
}

.guideBtnEx10 {
  display: inline-block;
  width: 100%;
  border-radius: 25px;
  background: #ccc;
  text-align: center;
  line-height: 50px;
  color: #555;
}

@media (max-width: 1024px) {
  .guideBtnEx10 {
    font-size: 14px;
  }
}

.guideBtnEx13 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #c1c1c1;
  border-radius: 50%;
  background: #fff;
}

.guideBtnEx13:not(:disabled):hover {
  border-color: #46296E;
}

.guideBtnEx13:not(:disabled):hover::after {
  border-color: #46296E !important;
}

.guideBtnEx13::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 10px;
}

@media (min-width: 1025px) {
  .guideBtnEx13 {
    width: 40px;
    height: 40px;
  }

  .guideBtnEx13::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(45deg);
  }
}

@media (max-width: 1024px) {
  .guideBtnEx13 {
    width: 35px;
    height: 35px;
  }

  .guideBtnEx13::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(45deg);
  }
}

.guideBtnEx14 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #c1c1c1;
  border-radius: 50%;
  background: #fff;
}

.guideBtnEx14:not(:disabled):hover {
  border-color: #46296E;
}

.guideBtnEx14:not(:disabled):hover::after {
  border-color: #46296E !important;
}

.guideBtnEx14::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 10px;
}

@media (min-width: 1025px) {
  .guideBtnEx14 {
    width: 40px;
    height: 40px;
  }

  .guideBtnEx14::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-135deg);
  }
}

@media (max-width: 1024px) {
  .guideBtnEx14 {
    width: 35px;
    height: 35px;
  }

  .guideBtnEx14::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-135deg);
  }
}

.guideBtnEx15 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #c1c1c1;
  border-radius: 50%;
  background: #fff;
}

.guideBtnEx15:not(:disabled):hover {
  border-color: #46296E;
}

.guideBtnEx15:not(:disabled):hover::after {
  border-color: #46296E !important;
}

.guideBtnEx15::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

@media (min-width: 1025px) {
  .guideBtnEx15 {
    width: 37px;
    height: 37px;
  }

  .guideBtnEx15::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(45deg);
    right: 8px;
  }
}

@media (max-width: 1024px) {
  .guideBtnEx15 {
    width: 25px;
    height: 25px;
  }

  .guideBtnEx15::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(45deg);
    right: 6px;
  }
}

.guideBtnEx16 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #c1c1c1;
  border-radius: 50%;
  background: #fff;
}

.guideBtnEx16:not(:disabled):hover {
  border-color: #46296E;
}

.guideBtnEx16:not(:disabled):hover::after {
  border-color: #46296E !important;
}

.guideBtnEx16::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

@media (min-width: 1025px) {
  .guideBtnEx16 {
    width: 37px;
    height: 37px;
  }

  .guideBtnEx16::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-135deg);
    left: 8px;
  }
}

@media (max-width: 1024px) {
  .guideBtnEx16 {
    width: 25px;
    height: 25px;
  }

  .guideBtnEx16::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-135deg);
    left: 6px;
  }
}

.guideBtnEx17 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #c1c1c1;
  border-radius: 50%;
  background: #fff;
  width: 22px;
  height: 22px;
}

.guideBtnEx17:not(:disabled):hover {
  border-color: #46296E;
}

.guideBtnEx17:not(:disabled):hover::after {
  border-color: #46296E !important;
}

.guideBtnEx17::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 4px;
}

.guideBtnEx17::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(45deg);
}

.guideBtnEx18 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #c1c1c1;
  border-radius: 50%;
  background: #fff;
  width: 22px;
  height: 22px;
}

.guideBtnEx18:not(:disabled):hover {
  border-color: #46296E;
}

.guideBtnEx18:not(:disabled):hover::after {
  border-color: #46296E !important;
}

.guideBtnEx18::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 4px;
}

.guideBtnEx18::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-135deg);
}

.guideBtnEx19 {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid #c1c1c1;
  border-radius: 50%;
}

.guideBtnEx19::after {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  border-width: 0 0 1px 1px;
  border-color: #fff;
  border-style: solid;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 11px;
}

.guideBtnEx19:not(:disabled):hover,
.guideBtnEx19:not(:disabled):focus {
  border-color: #37234D;
}

.guideBtnEx19:not(:disabled):hover::after,
.guideBtnEx19:not(:disabled):focus::after {
  border-color: #37234D;
}

.guideBtnEx20 {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid #c1c1c1;
  border-radius: 50%;
}

.guideBtnEx20::after {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  border-width: 0 0 1px 1px;
  border-color: #fff;
  border-style: solid;
  transform: rotate(-135deg);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 11px;
}

.guideBtnEx20:not(:disabled):hover,
.guideBtnEx20:not(:disabled):focus {
  border-color: #37234D;
}

.guideBtnEx20:not(:disabled):hover::after,
.guideBtnEx20:not(:disabled):focus::after {
  border-color: #37234D;
}

.guideBtnEx21 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #c8c8c8;
  border-radius: 50%;
  background: #fff;
}

.guideBtnEx21:hover,
.guideBtnEx21:focus {
  border-color: #46296E;
}

.guideBtnEx21:hover::after,
.guideBtnEx21:focus::after {
  border-color: #46296E;
}

.guideBtnEx21::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

@media (min-width: 1025px) {
  .guideBtnEx21 {
    width: 40px;
    height: 40px;
  }

  .guideBtnEx21::after {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(45deg);
    right: 11px;
  }
}

@media (max-width: 1024px) {
  .guideBtnEx21 {
    width: 30px;
    height: 30px;
  }

  .guideBtnEx21::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(45deg);
    right: 9px;
  }
}

.guideBtnEx22 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #c8c8c8;
  border-radius: 50%;
  background: #fff;
}

.guideBtnEx22:hover,
.guideBtnEx22:focus {
  border-color: #46296E;
}

.guideBtnEx22:hover::after,
.guideBtnEx22:focus::after {
  border-color: #46296E;
}

.guideBtnEx22::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

@media (min-width: 1025px) {
  .guideBtnEx22 {
    width: 40px;
    height: 40px;
  }

  .guideBtnEx22::after {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-135deg);
    left: 11px;
  }
}

@media (max-width: 1024px) {
  .guideBtnEx22 {
    width: 30px;
    height: 30px;
  }

  .guideBtnEx22::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-width: 0 0 1px 1px;
    border-color: #212121;
    border-style: solid;
    transform: rotate(-135deg);
    left: 9px;
  }
}

.guideBtnEx23 {
  position: relative;
  z-index: 2;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border-radius: 50%;
  background: #46296E;
}

@media (min-width: 1025px) {
  .guideBtnEx23 {
    top: 100px;
    right: 107px;
    width: 48px;
    height: 48px;
  }

  .guideBtnEx23::before,
  .guideBtnEx23::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 23px;
    height: 1px;
    background: #fff;
  }

  .guideBtnEx23::before {
    transform: rotate(45deg);
  }

  .guideBtnEx23::after {
    transform: rotate(-45deg);
  }
}

@media (max-width: 1024px) {
  .guideBtnEx23 {
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
  }

  .guideBtnEx23::before,
  .guideBtnEx23::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 15px;
    height: 1px;
    background: #fff;
  }

  .guideBtnEx23::before {
    transform: rotate(45deg);
  }

  .guideBtnEx23::after {
    transform: rotate(-45deg);
  }
}

.guideArrEx01 {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 23px;
  height: 23px;
}

.guideArrEx01::before,
.guideArrEx01::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 23px;
  height: 1px;
  background: #000;
}

.guideArrEx01::after {
  transform: rotate(90deg);
}

.guideArrEx03 {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 23px;
  height: 23px;
}

.guideArrEx03::before,
.guideArrEx03::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 23px;
  height: 1px;
  background: #000;
}

.guideArrEx02 {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 23px;
  height: 23px;
}

.guideArrEx02::before,
.guideArrEx02::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 15px;
  height: 1px;
  background: red;
}

.guideArrEx02::before {
  transform: rotate(45deg);
}

.guideArrEx02::after {
  transform: rotate(-45deg);
}

.guideTriEx01 {
  display: inline-block;
  margin-top: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 8px;
  border-color: transparent transparent #000 transparent;
}

.guideTriEx02 {
  display: inline-block;
  margin-top: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 7px;
  border-color: transparent transparent transparent red;
}

.guideBraEx01 {
  display: inline-block !important;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 1px 1px;
  border-color: #000;
  border-style: solid;
  transform: rotate(-45deg);
}

.guideBraEx02 {
  display: inline-block !important;
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-width: 0 0 2px 2px;
  border-color: red;
  border-style: solid;
  transform: rotate(45deg);
}

.guidePagination {
  margin-top: 0 !important;
}



/* STYLE GWELL MY */
@media (min-width: 1025px) {
  #contents .contentHeader div>h2 {
    font-size: 60px;
    line-height: 74px;
    letter-spacing: -0.05em;
  }
}

@media (max-width: 1024px) {
  #contents .contentHeader div>h2 {
    font-size: 32px;
    line-height: 42px;
    letter-spacing: -0.025em;
  }
}

@media (min-width: 1025px) {

  .error404 section h2,
  .preview>section>div>header h2 {
    font-size: 50px;
    line-height: 62px;
    letter-spacing: -0.035em;
  }
}

@media (max-width: 1024px) {

  .error404 section h2,
  .preview>section>div>header h2 {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
  }
}

@media (min-width: 1025px) {

  .article#details>header .h1,
  #details .progressCalendar .performance header .h1,
  #details>header .container .h1,
  .popup>div .terms .h1,
  .popup>div .full .h1:not(.caseSmall) {
    font-size: 40px;
    line-height: 52px;
    letter-spacing: -0.03em;
  }
}

@media (max-width: 1024px) {

  .article#details>header .h1,
  #details .progressCalendar .performance header .h1,
  #details>header .container .h1,
  .popup>div .terms .h1,
  .popup>div .full .h1:not(.caseSmall) {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section>header .h1,
  #contents.myinfoCont .overall>section>.h1,
  #contents.salesList>section>section>.h1,
  #details>section>section>.h1,
  #contents.notice>section>section>.h1,
  #contents.contact>section>section>.h1,
  #contents.inquiry>section>section>.h1,
  #contents.issue>section>section>.h1,
  #contents.subscription>section>section>.h1,
  #contents.reservation>section>section>.h1,
  #contents.salesList>section>form>section>.h1,
  #details>section>form>section>.h1,
  #contents.notice>section>form>section>.h1,
  #contents.contact>section>form>section>.h1,
  #contents.inquiry>section>form>section>.h1,
  #contents.issue>section>form>section>.h1,
  #contents.subscription>section>form>section>.h1,
  #contents.reservation>section>form>section>.h1,
  .join h2,
  .login h2,
  .find h2,
  .closeAccount h2,
  #contents.myinfoCont .contentHeader dt,
  #contents.myinfoCont .contentHeader h1,
  .popup>div .full>p:not(.case).big {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
    line-height: 42px;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section>header .h1,
  #contents.myinfoCont .overall>section>.h1,
  #contents.salesList>section>section>.h1,
  #details>section>section>.h1,
  #contents.notice>section>section>.h1,
  #contents.contact>section>section>.h1,
  #contents.inquiry>section>section>.h1,
  #contents.issue>section>section>.h1,
  #contents.subscription>section>section>.h1,
  #contents.reservation>section>section>.h1,
  #contents.salesList>section>form>section>.h1,
  #details>section>form>section>.h1,
  #contents.notice>section>form>section>.h1,
  #contents.contact>section>form>section>.h1,
  #contents.inquiry>section>form>section>.h1,
  #contents.issue>section>form>section>.h1,
  #contents.subscription>section>form>section>.h1,
  #contents.reservation>section>form>section>.h1,
  .join h2,
  .login h2,
  .find h2,
  .closeAccount h2,
  #contents.myinfoCont .contentHeader dt,
  #contents.myinfoCont .contentHeader h1,
  .popup>div .full>p:not(.case).big {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .titArea h2 {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
    line-height: 42px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .titArea h2 {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (min-width: 1025px) {

  .popup .gwell .caseInfo .infoBox h3,
  .popup .winBox p,
  #contents.myinfoCont .overall>section.reserveInfo>ul li strong,
  #contents.myinfoCont .overall>section.reserveInfo>div strong,
  #contents.myinfoCont .overall>section.priceInfo>ul li>p,
  #details h2,
  #contents.contact .bottomCont h3,
  #contents.salesList form .form>h3,
  #details form .form>h3,
  #contents.notice form .form>h3,
  #contents.contact form .form>h3,
  #contents.inquiry form .form>h3,
  #contents.issue form .form>h3,
  #contents.subscription form .form>h3,
  #contents.reservation form .form>h3,
  #contents.salesList form .form .secHeader h3,
  #details form .form .secHeader h3,
  #contents.notice form .form .secHeader h3,
  #contents.contact form .form .secHeader h3,
  #contents.inquiry form .form .secHeader h3,
  #contents.issue form .form .secHeader h3,
  #contents.subscription form .form .secHeader h3,
  #contents.reservation form .form .secHeader h3,
  #contents.salesList>section>section>h3,
  #details>section>section>h3,
  #contents.notice>section>section>h3,
  #contents.contact>section>section>h3,
  #contents.inquiry>section>section>h3,
  #contents.issue>section>section>h3,
  #contents.subscription>section>section>h3,
  #contents.reservation>section>section>h3,
  #contents.salesList>section>section .secHeader h3,
  #details>section>section .secHeader h3,
  #contents.notice>section>section .secHeader h3,
  #contents.contact>section>section .secHeader h3,
  #contents.inquiry>section>section .secHeader h3,
  #contents.issue>section>section .secHeader h3,
  #contents.subscription>section>section .secHeader h3,
  #contents.reservation>section>section .secHeader h3,
  #contents.salesList>section>form>section>h3,
  #details>section>form>section>h3,
  #contents.notice>section>form>section>h3,
  #contents.contact>section>form>section>h3,
  #contents.inquiry>section>form>section>h3,
  #contents.issue>section>form>section>h3,
  #contents.subscription>section>form>section>h3,
  #contents.reservation>section>form>section>h3,
  #contents.salesList>section>form>section .secHeader h3,
  #details>section>form>section .secHeader h3,
  #contents.notice>section>form>section .secHeader h3,
  #contents.contact>section>form>section .secHeader h3,
  #contents.inquiry>section>form>section .secHeader h3,
  #contents.issue>section>form>section .secHeader h3,
  #contents.subscription>section>form>section .secHeader h3,
  #contents.reservation>section>form>section .secHeader h3 {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {

  .popup .gwell .caseInfo .infoBox h3,
  .popup .winBox p,
  #contents.myinfoCont .overall>section.reserveInfo>ul li strong,
  #contents.myinfoCont .overall>section.reserveInfo>div strong,
  #contents.myinfoCont .overall>section.priceInfo>ul li>p,
  #details h2,
  #contents.contact .bottomCont h3,
  #contents.salesList form .form>h3,
  #details form .form>h3,
  #contents.notice form .form>h3,
  #contents.contact form .form>h3,
  #contents.inquiry form .form>h3,
  #contents.issue form .form>h3,
  #contents.subscription form .form>h3,
  #contents.reservation form .form>h3,
  #contents.salesList form .form .secHeader h3,
  #details form .form .secHeader h3,
  #contents.notice form .form .secHeader h3,
  #contents.contact form .form .secHeader h3,
  #contents.inquiry form .form .secHeader h3,
  #contents.issue form .form .secHeader h3,
  #contents.subscription form .form .secHeader h3,
  #contents.reservation form .form .secHeader h3,
  #contents.salesList>section>section>h3,
  #details>section>section>h3,
  #contents.notice>section>section>h3,
  #contents.contact>section>section>h3,
  #contents.inquiry>section>section>h3,
  #contents.issue>section>section>h3,
  #contents.subscription>section>section>h3,
  #contents.reservation>section>section>h3,
  #contents.salesList>section>section .secHeader h3,
  #details>section>section .secHeader h3,
  #contents.notice>section>section .secHeader h3,
  #contents.contact>section>section .secHeader h3,
  #contents.inquiry>section>section .secHeader h3,
  #contents.issue>section>section .secHeader h3,
  #contents.subscription>section>section .secHeader h3,
  #contents.reservation>section>section .secHeader h3,
  #contents.salesList>section>form>section>h3,
  #details>section>form>section>h3,
  #contents.notice>section>form>section>h3,
  #contents.contact>section>form>section>h3,
  #contents.inquiry>section>form>section>h3,
  #contents.issue>section>form>section>h3,
  #contents.subscription>section>form>section>h3,
  #contents.reservation>section>form>section>h3,
  #contents.salesList>section>form>section .secHeader h3,
  #details>section>form>section .secHeader h3,
  #contents.notice>section>form>section .secHeader h3,
  #contents.contact>section>form>section .secHeader h3,
  #contents.inquiry>section>form>section .secHeader h3,
  #contents.issue>section>form>section .secHeader h3,
  #contents.subscription>section>form>section .secHeader h3,
  #contents.reservation>section>form>section .secHeader h3 {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
  }
}

@media (min-width: 1025px) {

  .popup .gwell .caseInfo h2,
  .applicationInfoPop h2,
  .join .result.logout.case>strong,
  .login .result.logout.case>strong,
  .find .result.logout.case>strong,
  .closeAccount .result.logout.case>strong,
  .join .result.withdrawal,
  .login .result.withdrawal,
  .find .result.withdrawal,
  .closeAccount .result.withdrawal,
  .join h3,
  .login h3,
  .find h3,
  .closeAccount h3,
  .popup>div .full .info h2 {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {

  .popup .gwell .caseInfo h2,
  .applicationInfoPop h2,
  .join .result.logout.case>strong,
  .login .result.logout.case>strong,
  .find .result.logout.case>strong,
  .closeAccount .result.logout.case>strong,
  .join .result.withdrawal,
  .login .result.withdrawal,
  .find .result.withdrawal,
  .closeAccount .result.withdrawal,
  .join h3,
  .login h3,
  .find h3,
  .closeAccount h3,
  .popup>div .full .info h2 {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (min-width: 1025px) {

  .popup .bottomTxt dd,
  #contents.myinfoCont .overall>section.priceInfo>ul li section strong,
  #contents.inquiry .footBox dl dd,
  #contents.inquiry .banner p,
  #contents.salesList .dateTime>section>dl dd,
  #details .dateTime>section>dl dd,
  #contents.notice .dateTime>section>dl dd,
  #contents.contact .dateTime>section>dl dd,
  #contents.inquiry .dateTime>section>dl dd,
  #contents.issue .dateTime>section>dl dd,
  #contents.subscription .dateTime>section>dl dd,
  #contents.reservation .dateTime>section>dl dd,
  #contents.salesList .chooseModelhouse>button b,
  #details .chooseModelhouse>button b,
  #contents.notice .chooseModelhouse>button b,
  #contents.contact .chooseModelhouse>button b,
  #contents.inquiry .chooseModelhouse>button b,
  #contents.issue .chooseModelhouse>button b,
  #contents.subscription .chooseModelhouse>button b,
  #contents.reservation .chooseModelhouse>button b,
  #contents.salesList>section>section>h2,
  #details>section>section>h2,
  #contents.notice>section>section>h2,
  #contents.contact>section>section>h2,
  #contents.inquiry>section>section>h2,
  #contents.issue>section>section>h2,
  #contents.subscription>section>section>h2,
  #contents.reservation>section>section>h2,
  #contents.salesList>section>form>section>h2,
  #details>section>form>section>h2,
  #contents.notice>section>form>section>h2,
  #contents.contact>section>form>section>h2,
  #contents.inquiry>section>form>section>h2,
  #contents.issue>section>form>section>h2,
  #contents.subscription>section>form>section>h2,
  #contents.reservation>section>form>section>h2,
  #contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button,
  #details .progressCalendar .performance header p,
  .error404 section p,
  .popup>div .full.joinComplete dl {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
    line-height: 32px;
  }
}

@media (max-width: 1024px) {

  .popup .bottomTxt dd,
  #contents.myinfoCont .overall>section.priceInfo>ul li section strong,
  #contents.inquiry .footBox dl dd,
  #contents.inquiry .banner p,
  #contents.salesList .dateTime>section>dl dd,
  #details .dateTime>section>dl dd,
  #contents.notice .dateTime>section>dl dd,
  #contents.contact .dateTime>section>dl dd,
  #contents.inquiry .dateTime>section>dl dd,
  #contents.issue .dateTime>section>dl dd,
  #contents.subscription .dateTime>section>dl dd,
  #contents.reservation .dateTime>section>dl dd,
  #contents.salesList .chooseModelhouse>button b,
  #details .chooseModelhouse>button b,
  #contents.notice .chooseModelhouse>button b,
  #contents.contact .chooseModelhouse>button b,
  #contents.inquiry .chooseModelhouse>button b,
  #contents.issue .chooseModelhouse>button b,
  #contents.subscription .chooseModelhouse>button b,
  #contents.reservation .chooseModelhouse>button b,
  #contents.salesList>section>section>h2,
  #details>section>section>h2,
  #contents.notice>section>section>h2,
  #contents.contact>section>section>h2,
  #contents.inquiry>section>section>h2,
  #contents.issue>section>section>h2,
  #contents.subscription>section>section>h2,
  #contents.reservation>section>section>h2,
  #contents.salesList>section>form>section>h2,
  #details>section>form>section>h2,
  #contents.notice>section>form>section>h2,
  #contents.contact>section>form>section>h2,
  #contents.inquiry>section>form>section>h2,
  #contents.issue>section>form>section>h2,
  #contents.subscription>section>form>section>h2,
  #contents.reservation>section>form>section>h2,
  #contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button,
  #details .progressCalendar .performance header p,
  .error404 section p,
  .popup>div .full.joinComplete dl {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (min-width: 1025px) {

  #contents.salesList .icoBox p,
  #details .icoBox p,
  #contents.notice .icoBox p,
  #contents.contact .icoBox p,
  #contents.inquiry .icoBox p,
  #contents.issue .icoBox p,
  #contents.subscription .icoBox p,
  #contents.reservation .icoBox p,
  .join form label:not(.check) span,
  .join form .label span,
  .login form label:not(.check) span,
  .login form .label span,
  .find form label:not(.check) span,
  .find form .label span,
  .closeAccount form label:not(.check) span,
  .closeAccount form .label span,
  #contents .contentHeader p,
  .popup form>div .label,
  #contents.salesList .form>div .label,
  #details .form>div .label,
  #contents.notice .form>div .label,
  #contents.contact .form>div .label,
  #contents.inquiry .form>div .label,
  #contents.issue .form>div .label,
  #contents.subscription .form>div .label,
  #contents.reservation .form>div .label,
  .preview>section>div>header h2 small,
  .popup>div .terms .termsContents .h1 {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
    line-height: 32px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .icoBox p,
  #details .icoBox p,
  #contents.notice .icoBox p,
  #contents.contact .icoBox p,
  #contents.inquiry .icoBox p,
  #contents.issue .icoBox p,
  #contents.subscription .icoBox p,
  #contents.reservation .icoBox p,
  .join form label:not(.check) span,
  .join form .label span,
  .login form label:not(.check) span,
  .login form .label span,
  .find form label:not(.check) span,
  .find form .label span,
  .closeAccount form label:not(.check) span,
  .closeAccount form .label span,
  #contents .contentHeader p,
  .popup form>div .label,
  #contents.salesList .form>div .label,
  #details .form>div .label,
  #contents.notice .form>div .label,
  #contents.contact .form>div .label,
  #contents.inquiry .form>div .label,
  #contents.issue .form>div .label,
  #contents.subscription .form>div .label,
  #contents.reservation .form>div .label,
  .preview>section>div>header h2 small,
  .popup>div .terms .termsContents .h1 {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }
}

.popup .gwell .caseInfo .bgBox .infoTxt,
.popup .bottomTxt dt,
.popup .failBox p,
#contents.contact .inquiry .cont strong,
#contents.salesList .process ol li dt,
#details .process ol li dt,
#contents.notice .process ol li dt,
#contents.contact .process ol li dt,
#contents.inquiry .process ol li dt,
#contents.issue .process ol li dt,
#contents.subscription .process ol li dt,
#contents.reservation .process ol li dt,
#contents.salesList .process ol li p,
#details .process ol li p,
#contents.notice .process ol li p,
#contents.contact .process ol li p,
#contents.inquiry .process ol li p,
#contents.issue .process ol li p,
#contents.subscription .process ol li p,
#contents.reservation .process ol li p,
#contents.salesList .dateTime>section .chooseTime>p,
#details .dateTime>section .chooseTime>p,
#contents.notice .dateTime>section .chooseTime>p,
#contents.contact .dateTime>section .chooseTime>p,
#contents.inquiry .dateTime>section .chooseTime>p,
#contents.issue .dateTime>section .chooseTime>p,
#contents.subscription .dateTime>section .chooseTime>p,
#contents.reservation .dateTime>section .chooseTime>p,
#contents.salesList>section>.empty span,
#details>section>.empty span,
#contents.notice>section>.empty span,
#contents.contact>section>.empty span,
#contents.inquiry>section>.empty span,
#contents.issue>section>.empty span,
#contents.subscription>section>.empty span,
#contents.reservation>section>.empty span,
.closeAccount p,
.join .result.logout>button,
.login .result.logout>button,
.find .result.logout>button,
.closeAccount .result.logout>button,
#contents.myinfoCont .overall>section.interested .list .noResult,
#contents.salesList .list .noResult,
.article#details>header p,
#details .progressCalendar .performance header h2,
#details .progressCalendar .performance header ul,
#details .progressCalendar .performance header div,
.popup>div .terms .termsContents h2,
.popup>div .full.joinComplete .info ul,
.popup>div .full .bullet,
.popup>div .full .result .h1,
.popup>div .full>p.case,
.popup>div .full>label span {
  color: #666;
}

@media (min-width: 1025px) {

  .popup .gwell .caseInfo .bgBox .infoTxt,
  .popup .bottomTxt dt,
  .popup .failBox p,
  #contents.contact .inquiry .cont strong,
  #contents.salesList .process ol li dt,
  #details .process ol li dt,
  #contents.notice .process ol li dt,
  #contents.contact .process ol li dt,
  #contents.inquiry .process ol li dt,
  #contents.issue .process ol li dt,
  #contents.subscription .process ol li dt,
  #contents.reservation .process ol li dt,
  #contents.salesList .process ol li p,
  #details .process ol li p,
  #contents.notice .process ol li p,
  #contents.contact .process ol li p,
  #contents.inquiry .process ol li p,
  #contents.issue .process ol li p,
  #contents.subscription .process ol li p,
  #contents.reservation .process ol li p,
  #contents.salesList .dateTime>section .chooseTime>p,
  #details .dateTime>section .chooseTime>p,
  #contents.notice .dateTime>section .chooseTime>p,
  #contents.contact .dateTime>section .chooseTime>p,
  #contents.inquiry .dateTime>section .chooseTime>p,
  #contents.issue .dateTime>section .chooseTime>p,
  #contents.subscription .dateTime>section .chooseTime>p,
  #contents.reservation .dateTime>section .chooseTime>p,
  #contents.salesList>section>.empty span,
  #details>section>.empty span,
  #contents.notice>section>.empty span,
  #contents.contact>section>.empty span,
  #contents.inquiry>section>.empty span,
  #contents.issue>section>.empty span,
  #contents.subscription>section>.empty span,
  #contents.reservation>section>.empty span,
  .closeAccount p,
  .join .result.logout>button,
  .login .result.logout>button,
  .find .result.logout>button,
  .closeAccount .result.logout>button,
  #contents.myinfoCont .overall>section.interested .list .noResult,
  #contents.salesList .list .noResult,
  .article#details>header p,
  #details .progressCalendar .performance header h2,
  #details .progressCalendar .performance header ul,
  #details .progressCalendar .performance header div,
  .popup>div .terms .termsContents h2,
  .popup>div .full.joinComplete .info ul,
  .popup>div .full .bullet,
  .popup>div .full .result .h1,
  .popup>div .full>p.case,
  .popup>div .full>label span {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
    line-height: 30px;
  }
}

@media (max-width: 1024px) {

  .popup .gwell .caseInfo .bgBox .infoTxt,
  .popup .bottomTxt dt,
  .popup .failBox p,
  #contents.contact .inquiry .cont strong,
  #contents.salesList .process ol li dt,
  #details .process ol li dt,
  #contents.notice .process ol li dt,
  #contents.contact .process ol li dt,
  #contents.inquiry .process ol li dt,
  #contents.issue .process ol li dt,
  #contents.subscription .process ol li dt,
  #contents.reservation .process ol li dt,
  #contents.salesList .process ol li p,
  #details .process ol li p,
  #contents.notice .process ol li p,
  #contents.contact .process ol li p,
  #contents.inquiry .process ol li p,
  #contents.issue .process ol li p,
  #contents.subscription .process ol li p,
  #contents.reservation .process ol li p,
  #contents.salesList .dateTime>section .chooseTime>p,
  #details .dateTime>section .chooseTime>p,
  #contents.notice .dateTime>section .chooseTime>p,
  #contents.contact .dateTime>section .chooseTime>p,
  #contents.inquiry .dateTime>section .chooseTime>p,
  #contents.issue .dateTime>section .chooseTime>p,
  #contents.subscription .dateTime>section .chooseTime>p,
  #contents.reservation .dateTime>section .chooseTime>p,
  #contents.salesList>section>.empty span,
  #details>section>.empty span,
  #contents.notice>section>.empty span,
  #contents.contact>section>.empty span,
  #contents.inquiry>section>.empty span,
  #contents.issue>section>.empty span,
  #contents.subscription>section>.empty span,
  #contents.reservation>section>.empty span,
  .closeAccount p,
  .join .result.logout>button,
  .login .result.logout>button,
  .find .result.logout>button,
  .closeAccount .result.logout>button,
  #contents.myinfoCont .overall>section.interested .list .noResult,
  #contents.salesList .list .noResult,
  .article#details>header p,
  #details .progressCalendar .performance header h2,
  #details .progressCalendar .performance header ul,
  #details .progressCalendar .performance header div,
  .popup>div .terms .termsContents h2,
  .popup>div .full.joinComplete .info ul,
  .popup>div .full .bullet,
  .popup>div .full .result .h1,
  .popup>div .full>p.case,
  .popup>div .full>label span {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }
}

.popup .gwell .caseInfo .infoBox p,
.popup .gwell .caseInfo dd>span,
.popup .gwell .caseInfo dl,
.popup .gwell .caseInfo ol,
.popup .desc,
#contents.myinfoCont .overall>section.notice>ul,
#contents.myinfoCont .overall>section.reserveInfo>ul li p,
#contents.myinfoCont .overall>section.reserveInfo>ul li button,
#contents.myinfoCont .overall>section.reserveInfo>div dl,
#contents.myinfoCont .overall>section.priceInfo>ul li section .h1,
#contents.myinfoCont .overall>section .mycontract ul li,
#contents.myinfoCont .overall>section .mycontract .img dl,
#contents.myinfoCont .overall>section .mycontract .img em,
#contents.inquiry .itemList dt,
#contents.inquiry .payment .barWrap .bar .inner .toolTip,
#contents.inquiry .payment ul,
#contents.inquiry .payment .date,
.applicationInfoPop>p,
.applicationInfoPop>span,
#application .reservationList .btnReserve,
#contents.salesList .process ol li dd,
#details .process ol li dd,
#contents.notice .process ol li dd,
#contents.contact .process ol li dd,
#contents.inquiry .process ol li dd,
#contents.issue .process ol li dd,
#contents.subscription .process ol li dd,
#contents.reservation .process ol li dd,
#contents.salesList .terms>p,
#details .terms>p,
#contents.notice .terms>p,
#contents.contact .terms>p,
#contents.inquiry .terms>p,
#contents.issue .terms>p,
#contents.subscription .terms>p,
#contents.reservation .terms>p,
#contents.salesList .terms>section,
#details .terms>section,
#contents.notice .terms>section,
#contents.contact .terms>section,
#contents.inquiry .terms>section,
#contents.issue .terms>section,
#contents.subscription .terms>section,
#contents.reservation .terms>section,
#contents.salesList .info>div ol,
#details .info>div ol,
#contents.notice .info>div ol,
#contents.contact .info>div ol,
#contents.inquiry .info>div ol,
#contents.issue .info>div ol,
#contents.subscription .info>div ol,
#contents.reservation .info>div ol,
#contents.salesList .icoBox p.fzSm,
#details .icoBox p.fzSm,
#contents.notice .icoBox p.fzSm,
#contents.contact .icoBox p.fzSm,
#contents.inquiry .icoBox p.fzSm,
#contents.issue .icoBox p.fzSm,
#contents.subscription .icoBox p.fzSm,
#contents.reservation .icoBox p.fzSm,
#contents.salesList .form>p,
#details .form>p,
#contents.notice .form>p,
#contents.contact .form>p,
#contents.inquiry .form>p,
#contents.issue .form>p,
#contents.subscription .form>p,
#contents.reservation .form>p,
#contents.salesList .dateTime>section>dl dt,
#details .dateTime>section>dl dt,
#contents.notice .dateTime>section>dl dt,
#contents.contact .dateTime>section>dl dt,
#contents.inquiry .dateTime>section>dl dt,
#contents.issue .dateTime>section>dl dt,
#contents.subscription .dateTime>section>dl dt,
#contents.reservation .dateTime>section>dl dt,
#contents.salesList .dateTime>section>.h1,
#details .dateTime>section>.h1,
#contents.notice .dateTime>section>.h1,
#contents.contact .dateTime>section>.h1,
#contents.inquiry .dateTime>section>.h1,
#contents.issue .dateTime>section>.h1,
#contents.subscription .dateTime>section>.h1,
#contents.reservation .dateTime>section>.h1,
#contents.salesList .chooseModelhouse>button,
#details .chooseModelhouse>button,
#contents.notice .chooseModelhouse>button,
#contents.contact .chooseModelhouse>button,
#contents.inquiry .chooseModelhouse>button,
#contents.issue .chooseModelhouse>button,
#contents.subscription .chooseModelhouse>button,
#contents.reservation .chooseModelhouse>button,
#contents.salesList>section>section .secHeader .unit,
#details>section>section .secHeader .unit,
#contents.notice>section>section .secHeader .unit,
#contents.contact>section>section .secHeader .unit,
#contents.inquiry>section>section .secHeader .unit,
#contents.issue>section>section .secHeader .unit,
#contents.subscription>section>section .secHeader .unit,
#contents.reservation>section>section .secHeader .unit,
#contents.salesList>section>form>section .secHeader .unit,
#details>section>form>section .secHeader .unit,
#contents.notice>section>form>section .secHeader .unit,
#contents.contact>section>form>section .secHeader .unit,
#contents.inquiry>section>form>section .secHeader .unit,
#contents.issue>section>form>section .secHeader .unit,
#contents.subscription>section>form>section .secHeader .unit,
#contents.reservation>section>form>section .secHeader .unit,
.login .memberInfo,
.join .result dl,
.login .result dl,
.find .result dl,
.closeAccount .result dl,
.join .result span,
.login .result span,
.find .result span,
.closeAccount .result span,
.join form .links a,
.login form .links a,
.find form .links a,
.closeAccount form .links a,
.join form label:not(.check).email .selectBox>div,
.join form .label.email .selectBox>div,
.login form label:not(.check).email .selectBox>div,
.login form .label.email .selectBox>div,
.find form label:not(.check).email .selectBox>div,
.find form .label.email .selectBox>div,
.closeAccount form label:not(.check).email .selectBox>div,
.closeAccount form .label.email .selectBox>div,
.join form label:not(.check).email .selectBox>button,
.join form .label.email .selectBox>button,
.login form label:not(.check).email .selectBox>button,
.login form .label.email .selectBox>button,
.find form label:not(.check).email .selectBox>button,
.find form .label.email .selectBox>button,
.closeAccount form label:not(.check).email .selectBox>button,
.closeAccount form .label.email .selectBox>button,
.join form label:not(.check).phone div button,
.join form .label.phone div button,
.login form label:not(.check).phone div button,
.login form .label.phone div button,
.find form label:not(.check).phone div button,
.find form .label.phone div button,
.closeAccount form label:not(.check).phone div button,
.closeAccount form .label.phone div button,
.joinStep .terms>p,
.joinStep .terms>section,
.joinStep .register01 button,
.joinStep .register01 dl dd,
#contents.myinfoCont .bgBox header p,
#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>div,
#contents.myinfoCont .contentHeader>div .inner>.titTxt dd,
#contents.myinfoCont .contentHeader>div .inner>.titTxt p,
#myinfo .loggedOut>div a,
.popup .gwell .caseInfo dd ul li,
#contents.inquiry .itemList dd ul li,
#contents.myinfoCont .bgBox .dotList li,
.popup .gwell .caseInfo dd table.case2 tbody td ul li,
#contents.notice table.case2 tbody td ul li,
#contents.contact .tblWrap table.case2 tbody td ul li,
#contents.inquiry .tblWrap table.case2 tbody td ul li,
#contents.issue .tblWrap table.case2 tbody td ul li,
#contents.subscription .tblWrap table.case2 tbody td ul li,
#contents.reservation .tblWrap table.case2 tbody td ul li,
.reservationList li .buttons>*,
.reservationList li .call,
.reservationList li .location,
.reservationList li span,
.reservationList li em,
#contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl,
#contents.salesList .list li:not(.noResult)>dl,
#contents.myinfoCont .overall>section.interested .list li:not(.noResult)>span,
#contents.salesList .list li:not(.noResult)>span,
#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .img em,
#contents.salesList .list li:not(.noResult) .img em,
.banners>ul li a,
.banners>div a,
.popup form .file>p,
#contents.salesList .form .file>p,
#details .form .file>p,
#contents.notice .form .file>p,
#contents.contact .form .file>p,
#contents.inquiry .form .file>p,
#contents.issue .form .file>p,
#contents.subscription .form .file>p,
#contents.reservation .form .file>p,
.popup form .selectBox>div,
#contents.salesList .form .selectBox>div,
#details .form .selectBox>div,
#contents.notice .form .selectBox>div,
#contents.contact .form .selectBox>div,
#contents.inquiry .form .selectBox>div,
#contents.issue .form .selectBox>div,
#contents.subscription .form .selectBox>div,
#contents.reservation .form .selectBox>div,
.popup form .selectBox>button,
#contents.salesList .form .selectBox>button,
#details .form .selectBox>button,
#contents.notice .form .selectBox>button,
#contents.contact .form .selectBox>button,
#contents.inquiry .form .selectBox>button,
#contents.issue .form .selectBox>button,
#contents.subscription .form .selectBox>button,
#contents.reservation .form .selectBox>button,
.popup form>div .label+.desc,
#contents.salesList .form>div .label+.desc,
#details .form>div .label+.desc,
#contents.notice .form>div .label+.desc,
#contents.contact .form>div .label+.desc,
#contents.inquiry .form>div .label+.desc,
#contents.issue .form>div .label+.desc,
#contents.subscription .form>div .label+.desc,
#contents.reservation .form>div .label+.desc,
.popup form>div.email .selectBox>div,
#contents.salesList .form>div.email .selectBox>div,
#details .form>div.email .selectBox>div,
#contents.notice .form>div.email .selectBox>div,
#contents.contact .form>div.email .selectBox>div,
#contents.inquiry .form>div.email .selectBox>div,
#contents.issue .form>div.email .selectBox>div,
#contents.subscription .form>div.email .selectBox>div,
#contents.reservation .form>div.email .selectBox>div,
.popup form>div.email .selectBox>button,
#contents.salesList .form>div.email .selectBox>button,
#details .form>div.email .selectBox>button,
#contents.notice .form>div.email .selectBox>button,
#contents.contact .form>div.email .selectBox>button,
#contents.inquiry .form>div.email .selectBox>button,
#contents.issue .form>div.email .selectBox>button,
#contents.subscription .form>div.email .selectBox>button,
#contents.reservation .form>div.email .selectBox>button,
.article#details dl.download,
#details .progressCalendar .calendar .selectBox>div,
#details .overview,
#details .percentage dt,
#details .tab button,
#contents.salesList .tab>*,
#details .tab>*,
#contents.notice .tab>*,
#contents.contact .tab>*,
#contents.inquiry .tab>*,
#contents.issue .tab>*,
#contents.subscription .tab>*,
#contents.reservation .tab>*,
.popup>div .terms .termsContents *:not(h2):not(h1),
.popup>div .terms .selectBox>div,
.popup>div .terms .selectBox>button,
.popup>div .full .result table,
.popup>div .full>p:not(.case),
.toastMessage p,
.popup form .file>div,
#contents.salesList .form .file>div,
#details .form .file>div,
#contents.notice .form .file>div,
#contents.contact .form .file>div,
#contents.inquiry .form .file>div,
#contents.issue .form .file>div,
#contents.subscription .form .file>div,
#contents.reservation .form .file>div,
.join form label:not(.check) input,
.join form .label input,
.login form label:not(.check) input,
.login form .label input,
.find form label:not(.check) input,
.find form .label input,
.closeAccount form label:not(.check) input,
.closeAccount form .label input,
.popup form>div input,
#contents.salesList .form>div input,
#details .form>div input,
#contents.notice .form>div input,
#contents.contact .form>div input,
#contents.inquiry .form>div input,
#contents.issue .form>div input,
#contents.subscription .form>div input,
#contents.reservation .form>div input,
.popup>div .full .inputTxt input,
.join form label:not(.check) textarea,
.join form .label textarea,
.login form label:not(.check) textarea,
.login form .label textarea,
.find form label:not(.check) textarea,
.find form .label textarea,
.closeAccount form label:not(.check) textarea,
.closeAccount form .label textarea,
.popup form>div textarea,
#contents.salesList .form>div textarea,
#details .form>div textarea,
#contents.notice .form>div textarea,
#contents.contact .form>div textarea,
#contents.inquiry .form>div textarea,
#contents.issue .form>div textarea,
#contents.subscription .form>div textarea,
#contents.reservation .form>div textarea,
.popup>div .full .inputTxt textarea,
#contents.salesList .form .btn,
#details .form .btn,
#contents.notice .form .btn,
#contents.contact .form .btn,
#contents.inquiry .form .btn,
#contents.issue .form .btn,
#contents.subscription .form .btn,
#contents.reservation .form .btn,
#contents.information .radio label span,
#contents.salesList .form .radio label span,
#details .form .radio label span,
#contents.notice .form .radio label span,
#contents.contact .form .radio label span,
#contents.inquiry .form .radio label span,
#contents.issue .form .radio label span,
#contents.subscription .form .radio label span,
#contents.reservation .form .radio label span {
  color: #666;
}

@media (min-width: 1025px) {

  .popup .gwell .caseInfo .infoBox p,
  .popup .gwell .caseInfo dd>span,
  .popup .gwell .caseInfo dl,
  .popup .gwell .caseInfo ol,
  .popup .desc,
  #contents.myinfoCont .overall>section.notice>ul,
  #contents.myinfoCont .overall>section.reserveInfo>ul li p,
  #contents.myinfoCont .overall>section.reserveInfo>ul li button,
  #contents.myinfoCont .overall>section.reserveInfo>div dl,
  #contents.myinfoCont .overall>section.priceInfo>ul li section .h1,
  #contents.myinfoCont .overall>section .mycontract ul li,
  #contents.myinfoCont .overall>section .mycontract .img dl,
  #contents.myinfoCont .overall>section .mycontract .img em,
  #contents.inquiry .itemList dt,
  #contents.inquiry .payment .barWrap .bar .inner .toolTip,
  #contents.inquiry .payment ul,
  #contents.inquiry .payment .date,
  .applicationInfoPop>p,
  .applicationInfoPop>span,
  #application .reservationList .btnReserve,
  #contents.salesList .process ol li dd,
  #details .process ol li dd,
  #contents.notice .process ol li dd,
  #contents.contact .process ol li dd,
  #contents.inquiry .process ol li dd,
  #contents.issue .process ol li dd,
  #contents.subscription .process ol li dd,
  #contents.reservation .process ol li dd,
  #contents.salesList .terms>p,
  #details .terms>p,
  #contents.notice .terms>p,
  #contents.contact .terms>p,
  #contents.inquiry .terms>p,
  #contents.issue .terms>p,
  #contents.subscription .terms>p,
  #contents.reservation .terms>p,
  #contents.salesList .terms>section,
  #details .terms>section,
  #contents.notice .terms>section,
  #contents.contact .terms>section,
  #contents.inquiry .terms>section,
  #contents.issue .terms>section,
  #contents.subscription .terms>section,
  #contents.reservation .terms>section,
  #contents.salesList .info>div ol,
  #details .info>div ol,
  #contents.notice .info>div ol,
  #contents.contact .info>div ol,
  #contents.inquiry .info>div ol,
  #contents.issue .info>div ol,
  #contents.subscription .info>div ol,
  #contents.reservation .info>div ol,
  #contents.salesList .icoBox p.fzSm,
  #details .icoBox p.fzSm,
  #contents.notice .icoBox p.fzSm,
  #contents.contact .icoBox p.fzSm,
  #contents.inquiry .icoBox p.fzSm,
  #contents.issue .icoBox p.fzSm,
  #contents.subscription .icoBox p.fzSm,
  #contents.reservation .icoBox p.fzSm,
  #contents.salesList .form>p,
  #details .form>p,
  #contents.notice .form>p,
  #contents.contact .form>p,
  #contents.inquiry .form>p,
  #contents.issue .form>p,
  #contents.subscription .form>p,
  #contents.reservation .form>p,
  #contents.salesList .dateTime>section>dl dt,
  #details .dateTime>section>dl dt,
  #contents.notice .dateTime>section>dl dt,
  #contents.contact .dateTime>section>dl dt,
  #contents.inquiry .dateTime>section>dl dt,
  #contents.issue .dateTime>section>dl dt,
  #contents.subscription .dateTime>section>dl dt,
  #contents.reservation .dateTime>section>dl dt,
  #contents.salesList .dateTime>section>.h1,
  #details .dateTime>section>.h1,
  #contents.notice .dateTime>section>.h1,
  #contents.contact .dateTime>section>.h1,
  #contents.inquiry .dateTime>section>.h1,
  #contents.issue .dateTime>section>.h1,
  #contents.subscription .dateTime>section>.h1,
  #contents.reservation .dateTime>section>h1,
  #contents.salesList .chooseModelhouse>button,
  #details .chooseModelhouse>button,
  #contents.notice .chooseModelhouse>button,
  #contents.contact .chooseModelhouse>button,
  #contents.inquiry .chooseModelhouse>button,
  #contents.issue .chooseModelhouse>button,
  #contents.subscription .chooseModelhouse>button,
  #contents.reservation .chooseModelhouse>button,
  #contents.salesList>section>section .secHeader .unit,
  #details>section>section .secHeader .unit,
  #contents.notice>section>section .secHeader .unit,
  #contents.contact>section>section .secHeader .unit,
  #contents.inquiry>section>section .secHeader .unit,
  #contents.issue>section>section .secHeader .unit,
  #contents.subscription>section>section .secHeader .unit,
  #contents.reservation>section>section .secHeader .unit,
  #contents.salesList>section>form>section .secHeader .unit,
  #details>section>form>section .secHeader .unit,
  #contents.notice>section>form>section .secHeader .unit,
  #contents.contact>section>form>section .secHeader .unit,
  #contents.inquiry>section>form>section .secHeader .unit,
  #contents.issue>section>form>section .secHeader .unit,
  #contents.subscription>section>form>section .secHeader .unit,
  #contents.reservation>section>form>section .secHeader .unit,
  .login .memberInfo,
  .join .result dl,
  .login .result dl,
  .find .result dl,
  .closeAccount .result dl,
  .join .result span,
  .login .result span,
  .find .result span,
  .closeAccount .result span,
  .join form .links a,
  .login form .links a,
  .find form .links a,
  .closeAccount form .links a,
  .join form label:not(.check).email .selectBox>div,
  .join form .label.email .selectBox>div,
  .login form label:not(.check).email .selectBox>div,
  .login form .label.email .selectBox>div,
  .find form label:not(.check).email .selectBox>div,
  .find form .label.email .selectBox>div,
  .closeAccount form label:not(.check).email .selectBox>div,
  .closeAccount form .label.email .selectBox>div,
  .join form label:not(.check).email .selectBox>button,
  .join form .label.email .selectBox>button,
  .login form label:not(.check).email .selectBox>button,
  .login form .label.email .selectBox>button,
  .find form label:not(.check).email .selectBox>button,
  .find form .label.email .selectBox>button,
  .closeAccount form label:not(.check).email .selectBox>button,
  .closeAccount form .label.email .selectBox>button,
  .join form label:not(.check).phone div button,
  .join form .label.phone div button,
  .login form label:not(.check).phone div button,
  .login form .label.phone div button,
  .find form label:not(.check).phone div button,
  .find form .label.phone div button,
  .closeAccount form label:not(.check).phone div button,
  .closeAccount form .label.phone div button,
  .joinStep .terms>p,
  .joinStep .terms>section,
  .joinStep .register01 button,
  .joinStep .register01 dl dd,
  #contents.myinfoCont .bgBox header p,
  #contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>div,
  #contents.myinfoCont .contentHeader>div .inner>.titTxt dd,
  #contents.myinfoCont .contentHeader>div .inner>.titTxt p,
  #myinfo .loggedOut>div a,
  .popup .gwell .caseInfo dd ul li,
  #contents.inquiry .itemList dd ul li,
  #contents.myinfoCont .bgBox .dotList li,
  .popup .gwell .caseInfo dd table.case2 tbody td ul li,
  #contents.notice table.case2 tbody td ul li,
  #contents.contact .tblWrap table.case2 tbody td ul li,
  #contents.inquiry .tblWrap table.case2 tbody td ul li,
  #contents.issue .tblWrap table.case2 tbody td ul li,
  #contents.subscription .tblWrap table.case2 tbody td ul li,
  #contents.reservation .tblWrap table.case2 tbody td ul li,
  .reservationList li .buttons>*,
  .reservationList li .call,
  .reservationList li .location,
  .reservationList li span,
  .reservationList li em,
  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl,
  #contents.salesList .list li:not(.noResult)>dl,
  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>span,
  #contents.salesList .list li:not(.noResult)>span,
  #contents.myinfoCont .overall>section.interested .list li:not(.noResult) .img em,
  #contents.salesList .list li:not(.noResult) .img em,
  .banners>ul li a,
  .banners>div a,
  .popup form .file>p,
  #contents.salesList .form .file>p,
  #details .form .file>p,
  #contents.notice .form .file>p,
  #contents.contact .form .file>p,
  #contents.inquiry .form .file>p,
  #contents.issue .form .file>p,
  #contents.subscription .form .file>p,
  #contents.reservation .form .file>p,
  .popup form .selectBox>div,
  #contents.salesList .form .selectBox>div,
  #details .form .selectBox>div,
  #contents.notice .form .selectBox>div,
  #contents.contact .form .selectBox>div,
  #contents.inquiry .form .selectBox>div,
  #contents.issue .form .selectBox>div,
  #contents.subscription .form .selectBox>div,
  #contents.reservation .form .selectBox>div,
  .popup form .selectBox>button,
  #contents.salesList .form .selectBox>button,
  #details .form .selectBox>button,
  #contents.notice .form .selectBox>button,
  #contents.contact .form .selectBox>button,
  #contents.inquiry .form .selectBox>button,
  #contents.issue .form .selectBox>button,
  #contents.subscription .form .selectBox>button,
  #contents.reservation .form .selectBox>button,
  .popup form>div .label+.desc,
  #contents.salesList .form>div .label+.desc,
  #details .form>div .label+.desc,
  #contents.notice .form>div .label+.desc,
  #contents.contact .form>div .label+.desc,
  #contents.inquiry .form>div .label+.desc,
  #contents.issue .form>div .label+.desc,
  #contents.subscription .form>div .label+.desc,
  #contents.reservation .form>div .label+.desc,
  .popup form>div.email .selectBox>div,
  #contents.salesList .form>div.email .selectBox>div,
  #details .form>div.email .selectBox>div,
  #contents.notice .form>div.email .selectBox>div,
  #contents.contact .form>div.email .selectBox>div,
  #contents.inquiry .form>div.email .selectBox>div,
  #contents.issue .form>div.email .selectBox>div,
  #contents.subscription .form>div.email .selectBox>div,
  #contents.reservation .form>div.email .selectBox>div,
  .popup form>div.email .selectBox>button,
  #contents.salesList .form>div.email .selectBox>button,
  #details .form>div.email .selectBox>button,
  #contents.notice .form>div.email .selectBox>button,
  #contents.contact .form>div.email .selectBox>button,
  #contents.inquiry .form>div.email .selectBox>button,
  #contents.issue .form>div.email .selectBox>button,
  #contents.subscription .form>div.email .selectBox>button,
  #contents.reservation .form>div.email .selectBox>button,
  .article#details dl.download,
  #details .progressCalendar .calendar .selectBox>div,
  #details .overview,
  #details .percentage dt,
  #details .tab button,
  #contents.salesList .tab>*,
  #details .tab>*,
  #contents.notice .tab>*,
  #contents.contact .tab>*,
  #contents.inquiry .tab>*,
  #contents.issue .tab>*,
  #contents.subscription .tab>*,
  #contents.reservation .tab>*,
  .popup>div .terms .termsContents *:not(h2):not(.h1),
  .popup>div .terms .selectBox>div,
  .popup>div .terms .selectBox>button,
  .popup>div .full .result table,
  .popup>div .full>p:not(.case),
  .toastMessage p,
  .popup form .file>div,
  #contents.salesList .form .file>div,
  #details .form .file>div,
  #contents.notice .form .file>div,
  #contents.contact .form .file>div,
  #contents.inquiry .form .file>div,
  #contents.issue .form .file>div,
  #contents.subscription .form .file>div,
  #contents.reservation .form .file>div,
  .join form label:not(.check) input,
  .join form .label input,
  .login form label:not(.check) input,
  .login form .label input,
  .find form label:not(.check) input,
  .find form .label input,
  .closeAccount form label:not(.check) input,
  .closeAccount form .label input,
  .popup form>div input,
  #contents.salesList .form>div input,
  #details .form>div input,
  #contents.notice .form>div input,
  #contents.contact .form>div input,
  #contents.inquiry .form>div input,
  #contents.issue .form>div input,
  #contents.subscription .form>div input,
  #contents.reservation .form>div input,
  .popup>div .full .inputTxt input,
  .join form label:not(.check) textarea,
  .join form .label textarea,
  .login form label:not(.check) textarea,
  .login form .label textarea,
  .find form label:not(.check) textarea,
  .find form .label textarea,
  .closeAccount form label:not(.check) textarea,
  .closeAccount form .label textarea,
  .popup form>div textarea,
  #contents.salesList .form>div textarea,
  #details .form>div textarea,
  #contents.notice .form>div textarea,
  #contents.contact .form>div textarea,
  #contents.inquiry .form>div textarea,
  #contents.issue .form>div textarea,
  #contents.subscription .form>div textarea,
  #contents.reservation .form>div textarea,
  .popup>div .full .inputTxt textarea,
  #contents.salesList .form .btn,
  #details .form .btn,
  #contents.notice .form .btn,
  #contents.contact .form .btn,
  #contents.inquiry .form .btn,
  #contents.issue .form .btn,
  #contents.subscription .form .btn,
  #contents.reservation .form .btn,
  #contents.information .radio label span,
  #contents.salesList .form .radio label span,
  #details .form .radio label span,
  #contents.notice .form .radio label span,
  #contents.contact .form .radio label span,
  #contents.inquiry .form .radio label span,
  #contents.issue .form .radio label span,
  #contents.subscription .form .radio label span,
  #contents.reservation .form .radio label span {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
    line-height: 28px;
  }
}

@media (max-width: 1024px) {

  .popup .gwell .caseInfo .infoBox p,
  .popup .gwell .caseInfo dd>span,
  .popup .gwell .caseInfo dl,
  .popup .gwell .caseInfo ol,
  .popup .desc,
  #contents.myinfoCont .overall>section.notice>ul,
  #contents.myinfoCont .overall>section.reserveInfo>ul li p,
  #contents.myinfoCont .overall>section.reserveInfo>ul li button,
  #contents.myinfoCont .overall>section.reserveInfo>div dl,
  #contents.myinfoCont .overall>section.priceInfo>ul li section h1,
  #contents.myinfoCont .overall>section .mycontract ul li,
  #contents.myinfoCont .overall>section .mycontract .img dl,
  #contents.myinfoCont .overall>section .mycontract .img em,
  #contents.inquiry .itemList dt,
  #contents.inquiry .payment .barWrap .bar .inner .toolTip,
  #contents.inquiry .payment ul,
  #contents.inquiry .payment .date,
  .applicationInfoPop>p,
  .applicationInfoPop>span,
  #application .reservationList .btnReserve,
  #contents.salesList .process ol li dd,
  #details .process ol li dd,
  #contents.notice .process ol li dd,
  #contents.contact .process ol li dd,
  #contents.inquiry .process ol li dd,
  #contents.issue .process ol li dd,
  #contents.subscription .process ol li dd,
  #contents.reservation .process ol li dd,
  #contents.salesList .terms>p,
  #details .terms>p,
  #contents.notice .terms>p,
  #contents.contact .terms>p,
  #contents.inquiry .terms>p,
  #contents.issue .terms>p,
  #contents.subscription .terms>p,
  #contents.reservation .terms>p,
  #contents.salesList .terms>section,
  #details .terms>section,
  #contents.notice .terms>section,
  #contents.contact .terms>section,
  #contents.inquiry .terms>section,
  #contents.issue .terms>section,
  #contents.subscription .terms>section,
  #contents.reservation .terms>section,
  #contents.salesList .info>div ol,
  #details .info>div ol,
  #contents.notice .info>div ol,
  #contents.contact .info>div ol,
  #contents.inquiry .info>div ol,
  #contents.issue .info>div ol,
  #contents.subscription .info>div ol,
  #contents.reservation .info>div ol,
  #contents.salesList .icoBox p.fzSm,
  #details .icoBox p.fzSm,
  #contents.notice .icoBox p.fzSm,
  #contents.contact .icoBox p.fzSm,
  #contents.inquiry .icoBox p.fzSm,
  #contents.issue .icoBox p.fzSm,
  #contents.subscription .icoBox p.fzSm,
  #contents.reservation .icoBox p.fzSm,
  #contents.salesList .form>p,
  #details .form>p,
  #contents.notice .form>p,
  #contents.contact .form>p,
  #contents.inquiry .form>p,
  #contents.issue .form>p,
  #contents.subscription .form>p,
  #contents.reservation .form>p,
  #contents.salesList .dateTime>section>dl dt,
  #details .dateTime>section>dl dt,
  #contents.notice .dateTime>section>dl dt,
  #contents.contact .dateTime>section>dl dt,
  #contents.inquiry .dateTime>section>dl dt,
  #contents.issue .dateTime>section>dl dt,
  #contents.subscription .dateTime>section>dl dt,
  #contents.reservation .dateTime>section>dl dt,
  #contents.salesList .dateTime>section>h1,
  #details .dateTime>section>h1,
  #contents.notice .dateTime>section>h1,
  #contents.contact .dateTime>section>h1,
  #contents.inquiry .dateTime>section>h1,
  #contents.issue .dateTime>section>h1,
  #contents.subscription .dateTime>section>h1,
  #contents.reservation .dateTime>section>h1,
  #contents.salesList .chooseModelhouse>button,
  #details .chooseModelhouse>button,
  #contents.notice .chooseModelhouse>button,
  #contents.contact .chooseModelhouse>button,
  #contents.inquiry .chooseModelhouse>button,
  #contents.issue .chooseModelhouse>button,
  #contents.subscription .chooseModelhouse>button,
  #contents.reservation .chooseModelhouse>button,
  #contents.salesList>section>section .secHeader .unit,
  #details>section>section .secHeader .unit,
  #contents.notice>section>section .secHeader .unit,
  #contents.contact>section>section .secHeader .unit,
  #contents.inquiry>section>section .secHeader .unit,
  #contents.issue>section>section .secHeader .unit,
  #contents.subscription>section>section .secHeader .unit,
  #contents.reservation>section>section .secHeader .unit,
  #contents.salesList>section>form>section .secHeader .unit,
  #details>section>form>section .secHeader .unit,
  #contents.notice>section>form>section .secHeader .unit,
  #contents.contact>section>form>section .secHeader .unit,
  #contents.inquiry>section>form>section .secHeader .unit,
  #contents.issue>section>form>section .secHeader .unit,
  #contents.subscription>section>form>section .secHeader .unit,
  #contents.reservation>section>form>section .secHeader .unit,
  .login .memberInfo,
  .join .result dl,
  .login .result dl,
  .find .result dl,
  .closeAccount .result dl,
  .join .result span,
  .login .result span,
  .find .result span,
  .closeAccount .result span,
  .join form .links a,
  .login form .links a,
  .find form .links a,
  .closeAccount form .links a,
  .join form label:not(.check).email .selectBox>div,
  .join form .label.email .selectBox>div,
  .login form label:not(.check).email .selectBox>div,
  .login form .label.email .selectBox>div,
  .find form label:not(.check).email .selectBox>div,
  .find form .label.email .selectBox>div,
  .closeAccount form label:not(.check).email .selectBox>div,
  .closeAccount form .label.email .selectBox>div,
  .join form label:not(.check).email .selectBox>button,
  .join form .label.email .selectBox>button,
  .login form label:not(.check).email .selectBox>button,
  .login form .label.email .selectBox>button,
  .find form label:not(.check).email .selectBox>button,
  .find form .label.email .selectBox>button,
  .closeAccount form label:not(.check).email .selectBox>button,
  .closeAccount form .label.email .selectBox>button,
  .join form label:not(.check).phone div button,
  .join form .label.phone div button,
  .login form label:not(.check).phone div button,
  .login form .label.phone div button,
  .find form label:not(.check).phone div button,
  .find form .label.phone div button,
  .closeAccount form label:not(.check).phone div button,
  .closeAccount form .label.phone div button,
  .joinStep .terms>p,
  .joinStep .terms>section,
  .joinStep .register01 button,
  .joinStep .register01 dl dd,
  #contents.myinfoCont .bgBox header p,
  #contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>div,
  #contents.myinfoCont .contentHeader>div .inner>.titTxt dd,
  #contents.myinfoCont .contentHeader>div .inner>.titTxt p,
  #myinfo .loggedOut>div a,
  .popup .gwell .caseInfo dd ul li,
  #contents.inquiry .itemList dd ul li,
  #contents.myinfoCont .bgBox .dotList li,
  .popup .gwell .caseInfo dd table.case2 tbody td ul li,
  #contents.notice table.case2 tbody td ul li,
  #contents.contact .tblWrap table.case2 tbody td ul li,
  #contents.inquiry .tblWrap table.case2 tbody td ul li,
  #contents.issue .tblWrap table.case2 tbody td ul li,
  #contents.subscription .tblWrap table.case2 tbody td ul li,
  #contents.reservation .tblWrap table.case2 tbody td ul li,
  .reservationList li .buttons>*,
  .reservationList li .call,
  .reservationList li .location,
  .reservationList li span,
  .reservationList li em,
  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl,
  #contents.salesList .list li:not(.noResult)>dl,
  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>span,
  #contents.salesList .list li:not(.noResult)>span,
  #contents.myinfoCont .overall>section.interested .list li:not(.noResult) .img em,
  #contents.salesList .list li:not(.noResult) .img em,
  .banners>ul li a,
  .banners>div a,
  .popup form .file>p,
  #contents.salesList .form .file>p,
  #details .form .file>p,
  #contents.notice .form .file>p,
  #contents.contact .form .file>p,
  #contents.inquiry .form .file>p,
  #contents.issue .form .file>p,
  #contents.subscription .form .file>p,
  #contents.reservation .form .file>p,
  .popup form .selectBox>div,
  #contents.salesList .form .selectBox>div,
  #details .form .selectBox>div,
  #contents.notice .form .selectBox>div,
  #contents.contact .form .selectBox>div,
  #contents.inquiry .form .selectBox>div,
  #contents.issue .form .selectBox>div,
  #contents.subscription .form .selectBox>div,
  #contents.reservation .form .selectBox>div,
  .popup form .selectBox>button,
  #contents.salesList .form .selectBox>button,
  #details .form .selectBox>button,
  #contents.notice .form .selectBox>button,
  #contents.contact .form .selectBox>button,
  #contents.inquiry .form .selectBox>button,
  #contents.issue .form .selectBox>button,
  #contents.subscription .form .selectBox>button,
  #contents.reservation .form .selectBox>button,
  .popup form>div .label+.desc,
  #contents.salesList .form>div .label+.desc,
  #details .form>div .label+.desc,
  #contents.notice .form>div .label+.desc,
  #contents.contact .form>div .label+.desc,
  #contents.inquiry .form>div .label+.desc,
  #contents.issue .form>div .label+.desc,
  #contents.subscription .form>div .label+.desc,
  #contents.reservation .form>div .label+.desc,
  .popup form>div.email .selectBox>div,
  #contents.salesList .form>div.email .selectBox>div,
  #details .form>div.email .selectBox>div,
  #contents.notice .form>div.email .selectBox>div,
  #contents.contact .form>div.email .selectBox>div,
  #contents.inquiry .form>div.email .selectBox>div,
  #contents.issue .form>div.email .selectBox>div,
  #contents.subscription .form>div.email .selectBox>div,
  #contents.reservation .form>div.email .selectBox>div,
  .popup form>div.email .selectBox>button,
  #contents.salesList .form>div.email .selectBox>button,
  #details .form>div.email .selectBox>button,
  #contents.notice .form>div.email .selectBox>button,
  #contents.contact .form>div.email .selectBox>button,
  #contents.inquiry .form>div.email .selectBox>button,
  #contents.issue .form>div.email .selectBox>button,
  #contents.subscription .form>div.email .selectBox>button,
  #contents.reservation .form>div.email .selectBox>button,
  .article#details dl.download,
  #details .progressCalendar .calendar .selectBox>div,
  #details .overview,
  #details .percentage dt,
  #details .tab button,
  #contents.salesList .tab>*,
  #details .tab>*,
  #contents.notice .tab>*,
  #contents.contact .tab>*,
  #contents.inquiry .tab>*,
  #contents.issue .tab>*,
  #contents.subscription .tab>*,
  #contents.reservation .tab>*,
  .popup>div .terms .termsContents *:not(h2):not(h1),
  .popup>div .terms .selectBox>div,
  .popup>div .terms .selectBox>button,
  .popup>div .full .result table,
  .popup>div .full>p:not(.case),
  .toastMessage p,
  .popup form .file>div,
  #contents.salesList .form .file>div,
  #details .form .file>div,
  #contents.notice .form .file>div,
  #contents.contact .form .file>div,
  #contents.inquiry .form .file>div,
  #contents.issue .form .file>div,
  #contents.subscription .form .file>div,
  #contents.reservation .form .file>div,
  .join form label:not(.check) input,
  .join form .label input,
  .login form label:not(.check) input,
  .login form .label input,
  .find form label:not(.check) input,
  .find form .label input,
  .closeAccount form label:not(.check) input,
  .closeAccount form .label input,
  .popup form>div input,
  #contents.salesList .form>div input,
  #details .form>div input,
  #contents.notice .form>div input,
  #contents.contact .form>div input,
  #contents.inquiry .form>div input,
  #contents.issue .form>div input,
  #contents.subscription .form>div input,
  #contents.reservation .form>div input,
  .popup>div .full .inputTxt input,
  .join form label:not(.check) textarea,
  .join form .label textarea,
  .login form label:not(.check) textarea,
  .login form .label textarea,
  .find form label:not(.check) textarea,
  .find form .label textarea,
  .closeAccount form label:not(.check) textarea,
  .closeAccount form .label textarea,
  .popup form>div textarea,
  #contents.salesList .form>div textarea,
  #details .form>div textarea,
  #contents.notice .form>div textarea,
  #contents.contact .form>div textarea,
  #contents.inquiry .form>div textarea,
  #contents.issue .form>div textarea,
  #contents.subscription .form>div textarea,
  #contents.reservation .form>div textarea,
  .popup>div .full .inputTxt textarea,
  #contents.salesList .form .btn,
  #details .form .btn,
  #contents.notice .form .btn,
  #contents.contact .form .btn,
  #contents.inquiry .form .btn,
  #contents.issue .form .btn,
  #contents.subscription .form .btn,
  #contents.reservation .form .btn,
  #contents.information .radio label span,
  #contents.salesList .form .radio label span,
  #details .form .radio label span,
  #contents.notice .form .radio label span,
  #contents.contact .form .radio label span,
  #contents.inquiry .form .radio label span,
  #contents.issue .form .radio label span,
  #contents.subscription .form .radio label span,
  #contents.reservation .form .radio label span {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }
}

.exclamation {
  position: relative;
  padding-left: 27px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  color: #666;
}

.exclamation::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 20px;
  height: 20px;
  border: 1px solid #666;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
}

@media (min-width: 1025px) {

  .editor h1,
  #contents.crDetail dl.info dd:not(.diagram) h1,
  #detailContents.portfolioDetail .progressCalendar .performance header div h1,
  #detailContents.pressDetail .detail h1,
  #detailContents.portfolioDetail .detailContainer>section .detail h1 {
    font-size: 36px;
    line-height: 48px;
    letter-spacing: -0.03em;
  }

  .editor h2,
  #contents.crDetail dl.info dd:not(.diagram) h2,
  #detailContents.portfolioDetail .progressCalendar .performance header div h2,
  #detailContents.pressDetail .detail h2,
  #detailContents.portfolioDetail .detailContainer>section .detail h2 {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }

  .editor h3,
  #contents.crDetail dl.info dd:not(.diagram) h3,
  #detailContents.portfolioDetail .progressCalendar .performance header div h3,
  #detailContents.pressDetail .detail h3,
  #detailContents.portfolioDetail .detailContainer>section .detail h3 {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (max-width: 1024px) {

  .editor h1,
  #contents.crDetail dl.info dd:not(.diagram) h1,
  #detailContents.portfolioDetail .progressCalendar .performance header div h1,
  #detailContents.pressDetail .detail h1,
  #detailContents.portfolioDetail .detailContainer>section .detail h1 {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }

  .editor h2,
  #contents.crDetail dl.info dd:not(.diagram) h2,
  #detailContents.portfolioDetail .progressCalendar .performance header div h2,
  #detailContents.pressDetail .detail h2,
  #detailContents.portfolioDetail .detailContainer>section .detail h2 {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
  }

  .editor h3,
  #contents.crDetail dl.info dd:not(.diagram) h3,
  #detailContents.portfolioDetail .progressCalendar .performance header div h3,
  #detailContents.pressDetail .detail h3,
  #detailContents.portfolioDetail .detailContainer>section .detail h3 {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }
}

.editor p,
#contents.crDetail dl.info dd:not(.diagram) p,
#detailContents.portfolioDetail .progressCalendar .performance header div p,
#detailContents.pressDetail .detail p,
#detailContents.portfolioDetail .detailContainer>section .detail p {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
}

#contents.information .radio label span,
#contents.salesList .form .radio label span,
#details .form .radio label span,
#contents.notice .form .radio label span,
#contents.contact .form .radio label span,
#contents.inquiry .form .radio label span,
#contents.issue .form .radio label span,
#contents.subscription .form .radio label span,
#contents.reservation .form .radio label span {
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  text-align: center;
}

#contents.information .radio label span:not(:disabled):hover,
#contents.salesList .form .radio label span:not(:disabled):hover,
#details .form .radio label span:not(:disabled):hover,
#contents.notice .form .radio label span:not(:disabled):hover,
#contents.contact .form .radio label span:not(:disabled):hover,
#contents.inquiry .form .radio label span:not(:disabled):hover,
#contents.issue .form .radio label span:not(:disabled):hover,
#contents.subscription .form .radio label span:not(:disabled):hover,
#contents.reservation .form .radio label span:not(:disabled):hover {
  border-color: #46296E;
  color: #46296E;
}

@media (min-width: 1025px) {

  #contents.information .radio label span,
  #contents.salesList .form .radio label span,
  #details .form .radio label span,
  #contents.notice .form .radio label span,
  #contents.contact .form .radio label span,
  #contents.inquiry .form .radio label span,
  #contents.issue .form .radio label span,
  #contents.subscription .form .radio label span,
  #contents.reservation .form .radio label span {
    min-width: 206px;
    padding: 0 20px;
    line-height: 52px;
  }
}

@media (max-width: 1024px) {

  #contents.information .radio label span,
  #contents.salesList .form .radio label span,
  #details .form .radio label span,
  #contents.notice .form .radio label span,
  #contents.contact .form .radio label span,
  #contents.inquiry .form .radio label span,
  #contents.issue .form .radio label span,
  #contents.subscription .form .radio label span,
  #contents.reservation .form .radio label span {
    min-width: 160px;
    padding: 0 15px;
    line-height: 38px;
  }
}

#contents.salesList .form .btn,
#details .form .btn,
#contents.notice .form .btn,
#contents.contact .form .btn,
#contents.inquiry .form .btn,
#contents.issue .form .btn,
#contents.subscription .form .btn,
#contents.reservation .form .btn {
  border-radius: 4px;
  text-align: center;
  background: #37234D;
  color: #fff;
}

@media (min-width: 1025px) {

  #contents.salesList .form .btn,
  #details .form .btn,
  #contents.notice .form .btn,
  #contents.contact .form .btn,
  #contents.inquiry .form .btn,
  #contents.issue .form .btn,
  #contents.subscription .form .btn,
  #contents.reservation .form .btn {
    padding: 0 20px;
    line-height: 48px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .form .btn,
  #details .form .btn,
  #contents.notice .form .btn,
  #contents.contact .form .btn,
  #contents.inquiry .form .btn,
  #contents.issue .form .btn,
  #contents.subscription .form .btn,
  #contents.reservation .form .btn {
    width: 100%;
    line-height: 48px;
  }
}

.popup>div .full .inputTxt {
  position: relative;
}

.popup>div .full .inputTxt input:focus {
  outline: 0;
  border-color: #46296E;
}

.popup>div .full .inputTxt .reset {
  right: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #a5a5a5;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
}

.popup>div .full .inputTxt .reset::before,
.popup>div .full .inputTxt .reset::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 14px;
  height: 1px;
  background: #fff;
}

.popup>div .full .inputTxt .reset::before {
  transform: rotate(45deg);
}

.popup>div .full .inputTxt .reset::after {
  transform: rotate(-45deg);
}

.popup>div .full .inputTxt input:not(:valid)~.reset {
  display: none;
}

.join form label:not(.check) input,
.join form .label input,
.login form label:not(.check) input,
.login form .label input,
.find form label:not(.check) input,
.find form .label input,
.closeAccount form label:not(.check) input,
.closeAccount form .label input,
.popup form>div input,
#contents.salesList .form>div input,
#details .form>div input,
#contents.notice .form>div input,
#contents.contact .form>div input,
#contents.inquiry .form>div input,
#contents.issue .form>div input,
#contents.subscription .form>div input,
#contents.reservation .form>div input,
.popup>div .full .inputTxt input,
.join form label:not(.check) textarea,
.join form .label textarea,
.login form label:not(.check) textarea,
.login form .label textarea,
.find form label:not(.check) textarea,
.find form .label textarea,
.closeAccount form label:not(.check) textarea,
.closeAccount form .label textarea,
.popup form>div textarea,
#contents.salesList .form>div textarea,
#details .form>div textarea,
#contents.notice .form>div textarea,
#contents.contact .form>div textarea,
#contents.inquiry .form>div textarea,
#contents.issue .form>div textarea,
#contents.subscription .form>div textarea,
#contents.reservation .form>div textarea,
.popup>div .full .inputTxt textarea {
  width: 100%;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  background: #fff;
}

.join form label:not(.check) input.zoom,
.join form .label input.zoom,
.login form label:not(.check) input.zoom,
.login form .label input.zoom,
.find form label:not(.check) input.zoom,
.find form .label input.zoom,
.closeAccount form label:not(.check) input.zoom,
.closeAccount form .label input.zoom,
.popup form>div input.zoom,
#contents.salesList .form>div input.zoom,
#details .form>div input.zoom,
#contents.notice .form>div input.zoom,
#contents.contact .form>div input.zoom,
#contents.inquiry .form>div input.zoom,
#contents.issue .form>div input.zoom,
#contents.subscription .form>div input.zoom,
#contents.reservation .form>div input.zoom,
.popup>div .full .inputTxt input.zoom,
.join form label:not(.check) textarea.zoom,
.join form .label textarea.zoom,
.login form label:not(.check) textarea.zoom,
.login form .label textarea.zoom,
.find form label:not(.check) textarea.zoom,
.find form .label textarea.zoom,
.closeAccount form label:not(.check) textarea.zoom,
.closeAccount form .label textarea.zoom,
.popup form>div textarea.zoom,
#contents.salesList .form>div textarea.zoom,
#details .form>div textarea.zoom,
#contents.notice .form>div textarea.zoom,
#contents.contact .form>div textarea.zoom,
#contents.inquiry .form>div textarea.zoom,
#contents.issue .form>div textarea.zoom,
#contents.subscription .form>div textarea.zoom,
#contents.reservation .form>div textarea.zoom,
.popup>div .full .inputTxt textarea.zoom {
  background-image: url("../images/icon/iconZoom3.svg");
  background-repeat: no-repeat;
  background-position: right 17px center;
}

.join form label:not(.check) input:disabled,
.join form .label input:disabled,
.login form label:not(.check) input:disabled,
.login form .label input:disabled,
.find form label:not(.check) input:disabled,
.find form .label input:disabled,
.closeAccount form label:not(.check) input:disabled,
.closeAccount form .label input:disabled,
.popup form>div input:disabled,
#contents.salesList .form>div input:disabled,
#details .form>div input:disabled,
#contents.notice .form>div input:disabled,
#contents.contact .form>div input:disabled,
#contents.inquiry .form>div input:disabled,
#contents.issue .form>div input:disabled,
#contents.subscription .form>div input:disabled,
#contents.reservation .form>div input:disabled,
.popup>div .full .inputTxt input:disabled,
.join form label:not(.check) textarea:disabled,
.join form .label textarea:disabled,
.login form label:not(.check) textarea:disabled,
.login form .label textarea:disabled,
.find form label:not(.check) textarea:disabled,
.find form .label textarea:disabled,
.closeAccount form label:not(.check) textarea:disabled,
.closeAccount form .label textarea:disabled,
.popup form>div textarea:disabled,
#contents.salesList .form>div textarea:disabled,
#details .form>div textarea:disabled,
#contents.notice .form>div textarea:disabled,
#contents.contact .form>div textarea:disabled,
#contents.inquiry .form>div textarea:disabled,
#contents.issue .form>div textarea:disabled,
#contents.subscription .form>div textarea:disabled,
#contents.reservation .form>div textarea:disabled,
.popup>div .full .inputTxt textarea:disabled {
  background: #f9f9f9;
}

@media (min-width: 1025px) {

  .join form label:not(.check) input,
  .join form .label input,
  .login form label:not(.check) input,
  .login form .label input,
  .find form label:not(.check) input,
  .find form .label input,
  .closeAccount form label:not(.check) input,
  .closeAccount form .label input,
  .popup form>div input,
  #contents.salesList .form>div input,
  #details .form>div input,
  #contents.notice .form>div input,
  #contents.contact .form>div input,
  #contents.inquiry .form>div input,
  #contents.issue .form>div input,
  #contents.subscription .form>div input,
  #contents.reservation .form>div input,
  .popup>div .full .inputTxt input,
  .join form label:not(.check) textarea,
  .join form .label textarea,
  .login form label:not(.check) textarea,
  .login form .label textarea,
  .find form label:not(.check) textarea,
  .find form .label textarea,
  .closeAccount form label:not(.check) textarea,
  .closeAccount form .label textarea,
  .popup form>div textarea,
  #contents.salesList .form>div textarea,
  #details .form>div textarea,
  #contents.notice .form>div textarea,
  #contents.contact .form>div textarea,
  #contents.inquiry .form>div textarea,
  #contents.issue .form>div textarea,
  #contents.subscription .form>div textarea,
  #contents.reservation .form>div textarea,
  .popup>div .full .inputTxt textarea {
    height: 54px;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 52px;
  }

  .join form label:not(.check) .reset,
  .join form .label .reset,
  .login form label:not(.check) .reset,
  .login form .label .reset,
  .find form label:not(.check) .reset,
  .find form .label .reset,
  .closeAccount form label:not(.check) .reset,
  .closeAccount form .label .reset,
  .popup form>div .reset,
  #contents.salesList .form>div .reset,
  #details .form>div .reset,
  #contents.notice .form>div .reset,
  #contents.contact .form>div .reset,
  #contents.inquiry .form>div .reset,
  #contents.issue .form>div .reset,
  #contents.subscription .form>div .reset,
  #contents.reservation .form>div .reset,
  .popup>div .full .inputTxt .reset {
    right: 20px;
  }

  .join form label:not(.check) input.zoom~.reset,
  .join form .label input.zoom~.reset,
  .login form label:not(.check) input.zoom~.reset,
  .login form .label input.zoom~.reset,
  .find form label:not(.check) input.zoom~.reset,
  .find form .label input.zoom~.reset,
  .closeAccount form label:not(.check) input.zoom~.reset,
  .closeAccount form .label input.zoom~.reset,
  .popup form>div input.zoom~.reset,
  #contents.salesList .form>div input.zoom~.reset,
  #details .form>div input.zoom~.reset,
  #contents.notice .form>div input.zoom~.reset,
  #contents.contact .form>div input.zoom~.reset,
  #contents.inquiry .form>div input.zoom~.reset,
  #contents.issue .form>div input.zoom~.reset,
  #contents.subscription .form>div input.zoom~.reset,
  #contents.reservation .form>div input.zoom~.reset,
  .popup>div .full .inputTxt input.zoom~.reset {
    right: 50px;
  }
}

@media (max-width: 1024px) {

  .join form label:not(.check) input,
  .join form .label input,
  .login form label:not(.check) input,
  .login form .label input,
  .find form label:not(.check) input,
  .find form .label input,
  .closeAccount form label:not(.check) input,
  .closeAccount form .label input,
  .popup form>div input,
  #contents.salesList .form>div input,
  #details .form>div input,
  #contents.notice .form>div input,
  #contents.contact .form>div input,
  #contents.inquiry .form>div input,
  #contents.issue .form>div input,
  #contents.subscription .form>div input,
  #contents.reservation .form>div input,
  .popup>div .full .inputTxt input,
  .join form label:not(.check) textarea,
  .join form .label textarea,
  .login form label:not(.check) textarea,
  .login form .label textarea,
  .find form label:not(.check) textarea,
  .find form .label textarea,
  .closeAccount form label:not(.check) textarea,
  .closeAccount form .label textarea,
  .popup form>div textarea,
  #contents.salesList .form>div textarea,
  #details .form>div textarea,
  #contents.notice .form>div textarea,
  #contents.contact .form>div textarea,
  #contents.inquiry .form>div textarea,
  #contents.issue .form>div textarea,
  #contents.subscription .form>div textarea,
  #contents.reservation .form>div textarea,
  .popup>div .full .inputTxt textarea {
    height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 38px;
  }

  .join form label:not(.check) .reset,
  .join form .label .reset,
  .login form label:not(.check) .reset,
  .login form .label .reset,
  .find form label:not(.check) .reset,
  .find form .label .reset,
  .closeAccount form label:not(.check) .reset,
  .closeAccount form .label .reset,
  .popup form>div .reset,
  #contents.salesList .form>div .reset,
  #details .form>div .reset,
  #contents.notice .form>div .reset,
  #contents.contact .form>div .reset,
  #contents.inquiry .form>div .reset,
  #contents.issue .form>div .reset,
  #contents.subscription .form>div .reset,
  #contents.reservation .form>div .reset,
  .popup>div .full .inputTxt .reset {
    right: 15px;
  }

  .join form label:not(.check) .zoom+.reset,
  .join form .label .zoom+.reset,
  .login form label:not(.check) .zoom+.reset,
  .login form .label .zoom+.reset,
  .find form label:not(.check) .zoom+.reset,
  .find form .label .zoom+.reset,
  .closeAccount form label:not(.check) .zoom+.reset,
  .closeAccount form .label .zoom+.reset,
  .popup form>div .zoom+.reset,
  #contents.salesList .form>div .zoom+.reset,
  #details .form>div .zoom+.reset,
  #contents.notice .form>div .zoom+.reset,
  #contents.contact .form>div .zoom+.reset,
  #contents.inquiry .form>div .zoom+.reset,
  #contents.issue .form>div .zoom+.reset,
  #contents.subscription .form>div .zoom+.reset,
  #contents.reservation .form>div .zoom+.reset,
  .popup>div .full .inputTxt .zoom+.reset {
    right: 50px;
  }
}

@media (max-width: 480px) {

  .join form label:not(.check) textarea,
  .join form .label textarea,
  .login form label:not(.check) textarea,
  .login form .label textarea,
  .find form label:not(.check) textarea,
  .find form .label textarea,
  .closeAccount form label:not(.check) textarea,
  .closeAccount form .label textarea,
  .popup form>div textarea,
  #contents.salesList .form>div textarea,
  #details .form>div textarea,
  #contents.notice .form>div textarea,
  #contents.contact .form>div textarea,
  #contents.inquiry .form>div textarea,
  #contents.issue .form>div textarea,
  #contents.subscription .form>div textarea,
  #contents.reservation .form>div textarea,
  .popup>div .full .inputTxt textarea {
    height: 60px !important;
    padding-top: 12px;
    line-height: 17px;
  }
}

.popup form .file>div,
#contents.salesList .form .file>div,
#details .form .file>div,
#contents.notice .form .file>div,
#contents.contact .form .file>div,
#contents.inquiry .form .file>div,
#contents.issue .form .file>div,
#contents.subscription .form .file>div,
#contents.reservation .form .file>div {
  position: relative;
  padding-right: 100px;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  background: #f9f9f9;
}

.popup form .file>div p span,
#contents.salesList .form .file>div p span,
#details .form .file>div p span,
#contents.notice .form .file>div p span,
#contents.contact .form .file>div p span,
#contents.inquiry .form .file>div p span,
#contents.issue .form .file>div p span,
#contents.subscription .form .file>div p span,
#contents.reservation .form .file>div p span {
  display: inline-block !important;
  max-width: calc(100% - 30px);
  padding-right: 15px;
}

.popup form .file>div p button,
#contents.salesList .form .file>div p button,
#details .form .file>div p button,
#contents.notice .form .file>div p button,
#contents.contact .form .file>div p button,
#contents.inquiry .form .file>div p button,
#contents.issue .form .file>div p button,
#contents.subscription .form .file>div p button,
#contents.reservation .form .file>div p button {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 20px;
  height: 20px;
  border: 1px solid #c8c8c8;
  border-radius: 2px;
}

.popup form .file>div p button:not(.active),
#contents.salesList .form .file>div p button:not(.active),
#details .form .file>div p button:not(.active),
#contents.notice .form .file>div p button:not(.active),
#contents.contact .form .file>div p button:not(.active),
#contents.inquiry .form .file>div p button:not(.active),
#contents.issue .form .file>div p button:not(.active),
#contents.subscription .form .file>div p button:not(.active),
#contents.reservation .form .file>div p button:not(.active) {
  display: none;
}

.popup form .file>div p button::before,
#contents.salesList .form .file>div p button::before,
#details .form .file>div p button::before,
#contents.notice .form .file>div p button::before,
#contents.contact .form .file>div p button::before,
#contents.inquiry .form .file>div p button::before,
#contents.issue .form .file>div p button::before,
#contents.subscription .form .file>div p button::before,
#contents.reservation .form .file>div p button::before,
.popup form .file>div p button::after,
#contents.salesList .form .file>div p button::after,
#details .form .file>div p button::after,
#contents.notice .form .file>div p button::after,
#contents.contact .form .file>div p button::after,
#contents.inquiry .form .file>div p button::after,
#contents.issue .form .file>div p button::after,
#contents.subscription .form .file>div p button::after,
#contents.reservation .form .file>div p button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 11px;
  height: 1px;
  background: #666;
}

.popup form .file>div p button::before,
#contents.salesList .form .file>div p button::before,
#details .form .file>div p button::before,
#contents.notice .form .file>div p button::before,
#contents.contact .form .file>div p button::before,
#contents.inquiry .form .file>div p button::before,
#contents.issue .form .file>div p button::before,
#contents.subscription .form .file>div p button::before,
#contents.reservation .form .file>div p button::before {
  transform: rotate(45deg);
}

.popup form .file>div p button::after,
#contents.salesList .form .file>div p button::after,
#details .form .file>div p button::after,
#contents.notice .form .file>div p button::after,
#contents.contact .form .file>div p button::after,
#contents.inquiry .form .file>div p button::after,
#contents.issue .form .file>div p button::after,
#contents.subscription .form .file>div p button::after,
#contents.reservation .form .file>div p button::after {
  transform: rotate(-45deg);
}

.popup form .file>div label,
#contents.salesList .form .file>div label,
#details .form .file>div label,
#contents.notice .form .file>div label,
#contents.contact .form .file>div label,
#contents.inquiry .form .file>div label,
#contents.issue .form .file>div label,
#contents.subscription .form .file>div label,
#contents.reservation .form .file>div label {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  border-left: 1px solid #c8c8c8;
  text-align: center;
  cursor: pointer;
}

.popup form .file>div label input,
#contents.salesList .form .file>div label input,
#details .form .file>div label input,
#contents.notice .form .file>div label input,
#contents.contact .form .file>div label input,
#contents.inquiry .form .file>div label input,
#contents.issue .form .file>div label input,
#contents.subscription .form .file>div label input,
#contents.reservation .form .file>div label input {
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

@media (min-width: 1025px) {

  .popup form .file>div,
  #contents.salesList .form .file>div,
  #details .form .file>div,
  #contents.notice .form .file>div,
  #contents.contact .form .file>div,
  #contents.inquiry .form .file>div,
  #contents.issue .form .file>div,
  #contents.subscription .form .file>div,
  #contents.reservation .form .file>div {
    height: 54px;
    line-height: 52px;
  }

  .popup form .file>div p span,
  #contents.salesList .form .file>div p span,
  #details .form .file>div p span,
  #contents.notice .form .file>div p span,
  #contents.contact .form .file>div p span,
  #contents.inquiry .form .file>div p span,
  #contents.issue .form .file>div p span,
  #contents.subscription .form .file>div p span,
  #contents.reservation .form .file>div p span {
    display: block;
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    max-height: 3.25em;
    line-height: 3.25 !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: break-spaces;
    padding-left: 20px;
  }
}

@media (max-width: 1024px) {

  .popup form .file>div,
  #contents.salesList .form .file>div,
  #details .form .file>div,
  #contents.notice .form .file>div,
  #contents.contact .form .file>div,
  #contents.inquiry .form .file>div,
  #contents.issue .form .file>div,
  #contents.subscription .form .file>div,
  #contents.reservation .form .file>div {
    height: 50px;
    line-height: 48px;
  }

  .popup form .file>div p span,
  #contents.salesList .form .file>div p span,
  #details .form .file>div p span,
  #contents.notice .form .file>div p span,
  #contents.contact .form .file>div p span,
  #contents.inquiry .form .file>div p span,
  #contents.issue .form .file>div p span,
  #contents.subscription .form .file>div p span,
  #contents.reservation .form .file>div p span {
    display: block;
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    max-height: 3.4285em;
    line-height: 3.4285 !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: break-spaces;
    padding-left: 15px;
  }
}

#contents.issue .form label,
#contents.salesList .terms label,
#details .terms label,
#contents.notice .terms label,
#contents.contact .terms label,
#contents.inquiry .terms label,
#contents.issue .terms label,
#contents.subscription .terms label,
#contents.reservation .terms label,
.joinStep .terms label,
.joinStep .allChk label {
  position: relative;
  display: inline-block;
  padding-left: 36px;
}

#contents.issue .form label input,
#contents.salesList .terms label input,
#details .terms label input,
#contents.notice .terms label input,
#contents.contact .terms label input,
#contents.inquiry .terms label input,
#contents.issue .terms label input,
#contents.subscription .terms label input,
#contents.reservation .terms label input,
.joinStep .terms label input,
.joinStep .allChk label input {
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

#contents.issue .form label span,
#contents.salesList .terms label span,
#details .terms label span,
#contents.notice .terms label span,
#contents.contact .terms label span,
#contents.inquiry .terms label span,
#contents.issue .terms label span,
#contents.subscription .terms label span,
#contents.reservation .terms label span,
.joinStep .terms label span,
.joinStep .allChk label span {
  font-size: 16px;
  line-height: 24px;
  color: #666;
}

#contents.issue .form label span::before,
#contents.salesList .terms label span::before,
#details .terms label span::before,
#contents.notice .terms label span::before,
#contents.contact .terms label span::before,
#contents.inquiry .terms label span::before,
#contents.issue .terms label span::before,
#contents.subscription .terms label span::before,
#contents.reservation .terms label span::before,
.joinStep .terms label span::before,
.joinStep .allChk label span::before,
#contents.issue .form label span::after,
#contents.salesList .terms label span::after,
#details .terms label span::after,
#contents.notice .terms label span::after,
#contents.contact .terms label span::after,
#contents.inquiry .terms label span::after,
#contents.issue .terms label span::after,
#contents.subscription .terms label span::after,
#contents.reservation .terms label span::after,
.joinStep .terms label span::after,
.joinStep .allChk label span::after {
  content: "";
  position: absolute;
}

#contents.issue .form label span::before,
#contents.salesList .terms label span::before,
#details .terms label span::before,
#contents.notice .terms label span::before,
#contents.contact .terms label span::before,
#contents.inquiry .terms label span::before,
#contents.issue .terms label span::before,
#contents.subscription .terms label span::before,
#contents.reservation .terms label span::before,
.joinStep .terms label span::before,
.joinStep .allChk label span::before {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: 1px solid #c8c8c8;
  border-radius: 2px;
}

#contents.issue .form label input:checked+span,
#contents.salesList .terms label input:checked+span,
#details .terms label input:checked+span,
#contents.notice .terms label input:checked+span,
#contents.contact .terms label input:checked+span,
#contents.inquiry .terms label input:checked+span,
#contents.issue .terms label input:checked+span,
#contents.subscription .terms label input:checked+span,
#contents.reservation .terms label input:checked+span,
.joinStep .terms label input:checked+span,
.joinStep .allChk label input:checked+span {
  color: #212121;
}

#contents.issue .form label input:checked+span::before,
#contents.salesList .terms label input:checked+span::before,
#details .terms label input:checked+span::before,
#contents.notice .terms label input:checked+span::before,
#contents.contact .terms label input:checked+span::before,
#contents.inquiry .terms label input:checked+span::before,
#contents.issue .terms label input:checked+span::before,
#contents.subscription .terms label input:checked+span::before,
#contents.reservation .terms label input:checked+span::before,
.joinStep .terms label input:checked+span::before,
.joinStep .allChk label input:checked+span::before {
  border: 0;
  background: #46296E;
}

#contents.issue .form label input:checked+span::after,
#contents.salesList .terms label input:checked+span::after,
#details .terms label input:checked+span::after,
#contents.notice .terms label input:checked+span::after,
#contents.contact .terms label input:checked+span::after,
#contents.inquiry .terms label input:checked+span::after,
#contents.issue .terms label input:checked+span::after,
#contents.subscription .terms label input:checked+span::after,
#contents.reservation .terms label input:checked+span::after,
.joinStep .terms label input:checked+span::after,
.joinStep .allChk label input:checked+span::after {
  top: 6px;
  left: 6px;
  width: 13px;
  height: 7px;
  border-style: solid;
  border-color: #fff;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

#contents.information .radio label,
#contents.salesList .form .radio label,
#details .form .radio label,
#contents.notice .form .radio label,
#contents.contact .form .radio label,
#contents.inquiry .form .radio label,
#contents.issue .form .radio label,
#contents.subscription .form .radio label,
#contents.reservation .form .radio label {
  cursor: pointer;
}

#contents.information .radio label+label,
#contents.salesList .form .radio label+label,
#details .form .radio label+label,
#contents.notice .form .radio label+label,
#contents.contact .form .radio label+label,
#contents.inquiry .form .radio label+label,
#contents.issue .form .radio label+label,
#contents.subscription .form .radio label+label,
#contents.reservation .form .radio label+label {
  margin-left: 10px;
}

#contents.information .radio label input,
#contents.salesList .form .radio label input,
#details .form .radio label input,
#contents.notice .form .radio label input,
#contents.contact .form .radio label input,
#contents.inquiry .form .radio label input,
#contents.issue .form .radio label input,
#contents.subscription .form .radio label input,
#contents.reservation .form .radio label input {
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

#contents.information .radio label span,
#contents.salesList .form .radio label span,
#details .form .radio label span,
#contents.notice .form .radio label span,
#contents.contact .form .radio label span,
#contents.inquiry .form .radio label span,
#contents.issue .form .radio label span,
#contents.subscription .form .radio label span,
#contents.reservation .form .radio label span {
  display: inline-block;
}

#contents.information .radio label input:checked+span,
#contents.salesList .form .radio label input:checked+span,
#details .form .radio label input:checked+span,
#contents.notice .form .radio label input:checked+span,
#contents.contact .form .radio label input:checked+span,
#contents.inquiry .form .radio label input:checked+span,
#contents.issue .form .radio label input:checked+span,
#contents.subscription .form .radio label input:checked+span,
#contents.reservation .form .radio label input:checked+span {
  border-color: #46296E;
  color: #46296E;
}

.hasDatepicker {
  background-image: url("../images/icon/iconCalendar.svg") !important;
  background-repeat: no-repeat !important;
  background-position: right 20px center !important;
}

@media (min-width: 1025px) {
  .hasDatepicker {
    background-size: 34px !important;
  }
}

@media (max-width: 1024px) {
  .hasDatepicker {
    background-size: 24px !important;
  }
}

.switch-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.switch-container i {
  display: inline-block;
  position: relative;
  top: -9px;
}

.switch-container .btn-color-mode-switch {
  display: inline-block;
  margin: 0px;
  position: relative;
}

.switch-container .btn-color-mode-switch>label.btn-color-mode-switch-inner {
  margin: 0px;
  width: 140px;
  height: 30px;
  /* background: #e0e0e0; */
  border: 1px solid #ddd;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  /*box-shadow: 0px 0px 8px 0px rgba(17, 17, 17, 0.34) inset;*/
  display: block;
}

.switch-container .btn-color-mode-switch>label.btn-color-mode-switch-inner:before {
  content: attr(data-on);
  position: absolute;
  font-size: 12px;
  font-weight: 500;
  top: 7px;
  right: 20px;
}

.switch-container .btn-color-mode-switch>label.btn-color-mode-switch-inner:after {
  content: attr(data-off);
  width: 70px;
  background: #fff;
  border-radius: 26px;
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #ddd;
  padding: 5px 0px;
}

.switch-container .btn-color-mode-switch>.alert {
  display: none;
  background: #ff9800;
  border: none;
  color: #fff;
}

.switch-container input[type=checkbox] {
  cursor: pointer;
  width: 50px;
  height: 25px;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: 1;
  margin: 0px;
}

.switch-container input[type=checkbox]:checked+label.btn-color-mode-switch-inner:after {
  content: attr(data-on);
  left: 68px;
}

.switch-container input[type=checkbox]:checked+label.btn-color-mode-switch-inner:before {
  content: attr(data-off);
  right: auto;
  left: 20px;
}

.switch-container input[type=checkbox]:checked~.alert {
  display: block;
}

.toastMessage {
  z-index: 99999;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: rgba(0, 0, 0, 0.3);
}

.toastMessage p {
  padding: 0 20px;
  -ms-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102);
  background: #fff;
  text-align: center;
  color: #46296E;
}

@media (min-width: 1025px) {
  .toastMessage p {
    width: 600px;
    height: 60px;
    line-height: 60px;
  }
}

@media (max-width: 1024px) {
  .toastMessage p {
    width: 290px;
    height: 50px;
    line-height: 50px;
  }
}

.popup {
  z-index: 9999;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  margin: auto;
}

.popup>div>.closePopup,
.popup>.closePopup {
  z-index: 0;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  cursor: default;
}

.popup .btnFooterCase {
  text-align: center;
}

@media (min-width: 1025px) {
  .popup .btnFooterCase {
    padding-top: 40px;
  }
}

@media (max-width: 1024px) {
  .popup .btnFooterCase {
    padding-top: 30px;
  }
}

.popup .btnFooterCase>* {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
}

.popup .btnFooterCase>*::before,
.popup .btnFooterCase>*::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

.popup .btnFooterCase>*:not(:disabled):hover,
.popup .btnFooterCase>*:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

.popup .btnFooterCase>*:not(:disabled):hover::before,
.popup .btnFooterCase>*:not(:disabled):hover::after,
.popup .btnFooterCase>*:not(:disabled):focus::before,
.popup .btnFooterCase>*:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  .popup .btnFooterCase>* {
    font-size: 16px;
    min-width: 180px;
    height: 60px;
    padding: 0 20px;
    border-radius: 30px;
  }

  .popup .btnFooterCase>*::before {
    margin-right: 10px;
  }

  .popup .btnFooterCase>*::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  .popup .btnFooterCase>* {
    font-size: 14px;
    min-width: 180px;
    font-size: 16px;
    height: 50px;
    padding: 0 18px;
    border-radius: 25px;
  }

  .popup .btnFooterCase>*::before {
    margin-right: 14px;
  }

  .popup .btnFooterCase>*::after {
    margin-left: 18px;
  }
}

.popup>div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.popup>div .wrapper {
  position: relative;
  border: 1px solid #c8c8c8;
  background: #fff;
}

.popup>div .wrapper .close {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
}

.popup>div .notice {
  word-break: keep-all;
}

.popup>div .notice p strong {
  color: #46296E;
}

.popup>div .notice span {
  display: block;
  margin-top: 25px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  font-weight: 300;
  color: #666;
}

.popup>div .notice .close,
.popup>div .full .close,
.popup>div .terms .close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 28px;
  height: 28px;
}

.popup>div .notice .close::before,
.popup>div .notice .close::after,
.popup>div .full .close::before,
.popup>div .full .close::after,
.popup>div .terms .close::before,
.popup>div .terms .close::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 28px;
  height: 2px;
  background: #c8c8c8;
}

.popup>div .notice .close::before,
.popup>div .full .close::before,
.popup>div .terms .close::before {
  transform: rotate(45deg);
}

.popup>div .notice .close::after,
.popup>div .full .close::after,
.popup>div .terms .close::after {
  transform: rotate(-45deg);
}

.popup>div .full {
  max-height: calc(100vh - 40px);
  max-height: calc(var(--vh, 1vh) * 100 - 40px);
  overflow-y: auto;
}

.popup>div .full h1:not(.caseSmall) {
  font-weight: 400;
}

.popup>div .full h1:not(.caseSmall)+label>span {
  margin-top: 0 !important;
}

.popup>div .full h1:not(.caseSmall) em {
  font-weight: 600;
  color: #46296E;
}

.popup>div .full h1.caseSmall {
  margin-top: -10px;
  margin-bottom: 0;
  padding-bottom: 20px;
  font-size: 26px;
  line-height: 36px;
  letter-spacing: -0.02em;
}

.popup>div .full .sentenceCase {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  color: #666;
}

@media (min-width: 1025px) {
  .popup>div .full .inputTxt {
    margin-top: 10px;
  }
}

@media (max-width: 1024px) {
  .popup>div .full .inputTxt {
    margin-top: 5px;
  }
}

.popup>div .full .inputTxt input {
  color: #212121;
}

.popup>div .full>label span {
  display: block;
  color: #212121;
}

@media (min-width: 1025px) {
  .popup>div .full>label span {
    margin-top: 45px;
  }
}

@media (max-width: 1024px) {
  .popup>div .full>label span {
    margin-top: 25px;
  }
}

.popup>div .full>p {
  word-break: keep-all;
}

.popup>div .full>p:not(.case) {
  margin-top: 12px;
  color: #a5a5a5;
}

.popup>div .full>p:not(.case).big {
  color: #212121;
}

.popup>div .full>p:not(.case).big strong {
  color: #46296E;
}

@media (min-width: 1025px) {
  .popup>div .full>p.case {
    margin-top: 40px;
  }
}

@media (max-width: 1024px) {
  .popup>div .full>p.case {
    margin-top: 30px;
  }
}

.popup>div .full label.caseSchool span {
  width: 100%;
}

.popup>div .full label.caseSchool>button {
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  background: #f9f9f9;
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

.popup>div .full .result table {
  table-layout: fixed;
  margin-top: 15px;
  width: 100%;
  border-top: 2px solid #212121;
  color: #212121;
}

.popup>div .full .result table th {
  background: #f6f6f6;
  font-weight: 400;
}

.popup>div .full .result table th,
.popup>div .full .result table td {
  border-bottom: 1px solid #c8c8c8;
}

.popup>div .full .result table th:first-child,
.popup>div .full .result table td:first-child {
  text-align: center;
}

.popup>div .full .result table th:not(:first-child),
.popup>div .full .result table td:not(:first-child) {
  border-left: 1px solid #c8c8c8;
}

.popup>div .full .result table td:last-child {
  padding-left: 30px;
}

.popup>div .full .result table tr:hover {
  background: rgba(68, 21, 160, 0.2);
}

@media (min-width: 1025px) {
  .popup>div .full .result {
    margin-top: 48px;
  }

  .popup>div .full .result table th,
  .popup>div .full .result table td {
    padding: 17px 10px;
  }

  .popup>div .full .result table th:first-child,
  .popup>div .full .result table td:first-child {
    width: 90px;
  }

  .popup>div .full .result+.caseSchool {
    margin-top: 40px;
  }
}

@media (max-width: 1024px) {
  .popup>div .full .result {
    margin-top: 25px;
  }

  .popup>div .full .result table th,
  .popup>div .full .result table td {
    padding: 12px 10px;
  }

  .popup>div .full .result table th:first-child,
  .popup>div .full .result table td:first-child {
    width: 85px;
  }

  .popup>div .full .result+.caseSchool {
    margin-top: 20px;
  }
}

.popup>div .full .info {
  padding-top: 40px;
}

.popup>div .full .info h2.caseEmph {
  color: #46296E;
}

.popup>div .full .bullet {
  margin-top: 20px;
  word-break: keep-all;
}

.popup>div .full .bullet.caseMarginShort {
  margin-top: 8px;
}

.popup>div .full .bullet li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.popup>div .full .bullet li::before {
  content: "•";
  margin-right: 4px;
}

.popup>div .full .bullet li b {
  color: #212121;
}

.popup>div .full .btns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.popup>div .full .btns>*:not(.case) {
  display: inline-block;
  width: 100%;
  border: 1px solid #c8c8c8;
  border-radius: 25px;
  background: #fff;
  text-align: center;
  line-height: 50px;
  color: #212121;
}

@media (max-width: 1024px) {
  .popup>div .full .btns>*:not(.case) {
    font-size: 14px;
  }
}

.popup>div .full .btns>*:not(.case):hover {
  background: #46296E;
  border-color: #46296E;
  color: #fff;
}

.popup>div .full .btns>*.case {
  display: inline-block;
  width: 100%;
  border: 1px solid #46296E;
  border-radius: 25px;
  background: #46296E;
  text-align: center;
  line-height: 50px;
  color: #fff;
}

@media (max-width: 1024px) {
  .popup>div .full .btns>*.case {
    font-size: 14px;
  }
}

@media (min-width: 1025px) {
  .popup>div .full .btns {
    padding-top: 20px;
  }

  .popup>div .full .btns.casePaddingLong {
    padding-top: 50px;
  }

  .popup>div .full .btns>* {
    width: calc(50% - 10px) !important;
  }
}

@media (max-width: 1024px) {
  .popup>div .full .btns {
    padding-top: 40px;
  }

  .popup>div .full .btns>* {
    width: calc(50% - 5px);
  }
}

.popup>div .full .btnsFull button {
  display: inline-block;
  width: 100%;
  border: 1px solid #c8c8c8;
  border-radius: 25px;
  background: #fff;
  text-align: center;
  line-height: 50px;
  color: #212121;
}

@media (max-width: 1024px) {
  .popup>div .full .btnsFull button {
    font-size: 14px;
  }
}

.popup>div .full .btnsFull button:hover {
  border-color: #46296E;
  color: #46296E;
}

@media (min-width: 1025px) {
  .popup>div .full .btnsFull {
    margin-top: 50px;
  }

  .popup>div .full .btnsFull>*+* {
    margin-top: 25px;
  }
}

@media (max-width: 1024px) {
  .popup>div .full .btnsFull {
    margin-top: 45px;
  }

  .popup>div .full .btnsFull>*+* {
    margin-top: 10px;
  }
}

.popup>div .full.joinComplete dl {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 20px;
  background: #f9f9f9;
}

.popup>div .full.joinComplete dl dd {
  color: #46296E;
}

.popup>div .full.joinComplete .info {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #c8c8c8;
}

.popup>div .full.joinComplete .info ul {
  margin-top: 20px;
  word-break: keep-all;
}

.popup>div .full.joinComplete .info ul strong {
  color: #212121;
}

.popup>div .full.joinComplete .info ul p {
  padding-top: 12px;
}

@media (min-width: 1025px) {
  .popup>div .full.joinComplete dl {
    padding: 30px;
  }

  .popup>div .full.joinComplete ul li+li {
    margin-top: 30px;
  }
}

@media (max-width: 1024px) {
  .popup>div .full.joinComplete dl {
    padding: 15px 10px;
  }

  .popup>div .full.joinComplete ul li+li {
    margin-top: 15px;
  }
}

.popup>div .terms {
  width: calc(100% - 40px);
  max-width: 980px;
  height: calc(100% - 40px);
  max-height: 705px;
}

.popup>div .terms h1 {
  font-weight: 400;
}

.popup>div .terms .selectBox {
  position: relative;
  position: absolute;
}

.popup>div .terms .selectBox>button {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #707070;
  text-align: left;
  color: #666;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 30px !important;
  padding-bottom: 7px;
}

.popup>div .terms .selectBox>button::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-45deg);
  top: 7px;
  right: 8px;
}

.popup>div .terms .selectBox>button.placeholder {
  color: #a5a5a5;
}

.popup>div .terms .selectBox>button.active {
  color: #46296E;
}

.popup>div .terms .selectBox>button.active::after {
  border-color: #46296E;
}

.popup>div .terms .selectBox>div {
  z-index: 3;
  position: absolute;
  display: none;
  width: 100%;
  overflow: auto;
  background: #fff;
  -ms-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
}

.popup>div .terms .selectBox>div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: #46296E;
}

.popup>div .terms .selectBox>div button {
  width: 100%;
  line-height: 2.5 !important;
  text-align: left;
}

.popup>div .terms .selectBox>div button.selected {
  color: #46296E;
}

@media (min-width: 1025px) {
  .popup>div .terms .selectBox>div>button:first-child {
    margin-top: 10px;
  }

  .popup>div .terms .selectBox>div>button:last-child {
    margin-bottom: 10px;
  }

  .popup>div .terms .selectBox>button,
  .popup>div .terms .selectBox>div button {
    padding-left: 12px;
  }
}

@media (max-width: 1024px) {
  .popup>div .terms .selectBox>div>button {
    padding-left: 10px;
  }

  .popup>div .terms .selectBox>div>button:first-child {
    margin-top: 5px;
  }

  .popup>div .terms .selectBox>div>button:last-child {
    margin-bottom: 5px;
  }
}

.popup>div .terms .termsContents {
  position: absolute;
  border: 1px solid #c8c8c8;
  overflow: auto;
}

.popup>div .terms .termsContents h1 {
  font-weight: 700;
}

.popup>div .terms .termsContents h2 {
  font-weight: 400;
  color: #212121;
}

.popup>div .terms .termsContents>section+section {
  margin-top: 40px;
}

.popup>div .terms .termsContents>section>*+* {
  margin-top: 15px;
}

.popup>div .terms .termsContents>section li+li {
  margin-top: 5px;
}

.popup>div .terms .termsContents>section .listDash>li,
.popup>div .terms .termsContents>section p.dash {
  position: relative;
  padding-left: 0.7em;
}

.popup>div .terms .termsContents>section .listDash>li::before,
.popup>div .terms .termsContents>section p.dash::before {
  content: "-";
  position: absolute;
  left: 0;
  width: 1.2em;
}

.popup>div .terms .termsContents>section .listNum {
  counter-reset: item;
}

.popup>div .terms .termsContents>section .listNum>li {
  list-style: none;
  position: relative;
  padding-left: 1.5em;
}

.popup>div .terms .termsContents>section .listNum>li::before {
  content: "(" counter(item) ")";
  counter-increment: item;
  position: absolute;
  left: 0;
}

.popup>div .terms .termsContents>section .listCircle {
  counter-reset: item;
}

.popup>div .terms .termsContents>section .listCircle>li {
  list-style: none;
  position: relative;
  padding-left: 1.5em;
}

.popup>div .terms .termsContents>section .listCircle>li::before {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 1.4em;
  height: 1.4em;
  border: 1px solid #666;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
  line-height: 1.3em;
  overflow: hidden;
}

.popup>div .terms .termsContents>section .listOrder {
  margin-left: 1em;
}

.popup>div .terms .termsContents>section .tableWrapper {
  overflow-x: auto;
}

.popup>div .terms .termsContents>section .tableWrapper table {
  table-layout: fixed;
}

.popup>div .terms .termsContents table {
  table-layout: unset;
  width: 100%;
  border-top: 2px solid #212121;
}

.popup>div .terms .termsContents table th {
  background: #f6f6f6;
  font-weight: 400;
  color: #212121;
}

.popup>div .terms .termsContents table th,
.popup>div .terms .termsContents table td {
  padding: 5px 10px;
  border-bottom: 1px solid #c8c8c8;
}

.popup>div .terms .termsContents table th:not(:first-child),
.popup>div .terms .termsContents table td:not(:first-child) {
  border-left: 1px solid #c8c8c8;
}

@media (min-width: 1025px) {
  .popup {
    background: rgba(0, 0, 0, 0.8);
  }

  .popup .notice {
    width: 540px;
    padding: 80px 60px 85px;
  }

  .popup .notice.full {
    width: 600px;
  }

  .popup .notice p {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
  }

  .popup .full {
    width: 600px;
    padding: 80px 50px;
  }

  .popup .full.gwell {
    padding-bottom: 50px;
  }

  .popup .full h1 {
    margin-bottom: 26px;
  }

  .popup .full h1.case {
    font-size: 25px;
    line-height: 40px;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  .popup .full label.caseSchool {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .popup .full label.caseSchool .inputTxt {
    width: calc(100% - 110px);
  }

  .popup .full label.caseSchool>button {
    margin-top: 10px;
    width: 100px;
    height: 54px;
  }

  .popup .terms {
    padding: 88px 50px 48px;
  }

  .popup .terms .selectBox {
    top: 139px;
    right: 50px;
    width: 184px;
  }

  .popup .terms .termsContents {
    top: 189px;
    left: 50px;
    width: calc(100% - 100px);
    height: calc(100% - 240px);
    padding: 15px 20px;
  }
}

@media (max-width: 1024px) {
  .popup {
    background: rgba(0, 0, 0, 0.7);
  }

  .popup .notice {
    width: calc(100% - 40px);
    max-width: 320px;
    padding: 120px 0;
  }

  .popup .notice p,
  .popup .notice span {
    margin-left: auto;
    margin-right: auto;
    width: 220px;
  }

  .popup .notice p {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }

  .popup .full {
    width: calc(100% - 40px);
    max-width: 600px;
    min-width: 280px;
    padding: 87px 30px 80px;
  }

  .popup .full h1 {
    margin-bottom: 14px;
  }

  .popup .full label.caseSchool {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .popup .full label.caseSchool span {
    width: 100%;
  }

  .popup .full label.caseSchool .inputTxt {
    width: calc(100% - 90px);
  }

  .popup .full label.caseSchool>button {
    margin-top: 5px;
    width: 80px;
    height: 40px;
  }
}

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

  .popup .full label.caseSchool .inputTxt,
  .popup .full label.caseSchool>button {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .popup .notice.full.gwell {
    padding: 65px 20px 30px;
  }

  .popup .notice.full.gwell .close {
    top: 20px;
    right: 20px;
  }

  .popup .terms {
    padding: 70px 20px 30px;
  }

  .popup .terms .selectBox {
    top: 115px;
    left: 20px;
    width: 150px;
  }

  .popup .terms .termsContents {
    top: 165px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 190px);
    padding: 10px;
  }
}

.tabPop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.tabPop>* {
  position: relative;
  flex-basis: 100%;
  padding-bottom: 10px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
}

@media (min-width: 1025px) {
  .tabPop>* {
    margin-bottom: 38px;
  }
}

@media (max-width: 1024px) {
  .tabPop>* {
    margin-bottom: 30px;
  }
}

.tabPop>*.active {
  border-bottom: 1px solid #37234D;
  font-weight: 700;
  color: #37234D;
}

.tabPop>*:not(.active) {
  border-bottom: 1px solid #E1E1E1;
  color: #666;
}

.tabPop>*+*::before {
  content: "";
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 1px;
  height: 15px;
  background: #E1E1E1;
}

.preview>section {
  background: #fff;
}

.preview>section>div {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

.preview>section>div>.closePopup {
  position: absolute;
  z-index: 2;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border-radius: 50%;
  background: #46296E;
  background: #141642;
}

@media (min-width: 1025px) {
  .preview>section>div>.closePopup {
    top: 100px;
    right: 107px;
    width: 48px;
    height: 48px;
  }

  .preview>section>div>.closePopup::before,
  .preview>section>div>.closePopup::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 23px;
    height: 1px;
    background: #fff;
  }

  .preview>section>div>.closePopup::before {
    transform: rotate(45deg);
  }

  .preview>section>div>.closePopup::after {
    transform: rotate(-45deg);
  }
}

@media (max-width: 1024px) {
  .preview>section>div>.closePopup {
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
  }

  .preview>section>div>.closePopup::before,
  .preview>section>div>.closePopup::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 15px;
    height: 1px;
    background: #fff;
  }

  .preview>section>div>.closePopup::before {
    transform: rotate(45deg);
  }

  .preview>section>div>.closePopup::after {
    transform: rotate(-45deg);
  }
}

@media (min-width: 1025px) {
  .preview>section>div>.closePopup {
    top: 30px;
    right: 10px;
  }
}

@media screen and (min-width: 1025px) and (min-width: 1400px) {
  .preview>section>div>.closePopup {
    top: 80px !important;
    right: -80px;
  }
}

.preview>section>div>header {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0;
}

.preview>section>div>header h2 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-end;
}

.preview>section>div>header h2 small {
  padding-left: 20px;
  font-weight: normal;
  color: #666;
}

.preview>section>div>header p {
  position: absolute;
  right: 50px;
}

@media (max-width: 690px) {
  .preview>section>div>header p {
    right: 0;
    top: 110px;
    line-height: 1.3;
  }
}

.preview>section>div>header button {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 40px;
  height: 40px;
  background: url("../images/icon/iconPrint.svg") no-repeat center;
}

@media (min-width: 1025px) {
  .preview>section>div>header {
    padding-top: 100px;
  }
}

@media (max-width: 1024px) {
  .preview>section>div>header {
    padding-top: 58px;
  }
}

body.print {
  margin: 50px;
}

@media print {
  body.print {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 10mm;
  }
}

body.print .printWrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

body.print table {
  width: 100%;
}

body.print .tbPrint,
body.print .introduce {
  border: 1px solid #333;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

body.print .tbPrint+.tbPrint,
body.print .tbPrint+.introduce,
body.print .introduce+.tbPrint,
body.print .introduce+.introduce {
  margin-top: 15px;
}

body.print .tbPrint tr>*,
body.print .introduce tr>* {
  padding: 3px;
  border-left: 1px solid #777;
  vertical-align: middle;
}

body.print .tbPrint dt,
body.print .tbPrint dd,
body.print .introduce dt,
body.print .introduce dd {
  padding: 6px;
}

body.print .tbPrint tr+tr>*,
body.print .tbPrint thead+tbody tr:first-child>*,
body.print .tbPrint *+dd,
body.print .tbPrint *+dt,
body.print .introduce tr+tr>*,
body.print .introduce thead+tbody tr:first-child>*,
body.print .introduce *+dd,
body.print .introduce *+dt {
  border-top: 1px solid #777;
}

body.print .tbPrint thead+tbody td,
body.print .introduce thead+tbody td {
  text-align: center;
}

body.print .tbPrint th,
body.print .tbPrint dt,
body.print .introduce th,
body.print .introduce dt {
  background: #eee;
}

body.print .tbPrint th,
body.print .introduce th {
  text-align: center;
}

body.print .tbPrint dt,
body.print .introduce dt {
  padding: 15px;
  font-size: 13px;
  font-weight: 600;
}

body.print .tbPrint dd,
body.print .introduce dd {
  padding: 6px 15px;
}

body.print .tbPrint dd,
body.print .introduce dd {
  min-height: 326px;
  line-height: 1.5;
  color: #666;
  width: 100%;
}

@media print {

  body.print .tbPrint dd,
  body.print .introduce dd {
    height: 113.5mm;
  }
}

body.print .printTitle {
  margin-top: 5px;
  margin-bottom: 2px;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-weight: 500;
}

@media print {
  body.print .printTitle.pagebreak {
    margin-top: 0;
  }
}

body.print .blockTitle {
  margin-bottom: 20px;
  border: 1px solid #777;
  font-size: 20px;
  font-weight: 500;
  line-height: 50px;
  text-align: center;
}

body.print img {
  display: inline-block;
}

body.print .photo {
  width: 120px;
  border: 1px solid #777;
  vertical-align: middle;
}

body.print .photo img {
  display: block;
  width: 100%;
}

body.print .basic {
  padding-left: 20px;
  vertical-align: top;
}

body.print .basic .logo {
  border: 1px solid #777;
  text-align: center;
}

body.print .basic .logo td {
  vertical-align: middle;
  height: 50px;
}

body.print .basic .logo td:first-child {
  width: 250px;
}

body.print .basic .logo td+td {
  border-left: 1px solid #777;
  font-size: 20px;
  font-weight: 500;
}

body.print .basic .basicInfo>div {
  margin-top: 20px;
  width: calc(50% - 10px);
}

body.print .basic .basicInfo>div+div {
  margin-left: 20px;
}

body.print .career {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: stretch;
  align-items: stretch;
  margin-top: 100px;
  margin-bottom: 100px;
}

@media print {
  body.print .career {
    margin-top: 0;
    margin-bottom: 0;
    min-height: 277mm;
  }
}

body.print .career .tbPrint+.blockTitle {
  margin-top: 30px;
  margin-bottom: 0;
}

body.print .career .con {
  flex-grow: 1;
  min-height: 200px;
  padding: 6px;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

.error404 {
  min-height: calc(100vh + 0px);
  min-height: calc(var(--vh, 1vh) * 100 + 0px);
}

.error404 h1 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  .error404 h1 {
    height: 90px;
    padding-top: 30px;
  }
}

@media (max-width: 1024px) {
  .error404 h1 {
    height: 120px;
    padding-top: 20px;
  }
}

@media (min-width: 1025px) {
  .error404 h1 img:not(.case):not(.case2):not(.case3) {
    width: 162px;
  }
}

@media (max-width: 1024px) {
  .error404 h1 img:not(.case):not(.case2):not(.case3) {
    width: 105px;
  }
}

@media (min-width: 1025px) {
  .error404 h1 img.case {
    width: 26px;
  }
}

@media (max-width: 1024px) {
  .error404 h1 img.case {
    width: 17px;
  }
}

.error404 h1 img.case2 {
  width: 57px;
}

@media (min-width: 1025px) {
  .error404 h1 img.case3 {
    width: 122px;
  }
}

@media (max-width: 1024px) {
  .error404 h1 img.case3 {
    width: 90px;
  }
}

@media (min-width: 1025px) {
  .error404.type01 {
    background: url("../images/common/lineError.svg") no-repeat center;
  }
}

.error404.type01 section::before {
  background: url("../images/common/imgError.svg") no-repeat center;
}

.error404.type02 section::before {
  background: url("../images/common/imgErrorSlp.svg") no-repeat center;
}

.error404.type03 section::before {
  background: url("../images/common/imgErrorGwell.svg") no-repeat center;
}

.error404 section {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

@media (min-width: 1025px) {
  .error404 section {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - 90px);
    min-height: calc(var(--vh, 1vh) * 100 - 90px);
    padding-bottom: 90px;
  }
}

@media (max-width: 1024px) {
  .error404 section {
    padding-bottom: 210px;
  }
}

.error404 section::before {
  position: absolute;
  content: "";
  margin: auto;
}

@media (min-width: 1025px) {
  .error404 section::before {
    top: 190px;
    right: 0;
    bottom: 0;
    width: 461px;
    height: 159px;
  }
}

@media (max-width: 1024px) {
  .error404 section::before {
    left: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    height: 110px;
    background-size: 320px !important;
  }
}

@media (min-width: 1025px) {
  .error404 section h2 {
    padding-bottom: 52px;
  }
}

@media (max-width: 1024px) {
  .error404 section h2 {
    padding-bottom: 28px;
  }
}

.error404 section a {
  display: inline-block;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  text-align: center;
  width: 145px;
  height: 44px;
  border: 1px solid #c8c8c8;
  border-radius: 22px;
  line-height: 42px;
  color: #666;
  /*&.case {
    @include btnSlp2;
  }*/
}

@media (min-width: 1025px) {
  .error404 section a {
    margin-top: 28px;
  }
}

@media (max-width: 1024px) {
  .error404 section a {
    margin-top: 23px;
  }
}

.error404 section a:hover,
.error404 section a:focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.salesList .tab,
#details .tab,
#contents.notice .tab,
#contents.contact .tab,
#contents.inquiry .tab,
#contents.issue .tab,
#contents.subscription .tab,
#contents.reservation .tab {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  white-space: nowrap;
  overflow: auto;
  margin-top: -20px;
}

@media (max-width: 1024px) {
  #contents.salesList .tab {
    margin-top: unset;
  }
}

#contents.salesList .tab>*,
#details .tab>*,
#contents.notice .tab>*,
#contents.contact .tab>*,
#contents.inquiry .tab>*,
#contents.issue .tab>*,
#contents.subscription .tab>*,
#contents.reservation .tab>* {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  min-width: 110px;
  padding: 0 18px;
  border-radius: 22px;
  cursor: pointer;
}

@media (min-width: 1025px) {

  #contents.salesList .tab>*,
  #details .tab>*,
  #contents.notice .tab>*,
  #contents.contact .tab>*,
  #contents.inquiry .tab>*,
  #contents.issue .tab>*,
  #contents.subscription .tab>*,
  #contents.reservation .tab>* {
    height: 36px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .tab>*,
  #details .tab>*,
  #contents.notice .tab>*,
  #contents.contact .tab>*,
  #contents.inquiry .tab>*,
  #contents.issue .tab>*,
  #contents.subscription .tab>*,
  #contents.reservation .tab>* {
    height: 40px;
  }
}

#contents.salesList .tab>*:not(.active),
#details .tab>*:not(.active),
#contents.notice .tab>*:not(.active),
#contents.contact .tab>*:not(.active),
#contents.inquiry .tab>*:not(.active),
#contents.issue .tab>*:not(.active),
#contents.subscription .tab>*:not(.active),
#contents.reservation .tab>*:not(.active) {
  border: 1px solid #E1E1E1;
  color: #212121;
  background: #fff;
}

#contents.salesList .tab>*:not(.active):hover,
#details .tab>*:not(.active):hover,
#contents.notice .tab>*:not(.active):hover,
#contents.contact .tab>*:not(.active):hover,
#contents.inquiry .tab>*:not(.active):hover,
#contents.issue .tab>*:not(.active):hover,
#contents.subscription .tab>*:not(.active):hover,
#contents.reservation .tab>*:not(.active):hover {
  border-color: #999;
}

#contents.salesList .tab>*.active,
#details .tab>*.active,
#contents.notice .tab>*.active,
#contents.contact .tab>*.active,
#contents.inquiry .tab>*.active,
#contents.issue .tab>*.active,
#contents.subscription .tab>*.active,
#contents.reservation .tab>*.active {
  background: #37234D;
  color: #fff;
}

#contents.salesList .tab>*+*,
#details .tab>*+*,
#contents.notice .tab>*+*,
#contents.contact .tab>*+*,
#contents.inquiry .tab>*+*,
#contents.issue .tab>*+*,
#contents.subscription .tab>*+*,
#contents.reservation .tab>*+* {
  margin-left: 10px;
}

#details .tab {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #details .tab {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

@media (max-width: 1024px) {
  #details .opened.tab button.active::after {
    display: none;
  }

  #details .opened.tab button:not(.active) {
    display: unset;
  }
}

@media (min-width: 1025px) {
  #details .tab button {
    flex-basis: 100%;
    height: 60px;
  }
}

@media (max-width: 1024px) {
  #details .tab button {
    margin-top: -1px;
    width: 100%;
    height: 44px;
  }
}

#details .tab button.active {
  position: relative;
  background: #37234D;
  font-weight: 500;
  color: #fff;
}

@media (max-width: 1024px) {
  #details .tab button.active::after {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 5px;
    margin: auto;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-width: 0 0 2px 2px;
    border-color: #fff;
    border-style: solid;
    transform: rotate(-45deg);
  }
}

#details .tab button:not(.active) {
  border-top: 1px solid #E1E1E1;
  border-bottom: 1px solid #E1E1E1;
}

@media (min-width: 1025px) {
  #details .tab button:not(.active) {
    border-left: 1px solid #E1E1E1;
  }

  #details .tab button:not(.active):last-child {
    border-right: 1px solid #E1E1E1;
  }
}

@media (max-width: 1024px) {
  #details .tab button:not(.active) {
    display: none;
  }
}

#details>header .container>div .share button {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

#details>header .container>div .share button.download {
  background-image: url("../images/icon/iconDownload.svg");
}

#details>header .container>div .share button.print {
  background-image: url("../images/icon/iconPrint.svg");
}

#details>header .container>div .share button.naverBlog {
  background-image: url("../images/icon/iconShareBlog.svg");
}

#details>header .container>div .share button.kakaotalk {
  background-image: url("../images/icon/iconShareKakaotalk.svg");
}

#details>header .container>div .share button.twitter {
  background-image: url("../images/icon/iconShareTwiter.svg");
}

#details>header .container>div .share button.facebook {
  background-image: url("../images/icon/iconShareFacebook.svg");
}

#details>header .container>div .share button.url {
  background-image: url("../images/icon/iconShareUrl.svg");
}

@media (max-width: 1024px) {
  #details>header .container>div .share button.print {
    display: none;
  }
}

@media (min-width: 1025px) {
  #details>header .container>div .share button {
    width: 36px;
    height: 36px;
  }

  #details>header .container>div .share button+button {
    margin-left: 20px;
  }
}

@media (max-width: 1024px) {
  #details>header .container>div .share button {
    width: 24px;
    height: 24px;
  }

  #details>header .container>div .share button+button {
    margin-left: 15px;
  }
}

#details>header .container>div .share {
  position: absolute;
  max-width: 0;
  padding: 25px 10px 10px;
  overflow: hidden;
  transition: max-width 0.3s;
}

#details>header .container>div .share>div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  opacity: 0;
  position: relative;
  padding: 20px;
  -ms-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
  -o-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
  background: #fff;
}

#details>header .container>div .share>div::before {
  content: "";
  position: absolute;
  top: -31px;
  display: block;
  -moz-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  -ms-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  -o-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 8px;
  border-color: transparent transparent #fff transparent;
}

#details>header .container>div button.active+.share {
  max-width: 420px;
}

#details>header .container>div button.active+.share>div {
  opacity: 1;
}

@media (max-width: 1024px) {
  #details>header .container>div .share .print {
    display: none;
  }
}

#details>header {
  position: relative;
}

#details>header .vi {
  position: relative;
}

#details>header .vi .img {
  position: relative;
  overflow: hidden;
}

#details>header .vi .img img {
  position: absolute;
  top: 0;
}

@media (min-width: 1025px) and (min-width: 1601px) {
  #details>header .vi .img {
    height: 0;
    padding-bottom: 38.125%;
  }

  #details>header .vi .img img {
    left: 0;
    width: 100%;
  }
}

@media (min-width: 1025px) and (max-width: 1600px) {
  #details>header .vi .img {
    height: 610px;
  }

  #details>header .vi .img img {
    left: 50%;
    margin-left: -800px;
    width: 1600px;
  }
}

@media (max-width: 1024px) {
  #details>header .vi .img {
    height: 390px;
  }

  #details>header .vi .img img {
    position: absolute;
    left: 50%;
    margin-left: -512px;
    width: 1024px;
  }
}

@media (max-width: 640px) {
  #details>header .vi .img {
    height: 360px;
  }

  #details>header .vi .img img {
    margin-left: -473px;
    width: 946px;
  }
}

#details>header .vi .swiper-pagination {
  bottom: 20px;
}

#details>header .vi .swiper-pagination>span {
  width: 10px;
  height: 10px;
}

#details>header .vi .swiper-pagination>span:not(.swiper-pagination-bullet-active) {
  background: rgba(255, 255, 255, 0.5);
}

#details>header .vi .swiper-pagination .swiper-pagination-bullet-active {
  background: #fff;
}

#details>header .vi .buttons {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#details>header .vi .buttons>button {
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

@media (min-width: 1025px) {
  #details>header .vi .buttons>button {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 1024px) {
  #details>header .vi .buttons>button {
    width: 30px;
    height: 30px;
  }
}

#details>header .vi .buttons>button.btnPrev {
  left: 20px;
}

#details>header .vi .buttons>button.btnNext {
  right: 20px;
}

#details>header .vi .buttons>button.btnNext::after {
  transform: rotate(-135deg);
}

#details>header .vi .buttons>button::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 2px 2px;
  border-color: #fff;
  border-style: solid;
  transform: rotate(45deg);
}

#details>header .vi .buttons>button:disabled {
  display: none;
}

#details>header .close {
  position: absolute;
  z-index: 2;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border-radius: 50%;
  background: #46296E;
  background: #37234D;
}

@media (min-width: 1025px) {
  #details>header .close {
    top: 100px;
    right: 107px;
    width: 48px;
    height: 48px;
  }

  #details>header .close::before,
  #details>header .close::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 23px;
    height: 1px;
    background: #fff;
  }

  #details>header .close::before {
    transform: rotate(45deg);
  }

  #details>header .close::after {
    transform: rotate(-45deg);
  }
}

@media (max-width: 1024px) {
  #details>header .close {
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
  }

  #details>header .close::before,
  #details>header .close::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 15px;
    height: 1px;
    background: #fff;
  }

  #details>header .close::before {
    transform: rotate(45deg);
  }

  #details>header .close::after {
    transform: rotate(-45deg);
  }
}

@media (min-width: 1025px) {
  #details>header .close {
    right: 30px;
    top: 30px;
  }
}

@media (max-width: 1024px) {
  #details>header .close {
    width: 48px;
    height: 48px;
  }

  #details>header .close::before,
  #details>header .close::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 23px;
    height: 1px;
    background: #fff;
  }

  #details>header .close::before {
    transform: rotate(45deg);
  }

  #details>header .close::after {
    transform: rotate(-45deg);
  }
}

@media (min-width: 1025px) {
  #details>header .close:first-child {
    right: 60px;
    top: 50px;
  }
}

#details>header .container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #details>header .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 107px;
  }
}

@media (max-width: 1024px) {
  #details>header .container {
    padding-top: 55px;
  }
}

#details>header .container>div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
}

@media (max-width: 1024px) {
  #details>header .container>div {
    justify-content: flex-start;
    margin-top: 20px;
  }
}

#details>header .container>div>a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
  font-weight: 500;
}

#details>header .container>div>a::before,
#details>header .container>div>a::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#details>header .container>div>a:not(:disabled):hover,
#details>header .container>div>a:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#details>header .container>div>a:not(:disabled):hover::before,
#details>header .container>div>a:not(:disabled):hover::after,
#details>header .container>div>a:not(:disabled):focus::before,
#details>header .container>div>a:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #details>header .container>div>a {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  #details>header .container>div>a::before {
    margin-right: 10px;
  }

  #details>header .container>div>a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #details>header .container>div>a {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #details>header .container>div>a::before {
    margin-right: 14px;
  }

  #details>header .container>div>a::after {
    margin-left: 18px;
  }
}

#details>header .container>div>a+* {
  margin-left: 10px;
}

@media (min-width: 1025px) {
  #details>header .container>div>a.call {
    pointer-events: none;
  }
}

#details>header .container>div .openBubble {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  border: 1px solid #c8c8c8;
  border-radius: 50%;
}

#details>header .container>div .openBubble::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url("../images/icon/iconShare2On.svg") no-repeat center;
  background-size: 20px;
  -moz-filter: grayscale(100);
  -ms-filter: grayscale(100);
  -o-filter: grayscale(100);
  filter: grayscale(100);
}

#details>header .container>div .openBubble:hover,
#details>header .container>div .openBubble.active {
  border: 0;
  background: #46296E;
}

#details>header .container>div .openBubble:hover::after,
#details>header .container>div .openBubble.active::after {
  -moz-filter: brightness(100);
  -ms-filter: brightness(100);
  -o-filter: brightness(100);
  filter: brightness(100);
}

@media (min-width: 1025px) {
  #details>header .container>div .openBubble {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 1024px) {
  #details>header .container>div .openBubble {
    width: 40px;
    height: 40px;
  }
}

#details>header .container>div .share {
  right: 20px;
  top: 160px;
}

#details>header .container>div .share>div::before {
  right: 10px;
}

#details .percentage {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

@media (min-width: 1025px) {
  #details .percentage {
    margin-top: 70px;
    padding-bottom: 32px;
    margin-bottom: 10px;
  }
}

@media (max-width: 1024px) {
  #details .percentage {
    margin-top: 50px;
    padding-bottom: 26px;
  }
}

#details .percentage dt {
  margin-right: 15px;
  color: #212121;
}

#details .percentage dd {
  font-weight: 700;
  color: #37234D;
}

@media (min-width: 1025px) {
  #details .percentage dd {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
  }
}

@media (max-width: 1024px) {
  #details .percentage dd {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

#details .percentage dd div {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 10px;
  border-radius: 5px;
  background: #F1F1F1;
  overflow: hidden;
}

#details .percentage dd div span {
  position: absolute;
  left: 0;
  height: 10px;
  background: #37234D;
}

#details .overview {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 40px;
  word-break: keep-all;
}

#details .overview::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #c8c8c8;
}

#details .overview::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: #E9E9E9;
}

#details .overview dt,
#details .overview dd {
  border-bottom: 1px solid #E9E9E9;
}

@media (min-width: 1025px) {

  #details .overview dt,
  #details .overview dd {
    padding: 21px 30px;
  }
}

@media (max-width: 1024px) {

  #details .overview dt,
  #details .overview dd {
    padding: 18px 0 18px 15px;
  }
}

#details .overview dt {
  background: #f9f9f9;
  font-weight: 700;
  color: #212121;
}

@media (min-width: 1025px) {
  #details .overview dt {
    width: 195px;
  }
}

@media (max-width: 1024px) {
  #details .overview dt {
    width: 80px;
  }
}

@media (min-width: 1025px) {
  #details .overview dd {
    width: calc(50% - 195px);
  }
}

@media (max-width: 1024px) {
  #details .overview dd {
    width: calc(100% - 80px);
  }
}

#details .overview dd button {
  border: 1px solid #37234D;
}

@media (min-width: 1025px) {
  #details .overview dd button {
    width: 80px;
    height: 30px;
    border-radius: 15px;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    color: #37234D;
  }
}

@media (max-width: 1024px) {
  #details .overview dd button {
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border-radius: 50%;
    background: url("../images/icon/iconPin.svg") no-repeat center;
  }
}

#details .progressCalendar {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#details .progressCalendar .calendar {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #E1E1E1;
}

#details .progressCalendar .calendar .selectBox {
  position: relative;
}

#details .progressCalendar .calendar .selectBox>button {
  position: relative;
  font-weight: 700;
}

#details .progressCalendar .calendar .selectBox>button::after {
  position: absolute;
  top: 0;
  bottom: 10px;
  right: 0;
  margin: auto;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-width: 0 0 2px 2px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-45deg);
}

#details .progressCalendar .calendar .selectBox>div {
  z-index: 2;
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  display: none;
  width: 100%;
  background: #fff;
  -ms-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
}

#details .progressCalendar .calendar .selectBox>div button {
  width: 100%;
  padding: 0 20px;
  line-height: 2.5 !important;
  text-align: left;
}

#details .progressCalendar .calendar .selectBox>div button.selected {
  color: #46296E;
}

#details .progressCalendar .calendar .month button {
  border-radius: 50%;
  padding: 2px 0;
}

#details .progressCalendar .calendar .month button:disabled {
  color: #c8c8c8;
}

#details .progressCalendar .calendar .month button.active {
  background: #46296E;
  color: #fff;
}

#details .progressCalendar .performance {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  word-break: keep-all;
}

#details .progressCalendar .performance header {
  padding-top: 5px;
}

#details .progressCalendar .performance header p {
  font-weight: 700;
}

#details .progressCalendar .performance header h2 {
  color: #212121;
}

#details .progressCalendar .performance header ul li {
  position: relative;
  padding-left: 15px;
}

#details .progressCalendar .performance header ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #46296E;
}

#details .progressCalendar .performance header ul {
  overflow-y: auto;
}

@media (min-width: 1025px) {
  #details .progressCalendar .performance header ul {
    max-height: 300px;
  }
}

@media (max-width: 1080px) {
  #details .progressCalendar .performance header ul {
    max-height: 250px;
  }
}

@media (max-width: 910px) {
  #details .progressCalendar .performance header ul {
    max-height: 220px;
  }
}

@media (max-width: 810px) {
  #details .progressCalendar .performance header ul {
    max-height: 180px;
  }
}

@media (max-width: 768px) {
  #details .progressCalendar .performance header ul {
    max-height: unset;
  }
}

#details .progressCalendar .performance .swiper {
  margin-left: unset;
}

#details .progressCalendar .performance .swiper img {
  width: 100%;
}

#details .progressCalendar .performance .pagination {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

#details .progressCalendar .performance .pagination img {
  width: 100%;
}

#details .progressCalendar .performance .pagination .swiper-pagination-bullet {
  position: relative;
  display: inline-block;
  margin: unset;
  width: unset;
  height: unset;
  border-radius: 0;
  background: none;
  opacity: 1 !important;
}

#details .progressCalendar .performance .pagination .swiper-pagination-bullet-active::before {
  content: "";
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid #46296E;
}

#details .progressCalendar .performance .pagination .timelabs button {
  position: relative;
}

#details .progressCalendar .performance .pagination .timelabs button::before {
  content: "";
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.44);
}

#details .progressCalendar .performance .pagination .timelabs button::after {
  content: "";
  width: 39px;
  height: 39px;
  border: 1px solid #fff;
  border-radius: 50%;
}

#details .progressCalendar .performance .pagination .timelabs button span::before {
  content: "";
  left: 9px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 7px;
  border-color: transparent transparent transparent #fff;
}

#details .progressCalendar .performance .exclamation {
  width: 100%;
}

@media (min-width: 1025px) {
  #details .progressCalendar .selectBox>button {
    padding-right: 50px;
    font-size: 50px;
  }

  #details .progressCalendar .month {
    width: calc(100% - 280px);
  }

  #details .progressCalendar .month>div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }

  #details .progressCalendar .month>div button {
    width: 50px;
    height: 50px;
  }

  #details .progressCalendar .performance {
    margin-top: 50px;
  }

  #details .progressCalendar .performance header {
    width: calc(50% - 60px);
  }

  #details .progressCalendar .performance header h1 {
    margin-bottom: 20px;
  }

  #details .progressCalendar .performance header h2 {
    margin-top: 40px;
  }

  #details .progressCalendar .performance header ul,
  #details .progressCalendar .performance header div {
    margin-top: 10px;
  }

  #details .progressCalendar .performance .swiper {
    width: 50%;
  }

  #details .progressCalendar .performance .pagination {
    margin-top: 20px;
  }

  #details .progressCalendar .performance .pagination .performanceSwipeThumb {
    width: 86%;
  }

  #details .progressCalendar .performance .pagination .performanceSwipeThumb .swiper-pagination-bullet {
    margin-right: 20px;
    width: calc(25% - 20px);
  }

  #details .progressCalendar .performance .exclamation {
    margin-top: 25px;
  }
}

@media (max-width: 1024px) {
  #details .progressCalendar .calendar {
    margin-left: -20px;
    margin-right: -20px;
  }

  #details .progressCalendar .selectBox {
    margin-left: 20px;
  }

  #details .progressCalendar .selectBox>button {
    padding-right: 23px;
    font-size: 25px;
  }

  #details .progressCalendar .selectBox>button::after {
    bottom: 5px !important;
  }

  #details .progressCalendar .month {
    margin-top: 15px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  #details .progressCalendar .month::-webkit-scrollbar {
    display: none;
  }

  #details .progressCalendar .month>div {
    white-space: nowrap;
  }

  #details .progressCalendar .month>div button.active {
    width: 36px;
    height: 36px;
  }

  #details .progressCalendar .month>div button+button {
    margin-left: 25px;
  }

  #details .progressCalendar .performance {
    margin-top: 30px;
  }

  #details .progressCalendar .performance header h1 {
    margin-bottom: 5px;
  }

  #details .progressCalendar .performance header h2 {
    margin-top: 30px;
  }

  #details .progressCalendar .performance header ul,
  #details .progressCalendar .performance header div {
    margin-top: 10px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  #details .progressCalendar .performance header {
    width: calc(50% - 30px);
  }

  #details .progressCalendar .performance .swiper {
    width: 50%;
  }

  #details .progressCalendar .performance .exclamation {
    margin-top: 20px;
  }

  #details .progressCalendar .performance .pagination {
    margin-top: 10px;
  }

  #details .progressCalendar .performance .pagination .performanceSwipeThumb {
    width: 85%;
  }

  #details .progressCalendar .performance .pagination .performanceSwipeThumb .swiper-pagination-bullet {
    margin-right: 10px;
    width: calc(25% - 10px);
  }
}

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

  #details .progressCalendar .performance header,
  #details .progressCalendar .performance .swiper {
    width: 100%;
  }

  #details .progressCalendar .performance header {
    order: 2;
    margin-top: 40px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #E1E1E1;
  }

  #details .progressCalendar .performance .swiper {
    order: 1;
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 20px + 20px);
  }

  #details .progressCalendar .performance .swiper .swiper-wrapper {
    padding-left: 10px;
  }

  #details .progressCalendar .performance .swiper .swiper-slide {
    width: calc(100% - 20px - 10px);
    max-width: 500px;
    padding-left: 10px;
  }

  #details .progressCalendar .performance .swiper .swiper-slide:last-child {
    margin-right: 30px;
  }

  #details .progressCalendar .performance .pagination {
    display: none;
  }

  #details .progressCalendar .performance .exclamation {
    order: 3;
  }
}

@media (min-width: 1025px) {
  #details .tab {
    padding-top: 80px;
  }
}

@media (max-width: 1024px) {
  #details .tab {
    padding-top: 60px;
  }
}

#details>footer {
  text-align: center;
}

@media (min-width: 1025px) {
  #details>footer {
    padding-top: 80px;
  }
}

@media (max-width: 1024px) {
  #details>footer {
    padding-top: 40px;
  }
}

#details>footer .btnList {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
}

#details>footer .btnList::before,
#details>footer .btnList::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#details>footer .btnList:not(:disabled):hover,
#details>footer .btnList:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#details>footer .btnList:not(:disabled):hover::before,
#details>footer .btnList:not(:disabled):hover::after,
#details>footer .btnList:not(:disabled):focus::before,
#details>footer .btnList:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #details>footer .btnList {
    font-size: 16px;
    min-width: 180px;
    height: 60px;
    padding: 0 20px;
    border-radius: 30px;
  }

  #details>footer .btnList::before {
    margin-right: 10px;
  }

  #details>footer .btnList::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #details>footer .btnList {
    font-size: 14px;
    min-width: 180px;
    font-size: 16px;
    height: 50px;
    padding: 0 18px;
    border-radius: 25px;
  }

  #details>footer .btnList::before {
    margin-right: 14px;
  }

  #details>footer .btnList::after {
    margin-left: 18px;
  }
}

.article#details {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

.article#details>header h1 {
  color: #37234D;
}

@media (min-width: 1025px) {
  .article#details>header h1 {
    padding-top: 110px;
  }
}

@media (max-width: 1024px) {
  .article#details>header h1 {
    padding-top: 95px;
  }
}

@media (min-width: 1025px) {
  .article#details>header .close {
    right: 40px;
  }
}

@media (max-width: 1024px) {
  .article#details>header .close {
    right: 0;
  }
}

.article#details>header p {
  color: #212121;
}

@media (min-width: 1025px) {
  .article#details>header p {
    padding: 64px 0 20px;
  }
}

@media (max-width: 1024px) {
  .article#details>header p {
    padding: 33px 0 15px;
  }
}

.article#details .articleDetail {
  border-top: 1px solid #E1E1E1;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
}

@media (min-width: 1025px) {
  .article#details .articleDetail {
    padding-top: 80px;
  }
}

@media (max-width: 1024px) {
  .article#details .articleDetail {
    padding-top: 40px;
  }
}

.article#details .articleDetail img {
  max-width: 100%;
}

.article#details dl.download {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #E1E1E1;
  border-radius: 2px;
}

@media (min-width: 1025px) {
  .article#details dl.download {
    margin-top: -90px;
    padding: 30px;
  }
}

@media (max-width: 1024px) {
  .article#details dl.download {
    margin-top: -40px;
    padding: 20px;
  }
}

.article#details dl.download dt {
  font-weight: 700;
  color: #212121;
}

@media (min-width: 1025px) {
  .article#details dl.download dt {
    padding-right: 34px;
  }
}

@media (max-width: 1024px) {
  .article#details dl.download dt {
    padding-right: 20px;
  }
}

.article#details dl.download dd a {
  color: #37234D;
}

.article#details dl.download dd a:hover,
.article#details dl.download dd a:focus {
  text-decoration: underline;
}

.article#details dl.download dd span {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

@media (min-width: 1025px) {
  .article#details dl.download dd span {
    padding-left: 25px;
  }
}

@media (max-width: 1024px) {
  .article#details dl.download dd span {
    padding-left: 15px;
  }
}

#contents.salesList .terms>section section+section,
#details .terms>section section+section,
#contents.notice .terms>section section+section,
#contents.contact .terms>section section+section,
#contents.inquiry .terms>section section+section,
#contents.issue .terms>section section+section,
#contents.subscription .terms>section section+section,
#contents.reservation .terms>section section+section,
.joinStep .terms>section section+section {
  margin-top: 3.5em;
}

#contents.salesList .terms>section h1,
#details .terms>section h1,
#contents.notice .terms>section h1,
#contents.contact .terms>section h1,
#contents.inquiry .terms>section h1,
#contents.issue .terms>section h1,
#contents.subscription .terms>section h1,
#contents.reservation .terms>section h1,
.joinStep .terms>section h1,
#contents.salesList .terms>section h2,
#details .terms>section h2,
#contents.notice .terms>section h2,
#contents.contact .terms>section h2,
#contents.inquiry .terms>section h2,
#contents.issue .terms>section h2,
#contents.subscription .terms>section h2,
#contents.reservation .terms>section h2,
.joinStep .terms>section h2,
#contents.salesList .terms>section h3,
#details .terms>section h3,
#contents.notice .terms>section h3,
#contents.contact .terms>section h3,
#contents.inquiry .terms>section h3,
#contents.issue .terms>section h3,
#contents.subscription .terms>section h3,
#contents.reservation .terms>section h3,
.joinStep .terms>section h3,
#contents.salesList .terms>section h4,
#details .terms>section h4,
#contents.notice .terms>section h4,
#contents.contact .terms>section h4,
#contents.inquiry .terms>section h4,
#contents.issue .terms>section h4,
#contents.subscription .terms>section h4,
#contents.reservation .terms>section h4,
.joinStep .terms>section h4,
#contents.salesList .terms>section h5,
#details .terms>section h5,
#contents.notice .terms>section h5,
#contents.contact .terms>section h5,
#contents.inquiry .terms>section h5,
#contents.issue .terms>section h5,
#contents.subscription .terms>section h5,
#contents.reservation .terms>section h5,
.joinStep .terms>section h5,
#contents.salesList .terms>section h6,
#details .terms>section h6,
#contents.notice .terms>section h6,
#contents.contact .terms>section h6,
#contents.inquiry .terms>section h6,
#contents.issue .terms>section h6,
#contents.subscription .terms>section h6,
#contents.reservation .terms>section h6,
.joinStep .terms>section h6 {
  font-weight: 400;
  color: #212121;
}

#contents.salesList .terms>section h1:not(:first-child),
#details .terms>section h1:not(:first-child),
#contents.notice .terms>section h1:not(:first-child),
#contents.contact .terms>section h1:not(:first-child),
#contents.inquiry .terms>section h1:not(:first-child),
#contents.issue .terms>section h1:not(:first-child),
#contents.subscription .terms>section h1:not(:first-child),
#contents.reservation .terms>section h1:not(:first-child),
.joinStep .terms>section h1:not(:first-child),
#contents.salesList .terms>section h2:not(:first-child),
#details .terms>section h2:not(:first-child),
#contents.notice .terms>section h2:not(:first-child),
#contents.contact .terms>section h2:not(:first-child),
#contents.inquiry .terms>section h2:not(:first-child),
#contents.issue .terms>section h2:not(:first-child),
#contents.subscription .terms>section h2:not(:first-child),
#contents.reservation .terms>section h2:not(:first-child),
.joinStep .terms>section h2:not(:first-child),
#contents.salesList .terms>section h3:not(:first-child),
#details .terms>section h3:not(:first-child),
#contents.notice .terms>section h3:not(:first-child),
#contents.contact .terms>section h3:not(:first-child),
#contents.inquiry .terms>section h3:not(:first-child),
#contents.issue .terms>section h3:not(:first-child),
#contents.subscription .terms>section h3:not(:first-child),
#contents.reservation .terms>section h3:not(:first-child),
.joinStep .terms>section h3:not(:first-child),
#contents.salesList .terms>section h4:not(:first-child),
#details .terms>section h4:not(:first-child),
#contents.notice .terms>section h4:not(:first-child),
#contents.contact .terms>section h4:not(:first-child),
#contents.inquiry .terms>section h4:not(:first-child),
#contents.issue .terms>section h4:not(:first-child),
#contents.subscription .terms>section h4:not(:first-child),
#contents.reservation .terms>section h4:not(:first-child),
.joinStep .terms>section h4:not(:first-child),
#contents.salesList .terms>section h5:not(:first-child),
#details .terms>section h5:not(:first-child),
#contents.notice .terms>section h5:not(:first-child),
#contents.contact .terms>section h5:not(:first-child),
#contents.inquiry .terms>section h5:not(:first-child),
#contents.issue .terms>section h5:not(:first-child),
#contents.subscription .terms>section h5:not(:first-child),
#contents.reservation .terms>section h5:not(:first-child),
.joinStep .terms>section h5:not(:first-child),
#contents.salesList .terms>section h6:not(:first-child),
#details .terms>section h6:not(:first-child),
#contents.notice .terms>section h6:not(:first-child),
#contents.contact .terms>section h6:not(:first-child),
#contents.inquiry .terms>section h6:not(:first-child),
#contents.issue .terms>section h6:not(:first-child),
#contents.subscription .terms>section h6:not(:first-child),
#contents.reservation .terms>section h6:not(:first-child),
.joinStep .terms>section h6:not(:first-child) {
  margin-top: 20px;
}

#contents.salesList .terms>section h1+*,
#details .terms>section h1+*,
#contents.notice .terms>section h1+*,
#contents.contact .terms>section h1+*,
#contents.inquiry .terms>section h1+*,
#contents.issue .terms>section h1+*,
#contents.subscription .terms>section h1+*,
#contents.reservation .terms>section h1+*,
.joinStep .terms>section h1+*,
#contents.salesList .terms>section h2+*,
#details .terms>section h2+*,
#contents.notice .terms>section h2+*,
#contents.contact .terms>section h2+*,
#contents.inquiry .terms>section h2+*,
#contents.issue .terms>section h2+*,
#contents.subscription .terms>section h2+*,
#contents.reservation .terms>section h2+*,
.joinStep .terms>section h2+*,
#contents.salesList .terms>section h3+*,
#details .terms>section h3+*,
#contents.notice .terms>section h3+*,
#contents.contact .terms>section h3+*,
#contents.inquiry .terms>section h3+*,
#contents.issue .terms>section h3+*,
#contents.subscription .terms>section h3+*,
#contents.reservation .terms>section h3+*,
.joinStep .terms>section h3+*,
#contents.salesList .terms>section h4+*,
#details .terms>section h4+*,
#contents.notice .terms>section h4+*,
#contents.contact .terms>section h4+*,
#contents.inquiry .terms>section h4+*,
#contents.issue .terms>section h4+*,
#contents.subscription .terms>section h4+*,
#contents.reservation .terms>section h4+*,
.joinStep .terms>section h4+*,
#contents.salesList .terms>section h5+*,
#details .terms>section h5+*,
#contents.notice .terms>section h5+*,
#contents.contact .terms>section h5+*,
#contents.inquiry .terms>section h5+*,
#contents.issue .terms>section h5+*,
#contents.subscription .terms>section h5+*,
#contents.reservation .terms>section h5+*,
.joinStep .terms>section h5+*,
#contents.salesList .terms>section h6+*,
#details .terms>section h6+*,
#contents.notice .terms>section h6+*,
#contents.contact .terms>section h6+*,
#contents.inquiry .terms>section h6+*,
#contents.issue .terms>section h6+*,
#contents.subscription .terms>section h6+*,
#contents.reservation .terms>section h6+*,
.joinStep .terms>section h6+* {
  margin-top: 13px;
}

#contents.salesList .terms>section p+ul,
#details .terms>section p+ul,
#contents.notice .terms>section p+ul,
#contents.contact .terms>section p+ul,
#contents.inquiry .terms>section p+ul,
#contents.issue .terms>section p+ul,
#contents.subscription .terms>section p+ul,
#contents.reservation .terms>section p+ul,
.joinStep .terms>section p+ul,
#contents.salesList .terms>section p+ol,
#details .terms>section p+ol,
#contents.notice .terms>section p+ol,
#contents.contact .terms>section p+ol,
#contents.inquiry .terms>section p+ol,
#contents.issue .terms>section p+ol,
#contents.subscription .terms>section p+ol,
#contents.reservation .terms>section p+ol,
.joinStep .terms>section p+ol,
#contents.salesList .terms>section p+p,
#details .terms>section p+p,
#contents.notice .terms>section p+p,
#contents.contact .terms>section p+p,
#contents.inquiry .terms>section p+p,
#contents.issue .terms>section p+p,
#contents.subscription .terms>section p+p,
#contents.reservation .terms>section p+p,
.joinStep .terms>section p+p,
#contents.salesList .terms>section .tableWrapper,
#details .terms>section .tableWrapper,
#contents.notice .terms>section .tableWrapper,
#contents.contact .terms>section .tableWrapper,
#contents.inquiry .terms>section .tableWrapper,
#contents.issue .terms>section .tableWrapper,
#contents.subscription .terms>section .tableWrapper,
#contents.reservation .terms>section .tableWrapper,
.joinStep .terms>section .tableWrapper,
#contents.salesList .terms>section .tableWrapper+p,
#details .terms>section .tableWrapper+p,
#contents.notice .terms>section .tableWrapper+p,
#contents.contact .terms>section .tableWrapper+p,
#contents.inquiry .terms>section .tableWrapper+p,
#contents.issue .terms>section .tableWrapper+p,
#contents.subscription .terms>section .tableWrapper+p,
#contents.reservation .terms>section .tableWrapper+p,
.joinStep .terms>section .tableWrapper+p {
  margin-top: 10px;
}

#contents.salesList .terms>section p,
#details .terms>section p,
#contents.notice .terms>section p,
#contents.contact .terms>section p,
#contents.inquiry .terms>section p,
#contents.issue .terms>section p,
#contents.subscription .terms>section p,
#contents.reservation .terms>section p,
.joinStep .terms>section p,
#contents.salesList .terms>section ul,
#details .terms>section ul,
#contents.notice .terms>section ul,
#contents.contact .terms>section ul,
#contents.inquiry .terms>section ul,
#contents.issue .terms>section ul,
#contents.subscription .terms>section ul,
#contents.reservation .terms>section ul,
.joinStep .terms>section ul,
#contents.salesList .terms>section ol,
#details .terms>section ol,
#contents.notice .terms>section ol,
#contents.contact .terms>section ol,
#contents.inquiry .terms>section ol,
#contents.issue .terms>section ol,
#contents.subscription .terms>section ol,
#contents.reservation .terms>section ol,
.joinStep .terms>section ol,
#contents.salesList .terms>section .tableWrapper,
#details .terms>section .tableWrapper,
#contents.notice .terms>section .tableWrapper,
#contents.contact .terms>section .tableWrapper,
#contents.inquiry .terms>section .tableWrapper,
#contents.issue .terms>section .tableWrapper,
#contents.subscription .terms>section .tableWrapper,
#contents.reservation .terms>section .tableWrapper,
.joinStep .terms>section .tableWrapper {
  font-weight: 300;
}

#contents.salesList .terms>section .listDash>li,
#details .terms>section .listDash>li,
#contents.notice .terms>section .listDash>li,
#contents.contact .terms>section .listDash>li,
#contents.inquiry .terms>section .listDash>li,
#contents.issue .terms>section .listDash>li,
#contents.subscription .terms>section .listDash>li,
#contents.reservation .terms>section .listDash>li,
.joinStep .terms>section .listDash>li,
#contents.salesList .terms>section p.dash,
#details .terms>section p.dash,
#contents.notice .terms>section p.dash,
#contents.contact .terms>section p.dash,
#contents.inquiry .terms>section p.dash,
#contents.issue .terms>section p.dash,
#contents.subscription .terms>section p.dash,
#contents.reservation .terms>section p.dash,
.joinStep .terms>section p.dash {
  position: relative;
  padding-left: 0.7em;
}

#contents.salesList .terms>section .listDash>li::before,
#details .terms>section .listDash>li::before,
#contents.notice .terms>section .listDash>li::before,
#contents.contact .terms>section .listDash>li::before,
#contents.inquiry .terms>section .listDash>li::before,
#contents.issue .terms>section .listDash>li::before,
#contents.subscription .terms>section .listDash>li::before,
#contents.reservation .terms>section .listDash>li::before,
.joinStep .terms>section .listDash>li::before,
#contents.salesList .terms>section p.dash::before,
#details .terms>section p.dash::before,
#contents.notice .terms>section p.dash::before,
#contents.contact .terms>section p.dash::before,
#contents.inquiry .terms>section p.dash::before,
#contents.issue .terms>section p.dash::before,
#contents.subscription .terms>section p.dash::before,
#contents.reservation .terms>section p.dash::before,
.joinStep .terms>section p.dash::before {
  content: "-";
  position: absolute;
  left: 0;
  width: 1.2em;
}

#contents.salesList .terms>section .listDot>li,
#details .terms>section .listDot>li,
#contents.notice .terms>section .listDot>li,
#contents.contact .terms>section .listDot>li,
#contents.inquiry .terms>section .listDot>li,
#contents.issue .terms>section .listDot>li,
#contents.subscription .terms>section .listDot>li,
#contents.reservation .terms>section .listDot>li,
.joinStep .terms>section .listDot>li {
  position: relative;
  padding-left: 0.7em;
}

#contents.salesList .terms>section .listDot>li::before,
#details .terms>section .listDot>li::before,
#contents.notice .terms>section .listDot>li::before,
#contents.contact .terms>section .listDot>li::before,
#contents.inquiry .terms>section .listDot>li::before,
#contents.issue .terms>section .listDot>li::before,
#contents.subscription .terms>section .listDot>li::before,
#contents.reservation .terms>section .listDot>li::before,
.joinStep .terms>section .listDot>li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #666;
}

#contents.salesList .terms>section .tableWrapper,
#details .terms>section .tableWrapper,
#contents.notice .terms>section .tableWrapper,
#contents.contact .terms>section .tableWrapper,
#contents.inquiry .terms>section .tableWrapper,
#contents.issue .terms>section .tableWrapper,
#contents.subscription .terms>section .tableWrapper,
#contents.reservation .terms>section .tableWrapper,
.joinStep .terms>section .tableWrapper {
  overflow-x: auto;
}

#contents.salesList .terms>section .tableWrapper table,
#details .terms>section .tableWrapper table,
#contents.notice .terms>section .tableWrapper table,
#contents.contact .terms>section .tableWrapper table,
#contents.inquiry .terms>section .tableWrapper table,
#contents.issue .terms>section .tableWrapper table,
#contents.subscription .terms>section .tableWrapper table,
#contents.reservation .terms>section .tableWrapper table,
.joinStep .terms>section .tableWrapper table {
  table-layout: fixed;
  width: 100%;
  border-top: 2px solid #212121;
}

#contents.salesList .terms>section .tableWrapper table th,
#details .terms>section .tableWrapper table th,
#contents.notice .terms>section .tableWrapper table th,
#contents.contact .terms>section .tableWrapper table th,
#contents.inquiry .terms>section .tableWrapper table th,
#contents.issue .terms>section .tableWrapper table th,
#contents.subscription .terms>section .tableWrapper table th,
#contents.reservation .terms>section .tableWrapper table th,
.joinStep .terms>section .tableWrapper table th {
  background: #f6f6f6;
  font-weight: 400;
  color: #212121;
}

#contents.salesList .terms>section .tableWrapper table th,
#details .terms>section .tableWrapper table th,
#contents.notice .terms>section .tableWrapper table th,
#contents.contact .terms>section .tableWrapper table th,
#contents.inquiry .terms>section .tableWrapper table th,
#contents.issue .terms>section .tableWrapper table th,
#contents.subscription .terms>section .tableWrapper table th,
#contents.reservation .terms>section .tableWrapper table th,
.joinStep .terms>section .tableWrapper table th,
#contents.salesList .terms>section .tableWrapper table td,
#details .terms>section .tableWrapper table td,
#contents.notice .terms>section .tableWrapper table td,
#contents.contact .terms>section .tableWrapper table td,
#contents.inquiry .terms>section .tableWrapper table td,
#contents.issue .terms>section .tableWrapper table td,
#contents.subscription .terms>section .tableWrapper table td,
#contents.reservation .terms>section .tableWrapper table td,
.joinStep .terms>section .tableWrapper table td {
  padding: 5px 10px;
  border-bottom: 1px solid #c8c8c8;
}

#contents.salesList .terms>section .tableWrapper table th:not(:first-child),
#details .terms>section .tableWrapper table th:not(:first-child),
#contents.notice .terms>section .tableWrapper table th:not(:first-child),
#contents.contact .terms>section .tableWrapper table th:not(:first-child),
#contents.inquiry .terms>section .tableWrapper table th:not(:first-child),
#contents.issue .terms>section .tableWrapper table th:not(:first-child),
#contents.subscription .terms>section .tableWrapper table th:not(:first-child),
#contents.reservation .terms>section .tableWrapper table th:not(:first-child),
.joinStep .terms>section .tableWrapper table th:not(:first-child),
#contents.salesList .terms>section .tableWrapper table td:not(:first-child),
#details .terms>section .tableWrapper table td:not(:first-child),
#contents.notice .terms>section .tableWrapper table td:not(:first-child),
#contents.contact .terms>section .tableWrapper table td:not(:first-child),
#contents.inquiry .terms>section .tableWrapper table td:not(:first-child),
#contents.issue .terms>section .tableWrapper table td:not(:first-child),
#contents.subscription .terms>section .tableWrapper table td:not(:first-child),
#contents.reservation .terms>section .tableWrapper table td:not(:first-child),
.joinStep .terms>section .tableWrapper table td:not(:first-child) {
  border-left: 1px solid #c8c8c8;
}

#contents.salesList .terms>section .child,
#details .terms>section .child,
#contents.notice .terms>section .child,
#contents.contact .terms>section .child,
#contents.inquiry .terms>section .child,
#contents.issue .terms>section .child,
#contents.subscription .terms>section .child,
#contents.reservation .terms>section .child,
.joinStep .terms>section .child {
  padding-left: 0.5em;
}

#contents.salesList .terms>section .listOrder,
#details .terms>section .listOrder,
#contents.notice .terms>section .listOrder,
#contents.contact .terms>section .listOrder,
#contents.inquiry .terms>section .listOrder,
#contents.issue .terms>section .listOrder,
#contents.subscription .terms>section .listOrder,
#contents.reservation .terms>section .listOrder,
.joinStep .terms>section .listOrder {
  margin-left: 1em;
}

#contents.salesList .terms>section .listCircle,
#details .terms>section .listCircle,
#contents.notice .terms>section .listCircle,
#contents.contact .terms>section .listCircle,
#contents.inquiry .terms>section .listCircle,
#contents.issue .terms>section .listCircle,
#contents.subscription .terms>section .listCircle,
#contents.reservation .terms>section .listCircle,
.joinStep .terms>section .listCircle {
  counter-reset: item;
}

#contents.salesList .terms>section .listCircle>li,
#details .terms>section .listCircle>li,
#contents.notice .terms>section .listCircle>li,
#contents.contact .terms>section .listCircle>li,
#contents.inquiry .terms>section .listCircle>li,
#contents.issue .terms>section .listCircle>li,
#contents.subscription .terms>section .listCircle>li,
#contents.reservation .terms>section .listCircle>li,
.joinStep .terms>section .listCircle>li {
  list-style: none;
  position: relative;
  padding-left: 1.5em;
}

#contents.salesList .terms>section .listCircle>li::before,
#details .terms>section .listCircle>li::before,
#contents.notice .terms>section .listCircle>li::before,
#contents.contact .terms>section .listCircle>li::before,
#contents.inquiry .terms>section .listCircle>li::before,
#contents.issue .terms>section .listCircle>li::before,
#contents.subscription .terms>section .listCircle>li::before,
#contents.reservation .terms>section .listCircle>li::before,
.joinStep .terms>section .listCircle>li::before {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 1.4em;
  height: 1.4em;
  border: 1px solid #666;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
  line-height: 1.3em;
  overflow: hidden;
}

.popup form,
#contents.salesList .form,
#details .form,
#contents.notice .form,
#contents.contact .form,
#contents.inquiry .form,
#contents.issue .form,
#contents.subscription .form,
#contents.reservation .form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

@media (min-width: 1025px) {

  .popup form.third,
  #contents.salesList .third.form,
  #details .third.form,
  #contents.notice .third.form,
  #contents.contact .third.form,
  #contents.inquiry .third.form,
  #contents.issue .third.form,
  #contents.subscription .third.form,
  #contents.reservation .third.form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .popup form.third>div,
  #contents.salesList .third.form>div,
  #details .third.form>div,
  #contents.notice .third.form>div,
  #contents.contact .third.form>div,
  #contents.inquiry .third.form>div,
  #contents.issue .third.form>div,
  #contents.subscription .third.form>div,
  #contents.reservation .third.form>div {
    margin-top: 0;
    width: calc(50% - 94px);
  }

  .popup form.third>div:nth-of-type(2),
  #contents.salesList .third.form>div:nth-of-type(2),
  #details .third.form>div:nth-of-type(2),
  #contents.notice .third.form>div:nth-of-type(2),
  #contents.contact .third.form>div:nth-of-type(2),
  #contents.inquiry .third.form>div:nth-of-type(2),
  #contents.issue .third.form>div:nth-of-type(2),
  #contents.subscription .third.form>div:nth-of-type(2),
  #contents.reservation .third.form>div:nth-of-type(2) {
    margin: 0 17px 0 10px;
  }
}

@media (max-width: 1024px) {

  .popup form.third>div,
  #contents.salesList .third.form>div,
  #details .third.form>div,
  #contents.notice .third.form>div,
  #contents.contact .third.form>div,
  #contents.inquiry .third.form>div,
  #contents.issue .third.form>div,
  #contents.subscription .third.form>div,
  #contents.reservation .third.form>div {
    width: 100%;
    margin-top: 0;
  }

  .popup form.third>div:nth-of-type(2),
  #contents.salesList .third.form>div:nth-of-type(2),
  #details .third.form>div:nth-of-type(2),
  #contents.notice .third.form>div:nth-of-type(2),
  #contents.contact .third.form>div:nth-of-type(2),
  #contents.inquiry .third.form>div:nth-of-type(2),
  #contents.issue .third.form>div:nth-of-type(2),
  #contents.subscription .third.form>div:nth-of-type(2),
  #contents.reservation .third.form>div:nth-of-type(2) {
    margin: 10px 0 !important;
  }
}

.popup form>div.w100,
#contents.salesList .form>div.w100,
#details .form>div.w100,
#contents.notice .form>div.w100,
#contents.contact .form>div.w100,
#contents.inquiry .form>div.w100,
#contents.issue .form>div.w100,
#contents.subscription .form>div.w100,
#contents.reservation .form>div.w100 {
  width: 100%;
}

@media (min-width: 1025px) {

  .popup form>div,
  #contents.salesList .form>div,
  #details .form>div,
  #contents.notice .form>div,
  #contents.contact .form>div,
  #contents.inquiry .form>div,
  #contents.issue .form>div,
  #contents.subscription .form>div,
  #contents.reservation .form>div {
    margin-top: 35px;
  }

  .popup form>div.w100:first-of-type,
  #contents.salesList .form>div.w100:first-of-type,
  #details .form>div.w100:first-of-type,
  #contents.notice .form>div.w100:first-of-type,
  #contents.contact .form>div.w100:first-of-type,
  #contents.inquiry .form>div.w100:first-of-type,
  #contents.issue .form>div.w100:first-of-type,
  #contents.subscription .form>div.w100:first-of-type,
  #contents.reservation .form>div.w100:first-of-type {
    margin-top: 0;
  }

  .popup form>div.w100+.half:nth-of-type(2),
  #contents.salesList .form>div.w100+.half:nth-of-type(2),
  #details .form>div.w100+.half:nth-of-type(2),
  #contents.notice .form>div.w100+.half:nth-of-type(2),
  #contents.contact .form>div.w100+.half:nth-of-type(2),
  #contents.inquiry .form>div.w100+.half:nth-of-type(2),
  #contents.issue .form>div.w100+.half:nth-of-type(2),
  #contents.subscription .form>div.w100+.half:nth-of-type(2),
  #contents.reservation .form>div.w100+.half:nth-of-type(2) {
    margin-top: 35px;
  }

  .popup form>div.half:nth-of-type(-n+2),
  #contents.salesList .form>div.half:nth-of-type(-n+2),
  #details .form>div.half:nth-of-type(-n+2),
  #contents.notice .form>div.half:nth-of-type(-n+2),
  #contents.contact .form>div.half:nth-of-type(-n+2),
  #contents.inquiry .form>div.half:nth-of-type(-n+2),
  #contents.issue .form>div.half:nth-of-type(-n+2),
  #contents.subscription .form>div.half:nth-of-type(-n+2),
  #contents.reservation .form>div.half:nth-of-type(-n+2) {
    margin-top: 0;
  }
}

@media (max-width: 1024px) {

  .popup form>div,
  #contents.salesList .form>div,
  #details .form>div,
  #contents.notice .form>div,
  #contents.contact .form>div,
  #contents.inquiry .form>div,
  #contents.issue .form>div,
  #contents.subscription .form>div,
  #contents.reservation .form>div {
    margin-top: 25px;
  }
}

@media (max-width: 640px) {

  .popup form>div+div,
  #contents.salesList .form>div+div,
  #details .form>div+div,
  #contents.notice .form>div+div,
  #contents.contact .form>div+div,
  #contents.inquiry .form>div+div,
  #contents.issue .form>div+div,
  #contents.subscription .form>div+div,
  #contents.reservation .form>div+div {
    margin-top: 25px !important;
  }

  .popup form>div.one,
  #contents.salesList .form>div.one,
  #details .form>div.one,
  #contents.notice .form>div.one,
  #contents.contact .form>div.one,
  #contents.inquiry .form>div.one,
  #contents.issue .form>div.one,
  #contents.subscription .form>div.one,
  #contents.reservation .form>div.one {
    margin-top: 10px !important;
  }

  .popup form>div.one .label,
  #contents.salesList .form>div.one .label,
  #details .form>div.one .label,
  #contents.notice .form>div.one .label,
  #contents.contact .form>div.one .label,
  #contents.inquiry .form>div.one .label,
  #contents.issue .form>div.one .label,
  #contents.subscription .form>div.one .label,
  #contents.reservation .form>div.one .label {
    display: none;
  }
}

.popup form>div input[type=password],
#contents.salesList .form>div input[type=password],
#details .form>div input[type=password],
#contents.notice .form>div input[type=password],
#contents.contact .form>div input[type=password],
#contents.inquiry .form>div input[type=password],
#contents.issue .form>div input[type=password],
#contents.subscription .form>div input[type=password],
#contents.reservation .form>div input[type=password] {
  -webkit-text-security: disc;
  font: large Verdana, sans-serif;
  letter-spacing: 1px;
}

.popup form>div input[type=password]::-moz-placeholder,
#contents.salesList .form>div input[type=password]::-moz-placeholder,
#details .form>div input[type=password]::-moz-placeholder,
#contents.notice .form>div input[type=password]::-moz-placeholder,
#contents.contact .form>div input[type=password]::-moz-placeholder,
#contents.inquiry .form>div input[type=password]::-moz-placeholder,
#contents.issue .form>div input[type=password]::-moz-placeholder,
#contents.subscription .form>div input[type=password]::-moz-placeholder,
#contents.reservation .form>div input[type=password]::-moz-placeholder {
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
  letter-spacing: 0;
}

.popup form>div input[type=password]::placeholder,
#contents.salesList .form>div input[type=password]::placeholder,
#details .form>div input[type=password]::placeholder,
#contents.notice .form>div input[type=password]::placeholder,
#contents.contact .form>div input[type=password]::placeholder,
#contents.inquiry .form>div input[type=password]::placeholder,
#contents.issue .form>div input[type=password]::placeholder,
#contents.subscription .form>div input[type=password]::placeholder,
#contents.reservation .form>div input[type=password]::placeholder {
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
  letter-spacing: 0;
}

@media (min-width: 1025px) {

  .popup form>div input[type=password]::-moz-placeholder,
  #contents.salesList .form>div input[type=password]::-moz-placeholder,
  #details .form>div input[type=password]::-moz-placeholder,
  #contents.notice .form>div input[type=password]::-moz-placeholder,
  #contents.contact .form>div input[type=password]::-moz-placeholder,
  #contents.inquiry .form>div input[type=password]::-moz-placeholder,
  #contents.issue .form>div input[type=password]::-moz-placeholder,
  #contents.subscription .form>div input[type=password]::-moz-placeholder,
  #contents.reservation .form>div input[type=password]::-moz-placeholder {
    font-size: 16px;
  }

  .popup form>div input[type=password]::placeholder,
  #contents.salesList .form>div input[type=password]::placeholder,
  #details .form>div input[type=password]::placeholder,
  #contents.notice .form>div input[type=password]::placeholder,
  #contents.contact .form>div input[type=password]::placeholder,
  #contents.inquiry .form>div input[type=password]::placeholder,
  #contents.issue .form>div input[type=password]::placeholder,
  #contents.subscription .form>div input[type=password]::placeholder,
  #contents.reservation .form>div input[type=password]::placeholder {
    font-size: 16px;
  }
}

@media (max-width: 1024px) {

  .popup form>div input[type=password]::-moz-placeholder,
  #contents.salesList .form>div input[type=password]::-moz-placeholder,
  #details .form>div input[type=password]::-moz-placeholder,
  #contents.notice .form>div input[type=password]::-moz-placeholder,
  #contents.contact .form>div input[type=password]::-moz-placeholder,
  #contents.inquiry .form>div input[type=password]::-moz-placeholder,
  #contents.issue .form>div input[type=password]::-moz-placeholder,
  #contents.subscription .form>div input[type=password]::-moz-placeholder,
  #contents.reservation .form>div input[type=password]::-moz-placeholder {
    font-size: 14px;
  }

  .popup form>div input[type=password]::placeholder,
  #contents.salesList .form>div input[type=password]::placeholder,
  #details .form>div input[type=password]::placeholder,
  #contents.notice .form>div input[type=password]::placeholder,
  #contents.contact .form>div input[type=password]::placeholder,
  #contents.inquiry .form>div input[type=password]::placeholder,
  #contents.issue .form>div input[type=password]::placeholder,
  #contents.subscription .form>div input[type=password]::placeholder,
  #contents.reservation .form>div input[type=password]::placeholder {
    font-size: 14px;
  }
}

.popup form>div .textarea,
#contents.salesList .form>div .textarea,
#details .form>div .textarea,
#contents.notice .form>div .textarea,
#contents.contact .form>div .textarea,
#contents.inquiry .form>div .textarea,
#contents.issue .form>div .textarea,
#contents.subscription .form>div .textarea,
#contents.reservation .form>div .textarea {
  width: 100%;
}

.popup form>div .textarea textarea,
#contents.salesList .form>div .textarea textarea,
#details .form>div .textarea textarea,
#contents.notice .form>div .textarea textarea,
#contents.contact .form>div .textarea textarea,
#contents.inquiry .form>div .textarea textarea,
#contents.issue .form>div .textarea textarea,
#contents.subscription .form>div .textarea textarea,
#contents.reservation .form>div .textarea textarea {
  width: 100%;
  border: 0;
  line-height: 1.4;
}

@media (min-width: 1025px) {

  .popup form>div .textarea textarea,
  #contents.salesList .form>div .textarea textarea,
  #details .form>div .textarea textarea,
  #contents.notice .form>div .textarea textarea,
  #contents.contact .form>div .textarea textarea,
  #contents.inquiry .form>div .textarea textarea,
  #contents.issue .form>div .textarea textarea,
  #contents.subscription .form>div .textarea textarea,
  #contents.reservation .form>div .textarea textarea {
    height: 78px;
    padding-top: 15px;
  }
}

@media (max-width: 1024px) {

  .popup form>div .textarea textarea,
  #contents.salesList .form>div .textarea textarea,
  #details .form>div .textarea textarea,
  #contents.notice .form>div .textarea textarea,
  #contents.contact .form>div .textarea textarea,
  #contents.inquiry .form>div .textarea textarea,
  #contents.issue .form>div .textarea textarea,
  #contents.subscription .form>div .textarea textarea,
  #contents.reservation .form>div .textarea textarea {
    height: 100px !important;
  }
}

@media (min-width: 1025px) {

  .popup form>div.half,
  #contents.salesList .form>div.half,
  #details .form>div.half,
  #contents.notice .form>div.half,
  #contents.contact .form>div.half,
  #contents.inquiry .form>div.half,
  #contents.issue .form>div.half,
  #contents.subscription .form>div.half,
  #contents.reservation .form>div.half {
    width: calc(50% - 20px);
  }
}

@media (max-width: 1024px) {

  .popup form>div.half,
  #contents.salesList .form>div.half,
  #details .form>div.half,
  #contents.notice .form>div.half,
  #contents.contact .form>div.half,
  #contents.inquiry .form>div.half,
  #contents.issue .form>div.half,
  #contents.subscription .form>div.half,
  #contents.reservation .form>div.half {
    width: calc(50% - 10px);
  }
}

@media (max-width: 640px) {

  .popup form>div.half,
  #contents.salesList .form>div.half,
  #details .form>div.half,
  #contents.notice .form>div.half,
  #contents.contact .form>div.half,
  #contents.inquiry .form>div.half,
  #contents.issue .form>div.half,
  #contents.subscription .form>div.half,
  #contents.reservation .form>div.half {
    width: 100%;
  }

  .popup form>div.half.empty,
  #contents.salesList .form>div.half.empty,
  #details .form>div.half.empty,
  #contents.notice .form>div.half.empty,
  #contents.contact .form>div.half.empty,
  #contents.inquiry .form>div.half.empty,
  #contents.issue .form>div.half.empty,
  #contents.subscription .form>div.half.empty,
  #contents.reservation .form>div.half.empty {
    display: none;
  }
}

.popup form>div.phone,
#contents.salesList .form>div.phone,
#details .form>div.phone,
#contents.notice .form>div.phone,
#contents.contact .form>div.phone,
#contents.inquiry .form>div.phone,
#contents.issue .form>div.phone,
#contents.subscription .form>div.phone,
#contents.reservation .form>div.phone {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.popup form>div.phone .label,
#contents.salesList .form>div.phone .label,
#details .form>div.phone .label,
#contents.notice .form>div.phone .label,
#contents.contact .form>div.phone .label,
#contents.inquiry .form>div.phone .label,
#contents.issue .form>div.phone .label,
#contents.subscription .form>div.phone .label,
#contents.reservation .form>div.phone .label {
  width: 100%;
}

.popup form>div.phone span:not(.label),
#contents.salesList .form>div.phone span:not(.label),
#details .form>div.phone span:not(.label),
#contents.notice .form>div.phone span:not(.label),
#contents.contact .form>div.phone span:not(.label),
#contents.inquiry .form>div.phone span:not(.label),
#contents.issue .form>div.phone span:not(.label),
#contents.subscription .form>div.phone span:not(.label),
#contents.reservation .form>div.phone span:not(.label) {
  text-align: center;
}

@media (min-width: 1025px) {

  .popup form>div.phone span:not(.label),
  #contents.salesList .form>div.phone span:not(.label),
  #details .form>div.phone span:not(.label),
  #contents.notice .form>div.phone span:not(.label),
  #contents.contact .form>div.phone span:not(.label),
  #contents.inquiry .form>div.phone span:not(.label),
  #contents.issue .form>div.phone span:not(.label),
  #contents.subscription .form>div.phone span:not(.label),
  #contents.reservation .form>div.phone span:not(.label) {
    width: 25px;
  }
}

@media (max-width: 1024px) {

  .popup form>div.phone span:not(.label),
  #contents.salesList .form>div.phone span:not(.label),
  #details .form>div.phone span:not(.label),
  #contents.notice .form>div.phone span:not(.label),
  #contents.contact .form>div.phone span:not(.label),
  #contents.inquiry .form>div.phone span:not(.label),
  #contents.issue .form>div.phone span:not(.label),
  #contents.subscription .form>div.phone span:not(.label),
  #contents.reservation .form>div.phone span:not(.label) {
    width: 18px;
  }
}

@media (min-width: 1025px) {

  .popup form>div.phone input,
  #contents.salesList .form>div.phone input,
  #details .form>div.phone input,
  #contents.notice .form>div.phone input,
  #contents.contact .form>div.phone input,
  #contents.inquiry .form>div.phone input,
  #contents.issue .form>div.phone input,
  #contents.subscription .form>div.phone input,
  #contents.reservation .form>div.phone input {
    width: calc(33.3333333333% - 16.6666666667px);
  }
}

@media (max-width: 1024px) {

  .popup form>div.phone input,
  #contents.salesList .form>div.phone input,
  #details .form>div.phone input,
  #contents.notice .form>div.phone input,
  #contents.contact .form>div.phone input,
  #contents.inquiry .form>div.phone input,
  #contents.issue .form>div.phone input,
  #contents.subscription .form>div.phone input,
  #contents.reservation .form>div.phone input {
    width: calc(33.3333333333% - 12px);
  }
}

.popup form>div.email,
#contents.salesList .form>div.email,
#details .form>div.email,
#contents.notice .form>div.email,
#contents.contact .form>div.email,
#contents.inquiry .form>div.email,
#contents.issue .form>div.email,
#contents.subscription .form>div.email,
#contents.reservation .form>div.email {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.popup form>div.email .label,
#contents.salesList .form>div.email .label,
#details .form>div.email .label,
#contents.notice .form>div.email .label,
#contents.contact .form>div.email .label,
#contents.inquiry .form>div.email .label,
#contents.issue .form>div.email .label,
#contents.subscription .form>div.email .label,
#contents.reservation .form>div.email .label {
  width: 100%;
}

@media (min-width: 1025px) {

  .popup form>div.email input:first-of-type,
  #contents.salesList .form>div.email input:first-of-type,
  #details .form>div.email input:first-of-type,
  #contents.notice .form>div.email input:first-of-type,
  #contents.contact .form>div.email input:first-of-type,
  #contents.inquiry .form>div.email input:first-of-type,
  #contents.issue .form>div.email input:first-of-type,
  #contents.subscription .form>div.email input:first-of-type,
  #contents.reservation .form>div.email input:first-of-type {
    width: calc(50% - 20px);
  }
}

@media (max-width: 1024px) {

  .popup form>div.email input:first-of-type,
  #contents.salesList .form>div.email input:first-of-type,
  #details .form>div.email input:first-of-type,
  #contents.notice .form>div.email input:first-of-type,
  #contents.contact .form>div.email input:first-of-type,
  #contents.inquiry .form>div.email input:first-of-type,
  #contents.issue .form>div.email input:first-of-type,
  #contents.subscription .form>div.email input:first-of-type,
  #contents.reservation .form>div.email input:first-of-type {
    width: calc(50% - 10px);
  }
}

@media (max-width: 640px) {

  .popup form>div.email input:first-of-type,
  #contents.salesList .form>div.email input:first-of-type,
  #details .form>div.email input:first-of-type,
  #contents.notice .form>div.email input:first-of-type,
  #contents.contact .form>div.email input:first-of-type,
  #contents.inquiry .form>div.email input:first-of-type,
  #contents.issue .form>div.email input:first-of-type,
  #contents.subscription .form>div.email input:first-of-type,
  #contents.reservation .form>div.email input:first-of-type {
    width: calc(100% - 15px);
  }
}

@media (min-width: 1025px) {

  .popup form>div.email input:last-of-type,
  #contents.salesList .form>div.email input:last-of-type,
  #details .form>div.email input:last-of-type,
  #contents.notice .form>div.email input:last-of-type,
  #contents.contact .form>div.email input:last-of-type,
  #contents.inquiry .form>div.email input:last-of-type,
  #contents.issue .form>div.email input:last-of-type,
  #contents.subscription .form>div.email input:last-of-type,
  #contents.reservation .form>div.email input:last-of-type {
    width: calc(25% - 15px);
  }
}

@media (max-width: 1024px) {

  .popup form>div.email input:last-of-type,
  #contents.salesList .form>div.email input:last-of-type,
  #details .form>div.email input:last-of-type,
  #contents.notice .form>div.email input:last-of-type,
  #contents.contact .form>div.email input:last-of-type,
  #contents.inquiry .form>div.email input:last-of-type,
  #contents.issue .form>div.email input:last-of-type,
  #contents.subscription .form>div.email input:last-of-type,
  #contents.reservation .form>div.email input:last-of-type {
    width: calc(25% - 8px);
  }
}

@media (max-width: 640px) {

  .popup form>div.email input:last-of-type,
  #contents.salesList .form>div.email input:last-of-type,
  #details .form>div.email input:last-of-type,
  #contents.notice .form>div.email input:last-of-type,
  #contents.contact .form>div.email input:last-of-type,
  #contents.inquiry .form>div.email input:last-of-type,
  #contents.issue .form>div.email input:last-of-type,
  #contents.subscription .form>div.email input:last-of-type,
  #contents.reservation .form>div.email input:last-of-type {
    margin-top: 10px;
    width: calc(50% - 5px);
  }
}

@media (max-width: 480px) {

  .popup form>div.email input:last-of-type,
  #contents.salesList .form>div.email input:last-of-type,
  #details .form>div.email input:last-of-type,
  #contents.notice .form>div.email input:last-of-type,
  #contents.contact .form>div.email input:last-of-type,
  #contents.inquiry .form>div.email input:last-of-type,
  #contents.issue .form>div.email input:last-of-type,
  #contents.subscription .form>div.email input:last-of-type,
  #contents.reservation .form>div.email input:last-of-type {
    width: 100%;
  }
}

.popup form>div.email .selectBox,
#contents.salesList .form>div.email .selectBox,
#details .form>div.email .selectBox,
#contents.notice .form>div.email .selectBox,
#contents.contact .form>div.email .selectBox,
#contents.inquiry .form>div.email .selectBox,
#contents.issue .form>div.email .selectBox,
#contents.subscription .form>div.email .selectBox,
#contents.reservation .form>div.email .selectBox {
  position: relative;
}

.popup form>div.email .selectBox>button,
#contents.salesList .form>div.email .selectBox>button,
#details .form>div.email .selectBox>button,
#contents.notice .form>div.email .selectBox>button,
#contents.contact .form>div.email .selectBox>button,
#contents.inquiry .form>div.email .selectBox>button,
#contents.issue .form>div.email .selectBox>button,
#contents.subscription .form>div.email .selectBox>button,
#contents.reservation .form>div.email .selectBox>button {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #707070;
  text-align: left;
  color: #666;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 30px !important;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
}

.popup form>div.email .selectBox>button::after,
#contents.salesList .form>div.email .selectBox>button::after,
#details .form>div.email .selectBox>button::after,
#contents.notice .form>div.email .selectBox>button::after,
#contents.contact .form>div.email .selectBox>button::after,
#contents.inquiry .form>div.email .selectBox>button::after,
#contents.issue .form>div.email .selectBox>button::after,
#contents.subscription .form>div.email .selectBox>button::after,
#contents.reservation .form>div.email .selectBox>button::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-45deg);
  right: 20px;
}

.popup form>div.email .selectBox>button.placeholder,
#contents.salesList .form>div.email .selectBox>button.placeholder,
#details .form>div.email .selectBox>button.placeholder,
#contents.notice .form>div.email .selectBox>button.placeholder,
#contents.contact .form>div.email .selectBox>button.placeholder,
#contents.inquiry .form>div.email .selectBox>button.placeholder,
#contents.issue .form>div.email .selectBox>button.placeholder,
#contents.subscription .form>div.email .selectBox>button.placeholder,
#contents.reservation .form>div.email .selectBox>button.placeholder {
  color: #a5a5a5;
}

.popup form>div.email .selectBox>button.active,
#contents.salesList .form>div.email .selectBox>button.active,
#details .form>div.email .selectBox>button.active,
#contents.notice .form>div.email .selectBox>button.active,
#contents.contact .form>div.email .selectBox>button.active,
#contents.inquiry .form>div.email .selectBox>button.active,
#contents.issue .form>div.email .selectBox>button.active,
#contents.subscription .form>div.email .selectBox>button.active,
#contents.reservation .form>div.email .selectBox>button.active {
  color: #46296E;
  border-color: #46296E;
}

.popup form>div.email .selectBox>button.active::after,
#contents.salesList .form>div.email .selectBox>button.active::after,
#details .form>div.email .selectBox>button.active::after,
#contents.notice .form>div.email .selectBox>button.active::after,
#contents.contact .form>div.email .selectBox>button.active::after,
#contents.inquiry .form>div.email .selectBox>button.active::after,
#contents.issue .form>div.email .selectBox>button.active::after,
#contents.subscription .form>div.email .selectBox>button.active::after,
#contents.reservation .form>div.email .selectBox>button.active::after {
  border-color: #46296E;
}

.popup form>div.email .selectBox>div,
#contents.salesList .form>div.email .selectBox>div,
#details .form>div.email .selectBox>div,
#contents.notice .form>div.email .selectBox>div,
#contents.contact .form>div.email .selectBox>div,
#contents.inquiry .form>div.email .selectBox>div,
#contents.issue .form>div.email .selectBox>div,
#contents.subscription .form>div.email .selectBox>div,
#contents.reservation .form>div.email .selectBox>div {
  z-index: 3;
  position: absolute;
  display: none;
  width: 100%;
  overflow: auto;
  background: #fff;
  -ms-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
}

.popup form>div.email .selectBox>div::before,
#contents.salesList .form>div.email .selectBox>div::before,
#details .form>div.email .selectBox>div::before,
#contents.notice .form>div.email .selectBox>div::before,
#contents.contact .form>div.email .selectBox>div::before,
#contents.inquiry .form>div.email .selectBox>div::before,
#contents.issue .form>div.email .selectBox>div::before,
#contents.subscription .form>div.email .selectBox>div::before,
#contents.reservation .form>div.email .selectBox>div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: #46296E;
  display: none;
}

.popup form>div.email .selectBox>div button,
#contents.salesList .form>div.email .selectBox>div button,
#details .form>div.email .selectBox>div button,
#contents.notice .form>div.email .selectBox>div button,
#contents.contact .form>div.email .selectBox>div button,
#contents.inquiry .form>div.email .selectBox>div button,
#contents.issue .form>div.email .selectBox>div button,
#contents.subscription .form>div.email .selectBox>div button,
#contents.reservation .form>div.email .selectBox>div button {
  width: 100%;
  line-height: 2.5 !important;
  text-align: left;
}

.popup form>div.email .selectBox>div button.selected,
#contents.salesList .form>div.email .selectBox>div button.selected,
#details .form>div.email .selectBox>div button.selected,
#contents.notice .form>div.email .selectBox>div button.selected,
#contents.contact .form>div.email .selectBox>div button.selected,
#contents.inquiry .form>div.email .selectBox>div button.selected,
#contents.issue .form>div.email .selectBox>div button.selected,
#contents.subscription .form>div.email .selectBox>div button.selected,
#contents.reservation .form>div.email .selectBox>div button.selected {
  color: #46296E;
}

@media (min-width: 1025px) {

  .popup form>div.email .selectBox>div>button:first-child,
  #contents.salesList .form>div.email .selectBox>div>button:first-child,
  #details .form>div.email .selectBox>div>button:first-child,
  #contents.notice .form>div.email .selectBox>div>button:first-child,
  #contents.contact .form>div.email .selectBox>div>button:first-child,
  #contents.inquiry .form>div.email .selectBox>div>button:first-child,
  #contents.issue .form>div.email .selectBox>div>button:first-child,
  #contents.subscription .form>div.email .selectBox>div>button:first-child,
  #contents.reservation .form>div.email .selectBox>div>button:first-child {
    margin-top: 10px;
  }

  .popup form>div.email .selectBox>div>button:last-child,
  #contents.salesList .form>div.email .selectBox>div>button:last-child,
  #details .form>div.email .selectBox>div>button:last-child,
  #contents.notice .form>div.email .selectBox>div>button:last-child,
  #contents.contact .form>div.email .selectBox>div>button:last-child,
  #contents.inquiry .form>div.email .selectBox>div>button:last-child,
  #contents.issue .form>div.email .selectBox>div>button:last-child,
  #contents.subscription .form>div.email .selectBox>div>button:last-child,
  #contents.reservation .form>div.email .selectBox>div>button:last-child {
    margin-bottom: 10px;
  }

  .popup form>div.email .selectBox>button,
  #contents.salesList .form>div.email .selectBox>button,
  #details .form>div.email .selectBox>button,
  #contents.notice .form>div.email .selectBox>button,
  #contents.contact .form>div.email .selectBox>button,
  #contents.inquiry .form>div.email .selectBox>button,
  #contents.issue .form>div.email .selectBox>button,
  #contents.subscription .form>div.email .selectBox>button,
  #contents.reservation .form>div.email .selectBox>button {
    height: 54px;
  }

  .popup form>div.email .selectBox>button::after,
  #contents.salesList .form>div.email .selectBox>button::after,
  #details .form>div.email .selectBox>button::after,
  #contents.notice .form>div.email .selectBox>button::after,
  #contents.contact .form>div.email .selectBox>button::after,
  #contents.inquiry .form>div.email .selectBox>button::after,
  #contents.issue .form>div.email .selectBox>button::after,
  #contents.subscription .form>div.email .selectBox>button::after,
  #contents.reservation .form>div.email .selectBox>button::after {
    top: 20px;
  }

  .popup form>div.email .selectBox>button,
  #contents.salesList .form>div.email .selectBox>button,
  #details .form>div.email .selectBox>button,
  #contents.notice .form>div.email .selectBox>button,
  #contents.contact .form>div.email .selectBox>button,
  #contents.inquiry .form>div.email .selectBox>button,
  #contents.issue .form>div.email .selectBox>button,
  #contents.subscription .form>div.email .selectBox>button,
  #contents.reservation .form>div.email .selectBox>button,
  .popup form>div.email .selectBox>div button,
  #contents.salesList .form>div.email .selectBox>div button,
  #details .form>div.email .selectBox>div button,
  #contents.notice .form>div.email .selectBox>div button,
  #contents.contact .form>div.email .selectBox>div button,
  #contents.inquiry .form>div.email .selectBox>div button,
  #contents.issue .form>div.email .selectBox>div button,
  #contents.subscription .form>div.email .selectBox>div button,
  #contents.reservation .form>div.email .selectBox>div button {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 1024px) {

  .popup form>div.email .selectBox>div>button:first-child,
  #contents.salesList .form>div.email .selectBox>div>button:first-child,
  #details .form>div.email .selectBox>div>button:first-child,
  #contents.notice .form>div.email .selectBox>div>button:first-child,
  #contents.contact .form>div.email .selectBox>div>button:first-child,
  #contents.inquiry .form>div.email .selectBox>div>button:first-child,
  #contents.issue .form>div.email .selectBox>div>button:first-child,
  #contents.subscription .form>div.email .selectBox>div>button:first-child,
  #contents.reservation .form>div.email .selectBox>div>button:first-child {
    margin-top: 5px;
  }

  .popup form>div.email .selectBox>div>button:last-child,
  #contents.salesList .form>div.email .selectBox>div>button:last-child,
  #details .form>div.email .selectBox>div>button:last-child,
  #contents.notice .form>div.email .selectBox>div>button:last-child,
  #contents.contact .form>div.email .selectBox>div>button:last-child,
  #contents.inquiry .form>div.email .selectBox>div>button:last-child,
  #contents.issue .form>div.email .selectBox>div>button:last-child,
  #contents.subscription .form>div.email .selectBox>div>button:last-child,
  #contents.reservation .form>div.email .selectBox>div>button:last-child {
    margin-bottom: 5px;
  }

  .popup form>div.email .selectBox>button,
  #contents.salesList .form>div.email .selectBox>button,
  #details .form>div.email .selectBox>button,
  #contents.notice .form>div.email .selectBox>button,
  #contents.contact .form>div.email .selectBox>button,
  #contents.inquiry .form>div.email .selectBox>button,
  #contents.issue .form>div.email .selectBox>button,
  #contents.subscription .form>div.email .selectBox>button,
  #contents.reservation .form>div.email .selectBox>button {
    height: 40px;
  }

  .popup form>div.email .selectBox>button::after,
  #contents.salesList .form>div.email .selectBox>button::after,
  #details .form>div.email .selectBox>button::after,
  #contents.notice .form>div.email .selectBox>button::after,
  #contents.contact .form>div.email .selectBox>button::after,
  #contents.inquiry .form>div.email .selectBox>button::after,
  #contents.issue .form>div.email .selectBox>button::after,
  #contents.subscription .form>div.email .selectBox>button::after,
  #contents.reservation .form>div.email .selectBox>button::after {
    top: 10px;
  }

  .popup form>div.email .selectBox>button,
  #contents.salesList .form>div.email .selectBox>button,
  #details .form>div.email .selectBox>button,
  #contents.notice .form>div.email .selectBox>button,
  #contents.contact .form>div.email .selectBox>button,
  #contents.inquiry .form>div.email .selectBox>button,
  #contents.issue .form>div.email .selectBox>button,
  #contents.subscription .form>div.email .selectBox>button,
  #contents.reservation .form>div.email .selectBox>button,
  .popup form>div.email .selectBox>div button,
  #contents.salesList .form>div.email .selectBox>div button,
  #details .form>div.email .selectBox>div button,
  #contents.notice .form>div.email .selectBox>div button,
  #contents.contact .form>div.email .selectBox>div button,
  #contents.inquiry .form>div.email .selectBox>div button,
  #contents.issue .form>div.email .selectBox>div button,
  #contents.subscription .form>div.email .selectBox>div button,
  #contents.reservation .form>div.email .selectBox>div button {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (min-width: 1025px) {

  .popup form>div.email .selectBox,
  #contents.salesList .form>div.email .selectBox,
  #details .form>div.email .selectBox,
  #contents.notice .form>div.email .selectBox,
  #contents.contact .form>div.email .selectBox,
  #contents.inquiry .form>div.email .selectBox,
  #contents.issue .form>div.email .selectBox,
  #contents.subscription .form>div.email .selectBox,
  #contents.reservation .form>div.email .selectBox {
    margin-left: 10px;
    width: calc(25% - 15px);
  }
}

@media (max-width: 1024px) {

  .popup form>div.email .selectBox,
  #contents.salesList .form>div.email .selectBox,
  #details .form>div.email .selectBox,
  #contents.notice .form>div.email .selectBox,
  #contents.contact .form>div.email .selectBox,
  #contents.inquiry .form>div.email .selectBox,
  #contents.issue .form>div.email .selectBox,
  #contents.subscription .form>div.email .selectBox,
  #contents.reservation .form>div.email .selectBox {
    margin-left: 6px;
    width: calc(25% - 8px);
  }
}

@media (max-width: 640px) {

  .popup form>div.email .selectBox,
  #contents.salesList .form>div.email .selectBox,
  #details .form>div.email .selectBox,
  #contents.notice .form>div.email .selectBox,
  #contents.contact .form>div.email .selectBox,
  #contents.inquiry .form>div.email .selectBox,
  #contents.issue .form>div.email .selectBox,
  #contents.subscription .form>div.email .selectBox,
  #contents.reservation .form>div.email .selectBox {
    margin-left: 10px;
    margin-top: 10px;
    width: calc(50% - 5px);
  }
}

@media (max-width: 480px) {

  .popup form>div.email .selectBox,
  #contents.salesList .form>div.email .selectBox,
  #details .form>div.email .selectBox,
  #contents.notice .form>div.email .selectBox,
  #contents.contact .form>div.email .selectBox,
  #contents.inquiry .form>div.email .selectBox,
  #contents.issue .form>div.email .selectBox,
  #contents.subscription .form>div.email .selectBox,
  #contents.reservation .form>div.email .selectBox {
    margin-left: 0;
    width: 100%;
  }
}

.popup form>div.email span:not(.label),
#contents.salesList .form>div.email span:not(.label),
#details .form>div.email span:not(.label),
#contents.notice .form>div.email span:not(.label),
#contents.contact .form>div.email span:not(.label),
#contents.inquiry .form>div.email span:not(.label),
#contents.issue .form>div.email span:not(.label),
#contents.subscription .form>div.email span:not(.label),
#contents.reservation .form>div.email span:not(.label) {
  text-align: center;
}

@media (min-width: 1025px) {

  .popup form>div.email span:not(.label),
  #contents.salesList .form>div.email span:not(.label),
  #details .form>div.email span:not(.label),
  #contents.notice .form>div.email span:not(.label),
  #contents.contact .form>div.email span:not(.label),
  #contents.inquiry .form>div.email span:not(.label),
  #contents.issue .form>div.email span:not(.label),
  #contents.subscription .form>div.email span:not(.label),
  #contents.reservation .form>div.email span:not(.label) {
    width: 40px;
    font-size: 14px;
  }
}

@media (max-width: 1024px) {

  .popup form>div.email span:not(.label),
  #contents.salesList .form>div.email span:not(.label),
  #details .form>div.email span:not(.label),
  #contents.notice .form>div.email span:not(.label),
  #contents.contact .form>div.email span:not(.label),
  #contents.inquiry .form>div.email span:not(.label),
  #contents.issue .form>div.email span:not(.label),
  #contents.subscription .form>div.email span:not(.label),
  #contents.reservation .form>div.email span:not(.label) {
    width: 20px;
    font-size: 12px;
  }
}

@media (max-width: 640px) {

  .popup form>div.email span:not(.label),
  #contents.salesList .form>div.email span:not(.label),
  #details .form>div.email span:not(.label),
  #contents.notice .form>div.email span:not(.label),
  #contents.contact .form>div.email span:not(.label),
  #contents.inquiry .form>div.email span:not(.label),
  #contents.issue .form>div.email span:not(.label),
  #contents.subscription .form>div.email span:not(.label),
  #contents.reservation .form>div.email span:not(.label) {
    width: 15px;
    text-align: right;
  }
}

.popup form>div .label,
#contents.salesList .form>div .label,
#details .form>div .label,
#contents.notice .form>div .label,
#contents.contact .form>div .label,
#contents.inquiry .form>div .label,
#contents.issue .form>div .label,
#contents.subscription .form>div .label,
#contents.reservation .form>div .label {
  display: block;
  margin-bottom: 10px;
}

.popup form>div .label.wideOnly,
#contents.salesList .form>div .label.wideOnly,
#details .form>div .label.wideOnly,
#contents.notice .form>div .label.wideOnly,
#contents.contact .form>div .label.wideOnly,
#contents.inquiry .form>div .label.wideOnly,
#contents.issue .form>div .label.wideOnly,
#contents.subscription .form>div .label.wideOnly,
#contents.reservation .form>div .label.wideOnly {
  display: none;
}

.popup form>div .label+.desc,
#contents.salesList .form>div .label+.desc,
#details .form>div .label+.desc,
#contents.notice .form>div .label+.desc,
#contents.contact .form>div .label+.desc,
#contents.inquiry .form>div .label+.desc,
#contents.issue .form>div .label+.desc,
#contents.subscription .form>div .label+.desc,
#contents.reservation .form>div .label+.desc {
  margin: -5px 0 20px 0;
}

.popup form .selectBox,
#contents.salesList .form .selectBox,
#details .form .selectBox,
#contents.notice .form .selectBox,
#contents.contact .form .selectBox,
#contents.inquiry .form .selectBox,
#contents.issue .form .selectBox,
#contents.subscription .form .selectBox,
#contents.reservation .form .selectBox {
  position: relative;
  margin-top: 0;
  width: 100%;
  height: 50px;
}

.popup form .selectBox>button,
#contents.salesList .form .selectBox>button,
#details .form .selectBox>button,
#contents.notice .form .selectBox>button,
#contents.contact .form .selectBox>button,
#contents.inquiry .form .selectBox>button,
#contents.issue .form .selectBox>button,
#contents.subscription .form .selectBox>button,
#contents.reservation .form .selectBox>button {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #707070;
  text-align: left;
  color: #666;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 30px !important;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
}

.popup form .selectBox>button::after,
#contents.salesList .form .selectBox>button::after,
#details .form .selectBox>button::after,
#contents.notice .form .selectBox>button::after,
#contents.contact .form .selectBox>button::after,
#contents.inquiry .form .selectBox>button::after,
#contents.issue .form .selectBox>button::after,
#contents.subscription .form .selectBox>button::after,
#contents.reservation .form .selectBox>button::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-45deg);
  right: 20px;
}

.popup form .selectBox>button.placeholder,
#contents.salesList .form .selectBox>button.placeholder,
#details .form .selectBox>button.placeholder,
#contents.notice .form .selectBox>button.placeholder,
#contents.contact .form .selectBox>button.placeholder,
#contents.inquiry .form .selectBox>button.placeholder,
#contents.issue .form .selectBox>button.placeholder,
#contents.subscription .form .selectBox>button.placeholder,
#contents.reservation .form .selectBox>button.placeholder {
  color: #a5a5a5;
}

.popup form .selectBox>button.active,
#contents.salesList .form .selectBox>button.active,
#details .form .selectBox>button.active,
#contents.notice .form .selectBox>button.active,
#contents.contact .form .selectBox>button.active,
#contents.inquiry .form .selectBox>button.active,
#contents.issue .form .selectBox>button.active,
#contents.subscription .form .selectBox>button.active,
#contents.reservation .form .selectBox>button.active {
  color: #46296E;
  border-color: #46296E;
}

.popup form .selectBox>button.active::after,
#contents.salesList .form .selectBox>button.active::after,
#details .form .selectBox>button.active::after,
#contents.notice .form .selectBox>button.active::after,
#contents.contact .form .selectBox>button.active::after,
#contents.inquiry .form .selectBox>button.active::after,
#contents.issue .form .selectBox>button.active::after,
#contents.subscription .form .selectBox>button.active::after,
#contents.reservation .form .selectBox>button.active::after {
  border-color: #46296E;
}

.popup form .selectBox>div,
#contents.salesList .form .selectBox>div,
#details .form .selectBox>div,
#contents.notice .form .selectBox>div,
#contents.contact .form .selectBox>div,
#contents.inquiry .form .selectBox>div,
#contents.issue .form .selectBox>div,
#contents.subscription .form .selectBox>div,
#contents.reservation .form .selectBox>div {
  z-index: 3;
  position: absolute;
  display: none;
  width: 100%;
  overflow: auto;
  background: #fff;
  -ms-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
}

.popup form .selectBox>div::before,
#contents.salesList .form .selectBox>div::before,
#details .form .selectBox>div::before,
#contents.notice .form .selectBox>div::before,
#contents.contact .form .selectBox>div::before,
#contents.inquiry .form .selectBox>div::before,
#contents.issue .form .selectBox>div::before,
#contents.subscription .form .selectBox>div::before,
#contents.reservation .form .selectBox>div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: #46296E;
  display: none;
}

.popup form .selectBox>div button,
#contents.salesList .form .selectBox>div button,
#details .form .selectBox>div button,
#contents.notice .form .selectBox>div button,
#contents.contact .form .selectBox>div button,
#contents.inquiry .form .selectBox>div button,
#contents.issue .form .selectBox>div button,
#contents.subscription .form .selectBox>div button,
#contents.reservation .form .selectBox>div button {
  width: 100%;
  line-height: 2.5 !important;
  text-align: left;
}

.popup form .selectBox>div button.selected,
#contents.salesList .form .selectBox>div button.selected,
#details .form .selectBox>div button.selected,
#contents.notice .form .selectBox>div button.selected,
#contents.contact .form .selectBox>div button.selected,
#contents.inquiry .form .selectBox>div button.selected,
#contents.issue .form .selectBox>div button.selected,
#contents.subscription .form .selectBox>div button.selected,
#contents.reservation .form .selectBox>div button.selected {
  color: #46296E;
}

@media (min-width: 1025px) {

  .popup form .selectBox>div>button:first-child,
  #contents.salesList .form .selectBox>div>button:first-child,
  #details .form .selectBox>div>button:first-child,
  #contents.notice .form .selectBox>div>button:first-child,
  #contents.contact .form .selectBox>div>button:first-child,
  #contents.inquiry .form .selectBox>div>button:first-child,
  #contents.issue .form .selectBox>div>button:first-child,
  #contents.subscription .form .selectBox>div>button:first-child,
  #contents.reservation .form .selectBox>div>button:first-child {
    margin-top: 10px;
  }

  .popup form .selectBox>div>button:last-child,
  #contents.salesList .form .selectBox>div>button:last-child,
  #details .form .selectBox>div>button:last-child,
  #contents.notice .form .selectBox>div>button:last-child,
  #contents.contact .form .selectBox>div>button:last-child,
  #contents.inquiry .form .selectBox>div>button:last-child,
  #contents.issue .form .selectBox>div>button:last-child,
  #contents.subscription .form .selectBox>div>button:last-child,
  #contents.reservation .form .selectBox>div>button:last-child {
    margin-bottom: 10px;
  }

  .popup form .selectBox>button,
  #contents.salesList .form .selectBox>button,
  #details .form .selectBox>button,
  #contents.notice .form .selectBox>button,
  #contents.contact .form .selectBox>button,
  #contents.inquiry .form .selectBox>button,
  #contents.issue .form .selectBox>button,
  #contents.subscription .form .selectBox>button,
  #contents.reservation .form .selectBox>button {
    height: 54px;
  }

  .popup form .selectBox>button::after,
  #contents.salesList .form .selectBox>button::after,
  #details .form .selectBox>button::after,
  #contents.notice .form .selectBox>button::after,
  #contents.contact .form .selectBox>button::after,
  #contents.inquiry .form .selectBox>button::after,
  #contents.issue .form .selectBox>button::after,
  #contents.subscription .form .selectBox>button::after,
  #contents.reservation .form .selectBox>button::after {
    top: 20px;
  }

  .popup form .selectBox>button,
  #contents.salesList .form .selectBox>button,
  #details .form .selectBox>button,
  #contents.notice .form .selectBox>button,
  #contents.contact .form .selectBox>button,
  #contents.inquiry .form .selectBox>button,
  #contents.issue .form .selectBox>button,
  #contents.subscription .form .selectBox>button,
  #contents.reservation .form .selectBox>button,
  .popup form .selectBox>div button,
  #contents.salesList .form .selectBox>div button,
  #details .form .selectBox>div button,
  #contents.notice .form .selectBox>div button,
  #contents.contact .form .selectBox>div button,
  #contents.inquiry .form .selectBox>div button,
  #contents.issue .form .selectBox>div button,
  #contents.subscription .form .selectBox>div button,
  #contents.reservation .form .selectBox>div button {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 1024px) {

  .popup form .selectBox>div>button:first-child,
  #contents.salesList .form .selectBox>div>button:first-child,
  #details .form .selectBox>div>button:first-child,
  #contents.notice .form .selectBox>div>button:first-child,
  #contents.contact .form .selectBox>div>button:first-child,
  #contents.inquiry .form .selectBox>div>button:first-child,
  #contents.issue .form .selectBox>div>button:first-child,
  #contents.subscription .form .selectBox>div>button:first-child,
  #contents.reservation .form .selectBox>div>button:first-child {
    margin-top: 5px;
  }

  .popup form .selectBox>div>button:last-child,
  #contents.salesList .form .selectBox>div>button:last-child,
  #details .form .selectBox>div>button:last-child,
  #contents.notice .form .selectBox>div>button:last-child,
  #contents.contact .form .selectBox>div>button:last-child,
  #contents.inquiry .form .selectBox>div>button:last-child,
  #contents.issue .form .selectBox>div>button:last-child,
  #contents.subscription .form .selectBox>div>button:last-child,
  #contents.reservation .form .selectBox>div>button:last-child {
    margin-bottom: 5px;
  }

  .popup form .selectBox>button,
  #contents.salesList .form .selectBox>button,
  #details .form .selectBox>button,
  #contents.notice .form .selectBox>button,
  #contents.contact .form .selectBox>button,
  #contents.inquiry .form .selectBox>button,
  #contents.issue .form .selectBox>button,
  #contents.subscription .form .selectBox>button,
  #contents.reservation .form .selectBox>button {
    height: 40px;
  }

  .popup form .selectBox>button::after,
  #contents.salesList .form .selectBox>button::after,
  #details .form .selectBox>button::after,
  #contents.notice .form .selectBox>button::after,
  #contents.contact .form .selectBox>button::after,
  #contents.inquiry .form .selectBox>button::after,
  #contents.issue .form .selectBox>button::after,
  #contents.subscription .form .selectBox>button::after,
  #contents.reservation .form .selectBox>button::after {
    top: 10px;
  }

  .popup form .selectBox>button,
  #contents.salesList .form .selectBox>button,
  #details .form .selectBox>button,
  #contents.notice .form .selectBox>button,
  #contents.contact .form .selectBox>button,
  #contents.inquiry .form .selectBox>button,
  #contents.issue .form .selectBox>button,
  #contents.subscription .form .selectBox>button,
  #contents.reservation .form .selectBox>button,
  .popup form .selectBox>div button,
  #contents.salesList .form .selectBox>div button,
  #details .form .selectBox>div button,
  #contents.notice .form .selectBox>div button,
  #contents.contact .form .selectBox>div button,
  #contents.inquiry .form .selectBox>div button,
  #contents.issue .form .selectBox>div button,
  #contents.subscription .form .selectBox>div button,
  #contents.reservation .form .selectBox>div button {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.popup form .download,
#contents.salesList .form .download,
#details .form .download,
#contents.notice .form .download,
#contents.contact .form .download,
#contents.inquiry .form .download,
#contents.issue .form .download,
#contents.subscription .form .download,
#contents.reservation .form .download {
  margin-bottom: 20px;
}

.popup form .download button,
#contents.salesList .form .download button,
#details .form .download button,
#contents.notice .form .download button,
#contents.contact .form .download button,
#contents.inquiry .form .download button,
#contents.issue .form .download button,
#contents.subscription .form .download button,
#contents.reservation .form .download button {
  position: relative;
  overflow: hidden;
  padding-left: 30px;
  width: 225px;
  height: 50px;
  line-height: 50px;
  background: #37234D;
  color: #fff;
  border-radius: 3px;
  text-align: left;
  box-sizing: border-box;
}

.popup form .download button:before,
#contents.salesList .form .download button:before,
#details .form .download button:before,
#contents.notice .form .download button:before,
#contents.contact .form .download button:before,
#contents.inquiry .form .download button:before,
#contents.issue .form .download button:before,
#contents.subscription .form .download button:before,
#contents.reservation .form .download button:before {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  width: 50px;
  height: 50px;
  background: #4b395f;
}

.popup form .download button:after,
#contents.salesList .form .download button:after,
#details .form .download button:after,
#contents.notice .form .download button:after,
#contents.contact .form .download button:after,
#contents.inquiry .form .download button:after,
#contents.issue .form .download button:after,
#contents.subscription .form .download button:after,
#contents.reservation .form .download button:after {
  position: absolute;
  top: 15px;
  right: 15px;
  display: block;
  content: "";
  width: 17px;
  height: 16px;
  z-index: 10;
  background: url(../images/icon/iconDownload5.svg) no-repeat center center/cover;
  -moz-filter: grayscale(100) brightness(100);
  -ms-filter: grayscale(100) brightness(100);
  -o-filter: grayscale(100) brightness(100);
  filter: grayscale(100) brightness(100);
}

.popup form .file>div,
#contents.salesList .form .file>div,
#details .form .file>div,
#contents.notice .form .file>div,
#contents.contact .form .file>div,
#contents.inquiry .form .file>div,
#contents.issue .form .file>div,
#contents.subscription .form .file>div,
#contents.reservation .form .file>div {
  background: #fff !important;
  height: 50px;
  line-height: 48px;
}

.popup form .file>div p,
#contents.salesList .form .file>div p,
#details .form .file>div p,
#contents.notice .form .file>div p,
#contents.contact .form .file>div p,
#contents.inquiry .form .file>div p,
#contents.issue .form .file>div p,
#contents.subscription .form .file>div p,
#contents.reservation .form .file>div p {
  height: 100%;
}

.popup form .file>div p button,
#contents.salesList .form .file>div p button,
#details .form .file>div p button,
#contents.notice .form .file>div p button,
#contents.contact .form .file>div p button,
#contents.inquiry .form .file>div p button,
#contents.issue .form .file>div p button,
#contents.subscription .form .file>div p button,
#contents.reservation .form .file>div p button {
  right: 120px;
  margin: auto 0;
  border-radius: 100%;
  background: #E1E1E1;
  border: 0;
}

.popup form .file>div p span,
#contents.salesList .form .file>div p span,
#details .form .file>div p span,
#contents.notice .form .file>div p span,
#contents.contact .form .file>div p span,
#contents.inquiry .form .file>div p span,
#contents.issue .form .file>div p span,
#contents.subscription .form .file>div p span,
#contents.reservation .form .file>div p span {
  line-height: 1 !important;
}

.popup form .file>div label,
#contents.salesList .form .file>div label,
#details .form .file>div label,
#contents.notice .form .file>div label,
#contents.contact .form .file>div label,
#contents.inquiry .form .file>div label,
#contents.issue .form .file>div label,
#contents.subscription .form .file>div label,
#contents.reservation .form .file>div label {
  top: -1px;
  right: -1px;
  background: #37234D;
  color: #fff;
  border: 1px solid #37234D;
  border-radius: 0 4px 4px 0;
}

.popup form .file>p,
#contents.salesList .form .file>p,
#details .form .file>p,
#contents.notice .form .file>p,
#contents.contact .form .file>p,
#contents.inquiry .form .file>p,
#contents.issue .form .file>p,
#contents.subscription .form .file>p,
#contents.reservation .form .file>p {
  margin-top: 10px;
}

.popup form .file>p::before,
#contents.salesList .form .file>p::before,
#details .form .file>p::before,
#contents.notice .form .file>p::before,
#contents.contact .form .file>p::before,
#contents.inquiry .form .file>p::before,
#contents.issue .form .file>p::before,
#contents.subscription .form .file>p::before,
#contents.reservation .form .file>p::before {
  content: "※";
  padding-right: 4px;
  font-size: 14px;
  font-weight: 300;
}

#contents.information .radio,
#contents.salesList .form .radio,
#details .form .radio,
#contents.notice .form .radio,
#contents.contact .form .radio,
#contents.inquiry .form .radio,
#contents.issue .form .radio,
#contents.subscription .form .radio,
#contents.reservation .form .radio {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

@media (max-width: 640px) {

  #contents.information .radio,
  #contents.salesList .form .radio,
  #details .form .radio,
  #contents.notice .form .radio,
  #contents.contact .form .radio,
  #contents.inquiry .form .radio,
  #contents.issue .form .radio,
  #contents.subscription .form .radio,
  #contents.reservation .form .radio {
    flex-wrap: wrap;
  }
}

#contents.information .radio input:checked+span,
#contents.salesList .form .radio input:checked+span,
#details .form .radio input:checked+span,
#contents.notice .form .radio input:checked+span,
#contents.contact .form .radio input:checked+span,
#contents.inquiry .form .radio input:checked+span,
#contents.issue .form .radio input:checked+span,
#contents.subscription .form .radio input:checked+span,
#contents.reservation .form .radio input:checked+span {
  background: #37234D;
  color: #fff !important;
}

#contents.information .radio input:checked+span::before,
#contents.salesList .form .radio input:checked+span::before,
#details .form .radio input:checked+span::before,
#contents.notice .form .radio input:checked+span::before,
#contents.contact .form .radio input:checked+span::before,
#contents.inquiry .form .radio input:checked+span::before,
#contents.issue .form .radio input:checked+span::before,
#contents.subscription .form .radio input:checked+span::before,
#contents.reservation .form .radio input:checked+span::before {
  background: #37234D;
}

#contents.information .radio input:checked+span:after,
#contents.salesList .form .radio input:checked+span:after,
#details .form .radio input:checked+span:after,
#contents.notice .form .radio input:checked+span:after,
#contents.contact .form .radio input:checked+span:after,
#contents.inquiry .form .radio input:checked+span:after,
#contents.issue .form .radio input:checked+span:after,
#contents.subscription .form .radio input:checked+span:after,
#contents.reservation .form .radio input:checked+span:after {
  background: #fff;
}

#contents.information .radio label,
#contents.salesList .form .radio label,
#details .form .radio label,
#contents.notice .form .radio label,
#contents.contact .form .radio label,
#contents.inquiry .form .radio label,
#contents.issue .form .radio label,
#contents.subscription .form .radio label,
#contents.reservation .form .radio label {
  display: block;
  min-width: calc(50% - 10px);
  height: 100%;
}

#contents.information .radio label.hide,
#contents.salesList .form .radio label.hide,
#details .form .radio label.hide,
#contents.notice .form .radio label.hide,
#contents.contact .form .radio label.hide,
#contents.inquiry .form .radio label.hide,
#contents.issue .form .radio label.hide,
#contents.subscription .form .radio label.hide,
#contents.reservation .form .radio label.hide {
  font-size: 0;
}

@media (max-width: 640px) {

  #contents.information .radio label,
  #contents.salesList .form .radio label,
  #details .form .radio label,
  #contents.notice .form .radio label,
  #contents.contact .form .radio label,
  #contents.inquiry .form .radio label,
  #contents.issue .form .radio label,
  #contents.subscription .form .radio label,
  #contents.reservation .form .radio label {
    margin-top: 10px;
    min-width: 100%;
  }

  #contents.information .radio label+label,
  #contents.salesList .form .radio label+label,
  #details .form .radio label+label,
  #contents.notice .form .radio label+label,
  #contents.contact .form .radio label+label,
  #contents.inquiry .form .radio label+label,
  #contents.issue .form .radio label+label,
  #contents.subscription .form .radio label+label,
  #contents.reservation .form .radio label+label {
    margin-left: 0;
  }
}

#contents.information .radio label span,
#contents.salesList .form .radio label span,
#details .form .radio label span,
#contents.notice .form .radio label span,
#contents.contact .form .radio label span,
#contents.inquiry .form .radio label span,
#contents.issue .form .radio label span,
#contents.subscription .form .radio label span,
#contents.reservation .form .radio label span {
  position: relative;
  min-width: 100%;
  height: 58px;
  line-height: 56px;
  text-align: left;
  border: 1px solid #E1E1E1 !important;
}

#contents.information .radio label span::before,
#contents.salesList .form .radio label span::before,
#details .form .radio label span::before,
#contents.notice .form .radio label span::before,
#contents.contact .form .radio label span::before,
#contents.inquiry .form .radio label span::before,
#contents.issue .form .radio label span::before,
#contents.subscription .form .radio label span::before,
#contents.reservation .form .radio label span::before {
  display: block;
  content: "";
  position: absolute;
  top: 23px;
  right: 29px;
  width: 8px;
  height: 8px;
  background: #fff;
  z-index: 2;
  border-radius: 50%;
}

#contents.information .radio label span::after,
#contents.salesList .form .radio label span::after,
#details .form .radio label span::after,
#contents.notice .form .radio label span::after,
#contents.contact .form .radio label span::after,
#contents.inquiry .form .radio label span::after,
#contents.issue .form .radio label span::after,
#contents.subscription .form .radio label span::after,
#contents.reservation .form .radio label span::after {
  display: block;
  content: "";
  position: absolute;
  top: 18px;
  right: 24px;
  width: 18px;
  height: 18px;
  background: #e1e1e1;
  border-radius: 50%;
}

@media (max-width: 1024px) {

  #contents.information .radio label span,
  #contents.salesList .form .radio label span,
  #details .form .radio label span,
  #contents.notice .form .radio label span,
  #contents.contact .form .radio label span,
  #contents.inquiry .form .radio label span,
  #contents.issue .form .radio label span,
  #contents.subscription .form .radio label span,
  #contents.reservation .form .radio label span {
    min-width: 100%;
    height: 55px;
    line-height: 53px;
  }
}

.popup .gwell .caseInfo dd table,
#contents.notice table,
#contents.contact .tblWrap table,
#contents.inquiry .tblWrap table,
#contents.issue .tblWrap table,
#contents.subscription .tblWrap table,
#contents.reservation .tblWrap table {
  width: 100%;
  word-break: keep-all;
  border-spacing: 0;
  border-collapse: collapse;
  border-bottom: 1px solid #E1E1E1;
}

.popup .gwell .caseInfo dd table.inTbl,
#contents.notice table.inTbl,
#contents.contact .tblWrap table.inTbl,
#contents.inquiry .tblWrap table.inTbl,
#contents.issue .tblWrap table.inTbl,
#contents.subscription .tblWrap table.inTbl,
#contents.reservation .tblWrap table.inTbl {
  border-top: 1px solid #E1E1E1;
}

.popup .gwell .caseInfo dd table.inTbl tbody th,
#contents.notice table.inTbl tbody th,
#contents.contact .tblWrap table.inTbl tbody th,
#contents.inquiry .tblWrap table.inTbl tbody th,
#contents.issue .tblWrap table.inTbl tbody th,
#contents.subscription .tblWrap table.inTbl tbody th,
#contents.reservation .tblWrap table.inTbl tbody th {
  vertical-align: middle;
  font-weight: normal;
  border-top: 1px solid #E1E1E1;
}

.popup .gwell .caseInfo dd table.inTbl tbody td,
#contents.notice table.inTbl tbody td,
#contents.contact .tblWrap table.inTbl tbody td,
#contents.inquiry .tblWrap table.inTbl tbody td,
#contents.issue .tblWrap table.inTbl tbody td,
#contents.subscription .tblWrap table.inTbl tbody td,
#contents.reservation .tblWrap table.inTbl tbody td {
  border-left: 1px solid #E1E1E1;
  background: #fff !important;
}

.popup .gwell .caseInfo dd table caption,
#contents.notice table caption,
#contents.contact .tblWrap table caption,
#contents.inquiry .tblWrap table caption,
#contents.issue .tblWrap table caption,
#contents.subscription .tblWrap table caption,
#contents.reservation .tblWrap table caption {
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.popup .gwell .caseInfo dd table thead th,
#contents.notice table thead th,
#contents.contact .tblWrap table thead th,
#contents.inquiry .tblWrap table thead th,
#contents.issue .tblWrap table thead th,
#contents.subscription .tblWrap table thead th,
#contents.reservation .tblWrap table thead th {
  padding: 20px 0;
  min-height: 60px;
  background: #fff;
  font-weight: 500;
}

.popup .gwell .caseInfo dd table tbody td,
#contents.notice table tbody td,
#contents.contact .tblWrap table tbody td,
#contents.inquiry .tblWrap table tbody td,
#contents.issue .tblWrap table tbody td,
#contents.subscription .tblWrap table tbody td,
#contents.reservation .tblWrap table tbody td {
  padding: 20px;
  line-height: 28px;
  color: #666;
  text-align: center;
  background: #f9f9f9;
  vertical-align: middle;
  border-bottom: 1px solid #E1E1E1;
}

.popup .gwell .caseInfo dd table tbody td:first-child,
#contents.notice table tbody td:first-child,
#contents.contact .tblWrap table tbody td:first-child,
#contents.inquiry .tblWrap table tbody td:first-child,
#contents.issue .tblWrap table tbody td:first-child,
#contents.subscription .tblWrap table tbody td:first-child,
#contents.reservation .tblWrap table tbody td:first-child {
  text-align: left;
}

.popup .gwell .caseInfo dd table tbody td:nth-child(even),
#contents.notice table tbody td:nth-child(even),
#contents.contact .tblWrap table tbody td:nth-child(even),
#contents.inquiry .tblWrap table tbody td:nth-child(even),
#contents.issue .tblWrap table tbody td:nth-child(even),
#contents.subscription .tblWrap table tbody td:nth-child(even),
#contents.reservation .tblWrap table tbody td:nth-child(even) {
  background: #f4f4f4;
}

.popup .gwell .caseInfo dd table tbody td>.cancle,
#contents.notice table tbody td>.cancle,
#contents.contact .tblWrap table tbody td>.cancle,
#contents.inquiry .tblWrap table tbody td>.cancle,
#contents.issue .tblWrap table tbody td>.cancle,
#contents.subscription .tblWrap table tbody td>.cancle,
#contents.reservation .tblWrap table tbody td>.cancle {
  line-height: 20px;
}

.popup .gwell .caseInfo dd table tbody td>.cancle>span,
#contents.notice table tbody td>.cancle>span,
#contents.contact .tblWrap table tbody td>.cancle>span,
#contents.inquiry .tblWrap table tbody td>.cancle>span,
#contents.issue .tblWrap table tbody td>.cancle>span,
#contents.subscription .tblWrap table tbody td>.cancle>span,
#contents.reservation .tblWrap table tbody td>.cancle>span {
  display: block;
  font-size: 14px;
}

.popup .gwell .caseInfo dd table tbody td>button,
#contents.notice table tbody td>button,
#contents.contact .tblWrap table tbody td>button,
#contents.inquiry .tblWrap table tbody td>button,
#contents.issue .tblWrap table tbody td>button,
#contents.subscription .tblWrap table tbody td>button,
#contents.reservation .tblWrap table tbody td>button {
  position: relative;
  color: #212121;
  font-weight: 700;
}

.popup .gwell .caseInfo dd table tbody td>button::before,
#contents.notice table tbody td>button::before,
#contents.contact .tblWrap table tbody td>button::before,
#contents.inquiry .tblWrap table tbody td>button::before,
#contents.issue .tblWrap table tbody td>button::before,
#contents.subscription .tblWrap table tbody td>button::before,
#contents.reservation .tblWrap table tbody td>button::before {
  position: absolute;
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-width: 0 0 1px 1px;
  border-color: #fff;
  border-style: solid;
  transform: rotate(-135deg);
  top: 11px;
  right: 7px;
}

.popup .gwell .caseInfo dd table tbody td>button::after,
#contents.notice table tbody td>button::after,
#contents.contact .tblWrap table tbody td>button::after,
#contents.inquiry .tblWrap table tbody td>button::after,
#contents.issue .tblWrap table tbody td>button::after,
#contents.subscription .tblWrap table tbody td>button::after,
#contents.reservation .tblWrap table tbody td>button::after {
  display: inline-block;
  content: "";
  margin-left: 6px;
  vertical-align: -3px;
  width: 18px;
  height: 18px;
  background: #37234D;
  border-radius: 30px;
}

@media (max-width: 1024px) {

  .popup .gwell .caseInfo dd table.case2,
  #contents.notice table.case2,
  #contents.contact .tblWrap table.case2,
  #contents.inquiry .tblWrap table.case2,
  #contents.issue .tblWrap table.case2,
  #contents.subscription .tblWrap table.case2,
  #contents.reservation .tblWrap table.case2 {
    margin-top: 40px;
    margin-bottom: 0 !important;
    border-top: 0 !important;
  }
}

.popup .gwell .caseInfo dd table.case2 thead th,
#contents.notice table.case2 thead th,
#contents.contact .tblWrap table.case2 thead th,
#contents.inquiry .tblWrap table.case2 thead th,
#contents.issue .tblWrap table.case2 thead th,
#contents.subscription .tblWrap table.case2 thead th,
#contents.reservation .tblWrap table.case2 thead th {
  border-bottom: 1px solid #E1E1E1;
}

.popup .gwell .caseInfo dd table.case2 tbody th,
#contents.notice table.case2 tbody th,
#contents.contact .tblWrap table.case2 tbody th,
#contents.inquiry .tblWrap table.case2 tbody th,
#contents.issue .tblWrap table.case2 tbody th,
#contents.subscription .tblWrap table.case2 tbody th,
#contents.reservation .tblWrap table.case2 tbody th {
  font-weight: normal;
  vertical-align: middle;
  border-bottom: 1px solid #E1E1E1;
}

.popup .gwell .caseInfo dd table.case2 tbody td,
#contents.notice table.case2 tbody td,
#contents.contact .tblWrap table.case2 tbody td,
#contents.inquiry .tblWrap table.case2 tbody td,
#contents.issue .tblWrap table.case2 tbody td,
#contents.subscription .tblWrap table.case2 tbody td,
#contents.reservation .tblWrap table.case2 tbody td {
  text-align: left;
  border-left: 1px solid #E1E1E1;
}

.popup .gwell .caseInfo dd table.case2 tbody th,
#contents.notice table.case2 tbody th,
#contents.contact .tblWrap table.case2 tbody th,
#contents.inquiry .tblWrap table.case2 tbody th,
#contents.issue .tblWrap table.case2 tbody th,
#contents.subscription .tblWrap table.case2 tbody th,
#contents.reservation .tblWrap table.case2 tbody th,
.popup .gwell .caseInfo dd table.case2 tbody td,
#contents.notice table.case2 tbody td,
#contents.contact .tblWrap table.case2 tbody td,
#contents.inquiry .tblWrap table.case2 tbody td,
#contents.issue .tblWrap table.case2 tbody td,
#contents.subscription .tblWrap table.case2 tbody td,
#contents.reservation .tblWrap table.case2 tbody td {
  background: #f9f9f9 !important;
  color: #212121;
}

.popup .gwell .caseInfo dd table.case2 tbody td .mark,
#contents.notice table.case2 tbody td .mark,
#contents.contact .tblWrap table.case2 tbody td .mark,
#contents.inquiry .tblWrap table.case2 tbody td .mark,
#contents.issue .tblWrap table.case2 tbody td .mark,
#contents.subscription .tblWrap table.case2 tbody td .mark,
#contents.reservation .tblWrap table.case2 tbody td .mark {
  margin-left: 20px;
  text-indent: -20px;
}

.popup .gwell .caseInfo dd table.case2 tbody td.tb,
#contents.notice table.case2 tbody td.tb,
#contents.contact .tblWrap table.case2 tbody td.tb,
#contents.inquiry .tblWrap table.case2 tbody td.tb,
#contents.issue .tblWrap table.case2 tbody td.tb,
#contents.subscription .tblWrap table.case2 tbody td.tb,
#contents.reservation .tblWrap table.case2 tbody td.tb {
  vertical-align: top;
}

.popup .gwell .caseInfo dd table.case2 tbody td dl,
#contents.notice table.case2 tbody td dl,
#contents.contact .tblWrap table.case2 tbody td dl,
#contents.inquiry .tblWrap table.case2 tbody td dl,
#contents.issue .tblWrap table.case2 tbody td dl,
#contents.subscription .tblWrap table.case2 tbody td dl,
#contents.reservation .tblWrap table.case2 tbody td dl {
  margin: -20px -20px 0 -20px;
}

.popup .gwell .caseInfo dd table.case2 tbody td dl dt,
#contents.notice table.case2 tbody td dl dt,
#contents.contact .tblWrap table.case2 tbody td dl dt,
#contents.inquiry .tblWrap table.case2 tbody td dl dt,
#contents.issue .tblWrap table.case2 tbody td dl dt,
#contents.subscription .tblWrap table.case2 tbody td dl dt,
#contents.reservation .tblWrap table.case2 tbody td dl dt {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #fff;
}

.popup .gwell .caseInfo dd table.case2 tbody td dl dd,
#contents.notice table.case2 tbody td dl dd,
#contents.contact .tblWrap table.case2 tbody td dl dd,
#contents.inquiry .tblWrap table.case2 tbody td dl dd,
#contents.issue .tblWrap table.case2 tbody td dl dd,
#contents.subscription .tblWrap table.case2 tbody td dl dd,
#contents.reservation .tblWrap table.case2 tbody td dl dd {
  padding: 20px 20px 0 20px;
}

@media (max-width: 1024px) {

  .popup .gwell .caseInfo dd table.case2 tbody tr:first-child th,
  #contents.notice table.case2 tbody tr:first-child th,
  #contents.contact .tblWrap table.case2 tbody tr:first-child th,
  #contents.inquiry .tblWrap table.case2 tbody tr:first-child th,
  #contents.issue .tblWrap table.case2 tbody tr:first-child th,
  #contents.subscription .tblWrap table.case2 tbody tr:first-child th,
  #contents.reservation .tblWrap table.case2 tbody tr:first-child th,
  .popup .gwell .caseInfo dd table.case2 tbody tr:first-child td,
  #contents.notice table.case2 tbody tr:first-child td,
  #contents.contact .tblWrap table.case2 tbody tr:first-child td,
  #contents.inquiry .tblWrap table.case2 tbody tr:first-child td,
  #contents.issue .tblWrap table.case2 tbody tr:first-child td,
  #contents.subscription .tblWrap table.case2 tbody tr:first-child td,
  #contents.reservation .tblWrap table.case2 tbody tr:first-child td {
    border-top: 1px solid #E1E1E1;
  }

  .popup .gwell .caseInfo dd table.case2 tbody th,
  #contents.notice table.case2 tbody th,
  #contents.contact .tblWrap table.case2 tbody th,
  #contents.inquiry .tblWrap table.case2 tbody th,
  #contents.issue .tblWrap table.case2 tbody th,
  #contents.subscription .tblWrap table.case2 tbody th,
  #contents.reservation .tblWrap table.case2 tbody th {
    background: #fff !important;
    border-bottom: 0;
  }

  .popup .gwell .caseInfo dd table.case2 tbody td,
  #contents.notice table.case2 tbody td,
  #contents.contact .tblWrap table.case2 tbody td,
  #contents.inquiry .tblWrap table.case2 tbody td,
  #contents.issue .tblWrap table.case2 tbody td,
  #contents.subscription .tblWrap table.case2 tbody td,
  #contents.reservation .tblWrap table.case2 tbody td {
    border-bottom: 1px solid #E1E1E1;
  }

  .popup .gwell .caseInfo dd table.case2 tbody td dl,
  #contents.notice table.case2 tbody td dl,
  #contents.contact .tblWrap table.case2 tbody td dl,
  #contents.inquiry .tblWrap table.case2 tbody td dl,
  #contents.issue .tblWrap table.case2 tbody td dl,
  #contents.subscription .tblWrap table.case2 tbody td dl,
  #contents.reservation .tblWrap table.case2 tbody td dl {
    margin: 0;
  }

  .popup .gwell .caseInfo dd table.case2 tbody td dl dt,
  #contents.notice table.case2 tbody td dl dt,
  #contents.contact .tblWrap table.case2 tbody td dl dt,
  #contents.inquiry .tblWrap table.case2 tbody td dl dt,
  #contents.issue .tblWrap table.case2 tbody td dl dt,
  #contents.subscription .tblWrap table.case2 tbody td dl dt,
  #contents.reservation .tblWrap table.case2 tbody td dl dt {
    height: 30px;
    line-height: 30px;
    background: none;
    text-align: left;
  }

  .popup .gwell .caseInfo dd table.case2 tbody td dl dd,
  #contents.notice table.case2 tbody td dl dd,
  #contents.contact .tblWrap table.case2 tbody td dl dd,
  #contents.inquiry .tblWrap table.case2 tbody td dl dd,
  #contents.issue .tblWrap table.case2 tbody td dl dd,
  #contents.subscription .tblWrap table.case2 tbody td dl dd,
  #contents.reservation .tblWrap table.case2 tbody td dl dd {
    padding: 0;
  }
}

@media (min-width: 1025px) {

  .popup .gwell .caseInfo dd table.case3 tr:hover td,
  #contents.notice table.case3 tr:hover td,
  #contents.contact .tblWrap table.case3 tr:hover td,
  #contents.inquiry .tblWrap table.case3 tr:hover td,
  #contents.issue .tblWrap table.case3 tr:hover td,
  #contents.subscription .tblWrap table.case3 tr:hover td,
  #contents.reservation .tblWrap table.case3 tr:hover td {
    font-weight: normal !important;
    color: #666 !important;
  }
}

.popup .gwell .caseInfo dd table.case3 th+th,
#contents.notice table.case3 th+th,
#contents.contact .tblWrap table.case3 th+th,
#contents.inquiry .tblWrap table.case3 th+th,
#contents.issue .tblWrap table.case3 th+th,
#contents.subscription .tblWrap table.case3 th+th,
#contents.reservation .tblWrap table.case3 th+th,
.popup .gwell .caseInfo dd table.case3 th+td,
#contents.notice table.case3 th+td,
#contents.contact .tblWrap table.case3 th+td,
#contents.inquiry .tblWrap table.case3 th+td,
#contents.issue .tblWrap table.case3 th+td,
#contents.subscription .tblWrap table.case3 th+td,
#contents.reservation .tblWrap table.case3 th+td,
.popup .gwell .caseInfo dd table.case3 td+th,
#contents.notice table.case3 td+th,
#contents.contact .tblWrap table.case3 td+th,
#contents.inquiry .tblWrap table.case3 td+th,
#contents.issue .tblWrap table.case3 td+th,
#contents.subscription .tblWrap table.case3 td+th,
#contents.reservation .tblWrap table.case3 td+th,
.popup .gwell .caseInfo dd table.case3 td+td,
#contents.notice table.case3 td+td,
#contents.contact .tblWrap table.case3 td+td,
#contents.inquiry .tblWrap table.case3 td+td,
#contents.issue .tblWrap table.case3 td+td,
#contents.subscription .tblWrap table.case3 td+td,
#contents.reservation .tblWrap table.case3 td+td {
  position: relative;
}

.popup .gwell .caseInfo dd table.case3 th+th::before,
#contents.notice table.case3 th+th::before,
#contents.contact .tblWrap table.case3 th+th::before,
#contents.inquiry .tblWrap table.case3 th+th::before,
#contents.issue .tblWrap table.case3 th+th::before,
#contents.subscription .tblWrap table.case3 th+th::before,
#contents.reservation .tblWrap table.case3 th+th::before,
.popup .gwell .caseInfo dd table.case3 th+td::before,
#contents.notice table.case3 th+td::before,
#contents.contact .tblWrap table.case3 th+td::before,
#contents.inquiry .tblWrap table.case3 th+td::before,
#contents.issue .tblWrap table.case3 th+td::before,
#contents.subscription .tblWrap table.case3 th+td::before,
#contents.reservation .tblWrap table.case3 th+td::before,
.popup .gwell .caseInfo dd table.case3 td+th::before,
#contents.notice table.case3 td+th::before,
#contents.contact .tblWrap table.case3 td+th::before,
#contents.inquiry .tblWrap table.case3 td+th::before,
#contents.issue .tblWrap table.case3 td+th::before,
#contents.subscription .tblWrap table.case3 td+th::before,
#contents.reservation .tblWrap table.case3 td+th::before,
.popup .gwell .caseInfo dd table.case3 td+td::before,
#contents.notice table.case3 td+td::before,
#contents.contact .tblWrap table.case3 td+td::before,
#contents.inquiry .tblWrap table.case3 td+td::before,
#contents.issue .tblWrap table.case3 td+td::before,
#contents.subscription .tblWrap table.case3 td+td::before,
#contents.reservation .tblWrap table.case3 td+td::before {
  position: absolute;
  top: calc(50% - 10px);
  left: 0;
  display: block;
  content: "";
  width: 1px;
  height: 20px;
  background: #E1E1E1;
}

.popup .gwell .caseInfo dd table.case3 td span,
#contents.notice table.case3 td span,
#contents.contact .tblWrap table.case3 td span,
#contents.inquiry .tblWrap table.case3 td span,
#contents.issue .tblWrap table.case3 td span,
#contents.subscription .tblWrap table.case3 td span,
#contents.reservation .tblWrap table.case3 td span {
  color: #666;
}

@media (max-width: 1024px) {

  .popup .gwell .caseInfo dd table.case3,
  #contents.notice table.case3,
  #contents.contact .tblWrap table.case3,
  #contents.inquiry .tblWrap table.case3,
  #contents.issue .tblWrap table.case3,
  #contents.subscription .tblWrap table.case3,
  #contents.reservation .tblWrap table.case3 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    border-top: 1px solid #E1E1E1;
  }

  .popup .gwell .caseInfo dd table.case3 thead,
  #contents.notice table.case3 thead,
  #contents.contact .tblWrap table.case3 thead,
  #contents.inquiry .tblWrap table.case3 thead,
  #contents.issue .tblWrap table.case3 thead,
  #contents.subscription .tblWrap table.case3 thead,
  #contents.reservation .tblWrap table.case3 thead {
    max-width: 125px;
    padding-left: 15px;
    background: #fff;
  }

  .popup .gwell .caseInfo dd table.case3 thead tr,
  #contents.notice table.case3 thead tr,
  #contents.contact .tblWrap table.case3 thead tr,
  #contents.inquiry .tblWrap table.case3 thead tr,
  #contents.issue .tblWrap table.case3 thead tr,
  #contents.subscription .tblWrap table.case3 thead tr,
  #contents.reservation .tblWrap table.case3 thead tr {
    display: table;
  }

  .popup .gwell .caseInfo dd table.case3 thead th,
  #contents.notice table.case3 thead th,
  #contents.contact .tblWrap table.case3 thead th,
  #contents.inquiry .tblWrap table.case3 thead th,
  #contents.issue .tblWrap table.case3 thead th,
  #contents.subscription .tblWrap table.case3 thead th,
  #contents.reservation .tblWrap table.case3 thead th {
    display: table-row;
    max-width: 125px;
    height: 86px;
    line-height: 26px;
    font-size: 14px;
    text-align: left;
  }

  .popup .gwell .caseInfo dd table.case3 thead th div,
  #contents.notice table.case3 thead th div,
  #contents.contact .tblWrap table.case3 thead th div,
  #contents.inquiry .tblWrap table.case3 thead th div,
  #contents.issue .tblWrap table.case3 thead th div,
  #contents.subscription .tblWrap table.case3 thead th div,
  #contents.reservation .tblWrap table.case3 thead th div {
    display: table;
    height: 90px;
  }

  .popup .gwell .caseInfo dd table.case3 thead th div span,
  #contents.notice table.case3 thead th div span,
  #contents.contact .tblWrap table.case3 thead th div span,
  #contents.inquiry .tblWrap table.case3 thead th div span,
  #contents.issue .tblWrap table.case3 thead th div span,
  #contents.subscription .tblWrap table.case3 thead th div span,
  #contents.reservation .tblWrap table.case3 thead th div span {
    display: table-cell;
    vertical-align: middle;
  }

  .popup .gwell .caseInfo dd table.case3 tbody,
  #contents.notice table.case3 tbody,
  #contents.contact .tblWrap table.case3 tbody,
  #contents.inquiry .tblWrap table.case3 tbody,
  #contents.issue .tblWrap table.case3 tbody,
  #contents.subscription .tblWrap table.case3 tbody,
  #contents.reservation .tblWrap table.case3 tbody {
    padding-left: 15px;
    width: 100%;
  }

  .popup .gwell .caseInfo dd table.case3 tbody tr,
  #contents.notice table.case3 tbody tr,
  #contents.contact .tblWrap table.case3 tbody tr,
  #contents.inquiry .tblWrap table.case3 tbody tr,
  #contents.issue .tblWrap table.case3 tbody tr,
  #contents.subscription .tblWrap table.case3 tbody tr,
  #contents.reservation .tblWrap table.case3 tbody tr {
    display: table;
    width: 100%;
  }

  .popup .gwell .caseInfo dd table.case3 tbody td,
  #contents.notice table.case3 tbody td,
  #contents.contact .tblWrap table.case3 tbody td,
  #contents.inquiry .tblWrap table.case3 tbody td,
  #contents.issue .tblWrap table.case3 tbody td,
  #contents.subscription .tblWrap table.case3 tbody td,
  #contents.reservation .tblWrap table.case3 tbody td {
    display: table-row;
    width: 100%;
    font-size: 14px;
  }

  .popup .gwell .caseInfo dd table.case3 tbody td div,
  #contents.notice table.case3 tbody td div,
  #contents.contact .tblWrap table.case3 tbody td div,
  #contents.inquiry .tblWrap table.case3 tbody td div,
  #contents.issue .tblWrap table.case3 tbody td div,
  #contents.subscription .tblWrap table.case3 tbody td div,
  #contents.reservation .tblWrap table.case3 tbody td div {
    display: table;
    width: 100%;
    height: 90px;
  }

  .popup .gwell .caseInfo dd table.case3 tbody td div span,
  #contents.notice table.case3 tbody td div span,
  #contents.contact .tblWrap table.case3 tbody td div span,
  #contents.inquiry .tblWrap table.case3 tbody td div span,
  #contents.issue .tblWrap table.case3 tbody td div span,
  #contents.subscription .tblWrap table.case3 tbody td div span,
  #contents.reservation .tblWrap table.case3 tbody td div span {
    display: table-cell;
    vertical-align: middle;
  }

  .popup .gwell .caseInfo dd table.case3 th,
  #contents.notice table.case3 th,
  #contents.contact .tblWrap table.case3 th,
  #contents.inquiry .tblWrap table.case3 th,
  #contents.issue .tblWrap table.case3 th,
  #contents.subscription .tblWrap table.case3 th,
  #contents.reservation .tblWrap table.case3 th,
  .popup .gwell .caseInfo dd table.case3 td,
  #contents.notice table.case3 td,
  #contents.contact .tblWrap table.case3 td,
  #contents.inquiry .tblWrap table.case3 td,
  #contents.issue .tblWrap table.case3 td,
  #contents.subscription .tblWrap table.case3 td,
  #contents.reservation .tblWrap table.case3 td {
    border-bottom: 0;
  }

  .popup .gwell .caseInfo dd table.case3 th+th,
  #contents.notice table.case3 th+th,
  #contents.contact .tblWrap table.case3 th+th,
  #contents.inquiry .tblWrap table.case3 th+th,
  #contents.issue .tblWrap table.case3 th+th,
  #contents.subscription .tblWrap table.case3 th+th,
  #contents.reservation .tblWrap table.case3 th+th,
  .popup .gwell .caseInfo dd table.case3 th+td,
  #contents.notice table.case3 th+td,
  #contents.contact .tblWrap table.case3 th+td,
  #contents.inquiry .tblWrap table.case3 th+td,
  #contents.issue .tblWrap table.case3 th+td,
  #contents.subscription .tblWrap table.case3 th+td,
  #contents.reservation .tblWrap table.case3 th+td,
  .popup .gwell .caseInfo dd table.case3 td+th,
  #contents.notice table.case3 td+th,
  #contents.contact .tblWrap table.case3 td+th,
  #contents.inquiry .tblWrap table.case3 td+th,
  #contents.issue .tblWrap table.case3 td+th,
  #contents.subscription .tblWrap table.case3 td+th,
  #contents.reservation .tblWrap table.case3 td+th,
  .popup .gwell .caseInfo dd table.case3 td+td,
  #contents.notice table.case3 td+td,
  #contents.contact .tblWrap table.case3 td+td,
  #contents.inquiry .tblWrap table.case3 td+td,
  #contents.issue .tblWrap table.case3 td+td,
  #contents.subscription .tblWrap table.case3 td+td,
  #contents.reservation .tblWrap table.case3 td+td {
    position: relative;
  }

  .popup .gwell .caseInfo dd table.case3 th+th::before,
  #contents.notice table.case3 th+th::before,
  #contents.contact .tblWrap table.case3 th+th::before,
  #contents.inquiry .tblWrap table.case3 th+th::before,
  #contents.issue .tblWrap table.case3 th+th::before,
  #contents.subscription .tblWrap table.case3 th+th::before,
  #contents.reservation .tblWrap table.case3 th+th::before,
  .popup .gwell .caseInfo dd table.case3 th+td::before,
  #contents.notice table.case3 th+td::before,
  #contents.contact .tblWrap table.case3 th+td::before,
  #contents.inquiry .tblWrap table.case3 th+td::before,
  #contents.issue .tblWrap table.case3 th+td::before,
  #contents.subscription .tblWrap table.case3 th+td::before,
  #contents.reservation .tblWrap table.case3 th+td::before,
  .popup .gwell .caseInfo dd table.case3 td+th::before,
  #contents.notice table.case3 td+th::before,
  #contents.contact .tblWrap table.case3 td+th::before,
  #contents.inquiry .tblWrap table.case3 td+th::before,
  #contents.issue .tblWrap table.case3 td+th::before,
  #contents.subscription .tblWrap table.case3 td+th::before,
  #contents.reservation .tblWrap table.case3 td+th::before,
  .popup .gwell .caseInfo dd table.case3 td+td::before,
  #contents.notice table.case3 td+td::before,
  #contents.contact .tblWrap table.case3 td+td::before,
  #contents.inquiry .tblWrap table.case3 td+td::before,
  #contents.issue .tblWrap table.case3 td+td::before,
  #contents.subscription .tblWrap table.case3 td+td::before,
  #contents.reservation .tblWrap table.case3 td+td::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: "";
    width: calc(100% - 20px);
    height: 1px;
    background: #E1E1E1;
  }
}

.popup .gwell .caseInfo dd.middleOnly table,
.middleOnly#contents.notice table,
#contents.contact .middleOnly.tblWrap table,
#contents.inquiry .middleOnly.tblWrap table,
#contents.issue .middleOnly.tblWrap table,
#contents.subscription .middleOnly.tblWrap table,
#contents.reservation .middleOnly.tblWrap table {
  margin-bottom: 30px;
  border-top: 1px solid #e1e1e1;
}

.popup .gwell .caseInfo dd.middleOnly table th,
.middleOnly#contents.notice table th,
#contents.contact .middleOnly.tblWrap table th,
#contents.inquiry .middleOnly.tblWrap table th,
#contents.issue .middleOnly.tblWrap table th,
#contents.subscription .middleOnly.tblWrap table th,
#contents.reservation .middleOnly.tblWrap table th {
  padding: 20px 15px;
  font-size: 14px;
  vertical-align: middle;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}

.popup .gwell .caseInfo dd.middleOnly table td,
.middleOnly#contents.notice table td,
#contents.contact .middleOnly.tblWrap table td,
#contents.inquiry .middleOnly.tblWrap table td,
#contents.issue .middleOnly.tblWrap table td,
#contents.subscription .middleOnly.tblWrap table td,
#contents.reservation .middleOnly.tblWrap table td {
  padding: 15px;
  text-align: left;
  font-size: 14px;
  border-bottom: 0;
}

.popup .gwell .caseInfo dd.middleOnly table td>button::before,
.middleOnly#contents.notice table td>button::before,
#contents.contact .middleOnly.tblWrap table td>button::before,
#contents.inquiry .middleOnly.tblWrap table td>button::before,
#contents.issue .middleOnly.tblWrap table td>button::before,
#contents.subscription .middleOnly.tblWrap table td>button::before,
#contents.reservation .middleOnly.tblWrap table td>button::before {
  top: 11px;
  right: 7px;
}

@media (max-width: 1024px) {

  #contents.notice table,
  #contents.contact .tblWrap table,
  #contents.issue .tblWrap table {
    margin-bottom: 20px !important;
  }

  #contents.notice table:not(.noticeTbl):hover tbody tr td:not(.empty),
  #contents.contact .tblWrap table:not(.noticeTbl):hover tbody tr td:not(.empty),
  #contents.issue .tblWrap table:not(.noticeTbl):hover tbody tr td:not(.empty),
  #contents.notice table:not(.noticeTbl):hover tbody tr .download,
  #contents.contact .tblWrap table:not(.noticeTbl):hover tbody tr .download,
  #contents.issue .tblWrap table:not(.noticeTbl):hover tbody tr .download,
  #contents.notice table:not(.case3):hover tbody tr td:not(.empty),
  #contents.contact .tblWrap table:not(.case3):hover tbody tr td:not(.empty),
  #contents.issue .tblWrap table:not(.case3):hover tbody tr td:not(.empty),
  #contents.notice table:not(.case3):hover tbody tr .download,
  #contents.contact .tblWrap table:not(.case3):hover tbody tr .download,
  #contents.issue .tblWrap table:not(.case3):hover tbody tr .download {
    font-weight: 700;
    color: #37234D !important;
  }

  #contents.notice table tbody tr th,
  #contents.contact .tblWrap table tbody tr th,
  #contents.issue .tblWrap table tbody tr th {
    padding: 17px 15px !important;
    background: #fff;
  }

  #contents.notice table tbody tr td,
  #contents.contact .tblWrap table tbody tr td,
  #contents.issue .tblWrap table tbody tr td {
    padding: 20px !important;
    text-align: left !important;
  }
}

@media (min-width: 1025px) {

  #contents.notice table tbody tr:hover th,
  #contents.contact .tblWrap table tbody tr:hover th,
  #contents.issue .tblWrap table tbody tr:hover th,
  #contents.notice table tbody tr:hover td:not(.empty),
  #contents.contact .tblWrap table tbody tr:hover td:not(.empty),
  #contents.issue .tblWrap table tbody tr:hover td:not(.empty),
  #contents.notice table tbody tr:hover .download,
  #contents.contact .tblWrap table tbody tr:hover .download,
  #contents.issue .tblWrap table tbody tr:hover .download {
    font-weight: 700;
    color: #37234D !important;
  }
}

#contents.notice table tbody th,
#contents.contact .tblWrap table tbody th,
#contents.issue .tblWrap table tbody th {
  vertical-align: middle;
  font-weight: normal;
}

@media (min-width: 1025px) {

  #contents.notice table tbody th,
  #contents.contact .tblWrap table tbody th,
  #contents.issue .tblWrap table tbody th {
    border-bottom: 1px solid #E1E1E1;
  }
}

#contents.notice table tbody td,
#contents.contact .tblWrap table tbody td,
#contents.issue .tblWrap table tbody td {
  padding: 28px 20px !important;
  text-align: center !important;
  color: #212121 !important;
}

#contents.notice table tbody td.left,
#contents.contact .tblWrap table tbody td.left,
#contents.issue .tblWrap table tbody td.left {
  text-align: left !important;
}

#contents.notice table tbody td.left a,
#contents.contact .tblWrap table tbody td.left a,
#contents.issue .tblWrap table tbody td.left a {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

#contents.notice table tbody td.title,
#contents.contact .tblWrap table tbody td.title,
#contents.issue .tblWrap table tbody td.title {
  text-align: left !important;
}

#contents.notice table tbody td.title a,
#contents.contact .tblWrap table tbody td.title a,
#contents.issue .tblWrap table tbody td.title a {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

@media (min-width: 1025px) {

  #contents.notice table tbody td.title a,
  #contents.contact .tblWrap table tbody td.title a,
  #contents.issue .tblWrap table tbody td.title a {
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 1024px) {

  #contents.notice table tbody td.title a,
  #contents.contact .tblWrap table tbody td.title a,
  #contents.issue .tblWrap table tbody td.title a {
    -webkit-line-clamp: 4;
  }
}

#contents.notice table tbody td:nth-child(even),
#contents.contact .tblWrap table tbody td:nth-child(even),
#contents.issue .tblWrap table tbody td:nth-child(even) {
  background: none !important;
}

#contents.notice table tbody td>button.download,
#contents.contact .tblWrap table tbody td>button.download,
#contents.issue .tblWrap table tbody td>button.download {
  color: #212121;
  font-weight: normal;
}

#contents.notice table tbody td>button.download::before,
#contents.contact .tblWrap table tbody td>button.download::before,
#contents.issue .tblWrap table tbody td>button.download::before {
  display: none !important;
}

#contents.notice table tbody td>button.download::after,
#contents.contact .tblWrap table tbody td>button.download::after,
#contents.issue .tblWrap table tbody td>button.download::after {
  margin-left: 5px;
  width: 17px;
  height: 16px;
  border-radius: unset;
  vertical-align: -1px;
  background: url("../images/icon/iconDownload5.svg") no-repeat center/cover;
}

#contents.notice table tbody td.download>button,
#contents.contact .tblWrap table tbody td.download>button,
#contents.issue .tblWrap table tbody td.download>button {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
}

#contents.notice table tbody td.download>button::before,
#contents.contact .tblWrap table tbody td.download>button::before,
#contents.issue .tblWrap table tbody td.download>button::before {
  display: none;
}

#contents.notice table tbody td.download>button::after,
#contents.contact .tblWrap table tbody td.download>button::after,
#contents.issue .tblWrap table tbody td.download>button::after {
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 10px);
  display: block;
  content: "";
  width: 17px;
  height: 17px;
  border-radius: unset;
  background: url("../images/icon/iconDownload5.svg") no-repeat center/cover;
}

#contents.notice table tbody td.download>button:hover,
#contents.contact .tblWrap table tbody td.download>button:hover,
#contents.issue .tblWrap table tbody td.download>button:hover,
#contents.notice table tbody td.download>button:focus,
#contents.contact .tblWrap table tbody td.download>button:focus,
#contents.issue .tblWrap table tbody td.download>button:focus {
  background: #37234D;
}

#contents.notice table tbody td.download>button:hover::after,
#contents.contact .tblWrap table tbody td.download>button:hover::after,
#contents.issue .tblWrap table tbody td.download>button:hover::after,
#contents.notice table tbody td.download>button:focus::after,
#contents.contact .tblWrap table tbody td.download>button:focus::after,
#contents.issue .tblWrap table tbody td.download>button:focus::after {
  -moz-filter: grayscale(100) brightness(100);
  -ms-filter: grayscale(100) brightness(100);
  -o-filter: grayscale(100) brightness(100);
  filter: grayscale(100) brightness(100);
}

.banners {
  position: relative;
}

@media (min-width: 1025px) {
  .banners {
    margin-bottom: -40px;
  }
}

@media (max-width: 1024px) {
  .banners {
    margin-top: 40px;
    margin-bottom: -20px;
  }
}

.banners>ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

@media (min-width: 1025px) {
  .banners>ul {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1240px;
    min-width: 315px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 1025px) {
  .banners>ul li {
    width: 50%;
  }
}

@media (min-width: 1025px) and (min-width: 1025px) {
  .banners>ul li:first-child {
    padding-right: 60px;
  }

  .banners>ul li:first-child a {
    width: 174px;
  }
}

@media (min-width: 1025px) and (min-width: 1025px) {
  .banners>ul li:last-child {
    padding-left: 50px;
  }
}

@media (min-width: 1025px) {
  .banners>ul li::before {
    width: 50% !important;
  }
}

.banners>ul li,
.banners>div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 1024px) {

  .banners>ul li,
  .banners>div {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1240px;
    min-width: 315px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 1025px) {

  .banners>ul li,
  .banners>div {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (max-width: 1024px) {

  .banners>ul li,
  .banners>div {
    position: relative;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.banners>ul li::before,
.banners>div::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
}

@media (max-width: 1024px) {

  .banners>ul li::before,
  .banners>div::before {
    width: 100%;
  }
}

.banners>ul li:first-child::before,
.banners>div:first-child::before {
  left: 0;
}

.banners>ul li:last-child::before,
.banners>div:last-child::before {
  right: 0;
}

.banners>ul li.bg1::before,
.banners>div.bg1::before {
  background-image: url("../images/gwell/page/bgInfoBanner1.jpg");
}

.banners>ul li.bg2::before,
.banners>div.bg2::before {
  background-image: url("../images/gwell/page/bgInfoBanner2.jpg");
}

.banners>ul li p,
.banners>div p {
  z-index: 1;
  position: relative;
  font-weight: 700;
  word-break: keep-all;
  color: #f9f9f9;
}

@media (min-width: 1025px) {

  .banners>ul li p,
  .banners>div p {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {

  .banners>ul li p,
  .banners>div p {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 640px) {

  .banners>ul li p,
  .banners>div p {
    width: 100%;
  }
}

.banners>ul li p.medium,
.banners>div p.medium {
  font-weight: 500;
}

@media (min-width: 1025px) {

  .banners>ul li p em,
  .banners>div p em {
    font-weight: 500;
  }
}

@media (max-width: 1024px) {

  .banners>ul li p em,
  .banners>div p em {
    font-weight: 700;
  }
}

.banners>ul li a,
.banners>div a {
  z-index: 1;
  position: relative;
  border: 1px solid #fff;
  border-radius: 30px;
  text-align: center;
  color: #fff;
}

@media (min-width: 1025px) {

  .banners>ul li a,
  .banners>div a {
    margin: 20px 0;
    width: 140px;
    line-height: 48px;
  }
}

@media (max-width: 1024px) {

  .banners>ul li a,
  .banners>div a {
    width: 130px;
    line-height: 38px;
  }
}

@media (max-width: 640px) {

  .banners>ul li a,
  .banners>div a {
    margin-top: 20px;
  }
}

.banners>ul li a:hover,
.banners>ul li a:focus,
.banners>div a:hover,
.banners>div a:focus {
  border: none;
  background: #2E2839;
}

@media (min-width: 1025px) {

  .banners>ul li a:hover,
  .banners>ul li a:focus,
  .banners>div a:hover,
  .banners>div a:focus {
    line-height: 50px;
  }
}

@media (max-width: 1024px) {

  .banners>ul li a:hover,
  .banners>ul li a:focus,
  .banners>div a:hover,
  .banners>div a:focus {
    line-height: 40px;
  }
}

.banners>div {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#contents.notice .pagination,
#contents.contact .tblWrap .pagination,
#contents.issue .tblWrap .pagination {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  min-width: 300px;
}

@media (min-width: 1025px) {

  #contents.notice .pagination,
  #contents.contact .tblWrap .pagination,
  #contents.issue .tblWrap .pagination {
    margin-top: 80px;
  }

  #contents.notice .pagination .button,
  #contents.contact .tblWrap .pagination .button,
  #contents.issue .tblWrap .pagination .button {
    margin: 0 7.5px;
  }

  #contents.notice .pagination button:not(.button)+button:not(.button),
  #contents.contact .tblWrap .pagination button:not(.button)+button:not(.button),
  #contents.issue .tblWrap .pagination button:not(.button)+button:not(.button) {
    margin-left: 47px;
  }

  #contents.notice .pagination .prev,
  #contents.contact .tblWrap .pagination .prev,
  #contents.issue .tblWrap .pagination .prev {
    margin-right: 32px;
  }

  #contents.notice .pagination .next,
  #contents.contact .tblWrap .pagination .next,
  #contents.issue .tblWrap .pagination .next {
    margin-left: 32px;
  }
}

@media (max-width: 1024px) {

  #contents.notice .pagination,
  #contents.contact .tblWrap .pagination,
  #contents.issue .tblWrap .pagination {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }

  #contents.notice .pagination .button,
  #contents.contact .tblWrap .pagination .button,
  #contents.issue .tblWrap .pagination .button {
    margin: 0 5px;
  }
}

@media (max-width: 1024px) {

  #contents.notice .pagination button:not(.button),
  #contents.contact .tblWrap .pagination button:not(.button),
  #contents.issue .tblWrap .pagination button:not(.button) {
    margin: 0 5px;
  }
}

@media (max-width: 640px) {

  #contents.notice .pagination button:not(.button),
  #contents.contact .tblWrap .pagination button:not(.button),
  #contents.issue .tblWrap .pagination button:not(.button) {
    display: none;
  }
}

#contents.notice .pagination .button,
#contents.contact .tblWrap .pagination .button,
#contents.issue .tblWrap .pagination .button {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.45;
}

#contents.notice .pagination .button.next,
#contents.contact .tblWrap .pagination .button.next,
#contents.issue .tblWrap .pagination .button.next,
#contents.notice .pagination .button.prev,
#contents.contact .tblWrap .pagination .button.prev,
#contents.issue .tblWrap .pagination .button.prev {
  background: url("../images/icon/iconNext.svg") no-repeat center;
}

#contents.notice .pagination .button.last,
#contents.contact .tblWrap .pagination .button.last,
#contents.issue .tblWrap .pagination .button.last,
#contents.notice .pagination .button.first,
#contents.contact .tblWrap .pagination .button.first,
#contents.issue .tblWrap .pagination .button.first {
  background: url("../images/icon/iconLast.svg") no-repeat center;
}

#contents.notice .pagination .button.prev,
#contents.contact .tblWrap .pagination .button.prev,
#contents.issue .tblWrap .pagination .button.prev,
#contents.notice .pagination .button.first,
#contents.contact .tblWrap .pagination .button.first,
#contents.issue .tblWrap .pagination .button.first {
  transform: rotate(180deg);
}

#contents.notice .pagination .button:disabled,
#contents.contact .tblWrap .pagination .button:disabled,
#contents.issue .tblWrap .pagination .button:disabled {
  opacity: 0.2;
}

#contents.notice .pagination .button:not(:disabled):hover,
#contents.contact .tblWrap .pagination .button:not(:disabled):hover,
#contents.issue .tblWrap .pagination .button:not(:disabled):hover,
#contents.notice .pagination .button:not(:disabled):focus,
#contents.contact .tblWrap .pagination .button:not(:disabled):focus,
#contents.issue .tblWrap .pagination .button:not(:disabled):focus {
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
  opacity: 1;
}

#contents.notice .pagination .current,
#contents.contact .tblWrap .pagination .current,
#contents.issue .tblWrap .pagination .current {
  font-weight: 700;
  color: #46296E;
}

#contents.notice .pagination button:not(.button):hover,
#contents.contact .tblWrap .pagination button:not(.button):hover,
#contents.issue .tblWrap .pagination button:not(.button):hover,
#contents.notice .pagination button:not(.button):focus,
#contents.contact .tblWrap .pagination button:not(.button):focus,
#contents.issue .tblWrap .pagination button:not(.button):focus {
  color: #46296E;
}

#contents.myinfoCont .overall>section.interested .list,
#contents.salesList .list {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

#contents.myinfoCont .overall>section.interested .list .noResult,
#contents.salesList .list .noResult {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  color: #212121;
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list .noResult,
  #contents.salesList .list .noResult {
    height: 380px;
    border-bottom: 1px solid #c8c8c8;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list .noResult,
  #contents.salesList .list .noResult {
    height: 200px;
  }
}

#contents.myinfoCont .overall>section.interested .list .noResult::before,
#contents.salesList .list .noResult::before {
  content: "";
  width: 100px;
  height: 100px;
  background: url("../images/gwell/imgNoresult.svg") no-repeat center;
}

#contents.myinfoCont .overall>section.interested .list .noResult b,
#contents.salesList .list .noResult b {
  color: #46296E;
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult),
#contents.salesList .list li:not(.noResult) {
  position: relative;
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult),
  #contents.salesList .list li:not(.noResult) {
    margin: 0 30px;
    width: calc(33.3333333333% - 40px);
    padding-bottom: 82px;
  }

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)+li+li+li,
  #contents.salesList .list li:not(.noResult)+li+li+li {
    margin-top: 60px;
  }

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult):nth-of-type(3n+1),
  #contents.salesList .list li:not(.noResult):nth-of-type(3n+1) {
    margin-left: 0;
  }

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult):nth-of-type(3n),
  #contents.salesList .list li:not(.noResult):nth-of-type(3n) {
    margin-right: 0;
  }

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons,
  #contents.salesList .list li:not(.noResult) .buttons {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult),
  #contents.salesList .list li:not(.noResult) {
    margin: 0 20px;
    width: calc(50% - 20px);
  }

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)+li+li,
  #contents.salesList .list li:not(.noResult)+li+li {
    margin-top: 40px;
  }

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult):nth-of-type(2n+1),
  #contents.salesList .list li:not(.noResult):nth-of-type(2n+1) {
    margin-left: 0;
  }

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult):nth-of-type(2n),
  #contents.salesList .list li:not(.noResult):nth-of-type(2n) {
    margin-right: 0;
  }
}

@media (max-width: 640px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult),
  #contents.salesList .list li:not(.noResult) {
    margin: 0;
  }

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)+li,
  #contents.salesList .list li:not(.noResult)+li {
    margin-top: 40px;
  }
}

@media (max-width: 480px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult),
  #contents.salesList .list li:not(.noResult) {
    width: 100%;
  }

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)+li,
  #contents.salesList .list li:not(.noResult)+li {
    margin-top: 40px;
  }
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .img,
#contents.salesList .list li:not(.noResult) .img {
  position: relative;
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .img a,
#contents.salesList .list li:not(.noResult) .img a {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 70.8333%;
  pointer-events: none;
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .img a span,
#contents.salesList .list li:not(.noResult) .img a span {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s;
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .img a:hover span,
#contents.salesList .list li:not(.noResult) .img a:hover span,
#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .img a:focus span,
#contents.salesList .list li:not(.noResult) .img a:focus span {
  transform: scale(1.06);
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .img em,
#contents.salesList .list li:not(.noResult) .img em {
  position: absolute;
  bottom: -20px;
  right: 0;
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .img em.case1,
#contents.salesList .list li:not(.noResult) .img em.case1 {
  background: #37234D;
  color: #fff;
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .img em.case2,
#contents.salesList .list li:not(.noResult) .img em.case2 {
  background: #EAEBEB;
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult)>span,
#contents.salesList .list li:not(.noResult)>span {
  display: block;
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>span,
  #contents.salesList .list li:not(.noResult)>span {
    margin-top: 43px;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>span,
  #contents.salesList .list li:not(.noResult)>span {
    margin-top: 30px;
  }
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult)>p,
#contents.salesList .list li:not(.noResult)>p {
  margin-top: 14px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>p,
  #contents.salesList .list li:not(.noResult)>p {
    margin-top: 10px;
  }
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult)>p a,
#contents.salesList .list li:not(.noResult)>p a {
  width: calc(100% - 35px);
  font-weight: 700;
  margin-top: 0 !important;
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>p a,
  #contents.salesList .list li:not(.noResult)>p a {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>p a,
  #contents.salesList .list li:not(.noResult)>p a {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult)>p .bookmark,
#contents.salesList .list li:not(.noResult)>p .bookmark {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult)>p .bookmark:not(.on),
#contents.salesList .list li:not(.noResult)>p .bookmark:not(.on) {
  background-image: url("../images/icon/iconHeart.svg");
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult)>p .bookmark.on,
#contents.salesList .list li:not(.noResult)>p .bookmark.on {
  background-image: url("../images/icon/iconHeartOn.svg");
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>p .bookmark,
  #contents.salesList .list li:not(.noResult)>p .bookmark {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>p .bookmark,
  #contents.salesList .list li:not(.noResult)>p .bookmark {
    width: 30px;
    height: 30px;
  }
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .title,
#contents.salesList .list li:not(.noResult) .title {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult) .title,
  #contents.salesList .list li:not(.noResult) .title {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult) .title,
  #contents.salesList .list li:not(.noResult) .title {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl,
#contents.salesList .list li:not(.noResult)>dl {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 10px;
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dt,
  #contents.salesList .list li:not(.noResult)>dl dt,
  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dd,
  #contents.salesList .list li:not(.noResult)>dl dd {
    padding-top: 10px;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dt,
  #contents.salesList .list li:not(.noResult)>dl dt,
  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dd,
  #contents.salesList .list li:not(.noResult)>dl dd {
    padding-top: 8px;
  }
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dt,
#contents.salesList .list li:not(.noResult)>dl dt {
  color: #212121;
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dt,
  #contents.salesList .list li:not(.noResult)>dl dt {
    width: 49px;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dt,
  #contents.salesList .list li:not(.noResult)>dl dt {
    width: 45px;
  }
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dd,
  #contents.salesList .list li:not(.noResult)>dl dd {
    width: calc(100% - 49px);
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dd,
  #contents.salesList .list li:not(.noResult)>dl dd {
    width: calc(100% - 45px);
  }
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dd .tel,
  #contents.salesList .list li:not(.noResult)>dl dd .tel {
    pointer-events: none;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dd .tel,
  #contents.salesList .list li:not(.noResult)>dl dd .tel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    font-weight: 700;
    color: #37234D;
    text-decoration: underline;
  }

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dd .tel::after,
  #contents.salesList .list li:not(.noResult)>dl dd .tel::after {
    content: "";
    margin-left: 8px;
    width: 20px;
    height: 20px;
    background: url("../images/icon/iconPhone.svg") no-repeat center;
  }
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dd.graph,
#contents.salesList .list li:not(.noResult)>dl dd.graph {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: stretch;
  align-items: center;
  color: #37234D;
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dd.graph strong,
#contents.salesList .list li:not(.noResult)>dl dd.graph strong {
  margin-right: 15px;
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dd.graph div,
#contents.salesList .list li:not(.noResult)>dl dd.graph div {
  position: relative;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: #E9E9E9;
  overflow: hidden;
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl dd.graph div span,
#contents.salesList .list li:not(.noResult)>dl dd.graph div span {
  position: absolute;
  left: 0;
  top: 0;
  height: 5px;
  background: #37234D;
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl.case dt,
  #contents.salesList .list li:not(.noResult)>dl.case dt {
    width: 64px;
  }
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult)>dl.case dd,
  #contents.salesList .list li:not(.noResult)>dl.case dd {
    width: calc(100% - 64px);
  }
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons,
#contents.salesList .list li:not(.noResult) .buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons,
  #contents.salesList .list li:not(.noResult) .buttons {
    margin-top: 38px;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons,
  #contents.salesList .list li:not(.noResult) .buttons {
    margin-top: 18px;
  }
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*,
#contents.salesList .list li:not(.noResult) .buttons>* {
  width: calc(50% - 5px);
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*::before,
#contents.salesList .list li:not(.noResult) .buttons>*::before,
#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*::after,
#contents.salesList .list li:not(.noResult) .buttons>*::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*:not(:disabled):hover,
#contents.salesList .list li:not(.noResult) .buttons>*:not(:disabled):hover,
#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*:not(:disabled):focus,
#contents.salesList .list li:not(.noResult) .buttons>*:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*:not(:disabled):hover::before,
#contents.salesList .list li:not(.noResult) .buttons>*:not(:disabled):hover::before,
#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*:not(:disabled):hover::after,
#contents.salesList .list li:not(.noResult) .buttons>*:not(:disabled):hover::after,
#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*:not(:disabled):focus::before,
#contents.salesList .list li:not(.noResult) .buttons>*:not(:disabled):focus::before,
#contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*:not(:disabled):focus::after,
#contents.salesList .list li:not(.noResult) .buttons>*:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*,
  #contents.salesList .list li:not(.noResult) .buttons>* {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*::before,
  #contents.salesList .list li:not(.noResult) .buttons>*::before {
    margin-right: 10px;
  }

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*::after,
  #contents.salesList .list li:not(.noResult) .buttons>*::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*,
  #contents.salesList .list li:not(.noResult) .buttons>* {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*::before,
  #contents.salesList .list li:not(.noResult) .buttons>*::before {
    margin-right: 14px;
  }

  #contents.myinfoCont .overall>section.interested .list li:not(.noResult) .buttons>*::after,
  #contents.salesList .list li:not(.noResult) .buttons>*::after {
    margin-left: 18px;
  }
}

#contents.myinfoCont .overall>section.interested .list+.more,
#contents.salesList .list+.more {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#contents.myinfoCont .overall>section.interested .list+.more::before,
#contents.salesList .list+.more::before,
#contents.myinfoCont .overall>section.interested .list+.more::after,
#contents.salesList .list+.more::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.myinfoCont .overall>section.interested .list+.more:not(:disabled):hover,
#contents.salesList .list+.more:not(:disabled):hover,
#contents.myinfoCont .overall>section.interested .list+.more:not(:disabled):focus,
#contents.salesList .list+.more:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.myinfoCont .overall>section.interested .list+.more:not(:disabled):hover::before,
#contents.salesList .list+.more:not(:disabled):hover::before,
#contents.myinfoCont .overall>section.interested .list+.more:not(:disabled):hover::after,
#contents.salesList .list+.more:not(:disabled):hover::after,
#contents.myinfoCont .overall>section.interested .list+.more:not(:disabled):focus::before,
#contents.salesList .list+.more:not(:disabled):focus::before,
#contents.myinfoCont .overall>section.interested .list+.more:not(:disabled):focus::after,
#contents.salesList .list+.more:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list+.more,
  #contents.salesList .list+.more {
    font-size: 16px;
    min-width: 180px;
    height: 60px;
    padding: 0 20px;
    border-radius: 30px;
  }

  #contents.myinfoCont .overall>section.interested .list+.more::before,
  #contents.salesList .list+.more::before {
    margin-right: 10px;
  }

  #contents.myinfoCont .overall>section.interested .list+.more::after,
  #contents.salesList .list+.more::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list+.more,
  #contents.salesList .list+.more {
    font-size: 14px;
    min-width: 180px;
    font-size: 16px;
    height: 50px;
    padding: 0 18px;
    border-radius: 25px;
  }

  #contents.myinfoCont .overall>section.interested .list+.more::before,
  #contents.salesList .list+.more::before {
    margin-right: 14px;
  }

  #contents.myinfoCont .overall>section.interested .list+.more::after,
  #contents.salesList .list+.more::after {
    margin-left: 18px;
  }
}

@media (min-width: 1025px) {

  #contents.myinfoCont .overall>section.interested .list+.more,
  #contents.salesList .list+.more {
    margin-top: -70px;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.interested .list+.more,
  #contents.salesList .list+.more {
    margin-top: -40px;
  }
}

.reservationList {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

.reservationList li {
  position: relative;
}

@media (min-width: 1025px) {
  .reservationList li {
    padding: 60px 80px 65px;
  }
}

@media (max-width: 1024px) {
  .reservationList li {
    padding: 140px 20px 30px;
  }
}

.reservationList li+li {
  margin-top: 30px;
}

.reservationList li:not(.expired) {
  border: 1px solid #37234D;
}

.reservationList li:not(.expired) em {
  background: #37234D;
  color: #fff;
}

.reservationList li.expired {
  background: #f9f9f9;
}

.reservationList li.expired em {
  background: #c8c8c8;
  color: #212121;
}

.reservationList li em {
  position: absolute;
  top: 0;
  border-radius: 0 0 10px 10px;
  text-align: center;
}

@media (min-width: 1025px) {
  .reservationList li em {
    right: 80px;
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
}

@media (max-width: 1024px) {
  .reservationList li em {
    right: 20px;
    width: 60px;
    height: 60px;
    line-height: 60px;
  }
}

@media (max-width: 1024px) {
  .reservationList li span {
    padding-left: 28px;
    background: url("../images/icon/iconHouse.svg") no-repeat left top;
    color: #212121;
  }
}

.reservationList li .date {
  padding-bottom: 18px;
  border-bottom: 1px solid #E1E1E1;
  font-weight: 700;
}

@media (min-width: 1025px) {
  .reservationList li .date {
    margin-top: 19px;
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {
  .reservationList li .date {
    position: absolute;
    top: 73px;
    left: 20px;
    right: 20px;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) and (max-width: 375px) {
  .reservationList li .date {
    font-size: 19px;
  }
}

@media (max-width: 1024px) and (max-width: 360px) {
  .reservationList li .date {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }
}

.reservationList li .location {
  padding-left: 28px;
  background: url("../images/icon/iconLocation.svg") no-repeat left 5px;
  color: #212121;
}

@media (min-width: 1025px) {
  .reservationList li .location {
    display: inline-block;
    margin-top: 30px;
  }
}

@media (max-width: 1024px) {
  .reservationList li .location {
    margin-top: 10px;
    background-position: left 3px;
  }
}

.reservationList li .call {
  padding-left: 28px;
  background: url("../images/icon/iconPhone2.svg") no-repeat left 5px;
  color: #212121;
}

@media (min-width: 1025px) {
  .reservationList li .call {
    display: inline-block;
    margin-top: 30px;
    margin-left: 45px;
  }

  .reservationList li .call a {
    pointer-events: none;
  }
}

@media (max-width: 1024px) {
  .reservationList li .call {
    margin-top: 10px;
    background-position: left 3px;
  }
}

@media (min-width: 1025px) {
  .reservationList li .buttons {
    position: absolute;
    bottom: 60px;
    right: 80px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
  }
}

@media (max-width: 1024px) {
  .reservationList li .buttons {
    margin-top: 30px;
  }
}

.reservationList li .buttons>* {
  height: 40px;
  border: 1px solid #c8c8c8;
  border-radius: 20px;
}

.reservationList li .buttons>*:hover {
  border-color: #37234D;
  color: #37234D;
}

@media (min-width: 1025px) {
  .reservationList li .buttons>* {
    width: 110px;
  }
}

@media (max-width: 1024px) {
  .reservationList li .buttons>* {
    width: 100%;
  }
}

@media (min-width: 1025px) {
  .reservationList li .buttons>*+* {
    margin-left: 10px;
  }
}

@media (max-width: 1024px) {
  .reservationList li .buttons>*+* {
    margin-top: 10px;
  }
}

#contents.salesList .info,
#details .info,
#contents.notice .info,
#contents.contact .info,
#contents.inquiry .info,
#contents.issue .info,
#contents.subscription .info,
#contents.reservation .info {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  word-break: keep-all;
  color: #666;
}

#contents.salesList .info>li,
#details .info>li,
#contents.notice .info>li,
#contents.contact .info>li,
#contents.inquiry .info>li,
#contents.issue .info>li,
#contents.subscription .info>li,
#contents.reservation .info>li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

#contents.salesList .info>li::before,
#details .info>li::before,
#contents.notice .info>li::before,
#contents.contact .info>li::before,
#contents.inquiry .info>li::before,
#contents.issue .info>li::before,
#contents.subscription .info>li::before,
#contents.reservation .info>li::before {
  content: "※";
  padding-right: 3px;
}

.popup .gwell .caseInfo dd ul li,
#contents.inquiry .itemList dd ul li,
#contents.myinfoCont .bgBox .dotList li,
#contents.notice table.case2 tbody td ul li,
#contents.contact .tblWrap table.case2 tbody td ul li,
#contents.inquiry .tblWrap table.case2 tbody td ul li,
#contents.issue .tblWrap table.case2 tbody td ul li,
#contents.subscription .tblWrap table.case2 tbody td ul li,
#contents.reservation .tblWrap table.case2 tbody td ul li {
  position: relative;
  padding-left: 10px;
  text-align: left;
  color: #212121;
  line-height: 28px;
}

@media (max-width: 1024px) {

  .popup .gwell .caseInfo dd ul li+li,
  #contents.inquiry .itemList dd ul li+li,
  #contents.myinfoCont .bgBox .dotList li+li,
  #contents.notice table.case2 tbody td ul li+li,
  #contents.contact .tblWrap table.case2 tbody td ul li+li,
  #contents.inquiry .tblWrap table.case2 tbody td ul li+li,
  #contents.issue .tblWrap table.case2 tbody td ul li+li,
  #contents.subscription .tblWrap table.case2 tbody td ul li+li,
  #contents.reservation .tblWrap table.case2 tbody td ul li+li {
    margin-top: 5px;
  }
}

.popup .gwell .caseInfo dd ul li::before,
#contents.inquiry .itemList dd ul li::before,
#contents.myinfoCont .bgBox .dotList li::before,
#contents.notice table.case2 tbody td ul li::before,
#contents.contact .tblWrap table.case2 tbody td ul li::before,
#contents.inquiry .tblWrap table.case2 tbody td ul li::before,
#contents.issue .tblWrap table.case2 tbody td ul li::before,
#contents.subscription .tblWrap table.case2 tbody td ul li::before,
#contents.reservation .tblWrap table.case2 tbody td ul li::before {
  position: absolute;
  top: 14px;
  left: 0;
  display: block;
  content: "";
  width: 3px;
  height: 3px;
  background: #212121;
  border-radius: 100%;
}

@media (max-width: 1024px) {

  .popup .gwell .caseInfo dd ul li::before,
  #contents.inquiry .itemList dd ul li::before,
  #contents.myinfoCont .bgBox .dotList li::before,
  #contents.notice table.case2 tbody td ul li::before,
  #contents.contact .tblWrap table.case2 tbody td ul li::before,
  #contents.inquiry .tblWrap table.case2 tbody td ul li::before,
  #contents.issue .tblWrap table.case2 tbody td ul li::before,
  #contents.subscription .tblWrap table.case2 tbody td ul li::before,
  #contents.reservation .tblWrap table.case2 tbody td ul li::before {
    top: 12px;
  }
}

.datepickerBig {
  border-bottom: 1px solid #E1E1E1;
}

.datepickerBig.hasDatepicker {
  background-image: none !important;
}

.datepickerBig .ui-widget-content {
  margin-top: 0 !important;
  width: 100%;
  padding: 0 !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;
  border-radius: unset !important;
}

@media (min-width: 1025px) {
  .datepickerBig .ui-widget-content {
    font-size: 16px !important;
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-widget-content {
    font-size: 14px !important;
  }
}

.datepickerBig .ui-state-hover,
.datepickerBig .ui-widget-content .ui-state-hover {
  background: unset;
}

.datepickerBig .ui-datepicker .ui-datepicker-header {
  margin-bottom: 0 !important;
  height: 70px;
  padding: 0 !important;
  border-radius: unset !important;
  background: #f9f9f9;
}

.datepickerBig .ui-datepicker .ui-datepicker-title {
  line-height: 70px;
}

@media (min-width: 1025px) {
  .datepickerBig .ui-datepicker .ui-datepicker-title {
    font-size: 20px;
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-datepicker .ui-datepicker-title {
    font-size: 18px;
  }
}

.datepickerBig .ui-datepicker .ui-datepicker-prev,
.datepickerBig .ui-datepicker .ui-datepicker-next {
  top: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  border: 1px solid #c8c8c8;
  cursor: pointer;
}

@media (min-width: 1025px) {
  .datepickerBig .ui-datepicker .ui-datepicker-prev {
    left: 30px;
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-datepicker .ui-datepicker-prev {
    left: 20px;
  }
}

@media (min-width: 1025px) {
  .datepickerBig .ui-datepicker .ui-datepicker-next {
    right: 30px;
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-datepicker .ui-datepicker-next {
    right: 20px;
  }
}

.datepickerBig .ui-datepicker table {
  margin: 0 !important;
}

@media (min-width: 1025px) {
  .datepickerBig .ui-datepicker table {
    font-size: 16px !important;
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-datepicker table {
    font-size: 14px !important;
  }
}

.datepickerBig .ui-datepicker-calendar thead {
  border-bottom: none !important;
}

.datepickerBig .ui-datepicker th {
  height: 55px;
  vertical-align: middle;
  padding: 0 !important;
  color: #212121 !important;
}

.datepickerBig .ui-datepicker td {
  padding: 0 !important;
  vertical-align: middle;
}

@media (min-width: 1025px) {
  .datepickerBig .ui-datepicker td {
    height: 54px !important;
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-datepicker td {
    height: 60px !important;
  }
}

.datepickerBig .ui-datepicker td a:hover {
  background: #E1E1E1;
}

.datepickerBig .ui-datepicker td[data-handler=selectDay].start {
  position: relative;
  background: #e9e9e9;
}

.datepickerBig .ui-datepicker td[data-handler=selectDay].start a {
  position: absolute;
  z-index: 5;
}

@media (min-width: 1025px) {
  .datepickerBig .ui-datepicker td[data-handler=selectDay].start a {
    top: calc(50% - 20px);
    left: calc(50% - 20px);
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-datepicker td[data-handler=selectDay].start a {
    top: calc(50% - 14px);
    left: calc(50% - 14px);
  }
}

.datepickerBig .ui-datepicker td[data-handler=selectDay].start:after {
  position: absolute;
  top: 0;
  left: 7px;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 30px 0 0 30px;
}

@media (max-width: 480px) {
  .datepickerBig .ui-datepicker td[data-handler=selectDay].start:after {
    left: 3px;
  }
}

.datepickerBig .ui-datepicker td[data-handler=selectDay].end {
  position: relative;
  background: #e9e9e9;
}

.datepickerBig .ui-datepicker td[data-handler=selectDay].end a {
  position: absolute;
  z-index: 5;
}

@media (min-width: 1025px) {
  .datepickerBig .ui-datepicker td[data-handler=selectDay].end a {
    top: calc(50% - 20px);
    right: calc(50% - 20px);
  }
}

@media (max-width: 1024px) {
  .datepickerBig .ui-datepicker td[data-handler=selectDay].end a {
    top: calc(50% - 14px);
    right: calc(50% - 14px);
  }
}

.datepickerBig .ui-datepicker td[data-handler=selectDay].end:after {
  position: absolute;
  top: 0;
  right: 7px;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 0 30px 30px 0;
}

.datepickerBig .ui-state-disabled,
.datepickerBig .ui-widget-content .ui-state-disabled,
.datepickerBig .ui-widget-header .ui-state-disabled {
  opacity: 1 !important;
  background: #e9e9e9;
}

.datepickerBig .ui-state-default,
.datepickerBig .ui-widget-content .ui-state-default,
.datepickerBig .ui-widget-header .ui-state-default {
  border: 0 !important;
  color: #212121;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
}

@media (min-width: 1025px) {

  .datepickerBig .ui-state-default,
  .datepickerBig .ui-widget-content .ui-state-default,
  .datepickerBig .ui-widget-header .ui-state-default {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
  }
}

@media (max-width: 1024px) {

  .datepickerBig .ui-state-default,
  .datepickerBig .ui-widget-content .ui-state-default,
  .datepickerBig .ui-widget-header .ui-state-default {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
  }
}

.datepickerBig .ui-state-highlight,
.datepickerBig .ui-widget-content .ui-state-highlight,
.datepickerBig .ui-widget-header .ui-state-highlight {
  background: #E1E1E1;
  color: #212121;
}

.datepickerBig .ui-state-active {
  background: #37234D !important;
  color: #fff !important;
}

.datepickerBig .ui-datepicker td span,
.datepickerBig .ui-datepicker td a {
  padding: 0 !important;
}

.datepickerBig .ui-datepicker-other-month .ui-state-default {
  color: #666 !important;
}

.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-clearfix {
  min-height: 0;
  /* support: IE7 */
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0);
  /* support: IE8 */
}

.ui-front {
  z-index: 100;
}

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important;
}

/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}

/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 2px 0 0 0;
  padding: 0.5em 0.5em 0.5em 0.7em;
  min-height: 0;
  /* support: IE7 */
  font-size: 100%;
}

.ui-accordion .ui-accordion-icons {
  padding-left: 2.2em;
}

.ui-accordion .ui-accordion-icons .ui-accordion-icons {
  padding-left: 2.2em;
}

.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
  position: absolute;
  left: 0.5em;
  top: 50%;
  margin-top: -8px;
}

.ui-accordion .ui-accordion-content {
  padding: 1em 2.2em;
  border-top: 0;
  overflow: auto;
}

.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
}

.ui-button {
  display: inline-block;
  position: relative;
  padding: 0;
  line-height: normal;
  margin-right: 0.1em;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
  overflow: visible;
  /* removes extra width in IE */
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
  text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
  width: 2.2em;
}

/* button elements seem to need a little more width */
button.ui-button-icon-only {
  width: 2.4em;
}

.ui-button-icons-only {
  width: 3.4em;
}

button.ui-button-icons-only {
  width: 3.7em;
}

/* button text element */
.ui-button .ui-button-text {
  display: block;
  line-height: normal;
}

.ui-button-text-only .ui-button-text {
  padding: 0.4em 1em;
}

.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
  padding: 0.4em;
  text-indent: -9999999px;
}

.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
  padding: 0.4em 1em 0.4em 2.1em;
}

.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
  padding: 0.4em 2.1em 0.4em 1em;
}

.ui-button-text-icons .ui-button-text {
  padding-left: 2.1em;
  padding-right: 2.1em;
}

/* no icon support for input elements, provide padding by default */
input.ui-button {
  padding: 0.4em 1em;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
  position: absolute;
  top: 50%;
  margin-top: -8px;
}

.ui-button-icon-only .ui-icon {
  left: 50%;
  margin-left: -8px;
}

.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
  left: 0.5em;
}

.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
  right: 0.5em;
}

/* button sets */
.ui-buttonset {
  margin-right: 7px;
}

.ui-buttonset .ui-button {
  margin-left: 0;
  margin-right: -0.3em;
}

/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.ui-datepicker {
  width: 17em;
  padding: 0.2em 0.2em 0;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
  margin-bottom: 13px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 30px;
  height: 30px;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  top: 2px;
}

.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next-hover {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 0%;
  top: 0%;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
  font-size: 14px;
  font-size: 0.9rem;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 45%;
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
}

.ui-datepicker-calendar thead {
  border-bottom: 4px solid #fff;
}

a.ui-datepicker-next.ui-corner-all::before {
  border: solid #63666a;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px 2px 2px 4px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  content: "";
  position: absolute;
  top: 11px;
  left: 9px;
}

button.ui-datepicker-trigger {
  border: none;
  background: #4c5762 url("../../images/sub/datapicker.png") 16px 15px no-repeat;
  width: 49px;
  height: 48px;
  text-indent: -9999px;
}

a.ui-datepicker-prev.ui-corner-all::before {
  border: solid #63666a;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px 2px 2px 4px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  content: "";
  position: absolute;
  top: 11px;
  left: 12px;
}

.ui-datepicker th {
  padding: 0.7em 0.3em;
  text-align: center;
  font-weight: bold;
  border: 0;
  color: #63666a;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 0.2em;
  text-align: right;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0 0;
  padding: 0 0.2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em 0.6em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto 0.4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
  direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

.ui-dialog {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.2em;
  outline: 0;
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0.4em 1em;
  position: relative;
}

.ui-dialog .ui-dialog-title {
  float: left;
  margin: 0.1em 0;
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: 0.3em;
  top: 50%;
  width: 20px;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 20px;
}

.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  padding: 0.5em 1em;
  background: none;
  overflow: auto;
}

.ui-dialog .ui-dialog-buttonpane {
  text-align: left;
  border-width: 1px 0 0 0;
  background-image: none;
  margin-top: 0.5em;
  padding: 0.3em 1em 0.5em 0.4em;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: right;
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: 0.5em 0.4em 0.5em 0;
  cursor: pointer;
}

.ui-dialog .ui-resizable-se {
  width: 12px;
  height: 12px;
  right: -5px;
  bottom: -5px;
  background-position: 16px 16px;
}

.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}

.ui-draggable-handle {
  touch-action: none;
}

.ui-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  outline: none;
}

.ui-menu .ui-menu {
  position: absolute;
}

.ui-menu .ui-menu-item {
  position: relative;
  margin: 0;
  padding: 3px 1em 3px 0.4em;
  cursor: pointer;
  min-height: 0;
  /* support: IE7 */
  /* support: IE10, see #8844 */
}

.ui-menu .ui-menu-divider {
  margin: 5px 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 1px 0 0 0;
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
  margin: -1px;
}

/* icon support */
.ui-menu-icons {
  position: relative;
}

.ui-menu-icons .ui-menu-item {
  padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.2em;
  margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
  left: auto;
  right: 0;
}

.ui-progressbar {
  height: 2em;
  text-align: left;
  overflow: hidden;
}

.ui-progressbar .ui-progressbar-value {
  margin: -1px;
  height: 100%;
}

.ui-progressbar .ui-progressbar-overlay {
  height: 100%;
  filter: alpha(opacity=25);
  /* support: IE8 */
  opacity: 0.25;
}

.ui-progressbar-indeterminate .ui-progressbar-value {
  background-image: none;
}

.ui-resizable {
  position: relative;
}

.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  touch-action: none;
}

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
  display: none;
}

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}

.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

.ui-selectable {
  touch-action: none;
}

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted black;
}

.ui-selectmenu-menu {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.ui-selectmenu-menu .ui-menu {
  overflow: auto;
  /* Support: IE7 */
  overflow-x: hidden;
  padding-bottom: 1px;
}

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.5;
  padding: 2px 0.4em;
  margin: 0.5em 0 0 0;
  height: auto;
  border: 0;
}

.ui-selectmenu-open {
  display: block;
}

.ui-selectmenu-button {
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

.ui-selectmenu-button span.ui-icon {
  right: 0.5em;
  left: auto;
  margin-top: -8px;
  position: absolute;
  top: 50%;
}

.ui-selectmenu-button span.ui-selectmenu-text {
  text-align: left;
  padding: 0.4em 2.1em 0.4em 1em;
  display: block;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  touch-action: none;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit;
}

.ui-slider-horizontal {
  height: 0.8em;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
  margin-left: -0.6em;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-slider-vertical {
  width: 0.8em;
  height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
  left: -0.3em;
  margin-left: 0;
  margin-bottom: -0.6em;
}

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}

.ui-sortable-handle {
  touch-action: none;
}

.ui-spinner {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.ui-spinner-input {
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  margin: 0.2em 0;
  vertical-align: middle;
  margin-left: 0.4em;
  margin-right: 22px;
}

.ui-spinner-button {
  width: 16px;
  height: 50%;
  font-size: 0.5em;
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  cursor: default;
  display: block;
  overflow: hidden;
  right: 0;
}

/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
  border-top: none;
  border-bottom: none;
  border-right: none;
}

/* vertically center icon */
.ui-spinner .ui-icon {
  position: absolute;
  margin-top: -8px;
  top: 50%;
  left: 0;
}

.ui-spinner-up {
  top: 0;
}

.ui-spinner-down {
  bottom: 0;
}

/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
  /* need to fix icons sprite */
  background-position: -65px -16px;
}

.ui-tabs {
  position: relative;
  /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
  padding: 0.2em;
}

.ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: 0.2em 0.2em 0;
}

.ui-tabs .ui-tabs-nav li {
  list-style: none;
  float: left;
  position: relative;
  top: 0;
  margin: 1px 0.2em 0 0;
  border-bottom-width: 0;
  padding: 0;
  white-space: nowrap;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  float: left;
  padding: 0.5em 1em;
  text-decoration: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -1px;
  padding-bottom: 1px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
  cursor: text;
}

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
  cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
  display: block;
  border-width: 0;
  padding: 1em 1.4em;
  background: none;
}

.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  box-shadow: 0 0 5px #aaa;
}

body .ui-tooltip {
  border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.1em;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1em;
}

.ui-widget-content {
  margin-top: 4px;
  font-size: 12px;
  font-size: 0.75rem;
  border-radius: 2px;
  -o-box-shadow: 0 1px 5px 0 #2f3133;
  box-shadow: 0 1px 5px 0 #2f3133;
  padding: 20px 15px;
  border-width: 0;
  text-align: center;
  background-color: #fff;
  cursor: default;
  z-index: 100;
  width: 273px;
}

.ui-widget-content a {
  color: #222222;
}

.ui-widget-header {
  color: #222222;
  font-weight: bold;
}

.ui-widget-header a {
  color: #222222;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 1px solid #63666a;
  width: 30px;
  line-height: 30px;
  text-align: center;
  color: #555555;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
  color: #555555;
  text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover {
  background: #63666a;
  color: #fff;
}

.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  background: #bec3c9;
  background: #bec3c9;
  font-weight: normal;
  color: #fff;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
  color: #212121;
  text-decoration: none;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  font-weight: normal;
  color: #212121;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #212121;
  text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  background: #0758a8;
  color: #fff;
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #363636;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #cd0a0a;
  color: #cd0a0a;
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
  color: #cd0a0a;
}

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
  color: #cd0a0a;
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: bold;
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: 0.7;
  filter: Alpha(Opacity=70);
  /* support: IE8 */
  font-weight: normal;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  filter: Alpha(Opacity=35);
  /* support: IE8 */
  background-image: none;
}

.ui-state-disabled .ui-icon {
  filter: Alpha(Opacity=35);
  /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
  width: 30px;
  height: 30px;
}

/* positioning */
.ui-icon-blank {
  background-position: 16px 16px;
}

.ui-icon-carat-1-n {
  background-position: 0 0;
}

.ui-icon-carat-1-ne {
  background-position: -16px 0;
}

.ui-icon-carat-1-e {
  background-position: -32px 0;
}

.ui-icon-carat-1-se {
  background-position: -48px 0;
}

.ui-icon-carat-1-s {
  background-position: -64px 0;
}

.ui-icon-carat-1-sw {
  background-position: -80px 0;
}

.ui-icon-carat-1-w {
  background-position: -96px 0;
}

.ui-icon-carat-1-nw {
  background-position: -112px 0;
}

.ui-icon-carat-2-n-s {
  background-position: -128px 0;
}

.ui-icon-carat-2-e-w {
  background-position: -144px 0;
}

.ui-icon-triangle-1-n {
  background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
  background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
  background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
  background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
  background-position: -64px -16px;
}

.ui-icon-triangle-1-sw {
  background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
  background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
  background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
  background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
  background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
  background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
  background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
  background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
  background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
  background-position: -64px -32px;
}

.ui-icon-arrow-1-sw {
  background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
  background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
  background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
  background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
  background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
  background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
  background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
  background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
  background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
  background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
  background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
  background-position: 0 -48px;
}

.ui-icon-arrowthick-1-ne {
  background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
  background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
  background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
  background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
  background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
  background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
  background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
  background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
  background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
  background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
  background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
  background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
  background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
  background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
  background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
  background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
  background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
  background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
  background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
  background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
  background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
  background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
  background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
  background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
  background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
  background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
  background-position: -176px -64px;
}

.ui-icon-arrow-4 {
  background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
  background-position: -16px -80px;
}

.ui-icon-extlink {
  background-position: -32px -80px;
}

.ui-icon-newwin {
  background-position: -48px -80px;
}

.ui-icon-refresh {
  background-position: -64px -80px;
}

.ui-icon-shuffle {
  background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
  background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
  background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
  background-position: 0 -96px;
}

.ui-icon-folder-open {
  background-position: -16px -96px;
}

.ui-icon-document {
  background-position: -32px -96px;
}

.ui-icon-document-b {
  background-position: -48px -96px;
}

.ui-icon-note {
  background-position: -64px -96px;
}

.ui-icon-mail-closed {
  background-position: -80px -96px;
}

.ui-icon-mail-open {
  background-position: -96px -96px;
}

.ui-icon-suitcase {
  background-position: -112px -96px;
}

.ui-icon-comment {
  background-position: -128px -96px;
}

.ui-icon-person {
  background-position: -144px -96px;
}

.ui-icon-print {
  background-position: -160px -96px;
}

.ui-icon-trash {
  background-position: -176px -96px;
}

.ui-icon-locked {
  background-position: -192px -96px;
}

.ui-icon-unlocked {
  background-position: -208px -96px;
}

.ui-icon-bookmark {
  background-position: -224px -96px;
}

.ui-icon-tag {
  background-position: -240px -96px;
}

.ui-icon-home {
  background-position: 0 -112px;
}

.ui-icon-flag {
  background-position: -16px -112px;
}

.ui-icon-calendar {
  background-position: -32px -112px;
}

.ui-icon-cart {
  background-position: -48px -112px;
}

.ui-icon-pencil {
  background-position: -64px -112px;
}

.ui-icon-clock {
  background-position: -80px -112px;
}

.ui-icon-disk {
  background-position: -96px -112px;
}

.ui-icon-calculator {
  background-position: -112px -112px;
}

.ui-icon-zoomin {
  background-position: -128px -112px;
}

.ui-icon-zoomout {
  background-position: -144px -112px;
}

.ui-icon-search {
  background-position: -160px -112px;
}

.ui-icon-wrench {
  background-position: -176px -112px;
}

.ui-icon-gear {
  background-position: -192px -112px;
}

.ui-icon-heart {
  background-position: -208px -112px;
}

.ui-icon-star {
  background-position: -224px -112px;
}

.ui-icon-link {
  background-position: -240px -112px;
}

.ui-icon-cancel {
  background-position: 0 -128px;
}

.ui-icon-plus {
  background-position: -16px -128px;
}

.ui-icon-plusthick {
  background-position: -32px -128px;
}

.ui-icon-minus {
  background-position: -48px -128px;
}

.ui-icon-minusthick {
  background-position: -64px -128px;
}

.ui-icon-close {
  background-position: -80px -128px;
}

.ui-icon-closethick {
  background-position: -96px -128px;
}

.ui-icon-key {
  background-position: -112px -128px;
}

.ui-icon-lightbulb {
  background-position: -128px -128px;
}

.ui-icon-scissors {
  background-position: -144px -128px;
}

.ui-icon-clipboard {
  background-position: -160px -128px;
}

.ui-icon-copy {
  background-position: -176px -128px;
}

.ui-icon-contact {
  background-position: -192px -128px;
}

.ui-icon-image {
  background-position: -208px -128px;
}

.ui-icon-video {
  background-position: -224px -128px;
}

.ui-icon-script {
  background-position: -240px -128px;
}

.ui-icon-alert {
  background-position: 0 -144px;
}

.ui-icon-info {
  background-position: -16px -144px;
}

.ui-icon-notice {
  background-position: -32px -144px;
}

.ui-icon-help {
  background-position: -48px -144px;
}

.ui-icon-check {
  background-position: -64px -144px;
}

.ui-icon-bullet {
  background-position: -80px -144px;
}

.ui-icon-radio-on {
  background-position: -96px -144px;
}

.ui-icon-radio-off {
  background-position: -112px -144px;
}

.ui-icon-pin-w {
  background-position: -128px -144px;
}

.ui-icon-pin-s {
  background-position: -144px -144px;
}

.ui-icon-play {
  background-position: 0 -160px;
}

.ui-icon-pause {
  background-position: -16px -160px;
}

.ui-icon-seek-next {
  background-position: -32px -160px;
}

.ui-icon-seek-prev {
  background-position: -48px -160px;
}

.ui-icon-seek-end {
  background-position: -64px -160px;
}

.ui-icon-seek-start {
  background-position: -80px -160px;
}

/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
  background-position: -80px -160px;
}

.ui-icon-stop {
  background-position: -96px -160px;
}

.ui-icon-eject {
  background-position: -112px -160px;
}

.ui-icon-volume-off {
  background-position: -128px -160px;
}

.ui-icon-volume-on {
  background-position: -144px -160px;
}

.ui-icon-power {
  background-position: 0 -176px;
}

.ui-icon-signal-diag {
  background-position: -16px -176px;
}

.ui-icon-signal {
  background-position: -32px -176px;
}

.ui-icon-battery-0 {
  background-position: -48px -176px;
}

.ui-icon-battery-1 {
  background-position: -64px -176px;
}

.ui-icon-battery-2 {
  background-position: -80px -176px;
}

.ui-icon-battery-3 {
  background-position: -96px -176px;
}

.ui-icon-circle-plus {
  background-position: 0 -192px;
}

.ui-icon-circle-minus {
  background-position: -16px -192px;
}

.ui-icon-circle-close {
  background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
  background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
  background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
  background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
  background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
  background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
  background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
  background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
  background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
  background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
  background-position: -192px -192px;
}

.ui-icon-circle-check {
  background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
  background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
  background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
  background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
  background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
  background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
  background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
  background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
  background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
  background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
  background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
  background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
  background-position: -80px -224px;
}

/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 4px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 4px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 4px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 4px;
}

a.ui-corner-all {
  border-radius: 50%;
}

/* Overlays */
.ui-widget-overlay {
  opacity: 0.3;
  filter: Alpha(Opacity=30);
  /* support: IE8 */
}

.ui-widget-shadow {
  margin: -8px 0 0 -8px;
  padding: 8px;
  opacity: 0.3;
  filter: Alpha(Opacity=30);
  /* support: IE8 */
  border-radius: 8px;
}

.mtz-monthpicker-year {
  padding: 0.5em 1em;
}

body:not(.myinfoActive) #header:not(.hover):not(.sticky):not(.opened) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

body:not(.myinfoActive) #header:not(.hover):not(.sticky):not(.opened)>div {
  color: #fff;
}

body:not(.myinfoActive) #header:not(.hover):not(.sticky):not(.opened)>div>h1,
body:not(.myinfoActive) #header:not(.hover):not(.sticky):not(.opened)>div>button {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
}

#header {
  z-index: 15;
  top: 0;
}

#header.sticky {
  position: sticky;
}

#header:not(.sticky) {
  position: relative;
}

@media (min-width: 1025px) {
  #header:not(.hover):not(.sticky):not(.opened) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  #header:not(.hover):not(.sticky):not(.opened)>div {
    color: #fff;
  }

  #header:not(.hover):not(.sticky):not(.opened)>div>h1,
  #header:not(.hover):not(.sticky):not(.opened)>div>button {
    -moz-filter: grayscale(1) brightness(100);
    -ms-filter: grayscale(1) brightness(100);
    -o-filter: grayscale(1) brightness(100);
    filter: grayscale(1) brightness(100);
  }
}

#header.hover,
#header.sticky {
  border-bottom: 1px solid #E1E1E1;
  background: #fff;
}

#header.hover>nav {
  transition: all 0.3s;
  max-height: 400px;
  border-bottom: 1px solid #E1E1E1;
}

#header.hover>div>nav a.active {
  color: #37234D;
}

#header:not(.opened) section h1 {
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

#header:not(.opened) .buttons {
  display: none;
}

#header.opened {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: #fff;
}

@media (min-width: 1025px) {
  #header.opened {
    position: relative;
  }
}

#header.opened>nav {
  display: block !important;
  transition: unset;
  position: fixed;
  left: 0;
  width: 100%;
  color: #fff;
  top: 0;
  height: 100%;
  max-height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#header.opened>nav .btnTop {
  text-align: right;
}

@media (min-width: 1025px) {
  #header.opened>nav .btnTop>button {
    display: inline-block;
  }

  #header.opened>nav .btnTop>button.my {
    position: relative;
    top: 2px;
    padding-left: 30px;
    font-size: 18px;
    font-weight: 500;
    height: 21px;
    -moz-filter: grayscale(0%) brightness(100) !important;
    -ms-filter: grayscale(0%) brightness(100) !important;
    -o-filter: grayscale(0%) brightness(100) !important;
    filter: grayscale(0%) brightness(100) !important;
    background: url(../images/icon/iconMy.svg) no-repeat left center;
  }

  #header.opened>nav .btnTop>button.menuToggle {
    position: relative;
    width: 21px;
    height: 21px;
    margin-left: 40px;
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
    background: none;
  }

  #header.opened>nav .btnTop>button.menuToggle::before,
  #header.opened>nav .btnTop>button.menuToggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 25px;
    height: 2px;
    background: #fff;
  }

  #header.opened>nav .btnTop>button.menuToggle::before {
    transform: rotate(45deg);
  }

  #header.opened>nav .btnTop>button.menuToggle::after {
    transform: rotate(-45deg);
  }
}

@media (max-width: 1024px) {
  #header.opened>nav {
    top: 60px;
  }
}

#header.opened>nav::before {
  display: none;
}

#header.opened>nav section {
  width: 100%;
  margin-left: 0;
  padding: 0;
}

#header.opened>nav section+section {
  margin-top: 20px;
}

#header.opened>nav section:first-of-type {
  padding-top: 80px;
}

@media (max-width: 1024px) {
  #header.opened>nav section:first-of-type {
    padding-top: 0;
  }
}

#header.opened>nav section:first-of-type.hovered {
  padding-top: 80px;
}

@media (max-width: 1024px) {
  #header.opened>nav section:first-of-type.hovered {
    padding-top: 0;
  }
}

@media (min-width: 1025px) {
  #header.opened>nav section:nth-of-type(2) ul li:nth-child(even) {
    width: unset;
  }

  #header.opened>nav section:nth-of-type(2) ul li:nth-child(odd) {
    width: unset;
  }
}

@media (min-width: 1025px) {
  #header.opened>nav section ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
}

#header.opened>nav section ul li {
  text-align: left;
  width: 100%;
  padding-top: 10px;
}

@media (min-width: 1025px) {
  #header.opened>nav section ul li:nth-child(even) {
    width: 150px;
  }

  #header.opened>nav section ul li:nth-child(odd) {
    width: 114px;
  }

  #header.opened>nav section ul li+li {
    margin-top: 0;
  }
}

@media (max-width: 1024px) {
  #header.opened>nav section ul li {
    padding-top: 0;
  }
}

#header.opened>nav section ul li a {
  color: #B5ABC1;
}

@media (min-width: 1025px) {
  #header.opened>nav section ul li a {
    font-size: 14px;
  }
}

@media (max-width: 1024px) {
  #header.opened>nav section ul li a {
    font-size: 18px;
    display: block;
    width: 100%;
    line-height: 50px;
  }
}

#header.opened>nav section ul li.active a {
  color: #fff !important;
}

#header.opened>nav section.hovered {
  padding-top: 0;
  border-top: 0;
}

#header.opened>nav section.opened ul {
  max-height: 320px;
  padding: 20px 0;
}

#header.opened>nav section.opened ul li+li {
  margin-top: 0;
}

#header.opened>nav section.opened button:after {
  display: none;
}

#header.opened>nav h1 {
  width: 100%;
  text-align: left;
}

#header.opened>nav h1 button {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  line-height: 26px;
  text-align: left;
  letter-spacing: -0.015em;
  position: relative;
}

@media (max-width: 1024px) {
  #header.opened>nav h1 button {
    font-size: 20px;
  }
}

#header.opened>nav h1 button::before,
#header.opened>nav h1 button::after {
  content: "";
  position: absolute;
  right: 0;
  top: 11px;
  height: 1px;
  width: 14px;
  background: #fff;
}

#header.opened>nav h1 button::after {
  transform: rotate(90deg);
}

#header.opened>nav h1+ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}

#header.opened>nav>div {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 452px;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #2B1A3C url("../images/gwell/bgMyinfo.png") no-repeat center;
  background-size: cover;
}

@media (min-width: 1025px) {
  #header.opened>nav>div {
    padding: 30px 80px 70px 60px;
  }
}

@media (max-width: 1024px) {
  #header.opened>nav>div {
    padding: 45px 20px 100px;
    width: 100%;
    left: 0;
    right: 0;
    background: #2B1A3C url("../images/gwell/bgMyinfo.jpg") no-repeat center;
    background-size: cover;
  }
}

#header.opened>nav aside {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: unset;
  max-width: unset;
  width: 100%;
  padding: 0;
  margin-top: 45px;
}

#header.opened>nav aside>* {
  position: unset;
  width: calc(50% - 5px);
  color: #fff !important;
  background: rgba(246, 246, 246, 0.1) !important;
  border-radius: 4px;
}

@media (max-width: 640px) {
  #header.opened>nav aside>* {
    width: 100%;
  }

  #header.opened>nav aside>*+* {
    margin-top: 10px;
  }
}

@media (min-width: 1025px) {
  #header.opened>nav aside>* {
    height: 50px;
  }
}

@media (min-width: 1025px) {
  #header.opened>nav aside>* {
    padding-left: 0;
  }
}

#header.opened>nav aside>*::before {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
}

#header.opened>nav .buttons {
  position: relative;
  margin-top: 30px;
  text-align: right;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

#header.opened>nav .buttons a {
  height: 30px;
  line-height: 28px;
  min-width: 80px;
  padding: 0 15px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  font-size: 14px;
}

#header.opened>nav .buttons a:last-child {
  width: 115px;
}

#header.opened>nav .buttons a:hover {
  color: #212121;
  background: #fff;
  border: 1px solid #fff;
}

@media (max-width: 1024px) {
  #header.opened>nav .buttons a {
    height: 40px;
    line-height: 38px;
  }

  #header.opened>nav .buttons a:nth-child(-n+2) {
    width: calc(50% - 5px);
    margin-top: 50px;
  }

  #header.opened>nav .buttons a:last-child {
    position: absolute;
    left: unset;
    right: 0;
    top: 0;
    width: calc(50% - 5px);
  }
}

#header.opened>div .menuToggle {
  width: 40px;
  height: 40px;
  background: none;
}

#header.opened>div .menuToggle::before,
#header.opened>div .menuToggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 25px;
  height: 2px;
  background: #212121;
}

#header.opened>div .menuToggle::before {
  transform: rotate(45deg);
}

#header.opened>div .menuToggle::after {
  transform: rotate(-45deg);
}

#header>div {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 1480px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  #header>div {
    height: 90px;
  }
}

@media (max-width: 1024px) {
  #header>div {
    height: 60px;
  }
}

#header>div>.h1 {
  background: url("../images/gwell/logo.svg") no-repeat center;
  background-size: 100%;
}

#header>div>.h1 a {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 1025px) {
  #header>div>.h1 {
    width: 122px;
    height: 28px;
  }
}

@media (max-width: 1024px) {
  #header>div>.h1 {
    width: 90px;
    height: 21px;
  }
}

#header>div .my {
  height: 21px;
  background: url("../images/icon/iconMy.svg") no-repeat left center;
}

@media (min-width: 1025px) {
  #header>div .my {
    position: relative;
    right: 70px;
    padding-left: 30px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 21px;
  }
}

@media (max-width: 1024px) {
  #header>div .my {
    position: absolute;
    right: 60px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    background-position: center center;
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
  }
}

#header>div .menuToggle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 40px;
  height: 40px;
  background-size: 21px;
}

@media (min-width: 1025px) {
  #header>div .menuToggle {
    background: url("../images/icon/iconMenu3.svg") no-repeat center;
  }
}

@media (max-width: 1024px) {
  #header>div .menuToggle {
    background: url("../images/icon/iconMenu2.svg") no-repeat center;
  }
}

@media (min-width: 1025px) {
  #header>div>nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    max-width: 652px;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }

  #header>div>nav a.active,
  #header>div>nav a:hover {
    font-weight: 700;
  }

  #header>div>nav a {
    width: 124px;
    margin: 0 20px;
    text-align: center;
  }
}

#header>nav {
  overflow: hidden;
  background: #fff;
}

#header>nav .btnTop>button {
  display: none;
}

@media (min-width: 1025px) {
  #header>nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 90px;
    max-height: 0;
  }

  #header>nav::before {
    z-index: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 1px;
    height: 1px;
    background: #E1E1E1;
  }

  #header>nav>div {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1240px;
    min-width: 315px;
    padding-left: 20px;
    padding-right: 20px;
    padding-left: 17px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
  }

  #header>nav section {
    width: 124px;
    padding: 45px 0 50px;
    text-align: center;
    margin: 0 20px;
  }

  #header>nav section.hovered {
    z-index: 1;
    position: relative;
    padding-top: 43px;
    border-top: 2px solid #46296E;
  }

  #header>nav section ul {
    font-size: 16px;
    line-height: 1.1;
  }

  #header>nav section ul li+li {
    margin-top: 20px;
  }

  #header>nav section ul a {
    color: #666;
  }

  #header>nav section ul a:hover {
    font-weight: 500;
    color: #212121;
  }

  #header>nav section ul li.active a {
    font-weight: 700;
    color: #46296E;
  }

  #header>nav aside {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1480px;
    padding-right: 20px;
    padding-left: 20px;
  }

  #header>nav aside>* {
    position: absolute;
    right: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 163px;
    height: 50px;
  }

  #header>nav aside>*:first-child {
    top: 40px;
  }

  #header>nav aside>*:last-child {
    top: 100px;
  }
}

@media (max-width: 1024px) {
  #header>nav {
    display: none;
    width: 100%;
    height: calc(100vh - 60px);
    height: calc(var(--vh, 1vh) * 100 - 60px);
    padding-top: 80px;
    overflow: auto;
    border-top: 1px solid #E1E1E1;
  }

  #header>nav>div {
    padding: 0 20px;
  }

  #header>nav>div section {
    padding-bottom: 30px;
  }

  #header>nav>div section button {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.02em;
    font-weight: 500;
  }

  #header>nav>div section ul {
    max-height: 0;
    transition: max-height 0.3s;
    overflow: hidden;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
    font-weight: 500;
  }

  #header>nav>div section ul li {
    padding-top: 20px;
  }

  #header>nav>div section ul li.active {
    color: #fff;
  }

  #header>nav>div section.opened ul {
    max-height: 400px;
  }

  #header>nav>div section.active button {
    font-weight: 700;
    color: #fff;
  }

  #header>nav aside {
    width: 100%;
    margin-top: 45px;
  }

  #header>nav aside>* {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 60px;
    padding-left: 20px;
    color: #fff !important;
    background: rgba(246, 246, 246, 0.1) !important;
    border-radius: 4px;
  }

  #header>nav aside>*::before {
    -moz-filter: grayscale(1) brightness(100);
    -ms-filter: grayscale(1) brightness(100);
    -o-filter: grayscale(1) brightness(100);
    filter: grayscale(1) brightness(100);
  }
}

#header>nav aside>* {
  background: #f6f6f6;
  font-size: 16px;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: #37234D;
}

#header>nav aside>*::before {
  content: "";
  margin-right: 10px;
  width: 20px;
  height: 20px;
  background: url("../images/icon/iconCalendar2.svg") no-repeat center;
  background-size: 20px;
}

body:not(.myinfoActive) #myinfo {
  display: none;
}

@media (min-width: 1025px) {
  body.myinfoActive #header {
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 1024px) {
  body.myinfoActive #header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: #fff;
  }
}

#myinfo {
  z-index: 11;
  position: fixed;
  left: 0;
  width: 100%;
  color: #fff;
}

@media (min-width: 1025px) {
  #myinfo {
    top: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  #myinfo>div {
    position: absolute;
    right: 0;
    top: 0;
    width: 452px;
    height: 100%;
    padding-right: 80px;
    padding-left: 60px;
    padding-bottom: 70px;
    overflow-y: auto;
    background: #2B1A3C url("../images/gwell/bgMyinfo.png") no-repeat center;
    background-size: cover;
  }

  #myinfo .close {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 482px;
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
    margin: auto;
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    border-radius: 50%;
  }

  #myinfo .close::before,
  #myinfo .close::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 18px;
    height: 1px;
    background: #fff;
  }

  #myinfo .close::before {
    transform: rotate(45deg);
  }

  #myinfo .close::after {
    transform: rotate(-45deg);
  }

  #myinfo .btnTop {
    position: absolute;
    top: 30px;
    right: 0;
    padding-right: 80px;
    z-index: 50;
  }

  #myinfo .btnTop button.my {
    position: relative;
    top: 2px;
    padding-left: 30px;
    font-size: 18px;
    font-weight: 500;
    height: 21px;
    -moz-filter: grayscale(0%) brightness(100) !important;
    -ms-filter: grayscale(0%) brightness(100) !important;
    -o-filter: grayscale(0%) brightness(100) !important;
    filter: grayscale(0%) brightness(100) !important;
    background: url(../images/icon/iconMy.svg) no-repeat left center;
  }

  #myinfo .btnTop button.menuToggle {
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0.5rem;
    width: 21px;
    height: 21px;
    margin-left: 40px;
    -moz-filter: grayscale(0%) brightness(100) !important;
    -ms-filter: grayscale(0%) brightness(100) !important;
    -o-filter: grayscale(0%) brightness(100) !important;
    filter: grayscale(0%) brightness(100) !important;
    background: url("../images/icon/iconMenu3.svg") no-repeat center;
    background-size: 100%;
  }
}

@media (max-width: 1024px) {
  #myinfo {
    top: 60px;
    height: calc(100vh - 60px);
    height: calc(var(--vh, 1vh) * 100 - 60px);
    overflow: auto;
    padding: 45px 20px 100px;
    background: url("../images/gwell/bgMyinfo.jpg") no-repeat center;
    background-size: cover;
  }

  #myinfo .btnTop {
    display: none;
  }
}

@media (min-width: 1025px) {
  #myinfo .loggedOut {
    padding-top: 208px;
  }
}

@media (min-width: 1025px) {
  #myinfo .loggedOut>div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 40px;
  }
}

#myinfo .loggedOut>div a {
  line-height: 50px;
  border-radius: 2px;
  background: #fff;
  text-align: center;
  color: #212121;
}

@media (min-width: 1025px) {
  #myinfo .loggedOut>div a {
    width: 150px;
  }
}

@media (max-width: 1024px) {
  #myinfo .loggedOut>div a {
    display: block;
  }

  #myinfo .loggedOut>div a+a {
    margin-top: 15px;
  }
}

@media (min-width: 1025px) {
  #myinfo .loggedIn {
    padding-top: 116px;
  }
}

#myinfo .loggedIn .form .selectBox {
  position: relative;
  margin-top: 20px;
}

#myinfo .loggedIn .form .selectBox>button {
  position: relative;
  width: 100%;
  padding: 0 70px 0 20px;
  height: 50px;
  line-height: 50px;
  background: #4b395f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  border-radius: 30px;
}

#myinfo .loggedIn .form .selectBox>button::after {
  position: absolute;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 1px 1px;
  border-color: #fff;
  border-style: solid;
  transform: rotate(-45deg);
  top: 20px;
  right: 20px;
}

#myinfo .loggedIn .form .selectBox>button.active::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 1px 1px;
  border-color: #fff;
  border-style: solid;
  transform: rotate(135deg);
  top: 25px;
  right: 20px;
}

#myinfo .loggedIn .form .selectBox .down {
  display: none;
  position: relative;
  padding: 20px;
  margin-top: 10px;
  z-index: 20;
  background: #fff;
  border-radius: 4px;
}

#myinfo .loggedIn .form .selectBox .down>button {
  font-size: 14px;
  color: #666;
}

#myinfo .loggedIn .form .selectBox .down>button.selected,
#myinfo .loggedIn .form .selectBox .down>button:hover {
  font-weight: 700;
  color: #2B1A3B;
}

#myinfo .loggedIn .form .selectBox .down>button+button {
  margin-top: 17px;
}

@media (max-width: 1024px) {
  #myinfo .loggedIn .btn {
    margin-top: 30px;
    text-align: right;
  }
}

#myinfo .loggedIn .btn>button {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

@media (min-width: 1025px) {
  #myinfo .loggedIn .btn>button {
    position: absolute;
    right: 80px;
    bottom: 40px;
    width: 80px;
    line-height: 28px;
  }
}

@media (max-width: 1024px) {
  #myinfo .loggedIn .btn>button {
    width: 100px;
    line-height: 38px;
  }
}

@media (min-width: 1025px) {
  #myinfo .loggedIn>ul {
    padding-top: 55px;
  }
}

@media (max-width: 1024px) {
  #myinfo .loggedIn>ul {
    padding-top: 45px;
  }
}

#myinfo .loggedIn>ul>li {
  position: relative;
}

#myinfo .loggedIn>ul>li+li {
  margin-top: 22px;
}

#myinfo .loggedIn>ul>li>a,
#myinfo .loggedIn>ul>li>button {
  text-align: left;
  display: block;
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 1025px) {

  #myinfo .loggedIn>ul>li>a,
  #myinfo .loggedIn>ul>li>button {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }
}

@media (max-width: 1024px) {

  #myinfo .loggedIn>ul>li>a,
  #myinfo .loggedIn>ul>li>button {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
    font-weight: 700;
  }
}

@media (min-width: 1025px) {
  #myinfo .loggedIn>ul>li>button {
    position: relative;
  }

  #myinfo .loggedIn>ul>li>button::before,
  #myinfo .loggedIn>ul>li>button::after {
    content: "";
    position: absolute;
    right: 0;
    top: 11px;
    height: 1px;
    width: 14px;
    background: #fff;
  }

  #myinfo .loggedIn>ul>li>button::after {
    transform: rotate(90deg);
  }
}

@media (max-width: 1024px) {

  #myinfo .loggedIn>ul>li>button::before,
  #myinfo .loggedIn>ul>li>button::after {
    content: "";
    position: absolute;
    right: 0;
    top: 11px;
    height: 1px;
    width: 14px;
    background: #fff;
  }

  #myinfo .loggedIn>ul>li>button::after {
    transform: rotate(90deg);
  }
}

#myinfo .loggedIn>ul>li ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}

@media (min-width: 1025px) {
  #myinfo .loggedIn>ul>li ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  #myinfo .loggedIn>ul>li ul li:nth-child(odd) {
    width: 150px;
  }

  #myinfo .loggedIn>ul>li ul li:nth-child(even) {
    width: 117px;
  }

  #myinfo .loggedIn>ul>li ul li {
    padding-top: 10px;
  }

  #myinfo .loggedIn>ul>li ul li a {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    color: #B5ABC1;
  }

  #myinfo .loggedIn>ul>li ul li a:hover {
    color: #fff;
  }
}

@media (max-width: 1024px) {
  #myinfo .loggedIn>ul>li ul li {
    margin-top: 10px;
  }

  #myinfo .loggedIn>ul>li ul li a {
    display: block;
    padding: 0 15px;
    border-radius: 3px;
    background: none;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
    line-height: 50px;
    color: #b5abc1;
  }

  #myinfo .loggedIn>ul>li ul li a:hover {
    background: none;
    font-weight: 700;
    color: #fff;
  }
}

#myinfo .loggedIn>ul>li.active button::after {
  display: none;
}

@media (min-width: 1025px) {
  #myinfo .loggedIn>ul>li.active button::after {
    transform: rotate(135deg);
    bottom: 0;
  }
}

@media (min-width: 1025px) {
  #myinfo .loggedIn>ul>li.active ul {
    max-height: 200px;
    padding: 20px 0;
  }
}

@media (max-width: 1024px) {
  #myinfo .loggedIn>ul>li.active ul {
    max-height: 550px;
    padding-top: 10px;
  }
}

@media (min-width: 1025px) {
  #myinfo .h1 {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.025em;
  }
}

@media (max-width: 1024px) {
  #myinfo .h1 {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
  }
}

#footer {
  background: #212121;
  word-break: keep-all;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  color: #b1b1b1;
}

#footer>div {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 60px;
  padding-bottom: 60px;
}

#footer .h1 {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  margin-bottom: 30px;
  width: 159px;
  height: 27px;
  background: url("../images/shinyoung/common/logoWhite.svg") no-repeat center;
}

#footer .info {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

@media (max-width: 640px) {
  #footer .info {
    display: block;
  }

  #footer .info span {
    display: none;
  }
}

#footer .copyright {
  margin-top: 10px;
}

@media (min-width: 386px) {
  #footer .copyright br {
    display: none;
  }
}

@media (min-width: 1025px) {
  #footer .familySite {
    position: absolute;
    right: 20px;
    top: 60px;
    width: 188px;
  }
}

@media (max-width: 1024px) {
  #footer .familySite {
    position: relative;
    margin-top: 30px;
  }
}

#footer .familySite button {
  position: relative;
  width: 100%;
  height: 40px;
  padding-left: 17px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  text-align: left;
  color: #fff;
}

#footer .familySite button::before,
#footer .familySite button::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 17px;
  margin: auto;
  width: 18px;
  height: 1px;
  background: #fff;
}

#footer .familySite button:not(.active)::after {
  transform: rotate(90deg);
}

#footer .familySite ul {
  z-index: 10;
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  padding: 0 17px 20px;
  border-color: #c8c8c8;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-radius: 2px 2px 0 0;
  background: #111;
  overflow: auto;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  color: #c8c8c8;
}

@media (min-width: 1025px) {
  #footer .familySite ul {
    height: 150px;
  }
}

@media (max-width: 1024px) {
  #footer .familySite ul {
    height: 260px;
  }
}

#footer .familySite ul strong {
  display: block;
  padding-top: 20px;
  font-weight: 700;
  color: #fff;
}

#footer .familySite ul li+li {
  margin-top: 5px;
}

@media (min-width: 1025px) {
  #footer .terms {
    position: absolute;
    bottom: 80px;
    right: 136px;
  }
}

@media (max-width: 1024px) {
  #footer .terms {
    margin-top: 30px;
  }
}

#footer .terms a:hover {
  color: #fff;
}

#footer .sns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: 85px;
}

@media (min-width: 1025px) {
  #footer .sns {
    position: absolute;
    bottom: 72px;
    right: 20px;
  }
}

@media (max-width: 1024px) {
  #footer .sns {
    margin-top: 30px;
  }
}

#footer .sns>* {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 35px;
  height: 35px;
  background-position: center;
  background-repeat: no-repeat;
}

#footer .sns .youtube {
  background-image: url("../images/icon/iconYoutube3.svg");
}

#footer .sns .instagram {
  background-image: url("../images/icon/iconInstagram2.svg");
}

.jump2top {
  z-index: 10;
  position: sticky;
  display: none;
  bottom: 0;
}

@media (min-width: 1025px) {
  .jump2top {
    padding-bottom: 40px;
  }
}

@media (max-width: 1024px) {
  .jump2top {
    padding-bottom: 20px;
  }
}

.jump2top button {
  z-index: 1;
  position: absolute;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 50px;
  height: 50px;
  border: 1px solid #999;
  background: #37234D url("../images/icon/iconArrowInvert2.svg") no-repeat center;
}

@media (min-width: 1025px) {
  .jump2top button {
    right: 40px;
    bottom: 40px;
  }
}

@media (max-width: 1024px) {
  .jump2top button {
    right: 20px;
    bottom: 20px;
  }
}

#contents {
  min-height: calc(100vh + 0px);
  min-height: calc(var(--vh, 1vh) * 100 + 0px);
}

@media (min-width: 1025px) {
  #contents {
    margin-top: -91px;
  }
}

@media (max-width: 1024px) {
  #contents {
    margin-top: -61px;
  }
}

#contents.sales .contentHeader {
  background-image: url("../images/gwell/vi/viSales.jpg");
}

#contents.cs .contentHeader {
  background-image: url("../images/gwell/vi/viCs.jpg");
}

#contents.pr .contentHeader {
  background-image: url("../images/gwell/vi/viPr.jpg");
}

#contents .contentHeader {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
}

@media (min-width: 1025px) {
  #contents .contentHeader {
    margin-bottom: 100px;
    height: 560px;
  }
}

@media (max-width: 1024px) {
  #contents .contentHeader {
    margin-bottom: 50px;
    height: 250px;
  }
}

#contents .contentHeader>div {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 1024px) {
  #contents .contentHeader>div {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    height: 250px;
    padding-top: 60px;
  }
}

@media (min-width: 1025px) {
  #contents .contentHeader div>h2 {
    padding-top: 248px;
  }
}

#contents .contentHeader p {
  margin-top: 12px;
}

#contents .contentHeader .breadcrumb {
  position: absolute;
  right: 20px;
  top: 520px;
}

@media (min-width: 1025px) {
  #contents .contentHeader .breadcrumb {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
}

#contents .contentHeader .breadcrumb>li {
  position: relative;
}

#contents .contentHeader .breadcrumb>li+li {
  margin-left: 23px;
  padding-left: 23px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

#contents .contentHeader .breadcrumb>li a.home {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  width: 16px;
  height: 17px;
  background: url("../images/icon/iconHome2.svg") no-repeat center;
}

#contents .contentHeader .breadcrumb>li button {
  position: relative;
  width: 160px;
  height: 18px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  line-height: 18px;
  font-weight: 500;
  text-align: left;
}

#contents .contentHeader .breadcrumb>li button::after {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 2px 2px;
  border-color: #fff;
  border-style: solid;
  transform: rotate(-45deg);
}

#contents .contentHeader .breadcrumb>li button.active {
  font-weight: 700;
}

#contents .contentHeader .breadcrumb>li button.active::after {
  top: 10px;
  transform: rotate(135deg);
}

#contents .contentHeader .breadcrumb>li button.active+div {
  max-height: 400px;
}

#contents .contentHeader .breadcrumb>li div {
  position: absolute;
  left: -20px;
  right: -45px;
  max-height: 0;
  padding: 0 20px;
  overflow: hidden;
  color: #212121;
  transition: max-height 0.4s ease-in-out;
}

#contents .contentHeader .breadcrumb>li div ul {
  z-index: 3;
  position: relative;
  margin-top: 1.125em;
  margin-bottom: 20px;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 25px;
  -ms-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.102);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.102);
  background: #fff;
  line-height: 2.5em;
  white-space: nowrap;
}

#contents .contentHeader .breadcrumb>li div ul a:hover,
#contents .contentHeader .breadcrumb>li div ul a:focus,
#contents .contentHeader .breadcrumb>li div ul li.selected {
  color: #46296E;
}

#contents .contentHeader .breadcrumb>li div ul li.selected {
  font-weight: 700;
}

#contents .contentHeader .breadcrumb>li div ul::before {
  content: "";
  position: absolute;
  top: -32px;
  right: 22px;
  display: block;
  -moz-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  -ms-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  -o-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.102));
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 8px;
  border-color: transparent transparent #fff transparent;
}

/* body {
  background: #f9f9f9;
} */
body.print {
  background: #fff;
}

body #header {
  border-bottom: 1px solid #E1E1E1 !important;
}

body #header>div {
  color: #212121 !important;
}

body #header>div>.h1,
body #header>div>button {
  -moz-filter: grayscale(0%) brightness(1) !important;
  -ms-filter: grayscale(0%) brightness(1) !important;
  -o-filter: grayscale(0%) brightness(1) !important;
  filter: grayscale(0%) brightness(1) !important;
  color: #212121;
}

#header {
  z-index: 15;
  background: #fff;
}

#myinfo {
  z-index: 20;
}

#contents {
  min-height: calc(100vh + 0px);
  min-height: calc(var(--vh, 1vh) * 100 + 0px);
}

@media (min-width: 1025px) {
  #contents {
    margin-top: -90px;
  }
}

@media (max-width: 1024px) {
  #contents {
    margin-top: 0 !important;
  }
}

@media (max-width: 1024px) {
  #contents:not(.joinStep) .contentHeader>div .inner {
    display: none;
  }
}

#contents.myinfoCont .contentHeader {
  background-image: url("../images/gwell/vi/viMy.svg");
  background-position: 90% 100%;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 439px 250px;
  background-color: #fff;
  color: #212121;
  border-bottom: 1px solid #E1E1E1;
}

@media (max-width: 1024px) {
  #contents.myinfoCont .contentHeader {
    background-position: 100% 100%;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .contentHeader .titTxt .form .selectBox>div>button {
    height: 40px;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .contentHeader {
    margin-bottom: 0;
    margin-top: 90px;
    height: 250px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .contentHeader {
    margin-bottom: 0;
    height: 60px;
    background-size: 339px 150px;
  }
}

#contents.myinfoCont .contentHeader>div {
  position: relative;
  display: table;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 1024px) {
  #contents.myinfoCont .contentHeader>div {
    padding: 0 20px;
  }
}

#contents.myinfoCont .contentHeader>div .inner {
  display: table-cell;
  height: 250px;
  vertical-align: middle;
}

#contents.myinfoCont .contentHeader>div .inner::before {
  display: inline-block;
  content: "";
  vertical-align: middle;
  margin-right: 15px;
  width: 120px;
  height: 120px;
  border-radius: 120px;
  background-image: url("../images/gwell/page/iconMyinfoVi.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60px;
  background-color: #F8F8F9;
}

@media (max-width: 1024px) {
  #contents.myinfoCont .contentHeader>div .inner::before {
    width: 80px;
    height: 80px;
    background-size: 50px;
  }
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt {
  display: inline-block;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .contentHeader>div .inner>.titTxt {
    vertical-align: middle;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .contentHeader>div .inner>.titTxt {
    vertical-align: 115px;
  }
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt dd,
#contents.myinfoCont .contentHeader>div .inner>.titTxt p {
  margin-top: 8px;
}

@media (max-width: 640px) {

  #contents.myinfoCont .contentHeader>div .inner>.titTxt dd,
  #contents.myinfoCont .contentHeader>div .inner>.titTxt p {
    display: block;
  }
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt dd {
  margin-top: 0;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form {
  padding-top: 0;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox {
  position: relative;
  height: 36px;
  line-height: 36px;
  margin-top: 0;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #707070;
  text-align: left;
  color: #666;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 30px !important;
  color: #212121;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button:not(.placeholder):not(.active) {
  font-weight: 700;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-45deg);
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button.placeholder {
  color: #a5a5a5;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button.active {
  color: #46296E;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button.active::after {
  border-color: #46296E;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>div {
  z-index: 3;
  position: absolute;
  display: none;
  width: 100%;
  overflow: auto;
  background: #fff;
  -ms-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: #46296E;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>div button {
  width: 100%;
  line-height: 2.5 !important;
  text-align: left;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>div button.selected {
  color: #46296E;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>div>button:first-child {
    margin-top: 10px;
  }

  #contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>div>button:last-child {
    margin-bottom: 10px;
  }

  #contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button,
  #contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>div button {
    padding-left: 10%;
  }

  #contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button {
    height: 80px;
  }

  #contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button::after {
    right: 10%;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>div>button:first-child {
    margin-top: 5px;
  }

  #contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>div>button:last-child {
    margin-bottom: 5px;
  }

  #contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button {
    height: 50px;
  }

  #contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button::after {
    right: 5px;
  }
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button {
  padding-left: 0;
  padding-right: 25px;
  font-size: 16px;
  line-height: 20px;
  height: 100%;
  border-bottom: 0;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button:not(.placeholder):not(.active) {
  font-weight: 400;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button::after {
  position: absolute;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-45deg);
  top: 0px;
  right: 8px;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>button.active::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(135deg);
  top: 8px;
  right: 8px;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>div {
  width: 100%;
  min-width: 320px;
  border-top: 0;
  top: 40px;
  left: -12px;
}

#contents.myinfoCont .contentHeader>div .inner>.titTxt .form .selectBox>div button {
  padding-left: 5%;
  font-size: 16px;
  letter-spacing: -0.75px;
  line-height: 1.75 !important;
}

#contents.myinfoCont .contentHeader>div .inner .rCont {
  position: absolute;
  top: 80px;
  right: 20px;
  text-align: right;
}

#contents.myinfoCont .contentHeader>div .inner .rCont p {
  padding-bottom: 15px;
}

#contents.myinfoCont .contentHeader>div .inner .rCont a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
  min-width: 100px;
  background: #37234D;
  color: #fff;
}

#contents.myinfoCont .contentHeader>div .inner .rCont a::before,
#contents.myinfoCont .contentHeader>div .inner .rCont a::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.myinfoCont .contentHeader>div .inner .rCont a:not(:disabled):hover,
#contents.myinfoCont .contentHeader>div .inner .rCont a:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.myinfoCont .contentHeader>div .inner .rCont a:not(:disabled):hover::before,
#contents.myinfoCont .contentHeader>div .inner .rCont a:not(:disabled):hover::after,
#contents.myinfoCont .contentHeader>div .inner .rCont a:not(:disabled):focus::before,
#contents.myinfoCont .contentHeader>div .inner .rCont a:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .contentHeader>div .inner .rCont a {
    font-size: 16px;
    font-size: 14px;
    min-width: 100px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.myinfoCont .contentHeader>div .inner .rCont a::before {
    margin-right: 10px;
  }

  #contents.myinfoCont .contentHeader>div .inner .rCont a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .contentHeader>div .inner .rCont a {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.myinfoCont .contentHeader>div .inner .rCont a::before {
    margin-right: 14px;
  }

  #contents.myinfoCont .contentHeader>div .inner .rCont a::after {
    margin-left: 18px;
  }
}

#contents.myinfoCont .contentHeader>div .inner .rCont a .plus {
  margin-left: 15px;
  font-size: 20px;
  font-weight: 200;
}

@media (max-width: 1024px) {
  #contents.myinfoCont .contentHeader>div .inner .rCont {
    top: 95px;
  }

  #contents.myinfoCont .contentHeader>div .inner .rCont p {
    padding-bottom: 15px;
    font-size: 14px;
  }

  #contents.myinfoCont .contentHeader>div .inner .rCont a {
    height: 35px;
    font-size: 12px;
  }
}

#contents.myinfoCont .contentHeader dt,
#contents.myinfoCont .contentHeader .h1 {
  font-weight: 700;
}

@media (min-width: 1025px) {

  #contents.myinfoCont .contentHeader dt,
  #contents.myinfoCont .contentHeader .h1 {
    padding-top: 0;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .contentHeader dt,
  #contents.myinfoCont .contentHeader .h1 {
    padding-top: 0;
  }
}

#contents.myinfoCont .titArea {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#contents.myinfoCont .titArea .h1 {
  padding-top: 50px;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: -0.025em;
}

#contents.myinfoCont .titArea h2 {
  padding-bottom: 60px;
}

@media (max-width: 1024px) {
  #contents.myinfoCont .titArea h2 {
    padding: 40px 0;
    font-size: 22px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .titArea+.join {
    padding: 20px 20px !important;
  }
}

#contents.myinfoCont .bgBox {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  padding: 60px 80px;
  margin-bottom: 100px;
  background-color: #fff;
}

#contents.myinfoCont .bgBox header {
  padding-bottom: 20px;
  text-align: center;
}

#contents.myinfoCont .bgBox header .h1 {
  padding-bottom: 10px;
}

#contents.myinfoCont .bgBox header p {
  padding-top: 10px;
}

@media (max-width: 1024px) {
  #contents.myinfoCont .bgBox {
    margin-bottom: 0;
    padding: 40px 30px;
  }
}

@media (max-width: 640px) {
  #contents.myinfoCont .bgBox {
    padding: 35px 20px;
  }
}

#contents.myinfoCont .bgBox .h1 {
  margin-top: 0;
  padding-bottom: 20px;
  text-align: center;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: -0.025em;
}

@media (max-width: 640px) {
  #contents.myinfoCont .bgBox .h1 {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
    padding-bottom: 25px;
  }
}

#contents.myinfoCont .bgBox footer {
  padding-top: 40px;
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  #contents.myinfoCont .bgBox footer {
    padding-top: 30px;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont>.bgBox:first-child {
    margin-top: 190px;
  }

  #contents.myinfoCont .br {
    display: none;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont>.bgBox {
    margin-top: 0;
  }
}

#contents.myinfoCont footer {
  text-align: center;
}

@media (min-width: 1025px) {
  #contents.myinfoCont footer {
    padding-top: 80px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont footer {
    padding-top: 40px;
  }
}

#contents.myinfoCont footer button,
#contents.myinfoCont footer .btn {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
  min-width: 210px !important;
}

#contents.myinfoCont footer button::before,
#contents.myinfoCont footer button::after,
#contents.myinfoCont footer .btn::before,
#contents.myinfoCont footer .btn::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.myinfoCont footer button:not(:disabled):hover,
#contents.myinfoCont footer button:not(:disabled):focus,
#contents.myinfoCont footer .btn:not(:disabled):hover,
#contents.myinfoCont footer .btn:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.myinfoCont footer button:not(:disabled):hover::before,
#contents.myinfoCont footer button:not(:disabled):hover::after,
#contents.myinfoCont footer button:not(:disabled):focus::before,
#contents.myinfoCont footer button:not(:disabled):focus::after,
#contents.myinfoCont footer .btn:not(:disabled):hover::before,
#contents.myinfoCont footer .btn:not(:disabled):hover::after,
#contents.myinfoCont footer .btn:not(:disabled):focus::before,
#contents.myinfoCont footer .btn:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {

  #contents.myinfoCont footer button,
  #contents.myinfoCont footer .btn {
    font-size: 16px;
    min-width: 180px;
    height: 60px;
    padding: 0 20px;
    border-radius: 30px;
  }

  #contents.myinfoCont footer button::before,
  #contents.myinfoCont footer .btn::before {
    margin-right: 10px;
  }

  #contents.myinfoCont footer button::after,
  #contents.myinfoCont footer .btn::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont footer button,
  #contents.myinfoCont footer .btn {
    font-size: 14px;
    min-width: 180px;
    font-size: 16px;
    height: 50px;
    padding: 0 18px;
    border-radius: 25px;
  }

  #contents.myinfoCont footer button::before,
  #contents.myinfoCont footer .btn::before {
    margin-right: 14px;
  }

  #contents.myinfoCont footer button::after,
  #contents.myinfoCont footer .btn::after {
    margin-left: 18px;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont footer button,
  #contents.myinfoCont footer .btn {
    width: 100%;
    min-width: 180px !important;
    max-width: 200px;
  }
}

#contents.joinStep .contentHeader {
  position: relative;
  background-color: #37234D;
  height: 303px;
}

@media (max-width: 1024px) {
  #contents.joinStep .contentHeader {
    height: 264px;
  }
}

#contents.joinStep .contentHeader::after {
  position: absolute;
  bottom: 0;
  right: 7%;
  display: block;
  content: "";
  width: 532px;
  height: 303px;
  background-image: url("../images/gwell/vi/viMy.svg");
  background-size: 532px 303px;
  -moz-filter: grayscale(100) brightness(100);
  -ms-filter: grayscale(100) brightness(100);
  -o-filter: grayscale(100) brightness(100);
  filter: grayscale(100) brightness(100);
  color: #fff;
}

@media (max-width: 1024px) {
  #contents.joinStep .contentHeader::after {
    height: 321px;
  }
}

#contents.joinStep .contentHeader>div .inner {
  height: 303px;
}

@media (max-width: 1024px) {
  #contents.joinStep .contentHeader>div .inner {
    height: 321px;
  }
}

#contents.joinStep .contentHeader>div .inner::before {
  display: none;
}

#contents.joinStep .contentHeader>div .inner #title1depth {
  color: #fff;
}

@media (min-width: 1025px) {
  #contents.joinStep .contentHeader>div .inner .titTxt {
    vertical-align: 75px !important;
  }
}

#contents.joinStep .contentHeader>div .inner .titTxt dd,
#contents.joinStep .contentHeader>div .inner .titTxt p {
  color: #fff !important;
}

#contents .contentNav {
  margin-bottom: 140px;
  height: 70px;
  border-bottom: 1px solid #E1E1E1;
  background-color: #fff;
}

@media (min-width: 1025px) {
  #contents .contentNav .h1 {
    display: none;
  }
}

@media (max-width: 1024px) {
  #contents .contentNav {
    margin-bottom: 0;
    height: 0;
    border-bottom: 0;
  }
}

#contents .contentNav .h1 {
  display: none;
  position: relative;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #E1E1E1;
  font-weight: 400;
}

#contents .contentNav .h1::after {
  position: absolute;
  right: 20px;
  top: -5px;
  bottom: 0;
  margin: auto;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-45deg);
}

#contents .contentNav .h1.active::after {
  top: 0px;
  transform: rotate(135deg);
}

#contents .contentNav .h1.active+div {
  display: block;
}

#contents .contentNav .h1 button {
  padding: 0 20px;
  width: 100%;
  text-align: left;
}

#contents .contentNav h2 {
  position: relative;
  display: block;
  width: 100%;
  height: 70px;
  line-height: 70px;
  font-size: 16px;
  font-weight: 400;
}

@media (max-width: 1024px) {
  #contents .contentNav h2 {
    height: 60px;
    line-height: 60px;
  }
}

#contents .contentNav h2 a {
  display: block;
  width: 100%;
  height: 100%;
}

#contents .contentNav h2.on {
  color: #37234D;
  font-weight: 700;
}

#contents .contentNav h2.on+.depth {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
}

#contents .contentNav h2.active {
  color: #37234D;
  font-weight: 700;
}

#contents .contentNav h2.active::before {
  position: absolute;
  top: -1px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #37234D;
}

#contents .contentNav h2.active+.depth {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 1025px) {
  #contents .contentNav .h1 {
    display: none;
  }
}

#contents .contentNav .depth {
  display: none;
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  height: 60px;
  line-height: 60px;
  background-color: #37234D;
  border-radius: 0 0 10px 10px;
}

@media (max-width: 1024px) {
  #contents .contentNav .depth {
    top: 60px;
    max-width: 1000px;
    height: 50px;
    line-height: 50px;
  }
}

#contents .contentNav .depth .msg {
  width: 100%;
  color: #fff;
  text-align: center;
}

#contents .contentNav .depth ul {
  display: inline-flex;
  margin: 0 auto;
}

#contents .contentNav .depth ul>li {
  position: relative;
  width: auto;
  margin: 0 20px;
  text-align: center;
}

#contents .contentNav .depth ul>li+li:before {
  position: absolute;
  top: 25px;
  left: -20px;
  display: block;
  content: "";
  width: 1px;
  height: 14px;
  background: #fff;
  opacity: 0.2;
  vertical-align: middle;
}

#contents .contentNav .depth a {
  display: inline-block;
  width: 100%;
  color: #fff;
  opacity: 0.6;
  letter-spacing: 0.5px;
}

#contents .contentNav .depth a:hover,
#contents .contentNav .depth a.current {
  opacity: 1;
  font-weight: 500;
}

#contents .contentNav>ul {
  position: relative;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  /*
  @include middle {
      display:none;
      height:100%;
      padding:0;
      background:$invert;

      >section{
          h2{
              padding:0 20px;
              background:$invert;
              border-bottom:1px solid $pale1;
              &.active::before{
                  display:none;
              }
              &.acitve + .depth{
                  display:block !important;
              }
              button{
                  position:relative;
                  width:100%;
                  text-align:left;
              }
          }
          .depth{
              display:block !important;
              width:100%;
              height:100%;
              position:static;
              background:$bg3;
              transform:translateX(0);
              ul{
                  border-bottom:1px solid $pale1;
                  width:100%;
                  display:block;
                  li{
                      margin:0;
                      text-align:left;
                      a{
                          padding:0 20px;
                          opacity:1;
                          color:$primary;
                      }
                  }
              }
          }
      }
  }*/
}

@media (max-width: 1024px) {
  #contents .contentNav>ul.wideOnly {
    display: none;
  }
}

#contents .contentNav>ul>li {
  width: 100%;
  text-align: center;
}

/* 팝업 */
@media (min-width: 1025px) {
  .popup>div .full .caseSmall+.inputTxt {
    margin-top: 0;
  }

  .popup>div .full>label span {
    margin-top: 40px;
  }
}

.joinStepList {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

.joinStepList+.titArea .h1 {
  padding-top: 80px;
  font-size: 28px;
  line-height: 40px;
  font-weight: 400;
}

.joinStepList+.titArea .h1 strong {
  color: #37234D;
}

.joinStepList>ol {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  padding: 0;
  margin-top: -81px;
  background-color: #fff;
  height: 80px;
  line-height: 80px;
  z-index: 5;
  border-radius: 5px 5px 0 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

@media (max-width: 1024px) {
  .joinStepList>ol {
    margin-top: -61px;
    height: 60px;
    line-height: 60px;
  }
}

@media (max-width: 640px) {
  .joinStepList>ol {
    margin-top: -60px;
    height: 60px;
    line-height: 60px;
  }
}

.joinStepList>ol.step01 {
  background-color: #eae8ed;
}

.joinStepList>ol.step01>li:not(:nth-child(1)) {
  background-color: #eae8ed;
}

@media (max-width: 640px) {
  .joinStepList>ol.step01>li:not(:nth-child(1)) {
    display: none;
  }
}

.joinStepList>ol.step01>li:not(:nth-child(1)) em:before {
  -moz-filter: grayscale(100%) brightness(100%) !important;
  -ms-filter: grayscale(100%) brightness(100%) !important;
  -o-filter: grayscale(100%) brightness(100%) !important;
  filter: grayscale(100%) brightness(100%) !important;
  color: #212121;
}

.joinStepList>ol.step01>li:first-child {
  color: #37234D;
  background: #fff;
}

.joinStepList>ol.step01>li:first-child::after {
  position: absolute;
  top: 42px;
  right: -56px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 45px 80px;
  border-color: transparent #eae8ed transparent transparent;
  transform: rotate(-45deg);
}

@media (max-width: 640px) {
  .joinStepList>ol.step01>li:first-child::after {
    display: none;
  }
}

.joinStepList>ol.step01>li:nth-child(3)::before {
  position: absolute;
  top: -2px;
  left: 0;
  display: block;
  content: "";
  width: 1px;
  height: 85px;
  background: #fff;
  transform: rotate(18deg);
}

@media (max-width: 640px) {
  .joinStepList>ol.step01>li:nth-child(3)::before {
    display: none;
  }
}

.joinStepList>ol.step02>li {
  border-left: 0;
  margin: 0;
}

@media (max-width: 640px) {
  .joinStepList>ol.step02>li:not(:nth-child(2)) {
    display: none;
  }
}

.joinStepList>ol.step02>li:first-child {
  color: #37234D;
  background: #fff;
}

.joinStepList>ol.step02>li:first-child::after {
  position: absolute;
  top: -2px;
  right: 0;
  display: block;
  content: "";
  width: 1px;
  height: 85px;
  background: #E1E1E1;
  transform: rotate(18deg);
  z-index: 5;
}

@media (max-width: 640px) {
  .joinStepList>ol.step02>li:first-child::after {
    display: none;
  }
}

.joinStepList>ol.step02>li:nth-child(2) {
  color: #37234D;
  background: #fff;
}

.joinStepList>ol.step02>li:nth-child(2)::after {
  position: absolute;
  top: 36px;
  right: -83px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 45px 82px;
  border-color: transparent #fff transparent transparent;
  transform: rotate(-98deg);
  z-index: 5;
}

@media (max-width: 1024px) {
  .joinStepList>ol.step02>li:nth-child(2)::after {
    right: -82px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 82px;
    border-color: transparent #fff transparent transparent;
    transform: rotate(-84deg);
  }
}

@media (max-width: 640px) {
  .joinStepList>ol.step02>li:nth-child(2)::after {
    display: none;
  }
}

.joinStepList>ol.step02>li:nth-child(3) {
  background-color: #eae8ed;
}

.joinStepList>ol.step02>li:nth-child(3) em:before {
  -moz-filter: grayscale(100%) brightness(100%) !important;
  -ms-filter: grayscale(100%) brightness(100%) !important;
  -o-filter: grayscale(100%) brightness(100%) !important;
  filter: grayscale(100%) brightness(100%) !important;
  color: #212121;
}

.joinStepList>ol.step03>li {
  color: #37234D;
  background: #fff;
}

@media (max-width: 640px) {
  .joinStepList>ol.step03>li:not(:nth-child(3)) {
    display: none;
  }
}

.joinStepList>ol.step03>li:not(:first-child)::after {
  position: absolute;
  top: -2px;
  left: 0;
  display: block;
  content: "";
  width: 1px;
  height: 85px;
  background: #E1E1E1;
  transform: rotate(18deg);
  z-index: 5;
}

@media (max-width: 640px) {
  .joinStepList>ol.step03>li:not(:first-child)::after {
    display: none;
  }
}

.joinStepList>ol>li {
  position: relative;
  width: 33.3%;
  text-align: center;
  list-style-type: none;
  color: #666;
}

@media (max-width: 1024px) {
  .joinStepList>ol>li {
    font-size: 14px;
    letter-spacing: -1px;
  }
}

@media (max-width: 640px) {
  .joinStepList>ol>li {
    width: 100%;
  }
}

.joinStepList>ol>li em {
  padding-right: 4px;
  font-weight: 700;
}

.joinStepList>ol>li em:before {
  display: inline-block;
  content: "";
  margin-right: 20px;
  width: 26px;
  height: 26px;
  vertical-align: -7px;
}

@media (max-width: 1024px) {
  .joinStepList>ol>li em:before {
    margin-right: 10px;
  }
}

.joinStepList>ol>li:nth-child(1) em:before {
  background: url("../images/gwell/page/iconJoinStep01.svg") no-repeat 0 0/26px;
}

.joinStepList>ol>li:nth-child(2) em:before {
  background: url("../images/gwell/page/iconJoinStep02.svg") no-repeat 0 0/26px;
}

.joinStepList>ol>li:nth-child(3) em:before {
  background: url("../images/gwell/page/iconJoinStep03.svg") no-repeat 0 0/26px;
}

.joinStep>section {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

.joinStep>section:not(.joinStepList) {
  padding-top: 80px;
}

@media (max-width: 1024px) {
  .joinStep>section:not(.joinStepList) {
    padding-top: 50px;
  }
}

.joinStep>section>h2 {
  padding-bottom: 0 !important;
  margin: 40px 0 20px;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.02em;
}

.joinStep>section>h2.mt0 {
  margin-top: 0;
}

@media (max-width: 640px) {
  .joinStep>section>h2 {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

.joinStep .register01 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.joinStep .register01 dl dt {
  padding-bottom: 20px;
  font-size: 18px;
  color: #212121;
  font-weight: 700;
  line-height: 26px;
}

.joinStep .register01 button {
  border-radius: 4px;
  background: #46296E;
  color: #fff;
}

@media (min-width: 1025px) {
  .joinStep .register01 button {
    width: 130px;
    height: 50px;
  }
}

@media (max-width: 1024px) {
  .joinStep .register01 button {
    margin-top: 20px;
    width: 100%;
    height: 45px;
  }
}

@media (max-width: 640px) {
  .joinStep .register01 button {
    margin-top: 20px;
  }
}

.joinStep .allChk {
  padding-top: 28px;
  height: 80px;
  background-color: #fff;
  text-align: center;
}

@media (max-width: 1024px) {
  .joinStep .allChk {
    padding-top: 18px;
    height: 60px;
  }
}

.joinStep .terms>section {
  overflow: auto;
  background: #fff;
}

@media (min-width: 1025px) {
  .joinStep .terms>section {
    height: 300px;
    padding: 15px 20px;
  }
}

@media (max-width: 1024px) {
  .joinStep .terms>section {
    height: 220px;
    padding: 15px;
  }
}

.joinStep .terms>p {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

@media (min-width: 1025px) {
  .joinStep .terms>p {
    margin-top: 20px;
  }
}

@media (max-width: 1024px) {
  .joinStep .terms>p {
    margin-top: 10px;
  }
}

.joinStep .terms>p::before {
  content: "※";
  padding-right: 4px;
  font-size: 14px;
  font-weight: 300;
}

.joinStep .terms label {
  margin-top: 20px;
}

@media (max-width: 1024px) {

  .join,
  .login,
  .find,
  .closeAccount {
    padding: 50px 20px;
  }

  .join .contentNav,
  .login .contentNav,
  .find .contentNav,
  .closeAccount .contentNav {
    display: none;
  }
}

@media (max-width: 640px) {

  .join,
  .login,
  .find,
  .closeAccount {
    min-height: unset !important;
  }
}

.join h2,
.login h2,
.find h2,
.closeAccount h2 {
  text-align: center;
}

@media (max-width: 1024px) {

  .join h2,
  .login h2,
  .find h2,
  .closeAccount h2 {
    margin-bottom: 25px;
    font-size: 22px;
  }
}

@media (min-width: 1025px) {

  .join h3,
  .login h3,
  .find h3,
  .closeAccount h3 {
    margin-top: 45px;
    padding-bottom: 30px;
  }
}

@media (max-width: 1024px) {

  .join h3,
  .login h3,
  .find h3,
  .closeAccount h3 {
    margin-top: 35px;
    padding-bottom: 20px;
  }
}

@media (min-width: 1025px) {

  .join footer,
  .login footer,
  .find footer,
  .closeAccount footer {
    margin-bottom: 60px;
  }
}

.join form,
.login form,
.find form,
.closeAccount form {
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
}

@media (max-width: 1024px) {

  .join form label:first-of-type span,
  .login form label:first-of-type span,
  .find form label:first-of-type span,
  .closeAccount form label:first-of-type span {
    margin-top: 0;
  }

  .join form p.required,
  .login form p.required,
  .find form p.required,
  .closeAccount form p.required {
    margin-top: 0;
  }
}

.join form .required,
.login form .required,
.find form .required,
.closeAccount form .required {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  font-size: 14px;
  color: #46296E;
}

.join form .required.nonDot::after,
.login form .required.nonDot::after,
.find form .required.nonDot::after,
.closeAccount form .required.nonDot::after {
  display: none;
}

.join form .required::after,
.login form .required::after,
.find form .required::after,
.closeAccount form .required::after {
  display: inline-block;
  content: "";
  position: relative;
  top: -5px;
  margin-left: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #46296E;
}

@media (max-width: 1024px) {

  .join form .required,
  .login form .required,
  .find form .required,
  .closeAccount form .required {
    margin-bottom: 0;
  }
}

@media (max-width: 640px) {

  .join form .required,
  .login form .required,
  .find form .required,
  .closeAccount form .required {
    margin: 30px 0 12px;
  }

  .join form .required+h3,
  .login form .required+h3,
  .find form .required+h3,
  .closeAccount form .required+h3 {
    margin-top: 15px;
  }
}

.join form label:not(.check),
.join form .label,
.login form label:not(.check),
.login form .label,
.find form label:not(.check),
.find form .label,
.closeAccount form label:not(.check),
.closeAccount form .label {
  display: block;
}

.join form label:not(.check)+label,
.join form label:not(.check)+.label,
.join form .label+label,
.join form .label+.label,
.login form label:not(.check)+label,
.login form label:not(.check)+.label,
.login form .label+label,
.login form .label+.label,
.find form label:not(.check)+label,
.find form label:not(.check)+.label,
.find form .label+label,
.find form .label+.label,
.closeAccount form label:not(.check)+label,
.closeAccount form label:not(.check)+.label,
.closeAccount form .label+label,
.closeAccount form .label+.label {
  margin-top: 30px;
}

.join form label:not(.check) .desc,
.join form .label .desc,
.login form label:not(.check) .desc,
.login form .label .desc,
.find form label:not(.check) .desc,
.find form .label .desc,
.closeAccount form label:not(.check) .desc,
.closeAccount form .label .desc {
  margin-top: 5px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  color: #666;
}

.join form label:not(.check) span,
.join form .label span,
.login form label:not(.check) span,
.login form .label span,
.find form label:not(.check) span,
.find form .label span,
.closeAccount form label:not(.check) span,
.closeAccount form .label span {
  display: block;
  color: #212121;
}

.join form label:not(.check) span.required::after,
.join form .label span.required::after,
.login form label:not(.check) span.required::after,
.login form .label span.required::after,
.find form label:not(.check) span.required::after,
.find form .label span.required::after,
.closeAccount form label:not(.check) span.required::after,
.closeAccount form .label span.required::after {
  top: -10px;
}

.join form label:not(.check) input,
.join form label:not(.check) .selectBox,
.join form .label input,
.join form .label .selectBox,
.login form label:not(.check) input,
.login form label:not(.check) .selectBox,
.login form .label input,
.login form .label .selectBox,
.find form label:not(.check) input,
.find form label:not(.check) .selectBox,
.find form .label input,
.find form .label .selectBox,
.closeAccount form label:not(.check) input,
.closeAccount form label:not(.check) .selectBox,
.closeAccount form .label input,
.closeAccount form .label .selectBox {
  border-color: #E1E1E1;
  height: 60px;
}

.join form label:not(.check) input>button,
.join form label:not(.check) .selectBox>button,
.join form .label input>button,
.join form .label .selectBox>button,
.login form label:not(.check) input>button,
.login form label:not(.check) .selectBox>button,
.login form .label input>button,
.login form .label .selectBox>button,
.find form label:not(.check) input>button,
.find form label:not(.check) .selectBox>button,
.find form .label input>button,
.find form .label .selectBox>button,
.closeAccount form label:not(.check) input>button,
.closeAccount form label:not(.check) .selectBox>button,
.closeAccount form .label input>button,
.closeAccount form .label .selectBox>button {
  border-color: #E1E1E1 !important;
}

@media (max-width: 1024px) {

  .join form label:not(.check) input>button:after,
  .join form label:not(.check) .selectBox>button:after,
  .join form .label input>button:after,
  .join form .label .selectBox>button:after,
  .login form label:not(.check) input>button:after,
  .login form label:not(.check) .selectBox>button:after,
  .login form .label input>button:after,
  .login form .label .selectBox>button:after,
  .find form label:not(.check) input>button:after,
  .find form label:not(.check) .selectBox>button:after,
  .find form .label input>button:after,
  .find form .label .selectBox>button:after,
  .closeAccount form label:not(.check) input>button:after,
  .closeAccount form label:not(.check) .selectBox>button:after,
  .closeAccount form .label input>button:after,
  .closeAccount form .label .selectBox>button:after {
    top: 14px !important;
  }
}

.join form label:not(.check) input.zoom,
.join form label:not(.check) .selectBox.zoom,
.join form .label input.zoom,
.join form .label .selectBox.zoom,
.login form label:not(.check) input.zoom,
.login form label:not(.check) .selectBox.zoom,
.login form .label input.zoom,
.login form .label .selectBox.zoom,
.find form label:not(.check) input.zoom,
.find form label:not(.check) .selectBox.zoom,
.find form .label input.zoom,
.find form .label .selectBox.zoom,
.closeAccount form label:not(.check) input.zoom,
.closeAccount form label:not(.check) .selectBox.zoom,
.closeAccount form .label input.zoom,
.closeAccount form .label .selectBox.zoom {
  background-image: url("../images/icon/iconZoom.svg");
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: right 20px center;
  -moz-filter: grayscale(100);
  -ms-filter: grayscale(100);
  -o-filter: grayscale(100);
  filter: grayscale(100);
}

.join form label:not(.check) input:disabled,
.join form label:not(.check) .selectBox:disabled,
.join form .label input:disabled,
.join form .label .selectBox:disabled,
.login form label:not(.check) input:disabled,
.login form label:not(.check) .selectBox:disabled,
.login form .label input:disabled,
.login form .label .selectBox:disabled,
.find form label:not(.check) input:disabled,
.find form label:not(.check) .selectBox:disabled,
.find form .label input:disabled,
.find form .label .selectBox:disabled,
.closeAccount form label:not(.check) input:disabled,
.closeAccount form label:not(.check) .selectBox:disabled,
.closeAccount form .label input:disabled,
.closeAccount form .label .selectBox:disabled {
  background: #eee;
  border: 1px solid #eee;
}

@media (min-width: 1025px) {

  .join form label:not(.check) input,
  .join form label:not(.check) .selectBox,
  .join form .label input,
  .join form .label .selectBox,
  .login form label:not(.check) input,
  .login form label:not(.check) .selectBox,
  .login form .label input,
  .login form .label .selectBox,
  .find form label:not(.check) input,
  .find form label:not(.check) .selectBox,
  .find form .label input,
  .find form .label .selectBox,
  .closeAccount form label:not(.check) input,
  .closeAccount form label:not(.check) .selectBox,
  .closeAccount form .label input,
  .closeAccount form .label .selectBox {
    margin-top: 10px;
  }
}

@media (max-width: 1024px) {

  .join form label:not(.check) input,
  .join form label:not(.check) .selectBox,
  .join form .label input,
  .join form .label .selectBox,
  .login form label:not(.check) input,
  .login form label:not(.check) .selectBox,
  .login form .label input,
  .login form .label .selectBox,
  .find form label:not(.check) input,
  .find form label:not(.check) .selectBox,
  .find form .label input,
  .find form .label .selectBox,
  .closeAccount form label:not(.check) input,
  .closeAccount form label:not(.check) .selectBox,
  .closeAccount form .label input,
  .closeAccount form .label .selectBox {
    height: 45px;
    margin-top: 10px;
  }
}

.join form label:not(.check).phone div em,
.join form .label.phone div em,
.login form label:not(.check).phone div em,
.login form .label.phone div em,
.find form label:not(.check).phone div em,
.find form .label.phone div em,
.closeAccount form label:not(.check).phone div em,
.closeAccount form .label.phone div em {
  text-align: center;
}

.join form label:not(.check).phone div button,
.join form .label.phone div button,
.login form label:not(.check).phone div button,
.login form .label.phone div button,
.find form label:not(.check).phone div button,
.find form .label.phone div button,
.closeAccount form label:not(.check).phone div button,
.closeAccount form .label.phone div button {
  margin-top: 10px;
  border-radius: 4px;
  background: #37234D;
  color: #fff;
}

@media (min-width: 1025px) {

  .join form label:not(.check).phone div button,
  .join form .label.phone div button,
  .login form label:not(.check).phone div button,
  .login form .label.phone div button,
  .find form label:not(.check).phone div button,
  .find form .label.phone div button,
  .closeAccount form label:not(.check).phone div button,
  .closeAccount form .label.phone div button {
    width: 120px;
    height: 54px;
  }
}

@media (max-width: 1024px) {

  .join form label:not(.check).phone div button,
  .join form .label.phone div button,
  .login form label:not(.check).phone div button,
  .login form .label.phone div button,
  .find form label:not(.check).phone div button,
  .find form .label.phone div button,
  .closeAccount form label:not(.check).phone div button,
  .closeAccount form .label.phone div button {
    width: 100%;
    height: 40px;
  }
}

@media (min-width: 1025px) {

  .join form label:not(.check).phone div,
  .join form .label.phone div,
  .login form label:not(.check).phone div,
  .login form .label.phone div,
  .find form label:not(.check).phone div,
  .find form .label.phone div,
  .closeAccount form label:not(.check).phone div,
  .closeAccount form .label.phone div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }

  .join form label:not(.check).phone div input,
  .join form .label.phone div input,
  .login form label:not(.check).phone div input,
  .login form .label.phone div input,
  .find form label:not(.check).phone div input,
  .find form .label.phone div input,
  .closeAccount form label:not(.check).phone div input,
  .closeAccount form .label.phone div input {
    width: 109px;
  }

  .join form label:not(.check).phone div em,
  .join form .label.phone div em,
  .login form label:not(.check).phone div em,
  .login form .label.phone div em,
  .find form label:not(.check).phone div em,
  .find form .label.phone div em,
  .closeAccount form label:not(.check).phone div em,
  .closeAccount form .label.phone div em {
    margin-top: 10px;
    width: 23px;
  }

  .join form label:not(.check).phone div button,
  .join form .label.phone div button,
  .login form label:not(.check).phone div button,
  .login form .label.phone div button,
  .find form label:not(.check).phone div button,
  .find form .label.phone div button,
  .closeAccount form label:not(.check).phone div button,
  .closeAccount form .label.phone div button {
    margin-left: 9px;
  }
}

@media (max-width: 1024px) {

  .join form label:not(.check).phone div,
  .join form .label.phone div,
  .login form label:not(.check).phone div,
  .login form .label.phone div,
  .find form label:not(.check).phone div,
  .find form .label.phone div,
  .closeAccount form label:not(.check).phone div,
  .closeAccount form .label.phone div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: stretch;
    align-items: center;
  }

  .join form label:not(.check).phone div input,
  .join form .label.phone div input,
  .login form label:not(.check).phone div input,
  .login form .label.phone div input,
  .find form label:not(.check).phone div input,
  .find form .label.phone div input,
  .closeAccount form label:not(.check).phone div input,
  .closeAccount form .label.phone div input {
    width: calc(33.3333333333% - 14px);
  }

  .join form label:not(.check).phone div em,
  .join form .label.phone div em,
  .login form label:not(.check).phone div em,
  .login form .label.phone div em,
  .find form label:not(.check).phone div em,
  .find form .label.phone div em,
  .closeAccount form label:not(.check).phone div em,
  .closeAccount form .label.phone div em {
    margin-top: 5px;
    width: 20px;
  }
}

@media (min-width: 1025px) {

  .join form label:not(.check).phone.case div input,
  .join form .label.phone.case div input,
  .login form label:not(.check).phone.case div input,
  .login form .label.phone.case div input,
  .find form label:not(.check).phone.case div input,
  .find form .label.phone.case div input,
  .closeAccount form label:not(.check).phone.case div input,
  .closeAccount form .label.phone.case div input {
    width: 206px;
  }

  .join form label:not(.check).phone.case div em,
  .join form .label.phone.case div em,
  .login form label:not(.check).phone.case div em,
  .login form .label.phone.case div em,
  .find form label:not(.check).phone.case div em,
  .find form .label.phone.case div em,
  .closeAccount form label:not(.check).phone.case div em,
  .closeAccount form .label.phone.case div em {
    width: 31px;
  }
}

.join form label:not(.check).email,
.join form .label.email,
.login form label:not(.check).email,
.login form .label.email,
.find form label:not(.check).email,
.find form .label.email,
.closeAccount form label:not(.check).email,
.closeAccount form .label.email {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 1025px) {

  .join form label:not(.check).email input:first-of-type,
  .join form .label.email input:first-of-type,
  .login form label:not(.check).email input:first-of-type,
  .login form .label.email input:first-of-type,
  .find form label:not(.check).email input:first-of-type,
  .find form .label.email input:first-of-type,
  .closeAccount form label:not(.check).email input:first-of-type,
  .closeAccount form .label.email input:first-of-type {
    width: calc(100% - 40px);
  }
}

@media (max-width: 1024px) {

  .join form label:not(.check).email input:first-of-type,
  .join form .label.email input:first-of-type,
  .login form label:not(.check).email input:first-of-type,
  .login form .label.email input:first-of-type,
  .find form label:not(.check).email input:first-of-type,
  .find form .label.email input:first-of-type,
  .closeAccount form label:not(.check).email input:first-of-type,
  .closeAccount form .label.email input:first-of-type {
    width: calc(100% - 25px);
  }
}

.join form label:not(.check).email .half,
.join form .label.email .half,
.login form label:not(.check).email .half,
.login form .label.email .half,
.find form label:not(.check).email .half,
.find form .label.email .half,
.closeAccount form label:not(.check).email .half,
.closeAccount form .label.email .half {
  width: calc(50% - 5px);
}

@media (max-width: 640px) {

  .join form label:not(.check).email .half,
  .join form .label.email .half,
  .login form label:not(.check).email .half,
  .login form .label.email .half,
  .find form label:not(.check).email .half,
  .find form .label.email .half,
  .closeAccount form label:not(.check).email .half,
  .closeAccount form .label.email .half {
    width: 100%;
  }
}

.join form label:not(.check).email em,
.join form .label.email em,
.login form label:not(.check).email em,
.login form .label.email em,
.find form label:not(.check).email em,
.find form .label.email em,
.closeAccount form label:not(.check).email em,
.closeAccount form .label.email em {
  font-size: 16px;
}

@media (min-width: 1025px) {

  .join form label:not(.check).email em,
  .join form .label.email em,
  .login form label:not(.check).email em,
  .login form .label.email em,
  .find form label:not(.check).email em,
  .find form .label.email em,
  .closeAccount form label:not(.check).email em,
  .closeAccount form .label.email em {
    padding-right: 10px;
  }
}

.join form label:not(.check).email .selectBox,
.join form .label.email .selectBox,
.login form label:not(.check).email .selectBox,
.login form .label.email .selectBox,
.find form label:not(.check).email .selectBox,
.find form .label.email .selectBox,
.closeAccount form label:not(.check).email .selectBox,
.closeAccount form .label.email .selectBox {
  position: relative;
}

.join form label:not(.check).email .selectBox>button,
.join form .label.email .selectBox>button,
.login form label:not(.check).email .selectBox>button,
.login form .label.email .selectBox>button,
.find form label:not(.check).email .selectBox>button,
.find form .label.email .selectBox>button,
.closeAccount form label:not(.check).email .selectBox>button,
.closeAccount form .label.email .selectBox>button {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #707070;
  text-align: left;
  color: #666;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 30px !important;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
}

.join form label:not(.check).email .selectBox>button::after,
.join form .label.email .selectBox>button::after,
.login form label:not(.check).email .selectBox>button::after,
.login form .label.email .selectBox>button::after,
.find form label:not(.check).email .selectBox>button::after,
.find form .label.email .selectBox>button::after,
.closeAccount form label:not(.check).email .selectBox>button::after,
.closeAccount form .label.email .selectBox>button::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-45deg);
  right: 20px;
}

.join form label:not(.check).email .selectBox>button.placeholder,
.join form .label.email .selectBox>button.placeholder,
.login form label:not(.check).email .selectBox>button.placeholder,
.login form .label.email .selectBox>button.placeholder,
.find form label:not(.check).email .selectBox>button.placeholder,
.find form .label.email .selectBox>button.placeholder,
.closeAccount form label:not(.check).email .selectBox>button.placeholder,
.closeAccount form .label.email .selectBox>button.placeholder {
  color: #a5a5a5;
}

.join form label:not(.check).email .selectBox>button.active,
.join form .label.email .selectBox>button.active,
.login form label:not(.check).email .selectBox>button.active,
.login form .label.email .selectBox>button.active,
.find form label:not(.check).email .selectBox>button.active,
.find form .label.email .selectBox>button.active,
.closeAccount form label:not(.check).email .selectBox>button.active,
.closeAccount form .label.email .selectBox>button.active {
  color: #46296E;
  border-color: #46296E;
}

.join form label:not(.check).email .selectBox>button.active::after,
.join form .label.email .selectBox>button.active::after,
.login form label:not(.check).email .selectBox>button.active::after,
.login form .label.email .selectBox>button.active::after,
.find form label:not(.check).email .selectBox>button.active::after,
.find form .label.email .selectBox>button.active::after,
.closeAccount form label:not(.check).email .selectBox>button.active::after,
.closeAccount form .label.email .selectBox>button.active::after {
  border-color: #46296E;
}

.join form label:not(.check).email .selectBox>div,
.join form .label.email .selectBox>div,
.login form label:not(.check).email .selectBox>div,
.login form .label.email .selectBox>div,
.find form label:not(.check).email .selectBox>div,
.find form .label.email .selectBox>div,
.closeAccount form label:not(.check).email .selectBox>div,
.closeAccount form .label.email .selectBox>div {
  z-index: 3;
  position: absolute;
  display: none;
  width: 100%;
  overflow: auto;
  background: #fff;
  -ms-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
}

.join form label:not(.check).email .selectBox>div::before,
.join form .label.email .selectBox>div::before,
.login form label:not(.check).email .selectBox>div::before,
.login form .label.email .selectBox>div::before,
.find form label:not(.check).email .selectBox>div::before,
.find form .label.email .selectBox>div::before,
.closeAccount form label:not(.check).email .selectBox>div::before,
.closeAccount form .label.email .selectBox>div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: #46296E;
  display: none;
}

.join form label:not(.check).email .selectBox>div button,
.join form .label.email .selectBox>div button,
.login form label:not(.check).email .selectBox>div button,
.login form .label.email .selectBox>div button,
.find form label:not(.check).email .selectBox>div button,
.find form .label.email .selectBox>div button,
.closeAccount form label:not(.check).email .selectBox>div button,
.closeAccount form .label.email .selectBox>div button {
  width: 100%;
  line-height: 2.5 !important;
  text-align: left;
}

.join form label:not(.check).email .selectBox>div button.selected,
.join form .label.email .selectBox>div button.selected,
.login form label:not(.check).email .selectBox>div button.selected,
.login form .label.email .selectBox>div button.selected,
.find form label:not(.check).email .selectBox>div button.selected,
.find form .label.email .selectBox>div button.selected,
.closeAccount form label:not(.check).email .selectBox>div button.selected,
.closeAccount form .label.email .selectBox>div button.selected {
  color: #46296E;
}

@media (min-width: 1025px) {

  .join form label:not(.check).email .selectBox>div>button:first-child,
  .join form .label.email .selectBox>div>button:first-child,
  .login form label:not(.check).email .selectBox>div>button:first-child,
  .login form .label.email .selectBox>div>button:first-child,
  .find form label:not(.check).email .selectBox>div>button:first-child,
  .find form .label.email .selectBox>div>button:first-child,
  .closeAccount form label:not(.check).email .selectBox>div>button:first-child,
  .closeAccount form .label.email .selectBox>div>button:first-child {
    margin-top: 10px;
  }

  .join form label:not(.check).email .selectBox>div>button:last-child,
  .join form .label.email .selectBox>div>button:last-child,
  .login form label:not(.check).email .selectBox>div>button:last-child,
  .login form .label.email .selectBox>div>button:last-child,
  .find form label:not(.check).email .selectBox>div>button:last-child,
  .find form .label.email .selectBox>div>button:last-child,
  .closeAccount form label:not(.check).email .selectBox>div>button:last-child,
  .closeAccount form .label.email .selectBox>div>button:last-child {
    margin-bottom: 10px;
  }

  .join form label:not(.check).email .selectBox>button,
  .join form .label.email .selectBox>button,
  .login form label:not(.check).email .selectBox>button,
  .login form .label.email .selectBox>button,
  .find form label:not(.check).email .selectBox>button,
  .find form .label.email .selectBox>button,
  .closeAccount form label:not(.check).email .selectBox>button,
  .closeAccount form .label.email .selectBox>button {
    height: 54px;
  }

  .join form label:not(.check).email .selectBox>button::after,
  .join form .label.email .selectBox>button::after,
  .login form label:not(.check).email .selectBox>button::after,
  .login form .label.email .selectBox>button::after,
  .find form label:not(.check).email .selectBox>button::after,
  .find form .label.email .selectBox>button::after,
  .closeAccount form label:not(.check).email .selectBox>button::after,
  .closeAccount form .label.email .selectBox>button::after {
    top: 20px;
  }

  .join form label:not(.check).email .selectBox>button,
  .join form label:not(.check).email .selectBox>div button,
  .join form .label.email .selectBox>button,
  .join form .label.email .selectBox>div button,
  .login form label:not(.check).email .selectBox>button,
  .login form label:not(.check).email .selectBox>div button,
  .login form .label.email .selectBox>button,
  .login form .label.email .selectBox>div button,
  .find form label:not(.check).email .selectBox>button,
  .find form label:not(.check).email .selectBox>div button,
  .find form .label.email .selectBox>button,
  .find form .label.email .selectBox>div button,
  .closeAccount form label:not(.check).email .selectBox>button,
  .closeAccount form label:not(.check).email .selectBox>div button,
  .closeAccount form .label.email .selectBox>button,
  .closeAccount form .label.email .selectBox>div button {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 1024px) {

  .join form label:not(.check).email .selectBox>div>button:first-child,
  .join form .label.email .selectBox>div>button:first-child,
  .login form label:not(.check).email .selectBox>div>button:first-child,
  .login form .label.email .selectBox>div>button:first-child,
  .find form label:not(.check).email .selectBox>div>button:first-child,
  .find form .label.email .selectBox>div>button:first-child,
  .closeAccount form label:not(.check).email .selectBox>div>button:first-child,
  .closeAccount form .label.email .selectBox>div>button:first-child {
    margin-top: 5px;
  }

  .join form label:not(.check).email .selectBox>div>button:last-child,
  .join form .label.email .selectBox>div>button:last-child,
  .login form label:not(.check).email .selectBox>div>button:last-child,
  .login form .label.email .selectBox>div>button:last-child,
  .find form label:not(.check).email .selectBox>div>button:last-child,
  .find form .label.email .selectBox>div>button:last-child,
  .closeAccount form label:not(.check).email .selectBox>div>button:last-child,
  .closeAccount form .label.email .selectBox>div>button:last-child {
    margin-bottom: 5px;
  }

  .join form label:not(.check).email .selectBox>button,
  .join form .label.email .selectBox>button,
  .login form label:not(.check).email .selectBox>button,
  .login form .label.email .selectBox>button,
  .find form label:not(.check).email .selectBox>button,
  .find form .label.email .selectBox>button,
  .closeAccount form label:not(.check).email .selectBox>button,
  .closeAccount form .label.email .selectBox>button {
    height: 40px;
  }

  .join form label:not(.check).email .selectBox>button::after,
  .join form .label.email .selectBox>button::after,
  .login form label:not(.check).email .selectBox>button::after,
  .login form .label.email .selectBox>button::after,
  .find form label:not(.check).email .selectBox>button::after,
  .find form .label.email .selectBox>button::after,
  .closeAccount form label:not(.check).email .selectBox>button::after,
  .closeAccount form .label.email .selectBox>button::after {
    top: 10px;
  }

  .join form label:not(.check).email .selectBox>button,
  .join form label:not(.check).email .selectBox>div button,
  .join form .label.email .selectBox>button,
  .join form .label.email .selectBox>div button,
  .login form label:not(.check).email .selectBox>button,
  .login form label:not(.check).email .selectBox>div button,
  .login form .label.email .selectBox>button,
  .login form .label.email .selectBox>div button,
  .find form label:not(.check).email .selectBox>button,
  .find form label:not(.check).email .selectBox>div button,
  .find form .label.email .selectBox>button,
  .find form .label.email .selectBox>div button,
  .closeAccount form label:not(.check).email .selectBox>button,
  .closeAccount form label:not(.check).email .selectBox>div button,
  .closeAccount form .label.email .selectBox>button,
  .closeAccount form .label.email .selectBox>div button {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.join form label:not(.check).email .selectBox button,
.join form .label.email .selectBox button,
.login form label:not(.check).email .selectBox button,
.login form .label.email .selectBox button,
.find form label:not(.check).email .selectBox button,
.find form .label.email .selectBox button,
.closeAccount form label:not(.check).email .selectBox button,
.closeAccount form .label.email .selectBox button {
  height: 60px;
}

@media (max-width: 1024px) {

  .join form label:not(.check).email .selectBox button,
  .join form .label.email .selectBox button,
  .login form label:not(.check).email .selectBox button,
  .login form .label.email .selectBox button,
  .find form label:not(.check).email .selectBox button,
  .find form .label.email .selectBox button,
  .closeAccount form label:not(.check).email .selectBox button,
  .closeAccount form .label.email .selectBox button {
    height: 45px;
  }
}

.join form>button,
.login form>button,
.find form>button,
.closeAccount form>button {
  display: inline-block;
  width: 100%;
  border-radius: 25px;
  background: #46296E;
  text-align: center;
  line-height: 50px;
  color: #fff;
}

@media (max-width: 1024px) {

  .join form>button,
  .login form>button,
  .find form>button,
  .closeAccount form>button {
    font-size: 14px;
  }
}

@media (min-width: 1025px) {

  .join form>button,
  .login form>button,
  .find form>button,
  .closeAccount form>button {
    margin-top: 50px;
  }
}

@media (max-width: 1024px) {

  .join form>button,
  .login form>button,
  .find form>button,
  .closeAccount form>button {
    margin-top: 40px;
  }
}

@media (min-width: 1025px) {

  .join form .btn,
  .login form .btn,
  .find form .btn,
  .closeAccount form .btn {
    margin-top: 50px;
  }
}

@media (max-width: 1024px) {

  .join form .btn,
  .login form .btn,
  .find form .btn,
  .closeAccount form .btn {
    margin-top: 40px;
  }
}

.join form .btn a,
.join form .btn button,
.login form .btn a,
.login form .btn button,
.find form .btn a,
.find form .btn button,
.closeAccount form .btn a,
.closeAccount form .btn button {
  display: inline-block;
  width: 100%;
  border: 1px solid #c8c8c8;
  border-radius: 25px;
  background: #fff;
  text-align: center;
  line-height: 50px;
  color: #212121;
}

@media (max-width: 1024px) {

  .join form .btn a,
  .join form .btn button,
  .login form .btn a,
  .login form .btn button,
  .find form .btn a,
  .find form .btn button,
  .closeAccount form .btn a,
  .closeAccount form .btn button {
    font-size: 14px;
  }
}

.join form .btn a:hover,
.join form .btn button:hover,
.login form .btn a:hover,
.login form .btn button:hover,
.find form .btn a:hover,
.find form .btn button:hover,
.closeAccount form .btn a:hover,
.closeAccount form .btn button:hover {
  border-color: #46296E;
  color: #46296E;
}

.join form .btns,
.login form .btns,
.find form .btns,
.closeAccount form .btns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.join form .btns a,
.login form .btns a,
.find form .btns a,
.closeAccount form .btns a {
  display: inline-block;
  width: 100%;
  border: 1px solid #c8c8c8;
  border-radius: 25px;
  background: #fff;
  text-align: center;
  line-height: 50px;
  color: #212121;
}

@media (max-width: 1024px) {

  .join form .btns a,
  .login form .btns a,
  .find form .btns a,
  .closeAccount form .btns a {
    font-size: 14px;
  }
}

.join form .btns a:hover,
.login form .btns a:hover,
.find form .btns a:hover,
.closeAccount form .btns a:hover {
  border-color: #46296E;
  color: #46296E;
}

@media (min-width: 1025px) {

  .join form .btns a,
  .login form .btns a,
  .find form .btns a,
  .closeAccount form .btns a {
    margin-top: 50px;
    width: calc(50% - 10px);
  }

  .join form .btns a+a,
  .login form .btns a+a,
  .find form .btns a+a,
  .closeAccount form .btns a+a {
    margin-left: 20px;
  }
}

@media (max-width: 1024px) {

  .join form .btns a,
  .login form .btns a,
  .find form .btns a,
  .closeAccount form .btns a {
    margin-top: 40px;
    width: calc(50% - 5px);
  }

  .join form .btns a+a,
  .login form .btns a+a,
  .find form .btns a+a,
  .closeAccount form .btns a+a {
    margin-left: 10px;
  }
}

.join form .links,
.login form .links,
.find form .links,
.closeAccount form .links {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #E1E1E1;
}

@media (max-width: 1024px) {

  .join form .links,
  .login form .links,
  .find form .links,
  .closeAccount form .links {
    margin: 30px -10px;
  }
}

.join form .links a,
.login form .links a,
.find form .links a,
.closeAccount form .links a {
  position: relative;
  color: #666;
  padding: 0 15px;
}

.join form .links a+a:before,
.login form .links a+a:before,
.find form .links a+a:before,
.closeAccount form .links a+a:before {
  position: absolute;
  top: 5px;
  left: 0;
  display: block;
  content: "";
  width: 0;
  height: 15px;
  border-left: 1px solid #E1E1E1;
}

@media (max-width: 1024px) {

  .join form .links a,
  .login form .links a,
  .find form .links a,
  .closeAccount form .links a {
    padding: 0 10px;
    letter-spacing: -1px;
  }

  .join form .links a+a:before,
  .login form .links a+a:before,
  .find form .links a+a:before,
  .closeAccount form .links a+a:before {
    height: 12px;
  }
}

@media (min-width: 1025px) {

  .join form,
  .login form,
  .find form,
  .closeAccount form {
    padding: 0;
  }
}

.join .result header.pw:before,
.login .result header.pw:before,
.find .result header.pw:before,
.closeAccount .result header.pw:before {
  background: url("../images/gwell/page/imgResultPw.svg") no-repeat 0 0/cover;
}

.join .result header::before,
.login .result header::before,
.find .result header::before,
.closeAccount .result header::before {
  display: block;
  content: "";
  margin: 0 auto 15px auto;
  width: 100px;
  height: 100px;
  background: url("../images/gwell/page/imgResultEmail.svg") no-repeat 0 0/cover;
}

.join .result.withdrawal,
.login .result.withdrawal,
.find .result.withdrawal,
.closeAccount .result.withdrawal {
  font-weight: 700;
  background-image: url("../images/shinyoungRecruit/imgWithdrawal.png");
}

.join .result p.desc,
.login .result p.desc,
.find .result p.desc,
.closeAccount .result p.desc {
  margin: 20px auto 0 auto;
  padding: 20px 0 40px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  letter-spacing: -0.5px;
  color: #666;
  border-top: 1px solid #E1E1E1;
}

@media (min-width: 1025px) {

  .join .result p.desc,
  .login .result p.desc,
  .find .result p.desc,
  .closeAccount .result p.desc {
    width: 600px;
  }
}

.join .result p.desc a,
.login .result p.desc a,
.find .result p.desc a,
.closeAccount .result p.desc a {
  font-weight: 700;
  color: #212121;
}

.join .result span,
.login .result span,
.find .result span,
.closeAccount .result span {
  display: block;
}

@media (min-width: 1025px) {

  .join .result span,
  .login .result span,
  .find .result span,
  .closeAccount .result span {
    margin-top: 16px;
  }
}

@media (max-width: 1024px) {

  .join .result span,
  .login .result span,
  .find .result span,
  .closeAccount .result span {
    margin-top: 20px;
  }
}

@media (min-width: 1025px) {

  .join .result span+dl,
  .login .result span+dl,
  .find .result span+dl,
  .closeAccount .result span+dl {
    margin-top: 6px;
  }
}

@media (max-width: 1024px) {

  .join .result span+dl,
  .login .result span+dl,
  .find .result span+dl,
  .closeAccount .result span+dl {
    margin-top: 13px;
  }
}

.join .result dl,
.login .result dl,
.find .result dl,
.closeAccount .result dl {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 20px;
}

.join .result dl dt::after,
.login .result dl dt::after,
.find .result dl dt::after,
.closeAccount .result dl dt::after {
  content: "ㅣ";
  padding: 0 10px;
  color: #c8c8c8;
}

.join .result .btns,
.login .result .btns,
.find .result .btns,
.closeAccount .result .btns {
  margin: 0 auto;
}

@media (min-width: 1025px) {

  .join .result .btns,
  .login .result .btns,
  .find .result .btns,
  .closeAccount .result .btns {
    max-width: 400px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
}

.join .result .btns.long,
.login .result .btns.long,
.find .result .btns.long,
.closeAccount .result .btns.long {
  max-width: 600px;
}

.join .result .btns.long a:first-child,
.login .result .btns.long a:first-child,
.find .result .btns.long a:first-child,
.closeAccount .result .btns.long a:first-child {
  width: 190px;
}

.join .result .btns.long a:nth-child(2),
.login .result .btns.long a:nth-child(2),
.find .result .btns.long a:nth-child(2),
.closeAccount .result .btns.long a:nth-child(2) {
  width: 210px;
}

.join .result .btns.long a:last-child,
.login .result .btns.long a:last-child,
.find .result .btns.long a:last-child,
.closeAccount .result .btns.long a:last-child {
  width: 180px;
}

@media (max-width: 1024px) {

  .join .result .btns,
  .login .result .btns,
  .find .result .btns,
  .closeAccount .result .btns {
    max-width: 200px !important;
  }
}

.join .result .btns a,
.login .result .btns a,
.find .result .btns a,
.closeAccount .result .btns a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
}

.join .result .btns a::before,
.join .result .btns a::after,
.login .result .btns a::before,
.login .result .btns a::after,
.find .result .btns a::before,
.find .result .btns a::after,
.closeAccount .result .btns a::before,
.closeAccount .result .btns a::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

.join .result .btns a:not(:disabled):hover,
.join .result .btns a:not(:disabled):focus,
.login .result .btns a:not(:disabled):hover,
.login .result .btns a:not(:disabled):focus,
.find .result .btns a:not(:disabled):hover,
.find .result .btns a:not(:disabled):focus,
.closeAccount .result .btns a:not(:disabled):hover,
.closeAccount .result .btns a:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

.join .result .btns a:not(:disabled):hover::before,
.join .result .btns a:not(:disabled):hover::after,
.join .result .btns a:not(:disabled):focus::before,
.join .result .btns a:not(:disabled):focus::after,
.login .result .btns a:not(:disabled):hover::before,
.login .result .btns a:not(:disabled):hover::after,
.login .result .btns a:not(:disabled):focus::before,
.login .result .btns a:not(:disabled):focus::after,
.find .result .btns a:not(:disabled):hover::before,
.find .result .btns a:not(:disabled):hover::after,
.find .result .btns a:not(:disabled):focus::before,
.find .result .btns a:not(:disabled):focus::after,
.closeAccount .result .btns a:not(:disabled):hover::before,
.closeAccount .result .btns a:not(:disabled):hover::after,
.closeAccount .result .btns a:not(:disabled):focus::before,
.closeAccount .result .btns a:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {

  .join .result .btns a,
  .login .result .btns a,
  .find .result .btns a,
  .closeAccount .result .btns a {
    font-size: 16px;
    min-width: 180px;
    height: 60px;
    padding: 0 20px;
    border-radius: 30px;
  }

  .join .result .btns a::before,
  .login .result .btns a::before,
  .find .result .btns a::before,
  .closeAccount .result .btns a::before {
    margin-right: 10px;
  }

  .join .result .btns a::after,
  .login .result .btns a::after,
  .find .result .btns a::after,
  .closeAccount .result .btns a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {

  .join .result .btns a,
  .login .result .btns a,
  .find .result .btns a,
  .closeAccount .result .btns a {
    font-size: 14px;
    min-width: 180px;
    font-size: 16px;
    height: 50px;
    padding: 0 18px;
    border-radius: 25px;
  }

  .join .result .btns a::before,
  .login .result .btns a::before,
  .find .result .btns a::before,
  .closeAccount .result .btns a::before {
    margin-right: 14px;
  }

  .join .result .btns a::after,
  .login .result .btns a::after,
  .find .result .btns a::after,
  .closeAccount .result .btns a::after {
    margin-left: 18px;
  }
}

.join .result .btns a:first-child,
.login .result .btns a:first-child,
.find .result .btns a:first-child,
.closeAccount .result .btns a:first-child {
  width: 180px;
}

.join .result .btns a:last-child,
.login .result .btns a:last-child,
.find .result .btns a:last-child,
.closeAccount .result .btns a:last-child {
  width: 210px;
}

@media (min-width: 1025px) {

  .join .result .btns a,
  .login .result .btns a,
  .find .result .btns a,
  .closeAccount .result .btns a {
    margin-top: 20px;
  }

  .join .result .btns a+a,
  .login .result .btns a+a,
  .find .result .btns a+a,
  .closeAccount .result .btns a+a {
    margin-left: 10px;
  }
}

@media (max-width: 1024px) {

  .join .result .btns a,
  .login .result .btns a,
  .find .result .btns a,
  .closeAccount .result .btns a {
    width: 100% !important;
    font-size: 14px;
  }

  .join .result .btns a+a,
  .login .result .btns a+a,
  .find .result .btns a+a,
  .closeAccount .result .btns a+a {
    margin-top: 10px;
    margin-left: 0;
  }
}

.join .result.logout.case,
.login .result.logout.case,
.find .result.logout.case,
.closeAccount .result.logout.case {
  background-image: url("../images/shinyoungRecruit/imgLogout.png");
  background-repeat: no-repeat;
  background-size: 80px auto;
}

@media (min-width: 1025px) {

  .join .result.logout.case,
  .login .result.logout.case,
  .find .result.logout.case,
  .closeAccount .result.logout.case {
    padding-top: 156px;
  }
}

@media (max-width: 1024px) {

  .join .result.logout.case,
  .login .result.logout.case,
  .find .result.logout.case,
  .closeAccount .result.logout.case {
    padding-top: 145px;
  }
}

.join .result.logout.case>strong,
.login .result.logout.case>strong,
.find .result.logout.case>strong,
.closeAccount .result.logout.case>strong {
  color: #212121;
}

.join .result.logout>button,
.login .result.logout>button,
.find .result.logout>button,
.closeAccount .result.logout>button {
  position: relative;
  width: 100%;
  text-align: left;
  color: #212121;
}

.join .result.logout>button:hover,
.login .result.logout>button:hover,
.find .result.logout>button:hover,
.closeAccount .result.logout>button:hover {
  font-weight: 700;
  color: #46296E;
}

.join .result.logout>button:hover::after,
.login .result.logout>button:hover::after,
.find .result.logout>button:hover::after,
.closeAccount .result.logout>button:hover::after {
  border-color: #46296E;
}

@media (min-width: 1025px) {

  .join .result.logout>button+button,
  .login .result.logout>button+button,
  .find .result.logout>button+button,
  .closeAccount .result.logout>button+button {
    margin-top: 38px;
  }
}

@media (max-width: 1024px) {

  .join .result.logout>button+button,
  .login .result.logout>button+button,
  .find .result.logout>button+button,
  .closeAccount .result.logout>button+button {
    margin-top: 20px;
  }
}

.join .result.logout>button::after,
.login .result.logout>button::after,
.find .result.logout>button::after,
.closeAccount .result.logout>button::after {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-135deg);
}

.join .result.logout .btnsCase a,
.login .result.logout .btnsCase a,
.find .result.logout .btnsCase a,
.closeAccount .result.logout .btnsCase a {
  display: inline-block;
  width: 100%;
  border: 1px solid #c8c8c8;
  border-radius: 25px;
  background: #fff;
  text-align: center;
  line-height: 50px;
  color: #212121;
}

@media (max-width: 1024px) {

  .join .result.logout .btnsCase a,
  .login .result.logout .btnsCase a,
  .find .result.logout .btnsCase a,
  .closeAccount .result.logout .btnsCase a {
    font-size: 14px;
  }
}

.join .result.logout .btnsCase a:hover,
.login .result.logout .btnsCase a:hover,
.find .result.logout .btnsCase a:hover,
.closeAccount .result.logout .btnsCase a:hover {
  border-color: #46296E;
  color: #46296E;
}

@media (min-width: 1025px) {

  .join .result.logout .btnsCase,
  .login .result.logout .btnsCase,
  .find .result.logout .btnsCase,
  .closeAccount .result.logout .btnsCase {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: 50px;
  }

  .join .result.logout .btnsCase a,
  .login .result.logout .btnsCase a,
  .find .result.logout .btnsCase a,
  .closeAccount .result.logout .btnsCase a {
    width: calc(50% - 10px);
  }

  .join .result.logout .btnsCase a+a,
  .login .result.logout .btnsCase a+a,
  .find .result.logout .btnsCase a+a,
  .closeAccount .result.logout .btnsCase a+a {
    margin-left: 20px;
  }
}

@media (max-width: 1024px) {

  .join .result.logout .btnsCase,
  .login .result.logout .btnsCase,
  .find .result.logout .btnsCase,
  .closeAccount .result.logout .btnsCase {
    margin-top: 40px;
  }

  .join .result.logout .btnsCase a+a,
  .login .result.logout .btnsCase a+a,
  .find .result.logout .btnsCase a+a,
  .closeAccount .result.logout .btnsCase a+a {
    margin-top: 10px;
  }
}

@media (min-width: 1025px) {

  .join .result,
  .login .result,
  .find .result,
  .closeAccount .result {
    margin-top: 40px;
    padding: 150px 50px 50px;
    background-position: 50px 50px;
  }

  .join .result.logout,
  .login .result.logout,
  .find .result.logout,
  .closeAccount .result.logout {
    padding-top: 50px;
  }
}

@media (max-width: 1024px) {

  .join .result,
  .login .result,
  .find .result,
  .closeAccount .result {
    margin-top: 20px;
    padding: 145px 20px 40px;
    background-position: 20px 40px;
  }

  .join .result.logout,
  .login .result.logout,
  .find .result.logout,
  .closeAccount .result.logout {
    padding-top: 40px;
  }
}

.closeAccount p {
  padding-bottom: 40px;
  text-align: center;
}

.closeAccount p::before {
  display: block;
  content: "";
  margin: 50px auto 20px auto;
  width: 100px;
  height: 100px;
  background: url("../images/gwell/page/icoCloseAccount.svg") no-repeat 0 0/cover;
}

@media (max-width: 1024px) {
  .closeAccount p::before {
    margin: 30px auto 20px auto;
  }
}

.closeAccount p strong {
  color: #37234D;
}

.closeAccount p span {
  margin-top: 0 !important;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  color: #666;
}

.login .memberInfo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  word-break: keep-all;
}

@media (min-width: 1025px) {
  .login .memberInfo {
    margin-top: 20px;
  }
}

@media (max-width: 1024px) {
  .login .memberInfo {
    margin-top: 10px;
  }
}

@media (max-width: 1024px) {
  .login .memberInfo p {
    width: 100%;
  }
}

.login .memberInfo button {
  padding-right: 30px;
  line-height: 20px;
  background: url("../images/gwell/iconLoginInfo.svg") no-repeat right center;
}

@media (min-width: 1025px) {
  .login .memberInfo button {
    margin-left: 50px;
  }
}

@media (max-width: 1024px) {
  .login .memberInfo button {
    margin-top: 8px;
  }
}

.login form input {
  background: #f9f9f9 !important;
  border: 0 !important;
}

.login form label:not(.check),
.login form .label {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.login form label:not(.check) span,
.login form .label span {
  width: 100px;
}

@media (max-width: 640px) {

  .login form label:not(.check) span,
  .login form .label span {
    display: none;
  }
}

@media (min-width: 1025px) {

  .login form label:not(.check) span+input,
  .login form .label span+input {
    width: calc(100% - 100px);
  }
}

.login form label:not(.check)+label,
.login form label:not(.check)+.label,
.login form .label+label,
.login form .label+.label {
  margin-top: 0;
}

.find .required:after {
  display: none !important;
}

.completeBox ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.completeBox ul li {
  position: relative;
  width: 33.3%;
  height: 220px;
}

.completeBox ul li:not(:nth-child(3))+li {
  border-left: 1px solid #E1E1E1;
}

.completeBox ul li:nth-child(n+1):nth-child(-n+3) {
  border-bottom: 1px solid #E1E1E1;
}

.completeBox ul li a {
  position: relative;
  display: block;
  padding: 40px;
  width: 100%;
  height: 100%;
}

.completeBox ul li a.active,
.completeBox ul li a:hover {
  background: #261E33;
  color: #fff;
}

.completeBox ul li a.active::after,
.completeBox ul li a:hover::after {
  position: absolute;
  top: 0;
  right: -10%;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("../images/gwell/vi/viMyJoin.svg");
  background-size: 100%;
  -moz-filter: grayscale(100) brightness(100);
  -ms-filter: grayscale(100) brightness(100);
  -o-filter: grayscale(100) brightness(100);
  filter: grayscale(100) brightness(100);
  color: #fff;
}

.completeBox ul li a.active span .ico,
.completeBox ul li a:hover span .ico {
  background: #fff;
}

.completeBox ul li a.active span .ico:after,
.completeBox ul li a:hover span .ico:after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-width: 0 0 1px 1px;
  border-color: #261E33;
  border-style: solid;
  transform: rotate(-135deg);
}

.completeBox ul li p {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.completeBox ul li span {
  position: absolute;
  bottom: 40px;
  right: 40px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
}

.completeBox ul li span .ico {
  position: relative;
  display: inline-block;
  content: "";
  margin-left: 10px;
  width: 20px;
  height: 20px;
  background: #261E33;
  vertical-align: -5px;
  border-radius: 20px;
}

.completeBox ul li span .ico:after {
  position: absolute;
  top: 7px;
  left: 6px;
  content: "";
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-width: 0 0 1px 1px;
  border-color: #fff;
  border-style: solid;
  transform: rotate(-135deg);
}

@media (max-width: 1024px) {
  .completeBox ul li {
    width: 50%;
    height: 180px;
  }

  .completeBox ul li:nth-child(n+1):nth-child(-n+4) {
    border-bottom: 1px solid #E1E1E1;
  }

  .completeBox ul li:nth-child(even) {
    border-left: 1px solid #E1E1E1;
  }

  .completeBox ul li:nth-child(odd) {
    border-left: 0 !important;
  }

  .completeBox ul li p {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }

  .completeBox ul li a {
    padding: 30px;
  }

  .completeBox ul li a span {
    bottom: 30px;
    right: 30px;
  }
}

@media (max-width: 640px) {
  .completeBox ul {
    display: block;
  }

  .completeBox ul li {
    overflow: hidden;
    width: 100%;
    border-left: 0 !important;
    border-bottom: 1px solid #E1E1E1;
  }

  .completeBox ul li a {
    padding: 30px 35px;
  }

  .completeBox ul li span {
    bottom: 30px;
    right: 20px;
  }
}

/* #contents.salesList > section:not(.active), #details > section:not(.active), #contents.notice > section:not(.active), #contents.contact > section:not(.active), #contents.inquiry > section:not(.active), #contents.issue > section:not(.active), #contents.subscription > section:not(.active), #contents.reservation > section:not(.active) {
  display: none;
} */
#contents.salesList>section>.empty,
#details>section>.empty,
#contents.notice>section>.empty,
#contents.contact>section>.empty,
#contents.inquiry>section>.empty,
#contents.issue>section>.empty,
#contents.subscription>section>.empty,
#contents.reservation>section>.empty {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  display: table;
}

@media (min-width: 1025px) {

  #contents.salesList>section>.empty,
  #details>section>.empty,
  #contents.notice>section>.empty,
  #contents.contact>section>.empty,
  #contents.inquiry>section>.empty,
  #contents.issue>section>.empty,
  #contents.subscription>section>.empty,
  #contents.reservation>section>.empty {
    margin-top: 50px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList>section>.empty,
  #details>section>.empty,
  #contents.notice>section>.empty,
  #contents.contact>section>.empty,
  #contents.inquiry>section>.empty,
  #contents.issue>section>.empty,
  #contents.subscription>section>.empty,
  #contents.reservation>section>.empty {
    margin-top: 40px;
  }
}

#contents.salesList>section>.empty.caseOnlineAgreement,
#details>section>.empty.caseOnlineAgreement,
#contents.notice>section>.empty.caseOnlineAgreement,
#contents.contact>section>.empty.caseOnlineAgreement,
#contents.inquiry>section>.empty.caseOnlineAgreement,
#contents.issue>section>.empty.caseOnlineAgreement,
#contents.subscription>section>.empty.caseOnlineAgreement,
#contents.reservation>section>.empty.caseOnlineAgreement {
  margin-top: 0 !important;
}

#contents.salesList>section>.empty.short span,
#details>section>.empty.short span,
#contents.notice>section>.empty.short span,
#contents.contact>section>.empty.short span,
#contents.inquiry>section>.empty.short span,
#contents.issue>section>.empty.short span,
#contents.subscription>section>.empty.short span,
#contents.reservation>section>.empty.short span {
  height: 120px;
}

@media (max-width: 640px) {

  #contents.salesList>section>.empty.short span,
  #details>section>.empty.short span,
  #contents.notice>section>.empty.short span,
  #contents.contact>section>.empty.short span,
  #contents.inquiry>section>.empty.short span,
  #contents.issue>section>.empty.short span,
  #contents.subscription>section>.empty.short span,
  #contents.reservation>section>.empty.short span {
    height: 160px;
  }
}

#contents.salesList>section>.empty.short span::before,
#details>section>.empty.short span::before,
#contents.notice>section>.empty.short span::before,
#contents.contact>section>.empty.short span::before,
#contents.inquiry>section>.empty.short span::before,
#contents.issue>section>.empty.short span::before,
#contents.subscription>section>.empty.short span::before,
#contents.reservation>section>.empty.short span::before {
  display: inline-block;
  margin: 0 15px 0 0;
  width: 30px;
  height: 30px;
  vertical-align: -8px;
  background: url("../images/gwell/page/iconCalender.svg") no-repeat center;
}

@media (max-width: 1024px) {

  #contents.salesList>section>.empty.short span::before,
  #details>section>.empty.short span::before,
  #contents.notice>section>.empty.short span::before,
  #contents.contact>section>.empty.short span::before,
  #contents.inquiry>section>.empty.short span::before,
  #contents.issue>section>.empty.short span::before,
  #contents.subscription>section>.empty.short span::before,
  #contents.reservation>section>.empty.short span::before {
    display: block;
    margin: 0 auto 10px auto;
    width: 40px;
    height: 40px;
    background-size: 40px;
  }
}

#contents.salesList>section>.empty span,
#details>section>.empty span,
#contents.notice>section>.empty span,
#contents.contact>section>.empty span,
#contents.inquiry>section>.empty span,
#contents.issue>section>.empty span,
#contents.subscription>section>.empty span,
#contents.reservation>section>.empty span {
  display: table-cell;
  height: 376px;
  text-align: center;
  color: #212121;
  background: #fff;
  vertical-align: middle;
}

@media (min-width: 1025px) {

  #contents.salesList>section>.empty span,
  #details>section>.empty span,
  #contents.notice>section>.empty span,
  #contents.contact>section>.empty span,
  #contents.inquiry>section>.empty span,
  #contents.issue>section>.empty span,
  #contents.subscription>section>.empty span,
  #contents.reservation>section>.empty span {
    height: 402px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList>section>.empty span,
  #details>section>.empty span,
  #contents.notice>section>.empty span,
  #contents.contact>section>.empty span,
  #contents.inquiry>section>.empty span,
  #contents.issue>section>.empty span,
  #contents.subscription>section>.empty span,
  #contents.reservation>section>.empty span {
    height: 264px;
  }
}

#contents.salesList>section>.empty span strong,
#details>section>.empty span strong,
#contents.notice>section>.empty span strong,
#contents.contact>section>.empty span strong,
#contents.inquiry>section>.empty span strong,
#contents.issue>section>.empty span strong,
#contents.subscription>section>.empty span strong,
#contents.reservation>section>.empty span strong {
  color: #37234D;
}

#contents.salesList>section>.empty span::before,
#details>section>.empty span::before,
#contents.notice>section>.empty span::before,
#contents.contact>section>.empty span::before,
#contents.inquiry>section>.empty span::before,
#contents.issue>section>.empty span::before,
#contents.subscription>section>.empty span::before,
#contents.reservation>section>.empty span::before {
  content: "";
  display: block;
  margin: 0 auto;
  background: url("../images/gwell/page/imgResultNone02.svg") no-repeat center;
  background-size: 100%;
}

@media (min-width: 1025px) {

  #contents.salesList>section>.empty span::before,
  #details>section>.empty span::before,
  #contents.notice>section>.empty span::before,
  #contents.contact>section>.empty span::before,
  #contents.inquiry>section>.empty span::before,
  #contents.issue>section>.empty span::before,
  #contents.subscription>section>.empty span::before,
  #contents.reservation>section>.empty span::before {
    margin-bottom: 20px;
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList>section>.empty span::before,
  #details>section>.empty span::before,
  #contents.notice>section>.empty span::before,
  #contents.contact>section>.empty span::before,
  #contents.inquiry>section>.empty span::before,
  #contents.issue>section>.empty span::before,
  #contents.subscription>section>.empty span::before,
  #contents.reservation>section>.empty span::before {
    margin-bottom: 20px;
    width: 100px;
    height: 100px;
  }
}

#contents.salesList>section>.empty.caseOnlineAgreement span::before,
#details>section>.empty.caseOnlineAgreement span::before,
#contents.notice>section>.empty.caseOnlineAgreement span::before,
#contents.contact>section>.empty.caseOnlineAgreement span::before,
#contents.inquiry>section>.empty.caseOnlineAgreement span::before,
#contents.issue>section>.empty.caseOnlineAgreement span::before,
#contents.subscription>section>.empty.caseOnlineAgreement span::before,
#contents.reservation>section>.empty.caseOnlineAgreement span::before {
  background-image: url("../images/gwell/imgEmpty.svg");
}

#contents.salesList>section>section,
#details>section>section,
#contents.notice>section>section,
#contents.contact>section>section,
#contents.inquiry>section>section,
#contents.issue>section>section,
#contents.subscription>section>section,
#contents.reservation>section>section,
#contents.salesList>section>form>section,
#details>section>form>section,
#contents.notice>section>form>section,
#contents.contact>section>form>section,
#contents.inquiry>section>form>section,
#contents.issue>section>form>section,
#contents.subscription>section>form>section,
#contents.reservation>section>form>section {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {

  #contents.salesList>section>section:not(:first-of-type),
  #details>section>section:not(:first-of-type),
  #contents.notice>section>section:not(:first-of-type),
  #contents.contact>section>section:not(:first-of-type),
  #contents.inquiry>section>section:not(:first-of-type),
  #contents.issue>section>section:not(:first-of-type),
  #contents.subscription>section>section:not(:first-of-type),
  #contents.reservation>section>section:not(:first-of-type),
  #contents.salesList>section>form>section:not(:first-of-type),
  #details>section>form>section:not(:first-of-type),
  #contents.notice>section>form>section:not(:first-of-type),
  #contents.contact>section>form>section:not(:first-of-type),
  #contents.inquiry>section>form>section:not(:first-of-type),
  #contents.issue>section>form>section:not(:first-of-type),
  #contents.subscription>section>form>section:not(:first-of-type),
  #contents.reservation>section>form>section:not(:first-of-type) {
    padding-top: 60px;
  }

  #contents.salesList>section>section:first-of-type,
  #details>section>section:first-of-type,
  #contents.notice>section>section:first-of-type,
  #contents.contact>section>section:first-of-type,
  #contents.inquiry>section>section:first-of-type,
  #contents.issue>section>section:first-of-type,
  #contents.subscription>section>section:first-of-type,
  #contents.reservation>section>section:first-of-type,
  #contents.salesList>section>form>section:first-of-type,
  #details>section>form>section:first-of-type,
  #contents.notice>section>form>section:first-of-type,
  #contents.contact>section>form>section:first-of-type,
  #contents.inquiry>section>form>section:first-of-type,
  #contents.issue>section>form>section:first-of-type,
  #contents.subscription>section>form>section:first-of-type,
  #contents.reservation>section>form>section:first-of-type {
    padding-top: 60px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList>section>section,
  #details>section>section,
  #contents.notice>section>section,
  #contents.contact>section>section,
  #contents.inquiry>section>section,
  #contents.issue>section>section,
  #contents.subscription>section>section,
  #contents.reservation>section>section,
  #contents.salesList>section>form>section,
  #details>section>form>section,
  #contents.notice>section>form>section,
  #contents.contact>section>form>section,
  #contents.inquiry>section>form>section,
  #contents.issue>section>form>section,
  #contents.subscription>section>form>section,
  #contents.reservation>section>form>section {
    padding-top: 45px;
  }
}

@media (min-width: 1025px) {

  #contents.salesList>section>section>.h1,
  #details>section>section>.h1,
  #contents.notice>section>section>.h1,
  #contents.contact>section>section>.h1,
  #contents.inquiry>section>section>.h1,
  #contents.issue>section>section>.h1,
  #contents.subscription>section>section>.h1,
  #contents.reservation>section>section>.h1,
  #contents.salesList>section>form>section>.h1,
  #details>section>form>section>.h1,
  #contents.notice>section>form>section>.h1,
  #contents.contact>section>form>section>.h1,
  #contents.inquiry>section>form>section>.h1,
  #contents.issue>section>form>section>.h1,
  #contents.subscription>section>form>section>.h1,
  #contents.reservation>section>form>section>.h1 {
    margin-bottom: 28px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList>section>section>.h1,
  #details>section>section>.h1,
  #contents.notice>section>section>.h1,
  #contents.contact>section>section>.h1,
  #contents.inquiry>section>section>.h1,
  #contents.issue>section>section>.h1,
  #contents.subscription>section>section>.h1,
  #contents.reservation>section>section>.h1,
  #contents.salesList>section>form>section>.h1,
  #details>section>form>section>.h1,
  #contents.notice>section>form>section>.h1,
  #contents.contact>section>form>section>.h1,
  #contents.inquiry>section>form>section>.h1,
  #contents.issue>section>form>section>.h1,
  #contents.subscription>section>form>section>.h1,
  #contents.reservation>section>form>section>.h1 {
    margin-bottom: 18px;
  }
}

@media (min-width: 1025px) {

  #contents.salesList>section>section>h2,
  #details>section>section>h2,
  #contents.notice>section>section>h2,
  #contents.contact>section>section>h2,
  #contents.inquiry>section>section>h2,
  #contents.issue>section>section>h2,
  #contents.subscription>section>section>h2,
  #contents.reservation>section>section>h2,
  #contents.salesList>section>form>section>h2,
  #details>section>form>section>h2,
  #contents.notice>section>form>section>h2,
  #contents.contact>section>form>section>h2,
  #contents.inquiry>section>form>section>h2,
  #contents.issue>section>form>section>h2,
  #contents.subscription>section>form>section>h2,
  #contents.reservation>section>form>section>h2 {
    margin-bottom: 20px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList>section>section>h2,
  #details>section>section>h2,
  #contents.notice>section>section>h2,
  #contents.contact>section>section>h2,
  #contents.inquiry>section>section>h2,
  #contents.issue>section>section>h2,
  #contents.subscription>section>section>h2,
  #contents.reservation>section>section>h2,
  #contents.salesList>section>form>section>h2,
  #details>section>form>section>h2,
  #contents.notice>section>form>section>h2,
  #contents.contact>section>form>section>h2,
  #contents.inquiry>section>form>section>h2,
  #contents.issue>section>form>section>h2,
  #contents.subscription>section>form>section>h2,
  #contents.reservation>section>form>section>h2 {
    margin-bottom: 15px;
  }
}

#contents.salesList>section>section>h3,
#details>section>section>h3,
#contents.notice>section>section>h3,
#contents.contact>section>section>h3,
#contents.inquiry>section>section>h3,
#contents.issue>section>section>h3,
#contents.subscription>section>section>h3,
#contents.reservation>section>section>h3,
#contents.salesList>section>section .secHeader h3,
#details>section>section .secHeader h3,
#contents.notice>section>section .secHeader h3,
#contents.contact>section>section .secHeader h3,
#contents.inquiry>section>section .secHeader h3,
#contents.issue>section>section .secHeader h3,
#contents.subscription>section>section .secHeader h3,
#contents.reservation>section>section .secHeader h3,
#contents.salesList>section>form>section>h3,
#details>section>form>section>h3,
#contents.notice>section>form>section>h3,
#contents.contact>section>form>section>h3,
#contents.inquiry>section>form>section>h3,
#contents.issue>section>form>section>h3,
#contents.subscription>section>form>section>h3,
#contents.reservation>section>form>section>h3,
#contents.salesList>section>form>section .secHeader h3,
#details>section>form>section .secHeader h3,
#contents.notice>section>form>section .secHeader h3,
#contents.contact>section>form>section .secHeader h3,
#contents.inquiry>section>form>section .secHeader h3,
#contents.issue>section>form>section .secHeader h3,
#contents.subscription>section>form>section .secHeader h3,
#contents.reservation>section>form>section .secHeader h3 {
  width: 100%;
  padding-bottom: 20px;
  color: #212121;
}

@media (max-width: 1024px) {

  #contents.salesList>section>section>h3,
  #details>section>section>h3,
  #contents.notice>section>section>h3,
  #contents.contact>section>section>h3,
  #contents.inquiry>section>section>h3,
  #contents.issue>section>section>h3,
  #contents.subscription>section>section>h3,
  #contents.reservation>section>section>h3,
  #contents.salesList>section>section .secHeader h3,
  #details>section>section .secHeader h3,
  #contents.notice>section>section .secHeader h3,
  #contents.contact>section>section .secHeader h3,
  #contents.inquiry>section>section .secHeader h3,
  #contents.issue>section>section .secHeader h3,
  #contents.subscription>section>section .secHeader h3,
  #contents.reservation>section>section .secHeader h3,
  #contents.salesList>section>form>section>h3,
  #details>section>form>section>h3,
  #contents.notice>section>form>section>h3,
  #contents.contact>section>form>section>h3,
  #contents.inquiry>section>form>section>h3,
  #contents.issue>section>form>section>h3,
  #contents.subscription>section>form>section>h3,
  #contents.reservation>section>form>section>h3,
  #contents.salesList>section>form>section .secHeader h3,
  #details>section>form>section .secHeader h3,
  #contents.notice>section>form>section .secHeader h3,
  #contents.contact>section>form>section .secHeader h3,
  #contents.inquiry>section>form>section .secHeader h3,
  #contents.issue>section>form>section .secHeader h3,
  #contents.subscription>section>form>section .secHeader h3,
  #contents.reservation>section>form>section .secHeader h3 {
    font-size: 18px;
  }
}

#contents.salesList>section>section>h3 span,
#details>section>section>h3 span,
#contents.notice>section>section>h3 span,
#contents.contact>section>section>h3 span,
#contents.inquiry>section>section>h3 span,
#contents.issue>section>section>h3 span,
#contents.subscription>section>section>h3 span,
#contents.reservation>section>section>h3 span,
#contents.salesList>section>section .secHeader h3 span,
#details>section>section .secHeader h3 span,
#contents.notice>section>section .secHeader h3 span,
#contents.contact>section>section .secHeader h3 span,
#contents.inquiry>section>section .secHeader h3 span,
#contents.issue>section>section .secHeader h3 span,
#contents.subscription>section>section .secHeader h3 span,
#contents.reservation>section>section .secHeader h3 span,
#contents.salesList>section>form>section>h3 span,
#details>section>form>section>h3 span,
#contents.notice>section>form>section>h3 span,
#contents.contact>section>form>section>h3 span,
#contents.inquiry>section>form>section>h3 span,
#contents.issue>section>form>section>h3 span,
#contents.subscription>section>form>section>h3 span,
#contents.reservation>section>form>section>h3 span,
#contents.salesList>section>form>section .secHeader h3 span,
#details>section>form>section .secHeader h3 span,
#contents.notice>section>form>section .secHeader h3 span,
#contents.contact>section>form>section .secHeader h3 span,
#contents.inquiry>section>form>section .secHeader h3 span,
#contents.issue>section>form>section .secHeader h3 span,
#contents.subscription>section>form>section .secHeader h3 span,
#contents.reservation>section>form>section .secHeader h3 span {
  margin-right: 10px;
  color: #999;
}

#contents.salesList>section>section .secHeader,
#details>section>section .secHeader,
#contents.notice>section>section .secHeader,
#contents.contact>section>section .secHeader,
#contents.inquiry>section>section .secHeader,
#contents.issue>section>section .secHeader,
#contents.subscription>section>section .secHeader,
#contents.reservation>section>section .secHeader,
#contents.salesList>section>form>section .secHeader,
#details>section>form>section .secHeader,
#contents.notice>section>form>section .secHeader,
#contents.contact>section>form>section .secHeader,
#contents.inquiry>section>form>section .secHeader,
#contents.issue>section>form>section .secHeader,
#contents.subscription>section>form>section .secHeader,
#contents.reservation>section>form>section .secHeader {
  position: relative;
}

#contents.salesList>section>section .secHeader h4+.unit,
#details>section>section .secHeader h4+.unit,
#contents.notice>section>section .secHeader h4+.unit,
#contents.contact>section>section .secHeader h4+.unit,
#contents.inquiry>section>section .secHeader h4+.unit,
#contents.issue>section>section .secHeader h4+.unit,
#contents.subscription>section>section .secHeader h4+.unit,
#contents.reservation>section>section .secHeader h4+.unit,
#contents.salesList>section>form>section .secHeader h4+.unit,
#details>section>form>section .secHeader h4+.unit,
#contents.notice>section>form>section .secHeader h4+.unit,
#contents.contact>section>form>section .secHeader h4+.unit,
#contents.inquiry>section>form>section .secHeader h4+.unit,
#contents.issue>section>form>section .secHeader h4+.unit,
#contents.subscription>section>form>section .secHeader h4+.unit,
#contents.reservation>section>form>section .secHeader h4+.unit {
  bottom: 18px;
}

#contents.salesList>section>section .secHeader .unit,
#details>section>section .secHeader .unit,
#contents.notice>section>section .secHeader .unit,
#contents.contact>section>section .secHeader .unit,
#contents.inquiry>section>section .secHeader .unit,
#contents.issue>section>section .secHeader .unit,
#contents.subscription>section>section .secHeader .unit,
#contents.reservation>section>section .secHeader .unit,
#contents.salesList>section>form>section .secHeader .unit,
#details>section>form>section .secHeader .unit,
#contents.notice>section>form>section .secHeader .unit,
#contents.contact>section>form>section .secHeader .unit,
#contents.inquiry>section>form>section .secHeader .unit,
#contents.issue>section>form>section .secHeader .unit,
#contents.subscription>section>form>section .secHeader .unit,
#contents.reservation>section>form>section .secHeader .unit {
  position: absolute;
  bottom: 20px;
  right: 0;
}

#contents.salesList .chooseModelhouse,
#details .chooseModelhouse,
#contents.notice .chooseModelhouse,
#contents.contact .chooseModelhouse,
#contents.inquiry .chooseModelhouse,
#contents.issue .chooseModelhouse,
#contents.subscription .chooseModelhouse,
#contents.reservation .chooseModelhouse {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

#contents.salesList .chooseModelhouse>.h1,
#details .chooseModelhouse>.h1,
#contents.notice .chooseModelhouse>.h1,
#contents.contact .chooseModelhouse>.h1,
#contents.inquiry .chooseModelhouse>.h1,
#contents.issue .chooseModelhouse>.h1,
#contents.subscription .chooseModelhouse>.h1,
#contents.reservation .chooseModelhouse>.h1 {
  width: 100%;
}

#contents.salesList .chooseModelhouse>button,
#details .chooseModelhouse>button,
#contents.notice .chooseModelhouse>button,
#contents.contact .chooseModelhouse>button,
#contents.inquiry .chooseModelhouse>button,
#contents.issue .chooseModelhouse>button,
#contents.subscription .chooseModelhouse>button,
#contents.reservation .chooseModelhouse>button {
  width: calc(50% - 10px);
}

@media (min-width: 1025px) {

  #contents.salesList .chooseModelhouse>button,
  #details .chooseModelhouse>button,
  #contents.notice .chooseModelhouse>button,
  #contents.contact .chooseModelhouse>button,
  #contents.inquiry .chooseModelhouse>button,
  #contents.issue .chooseModelhouse>button,
  #contents.subscription .chooseModelhouse>button,
  #contents.reservation .chooseModelhouse>button {
    padding: 45px 20px;
  }

  #contents.salesList .chooseModelhouse>button+button+button,
  #details .chooseModelhouse>button+button+button,
  #contents.notice .chooseModelhouse>button+button+button,
  #contents.contact .chooseModelhouse>button+button+button,
  #contents.inquiry .chooseModelhouse>button+button+button,
  #contents.issue .chooseModelhouse>button+button+button,
  #contents.subscription .chooseModelhouse>button+button+button,
  #contents.reservation .chooseModelhouse>button+button+button {
    margin-top: 20px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .chooseModelhouse>button,
  #details .chooseModelhouse>button,
  #contents.notice .chooseModelhouse>button,
  #contents.contact .chooseModelhouse>button,
  #contents.inquiry .chooseModelhouse>button,
  #contents.issue .chooseModelhouse>button,
  #contents.subscription .chooseModelhouse>button,
  #contents.reservation .chooseModelhouse>button {
    padding: 25px 20px;
  }

  #contents.salesList .chooseModelhouse>button+button+button,
  #details .chooseModelhouse>button+button+button,
  #contents.notice .chooseModelhouse>button+button+button,
  #contents.contact .chooseModelhouse>button+button+button,
  #contents.inquiry .chooseModelhouse>button+button+button,
  #contents.issue .chooseModelhouse>button+button+button,
  #contents.subscription .chooseModelhouse>button+button+button,
  #contents.reservation .chooseModelhouse>button+button+button {
    margin-top: 10px;
  }
}

@media (max-width: 640px) {

  #contents.salesList .chooseModelhouse>button,
  #details .chooseModelhouse>button,
  #contents.notice .chooseModelhouse>button,
  #contents.contact .chooseModelhouse>button,
  #contents.inquiry .chooseModelhouse>button,
  #contents.issue .chooseModelhouse>button,
  #contents.subscription .chooseModelhouse>button,
  #contents.reservation .chooseModelhouse>button {
    width: 100%;
  }

  #contents.salesList .chooseModelhouse>button+button,
  #details .chooseModelhouse>button+button,
  #contents.notice .chooseModelhouse>button+button,
  #contents.contact .chooseModelhouse>button+button,
  #contents.inquiry .chooseModelhouse>button+button,
  #contents.issue .chooseModelhouse>button+button,
  #contents.subscription .chooseModelhouse>button+button,
  #contents.reservation .chooseModelhouse>button+button {
    margin-top: 10px;
  }
}

#contents.salesList .chooseModelhouse>button.active,
#details .chooseModelhouse>button.active,
#contents.notice .chooseModelhouse>button.active,
#contents.contact .chooseModelhouse>button.active,
#contents.inquiry .chooseModelhouse>button.active,
#contents.issue .chooseModelhouse>button.active,
#contents.subscription .chooseModelhouse>button.active,
#contents.reservation .chooseModelhouse>button.active {
  background: #37234D;
  color: #fff;
}

#contents.salesList .chooseModelhouse>button:not(.active),
#details .chooseModelhouse>button:not(.active),
#contents.notice .chooseModelhouse>button:not(.active),
#contents.contact .chooseModelhouse>button:not(.active),
#contents.inquiry .chooseModelhouse>button:not(.active),
#contents.issue .chooseModelhouse>button:not(.active),
#contents.subscription .chooseModelhouse>button:not(.active),
#contents.reservation .chooseModelhouse>button:not(.active) {
  border: 1px solid #E1E1E1;
  color: #212121;
}

#contents.salesList .chooseModelhouse>button:not(.active):hover,
#details .chooseModelhouse>button:not(.active):hover,
#contents.notice .chooseModelhouse>button:not(.active):hover,
#contents.contact .chooseModelhouse>button:not(.active):hover,
#contents.inquiry .chooseModelhouse>button:not(.active):hover,
#contents.issue .chooseModelhouse>button:not(.active):hover,
#contents.subscription .chooseModelhouse>button:not(.active):hover,
#contents.reservation .chooseModelhouse>button:not(.active):hover {
  border-color: #46296E;
}

#contents.salesList .chooseModelhouse>button b,
#details .chooseModelhouse>button b,
#contents.notice .chooseModelhouse>button b,
#contents.contact .chooseModelhouse>button b,
#contents.inquiry .chooseModelhouse>button b,
#contents.issue .chooseModelhouse>button b,
#contents.subscription .chooseModelhouse>button b,
#contents.reservation .chooseModelhouse>button b {
  display: block;
  margin-bottom: 12px;
}

#contents.salesList .dateTime,
#details .dateTime,
#contents.notice .dateTime,
#contents.contact .dateTime,
#contents.inquiry .dateTime,
#contents.issue .dateTime,
#contents.subscription .dateTime,
#contents.reservation .dateTime {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

#contents.salesList .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header,
#details .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header,
#contents.notice .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header,
#contents.contact .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header,
#contents.inquiry .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header,
#contents.issue .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header,
#contents.subscription .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header,
#contents.reservation .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header {
  background: #fff !important;
}

#contents.salesList .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header .ui-datepicker-month,
#details .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header .ui-datepicker-month,
#contents.notice .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header .ui-datepicker-month,
#contents.contact .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header .ui-datepicker-month,
#contents.inquiry .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header .ui-datepicker-month,
#contents.issue .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header .ui-datepicker-month,
#contents.subscription .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header .ui-datepicker-month,
#contents.reservation .dateTime .datepickerBig .ui-datepicker .ui-datepicker-header .ui-datepicker-month {
  position: relative;
  left: -5px;
}

#contents.salesList .dateTime .datepickerBig .ui-datepicker-calendar thead th,
#details .dateTime .datepickerBig .ui-datepicker-calendar thead th,
#contents.notice .dateTime .datepickerBig .ui-datepicker-calendar thead th,
#contents.contact .dateTime .datepickerBig .ui-datepicker-calendar thead th,
#contents.inquiry .dateTime .datepickerBig .ui-datepicker-calendar thead th,
#contents.issue .dateTime .datepickerBig .ui-datepicker-calendar thead th,
#contents.subscription .dateTime .datepickerBig .ui-datepicker-calendar thead th,
#contents.reservation .dateTime .datepickerBig .ui-datepicker-calendar thead th {
  background: #f9f9f9;
}

#contents.salesList .dateTime .datepickerBig td[data-handler=selectDay].start,
#details .dateTime .datepickerBig td[data-handler=selectDay].start,
#contents.notice .dateTime .datepickerBig td[data-handler=selectDay].start,
#contents.contact .dateTime .datepickerBig td[data-handler=selectDay].start,
#contents.inquiry .dateTime .datepickerBig td[data-handler=selectDay].start,
#contents.issue .dateTime .datepickerBig td[data-handler=selectDay].start,
#contents.subscription .dateTime .datepickerBig td[data-handler=selectDay].start,
#contents.reservation .dateTime .datepickerBig td[data-handler=selectDay].start {
  background: #eee;
}

#contents.salesList .dateTime .datepickerBig td[data-handler=selectDay].end,
#details .dateTime .datepickerBig td[data-handler=selectDay].end,
#contents.notice .dateTime .datepickerBig td[data-handler=selectDay].end,
#contents.contact .dateTime .datepickerBig td[data-handler=selectDay].end,
#contents.inquiry .dateTime .datepickerBig td[data-handler=selectDay].end,
#contents.issue .dateTime .datepickerBig td[data-handler=selectDay].end,
#contents.subscription .dateTime .datepickerBig td[data-handler=selectDay].end,
#contents.reservation .dateTime .datepickerBig td[data-handler=selectDay].end {
  background: #eee;
}

#contents.salesList .dateTime .datepickerBig .ui-state-disabled,
#details .dateTime .datepickerBig .ui-state-disabled,
#contents.notice .dateTime .datepickerBig .ui-state-disabled,
#contents.contact .dateTime .datepickerBig .ui-state-disabled,
#contents.inquiry .dateTime .datepickerBig .ui-state-disabled,
#contents.issue .dateTime .datepickerBig .ui-state-disabled,
#contents.subscription .dateTime .datepickerBig .ui-state-disabled,
#contents.reservation .dateTime .datepickerBig .ui-state-disabled {
  opacity: 1 !important;
}

@media (min-width: 1025px) {

  #contents.salesList .dateTime .datepickerBig .ui-state-disabled,
  #details .dateTime .datepickerBig .ui-state-disabled,
  #contents.notice .dateTime .datepickerBig .ui-state-disabled,
  #contents.contact .dateTime .datepickerBig .ui-state-disabled,
  #contents.inquiry .dateTime .datepickerBig .ui-state-disabled,
  #contents.issue .dateTime .datepickerBig .ui-state-disabled,
  #contents.subscription .dateTime .datepickerBig .ui-state-disabled,
  #contents.reservation .dateTime .datepickerBig .ui-state-disabled {
    background: #eee;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .dateTime .datepickerBig .ui-state-disabled,
  #details .dateTime .datepickerBig .ui-state-disabled,
  #contents.notice .dateTime .datepickerBig .ui-state-disabled,
  #contents.contact .dateTime .datepickerBig .ui-state-disabled,
  #contents.inquiry .dateTime .datepickerBig .ui-state-disabled,
  #contents.issue .dateTime .datepickerBig .ui-state-disabled,
  #contents.subscription .dateTime .datepickerBig .ui-state-disabled,
  #contents.reservation .dateTime .datepickerBig .ui-state-disabled {
    background: #eee;
  }
}

#contents.salesList .dateTime>section,
#details .dateTime>section,
#contents.notice .dateTime>section,
#contents.contact .dateTime>section,
#contents.inquiry .dateTime>section,
#contents.issue .dateTime>section,
#contents.subscription .dateTime>section,
#contents.reservation .dateTime>section {
  position: relative;
  padding-bottom: 40px;
}

@media (min-width: 1025px) {

  #contents.salesList .dateTime>section,
  #details .dateTime>section,
  #contents.notice .dateTime>section,
  #contents.contact .dateTime>section,
  #contents.inquiry .dateTime>section,
  #contents.issue .dateTime>section,
  #contents.subscription .dateTime>section,
  #contents.reservation .dateTime>section {
    width: calc(50% - 20px);
  }
}

@media (max-width: 1024px) {

  #contents.salesList .dateTime>section,
  #details .dateTime>section,
  #contents.notice .dateTime>section,
  #contents.contact .dateTime>section,
  #contents.inquiry .dateTime>section,
  #contents.issue .dateTime>section,
  #contents.subscription .dateTime>section,
  #contents.reservation .dateTime>section {
    width: calc(50% - 10px);
  }
}

@media (max-width: 640px) {

  #contents.salesList .dateTime>section,
  #details .dateTime>section,
  #contents.notice .dateTime>section,
  #contents.contact .dateTime>section,
  #contents.inquiry .dateTime>section,
  #contents.issue .dateTime>section,
  #contents.subscription .dateTime>section,
  #contents.reservation .dateTime>section {
    width: 100%;
  }

  #contents.salesList .dateTime>section+section,
  #details .dateTime>section+section,
  #contents.notice .dateTime>section+section,
  #contents.contact .dateTime>section+section,
  #contents.inquiry .dateTime>section+section,
  #contents.issue .dateTime>section+section,
  #contents.subscription .dateTime>section+section,
  #contents.reservation .dateTime>section+section {
    margin-top: 40px;
  }
}

#contents.salesList .dateTime>section>.h1,
#details .dateTime>section>.h1,
#contents.notice .dateTime>section>.h1,
#contents.contact .dateTime>section>.h1,
#contents.inquiry .dateTime>section>.h1,
#contents.issue .dateTime>section>.h1,
#contents.subscription .dateTime>section>.h1,
#contents.reservation .dateTime>section>.h1 {
  margin-bottom: 18px;
  font-weight: 400;
  color: #212121;
}

#contents.salesList .dateTime>section>dl,
#details .dateTime>section>dl,
#contents.notice .dateTime>section>dl,
#contents.contact .dateTime>section>dl,
#contents.inquiry .dateTime>section>dl,
#contents.issue .dateTime>section>dl,
#contents.subscription .dateTime>section>dl,
#contents.reservation .dateTime>section>dl {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  height: 70px;
  background: #fff;
}

#contents.salesList .dateTime>section>dl dd,
#details .dateTime>section>dl dd,
#contents.notice .dateTime>section>dl dd,
#contents.contact .dateTime>section>dl dd,
#contents.inquiry .dateTime>section>dl dd,
#contents.issue .dateTime>section>dl dd,
#contents.subscription .dateTime>section>dl dd,
#contents.reservation .dateTime>section>dl dd {
  margin-left: 18px;
  font-weight: 700;
}

#contents.salesList .dateTime>section .chooseTime,
#details .dateTime>section .chooseTime,
#contents.notice .dateTime>section .chooseTime,
#contents.contact .dateTime>section .chooseTime,
#contents.inquiry .dateTime>section .chooseTime,
#contents.issue .dateTime>section .chooseTime,
#contents.subscription .dateTime>section .chooseTime,
#contents.reservation .dateTime>section .chooseTime {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

@media (min-width: 1025px) {

  #contents.salesList .dateTime>section .chooseTime,
  #details .dateTime>section .chooseTime,
  #contents.notice .dateTime>section .chooseTime,
  #contents.contact .dateTime>section .chooseTime,
  #contents.inquiry .dateTime>section .chooseTime,
  #contents.issue .dateTime>section .chooseTime,
  #contents.subscription .dateTime>section .chooseTime,
  #contents.reservation .dateTime>section .chooseTime {
    padding: 20px 6.89% 0;
    margin: 0 -10px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .dateTime>section .chooseTime,
  #details .dateTime>section .chooseTime,
  #contents.notice .dateTime>section .chooseTime,
  #contents.contact .dateTime>section .chooseTime,
  #contents.inquiry .dateTime>section .chooseTime,
  #contents.issue .dateTime>section .chooseTime,
  #contents.subscription .dateTime>section .chooseTime,
  #contents.reservation .dateTime>section .chooseTime {
    padding: 10px 0;
  }
}

#contents.salesList .dateTime>section .chooseTime button,
#details .dateTime>section .chooseTime button,
#contents.notice .dateTime>section .chooseTime button,
#contents.contact .dateTime>section .chooseTime button,
#contents.inquiry .dateTime>section .chooseTime button,
#contents.issue .dateTime>section .chooseTime button,
#contents.subscription .dateTime>section .chooseTime button,
#contents.reservation .dateTime>section .chooseTime button {
  margin-top: 10px;
}

@media (min-width: 1025px) {

  #contents.salesList .dateTime>section .chooseTime button,
  #details .dateTime>section .chooseTime button,
  #contents.notice .dateTime>section .chooseTime button,
  #contents.contact .dateTime>section .chooseTime button,
  #contents.inquiry .dateTime>section .chooseTime button,
  #contents.issue .dateTime>section .chooseTime button,
  #contents.subscription .dateTime>section .chooseTime button,
  #contents.reservation .dateTime>section .chooseTime button {
    margin: 6.6666666667px;
    width: calc(33.3333333333% - 13.3333333333px);
    height: 44px;
    border-radius: 22px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .dateTime>section .chooseTime button,
  #details .dateTime>section .chooseTime button,
  #contents.notice .dateTime>section .chooseTime button,
  #contents.contact .dateTime>section .chooseTime button,
  #contents.inquiry .dateTime>section .chooseTime button,
  #contents.issue .dateTime>section .chooseTime button,
  #contents.subscription .dateTime>section .chooseTime button,
  #contents.reservation .dateTime>section .chooseTime button {
    margin: 5px;
    width: calc(50% - 10px);
    height: 40px;
    border-radius: 20px;
  }
}

#contents.salesList .dateTime>section .chooseTime button:not(.active):not(:disabled),
#details .dateTime>section .chooseTime button:not(.active):not(:disabled),
#contents.notice .dateTime>section .chooseTime button:not(.active):not(:disabled),
#contents.contact .dateTime>section .chooseTime button:not(.active):not(:disabled),
#contents.inquiry .dateTime>section .chooseTime button:not(.active):not(:disabled),
#contents.issue .dateTime>section .chooseTime button:not(.active):not(:disabled),
#contents.subscription .dateTime>section .chooseTime button:not(.active):not(:disabled),
#contents.reservation .dateTime>section .chooseTime button:not(.active):not(:disabled) {
  background: #fff;
}

#contents.salesList .dateTime>section .chooseTime button.active,
#details .dateTime>section .chooseTime button.active,
#contents.notice .dateTime>section .chooseTime button.active,
#contents.contact .dateTime>section .chooseTime button.active,
#contents.inquiry .dateTime>section .chooseTime button.active,
#contents.issue .dateTime>section .chooseTime button.active,
#contents.subscription .dateTime>section .chooseTime button.active,
#contents.reservation .dateTime>section .chooseTime button.active {
  background: #37234D;
  color: #fff;
}

#contents.salesList .dateTime>section .chooseTime button:disabled,
#details .dateTime>section .chooseTime button:disabled,
#contents.notice .dateTime>section .chooseTime button:disabled,
#contents.contact .dateTime>section .chooseTime button:disabled,
#contents.inquiry .dateTime>section .chooseTime button:disabled,
#contents.issue .dateTime>section .chooseTime button:disabled,
#contents.subscription .dateTime>section .chooseTime button:disabled,
#contents.reservation .dateTime>section .chooseTime button:disabled {
  background: #e9e9e9;
}

#contents.salesList .dateTime>section .chooseTime>p,
#details .dateTime>section .chooseTime>p,
#contents.notice .dateTime>section .chooseTime>p,
#contents.contact .dateTime>section .chooseTime>p,
#contents.inquiry .dateTime>section .chooseTime>p,
#contents.issue .dateTime>section .chooseTime>p,
#contents.subscription .dateTime>section .chooseTime>p,
#contents.reservation .dateTime>section .chooseTime>p {
  width: 100%;
  text-align: center;
  color: #212121;
  background: url("../images/icon/iconGwellCalendar.svg") no-repeat center 70px;
  padding-top: 180px;
}

@media (max-width: 640px) {

  #contents.salesList .dateTime>section .chooseTime>p,
  #details .dateTime>section .chooseTime>p,
  #contents.notice .dateTime>section .chooseTime>p,
  #contents.contact .dateTime>section .chooseTime>p,
  #contents.inquiry .dateTime>section .chooseTime>p,
  #contents.issue .dateTime>section .chooseTime>p,
  #contents.subscription .dateTime>section .chooseTime>p,
  #contents.reservation .dateTime>section .chooseTime>p {
    padding-top: 170px;
    background-size: 100px;
    padding-bottom: 60px;
  }
}

#contents.salesList .dateTime>section .chooseTime>p b,
#details .dateTime>section .chooseTime>p b,
#contents.notice .dateTime>section .chooseTime>p b,
#contents.contact .dateTime>section .chooseTime>p b,
#contents.inquiry .dateTime>section .chooseTime>p b,
#contents.issue .dateTime>section .chooseTime>p b,
#contents.subscription .dateTime>section .chooseTime>p b,
#contents.reservation .dateTime>section .chooseTime>p b {
  color: #37234D;
}

#contents.salesList .dateTime>section .availability,
#details .dateTime>section .availability,
#contents.notice .dateTime>section .availability,
#contents.contact .dateTime>section .availability,
#contents.inquiry .dateTime>section .availability,
#contents.issue .dateTime>section .availability,
#contents.subscription .dateTime>section .availability,
#contents.reservation .dateTime>section .availability {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding-top: 15px;
}

#contents.salesList .dateTime>section .availability span,
#details .dateTime>section .availability span,
#contents.notice .dateTime>section .availability span,
#contents.contact .dateTime>section .availability span,
#contents.inquiry .dateTime>section .availability span,
#contents.issue .dateTime>section .availability span,
#contents.subscription .dateTime>section .availability span,
#contents.reservation .dateTime>section .availability span {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  color: #666;
}

#contents.salesList .dateTime>section .availability span+span,
#details .dateTime>section .availability span+span,
#contents.notice .dateTime>section .availability span+span,
#contents.contact .dateTime>section .availability span+span,
#contents.inquiry .dateTime>section .availability span+span,
#contents.issue .dateTime>section .availability span+span,
#contents.subscription .dateTime>section .availability span+span,
#contents.reservation .dateTime>section .availability span+span {
  margin-left: 23px;
}

#contents.salesList .dateTime>section .availability span::before,
#details .dateTime>section .availability span::before,
#contents.notice .dateTime>section .availability span::before,
#contents.contact .dateTime>section .availability span::before,
#contents.inquiry .dateTime>section .availability span::before,
#contents.issue .dateTime>section .availability span::before,
#contents.subscription .dateTime>section .availability span::before,
#contents.reservation .dateTime>section .availability span::before {
  content: "";
  margin-right: 8px;
  width: 20px;
  height: 20px;
  border: 1px solid #c8c8c8;
  background: #fff;
  border-radius: 50%;
}

@media (min-width: 1025px) {

  #contents.salesList .dateTime>section .availability span:last-child::before,
  #details .dateTime>section .availability span:last-child::before,
  #contents.notice .dateTime>section .availability span:last-child::before,
  #contents.contact .dateTime>section .availability span:last-child::before,
  #contents.inquiry .dateTime>section .availability span:last-child::before,
  #contents.issue .dateTime>section .availability span:last-child::before,
  #contents.subscription .dateTime>section .availability span:last-child::before,
  #contents.reservation .dateTime>section .availability span:last-child::before {
    background: #e9e9e9;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .dateTime>section .availability span:last-child::before,
  #details .dateTime>section .availability span:last-child::before,
  #contents.notice .dateTime>section .availability span:last-child::before,
  #contents.contact .dateTime>section .availability span:last-child::before,
  #contents.inquiry .dateTime>section .availability span:last-child::before,
  #contents.issue .dateTime>section .availability span:last-child::before,
  #contents.subscription .dateTime>section .availability span:last-child::before,
  #contents.reservation .dateTime>section .availability span:last-child::before {
    background: #f6f6f6;
  }
}

@media (min-width: 1025px) {

  #contents.salesList .dateTime>section .chooseTime+.availability,
  #details .dateTime>section .chooseTime+.availability,
  #contents.notice .dateTime>section .chooseTime+.availability,
  #contents.contact .dateTime>section .chooseTime+.availability,
  #contents.inquiry .dateTime>section .chooseTime+.availability,
  #contents.issue .dateTime>section .chooseTime+.availability,
  #contents.subscription .dateTime>section .chooseTime+.availability,
  #contents.reservation .dateTime>section .chooseTime+.availability {
    border-top: 1px solid #E1E1E1;
  }
}

#contents.salesList .form>p,
#details .form>p,
#contents.notice .form>p,
#contents.contact .form>p,
#contents.inquiry .form>p,
#contents.issue .form>p,
#contents.subscription .form>p,
#contents.reservation .form>p {
  margin: -10px 0 30px 0;
  width: 100%;
  color: #37234D;
}

@media (max-width: 1024px) {

  #contents.salesList .form>p,
  #details .form>p,
  #contents.notice .form>p,
  #contents.contact .form>p,
  #contents.inquiry .form>p,
  #contents.issue .form>p,
  #contents.subscription .form>p,
  #contents.reservation .form>p {
    margin-bottom: 20px;
  }
}

#contents.salesList .form>p.desc,
#details .form>p.desc,
#contents.notice .form>p.desc,
#contents.contact .form>p.desc,
#contents.inquiry .form>p.desc,
#contents.issue .form>p.desc,
#contents.subscription .form>p.desc,
#contents.reservation .form>p.desc {
  color: #666;
}

#contents.salesList .form hr,
#details .form hr,
#contents.notice .form hr,
#contents.contact .form hr,
#contents.inquiry .form hr,
#contents.issue .form hr,
#contents.subscription .form hr,
#contents.reservation .form hr {
  width: 100%;
  margin: 40px 0 5px;
  border-top: 1px solid #E1E1E1;
}

@media (max-width: 1024px) {

  #contents.salesList .form hr,
  #details .form hr,
  #contents.notice .form hr,
  #contents.contact .form hr,
  #contents.inquiry .form hr,
  #contents.issue .form hr,
  #contents.subscription .form hr,
  #contents.reservation .form hr {
    display: none;
  }
}

#contents.salesList .form .inHalf,
#details .form .inHalf,
#contents.notice .form .inHalf,
#contents.contact .form .inHalf,
#contents.inquiry .form .inHalf,
#contents.issue .form .inHalf,
#contents.subscription .form .inHalf,
#contents.reservation .form .inHalf {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 1025px) {

  #contents.salesList .form .inHalf .selectBox,
  #details .form .inHalf .selectBox,
  #contents.notice .form .inHalf .selectBox,
  #contents.contact .form .inHalf .selectBox,
  #contents.inquiry .form .inHalf .selectBox,
  #contents.issue .form .inHalf .selectBox,
  #contents.subscription .form .inHalf .selectBox,
  #contents.reservation .form .inHalf .selectBox {
    width: 200px;
  }
}

#contents.salesList .form .inHalf .selectBox button,
#details .form .inHalf .selectBox button,
#contents.notice .form .inHalf .selectBox button,
#contents.contact .form .inHalf .selectBox button,
#contents.inquiry .form .inHalf .selectBox button,
#contents.issue .form .inHalf .selectBox button,
#contents.subscription .form .inHalf .selectBox button,
#contents.reservation .form .inHalf .selectBox button {
  color: #a5a5a5;
}

@media (min-width: 1025px) {

  #contents.salesList .form .inHalf .selectBox button,
  #details .form .inHalf .selectBox button,
  #contents.notice .form .inHalf .selectBox button,
  #contents.contact .form .inHalf .selectBox button,
  #contents.inquiry .form .inHalf .selectBox button,
  #contents.issue .form .inHalf .selectBox button,
  #contents.subscription .form .inHalf .selectBox button,
  #contents.reservation .form .inHalf .selectBox button {
    width: 200px;
  }
}

#contents.salesList .form .inHalf em,
#details .form .inHalf em,
#contents.notice .form .inHalf em,
#contents.contact .form .inHalf em,
#contents.inquiry .form .inHalf em,
#contents.issue .form .inHalf em,
#contents.subscription .form .inHalf em,
#contents.reservation .form .inHalf em {
  width: 31px;
  text-align: center;
}

@media (max-width: 640px) {

  #contents.salesList .form .half.addr,
  #details .form .half.addr,
  #contents.notice .form .half.addr,
  #contents.contact .form .half.addr,
  #contents.inquiry .form .half.addr,
  #contents.issue .form .half.addr,
  #contents.subscription .form .half.addr,
  #contents.reservation .form .half.addr {
    margin-top: 10px !important;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .form .half .inHalf.account,
  #details .form .half .inHalf.account,
  #contents.notice .form .half .inHalf.account,
  #contents.contact .form .half .inHalf.account,
  #contents.inquiry .form .half .inHalf.account,
  #contents.issue .form .half .inHalf.account,
  #contents.subscription .form .half .inHalf.account,
  #contents.reservation .form .half .inHalf.account {
    display: block;
  }

  #contents.salesList .form .half .inHalf.account .selectBox,
  #details .form .half .inHalf.account .selectBox,
  #contents.notice .form .half .inHalf.account .selectBox,
  #contents.contact .form .half .inHalf.account .selectBox,
  #contents.inquiry .form .half .inHalf.account .selectBox,
  #contents.issue .form .half .inHalf.account .selectBox,
  #contents.subscription .form .half .inHalf.account .selectBox,
  #contents.reservation .form .half .inHalf.account .selectBox {
    margin-bottom: 10px;
  }
}

#contents.salesList .form .label.hide,
#details .form .label.hide,
#contents.notice .form .label.hide,
#contents.contact .form .label.hide,
#contents.inquiry .form .label.hide,
#contents.issue .form .label.hide,
#contents.subscription .form .label.hide,
#contents.reservation .form .label.hide {
  opacity: 0;
}

@media (max-width: 640px) {

  #contents.salesList .form .label.hide,
  #details .form .label.hide,
  #contents.notice .form .label.hide,
  #contents.contact .form .label.hide,
  #contents.inquiry .form .label.hide,
  #contents.issue .form .label.hide,
  #contents.subscription .form .label.hide,
  #contents.reservation .form .label.hide {
    display: none;
  }
}

#contents.salesList .form input,
#details .form input,
#contents.notice .form input,
#contents.contact .form input,
#contents.inquiry .form input,
#contents.issue .form input,
#contents.subscription .form input,
#contents.reservation .form input {
  height: 50px !important;
  border: 0 !important;
}

#contents.salesList .form input:disabled,
#details .form input:disabled,
#contents.notice .form input:disabled,
#contents.contact .form input:disabled,
#contents.inquiry .form input:disabled,
#contents.issue .form input:disabled,
#contents.subscription .form input:disabled,
#contents.reservation .form input:disabled {
  background: #eee !important;
  border: 0 !important;
  -webkit-text-fill-color: #666;
  -webkit-opacity: 1;
  color: #666;
}

#contents.salesList .form input.zoom,
#details .form input.zoom,
#contents.notice .form input.zoom,
#contents.contact .form input.zoom,
#contents.inquiry .form input.zoom,
#contents.issue .form input.zoom,
#contents.subscription .form input.zoom,
#contents.reservation .form input.zoom {
  background-image: url("../images/icon/iconZoom.svg") !important;
  background-repeat: no-repeat;
  background-size: 25px !important;
  background-position: right 20px center !important;
  -moz-filter: grayscale(100);
  -ms-filter: grayscale(100);
  -o-filter: grayscale(100);
  filter: grayscale(100);
}

#contents.salesList .form input+input,
#details .form input+input,
#contents.notice .form input+input,
#contents.contact .form input+input,
#contents.inquiry .form input+input,
#contents.issue .form input+input,
#contents.subscription .form input+input,
#contents.reservation .form input+input {
  margin-top: 10px;
}

#contents.salesList .form .inputTxt,
#details .form .inputTxt,
#contents.notice .form .inputTxt,
#contents.contact .form .inputTxt,
#contents.inquiry .form .inputTxt,
#contents.issue .form .inputTxt,
#contents.subscription .form .inputTxt,
#contents.reservation .form .inputTxt {
  display: block;
  width: 100%;
  height: auto;
  padding: 15px;
  line-height: 1.5;
  background: #eee;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
}

#contents.salesList .form .selectBox,
#details .form .selectBox,
#contents.notice .form .selectBox,
#contents.contact .form .selectBox,
#contents.inquiry .form .selectBox,
#contents.issue .form .selectBox,
#contents.subscription .form .selectBox,
#contents.reservation .form .selectBox {
  position: relative;
}

#contents.salesList .form .selectBox>button,
#details .form .selectBox>button,
#contents.notice .form .selectBox>button,
#contents.contact .form .selectBox>button,
#contents.inquiry .form .selectBox>button,
#contents.issue .form .selectBox>button,
#contents.subscription .form .selectBox>button,
#contents.reservation .form .selectBox>button {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #707070;
  text-align: left;
  color: #666;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 30px !important;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
}

#contents.salesList .form .selectBox>button::after,
#details .form .selectBox>button::after,
#contents.notice .form .selectBox>button::after,
#contents.contact .form .selectBox>button::after,
#contents.inquiry .form .selectBox>button::after,
#contents.issue .form .selectBox>button::after,
#contents.subscription .form .selectBox>button::after,
#contents.reservation .form .selectBox>button::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-width: 0 0 1px 1px;
  border-color: #212121;
  border-style: solid;
  transform: rotate(-45deg);
  right: 20px;
}

#contents.salesList .form .selectBox>button.placeholder,
#details .form .selectBox>button.placeholder,
#contents.notice .form .selectBox>button.placeholder,
#contents.contact .form .selectBox>button.placeholder,
#contents.inquiry .form .selectBox>button.placeholder,
#contents.issue .form .selectBox>button.placeholder,
#contents.subscription .form .selectBox>button.placeholder,
#contents.reservation .form .selectBox>button.placeholder {
  color: #a5a5a5;
}

#contents.salesList .form .selectBox>button.active,
#details .form .selectBox>button.active,
#contents.notice .form .selectBox>button.active,
#contents.contact .form .selectBox>button.active,
#contents.inquiry .form .selectBox>button.active,
#contents.issue .form .selectBox>button.active,
#contents.subscription .form .selectBox>button.active,
#contents.reservation .form .selectBox>button.active {
  color: #46296E;
  border-color: #46296E;
}

#contents.salesList .form .selectBox>button.active::after,
#details .form .selectBox>button.active::after,
#contents.notice .form .selectBox>button.active::after,
#contents.contact .form .selectBox>button.active::after,
#contents.inquiry .form .selectBox>button.active::after,
#contents.issue .form .selectBox>button.active::after,
#contents.subscription .form .selectBox>button.active::after,
#contents.reservation .form .selectBox>button.active::after {
  border-color: #46296E;
}

#contents.salesList .form .selectBox>div,
#details .form .selectBox>div,
#contents.notice .form .selectBox>div,
#contents.contact .form .selectBox>div,
#contents.inquiry .form .selectBox>div,
#contents.issue .form .selectBox>div,
#contents.subscription .form .selectBox>div,
#contents.reservation .form .selectBox>div {
  z-index: 3;
  position: absolute;
  display: none;
  width: 100%;
  overflow: auto;
  background: #fff;
  -ms-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  -o-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.102);
}

#contents.salesList .form .selectBox>div::before,
#details .form .selectBox>div::before,
#contents.notice .form .selectBox>div::before,
#contents.contact .form .selectBox>div::before,
#contents.inquiry .form .selectBox>div::before,
#contents.issue .form .selectBox>div::before,
#contents.subscription .form .selectBox>div::before,
#contents.reservation .form .selectBox>div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: #46296E;
  display: none;
}

#contents.salesList .form .selectBox>div button,
#details .form .selectBox>div button,
#contents.notice .form .selectBox>div button,
#contents.contact .form .selectBox>div button,
#contents.inquiry .form .selectBox>div button,
#contents.issue .form .selectBox>div button,
#contents.subscription .form .selectBox>div button,
#contents.reservation .form .selectBox>div button {
  width: 100%;
  line-height: 2.5 !important;
  text-align: left;
}

#contents.salesList .form .selectBox>div button.selected,
#details .form .selectBox>div button.selected,
#contents.notice .form .selectBox>div button.selected,
#contents.contact .form .selectBox>div button.selected,
#contents.inquiry .form .selectBox>div button.selected,
#contents.issue .form .selectBox>div button.selected,
#contents.subscription .form .selectBox>div button.selected,
#contents.reservation .form .selectBox>div button.selected {
  color: #46296E;
}

@media (min-width: 1025px) {

  #contents.salesList .form .selectBox>div>button:first-child,
  #details .form .selectBox>div>button:first-child,
  #contents.notice .form .selectBox>div>button:first-child,
  #contents.contact .form .selectBox>div>button:first-child,
  #contents.inquiry .form .selectBox>div>button:first-child,
  #contents.issue .form .selectBox>div>button:first-child,
  #contents.subscription .form .selectBox>div>button:first-child,
  #contents.reservation .form .selectBox>div>button:first-child {
    margin-top: 10px;
  }

  #contents.salesList .form .selectBox>div>button:last-child,
  #details .form .selectBox>div>button:last-child,
  #contents.notice .form .selectBox>div>button:last-child,
  #contents.contact .form .selectBox>div>button:last-child,
  #contents.inquiry .form .selectBox>div>button:last-child,
  #contents.issue .form .selectBox>div>button:last-child,
  #contents.subscription .form .selectBox>div>button:last-child,
  #contents.reservation .form .selectBox>div>button:last-child {
    margin-bottom: 10px;
  }

  #contents.salesList .form .selectBox>button,
  #details .form .selectBox>button,
  #contents.notice .form .selectBox>button,
  #contents.contact .form .selectBox>button,
  #contents.inquiry .form .selectBox>button,
  #contents.issue .form .selectBox>button,
  #contents.subscription .form .selectBox>button,
  #contents.reservation .form .selectBox>button {
    height: 54px;
  }

  #contents.salesList .form .selectBox>button::after,
  #details .form .selectBox>button::after,
  #contents.notice .form .selectBox>button::after,
  #contents.contact .form .selectBox>button::after,
  #contents.inquiry .form .selectBox>button::after,
  #contents.issue .form .selectBox>button::after,
  #contents.subscription .form .selectBox>button::after,
  #contents.reservation .form .selectBox>button::after {
    top: 20px;
  }

  #contents.salesList .form .selectBox>button,
  #details .form .selectBox>button,
  #contents.notice .form .selectBox>button,
  #contents.contact .form .selectBox>button,
  #contents.inquiry .form .selectBox>button,
  #contents.issue .form .selectBox>button,
  #contents.subscription .form .selectBox>button,
  #contents.reservation .form .selectBox>button,
  #contents.salesList .form .selectBox>div button,
  #details .form .selectBox>div button,
  #contents.notice .form .selectBox>div button,
  #contents.contact .form .selectBox>div button,
  #contents.inquiry .form .selectBox>div button,
  #contents.issue .form .selectBox>div button,
  #contents.subscription .form .selectBox>div button,
  #contents.reservation .form .selectBox>div button {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .form .selectBox>div>button:first-child,
  #details .form .selectBox>div>button:first-child,
  #contents.notice .form .selectBox>div>button:first-child,
  #contents.contact .form .selectBox>div>button:first-child,
  #contents.inquiry .form .selectBox>div>button:first-child,
  #contents.issue .form .selectBox>div>button:first-child,
  #contents.subscription .form .selectBox>div>button:first-child,
  #contents.reservation .form .selectBox>div>button:first-child {
    margin-top: 5px;
  }

  #contents.salesList .form .selectBox>div>button:last-child,
  #details .form .selectBox>div>button:last-child,
  #contents.notice .form .selectBox>div>button:last-child,
  #contents.contact .form .selectBox>div>button:last-child,
  #contents.inquiry .form .selectBox>div>button:last-child,
  #contents.issue .form .selectBox>div>button:last-child,
  #contents.subscription .form .selectBox>div>button:last-child,
  #contents.reservation .form .selectBox>div>button:last-child {
    margin-bottom: 5px;
  }

  #contents.salesList .form .selectBox>button,
  #details .form .selectBox>button,
  #contents.notice .form .selectBox>button,
  #contents.contact .form .selectBox>button,
  #contents.inquiry .form .selectBox>button,
  #contents.issue .form .selectBox>button,
  #contents.subscription .form .selectBox>button,
  #contents.reservation .form .selectBox>button {
    height: 40px;
  }

  #contents.salesList .form .selectBox>button::after,
  #details .form .selectBox>button::after,
  #contents.notice .form .selectBox>button::after,
  #contents.contact .form .selectBox>button::after,
  #contents.inquiry .form .selectBox>button::after,
  #contents.issue .form .selectBox>button::after,
  #contents.subscription .form .selectBox>button::after,
  #contents.reservation .form .selectBox>button::after {
    top: 10px;
  }

  #contents.salesList .form .selectBox>button,
  #details .form .selectBox>button,
  #contents.notice .form .selectBox>button,
  #contents.contact .form .selectBox>button,
  #contents.inquiry .form .selectBox>button,
  #contents.issue .form .selectBox>button,
  #contents.subscription .form .selectBox>button,
  #contents.reservation .form .selectBox>button,
  #contents.salesList .form .selectBox>div button,
  #details .form .selectBox>div button,
  #contents.notice .form .selectBox>div button,
  #contents.contact .form .selectBox>div button,
  #contents.inquiry .form .selectBox>div button,
  #contents.issue .form .selectBox>div button,
  #contents.subscription .form .selectBox>div button,
  #contents.reservation .form .selectBox>div button {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .form .selectBox,
  #details .form .selectBox,
  #contents.notice .form .selectBox,
  #contents.contact .form .selectBox,
  #contents.inquiry .form .selectBox,
  #contents.issue .form .selectBox,
  #contents.subscription .form .selectBox,
  #contents.reservation .form .selectBox {
    width: 100%;
  }
}

#contents.salesList .form .selectBox button,
#details .form .selectBox button,
#contents.notice .form .selectBox button,
#contents.contact .form .selectBox button,
#contents.inquiry .form .selectBox button,
#contents.issue .form .selectBox button,
#contents.subscription .form .selectBox button,
#contents.reservation .form .selectBox button {
  height: 50px;
  line-height: 2.5 !important;
  color: #a5a5a5;
  border: 0;
  background: #fff;
}

#contents.salesList .form .selectBox button:not(.placeholder),
#details .form .selectBox button:not(.placeholder),
#contents.notice .form .selectBox button:not(.placeholder),
#contents.contact .form .selectBox button:not(.placeholder),
#contents.inquiry .form .selectBox button:not(.placeholder),
#contents.issue .form .selectBox button:not(.placeholder),
#contents.subscription .form .selectBox button:not(.placeholder),
#contents.reservation .form .selectBox button:not(.placeholder) {
  color: #212121;
}

@media (max-width: 1024px) {

  #contents.salesList .form .selectBox button,
  #details .form .selectBox button,
  #contents.notice .form .selectBox button,
  #contents.contact .form .selectBox button,
  #contents.inquiry .form .selectBox button,
  #contents.issue .form .selectBox button,
  #contents.subscription .form .selectBox button,
  #contents.reservation .form .selectBox button {
    width: 100%;
  }
}

@media (min-width: 1025px) {

  #contents.salesList .form .selectBox button::after,
  #details .form .selectBox button::after,
  #contents.notice .form .selectBox button::after,
  #contents.contact .form .selectBox button::after,
  #contents.inquiry .form .selectBox button::after,
  #contents.issue .form .selectBox button::after,
  #contents.subscription .form .selectBox button::after,
  #contents.reservation .form .selectBox button::after {
    top: 17px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .form .selectBox button::after,
  #details .form .selectBox button::after,
  #contents.notice .form .selectBox button::after,
  #contents.contact .form .selectBox button::after,
  #contents.inquiry .form .selectBox button::after,
  #contents.issue .form .selectBox button::after,
  #contents.subscription .form .selectBox button::after,
  #contents.reservation .form .selectBox button::after {
    top: 15px;
  }
}

#contents.salesList .form .selectBox>div,
#details .form .selectBox>div,
#contents.notice .form .selectBox>div,
#contents.contact .form .selectBox>div,
#contents.inquiry .form .selectBox>div,
#contents.issue .form .selectBox>div,
#contents.subscription .form .selectBox>div,
#contents.reservation .form .selectBox>div {
  overflow-x: hidden;
  max-height: 320px;
}

@media (min-width: 1025px) {

  #contents.salesList .form .selectBox+input,
  #details .form .selectBox+input,
  #contents.notice .form .selectBox+input,
  #contents.contact .form .selectBox+input,
  #contents.inquiry .form .selectBox+input,
  #contents.issue .form .selectBox+input,
  #contents.subscription .form .selectBox+input,
  #contents.reservation .form .selectBox+input {
    margin-left: 10px;
  }
}

#contents.salesList form .form,
#details form .form,
#contents.notice form .form,
#contents.contact form .form,
#contents.inquiry form .form,
#contents.issue form .form,
#contents.subscription form .form,
#contents.reservation form .form {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#contents.salesList form .form>h3,
#details form .form>h3,
#contents.notice form .form>h3,
#contents.contact form .form>h3,
#contents.inquiry form .form>h3,
#contents.issue form .form>h3,
#contents.subscription form .form>h3,
#contents.reservation form .form>h3,
#contents.salesList form .form .secHeader h3,
#details form .form .secHeader h3,
#contents.notice form .form .secHeader h3,
#contents.contact form .form .secHeader h3,
#contents.inquiry form .form .secHeader h3,
#contents.issue form .form .secHeader h3,
#contents.subscription form .form .secHeader h3,
#contents.reservation form .form .secHeader h3 {
  width: 100%;
  padding-bottom: 20px;
  color: #212121;
}

@media (min-width: 1025px) {

  #contents.salesList form .form>h3,
  #details form .form>h3,
  #contents.notice form .form>h3,
  #contents.contact form .form>h3,
  #contents.inquiry form .form>h3,
  #contents.issue form .form>h3,
  #contents.subscription form .form>h3,
  #contents.reservation form .form>h3,
  #contents.salesList form .form .secHeader h3,
  #details form .form .secHeader h3,
  #contents.notice form .form .secHeader h3,
  #contents.contact form .form .secHeader h3,
  #contents.inquiry form .form .secHeader h3,
  #contents.issue form .form .secHeader h3,
  #contents.subscription form .form .secHeader h3,
  #contents.reservation form .form .secHeader h3 {
    padding-bottom: 30px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList form .form>h3,
  #details form .form>h3,
  #contents.notice form .form>h3,
  #contents.contact form .form>h3,
  #contents.inquiry form .form>h3,
  #contents.issue form .form>h3,
  #contents.subscription form .form>h3,
  #contents.reservation form .form>h3,
  #contents.salesList form .form .secHeader h3,
  #details form .form .secHeader h3,
  #contents.notice form .form .secHeader h3,
  #contents.contact form .form .secHeader h3,
  #contents.inquiry form .form .secHeader h3,
  #contents.issue form .form .secHeader h3,
  #contents.subscription form .form .secHeader h3,
  #contents.reservation form .form .secHeader h3 {
    font-size: 18px;
  }
}

#contents.salesList form .form>h3 span,
#details form .form>h3 span,
#contents.notice form .form>h3 span,
#contents.contact form .form>h3 span,
#contents.inquiry form .form>h3 span,
#contents.issue form .form>h3 span,
#contents.subscription form .form>h3 span,
#contents.reservation form .form>h3 span,
#contents.salesList form .form .secHeader h3 span,
#details form .form .secHeader h3 span,
#contents.notice form .form .secHeader h3 span,
#contents.contact form .form .secHeader h3 span,
#contents.inquiry form .form .secHeader h3 span,
#contents.issue form .form .secHeader h3 span,
#contents.subscription form .form .secHeader h3 span,
#contents.reservation form .form .secHeader h3 span {
  margin-right: 10px;
  color: #999;
}

@media (min-width: 1025px) {

  #contents.salesList .bgBox+.icoBox,
  #details .bgBox+.icoBox,
  #contents.notice .bgBox+.icoBox,
  #contents.contact .bgBox+.icoBox,
  #contents.inquiry .bgBox+.icoBox,
  #contents.issue .bgBox+.icoBox,
  #contents.subscription .bgBox+.icoBox,
  #contents.reservation .bgBox+.icoBox {
    margin-top: -80px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .bgBox+.icoBox,
  #details .bgBox+.icoBox,
  #contents.notice .bgBox+.icoBox,
  #contents.contact .bgBox+.icoBox,
  #contents.inquiry .bgBox+.icoBox,
  #contents.issue .bgBox+.icoBox,
  #contents.subscription .bgBox+.icoBox,
  #contents.reservation .bgBox+.icoBox {
    margin-top: 20px;
  }
}

#contents.salesList .icoBox,
#details .icoBox,
#contents.notice .icoBox,
#contents.contact .icoBox,
#contents.inquiry .icoBox,
#contents.issue .icoBox,
#contents.subscription .icoBox,
#contents.reservation .icoBox {
  position: relative;
  background: #fff;
  margin-bottom: 20px;
  padding: 40px 40px 40px 100px;
}

@media (min-width: 1025px) {

  #contents.salesList .icoBox+.form,
  #details .icoBox+.form,
  #contents.notice .icoBox+.form,
  #contents.contact .icoBox+.form,
  #contents.inquiry .icoBox+.form,
  #contents.issue .icoBox+.form,
  #contents.subscription .icoBox+.form,
  #contents.reservation .icoBox+.form {
    margin-top: 40px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .icoBox+.form,
  #details .icoBox+.form,
  #contents.notice .icoBox+.form,
  #contents.contact .icoBox+.form,
  #contents.inquiry .icoBox+.form,
  #contents.issue .icoBox+.form,
  #contents.subscription .icoBox+.form,
  #contents.reservation .icoBox+.form {
    margin-top: 20px;
  }
}

#contents.salesList .icoBox::before,
#details .icoBox::before,
#contents.notice .icoBox::before,
#contents.contact .icoBox::before,
#contents.inquiry .icoBox::before,
#contents.issue .icoBox::before,
#contents.subscription .icoBox::before,
#contents.reservation .icoBox::before {
  content: "";
  position: absolute;
  top: calc(50% - 13px);
  left: 15px;
  width: 30px;
  height: 26px;
  text-align: left;
  z-index: 1;
}

#contents.salesList .icoBox.warning::before,
#details .icoBox.warning::before,
#contents.notice .icoBox.warning::before,
#contents.contact .icoBox.warning::before,
#contents.inquiry .icoBox.warning::before,
#contents.issue .icoBox.warning::before,
#contents.subscription .icoBox.warning::before,
#contents.reservation .icoBox.warning::before {
  background: url("../images/gwell/page/iconWarning.svg") no-repeat 0 0/cover;
}

#contents.salesList .icoBox.warning::after,
#details .icoBox.warning::after,
#contents.notice .icoBox.warning::after,
#contents.contact .icoBox.warning::after,
#contents.inquiry .icoBox.warning::after,
#contents.issue .icoBox.warning::after,
#contents.subscription .icoBox.warning::after,
#contents.reservation .icoBox.warning::after {
  background: #d82220;
}

#contents.salesList .icoBox.chk::before,
#details .icoBox.chk::before,
#contents.notice .icoBox.chk::before,
#contents.contact .icoBox.chk::before,
#contents.inquiry .icoBox.chk::before,
#contents.issue .icoBox.chk::before,
#contents.subscription .icoBox.chk::before,
#contents.reservation .icoBox.chk::before {
  left: 18px;
  width: 24px;
  height: 24px;
  background: url("../images/gwell/page/iconChk.svg") no-repeat 0 0/cover;
}

#contents.salesList .icoBox.monitor::before,
#details .icoBox.monitor::before,
#contents.notice .icoBox.monitor::before,
#contents.contact .icoBox.monitor::before,
#contents.inquiry .icoBox.monitor::before,
#contents.issue .icoBox.monitor::before,
#contents.subscription .icoBox.monitor::before,
#contents.reservation .icoBox.monitor::before {
  left: 16px;
  width: 30px;
  height: 30px;
  background: url("../images/gwell/page/iconMonitor.svg") no-repeat 0 0/cover;
}

#contents.salesList .icoBox.sum::before,
#details .icoBox.sum::before,
#contents.notice .icoBox.sum::before,
#contents.contact .icoBox.sum::before,
#contents.inquiry .icoBox.sum::before,
#contents.issue .icoBox.sum::before,
#contents.subscription .icoBox.sum::before,
#contents.reservation .icoBox.sum::before {
  left: 16px;
  width: 30px;
  height: 30px;
  background: url("../images/gwell/page/iconSum.svg") no-repeat 0 0/cover;
}

#contents.salesList .icoBox.sum::after,
#details .icoBox.sum::after,
#contents.notice .icoBox.sum::after,
#contents.contact .icoBox.sum::after,
#contents.inquiry .icoBox.sum::after,
#contents.issue .icoBox.sum::after,
#contents.subscription .icoBox.sum::after,
#contents.reservation .icoBox.sum::after {
  background: #DAA23F;
  opacity: 0.15;
}

@media (min-width: 1025px) {

  #contents.salesList .icoBox.addr,
  #details .icoBox.addr,
  #contents.notice .icoBox.addr,
  #contents.contact .icoBox.addr,
  #contents.inquiry .icoBox.addr,
  #contents.issue .icoBox.addr,
  #contents.subscription .icoBox.addr,
  #contents.reservation .icoBox.addr {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
}

#contents.salesList .icoBox.addr::before,
#details .icoBox.addr::before,
#contents.notice .icoBox.addr::before,
#contents.contact .icoBox.addr::before,
#contents.inquiry .icoBox.addr::before,
#contents.issue .icoBox.addr::before,
#contents.subscription .icoBox.addr::before,
#contents.reservation .icoBox.addr::before {
  top: calc(50% - 15px);
  height: 30px;
  background: url("../images/gwell/page/iconAddr.svg") no-repeat 0 0/cover;
}

#contents.salesList .icoBox::after,
#details .icoBox::after,
#contents.notice .icoBox::after,
#contents.contact .icoBox::after,
#contents.inquiry .icoBox::after,
#contents.issue .icoBox::after,
#contents.subscription .icoBox::after,
#contents.reservation .icoBox::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 100%;
  background: #37234d;
  opacity: 0.08;
}

#contents.salesList .icoBox ul.mark li,
#details .icoBox ul.mark li,
#contents.notice .icoBox ul.mark li,
#contents.contact .icoBox ul.mark li,
#contents.inquiry .icoBox ul.mark li,
#contents.issue .icoBox ul.mark li,
#contents.subscription .icoBox ul.mark li,
#contents.reservation .icoBox ul.mark li {
  margin-left: 20px;
  text-indent: -20px;
}

@media (max-width: 1024px) {

  #contents.salesList .icoBox ul.mark li,
  #details .icoBox ul.mark li,
  #contents.notice .icoBox ul.mark li,
  #contents.contact .icoBox ul.mark li,
  #contents.inquiry .icoBox ul.mark li,
  #contents.issue .icoBox ul.mark li,
  #contents.subscription .icoBox ul.mark li,
  #contents.reservation .icoBox ul.mark li {
    margin-left: 18px;
    text-indent: -18px;
  }
}

#contents.salesList .icoBox ul li,
#details .icoBox ul li,
#contents.notice .icoBox ul li,
#contents.contact .icoBox ul li,
#contents.inquiry .icoBox ul li,
#contents.issue .icoBox ul li,
#contents.subscription .icoBox ul li,
#contents.reservation .icoBox ul li {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  color: #212121;
  line-height: 28px;
}

#contents.salesList .icoBox p,
#details .icoBox p,
#contents.notice .icoBox p,
#contents.contact .icoBox p,
#contents.inquiry .icoBox p,
#contents.issue .icoBox p,
#contents.subscription .icoBox p,
#contents.reservation .icoBox p {
  font-weight: 700;
}

#contents.salesList .icoBox p.mark,
#details .icoBox p.mark,
#contents.notice .icoBox p.mark,
#contents.contact .icoBox p.mark,
#contents.inquiry .icoBox p.mark,
#contents.issue .icoBox p.mark,
#contents.subscription .icoBox p.mark,
#contents.reservation .icoBox p.mark {
  margin-left: 20px;
  text-indent: -20px;
}

@media (max-width: 1024px) {

  #contents.salesList .icoBox p.mark,
  #details .icoBox p.mark,
  #contents.notice .icoBox p.mark,
  #contents.contact .icoBox p.mark,
  #contents.inquiry .icoBox p.mark,
  #contents.issue .icoBox p.mark,
  #contents.subscription .icoBox p.mark,
  #contents.reservation .icoBox p.mark {
    margin-left: 18px;
    text-indent: -18px;
  }
}

#contents.salesList .icoBox p.fzSm,
#details .icoBox p.fzSm,
#contents.notice .icoBox p.fzSm,
#contents.contact .icoBox p.fzSm,
#contents.inquiry .icoBox p.fzSm,
#contents.issue .icoBox p.fzSm,
#contents.subscription .icoBox p.fzSm,
#contents.reservation .icoBox p.fzSm {
  color: #212121;
}

#contents.salesList .icoBox p.fzSm.nm,
#details .icoBox p.fzSm.nm,
#contents.notice .icoBox p.fzSm.nm,
#contents.contact .icoBox p.fzSm.nm,
#contents.inquiry .icoBox p.fzSm.nm,
#contents.issue .icoBox p.fzSm.nm,
#contents.subscription .icoBox p.fzSm.nm,
#contents.reservation .icoBox p.fzSm.nm {
  font-weight: normal;
}

#contents.salesList .icoBox p.fzSm span,
#details .icoBox p.fzSm span,
#contents.notice .icoBox p.fzSm span,
#contents.contact .icoBox p.fzSm span,
#contents.inquiry .icoBox p.fzSm span,
#contents.issue .icoBox p.fzSm span,
#contents.subscription .icoBox p.fzSm span,
#contents.reservation .icoBox p.fzSm span {
  color: #212121;
}

#contents.salesList .icoBox p span,
#details .icoBox p span,
#contents.notice .icoBox p span,
#contents.contact .icoBox p span,
#contents.inquiry .icoBox p span,
#contents.issue .icoBox p span,
#contents.subscription .icoBox p span,
#contents.reservation .icoBox p span {
  padding: 0 5px;
  font-weight: 400;
  color: #666;
}

@media (max-width: 640px) {

  #contents.salesList .icoBox p span,
  #details .icoBox p span,
  #contents.notice .icoBox p span,
  #contents.contact .icoBox p span,
  #contents.inquiry .icoBox p span,
  #contents.issue .icoBox p span,
  #contents.subscription .icoBox p span,
  #contents.reservation .icoBox p span {
    display: block;
    padding: 0;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .icoBox,
  #details .icoBox,
  #contents.notice .icoBox,
  #contents.contact .icoBox,
  #contents.inquiry .icoBox,
  #contents.issue .icoBox,
  #contents.subscription .icoBox,
  #contents.reservation .icoBox {
    padding: 70px 20px 20px 20px;
  }

  #contents.salesList .icoBox::before,
  #details .icoBox::before,
  #contents.notice .icoBox::before,
  #contents.contact .icoBox::before,
  #contents.inquiry .icoBox::before,
  #contents.issue .icoBox::before,
  #contents.subscription .icoBox::before,
  #contents.reservation .icoBox::before {
    top: 13px !important;
    left: calc(50% - 15px) !important;
  }

  #contents.salesList .icoBox.chk::before,
  #details .icoBox.chk::before,
  #contents.notice .icoBox.chk::before,
  #contents.contact .icoBox.chk::before,
  #contents.inquiry .icoBox.chk::before,
  #contents.issue .icoBox.chk::before,
  #contents.subscription .icoBox.chk::before,
  #contents.reservation .icoBox.chk::before {
    left: calc(50% - 12px);
  }

  #contents.salesList .icoBox.addr::before,
  #details .icoBox.addr::before,
  #contents.notice .icoBox.addr::before,
  #contents.contact .icoBox.addr::before,
  #contents.inquiry .icoBox.addr::before,
  #contents.issue .icoBox.addr::before,
  #contents.subscription .icoBox.addr::before,
  #contents.reservation .icoBox.addr::before {
    top: 9px !important;
  }

  #contents.salesList .icoBox.addr .btns,
  #details .icoBox.addr .btns,
  #contents.notice .icoBox.addr .btns,
  #contents.contact .icoBox.addr .btns,
  #contents.inquiry .icoBox.addr .btns,
  #contents.issue .icoBox.addr .btns,
  #contents.subscription .icoBox.addr .btns,
  #contents.reservation .icoBox.addr .btns {
    width: 100%;
  }

  #contents.salesList .icoBox::after,
  #details .icoBox::after,
  #contents.notice .icoBox::after,
  #contents.contact .icoBox::after,
  #contents.inquiry .icoBox::after,
  #contents.issue .icoBox::after,
  #contents.subscription .icoBox::after,
  #contents.reservation .icoBox::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    opacity: 0.08;
  }

  #contents.salesList .icoBox ul li,
  #details .icoBox ul li,
  #contents.notice .icoBox ul li,
  #contents.contact .icoBox ul li,
  #contents.inquiry .icoBox ul li,
  #contents.issue .icoBox ul li,
  #contents.subscription .icoBox ul li,
  #contents.reservation .icoBox ul li {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }

  #contents.salesList .icoBox ul li+li,
  #details .icoBox ul li+li,
  #contents.notice .icoBox ul li+li,
  #contents.contact .icoBox ul li+li,
  #contents.inquiry .icoBox ul li+li,
  #contents.issue .icoBox ul li+li,
  #contents.subscription .icoBox ul li+li,
  #contents.reservation .icoBox ul li+li {
    margin-top: 5px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .location>div .btns,
  #details .location>div .btns,
  #contents.notice .location>div .btns,
  #contents.contact .location>div .btns,
  #contents.inquiry .location>div .btns,
  #contents.issue .location>div .btns,
  #contents.subscription .location>div .btns,
  #contents.reservation .location>div .btns {
    padding-top: 20px;
  }
}

#contents.salesList .location>div .btns button,
#details .location>div .btns button,
#contents.notice .location>div .btns button,
#contents.contact .location>div .btns button,
#contents.inquiry .location>div .btns button,
#contents.issue .location>div .btns button,
#contents.subscription .location>div .btns button,
#contents.reservation .location>div .btns button {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
  min-width: 100px;
  margin: 0 2px;
}

#contents.salesList .location>div .btns button::before,
#details .location>div .btns button::before,
#contents.notice .location>div .btns button::before,
#contents.contact .location>div .btns button::before,
#contents.inquiry .location>div .btns button::before,
#contents.issue .location>div .btns button::before,
#contents.subscription .location>div .btns button::before,
#contents.reservation .location>div .btns button::before,
#contents.salesList .location>div .btns button::after,
#details .location>div .btns button::after,
#contents.notice .location>div .btns button::after,
#contents.contact .location>div .btns button::after,
#contents.inquiry .location>div .btns button::after,
#contents.issue .location>div .btns button::after,
#contents.subscription .location>div .btns button::after,
#contents.reservation .location>div .btns button::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.salesList .location>div .btns button:not(:disabled):hover,
#details .location>div .btns button:not(:disabled):hover,
#contents.notice .location>div .btns button:not(:disabled):hover,
#contents.contact .location>div .btns button:not(:disabled):hover,
#contents.inquiry .location>div .btns button:not(:disabled):hover,
#contents.issue .location>div .btns button:not(:disabled):hover,
#contents.subscription .location>div .btns button:not(:disabled):hover,
#contents.reservation .location>div .btns button:not(:disabled):hover,
#contents.salesList .location>div .btns button:not(:disabled):focus,
#details .location>div .btns button:not(:disabled):focus,
#contents.notice .location>div .btns button:not(:disabled):focus,
#contents.contact .location>div .btns button:not(:disabled):focus,
#contents.inquiry .location>div .btns button:not(:disabled):focus,
#contents.issue .location>div .btns button:not(:disabled):focus,
#contents.subscription .location>div .btns button:not(:disabled):focus,
#contents.reservation .location>div .btns button:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.salesList .location>div .btns button:not(:disabled):hover::before,
#details .location>div .btns button:not(:disabled):hover::before,
#contents.notice .location>div .btns button:not(:disabled):hover::before,
#contents.contact .location>div .btns button:not(:disabled):hover::before,
#contents.inquiry .location>div .btns button:not(:disabled):hover::before,
#contents.issue .location>div .btns button:not(:disabled):hover::before,
#contents.subscription .location>div .btns button:not(:disabled):hover::before,
#contents.reservation .location>div .btns button:not(:disabled):hover::before,
#contents.salesList .location>div .btns button:not(:disabled):hover::after,
#details .location>div .btns button:not(:disabled):hover::after,
#contents.notice .location>div .btns button:not(:disabled):hover::after,
#contents.contact .location>div .btns button:not(:disabled):hover::after,
#contents.inquiry .location>div .btns button:not(:disabled):hover::after,
#contents.issue .location>div .btns button:not(:disabled):hover::after,
#contents.subscription .location>div .btns button:not(:disabled):hover::after,
#contents.reservation .location>div .btns button:not(:disabled):hover::after,
#contents.salesList .location>div .btns button:not(:disabled):focus::before,
#details .location>div .btns button:not(:disabled):focus::before,
#contents.notice .location>div .btns button:not(:disabled):focus::before,
#contents.contact .location>div .btns button:not(:disabled):focus::before,
#contents.inquiry .location>div .btns button:not(:disabled):focus::before,
#contents.issue .location>div .btns button:not(:disabled):focus::before,
#contents.subscription .location>div .btns button:not(:disabled):focus::before,
#contents.reservation .location>div .btns button:not(:disabled):focus::before,
#contents.salesList .location>div .btns button:not(:disabled):focus::after,
#details .location>div .btns button:not(:disabled):focus::after,
#contents.notice .location>div .btns button:not(:disabled):focus::after,
#contents.contact .location>div .btns button:not(:disabled):focus::after,
#contents.inquiry .location>div .btns button:not(:disabled):focus::after,
#contents.issue .location>div .btns button:not(:disabled):focus::after,
#contents.subscription .location>div .btns button:not(:disabled):focus::after,
#contents.reservation .location>div .btns button:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {

  #contents.salesList .location>div .btns button,
  #details .location>div .btns button,
  #contents.notice .location>div .btns button,
  #contents.contact .location>div .btns button,
  #contents.inquiry .location>div .btns button,
  #contents.issue .location>div .btns button,
  #contents.subscription .location>div .btns button,
  #contents.reservation .location>div .btns button {
    font-size: 16px;
    font-size: 14px;
    min-width: 100px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.salesList .location>div .btns button::before,
  #details .location>div .btns button::before,
  #contents.notice .location>div .btns button::before,
  #contents.contact .location>div .btns button::before,
  #contents.inquiry .location>div .btns button::before,
  #contents.issue .location>div .btns button::before,
  #contents.subscription .location>div .btns button::before,
  #contents.reservation .location>div .btns button::before {
    margin-right: 10px;
  }

  #contents.salesList .location>div .btns button::after,
  #details .location>div .btns button::after,
  #contents.notice .location>div .btns button::after,
  #contents.contact .location>div .btns button::after,
  #contents.inquiry .location>div .btns button::after,
  #contents.issue .location>div .btns button::after,
  #contents.subscription .location>div .btns button::after,
  #contents.reservation .location>div .btns button::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .location>div .btns button,
  #details .location>div .btns button,
  #contents.notice .location>div .btns button,
  #contents.contact .location>div .btns button,
  #contents.inquiry .location>div .btns button,
  #contents.issue .location>div .btns button,
  #contents.subscription .location>div .btns button,
  #contents.reservation .location>div .btns button {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.salesList .location>div .btns button::before,
  #details .location>div .btns button::before,
  #contents.notice .location>div .btns button::before,
  #contents.contact .location>div .btns button::before,
  #contents.inquiry .location>div .btns button::before,
  #contents.issue .location>div .btns button::before,
  #contents.subscription .location>div .btns button::before,
  #contents.reservation .location>div .btns button::before {
    margin-right: 14px;
  }

  #contents.salesList .location>div .btns button::after,
  #details .location>div .btns button::after,
  #contents.notice .location>div .btns button::after,
  #contents.contact .location>div .btns button::after,
  #contents.inquiry .location>div .btns button::after,
  #contents.issue .location>div .btns button::after,
  #contents.subscription .location>div .btns button::after,
  #contents.reservation .location>div .btns button::after {
    margin-left: 18px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .location>div .btns button,
  #details .location>div .btns button,
  #contents.notice .location>div .btns button,
  #contents.contact .location>div .btns button,
  #contents.inquiry .location>div .btns button,
  #contents.issue .location>div .btns button,
  #contents.subscription .location>div .btns button,
  #contents.reservation .location>div .btns button {
    width: 100%;
  }

  #contents.salesList .location>div .btns button+button,
  #details .location>div .btns button+button,
  #contents.notice .location>div .btns button+button,
  #contents.contact .location>div .btns button+button,
  #contents.inquiry .location>div .btns button+button,
  #contents.issue .location>div .btns button+button,
  #contents.subscription .location>div .btns button+button,
  #contents.reservation .location>div .btns button+button {
    margin-top: 10px;
  }
}

#contents.salesList .location>div .btns button:first-child,
#details .location>div .btns button:first-child,
#contents.notice .location>div .btns button:first-child,
#contents.contact .location>div .btns button:first-child,
#contents.inquiry .location>div .btns button:first-child,
#contents.issue .location>div .btns button:first-child,
#contents.subscription .location>div .btns button:first-child,
#contents.reservation .location>div .btns button:first-child {
  border: 1px solid #37234D;
  color: #37234D;
}

#contents.salesList .info>div ol,
#details .info>div ol,
#contents.notice .info>div ol,
#contents.contact .info>div ol,
#contents.inquiry .info>div ol,
#contents.issue .info>div ol,
#contents.subscription .info>div ol,
#contents.reservation .info>div ol {
  padding-left: 1em;
}

#contents.salesList .info>div ol.nonMaker,
#details .info>div ol.nonMaker,
#contents.notice .info>div ol.nonMaker,
#contents.contact .info>div ol.nonMaker,
#contents.inquiry .info>div ol.nonMaker,
#contents.issue .info>div ol.nonMaker,
#contents.subscription .info>div ol.nonMaker,
#contents.reservation .info>div ol.nonMaker {
  list-style: none;
  padding-left: 0;
  margin-left: 18px;
  text-indent: -18px;
}

#contents.salesList .info>div ol li,
#details .info>div ol li,
#contents.notice .info>div ol li,
#contents.contact .info>div ol li,
#contents.inquiry .info>div ol li,
#contents.issue .info>div ol li,
#contents.subscription .info>div ol li,
#contents.reservation .info>div ol li {
  color: #212121;
}

@media (min-width: 1025px) {

  #contents.salesList .info>div ol li,
  #details .info>div ol li,
  #contents.notice .info>div ol li,
  #contents.contact .info>div ol li,
  #contents.inquiry .info>div ol li,
  #contents.issue .info>div ol li,
  #contents.subscription .info>div ol li,
  #contents.reservation .info>div ol li {
    line-height: 32px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .info>div ol li,
  #details .info>div ol li,
  #contents.notice .info>div ol li,
  #contents.contact .info>div ol li,
  #contents.inquiry .info>div ol li,
  #contents.issue .info>div ol li,
  #contents.subscription .info>div ol li,
  #contents.reservation .info>div ol li {
    line-height: 24px;
  }

  #contents.salesList .info>div ol li+li,
  #details .info>div ol li+li,
  #contents.notice .info>div ol li+li,
  #contents.contact .info>div ol li+li,
  #contents.inquiry .info>div ol li+li,
  #contents.issue .info>div ol li+li,
  #contents.subscription .info>div ol li+li,
  #contents.reservation .info>div ol li+li {
    margin-top: 15px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .info,
  #details .info,
  #contents.notice .info,
  #contents.contact .info,
  #contents.inquiry .info,
  #contents.issue .info,
  #contents.subscription .info,
  #contents.reservation .info {
    padding-top: 40px;
  }
}

@media (min-width: 1025px) {

  #contents.salesList h3+.terms,
  #details h3+.terms,
  #contents.notice h3+.terms,
  #contents.contact h3+.terms,
  #contents.inquiry h3+.terms,
  #contents.issue h3+.terms,
  #contents.subscription h3+.terms,
  #contents.reservation h3+.terms {
    margin-top: 0;
  }
}

#contents.salesList .terms>section,
#details .terms>section,
#contents.notice .terms>section,
#contents.contact .terms>section,
#contents.inquiry .terms>section,
#contents.issue .terms>section,
#contents.subscription .terms>section,
#contents.reservation .terms>section {
  overflow: auto;
  background: #fff;
}

@media (min-width: 1025px) {

  #contents.salesList .terms>section,
  #details .terms>section,
  #contents.notice .terms>section,
  #contents.contact .terms>section,
  #contents.inquiry .terms>section,
  #contents.issue .terms>section,
  #contents.subscription .terms>section,
  #contents.reservation .terms>section {
    height: 300px;
    padding: 15px 20px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .terms>section,
  #details .terms>section,
  #contents.notice .terms>section,
  #contents.contact .terms>section,
  #contents.inquiry .terms>section,
  #contents.issue .terms>section,
  #contents.subscription .terms>section,
  #contents.reservation .terms>section {
    height: 220px;
    padding: 15px;
  }
}

#contents.salesList .terms>p,
#details .terms>p,
#contents.notice .terms>p,
#contents.contact .terms>p,
#contents.inquiry .terms>p,
#contents.issue .terms>p,
#contents.subscription .terms>p,
#contents.reservation .terms>p {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

@media (min-width: 1025px) {

  #contents.salesList .terms>p,
  #details .terms>p,
  #contents.notice .terms>p,
  #contents.contact .terms>p,
  #contents.inquiry .terms>p,
  #contents.issue .terms>p,
  #contents.subscription .terms>p,
  #contents.reservation .terms>p {
    margin-top: 20px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .terms>p,
  #details .terms>p,
  #contents.notice .terms>p,
  #contents.contact .terms>p,
  #contents.inquiry .terms>p,
  #contents.issue .terms>p,
  #contents.subscription .terms>p,
  #contents.reservation .terms>p {
    margin-top: 10px;
  }
}

#contents.salesList .terms>p::before,
#details .terms>p::before,
#contents.notice .terms>p::before,
#contents.contact .terms>p::before,
#contents.inquiry .terms>p::before,
#contents.issue .terms>p::before,
#contents.subscription .terms>p::before,
#contents.reservation .terms>p::before {
  content: "※";
  padding-right: 4px;
  font-size: 14px;
  font-weight: 300;
}

#contents.salesList .terms label,
#details .terms label,
#contents.notice .terms label,
#contents.contact .terms label,
#contents.inquiry .terms label,
#contents.issue .terms label,
#contents.subscription .terms label,
#contents.reservation .terms label {
  margin-top: 20px;
}

@media (max-width: 1024px) {

  #contents.salesList .process.bgBox,
  #details .process.bgBox,
  #contents.notice .process.bgBox,
  #contents.contact .process.bgBox,
  #contents.inquiry .process.bgBox,
  #contents.issue .process.bgBox,
  #contents.subscription .process.bgBox,
  #contents.reservation .process.bgBox {
    padding: 45px 20px 45px 15px;
  }
}

@media (min-width: 1025px) {

  #contents.salesList .process ol,
  #details .process ol,
  #contents.notice .process ol,
  #contents.contact .process ol,
  #contents.inquiry .process ol,
  #contents.issue .process ol,
  #contents.subscription .process ol,
  #contents.reservation .process ol {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    border-top: 10px solid #f1f1f1;
  }
}

#contents.salesList .process ol.four li,
#details .process ol.four li,
#contents.notice .process ol.four li,
#contents.contact .process ol.four li,
#contents.inquiry .process ol.four li,
#contents.issue .process ol.four li,
#contents.subscription .process ol.four li,
#contents.reservation .process ol.four li {
  min-width: 260px;
}

#contents.salesList .process ol li,
#details .process ol li,
#contents.notice .process ol li,
#contents.contact .process ol li,
#contents.inquiry .process ol li,
#contents.issue .process ol li,
#contents.subscription .process ol li,
#contents.reservation .process ol li {
  position: relative;
  list-style: none;
}

#contents.salesList .process ol li:nth-of-type(1) p,
#details .process ol li:nth-of-type(1) p,
#contents.notice .process ol li:nth-of-type(1) p,
#contents.contact .process ol li:nth-of-type(1) p,
#contents.inquiry .process ol li:nth-of-type(1) p,
#contents.issue .process ol li:nth-of-type(1) p,
#contents.subscription .process ol li:nth-of-type(1) p,
#contents.reservation .process ol li:nth-of-type(1) p {
  position: relative;
  padding-top: 50px;
}

#contents.salesList .process ol li:nth-of-type(1) p::before,
#details .process ol li:nth-of-type(1) p::before,
#contents.notice .process ol li:nth-of-type(1) p::before,
#contents.contact .process ol li:nth-of-type(1) p::before,
#contents.inquiry .process ol li:nth-of-type(1) p::before,
#contents.issue .process ol li:nth-of-type(1) p::before,
#contents.subscription .process ol li:nth-of-type(1) p::before,
#contents.reservation .process ol li:nth-of-type(1) p::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 40px;
  height: 40px;
  background: url("../images/gwell/page/icoProcess01.svg") no-repeat 0 0/40px;
}

#contents.salesList .process ol li:nth-of-type(2) p,
#details .process ol li:nth-of-type(2) p,
#contents.notice .process ol li:nth-of-type(2) p,
#contents.contact .process ol li:nth-of-type(2) p,
#contents.inquiry .process ol li:nth-of-type(2) p,
#contents.issue .process ol li:nth-of-type(2) p,
#contents.subscription .process ol li:nth-of-type(2) p,
#contents.reservation .process ol li:nth-of-type(2) p {
  position: relative;
  padding-top: 50px;
}

#contents.salesList .process ol li:nth-of-type(2) p::before,
#details .process ol li:nth-of-type(2) p::before,
#contents.notice .process ol li:nth-of-type(2) p::before,
#contents.contact .process ol li:nth-of-type(2) p::before,
#contents.inquiry .process ol li:nth-of-type(2) p::before,
#contents.issue .process ol li:nth-of-type(2) p::before,
#contents.subscription .process ol li:nth-of-type(2) p::before,
#contents.reservation .process ol li:nth-of-type(2) p::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 40px;
  height: 40px;
  background: url("../images/gwell/page/icoProcess02.svg") no-repeat 0 0/40px;
}

#contents.salesList .process ol li:nth-of-type(3) p,
#details .process ol li:nth-of-type(3) p,
#contents.notice .process ol li:nth-of-type(3) p,
#contents.contact .process ol li:nth-of-type(3) p,
#contents.inquiry .process ol li:nth-of-type(3) p,
#contents.issue .process ol li:nth-of-type(3) p,
#contents.subscription .process ol li:nth-of-type(3) p,
#contents.reservation .process ol li:nth-of-type(3) p {
  position: relative;
  padding-top: 50px;
}

#contents.salesList .process ol li:nth-of-type(3) p::before,
#details .process ol li:nth-of-type(3) p::before,
#contents.notice .process ol li:nth-of-type(3) p::before,
#contents.contact .process ol li:nth-of-type(3) p::before,
#contents.inquiry .process ol li:nth-of-type(3) p::before,
#contents.issue .process ol li:nth-of-type(3) p::before,
#contents.subscription .process ol li:nth-of-type(3) p::before,
#contents.reservation .process ol li:nth-of-type(3) p::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 40px;
  height: 40px;
  background: url("../images/gwell/page/icoProcess03.svg") no-repeat 0 0/40px;
}

@media (min-width: 1025px) {

  #contents.salesList .process ol li,
  #details .process ol li,
  #contents.notice .process ol li,
  #contents.contact .process ol li,
  #contents.inquiry .process ol li,
  #contents.issue .process ol li,
  #contents.subscription .process ol li,
  #contents.reservation .process ol li {
    min-width: 320px;
    padding: 35px 0 0 35px;
    border-left: 1px dashed #c8c8c8;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .process ol li,
  #details .process ol li,
  #contents.notice .process ol li,
  #contents.contact .process ol li,
  #contents.inquiry .process ol li,
  #contents.issue .process ol li,
  #contents.subscription .process ol li,
  #contents.reservation .process ol li {
    position: relative;
    margin-left: 15px;
    padding: 30px 0 30px 30px;
    border-top: 1px dashed #c8c8c8;
  }

  #contents.salesList .process ol li::after,
  #details .process ol li::after,
  #contents.notice .process ol li::after,
  #contents.contact .process ol li::after,
  #contents.inquiry .process ol li::after,
  #contents.issue .process ol li::after,
  #contents.subscription .process ol li::after,
  #contents.reservation .process ol li::after {
    position: absolute;
    top: 0;
    left: -5px;
    display: block;
    content: "";
    width: 10px;
    height: 100%;
    z-index: 1;
    background: #f1f1f1;
  }

  #contents.salesList .process ol li:last-child,
  #details .process ol li:last-child,
  #contents.notice .process ol li:last-child,
  #contents.contact .process ol li:last-child,
  #contents.inquiry .process ol li:last-child,
  #contents.issue .process ol li:last-child,
  #contents.subscription .process ol li:last-child,
  #contents.reservation .process ol li:last-child {
    padding-bottom: 0;
  }
}

#contents.salesList .process ol li>span,
#details .process ol li>span,
#contents.notice .process ol li>span,
#contents.contact .process ol li>span,
#contents.inquiry .process ol li>span,
#contents.issue .process ol li>span,
#contents.subscription .process ol li>span,
#contents.reservation .process ol li>span {
  position: absolute;
  z-index: 2;
  left: -20px;
  display: block;
  width: 40px;
  height: 40px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  border: 5px solid #fff;
  border-radius: 50%;
  background: #212121;
}

@media (min-width: 1025px) {

  #contents.salesList .process ol li>span,
  #details .process ol li>span,
  #contents.notice .process ol li>span,
  #contents.contact .process ol li>span,
  #contents.inquiry .process ol li>span,
  #contents.issue .process ol li>span,
  #contents.subscription .process ol li>span,
  #contents.reservation .process ol li>span {
    top: -25px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .process ol li>span,
  #details .process ol li>span,
  #contents.notice .process ol li>span,
  #contents.contact .process ol li>span,
  #contents.inquiry .process ol li>span,
  #contents.issue .process ol li>span,
  #contents.subscription .process ol li>span,
  #contents.reservation .process ol li>span {
    top: -20px;
  }
}

#contents.salesList .process ol li dt,
#details .process ol li dt,
#contents.notice .process ol li dt,
#contents.contact .process ol li dt,
#contents.inquiry .process ol li dt,
#contents.issue .process ol li dt,
#contents.subscription .process ol li dt,
#contents.reservation .process ol li dt,
#contents.salesList .process ol li p,
#details .process ol li p,
#contents.notice .process ol li p,
#contents.contact .process ol li p,
#contents.inquiry .process ol li p,
#contents.issue .process ol li p,
#contents.subscription .process ol li p,
#contents.reservation .process ol li p {
  padding-bottom: 10px;
  font-weight: 700;
  color: #37234D;
  line-height: 32px;
}

#contents.salesList .process ol li dt span,
#details .process ol li dt span,
#contents.notice .process ol li dt span,
#contents.contact .process ol li dt span,
#contents.inquiry .process ol li dt span,
#contents.issue .process ol li dt span,
#contents.subscription .process ol li dt span,
#contents.reservation .process ol li dt span,
#contents.salesList .process ol li p span,
#details .process ol li p span,
#contents.notice .process ol li p span,
#contents.contact .process ol li p span,
#contents.inquiry .process ol li p span,
#contents.issue .process ol li p span,
#contents.subscription .process ol li p span,
#contents.reservation .process ol li p span {
  font-weight: normal;
  color: #212121;
}

#contents.salesList .process ol li dd,
#details .process ol li dd,
#contents.notice .process ol li dd,
#contents.contact .process ol li dd,
#contents.inquiry .process ol li dd,
#contents.issue .process ol li dd,
#contents.subscription .process ol li dd,
#contents.reservation .process ol li dd {
  color: #666;
}

@media (min-width: 1025px) {

  #contents.salesList .txtListWrap .bgBox,
  #details .txtListWrap .bgBox,
  #contents.notice .txtListWrap .bgBox,
  #contents.contact .txtListWrap .bgBox,
  #contents.inquiry .txtListWrap .bgBox,
  #contents.issue .txtListWrap .bgBox,
  #contents.subscription .txtListWrap .bgBox,
  #contents.reservation .txtListWrap .bgBox {
    padding: 60px 30px 60px 60px;
  }
}

#contents.salesList .txtListWrap dl,
#details .txtListWrap dl,
#contents.notice .txtListWrap dl,
#contents.contact .txtListWrap dl,
#contents.inquiry .txtListWrap dl,
#contents.issue .txtListWrap dl,
#contents.subscription .txtListWrap dl,
#contents.reservation .txtListWrap dl {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

#contents.salesList .txtListWrap dl.after,
#details .txtListWrap dl.after,
#contents.notice .txtListWrap dl.after,
#contents.contact .txtListWrap dl.after,
#contents.inquiry .txtListWrap dl.after,
#contents.issue .txtListWrap dl.after,
#contents.subscription .txtListWrap dl.after,
#contents.reservation .txtListWrap dl.after {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

@media (max-width: 640px) {

  #contents.salesList .txtListWrap dl.after,
  #details .txtListWrap dl.after,
  #contents.notice .txtListWrap dl.after,
  #contents.contact .txtListWrap dl.after,
  #contents.inquiry .txtListWrap dl.after,
  #contents.issue .txtListWrap dl.after,
  #contents.subscription .txtListWrap dl.after,
  #contents.reservation .txtListWrap dl.after {
    display: block;
  }
}

#contents.salesList .txtListWrap dl.after dt,
#details .txtListWrap dl.after dt,
#contents.notice .txtListWrap dl.after dt,
#contents.contact .txtListWrap dl.after dt,
#contents.inquiry .txtListWrap dl.after dt,
#contents.issue .txtListWrap dl.after dt,
#contents.subscription .txtListWrap dl.after dt,
#contents.reservation .txtListWrap dl.after dt {
  width: 8%;
}

@media (max-width: 1024px) {

  #contents.salesList .txtListWrap dl.after dt,
  #details .txtListWrap dl.after dt,
  #contents.notice .txtListWrap dl.after dt,
  #contents.contact .txtListWrap dl.after dt,
  #contents.inquiry .txtListWrap dl.after dt,
  #contents.issue .txtListWrap dl.after dt,
  #contents.subscription .txtListWrap dl.after dt,
  #contents.reservation .txtListWrap dl.after dt {
    width: 15%;
  }
}

@media (max-width: 640px) {

  #contents.salesList .txtListWrap dl.after dt,
  #details .txtListWrap dl.after dt,
  #contents.notice .txtListWrap dl.after dt,
  #contents.contact .txtListWrap dl.after dt,
  #contents.inquiry .txtListWrap dl.after dt,
  #contents.issue .txtListWrap dl.after dt,
  #contents.subscription .txtListWrap dl.after dt,
  #contents.reservation .txtListWrap dl.after dt {
    width: 100%;
  }
}

@media (min-width: 1025px) {

  #contents.salesList .txtListWrap dl.after dd,
  #details .txtListWrap dl.after dd,
  #contents.notice .txtListWrap dl.after dd,
  #contents.contact .txtListWrap dl.after dd,
  #contents.inquiry .txtListWrap dl.after dd,
  #contents.issue .txtListWrap dl.after dd,
  #contents.subscription .txtListWrap dl.after dd,
  #contents.reservation .txtListWrap dl.after dd {
    width: calc(20% - 15px);
  }
}

@media (max-width: 1024px) {

  #contents.salesList .txtListWrap dl.after dd,
  #details .txtListWrap dl.after dd,
  #contents.notice .txtListWrap dl.after dd,
  #contents.contact .txtListWrap dl.after dd,
  #contents.inquiry .txtListWrap dl.after dd,
  #contents.issue .txtListWrap dl.after dd,
  #contents.subscription .txtListWrap dl.after dd,
  #contents.reservation .txtListWrap dl.after dd {
    width: calc(37% - 15px);
  }
}

@media (max-width: 640px) {

  #contents.salesList .txtListWrap dl.after dd,
  #details .txtListWrap dl.after dd,
  #contents.notice .txtListWrap dl.after dd,
  #contents.contact .txtListWrap dl.after dd,
  #contents.inquiry .txtListWrap dl.after dd,
  #contents.issue .txtListWrap dl.after dd,
  #contents.subscription .txtListWrap dl.after dd,
  #contents.reservation .txtListWrap dl.after dd {
    width: 100%;
  }
}

@media (max-width: 640px) {

  #contents.salesList .txtListWrap dl,
  #details .txtListWrap dl,
  #contents.notice .txtListWrap dl,
  #contents.contact .txtListWrap dl,
  #contents.inquiry .txtListWrap dl,
  #contents.issue .txtListWrap dl,
  #contents.subscription .txtListWrap dl,
  #contents.reservation .txtListWrap dl {
    display: block;
  }
}

#contents.salesList .txtListWrap dl dt,
#details .txtListWrap dl dt,
#contents.notice .txtListWrap dl dt,
#contents.contact .txtListWrap dl dt,
#contents.inquiry .txtListWrap dl dt,
#contents.issue .txtListWrap dl dt,
#contents.subscription .txtListWrap dl dt,
#contents.reservation .txtListWrap dl dt,
#contents.salesList .txtListWrap dl dd,
#details .txtListWrap dl dd,
#contents.notice .txtListWrap dl dd,
#contents.contact .txtListWrap dl dd,
#contents.inquiry .txtListWrap dl dd,
#contents.issue .txtListWrap dl dd,
#contents.subscription .txtListWrap dl dd,
#contents.reservation .txtListWrap dl dd {
  padding: 10px 0;
  line-height: 24px;
}

#contents.salesList .txtListWrap dl dt,
#details .txtListWrap dl dt,
#contents.notice .txtListWrap dl dt,
#contents.contact .txtListWrap dl dt,
#contents.inquiry .txtListWrap dl dt,
#contents.issue .txtListWrap dl dt,
#contents.subscription .txtListWrap dl dt,
#contents.reservation .txtListWrap dl dt {
  width: 11%;
  color: #666;
}

@media (max-width: 1024px) {

  #contents.salesList .txtListWrap dl dt,
  #details .txtListWrap dl dt,
  #contents.notice .txtListWrap dl dt,
  #contents.contact .txtListWrap dl dt,
  #contents.inquiry .txtListWrap dl dt,
  #contents.issue .txtListWrap dl dt,
  #contents.subscription .txtListWrap dl dt,
  #contents.reservation .txtListWrap dl dt {
    width: 16%;
  }
}

@media (max-width: 640px) {

  #contents.salesList .txtListWrap dl dt,
  #details .txtListWrap dl dt,
  #contents.notice .txtListWrap dl dt,
  #contents.contact .txtListWrap dl dt,
  #contents.inquiry .txtListWrap dl dt,
  #contents.issue .txtListWrap dl dt,
  #contents.subscription .txtListWrap dl dt,
  #contents.reservation .txtListWrap dl dt {
    width: 100%;
    padding-bottom: 0;
  }

  #contents.salesList .txtListWrap dl dt:first-child,
  #details .txtListWrap dl dt:first-child,
  #contents.notice .txtListWrap dl dt:first-child,
  #contents.contact .txtListWrap dl dt:first-child,
  #contents.inquiry .txtListWrap dl dt:first-child,
  #contents.issue .txtListWrap dl dt:first-child,
  #contents.subscription .txtListWrap dl dt:first-child,
  #contents.reservation .txtListWrap dl dt:first-child {
    padding-top: 0;
  }
}

#contents.salesList .txtListWrap dl dd,
#details .txtListWrap dl dd,
#contents.notice .txtListWrap dl dd,
#contents.contact .txtListWrap dl dd,
#contents.inquiry .txtListWrap dl dd,
#contents.issue .txtListWrap dl dd,
#contents.subscription .txtListWrap dl dd,
#contents.reservation .txtListWrap dl dd {
  font-weight: 500;
}

@media (min-width: 1025px) {

  #contents.salesList .txtListWrap dl dd,
  #details .txtListWrap dl dd,
  #contents.notice .txtListWrap dl dd,
  #contents.contact .txtListWrap dl dd,
  #contents.inquiry .txtListWrap dl dd,
  #contents.issue .txtListWrap dl dd,
  #contents.subscription .txtListWrap dl dd,
  #contents.reservation .txtListWrap dl dd {
    width: calc(39% - 15px);
  }
}

@media (max-width: 1024px) {

  #contents.salesList .txtListWrap dl dd,
  #details .txtListWrap dl dd,
  #contents.notice .txtListWrap dl dd,
  #contents.contact .txtListWrap dl dd,
  #contents.inquiry .txtListWrap dl dd,
  #contents.issue .txtListWrap dl dd,
  #contents.subscription .txtListWrap dl dd,
  #contents.reservation .txtListWrap dl dd {
    width: calc(33% - 20px);
  }
}

@media (max-width: 640px) {

  #contents.salesList .txtListWrap dl dd,
  #details .txtListWrap dl dd,
  #contents.notice .txtListWrap dl dd,
  #contents.contact .txtListWrap dl dd,
  #contents.inquiry .txtListWrap dl dd,
  #contents.issue .txtListWrap dl dd,
  #contents.subscription .txtListWrap dl dd,
  #contents.reservation .txtListWrap dl dd {
    width: 100%;
    padding-bottom: 15px;
  }
}

#contents.salesList .txtListWrap dl dd .circle span,
#details .txtListWrap dl dd .circle span,
#contents.notice .txtListWrap dl dd .circle span,
#contents.contact .txtListWrap dl dd .circle span,
#contents.inquiry .txtListWrap dl dd .circle span,
#contents.issue .txtListWrap dl dd .circle span,
#contents.subscription .txtListWrap dl dd .circle span,
#contents.reservation .txtListWrap dl dd .circle span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #212121;
}

@media (max-width: 640px) {

  #contents.salesList .txtListWrap dl .empty,
  #details .txtListWrap dl .empty,
  #contents.notice .txtListWrap dl .empty,
  #contents.contact .txtListWrap dl .empty,
  #contents.inquiry .txtListWrap dl .empty,
  #contents.issue .txtListWrap dl .empty,
  #contents.subscription .txtListWrap dl .empty,
  #contents.reservation .txtListWrap dl .empty {
    display: none;
  }
}

@media (min-width: 1025px) {

  #contents.salesList .txtListWrap+form,
  #details .txtListWrap+form,
  #contents.notice .txtListWrap+form,
  #contents.contact .txtListWrap+form,
  #contents.inquiry .txtListWrap+form,
  #contents.issue .txtListWrap+form,
  #contents.subscription .txtListWrap+form,
  #contents.reservation .txtListWrap+form {
    padding-top: 60px;
  }
}

@media (max-width: 1024px) {

  #contents.salesList .txtListWrap+form,
  #details .txtListWrap+form,
  #contents.notice .txtListWrap+form,
  #contents.contact .txtListWrap+form,
  #contents.inquiry .txtListWrap+form,
  #contents.issue .txtListWrap+form,
  #contents.subscription .txtListWrap+form,
  #contents.reservation .txtListWrap+form {
    padding-top: 45px;
  }
}

@media (min-width: 1025px) {
  #contents.reservation .tblWrap {
    padding-top: 60px;
  }
}

#contents.reservation section.download button {
  display: inline-block;
  position: relative;
  border-radius: 3px;
  background: #37234D;
  overflow: hidden;
  line-height: 60px;
  color: #fff;
  font-size: 16px;
  text-align: left;
  padding-right: 75px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (min-width: 1025px) {
  #contents.reservation section.download button {
    min-width: 393px;
    padding-left: 30px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation section.download button {
    width: 100%;
    padding-left: 20px;
  }
}

#contents.reservation section.download button::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.3);
}

#contents.reservation section.download button::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 23px;
  width: 14px;
  height: 17px;
  background: url("../images/icon/iconDownload5.svg") no-repeat center/14px;
  -moz-filter: brightness(100);
  -ms-filter: brightness(100);
  -o-filter: brightness(100);
  filter: brightness(100);
}

.reservationList li {
  position: relative;
}

.reservationList li:not(.expired) {
  border: 1px solid #37234D;
  background: #fff;
}

.reservationList li:not(.expired) em {
  background: #37234D;
  color: #fff;
}

.reservationList li.expired {
  background: #f1f1f1 !important;
}

.reservationList li.expired em {
  background: #c8c8c8;
  color: #212121;
}

.reservationList span {
  display: block;
  padding-bottom: 20px;
  color: #212121 !important;
  font-weight: 700;
  background: none !important;
}

.reservationList .tit {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 700;
}

.reservationList .date {
  font-size: 20px !important;
  font-weight: 400 !important;
}

@media (min-width: 1025px) {
  .reservationList {
    padding-top: 60px;
  }
}

@media (max-width: 1024px) {
  .reservationList {
    padding-top: 40px;
  }

  .reservationList span {
    position: absolute;
    top: 43px;
    left: 0;
    padding-left: 20px !important;
    font-size: 12px !important;
  }

  .reservationList .tit {
    position: absolute;
    top: 73px;
    left: 20px;
    right: 20px;
    margin-top: 0;
    font-size: 20px;
  }

  .reservationList .date {
    top: 95px !important;
    font-size: 14px !important;
  }

  .reservationList .location {
    margin-top: 25px !important;
  }
}

.reservationList.caseOnline {
  padding-top: 0;
}

.reservationList.caseOnline li:not(.expired) {
  border: 0;
}

.reservationList.caseOnline li {
  padding-top: 115px;
}

.reservationList.caseOnline li .buttons {
  bottom: 55px;
}

.reservationList.caseOnline li.expired em {
  padding-top: 15px;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .reservationList.caseOnline li.expired em {
    padding-top: 10px;
  }
}

.reservationList.caseOnline li .tit {
  margin-bottom: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1025px) {
  .reservationList.caseOnline li .tit {
    line-height: 30px;
  }
}

@media (max-width: 1024px) {
  .reservationList.caseOnline li .tit {
    line-height: 28px;
  }
}

@media (max-width: 480px) {
  .reservationList.caseOnline li .tit {
    font-size: 16px;
  }
}

.reservationList.caseOnline dl {
  border-top: 1px solid #E1E1E1;
  line-height: 1.5;
}

@media (min-width: 1025px) {
  .reservationList.caseOnline dl {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 30px;
  }
}

@media (max-width: 1024px) {
  .reservationList.caseOnline dl {
    padding-top: 20px;
  }
}

.reservationList.caseOnline dl dt {
  color: #212121;
}

@media (min-width: 1025px) {
  .reservationList.caseOnline dl dt {
    position: relative;
    width: 183px;
  }

  .reservationList.caseOnline dl dt:after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 20px;
    content: "";
    width: 1px;
    height: 16px;
    background: #c8c8c8;
  }
}

@media (max-width: 1024px) {
  .reservationList.caseOnline dl dt {
    margin-bottom: 10px;
    font-size: 14px;
  }
}

.reservationList.caseOnline dl dd {
  color: #37234D;
  font-weight: 700;
}

@media (min-width: 1025px) {
  .reservationList.caseOnline dl dd {
    padding-right: 40px;
    width: calc(100% - 183px);
  }
}

@media (max-width: 1024px) {
  .reservationList.caseOnline dl dd {
    margin-bottom: 20px;
    font-size: 14px;
  }
}

.reservationList.caseOnline dl dd:not(:first-of-type) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

@media (min-width: 1025px) {
  .reservationList.caseOnline dl dd:not(:first-of-type) {
    padding-right: 120px;
  }
}

@media (max-width: 640px) {
  .reservationList.caseOnline dl dd:not(:first-of-type) {
    flex-direction: column;
  }
}

@media (min-width: 1025px) {
  .reservationList.caseOnline dl dd:not(:first-of-type) a {
    margin-right: 20px;
  }
}

@media (max-width: 1024px) {
  .reservationList.caseOnline dl dd:not(:first-of-type) a {
    margin-right: 15px;
  }
}

@media (max-width: 640px) {
  .reservationList.caseOnline dl dd:not(:first-of-type) a {
    margin-right: 0;
  }

  .reservationList.caseOnline dl dd:not(:first-of-type) a+a {
    margin-top: 10px;
  }
}

.reservationList.caseOnline dl dd:not(:first-of-type) a:hover,
.reservationList.caseOnline dl dd:not(:first-of-type) a:focus {
  text-decoration: underline;
}

@media (min-width: 1025px) {

  .reservationList.caseOnline dl dt:not(:first-of-type),
  .reservationList.caseOnline dl dd:not(:first-of-type) {
    margin-top: 10px;
  }
}

#application .reservationList.flagNone li {
  padding-top: 60px !important;
}

@media (max-width: 1024px) {
  #application .reservationList.flagNone li {
    padding-top: 30px !important;
  }

  #application .reservationList.flagNone li p {
    top: 30px;
  }

  #application .reservationList.flagNone li dl {
    margin-top: 40px;
  }
}

#application .reservationList .btnReserve {
  border: 1px solid #666;
  border-radius: 20px;
  line-height: 38px;
  text-align: center;
  color: #212121;
}

@media (min-width: 1025px) {
  #application .reservationList .btnReserve {
    position: absolute;
    width: 128px;
    right: 80px;
    top: 55px;
  }
}

@media (max-width: 1024px) {
  #application .reservationList .btnReserve {
    width: 100%;
    margin-top: 30px;
  }
}

#application .reservationList .btnReserve:hover,
#application .reservationList .btnReserve:focus {
  line-height: 40px;
  background: #37234D;
  color: #fff;
  border: 0;
}

#application .reservationList li {
  position: relative;
}

@media (max-width: 1024px) {
  #application .reservationList li {
    padding-top: 60px;
  }
}

#application .reservationList li:not(.expired) {
  border: 0;
  background: #fff;
}

#application .reservationList li.expired em {
  padding-top: 15px;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  #application .reservationList li.expired em {
    padding-top: 10px;
  }
}

@media (max-width: 1024px) {
  #application .reservationList li .tit {
    font-size: 20px;
    top: 35px;
  }
}

#application .reservationList li dl {
  width: 100%;
  margin-top: 20px;
  padding-top: 30px;
  border-top: 1px solid #E1E1E1;
}

@media (min-width: 1025px) {
  #application .reservationList li dl {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #application .reservationList li dl dt:after {
    content: "";
    margin: 0 20px 0 10px;
    display: inline-block;
    width: 1px;
    height: 16px;
    vertical-align: middle;
    background: #c8c8c8;
  }
}

@media (max-width: 1024px) {
  #application .reservationList li dl {
    padding-top: 20px;
  }

  #application .reservationList li dl dd:last-child {
    margin-bottom: 0 !important;
  }
}

#application .reservationList li dl dt+dd {
  color: #37234D;
  font-weight: 700;
}

@media (min-width: 1025px) {
  #application .reservationList li dl dt+dd {
    padding-right: 70px;
  }

  #application .reservationList li dl dt+dd:last-child {
    padding-right: 0;
  }
}

@media (max-width: 1024px) {

  #application .reservationList li dl dt,
  #application .reservationList li dl dd {
    font-size: 14px;
    margin-bottom: 10px;
  }

  #application .reservationList li dl dt+dd {
    margin-bottom: 20px;
  }
}

@media (min-width: 1025px) {
  #contents.subscription .icoBox.chk {
    margin-bottom: 60px;
  }
}

@media (max-width: 1024px) {
  #contents.subscription .icoBox.chk {
    margin-bottom: 45px;
  }
}

#contents.subscription .txtListWrap h3 span {
  margin-right: 10px;
  color: #999;
}

@media (min-width: 1025px) {
  #contents.subscription .form {
    padding-top: 50px;
  }
}

@media (max-width: 1024px) {
  #contents.subscription form .form h3 {
    margin-top: 40px;
  }
}

#contents.subscription form .form .terms {
  margin-top: 0;
}

@media (max-width: 1024px) {
  #contents.subscription .wideOnly+.section {
    padding-top: 50px;
  }
}

#contents.subscription>section.section {
  display: block !important;
}

#contents.subscription>section>section:first-of-type:not(.casePadding),
#contents.subscription>section>form>section:first-of-type:not(.casePadding) {
  padding-top: 0;
}

#contents.subscription .empty span::before {
  background: url("../images/gwell/page/imgWinRefund.svg") no-repeat center center/100% !important;
}

#contents.subscription footer a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
  padding: 0 50px !important;
}

#contents.subscription footer a::before,
#contents.subscription footer a::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.subscription footer a:not(:disabled):hover,
#contents.subscription footer a:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.subscription footer a:not(:disabled):hover::before,
#contents.subscription footer a:not(:disabled):hover::after,
#contents.subscription footer a:not(:disabled):focus::before,
#contents.subscription footer a:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.subscription footer a {
    font-size: 16px;
    min-width: 180px;
    height: 60px;
    padding: 0 20px;
    border-radius: 30px;
  }

  #contents.subscription footer a::before {
    margin-right: 10px;
  }

  #contents.subscription footer a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #contents.subscription footer a {
    font-size: 14px;
    min-width: 180px;
    font-size: 16px;
    height: 50px;
    padding: 0 18px;
    border-radius: 25px;
  }

  #contents.subscription footer a::before {
    margin-right: 14px;
  }

  #contents.subscription footer a::after {
    margin-left: 18px;
  }
}

@media (max-width: 1024px) {
  #contents.subscription footer a {
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 640px) {
  #contents.issue .form .half:first-of-type .label {
    margin-bottom: 20px !important;
  }
}

@media (min-width: 1025px) {
  #contents.issue .form .inHalf .selectBox {
    width: calc(100% - 20px);
  }
}

@media (min-width: 1025px) {
  #contents.issue .form .inHalf .selectBox button {
    width: calc(100% - 20px);
  }
}

@media (min-width: 1025px) {
  #contents.issue .form .inHalf .selectBox .down {
    width: calc(100% - 20px);
  }
}

#contents.issue .form .file label {
  padding-left: 0;
}

@media (max-width: 1024px) {
  #contents.issue .form label {
    display: block;
  }

  #contents.issue .form label+label {
    margin-top: 20px;
  }
}

@media (min-width: 1025px) {
  #contents.issue .form label+label {
    margin: 15px 0 0 24px;
  }
}

#contents.issue .empty span::before {
  background-image: url("../images/gwell/page/imgResultNone03.svg") !important;
}

@media (min-width: 1025px) {
  #contents.issue .icoBox+.form {
    margin-top: 40px;
  }
}

#contents.issue.reIssue>section:not(.active) {
  display: block !important;
}

#contents.issue.reIssue>section>section:first-of-type {
  padding-top: 0 !important;
}

@media (min-width: 1025px) {
  #contents.issue.reIssue form .form {
    padding-top: 60px;
  }
}

@media (max-width: 1024px) {
  #contents.issue.reIssue form .form {
    padding-top: 45px;
  }
}

@media (min-width: 1025px) {
  #contents.issue.reIssue .form label+label {
    margin: 0px 0 0 24px;
  }
}

#contents.issue.reIssue .form .half .inHalf.mix {
  position: relative;
}

#contents.issue.reIssue .form .half .inHalf.mix:after {
  display: block;
  content: "";
  width: 6px;
  height: 1px;
  background: #666;
  position: absolute;
  top: 25px;
}

@media (min-width: 1025px) {
  #contents.issue.reIssue .form .half .inHalf.mix:after {
    left: 80px;
  }
}

@media (max-width: 1024px) {
  #contents.issue.reIssue .form .half .inHalf.mix:after {
    left: 64px;
  }
}

#contents.issue.reIssue .form .half .inHalf.mix input:first-child {
  border-radius: 4px 0 0 4px;
}

@media (min-width: 1025px) {
  #contents.issue.reIssue .form .half .inHalf.mix input:first-child {
    width: 95px;
  }
}

@media (max-width: 1024px) {
  #contents.issue.reIssue .form .half .inHalf.mix input:first-child {
    width: 78px;
  }
}

#contents.issue.reIssue .form .half .inHalf.mix input:last-child {
  padding-left: 0;
  margin-top: 0;
}

@media (max-width: 1024px) {
  #contents.issue.reIssue .form .half .inHalf.mix input:last-child {
    position: relative;
    left: -2px;
  }
}

@media (min-width: 1025px) {
  .applicationInfoHead {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    background: #fff;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
    color: #212121;
    text-align: center;
    font-weight: 500;
  }

  .applicationInfoHead span {
    width: 25%;
  }

  .applicationInfoHead.casePop {
    margin-top: 20px;
    background: #f9f9f9;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }

  .applicationInfoHead.casePop span {
    width: 33.3333333333%;
  }
}

@media (max-width: 1024px) {
  .applicationInfoHead {
    display: none;
  }
}

.applicationInfo {
  width: 100%;
  color: #212121;
}

@media (min-width: 1025px) {
  .applicationInfo {
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
  }
}

@media (max-width: 1024px) {
  .applicationInfo {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }
}

.applicationInfo.casePop {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

@media (min-width: 1025px) {
  .applicationInfo.casePop {
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
  }
}

@media (max-width: 1024px) {
  .applicationInfo.casePop {
    margin-top: 20px;
  }
}

.applicationInfo.casePop dl {
  width: 100%;
}

.applicationInfo.casePop dt {
  background: #f9f9f9;
}

@media (min-width: 1025px) {
  .applicationInfo li {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    height: 84px;
    border-bottom: 1px solid #E1E1E1;
  }
}

@media (max-width: 1024px) {
  .applicationInfo li+li {
    margin-top: 20px;
  }
}

@media (min-width: 1025px) {
  .applicationInfo li>div {
    width: 25%;
    padding: 0 70px;
  }
}

@media (max-width: 1024px) {
  .applicationInfo li>div {
    margin-top: 10px;
    padding: 10px 20px;
  }
}

.applicationInfo li>div button {
  width: 100%;
  border: 1px solid #666;
  height: 40px;
  line-height: 38px;
  border-radius: 20px;
}

@media (min-width: 1025px) {
  .applicationInfo li>div button {
    max-width: 128px;
  }
}

@media (min-width: 1025px) {
  .applicationInfo li dl {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 75%;
  }
}

@media (max-width: 1024px) {
  .applicationInfo li dl {
    border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
  }

  .applicationInfo li dl::after {
    content: "";
    overflow: hidden;
    display: block;
    clear: both;
    width: 100%;
    height: 0;
  }
}

@media (min-width: 1025px) {
  .applicationInfo li dt {
    display: none;
  }
}

@media (max-width: 1024px) {
  .applicationInfo li dt {
    float: left;
    background: #fff;
    padding: 17px 0 17px 15px;
    width: 116px;
    height: 58px;
    font-weight: 500;
  }
}

@media (min-width: 1025px) {
  .applicationInfo li dd {
    width: 33.3333333333%;
  }
}

@media (max-width: 1024px) {
  .applicationInfo li dd {
    float: left;
    width: calc(100% - 116px);
    height: 58px;
  }

  .applicationInfo li dd:not(.caseSelect) {
    padding: 17px 20px;
  }

  .applicationInfo li dd.caseSelect {
    padding: 10px 0 0 10px;
  }
}

@media (min-width: 1025px) {
  .applicationInfo li dd .selectBox {
    width: calc(100% - 20px) !important;
  }
}

@media (max-width: 1024px) {
  .applicationInfo li dd .selectBox {
    height: 40px !important;
  }

  .applicationInfo li dd .selectBox>button {
    height: 40px !important;
  }
}

.applicationInfoPop {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  word-break: keep-all;
  margin-top: 20px;
}

.applicationInfoPop h2 {
  color: #3C1152;
}

.applicationInfoPop h2:not(.case) {
  width: 100%;
  margin-top: 25px;
}

.applicationInfoPop>span {
  padding-left: 24px;
}

@media (min-width: 1025px) {
  .applicationInfoPop>p {
    margin-top: 40px;
  }
}

@media (max-width: 1024px) {
  .applicationInfoPop>p {
    margin-top: 15px;
  }
}

.applicationInfoPop footer {
  width: 100%;
}

@media (min-width: 1025px) {
  .applicationInfoPop footer button+button {
    margin-left: 36px;
  }
}

@media (max-width: 1024px) {
  .applicationInfoPop footer button+button {
    margin-top: 20px;
  }
}

@media (max-width: 1024px) {
  #contents.inquiry .form .selectBox>div button {
    line-height: 1.5 !important;
  }
}

#contents.inquiry h4 {
  padding-bottom: 20px;
  font-weight: 500;
  color: #37234D;
}

@media (min-width: 1025px) {
  #contents.inquiry h4 {
    font-size: 20px;
  }
}

@media (max-width: 1024px) {
  #contents.inquiry h4 {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  #contents.inquiry h4 {
    font-size: 14px;
  }
}

#contents.inquiry .tblWrap th,
#contents.inquiry .tblWrap td {
  padding: 12px 15px !important;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

#contents.inquiry .tblWrap th {
  font-weight: 500;
}

#contents.inquiry .tblWrap td {
  text-align: right !important;
}

#contents.inquiry .tblWrap td.ct {
  text-align: center !important;
}

#contents.inquiry .tblWrap .tblFoot tbody th {
  background: #2E2839;
  color: #fff;
}

#contents.inquiry .tblWrap .tblFoot tbody td {
  background: #261E33 !important;
  color: #fff;
}

#contents.inquiry .tblWrap .tblFoot tbody td strong {
  color: #fff;
}

#contents.inquiry .tblWrap tbody th,
#contents.inquiry .tblWrap tbody td {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  font-weight: normal;
  vertical-align: middle;
  border: 0 !important;
}

#contents.inquiry .tblWrap tbody th strong,
#contents.inquiry .tblWrap tbody td strong {
  color: #212121;
}

#contents.inquiry .tblWrap tbody th {
  padding-left: 15px;
  text-align: left;
  font-weight: 500;
}

#contents.inquiry .tblWrap tfoot th {
  font-weight: 500;
}

#contents.inquiry .tblWrap tfoot th,
#contents.inquiry .tblWrap tfoot td {
  color: #fff;
  background: #261E33;
}

#contents.inquiry .tblWrap tfoot th:nth-child(even),
#contents.inquiry .tblWrap tfoot td:nth-child(even) {
  background: #31293D;
}

#contents.inquiry .payment .date {
  display: block;
  margin-bottom: 5px;
  color: #212121;
}

#contents.inquiry .payment strong {
  color: #212121;
}

@media (min-width: 1025px) {
  #contents.inquiry .payment strong {
    font-size: 25px;
  }
}

@media (max-width: 1024px) {
  #contents.inquiry .payment strong {
    font-size: 22px;
    line-height: 34px;
  }
}

#contents.inquiry .payment strong em {
  color: #46296E;
}

#contents.inquiry .payment ul {
  margin-top: 25px;
}

@media (min-width: 1025px) {
  #contents.inquiry .payment ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #contents.inquiry .payment ul li+li {
    position: relative;
  }

  #contents.inquiry .payment ul li+li::before {
    margin: 0 25px;
    display: inline-block;
    content: "";
    vertical-align: middle;
    width: 1px;
    height: 15px;
    background: #E1E1E1;
  }
}

#contents.inquiry .payment ul .tit {
  padding-right: 12px;
}

@media (max-width: 1024px) {
  #contents.inquiry .payment ul .tit {
    display: inline-block;
    width: 95px;
  }
}

#contents.inquiry .payment ul .numb {
  font-weight: 700;
  color: #212121;
}

#contents.inquiry .payment .percentBar {
  position: relative;
}

#contents.inquiry .payment .barWrap {
  position: relative;
  margin-top: 54px;
  width: 100%;
  height: 5px;
  background: #f9f9f9;
  border-radius: 20px;
}

@media (max-width: 1024px) {
  #contents.inquiry .payment .barWrap {
    margin-top: 64px;
  }
}

#contents.inquiry .payment .barWrap .bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  background: #46296E;
  border-radius: 20px;
}

#contents.inquiry .payment .barWrap .bar .inner {
  position: relative;
}

#contents.inquiry .payment .barWrap .bar .inner:after {
  position: absolute;
  top: -5.5px;
  right: -13px;
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  background: #46296E;
  border-radius: 100%;
}

#contents.inquiry .payment .barWrap .bar .inner .toolTip {
  position: absolute;
  top: -50px;
  right: 0;
  transform: translateX(52%);
  display: inline-block;
  padding: 0 8px;
  height: 30px;
  line-height: 26px;
  color: #212121;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
}

#contents.inquiry .payment .barWrap .bar .inner .toolTip::before {
  position: relative;
  top: 28px;
  left: 48%;
  display: block;
  content: "";
  width: 8px;
  height: 1px;
  background: #fff;
}

#contents.inquiry .payment .barWrap .bar .inner .toolTip::after {
  position: relative;
  top: -1px;
  left: 50%;
  display: block;
  content: "";
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-width: 0 0 1px 1px;
  border-color: #c1c1c1;
  border-style: solid;
  transform: rotate(-45deg);
}

#contents.inquiry .amount .bgBox {
  margin-top: 20px;
}

@media (min-width: 1025px) {
  #contents.inquiry .amount .bgBox {
    padding: 40px 40px;
  }
}

@media (max-width: 1024px) {
  #contents.inquiry .amount .bgBox {
    padding: 30px 20px;
  }
}

@media (min-width: 1025px) {
  #contents.inquiry .amount .bgBox dl {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

@media (min-width: 1025px) {
  #contents.inquiry .amount .bgBox dl dt:after {
    display: inline-block;
    content: "";
    margin: 0 40px;
    width: 1px;
    height: 15px;
    vertical-align: middle;
    background: #E1E1E1;
  }
}

@media (min-width: 1025px) and (max-width: 1024px) {
  #contents.inquiry .amount .bgBox dl dt:after {
    margin: 0 20px;
  }
}

@media (max-width: 1024px) {
  #contents.inquiry .amount .bgBox dl dt {
    padding-bottom: 20px;
  }
}

@media (min-width: 1025px) {
  #contents.inquiry .amount .bgBox dl dd {
    padding-right: 12%;
  }

  #contents.inquiry .amount .bgBox dl dd:last-child {
    padding-right: 0;
  }
}

@media (max-width: 1024px) {
  #contents.inquiry .amount .bgBox dl dd {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #E1E1E1;
  }

  #contents.inquiry .amount .bgBox dl dd:last-child {
    padding-bottom: 0;
    margin: 0;
    border: 0;
  }
}

#contents.inquiry .amount .bgBox dl dd strong {
  color: #46296E;
}

#contents.inquiry .amount .bgBox dl dd span {
  padding-left: 15px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  line-height: unset;
}

@media (max-width: 640px) {
  #contents.inquiry .amount .bgBox dl dd span {
    padding-left: 0;
    display: block;
    margin-top: 8px;
  }
}

@media (min-width: 1025px) {
  #contents.inquiry .account .bgBox {
    padding: 50px 80px;
  }
}

@media (max-width: 1024px) {
  #contents.inquiry .account .bgBox {
    padding: 30px 20px;
  }
}

@media (min-width: 1025px) {
  #contents.inquiry .account .bgBox strong {
    padding-right: 15px;
    font-size: 20px;
  }

  #contents.inquiry .account .bgBox strong+span {
    font-size: 20px;
  }
}

@media (max-width: 1024px) {
  #contents.inquiry .account .bgBox strong {
    padding-right: 10px;
  }
}

#contents.inquiry .account .bgBox strong+span {
  font-weight: 700;
}

#contents.inquiry .account .bgBox dl {
  line-height: 1.5;
}

@media (min-width: 1025px) {
  #contents.inquiry .account .bgBox dl {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

@media (min-width: 1025px) {
  #contents.inquiry .account .bgBox dl dt {
    position: relative;
    font-size: 20px;
    padding-right: 20px;
    margin-right: 20px;
  }

  #contents.inquiry .account .bgBox dl dt:after {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    width: 1px;
    height: 15px;
    vertical-align: middle;
    background: #E1E1E1;
  }
}

@media (min-width: 1025px) and (max-width: 1024px) {
  #contents.inquiry .account .bgBox dl dt:after {
    margin: 0 20px;
  }
}

@media (max-width: 1024px) {
  #contents.inquiry .account .bgBox dl dt {
    padding-bottom: 20px;
  }
}

#contents.inquiry .account .bgBox dl dd {
  font-weight: 700;
}

@media (min-width: 1025px) {
  #contents.inquiry .account .bgBox dl dd {
    padding-right: 5%;
    font-size: 20px;
  }

  #contents.inquiry .account .bgBox dl dd:last-child {
    padding-right: 0;
  }
}

@media (max-width: 1024px) {
  #contents.inquiry .account .bgBox dl dd {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #E1E1E1;
  }

  #contents.inquiry .account .bgBox dl dd:last-child {
    padding-bottom: 0;
    margin: 0;
    border: 0;
  }
}

#contents.inquiry .banner {
  width: 100%;
  height: 200px;
  background: url("../images/gwell/page/banInquiry.jpg") no-repeat 55% 0/cover;
}

@media (min-width: 1025px) {
  #contents.inquiry .banner {
    padding: 60px 80px;
  }
}

@media (max-width: 1024px) {
  #contents.inquiry .banner {
    padding: 40px 40px;
    height: 150px;
  }
}

@media (max-width: 640px) {
  #contents.inquiry .banner {
    padding: 40px 30px;
  }
}

@media (max-width: 640px) {
  #contents.inquiry .banner {
    height: 194px;
  }
}

#contents.inquiry .banner p {
  color: #fff;
}

#contents.inquiry .banner .btn {
  margin-top: 10px;
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
  min-width: 100px;
  min-width: 140px !important;
  color: #212121;
}

#contents.inquiry .banner .btn::before,
#contents.inquiry .banner .btn::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.inquiry .banner .btn:not(:disabled):hover,
#contents.inquiry .banner .btn:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.inquiry .banner .btn:not(:disabled):hover::before,
#contents.inquiry .banner .btn:not(:disabled):hover::after,
#contents.inquiry .banner .btn:not(:disabled):focus::before,
#contents.inquiry .banner .btn:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.inquiry .banner .btn {
    font-size: 16px;
    font-size: 14px;
    min-width: 100px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.inquiry .banner .btn::before {
    margin-right: 10px;
  }

  #contents.inquiry .banner .btn::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #contents.inquiry .banner .btn {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.inquiry .banner .btn::before {
    margin-right: 14px;
  }

  #contents.inquiry .banner .btn::after {
    margin-left: 18px;
  }
}

#contents.inquiry .itemList dt {
  padding-bottom: 20px;
  color: #212121;
  font-weight: 700;
  border-bottom: 1px solid #E1E1E1;
}

#contents.inquiry .itemList dd {
  padding-top: 35px;
}

#contents.inquiry .itemList dd ul li {
  line-height: 32px;
}

#contents.inquiry .itemList dd ul li::before {
  top: 15px;
}

#contents.inquiry .footBox dl {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  background: #261E33;
}

@media (min-width: 1025px) {
  #contents.inquiry .footBox dl {
    margin-top: -100px;
    padding: 0 80px;
    height: 80px;
  }
}

@media (max-width: 1024px) {
  #contents.inquiry .footBox dl {
    padding: 0 40px;
    height: 70px;
  }
}

@media (max-width: 640px) {
  #contents.inquiry .footBox dl {
    padding: 0 20px;
    height: 60px;
  }
}

#contents.inquiry .footBox dl dt,
#contents.inquiry .footBox dl dd {
  color: #fff;
}

#contents.inquiry .footBox dl dd {
  font-weight: 500;
}

#contents.information .radio {
  margin-top: 10px;
}

#contents.information .radio label {
  margin-top: 0 !important;
}

@media (max-width: 640px) {
  #contents.information .radio label+label {
    margin-top: 10px !important;
  }
}

#contents.information .join {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 640px) {
  #contents.information .join form .label.phone.case div {
    margin: 0 -5px;
  }
}

@media (min-width: 1025px) {
  #contents.information .join form .label.phone.case div input {
    width: 142px !important;
  }
}

@media (max-width: 1024px) {
  #contents.information .join form .label.phone.case div input {
    width: calc(33.3% - 70px);
  }
}

@media (max-width: 640px) {
  #contents.information .join form .label.phone.case div input {
    width: calc(33.3% - 10px);
    margin: 10px 5px 0 5px;
  }
}

@media (max-width: 640px) {
  #contents.information .join form .label.phone.case div em {
    display: none;
  }
}

#contents.information .join form .label.phone.case div button {
  width: 154px;
  height: 60px;
}

@media (max-width: 1024px) {
  #contents.information .join form .label.phone.case div button {
    width: 160px;
    height: 45px;
    margin-left: 8px;
  }
}

@media (max-width: 640px) {
  #contents.information .join form .label.phone.case div button {
    width: calc(100% - 10px);
    margin: 10px auto 0;
  }
}

#contents.information .join form .label.phone.case+.phone div input {
  width: calc(33.3% - 14px) !important;
}

@media (max-width: 640px) {
  #contents.information .join form .label.phone.case+.phone div input {
    width: calc(33.3% - 10px) !important;
  }
}

#contents.information .icoBox {
  position: relative;
  background: #fff;
  margin-bottom: 20px;
  padding: 40px 40px 40px 100px;
  border: 1px solid #e9e9e9;
}

@media (max-width: 1024px) {
  #contents.information .icoBox {
    padding: 60px 20px 20px 20px !important;
  }
}

#contents.information .icoBox::before {
  content: "";
  position: absolute;
  top: calc(50% - 13px);
  left: 15px;
  width: 30px;
  height: 26px;
  text-align: left;
  z-index: 1;
}

#contents.information .icoBox.chk::before {
  left: 18px;
  width: 24px;
  height: 24px;
  background: url("../images/gwell/page/iconChk.svg") no-repeat 0 0/cover;
}

@media (max-width: 1024px) {
  #contents.information .icoBox.chk::before {
    width: 20px;
    height: 20px;
  }
}

#contents.information .icoBox::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 100%;
  background: #37234d;
  opacity: 0.08;
}

#contents.information .icoBox ul.mark li {
  margin-left: 20px;
  text-indent: -20px;
}

@media (max-width: 1024px) {
  #contents.information .icoBox ul.mark li {
    margin-left: 18px;
    text-indent: -18px;
  }
}

#contents.information .icoBox ul li {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  color: #212121;
  line-height: 28px;
}

@media (max-width: 1024px) {
  #contents.information .icoBox {
    padding: 70px 20px 20px 20px;
  }

  #contents.information .icoBox::before {
    top: 10px !important;
    left: calc(50% - 15px) !important;
  }

  #contents.information .icoBox.chk::before {
    left: calc(50% - 12px);
  }

  #contents.information .icoBox::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    opacity: 0.08;
  }

  #contents.information .icoBox ul li {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }

  #contents.information .icoBox ul li+li {
    margin-top: 5px;
  }
}

@media (max-width: 1024px) {

  #contents.information footer button,
  #contents.information footer .btn {
    max-width: 180px !important;
  }
}

#contents.contact .form {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#contents.contact>section.section {
  display: block !important;
}

#contents.contact>section>section:first-of-type {
  padding-top: 0 !important;
}

@media (max-width: 640px) {
  #contents.contact>section>section:first-of-type {
    margin-bottom: 40px;
  }
}

#contents.contact .bottomCont {
  background: #fff;
}

@media (min-width: 1025px) {
  #contents.contact .bottomCont {
    margin-top: -80px;
    padding: 80px 0 150px;
  }
}

@media (max-width: 1024px) {
  #contents.contact .bottomCont {
    padding: 40px 0 80px;
  }
}

#contents.contact .bottomCont h3 {
  width: 100%;
  padding-bottom: 20px;
  color: #212121;
}

#contents.contact .bottomCont h3+.essential {
  margin: -10px 0 30px;
  color: #37234D;
}

@media (max-width: 1024px) {
  #contents.contact .bottomCont h3+.essential {
    font-size: 14px;
  }
}

@media (max-width: 1024px) {
  #contents.contact .bottomCont h3 {
    font-size: 18px;
  }
}

#contents.contact .bottomCont>section {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
}

#contents.contact .bottomCont>section .icoBox {
  border: 1px solid #E1E1E1;
}

#contents.contact .bottomCont>section .form .selectBox>button {
  border: 1px solid #E1E1E1 !important;
}

#contents.contact .bottomCont>section .form input {
  border: 1px solid #E1E1E1 !important;
}

#contents.contact .bottomCont>section .form .textarea textarea {
  height: 150px;
  border: 1px solid #E1E1E1 !important;
  border-radius: 4px;
}

#contents.contact .bottomCont footer {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  #contents.contact .inquiry section+section {
    margin-top: -40px;
  }
}

@media (max-width: 1024px) {
  #contents.contact .inquiry .bgBox {
    margin-bottom: 40px;
  }
}

#contents.contact .inquiry .infoList ul {
  padding-bottom: 20px;
  border-bottom: 1px solid #E1E1E1;
}

@media (min-width: 1025px) {
  #contents.contact .inquiry .infoList ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

@media (min-width: 1025px) {
  #contents.contact .inquiry .infoList ul li {
    margin-right: 30px;
  }
}

@media (max-width: 1024px) {
  #contents.contact .inquiry .infoList ul li+li {
    margin-top: 12px;
  }
}

#contents.contact .inquiry .infoList ul li strong {
  font-weight: 500;
  padding-right: 10px;
}

#contents.contact .inquiry .infoList ul li span {
  color: #666;
}

#contents.contact .inquiry .cont {
  padding-top: 40px;
}

#contents.contact .inquiry .cont.working {
  padding-top: 0;
}

#contents.contact .inquiry .cont.working div {
  color: #212121 !important;
}

#contents.contact .inquiry .cont strong {
  display: block;
  color: #37234D;
}

@media (min-width: 1025px) {
  #contents.contact .inquiry .cont strong {
    padding-bottom: 20px;
  }
}

@media (max-width: 1024px) {
  #contents.contact .inquiry .cont strong {
    padding-bottom: 10px;
  }
}

#contents.contact .inquiry .cont div {
  word-break: break-all;
  color: #666;
}

@media (min-width: 1025px) {
  #contents.contact .inquiry .cont div {
    line-height: 28px;
  }
}

@media (max-width: 1024px) {
  #contents.contact .inquiry .cont div {
    line-height: 26px;
  }
}

#contents.notice>section.section {
  display: block !important;
}

#contents.notice>section>section:first-of-type {
  padding-top: 0 !important;
}

@media (max-width: 640px) {
  #contents.notice>section>section:first-of-type {
    margin-bottom: 40px;
  }
}

@media (min-width: 1025px) {
  #contents.notice .noticeList {
    margin-top: -40px;
  }
}

#contents.notice .noticeList .icoBox {
  margin-bottom: 35px;
}

#contents.notice .noticeList table td {
  color: #666 !important;
}

@media (max-width: 1024px) {
  #contents.notice .noticeList table {
    border-top: 1px solid #212121;
    border-bottom: 0;
  }

  #contents.notice .noticeList table thead {
    display: none;
  }

  #contents.notice .noticeList table tbody tr {
    position: relative;
    display: table;
  }

  #contents.notice .noticeList table tbody tr:hover td,
  #contents.notice .noticeList table tbody tr:focus td {
    font-weight: normal;
    color: #666 !important;
  }

  #contents.notice .noticeList table tbody tr:hover td.complex,
  #contents.notice .noticeList table tbody tr:focus td.complex {
    color: #37234D !important;
    font-weight: 700;
  }

  #contents.notice .noticeList table tbody td {
    display: table-row;
    border-bottom: 0;
  }

  #contents.notice .noticeList table tbody td.complex {
    width: 100%;
    font-weight: 700;
    color: #212121 !important;
  }

  #contents.notice .noticeList table tbody td.complex p {
    padding: 70px 10px 0 10px;
  }

  #contents.notice .noticeList table tbody td.title {
    width: 100%;
    font-size: 14px;
    line-height: 28px;
  }

  #contents.notice .noticeList table tbody td.title div {
    width: calc(100vw - 40px);
    padding-bottom: 25px;
    margin-top: 15px;
    border-bottom: 1px solid #c8c8c8;
  }

  #contents.notice .noticeList table tbody td.title div a {
    padding: 0 10px;
  }

  #contents.notice .noticeList table tbody td.date {
    position: absolute;
    display: block;
    top: 5px;
    left: 0;
    padding-left: 10px !important;
    font-size: 14px;
  }

  #contents.notice .noticeList table tbody td.date::after {
    display: inline-block;
    content: "";
    margin-left: 30px;
    width: 1px;
    height: 12px;
    background: #c8c8c8;
  }

  #contents.notice .noticeList table tbody td.date span {
    position: relative;
  }

  #contents.notice .noticeList table tbody td.download {
    position: absolute;
    display: block;
    top: 0;
    left: 130px;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    font-size: 14px;
    color: #666 !important;
  }
}

#details header p em {
  font-weight: 500;
}

#details header p em:after {
  display: inline-block;
  content: "";
  margin: 0 20px;
  vertical-align: -2px;
  width: 1px;
  height: 16px;
  background: #c8c8c8;
}

#details .articleDetail {
  padding-bottom: 60px;
}

#details .articleDetail img {
  width: 100%;
}

#details h2 {
  padding-bottom: 20px;
  color: #212121;
}

#details h2+.articleDetail {
  padding-top: 0 !important;
  letter-spacing: -0.15px;
  border-top: 0 !important;
}

@media (min-width: 1025px) {
  #details h2+.articleDetail {
    padding-bottom: 60px;
  }
}

@media (max-width: 1024px) {
  #details h2+.articleDetail {
    padding-bottom: 45px;
  }
}

#details .myinfoCont {
  margin-top: 0 !important;
  min-height: unset !important;
}

#details .myinfoCont .form {
  display: block;
}

@media (min-width: 1025px) {
  #details .myinfoCont .form .half {
    width: 50%;
  }
}

#details .myinfoCont .form .tip {
  margin-top: 15px;
  font-size: 14px;
  color: #999;
}

#details .myinfoCont .form .tip span {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 100%;
  border: 1px solid #999;
}

#details .myinfoCont .bgBox {
  margin-bottom: 40px;
}

#details .myinfoCont .download {
  margin-top: 0;
}

@media (min-width: 1025px) {
  #details .myinfoCont .download {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 50px;
  }
}

@media (max-width: 1024px) {
  #details .myinfoCont .download {
    margin-bottom: 30px;
  }
}

#details .myinfoCont .download button {
  background: #fff;
  color: #666;
  border: 1px solid #E1E1E1;
}

@media (min-width: 1025px) {
  #details .myinfoCont .download button {
    margin: 0 5px 10px 5px;
    width: calc(33.3333333333% - 10px);
    margin-left: 6.6666666667px;
  }

  #details .myinfoCont .download button:nth-of-type(3n+1),
  #details .myinfoCont .download button:first-of-type {
    margin-left: 0;
  }
}

@media (max-width: 1024px) {
  #details .myinfoCont .download button {
    margin-bottom: 15px;
    width: 100%;
  }
}

#details .myinfoCont .download button::before {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  width: 50px;
  height: 50px;
  background: #f2f2f2;
  border-radius: 0 3px 3px 0;
}

#details .myinfoCont .download button::after {
  -moz-filter: grayscale(0) brightness(0);
  -ms-filter: grayscale(0) brightness(0);
  -o-filter: grayscale(0) brightness(0);
  filter: grayscale(0) brightness(0);
}

#details .myinfoCont .download button:hover,
#details .myinfoCont .download button:focus {
  color: #fff;
  background: #37234D;
  border: 0;
}

#details .myinfoCont .download button:hover::before,
#details .myinfoCont .download button:focus::before {
  background-color: #4b395f;
}

#details .myinfoCont .download button:hover::after,
#details .myinfoCont .download button:focus::after {
  -moz-filter: grayscale(100) brightness(100);
  -ms-filter: grayscale(100) brightness(100);
  -o-filter: grayscale(100) brightness(100);
  filter: grayscale(100) brightness(100);
}

@media (max-width: 1024px) {
  #details .myinfoCont footer {
    max-width: 324px;
    margin: 0 auto 80px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 1025px) {
  #details .myinfoCont footer button {
    margin: 0 10px;
  }

  #details .myinfoCont footer button:first-child {
    min-width: 196px !important;
    width: 196px;
  }

  #details .myinfoCont footer button:last-child {
    min-width: 180px !important;
    width: 180px;
  }
}

@media (max-width: 1024px) {
  #details .myinfoCont footer button {
    margin: 0 5px;
  }

  #details .myinfoCont footer button:first-child {
    min-width: unset !important;
    width: 180px;
  }

  #details .myinfoCont footer button:last-child {
    min-width: unset !important;
    width: 130px;
  }
}

@media (min-width: 1025px) {
  #contents.salesList {
    min-height: unset;
  }
}

/* #contents.salesList > section {
  display: block !important;
} */
#contents.salesList>section .empty {
  margin-top: 0;
}

#contents.salesList>section .empty span::before {
  background: url("../images/gwell/page/imgResultNone04.svg") no-repeat center;
}

@media (min-width: 1025px) {
  #contents.salesList .contentNav {
    margin-bottom: 100px;
  }
}

#contents.myinfoCont .overall {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall {
    margin-top: -30px;
  }
}

#contents.myinfoCont .overall>section {
  width: 100%;
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section {
    margin-top: 40px;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section+section {
    margin-top: 68px;
  }
}

#contents.myinfoCont .overall>section>header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section>header {
    margin-bottom: 20px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section>header {
    margin-bottom: 17px;
  }
}

#contents.myinfoCont .overall>section>header a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
  min-width: 100px;
  width: 128px;
  color: #212121;
}

#contents.myinfoCont .overall>section>header a::before,
#contents.myinfoCont .overall>section>header a::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.myinfoCont .overall>section>header a:not(:disabled):hover,
#contents.myinfoCont .overall>section>header a:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.myinfoCont .overall>section>header a:not(:disabled):hover::before,
#contents.myinfoCont .overall>section>header a:not(:disabled):hover::after,
#contents.myinfoCont .overall>section>header a:not(:disabled):focus::before,
#contents.myinfoCont .overall>section>header a:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section>header a {
    font-size: 16px;
    font-size: 14px;
    min-width: 100px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.myinfoCont .overall>section>header a::before {
    margin-right: 10px;
  }

  #contents.myinfoCont .overall>section>header a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section>header a {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.myinfoCont .overall>section>header a::before {
    margin-right: 14px;
  }

  #contents.myinfoCont .overall>section>header a::after {
    margin-left: 18px;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section>.h1 {
    margin-bottom: 20px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section>.h1 {
    margin-bottom: 17px;
  }
}

#contents.myinfoCont .overall>section .empty {
  background: #fff url("../images/icon/iconEmpty2.svg") no-repeat;
  text-align: center;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section .empty {
    height: 403px;
    padding-top: 233px;
    background-position: center 110px;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section .empty {
    height: 157px;
    padding-top: 102px;
    background-position: center 30px;
    background-size: 50px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

#contents.myinfoCont .overall>section .empty b,
#contents.myinfoCont .overall>section .empty strong {
  color: #37234D;
}

#contents.myinfoCont .overall>section .mycontract {
  position: relative;
  background: #fff;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section .mycontract {
    min-height: 400px;
    padding-left: 400px;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section .mycontract .img {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 400px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section .mycontract .img {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
  }
}

#contents.myinfoCont .overall>section .mycontract .img span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section .mycontract .img span {
    bottom: 69px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section .mycontract .img span {
    bottom: 54px;
  }
}

#contents.myinfoCont .overall>section .mycontract .img em {
  position: absolute;
  right: 0;
  top: 0;
  background: #37234D;
  text-align: center;
  color: #fff;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section .mycontract .img em {
    width: 100px;
    line-height: 40px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section .mycontract .img em {
    width: 81px;
    line-height: 32px;
  }
}

#contents.myinfoCont .overall>section .mycontract .img dl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  background: #212121;
  color: #fff;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section .mycontract .img dl {
    height: 70px;
    padding: 0 30px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section .mycontract .img dl {
    height: 55px;
    padding: 0 25px;
  }
}

#contents.myinfoCont .overall>section .mycontract .img dl dt {
  margin-right: 22px;
}

#contents.myinfoCont .overall>section .mycontract .img dl dd {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  font-weight: 700;
}

#contents.myinfoCont .overall>section .mycontract .img dl dd p {
  padding-right: 22px;
}

#contents.myinfoCont .overall>section .mycontract .img dl dd div {
  position: relative;
  flex-grow: 1;
  border-radius: 3px;
  background: #E9E9E9;
  overflow: hidden;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section .mycontract .img dl dd div {
    height: 5px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section .mycontract .img dl dd div {
    height: 4px;
  }
}

#contents.myinfoCont .overall>section .mycontract .img dl dd div span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 0 3px 3px 0;
  background: #DAA23F;
}

#contents.myinfoCont .overall>section .mycontract ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section .mycontract ul {
    padding: 0 50px 45px 20px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section .mycontract ul {
    padding: 0 20px 30px;
  }
}

#contents.myinfoCont .overall>section .mycontract ul li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  word-break: keep-all;
  color: #212121;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section .mycontract ul li {
    padding-top: 52px;
    padding-left: 30px;
  }

  #contents.myinfoCont .overall>section .mycontract ul li.half {
    width: 50%;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section .mycontract ul li {
    padding-top: 32px;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section .mycontract ul li strong {
    padding-right: 18px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section .mycontract ul li strong {
    width: 34.65%;
    max-width: 125px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section .mycontract ul li p {
    min-width: 65.35%;
    max-width: calc(100% - 125px);
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section .mycontract ul li p.addr {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: -6px;
    width: calc(100% - 128px);
  }

  #contents.myinfoCont .overall>section .mycontract ul li p.addr span {
    margin-right: 40px;
  }
}

#contents.myinfoCont .overall>section .mycontract ul li button {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
  min-width: 100px;
}

#contents.myinfoCont .overall>section .mycontract ul li button::before,
#contents.myinfoCont .overall>section .mycontract ul li button::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

#contents.myinfoCont .overall>section .mycontract ul li button:not(:disabled):hover,
#contents.myinfoCont .overall>section .mycontract ul li button:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

#contents.myinfoCont .overall>section .mycontract ul li button:not(:disabled):hover::before,
#contents.myinfoCont .overall>section .mycontract ul li button:not(:disabled):hover::after,
#contents.myinfoCont .overall>section .mycontract ul li button:not(:disabled):focus::before,
#contents.myinfoCont .overall>section .mycontract ul li button:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section .mycontract ul li button {
    font-size: 16px;
    font-size: 14px;
    min-width: 100px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.myinfoCont .overall>section .mycontract ul li button::before {
    margin-right: 10px;
  }

  #contents.myinfoCont .overall>section .mycontract ul li button::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section .mycontract ul li button {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  #contents.myinfoCont .overall>section .mycontract ul li button::before {
    margin-right: 14px;
  }

  #contents.myinfoCont .overall>section .mycontract ul li button::after {
    margin-left: 18px;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section .mycontract ul li button {
    width: 128px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section .mycontract ul li button {
    margin-top: 17px;
    width: 100px;
  }
}

#contents.myinfoCont .overall>section.priceInfo>ul {
  background: #fff;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.priceInfo>ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 53px 0 47px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.priceInfo>ul {
    padding: 0 20px;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.priceInfo>ul li {
    width: 50%;
    padding: 0 70px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.priceInfo>ul li {
    padding: 32px 0 30px;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.priceInfo>ul li+li {
    border-left: 1px solid #E5E5E5;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.priceInfo>ul li+li {
    border-top: 1px solid #E5E5E5;
  }
}

#contents.myinfoCont .overall>section.priceInfo>ul li>p {
  font-weight: 300;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.priceInfo>ul li>p {
    margin-bottom: 33px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.priceInfo>ul li>p {
    margin-bottom: 30px;
  }
}

#contents.myinfoCont .overall>section.priceInfo>ul li>p strong {
  color: #46296E;
}

#contents.myinfoCont .overall>section.priceInfo>ul li section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

#contents.myinfoCont .overall>section.priceInfo>ul li section h1 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid #212121;
  font-weight: 400;
}

#contents.myinfoCont .overall>section.priceInfo>ul li section strong span {
  position: relative;
  display: inline-block;
  margin-left: 23px;
  padding-left: 30px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #666;
}

@media (max-width: 640px) {
  #contents.myinfoCont .overall>section.priceInfo>ul li section strong span {
    display: block;
    margin-top: 13px;
    margin-left: 0;
  }
}

#contents.myinfoCont .overall>section.priceInfo>ul li section strong span::before,
#contents.myinfoCont .overall>section.priceInfo>ul li section strong span::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
}

#contents.myinfoCont .overall>section.priceInfo>ul li section strong span::before {
  content: "";
  background: #D82220;
  border-radius: 50%;
}

#contents.myinfoCont .overall>section.priceInfo>ul li section strong span::after {
  content: "!";
  text-align: center;
  line-height: 20px;
  color: #fff;
}

#contents.myinfoCont .overall>section.reserveInfo>div {
  background: #fff;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.reserveInfo>div {
    padding: 53px 70px 58px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.reserveInfo>div {
    padding: 32px 20px 30px;
  }
}

#contents.myinfoCont .overall>section.reserveInfo>div strong {
  display: block;
  padding-bottom: 17px;
  border-bottom: 1px solid #E5E5E5;
}

#contents.myinfoCont .overall>section.reserveInfo>div dl {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 16px;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.reserveInfo>div dl {
    padding-top: 26px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.reserveInfo>div dl {
    padding-top: 23px;
  }
}

#contents.myinfoCont .overall>section.reserveInfo>div dl dt {
  font-weight: 500;
  color: #212121;
  border-right: 1px solid #c8c8c8;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.reserveInfo>div dl dt {
    width: 80px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.reserveInfo>div dl dt {
    width: 62px;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.reserveInfo>div dl dt:not(:first-child) {
    margin-left: 80px;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.reserveInfo>div dl dd {
    padding-left: 20px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.reserveInfo>div dl dd {
    width: calc(100% - 62px);
    padding-left: 10px;
  }
}

@media (max-width: 1024px) {

  #contents.myinfoCont .overall>section.reserveInfo>div dl dt:not(:first-of-type),
  #contents.myinfoCont .overall>section.reserveInfo>div dl dd:not(:first-of-type) {
    margin-top: 23px;
  }
}

#contents.myinfoCont .overall>section.reserveInfo>ul {
  background: #fff;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.reserveInfo>ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    padding: 50px 0;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.reserveInfo>ul {
    padding: 10px 20px 27px;
  }
}

#contents.myinfoCont .overall>section.reserveInfo>ul li {
  position: relative;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.reserveInfo>ul li {
    width: 33.3333333333%;
    padding-left: 70px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.reserveInfo>ul li {
    padding-top: 25px;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.reserveInfo>ul li+li {
    border-left: 1px solid #c8c8c8;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.reserveInfo>ul li+li {
    margin-top: 18px;
    border-top: 1px solid #E5E5E5;
  }
}

#contents.myinfoCont .overall>section.reserveInfo>ul li strong {
  display: block;
}

#contents.myinfoCont .overall>section.reserveInfo>ul li button {
  position: absolute;
  width: 107px;
  height: 36px;
  background: #37234D;
  border-radius: 18px;
  color: #fff;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.reserveInfo>ul li button {
    top: 0;
    right: 30px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.reserveInfo>ul li button {
    top: 20px;
    right: 0;
  }
}

#contents.myinfoCont .overall>section.reserveInfo>ul li button:disabled {
  display: none;
}

#contents.myinfoCont .overall>section.reserveInfo>ul li p {
  position: relative;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.reserveInfo>ul li p {
    margin-top: 32px;
    padding-left: 16px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.reserveInfo>ul li p {
    margin-top: 15px;
    padding-left: 16px;
  }
}

#contents.myinfoCont .overall>section.reserveInfo>ul li p:not(.case) {
  font-weight: 700;
  color: #37234D;
}

#contents.myinfoCont .overall>section.reserveInfo>ul li p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #212121;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.notice {
    width: calc(50% - 15px);
  }
}

#contents.myinfoCont .overall>section.notice>ul {
  background: #fff;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.notice>ul {
    padding: 30px 30px 47px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.notice>ul {
    padding: 13px 20px 30px;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.notice>ul li {
    padding-top: 32px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.notice>ul li {
    padding-top: 20px;
  }
}

#contents.myinfoCont .overall>section.notice>ul li+li {
  border-top: 1px solid #E5E5E5;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.notice>ul li+li {
    margin-top: 30px;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.notice>ul li+li {
    margin-top: 20px;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.notice>ul li a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
  }
}

#contents.myinfoCont .overall>section.notice>ul li a:hover,
#contents.myinfoCont .overall>section.notice>ul li a:focus {
  font-weight: 700;
  color: #37234D;
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.notice>ul li p {
    width: calc(100% - 140px);
    display: block;
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    max-height: 3.5em;
    line-height: 1.75 !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: break-spaces;
    height: 3.5em;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.notice>ul li p {
    display: block;
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    max-height: 5.13em;
    line-height: 1.71 !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: break-spaces;
  }
}

@media (min-width: 1025px) {
  #contents.myinfoCont .overall>section.notice>ul li span {
    width: 140px;
    text-align: right;
  }
}

@media (max-width: 1024px) {
  #contents.myinfoCont .overall>section.notice>ul li span {
    display: block;
    margin-top: 22px;
  }
}

#contents.myinfoCont .overall>section.notice .empty {
  background-image: url("../images/icon/iconEmptyNotice.svg");
}

#contents.myinfoCont .overall>section.notice+.notice .empty {
  background-image: url("../images/icon/iconEmptyInquiry.svg");
}

#contents.myinfoCont .overall>section.interested .list {
  padding-left: 0;
  padding-right: 0;
}

#contents.myinfoCont .overall>section.interested .empty {
  background-image: url("../images/icon/iconEmptyInterest.svg");
}

.popup>div .notice span#cpx_address {
  margin-top: 0;
}

@media (max-width: 1024px) {
  .popup>div .notice span#cpx_address {
    width: 100%;
  }
}

.popup .full {
  padding-bottom: 30px;
}

@media (max-width: 1024px) {
  .popup .full .sentenceCase {
    line-height: 24px !important;
    font-size: 14px !important;
    word-break: keep-all;
  }
}

@media (min-width: 1025px) {
  .popup .br {
    display: none;
  }
}

.popup .desc {
  margin: 15px 0 0 17px;
  text-indent: -17px;
}

.popup .btTxt {
  width: 100% !important;
  letter-spacing: -0.5px !important;
  word-break: break-all !important;
  font-size: 16px;
  color: #212121 !important;
}

.popup .icoBox {
  position: relative;
  margin-top: 30px;
  padding: 90px 20px 40px 20px;
  border: 1px solid #e9e9e9;
  background: #fff;
}

@media (max-width: 1024px) {
  .popup .icoBox {
    padding: 73px 20px 20px 20px;
  }
}

.popup .icoBox p {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  word-break: break-all;
  letter-spacing: -0.9px;
}

@media (max-width: 1024px) {
  .popup .icoBox p {
    width: 100%;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }
}

.popup .icoBox::before {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% - 13px);
  width: 30px;
  height: 26px;
  text-align: left;
  z-index: 1;
}

@media (max-width: 1024px) {
  .popup .icoBox::before {
    width: 24px;
    height: 24px;
  }
}

.popup .icoBox.warning::before {
  background: url("../images/gwell/page/iconWarning.svg") no-repeat 0 0/cover;
}

@media (max-width: 1024px) {
  .popup .icoBox.warning::before {
    background-size: 24px;
  }
}

.popup .icoBox.warning::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  opacity: 0.08;
  background: #d82220;
}

@media (max-width: 1024px) {
  .popup .icoBox.warning::after {
    height: 50px;
  }
}

.popup form+.bd {
  margin-top: 30px;
}

@media (max-width: 1024px) {
  .popup form .selectBox {
    height: 45px;
  }

  .popup form .selectBox>button {
    height: 45px;
  }
}

.popup .winBox {
  margin-top: 40px;
  width: 100%;
  height: 135px;
  text-align: center;
  background: #37234D url("../images/gwell/page/bgWinnerBox.jpg") no-repeat 0 0/cover;
}

@media (max-width: 640px) {
  .popup .winBox {
    height: 100px;
    background-position: -25px 0;
  }
}

.popup .winBox p {
  line-height: 135px;
  color: #fff;
  font-weight: 500;
}

@media (max-width: 640px) {
  .popup .winBox p {
    line-height: 100px;
  }
}

.popup .failBox {
  margin-top: 40px;
  width: 100%;
  height: 100%;
  background: #f9f9f9;
}

.popup .failBox p {
  font-weight: 700;
  color: #212121;
  background: url("../images/gwell/page/imgFailBox.svg") no-repeat 85px 45px;
  background-size: 70px 70px;
}

@media (min-width: 1025px) {
  .popup .failBox p {
    padding: 52px 0 52px 170px;
  }
}

@media (max-width: 1024px) {
  .popup .failBox p {
    padding: 150px 0 40px;
    text-align: center;
    background-position: center 45px;
  }
}

.popup .download {
  margin: 30px 0 40px;
  width: 100%;
}

.popup .download button {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
  width: 100%;
  background: #46296E;
  border: 0;
  color: #fff;
}

.popup .download button::before,
.popup .download button::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

.popup .download button::after {
  content: "";
  margin-top: -2px !important;
  background-image: url("../images/icon/iconDownload2.svg");
}

.popup .download button:not(:disabled):hover,
.popup .download button:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

.popup .download button:not(:disabled):hover::before,
.popup .download button:not(:disabled):hover::after,
.popup .download button:not(:disabled):focus::before,
.popup .download button:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {
  .popup .download button {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
  }

  .popup .download button::before {
    margin-right: 10px;
  }

  .popup .download button::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {
  .popup .download button {
    font-size: 14px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
  }

  .popup .download button::before {
    margin-right: 14px;
  }

  .popup .download button::after {
    margin-left: 18px;
  }
}

.popup .download button::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

.popup .map {
  position: relative;
}

@media (max-width: 1024px) {
  .popup .map {
    margin-top: 30px;
  }
}

.popup .map img {
  width: 100%;
}

.popup .map .zoom {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0.5rem;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  opacity: 0.9;
  background: #fff;
}

@media (max-width: 1024px) {
  .popup .map .zoom {
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
  }
}

.popup .map .zoom:after {
  display: block;
  content: "";
  margin: 4px auto;
  width: 20px;
  height: 20px;
  background: url("../images/icon/iconZoom4.svg") no-repeat 0 0/cover;
}

@media (max-width: 1024px) {
  .popup .map .zoom:after {
    margin: 0 auto;
  }
}

.popup .line {
  padding-bottom: 40px;
  border-bottom: 1px solid #c8c8c8;
}

.popup .line:first-of-type {
  margin-top: 15px;
}

@media (max-width: 1024px) {
  .popup .line:first-of-type {
    margin-top: 10px;
  }
}

.popup .line h2 {
  padding: 40px 0 20px;
  font-weight: normal;
}

.popup .chooseUnit {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  overflow-y: auto;
  max-height: 220px;
}

@media (max-width: 1024px) {
  .popup .chooseUnit {
    padding: 0;
  }
}

@media (min-width: 1025px) {
  .popup .chooseUnit button {
    width: calc(33.3333333333% - 6.6666666667px);
    height: 50px;
    margin-top: 10px;
    margin-left: 10px;
  }

  .popup .chooseUnit button:nth-of-type(3n+1),
  .popup .chooseUnit button:first-child {
    margin-left: 0;
  }

  .popup .chooseUnit button:nth-child(-n+3) {
    margin-top: 0;
  }
}

@media (max-width: 1024px) {
  .popup .chooseUnit button {
    width: calc(50% - 5px);
    height: 46px;
    margin-top: 5px;
  }

  .popup .chooseUnit button:nth-of-type(even) {
    margin-left: 5px;
  }

  .popup .chooseUnit button:nth-child(-n+2) {
    margin-top: 0;
  }
}

.popup .chooseUnit button:not(.active):not(:disabled) {
  border: 1px solid #E1E1E1;
}

.popup .chooseUnit button.active {
  background: #46296E;
  color: #fff;
}

@media (min-width: 1025px) {
  .popup .chooseUnit button:disabled {
    background: #e9e9e9;
  }
}

@media (max-width: 1024px) {
  .popup .chooseUnit button:disabled {
    background: #f6f6f6;
  }
}

.popup .bottomTxt {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

@media (max-width: 1024px) {
  .popup .bottomTxt {
    margin-top: 30px;
  }
}

.popup .bottomTxt dd {
  font-weight: 700;
  color: #46296E;
}

.popup .bottomTxt dd:before {
  display: inline-block;
  content: "";
  margin: 0 15px;
  width: 1px;
  height: 15px;
  background: #c8c8c8;
}

.popup footer {
  text-align: center;
}

@media (min-width: 1025px) {
  .popup footer {
    padding-top: 40px;
  }
}

@media (max-width: 1024px) {
  .popup footer {
    padding-top: 30px;
  }
}

.popup footer button,
.popup footer a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #c8c8c8;
  background-color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
  padding: 0 50px !important;
}

.popup footer button::before,
.popup footer button::after,
.popup footer a::before,
.popup footer a::after {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}

.popup footer button:not(:disabled):hover,
.popup footer button:not(:disabled):focus,
.popup footer a:not(:disabled):hover,
.popup footer a:not(:disabled):focus {
  border-color: #46296E;
  background: #46296E;
  color: #fff;
}

.popup footer button:not(:disabled):hover::before,
.popup footer button:not(:disabled):hover::after,
.popup footer button:not(:disabled):focus::before,
.popup footer button:not(:disabled):focus::after,
.popup footer a:not(:disabled):hover::before,
.popup footer a:not(:disabled):hover::after,
.popup footer a:not(:disabled):focus::before,
.popup footer a:not(:disabled):focus::after {
  -moz-filter: grayscale(1) brightness(100);
  -ms-filter: grayscale(1) brightness(100);
  -o-filter: grayscale(1) brightness(100);
  filter: grayscale(1) brightness(100);
  opacity: 1;
}

@media (min-width: 1025px) {

  .popup footer button,
  .popup footer a {
    font-size: 16px;
    min-width: 180px;
    height: 60px;
    padding: 0 20px;
    border-radius: 30px;
  }

  .popup footer button::before,
  .popup footer a::before {
    margin-right: 10px;
  }

  .popup footer button::after,
  .popup footer a::after {
    margin: 0 2px 0 15px;
  }
}

@media (max-width: 1024px) {

  .popup footer button,
  .popup footer a {
    font-size: 14px;
    min-width: 180px;
    font-size: 16px;
    height: 50px;
    padding: 0 18px;
    border-radius: 25px;
  }

  .popup footer button::before,
  .popup footer a::before {
    margin-right: 14px;
  }

  .popup footer button::after,
  .popup footer a::after {
    margin-left: 18px;
  }
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo {
    padding-top: 40px;
  }
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo {
    padding-top: 30px;
  }
}

.popup .gwell .caseInfo h2 {
  margin-bottom: 20px;
  color: #37234D;
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo h2 {
    padding-top: 14px;
  }
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo:first-of-type h2 {
    padding-top: 0;
  }
}

.popup .gwell .caseInfo dl,
.popup .gwell .caseInfo ol {
  border: 1px solid #E1E1E1;
}

@media (min-width: 1025px) {

  .popup .gwell .caseInfo dl,
  .popup .gwell .caseInfo ol {
    padding: 40px;
  }
}

@media (max-width: 1024px) {

  .popup .gwell .caseInfo dl,
  .popup .gwell .caseInfo ol {
    padding: 20px;
  }
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo ol {
    padding-left: calc(40px + 0.6em);
  }
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo ol {
    padding-left: calc(20px + 1em);
  }
}

.popup .gwell .caseInfo ol.none {
  padding-left: 20px;
}

.popup .gwell .caseInfo ol.none li {
  list-style: none;
}

.popup .gwell .caseInfo ol li {
  letter-spacing: -1px;
  line-height: 30px;
}

.popup .gwell .caseInfo ol.icoBox {
  position: relative;
  padding: 90px 30px 30px 30px;
}

.popup .gwell .caseInfo ol.icoBox li {
  list-style: none;
  color: #212121;
}

.popup .gwell .caseInfo ol.icoBox.chk::before {
  position: absolute;
  display: block;
  content: "";
  top: 18px;
  left: calc(50% - 12px);
  width: 24px;
  height: 24px;
  background: url("../images/gwell/page/iconChk.svg") no-repeat 0 0/cover;
}

.popup .gwell .caseInfo ol.icoBox::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #37234d;
  opacity: 0.08;
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo ul.mark {
    margin-top: -10px;
  }
}

.popup .gwell .caseInfo ul.mark li {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.015em;
  margin-left: 20px;
  text-indent: -20px;
  line-height: 28px;
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo ul.mark li {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }
}

.popup .gwell .caseInfo p.mark,
.popup .gwell .caseInfo span.mark {
  text-indent: -20px;
  margin-left: 20px;
}

.popup .gwell .caseInfo.case2 .inner {
  border: 1px solid #E1E1E1;
  padding: 40px;
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo.case2 .inner {
    padding: 20px;
  }
}

.popup .gwell .caseInfo.case2 dl {
  padding: 40px 0;
  border: 0;
  border-bottom: 1px solid #E1E1E1;
}

.popup .gwell .caseInfo.case2 dl:first-child {
  padding-top: 0;
}

.popup .gwell .caseInfo.case2 dl:last-child {
  padding: 0 !important;
  border-bottom: 0;
}

.popup .gwell .caseInfo.case2 dl+dl {
  padding-bottom: 25px !important;
  border-top: 0;
  border-bottom: 0;
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo.case2 dl {
    padding: 20px 0;
  }
}

.popup .gwell .caseInfo dl {
  color: #212121;
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dl {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dl.long dt {
    width: 150px;
  }
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dl.long dd {
    width: calc(100% - 150px);
  }
}

.popup .gwell .caseInfo dl.short {
  padding-right: 0;
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dl.short dt {
    width: 68px;
  }
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dl.short dd {
    width: calc(100% - 80px);
  }
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dt {
    width: 120px;
  }
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo dt {
    margin-bottom: 8px;
  }
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dt:not(:first-of-type) {
    margin-top: 27px;
  }
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo dt:not(:first-of-type) {
    margin-top: 17px;
  }
}

.popup .gwell .caseInfo dd {
  font-weight: 700;
  letter-spacing: -1px;
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dd {
    width: calc(100% - 120px);
  }
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dd:not(:first-of-type) {
    margin-top: 27px;
  }
}

.popup .gwell .caseInfo dd>span {
  width: unset !important;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo dd>span {
    margin-top: 7px;
  }
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo dd>span {
    margin-top: 3px;
  }
}

.popup .gwell .caseInfo dd>span.circle {
  display: inline;
  width: auto !important;
}

.popup .gwell .caseInfo dd>span.circle span {
  display: inline-block;
  vertical-align: middle;
  margin-top: 0;
  margin-left: 4px;
  width: 6px !important;
  height: 6px;
  border-radius: 100%;
  background: #212121;
}

.popup .gwell .caseInfo dd ul li {
  letter-spacing: -0.25px;
}

.popup .gwell .caseInfo dd p {
  margin-top: 20px;
  font-weight: normal;
  line-height: 24px;
  font-size: 14px;
}

.popup .gwell .caseInfo p {
  font-size: 16px;
  color: #666;
}

.popup .gwell .caseInfo .infoBox {
  padding-top: 40px;
  padding-bottom: 40px;
  background: #f9f9f9;
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo .infoBox {
    padding-left: calc(40px + 0.6em);
  }
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo .infoBox {
    padding-left: calc(20px + 1em);
  }
}

.popup .gwell .caseInfo .infoBox p {
  padding-top: 20px;
}

.popup .gwell .caseInfo .infoBox+.desc {
  margin-top: 20px;
  font-size: 15px;
  color: #212121;
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo .infoBox+.desc {
    font-size: 14px;
    line-height: 24px;
  }
}

.popup .gwell .caseInfo .bgBox {
  padding: 50px 0;
  background: #f9f9f9;
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo .bgBox {
    padding-top: 100px;
  }
}

.popup .gwell .caseInfo .bgBox .infoTxt {
  position: relative;
  font-weight: 700;
  color: #212121;
}

.popup .gwell .caseInfo .bgBox .infoTxt::before {
  position: absolute;
  top: -7px;
  left: 0;
  display: block;
  content: "";
  width: 70px;
  height: 70px;
  background: url("../images/gwell/page/icoIdentity.svg") no-repeat 0 0/cover;
}

@media (min-width: 1025px) {
  .popup .gwell .caseInfo .bgBox .infoTxt {
    width: 316px;
    padding-left: 84px;
    margin: 0 auto;
    text-align: left;
  }
}

@media (max-width: 1024px) {
  .popup .gwell .caseInfo .bgBox .infoTxt {
    padding-top: 10px;
    text-align: center;
  }

  .popup .gwell .caseInfo .bgBox .infoTxt::before {
    top: -70px;
    left: calc(50% - 35px);
  }
}

.printWrapper {
  position: relative;
  padding: 20px 0 50px;
  float: none;
  max-width: 700px !important;
}

.printWrapper h1 {
  padding-bottom: 30px;
  font-size: 22.5px;
  text-align: center;
}

.printWrapper button {
  position: absolute;
  top: 0px;
  right: 0;
  display: block;
  width: 20px;
  height: 20px;
  text-indent: -9999px;
  background: url("../images/gwell/page/icoPrint.svg") no-repeat 0 0/cover;
}

.printWrapper table {
  width: 100%;
  word-break: keep-all;
  border-spacing: 0;
  border-collapse: collapse;
  letter-spacing: -0.25px;
}

.printWrapper table thead th {
  padding: 15px 10px;
  text-align: left;
  font-size: 15px;
  font-weight: normal;
  border-top: 2px solid #212121;
  border-bottom: 1px solid #212121;
  background: #f1f1f1;
}

.printWrapper table tbody tr th,
.printWrapper table tbody tr td {
  padding: 20px 10px;
  text-align: left;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.14;
  border-bottom: 1px solid #666;
}

.printWrapper table tbody tr td {
  border-left: 1px solid #666;
}

.printWrapper table tfoot th {
  padding: 50px 0;
  text-align: center;
  font-size: 17.5px;
  font-weight: 500;
  border-bottom: 2px solid #212121;
}

.printWrapper ul li {
  position: relative;
  padding: 20px 10px 0;
  height: 120px;
  letter-spacing: -0.25px;
  border-bottom: 1px solid #666;
}

.printWrapper ul li p {
  font-size: 15px;
  font-weight: normal;
  text-align: left;
  line-height: 1.67;
}

.printWrapper ul li p:last-child {
  position: absolute;
  bottom: 15px;
  right: 10px;
  text-align: right;
}

.printWrapper ul li p:last-child span {
  position: relative;
  display: block;
  padding-right: 85px;
}

.printWrapper ul li p:last-child span:after {
  position: absolute;
  bottom: -10px;
  right: 0;
  display: block;
  content: "";
  width: 75px;
  height: 75px;
  background: url("../images/gwell/page/imgStamp.svg") no-repeat 0 0/cover;
}

.tab::-webkit-scrollbar {
  display: none;
}

.locationContentPop span {
  width: unset !important;
  margin: 0 0 15px !important;
}

#popCancel.popup .notice p {
  width: unset !important;
  margin-top: 10px;
}

@media (max-width: 1024px) {
  #contents.issue .tblWrap table.case3 thead {
    width: 95px;
  }

  #contents.issue .tblWrap table.case3 th+th::before {
    display: none;
  }

  #contents.issue .tblWrap table.case3 tbody {
    width: calc(100% - 95px);
  }

  #contents.issue .tblWrap table.case3 td+td::before {
    display: none;
  }
}

#contents.notice table tbody td.emptyNoticeTable {
  background-image: url("../images/icon/iconEmptyNotice.svg");
  background-repeat: no-repeat;
  text-align: center;
  color: #212121 !important;
}

#contents.notice table tbody td.emptyNoticeTable:hover,
#contents.notice table tbody td.emptyNoticeTable:focus {
  font-weight: 400 !important;
  color: #212121 !important;
}

#contents.notice table tbody td.emptyNoticeTable b {
  color: #37234D;
}

@media (min-width: 1025px) {
  #contents.notice table tbody td.emptyNoticeTable {
    padding-top: 175px !important;
    padding-bottom: 75px !important;
    background-position: center 60px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}

@media (max-width: 1024px) {
  #contents.notice table tbody td.emptyNoticeTable {
    padding-top: 86px !important;
    background-position: center 30px;
    background-size: 50px;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.015em;
    display: table-cell;
    width: calc(100vw - 40px);
    text-align: center !important;
  }
}

@media (min-width: 1025px) {
  #contents.issue .form>div.caseMargin {
    margin-top: 80px !important;
  }
}

@media (max-width: 1024px) {
  #contents.issue .form>div.caseMargin {
    margin-top: 55px !important;
  }
}

.icoBox .listDot li {
  position: relative;
  padding-left: 0.8125em;
}

.icoBox .listDot li::before {
  position: absolute;
  top: 0.8em;
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #212121;
  left: 0;
}

#contents.salesList .calendar {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  min-width: 315px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

@media (min-width: 1025px) {
  #contents.salesList .calendar {
    margin-top: 70px !important;
  }
}

@media (max-width: 1024px) {
  #contents.salesList .calendar {
    margin-top: 40px !important;
  }
}

#contents.reservation .tab>*,
#contents.faq .tab>*,
#contents.info section.faq .tab>*,
#contents.salesList .tab>* {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  min-width: 110px;
  padding: 0 33px;
  border-radius: 22px;
}

@media (min-width: 1025px) {

  #contents.reservation .tab>*,
  #contents.faq .tab>*,
  #contents.info section.faq .tab>*,
  #contents.salesList .tab>*,
  #contents.salesList .tab>*+* {
    height: 44px;
  }
}

@media (max-width: 1024px) {

  #contents.reservation .tab>*,
  #contents.faq .tab>*,
  #contents.info section.faq .tab>*,
  #contents.salesList .tab>* {
    height: 40px;
  }
}

.banners>ul li p,
.banners>div p,
.banner>ul li p,
.banner>div p {
  z-index: 1;
  position: relative;
  font-weight: 300;
  word-break: keep-all;
  color: #f9f9f9;
}

@media (min-width: 1025px) {

  .banners>ul li p,
  .banners>div p {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
}


@media (max-width: 640px) {

  .banners>ul li p,
  .banners>div p {
    width: 100%;
  }
}

@media (max-width: 1024px) {

  .banners>ul li p,
  .banners>div p {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

.banners > ul li.bg1::before, .banners > div.bg1::before, .banner > ul li.bg1::before, .banner > div.bg1::before {
  background-image: url(../images/gwell/bgBanner1.jpg);
}

.banners > ul li.bg2::before, .banners > div.bg2::before, .banner > ul li.bg2::before, .banner > div.bg2::before {
  background-image: url(../images/gwell/bgBanner2.jpg);
}

#contents.reservation > section > .empty span::before {
  content: "";
  display: block;
  background: url(../images/gwell/logo.svg) no-repeat center;
  background-size: 100%;
}

@media (min-width: 1025px) {
  #contents.reservation > section > .empty span::before {
      margin-bottom: 35px;
      width: 200px;
      height: 46px;
  }
}

@media (max-width: 1024px) {
  #contents.reservation > section > .empty span::before {
      margin-bottom: 20px;
      width: 130px;
      height: 30px;
  }
}